批量修改弹窗

src/views/mallManagement/brand/index.vue

@@ -1,203 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="mymain-container">
-      <div class="btn-group clearfix">
-        <div class="fl">
-          <el-button v-if="$restrict('add')" size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">添加品牌</el-button>
-        </div>
-      </div>
-
-      <div class="table">
-        <el-table ref="noticeTable" v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
-          <el-table-column align="center" label="服务品牌" prop="brandName" min-width="180"></el-table-column>
-          <el-table-column align="center" label="图片" prop="imageUrl">
-            <template slot-scope="scope">
-              <el-image style="width: 40px; height: 40px; display: block; margin: 0 auto;" :src="scope.row.imageUrl" :preview-src-list="[scope.row.imageUrl]" fit="cover">
-                <div slot="error" style="height: 100%;font-size: 40px;">
-                  <i class="el-icon-picture-outline"></i>
-                </div>
-              </el-image>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="状态" class-name="status-col">
-            <template slot-scope="scope">
-              <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? '开启' : '禁用'}}</el-tag>
-            </template>
-          </el-table-column>
-		  <el-table-column align="center" label="排序" prop="sortNum"></el-table-column>
-          <el-table-column align="center" label="创建人" prop="createBy" min-width="100"></el-table-column>
-          <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
-          <el-table-column align="center" label="修改人" prop="updateBy" min-width="100"></el-table-column>
-          <el-table-column align="center" label="修改时间" prop="updateTime" min-width="160"></el-table-column>
-          <el-table-column align="center" label="操作" fixed="right" width="120">
-            <template slot-scope="scope">
-              <el-button type="text" v-if="$restrict('edit')" @click="addOrEdit('edit', scope.row.id)">编辑</el-button>
-              <el-popconfirm v-if="$restrict('del')" style="margin-left: 10px;" title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
-                <el-button slot="reference" type="text">删除</el-button>
-              </el-popconfirm>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </div>
-
-
-    <!-- 新增编辑 -->
-    <el-dialog :title="addFormType === 'add' ? '新增品牌':'编辑品牌'" :visible.sync="addFormVisible" :show-close="false" width="50%" :close-on-click-modal="false">
-      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="80px">
-        <el-form-item label="品牌名称" prop="name">
-          <el-input v-model="addForm.name" autocomplete="off" placeholder="请输入品牌名称"></el-input>
-        </el-form-item>
-        <el-form-item label="图片" prop="imgUrl">
-          <el-upload
-            class="avatar-uploader"
-            :action="baseURL + 'common/upload'"
-            :headers="myHeaders"
-            :show-file-list="false"
-            :on-success="uploadSuccess"
-            :before-upload="beforeUpload">
-            <img v-if="addForm.imgUrl" :src="addForm.imgUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="addForm.status">
-            <el-radio :label="true">开启</el-radio>
-            <el-radio :label="false">禁用</el-radio>
-          </el-radio-group>
-        </el-form-item>
-		<el-form-item label="排序" prop="sortNum">
-		  <el-input v-model="addForm.sortNum" autocomplete="off" placeholder="请输入"></el-input>
-		</el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelAddForm">取 消</el-button>
-        <el-button type="primary" @click="submitAddForm">确 定</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { getBrandList, getBrandDetail, saveBrand, deleteBrand } from "@/api/miniapp";
-import { getToken } from '@/utils/auth'
-
-export default {
-  data() {
-    return {
-      baseURL: process.env.VUE_APP_BASE_API,
-      myHeaders: {'x-token': getToken()},
-      dataList: null, // 列表数据
-      listLoading: true, // 列表加载loading
-
-      editId:  null,
-      addFormType: 'add',
-      addFormVisible: false,
-      addForm: {
-        name: '', // 名称
-        imgUrl: '', // 图片
-        status: true,
-		sortNum: 0
-      },
-      addFormRules: {
-        name: [
-          { required: true, message: '请输入品牌名称', trigger: 'blur' }
-        ],
-        imgUrl: [
-          { required: true, message: '请上传图片', trigger: 'change' }
-        ],
-        status: [
-          { required: true, message: '请选择状态', trigger: 'change' }
-        ],
-		sortNum: [
-          { required: true, message: '请输入排序', trigger: 'blur' }
-        ],
-      },
-    }
-  },
-
-  created() {
-    this.getList();
-  },
-
-  methods: {
-    getList() {
-      getBrandList().then(res => {
-        this.dataList = res.data;
-        this.listLoading = false;
-      })
-    },
-
-    // 新增编辑
-    addOrEdit(type, id) {
-      this.addFormType = type;
-      this.addFormVisible = true;
-      if(type == 'edit') {
-        this.editId = id;
-        getBrandDetail({id: id}).then(res => {
-          this.addForm = {
-            name: res.data.brandName,
-            imgUrl: res.data.imageUrl,
-            status: res.data.status,
-			sortNum: res.data.sortNum
-          }
-        })
-      }
-    },
-
-    // 取消 新增编辑
-    cancelAddForm(){
-      this.addFormVisible = false;
-      this.$refs.addForm.resetFields();
-      this.selGoodsName = ''
-    },
-
-    // 提交 新增编辑
-    submitAddForm() {
-      this.$refs.addForm.validate((valid) => {
-        if (valid) {
-          let params = {
-            brandName: this.addForm.name,
-            imageUrl: this.addForm.imgUrl,
-            status: this.addForm.status,
-			sortNum: this.addForm.sortNum
-          }
-          if(this.addFormType == 'edit') {
-            params.id = this.editId;
-          }
-          saveBrand(params).then(res => {
-            this.cancelAddForm();
-            this.getList();
-            this.$successMsg('保存成功');
-          })
-        }
-      })
-    },
-
-    uploadSuccess(res, file) {
-      this.addForm.imgUrl = res.data.url;
-    },
-
-    beforeUpload(file) {
-      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
-      const whiteList = ['jpg', 'jpeg', 'png'];
-      if (whiteList.indexOf(fileSuffix) === -1) {
-        this.$errorMsg('只支持上传jpg/png文件!');
-        return false;
-      }
-    },
-
-    // 操作 - 删除
-    handleDelete(id) {
-      deleteBrand({id: id}).then(res => {
-        this.getList();
-        this.$successMsg();
-      })
-    },
-  }
-}
-</script>
-
-<style scoped lang="scss">
-
-</style>

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

