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

<style lang="less">
	@import "@/styles/table-common.less";
	@import "./courier.less";
</style>
<template>
	<div class="search">
		<Card>
			<Row v-show="openSearch" @keydown.enter.native="handleSearch">
				<Form ref="searchForm" :model="searchForm" inline :label-width="100">
					<FormItem label="配送员名称" prop="WorkerName">
						<Input type="text" v-model="searchForm.workerName" clearable placeholder="请输入配送员名称"
							style="width: 200px" />
					</FormItem>
					<FormItem label="上线状态" prop="isOnLine">
						<Select ref="dep" @on-change="checkStatusLine" style="width:200px">
							<Option v-for="(item, i) in dictDataLine" :key="i" :value="item.value">{{
						    item.title
						  }}</Option>
						</Select>
					</FormItem>
					<FormItem label="是否接指派单" prop="getPushOrder">
						<Select ref="dep" @on-change="checkStatus" style="width:210px">
							<Option v-for="(item, i) in dictData" :key="i" :value="item.value">{{
						    item.title
						  }}</Option>
						</Select>
					</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="colHidden" :data="data" :size="tableSize" sortable="custom"
				@on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table>
			<Row type="flex" justify="end" class="page">
				<Page :current="searchForm.pageNum" :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="1200">
			<logistics-address v-if="Visiable" ref="dialog"></logistics-address>
			<div slot="footer" v-show=Visiable>
				<Button type="text" @click="Visiable = false">关闭</Button>
			</div>
		</Modal>
		<addEdit :data="form" :type="showType" v-model="showWorker" @on-submit="getDataList" />
	</div>
</template>

