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

<template>
	<div>
		<by-bill ref="bill" :propConfig="config" @search="search" @resert="resert" @detail="openEdit" @onRefresh="resert"
			@pagination="pagination" @onOrder="onOrder" @clickTab="clickTab" @onReturn="onReturn">
		</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 Order extends Vue {
		timeNum = 0;
		timer : any = null
		baseInfo : any = {}
		config : any = {
			attr: {
				activeName: 'all',
				calculateH: true
			},
			// 单据
			bill: {
				tool: {
					tools: {
						order: true,
						return: true
					}
				},
				log: {
					request: {
						url: '/supply/supplyTaskOrderOperateLog/page',
						method: 'GET'
					}
				},
				form: {
					attr: {
						size: 'medium',
						readonly: true,
					},
					columns: [
						[
							{
								span: 8,
								label: '机构名称',
								prop: 'organizationName',
								component: 'by-input',
							},
							{
								span: 8,
								label: '单据编号',
								prop: 'orderNumber',
								component: 'by-input',
							},
							{
								span: 8,
								label: '联系方式',
								prop: 'deliveryPhone',
								component: 'by-input',
							},
							{
								span: 8,
								label: '交货人',
								prop: 'delivery',
								component: 'by-input',
							},
							{
								span: 8,
								label: '交货时间',
								prop: 'deliveryData',
								component: 'by-input',
							},
							{
								span: 8,
								label: '交货地点',
								prop: 'deliveryAddress',
								component: 'by-input',
							},
							{
								span: 8,
								label: '交货方式',
								prop: 'deliveryWay',
								component: 'by-input',
							},
						],
						[
							{
								span: 28,
								label: '备注',
								slot: true,
								prop: 'remark',
								component: 'by-input',
								compConfig: {
									attr: {
										size: 'mini',
										placeholder: '请输入备注',
										type: 'textarea'
									},
								}
							},
						]
					]
				},
				tableConfig: [
					{
						table: {
							attr: {
								size: 'mini',
								align: 'left',
								readonly: true
							},
							columns:
								[{
									width: 250,
									title: '物料名称',
									field: 'materialName',
								},
								{
									width: 180,
									title: '财务编号',
									field: 'financeSuborderId',
								},
								{
									width: 110,
									title: '单位',
									field: 'unit',
								},
								{
									width: 110,
									title: '单位编码',
									field: 'unitCode',
								},
								{
									width: 110,
									title: '数量',
									field: 'number',
								},
								{
									width: 110,
									title: '已交付数量',
									field: 'deliveryNumber',
								},
								{
									width: 110,
									title: '单价',
									field: 'unitPrice',
								},
								{
									width: 110,
									title: '实际金额',
									field: 'realityPrice',
								},
								{
									width: 110,
									title: '优惠金额',
									field: 'prePrice',
								},
								{
									width: 110,
									title: '合计金额',
									field: 'totalPrice',
								},
								]
						}
					}
				]
			},
			// 综合
			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: 'status',
								component: 'by-select',
								compConfig: {
									attr: {
										placeholder: '请选择状态',
										clearable: true,
										data: [{
											value: 0,
											label: '未接单'
										}, {
											value: 1,
											label: '已接单'
										}]
									}
								}
							},
						],
					]
				},
				tool: {
					tools: {
						search: true,
						refresh: true
					}
				},
				table: {
					attr: {
						size: 'mini',
						align: 'left',
					},
					columns: [
						{
							width: 168,
							title: '单据编号',
							field: 'orderNumber',
							isDetail: true,
							fixed: 'left'
						},
						{
							width: 180,
							title: '机构名称',
							field: 'organizationName',
						},
						{
							width: 130,
							title: '交货人',
							field: 'delivery',
						},
						{
							width: 150,
							title: '交货时间',
							field: 'deliveryData',
						},
						{
							width: 200,
							title: '交货地点',
							field: 'deliveryAddress',
						},
						{
							width: 130,
							title: '联系方式',
							field: 'deliveryPhone',
						},
						{
							width: 130,
							title: '交货方式',
							field: 'deliveryWay',
						},
						{
							width: 80,
							title: '状态',
							field: 'status',
							component: Assembly,
						},
						{
							width: 110,
							title: '操作',
							action: true,
							plugins: [{
								icon: 'el-icon-edit',
								name: '查看',
								audit: '',
								event: {
									click: (item : any) => {
										(this as any).openEdit(item)
									}
								}
							}, {
								name: '接单',
								event: {
									show: (item : any) => {
										return item.status === 0
									},
									click: (item : any) => {
										(this as any).getOrder(item)
									}
								}
							}]
						}
					]
				}
			},
		}
		created() {
			this.timer = setInterval(() => {
				this.getDataList()
			}, 500)
		}
		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) {
			let data = (this.$refs.bill as any).getTablePage('all');
			query.pageNo = data.pageNo;
			query.pageSize = 10;
			query.submitState = 1; // 已提交状态
			console.log('分页数据 ==> ', query);
			let loading = this.$loading({ target: '.main-container' });
			api.pageList(query, 'supplyTaskOrder').then((res : any) => {
				loading.close();
				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.$message.error(res.msg)
			}).catch(() => loading.close());
		}
		// 分页
		pagination(e : any) {
			let query : any = (this as any).$refs.bill.getSearchValue(e.type);
			query.pageNo = e.page.pageNum;
			query.pageSize = e.page.pageSize;
			query.submitState = 1;
			let loading = this.$loading({ target: '.main-container' });
			api.pageList(query, 'supplyTaskOrder').then((res : any) => {
				loading.close();
				if (res.code === 200) {
					(this.$refs.bill as any).setTabTableValue(e.type, res.data.records);
				} else this.$message.error(res.msg)
			}).catch(() => loading.close());
		};
		// 打开编辑
		openEdit(e : any) {
			e = e.row ? e.row : e;
			let loading = this.$loading({ target: '.main-container' });
			api.single({ id: e.id }, 'supplyTaskOrder').then((res : any) => {
				loading.close();
				if (res.code === 200) {
					let parentData = res.data ? res.data : e;
					let billConfig = (this as any).$lodash.cloneDeep(this.config.bill);
					this.baseInfo = parentData;
					billConfig.tool.tools = {return: true};
					if (parentData.status === 0) billConfig.tool.tools = { return: true, order: true, };
					(this.$refs.bill as any).setBillConfig(billConfig);
					(this.$refs.bill as any).setBillFormValue(parentData); // 设置单据表单数据
					(this.$refs.bill as any).setBillTableValue(parentData.suborderList, 0);// 设置第1张单据表格数据
					(this.$refs.bill as any).showTab = 'bill';
				}
			}).catch(() => loading.close());
		}
		// 切换tab栏
		clickTab(e : any) {
			(this.$refs.bill as any).showTab = e;
			if (e === 'all') this.getPageList({}, 'all'); // 综合数据
			if (e === 'bill') {
				let billConfig = (this as any).$lodash.cloneDeep(this.config.bill);
				billConfig.tool.tools = {};
				(this.$refs.bill as any).setBillConfig(billConfig);
			}
		}
		// 返回
		onReturn() {
			this.clickTab('all');
		}
		// 搜索
		search(parames : any) {
			let query = parames.value
			if (parames.type === 'draftsBox') query.submitState = 0 // 草稿箱数据
			if (parames.type === 'smt') query.submitState = 1 // 草稿箱数据
			this.getPageList(query, parames.type) // 获取分页数据
		}
		// 工具栏接单
		onOrder() {
			this.$confirm('确定接单吗', '注意', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true
			}).then(() => {
				let loading = this.$loading({ target: '.main-container' });
				api.ordersaccepting({ ids: this.baseInfo.id }, 'supplyTaskOrder').then((res : any) => {
					loading.close();
					if (res.code === 200) {
						this.$message.success('接单成功');
						this.clickTab('all');
						this.$confirm('是否跳转销售订单', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
						}).then(() => {
							this.$router.push('/document/saleOrder');
						}).catch(() => { });
					} else this.$message.error(res.msg)
				}).catch(() => loading.close());
			}).catch(() => this.$message.info('已取消接单'));
		}
		// 操作接单
		getOrder(item : any) {
			this.$confirm('确定接单吗', '注意', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true
			}).then(() => {
				api.ordersaccepting({ ids: item.id }, 'supplyTaskOrder').then((res : any) => {
					if (res.code === 200) {
						this.$message.success('接单成功');
						this.clickTab('all');
						this.$confirm('是否跳转销售订单', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
						}).then(() => {
							this.$router.push('/document/saleOrder');
						})
					} else this.$message.error(res.msg)
				})
			}).catch(() => this.$message.info('已取消接单'));
		}
		// 刷新/重置
		resert(e : any) {
			let data : any = e.type ? e.type : e;
			(this as any).$refs.bill.$refs[data].clearSearch();
			if (data === 'all') this.getPageList({}, 'all'); // 综合数据
		}
	}
</script>