@@ -0,0 +1,236 @@
+<template>
+	<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="btn-group clearfix">
+			    <div class="fl">
+			      <el-button v-if="$restrict('add')" size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">添加品牌</el-button>
+			    </div>
+			  </div>
+			
+			  <div class="table">
+			    <el-table ref="noticeTable" v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
+			      <el-table-column align="center" label="服务品牌" prop="brandName" min-width="180"></el-table-column>
+			      <el-table-column align="center" label="图片" prop="imageUrl">
+			        <template slot-scope="scope">
+			          <el-image style="width: 40px; height: 40px; display: block; margin: 0 auto;" :src="scope.row.imageUrl" :preview-src-list="[scope.row.imageUrl]" fit="cover">
+			            <div slot="error" style="height: 100%;font-size: 40px;">
+			              <i class="el-icon-picture-outline"></i>
+			            </div>
+			          </el-image>
+			        </template>
+			      </el-table-column>
+			      <el-table-column align="center" label="状态" class-name="status-col">
+			        <template slot-scope="scope">
+			          <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? '开启' : '禁用'}}</el-tag>
+			        </template>
+			      </el-table-column>
+			  <el-table-column align="center" label="排序" prop="sortNum"></el-table-column>
+			      <el-table-column align="center" label="创建人" prop="createBy" min-width="100"></el-table-column>
+			      <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
+			      <el-table-column align="center" label="修改人" prop="updateBy" min-width="100"></el-table-column>
+			      <el-table-column align="center" label="修改时间" prop="updateTime" min-width="160"></el-table-column>
+			      <el-table-column align="center" label="操作" fixed="right" width="120">
+			        <template slot-scope="scope">
+			          <el-button type="text" v-if="$restrict('edit')" @click="addOrEdit('edit', scope.row.id)">编辑</el-button>
+			          <el-popconfirm v-if="$restrict('del')" style="margin-left: 10px;" title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
+			            <el-button slot="reference" type="text">删除</el-button>
+			          </el-popconfirm>
+			        </template>
+			      </el-table-column>
+			    </el-table>
+			  </div>
+			</div>
+			<!-- 新增编辑 -->
+			<div v-if="addFormVisible" class="app-container">
+				<el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="80px">
+					<el-row :gutter="20">
+						<el-col :span="6">
+							<el-form-item label="品牌名称" prop="name">
+							  <el-input v-model="addForm.name" autocomplete="off" placeholder="请输入品牌名称"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="状态" prop="status">
+							  <el-radio-group v-model="addForm.status">
+							    <el-radio :label="true">开启</el-radio>
+							    <el-radio :label="false">禁用</el-radio>
+							  </el-radio-group>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item label="排序" prop="sortNum">
+							  <el-input v-model="addForm.sortNum" autocomplete="off" placeholder="请输入"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="24">
+							<el-form-item label="图片" prop="imgUrl">
+							  <el-upload
+							    class="avatar-uploader"
+							    :action="baseURL + 'common/upload'"
+							    :headers="myHeaders"
+							    :show-file-list="false"
+							    :on-success="uploadSuccess"
+							    :before-upload="beforeUpload">
+							    <img v-if="addForm.imgUrl" :src="addForm.imgUrl" class="avatar">
+							    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+							  </el-upload>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+				<div slot="footer" class="dialog-footer">
+				  <el-button @click="data.removeTab()">取 消</el-button>
+				  <el-button type="primary" @click="submitAddForm(data.removeTab)">确 定</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
+  </div>
+</template>
+
+<script>
+import { getBrandList, getBrandDetail, saveBrand, deleteBrand } from "@/api/miniapp";
+import { getToken } from '@/utils/auth'
+
+export default {
+  data() {
+    return {
+      baseURL: process.env.VUE_APP_BASE_API,
+      myHeaders: {'x-token': getToken()},
+      dataList: null, // 列表数据
+      listLoading: true, // 列表加载loading
+
+      editId:  null,
+      addFormType: 'add',
+      addFormVisible: false,
+      addForm: {
+        name: '', // 名称
+        imgUrl: '', // 图片
+        status: true,
+		sortNum: 0
+      },
+      addFormRules: {
+        name: [
+          { required: true, message: '请输入品牌名称', trigger: 'blur' }
+        ],
+        imgUrl: [
+          { required: true, message: '请上传图片', trigger: 'change' }
+        ],
+        status: [
+          { required: true, message: '请选择状态', trigger: 'change' }
+        ],
+		sortNum: [
+          { required: true, message: '请输入排序', trigger: 'blur' }
+        ],
+      },
+			formType: 'add',
+			formVisible: false,
+    }
+  },
+
+  created() {
+    this.getList();
+  },
+
+  methods: {
+    getList() {
+      getBrandList().then(res => {
+        this.dataList = res.data;
+        this.listLoading = false;
+      })
+    },
+
+    // 新增编辑
+    addOrEdit(type, id) {
+		this.$refs.tabPage.addTab({
+			// 对应显示的模块
+			activeKey: type,
+			// 唯一标识
+			key: type,
+			// 页签名称
+			label: ({ edit: "编辑", add: "新增" })[type],
+			// 打开时事件
+			triggerEvent: () => {
+				this.$nextTick(()=>{
+					this.formType = type
+					this.formVisible = true
+					this.addFormType = type;
+					this.addFormVisible = true;
+					if(type == 'edit'){
+						this.editId = id;
+						  getBrandDetail({id: id}).then(res => {
+						    this.addForm = {
+						      name: res.data.brandName,
+						      imgUrl: res.data.imageUrl,
+						      status: res.data.status,
+						sortNum: res.data.sortNum
+						    }
+						  })
+					}
+				})
+			},
+			// 关闭时事件
+			closeEvent: () => {
+				this.cancelAddForm()
+			}
+		})
+    },
+
+    // 取消 新增编辑
+    cancelAddForm(){
+      this.addFormVisible = false;
+      this.$refs?.addForm?.resetFields();
+      this.selGoodsName = ''
+    },
+
+    // 提交 新增编辑
+    submitAddForm(cancel) {
+      this.$refs.addForm.validate((valid) => {
+        if (valid) {
+          let params = {
+            brandName: this.addForm.name,
+            imageUrl: this.addForm.imgUrl,
+            status: this.addForm.status,
+			sortNum: this.addForm.sortNum
+          }
+          if(this.addFormType == 'edit') {
+            params.id = this.editId;
+          }
+          saveBrand(params).then(res => {
+            this.cancelAddForm();
+			cancel()
+            this.getList();
+            this.$successMsg('保存成功');
+          })
+        }
+      })
+    },
+
+    uploadSuccess(res, file) {
+      this.addForm.imgUrl = res.data.url;
+    },
+
+    beforeUpload(file) {
+      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
+      const whiteList = ['jpg', 'jpeg', 'png'];
+      if (whiteList.indexOf(fileSuffix) === -1) {
+        this.$errorMsg('只支持上传jpg/png文件!');
+        return false;
+      }
+    },
+
+    // 操作 - 删除
+    handleDelete(id) {
+      deleteBrand({id: id}).then(res => {
+        this.getList();
+        this.$successMsg();
+      })
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -1,20 +1,23 @@
 <template>
-  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
-    :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
-    :operation="operation()">
-    <el-dialog title="" width="500px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
-      :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
-      <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
-        <zj-form-module :title="formDialogTitles[formDialogType]" label-width="120px" :showPackUp="false"
-          :form-data="formData" :form-items="formItems">
-        </zj-form-module>
-      </zj-form-container>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="formCancel">取 消</el-button>
-        <el-button v-if="this.formDialogType !== 2" size="mini" @click="formConfirm" type="primary">确 定</el-button>
-      </div>
-    </el-dialog>
-  </template-page>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<template-page v-if="activeKey == 'list'" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+			  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+			  :operation="operation()" :exportList="exportList">
+			</template-page>
+			<div v-if="~['add', 'edit', 'detail'].indexOf(activeKey)">
+				<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+				  <zj-form-module title="" label-width="120px" :showPackUp="false"
+				    :form-data="formData" :form-items="formItems">
+				  </zj-form-module>
+				</zj-form-container>
+				<div slot="footer" class="dialog-footer">
+				  <el-button size="mini" @click="data.removeTab()">取 消</el-button>
+				  <el-button v-if="formDialogType !== 2" size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -49,6 +52,8 @@ export default {
         status: true,
 		sortNum: 0
       },
+		formType: 'add',
+		formVisible: false,
     }
   },
   computed: {
@@ -59,7 +64,7 @@ export default {
 				[
 					this.optionsEvensAuth("add", {
 						click: () => {
-							this.addData()
+							this.openForm('add')
 						}
 					})
 				],
@@ -72,7 +77,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         options: this.businessTypeList,
@@ -84,7 +89,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-radio',
         options: [{ label: "开启", value: true }, { label: "禁用", value: false }],
@@ -96,7 +101,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -128,21 +133,13 @@ export default {
 			detail: {
 				btnType: 'text',
 				click: ({ row, index, column }) => {
-					getTypeDetail({ id: row.id }).then(res => {
-					  Object.assign(this.formData, res.data)
-					  this.formDialogType = 2
-					  this.openForm()
-					})
+					this.openForm('detail',row.id)
 				}
 			},
 			edit: {
 				btnType: 'text',
 				click: ({ row, index, column }) => {
-					getTypeDetail({ id: row.id }).then(res => {
-					  Object.assign(this.formData, res.data)
-					  this.formDialogType = 1
-					  this.openForm()
-					})
+					this.openForm('edit',row.id)
 				}
 			},
 			del: {
@@ -160,19 +157,49 @@ export default {
 			}
 		})
 	},
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
-      this.formDialog = true;
-    },
+    // 取消 新增编辑
     formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
-      this.$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
+    				getTypeDetail({ id }).then(res => {
+    					Object.assign(this.formData, res.data)
+    				})
+    			}else{
+    				this.formDialogType = 2
+    				getTypeDetail({ id }).then(res => {
+    					Object.assign(this.formData, res.data)
+    				})
+    			}
+    		})
+        },
+        // 关闭时事件
+        closeEvent: () => {
+          
+        }
+      })
     },
