弹窗修改

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

@@ -4,7 +4,7 @@
 			<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>
+			      <el-button v-if="$restrict('add')" size="small" type="primary" icon="el-icon-plus" @click="addOrEditParent('add1')">添加分类</el-button>
 			    </div>
 			    <div class="fr">
 			      <el-input placeholder="请输入分类名称进行搜索" v-model="screenForm.keyword" size="small" style="width: 240px;" clearable>
@@ -36,9 +36,9 @@
 			      </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-button type="primary" size="mini" icon="el-icon-plus" v-if="scope.row.level == 1 && $restrict('add')" @click="addOrEditChild('add2', scope.row.categoryId)"></el-button>
+			          <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level == 1 && $restrict('edit')" @click="addOrEditParent('edit1', scope.row.categoryId)"></el-button>
+			          <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level == 2 && $restrict('edit')" @click="addOrEditChild('edit2', scope.row.categoryId)"></el-button>
 			          <el-popconfirm v-if="$restrict('del')" style="margin-left: 10px;" title="确定删除吗？" @confirm="handleDelete(scope.row.categoryId)" >
 			            <el-button slot="reference" size="mini" icon="el-icon-delete"></el-button>
 			          </el-popconfirm>
@@ -245,7 +245,7 @@ export default {
 			// 唯一标识
 			key: type,
 			// 页签名称
-			label: ({ edit: "编辑一级分类", add: "添加一级分类" })[type],
+			label: ({ edit1: "编辑一级分类", add1: "添加一级分类" })[type],
 			// 打开时事件
 			triggerEvent: () => {
 				
@@ -294,14 +294,14 @@ export default {
           if(this.addParentFormType == 'edit') {
             params.categoryId = this.editParentId;
             editClassify(params).then(res => {
-				cancel()
+				cancel('list')
               this.cancelAddParentForm();
               this.getList();
               this.$successMsg('编辑成功');
             })
           }else {
             addClassify(params).then(res => {
-				cancel()
+				cancel('list')
               this.cancelAddParentForm();
               this.getList();
               this.$successMsg('添加成功');
@@ -334,7 +334,7 @@ export default {
 			// 唯一标识
 			key: type,
 			// 页签名称
-			label: ({ edit: "编辑二级分类", add: "添加二级分类" })[type],
+			label: ({ edit2: "编辑二级分类", add2: "添加二级分类" })[type],
 			// 打开时事件
 			triggerEvent: () => {
 				
@@ -378,7 +378,7 @@ export default {
     },
 
     // 提交 二级分类
-    submitAddChildForm() {
+    submitAddChildForm(cancel) {
       this.$refs.addChildForm.validate((valid) => {
         if (valid) {
           let params = {}
@@ -392,6 +392,7 @@ export default {
               sortNum: this.addChildForm.sort
             }
             editClassify(params).then(res => {
+				cancel('list')
               this.cancelAddChildForm();
               this.getList();
               this.$successMsg('编辑成功');
@@ -408,6 +409,7 @@ export default {
               }]
             }
             addClassify(params).then(res => {
+				cancel('list')
               this.cancelAddChildForm();
               this.getList();
               this.$successMsg('添加成功');

src/views/mallManagement/goods/classify_index/index.vue

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

src/views/mallManagement/goods/newclassify_index/index.vue

@@ -1,20 +1,23 @@
 <template>
-  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
-    :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
-    :operation="operation()" :exportList="exportList" :operationColumnWidth="160">
-    <el-dialog title="" width="500px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
-      :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
-      <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
-        <zj-form-module :title="formDialogTitles[formDialogType]" label-width="100px" :showPackUp="false"
-          :form-data="formData" :form-items="formItems">
-        </zj-form-module>
-      </zj-form-container>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="formCancel">取 消</el-button>
-        <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
-      </div>
-    </el-dialog>
-  </template-page>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<template-page v-if="activeKey == 'list'" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+			  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+			  :operation="operation()" :exportList="exportList" :operationColumnWidth="160">
+			</template-page>
+			<div v-if="~['add', 'edit'].indexOf(activeKey)">
+				<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+				  <zj-form-module title="" label-width="100px" :showPackUp="false"
+				    :form-data="formData" :form-items="formItems">
+				  </zj-form-module>
+				</zj-form-container>
+				<div slot="footer" class="dialog-footer">
+				  <el-button size="mini" @click="data.removeTab()">取 消</el-button>
+				  <el-button size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -57,6 +60,8 @@ export default {
         type: '',
         sortNum: '',
       },
+			formType: 'add',
+			formVisible: false,
     }
   },
   computed: {
@@ -67,7 +72,7 @@ export default {
 				[
 					this.optionsEvensAuth("add", {
 						click: () => {
-							this.addData()
+							this.openForm('add')
 						}
 					})
 				]
@@ -80,7 +85,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -90,7 +95,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -101,7 +106,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-radio',
         options: [
@@ -115,7 +120,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -157,11 +162,7 @@ export default {
 			edit: {  
 				btnType: 'text',
 				click: ({ row, index, column }) => {
-					getNewclassifyDetail({ newsCategoryId: row.goodsNewsCategoryId }).then(res => {
-						Object.assign(this.formData, res.data)
-						this.formDialogType = 1
-						this.openForm()
-					})
+					this.openForm('edit',row.goodsNewsCategoryId)
 				}
 			},
 			del: {
@@ -194,24 +195,47 @@ export default {
 			},
 		})
 	},
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
-      this.formDialog = true;
+    openForm(type, newsCategoryId) {
+      this.$refs.tabPage.addTab({
+      	// 对应显示的模块
+      	activeKey: type,
+      	// 唯一标识
+      	key: type,
+      	// 页签名称
+      	label: ({ edit: "编辑", add: "新增" })[type],
+      	// 打开时事件
+      	triggerEvent: () => {
+      		this.formCancel()
+      		this.$nextTick(()=>{
+      			this.formType = type
+      			this.formVisible = true
+      			if (type == 'add') {
+      				this.formDialogType = 0
+      			} else if(type == 'edit'){
+      				this.formDialogType = 1
+      				getNewclassifyDetail({ newsCategoryId  }).then(res => {
+      					Object.assign(this.formData, res.data)
+      				})
+      			}
+      		})
+      	},
+      	// 关闭时事件
+      	closeEvent: () => {
+      	
+      	}
+      })
     },
     formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
-      this.$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) {
           ([addNewclassify, editNewclassifyDetail][this.formDialogType])(this.formData).then(res => {
             this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
-            this.formCancel()
+            cancel('list')
             this.$refs.pageRef.refreshList()
           })
         }