弹窗批量修改

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: '列表页面', 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.$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) {
           ([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: '列表页面', 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,53 @@ 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'){
+						Object.assign(this.formData, {
+						  parentCategoryId: row.categoryId
+						})
+					}else if(type == 'edit1'){
+						Object.assign(this.formData, row)
+						this.formDialogType = 1
+					}else if(type == 'edit1'){
+						Object.assign(this.formData, row)
+						this.formDialogType = 1
+					}
+				})
+			},
+			// 关闭时事件
+			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) {
           ([materialCategoryAdd, materialCategoryUpdate][this.formDialogType])({
@@ -199,7 +221,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: '列表页面', 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.$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) {
           ([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/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: '列表页面', 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.$data.formData = this.$options.data().formData
-			this.formDialog = false
+			this.formVisible = false
+			this.$refs?.formRef?.resetFields()
+			this.$data.formRef = this.$options.data().formRef
 		},
 
 		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: '列表页面', 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)">确认结算
+					</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.formRef = this.$options.data().formRef
+	},
 	// 表格操作列
 	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)
 					}
 				}
 			},
@@ -306,7 +325,7 @@ export default {
 		}
 		this.settleAccounts(this.recordSelected.map(item=>{return item.settlementOrderId}).join(','))
 	},
-	settleAccounts(id){
+	settleAccounts(id,cancel){
 		this.$confirm(`请确认是否结算选中数据, 是否继续?`, '提示', {
 			confirmButtonText: '确定',
 			cancelButtonText: '取消',
@@ -317,6 +336,7 @@ export default {
 			}).then(res => {
 				if (res.code == 200) {
 					this.$message({ type: 'success', message: `结算成功!` })
+					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: '列表页面', 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)">确认结算
+					</el-button>
+					<el-button size="mini" v-if="formData.status == 'WAIT_ING'" type="primary" @click="withdraw(formData.settlementOrderId,data.removeTab)">
+						确认提现
+					</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.$data.formData = this.$options.data().formData
-			this.formDialog = false
+			this.formVisible = false
+			this.$refs?.formRef?.resetFields()
+			this.$data.formRef = this.$options.data().formRef
 		},
 		// 表格操作列
 		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) {
 			this.$confirm(`请确认是否结算选中数据, 是否继续?`, '提示', {
 				confirmButtonText: '确定',
 				cancelButtonText: '取消',
@@ -385,6 +405,7 @@ export default {
 				}).then(res => {
 					if (res.code == 200) {
 						this.$message({ type: 'success', message: `结算成功!` })
+						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) {
 			this.$confirm(`请确认是否提现选中数据, 是否继续?`, '提示', {
 				confirmButtonText: '确定',
 				cancelButtonText: '取消',
@@ -410,6 +431,7 @@ export default {
 				}).then(res => {
 					if (res.code == 200) {
 						this.$message({ type: 'success', message: `提现成功!` })
+						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: '列表页面', 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.$data.formData = this.$options.data().formData
-      this.formDialog = false
+      this.formVisible = false
+      this.$refs?.formRef?.resetFields()
+      this.$data.formRef = this.$options.data().formRef
+    },
+    // 打开 新增编辑 网点表单
+    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() {
+    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/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: '列表页面', 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.$data.formData = this.$options.data().formData
-      this.formDialog = false
+      this.formVisible = false
+      this.$refs?.formRef?.resetFields()
+      this.$data.formRef = this.$options.data().formRef
+    },
+    // 打开 新增编辑 网点表单
+    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() {
+    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: '列表页面', 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.$data.formData = this.$options.data().formData
-      this.formDialog = false
+      this.formVisible = false
+      this.$refs?.formRef?.resetFields()
+      this.$data.formRef = this.$options.data().formRef
+    },
+    // 打开 新增编辑 网点表单
+    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() {
+    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: '列表页面', 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.$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) {
 					([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()
 					})
 				}