-    formConfirm() {
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           saveType(this.formData).then(res => {
@@ -180,7 +207,7 @@ export default {
               type: 'success',
               message: this.formDialogTitles[this.formDialogType] + `成功!`,
             })
-            this.formCancel()
+            cancel('list')
             this.$refs.pageRef.refreshList()
           })
         }

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

@@ -18,7 +18,6 @@
 			</div>
 		</template>
 	</zj-tab-page>
-
 </template>
 
 <script>
@@ -239,45 +238,45 @@ export default {
 	},
 	// 打开 新增编辑 网点表单
 	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
-				getMainDetail({ id }).then(res => {
-					Object.assign(this.formData, res.data, {
-						imageUrl: res.data.imageUrl ? [{ url: res.data.imageUrl }] : [],
-					})
-					this.initData()
-				})
-	        }else{
-				this.formDialogType = 2
-				getMainDetail({ id }).then(res => {
-					Object.assign(this.formData, res.data, {
-						imageUrl: res.data.imageUrl ? [{ url: res.data.imageUrl }] : [],
-					})
-					this.initData()
+		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
+						getMainDetail({ id }).then(res => {
+							Object.assign(this.formData, res.data, {
+								imageUrl: res.data.imageUrl ? [{ url: res.data.imageUrl }] : [],
+							})
+							this.initData()
+						})
+					}else{
+						this.formDialogType = 2
+						getMainDetail({ id }).then(res => {
+							Object.assign(this.formData, res.data, {
+								imageUrl: res.data.imageUrl ? [{ url: res.data.imageUrl }] : [],
+							})
+							this.initData()
+						})
+					}
 				})
