弹窗修改

src/views/auxiliaryFittings/attachmentProfile/index.vue

@@ -1,20 +1,23 @@
 <template>
-	<template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
-		:operationColumnWidth="50" :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters"
-		:column-parsing="columnParsing" :operation="operation()" :exportList="exportList">
-		<el-dialog title="" width="1200px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
-			:show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
-			<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
-				<zj-form-module :title="formDialogTitles[formDialogType]" label-width="170px" :showPackUp="false"
-					:form-data="formData" :form-items="formItems" :disabled="formDialogType == 2">
-				</zj-form-module>
-			</zj-form-container>
-			<div slot="footer" class="dialog-footer">
-				<el-button size="mini" @click="formCancel">取 消</el-button>
-				<el-button size="mini" type="primary" @click="formConfirm()">确定</el-button>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<template-page v-if="activeKey == 'list'" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+			  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing" :operationColumnWidth="50"
+			  :operation="operation()" :exportList="exportList">
+			</template-page>
+			<div v-if="~['add', 'edit'].indexOf(activeKey)">
+				<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+					<zj-form-module title="" label-width="170px" :showPackUp="false"
+						:form-data="formData" :form-items="formItems" :disabled="formDialogType == 2">
+					</zj-form-module>
+				</zj-form-container>
+				<div slot="footer" class="dialog-footer">
+				  <el-button size="mini" @click="data.removeTab()">取 消</el-button>
+				  <el-button v-if="formDialogType !== 2" size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
+				</div>
 			</div>
-		</el-dialog>
-	</template-page>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -66,7 +69,9 @@ export default {
 			},
 			partsUnitList: [],
 			brandList: [],
