新版页面样式

src/components/tabPage/index.vue

@@ -1,3 +1,15 @@
+<template>
+  <zj-page-container>
+    <el-tabs v-model="activeKey" type="card" @tab-click="tabClick" closable @tab-remove="removeTab">
+      <el-tab-pane v-for="(item, index) in activeList" :key="item.key" :label="item.label || item.key"
+        :name="item.key"></el-tab-pane>
+    </el-tabs>
+    <zj-page-fill>
+      <slot :activeKey="showActiveKey" />
+    </zj-page-fill>
+  </zj-page-container>
+</template>
+
 <script>
 export default {
   name: "TabPage",
@@ -10,40 +22,80 @@ export default {
   data() {
     return {
       activeKey: this?.defaultActives?.length ? this?.defaultActives?.[0]?.key : "",
+      oldActiveKey: this?.defaultActives?.length ? this?.defaultActives?.[0]?.key : "",
       activeList: [...this.defaultActives]
     };
   },
+  computed: {
+    showActiveKey() {
+      var data = this.activeList.find(item => item.key == this.oldActiveKey)
+      return data?.activeKey || data?.key || ""
+    }
+  },
   methods: {
+    // 点击
     tabClick(tab) {
-      activeList.find(item => item.key == tab)?.triggerEvent()
+      if (this.oldActiveKey != (tab.name || tab)) {
+        this.activeList.find(item => item.key == this.oldActiveKey)?.closeEvent?.()
+        this.$nextTick(() => {
+          this.activeList.find(item => item.key == (tab.name || tab))?.triggerEvent?.()
+          this.$nextTick(() => {
+            this.activeKey = (tab.name || tab)
+            this.oldActiveKey = this.activeKey
+          })
+        })
+      }
     },
+    // 添加
     addTab(tabObj) {
       if (tabObj.key === undefined) {
         console.error("缺少")
         return
       }
+      for (var i = 0; i < this.activeList.length; i++) {
+        if (this.activeList[i].key === tabObj.key) {
+          this.activeList.splice(i, 1, tabObj);
+          this.$nextTick(() => {
+            this.tabClick(tabObj.key)
+          })
+          return
+        }
+      }
       this.activeList.push(tabObj)
-    }
-  },
-  render(h) {
-    console.log(this, this.activeKey, "-------------")
-    return (
-      <zj-page-container>
-        <el-tabs value={this.activeKey} onInput={(val) => { this.activeKey = val }} type="card" tab-click={this.tabClick}>
-          {this.activeList.map(item => <el-tab-pane label={item.label || item.key} name={item.key}></el-tab-pane>)}
-        </el-tabs>
-        <zj-page-fill>
-          {
-            this?.$slots?.default?.map(vnode => {
-                console.log(vnode,"00000000")
-                return <vnode activeKey={this.activeKey}/>
-              })
+      this.$nextTick(() => {
+        this.tabClick(tabObj.key)
+      })
+    },
+    // 删除
+    removeTab(tab) {
+      var i;
+      for (i = 0; i < this.activeList.length; i++) {
+        if (this.activeList[i].key === tab) {
+          if (this.activeList[i].essential) {
+            this.$message.warning(`${this.activeList[i].label || this.activeList[i].key}是必须页面不能删除！`)
+            return
           }
-        </zj-page-fill>
-      </zj-page-container>
-    );
+          this.activeList[i]?.closeEvent?.()
+          this.activeList.splice(i, 1);
+          break
+        }
+      }
+      if (this.activeList[i]) {
+        this.tabClick(this.activeList[i].key)
+        return
+      }
+      if (this.activeList[i - 1]) {
+        this.tabClick(this.activeList[i - 1].key)
+        return
+      }
+      this.tabClick("")
+    },
   },
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+::v-deep .el-tabs__header{
+  margin: 0 0 0 0 !important;
+}
+</style>

src/views/setting/departmentManage/index.vue

@@ -1,6 +1,108 @@
 <template>
-  <tabPage :defaultActives="[{ key: '1iuh', label: '测试', triggerEvent: () => { } }]">
-    <div>12345</div>
+  <tabPage ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+    <template slot-scope="{activeKey}">
+      <div class="app-container">
+        <div v-if="activeKey == 'list'" class="mymain-container">
+          <div>
+            <el-select v-model="value1" multiple placeholder="显示层级">
+              <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+            <span style="display: inline-block; width: 220px; margin-left: 10px"><el-input v-model="input"
+                placeholder="模糊搜索"></el-input></span>
+          </div>
+
+          <div class="table">
+            <el-table :data="showList" border>
+              <el-table-column prop="type" label="级别" width="70">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.type == 'A'" type="success">平台</el-tag>
+                  <el-tag v-if="scope.row.type == 'B'">商户</el-tag>
+                  <el-tag v-if="scope.row.type == 'C'" type="warning">网点</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column prop="name" label="网点名称"> </el-table-column>
+              <el-table-column prop="" label="结构">
+                <template slot-scope="scope">
+                  {{ scope.row.pname.join(' -> ') }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="状态" class-name="status-col" width="80">
+                <template slot-scope="scope">
+                  <el-tag :type="scope.row.status ? 'success' : 'danger'">{{
+                    scope.row.status ? '启用' : '禁用'
+                  }}</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="268" fixed="right">
+                <template slot-scope="scope">
+                  <el-button type="primary" size="mini" icon="el-icon-edit"
+                    @click="openMainForm('edit', scope.row.websitId)">编辑</el-button>
+                  <el-button type="primary" size="mini" icon="el-icon-edit"
+                    @click="handleDelete(scope.row.websitId)">删除</el-button>
+                  <el-button v-if="!!~['A', 'B'].indexOf(scope.row.type)"
+                    :type="({ A: 'primary', B: 'warning' })[scope.row.type]" plain size="mini" icon="el-icon-plus"
+                    @click="openMainForm('add', scope.row.websitId)">
+                    添加{{ scope.row.type
+                      == 'A' ? '商户' :
+                      scope.row.type == 'B' ? '网点' : '网点' }}
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="pagination clearfix">
+            <div class="fr">
+              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                :current-page="currentPage" :page-sizes="[15, 20, 30, 50]" :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper" :total="listTotal">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+        <div v-if="~['add', 'edit'].indexOf(activeKey)">
+          <el-form ref="mainForm" :model="mainForm" :rules="mainFormRules" label-position="top" label-width="80px">
+            <el-form-item label="上级" prop="parentId">
+              <el-cascader style="width: 100%" :options="dataList2"
+                :props="{ checkStrictly: true, value: 'websitId', label: 'name' }" v-model="mainForm.parentId" filterable
+                clearable>
+              </el-cascader>
+            </el-form-item>
+            <el-form-item label="名称" prop="name">
+              <el-input placeholder="请输入网点名称" v-model="mainForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="联系人" prop="linkName">
+              <el-input placeholder="请输入联系人名称" v-model="mainForm.linkName"></el-input>
+            </el-form-item>
+            <el-form-item label="联系人电话" prop="websitPhone">
+              <el-input placeholder="请输入联系人电话" maxlength="11" type="number" v-model="mainForm.websitPhone"></el-input>
+            </el-form-item>
+            <el-form-item label="地址" prop="address">
+              <div style="display:flex;">
+                <el-input placeholder="请选择地址" readonly style="margin-right: 20px;" v-model="mainForm.address"></el-input>
+                <geographicalPosi :formData="mainForm" @selectPosi="selectAddress"></geographicalPosi>
+              </div>
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+              <el-radio-group v-model="mainForm.status">
+                <el-radio :label="true">启用</el-radio>
+                <el-radio :label="false">禁用</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="增值服务" prop="isIncre">
+              <el-radio-group v-model="mainForm.isIncre">
+                <el-radio :label="true">启用</el-radio>
+                <el-radio :label="false">禁用</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="cancelMainForm">取 消</el-button>
+            <el-button type="primary" @click="submitMainForm">确 定</el-button>
+          </div>
+        </div>
+      </div>
+    </template>
   </tabPage>
 </template>
 
@@ -142,32 +244,50 @@ export default {
 
     // 打开 新增编辑 网点表单
     openMainForm(type, id) {
-      this.mainFormType = type
-      this.mainFormVisible = true
-      if (type == 'add') {
-        this.mainForm.parentId = id
-      } else {
-        this.editId = id
-        getDepartmentDetail({ id }).then(res => {
-          this.mainForm = {
-            parentId: res.data.parentId,
-            name: res.data.name,
-            linkName: res.data.linkName,
-            websitPhone: res.data.websitPhone,
-            lat: res.data.lat,
-            lng: res.data.lng,
-            address: res.data.address,
-            status: res.data.status,
-            isIncre: res.data.isIncre
-          }
-        })
-      }
+      this.$refs.tabPage.addTab({
+        // 对应显示的模块
+        activeKey: type,
+        // 唯一标识
+        key: type,
+        // 页签名称
+        label: ({ edit: "编辑", add: "新增" })[type],
+        // 打开时事件
+        triggerEvent: () => {
+          this.cancelMainForm()
+          this.$nextTick(()=>{
+            this.mainFormType = type
+            this.mainFormVisible = true
+            if (type == 'add') {
+              this.mainForm.parentId = id
+            } else {
+              this.editId = id
+              getDepartmentDetail({ id }).then(res => {
+                this.mainForm = {
+                  parentId: res.data.parentId,
+                  name: res.data.name,
+                  linkName: res.data.linkName,
+                  websitPhone: res.data.websitPhone,
+                  lat: res.data.lat,
+                  lng: res.data.lng,
+                  address: res.data.address,
+                  status: res.data.status,
+                  isIncre: res.data.isIncre
+                }
+              })
+            }
+          })
+        },
+        // 关闭时事件
+        closeEvent: () => {
+          
+        }
+      })
     },
 
     // 取消 新增编辑 网点表单
     cancelMainForm() {
       this.mainFormVisible = false
-      this.$refs.mainForm.resetFields()
+      this.$refs?.mainForm?.resetFields()
       this.mainForm.parentId = ''
       this.mainForm.address = ''
       this.mainForm.name = ''