school-manage/src/views/app/business/recharge/recharge.vue

<template>
	<div class="search">
		<Card>
			<Row v-show="openSearch" @keydown.enter.native="handleSearch">
				<Form ref="searchForm" :model="searchForm" inline :label-width="70">
					<FormItem label="商家名" prop="rechargeId">
						<Input type="text" v-model="searchForm.name" placeholder="请输入商家名" clearable
							style="width: 200px" />
					</FormItem>
					<FormItem label="状态" prop="rechargeName">
						<Input type="text" v-model="searchForm.rechargeName" placeholder="状态" clearable
							style="width: 200px" />
					</FormItem>
					<FormItem style="margin-left: -35px" class="br">
						<Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
						<Button @click="handleReset">重置</Button>
					</FormItem>
				</Form>
			</Row>
			<Row align="middle" justify="space-between" class="operation">
				<div class="icons">
					<Tooltip content="刷新" placement="top" transfer>
						<Icon type="md-refresh" size="18" class="item" @click="getDataList" />
					</Tooltip>
					<Tooltip :content="openSearch ? '关闭搜索' : '开启搜索'" placement="top" transfer>
						<Icon type="ios-search" size="18" class="item tip" @click="openSearch = !openSearch" />
					</Tooltip>
					<Tooltip :content="openTip ? '关闭提示' : '开启提示'" placement="top" transfer>
						<Icon type="md-bulb" size="18" class="item tip" @click="openTip = !openTip" />
					</Tooltip>
					<Tooltip content="表格密度" placement="top" transfer>
						<Dropdown @on-click="changeTableSize" trigger="click">
							<Icon type="md-list" size="18" class="item" />
							<DropdownMenu slot="list">
								<DropdownItem :selected="tableSize == 'default'" name="default">默认</DropdownItem>
								<DropdownItem :selected="tableSize == 'large'" name="large">宽松</DropdownItem>
								<DropdownItem :selected="tableSize == 'small'" name="small">紧密</DropdownItem>
							</DropdownMenu>
						</Dropdown>
					</Tooltip>
				</div>
			</Row>
			<Alert show-icon v-show="openTip">
				已选择
				<span class="select-count">{{ selectList.length }}</span> 项
				<a class="select-clear" @click="clearSelectAll">清空</a>
			</Alert>
			<Table :loading="loading" border :columns="columns" :data="data" :size="tableSize" ref="table"
				sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
			<Row type="flex" justify="end" class="page">
				<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
					@on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
					size="small" show-total show-elevator show-sizer></Page>
			</Row>
		</Card>
		<!-- 订单详情 -->
		<Modal :title="订单详情" v-model="Visiable" :mask-closable="false" :scrollabele="true" :width="1000">
			<logistics-address v-if="Visiable" ref="dialog"></logistics-address>
			<div slot="footer" v-show="Visiable">
				<Button type="text" @click="Visiable = false">关闭</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	import {
		getWorkerRechargeRecord
	} from "@/api/index";
	import uploadPicInput from "@/views/my-components/hiver/upload-pic-input";
	import {
		shortcuts
	} from "@/libs/shortcuts";
	import logisticsAddress from "@/views/sys/order-manage/logisticsAddress";
	export default {
		name: "recharge",
		components: {
			uploadPicInput,
			logisticsAddress,
		},
		data() {
			return {
				Visiable: false,
				tableSize: "default",
				openSearch: true, // 显示搜索
				openTip: true, // 显示提示
				loading: true, // 表单加载状态
				modalType: 0, // 添加或编辑标识
				modalVisible: false, // 添加或编辑显示
				modalTitle: "", // 添加或编辑标题
				searchForm: {
					// 搜索框初始化对象
					pageNumber: 1, // 当前页数
					pageSize: 10, // 页面大小
					sort: "createTime", // 默认排序字段
					order: "desc", // 默认排序方式
					startDate: "", // 起始时间
					endDate: "", // 终止时间
				},
				selectDate: null,
				options: {
					shortcuts: shortcuts,
				},
				form: {
					// 添加或编辑表单对象初始化数据
					name: "",
					logo: "",
					clientSecret: "",
					homeUri: "",
					redirectUri: "",
					autoApprove: false,
				},
				submitLoading: false, // 添加或编辑提交状态
				selectList: [], // 多选数据
				columns: [{
						type: "index",
						width: 60,
						align: "center",
					},
					{
						title: "拼团编号",
						key: "rechargeId",
						align: "center",
					},
					{
						title: "商家名",
						key: "rechargeName",
						align: "center",
					},
					{
						title: "成团时间",
						key: "rechargeWorkerId",
						align: "center",
					},
					{
						title: "几人团",
						key: "rechargeNum",
						align: "center",
					},
					{
						title: "状态",
						key: "createTime",
						align: "center",
					},
					{
						title: "操作",
						key: "action",
						width: 200,
						align: "center",
						fixed: "right",
						render: (h, params) => {
							return h("div", [
								h("Divider", {
									props: {
										type: "vertical",
									},
								}),
								h(
									"a", {
										on: {
											click: () => {
												this.edit(params.row);
											},
										},
									},
									"查看详情"
								),
								h("Divider", {
									props: {
										type: "vertical",
									},
								}),
								h(
									"a", {
										on: {
											click: () => {
												this.edit(params.row);
											},
										},
									},
									"查看订单"
								),
							]);
						},
					},
				],
				data: [], // 表单数据
				total: 0, // 表单数据总数
				rechargeWorkerId: "",
			};
		},
		methods: {
			init() {
				this.getDataList();
			},
			changePage(v) {
				this.searchForm.pageNumber = v;
				this.getDataList();
				this.clearSelectAll();
			},
			edit(v){
				
				this.Visiable = true;
			},
			changePageSize(v) {
				this.searchForm.pageSize = v;
				this.getDataList();
			},
			handleSearch() {
				this.searchForm.pageNumber = 1;
				this.searchForm.pageSize = 10;
				this.getDataList();
			},
			handleReset() {
				this.$refs.searchForm.resetFields();
				this.searchForm.pageNumber = 1;
				this.searchForm.pageSize = 10;
				this.selectDate = null;
				this.searchForm.startDate = "";
				this.searchForm.endDate = "";
				// 重新加载数据
				this.getDataList();
			},
			changeSort(e) {
				this.searchForm.sort = e.key;
				this.searchForm.order = e.order;
				if (e.order === "normal") {
					this.searchForm.order = "";
				}
				this.getDataList();
			},
			clearSelectAll() {
				this.$refs.table.selectAll(false);
			},
			changeSelect(e) {
				this.selectList = e;
			},
			selectDateRange(v) {
				if (v) {
					this.searchForm.startDate = v[0];
					this.searchForm.endDate = v[1];
				}
			},
			changeTableSize(v) {
				this.tableSize = v;
			},
			exportData() {
				this.$refs.table.exportCsv({
					filename: "数据",
				});
			},
			generateSecret() {
				getSecretKey().then((res) => {
					if (res.success) {
						this.form.clientSecret = res.result;
					}
				});
			},
			getDataList() {
				this.loading = true;
				// 带多条件搜索参数获取表单数据 请自行修改接口
				getWorkerRechargeRecord(this.rechargeWorkerId).then((res) => {
					this.loading = false;
					if (res.success) {
						this.data = res.result.content;
						this.total = res.result.totalElements;
						if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
							this.searchForm.pageNumber -= 1;
							this.getDataList();
						}
					}
				});
			},
			handleSubmit() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.submitLoading = true;
						if (this.modalType === 0) {
							// 添加 避免编辑后传入id等数据 记得删除
							delete this.form.id;
							addClient(this.form).then((res) => {
								this.submitLoading = false;
								if (res.success) {
									this.$Message.success("操作成功");
									this.getDataList();
									this.modalVisible = false;
								}
							});
						} else {
							// 编辑
							updateClient(this.form).then((res) => {
								this.submitLoading = false;
								if (res.success) {
									this.$Message.success("操作成功");
									this.getDataList();
									this.modalVisible = false;
								}
							});
						}
					}
				});
			},
		},
		mounted() {
			this.init();
		},
	};
</script>
<style lang="less">
	@import "@/styles/table-common.less";
</style>