Merge branch 'develop' of ssh://gogs.zfire.top:2222/zfire-front/zfire-newmall-admin

# Conflicts:
#	src/views/engineeringMaintenance/applicationWithoutFee/index.vue

src/api/order.js

@@ -155,7 +155,7 @@ export function batchRemark(params) {
 
 export function getWebsiteList(params) {
   return request({
-    url: '/websit/list',
+    url: '/admin/websit/list',
     method: 'get',
     params
   })

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: $route.meta.title+'-列表', 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.formVisible = false
+			this.$refs?.formRef?.resetFields()
 			this.$data.formData = this.$options.data().formData
-			this.formDialog = false
 		},
 		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/auxiliaryFittings/auxiliaryDataManagement/auxiliaryChargeManagement/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="860px" 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="120px" :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: $route.meta.title+'-列表', 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" :operationColumnWidth="80">
+			</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="180px" :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>
@@ -31,44 +34,46 @@ export default {
   mixins: [import_mixin, operation_mixin],
   data() {
     return {
-      // 表格属性
-      tableAttributes: {
-        // 启用勾选列
-        selectColumn: true
-      },
-      // 表格事件
-      tableEvents: {
-        'selection-change': this.selectionChange
-      },
-      // 勾选选中行
-      recordSelected: [],
-      /** 表单变量 */
-      formDialogType: 0,
-      formDialogTitles: ["新增", "编辑"],
-      formDialog: false,
-      formData: {
-        companyWechatName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
-        "categoryId": "",
-        "companyWechatId": "",
-        "createBy": "",
-        "createTime": "",
-        "normAmount": 0,
-        "normCode": "",
-        "normId": "",
-        "normName": "",
-        "normType": "",
-        "outWebsitAmount": 0,
-        "outWorkerAmount": 0,
-        "parentCategoryId": "",
-        "remark": "",
-        "selfWebsitAmount": 0,
-        "selfWorkerAmount": 0,
-        "specification": "",
-        "status": "ON",
-        "unit": "",
-      },
-      partsUnitList: [],
-      materialCategoryTree: []
+		// 表格属性
+		tableAttributes: {
+			// 启用勾选列
+			selectColumn: true
+		},
+		// 表格事件
+		tableEvents: {
+			'selection-change': this.selectionChange
+		},
+		// 勾选选中行
+		recordSelected: [],
+		/** 表单变量 */
+		formDialogType: 0,
+		formDialogTitles: ["新增", "编辑"],
+		formDialog: false,
+		formData: {
+			companyWechatName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
+			"categoryId": "",
+			"companyWechatId": "",
+			"createBy": "",
+			"createTime": "",
+			"normAmount": 0,
+			"normCode": "",
+			"normId": "",
+			"normName": "",
+			"normType": "",
+			"outWebsitAmount": 0,
+			"outWorkerAmount": 0,
+			"parentCategoryId": "",
+			"remark": "",
+			"selfWebsitAmount": 0,
+			"selfWorkerAmount": 0,
+			"specification": "",
+			"status": "ON",
+			"unit": "",
+		},
+		partsUnitList: [],
+		materialCategoryTree: [],
+		formType: 'add',
+		formVisible: false,
     }
   },
   computed: {
@@ -78,7 +83,9 @@ export default {
         [
           [
             this.optionsEvensAuth("add", {
-              click: this.addData
+				click: () => {
+					this.openForm('add')
+				}
             }),
           ],
           [
@@ -176,7 +183,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入', disabled: true },
@@ -186,7 +193,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-radio',
         options: [{ label: "上架", value: "ON" }, { label: "下架", value: "OFF" }],
@@ -197,7 +204,7 @@ export default {
           rules: [...required]
         },
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-cascader',
         attributes: { style: "width:100%", placeholder: '请输入', options: this.materialCategoryTree, 'show-all-levels': false, props: { value: "categoryId", label: "categoryName", children: "child", emitPath: false }, clearable: true },
@@ -207,7 +214,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -217,7 +224,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-select-add',
         labelKey: 'dictValue',
@@ -230,7 +237,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -240,7 +247,7 @@ export default {
           rules: []
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -250,7 +257,7 @@ export default {
           rules: []
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-radio',
         options: [{ label: "物料收费", value: "M" }, { label: "服务收费", value: "S" }],
@@ -261,7 +268,7 @@ export default {
           rules: [...required]
         },
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入', type: "number" },
@@ -285,7 +292,7 @@ export default {
           }
         },
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'slot-component',
         attributes: { placeholder: '请输入' },
@@ -301,7 +308,7 @@ export default {
           )
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入', type: "number", disabled: !this.formData.normAmount, },
@@ -328,7 +335,7 @@ export default {
           }
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入', type: "number", disabled: !this.formData.normAmount, },
@@ -355,7 +362,7 @@ export default {
           }
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入', disabled: true, type: "number", },
@@ -370,7 +377,7 @@ export default {
           }
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入', disabled: true, type: "number", },
@@ -388,7 +395,7 @@ export default {
         md: 24,
         isShow: true,
         name: 'el-input',
-        attributes: { placeholder: '请输入', type: "textarea" },
+        attributes: { placeholder: '请输入', type: "textarea", rows: 5 },
         formItemAttributes: {
           label: '备注',
           prop: 'remark',
@@ -412,44 +419,66 @@ export default {
     },
 
     operation() {
-      return this.operationBtn({
-        edit: {
-          click: ({ row, index, column }) => {
-            materialNormDetail({ id: row.normId }).then(res => {
-              Object.assign(this.formData, res.data)
-              this.formDialogType = 1
-              this.openForm()
-            })
-          }
-        },
-      })
-    },
-
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
+		return this.operationBtn({
+			edit: {
+				click: ({ row, index, column }) => {
+					this.openForm('edit',row.normId)
+				}
+			},
+		})
     },
     openForm() {
-      Promise.all([
-        getTypeList({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.dict_type", "compare": "=", "value": `ASSIST_UNIT` }, { "param": "a.status", "compare": "=", "value": "ON" }] }),
-        materialCategoryTree({ state: "ON" })
-      ]).then(([res1, res2]) => {
-        this.partsUnitList = res1.data.records
-        this.materialCategoryTree = res2.data.filter(item => (item.child && item.child.length > 0))
-        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
+    				Promise.all([
+    				  getTypeList({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.dict_type", "compare": "=", "value": `ASSIST_UNIT` }, { "param": "a.status", "compare": "=", "value": "ON" }] }),
+    				  materialCategoryTree({ state: "ON" })
+    				]).then(([res1, res2]) => {
+    				  this.partsUnitList = res1.data.records
+    				  this.materialCategoryTree = res2.data.filter(item => (item.child && item.child.length > 0))
+    				  this.formDialog = true;
+    				})
+    				if (type == 'add') {
+    					this.formDialogType = 0
+    				} else if(type == 'edit'){
+    					this.formDialogType = 1
+    					materialNormDetail({ id }).then(res => {
+    					  Object.assign(this.formData, res.data)
+    					})
+    				}
+    			})
+    		},
+    		// 关闭时事件
+    		closeEvent: () => {
+    			this.formCancel()
+    		}
+    	})
     },
     formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.formVisible = false
+      this.$refs?.formRef?.resetFields()
       this.$data.formData = this.$options.data().formData
-      this.formDialog = false
     },
-    formConfirm() {
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           ([materialNormAdd, materialNormEdit][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/auxiliaryFittings/auxiliaryDataManagement/auxiliaryMaterialClass/index.vue

@@ -1,46 +1,49 @@
 <template>
-  <div class="app-container">
-    <div class="mymain-container">
-      <div class="btn-group clearfix">
-        <div class="fl">
-          <el-button v-if="$restrict('add')" size="small" type="primary" icon="el-icon-plus"
-            @click="addData">添加</el-button>
-        </div>
-      </div>
-      <div class="table">
-        <el-table :data="dataList" row-key="categoryId" border default-expand-all :tree-props="{ children: 'child' }">
-          <el-table-column prop="categoryName" label="分类名称" min-width="150"></el-table-column>
-          <el-table-column align="center" label="状态" class-name="status-col">
-            <template slot-scope="scope">
-              <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ ({ ON: '启用', OFF: '禁用' })[scope.row.status]
-              }}</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" prop="sort" label="排序"></el-table-column>
-          <el-table-column align="right" label="操作" width="120" fixed="right">
-            <template slot-scope="scope">
-              <el-button v-if="scope.row.parentCategoryId == 0 && $restrict('add')" type="primary" size="mini"
-                icon="el-icon-plus" @click="addDatapat(scope.row)"></el-button>
-              <el-button v-if="$restrict('edit')" type="primary" size="mini" icon="el-icon-edit"
-                @click="setDataup(scope.row)"></el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </div>
-    <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>
-  </div>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<div v-if="activeKey == 'list'" class="app-container">
+				<div class="mymain-container">
+				  <div class="btn-group clearfix">
+				    <div class="fl">
+				      <el-button v-if="$restrict('add')" size="small" type="primary" icon="el-icon-plus"
+				        @click="openForm('add1')">添加</el-button>
+				    </div>
+				  </div>
+				  <div class="table">
+				    <el-table :data="dataList" row-key="categoryId" border default-expand-all :tree-props="{ children: 'child' }">
+				      <el-table-column prop="categoryName" label="分类名称" min-width="150"></el-table-column>
+				      <el-table-column align="center" label="状态" class-name="status-col">
+				        <template slot-scope="scope">
+				          <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ ({ ON: '启用', OFF: '禁用' })[scope.row.status]
+				          }}</el-tag>
+				        </template>
+				      </el-table-column>
+				      <el-table-column align="center" prop="sort" label="排序"></el-table-column>
+				      <el-table-column align="right" label="操作" width="120" fixed="right">
+				        <template slot-scope="scope">
+				          <el-button v-if="scope.row.parentCategoryId == 0 && $restrict('add')" type="primary" size="mini"
+				            icon="el-icon-plus" @click="openForm('add2',scope.row)"></el-button>
+				          <el-button v-if="$restrict('edit')" type="primary" size="mini" icon="el-icon-edit"
+				            @click="openForm(scope.row.parentCategoryId == 0?'edit1':'edit2',scope.row)"></el-button>
+				        </template>
+				      </el-table-column>
+				    </el-table>
+				  </div>
+				</div>
+			</div>
+			<div v-if="~['add1', 'add2', 'edit1', 'edit2'].indexOf(activeKey)">
+				<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;data.removeTab()">取 消</el-button>
+				  <el-button size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -67,7 +70,9 @@ export default {
         sort: "",
         categoryLevel: 2
       },
-      materialCategoryList: []
+      materialCategoryList: [],
+			formType: 'add',
+			formVisible: false,
     }
   },
   computed: {
@@ -78,7 +83,7 @@ export default {
     formItems() {
       return [
         {
-          md: 24,
+          md: 6,
           isShow: true,
           name: 'el-input',
           attributes: { placeholder: '请输入', disabled: true },
@@ -91,7 +96,7 @@ export default {
         ...(() => {
           if (this.formData.categoryLevel == 2) {
             return [{
-              md: 24,
+              md: 6,
               isShow: true,
               name: 'el-select',
               options: [...this.materialCategoryList, { categoryName: "无", categoryId: "0" }],
@@ -118,7 +123,7 @@ export default {
           return []
         })(),
         {
-          md: 24,
+          md: 6,
           isShow: true,
           name: 'el-input',
           attributes: { placeholder: '请输入' },
@@ -128,7 +133,7 @@ export default {
             rules: [...required]
           }
         }, {
-          md: 24,
+          md: 6,
           isShow: true,
           name: 'el-radio',
           options: [{ label: "启用", value: "ON" }, { label: "禁用", value: "OFF" }],
@@ -139,7 +144,7 @@ export default {
             rules: [...required]
           },
         }, {
-          md: 24,
+          md: 6,
           isShow: true,
           name: 'el-input',
           attributes: { placeholder: '请输入' },
@@ -162,36 +167,54 @@ export default {
         this.dataList = res.data
       })
     },
-    setDataup(row) {
-      Object.assign(this.formData, row)
-      this.formDialogType = 1
-      this.openForm()
-    },
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    addDatapat(row) {
-      Object.assign(this.formData, {
-        parentCategoryId: row.categoryId
-      })
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
-      Promise.all([
-        materialCategoryList({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.status", "compare": "=", "value": "ON" }, { "param": "a.category_level", "compare": "=", "value": "1" }] })
-      ]).then(([res1]) => {
-        this.materialCategoryList = res1.data.records
-        this.formDialog = true;
-      })
+    openForm(type,row) {
+		this.$refs.tabPage.addTab({
+			// 对应显示的模块
+			activeKey: type,
+			// 唯一标识
+			key: type,
+			// 页签名称
+			label: ({ edit1: "编辑一级分类", add1: "添加一级分类", edit2: "编辑二级分类", add2: "添加二级分类" })[type],
+			// 打开时事件
+			triggerEvent: () => {
+				
+				this.$nextTick(()=>{
+					this.formType = type
+					this.formVisible = true
+					Promise.all([
+					  materialCategoryList({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.status", "compare": "=", "value": "ON" }, { "param": "a.category_level", "compare": "=", "value": "1" }] })
+					]).then(([res1]) => {
+					  this.materialCategoryList = res1.data.records
+					  this.formDialog = true;
+					})
+					if(type == 'add1'){
+						this.formDialogType = 0
+					}else if(type == 'add2'){
+						this.formDialogType = 0
+						Object.assign(this.formData, {
+						  parentCategoryId: row.categoryId
+						})
+					}else if(type == 'edit1'){
+						Object.assign(this.formData, row)
+						this.formDialogType = 1
+					}else if(type == 'edit2'){
+						Object.assign(this.formData, row)
+						this.formDialogType = 1
+					}
+				})
+			},
+			// 关闭时事件
+			closeEvent: () => {
+				this.formCancel()
+			}
+		})
     },
     formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.formVisible = false
+      this.$refs?.formRef?.resetFields()
       this.$data.formData = this.$options.data().formData
-      this.formDialog = false
     },
-    formConfirm() {
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           ([materialCategoryAdd, materialCategoryUpdate][this.formDialogType])({
@@ -199,7 +222,7 @@ export default {
             categoryLevel: !this.formData.parentCategoryId || this.formData.parentCategoryId == 0 ? 1 : 2
           }).then(res => {
             this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
-            this.formCancel()
+            cancel('list')
             this.getList();
           })
         }

src/views/auxiliaryFittings/auxiliaryDataManagement/auxiliaryPriceManagement/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="860px" 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="120px" :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: $route.meta.title+'-列表', 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" :operationColumnWidth="80">
+			</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="120px" :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>
@@ -31,53 +34,55 @@ export default {
   mixins: [import_mixin, operation_mixin],
   data() {
     return {
-      // 表格属性
-      tableAttributes: {
-        // 启用勾选列
-        selectColumn: true
-      },
-      // 表格事件
-      tableEvents: {
-        'selection-change': this.selectionChange
-      },
-      // 勾选选中行
-      recordSelected: [],
-      /** 表单变量 */
-      formDialogType: 0,
-      formDialogTitles: ["新增", "编辑"],
-      formDialog: false,
-      formData: {
-        companyWechatName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
-        "convertBitScale": "",
-        "cost": "",
-        "createBy": "",
-        "createTime": "",
-        "goodsBarcodeId": "",
-        "goodsCategoryId": "",
-        "goodsCode": "",
-        "goodsId": "",
-        "goodsImage": "",
-        "goodsName": "",
-        "goodsSalesConvertQty": "",
-        "goodsSalesUnit": "",
-        "goodsSpecification": "",
-        "goodsSpell": "",
-        "goodsStockUnit": "",
-        "goodsType": "M",
-        "manageWorkerStock": "",
-        "marketPrice": "",
-        "normAmount": "",
-        "normType": "",
-        "outWebsitAmount": "",
-        "outWorkerAmount": "",
-        "parentCategoryId": "",
-        "remark": "",
-        "selfWebsitAmount": "",
-        "selfWorkerAmount": "",
-        "status": "ON",
-      },
-      partsUnitList: [],
-      materialCategoryTree: []
+		// 表格属性
+		tableAttributes: {
+			// 启用勾选列
+			selectColumn: true
+		},
+		// 表格事件
+		tableEvents: {
+			'selection-change': this.selectionChange
+		},
+		// 勾选选中行
+		recordSelected: [],
+		/** 表单变量 */
+		formDialogType: 0,
+		formDialogTitles: ["新增", "编辑"],
+		formDialog: false,
+		formData: {
+			companyWechatName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
+			"convertBitScale": "",
+			"cost": "",
+			"createBy": "",
+			"createTime": "",
+			"goodsBarcodeId": "",
+			"goodsCategoryId": "",
+			"goodsCode": "",
+			"goodsId": "",
+			"goodsImage": "",
+			"goodsName": "",
+			"goodsSalesConvertQty": "",
+			"goodsSalesUnit": "",
+			"goodsSpecification": "",
+			"goodsSpell": "",
+			"goodsStockUnit": "",
+			"goodsType": "M",
+			"manageWorkerStock": "",
+			"marketPrice": "",
+			"normAmount": "",
+			"normType": "",
+			"outWebsitAmount": "",
+			"outWorkerAmount": "",
+			"parentCategoryId": "",
+			"remark": "",
+			"selfWebsitAmount": "",
+			"selfWorkerAmount": "",
+			"status": "ON",
+		},
+		partsUnitList: [],
+		materialCategoryTree: [],
+		formType: 'add',
+		formVisible: false,
     }
   },
   computed: {
@@ -87,7 +92,9 @@ export default {
         [
           [
             this.optionsEvensAuth("add", {
-              click: this.addData
+				click: () => {
+					this.openForm('add')
+				}
             }),
           ],
           [
@@ -157,7 +164,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入', disabled: true },
@@ -167,7 +174,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-radio',
         options: [{ label: "上架", value: "ON" }, { label: "下架", value: "OFF" }],
@@ -178,7 +185,7 @@ export default {
           rules: [...required]
         },
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-cascader',
         attributes: { style: "width:100%", placeholder: '请输入', options: this.materialCategoryTree, 'show-all-levels': false, props: { value: "categoryId", label: "categoryName", children: "child", emitPath: false }, clearable: true },
@@ -193,7 +200,7 @@ export default {
           }
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -203,7 +210,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-select-add',
         labelKey: 'dictValue',
@@ -221,7 +228,7 @@ export default {
           }
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -231,7 +238,7 @@ export default {
           rules: []
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -241,7 +248,7 @@ export default {
           rules: []
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入', type: "number" },
@@ -251,7 +258,7 @@ export default {
           rules: []
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入', type: "number" },
@@ -261,7 +268,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'slot-component',
         attributes: { placeholder: '请输入' },
@@ -304,44 +311,63 @@ export default {
     },
 
     operation() {
-			return this.operationBtn({
-				edit: {
-					click: ({ row, index, column }) => {
-            materialNormDetail({ id: row.goodsId }).then(res => {
-              Object.assign(this.formData, res.data)
-              this.formDialogType = 1
-              this.openForm()
-            })
+		return this.operationBtn({
+			edit: {
+				click: ({ row, index, column }) => {
+					this.openForm('edit',row.goodsId)
+				}
+			},
+		})
+	},
+	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
+					Promise.all([
+					  getTypeList({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.dict_type", "compare": "=", "value": `ASSIST_UNIT` }, { "param": "a.status", "compare": "=", "value": "ON" }] }),
+					  materialCategoryTree({ state: "ON" })
+					]).then(([res1, res2]) => {
+					  this.partsUnitList = res1.data.records
+					  this.materialCategoryTree = res2.data.filter(item => (item.child && item.child.length > 0))
+					  this.formDialog = true;
+					})
+					if (type == 'add') {
+						this.formDialogType = 0
+					} else if(type == 'edit'){
+						this.formDialogType = 1
+						materialNormDetail({ id }).then(res => {
+						  Object.assign(this.formData, res.data)
+						})
 					}
-				},
-			})
-		},
-
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
-      Promise.all([
-        getTypeList({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.dict_type", "compare": "=", "value": `ASSIST_UNIT` }, { "param": "a.status", "compare": "=", "value": "ON" }] }),
-        materialCategoryTree({ state: "ON" })
-      ]).then(([res1, res2]) => {
-        this.partsUnitList = res1.data.records
-        this.materialCategoryTree = res2.data.filter(item => (item.child && item.child.length > 0))
-        this.formDialog = true;
-      })
-    },
+				})
+			},
+			// 关闭时事件
+			closeEvent: () => {
+				this.formCancel()
+			}
+		})
+	},
     formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.formVisible = false
+      this.$refs?.formRef?.resetFields()
       this.$data.formData = this.$options.data().formData
-      this.formDialog = false
     },
-    formConfirm() {
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           ([materialNormAdd, materialNormEdit][this.formDialogType])({ ...this.formData, goodsType: "M" }).then(res => {
             this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
-            this.formCancel()
+            cancel('list')
             this.$refs.pageRef.refreshList()
           })
         }

src/views/auxiliaryFittings/salesManagement/attachmentNewReturn/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="page">
-		<template-page v-show="!formDialog" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
+		<template-page v-if="!formDialog && isShowTab" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
 			:table-events="tableEvents" :operationColumnWidth="110" :options-evens-group="optionsEvensGroup"
 			:moreParameters="moreParameters" :column-parsing="columnParsing" :operation="operation()" :exportList="exportList">
 			<div slot="moreSearch">
@@ -51,7 +51,8 @@ export default {
 			formDialogTitles: ["新增", "编辑", "详情"],
 			formDialog: false,
 			id: '',
-			flag: ''
+			flag: '',
+			isShowTab: true
 		}
 	},
 	computed: {
@@ -73,6 +74,14 @@ export default {
 		},
 		formItems() { }
 	},
+	watch: {
+		flag(){
+			this.isShowTab = false
+			this.$nextTick(()=>{
+				this.isShowTab = true
+			})
+		}
+	},
 	methods: {
 		// 切换状态
 		changeType(val) {

src/views/auxiliaryFittings/salesManagement/attachmentOldReturn/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="page">
-		<template-page v-show="!formDialog" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
+		<template-page v-if="!formDialog && isShowTab" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
 			:table-events="tableEvents" :operationColumnWidth="110" :options-evens-group="optionsEvensGroup"
 			:moreParameters="moreParameters" :column-parsing="columnParsing" :operation="operation()" :exportList="exportList">
 			<div slot="moreSearch">
@@ -51,7 +51,8 @@ export default {
 			formDialogTitles: ["新增", "编辑", "详情"],
 			formDialog: false,
 			id: '',
-			flag: ''
+			flag: '',
+			isShowTab: true
 		}
 	},
 	computed: {
@@ -73,6 +74,14 @@ export default {
 		},
 		formItems() { }
 	},
+	watch: {
+		flag(){
+			this.isShowTab = false
+			this.$nextTick(()=>{
+				this.isShowTab = true
+			})
+		}
+	},
 	methods: {
 		// 切换状态
 		changeType(val) {

src/views/auxiliaryFittings/salesManagement/attachmentSalesOrder/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="page">
-		<template-page v-show="!formDialog" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
+		<template-page v-if="!formDialog && isShowTab" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
 			:table-events="tableEvents" :operationColumnWidth="140" :options-evens-group="optionsEvensGroup"
 			:moreParameters="moreParameters" :column-parsing="columnParsing" :operation="operation()" :exportList="exportList">
 			<div slot="moreSearch">
@@ -58,7 +58,8 @@ export default {
 			formDialog: false,
 			id: '',
 			flag: '',
-			websitList: []
+			websitList: [],
+			isShowTab: true
 		}
 	},
 	computed: {
@@ -100,6 +101,14 @@ export default {
 			this.openForm()
 		}
 	},
+	watch: {
+		flag(){
+			this.isShowTab = false
+			this.$nextTick(()=>{
+				this.isShowTab = true
+			})
+		}
+	},
 	methods: {
 		// 切换状态
 		changeType(val) {

src/views/auxiliaryFittings/salesManagement/auxiliaryAdjustPriceOrder/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="page">
-		<template-page v-show="!formDialog" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
+		<template-page v-if="!formDialog && isShowTab" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
 			:table-events="tableEvents" :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters"
 			:column-parsing="columnParsing" :operation="operation()" :exportList="exportList">
 			<div slot="moreSearch">
@@ -49,7 +49,8 @@ export default {
 			formDialogTitles: ["新增", "编辑", "详情"],
 			formDialog: false,
 			id: '',
-			flag: ''
+			flag: '',
+			isShowTab: true
 		}
 	},
 	computed: {
@@ -71,6 +72,14 @@ export default {
 		},
 		formItems() { }
 	},
+	watch: {
+		flag(){
+			this.isShowTab = false
+			this.$nextTick(()=>{
+				this.isShowTab = true
+			})
+		}
+	},
 	methods: {
 		// 切换状态
 		changeType(val) {

src/views/auxiliaryFittings/salesManagement/auxiliarySalesOrder/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="page">
-		<template-page v-show="!formDialog" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
+		<template-page v-if="isShowTab && !formDialog" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
 			:table-events="tableEvents" :operationColumnWidth="140" :options-evens-group="optionsEvensGroup"
 			:moreParameters="moreParameters" :column-parsing="columnParsing" :operation="operation()" :exportList="exportList">
 			<div slot="moreSearch">
@@ -58,7 +58,8 @@ export default {
 			formDialog: false,
 			id: '',
 			flag: '',
-			websitList: []
+			websitList: [],
+			isShowTab: true
 		}
 	},
 	computed: {
@@ -100,6 +101,14 @@ export default {
 			this.openForm()
 		}
 	},
+	watch: {
+		flag(){
+			this.isShowTab = false
+			this.$nextTick(()=>{
+				this.isShowTab = true
+			})
+		}
+	},
 	methods: {
 		// 切换状态
 		changeType(val) {

src/views/auxiliaryFittings/salesManagement/auxiliarySalesReturnOrder/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="page">
-		<template-page v-show="!formDialog" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
+		<template-page v-if="!formDialog && isShowTab" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
 			:table-events="tableEvents" :operationColumnWidth="110" :options-evens-group="optionsEvensGroup"
 			:moreParameters="moreParameters" :column-parsing="columnParsing" :operation="operation()" :exportList="exportList">
 			<div slot="moreSearch">
@@ -51,7 +51,8 @@ export default {
 			formDialogTitles: ["新增", "编辑", "详情"],
 			formDialog: false,
 			id: '',
-			retState: ''
+			retState: '',
+			isShowTab: true
 		}
 	},
 	computed: {
@@ -73,6 +74,14 @@ export default {
 		},
 		formItems() { }
 	},
+	watch: {
+		retState(){
+			this.isShowTab = false
+			this.$nextTick(()=>{
+				this.isShowTab = true
+			})
+		}
+	},
 	methods: {
 		// 切换状态
 		changeType(val) {

src/views/auxiliaryFittings/salesManagement/components/auxiliarySalesReturnOrderDetail.vue

@@ -184,7 +184,7 @@
 					<el-table-column prop="goods.price" align="center" label="销售价格"></el-table-column>
 					<el-table-column prop="goods.saleAmount" align="center" label="销售金额" >
 						<template slot-scope="scope" v-if="scope.row.salesQty && scope.row.goods && scope.row.goods.price">
-							{{(scope.row.goods.price * 100) * scope.row.salesQty / 100}}
+							{{(scope.row.goods.price * 100) * (scope.row.salesQty*100) / 10000}}
 						</template>
 					</el-table-column>
 					<el-table-column label="操作" align="right" width="140">
@@ -438,6 +438,7 @@
 				})
 			},
 			confirm(){
+				const that = this
 				this.$confirm(`请确定是否确认提货, 是否继续?`, '提示', {
 					confirmButtonText: '确定',
 					cancelButtonText: '取消',
@@ -449,12 +450,13 @@
 					}).then(res => {
 						if(res.code == 200){
 							this.$message.success('确认提货成功！')
-							this.goBack()
+							that.goBack()
 						}
 					})
 				});
 			},
 			save(){
+				const that = this
 				this.$refs.formData.validate((valid, invalidFields, errLabels) => {
 					if (valid) {
 						if(this.formType == 0){
@@ -473,7 +475,7 @@
 							}).then(res => {
 								if(res.code == 200){
 									this.$message.success('提交成功！')
-									this.goBack()
+									that.goBack()
 								}
 							})
 						}else if(this.formType == 1){
@@ -494,7 +496,7 @@
 								if(res.code == 200){
 									this.dataList = []
 									this.$message.success('提交成功！')
-									this.goBack()
+									that.goBack()
 								}
 							})
 						}

src/views/auxiliaryFittings/settleAccountManagement/salesWithdraw/index.vue

@@ -1,127 +1,129 @@
 <template>
-	<template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
-		:operationColumnWidth="110" :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters"
-		:column-parsing="columnParsing" :operation="operation()" :exportList="exportList">
-
-		<div slot="moreSearch">
-			<el-radio-group v-model="status" size="mini" @change="changeType">
-				<el-radio-button label="">全部</el-radio-button>
-				<el-radio-button label="0">待发放</el-radio-button>
-				<el-radio-button label="1">已发放</el-radio-button>
-			</el-radio-group>
-			<br><br>
-		</div>
-		<el-dialog title="详情" width="80%" :modal="true" :visible.sync="formDialog" :show-close="true"
-			:close-on-click-modal="false" :modal-append-to-body="false" @close="formDialog = false; formData = {}">
-			<el-card class="box-card">
-				<div slot="header" class="clearfix">
-					<span>提现信息</span>
-				</div>
-				<table border="1" style="border-color: #fff;" width="100%" align="center" cellspacing="0" cellpadding="10">
-					<tr>
-						<td class="bold" align="center">提现类型</td>
-						<td>{{ formData.type == 1 ? '销售提现' : '服务提现' }}</td>
-						<td class="bold" align="center">单据编号</td>
-						<td>{{ formData.id }}</td>
-						<td class="bold" align="center">所属商户</td>
-						<td>{{ formData.companyWechatName }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">发放状态</td>
-						<td>{{ formData.status == 0 ? '待发放' : formData.status == 1 ? '已发放' : '' }}</td>
-						<td class="bold" align="center">师傅姓名</td>
-						<td>{{ formData.workerName }}</td>
-						<td class="bold" align="center">师傅编号</td>
-						<td>{{ formData.workerId }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">师傅身份证号</td>
-						<td>{{ formData.idcard }}</td>
-						<td class="bold" align="center">师傅联系电话</td>
-						<td>{{ formData.workerMobile }}</td>
-						<td class="bold" align="center">申请时间</td>
-						<td>{{ formData.createTime }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">账户类型</td>
-						<td>{{ formData.accountType }}</td>
-						<td class="bold" align="center">开户银行</td>
-						<td>{{ formData.bank }}</td>
-						<td class="bold" align="center">开户支行</td>
-						<td>{{ formData.subBank }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">持卡人</td>
-						<td>{{ formData.bankUserName }}</td>
-						<td class="bold" align="center">银行卡号</td>
-						<td>{{ formData.bankNo }}</td>
-						<td class="bold" align="center">提现金额</td>
-						<td>￥{{ formData.amount }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">备注</td>
-						<td colspan="5">{{ formData.remark }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center"><span style="color: red;">*</span>转账凭证</td>
-						<td colspan="5" style="width: 80px;height: 80px">
-							<ImageUpload :fileList="formData.certImg" :limit="1" :isEdit="formData.status == 0" />
-						</td>
-					</tr>
-				</table>
-			</el-card>
-			<el-card class="box-card">
-				<div slot="header" class="clearfix">
-					<span>订单信息</span>
-				</div>
-				<table border="1" style="border-color: #fff;" width="100%" align="center" cellspacing="0" cellpadding="10">
-					<thead>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', 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" :operationColumnWidth="110">
+			  <div slot="moreSearch">
+			  	<el-radio-group v-model="status" size="mini" @change="changeType">
+			  		<el-radio-button label="">全部</el-radio-button>
+			  		<el-radio-button label="0">待发放</el-radio-button>
+			  		<el-radio-button label="1">已发放</el-radio-button>
+			  	</el-radio-group>
+			  	<br><br>
+			  </div>
+			</template-page>
+			<div v-if="~['detail'].indexOf(activeKey)">
+				<el-card class="box-card">
+					<div slot="header" class="clearfix">
+						<span>提现信息</span>
+					</div>
+					<table border="1" style="border-color: #fff;" width="100%" align="center" cellspacing="0" cellpadding="10">
 						<tr>
-							<th class="bold" align="center">订单单号</th>
-							<th class="bold" align="center">订单类型</th>
-							<!-- <th class="bold" align="center">收费类型</th> -->
-							<th class="bold" align="center">数量</th>
-							<!-- <th class="bold" align="center">单价</th> -->
-							<th class="bold" align="center">订单金额</th>
-							<th class="bold" align="center">销售类型</th>
-							<th class="bold" align="center">师傅分账金额</th>
-							<th class="bold" align="center">商户分账金额</th>
+							<td class="bold" align="center">提现类型</td>
+							<td>{{ formData.type == 1 ? '销售提现' : '服务提现' }}</td>
+							<td class="bold" align="center">单据编号</td>
+							<td>{{ formData.id }}</td>
+							<td class="bold" align="center">所属商户</td>
+							<td>{{ formData.companyWechatName }}</td>
+							<td class="bold" align="center">发放状态</td>
+							<td>{{ formData.status == 0 ? '待发放' : formData.status == 1 ? '已发放' : '' }}</td>
 						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="(item, index) in formData.withdrawalOrderItems" :key="index">
-							<td align="center">{{ item.id }}</td>
-							<td align="center">{{ item.goodsType == 'M' ? '辅材' : '配件' }}</td>
-							<!-- <td align="center">{{item.chargeType=='ACC'?'配件物料':item.chargeType=='SERV'?'服务收费':''}}</td> -->
-							<td align="center">{{ item.num }}</td>
-							<!-- <td align="center">{{item.goodsAmount}}</td> -->
-							<td align="center">{{ item.totalPrice }}</td>
-							<td align="center">{{ item.settlementType == 'OWN' ? '自有' : item.settlementType == 'OUT' ? '外购' : '' }}</td>
-							<td align="center">{{ item.workerAmount }}</td>
-							<td align="center">{{ item.websitAmount }}</td>
+						<tr>
+							<td class="bold" align="center">师傅姓名</td>
+							<td>{{ formData.workerName }}</td>
+							<td class="bold" align="center">师傅编号</td>
+							<td>{{ formData.workerId }}</td>
+							<td class="bold" align="center">师傅身份证号</td>
+							<td>{{ formData.idcard }}</td>
+							<td class="bold" align="center">师傅联系电话</td>
+							<td>{{ formData.workerMobile }}</td>
+						</tr>
+						<tr>
+							<td class="bold" align="center">申请时间</td>
+							<td>{{ formData.createTime }}</td>
+							<td class="bold" align="center">账户类型</td>
+							<td>{{ formData.accountType }}</td>
+							<td class="bold" align="center">开户银行</td>
+							<td>{{ formData.bank }}</td>
+							<td class="bold" align="center">开户支行</td>
+							<td>{{ formData.subBank }}</td>
 						</tr>
-						<!-- <tr>
-							<td style="color: #ffffff;">隐身</td><td></td><td></td><td></td><td></td><td></td><td></td>
-						</tr> -->
 						<tr>
-							<td align="center">总计</td>
+							<td class="bold" align="center">持卡人</td>
+							<td>{{ formData.bankUserName }}</td>
+							<td class="bold" align="center">银行卡号</td>
+							<td>{{ formData.bankNo }}</td>
+							<td class="bold" align="center">提现金额</td>
+							<td>￥{{ formData.amount }}</td>
 							<td></td>
-							</td>
-							<td>
-							<td align="center">{{ totalAmount || 0 }}</td>
 							<td></td>
-							<td align="center">{{ workerAmount || 0 }}</td>
-							<td align="center">{{ websitAmount || 0 }}</td>
 						</tr>
-					</tbody>
-				</table>
-			</el-card>
-			<div slot="footer" class="dialog-footer">
-				<el-button size="mini" @click="formDialog = false; formData = {}">取 消</el-button>
-				<el-button size="mini" v-if="formData.status == 0" type="primary" @click="update(formData.id)">设为已发</el-button>
+						<tr>
+							<td class="bold" align="center">备注</td>
+							<td colspan="7">{{ formData.remark }}</td>
+						</tr>
+						<tr>
+							<td class="bold" align="center"><span style="color: red;">*</span>转账凭证</td>
+							<td colspan="7" style="width: 80px;height: 80px">
+								<ImageUpload :fileList="formData.certImg" :limit="1" :isEdit="formData.status == 0" />
+							</td>
+						</tr>
+					</table>
+				</el-card>
+				<el-card class="box-card">
+					<div slot="header" class="clearfix">
+						<span>订单信息</span>
+					</div>
+					<table border="1" style="border-color: #fff;" width="100%" align="center" cellspacing="0" cellpadding="10">
+						<thead>
+							<tr>
+								<th class="bold" align="center">订单单号</th>
+								<th class="bold" align="center">订单类型</th>
+								<!-- <th class="bold" align="center">收费类型</th> -->
+								<th class="bold" align="center">数量</th>
+								<!-- <th class="bold" align="center">单价</th> -->
+								<th class="bold" align="center">订单金额</th>
+								<th class="bold" align="center">销售类型</th>
+								<th class="bold" align="center">师傅分账金额</th>
+								<th class="bold" align="center">商户分账金额</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr v-for="(item, index) in formData.withdrawalOrderItems" :key="index">
+								<td align="center">{{ item.id }}</td>
+								<td align="center">{{ item.goodsType == 'M' ? '辅材' : '配件' }}</td>
+								<!-- <td align="center">{{item.chargeType=='ACC'?'配件物料':item.chargeType=='SERV'?'服务收费':''}}</td> -->
+								<td align="center">{{ item.num }}</td>
+								<!-- <td align="center">{{item.goodsAmount}}</td> -->
+								<td align="center">{{ item.totalPrice }}</td>
+								<td align="center">{{ item.settlementType == 'OWN' ? '自有' : item.settlementType == 'OUT' ? '外购' : '' }}</td>
+								<td align="center">{{ item.workerAmount }}</td>
+								<td align="center">{{ item.websitAmount }}</td>
+							</tr>
+							<!-- <tr>
+								<td style="color: #ffffff;">隐身</td><td></td><td></td><td></td><td></td><td></td><td></td>
+							</tr> -->
+							<tr>
+								<td align="center">总计</td>
+								<td></td>
+								</td>
+								<td>
+								<td align="center">{{ totalAmount || 0 }}</td>
+								<td></td>
+								<td align="center">{{ workerAmount || 0 }}</td>
+								<td align="center">{{ websitAmount || 0 }}</td>
+							</tr>
+						</tbody>
+					</table>
+				</el-card>
+				<div slot="footer" class="dialog-footer">
+					<el-button size="mini" @click="formDialog = false; formData = {},data.removeTab()">取 消</el-button>
+					<el-button size="mini" v-if="formData.status == 0" type="primary" @click="update(formData.id,data.removeTab)">设为已发</el-button>
+				</div>
 			</div>
-		</el-dialog>
-	</template-page>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -157,7 +159,9 @@ export default {
 			status: '',
 			totalAmount: 0,
 			workerAmount: 0,
-			websitAmount: 0
+			websitAmount: 0,
+			formType: 'add',
+			formVisible: false,
 		}
 	},
 	computed: {
@@ -194,34 +198,55 @@ export default {
 		selectionChange(data) {
 			this.recordSelected = data
 		},
-		openForm() {
-			this.formDialog = true;
+		openForm(type, id) {
+			this.$refs.tabPage.addTab({
+				// 对应显示的模块
+				activeKey: type,
+				// 唯一标识
+				key: type,
+				// 页签名称
+				label: ({ detail: "详情" })[type],
+				// 打开时事件
+				triggerEvent: () => {
+					this.formCancel()
+					this.$nextTick(()=>{
+						this.formType = type
+						this.formVisible = true
+						if (type == 'detail') {
+							this.formDialogType = 1
+							this.totalAmount = 0
+							this.workerAmount = 0
+							this.websitAmount = 0
+							getDetail({ id }).then(res => {
+								Object.assign(this.formData, res.data, {
+									certImg: res.data?.certImg ? res.data?.certImg?.split(",").map(item => ({ url: item })) : []
+								})
+								res.data.withdrawalOrderItems.forEach(item => {
+									this.totalAmount += (item.totalPrice * 100 + this.totalAmount * 100) / 100
+									this.workerAmount = (item.workerAmount * 100 + this.workerAmount * 100) / 100
+									this.websitAmount += (item.websitAmount * 100 + this.websitAmount * 100) / 100
+								})
+							})
+						}
+					})
+				},
+				// 关闭时事件
+				closeEvent: () => {
+				
+				}
+			})
 		},
 		formCancel() {
-			this.$refs.formRef.$refs.inlineForm.clearValidate()
+			this.formVisible = false
+			this.$refs?.formRef?.resetFields()
 			this.$data.formData = this.$options.data().formData
-			this.formDialog = false
 		},
 
 		operation() {
 			return this.operationBtn({
 				detail: {
 					click: ({ row, index, column }) => {
-						this.totalAmount = 0
-						this.workerAmount = 0
-						this.websitAmount = 0
-						getDetail({ id: row.id }).then(res => {
-							Object.assign(this.formData, res.data, {
-								certImg: res.data?.certImg ? res.data?.certImg?.split(",").map(item => ({ url: item })) : []
-							})
-							res.data.withdrawalOrderItems.forEach(item => {
-								this.totalAmount += (item.totalPrice * 100 + this.totalAmount * 100) / 100
-								this.workerAmount = (item.workerAmount * 100 + this.workerAmount * 100) / 100
-								this.websitAmount += (item.websitAmount * 100 + this.websitAmount * 100) / 100
-							})
-							this.formDialogType = 1
-							this.openForm()
-						})
+						this.openForm('detail',row.id)
 					}
 				},
 				setSent: {
@@ -229,21 +254,7 @@ export default {
 						return row.status == 0
 					},
 					click: ({ row, index, column }) => {
-						this.totalAmount = 0
-						this.workerAmount = 0
-						this.websitAmount = 0
-						getDetail({ id: row.id }).then(res => {
-							Object.assign(this.formData, res.data, {
-								certImg: res.data?.certImg ? res.data?.certImg?.split(",").map(item => ({ url: item })) : []
-							})
-							res.data.withdrawalOrderItems.forEach(item => {
-								this.totalAmount += item.totalPrice
-								this.workerAmount += item.workerAmount
-								this.websitAmount += item.websitAmount
-							})
-							this.formDialogType = 1
-							this.openForm()
-						})
+						this.openForm('detail',row.id)
 					}
 				}
 			})

src/views/auxiliaryFittings/settleAccountManagement/settleAccountOfflinePay/index.vue

@@ -1,124 +1,120 @@
 <template>
-	<template-page ref="pageRef" v-if="tabIndexShow" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents" :operationColumnWidth="120"
-	  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
-	  :operation="operation()" :exportList="tabIndex==1?exportList1:exportList2">
-	  <div slot="moreSearch" style="margin-bottom: 10px;">
-		<el-radio-group v-model="tabIndex" size="mini" @change="changeType">
-			<el-radio-button label="1">汇总</el-radio-button>
-			<el-radio-button label="2">明细</el-radio-button>
-		</el-radio-group>
-	  </div>
-	  <div slot="moreSearch" v-if="tabIndex == 2">
-	    <el-radio-group v-model="status" size="mini" @change="changeType">
-	    	<el-radio-button label="">全部</el-radio-button>
-	    	<el-radio-button label="WAIT">待结算</el-radio-button>
-			<el-radio-button label="OVER">已完成</el-radio-button>
-	    </el-radio-group>
-	    <br><br>
-	  </div>
-		<el-dialog title="详情" width="80%" :modal="true" :visible.sync="formDialog" :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" @close="formDialog = false;formData = {}">
-			<el-card class="box-card">
-				<div slot="header" class="clearfix">
-					<span>基础信息</span>
-				</div>
-				<table border="1" style="border-color: #fff;" width="100%" align="center" cellspacing="0" cellpadding="10">
-					<tr>
-						<td class="bold" align="center">所属商户</td>
-						<td>{{formData.companyWechatName}}</td>
-						<td class="bold" align="center">关联工单号</td>
-						<td>{{formData.workerOrderId}}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">结算单号</td>
-						<td>{{formData.settlementOrderId}}</td>
-						<td class="bold" align="center">工单品牌</td>
-						<td>{{formData.brand}}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">客户姓名</td>
-						<td>{{formData.userName}}</td>
-						<td class="bold" align="center">客户电话</td>
-						<td>{{formData.userMobile}}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">师傅姓名</td>
-						<td>{{formData.workerName}}</td>
-						<td class="bold" align="center">师傅身份证号</td>
-						<td>{{formData.identity}}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">师傅联系电话</td>
-						<td>{{formData.workerMobile}}</td>
-						<td class="bold" align="center">订单金额</td>
-						<td>{{formData.totalAmount}}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">销售类型</td>
-						<td>{{formData.settlementType == 'OWN'?'自由':formData.settlementType == 'OUT'?'外购':''}}</td>
-						<td class="bold" align="center">创建人</td>
-						<td>{{formData.createBy}}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">创建时间</td>
-						<td>{{formData.createTime}}</td>
-						<td class="bold" align="center">支付状态</td>
-						<td>{{formData.payStatus == 'CANCEL'?'取消':formData.payStatus == 'PAID'?'已支付':formData.payStatus == 'WAIT'?'待支付':''}}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">操作人</td>
-						<td>{{formData.updateBy}}</td>
-						<td class="bold" align="center">操作时间</td>
-						<td>{{formData.updateTime}}</td>
-					</tr>
-				</table>
-			</el-card>
-			<el-card class="box-card">
-				<div slot="header" class="clearfix">
-					<span>订单信息</span>
-				</div>
-				<table border="1" style="border-color: #fff;" width="100%" align="center" cellspacing="0" cellpadding="10">
-					<thead>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<template-page ref="pageRef" v-if="tabIndexShow && activeKey == 'list'" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents" :operationColumnWidth="120" :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+			  :operation="operation()" :exportList="tabIndex==1?exportList1:exportList2">
+			  <div slot="moreSearch" style="margin-bottom: 10px;">
+				<el-radio-group v-model="tabIndex" size="mini" @change="changeType">
+					<el-radio-button label="1">汇总</el-radio-button>
+					<el-radio-button label="2">明细</el-radio-button>
+				</el-radio-group>
+			  </div>
+			  <div slot="moreSearch" v-if="tabIndex == 2">
+			    <el-radio-group v-model="status" size="mini" @change="changeType">
+			    	<el-radio-button label="">全部</el-radio-button>
+			    	<el-radio-button label="WAIT">待结算</el-radio-button>
+					<el-radio-button label="OVER">已完成</el-radio-button>
+			    </el-radio-group>
+			    <br><br>
+			  </div>
+			</template-page>
+			<div v-if="~['detail'].indexOf(activeKey)">
+				<el-card class="box-card">
+					<div slot="header" class="clearfix">
+						<span>基础信息</span>
+					</div>
+					<table border="1" style="border-color: #fff;" width="100%" align="center" cellspacing="0" cellpadding="10">
 						<tr>
-							<th class="bold" align="center">名称</th>
-							<th class="bold" align="center">收费类型</th>
-							<th class="bold" align="center">数量</th>
-							<th class="bold" align="center">单价</th>
-							<th class="bold" align="center">订单金额</th>
-							<th class="bold" align="center">销售类型</th>
-							<th class="bold" align="center">师傅分账金额</th>
-							<th class="bold" align="center">商户分账金额</th>
+							<td class="bold" align="center">所属商户</td>
+							<td>{{formData.companyWechatName}}</td>
+							<td class="bold" align="center">关联工单号</td>
+							<td>{{formData.workerOrderId}}</td>
+							<td class="bold" align="center">结算单号</td>
+							<td>{{formData.settlementOrderId}}</td>
+							<td class="bold" align="center">工单品牌</td>
+							<td>{{formData.brand}}</td>
 						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="(item,index) in formData.settlementOrderItemList" :key="index">
-							<td align="center">{{item.goodsName}}</td>
-							<td align="center">{{item.chargeType=='ACC'?(item.goodsType == 'M'?'辅材':'配件')+'物料':item.chargeType=='SERV'?'服务收费':''}}</td>
-							<td align="center">{{item.num}}</td>
-							<td align="center">{{item.goodsAmount}}</td>
-							<td align="center">{{item.totalAmount}}</td>
-							<td align="center">{{item.settlementType == 'OWN'?'自有':item.settlementType == 'OUT'?'外购':''}}</td>
-							<td align="center">{{item.workerAmount}}</td>
-							<td align="center">{{item.websitAmount}}</td>
+						<tr>
+							<td class="bold" align="center">客户姓名</td>
+							<td>{{formData.userName}}</td>
+							<td class="bold" align="center">客户电话</td>
+							<td>{{formData.userMobile}}</td>
+							<td class="bold" align="center">师傅姓名</td>
+							<td>{{formData.workerName}}</td>
+							<td class="bold" align="center">师傅身份证号</td>
+							<td>{{formData.identity}}</td>
+						</tr>
+						<tr>
+							<td class="bold" align="center">师傅联系电话</td>
+							<td>{{formData.workerMobile}}</td>
+							<td class="bold" align="center">订单金额</td>
+							<td>{{formData.totalAmount}}</td>
+							<td class="bold" align="center">销售类型</td>
+							<td>{{formData.settlementType == 'OWN'?'自由':formData.settlementType == 'OUT'?'外购':''}}</td>
+							<td class="bold" align="center">创建人</td>
+							<td>{{formData.createBy}}</td>
 						</tr>
-						<!-- <tr>
-							<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
-						</tr> -->
 						<tr>
-							<td align="center">总计</td><td></td><td></td><td></td>
-							<td align="center">{{totalAmount}}</td><td></td>
-							<td align="center">{{workerAmount}}</td>
-							<td align="center">{{websitAmount}}</td>
+							<td class="bold" align="center">创建时间</td>
+							<td>{{formData.createTime}}</td>
+							<td class="bold" align="center">支付状态</td>
+							<td>{{formData.payStatus == 'CANCEL'?'取消':formData.payStatus == 'PAID'?'已支付':formData.payStatus == 'WAIT'?'待支付':''}}</td>
+							<td class="bold" align="center">操作人</td>
+							<td>{{formData.updateBy}}</td>
+							<td class="bold" align="center">操作时间</td>
+							<td>{{formData.updateTime}}</td>
 						</tr>
-					</tbody>
-				</table>
-			</el-card>
-		  <div slot="footer" class="dialog-footer">
-			<el-button size="mini" @click="formDialog = false;formData = {}">取 消</el-button>
-			<el-button size="mini" v-if="formData.status == 'WAIT'" type="primary" @click="settleAccounts(formData.settlementOrderId)">确认结算</el-button>
-			<el-button size="mini" v-if="formData.status == 'WAIT_ING'" type="primary" @click="withdraw(formData.settlementOrderId)">确认提现</el-button>
-		  </div>
-		</el-dialog>
-	</template-page>
+					</table>
+				</el-card>
+				<el-card class="box-card">
+					<div slot="header" class="clearfix">
+						<span>订单信息</span>
+					</div>
+					<table border="1" style="border-color: #fff;" width="100%" align="center" cellspacing="0" cellpadding="10">
+						<thead>
+							<tr>
+								<th class="bold" align="center">名称</th>
+								<th class="bold" align="center">收费类型</th>
+								<th class="bold" align="center">数量</th>
+								<th class="bold" align="center">单价</th>
+								<th class="bold" align="center">订单金额</th>
+								<th class="bold" align="center">销售类型</th>
+								<th class="bold" align="center">师傅分账金额</th>
+								<th class="bold" align="center">商户分账金额</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr v-for="(item,index) in formData.settlementOrderItemList" :key="index">
+								<td align="center">{{item.goodsName}}</td>
+								<td align="center">{{item.chargeType=='ACC'?(item.goodsType == 'M'?'辅材':'配件')+'物料':item.chargeType=='SERV'?'服务收费':''}}</td>
+								<td align="center">{{item.num}}</td>
+								<td align="center">{{item.goodsAmount}}</td>
+								<td align="center">{{item.totalAmount}}</td>
+								<td align="center">{{item.settlementType == 'OWN'?'自有':item.settlementType == 'OUT'?'外购':''}}</td>
+								<td align="center">{{item.workerAmount}}</td>
+								<td align="center">{{item.websitAmount}}</td>
+							</tr>
+							<tr>
+								<td align="center">总计</td><td></td><td></td><td></td>
+								<td align="center">{{totalAmount}}</td><td></td>
+								<td align="center">{{workerAmount}}</td>
+								<td align="center">{{websitAmount}}</td>
+							</tr>
+						</tbody>
+					</table>
+				</el-card>
+				<div slot="footer" class="dialog-footer">
+					<el-button size="mini" @click="formDialog = false; formData = {};data.removeTab()">取 消</el-button>
+					<el-button size="mini" v-if="formData.status == 'WAIT'" type="primary"
+						@click="settleAccounts(formData.settlementOrderId,data.removeTab,2)">确认结算
+					</el-button>
+					<!-- <el-button size="mini" v-if="formData.status == 'WAIT_ING'" type="primary" @click="withdraw(formData.settlementOrderId,data.removeTab)">
+						确认提现
+					</el-button> -->
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>	
 </template>
 
 <script>
@@ -156,7 +152,9 @@ export default {
 		tabIndex: 1,
 		workerId: '',
 		websitId: '',
-		tabIndexShow: true
+		tabIndexShow: true,
+		formType: 'add',
+		formVisible: false,
     }
   },
   watch: {
@@ -225,14 +223,47 @@ export default {
     selectionChange(data) {
       this.recordSelected = data
     },
-		openForm() {
-		  this.formDialog = true;
-		},
-		formCancel() {
-		  this.$refs.formRef.$refs.inlineForm.clearValidate()
-		  this.$data.formData = this.$options.data().formData
-		  this.formDialog = false
-		},
+	openForm(type, id) {
+		this.$refs.tabPage.addTab({
+			// 对应显示的模块
+			activeKey: type,
+			// 唯一标识
+			key: type,
+			// 页签名称
+			label: ({ detail: "详情" })[type],
+			// 打开时事件
+			triggerEvent: () => {
+				this.formCancel()
+				this.$nextTick(()=>{
+					this.formType = type
+					this.formVisible = true
+					if (type == 'detail') {
+						this.formDialogType = 1
+						this.totalAmount = 0
+						this.workerAmount = 0
+						this.websitAmount = 0
+						getDetail({ id }).then(res => {
+						  Object.assign(this.formData, res.data)
+						  res.data.settlementOrderItemList.forEach(item=>{
+							  this.totalAmount += (item.totalAmount*100 +  this.totalAmount*100)/100
+							  this.workerAmount = (item.workerAmount*100 +  this.workerAmount*100)/100
+							  this.websitAmount += (item.websitAmount*100 +  this.websitAmount*100)/100
+						  })
+						})
+					}
+				})
+			},
+			// 关闭时事件
+			closeEvent: () => {
+			
+			}
+		})
+	},
+	formCancel() {
+		this.formVisible = false
+		this.$refs?.formRef?.resetFields()
+		this.$data.formData = this.$options.data().formData
+	},
 	// 表格操作列
 	operation() {
 		return this.operationBtn({
@@ -248,19 +279,7 @@ export default {
 						this.tabIndex = 2
 						this.$refs.pageRef.refreshList()
 					}else{
-						this.totalAmount = 0
-						this.workerAmount = 0
-						this.websitAmount = 0
-						getDetail({ id: row.settlementOrderId }).then(res => {
-						  Object.assign(this.formData, res.data)
-						  res.data.settlementOrderItemList.forEach(item=>{
-							  this.totalAmount += (item.totalAmount*100 +  this.totalAmount*100)/100
-							  this.workerAmount = (item.workerAmount*100 +  this.workerAmount*100)/100
-							  this.websitAmount += (item.websitAmount*100 +  this.websitAmount*100)/100
-						  })
-						  this.formDialogType = 1
-						  this.openForm()
-						})
+						this.openForm('detail',row.settlementOrderId)
 					}
 				}
 			},
@@ -268,7 +287,7 @@ export default {
 				btnType: 'text',
 				prompt: '确认是否退款？',
 				conditions: ({ row, index, column }) => {
-					return row.totalAmount > 0 && this.tabIndex==2
+					return row.totalAmount > 0 && row.refundStatus == 'NO' && this.tabIndex==2
 				},
 				click: ({ row, index, column }) => {
 					refund({ id: row.settlementOrderId }).then(res => {
@@ -306,7 +325,7 @@ export default {
 		}
 		this.settleAccounts(this.recordSelected.map(item=>{return item.settlementOrderId}).join(','))
 	},
-	settleAccounts(id){
+	settleAccounts(id,cancel,type){
 		this.$confirm(`请确认是否结算选中数据, 是否继续?`, '提示', {
 			confirmButtonText: '确定',
 			cancelButtonText: '取消',
@@ -317,6 +336,7 @@ export default {
 			}).then(res => {
 				if (res.code == 200) {
 					this.$message({ type: 'success', message: `结算成功!` })
+					if(type== 2){cancel('list')}
 					this.$refs.pageRef.refreshList()
 					this.formDialog = false
 				} else {

src/views/auxiliaryFittings/settleAccountManagement/settleAccountWeixinPay/index.vue

@@ -1,170 +1,167 @@
 <template>
-	<template-page ref="pageRef" v-if="tabIndexShow" :get-list="getList" :table-attributes="tableAttributes"
-		:table-events="tableEvents" :operationColumnWidth="120" :options-evens-group="optionsEvensGroup"
-		:moreParameters="moreParameters" :column-parsing="columnParsing" :operation="operation()"
-		:exportList="tabIndex == 1 ? exportList1 : exportList2">
-		<div slot="moreSearch" style="margin-bottom: 10px;">
-			<el-radio-group v-model="tabIndex" size="mini" @change="changeType">
-				<el-radio-button label="1">汇总</el-radio-button>
-				<el-radio-button label="2">明细</el-radio-button>
-			</el-radio-group>
-		</div>
-		<div slot="moreSearch" v-if="tabIndex == 2">
-			<el-radio-group v-model="status" size="mini" @change="changeType">
-				<el-radio-button label="">全部</el-radio-button>
-				<el-radio-button label="WAIT">待结算</el-radio-button>
-				<el-radio-button label="WAIT_ING">可提现</el-radio-button>
-				<el-radio-button label="ING">提现中</el-radio-button>
-				<el-radio-button label="OVER">已提现</el-radio-button>
-			</el-radio-group>
-			<br><br>
-		</div>
-		<el-dialog title="详情" width="80%" :modal="true" :visible.sync="formDialog" :show-close="true"
-			:close-on-click-modal="false" :modal-append-to-body="false" @close="formDialog = false; formData = {}">
-			<el-card class="box-card">
-				<div slot="header" class="clearfix">
-					<span>基础信息</span>
-				</div>
-				<table border="1" style="border-color: #fff;" width="100%" align="center" cellspacing="0" cellpadding="10">
-					<tr>
-						<td class="bold" align="center">所属商户</td>
-						<td>{{ formData.companyWechatName }}</td>
-						<td class="bold" align="center">关联工单号</td>
-						<td>{{ formData.workerOrderId }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">结算单号</td>
-						<td>{{ formData.settlementOrderId }}</td>
-						<td class="bold" align="center">工单品牌</td>
-						<td>{{ formData.brand }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">客户姓名</td>
-						<td>{{ formData.userName }}</td>
-						<td class="bold" align="center">客户电话</td>
-						<td>{{ formData.userMobile }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">师傅姓名</td>
-						<td>{{ formData.workerName }}</td>
-						<td class="bold" align="center">师傅身份证号</td>
-						<td>{{ formData.identity }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">师傅联系电话</td>
-						<td>{{ formData.workerMobile }}</td>
-						<td class="bold" align="center">订单金额</td>
-						<td>{{ formData.totalAmount }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">销售类型</td>
-						<td>{{ formData.settlementType == 'OWN' ? '自由' : formData.settlementType == 'OUT' ? '外购' : '' }}</td>
-						<td class="bold" align="center">创建人</td>
-						<td>{{ formData.createBy }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">创建时间</td>
-						<td>{{ formData.createTime }}</td>
-						<td class="bold" align="center">支付状态</td>
-						<td>{{ formData.payStatus == 'CANCEL' ? '取消' : formData.payStatus == 'PAID' ? '已支付' : formData.payStatus ==
-							'WAIT' ? '待支付' : '' }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">支付订单号</td>
-						<td>{{ formData.orderId }}</td>
-						<td class="bold" align="center">支付时间</td>
-						<td>{{ formData.payTime }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">分账单号</td>
-						<td>{{ formData.settlementOrderId }}</td>
-						<td class="bold" align="center">分账状态</td>
-						<td>{{ formData.status == 'WAIT' ? '待结算' : formData.status == 'WAIT_ING' ? '可提现' : formData.status ==
-							'ING' ? '提现中' : formData.status == 'OVER' ? '已提现' : '' }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">分账金额</td>
-						<td>{{ formData.amount }}</td>
-						<td class="bold" align="center">分账时间</td>
-						<td>{{ formData.settlementTime }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">师傅分账金额</td>
-						<td>{{ formData.workerAmount }}</td>
-						<td class="bold" align="center">师傅分账金额手续费</td>
-						<td>{{ formData.workerProceAmount }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">商户分账金额</td>
-						<td>{{ formData.websitAmount }}</td>
-						<td class="bold" align="center">商户分账金额手续费</td>
-						<td>{{ formData.websitProceAmount }}</td>
-					</tr>
-					<tr>
-						<td class="bold" align="center">操作人</td>
-						<td>{{ formData.updateBy }}</td>
-						<td class="bold" align="center">操作时间</td>
-						<td>{{ formData.updateTime }}</td>
-					</tr>
-				</table>
-			</el-card>
-			<el-card class="box-card">
-				<div slot="header" class="clearfix">
-					<span>订单信息</span>
-				</div>
-				<table border="1" style="border-color: #fff;" width="100%" align="center" cellspacing="0" cellpadding="10">
-					<thead>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<template-page ref="pageRef" v-if="tabIndexShow && activeKey == 'list'" :get-list="getList" :table-attributes="tableAttributes"
+				:table-events="tableEvents" :operationColumnWidth="120" :options-evens-group="optionsEvensGroup"
+				:moreParameters="moreParameters" :column-parsing="columnParsing" :operation="operation()"
+				:exportList="tabIndex == 1 ? exportList1 : exportList2">
+			  <div slot="moreSearch" style="margin-bottom: 10px;">
+			  	<el-radio-group v-model="tabIndex" size="mini" @change="changeType">
+			  		<el-radio-button label="1">汇总</el-radio-button>
+			  		<el-radio-button label="2">明细</el-radio-button>
+			  	</el-radio-group>
+			  </div>
+			  <div slot="moreSearch" v-if="tabIndex == 2">
+			  	<el-radio-group v-model="status" size="mini" @change="changeType">
+			  		<el-radio-button label="">全部</el-radio-button>
+			  		<el-radio-button label="WAIT">待结算</el-radio-button>
+			  		<el-radio-button label="WAIT_ING">可提现</el-radio-button>
+			  		<el-radio-button label="ING">提现中</el-radio-button>
+			  		<el-radio-button label="OVER">已提现</el-radio-button>
+			  	</el-radio-group>
+			  	<br><br>
+			  </div>
+			</template-page>
+			<div v-if="~['detail'].indexOf(activeKey)">
+				<el-card class="box-card">
+					<div slot="header" class="clearfix">
+						<span>基础信息</span>
+					</div>
+					<table border="1" style="border-color: #fff;" width="100%" align="center" cellspacing="0" cellpadding="10">
+						<tr>
+							<td class="bold" align="center">所属商户</td>
+							<td>{{ formData.companyWechatName }}</td>
+							<td class="bold" align="center">关联工单号</td>
+							<td>{{ formData.workerOrderId }}</td>
+							<td class="bold" align="center">结算单号</td>
+							<td>{{ formData.settlementOrderId }}</td>
+							<td class="bold" align="center">工单品牌</td>
+							<td>{{ formData.brand }}</td>
+						</tr>
+						<tr>
+							<td class="bold" align="center">客户姓名</td>
+							<td>{{ formData.userName }}</td>
+							<td class="bold" align="center">客户电话</td>
+							<td>{{ formData.userMobile }}</td>
+							<td class="bold" align="center">师傅姓名</td>
+							<td>{{ formData.workerName }}</td>
+							<td class="bold" align="center">师傅身份证号</td>
+							<td>{{ formData.identity }}</td>
+						</tr>
+						<tr>
+							<td class="bold" align="center">师傅联系电话</td>
+							<td>{{ formData.workerMobile }}</td>
+							<td class="bold" align="center">订单金额</td>
+							<td>{{ formData.totalAmount }}</td>
+							<td class="bold" align="center">销售类型</td>
+							<td>{{ formData.settlementType == 'OWN' ? '自由' : formData.settlementType == 'OUT' ? '外购' : '' }}</td>
+							<td class="bold" align="center">创建人</td>
+							<td>{{ formData.createBy }}</td>
+						</tr>
+						<tr>
+							<td class="bold" align="center">创建时间</td>
+							<td>{{ formData.createTime }}</td>
+							<td class="bold" align="center">支付状态</td>
+							<td>{{ formData.payStatus == 'CANCEL' ? '取消' : formData.payStatus == 'PAID' ? '已支付' : formData.payStatus ==
+								'WAIT' ? '待支付' : '' }}</td>
+							<td class="bold" align="center">支付订单号</td>
+							<td>{{ formData.orderId }}</td>
+							<td class="bold" align="center">支付时间</td>
+							<td>{{ formData.payTime }}</td>
+						</tr>
 						<tr>
-							<th class="bold" align="center">名称</th>
-							<th class="bold" align="center">收费类型</th>
-							<th class="bold" align="center">数量</th>
-							<th class="bold" align="center">单价</th>
-							<th class="bold" align="center">订单金额</th>
-							<th class="bold" align="center">销售类型</th>
-							<th class="bold" align="center">手续费</th>
-							<th class="bold" align="center">师傅分账金额</th>
-							<th class="bold" align="center">商户分账金额</th>
+							<td class="bold" align="center">分账单号</td>
+							<td>{{ formData.settlementOrderId }}</td>
+							<td class="bold" align="center">分账状态</td>
+							<td>{{ formData.status == 'WAIT' ? '待结算' : formData.status == 'WAIT_ING' ? '可提现' : formData.status ==
+								'ING' ? '提现中' : formData.status == 'OVER' ? '已提现' : '' }}</td>
+							<td class="bold" align="center">分账金额</td>
+							<td>{{ formData.amount }}</td>
+							<td class="bold" align="center">分账时间</td>
+							<td>{{ formData.settlementTime }}</td>
 						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="(item, index) in formData.settlementOrderItemList" :key="index">
-							<td align="center">{{ item.goodsName }}</td>
-							<td align="center">{{ item.chargeType == 'ACC' ? (item.goodsType ==
-								'M' ? '辅材' : '配件') + '物料' : item.chargeType == 'SERV' ? '服务收费' : '' }}</td>
-							<td align="center">{{ item.num }}</td>
-							<td align="center">{{ item.goodsAmount }}</td>
-							<td align="center">{{ item.totalAmount }}</td>
-							<td align="center">{{ item.settlementType == 'OWN' ? '自有' : item.settlementType == 'OUT' ? '外购' : '' }}</td>
-							<td align="center">{{ (item.websitProceAmount * 100 + item.workerProceAmount * 100) / 100 }}</td>
-							<td align="center">{{ item.workerAmount }}</td>
-							<td align="center">{{ item.websitAmount }}</td>
+						<tr>
+							<td class="bold" align="center">师傅分账金额</td>
+							<td>{{ formData.workerAmount }}</td>
+							<td class="bold" align="center">师傅分账金额手续费</td>
+							<td>{{ formData.workerProceAmount }}</td>
+							<td class="bold" align="center">商户分账金额</td>
+							<td>{{ formData.websitAmount }}</td>
+							<td class="bold" align="center">商户分账金额手续费</td>
+							<td>{{ formData.websitProceAmount }}</td>
 						</tr>
-						<!-- <tr>
-							<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
-						</tr> -->
 						<tr>
-							<td align="center">总计</td>
+							<td class="bold" align="center">操作人</td>
+							<td>{{ formData.updateBy }}</td>
+							<td class="bold" align="center">操作时间</td>
+							<td>{{ formData.updateTime }}</td>
 							<td></td>
 							<td></td>
 							<td></td>
-							<td align="center">{{ totalAmount }}</td>
 							<td></td>
-							<td align="center">{{ commissionAmount }}</td>
-							<td align="center">{{ workerAmount }}</td>
-							<td align="center">{{ websitAmount }}</td>
 						</tr>
-					</tbody>
-				</table>
-			</el-card>
-			<div slot="footer" class="dialog-footer">
-				<el-button size="mini" @click="formDialog = false; formData = {}">取 消</el-button>
-				<el-button size="mini" v-if="formData.status == 'WAIT'" type="primary"
-					@click="settleAccounts(formData.settlementOrderId)">确认结算</el-button>
-				<el-button size="mini" v-if="formData.status == 'WAIT_ING'" type="primary"
-					@click="withdraw(formData.settlementOrderId)">确认提现</el-button>
+					</table>
+				</el-card>
+				<el-card class="box-card">
+					<div slot="header" class="clearfix">
+						<span>订单信息</span>
+					</div>
+					<table border="1" style="border-color: #fff;" width="100%" align="center" cellspacing="0" cellpadding="10">
+						<thead>
+							<tr>
+								<th class="bold" align="center">名称</th>
+								<th class="bold" align="center">收费类型</th>
+								<th class="bold" align="center">数量</th>
+								<th class="bold" align="center">单价</th>
+								<th class="bold" align="center">订单金额</th>
+								<th class="bold" align="center">销售类型</th>
+								<th class="bold" align="center">手续费</th>
+								<th class="bold" align="center">师傅分账金额</th>
+								<th class="bold" align="center">商户分账金额</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr v-for="(item, index) in formData.settlementOrderItemList" :key="index">
+								<td align="center">{{ item.goodsName }}</td>
+								<td align="center">{{ item.chargeType == 'ACC' ? (item.goodsType ==
+									'M' ? '辅材' : '配件') + '物料' : item.chargeType == 'SERV' ? '服务收费' : '' }}</td>
+								<td align="center">{{ item.num }}</td>
+								<td align="center">{{ item.goodsAmount }}</td>
+								<td align="center">{{ item.totalAmount }}</td>
+								<td align="center">{{ item.settlementType == 'OWN' ? '自有' : item.settlementType == 'OUT' ? '外购' : '' }}</td>
+								<td align="center">{{ (item.websitProceAmount * 100 + item.workerProceAmount * 100) / 100 }}</td>
+								<td align="center">{{ item.workerAmount }}</td>
+								<td align="center">{{ item.websitAmount }}</td>
+							</tr>
+							<!-- <tr>
+								<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
+							</tr> -->
+							<tr>
+								<td align="center">总计</td>
+								<td></td>
+								<td></td>
+								<td></td>
+								<td align="center">{{ totalAmount }}</td>
+								<td></td>
+								<td align="center">{{ commissionAmount }}</td>
+								<td align="center">{{ workerAmount }}</td>
+								<td align="center">{{ websitAmount }}</td>
+							</tr>
+						</tbody>
+					</table>
+				</el-card>
+				<div slot="footer" class="dialog-footer">
+					<el-button size="mini" @click="formDialog = false; formData = {};data.removeTab()">取 消</el-button>
+					<el-button size="mini" v-if="formData.status == 'WAIT'" type="primary"
+						@click="settleAccounts(formData.settlementOrderId,data.removeTab,2)">确认结算
+					</el-button>
+					<el-button size="mini" v-if="formData.status == 'WAIT_ING'" type="primary" @click="withdraw(formData.settlementOrderId,data.removeTab,2)">
+						确认提现
+					</el-button>
+				</div>
 			</div>
-		</el-dialog>
-	</template-page>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -203,7 +200,9 @@ export default {
 			tabIndex: 1,
 			workerId: '',
 			websitId: '',
-			tabIndexShow: true
+			tabIndexShow: true,
+			formType: 'add',
+			formVisible: false,
 		}
 	},
 	watch: {
@@ -282,13 +281,48 @@ export default {
 		selectionChange(data) {
 			this.recordSelected = data
 		},
-		openForm() {
-			this.formDialog = true;
+		openForm(type, id) {
+			this.$refs.tabPage.addTab({
+				// 对应显示的模块
+				activeKey: type,
+				// 唯一标识
+				key: type,
+				// 页签名称
+				label: ({ detail: "详情" })[type],
+				// 打开时事件
+				triggerEvent: () => {
+					this.formCancel()
+					this.$nextTick(()=>{
+						this.formType = type
+						this.formVisible = true
+						if (type == 'detail') {
+							this.formDialogType = 1
+							this.totalAmount = 0
+							this.workerAmount = 0
+							this.websitAmount = 0
+							this.commissionAmount = 0
+							getDetail({ id  }).then(res => {
+								Object.assign(this.formData, res.data)
+								res.data.settlementOrderItemList.forEach(item => {
+									this.totalAmount += (item.totalAmount * 100 + this.totalAmount * 100) / 100
+									this.workerAmount = (item.workerAmount * 100 + this.workerAmount * 100) / 100
+									this.websitAmount += (item.websitAmount * 100 + this.websitAmount * 100) / 100
+									this.commissionAmount += (item.websitProceAmount * 100 + item.workerProceAmount * 100 + this.commissionAmount * 100) / 100
+								})
+							})
+						}
+					})
+				},
+				// 关闭时事件
+				closeEvent: () => {
+				
+				}
+			})
 		},
 		formCancel() {
-			this.$refs.formRef.$refs.inlineForm.clearValidate()
+			this.formVisible = false
+			this.$refs?.formRef?.resetFields()
 			this.$data.formData = this.$options.data().formData
-			this.formDialog = false
 		},
 		// 表格操作列
 		operation() {
@@ -305,21 +339,7 @@ export default {
 							this.tabIndex = 2
 							this.$refs.pageRef.refreshList()
 						} else {
-							this.totalAmount = 0
-							this.workerAmount = 0
-							this.websitAmount = 0
-							this.commissionAmount = 0
-							getDetail({ id: row.settlementOrderId }).then(res => {
-								Object.assign(this.formData, res.data)
-								res.data.settlementOrderItemList.forEach(item => {
-									this.totalAmount += (item.totalAmount * 100 + this.totalAmount * 100) / 100
-									this.workerAmount = (item.workerAmount * 100 + this.workerAmount * 100) / 100
-									this.websitAmount += (item.websitAmount * 100 + this.websitAmount * 100) / 100
-									this.commissionAmount += (item.websitProceAmount * 100 + item.workerProceAmount * 100 + this.commissionAmount * 100) / 100
-								})
-								this.formDialogType = 1
-								this.openForm()
-							})
+							this.openForm('detail',row.settlementOrderId)
 						}
 					}
 				},
@@ -374,7 +394,7 @@ export default {
 			}
 			this.settleAccounts(this.recordSelected.map(item => { return item.settlementOrderId }).join(','))
 		},
-		settleAccounts(id) {
+		settleAccounts(id,cancel,type) {
 			this.$confirm(`请确认是否结算选中数据, 是否继续?`, '提示', {
 				confirmButtonText: '确定',
 				cancelButtonText: '取消',
@@ -385,6 +405,7 @@ export default {
 				}).then(res => {
 					if (res.code == 200) {
 						this.$message({ type: 'success', message: `结算成功!` })
+						if(type== 2){cancel('list')}
 						this.$refs.pageRef.refreshList()
 						this.formDialog = false
 					} else {
@@ -399,7 +420,7 @@ export default {
 			}
 			this.withdraw(this.recordSelected.map(item => { return item.settlementOrderId }).join(','))
 		},
-		withdraw(id) {
+		withdraw(id,cancel,type) {
 			this.$confirm(`请确认是否提现选中数据, 是否继续?`, '提示', {
 				confirmButtonText: '确定',
 				cancelButtonText: '取消',
@@ -410,6 +431,7 @@ export default {
 				}).then(res => {
 					if (res.code == 200) {
 						this.$message({ type: 'success', message: `提现成功!` })
+						if(type== 2){cancel('list')}
 						this.$refs.pageRef.refreshList()
 						this.formDialog = false
 					} else {

src/views/auxiliaryFittings/supplier/index.vue

@@ -1,20 +1,25 @@
 <template>
-  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
-    :operationColumnWidth="80" :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="100px" :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" v-if="formDialogType !== 2" type="primary" @click="formConfirm()">确定</el-button>
-      </div>
-    </el-dialog>
-  </template-page>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', 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" :operationColumnWidth="80">
+			</template-page>
+			<div v-if="~['add', 'edit', 'detail'].indexOf(activeKey)">
+				<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+				  <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" :disabled="formDialogType == 2">
+				    </zj-form-module>
+				  </zj-form-container>
+				</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>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -64,7 +69,9 @@ export default {
         status: 'ON',
         venderType: 'M',
         imageUrl: []
-      }
+      },
+			formType: 'add',
+			formVisible: false,
     }
   },
   computed: {
@@ -74,7 +81,9 @@ export default {
         [
           [
             this.optionsEvensAuth("add", {
-              click: this.addData
+								click: () => {
+									this.openForm('add')
+								}
             }),
           ]
         ]
@@ -86,7 +95,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入', disabled: true },
@@ -96,7 +105,7 @@ export default {
           rules: [...required]
         },
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'slot-component',
         attributes: {},
@@ -115,7 +124,7 @@ export default {
           )
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入供应商名称', },
@@ -145,7 +154,7 @@ export default {
           rules: [...required, ...mobile]
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'slot-component',
         attributes: {},
@@ -165,7 +174,7 @@ export default {
           )
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入地址' },
@@ -245,7 +254,7 @@ export default {
           rules: []
         }
       }, {
-        md: 8,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入开户银行' },
@@ -255,7 +264,7 @@ export default {
           rules: []
         }
       }, {
-        md: 8,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入开户行号' },
@@ -265,7 +274,7 @@ export default {
           rules: []
         }
       }, {
-        md: 8,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入银行账号' },
@@ -339,43 +348,64 @@ export default {
       return this.operationBtn({
         detail: {
           click: ({ row, index, column }) => {
-            getDetail({ id: row.venderId }).then(res => {
-              Object.assign(this.formData, res.data, {
-                imageUrl: res.data?.imageUrl ? res.data?.imageUrl?.split(",").map(item => ({ url: item })) : []
-              })
-              this.formDialogType = 2
-              this.openForm()
-            })
+            this.openForm('detail',row.venderId)
           }
         },
         edit: {
           click: ({ row, index, column }) => {
-            getDetail({ id: row.venderId }).then(res => {
-              Object.assign(this.formData, res.data, {
-                imageUrl: res.data?.imageUrl ? res.data?.imageUrl?.split(",").map(item => ({ url: item })) : []
-              })
-              console.log(this.formData)
-              this.formDialogType = 1
-              this.openForm()
-            })
+            this.openForm('edit',row.venderId)
           }
         },
       })
     },
 
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
-      this.formDialog = true;
-    },
+    // 取消 新增编辑
     formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.formVisible = false
+      this.$refs?.formRef?.resetFields()
       this.$data.formData = this.$options.data().formData
-      this.formDialog = false
     },
-    formConfirm() {
+    // 打开 新增编辑 网点表单
+    openForm(type, id) {
+    	this.$refs.tabPage.addTab({
+    		// 对应显示的模块
+    		activeKey: type,
+    		// 唯一标识
+    		key: type,
+    		// 页签名称
+    		label: ({ edit: "编辑", add: "新增", detail: "查看" })[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
+    					getDetail({ id }).then(res => {
+    					  Object.assign(this.formData, res.data, {
+    					    imageUrl: res.data?.imageUrl ? res.data?.imageUrl?.split(",").map(item => ({ url: item })) : []
+    					  })
+    					})
+    				}else{
+    					this.formDialogType = 2
+    					getDetail({ id }).then(res => {
+    					  Object.assign(this.formData, res.data, {
+    					    imageUrl: res.data?.imageUrl ? res.data?.imageUrl?.split(",").map(item => ({ url: item })) : []
+    					  })
+    					})
+    				}
+    			})
+    		},
+    		// 关闭时事件
+    		closeEvent: () => {
+    		
+    		}
+    	})
+    },
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           ([add, edit][this.formDialogType])({
@@ -383,7 +413,7 @@ export default {
             imageUrl: this.formData.imageUrl.map(item => item.url).join(",")
           }).then(res => {
             this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
-            this.formCancel()
+            cancel('list')
             this.$refs.pageRef.refreshList()
           })
         }

src/views/engineeringMaintenance/applicationWithoutFee/index.vue

@@ -126,19 +126,19 @@ export default {
     selectionChange(data) {
       this.recordSelected = data
     },
-		
-	getDetail(id){
-		enginMaterialDetail({
-		  id
-		}).then(res => {
-		  this.openType = 0
-		  this.formData = res.data
-		  this.$nextTick(() => {
-		    this.formBool = true
-		  })
-		})
-	},
-		
+
+    getDetail(id) {
+      enginMaterialDetail({
+        id
+      }).then(res => {
+        this.openType = 0
+        this.formData = { ...res.data, examineStatus_cp: res.data.examineStatus }
+        this.$nextTick(() => {
+          this.formBool = true
+        })
+      })
+    },
+
     operation() {
       return this.operationBtn({
         detail: {

src/views/mallManagement/activity/coupon_index/index.vue

@@ -1,27 +1,30 @@
 <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="1000px" 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="120px" :showPackUp="false"
-          :form-data="formData" :form-items="formItems" :bodyViewStyle="{
-            'max-height': '600px',
-            'overflow-y': 'auto'
-          }">
-        </zj-form-module>
-      </zj-form-container>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="formCancel">取 消</el-button>
-        <el-button v-if="this.formDialogType !== 2" size="mini" @click="formConfirm" type="primary">确 定</el-button>
-      </div>
-    </el-dialog>
-    <selectMember v-if="showSelectMember" :memberList="formData.userList" @cancelSelectMember="showSelectMember = false"
-      @selectMemberPass="selectMemberPass" />
-    <selectGoods v-if="showSelectGoods" :goodsList="formData.goodsList" @cancelSelectGoods="showSelectGoods = false"
-      @selectGoodsPass="selectGoodsPass" />
-  </template-page>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', 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="120px" :showPackUp="false"
+				    :form-data="formData" :form-items="formItems" :bodyViewStyle="{
+				      'max-height': '600px',
+				      'overflow-y': 'auto'
+				    }">
+				  </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>
+			<selectMember v-if="showSelectMember" :memberList="formData.userList" @cancelSelectMember="showSelectMember = false"
+			  @selectMemberPass="selectMemberPass" />
+			<selectGoods v-if="showSelectGoods" :goodsList="formData.goodsList" @cancelSelectGoods="showSelectGoods = false"
+			  @selectGoodsPass="selectGoodsPass" />
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -78,6 +81,8 @@ export default {
       // 选择会员弹窗
       showSelectMember: false,
       showSelectGoods: false,
+			formType: 'add',
+			formVisible: false,
     }
   },
   computed: {
@@ -88,7 +93,7 @@ export default {
 				[
 					this.optionsEvensAuth("add", {
 						click: () => {
-							this.addData()
+							this.openForm('add')
 						}
 					})
 				],
@@ -117,7 +122,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入', disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
@@ -128,7 +133,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-radio',
         options: [{ label: "满减券", value: "SATISFY" }, { label: "商品券", value: "GOODS" }],
@@ -140,7 +145,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 12,
         isShow: true,
         name: 'el-radio',
         options: [
@@ -317,7 +322,7 @@ export default {
         }
       },
       {
-        md: 12,
+        md: 6,
         isShow: this.formData.couponType == 'SATISFY',
         name: 'el-input',
         attributes: { style: "width:100%", placeholder: '请输入', disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
@@ -328,7 +333,7 @@ export default {
         }
       },
       {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { style: "width:100%", placeholder: '请输入', disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
@@ -339,7 +344,7 @@ export default {
         }
       },
       {
-        md: 12,
+        md: 6,
         isShow: !this.isService,
         name: 'el-input',
         attributes: { style: "width:100%", placeholder: '请输入', disabled: this.formDialogType == 2 },
@@ -349,7 +354,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: this.isService,
         name: 'el-input',
         attributes: { style: "width:100%", placeholder: '请输入', disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
@@ -359,7 +364,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: !this.isService,
         name: 'el-input',
         attributes: { style: "width:100%", placeholder: '请输入', disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
@@ -370,7 +375,7 @@ export default {
         }
       },
       {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-date-picker',
         attributes: { style: "width:100%", placeholder: '请输入', type: "datetime", "value-format": "yyyy-MM-dd HH:mm:ss", disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
@@ -381,7 +386,7 @@ export default {
         }
       },
       {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-date-picker',
         attributes: { style: "width:100%", placeholder: '请输入', type: "daterange", "value-format": "yyyy-MM-dd HH:mm:ss", disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
@@ -392,18 +397,18 @@ export default {
         }
       },
       {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-date-picker',
         attributes: { style: "width:100%", placeholder: '请输入', type: "daterange", "value-format": "yyyy-MM-dd HH:mm:ss", disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
         formItemAttributes: {
           label: '使用时间',
           prop: 'activeDate',
-          rules: []
+          rules: [...required]
         }
       },
       {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'slot-component',
         formItemAttributes: {
@@ -476,15 +481,7 @@ export default {
 			detail: {
 				btnType: 'text',
 				click: ({ row, index, column }) => {
-					getCouponDetail({ couponId: row.couponId }).then(res => {
-						Object.assign(this.formData, res.data, {
-							receiveDate: res.data.obtainStartTime ? [res.data.obtainStartTime, res.data.obtainEndTime] : [],
-							activeDate: res.data.activeStartTime ? [res.data.activeStartTime, res.data.activeEndTime] : [],
-							imgSrc: res.data.imgSrc ? [{ url: res.data.imgSrc }] : [],
-						})
-						this.formDialogType = 2
-						this.openForm()
-					})
+					this.openForm('detail',row.couponId)
 				}
 				},
 			edit: {
@@ -493,15 +490,7 @@ export default {
 					return row.releaseFlag === 'WAIT'
 				},
 				click: ({ row, index, column }) => {
-					getCouponDetail({ couponId: row.couponId }).then(res => {
-						Object.assign(this.formData, res.data, {
-							receiveDate: res.data.obtainStartTime ? [res.data.obtainStartTime, res.data.obtainEndTime] : [],
-							activeDate: res.data.activeStartTime ? [res.data.activeStartTime, res.data.activeEndTime] : [],
-							imgSrc: res.data.imgSrc ? [{ url: res.data.imgSrc }] : [],
-						})
-						this.formDialogType = 1
-						this.openForm()
-					})
+					this.openForm('edit',row.couponId)
 				}
 			},
 			cancel: {
@@ -526,19 +515,56 @@ export default {
 			},
 		})
 	},
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
-      this.formDialog = true;
+    // 打开 新增编辑
+    openForm(type, couponId) {
+    	this.$refs.tabPage.addTab({
+    		// 对应显示的模块
+    		activeKey: type,
+    		// 唯一标识
+    		key: type,
+    		// 页签名称
+    		label: ({ edit: "编辑", add: "新增", detail: "查看" })[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
+    					getCouponDetail({ couponId }).then(res => {
+    						Object.assign(this.formData, res.data, {
+    							receiveDate: res.data.obtainStartTime ? [res.data.obtainStartTime, res.data.obtainEndTime] : [],
+    							activeDate: res.data.activeStartTime ? [res.data.activeStartTime, res.data.activeEndTime] : [],
+    							imgSrc: res.data.imgSrc ? [{ url: res.data.imgSrc }] : [],
+    						})
+    					})
+    				}else{
+    					this.formDialogType = 2
+    					getCouponDetail({ couponId }).then(res => {
+    						Object.assign(this.formData, res.data, {
+    							receiveDate: res.data.obtainStartTime ? [res.data.obtainStartTime, res.data.obtainEndTime] : [],
+    							activeDate: res.data.activeStartTime ? [res.data.activeStartTime, res.data.activeEndTime] : [],
+    							imgSrc: res.data.imgSrc ? [{ url: res.data.imgSrc }] : [],
+    						})
+    					})
+    				}
+    			})
+    		},
+    		// 关闭时事件
+    		closeEvent: () => {
+					this.formCancel()
+    		}
+    	})
     },
     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.formData = this.$options.data().formData
     },
-    formConfirm() {
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           var pam = {
@@ -551,7 +577,7 @@ export default {
           };
           ([addCoupon, editCoupon][this.formDialogType])(pam).then(res => {
             this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
-            this.formCancel()
+            cancel('list')
             this.$refs.pageRef.refreshList()
           })
         }

src/views/mallManagement/configCenter/brand/index.vue

@@ -1,80 +1,91 @@
 <template>
-  <div class="app-container">
-    <div class="mymain-container">
-      <div class="btn-group clearfix">
-        <div class="fl">
-          <el-button v-if="$restrict('add')" size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">添加品牌</el-button>
-        </div>
-      </div>
-
-      <div class="table">
-        <el-table ref="noticeTable" v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
-          <el-table-column align="center" label="服务品牌" prop="brandName" min-width="180"></el-table-column>
-          <el-table-column align="center" label="图片" prop="imageUrl">
-            <template slot-scope="scope">
-              <el-image style="width: 40px; height: 40px; display: block; margin: 0 auto;" :src="scope.row.imageUrl" :preview-src-list="[scope.row.imageUrl]" fit="cover">
-                <div slot="error" style="height: 100%;font-size: 40px;">
-                  <i class="el-icon-picture-outline"></i>
-                </div>
-              </el-image>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="状态" class-name="status-col">
-            <template slot-scope="scope">
-              <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? '开启' : '禁用'}}</el-tag>
-            </template>
-          </el-table-column>
-		  <el-table-column align="center" label="排序" prop="sortNum"></el-table-column>
-          <el-table-column align="center" label="创建人" prop="createBy" min-width="100"></el-table-column>
-          <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
-          <el-table-column align="center" label="修改人" prop="updateBy" min-width="100"></el-table-column>
-          <el-table-column align="center" label="修改时间" prop="updateTime" min-width="160"></el-table-column>
-          <el-table-column align="center" label="操作" fixed="right" width="120">
-            <template slot-scope="scope">
-              <el-button type="text" v-if="$restrict('edit')" @click="addOrEdit('edit', scope.row.id)">编辑</el-button>
-              <el-popconfirm v-if="$restrict('del')" style="margin-left: 10px;" title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
-                <el-button slot="reference" type="text">删除</el-button>
-              </el-popconfirm>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </div>
-
-
-    <!-- 新增编辑 -->
-    <el-dialog :title="addFormType === 'add' ? '新增品牌':'编辑品牌'" :visible.sync="addFormVisible" :show-close="false" width="50%" :close-on-click-modal="false">
-      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="80px">
-        <el-form-item label="品牌名称" prop="name">
-          <el-input v-model="addForm.name" autocomplete="off" placeholder="请输入品牌名称"></el-input>
-        </el-form-item>
-        <el-form-item label="图片" prop="imgUrl">
-          <el-upload
-            class="avatar-uploader"
-            :action="baseURL + 'common/upload'"
-            :headers="myHeaders"
-            :show-file-list="false"
-            :on-success="uploadSuccess"
-            :before-upload="beforeUpload">
-            <img v-if="addForm.imgUrl" :src="addForm.imgUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="addForm.status">
-            <el-radio :label="true">开启</el-radio>
-            <el-radio :label="false">禁用</el-radio>
-          </el-radio-group>
-        </el-form-item>
-		<el-form-item label="排序" prop="sortNum">
-		  <el-input v-model="addForm.sortNum" autocomplete="off" placeholder="请输入"></el-input>
-		</el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelAddForm">取 消</el-button>
-        <el-button type="primary" @click="submitAddForm">确 定</el-button>
-      </div>
-    </el-dialog>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<div v-if="activeKey == 'list'" class="app-container">
+			  <div class="btn-group clearfix">
+			    <div class="fl">
+			      <el-button v-if="$restrict('add')" size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">添加品牌</el-button>
+			    </div>
+			  </div>
+			
+			  <div class="table">
+			    <el-table ref="noticeTable" v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
+			      <el-table-column align="center" label="服务品牌" prop="brandName" min-width="180"></el-table-column>
+			      <el-table-column align="center" label="图片" prop="imageUrl">
+			        <template slot-scope="scope">
+			          <el-image style="width: 40px; height: 40px; display: block; margin: 0 auto;" :src="scope.row.imageUrl" :preview-src-list="[scope.row.imageUrl]" fit="cover">
+			            <div slot="error" style="height: 100%;font-size: 40px;">
+			              <i class="el-icon-picture-outline"></i>
+			            </div>
+			          </el-image>
+			        </template>
+			      </el-table-column>
+			      <el-table-column align="center" label="状态" class-name="status-col">
+			        <template slot-scope="scope">
+			          <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? '开启' : '禁用'}}</el-tag>
+			        </template>
+			      </el-table-column>
+			  <el-table-column align="center" label="排序" prop="sortNum"></el-table-column>
+			      <el-table-column align="center" label="创建人" prop="createBy" min-width="100"></el-table-column>
+			      <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
+			      <el-table-column align="center" label="修改人" prop="updateBy" min-width="100"></el-table-column>
+			      <el-table-column align="center" label="修改时间" prop="updateTime" min-width="160"></el-table-column>
+			      <el-table-column align="center" label="操作" fixed="right" width="120">
+			        <template slot-scope="scope">
+			          <el-button type="text" v-if="$restrict('edit')" @click="addOrEdit('edit', scope.row.id)">编辑</el-button>
+			          <el-popconfirm v-if="$restrict('del')" style="margin-left: 10px;" title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
+			            <el-button slot="reference" type="text">删除</el-button>
+			          </el-popconfirm>
+			        </template>
+			      </el-table-column>
+			    </el-table>
+			  </div>
+			</div>
+			<!-- 新增编辑 -->
+			<div v-if="addFormVisible" class="app-container">
+				<el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="80px">
+					<el-row :gutter="20">
+						<el-col :span="6">
+							<el-form-item label="品牌名称" prop="name">
+							  <el-input v-model="addForm.name" autocomplete="off" placeholder="请输入品牌名称"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="状态" prop="status">
+							  <el-radio-group v-model="addForm.status">
+							    <el-radio :label="true">开启</el-radio>
+							    <el-radio :label="false">禁用</el-radio>
+							  </el-radio-group>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="排序" prop="sortNum">
+							  <el-input v-model="addForm.sortNum" autocomplete="off" placeholder="请输入"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="24">
+							<el-form-item label="图片" prop="imgUrl">
+							  <el-upload
+							    class="avatar-uploader"
+							    :action="baseURL + 'common/upload'"
+							    :headers="myHeaders"
+							    :show-file-list="false"
+							    :on-success="uploadSuccess"
+							    :before-upload="beforeUpload">
+							    <img v-if="addForm.imgUrl" :src="addForm.imgUrl" class="avatar">
+							    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+							  </el-upload>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+				<div slot="footer" class="dialog-footer">
+				  <el-button @click="data.removeTab()">取 消</el-button>
+				  <el-button type="primary" @click="submitAddForm(data.removeTab)">确 定</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
   </div>
 </template>
 
@@ -113,6 +124,8 @@ export default {
           { required: true, message: '请输入排序', trigger: 'blur' }
         ],
       },
+			formType: 'add',
+			formVisible: false,
     }
   },
 
@@ -130,30 +143,49 @@ export default {
 
     // 新增编辑
     addOrEdit(type, id) {
-      this.addFormType = type;
-      this.addFormVisible = true;
-      if(type == 'edit') {
-        this.editId = id;
-        getBrandDetail({id: id}).then(res => {
-          this.addForm = {
-            name: res.data.brandName,
-            imgUrl: res.data.imageUrl,
-            status: res.data.status,
-			sortNum: res.data.sortNum
-          }
-        })
-      }
+		this.$refs.tabPage.addTab({
+			// 对应显示的模块
+			activeKey: type,
+			// 唯一标识
+			key: type,
+			// 页签名称
+			label: ({ edit: "编辑", add: "新增" })[type],
+			// 打开时事件
+			triggerEvent: () => {
+				this.$nextTick(()=>{
+					this.formType = type
+					this.formVisible = true
+					this.addFormType = type;
+					this.addFormVisible = true;
+					if(type == 'edit'){
+						this.editId = id;
+						  getBrandDetail({id: id}).then(res => {
+						    this.addForm = {
+						      name: res.data.brandName,
+						      imgUrl: res.data.imageUrl,
+						      status: res.data.status,
+						sortNum: res.data.sortNum
+						    }
+						  })
+					}
+				})
+			},
+			// 关闭时事件
+			closeEvent: () => {
+				this.cancelAddForm()
+			}
+		})
     },
 
     // 取消 新增编辑
     cancelAddForm(){
       this.addFormVisible = false;
-      this.$refs.addForm.resetFields();
+      this.$refs?.addForm?.resetFields();
       this.selGoodsName = ''
     },
 
     // 提交 新增编辑
-    submitAddForm() {
+    submitAddForm(cancel) {
       this.$refs.addForm.validate((valid) => {
         if (valid) {
           let params = {
@@ -167,6 +199,7 @@ export default {
           }
           saveBrand(params).then(res => {
             this.cancelAddForm();
+			cancel()
             this.getList();
             this.$successMsg('保存成功');
           })

src/views/mallManagement/configCenter/business_type/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()">
-    <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="120px" :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 v-if="this.formDialogType !== 2" size="mini" @click="formConfirm" type="primary">确 定</el-button>
-      </div>
-    </el-dialog>
-  </template-page>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', 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="120px" :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 v-if="formDialogType !== 2" size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -49,6 +52,8 @@ export default {
         status: true,
 		sortNum: 0
       },
+		formType: 'add',
+		formVisible: false,
     }
   },
   computed: {
@@ -59,7 +64,7 @@ export default {
 				[
 					this.optionsEvensAuth("add", {
 						click: () => {
-							this.addData()
+							this.openForm('add')
 						}
 					})
 				],
@@ -72,7 +77,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         options: this.businessTypeList,
@@ -84,7 +89,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-radio',
         options: [{ label: "开启", value: true }, { label: "禁用", value: false }],
@@ -96,7 +101,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -128,21 +133,13 @@ export default {
 			detail: {
 				btnType: 'text',
 				click: ({ row, index, column }) => {
-					getTypeDetail({ id: row.id }).then(res => {
-					  Object.assign(this.formData, res.data)
-					  this.formDialogType = 2
-					  this.openForm()
-					})
+					this.openForm('detail',row.id)
 				}
 			},
 			edit: {
 				btnType: 'text',
 				click: ({ row, index, column }) => {
-					getTypeDetail({ id: row.id }).then(res => {
-					  Object.assign(this.formData, res.data)
-					  this.formDialogType = 1
-					  this.openForm()
-					})
+					this.openForm('edit',row.id)
 				}
 			},
 			del: {
@@ -160,19 +157,49 @@ export default {
 			}
 		})
 	},
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
-      this.formDialog = true;
-    },
+    // 取消 新增编辑
     formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.formVisible = false
+      this.$refs?.formRef?.resetFields()
       this.$data.formData = this.$options.data().formData
-      this.formDialog = false
     },
-    formConfirm() {
+    // 打开 新增编辑 网点表单
+    openForm(type, id) {
+      this.$refs.tabPage.addTab({
+        // 对应显示的模块
+        activeKey: type,
+        // 唯一标识
+        key: type,
+        // 页签名称
+        label: ({ edit: "编辑", add: "新增", detail: "查看" })[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
+    				getTypeDetail({ id }).then(res => {
+    					Object.assign(this.formData, res.data)
+    				})
+    			}else{
+    				this.formDialogType = 2
+    				getTypeDetail({ id }).then(res => {
+    					Object.assign(this.formData, res.data)
+    				})
+    			}
+    		})
+        },
+        // 关闭时事件
+        closeEvent: () => {
+          
+        }
+      })
+    },
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           saveType(this.formData).then(res => {
@@ -180,7 +207,7 @@ export default {
               type: 'success',
               message: this.formDialogTitles[this.formDialogType] + `成功!`,
             })
-            this.formCancel()
+            cancel('list')
             this.$refs.pageRef.refreshList()
           })
         }

src/views/mallManagement/configCenter/chargingStandard/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()">
-    <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="120px" :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 v-if="this.formDialogType !== 2" size="mini" @click="formConfirm" type="primary">确 定</el-button>
-      </div>
-    </el-dialog>
-  </template-page>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', 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 v-if="formDialogType !== 2" size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -57,8 +60,15 @@ export default {
       brandList: [], // 品牌列表
       mainList: [], // 一级分类列表
       smallList: [], // 二级分类列表
+	  formType: 'add',
+	  formVisible: false,
     }
   },
+	watch: {
+		'formData.imageUrl'(){
+			this.$refs?.formRef?.validateField(["imageUrl"])
+		}
+	},
   computed: {
 	// 事件组合
 	optionsEvensGroup() {
@@ -67,7 +77,7 @@ export default {
 				[
 					this.optionsEvensAuth("add", {
 						click: () => {
-							this.addData()
+							this.openForm('add')
 						}
 					})
 				],
@@ -80,7 +90,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-select',
         options: this.businessTypeList,
@@ -92,7 +102,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-select',
         options: this.brandList,
@@ -104,7 +114,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-select',
         options: this.mainList,
@@ -131,7 +141,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-select',
         options: this.smallList,
@@ -143,7 +153,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-radio',
         options: [{ label: "开启", value: true }, { label: "禁用", value: false }],
@@ -200,48 +210,81 @@ export default {
 		return this.operationBtn({
 			detail: {
 				btnType: 'text',
-			  click: ({ row, index, column }) => {
-			    getMainDetail({ id: row.id }).then(res => {
-			      Object.assign(this.formData, res.data, {
-			        imageUrl: res.data.imageUrl ? [{ url: res.data.imageUrl }] : [],
-			      })
-			      this.formDialogType = 2
-			      this.openForm()
-			    })
-			  }
+				click: ({ row, index, column }) => {
+					this.openForm('detail',row.id)
+				}
 			},
-		  edit: {
+			edit: {
 				btnType: 'text',
-		    click: ({ row, index, column }) => {
-		      getMainDetail({ id: row.id }).then(res => {
-		        Object.assign(this.formData, res.data, {
-		          imageUrl: res.data.imageUrl ? [{ url: res.data.imageUrl }] : [],
-		        })
-		        this.formDialogType = 1
-		        this.openForm()
-		      })
-		    }
-		  },
-		  del: {
+				click: ({ row, index, column }) => {
+					this.openForm('edit',row.id)
+				}
+			},
+			del: {
 				btnType: 'text',
 				prompt: '确定删除吗？',
-		    click: ({ row, index, column }) => {
-		      deleteMain({ id: row.id }).then(res => {
-		        this.$message({
-		          type: 'success',
-		          message: `删除成功!`,
-		        })
-		        this.$refs.pageRef.refreshList()
-		      })
-		    }
-		  }
+				click: ({ row, index, column }) => {
+					deleteMain({ id: row.id }).then(res => {
+						this.$message({
+							type: 'success',
+							message: `删除成功!`,
+						})
+						this.$refs.pageRef.refreshList()
+					})
+				}
+			}
 		})
     },
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
+	// 取消 新增编辑
+	formCancel() {
+	  this.formVisible = false
+	  this.$refs?.formRef?.resetFields()
+	  this.$data.formData = this.$options.data().formData
+	},
+	// 打开 新增编辑 网点表单
+	openForm(type, id) {
+		this.$refs.tabPage.addTab({
+			// 对应显示的模块
+			activeKey: type,
+			// 唯一标识
+			key: type,
+			// 页签名称
+			label: ({ edit: "编辑", add: "新增", detail: "查看" })[type],
+			// 打开时事件
+			triggerEvent: () => {
+				this.formCancel()
+				this.$nextTick(()=>{
+					this.formType = type
+					this.formVisible = true
+					if (type == 'add') {
+						this.formDialogType = 0
+						this.initData()
+					} else if(type == 'edit'){
+						this.formDialogType = 1
+						getMainDetail({ id }).then(res => {
+							Object.assign(this.formData, res.data, {
+								imageUrl: res.data.imageUrl ? [{ url: res.data.imageUrl }] : [],
+							})
+							this.initData()
+						})
+					}else{
+						this.formDialogType = 2
+						getMainDetail({ id }).then(res => {
+							Object.assign(this.formData, res.data, {
+								imageUrl: res.data.imageUrl ? [{ url: res.data.imageUrl }] : [],
+							})
+							this.initData()
+						})
+					}
+				})
+			},
+			// 关闭时事件
+			closeEvent: () => {
+			
+			}
+		})
+	},
+    initData() {
       Promise.all([
         getTypeList(),
         getBrandList(),
@@ -274,15 +317,9 @@ export default {
             data: item
           })) || [];
         }
-        this.formDialog = true;
       })
     },
-    formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
-      this.$data.formData = this.$options.data().formData
-      this.formDialog = false
-    },
-    formConfirm() {
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           var pam = {
@@ -294,7 +331,7 @@ export default {
               type: 'success',
               message: this.formDialogTitles[this.formDialogType] + `成功!`,
             })
-            this.formCancel()
+            cancel('list')
             this.$refs.pageRef.refreshList()
           })
         }

src/views/mallManagement/configCenter/faultSelfExamination/index.vue

@@ -1,28 +1,31 @@
 <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">
-    <div slot="moreSearch">
-      <el-radio-group v-model="type" size="mini" @change="changeType">
-        <el-radio-button :label="''">全部</el-radio-button>
-        <el-radio-button :label="true">开启</el-radio-button>
-        <el-radio-button :label="false">禁用</el-radio-button>
-      </el-radio-group>
-      <br><br>
-    </div>
-    <el-dialog title="" width="600px" 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="120px" :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: $route.meta.title+'-列表', 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">
+				<div slot="moreSearch">
+				  <el-radio-group v-model="type" size="mini" @change="changeType">
+				    <el-radio-button :label="''">全部</el-radio-button>
+				    <el-radio-button :label="true">开启</el-radio-button>
+				    <el-radio-button :label="false">禁用</el-radio-button>
+				  </el-radio-group>
+				  <br><br>
+				</div>
+			</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="110px" :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 v-if="formDialogType !== 2" size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -65,6 +68,8 @@ export default {
       brandList: [], // 品牌列表
       mainList: [], // 一级分类列表
       smallList: [], // 二级分类列表
+			formType: 'add',
+			formVisible: false,
     }
   },
   computed: {
@@ -75,7 +80,7 @@ export default {
 				[
 					this.optionsEvensAuth("add", {
 						click: () => {
-							this.addData()
+							this.openForm('add')
 						}
 					})
 				],
@@ -107,7 +112,7 @@ export default {
     formItems() {
       return [
         {
-          md: 24,
+          md: 6,
           isShow: true,
           name: 'el-select',
           options: this.brandList,
@@ -119,7 +124,7 @@ export default {
           }
         },
         {
-          md: 24,
+          md: 6,
           isShow: true,
           name: 'el-select',
           options: this.mainList,
@@ -146,7 +151,7 @@ export default {
           }
         },
         {
-          md: 24,
+          md: 6,
           isShow: true,
           name: 'el-select',
           options: this.smallList,
@@ -157,7 +162,7 @@ export default {
             rules: [...required]
           }
         }, {
-          md: 24,
+          md: 6,
           isShow: true,
           name: 'el-input',
           attributes: { placeholder: '请输入', disabled: this.formDialogType == 2, },
@@ -166,19 +171,9 @@ export default {
             prop: 'content1',
             rules: [...required]
           }
-        }, {
-          md: 24,
-          isShow: true,
-          name: 'el-input',
-          attributes: { placeholder: '请输入', type: "textarea", disabled: this.formDialogType == 2, },
-          formItemAttributes: {
-            label: '故障排除指引',
-            prop: 'content2',
-            rules: [...required]
-          }
         },
         {
-          md: 24,
+          md: 6,
           isShow: true,
           name: 'el-radio',
           options: [{ label: "开启", value: true }, { label: "禁用", value: false }],
@@ -189,7 +184,17 @@ export default {
             rules: [...required]
           }
         },
-
+		{
+		  md: 24,
+		  isShow: true,
+		  name: 'el-input',
+		  attributes: { placeholder: '请输入', type: "textarea", rows: 5, disabled: this.formDialogType == 2, },
+		  formItemAttributes: {
+		    label: '故障排除指引',
+		    prop: 'content2',
+		    rules: [...required]
+		  }
+		}
       ]
     }
   },
@@ -228,21 +233,13 @@ export default {
 			detail: {
 				btnType: 'text',
 				click: ({ row, index, column }) => {
-					getMainDetail({ id: row.id }).then(res => {
-					  Object.assign(this.formData, res.data)
-					  this.formDialogType = 2
-					  this.openForm()
-					})
+					this.openForm('detail',row.id)
 				}
 			},
 			edit: {
 				btnType: 'text',
 				click: ({ row, index, column }) => {
-					getMainDetail({ id: row.id }).then(res => {
-					  Object.assign(this.formData, res.data)
-					  this.formDialogType = 1
-					  this.openForm()
-					})
+					this.openForm('edit',row.id)
 				}
 			},
 			del: {
@@ -260,11 +257,52 @@ export default {
 			}
 		})
 	},
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
+    // 取消 新增编辑
+    formCancel() {
+      this.formVisible = false
+      this.$refs?.formRef?.resetFields()
+      this.$data.formData = this.$options.data().formData
     },
-    openForm() {
+    // 打开 新增编辑 网点表单
+    openForm(type, id) {
+      this.$refs.tabPage.addTab({
+        // 对应显示的模块
+        activeKey: type,
+        // 唯一标识
+        key: type,
+        // 页签名称
+        label: ({ edit: "编辑", add: "新增", detail: "查看" })[type],
+        // 打开时事件
+        triggerEvent: () => {
+          this.formCancel()
+          this.$nextTick(()=>{
+            this.formType = type
+            this.formVisible = true
+            if (type == 'add') {
+              this.formDialogType = 0
+				this.initData()
+            } else if(type == 'edit'){
+    			this.formDialogType = 1
+    			getMainDetail({ id }).then(res => {
+    			  Object.assign(this.formData, res.data)
+    			  this.initData()
+    			})
+            }else{
+    			this.formDialogType = 2
+				getMainDetail({ id }).then(res => {
+					Object.assign(this.formData, res.data)
+					this.initData()
+				})
+    		}
+          })
+        },
+        // 关闭时事件
+        closeEvent: () => {
+          
+        }
+      })
+    },
+    initData() {
       Promise.all([
         getBrandList(),
         getClassifyList({
@@ -294,12 +332,7 @@ export default {
         this.formDialog = true;
       })
     },
-    formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
-      this.$data.formData = this.$options.data().formData
-      this.formDialog = false
-    },
-    formConfirm() {
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           saveMain({...this.formData, type:2}).then(res => {
@@ -307,7 +340,7 @@ export default {
               type: 'success',
               message: this.formDialogTitles[this.formDialogType] + `成功!`,
             })
-            this.formCancel()
+            cancel('list')
             this.$refs.pageRef.refreshList()
           })
         }

src/views/mallManagement/configCenter/serviceProduct/index.vue

@@ -1,130 +1,150 @@
 <template>
-  <div class="app-container">
-    <div class="mymain-container">
-      <div class="btn-group clearfix">
-        <div class="fl">
-          <el-button v-if="$restrict('add')" size="small" type="primary" icon="el-icon-plus" @click="addOrEditParent('add')">添加分类</el-button>
-        </div>
-        <div class="fr">
-          <el-input placeholder="请输入分类名称进行搜索" v-model="screenForm.keyword" size="small" style="width: 240px;" clearable>
-            <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
-          </el-input>
-        </div>
-      </div>
-
-      <div class="table">
-        <el-table :data="dataList" row-key="categoryId" border default-expand-all :tree-props="{children: 'children'}">
-          <el-table-column prop="name" label="分类名称" min-width="150"></el-table-column>
-          <el-table-column align="center" label="分类图片" prop="imgUrl" width="80">
-            <template slot-scope="scope">
-              <el-image style="width: 40px; height: 40px; display: block; margin: 0 auto;" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]" fit="cover">
-                <div slot="error" style="height: 100%;font-size: 40px;">
-                  <i class="el-icon-picture-outline"></i>
-                </div>
-              </el-image>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" prop="createTime" label="创建时间" min-width="160"></el-table-column>
-          <!-- <el-table-column align="center" prop="goodsNum" label="商品数"></el-table-column> -->
-          <el-table-column align="center" prop="sortNum" label="排序"></el-table-column>
-          <el-table-column align="center" prop="companyName" label="商户" min-width="120"></el-table-column>
-          <el-table-column align="center" label="状态" class-name="status-col">
-            <template slot-scope="scope">
-              <el-tag :type="scope.row.status ? 'success':'danger'">{{ scope.row.status ? '显示':'隐藏' }}</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column align="right" label="操作" width="150" fixed="right">
-            <template slot-scope="scope">
-              <el-button type="primary" size="mini" icon="el-icon-plus" v-if="scope.row.level == 1 && $restrict('add')" @click="addOrEditChild('add', scope.row.categoryId)"></el-button>
-              <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level == 1 && $restrict('edit')" @click="addOrEditParent('edit', scope.row.categoryId)"></el-button>
-              <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level == 2 && $restrict('edit')" @click="addOrEditChild('edit', scope.row.categoryId)"></el-button>
-              <el-popconfirm v-if="$restrict('del')" style="margin-left: 10px;" title="确定删除吗？" @confirm="handleDelete(scope.row.categoryId)" >
-                <el-button slot="reference" size="mini" icon="el-icon-delete"></el-button>
-              </el-popconfirm>
-
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </div>
-
-    <!-- 新增编辑 一级分类 -->
-    <el-dialog :title="addParentFormType == 'add' ? '添加一级分类':'编辑一级分类'" :visible.sync="addParentFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
-      <el-form ref="addParentForm" :model="addParentForm" :rules="addParentFormRules" label-position="left" label-width="80px">
-        <el-form-item label="一级分类" prop="oneClassify">
-          <el-input type="text" placeholder="请输入一级分类名称" v-model="addParentForm.oneClassify" maxlength="10" show-word-limit style="width: 250px;"></el-input>
-        </el-form-item>
-        <el-form-item label="分类图片" prop="imgUrl">
-          <el-upload
-            class="avatar-uploader"
-            style="height:122px"
-            :action="baseURL + 'common/upload'"
-            :headers="myHeaders"
-            :show-file-list="false"
-            :on-success="uploadSuccess"
-            :before-upload="beforeUpload">
-            <img v-if="addParentForm.imgUrl" :src="addParentForm.imgUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="addParentForm.status">
-            <el-radio :label="true">显示</el-radio>
-            <el-radio :label="false">隐藏</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="排序" prop="sort">
-          <el-input placeholder="请输入排序" v-model.number="addParentForm.sort" style="width: 250px;"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelAddParentForm">取 消</el-button>
-        <el-button type="primary" @click="submitAddParentForm">确 定</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 新增编辑 二级分类 -->
-    <el-dialog :title="addChildFormType == 'add' ? '添加二级分类':'编辑二级分类'" :visible.sync="addChildFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
-      <el-form ref="addChildForm" :model="addChildForm" :rules="addChildFormRules" label-position="left" label-width="80px">
-        <el-form-item label="一级分类" prop="oneClassify">
-          <el-select v-model="addChildForm.oneClassify" placeholder="请选择一级分类" disabled style="width: 250px;">
-            <el-option :label="item.name" :value="item.categoryId" v-for="(item, index) in classifyList" :key="index"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="二级分类" prop="twoClassify">
-          <el-input type="text" placeholder="请输入二级分类名称" v-model="addChildForm.twoClassify" maxlength="10" show-word-limit style="width: 250px;"></el-input>
-        </el-form-item>
-
-        <el-form-item label="分类图片" prop="imgUrl">
-          <el-upload
-            class="avatar-uploader"
-            style="height:122px"
-            :action="baseURL + 'common/upload'"
-            :headers="myHeaders"
-            :show-file-list="false"
-            :on-success="uploadSuccess"
-            :before-upload="beforeUpload">
-            <img v-if="addChildForm.imgUrl" :src="addChildForm.imgUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="addChildForm.status">
-            <el-radio :label="true">显示</el-radio>
-            <el-radio :label="false">隐藏</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="排序" prop="sort">
-          <el-input placeholder="请输入排序" v-model.number="addChildForm.sort" style="width: 250px;"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelAddChildForm">取 消</el-button>
-        <el-button type="primary" @click="submitAddChildForm">确 定</el-button>
-      </div>
-    </el-dialog>
-
-  </div>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<div v-if="activeKey == 'list'" class="app-container">
+			  <div class="btn-group clearfix">
+			    <div class="fl">
+			      <el-button v-if="$restrict('add')" size="small" type="primary" icon="el-icon-plus" @click="addOrEditParent('add1')">添加分类</el-button>
+			    </div>
+			    <div class="fr">
+			      <el-input placeholder="请输入分类名称进行搜索" v-model="screenForm.keyword" size="small" style="width: 240px;" clearable>
+			        <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
+			      </el-input>
+			    </div>
+			  </div>
+			
+			  <div class="table">
+			    <el-table :data="dataList" row-key="categoryId" border default-expand-all :tree-props="{children: 'children'}">
+			      <el-table-column prop="name" label="分类名称" min-width="150"></el-table-column>
+			      <el-table-column align="center" label="分类图片" prop="imgUrl" width="80">
+			        <template slot-scope="scope">
+			          <el-image style="width: 40px; height: 40px; display: block; margin: 0 auto;" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]" fit="cover">
+			            <div slot="error" style="height: 100%;font-size: 40px;">
+			              <i class="el-icon-picture-outline"></i>
+			            </div>
+			          </el-image>
+			        </template>
+			      </el-table-column>
+			      <el-table-column align="center" prop="createTime" label="创建时间" min-width="160"></el-table-column>
+			      <!-- <el-table-column align="center" prop="goodsNum" label="商品数"></el-table-column> -->
+			      <el-table-column align="center" prop="sortNum" label="排序"></el-table-column>
+			      <el-table-column align="center" prop="companyName" label="商户" min-width="120"></el-table-column>
+			      <el-table-column align="center" label="状态" class-name="status-col">
+			        <template slot-scope="scope">
+			          <el-tag :type="scope.row.status ? 'success':'danger'">{{ scope.row.status ? '显示':'隐藏' }}</el-tag>
+			        </template>
+			      </el-table-column>
+			      <el-table-column align="right" label="操作" width="150" fixed="right">
+			        <template slot-scope="scope">
+			          <el-button type="primary" size="mini" icon="el-icon-plus" v-if="scope.row.level == 1 && $restrict('add')" @click="addOrEditChild('add2', scope.row.categoryId)"></el-button>
+			          <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level == 1 && $restrict('edit')" @click="addOrEditParent('edit1', scope.row.categoryId)"></el-button>
+			          <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level == 2 && $restrict('edit')" @click="addOrEditChild('edit2', scope.row.categoryId)"></el-button>
+			          <el-popconfirm v-if="$restrict('del')" style="margin-left: 10px;" title="确定删除吗？" @confirm="handleDelete(scope.row.categoryId)" >
+			            <el-button slot="reference" size="mini" icon="el-icon-delete"></el-button>
+			          </el-popconfirm>
+			
+			        </template>
+			      </el-table-column>
+			    </el-table>
+			  </div>
+			</div>
+			<!-- 新增编辑 一级分类 -->
+			<div v-if="addParentFormVisible" class="app-container">
+				<el-form ref="addParentForm" :model="addParentForm" :rules="addParentFormRules" label-position="left" label-width="80px">
+					<el-row :gutter="20">
+						<el-col :span="6">
+							<el-form-item label="一级分类" prop="oneClassify">
+							  <el-input type="text" placeholder="请输入一级分类名称" v-model="addParentForm.oneClassify" maxlength="10" show-word-limit style="width: 250px;"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="状态" prop="status">
+							  <el-radio-group v-model="addParentForm.status">
+							    <el-radio :label="true">显示</el-radio>
+							    <el-radio :label="false">隐藏</el-radio>
+							  </el-radio-group>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="排序" prop="sort">
+							  <el-input placeholder="请输入排序" v-model.number="addParentForm.sort" style="width: 250px;"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="24">
+							<el-form-item label="分类图片" prop="imgUrl">
+							  <el-upload
+							    class="avatar-uploader"
+							    style="height:122px"
+							    :action="baseURL + 'common/upload'"
+							    :headers="myHeaders"
+							    :show-file-list="false"
+							    :on-success="uploadSuccess"
+							    :before-upload="beforeUpload">
+							    <img v-if="addParentForm.imgUrl" :src="addParentForm.imgUrl" class="avatar">
+							    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+							  </el-upload>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+				<div slot="footer" class="dialog-footer">
+				  <el-button @click="data.removeTab()">取 消</el-button>
+				  <el-button type="primary" @click="submitAddParentForm(data.removeTab)">确 定</el-button>
+				</div>
+			</div>
+			<!-- 新增编辑 二级分类 -->
+			<div v-if="addChildFormVisible" class="app-container">
+				<el-form ref="addChildForm" :model="addChildForm" :rules="addChildFormRules" label-position="left" label-width="80px">
+					<el-row :gutter="20">
+						<el-col :span="6">
+							<el-form-item label="一级分类" prop="oneClassify">
+							  <el-select v-model="addChildForm.oneClassify" placeholder="请选择一级分类" disabled style="width: 250px;">
+							    <el-option :label="item.name" :value="item.categoryId" v-for="(item, index) in classifyList" :key="index"></el-option>
+							  </el-select>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="二级分类" prop="twoClassify">
+							  <el-input type="text" placeholder="请输入二级分类名称" v-model="addChildForm.twoClassify" maxlength="10" show-word-limit style="width: 250px;"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="状态" prop="status">
+							  <el-radio-group v-model="addChildForm.status">
+							    <el-radio :label="true">显示</el-radio>
+							    <el-radio :label="false">隐藏</el-radio>
+							  </el-radio-group>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="排序" prop="sort">
+							  <el-input placeholder="请输入排序" v-model.number="addChildForm.sort" style="width: 250px;"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="24">
+							<el-form-item label="分类图片" prop="imgUrl">
+							  <el-upload
+							    class="avatar-uploader"
+							    style="height:122px"
+							    :action="baseURL + 'common/upload'"
+							    :headers="myHeaders"
+							    :show-file-list="false"
+							    :on-success="uploadSuccess"
+							    :before-upload="beforeUpload">
+							    <img v-if="addChildForm.imgUrl" :src="addChildForm.imgUrl" class="avatar">
+							    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+							  </el-upload>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+				<div slot="footer" class="dialog-footer">
+				  <el-button @click="data.removeTab()">取 消</el-button>
+				  <el-button type="primary" @click="submitAddChildForm(data.removeTab)">确 定</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -190,7 +210,8 @@ export default {
 
       orderMainType: ORDER_MAIN_TYPE,
       orderSmallType: [],
-
+	  formType: 'add',
+	  formVisible: false,
     }
   },
   created() {
@@ -216,32 +237,51 @@ export default {
       this.currentPage = 1;
       this.getList();
     },
-
     // 打开 新增编辑 一级分类
     addOrEditParent(type, cid) {
-      this.addParentFormType = type;
-      this.addParentFormVisible = true;
-      if(type == 'edit') {
-        this.editParentId = cid;
-        getClassifyDetail({categoryId: cid}).then(res => {
-          this.addParentForm = {
-            oneClassify: res.data.name,
-            status: res.data.status,
-            imgUrl: res.data.imgUrl,
-            sort: res.data.sortNum
-          }
-        })
-      }
+		this.$refs.tabPage.addTab({
+			// 对应显示的模块
+			activeKey: type,
+			// 唯一标识
+			key: type,
+			// 页签名称
+			label: ({ edit1: "编辑一级分类", add1: "添加一级分类" })[type],
+			// 打开时事件
+			triggerEvent: () => {
+				
+				this.$nextTick(()=>{
+					this.formType = type
+					this.formVisible = true
+					this.addParentFormType = type;
+					this.addParentFormVisible = true;
+					if(type == 'edit1'){
+						this.editParentId = cid;
+						getClassifyDetail({categoryId: cid}).then(res => {
+						  this.addParentForm = {
+						    oneClassify: res.data.name,
+						    status: res.data.status,
+						    imgUrl: res.data.imgUrl,
+						    sort: res.data.sortNum
+						  }
+						})
+					}
+				})
+			},
+			// 关闭时事件
+			closeEvent: () => {
+				this.cancelAddParentForm()
+			}
+		})
     },
 
     // 取消 新增编辑 一级分类
     cancelAddParentForm(){
       this.addParentFormVisible = false;
-      this.$refs.addParentForm.resetFields();
+      this.$refs?.addParentForm?.resetFields();
     },
 
     // 提交 一级分类
-    submitAddParentForm() {
+    submitAddParentForm(cancel) {
       this.$refs.addParentForm.validate((valid) => {
         if (valid) {
           let params = {
@@ -251,15 +291,17 @@ export default {
             status: this.addParentForm.status,
             sortNum: this.addParentForm.sort,
           }
-          if(this.addParentFormType == 'edit') {
+          if(this.addParentFormType == 'edit1') {
             params.categoryId = this.editParentId;
             editClassify(params).then(res => {
+				cancel('list')
               this.cancelAddParentForm();
               this.getList();
               this.$successMsg('编辑成功');
             })
           }else {
             addClassify(params).then(res => {
+				cancel('list')
               this.cancelAddParentForm();
               this.getList();
               this.$successMsg('添加成功');
@@ -286,39 +328,57 @@ export default {
 
     // 打开 新增编辑 二级分类
     addOrEditChild(type, cid) {
-      this.addChildFormType = type;
-      this.addChildFormVisible = true;
-      getClassifyList({name: '', type: 2}).then(res => {
-        this.classifyList = res.data;
-      })
-      
-      if(type == 'add') {
-        this.addChildForm.oneClassify = cid;
-      }
-
-      if(type == 'edit') {
-        this.editChildId = cid;
-        getClassifyDetail({categoryId: cid}).then(res => {
-          this.addChildForm = {
-            oneClassify: res.data.parentId,
-            twoClassify: res.data.name,
-            imgUrl: res.data.imgUrl,
-            status: res.data.status,
-            sort: res.data.sortNum
-          }
-          this.getSmallType();
-        })
-      }
+		this.$refs.tabPage.addTab({
+			// 对应显示的模块
+			activeKey: type,
+			// 唯一标识
+			key: type,
+			// 页签名称
+			label: ({ edit2: "编辑二级分类", add2: "添加二级分类" })[type],
+			// 打开时事件
+			triggerEvent: () => {
+				
+				this.$nextTick(()=>{
+					this.formType = type
+					this.formVisible = true
+					this.addChildFormType = type;
+					this.addChildFormVisible = true;
+					getClassifyList({name: '', type: 2}).then(res => {
+					  this.classifyList = res.data;
+					})
+					if(type == 'add2') {
+					  this.addChildForm.oneClassify = cid;
+					}
+					if(type == 'edit2'){
+						this.editChildId = cid;
+						getClassifyDetail({categoryId: cid}).then(res => {
+						  this.addChildForm = {
+						    oneClassify: res.data.parentId,
+						    twoClassify: res.data.name,
+						    imgUrl: res.data.imgUrl,
+						    status: res.data.status,
+						    sort: res.data.sortNum
+						  }
+						  this.getSmallType();
+						})
+					}
+				})
+			},
+			// 关闭时事件
+			closeEvent: () => {
+				this.cancelAddChildForm()
+			}
+		})
     },
 
     // 取消 新增编辑 二级分类
     cancelAddChildForm(){
       this.addChildFormVisible = false;
-      this.$refs.addChildForm.resetFields();
+      this.$refs?.addChildForm?.resetFields();
     },
 
     // 提交 二级分类
-    submitAddChildForm() {
+    submitAddChildForm(cancel) {
       this.$refs.addChildForm.validate((valid) => {
         if (valid) {
           let params = {}
@@ -332,6 +392,7 @@ export default {
               sortNum: this.addChildForm.sort
             }
             editClassify(params).then(res => {
+				cancel('list')
               this.cancelAddChildForm();
               this.getList();
               this.$successMsg('编辑成功');
@@ -348,6 +409,7 @@ export default {
               }]
             }
             addClassify(params).then(res => {
+				cancel('list')
               this.cancelAddChildForm();
               this.getList();
               this.$successMsg('添加成功');

src/views/mallManagement/configCenter/slideshowConfig/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: $route.meta.title+'-列表', 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>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -54,7 +57,9 @@ export default {
         appId: "",
         linkUrl: "",
       },
-      goodsList: []
+      goodsList: [],
+	  formType: 'add',
+	  formVisible: false,
     }
   },
   computed: {
@@ -65,7 +70,7 @@ export default {
 				[
 					this.optionsEvensAuth("add", {
 						click: () => {
-							this.addData()
+							this.openForm('add')
 						}
 					})
 				],
@@ -88,7 +93,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -98,22 +103,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 24,
-        isShow: true,
-        name: 'slot-component',
-        formItemAttributes: {
-          label: '封面图片',
-          prop: 'imgSrc',
-          rules: [...required]
-        },
-        render: (h, { props, onInput }) => {
-          var { value } = props
-          return (
-            <ImageUpload fileList={this.formData.imgSrc} uid="imgSrc_materials_drawing_images" limit={1} />
-          )
-        }
-      }, {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -123,7 +113,7 @@ export default {
           rules: []
         }
       }, {
-        md: 24,
+        md: 8,
         isShow: true,
         name: 'el-radio',
         options: [{ label: "商品链接", value: 1 }, { label: "凡科活动链接", value: 2 }, { label: "专区活动链接", value: 3 }],
@@ -140,7 +130,7 @@ export default {
           this.formData.linkUrl = ""
           // this.formData.goodsId = ""
           return [{
-            md: 24,
+            md: 6,
             isShow: true,
             name: 'el-select',
             options: this.goodsList,
@@ -154,7 +144,7 @@ export default {
         } else if (this.formData.type == 2) {
           this.formData.goodsId = ""
           return [{
-            md: 24,
+            md: 6,
             isShow: true,
             name: 'el-input',
             attributes: { placeholder: '请输入' },
@@ -164,7 +154,7 @@ export default {
               rules: []
             }
           }, {
-            md: 24,
+            md: 6,
             isShow: true,
             name: 'el-input',
             attributes: { placeholder: '请输入' },
@@ -179,7 +169,7 @@ export default {
           this.formData.linkUrl = ""
           // this.formData.goodsId = ""
           return [{
-            md: 24,
+            md: 6,
             isShow: true,
             name: 'el-select',
             options: [
@@ -206,6 +196,22 @@ export default {
         }
         return []
       })()
+	  , {
+	    md: 24,
+	    isShow: true,
+	    name: 'slot-component',
+	    formItemAttributes: {
+	      label: '封面图片',
+	      prop: 'imgSrc',
+	      rules: [...required]
+	    },
+	    render: (h, { props, onInput }) => {
+	      var { value } = props
+	      return (
+	        <ImageUpload fileList={this.formData.imgSrc} uid="imgSrc_materials_drawing_images" limit={1} />
+	      )
+	    }
+	  }
       ]
     }
   },
@@ -228,13 +234,7 @@ export default {
 		  edit: {
 			btnType: 'text',
 		    click: ({ row, index, column }) => {
-		      getBannerDetail({ id: row.id }).then(res => {
-		        Object.assign(this.formData, res.data, {
-		          imgSrc: res.data.imgSrc ? [{ url: res.data.imgSrc }] : [],
-		        })
-		        this.formDialogType = 1
-		        this.openForm()
-		      })
+				this.openForm('edit',row.id)
 		    }
 		  },
 		  del: {
@@ -264,40 +264,68 @@ export default {
 		  },
 		})
     },
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
-      getGoodsList({
-        pageNum: 1,
-        pageSize: -1
-      }).then(res => {
-        this.goodsList = res.data.records.map(item => ({
-          value: item.goodsId,
-          label: item.goodsName
-        }));
-        this.formDialog = true;
-      })
-    },
-    formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
-      this.$data.formData = this.$options.data().formData
-      this.formDialog = false
-    },
-    formConfirm() {
-      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
-        if (valid) {
-          ([addBanner, editBanner][this.formDialogType])({
-            ...this.formData,
-            imgSrc: this.formData.imgSrc.map(item => item.url).join(","),
-          }).then(res => {
-            this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
-            this.formCancel()
-            this.$refs.pageRef.refreshList()
-          })
-        }
-      })
+	// 取消 新增编辑
+	formCancel() {
+	  this.formVisible = false
+	  this.$refs?.formRef?.resetFields()
+	  this.$data.formData = this.$options.data().formData
+	},
+	// 打开 新增编辑 网点表单
+	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 {
+				this.formDialogType = 1
+	          getBannerDetail({ id }).then(res => {
+	            Object.assign(this.formData, res.data, {
+	              imgSrc: res.data.imgSrc ? [{ url: res.data.imgSrc }] : [],
+	            })
+	            getGoodsList({
+	              pageNum: 1,
+	              pageSize: -1
+	            }).then(res => {
+	              this.goodsList = res.data.records.map(item => ({
+	                value: item.goodsId,
+	                label: item.goodsName
+	              }));
+	            })
+	          })
+	        }
+	      })
+	    },
+	    // 关闭时事件
+	    closeEvent: () => {
+			console.log(111)
+	      this.formCancel()
+	    }
+	  })
+	},
+    formConfirm(cancel) {
+		this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
+			if (valid) {
+				([addBanner, editBanner][this.formDialogType])({
+					...this.formData,
+					imgSrc: this.formData.imgSrc.map(item => item.url).join(","),
+				}).then(res => {
+					this.$message({ type: 'success', message: `${({ edit: "编辑", add: "新增" })[this.formType]}成功!` })
+					cancel('list')
+					this.$refs.pageRef.refreshList()
+				})
+			}
+		})
     },
     batchDelete() {
       if (this.recordSelected && this.recordSelected.length > 0) {
@@ -323,4 +351,13 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+	
+</style>
+<style>
+	.dialog-footer{
+		padding: 0 30px;
+		display: flex;
+		justify-content: flex-end;
+	}
+</style>

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: $route.meta.title+'-列表', 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.formVisible = false
+      this.$refs?.formRef?.resetFields()
       this.$data.formData = this.$options.data().formData
-      this.formDialog = false
     },
-    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/goods/classify_index/index.vue

@@ -1,167 +1,198 @@
 <template>
-  <div class="app-container">
-    <div class="mymain-container">
-      <div class="btn-group clearfix">
-        <div class="fl">
-          <el-button v-if="$restrict('add')" size="small" type="primary" icon="el-icon-plus" @click="addOrEditParent('add')">添加分类</el-button>
-        </div>
-        <div class="fr">
-          <el-input placeholder="请输入分类名称进行搜索" v-model="screenForm.keyword" size="small" style="width: 240px;" clearable>
-            <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
-          </el-input>
-        </div>
-      </div>
-
-      <div class="table">
-        <el-table :data="dataList" row-key="categoryId" border default-expand-all :tree-props="{children: 'children'}">
-          <el-table-column prop="name" label="分类名称" min-width="150"></el-table-column>
-          <el-table-column align="center" label="分类图片" prop="imgUrl" width="80">
-            <template slot-scope="scope">
-              <el-image style="width: 40px; height: 40px; display: block; margin: 0 auto;" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]" fit="cover">
-                <div slot="error" style="height: 100%;font-size: 40px;">
-                  <i class="el-icon-picture-outline"></i>
-                </div>
-              </el-image>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" prop="createTime" label="创建时间" min-width="160"></el-table-column>
-          <!-- <el-table-column align="center" prop="goodsNum" label="商品数"></el-table-column> -->
-          <el-table-column align="center" prop="sortNum" label="排序"></el-table-column>
-          <el-table-column align="center" prop="companyName" label="商户" min-width="120"></el-table-column>
-          <el-table-column align="center" label="状态" class-name="status-col">
-            <template slot-scope="scope">
-              <el-tag :type="scope.row.status ? 'success':'danger'">{{ scope.row.status ? '显示':'隐藏' }}</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column align="right" label="操作" width="150" fixed="right">
-            <template slot-scope="scope">
-              <el-button type="primary" size="mini" icon="el-icon-plus" v-if="scope.row.level == 1 && $restrict('add')" @click="addOrEditChild('add', scope.row.categoryId)"></el-button>
-              <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level == 1 && $restrict('edit')" @click="addOrEditParent('edit', scope.row.categoryId)"></el-button>
-              <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level == 2 && $restrict('edit')" @click="addOrEditChild('edit', scope.row.categoryId)"></el-button>
-              <el-popconfirm v-if="$restrict('del')" style="margin-left: 10px;" title="确定删除吗？" @confirm="handleDelete(scope.row.categoryId)" >
-                <el-button slot="reference" size="mini" icon="el-icon-delete"></el-button>
-              </el-popconfirm>
-
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </div>
-
-    <!-- 新增编辑 一级分类 -->
-    <el-dialog :title="addParentFormType == 'add' ? '添加一级分类':'编辑一级分类'" :visible.sync="addParentFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
-      <el-form ref="addParentForm" :model="addParentForm" :rules="addParentFormRules" label-position="left" label-width="80px">
-        <el-form-item label="一级分类" prop="oneClassify">
-          <el-input type="text" placeholder="请输入一级分类名称" v-model="addParentForm.oneClassify" maxlength="10" show-word-limit style="width: 250px;"></el-input>
-        </el-form-item>
-        <el-form-item label="分类图片" prop="imgUrl">
-          <el-upload
-            class="avatar-uploader"
-            style="height:122px"
-            :action="baseURL + 'common/upload'"
-            :headers="myHeaders"
-            :show-file-list="false"
-            :on-success="uploadSuccess"
-            :before-upload="beforeUpload">
-            <img v-if="addParentForm.imgUrl" :src="addParentForm.imgUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="税务编号" prop="taxNumber">
-          <el-input placeholder="请输入税务编号" v-model="addParentForm.taxNumber" style="width: 250px;"></el-input>
-        </el-form-item>
-        <el-form-item label="税率" prop="taxPercent">
-          <el-input placeholder="请输入税率" v-model="addParentForm.taxPercent" style="width: 250px;"></el-input>
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="addParentForm.status">
-            <el-radio :label="true">显示</el-radio>
-            <el-radio :label="false">隐藏</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="排序" prop="sort">
-          <el-input placeholder="请输入排序" v-model.number="addParentForm.sort" style="width: 250px;"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelAddParentForm">取 消</el-button>
-        <el-button type="primary" @click="submitAddParentForm">确 定</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 新增编辑 二级分类 -->
-    <el-dialog :title="addChildFormType == 'add' ? '添加二级分类':'编辑二级分类'" :visible.sync="addChildFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
-      <el-form ref="addChildForm" :model="addChildForm" :rules="addChildFormRules" label-position="left" label-width="80px">
-        <el-form-item label="一级分类" prop="oneClassify">
-          <el-select v-model="addChildForm.oneClassify" placeholder="请选择一级分类" disabled style="width: 250px;">
-            <el-option :label="item.name" :value="item.categoryId" v-for="(item, index) in classifyList" :key="index"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="二级分类" prop="twoClassify">
-          <el-input type="text" placeholder="请输入二级分类名称" v-model="addChildForm.twoClassify" maxlength="10" show-word-limit style="width: 250px;"></el-input>
-        </el-form-item>
-
-        <el-form-item label="工单大类" prop="main">
-          <el-select v-model="addChildForm.main" value-key="categoryId" placeholder="请选择工单大类" style="width: 250px;" @change="changeOrderType">
-            <el-option :label="item.name" :value="item" v-for="(item, index) in orderMainType" :key="index">
-             <!-- <span style="color: #8492a6">{{ item.number }}</span>
-              <span style="margin-left: 10px;">{{ item.name }}</span> -->
-            </el-option>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="工单小类" prop="smallType">
-          <el-select v-model="addChildForm.small" value-key="categoryId" placeholder="请选择工单小类" style="width: 250px;" :disabled="!addChildForm.main.name">
-            <el-option :label="item.name" :value="item" v-for="(item, index) in orderSmallType" :key="index">
-             <!-- <span style="color: #8492a6">{{ item.id }}</span>
-              <span style="margin-left: 10px;">{{ item.name }}</span> -->
-            </el-option>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="工单类型" prop="workOrderType">
-          <el-radio-group v-model="addChildForm.workOrderType">
-            <el-radio :label="'INSTALL'">安装</el-radio>
-            <el-radio :label="'REPAIR'">维修</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="分类图片" prop="imgUrl">
-          <el-upload
-            class="avatar-uploader"
-            style="height:122px"
-            :action="baseURL + 'common/upload'"
-            :headers="myHeaders"
-            :show-file-list="false"
-            :on-success="uploadSuccess"
-            :before-upload="beforeUpload">
-            <img v-if="addChildForm.imgUrl" :src="addChildForm.imgUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="税务编号" prop="taxNumber">
-          <el-input placeholder="请输入税务编号" v-model="addChildForm.taxNumber" style="width: 250px;" disabled></el-input>
-        </el-form-item>
-        <el-form-item label="税率" prop="taxPercent">
-          <el-input placeholder="请输入税率" v-model="addChildForm.taxPercent" style="width: 250px;" disabled></el-input>
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="addChildForm.status">
-            <el-radio :label="true">显示</el-radio>
-            <el-radio :label="false">隐藏</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="排序" prop="sort">
-          <el-input placeholder="请输入排序" v-model.number="addChildForm.sort" style="width: 250px;"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelAddChildForm">取 消</el-button>
-        <el-button type="primary" @click="submitAddChildForm">确 定</el-button>
-      </div>
-    </el-dialog>
-
-  </div>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<div v-if="activeKey == 'list'" class="app-container">
+				<div class="btn-group clearfix">
+				  <div class="fl">
+				    <el-button v-if="$restrict('add')" size="small" type="primary" icon="el-icon-plus" @click="addOrEditParent('add1')">添加分类</el-button>
+				  </div>
+				  <div class="fr">
+				    <el-input placeholder="请输入分类名称进行搜索" v-model="screenForm.keyword" size="small" style="width: 240px;" clearable>
+				      <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
+				    </el-input>
+				  </div>
+				</div>
+				
+				<div class="table">
+				  <el-table :data="dataList" row-key="categoryId" border default-expand-all :tree-props="{children: 'children'}">
+				    <el-table-column prop="name" label="分类名称" min-width="150"></el-table-column>
+				    <el-table-column align="center" label="分类图片" prop="imgUrl" width="80">
+				      <template slot-scope="scope">
+				        <el-image style="width: 40px; height: 40px; display: block; margin: 0 auto;" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]" fit="cover">
+				          <div slot="error" style="height: 100%;font-size: 40px;">
+				            <i class="el-icon-picture-outline"></i>
+				          </div>
+				        </el-image>
+				      </template>
+				    </el-table-column>
+				    <el-table-column align="center" prop="createTime" label="创建时间" min-width="160"></el-table-column>
+				    <!-- <el-table-column align="center" prop="goodsNum" label="商品数"></el-table-column> -->
+				    <el-table-column align="center" prop="sortNum" label="排序"></el-table-column>
+				    <el-table-column align="center" prop="companyName" label="商户" min-width="120"></el-table-column>
+				    <el-table-column align="center" label="状态" class-name="status-col">
+				      <template slot-scope="scope">
+				        <el-tag :type="scope.row.status ? 'success':'danger'">{{ scope.row.status ? '显示':'隐藏' }}</el-tag>
+				      </template>
+				    </el-table-column>
+				    <el-table-column align="right" label="操作" width="150" fixed="right">
+				      <template slot-scope="scope">
+				        <el-button type="primary" size="mini" icon="el-icon-plus" v-if="scope.row.level == 1 && $restrict('add')" @click="addOrEditChild('add2', scope.row.categoryId)"></el-button>
+				        <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level == 1 && $restrict('edit')" @click="addOrEditParent('edit1', scope.row.categoryId)"></el-button>
+				        <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level == 2 && $restrict('edit')" @click="addOrEditChild('edit2', scope.row.categoryId)"></el-button>
+				        <el-popconfirm v-if="$restrict('del')" style="margin-left: 10px;" title="确定删除吗？" @confirm="handleDelete(scope.row.categoryId)" >
+				          <el-button slot="reference" size="mini" icon="el-icon-delete"></el-button>
+				        </el-popconfirm>
+				
+				      </template>
+				    </el-table-column>
+				  </el-table>
+				</div>
+			</div>
+			<!-- 新增编辑 一级分类 -->
+			<div v-if="addParentFormVisible" class="app-container">
+				<el-form ref="addParentForm" :model="addParentForm" :rules="addParentFormRules" label-position="left" label-width="80px">
+					<el-row :gutter="20">
+						<el-col :span="6">
+							<el-form-item label="一级分类" prop="oneClassify">
+							  <el-input type="text" placeholder="请输入一级分类名称" v-model="addParentForm.oneClassify" maxlength="10" show-word-limit style="width: 250px;"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="税务编号" prop="taxNumber">
+							  <el-input placeholder="请输入税务编号" v-model="addParentForm.taxNumber" style="width: 250px;"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="税率" prop="taxPercent">
+							  <el-input placeholder="请输入税率" v-model="addParentForm.taxPercent" style="width: 250px;"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="状态" prop="status">
+							  <el-radio-group v-model="addParentForm.status">
+							    <el-radio :label="true">显示</el-radio>
+							    <el-radio :label="false">隐藏</el-radio>
+							  </el-radio-group>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="排序" prop="sort">
+							  <el-input placeholder="请输入排序" v-model.number="addParentForm.sort" style="width: 250px;"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="24">
+							<el-form-item label="分类图片" prop="imgUrl">
+							  <el-upload
+							    class="avatar-uploader"
+							    style="height:122px"
+							    :action="baseURL + 'common/upload'"
+							    :headers="myHeaders"
+							    :show-file-list="false"
+							    :on-success="uploadSuccess"
+							    :before-upload="beforeUpload">
+							    <img v-if="addParentForm.imgUrl" :src="addParentForm.imgUrl" class="avatar">
+							    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+							  </el-upload>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+				<div slot="footer" class="dialog-footer">
+				  <el-button @click="data.removeTab()">取 消</el-button>
+				  <el-button type="primary" @click="submitAddParentForm(data.removeTab)">确 定</el-button>
+				</div>
+			</div>
+			<!-- 新增编辑 二级分类 -->
+			<div v-if="addChildFormVisible" class="app-container">
+				<el-form ref="addChildForm" :model="addChildForm" :rules="addChildFormRules" label-position="left" label-width="80px">
+					<el-row :gutter="20">
+						<el-col :span="6">
+							<el-form-item label="一级分类" prop="oneClassify">
+							  <el-select v-model="addChildForm.oneClassify" placeholder="请选择一级分类" disabled style="width: 250px;">
+							    <el-option :label="item.name" :value="item.categoryId" v-for="(item, index) in classifyList" :key="index"></el-option>
+							  </el-select>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="二级分类" prop="twoClassify">
+							  <el-input type="text" placeholder="请输入二级分类名称" v-model="addChildForm.twoClassify" maxlength="10" show-word-limit style="width: 250px;"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="工单大类" prop="main">
+							  <el-select v-model="addChildForm.main" value-key="categoryId" placeholder="请选择工单大类" style="width: 250px;" @change="changeOrderType">
+							    <el-option :label="item.name" :value="item" v-for="(item, index) in orderMainType" :key="index">
+							     <!-- <span style="color: #8492a6">{{ item.number }}</span>
+							      <span style="margin-left: 10px;">{{ item.name }}</span> -->
+							    </el-option>
+							  </el-select>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="工单小类" prop="smallType">
+							  <el-select v-model="addChildForm.small" value-key="categoryId" placeholder="请选择工单小类" style="width: 250px;" :disabled="!addChildForm.main.name">
+							    <el-option :label="item.name" :value="item" v-for="(item, index) in orderSmallType" :key="index">
+							     <!-- <span style="color: #8492a6">{{ item.id }}</span>
+							      <span style="margin-left: 10px;">{{ item.name }}</span> -->
+							    </el-option>
+							  </el-select>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="工单类型" prop="workOrderType">
+							  <el-radio-group v-model="addChildForm.workOrderType">
+							    <el-radio :label="'INSTALL'">安装</el-radio>
+							    <el-radio :label="'REPAIR'">维修</el-radio>
+							  </el-radio-group>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="税务编号" prop="taxNumber">
+							  <el-input placeholder="请输入税务编号" v-model="addChildForm.taxNumber" style="width: 250px;" disabled></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="税率" prop="taxPercent">
+							  <el-input placeholder="请输入税率" v-model="addChildForm.taxPercent" style="width: 250px;" disabled></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="状态" prop="status">
+							  <el-radio-group v-model="addChildForm.status">
+							    <el-radio :label="true">显示</el-radio>
+							    <el-radio :label="false">隐藏</el-radio>
+							  </el-radio-group>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="排序" prop="sort">
+							  <el-input placeholder="请输入排序" v-model.number="addChildForm.sort" style="width: 250px;"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="24">
+							<el-form-item label="分类图片" prop="imgUrl">
+							  <el-upload
+							    class="avatar-uploader"
+							    style="height:122px"
+							    :action="baseURL + 'common/upload'"
+							    :headers="myHeaders"
+							    :show-file-list="false"
+							    :on-success="uploadSuccess"
+							    :before-upload="beforeUpload">
+							    <img v-if="addChildForm.imgUrl" :src="addChildForm.imgUrl" class="avatar">
+							    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+							  </el-upload>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+				<div slot="footer" class="dialog-footer">
+				  <el-button @click="data.removeTab()">取 消</el-button>
+				  <el-button type="primary" @click="submitAddChildForm(data.removeTab)">确 定</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -183,7 +214,7 @@ export default {
       },
 
       editParentId:  null,
-      addParentFormType: 'add',
+      addParentFormType: 'add1',
       addParentFormVisible: false,
       addParentForm: {
         oneClassify: '',
@@ -238,7 +269,8 @@ export default {
       // orderMainType: ORDER_MAIN_TYPE,
 			orderMainType: [],
       orderSmallType: [],
-
+			formType: 'add',
+			formVisible: false,
     }
   },
   created() {
@@ -273,31 +305,51 @@ export default {
 
     // 打开 新增编辑 一级分类
     addOrEditParent(type, cid) {
-      this.addParentFormType = type;
-      this.addParentFormVisible = true;
-      if(type == 'edit') {
-        this.editParentId = cid;
-        getClassifyDetail({categoryId: cid}).then(res => {
-          this.addParentForm = {
-            oneClassify: res.data.name,
-            status: res.data.status,
-            imgUrl: res.data.imgUrl,
-            taxNumber: res.data.taxNumber,
-            taxPercent: res.data.taxPercent,
-            sort: res.data.sortNum
-          }
-        })
-      }
+		this.$refs.tabPage.addTab({
+			// 对应显示的模块
+			activeKey: type,
+			// 唯一标识
+			key: type,
+			// 页签名称
+			label: ({ edit1: "编辑一级分类", add1: "添加一级分类" })[type],
+			// 打开时事件
+			triggerEvent: () => {
+				
+				this.$nextTick(()=>{
+					this.formType = type
+					this.formVisible = true
+					this.addParentFormType = type;
+					this.addParentFormVisible = true;
+					if(type == 'edit1'){
+						this.editParentId = cid;
+						getClassifyDetail({categoryId: cid}).then(res => {
+						  this.addParentForm = {
+						    oneClassify: res.data.name,
+						    status: res.data.status,
+						    imgUrl: res.data.imgUrl,
+						    taxNumber: res.data.taxNumber,
+						    taxPercent: res.data.taxPercent,
+						    sort: res.data.sortNum
+						  }
+						})
+					}
+				})
+			},
+			// 关闭时事件
+			closeEvent: () => {
+				this.cancelAddParentForm()
+			}
+		})
     },
 
     // 取消 新增编辑 一级分类
     cancelAddParentForm(){
       this.addParentFormVisible = false;
-      this.$refs.addParentForm.resetFields();
+      this.$refs?.addParentForm?.resetFields();
     },
 
     // 提交 一级分类
-    submitAddParentForm() {
+    submitAddParentForm(cancel) {
       this.$refs.addParentForm.validate((valid) => {
         if (valid) {
           let params = {
@@ -308,15 +360,17 @@ export default {
             status: this.addParentForm.status,
             sortNum: this.addParentForm.sort,
           }
-          if(this.addParentFormType == 'edit') {
+          if(this.addParentFormType == 'edit1') {
             params.categoryId = this.editParentId;
             editClassify(params).then(res => {
+				cancel('list')
               this.cancelAddParentForm();
               this.getList();
               this.$successMsg('编辑成功');
             })
           }else {
             addClassify(params).then(res => {
+				cancel('list')
               this.cancelAddParentForm();
               this.getList();
               this.$successMsg('添加成功');
@@ -344,54 +398,72 @@ export default {
 
     // 打开 新增编辑 二级分类
     addOrEditChild(type, cid) {
-	  this.getMainList()
-      this.addChildFormType = type;
-      this.addChildFormVisible = true;
-      getClassifyList({name: ''}).then(res => {
-        this.classifyList = res.data;
-      })
-      
-      if(type == 'add') {
-        this.addChildForm.oneClassify = cid;
-        let item = this.dataList[this.$findElem(this.dataList, 'categoryId', cid)];
-        this.addChildForm.taxNumber = item.taxNumber;
-        this.addChildForm.taxPercent = item.taxPercent;
-      }
-
-      if(type == 'edit') {
-        this.editChildId = cid;
-		getClassifyDetail({categoryId: cid}).then(res => {
-			console.log(this.orderMainType,'获取大类')
-			this.orderMainType.forEach(item =>{
-				if(item.categoryId == res.data.mainNumber){
-					this.orderSmallType = item.children
-				}
-			})
-			this.addChildForm = {
-				oneClassify: res.data.parentId,
-				twoClassify: res.data.name,
-				main: {name: res.data.mainName,categoryId: res.data.mainNumber},
-				small: {name: res.data.smallName,categoryId: res.data.smallNumber},
-				workOrderType: res.data.workOrderType,
-				imgUrl: res.data.imgUrl,
-				taxNumber: res.data.taxNumber,
-				taxPercent: res.data.taxPercent,
-				status: res.data.status,
-				sort: res.data.sortNum
+		this.$refs.tabPage.addTab({
+			// 对应显示的模块
+			activeKey: type,
+			// 唯一标识
+			key: type,
+			// 页签名称
+			label: ({ edit2: "编辑二级分类", add2: "添加二级分类" })[type],
+			// 打开时事件
+			triggerEvent: () => {
+				
+				this.$nextTick(()=>{
+					this.formType = type
+					this.formVisible = true
+					this.getMainList()
+					this.addChildFormType = type;
+					this.addChildFormVisible = true;
+					getClassifyList({name: ''}).then(res => {
+					  this.classifyList = res.data;
+					})
+					if(type == 'add2') {
+					  this.addChildForm.oneClassify = cid;
+					  let item = this.dataList[this.$findElem(this.dataList, 'categoryId', cid)];
+					  this.addChildForm.taxNumber = item.taxNumber;
+					  this.addChildForm.taxPercent = item.taxPercent;
+					}
+					if(type == 'edit2'){
+						this.editChildId = cid;
+						getClassifyDetail({categoryId: cid}).then(res => {
+							console.log(this.orderMainType,'获取大类')
+							this.orderMainType.forEach(item =>{
+								if(item.categoryId == res.data.mainNumber){
+									this.orderSmallType = item.children
+								}
+							})
+							this.addChildForm = {
+								oneClassify: res.data.parentId,
+								twoClassify: res.data.name,
+								main: {name: res.data.mainName,categoryId: res.data.mainNumber},
+								small: {name: res.data.smallName,categoryId: res.data.smallNumber},
+								workOrderType: res.data.workOrderType,
+								imgUrl: res.data.imgUrl,
+								taxNumber: res.data.taxNumber,
+								taxPercent: res.data.taxPercent,
+								status: res.data.status,
+								sort: res.data.sortNum
+							}
+							// this.getSmallType();
+						})
+					}
+				})
+			},
+			// 关闭时事件
+			closeEvent: () => {
+				this.cancelAddChildForm()
 			}
-			// this.getSmallType();
 		})
-      }
     },
 
     // 取消 新增编辑 二级分类
     cancelAddChildForm(){
       this.addChildFormVisible = false;
-      this.$refs.addChildForm.resetFields();
+      this.$refs?.addChildForm?.resetFields();
     },
 
     // 提交 二级分类
-    submitAddChildForm() {
+    submitAddChildForm(cancel) {
       this.$refs.addChildForm.validate((valid) => {
         if (valid) {
           // let index = this.$findElem(ORDER_MAIN_TYPE, 'number', this.addChildForm.orderType);
@@ -401,7 +473,7 @@ export default {
           // let smallName = index2 >= 0 ? this.orderSmallType[index2].name : '';
           
           let params = {}
-          if(this.addChildFormType == 'edit') {
+          if(this.addChildFormType == 'edit2') {
             params = {
                 categoryId: this.editChildId,
                 name: this.addChildForm.twoClassify,
@@ -417,6 +489,7 @@ export default {
                 sortNum: this.addChildForm.sort
             }
             editClassify(params).then(res => {
+			  cancel('list')
               this.cancelAddChildForm();
               this.getList();
               this.$successMsg('编辑成功');
@@ -438,6 +511,7 @@ export default {
               }]
             }
             addClassify(params).then(res => {
+			  cancel('list')
               this.cancelAddChildForm();
               this.getList();
               this.$successMsg('添加成功');

src/views/mallManagement/goods/newclassify_index/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" :operationColumnWidth="160">
-    <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: $route.meta.title+'-列表', 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" :operationColumnWidth="160">
+			</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>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -57,6 +60,8 @@ export default {
         type: '',
         sortNum: '',
       },
+			formType: 'add',
+			formVisible: false,
     }
   },
   computed: {
@@ -67,7 +72,7 @@ export default {
 				[
 					this.optionsEvensAuth("add", {
 						click: () => {
-							this.addData()
+							this.openForm('add')
 						}
 					})
 				]
@@ -80,7 +85,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -90,7 +95,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -101,7 +106,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-radio',
         options: [
@@ -115,7 +120,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -157,11 +162,7 @@ export default {
 			edit: {  
 				btnType: 'text',
 				click: ({ row, index, column }) => {
-					getNewclassifyDetail({ newsCategoryId: row.goodsNewsCategoryId }).then(res => {
-						Object.assign(this.formData, res.data)
-						this.formDialogType = 1
-						this.openForm()
-					})
+					this.openForm('edit',row.goodsNewsCategoryId)
 				}
 			},
 			del: {
@@ -194,24 +195,47 @@ export default {
 			},
 		})
 	},
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
-      this.formDialog = true;
+    openForm(type, newsCategoryId) {
+      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
+      				getNewclassifyDetail({ newsCategoryId  }).then(res => {
+      					Object.assign(this.formData, res.data)
+      				})
+      			}
+      		})
+      	},
+      	// 关闭时事件
+      	closeEvent: () => {
+      	
+      	}
+      })
     },
     formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.formVisible = false
+      this.$refs?.formRef?.resetFields()
       this.$data.formData = this.$options.data().formData
-      this.formDialog = false
     },
-    formConfirm() {
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           ([addNewclassify, editNewclassifyDetail][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/order/order_refund/index.vue

@@ -1,276 +1,281 @@
 <template>
-  <div class="app-container mod-order-order">
-    <!-- 筛选条件 -->
-    <div class="screen-container">
-      <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
-        <el-row :gutter="20">
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="订单号" prop="orderId">
-              <el-input v-model="screenForm.orderId" placeholder="请输入订单号"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="售后编号" prop="orderRefundId">
-              <el-input v-model="screenForm.orderRefundId" placeholder="请输入售后编号"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="会员昵称" prop="userName">
-              <el-input v-model="screenForm.userName" placeholder="请输入会员昵称"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="手机号" prop="phone">
-              <el-input v-model="screenForm.phone" placeholder="请输入手机号"></el-input>
-            </el-form-item>
-          </el-col>
-
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="网点名称" prop="websitId">
-              <el-select v-model="screenForm.websitId" placeholder="全部" filterable>
-                <el-option label="全部" value=""></el-option>
-                <el-option :label="item.name" :value="item.id" v-for="(item, index) in websiteList" :key="index"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-
-          <!--          <el-col :xs="24" :sm="12" :lg="6">-->
-          <!--            <el-form-item label="当前状态" prop="orderStatus">-->
-          <!--              <el-select v-model="screenForm.orderStatus" placeholder="全部">-->
-          <!--                <el-option label="全部" value=""></el-option>-->
-          <!--                <el-option :label="item.label" :value="item.value" v-for="(item, index) in screen_status" :key="index"></el-option>-->
-          <!--              </el-select>-->
-          <!--            </el-form-item>-->
-          <!--          </el-col>-->
-
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="申请时间" prop="createDate">
-              <el-date-picker
-                v-model="screenForm.createDate"
-                type="datetimerange"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="处理时间" prop="examineDate">
-              <el-date-picker
-                v-model="screenForm.examineDate"
-                type="datetimerange"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-
-          <el-col :xs="24" :sm="12" :lg="6" class="tr">
-            <el-form-item label="">
-              <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
-              <el-button size="small" @click="resetScreenForm">清空</el-button>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-    </div>
-
-    <div class="tabs-container order-tabs-container clearfix">
-      <div class="fl">
-        <el-tabs v-model="tabCurrent" type="card" @tab-click="changeTabs">
-          <el-tab-pane label="全部" name="ALL"></el-tab-pane>
-          <el-tab-pane label="待商家处理" name="DSJCL"></el-tab-pane>
-          <el-tab-pane label="待买家处理" name="DMJCL"></el-tab-pane>
-          <el-tab-pane label="待商家收货" name="DSJSH"></el-tab-pane>
-          <el-tab-pane label="已完成" name="OVER"></el-tab-pane>
-        </el-tabs>
-      </div>
-      <div class="fr">
-        <el-button v-if="$restrict('exp')" size="small" type="primary" @click="handleExport">导出报表</el-button>
-      </div>
-    </div>
-    <div class="order-main-container">
-      <div class="table-top">
-        <el-row style="width:100%">
-          <el-col :span="6"><span class="item product">商品信息</span></el-col>
-          <el-col :span="3" style="text-align: right"><span class="item">单价(元)/数量</span></el-col>
-          <el-col :span="3" style="text-align: center"><span class="item">买家信息</span></el-col>
-          <el-col :span="3" style="text-align: center"><span class="item">订单金额</span></el-col>
-          <el-col :span="3" style="text-align: center"><span class="item">退款金额</span></el-col>
-          <el-col :span="3" style="text-align: center"><span class="item">维权类型/状态</span></el-col>
-          <el-col :span="3" style="text-align: center"><span class="item">操作</span></el-col>
-        </el-row>
-      </div>
-      <div class="order-item" v-for="(order, index) in dataList" :key="order.orderRefundId">
-        <div class="order-top">
-          <el-row>
-            <el-col :xs="24" :sm="24" :lg="20">
-              <span><b>售后编号</b>：{{order.orderRefundId}}</span>
-              <span><b>申请时间</b>：{{order.createTime}}</span>
-              <span><b>商户</b>：{{order.companyWechatName || '无'}}</span>
-              <span><b>发货状态</b>：{{order.logisticsNo ? '已发货' : '未发货'}}</span>
-            </el-col>
-            <el-col :xs="24" :sm="24" :lg="4" style="text-align: right;">
-              <el-link type="primary" v-if="$restrict('orderNote')" :underline="false" @click="showRemark(order.orderRefundId, order.remark)">订单备注</el-link>
-              <el-link type="primary" v-if="$restrict('detail')" :underline="false" @click="showDetail(order.orderRefundId)">查看详情</el-link>
-              <!-- <el-link type="primary" :underline="false" @click="queryWorkOrder(order.orderId)">订单工单</el-link> -->
-            </el-col>
-          </el-row>
-        </div>
-        <div class="order-content">
-          <el-row style="width:100%">
-            <el-col :span="9" style="height: 100%;">
-              <div class="col-item-pro">
-                <div v-if="order.examineStatus === 'FAIL'">
-                  <div v-for="orderItem in order.orderDetails" :key="orderItem.orderDetailId">
-                    <div class="pro-item">
-                      <div class="left">
-                        <div class="image">
-                          <img :src="orderItem.imgUrl" style="height:80px;width: 80px;">
-                        </div>
-                        <div class="main">
-                          <span>{{orderItem.goodsName}}</span>
-                          <span class="spec">{{orderItem.goodsSpecName}}-{{orderItem.goodsSpecValue}}</span>
-                        </div>
-                      </div>
-                      <div class="right">
-                        <span>￥{{orderItem.price}}</span>
-                        <span>x{{orderItem.num}}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div v-else>
-                  <div v-for="orderItem in order.orderDetails" :key="orderItem.orderDetailId">
-                    <div class="pro-item" v-if="orderItem.refund">
-                      <div class="left">
-                        <div class="image">
-                          <img :src="orderItem.imgUrl" style="height:80px;width: 80px;">
-                        </div>
-                        <div class="main">
-                          <span>{{orderItem.goodsName}}</span>
-                          <span class="spec" v-if="orderItem.goodsSpecName === '默认' && orderItem.goodsSpecValue === '默认'">默认</span>
-                          <span class="spec" v-else>{{orderItem.goodsSpecName}}-{{orderItem.goodsSpecValue}}</span>
-                        </div>
-                      </div>
-                      <div class="right">
-                        <span>￥{{orderItem.price}}</span>
-                        <span>x{{orderItem.refundNum}}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </el-col>
-            <el-col :span="3" style="height: 100%;">
-              <div class="col-item">
-                <div>{{ order.userName }}</div>
-                <div>{{ order.phone }}</div>
-              </div>
-            </el-col>
-            <el-col :span="3" style="height: 100%;">
-              <div class="col-item">
-                <div class="totalprice">￥{{ order.payAmount }}</div>
-              </div>
-            </el-col>
-            <el-col :span="3" style="height: 100%;">
-              <div class="col-item">
-                <div class="totalprice">￥{{ order.refundAmount }}</div>
-              </div>
-            </el-col>
-            <el-col :span="3" style="height: 100%;">
-              <div class="col-item">
-                <div>{{order.refundType | REFUND_CURRENT_TYPE_FILTER}}</div>
-                <div>{{ order.orderStatus | ORDER_REFUND_CURRENT_STATUS_FILTER }}</div>
-              </div>
-            </el-col>
-            <el-col :span="3" style="height: 100%;">
-              <div class="col-item">
-                <div class="operate" v-if="order.orderStatus === 'DSJCL'">
-                  <div>
-                    <el-button v-if="$restrict('agree')" slot="reference" type="text" size="small" @click="changeExamineStatus(order.orderRefundId,'OK')">同意</el-button>
-                  </div>
-                  <div>
-                    <el-button v-if="$restrict('reject')" slot="reference" type="text" size="small" @click="changeExamineStatus(order.orderRefundId,'FAIL')">拒绝</el-button>
-                  </div>
-                  <div>
-                    <!-- toWorkOrderDetail(order.orderId) -->
-                    <el-button type="text" size="small" v-if="order.toWorkOrder && $restrict('workOrder_detail')" @click="queryWorkOrder(order.orderId)">查看工单</el-button>
-                  </div>
-                </div>
-                <div class="operate" v-if="order.orderStatus === 'DSJSH'">
-                  <div v-if="$restrict('confirmReceipt')">
-                    <el-popconfirm title="确定要收货吗？" @confirm="receiveProd(order.orderRefundId)">
-                      <el-button slot="reference" type="text" size="small">确认收货</el-button>
-                    </el-popconfirm>
-                  </div>
-                  <div v-if="order.logisticsNo && $restrict('viewLogistics')">
-                    <el-button type="text" size="small" @click="queryLogistics(order.logisticsNo)">查看物流</el-button>
-                  </div>
-                  <div>
-                    <el-button type="text" size="small" v-if="order.toWorkOrder && $restrict('workOrder_detail')" @click="toWorkOrderDetail(order.orderId)">查看工单</el-button>
-                  </div>
-                </div>
-              </div>
-            </el-col>
-          </el-row>
-        </div>
-        <div class="order-remark buyer" v-if="order.buyerMsg">买家留言：{{order.buyerMsg}}</div>
-        <div class="order-remark saler" v-if="order.remark">商家备注：{{order.remark}}</div>
-      </div>
-      <div class="no-data" v-if="dataList.length <= 0">暂无订单</div>
-    </div>
-    <div class="pagination clearfix">
-      <div class="fr">
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="currentPage"
-          :page-sizes="[10, 20, 30, 50]"
-          :page-size="10"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="listTotal">
-        </el-pagination>
-      </div>
-    </div>
-    <el-dialog :title="'订单备注'" :visible.sync="remarkVisible" :show-close="false" width="50%" :close-on-click-modal="false">
-      <el-input
-        type="textarea"
-        :autosize="{ minRows: 8, maxRows: 16}"
-        placeholder="请输入备注内容"
-        v-model="remark"
-        maxlength="100"
-        show-word-limit>
-      </el-input>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="saveRemark">保 存</el-button>
-        <el-button @click="cancelRemark">取 消</el-button>
-      </div>
-    </el-dialog>
-    <el-dialog :title="'物流信息'" :visible.sync="logisticsVisible" :show-close="false" width="80%" :close-on-click-modal="false">
-      <el-table
-        :data="logistics"
-        style="width: 100%"
-        size="mini">
-        <el-table-column prop="logisticsNo" label="快递单号" align="center"></el-table-column>
-        <el-table-column prop="comName" label="物流公司" align="center"></el-table-column>
-        <el-table-column prop="time" label="物流时间" align="center"></el-table-column>
-        <el-table-column prop="state" label="物流状态" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.state | EXPRESS_CURRENT_STATE_FILTER }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="context" label="物流详情" align="center"></el-table-column>
-      </el-table>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="logisticsVisible = false">关 闭</el-button>
-      </div>
-    </el-dialog>
-  </div>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<div v-if="activeKey == 'list'" class="app-container">
+				<div class="screen-container">
+				  <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
+				    <el-row :gutter="20">
+				      <el-col :xs="24" :sm="12" :lg="6">
+				        <el-form-item label="订单号" prop="orderId">
+				          <el-input v-model="screenForm.orderId" placeholder="请输入订单号"></el-input>
+				        </el-form-item>
+				      </el-col>
+				      <el-col :xs="24" :sm="12" :lg="6">
+				        <el-form-item label="售后编号" prop="orderRefundId">
+				          <el-input v-model="screenForm.orderRefundId" placeholder="请输入售后编号"></el-input>
+				        </el-form-item>
+				      </el-col>
+				      <el-col :xs="24" :sm="12" :lg="6">
+				        <el-form-item label="会员昵称" prop="userName">
+				          <el-input v-model="screenForm.userName" placeholder="请输入会员昵称"></el-input>
+				        </el-form-item>
+				      </el-col>
+				      <el-col :xs="24" :sm="12" :lg="6">
+				        <el-form-item label="手机号" prop="phone">
+				          <el-input v-model="screenForm.phone" placeholder="请输入手机号"></el-input>
+				        </el-form-item>
+				      </el-col>
+				
+				      <el-col :xs="24" :sm="12" :lg="6">
+				        <el-form-item label="网点名称" prop="websitId">
+				          <el-select v-model="screenForm.websitId" placeholder="全部" filterable>
+				            <el-option label="全部" value=""></el-option>
+				            <el-option :label="item.name" :value="item.id" v-for="(item, index) in websiteList" :key="index"></el-option>
+				          </el-select>
+				        </el-form-item>
+				      </el-col>
+				
+				      <!--          <el-col :xs="24" :sm="12" :lg="6">-->
+				      <!--            <el-form-item label="当前状态" prop="orderStatus">-->
+				      <!--              <el-select v-model="screenForm.orderStatus" placeholder="全部">-->
+				      <!--                <el-option label="全部" value=""></el-option>-->
+				      <!--                <el-option :label="item.label" :value="item.value" v-for="(item, index) in screen_status" :key="index"></el-option>-->
+				      <!--              </el-select>-->
+				      <!--            </el-form-item>-->
+				      <!--          </el-col>-->
+				
+				      <el-col :xs="24" :sm="12" :lg="6">
+				        <el-form-item label="申请时间" prop="createDate">
+				          <el-date-picker
+				            v-model="screenForm.createDate"
+				            type="datetimerange"
+				            value-format="yyyy-MM-dd HH:mm:ss"
+				            range-separator="至"
+				            start-placeholder="开始日期"
+				            end-placeholder="结束日期">
+				          </el-date-picker>
+				        </el-form-item>
+				      </el-col>
+				
+				      <el-col :xs="24" :sm="12" :lg="6">
+				        <el-form-item label="处理时间" prop="examineDate">
+				          <el-date-picker
+				            v-model="screenForm.examineDate"
+				            type="datetimerange"
+				            value-format="yyyy-MM-dd HH:mm:ss"
+				            range-separator="至"
+				            start-placeholder="开始日期"
+				            end-placeholder="结束日期">
+				          </el-date-picker>
+				        </el-form-item>
+				      </el-col>
+				
+				      <el-col :xs="24" :sm="12" :lg="6" class="tr">
+				        <el-form-item label="">
+				          <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
+				          <el-button size="small" @click="resetScreenForm">清空</el-button>
+				        </el-form-item>
+				      </el-col>
+				    </el-row>
+				  </el-form>
+				</div>
+				
+				<div class="tabs-container order-tabs-container clearfix">
+				  <div class="fl">
+				    <el-tabs v-model="tabCurrent" type="card" @tab-click="changeTabs">
+				      <el-tab-pane label="全部" name="ALL"></el-tab-pane>
+				      <el-tab-pane label="待商家处理" name="DSJCL"></el-tab-pane>
+				      <el-tab-pane label="待买家处理" name="DMJCL"></el-tab-pane>
+				      <el-tab-pane label="待商家收货" name="DSJSH"></el-tab-pane>
+				      <el-tab-pane label="已完成" name="OVER"></el-tab-pane>
+				    </el-tabs>
+				  </div>
+				  <div class="fr">
+				    <el-button v-if="$restrict('exp')" size="small" type="primary" @click="handleExport">导出报表</el-button>
+				  </div>
+				</div>
+				<div class="order-main-container">
+				  <div class="table-top">
+				    <el-row style="width:100%">
+				      <el-col :span="6"><span class="item product">商品信息</span></el-col>
+				      <el-col :span="3" style="text-align: right"><span class="item">单价(元)/数量</span></el-col>
+				      <el-col :span="3" style="text-align: center"><span class="item">买家信息</span></el-col>
+				      <el-col :span="3" style="text-align: center"><span class="item">订单金额</span></el-col>
+				      <el-col :span="3" style="text-align: center"><span class="item">退款金额</span></el-col>
+				      <el-col :span="3" style="text-align: center"><span class="item">维权类型/状态</span></el-col>
+				      <el-col :span="3" style="text-align: center"><span class="item">操作</span></el-col>
+				    </el-row>
+				  </div>
+				  <div class="order-item" v-for="(order, index) in dataList" :key="order.orderRefundId">
+				    <div class="order-top">
+				      <el-row>
+				        <el-col :xs="24" :sm="24" :lg="20">
+				          <span><b>售后编号</b>：{{order.orderRefundId}}</span>
+				          <span><b>申请时间</b>：{{order.createTime}}</span>
+				          <span><b>商户</b>：{{order.companyWechatName || '无'}}</span>
+				          <span><b>发货状态</b>：{{order.logisticsNo ? '已发货' : '未发货'}}</span>
+				        </el-col>
+				        <el-col :xs="24" :sm="24" :lg="4" style="text-align: right;">
+				          <el-link type="primary" v-if="$restrict('orderNote')" :underline="false" @click="showRemark(order)">订单备注</el-link>
+				          <el-link type="primary" v-if="$restrict('detail')" :underline="false" @click="showDetail(order.orderRefundId)">查看详情</el-link>
+				          <!-- <el-link type="primary" :underline="false" @click="queryWorkOrder(order.orderId)">订单工单</el-link> -->
+				        </el-col>
+				      </el-row>
+				    </div>
+				    <div class="order-content">
+				      <el-row style="width:100%">
+				        <el-col :span="9" style="height: 100%;">
+				          <div class="col-item-pro">
+				            <div v-if="order.examineStatus === 'FAIL'">
+				              <div v-for="orderItem in order.orderDetails" :key="orderItem.orderDetailId">
+				                <div class="pro-item">
+				                  <div class="left">
+				                    <div class="image">
+				                      <img :src="orderItem.imgUrl" style="height:80px;width: 80px;">
+				                    </div>
+				                    <div class="main">
+				                      <span>{{orderItem.goodsName}}</span>
+				                      <span class="spec">{{orderItem.goodsSpecName}}-{{orderItem.goodsSpecValue}}</span>
+				                    </div>
+				                  </div>
+				                  <div class="right">
+				                    <span>￥{{orderItem.price}}</span>
+				                    <span>x{{orderItem.num}}</span>
+				                  </div>
+				                </div>
+				              </div>
+				            </div>
+				            <div v-else>
+				              <div v-for="orderItem in order.orderDetails" :key="orderItem.orderDetailId">
+				                <div class="pro-item" v-if="orderItem.refund">
+				                  <div class="left">
+				                    <div class="image">
+				                      <img :src="orderItem.imgUrl" style="height:80px;width: 80px;">
+				                    </div>
+				                    <div class="main">
+				                      <span>{{orderItem.goodsName}}</span>
+				                      <span class="spec" v-if="orderItem.goodsSpecName === '默认' && orderItem.goodsSpecValue === '默认'">默认</span>
+				                      <span class="spec" v-else>{{orderItem.goodsSpecName}}-{{orderItem.goodsSpecValue}}</span>
+				                    </div>
+				                  </div>
+				                  <div class="right">
+				                    <span>￥{{orderItem.price}}</span>
+				                    <span>x{{orderItem.refundNum}}</span>
+				                  </div>
+				                </div>
+				              </div>
+				            </div>
+				          </div>
+				        </el-col>
+				        <el-col :span="3" style="height: 100%;">
+				          <div class="col-item">
+				            <div>{{ order.userName }}</div>
+				            <div>{{ order.phone }}</div>
+				          </div>
+				        </el-col>
+				        <el-col :span="3" style="height: 100%;">
+				          <div class="col-item">
+				            <div class="totalprice">￥{{ order.payAmount }}</div>
+				          </div>
+				        </el-col>
+				        <el-col :span="3" style="height: 100%;">
+				          <div class="col-item">
+				            <div class="totalprice">￥{{ order.refundAmount }}</div>
+				          </div>
+				        </el-col>
+				        <el-col :span="3" style="height: 100%;">
+				          <div class="col-item">
+				            <div>{{order.refundType | REFUND_CURRENT_TYPE_FILTER}}</div>
+				            <div>{{ order.orderStatus | ORDER_REFUND_CURRENT_STATUS_FILTER }}</div>
+				          </div>
+				        </el-col>
+				        <el-col :span="3" style="height: 100%;">
+				          <div class="col-item">
+				            <div class="operate" v-if="order.orderStatus === 'DSJCL'">
+				              <div>
+				                <el-button v-if="$restrict('agree')" slot="reference" type="text" size="small" @click="changeExamineStatus(order.orderRefundId,'OK')">同意</el-button>
+				              </div>
+				              <div>
+				                <el-button v-if="$restrict('reject')" slot="reference" type="text" size="small" @click="changeExamineStatus(order.orderRefundId,'FAIL')">拒绝</el-button>
+				              </div>
+				              <div>
+				                <!-- toWorkOrderDetail(order.orderId) -->
+				                <el-button type="text" size="small" v-if="order.toWorkOrder && $restrict('workOrder_detail')" @click="queryWorkOrder(order.orderId)">查看工单</el-button>
+				              </div>
+				            </div>
+				            <div class="operate" v-if="order.orderStatus === 'DSJSH'">
+				              <div v-if="$restrict('confirmReceipt')">
+				                <el-popconfirm title="确定要收货吗？" @confirm="receiveProd(order.orderRefundId)">
+				                  <el-button slot="reference" type="text" size="small">确认收货</el-button>
+				                </el-popconfirm>
+				              </div>
+				              <div v-if="order.logisticsNo && $restrict('viewLogistics')">
+				                <el-button type="text" size="small" @click="queryLogistics(order)">查看物流</el-button>
+				              </div>
+				              <div>
+				                <el-button type="text" size="small" v-if="order.toWorkOrder && $restrict('workOrder_detail')" @click="toWorkOrderDetail(order.orderId)">查看工单</el-button>
+				              </div>
+				            </div>
+				          </div>
+				        </el-col>
+				      </el-row>
+				    </div>
+				    <div class="order-remark buyer" v-if="order.buyerMsg">买家留言：{{order.buyerMsg}}</div>
+				    <div class="order-remark saler" v-if="order.remark">商家备注：{{order.remark}}</div>
+				  </div>
+				  <div class="no-data" v-if="dataList.length <= 0">暂无订单</div>
+				</div>
+				<div class="pagination clearfix">
+				  <div class="fr">
+				    <el-pagination
+				      @size-change="handleSizeChange"
+				      @current-change="handleCurrentChange"
+				      :current-page="currentPage"
+				      :page-sizes="[10, 20, 30, 50]"
+				      :page-size="10"
+				      layout="total, sizes, prev, pager, next, jumper"
+				      :total="listTotal">
+				    </el-pagination>
+				  </div>
+				</div>
+			</div>
+			<!-- 订单备注 -->
+			<div v-if="activeKey == 'remark'" class="app-container">
+				<el-input
+				  type="textarea"
+				  :autosize="{ minRows: 8, maxRows: 16}"
+				  placeholder="请输入备注内容"
+				  v-model="remark"
+				  maxlength="100"
+				  show-word-limit>
+				</el-input>
+				<div slot="footer" class="dialog-footer">
+				  <el-button type="primary" @click="saveRemark(data.removeTab)">保 存</el-button>
+				  <el-button @click="cancelRemark;data.removeTab()">取 消</el-button>
+				</div>
+			</div>
+			<!-- 物流信息 -->
+			<div v-if="activeKey == 'materialDetail'" class="app-container">
+				<el-table
+				  :data="logistics"
+				  style="width: 100%"
+				  size="mini">
+				  <el-table-column prop="logisticsNo" label="快递单号" align="center"></el-table-column>
+				  <el-table-column prop="comName" label="物流公司" align="center"></el-table-column>
+				  <el-table-column prop="time" label="物流时间" align="center"></el-table-column>
+				  <el-table-column prop="state" label="物流状态" align="center">
+				    <template slot-scope="scope">
+				      {{ scope.row.state | EXPRESS_CURRENT_STATE_FILTER }}
+				    </template>
+				  </el-table-column>
+				  <el-table-column prop="context" label="物流详情" align="center"></el-table-column>
+				</el-table>
+				<div slot="footer" class="dialog-footer">
+				  <el-button @click="logisticsVisible = false;data.removeTab()">关 闭</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -305,6 +310,8 @@ export default {
       logistics: [],
       detail: {},
       websiteList: [],
+			formType: 'add',
+			formVisible: false,
     }
   },
   created() {
@@ -358,6 +365,39 @@ export default {
         this.listLoading = false;
       })
     },
+	openForm(type,order){
+		this.$refs.tabPage.addTab({
+			// 对应显示的模块
+			activeKey: type,
+			// 唯一标识
+			key: type,
+			// 页签名称
+			label: ({ remark: "订单备注", materialDetail: "查看物流" })[type],
+			// 打开时事件
+			triggerEvent: () => {
+				
+				this.$nextTick(()=>{
+					this.formType = type
+					this.formVisible = true
+					if(type == 'remark'){
+						this.remarkVisible = true
+						this.editOrderId = order.orderRefundId
+						this.remark = order.remark
+					}
+					if(type == 'materialDetail'){
+						this.logisticsVisible = true
+						getExpress({ logisticsNo: order.logisticsNo }).then(res => {
+							this.logistics = res.data
+						})
+					}
+				})
+			},
+			// 关闭时事件
+			closeEvent: () => {
+				
+			}
+		})
+	},
     // 查看详情
     queryDetail (orderRefundId) {
     },
@@ -389,28 +429,28 @@ export default {
     getWebsiteList() {
       getWebsiteList({
         pageNum: 1,
-        pageSize: 1000
+        pageSize: 1000,
+		type: 'C'
       }).then(res => {
-        this.websiteList = res.data.records;
+        this.websiteList = res.data;
       })
     },
 
-    showRemark(orderId, remark) {
-      this.remarkVisible = true
-      this.editOrderId = orderId
-      this.remark = remark
+    showRemark(order) {
+		this.openForm('remark',order)
     },
     cancelRemark() {
       this.remarkVisible = false
       this.editOrderId = ''
       this.remark = ''
     },
-    saveRemark() {
+    saveRemark(cancel) {
       const params = {
         orderRefundId: this.editOrderId,
         remark: this.remark
       }
       saveRefundRemark(params).then(() => {
+				cancel('list')
         this.cancelRemark();
         this.getList();
         this.$successMsg('保存成功');
@@ -433,15 +473,11 @@ export default {
       }).catch(() => {});
     },
     // 查看物流
-    queryLogistics(logisticsNo) {
-      this.logisticsVisible = true
-      getExpress({ logisticsNo }).then(res => {
-        this.logistics = res.data
-      })
+    queryLogistics(order) {
+		this.openForm('materialDetail',order)
     },
     // 查看详情
     showDetail(orderRefundId) {
-      // const orderRefundId = this.dataList[index].orderRefundId
       // let {href} = this.$router.resolve({path: `/order/order_refund_detail?orderRefundId=${orderRefundId}`});
       // window.open(href, '_blank');
       this.$router.push({

src/views/mallManagement/settlement/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: $route.meta.title+'-列表', 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="~['remark'].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 {
       formData: {
         remark: '',
       },
+		formType: 'add',
+		formVisible: false,
     }
   },
   computed: {
@@ -60,7 +65,7 @@ export default {
         md: 24,
         isShow: true,
         name: 'el-input',
-        attributes: { placeholder: '请输入', type: "textarea", maxlength: "100" },
+        attributes: { placeholder: '请输入', type: "textarea", maxlength: "100",rows: 5 },
         formItemAttributes: {
           label: '备注',
           prop: 'remark',
@@ -90,7 +95,7 @@ export default {
 				click: ({ row, index, column }) => {
 					Object.assign(this.formData, row)
 					this.formDialogType = 0
-					this.openForm()
+					this.openForm('remark',row)
 				}
 			},
 			account: {
@@ -110,20 +115,39 @@ export default {
 				},
 		})
 	},
-    openForm() {
-      this.formDialog = true;
+    openForm(type) {
+      this.$refs.tabPage.addTab({
+      	// 对应显示的模块
+      	activeKey: type,
+      	// 唯一标识
+      	key: type,
+      	// 页签名称
+      	label: ({ remark: "备注" })[type],
+      	// 打开时事件
+      	triggerEvent: () => {
+      		this.formCancel()
+      		this.$nextTick(()=>{
+      			this.formType = type
+      			this.formVisible = true
+      		})
+      	},
+      	// 关闭时事件
+      	closeEvent: () => {
+			this.formCancel()
+      	}
+      })
     },
     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) {
           ([saveRemark][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/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: $route.meta.title+'-列表', 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.formVisible = false
+      this.$refs?.formRef?.resetFields()
       this.$data.formData = this.$options.data().formData
-      this.formDialog = false
     },
-    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()
           })
         }

src/views/setting/account/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
     <template slot-scope="{activeKey, data}">
       <div :style="{
         width: '100%',

src/views/setting/dataDictionary/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
 		<template slot-scope="{activeKey, data}">
 			<div :style="{
 				width: '100%',

src/views/setting/departmentManage/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
     <template slot-scope="{activeKey, data}">
       <div class="app-container">
         <div v-if="activeKey == 'list'" class="mymain-container">

src/views/setting/notification/announcement/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
 		<template slot-scope="{activeKey, data}">
 			<div :style="{
 				width: '100%',
@@ -296,9 +296,9 @@ export default {
 			}]
 		}
 	},
-	created(){
-		if(this.$route.query.id){
-			this.getNoticeDetail(this.$route.query.id,2,'formDialog2')
+	created() {
+		if (this.$route.query.id) {
+			this.getNoticeDetail(this.$route.query.id, 2, 'formDialog2')
 		}
 	},
 	methods: {
@@ -328,7 +328,7 @@ export default {
 		selectionChange(data) {
 			this.recordSelected = data
 		},
-		getNoticeDetail(noticeId,type,name){
+		getNoticeDetail(noticeId, type, name) {
 			getNoticeDetail({
 				noticeId
 			}).then(res => {

src/views/setting/notification/systemMessage/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
 		<template slot-scope="{activeKey, data}">
 			<div :style="{
 				width: '100%',

src/views/setting/role/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
     <template slot-scope="{activeKey, data}">
       <div :style="{
         width: '100%',

src/views/userManagement/masterManagement/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
     <template slot-scope="{activeKey, data}">
       <div :style="{
         width: '100%',
@@ -140,8 +140,9 @@ export default {
         },
         render: (h, { props, onInput }) => {
           var { value } = props
+		  console.log(this.formData.idCardImg)
           return (
-            <el-image src={this.formData.idCardImg} style='width: 120px;height:120px' preview-src-list={[this.formData.idCardImg]} fit="fit"></el-image>
+           this.formData.idCardImg? <el-image src={this.formData.idCardImg} style='width: 120px;height:120px' preview-src-list={[this.formData.idCardImg]} fit="fit"></el-image>:''
           )
         }
       }, {

src/views/workOrder/basicConfiguration/assessmentItemAllocation/index.vue

@@ -1,20 +1,23 @@
 <template>
-  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
-    :operationColumnWidth="80" :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" :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" v-if="formDialogType !== 2" type="primary" @click="formConfirm()">确定</el-button>
-      </div>
-    </el-dialog>
-  </template-page>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', 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" :operationColumnWidth="80">
+			</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" :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>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -49,7 +52,9 @@ export default {
         type: 'REWARD',
         name: '',
         amount: '',
-      }
+      },
+			formType: 'add',
+			formVisible: false,
     }
   },
   computed: {
@@ -59,7 +64,9 @@ export default {
         [
           [
             this.optionsEvensAuth("add", {
-              click: this.addData
+								click: () => {
+									this.openForm('add')
+								}
             })
           ]
         ]
@@ -71,7 +78,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入', disabled: true },
@@ -81,7 +88,7 @@ export default {
           rules: [...required]
         },
       }, {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入考核项目名称', },
@@ -91,7 +98,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'slot-component',
         attributes: {},
@@ -110,7 +117,7 @@ export default {
           )
         }
       }, {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'slot-component',
         attributes: { placeholder: '请输入', type: 'number' },
@@ -148,11 +155,7 @@ export default {
       return this.operationBtn({
         edit: {
           click: ({ row, index, column }) => {
-            getDetail({ id: row.id }).then(res => {
-              Object.assign(this.formData, res.data)
-              this.formDialogType = 1
-              this.openForm()
-            })
+            this.openForm('edit',row.id)
           }
         },
         del: {
@@ -172,25 +175,49 @@ export default {
         }
       })
     },
-
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
-      this.formDialog = true;
-    },
+    // 取消 新增编辑
     formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.formVisible = false
+      this.$refs?.formRef?.resetFields()
       this.$data.formData = this.$options.data().formData
-      this.formDialog = false
     },
-    formConfirm() {
+    // 打开 新增编辑 网点表单
+    openForm(type, id) {
+    	this.$refs.tabPage.addTab({
+    		// 对应显示的模块
+    		activeKey: type,
+    		// 唯一标识
+    		key: type,
+    		// 页签名称
+    		label: ({ edit: "编辑", add: "新增", detail: "查看" })[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
+    					getDetail({ id }).then(res => {
+    					  Object.assign(this.formData, res.data)
+    					})
+    				}
+    			})
+    		},
+    		// 关闭时事件
+    		closeEvent: () => {
+    		
+    		}
+    	})
+    },
+    formConfirm(canael) {
       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()
+            canael('list')
             this.$refs.pageRef.refreshList()
           })
         }

src/views/workOrder/basicConfiguration/orderType/index.vue

@@ -1,20 +1,23 @@
 <template>
-  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
-    :operationColumnWidth="80" :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" :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" v-if="formDialogType !== 2" type="primary" @click="formConfirm()">确定</el-button>
-      </div>
-    </el-dialog>
-  </template-page>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', 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" :operationColumnWidth="80">
+			</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="110px" :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>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -45,14 +48,16 @@ export default {
       formDialogTitles: ["新增", "编辑", "详情"],
       formDialog: false,
       formData: {
-		companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
-		orderSmallTypeText: '',
-		orderType: '',
-		status: true,
-		sortNum: '',
-		imgUrl: [],
-		isRpProjectRepair: 'NO'
-      }
+				companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
+				orderSmallTypeText: '',
+				orderType: '',
+				status: true,
+				sortNum: '',
+				imgUrl: [],
+				isRpProjectRepair: 'NO'
+      },
+			formType: 'add',
+			formVisible: false,
     }
   },
   computed: {
@@ -62,7 +67,9 @@ export default {
         [
           [
             this.optionsEvensAuth("add", {
-              click: this.addData
+								click: () => {
+									this.openForm('add')
+								}
             })
           ]
         ]
@@ -74,7 +81,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入', disabled: true },
@@ -84,7 +91,7 @@ export default {
           rules: [...required]
         },
       }, {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-select',
         options: [{ label: '安装', value: 'INSTALL' }, { label: '维修', value: 'REPAIR' }],
@@ -95,7 +102,7 @@ export default {
           rules: [...required]
         },
       }, {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入工单类型', },
@@ -105,7 +112,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'slot-component',
         attributes: {},
@@ -124,7 +131,7 @@ export default {
 			)
 		}
     }, {
-      md: 24,
+      md: 6,
       isShow: true,
       name: 'el-input',
       attributes: { placeholder: '排序数字越小越靠前', type: 'number' },
@@ -134,7 +141,7 @@ export default {
         rules: []
       }
     }, {
-      md: 24,
+      md: 6,
       isShow: true,
       name: 'slot-component',
       attributes: {},
@@ -200,13 +207,7 @@ export default {
       return this.operationBtn({
         edit: {
           click: ({ row, index, column }) => {
-            getDetail({ id: row.id }).then(res => {
-              Object.assign(this.formData, res.data, {
-                imgUrl: res.data?.imgUrl ? res.data?.imgUrl?.split(",").map(item => ({ url: item })) : []
-              })
-              this.formDialogType = 1
-              this.openForm()
-            })
+            this.openForm('edit',row.id)
           }
         },
         del: {
@@ -227,19 +228,46 @@ export default {
       })
     },
 
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
-      this.formDialog = true;
-    },
+    // 取消 新增编辑
     formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.formVisible = false
+      this.$refs?.formRef?.resetFields()
       this.$data.formData = this.$options.data().formData
-      this.formDialog = false
     },
-    formConfirm() {
+    // 打开 新增编辑 网点表单
+    openForm(type, id) {
+    	this.$refs.tabPage.addTab({
+    		// 对应显示的模块
+    		activeKey: type,
+    		// 唯一标识
+    		key: type,
+    		// 页签名称
+    		label: ({ edit: "编辑", add: "新增", detail: "查看" })[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
+    					getDetail({ id }).then(res => {
+    					  Object.assign(this.formData, res.data, {
+    					    imgUrl: res.data?.imgUrl ? res.data?.imgUrl?.split(",").map(item => ({ url: item })) : []
+    					  })
+    					})
+    				}
+    			})
+    		},
+    		// 关闭时事件
+    		closeEvent: () => {
+    		
+    		}
+    	})
+    },
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           (save)({
@@ -247,7 +275,7 @@ export default {
             imgUrl: this.formData.imgUrl.map(item => item.url).join(",")
           }).then(res => {
             this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
-            this.formCancel()
+            cancel('list')
             this.$refs.pageRef.refreshList()
           })
         }

src/views/workOrder/settleAccountsManagement/rewardsPunishmentsOrder/index.vue

@@ -1,20 +1,23 @@
 <template>
-	<template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
-		:operationColumnWidth="80" :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="110px" :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" v-if="formDialogType !== 2" type="primary" @click="formConfirm()">提交</el-button>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', 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" :operationColumnWidth="80">
+			</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="110px" :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>
@@ -68,7 +71,9 @@ export default {
 			},
 			websitList: [],
 			workerList: [],
-			examineList: []
+			examineList: [],
+			formType: 'add',
+			formVisible: false,
 		}
 	},
 	computed: {
@@ -78,7 +83,9 @@ export default {
 				[
 					[
 						this.optionsEvensAuth("add", {
-							click: this.addData
+							click: () => {
+								this.openForm('add')
+							}
 						})
 					]
 				]
@@ -90,7 +97,7 @@ export default {
 		},
 		formItems() {
 			return [{
-				md: 12,
+				md: 6,
 				isShow: true,
 				name: 'el-input',
 				attributes: { placeholder: '请输入', disabled: true },
@@ -100,7 +107,7 @@ export default {
 					rules: [...required]
 				},
 			}, {
-				md: 12,
+				md: 6,
 				isShow: this.type == 1,
 				name: 'slot-component',
 				attributes: { placeholder: '请输入网点名称', },
@@ -131,7 +138,7 @@ export default {
 					)
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: this.type == 0,
 				name: 'el-input',
 				attributes: { placeholder: '请输入网点名称', disabled: true },
@@ -141,7 +148,7 @@ export default {
 					rules: [...required]
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: true,
 				name: 'slot-component',
 				attributes: { placeholder: '请选择工程师', },
@@ -168,7 +175,7 @@ export default {
 					)
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: true,
 				name: 'el-input',
 				attributes: { placeholder: '请输入', },
@@ -180,7 +187,7 @@ export default {
 					] : []
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: true,
 				name: 'el-input',
 				attributes: { placeholder: '请输入', },
@@ -192,7 +199,7 @@ export default {
 					] : []
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: true,
 				name: 'slot-component',
 				attributes: { placeholder: '请选择考核项目', },
@@ -219,7 +226,7 @@ export default {
 					)
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: true,
 				name: 'slot-component',
 				attributes: {},
@@ -238,7 +245,7 @@ export default {
 					)
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: true,
 				name: 'el-input',
 				attributes: { placeholder: '请输入', type: 'number', disabled: true },
@@ -248,7 +255,7 @@ export default {
 					rules: [...required]
 				}
 			}, {
-				md: 12,
+				md: 6,
 				isShow: true,
 				name: 'el-input',
 				attributes: { placeholder: '请输入' },
@@ -287,7 +294,7 @@ export default {
 	},
 	created() {
 		if (this.$route.query.id) {
-			this.openDetail(this.$route.query.id)
+			this.openForm('detail',this.$route.query.id)
 		}
 	},
 	methods: {
@@ -317,7 +324,7 @@ export default {
 			return this.operationBtn({
 				detail: {
 					click: ({ row, index, column }) => {
-						this.openDetail(row.id)
+						this.openForm('detail',row.id)
 					}
 				}
 			})
@@ -334,8 +341,6 @@ export default {
 				this.getExamine()
 				this.getWebsit()
 				this.getWorker()
-				this.formDialogType = 2
-				this.openForm()
 			})
 		},
 		getExamine() {
@@ -358,21 +363,42 @@ export default {
 				this.workerList = res.data.records
 			})
 		},
-		addData() {
-			this.getExamine()
-			this.getWebsit()
-			this.formDialogType = 0
-			this.openForm()
-		},
-		openForm() {
-			this.formDialog = true;
+		openForm(type,id) {
+			this.$refs.tabPage.addTab({
+				// 对应显示的模块
+				activeKey: type,
+				// 唯一标识
+				key: type,
+				// 页签名称
+				label: ({ edit: "编辑", add: "新增", detail: "详情" })[type],
+				// 打开时事件
+				triggerEvent: () => {
+					this.formCancel()
+					this.$nextTick(()=>{
+						this.formType = type
+						this.formVisible = true
+						if (type == 'add') {
+							this.getExamine()
+							this.getWebsit()
+							this.formDialogType = 0
+						}else{
+							this.formDialogType = 2
+							this.openDetail(id)
+						}
+					})
+				},
+				// 关闭时事件
+				closeEvent: () => {
+				
+				}
+			})
 		},
 		formCancel() {
-			this.$refs.formRef.$refs.inlineForm.clearValidate()
+			this.formVisible = false
+			this.$refs?.formRef?.resetFields()
 			this.$data.formData = this.$options.data().formData
-			this.formDialog = false
 		},
-		formConfirm() {
+		formConfirm(cancel) {
 			this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
 				if (valid) {
 					([add, edit][this.formDialogType])({
@@ -380,7 +406,7 @@ export default {
 						fileUrl: this.formData.fileUrl.map(item => item.url).join(",")
 					}).then(res => {
 						this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
-						this.formCancel()
+						cancel('list')
 						this.$refs.pageRef.refreshList()
 					})
 				}