会议演示最终代码

src/views/audit/order/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<by-bill ref="bill" :propConfig="config" @search="search" @onSmt="doSave" @onAdd="onAdd" @onOrder="onOrder"
-			@resert="resert" @refresh="clickHandle" @detail="openEdit">
+			@resert="resert" @refresh="clickHandle" @detail="openEdit" @pagination="pagination">
 		</by-bill>
 	</div>
 </template>
@@ -26,7 +26,7 @@
 				form: {
 					attr: {
 						size: 'small',
-						readonly: false,
+						readonly: true,
 					},
 					columns: [
 						[
@@ -35,89 +35,42 @@
 								label: '机构名称',
 								prop: 'organizationName',
 								component: 'by-input',
-								compConfig: {
-									attr: {
-										size: 'mini',
-										readonly: true
-									},
-								}
 							},
 							{
 								span: 8,
 								label: '单据编号',
-								slot: true,
 								prop: 'orderNumber',
 								component: 'by-input',
-								compConfig: {
-									attr: {
-										size: 'mini',
-										readonly: true
-									},
-								}
 							},
 							{
 								span: 8,
 								label: '联系方式',
-								slot: true,
 								prop: 'deliveryPhone',
 								component: 'by-input',
-								compConfig: {
-									attr: {
-										size: 'mini',
-										readonly: true
-									},
-								}
 							},
 							{
 								span: 8,
 								label: '交货人',
-								slot: true,
 								prop: 'delivery',
 								component: 'by-input',
-								compConfig: {
-									attr: {
-										size: 'mini',
-										readonly: true
-									},
-								}
 							},
 							{
 								span: 8,
 								label: '交货时间',
-								slot: true,
 								prop: 'deliveryData',
-								component: 'by-date-picker',
-								compConfig: {
-									format: 'yyyy-MM-dd hh:ss:mm',
-									type: 'datetime',
-									readonly: true
-								}
+								component: 'by-input',
 							},
 							{
 								span: 8,
 								label: '交货地点',
-								slot: true,
 								prop: 'deliveryAddress',
 								component: 'by-input',
-								compConfig: {
-									attr: {
-										size: 'mini',
-										readonly: true
-									},
-								}
 							},
 							{
 								span: 8,
 								label: '交货方式',
-								slot: true,
 								prop: 'deliveryWay',
 								component: 'by-input',
-								compConfig: {
-									attr: {
-										size: 'mini',
-										readonly: true
-									},
-								}
 							},
 						],
 						[
@@ -130,8 +83,8 @@
 								compConfig: {
 									attr: {
 										size: 'mini',
-										readonly: true,
-										type:'textarea'
+										placeholder: '请输入备注',
+										type: 'textarea'
 									},
 								}
 							},
@@ -143,8 +96,9 @@
 						table: {
 							attr: {
 								size: 'mini',
-								height: 580,
+								height: 500,
 								align: 'center',
+								readonly: true
 							},
 							columns:
 								[{
@@ -153,81 +107,39 @@
 									field: 'materialName',
 								},
 								{
+									width: 150,
 									title: '单位',
 									field: 'unit',
-									component: 'by-input',
-									compConfig: {
-										attr: {
-											size: 'mini',
-											readonly: true
-										},
-									}
 								},
 								{
+									width: 150,
 									title: '数量',
 									field: 'number',
-									component: 'by-input',
-									compConfig: {
-										attr: {
-											size: 'mini',
-											readonly: true
-										},
-									}
 								},
 								{
+									width: 150,
 									title: '已交付数量',
 									field: 'deliveryNumber',
-									component: 'by-input',
-									compConfig: {
-										attr: {
-											size: 'mini',
-											readonly: true
-										},
-									}
 								},
 								{
+									width: 150,
 									title: '单价',
 									field: 'unitPrice',
-									component: 'by-input',
-									compConfig: {
-										attr: {
-											size: 'mini',
-											readonly: true
-										},
-									}
 								},
 								{
+									width: 150,
 									title: '实际金额',
 									field: 'realityPrice',
-									component: 'by-input',
-									compConfig: {
-										attr: {
-											size: 'mini',
-											readonly: true
-										},
-									}
 								},
 								{
+									width: 150,
 									title: '优惠金额',
 									field: 'prePrice',
-									component: 'by-input',
-									compConfig: {
-										attr: {
-											size: 'mini',
-											readonly: true
-										},
-									}
 								},
 								{
+									width: 150,
 									title: '合计金额',
 									field: 'totalPrice',
-									component: 'by-input',
-									compConfig: {
-										attr: {
-											size: 'mini',
-											readonly: true
-										},
-									}
 								},
 							]
 						}
@@ -321,7 +233,7 @@
 							isDetail: true,
 						},
 						{
-							width: 120,
+							width: 150,
 							title: '单据编号',
 							field: 'orderNumber',
 						},