-			categoryList: []
+			categoryList: [],
+			formType: 'add',
+			formVisible: false,
 		}
 	},
 	computed: {
@@ -76,7 +81,9 @@ export default {
 				[
 					[
 						this.optionsEvensAuth("add", {
-							click: this.addData
+							click: () => {
+								this.openForm('add')
+							}
 						}),
 					],
 				],
@@ -162,7 +169,7 @@ export default {
 		},
 		formItems() {
 			return [{
-				md: 12,
+				md: 6,
 				isShow: true,
 				name: 'el-input',
 				attributes: { placeholder: '请输入', disabled: true },
@@ -172,7 +179,7 @@ export default {
 					rules: [...required]
 				},
 			}, {
-				md: 12,
+				md: 6,
 				isShow: true,
 				name: 'slot-component',
 				attributes: {},
@@ -191,7 +198,7 @@ export default {
 					)
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: true,
 				name: 'el-input',
 				attributes: { placeholder: '请输入配件名称', },
@@ -201,7 +208,7 @@ export default {
 					rules: [...required]
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: true,
 				name: 'el-select-add',
 				labelKey: 'dictValue',
@@ -219,7 +226,7 @@ export default {
 					}
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: true,
 				name: 'el-input',
 				attributes: { placeholder: '请输入配件代码' },
@@ -229,7 +236,7 @@ export default {
 					rules: [...required]
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: true,
 				name: 'slot-component',
 				attributes: {},
@@ -284,7 +291,7 @@ export default {
 					}
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: this.formData.normType == 'M' ? true : false,
 				name: 'slot-component',
 				attributes: { placeholder: '请输入', type: 'number' },
@@ -305,7 +312,7 @@ export default {
 					)
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: this.formData.normType == 'M' ? true : false,
 				name: 'slot-component',
 				attributes: { placeholder: '请输入', type: 'number' },
@@ -339,7 +346,7 @@ export default {
 					)
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: this.formData.normType == 'M' ? true : false,
 				name: 'slot-component',
 				attributes: { placeholder: '请输入', type: 'number' },
@@ -367,7 +374,7 @@ export default {
 					)
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: this.formData.normType == 'M' ? false : true,
 				name: 'slot-component',
 				attributes: { placeholder: '请输入', type: 'number' },
@@ -399,7 +406,7 @@ export default {
 					)
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: this.formData.normType == 'M' ? true : false,
 				name: 'slot-component',
 				attributes: { placeholder: '请输入', type: 'number' },
@@ -427,7 +434,7 @@ export default {
 					)
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: this.formData.normType == 'M' ? true : false,
 				name: 'slot-component',
 				attributes: { placeholder: '请输入', type: 'number' },
@@ -447,7 +454,7 @@ export default {
 					)
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: this.formData.normType == 'M' ? false : true,
 				name: 'slot-component',
 				attributes: { placeholder: '请输入', type: 'number' },
@@ -479,7 +486,7 @@ export default {
 					)
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: this.formData.normType == 'M' ? true : false,
 				name: 'slot-component',
 				attributes: { placeholder: '请输入', type: 'number' },
@@ -573,36 +580,53 @@ export default {
 			return this.operationBtn({
 				edit: {
 					click: ({ row, index, column }) => {
-						getDetail({ id: row.goodsId }).then(res => {
-							Object.assign(this.formData, res.data, {
-								brandList: res.data.brandList ? res.data.brandList : [],
-								categoryList: res.data.categoryList ? res.data.categoryList : [],
-
-							})
-							console.log(this.formData)
-							this.formDialogType = 1
-							this.openForm()
-						})
+						this.openForm('edit',row.goodsId)
 					}
 				},
 			})
 		},
-
-		addData() {
-			this.formDialogType = 0
-			this.openForm()
-			console.log(this.partsUnitList, this.brandList, this.categoryList)
-		},
-		openForm() {
-			this.getTypeList('PARTS_UNIT', 'partsUnitList')
-			this.getTypeList('BRAND', 'brandList')
-			this.getCategoryList()
-			this.formDialog = true;
+		// 打开 新增编辑 网点表单
+		openForm(type, id) {
+			this.$refs.tabPage.addTab({
+				// 对应显示的模块
+				activeKey: type,
+				// 唯一标识
+				key: type,
+				// 页签名称
+				label: ({ edit: "编辑", add: "新增" })[type],
+				// 打开时事件
+				triggerEvent: () => {
+					this.formCancel()
+					this.$nextTick(()=>{
+						this.formType = type
+						this.formVisible = true
+						this.getTypeList('PARTS_UNIT', 'partsUnitList')
+						this.getTypeList('BRAND', 'brandList')
+						this.getCategoryList()
+						if (type == 'add') {
+							this.formDialogType = 0
+						} else if(type == 'edit'){
+							this.formDialogType = 1
+							getDetail({ id }).then(res => {
+								Object.assign(this.formData, res.data, {
+									brandList: res.data.brandList ? res.data.brandList : [],
+									categoryList: res.data.categoryList ? res.data.categoryList : [],
+							
+								})
+							})
+						}
+					})
+				},
+				// 关闭时事件
+				closeEvent: () => {
+				
+				}
+			})
 		},
 		formCancel() {
-			this.$refs.formRef.$refs.inlineForm.clearValidate()
-			this.$data.formData = this.$options.data().formData
-			this.formDialog = false
+			this.formVisible = false
+			this.$refs?.formRef?.resetFields()
+			this.$data.formRef = this.$options.data().formRef
 		},
 		updateStatus(stateEnum) {
 			if (this.recordSelected.length == 0) {
@@ -627,12 +651,12 @@ export default {
 				})
 			});
 		},
-		formConfirm() {
+		formConfirm(cancel) {
 			this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
 				if (valid) {
 					([add, edit][this.formDialogType])(this.formData).then(res => {
 						this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
-						this.formCancel()
+						cancel('list')
 						this.$refs.pageRef.refreshList()
 					})
 				}

src/views/mallManagement/freight/index.vue

@@ -1,32 +1,35 @@
 <template>
-  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
-    :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
-    :operation="operation()" :exportList="exportList">
-    <el-dialog title="" width="1165px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
-      :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
-      <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
-        <zj-form-module :title="formDialogTitles[formDialogType]" label-width="100px" :showPackUp="false"
-          :form-data="formData" :form-items="formItems">
-        </zj-form-module>
-      </zj-form-container>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="formCancel">取 消</el-button>
-        <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
-      </div>
-    </el-dialog>
-    <el-dialog title="" width="300px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog2"
-      :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel2">
-      <zj-form-container ref="formRef2" :form-data="formData2" :styleSwitch="false">
-        <zj-form-module title="地区选择" label-width="0px" :showPackUp="false" :form-data="formData2"
-          :form-items="formItems2">
-        </zj-form-module>
-      </zj-form-container>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="formCancel2">取 消</el-button>
-        <el-button size="mini" @click="formConfirm2" type="primary">确 定</el-button>
-      </div>
-    </el-dialog>
-  </template-page>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<template-page v-if="activeKey == 'list'" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+			  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+			  :operation="operation()" :exportList="exportList">
+			</template-page>
+			<div v-if="~['add', 'edit'].indexOf(activeKey)">
+				<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+				  <zj-form-module title="" label-width="100px" :showPackUp="false"
+				    :form-data="formData" :form-items="formItems">
+				  </zj-form-module>
+				</zj-form-container>
+				<div slot="footer" class="dialog-footer">
+				  <el-button size="mini" @click="data.removeTab()">取 消</el-button>
+				  <el-button size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
+				</div>
+				<el-dialog title="" width="300px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog2"
+				  :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel2">
+				  <zj-form-container ref="formRef2" :form-data="formData2" :styleSwitch="false">
+				    <zj-form-module title="地区选择" label-width="0px" :showPackUp="false" :form-data="formData2"
+				      :form-items="formItems2">
+				    </zj-form-module>
+				  </zj-form-container>
+				  <div slot="footer" class="dialog-footer">
+				    <el-button size="mini" @click="formCancel2">取 消</el-button>
+				    <el-button size="mini" @click="formConfirm2" type="primary">确 定</el-button>
+				  </div>
+				</el-dialog>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -61,7 +64,9 @@ export default {
       },
       formDialog2: false,
       formData2: {},
-      regionTree: []
+      regionTree: [],
+			formType: 'add',
+			formVisible: false,
     }
   },
   computed: {
@@ -72,7 +77,7 @@ export default {
 				[
 					this.optionsEvensAuth("add", {
 						click: () => {
-							this.addData()
+							this.openForm('add')
 						}
 					})
 				],
@@ -224,11 +229,7 @@ export default {
 			edit: {
 				btnType: 'text',
 				click: ({ row, index, column }) => {
-					getFreightDetail({ freightTemplateId: row.freightTemplateId }).then(res => {
-					  Object.assign(this.formData, res.data)
-					  this.formDialogType = 1
-					  this.openForm()
-					})
+					this.openForm('edit',row.freightTemplateId)
 				}
 			},
 			del: {
@@ -258,24 +259,47 @@ export default {
 			},
 		})
 	},
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
-      this.formDialog = true;
+    openForm(type, freightTemplateId) {
+      this.$refs.tabPage.addTab({
+      	// 对应显示的模块
+      	activeKey: type,
+      	// 唯一标识
+      	key: type,
+      	// 页签名称
+      	label: ({ edit: "编辑", add: "新增" })[type],
+      	// 打开时事件
+      	triggerEvent: () => {
+      		this.formCancel()
+      		this.$nextTick(()=>{
+      			this.formType = type
+      			this.formVisible = true
+      			if (type == 'add') {
+      				this.formDialogType = 0
+      			} else if(type == 'edit'){
+      				this.formDialogType = 1
+      				getFreightDetail({ freightTemplateId }).then(res => {
+      				  Object.assign(this.formData, res.data)
+      				})
+      			}
+      		})
+      	},
+      	// 关闭时事件
+      	closeEvent: () => {
+      	
+      	}
+      })
     },
     formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
-      this.$data.formData = this.$options.data().formData
-      this.formDialog = false
+      this.formVisible = false
+      this.$refs?.formRef?.resetFields()
+      this.$data.formRef = this.$options.data().formRef
     },
-    formConfirm() {
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           addOrEditFreight(this.formData).then(res => {
             this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
-            this.formCancel()
+            cancel('list')
             this.$refs.pageRef.refreshList()
           })
         }

src/views/mallManagement/storage/index.vue

@@ -1,20 +1,23 @@
 <template>
-  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
-    :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
-    :operation="operation()" :exportList="exportList">
-    <el-dialog title="" width="500px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
-      :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
-      <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
-        <zj-form-module :title="formDialogTitles[formDialogType]" label-width="100px" :showPackUp="false"
-          :form-data="formData" :form-items="formItems">
-        </zj-form-module>
-      </zj-form-container>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="formCancel">取 消</el-button>
-        <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
-      </div>
-    </el-dialog>
-  </template-page>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<template-page v-if="activeKey == 'list'" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+			  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+			  :operation="operation()" :exportList="exportList">
+			</template-page>
+			<div v-if="~['add', 'edit', 'detail'].indexOf(activeKey)">
+				<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+				  <zj-form-module title="" label-width="100px" :showPackUp="false"
+				    :form-data="formData" :form-items="formItems">
+				  </zj-form-module>
+				</zj-form-container>
+				<div slot="footer" class="dialog-footer">
+				  <el-button size="mini" @click="data.removeTab()">取 消</el-button>
+				  <el-button size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -48,6 +51,8 @@ export default {
         storageMobile: '',
         storageAddress: '',
       },
+			formType: 'add',
+			formVisible: false,
     }
   },
   computed: {
@@ -58,7 +63,7 @@ export default {
 				[
 					this.optionsEvensAuth("add", {
 						click: () => {
-							this.addData()
+							this.openForm('add')
 						}
 					})
 				],
@@ -71,7 +76,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -81,7 +86,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -91,7 +96,7 @@ export default {
           rules: [...mobile]
         }
       }, {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -122,11 +127,7 @@ export default {
 			edit: {
 				btnType: 'text',
 				click: ({ row, index, column }) => {
-					getStorageDetail({ id: row.storageId }).then(res => {
-					  Object.assign(this.formData, res.data)
-					  this.formDialogType = 1
-					  this.openForm()
-					})
+					this.openForm('edit',row.storageId)
 				}
 			},
 			del: {
@@ -141,24 +142,48 @@ export default {
 			}
 		})
 	},
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
-      this.formDialog = true;
+    // 打开 新增编辑 网点表单
+    openForm(type, id) {
+    	this.$refs.tabPage.addTab({
+    		// 对应显示的模块
+    		activeKey: type,
+    		// 唯一标识
+    		key: type,
+    		// 页签名称
+    		label: ({ edit: "编辑", add: "新增" })[type],
+    		// 打开时事件
+    		triggerEvent: () => {
+    			this.formCancel()
+    			this.$nextTick(()=>{
+    				this.formType = type
+    				this.formVisible = true
+    				if (type == 'add') {
+    					this.formDialogType = 0
+    				} else if(type == 'edit'){
+    					this.formDialogType = 1
+    					getStorageDetail({ id }).then(res => {
+    					  Object.assign(this.formData, res.data)
+    					})
+    				}
+    			})
+    		},
+    		// 关闭时事件
+    		closeEvent: () => {
+    		
+    		}
+    	})
     },
     formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
-      this.$data.formData = this.$options.data().formData
-      this.formDialog = false
+      this.formVisible = false
+      this.$refs?.formRef?.resetFields()
+      this.$data.formRef = this.$options.data().formRef
     },
-    formConfirm() {
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           ([addStorage, editStorage][this.formDialogType])(this.formData).then(res => {
             this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
-            this.formCancel()
+            cancel('list')
             this.$refs.pageRef.refreshList()
           })
         }