+			},
+			// 关闭时事件
+			closeEvent: () => {
+			
 			}
-	      })
-	    },
-	    // 关闭时事件
-	    closeEvent: () => {
-	      
-	    }
-	  })
+		})
 	},
     initData() {
       Promise.all([
@@ -314,7 +313,7 @@ export default {
         }
       })
     },
-    formConfirm() {
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           var pam = {
@@ -326,7 +325,7 @@ export default {
               type: 'success',
               message: this.formDialogTitles[this.formDialogType] + `成功!`,
             })
-            this.formCancel()
+            cancel('list')
             this.$refs.pageRef.refreshList()
           })
         }

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

@@ -1,28 +1,31 @@
 <template>
-  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
-    :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
-    :operation="operation()" :exportList="exportList">
-    <div slot="moreSearch">
-      <el-radio-group v-model="type" size="mini" @change="changeType">
-        <el-radio-button :label="''">全部</el-radio-button>
-        <el-radio-button :label="true">开启</el-radio-button>
-        <el-radio-button :label="false">禁用</el-radio-button>
-      </el-radio-group>
-      <br><br>
-    </div>
-    <el-dialog title="" width="600px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
-      :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
-      <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
-        <zj-form-module :title="formDialogTitles[formDialogType]" label-width="120px" :showPackUp="false"
-          :form-data="formData" :form-items="formItems">
-        </zj-form-module>
-      </zj-form-container>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="formCancel">取 消</el-button>
-        <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
-      </div>
-    </el-dialog>
-  </template-page>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<template-page v-if="activeKey == 'list'" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+			  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+			  :operation="operation()" :exportList="exportList">
+				<div slot="moreSearch">
+				  <el-radio-group v-model="type" size="mini" @change="changeType">
+				    <el-radio-button :label="''">全部</el-radio-button>
+				    <el-radio-button :label="true">开启</el-radio-button>
+				    <el-radio-button :label="false">禁用</el-radio-button>
+				  </el-radio-group>
+				  <br><br>
+				</div>
+			</template-page>
+			<div v-if="~['add', 'edit', 'detail'].indexOf(activeKey)">
+				<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+				  <zj-form-module title="" label-width="110px" :showPackUp="false"
+				    :form-data="formData" :form-items="formItems">
+				  </zj-form-module>
+				</zj-form-container>
+				<div slot="footer" class="dialog-footer">
+				  <el-button size="mini" @click="data.removeTab()">取 消</el-button>
+				  <el-button v-if="formDialogType !== 2" size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -65,6 +68,8 @@ export default {
       brandList: [], // 品牌列表
       mainList: [], // 一级分类列表
       smallList: [], // 二级分类列表
+			formType: 'add',
+			formVisible: false,
     }
   },
   computed: {
@@ -75,7 +80,7 @@ export default {
 				[
 					this.optionsEvensAuth("add", {
 						click: () => {
-							this.addData()
+							this.openForm('add')
 						}
 					})
 				],
@@ -107,7 +112,7 @@ export default {
     formItems() {
       return [
         {
-          md: 24,
+          md: 6,
           isShow: true,
           name: 'el-select',
           options: this.brandList,
@@ -119,7 +124,7 @@ export default {
           }
         },
         {
-          md: 24,
+          md: 6,
           isShow: true,
           name: 'el-select',
           options: this.mainList,
@@ -146,7 +151,7 @@ export default {
           }
         },
         {
-          md: 24,
+          md: 6,
           isShow: true,
           name: 'el-select',
           options: this.smallList,
@@ -157,7 +162,7 @@ export default {
             rules: [...required]
           }
         }, {
-          md: 24,
+          md: 6,
           isShow: true,
           name: 'el-input',
           attributes: { placeholder: '请输入', disabled: this.formDialogType == 2, },
@@ -166,19 +171,9 @@ export default {
             prop: 'content1',
             rules: [...required]
           }
-        }, {
-          md: 24,
-          isShow: true,
-          name: 'el-input',
-          attributes: { placeholder: '请输入', type: "textarea", disabled: this.formDialogType == 2, },
-          formItemAttributes: {
-            label: '故障排除指引',
-            prop: 'content2',
-            rules: [...required]
-          }
         },
         {
-          md: 24,
+          md: 6,
           isShow: true,
           name: 'el-radio',
           options: [{ label: "开启", value: true }, { label: "禁用", value: false }],
@@ -189,7 +184,17 @@ export default {
             rules: [...required]
           }
         },
-
+		{
+		  md: 24,
+		  isShow: true,
+		  name: 'el-input',
+		  attributes: { placeholder: '请输入', type: "textarea", rows: 5, disabled: this.formDialogType == 2, },
+		  formItemAttributes: {
+		    label: '故障排除指引',
+		    prop: 'content2',
+		    rules: [...required]
+		  }
+		}
       ]
     }
   },
@@ -228,21 +233,13 @@ export default {
 			detail: {
 				btnType: 'text',
 				click: ({ row, index, column }) => {
-					getMainDetail({ id: row.id }).then(res => {
-					  Object.assign(this.formData, res.data)
-					  this.formDialogType = 2
-					  this.openForm()
-					})
+					this.openForm('detail',row.id)
 				}
 			},
 			edit: {
 				btnType: 'text',
 				click: ({ row, index, column }) => {
-					getMainDetail({ id: row.id }).then(res => {
-					  Object.assign(this.formData, res.data)
-					  this.formDialogType = 1
-					  this.openForm()
-					})
+					this.openForm('edit',row.id)
 				}
 			},
 			del: {
@@ -260,11 +257,51 @@ export default {
 			}
 		})
 	},
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
+    // 取消 新增编辑
+    formCancel() {
+      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
+    					getMainDetail({ id }).then(res => {
+    					  Object.assign(this.formData, res.data)
+    					  this.initData()
+    					})
+            }else{
+    					this.formDialogType = 2
+							getMainDetail({ id }).then(res => {
+							  Object.assign(this.formData, res.data)
+							  this.initData()
+							})
+    				}
+          })
+        },
+        // 关闭时事件
+        closeEvent: () => {
+          
+        }
+      })
     },
-    openForm() {
+    initData() {
       Promise.all([
         getBrandList(),
         getClassifyList({
@@ -294,12 +331,7 @@ export default {
         this.formDialog = true;
       })
     },
-    formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
-      this.$data.formData = this.$options.data().formData
-      this.formDialog = false
-    },
-    formConfirm() {
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           saveMain({...this.formData, type:2}).then(res => {
@@ -307,7 +339,7 @@ export default {
               type: 'success',
               message: this.formDialogTitles[this.formDialogType] + `成功!`,
             })
-            this.formCancel()
+            cancel('list')
             this.$refs.pageRef.refreshList()
           })
         }

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

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