@@ -342,21 +254,20 @@
 							field: 'deliveryData',
 						},
 						{
+							width: 130,
 							title: '交货人',
 							field: 'delivery',
 						},
 						{
-							title: '交货人联系方式',
+							width: 130,
+							title: '联系方式',
 							field: 'deliveryPhone',
 						},
 						{
+							width: 130,
 							title: '交货方式',
 							field: 'deliveryWay',
 						},
-						{
-							title: '备注',
-							field: 'remark',
-						},
 						{
 							width: 110,
 							title: '操作',
@@ -429,6 +340,17 @@
 				} else this.failHandle(res)
 			})
 		}
+		// 分页
+		pagination(e:any){
+			let query = e.page;
+			query.submitState = 1; // 已提交状态
+			api.pageList(query, 'supplyTaskOrder').then((res : any) => {
+				if (res.code === 200) {
+					(this.$refs.bill as any).setTabTableValue(e.type, res.data.records);
+				} else this.failHandle(res)
+			})
+		}
+		
 		getDataList() {
 			if (!this.$refs.bill) {
 				if (this.timeNum > 5) {
@@ -439,10 +361,11 @@
 			}
 			clearInterval(this.timer)
 			// submitState: 提交状态
-			this.getPageList({}, 'all'); // 综合数据
+			this.getPageList({pageSize:20,pageNum:1}, 'all'); // 综合数据
 		}
 		// 获取分页数据
 		getPageList(query : any, type : any) {
+			query.submitState = 1; // 已提交状态
 			api.pageList(query, 'supplyTaskOrder').then((res : any) => {
 				if (res.code === 200) {
 					(this.$refs.bill as any).setTabTableValue(type, res.data.records);
@@ -480,17 +403,25 @@
 		}
 		// 接单
 		getOrder(item : any) {
-			api.ordersaccepting({ ids: item.id }, 'supplyTaskOrder').then((res : any) => {
-				if (res.code === 200) {
-					// 是否跳转销售订单 this.$router.push()
-					this.getDataList();
-					this.$message({
-						type: 'success',
-						message: '接单成功!'
-					});
-				} else this.failHandle(res)
-
-			})
+			this.$confirm('确定接单吗', '注意', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning',
+				center: true
+			}).then(() => {
+				api.ordersaccepting({ ids: item.id }, 'supplyTaskOrder').then((res : any) => {
+					if (res.code === 200) {
+						this.getDataList();
+						this.$message.success('删除成功!');
+						this.$alert('是否跳转销售订单', '提示', {
+							confirmButtonText: '确定',
+							cancelButtonText: '取消',
+						}).then(() => {
+							this.$router.push('/document/saleOrder');
+						})
+					} else this.failHandle(res)
+				})
+			}).catch(() => this.$message.info('已取消接单'));
 		}
 		resert(parames : any) {
 			console.log('重置回传参数', parames);

src/views/audit/orderTask/index.vue

@@ -2,7 +2,7 @@
 	<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"
-			@onChangeRow="onChangeRow">
+			@onChangeRow="onChangeRow" @pagination="pagination">
 		</by-bill>
 		<productModal ref="product" :mulit="true" @confirm="confirmProduct" />
 	</div>
@@ -971,7 +971,16 @@
 				return
 			}
 			clearInterval(this.timer)
-			this.getPageList({}, 'all'); // 综合数据
+			this.getPageList({pageSize:10,pageNum:1}, 'all'); // 综合数据
+		}
+		// 分页
+		pagination(e:any){
+			console.log(e);
+			api.pageList(e.page, 'supplyTaskOrder').then((res : any) => {
+				if (res.code === 200) {
+					(this.$refs.bill as any).setTabTableValue(e.type, res.data.records);
+				} else this.failHandle(res)
+			})
 		}
 		// 获取分页数据
 		getPageList(query : any, type : any) {

src/views/audit/saleOrder/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<by-bill :propConfig="config" @search="search" @onSmt="doSave" ref="bill" @onAdd="onAdd" @onOrder="onOrder"
-			@resert="resert" @detail="openEdit" @onRefresh="onRefresh">
+			@resert="resert" @detail="openEdit" @onRefresh="onRefresh" @pagination="pagination">
 		</by-bill>
 	</div>
 </template>
@@ -33,6 +33,7 @@
 				form: {
 					attr: {
 						size: 'small',
+						readonly: true,
 					},
 					columns: [
 						[
@@ -41,94 +42,116 @@
 								label: '机构名称',
 								prop: 'organizationName',
 								component: 'by-input',
-								compConfig: {
-									attr: {
-										placeholder: '请输入机构名称',
-										clearable: true
-									}
-								}
 							},
 							{
 								span: 8,
 								label: '单据编号',
 								prop: 'orderNumber',
 								component: 'by-input',
-								compConfig: {
-									attr: {
-										placeholder: '请输入单据编号',
-										clearable: true
-									}
-								}
 							},
 							{
 								span: 8,
-								label: '交货地点',
-								prop: 'deliveryAddress',
+								label: '联系方式',
+								prop: 'deliveryPhone',
 								component: 'by-input',
-								compConfig: {
-									attr: {
-										placeholder: '请输入交货地点',
-										clearable: true
-									}
-								}
 							},
 							{
 								span: 8,
-								label: '交货时间',
-								prop: 'deliveryData',
-								component: 'by-date-picker',
-								compConfig: {
-									format: 'yyyy-MM-dd',
-									type: 'datetime'
-								}
+								label: '交货人',
+								prop: 'delivery',
+								component: 'by-input',
 							},
 							{
 								span: 8,
-								label: '交货人',
-								prop: 'delivery',
+								label: '交货时间',
+								prop: 'deliveryData',
 								component: 'by-input',
-								compConfig: {
-									attr: {
-										placeholder: '请输入交货人',
-										clearable: true
-									}
-								}
 							},
 							{
 								span: 8,
-								label: '联系方式',
-								prop: 'deliveryPhone',
+								label: '交货地点',
+								prop: 'deliveryAddress',
 								component: 'by-input',
-								compConfig: {
-									attr: {
-										placeholder: '请输入联系方式',
-										clearable: true
-									}
-								}
 							},
 							{
 								span: 8,
 								label: '交货方式',
 								prop: 'deliveryWay',
 								component: 'by-input',
-								compConfig: {
-									attr: {
-										placeholder: '请输入交货方式',
-										clearable: true
-									}
-								}
 							},
 						],
 						[
 							{
-								span: 30,
+								span: 28,
 								label: '备注',
 								slot: true,
 								prop: 'remark',
-							}
+								component: 'by-input',
+								compConfig: {
+									attr: {
+										size: 'mini',
+										placeholder: '请输入备注',
+										type: 'textarea'
+									},
+								}
+							},
 						]
 					]
-				}
+				},
+				tableConfig: [
+					{
+						table: {
+							attr: {
+								size: 'mini',
+								height: 500,
+								align: 'center',
+								readonly: true
+							},
+							columns:
+								[{
+									width: 300,
+									title: '物料名称',
+									field: 'materialName',
+								},
+								{
+									width: 150,
+									title: '单位',
+									field: 'unit',
+								},
+								{
+									width: 150,
+									title: '数量',
+									field: 'number',
+								},
+								{
+									width: 150,
+									title: '已交付数量',
+									field: 'deliveryNumber',
+								},
+								{
+									width: 150,
+									title: '单价',
+									field: 'unitPrice',
+								},
+								{
+									width: 150,
+									title: '实际金额',
+									field: 'realityPrice',
+								},
+								{
+									width: 150,
+									title: '优惠金额',
+									field: 'prePrice',
+								},
+								{
+									width: 150,
+									title: '合计金额',
+									field: 'totalPrice',
+								},
+								]
+						}
+					}
+				]
 			},
 			// 综合
 			all: {
@@ -242,6 +265,12 @@
 							width: 120,
 							title: '联系方式',
 							field: 'deliveryPhone',
+							// compConfig: {
+							// 	attr: {
+							// 		size: 'mini',
+							// 		placeholder: ' ',
+							// 	},
+							// }
 						},
 						{
 							title: '交货时间',
@@ -332,12 +361,20 @@
 			}
 			clearInterval(this.timer)
 			// submitState: 提交状态