<script>
	import {
		getWorkerListData,
		enableWorker,
		disableWorker,
		deleteWorker,
		offLineWorker,
		onLineWorker,
	} from "@/api/index";
	import {
		shortcuts
	} from "@/libs/shortcuts";
	// 模版导入文件表数据
	import {
		userColumns,
		userData
	} from "./importTemplate";
	import "viewerjs/dist/viewer.css";
	import Viewer from "viewerjs";
	// 指定导出列数据
	import {
		exportColumn
	} from "./exportColumn";
	import excel from "@/libs/excel";
	import addEdit from "./addEdit.vue";
	import logisticsAddress from "@/views/app/business/courier/logisticsAddress.vue";
	import dict from "@/views/my-components/hiver/dict";
	export default {
		name: "Courier",
		components: {
			addEdit,
			dict,
			logisticsAddress
		},
		data() {
			return {
				tableSize: "default",
				height: 510,
				showWorker: false,
				showType: "0",
				openSearch: true,
				openTip: true,
				loading: true,
				reading: false,
				Visiable: false,
				importLoading: false,
				loadingExport: true,
				exportModalVisible: false,
				importModalVisible: false,
				drop: false,
				dropDownIcon: "ios-arrow-down",
				selectList: [],
				dictDataLine: [{
					title: "下线",
					value: 0
				}, {
					title: "上线",
					value: 1
				}],
				dictData: [{
					title: "不接指派",
					value: 0
				}, {
					title: "接指派",
					value: 1
				}],
				searchForm: {
					region:JSON.parse(this.getStore("user")).departmentId,
					workerName:'',
					isOnLine:'', //0：下线；1：上线
					getPushOrder:'', //0不接指派 1接收
					pageNum: 1,
					pageSize: 10
				},
				selectDate: null,
				options: {
					shortcuts: shortcuts,
				},
				form: {},
				columns: [{
						type: "selection",
						width: 60,
						align: "center",
						fixed: "left",
					},
					{
						type: "index",
						width: 60,
						align: "center",
						fixed: "left",
					},
					{
						title: "配送员编号",
						key: "workerId",
						minWidth: 125,
					}, 
					{
						title: "配送员名称",
						key: "workerName",
						minWidth: 125,
					},
					{
						title: "佣金余额",
						key: "depoBal",
						minWidth: 125,
					},
					{
						title: "联系方式",
						key: "mobile",
						minWidth: 125,
					},
					// {
					// 	title: "接单区域",
					// 	key: "regionTitle",
					// 	minWidth: 125,
					// },
					// {
					// 	title: "描述",
					// 	key: "remark",
					// 	minWidth: 125,
					// },
					{
						title: "接单状态",
						key: "workerStatus",
						minWidth: 160,
						render: (h, params) => {
							let re = "",
								color = "";
							if (params.row.workerStatus == 1) {
								re = "可抢单";
								color = "blue";
							} else if (params.row.workerStatus == 2) {
								re = "不可接单";
								color = "yellow";
							} else if (params.row.workerStatus == 3) {
								re = "已禁用";
								color = "red";
							}
							return h("div", [
								h(
									"Tag", {
										props: {
											color: color,
										},
									},
									re
								),
							]);
						}
					},
					{
						title: "上线状态",
						key: "isOnLine",
						minWidth: 160,
						render: (h, params) => {
							let re = "",
								color = "";
							if (params.row.isOnLine == 1) {
								re = "上线";
								color = "green";
							} else if (params.row.isOnLine == 0) {
								re = "下线";
								color = "#D3D3D3";
							}
							return h("div", [
								h(
									"Tag", {
										props: {
											color: color,
										},
									},
									re
								),
							]);
						}
					},
					{
						title: "交易保障金",
						key: "rebateAmount",
						width: 200,
						align: "center"
					},
					{
						title: "学生/身份证",
						key: "cardPicture",
						width: 180,
						render: (h, params) => {
							
							return h("img", {
								attrs: {
									src: params.row.cardPicture,
								},
								style: {
									cursor: "zoom-in",
									width: "80px",
									height: "60px",
									margin: "10px 0",
									"object-fit": "contain",
								},
								on: {
									click: () => {
										this.showPic(params.row.cardPicture);
									},
								},
							});
						},
					},
					{
						title: "是否接指派",
						key: "getPushOrder",
						width: 180,
					},
					{
						title: "评分",
						key: "score",
						width: 180,
					},
					{
						title: "平均时长",
						key: "avgTime",
						width: 180,
					},
					{
						title: "超出3楼额外费用",
						key: "highFloorFee",
						width: 180,
					},
					{
						title: "操作",
						key: "action",
						width: 170,
						align: "center",
						fixed: "right",
						render: (h, params) => {
							let enableOrDisable = "";
							if (params.row.workerStatus == 1) {
								enableOrDisable = h(
									"a", {
										on: {
											click: () => {
												this.disable(params.row);
											},
										},
									},
									"禁用"
								);
							} else {
								enableOrDisable = h(
									"a", {
										on: {
											click: () => {
												this.enable(params.row);
											},
										},
									},
									"恢复"
								);
							}
							let onOrOffLine = "";
							if (params.row.isOnLine == 1) {
								onOrOffLine = h(
									"a", {
										on: {
											click: () => {
												this.offLine(params.row);
											},
										},
									},
									"下线"
								);
							} else {
								onOrOffLine = h(
									"a", {
										on: {
											click: () => {
												this.onLine(params.row);
											},
										},
									},
									"上线"
								);
							}
							return h("div", [
								h(
									"a", {
										on: {
											click: () => {
												this.edit(params.row);
											},
										},
									},
									"编辑"
								),
								h("Divider", {
									props: {
										type: "vertical",
									},
								}),
								h(
									"a", {
										on: {
											click: () => {
												this.findAllRecord(params.row);
											},
										},
									},
									"查看评论"
								),
								h("Divider", {
									props: {
										type: "vertical",
									},
								}),
								onOrOffLine,
								h("Divider", {
									props: {
										type: "vertical",
									},
								}),
								enableOrDisable,
								h("Divider", {
									props: {
										type: "vertical",
									},
								}),
								h(
									"a", {
										on: {
											click: () => {
												this.remove(params.row);
											},
										},
									},
									"接单规则"
								),
							]);
						},
					},
				],
				exportColumns: exportColumn,
				chooseColumns: [],
				filename: "配送员数据",
				exportTitle: "确认导出",
				exportType: "",
				importTableData: [],
				importColumns: [],
				uploadfile: {
					name: "",
				},
				tempColumns: userColumns,
				tempData: userData,
				data: [],
				exportData: [],
				total: 0,
			};
		},
		methods: {
			init() {
				this.getDataList();

			},
			handleSelectDep(v) {
				this.searchForm.departmentId = v;
			},
			changePage(v) {
				this.searchForm.pageNum = v;
				this.getDataList();
				this.clearSelectAll();
			},
			changePageSize(v) {
				this.searchForm.pageSize = v;
				this.getDataList();
			},
			checkStatusLine(v){
				this.searchForm.isOnLine = v
				console.log(v)
			},
			showPic(v) {
				let image = new Image();
				image.src = v;
				let viewer = new Viewer(image, {
					hidden: function() {
						viewer.destroy();
					},
				});
				viewer.show();
			},
			checkStatus(v){
				this.searchForm.getPushOrder = v
				console.log(v)
			},
			selectDateRange(v) {
				if (v) {
					this.searchForm.startDate = v[0];
					this.searchForm.endDate = v[1];
				}
			},
			changeTableSize(v) {
				this.tableSize = v;
			},
			getDataList() {
				// 多条件搜索用户列表
				this.loading = true;
				
				getWorkerListData(this.searchForm).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.pageNum > 1) {
							this.searchForm.pageNum -= 1;
							this.getDataList();
						}
					}
				});
			},
			findAllRecord(v) {
				this.Visiable = true;
				console.log(v)
				this.$nextTick(() => {
					this.$refs.dialog.initRecharge(v);
				});
			},
			handleSearch() {
				this.searchForm.pageNum = 1;
				this.searchForm.pageSize = 10;
				this.getDataList();
			},
			handleReset() {
				this.$refs.searchForm.resetFields();
				this.searchForm.pageNum = 1;
				this.searchForm.pageSize = 10;
				this.selectDate = null;
				this.searchForm.startDate = "";
				this.searchForm.endDate = "";
				this.$refs.dep.clearSelect();
				this.searchForm.departmentId = "";
				// 重新加载数据
				this.getDataList();
			},
			changeSort(e) {
				this.searchForm.sort = e.key;
				this.searchForm.order = e.order;
				if (e.order == "normal") {
					this.searchForm.order = "";
				}
				this.getDataList();
			},
			exportCustomData() {
				if (this.filename == "") {
					this.filename = "用户数据";
				}
				// 判断勾选导出列
				let exportColumns = [];
				this.exportColumns.forEach((e) => {
					this.chooseColumns.forEach((c) => {
						if (e.title == c && !e.disabled) {
							exportColumns.push(e);
						}
					});
				});
				this.exportModalVisible = false;
				let title = [];
				let key = [];
				exportColumns.forEach((e) => {
					title.push(e.title);
					key.push(e.key);
				});
				const params = {
					title: title,
					key: key,
					data: this.exportData,
					autoWidth: true,
					filename: this.filename,
				};
				excel.export_array_to_excel(params);
			},
			
			showDetail(v) {
				// 转换null为""
				for (let attr in v) {
					if (v[attr] == null) {
						v[attr] = "";
					}
				}
				let str = JSON.stringify(v);
				let data = JSON.parse(str);
				this.form = data;
				this.showType = "0";
				this.showWorker = true;
			},
			add() {
				this.showType = "2";
				this.showWorker = true;
			},
			edit(v) {
				this.$Message.warning("暂未开放");return
				// 转换null为""
				for (let attr in v) {
					if (v[attr] == null) {
						v[attr] = "";
					}
				}
				let str = JSON.stringify(v);
				let data = JSON.parse(str);
				this.form = data;
				this.showType = "1";
				this.showWorker = true;
			},
			enable(v) {
				this.$Modal.confirm({
					title: "确认恢复",
					content: "您确认要恢复配送员 " + v.workerName + " ?",
					loading: true,
					onOk: () => {
						enableWorker(v.workerId).then((res) => {
							this.$Modal.remove();
							if (res.success) {
								this.$Message.success("操作成功");
								this.getDataList();
							}
						});
					},
				});
			},
			disable(v) {
				this.$Modal.confirm({
					title: "确认禁用",
					content: "您确认要禁用配送员 " + v.workerName + " ?",
					loading: true,
					onOk: () => {
						disableWorker(v.workerId).then((res) => {
							this.$Modal.remove();
							if (res.success) {
								this.$Message.success("操作成功");
								this.getDataList();
							}
						});
					},
				});
			},
			offLine(v) {
				this.$Modal.confirm({
					title: "确认下线",
					content: "您确认要使配送员 " + v.workerName + " 下线吗?",
					loading: true,
					onOk: () => {
						offLineWorker({
							id: v.workerId
						}).then((res) => {
							this.$Modal.remove();
							if (res.success) {
								this.$Message.success("操作成功");
								this.getDataList();
							}
						});
					},
				});
			},
			onLine(v) {
				this.$Modal.confirm({
					title: "确认上线",
					content: "您确认要使配送员 " + v.workerName + " 上线吗?",
					loading: true,
					onOk: () => {
						onLineWorker({
							id: v.workerId
						}).then((res) => {
							this.$Modal.remove();
							if (res.success) {
								this.$Message.success("操作成功");
								this.getDataList();
							}
						});
					},
				});
			},
			remove(v) {
				this.$Modal.confirm({
					title: "确认删除",
					content: "您确认要删除配送员 " + v.workerId + " ?",
					loading: true,
					onOk: () => {
						deleteWorker(v.workerId).then((res) => {
							this.$Modal.remove();
							if (res.success) {
								this.clearSelectAll();
								this.$Message.success("删除成功");
								this.getDataList();
							}
						});
					},
				});
			},
			showSelect(e) {
				this.exportData = e;
				this.selectList = e;
			},
			clearSelectAll() {
				this.$refs.table.selectAll(false);
			},
			delAll() {
				if (this.selectList.length <= 0) {
					this.$Message.warning("您还未选择要删除的数据");
					return;
				}
				this.$Modal.confirm({
					title: "确认删除",
					content: "您确认要删除所选的 " + this.selectList.length + " 条数据?",
					loading: true,
					onOk: () => {
						let ids = "";
						this.selectList.forEach(function(e) {
							ids += e.id + ",";
						});
						ids = ids.substring(0, ids.length - 1);
						deleteWorker({
							ids: ids
						}).then((res) => {
							this.$Modal.remove();
							if (res.success) {
								this.$Message.success("删除成功");
								this.clearSelectAll();
								this.getDataList();
							}
						});
					},
				});
			},
		},
		computed: {
			colHidden: function() {
				return this.columns.filter(function(e) {
					return !e.hidden;
				})
			}
		},
		mounted() {
			this.init();
		},
	};
</script>