oms/src/views/audit/orderTask/index.vue

<template>
	<div>
		<by-bill ref="bill" :propConfig="config" @search="search" @onSmt="onSmt" @onAdd="onAdd" @onDelete="onDelete"
			@onDispatch="onDispatch" @onRefresh="onRefresh" @detail="openEdit" @onSave="onSave" @clickTab="clickTab">
		</by-bill>
	</div>
</template>

<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	import api from "@/api/order";
	import Assembly from "@/components/Assembly/order.vue";
	@Component
	export default class OrderTask extends Vue {
		// 右边
		baseURL : any = process.env.VUE_APP_BASE_API
		setStatusData : any = ''
		timeNum = 0;
		timer : any = null
		config : any = {
			attr: {
				activeName: 'all'
			},
			// 单据
			bill: {
				tool: {
					tools: {
						save: true,
					}
				},
				form: {
					attr: {
						size: 'small',
						readonly: false,
						rules: {
							organizationName: [{
								required: true, message: '请输入机构名称', trigger: 'blur'
							}],
							orderNumber: [{
								required: true, message: '请输入单据编号', trigger: 'blur'
							}]
						}
					},
					columns: [
						[
							{
								span: 8,
								label: '机构名称',
								prop: 'organizationName',
								component: 'by-input',
							},
							{
								span: 8,
								label: '单据编号',
								prop: 'orderNumber',
								component: 'by-input',
							},
							{
								span: 8,
								label: '交货地点',
								prop: 'deliveryAddress',
								component: 'by-input',
							},
							{
								span: 8,
								label: '交货时间',
								prop: 'deliveryData',
								component: 'by-date-picker',
								compConfig: {
									format: 'yyyy-MM-dd hh:ss:mm',
									type: 'datetime'
								}
							},
							{
								span: 8,
								label: '交货人',
								prop: 'delivery',
								component: 'by-input',
							},
							{
								span: 8,
								label: '联系方式',
								prop: 'deliveryPhone',
								component: 'by-input',
							},
							{
								span: 8,
								label: '交货方式',
								prop: 'deliveryWay',
								component: 'by-input',
							},
							{
								span: 8,
								label: '备注',
								slot: true,
								prop: 'remark',
								component: 'by-input',
							},
						],
					]
				},
				tableConfig: [
					{
						tool: {
							tools: {
								add: true
							}
						},
						table: {
							attr: {
								size: 'mini',
								height: 580,
								align: 'center',
								// seq: true,
								// checkbox: true
							},
							columns:
								[{
									width: 300,
									title: '物料名称',
									field: 'materialName',
									component: 'by-input'
								},
								{
									title: '单位',
									field: 'unit',
									component: 'by-input'
								},
								{
									title: '数量',
									field: 'number',
									component: 'by-input'
								},
								{
									title: '已交付数量',
									field: 'deliveryNumber',
									component: 'by-input'
								},
								{
									title: '规格',
									field: 'specs',
									component: 'by-input'
								},
								{
									title: '单价',
									field: 'unitPrice',
									component: 'by-input'
								},
								{
									title: '实际金额',
									field: 'realityPrice',
									component: 'by-input'
								},
								{
									title: '优惠金额',
									field: 'prePrice',
									component: 'by-input'
								},
								{
									title: '合计金额',
									field: 'totalPrice',
									component: 'by-input'
								},
								{
									width: 80,
									title: '操作',
									action: true,
									plugins: [{
										icon: 'el-icon-delete',
										name: '删除',
										audit: '',
										event: {
											click: (item : any) => {
												console.log('该行数据：', item)
												item.isDeleted = 1;
												this.$confirm('确定删除吗', '注意', {
													confirmButtonText: '确定',
													cancelButtonText: '取消',
													type: 'warning',
													center: true
												}).then(() => {
													// api.deleteList({ ids: item.id }, 'supplyTaskOrder').then((res : any) => {
													// 	if (res.code === 200) {
													// 		this.getDataList();
													// 		this.$message({
													// 			type: 'success',
													// 			message: '删除成功!'
													// 		});
													// 	} else this.failHandle(res)
													// })
												}).catch(() => {
													this.$message({
														type: 'info',
														message: '已取消删除'
													});
												});
											}
										}
									}]
								},
								]
						}
					}
				]
			},
			// 已提交
			smt: {
				search: {
					attr: {
						size: 'mini',
					},
					columns: [
						[
							{
								span: 6,
								label: '机构名称',
								prop: 'organizationName',
								component: 'by-input',
								compConfig: {
									attr: {
										placeholder: '请输入机构名称',
										clearable: true
									},
								},
							},
							{
								span: 6,
								label: '单据编号',
								prop: 'orderNumber',
								component: 'by-input',
								compConfig: {
									attr: {
										placeholder: '请输入单据编号',
										clearable: true
									}
								}
							},
							{
								span: 6,
								label: '交货人',
								prop: 'delivery',
								component: 'by-input',
								compConfig: {
									attr: {
										placeholder: '请输入交货人',
										clearable: true
									}
								}
							},
							{
								span: 6,
								label: '状态',
								prop: 'status',
								component: 'by-select',
								compConfig: {
									attr: {
										placeholder: '请选择状态',
										clearable: true,
										data: [{
											value: 0,
											label: '未接单'
										}, {
											value: 1,
											label: '已接单'
										}]
									}
								}
							},
						],
						[
							{
								span: 6,
								label: '交货时间',
								prop: 'deliveryData',
								component: 'by-date-picker',
								compConfig: {
									format: 'yyyy-MM-dd hh:ss:mm',
									type: 'datetime'
								}
							},
						]
					]
				},
				tool: {
					tools: {
						delete: true,
						search: true,
						refresh: true
					}
				},
				table: {
					attr: {
						height: 600,
						size: 'mini',
						seq: true,
						align: 'center',
						checkbox: true
					},
					columns: [
						{
							width: 70,
							title: '单据编号',
							field: 'orderNumber',
						},
						{
							width: 200,
							title: '机构名称',
							field: 'organizationName',
							isDetail: true,
						},
						{
							width: 80,
							title: '状态',
							field: 'status',
							component: Assembly,
						},
						{
							width: 200,
							title: '交货地点',
							field: 'deliveryAddress',
						},
						{
							width: 150,
							title: '交货时间',
							field: 'deliveryData',
						},
						{
							title: '交货人',
							field: 'delivery',
						},
						{
							title: '交货人联系方式',
							field: 'deliveryPhone',
						},
						{
							title: '交货方式',
							field: 'deliveryWay',
						},
						{
							title: '备注',
							field: 'remark',
						},
						{
							width: 110,
							title: '操作',
							action: true,
							plugins: [{
								icon: 'el-icon-edit',
								name: '编辑',
								audit: '',
								event: {
									click: (item : any) => {
										(this as any).openEdit(item)
									}
								}
							}, {
								name: '删除',
								event: {
									click: (item : any) => (this as any).doDelete2(item)
								}
							}]
						}
					]
				}
			},
			// 草稿箱
			draftsBox: {
				search: {
					attr: {
						size: 'mini',
					},
					columns: [
						[
							{
								span: 6,
								label: '机构名称',
								prop: 'organizationName',
								component: 'by-input',
								compConfig: {
									attr: {
										placeholder: '请输入机构名称',
										clearable: true
									},
								},
							},
							{
								span: 6,
								label: '单据编号',
								prop: 'orderNumber',
								component: 'by-input',
								compConfig: {
									attr: {
										placeholder: '请输入单据编号',
										clearable: true
									}
								}
							},
							{
								span: 6,
								label: '交货人',
								prop: 'delivery',
								component: 'by-input',
								compConfig: {
									attr: {
										placeholder: '请输入交货人',
										clearable: true
									}
								}
							},
							{
								span: 6,
								label: '交货时间',
								prop: 'deliveryData',
								component: 'by-date-picker',
								compConfig: {
									format: 'yyyy-MM-dd hh:ss:mm',
									type: 'datetime'
								}
							},
						],
					]
				},
				tool: {
					tools: {
						smt: true,
						delete: true,
						search: true,
						refresh: true
					}
				},
				table: {
					attr: {
						height: 600,
						size: 'mini',
						seq: true,
						align: 'center',
						checkbox: true
					},
					columns: [
						{
							width: 70,
							title: '单据编号',
							field: 'orderNumber',
						},
						{
							width: 200,
							title: '机构名称',
							field: 'organizationName',
							isDetail: true,
						},
						{
							width: 200,
							title: '交货地点',
							field: 'deliveryAddress',
						},
						{
							width: 150,
							title: '交货时间',
							field: 'deliveryData',
						},
						{
							title: '交货人',
							field: 'delivery',
						},
						{
							title: '交货人联系方式',
							field: 'deliveryPhone',
						},
						{
							title: '交货方式',
							field: 'deliveryWay',
						},
						{
							title: '备注',
							field: 'remark',
						},
						{
							width: 110,
							title: '操作',
							action: true,
							plugins: [{
								icon: 'el-icon-edit',
								name: '编辑',
								audit: '',
								event: {
									click: (item : any) => {
										(this as any).openEdit(item)
									}
								}
							}, {
								name: '删除',
								event: {
									click: (item : any) => (this as any).doDelete2(item)
								}
							}]
						}
					]
				}
			},
			// 综合
			all: {
				search: {
					attr: {
						size: 'mini',
					},
					columns: [
						[
							{
								span: 6,
								label: '机构名称',
								prop: 'organizationName',
								component: 'by-input',
								compConfig: {
									attr: {
										placeholder: '请输入机构名称',
										clearable: true
									},
								},
							},
							{
								span: 6,
								label: '单据编号',
								prop: 'orderNumber',
								component: 'by-input',
								compConfig: {
									attr: {
										placeholder: '请输入单据编号',
										clearable: true
									}
								}
							},
							{
								span: 6,
								label: '交货人',
								prop: 'delivery',
								component: 'by-input',
								compConfig: {
									attr: {
										placeholder: '请输入交货人',
										clearable: true
									}
								}
							},
							{
								span: 6,
								label: '状态',
								prop: 'status',
								component: 'by-select',
								compConfig: {
									attr: {
										placeholder: '请选择状态',
										clearable: true,
										data: [{
											value: 0,
											label: '未接单'
										}, {
											value: 1,
											label: '已接单'
										}]
									}
								}
							},
						],
						[
							{
								span: 6,
								label: '交货时间',
								prop: 'deliveryData',
								component: 'by-date-picker',
								compConfig: {
									format: 'yyyy-MM-dd hh:ss:mm',
									type: 'datetime'
								}
							},
						]
					]
				},
				tool: {
					tools: {
						add: true,
						dispatch: true,
						delete: true,
						search: true,
						refresh: true
					}
				},
				table: {
					attr: {
						height: 600,
						size: 'mini',
						seq: true,
						align: 'center',
						checkbox: true
					},
					columns: [
						{
							width: 200,
							title: '机构名称',
							field: 'organizationName',
							isDetail: true,
						},
						{
							width: 120,
							title: '单据编号',
							field: 'orderNumber',
						},
						{
							width: 80,
							title: '状态',
							field: 'status',
							component: Assembly,
						},
						{
							width: 200,
							title: '交货地点',
							field: 'deliveryAddress',
						},
						{
							width: 150,
							title: '交货时间',
							field: 'deliveryData',
						},
						{
							title: '交货人',
							field: 'delivery',
						},
						{
							title: '交货人联系方式',
							field: 'deliveryPhone',
						},
						{
							title: '交货方式',
							field: 'deliveryWay',
						},
						{
							title: '备注',
							field: 'remark',
						},
						{
							width: 110,
							title: '操作',
							action: true,
							plugins: [{
								icon: 'el-icon-edit',
								name: '编辑',
								audit: '',
								event: {
									click: (item : any) => {
										(this as any).openEdit(item)
									}
								}
							}, {
								name: '删除',
								event: {
									click: (item : any) => (this as any).doDelete2(item)
								}
							}]
						}
					]
				}
			},
			// 回收站
			recycleBin: {
				search: {
					attr: {
						size: 'mini',
					},
					columns: [
						[
							{
								span: 6,
								label: '机构名称',
								prop: 'organizationName',
								component: 'by-input',
								compConfig: {
									attr: {
										placeholder: '请输入机构名称',
										clearable: true
									},
								},
							},
							{
								span: 6,
								label: '单据编号',
								prop: 'orderNumber',
								component: 'by-input',
								compConfig: {
									attr: {
										placeholder: '请输入单据编号',
										clearable: true
									}
								}
							},
							{
								span: 6,
								label: '交货人',
								prop: 'delivery',
								component: 'by-input',
								compConfig: {
									attr: {
										placeholder: '请输入交货人',
										clearable: true
									}
								}
							},
							{
								span: 6,
								label: '状态',
								prop: 'status',
								component: 'by-select',
								compConfig: {
									attr: {
										placeholder: '请选择状态',
										clearable: true,
										data: [{
											value: 0,
											label: '未接单'
										}, {
											value: 1,
											label: '已接单'
										}]
									}
								}
							},
						],
						[
							{
								span: 6,
								label: '交货时间',
								prop: 'deliveryData',
								component: 'by-date-picker',
								compConfig: {
									format: 'yyyy-MM-dd hh:ss:mm',
									type: 'datetime'
								}
							},
						]
					]
				},
				tool: {
					tools: {
						search: true,
						refresh: true
					}
				},
				table: {
					attr: {
						height: 600,
						size: 'mini',
						seq: true,
						align: 'center',
						checkbox: true
					},
					columns: [
						{
							width: 70,
							title: '单据编号',
							field: 'orderNumber',
						},
						{
							width: 200,
							title: '机构名称',
							field: 'organizationName',
							isDetail: true,
						},
						{
							width: 80,
							title: '状态',
							field: 'status',
							component: Assembly,
						},
						{
							width: 200,
							title: '交货地点',
							field: 'deliveryAddress',
						},
						{
							width: 150,
							title: '交货时间',
							field: 'deliveryData',
						},
						{
							title: '交货人',
							field: 'delivery',
						},
						{
							title: '交货人联系方式',
							field: 'deliveryPhone',
						},
						{
							title: '交货方式',
							field: 'deliveryWay',
						},
						{
							title: '备注',
							field: 'remark',
						},
						{
							width: 110,
							title: '操作',
							action: true,
							plugins: [{
								// icon: 'el-icon-edit',
								name: '查看',
								audit: '',
								event: {
									click: (item : any) => {
										(this as any).openEdit(item)
									}
								}
							}]
						}
					]
				}

			}
		}
		created() {
			this.timer = setInterval(() => {
				this.getDataList()
			}, 500)
		}
		// 保存
		onSave(e : any) {
			console.log('保存 ==>', e);
			if(e==='bill'){
				(this as any).$refs.bill.$refs.billForm.validate().then(() => {
					let query = (this.$refs.bill as any).getBillFormValue(); // 获取单据数据
					query.suborderList.unshift({materialName:'test'})
					console.log(query);
					api.updateList(query, 'supplyTaskOrder').then((res : any) => {
						if (res.code === 200) {
							this.$message.success(res.msg);
							this.getDataList();
							(this.$refs.bill as any).showTab = 'all';
							(this.$refs.bill as any).setBillFormValue({});
						} else this.failHandle(res)
					})
				})
			}
		}
		// 打开新增
		onAdd(e : any) {
			console.log('新增 ==>', e);
			if(e==='billTable_0'){
				let data = (this.$refs.bill as any).getBillFormValue();
				data.suborderList.unshift({isDeleted:0,taskOrderId:data.id})
				console.log(data);
				(this.$refs.bill as any).setBillTableValue(data, 0);// 设置第1张单据表格数据
			}
			// (this.$refs.bill as any).setBillFormValue({}); // 设置单据表单数据
			// (this.$refs.bill as any).showTab = 'bill';
		}
		// 打开编辑
		openEdit(e : any) {
			console.log('编辑 ==>', e);
			e = e.row ? e.row : e;
			(this.$refs.bill as any).setBillFormValue(e); // 设置单据表单数据
			(this.$refs.bill as any).setBillTableValue(e.suborderList, 0);// 设置第1张单据表格数据
			(this.$refs.bill as any).showTab = 'bill';
		}
		// 派单
		onDispatch(e : any) {
			console.log('派单 ==>', e);
		}
		// 提交
		onSmt(e : any) {
			console.log('提交 ==>', e);
			// (this as any).$refs.bill.$refs.billForm.validate().then(() => {
			// 	let query = (this as any).$refs.bill.$refs.billForm.getValue();
			// 	api.saveList(query, 'supplyTaskOrder').then((res : any) => {
			// 		if (res.code === 200) {
			// 			this.$message({
			// 				type: 'success',
			// 				message: '提交成功!'
			// 			});
			// 			this.getDataList();
			// 			(this.$refs.bill as any).showTab = 'all';
			// 			(this.$refs.bill as any).setBillFormValue({});
			// 		} else this.failHandle(res)
			// 	})
			// })
		}
		// 切换tab栏
		clickTab(e : any) {
			// console.log(e);
			// submitState: 提交状态
			if (e === 'draftsBox') this.getPageList({ submitState: 0 }, 'draftsBox'); // 草稿箱数据
			if (e === 'smt') this.getPageList({ submitState: 1 }, 'smt'); // 已提交数据
			if (e === 'recycleBin') { // 回收站数据
				// let data = (this as any).$lodash.cloneDeep(this.config.bill);
				// data.form.attr.readonly = true;
				// for (const item of data.tableConfig) {
				// 	delete item.tool
				// }
				// (this.$refs.bill as any).setBillConfig(data)
				this.getSelectDeleteList('supplyTaskOrder')
			}
		}
		// 初始化
		getDataList() {
			if (!this.$refs.bill) {
				if (this.timeNum > 5) {
					clearInterval(this.timer)
				}
				this.timeNum++;
				return
			}
			clearInterval(this.timer)
			this.getPageList({}, 'all'); // 综合数据
		}
		// 获取分页数据
		getPageList(query : any, type : any) {
			api.pageList(query, 'supplyTaskOrder').then((res : any) => {
				if (res.code === 200) {
					(this.$refs.bill as any).setTabTableValue(type, res.data.records);
					let page = {
						pageNo: res.data.current, //当前页
						pageSize: res.data.size, //每页条数
						total: res.data.total //总条数
					};
					(this.$refs.bill as any).setTablePage(type, page)
				} else this.failHandle(res)
			})
		}
		// 回收站数据
		getSelectDeleteList(url : any) {
			api.selectDeleteList(url).then((res : any) => {
				if (res.code === 200) {
					(this.$refs.bill as any).setTabTableValue('recycleBin', res.data);
					let page = {
						pageNo: res.data.current, //当前页
						pageSize: res.data.size, //每页条数
						total: res.data.total //总条数
					};
					(this.$refs.bill as any).setTablePage('recycleBin', page)
				} else this.failHandle(res)
			});
		}
		// 搜索
		search(parames : any) {
			console.log('搜索 ==> ', parames);
			let query = parames.value
			if (parames.type === 'draftsBox') query.submitState = 0 // 草稿箱数据
			if (parames.type === 'smt') query.submitState = 1 // 草稿箱数据
			// if (parames.type === 'recycleBin')  // 回收站
			this.getPageList(query, parames.type) // 获取分页数据
		}
		// 刷新
		onRefresh(e : any) {
			console.log('刷新 ==>', e);
			(this as any).$refs.bill.$refs[e].resert();
			if (e === 'all') this.getPageList({}, 'all'); // 草稿箱数据
			if (e === 'draftsBox') this.getPageList({ submitState: 0 }, 'draftsBox'); // 草稿箱数据
			if (e === 'smt') this.getPageList({ submitState: 1 }, 'smt'); // 已提交数据
			if (e === 'recycleBin') this.getSelectDeleteList('supplyTaskOrder') // 回收站数据
		}
		// 工具栏删除
		onDelete(e:any) {
			console.log('工具栏删除 ==> ',e);
			let selectData = (this.$refs.bill as any).getTableSelectData(e)
			let ids = '';
			if (selectData.length > 0) {
				selectData.map((v : any) => {
					ids += v.id + ','
				})
			} else return this.$message({ type: 'warning', message: '请选择删除数据' })
			ids = ids.slice(0, ids.length - 1);
			this.$confirm('确定删除吗,此操作不能撤销！', '注意', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true
			}).then(() => {
				api.deleteList({ ids: ids }, 'supplyTaskOrder').then((res : any) => {
					if (res.code === 200) {
						this.getDataList();
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					} else this.failHandle(res)
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		}
		// 操作删除
		doDelete2(item : any) {
			this.$confirm('确定删除吗,此操作不能撤销！', '注意', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true
			}).then(() => {
				api.deleteList({ ids: item.id }, 'supplyTaskOrder').then((res : any) => {
					if (res.code === 200) {
						this.getDataList();
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					} else this.failHandle(res)
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		}
		// 运行错误
		failHandle(err : any) {
			let msg = err.msg ? err.msg : '运行错误！';
			this.$message.error(msg)
		}
	}
</script>