-			this.getPageList({}, 'all'); // 综合数据
+			this.getPageList({pageSize:20,pageNum:1}, 'all'); // 综合数据
 			// recycleBin
 			// this.getPageList({ submitState: 0 }, 'draftsBox'); // 草稿箱数据
 			// this.getPageList({ submitState: 1 }, 'smt'); // 已提交数据
 			// this.getSelectDeleteList('supplyPurchaseOrder') // 回收站数据
 		}
+		pagination(e:any){
+			console.log(e);
+			api.pageList(e.page, 'supplyPurchaseOrder').then((res : any) => {
+				if (res.code === 200) {
+					(this.$refs.bill as any).setTabTableValue(e.type, res.data.records);
+				} else this.failHandle(res)
+			})
+		}
 		// 获取分页数据
 		getPageList(query : any, type : any) {
 			api.pageList(query, 'supplyPurchaseOrder').then((res : any) => {
@@ -379,6 +416,7 @@
 			e = e.row ? e.row : e;
 			// this.orderType = '编辑';
 			(this.$refs.bill as any).setBillFormValue(e); // 设置单据表单数据
+			(this.$refs.bill as any).setBillTableValue(e.suborderList, 0);// 设置第1张单据表格数据
 			(this.$refs.bill as any).showTab = 'bill';
 		}
 		// 搜索