任务订单子表

src/components/skuModal/productModal.vue

@@ -28,7 +28,6 @@ export default class ProductModal extends Vue {
   @Prop()
   mulit?:boolean
 
-
   config:any={
     search:{
       attr:{
@@ -114,6 +113,7 @@ export default class ProductModal extends Vue {
   }
 
   created(){
+		console.log(this.mulit);
     if(this.mulit){
       this.config.table.attr.checkbox = true
     }else{

src/views/audit/orderTask/components/productModal.vue

@@ -0,0 +1,172 @@
+<template>
+	<vxe-modal v-model="value" id="productDialogModal" :width="width?width+'px':'80%'" @show="show"
+		:height="height?height+'px':'80%'" min-width="500" min-height="400" show-zoom resize transfer show-footer
+		@confirm="confirm">
+		<template #title>
+			<span>选择商品</span>
+		</template>
+		<template #default>
+			<module-view :propConfig="config" ref="view" @pagination="getList" @search="getList" @resert="getList"
+				@clickHandle="clickHandle" />
+		</template>
+	</vxe-modal>
+</template>
+
+<script lang="ts">
+	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+	@Component
+	export default class ProductModal extends Vue {
+		value = false
+		time : any;
+		timeNum = 0;
+		data : Array<any> = []
+
+		@Prop()
+		width ?: number
+
+		@Prop()
+		height ?: number
+
+		@Prop()
+		mulit ?: boolean
+
+		config : any = {
+			search: {
+				attr: {
+					size: 'mini'
+				},
+				columns: [
+					[{
+						span: 6,
+						label: '标题',
+						prop: 'skuTitle',
+						component: 'by-input',
+						compConfig: {
+							attr: {
+								clearable: true,
+								placeholder: '请输入名称'
+							}
+						}
+					}]
+				]
+			},
+			tool: {
+				tools: {
+					search: true,
+					refresh: true
+				}
+			},
+			table: {
+				attr: {
+					size: 'mini',
+					seq: true,
+					align: 'center',
+					checkbox:true,
+					pageSize: 10
+				},
+				columns:
+					[
+						{
+							title: '标题',
+							field: 'skuTitle',
+							// width: 150
+						},
+						{
+							title: '副标题',
+							field: 'skuSubtitle',
+							// width: 150
+						},
+						{
+							title: '规格',
+							field: 'materialSpec'
+						},
+						{
+							title: '单位',
+							field: 'unit'
+						},
+						{
+							title: '单价',
+							field: 'price'
+						},
+					]
+			},
+			// request:{
+			//   url:'/system/maindataMaterial/page'
+			// }
+		}
+		brandData : Array<any> = []
+
+		getBrandData() {
+			return this.brandData;
+		}
+
+		clickHandle(n : string) {
+			if (n == 'onRefresh') {
+				this.getList()
+			}
+		}
+
+		setShow(v : boolean) {
+			this.value = v;
+		}
+
+		mounted() { }
+
+		//确定
+		confirm() {
+			let data : Array<any> = this.getSelectdata();
+			this.$emit('confirm', data);
+			this.value = false;
+		}
+		//获取已选中表格数据
+		getSelectdata() {
+			let data : Array<any> = [];
+			if (this.$refs.view) {
+				data = (this.$refs.view as any).getSelectData()
+			}
+			return data;
+		}
+		//显示弹窗
+		show() {
+			if (this.data.length == 0) {
+				this.time = setInterval(() => {
+					this.getList()
+				}, 500)
+			}
+			if (this.$refs.view) {
+				(this.$refs.view as any).clearCheckboxRow();
+			}
+		}
+		getList() {
+			if (!this.$refs.view) {
+				if (this.timeNum > 5) {
+					clearInterval(this.time)
+				}
+				this.timeNum++;
+				return
+			}
+			clearInterval(this.time)
+			let query : any = (this.$refs.view as any).getQuery();
+			query.isLikeSearch = '1';
+			(this as any).$request({
+				url: '/maindata/maindataMaterialSku/page',
+				method: 'get',
+				params: query
+			}).then((res : any) => {
+				if (res.data.records) {
+					(this.$refs.view as any).setTableValue(res.data.records);
+					this.data = res.data.records;
+					let page = {
+						pageNo: res.data.current, //当前页
+						pageSize: res.data.size, //每页条数
+						total: res.data.total //总条数
+					};
+					(this.$refs.view as any).setPage(page)
+				}
+			})
+		}
+	}
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/audit/orderTask/index.vue

@@ -1,8 +1,10 @@
 <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">
+			@onDispatch="onDispatch" @onRefresh="onRefresh" @detail="openEdit" @onSave="onSave" @clickTab="clickTab"
+			@onChangeRow="onChangeRow">
 		</by-bill>
+		<productModal ref="product" :mulit="true" @confirm="confirmProduct" />
 	</div>
 </template>
 
@@ -10,16 +12,17 @@
 	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 	import api from "@/api/order";
 	import Assembly from "@/components/Assembly/order.vue";
-	@Component
+	import productModal from "./components/productModal.vue";
+	@Component({ components: { productModal } })
 	export default class OrderTask extends Vue {
 		// 右边
-		tableData : any = ''
+		tableData : any = []
 		setStatusData : any = ''
 		timeNum = 0;
 		timer : any = null
 		config : any = {
 			attr: {
-				activeName: 'all'
+				activeName: 'bill'
 			},
 			// 单据
 			bill: {
@@ -119,47 +122,95 @@
 									width: 300,
 									title: '物料名称',
 									field: 'materialName',
-									component: 'by-input'
+									// component: 'by-input'
 								},
 								{
 									title: '单位',
 									field: 'unit',
-									component: 'by-input'
+									component: 'by-input',
+									compConfig: {
+										attr: {
+											size: 'mini',
+											placeholder: ' ',
+											readonly: true
+										},
+									}
 								},
 								{
 									title: '数量',
 									field: 'number',
-									component: 'by-input'
+									component: 'by-input',
+									compConfig: {
+										attr: {
+											size: 'mini',
+										},
+									}
 								},
 								{
 									title: '已交付数量',
 									field: 'deliveryNumber',
-									component: 'by-input'
-								},
-								{
-									title: '规格',
-									field: 'specs',
-									component: 'by-input'
+									component: 'by-input',
+									compConfig: {
+										attr: {
+											size: 'mini',
+											placeholder: '0',
+											readonly: true
+										},
+									}
 								},
+								// {
+								// 	title: '规格',
+								// 	field: 'specs',
+								// 	component: 'by-input',
+								// 	compConfig: {
+								// 		attr: {
+								// 			size: 'mini',
+								// 			readonly:true
+								// 		},
+								// 	}
+								// },
 								{
 									title: '单价',
 									field: 'unitPrice',
-									component: 'by-input'
+									component: 'by-input',
+									compConfig: {
+										attr: {
+											size: 'mini',
+										},
+									}
 								},
 								{
 									title: '实际金额',
 									field: 'realityPrice',
-									component: 'by-input'
+									component: 'by-input',
+									compConfig: {
+										attr: {
+											size: 'mini',
+											readonly: true
+										},
+									}
 								},
 								{
 									title: '优惠金额',
 									field: 'prePrice',
-									component: 'by-input'
+									component: 'by-input',
+									compConfig: {
+										attr: {
+											size: 'mini',
+											defaultValue: '0'
+										},
+									}
 								},
 								{
 									title: '合计金额',
 									field: 'totalPrice',
-									component: 'by-input'
+									component: 'by-input',
+									compConfig: {
+										attr: {
+											size: 'mini',
+											readonly: true
+										},
+									}
 								},
 								{
 									width: 80,
@@ -799,48 +850,85 @@
 				this.getDataList()
 			}, 500)
 		}
+		// 监听表格数据变化
+		onChangeRow(e : any) {
+			// console.log(e);
+			// this.tableData.filter((v:any) => v.id == e.id);
+		}
 		// 保存
 		onSave(e : any) {
-			console.log('保存 ==>', e);
+			// 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 = this.tableData.filter((res : any) => res.isDeleted === 0);
-					console.log(query);
+					query.suborderList = this.tableData;
+					if (query.suborderList.length > 0) {
+						query.suborderList.map((v : any) => {
+							v.taskOrderId = query.id
+						})
+					};
+					query.suborderList.map((v : any, i : any) => {
+						if (v.isDeleted !== 1 && !v.id) {
+							console.log(v);
+							v.splice(i, 1)
+						}
+					});
+					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)
+						} else this.$message.error(res.msg);
 					})
 				})
 			}
 		}
