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

src/components/tabPage/index.vue

@@ -0,0 +1,101 @@
+<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",
+  props: {
+    defaultActives: {
+      type: Array,
+      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) {
+      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)
+      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
+          }
+          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>
+::v-deep .el-tabs__header{
+  margin: 0 0 0 0 !important;
+}
+</style>

src/main.js

@@ -73,6 +73,9 @@ AMap.initAMapApiLoader({
   plugins: ['AMap.Geocoder', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.DistrictSearch']
 })
 
+
+import tabPage from "@/components/tabPage/index.vue"
+Vue.component(tabPage.name, tabPage);
 // // 本地引用;
 // import ElementPlugins, { AMap } from '@packages'
 // Vue.use(ElementPlugins, {

src/views/setting/departmentManage/index.vue

@@ -1,107 +1,109 @@
 <template>
-  <div class="app-container">
-    <div 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>
+  <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 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>
-    </div>
-    <!-- 添加编辑网点 -->
-    <el-dialog :title="mainFormType == 'add' ? '添加' : '编辑'" :visible.sync="mainFormVisible" :show-close="false"
-      width="40%" :close-on-click-modal="false">
-      <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 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>
-        </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>
-    </el-dialog>
-  </div>
+    </template>
+  </tabPage>
 </template>
 
 <script>
@@ -242,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 = ''