+		// 确定商品新增
+		confirmProduct(e : any) {
+			let contents = '', goodsData = e;
+			goodsData = goodsData.map((item : any) => {
+				item.materialName = item.skuTitle
+				item.materialId = item.materialId
+				item.unitPrice = item.price
+				item.materialSku = item.id
+				const { skuTitle, price, id, materialId, ...newData } = item
+				return newData
+			})
+			this.tableData = this.tableData.concat(goodsData);
+			this.tableData.map((v : any, i : any) => {
+				v.dataIndex = i
+			});
+			if (contents) {
+				this.$alert('商品id' + contents + '已存在！', '提示', {
+					confirmButtonText: '确定',
+				});
+			};
+			(this.$refs.bill as any).setBillTableValue(this.tableData, 0);// 设置第1张单据表格数据
+		}
 		// 打开新增
 		onAdd(e : any) {
 			console.log('新增 ==>', e);
 			if (e === 'billTable_0') {
+				(this.$refs.product as any).setShow(true)
 				let obj = (this.$refs.bill as any).getBillFormValue();
+				// console.log('BillFormValue ==> ', obj);
 				if (!this.tableData) this.tableData = obj.suborderList;
-				this.tableData.unshift({ isDeleted: 0, taskOrderId: obj.id })
-				console.log(this.tableData);
 				(this.$refs.bill as any).setBillTableValue(this.tableData, 0);// 设置第1张单据表格数据
-			}
-			// (this.$refs.bill as any).setBillFormValue({}); // 设置单据表单数据
-			// (this.$refs.bill as any).showTab = 'bill';
+			};
+			if (e != 'billTable_0') (this.$refs.bill as any).setBillFormValue({}); // 设置单据表单数据
+			(this.$refs.bill as any).showTab = 'bill';
 		}
 		// 打开编辑
 		openEdit(e : any) {
 			e = e.row ? e.row : e;
-			console.log('编辑 ==>', e);
 			let data = e.suborderList
 			data.map((v : any, i : any) => {
 				v.dataIndex = i
-				// v.dataIndex = Math.round(Math.random()*100+1)
 			});
 			this.tableData = data;
+			console.log('表格数据 ==> ', this.tableData);
 			(this.$refs.bill as any).setBillFormValue(e); // 设置单据表单数据
 			(this.$refs.bill as any).setBillTableValue(data, 0);// 设置第1张单据表格数据
 			(this.$refs.bill as any).showTab = 'bill';
@@ -941,7 +1029,7 @@
 			if (e === 'smt') this.getPageList({ submitState: 1 }, 'smt'); // 已提交数据
 			if (e === 'recycleBin') this.getSelectDeleteList('supplyTaskOrder') // 回收站数据
 		}
-		// 单据表格数据更新
+		// 单据表格删除
 		changeTable(item : any) {
 			this.$confirm('确定删除吗！', '注意', {
 				confirmButtonText: '确定',
@@ -950,16 +1038,15 @@
 				center: true
 			}).then(() => {
 				this.tableData[item.dataIndex].isDeleted = 1;
-				let newData = this.tableData.filter((res : any) => res.isDeleted === 0)
-				console.log(this.tableData);
-				console.log(newData);
+				let newData = this.tableData.filter((res : any) => res.isDeleted === 0);
+				console.log('原表格数据 ==> ', this.tableData);
+				console.log('新表格数据 ==> ', newData);
 				(this.$refs.bill as any).setBillTableValue(newData, 0);// 设置第1张单据表格数据
 				this.$message({
 					type: 'success',
 					message: '删除成功!'
 				});
-			}).catch((res : any) => {
-				console.log(res);
+			}).catch(() => {
 				this.$message({
 					type: 'info',
 					message: '已取消删除'
@@ -1010,18 +1097,10 @@
 				api.deleteList({ ids: item.id }, 'supplyTaskOrder').then((res : any) => {
 					if (res.code === 200) {
 						this.getDataList();
-						this.$message({
-							type: 'success',
-							message: '删除成功!'
-						});
+						this.$message.success('删除成功!');
 					} else this.failHandle(res)
 				})
-			}).catch(() => {
-				this.$message({
-					type: 'info',
-					message: '已取消删除'
-				});
-			});
+			}).catch(() => this.$message.error('已取消删除'));
 		}
 		// 运行错误
 		failHandle(err : any) {