feat: 添加区县接入系统弹窗

admin_2/src/assets/icon.js → admin_2/src/assets/icon.json

-export let iconList = [
+[
   "el-icon-platform-eleme",
   "el-icon-eleme",
   "el-icon-delete-solid",
@@ -278,5 +278,5 @@ export let iconList = [
   "el-icon-potato-strips",
   "el-icon-lollipop",
   "el-icon-ice-cream-square",
-  "el-icon-ice-cream-round",
-];
+  "el-icon-ice-cream-round"
+]

admin_2/src/components/autoRegister/YSwitch.vue

+<template>
+  <div>
+    <el-switch
+      :value="value"
+      class="y-switch"
+      :active-value="activeValue"
+      :inactive-value="inactiveValue"
+      v-bind="$attrs"
+      v-on="$listeners"
+      @change="handlechange"
+    >
+    </el-switch>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "YSwitch",
+  model: {
+    prop: "value",
+    event: "change",
+  },
+  props: {
+    value: {
+      default: 0,
+    },
+    activeValue: {
+      default: 1,
+    },
+    inactiveValue: {
+      default: 0,
+    },
+  },
+  methods: {
+    handlechange(val) {
+      this.$emit("change", val);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+:deep(.el-switch) {
+  .el-switch__label {
+    position: absolute;
+    display: none;
+    color: #fff;
+  }
+  .el-switch__label--right {
+    z-index: 1;
+    left: 0px; /*不同场景下可能不同，自行调整*/
+  }
+  .el-switch__label--left {
+    z-index: 1;
+    right: 0px; /*不同场景下可能不同，自行调整*/
+  }
+  .el-switch__label.is-active {
+    display: block;
+  }
+  .el-switch__core,
+  .el-switch .el-switch__label {
+    width: 60px !important; /*开关按钮的宽度大小*/
+  }
+}
+</style>

admin_2/src/pages/system/access/Access.vue

@@ -59,17 +59,25 @@
       :title="title"
       @addSuccess="getAccessList"
     ></AddAccess>
+    <AccessSystem
+      ref="AccessSystem"
+      :show.sync="accessShow"
+      :systemList="systemList"
+      @success="getAccessList"
+    ></AccessSystem>
   </div>
 </template>
 
 <script>
 import TableHeader from "@/components/TableHeader.vue";
 import AddAccess from "./components/AddAccess.vue";
-import { getAccessList, delAccess } from "@/api/system";
+import AccessSystem from "./components/AccessSystem.vue";
+import { getAccessList, delAccess, getSystemList } from "@/api/system";
 export default {
   components: {
     TableHeader,
     AddAccess,
+    AccessSystem,
   },
   data() {
     return {
@@ -116,7 +124,22 @@ export default {
           },
         },
         {
-          label: "区域接入系统",
+          label: "接入系统",
+          align: "center",
+          formatter: (row) => {
+            if (row.accessSystemList && row.accessSystemList.length) {
+              return row.accessSystemList.map((v) => {
+                return (
+                  <el-tag type="info" size="small" class="mr-2">
+                    {v.systemName}
+                  </el-tag>
+                );
+              });
+            }
+          },
+        },
+        {
+          label: "系统标签",
           align: "center",
           formatter: (row) => {
             if (row.tag) {
@@ -161,10 +184,16 @@ export default {
         {
           label: "操作",
           align: "center",
-          width: "120",
+          width: "180",
           formatter: (row) => {
             return (
               <div class="flex justify-center gap-4">
+                <span
+                  class="primary cursor-pointer"
+                  onClick={() => this.accessSystem(row)}
+                >
+                  接入系统
+                </span>
                 <span
                   class="primary cursor-pointer"
                   onClick={() => this.handleEdit(row)}
@@ -194,13 +223,28 @@ export default {
       show: false,
       title: "新增",
       dict: {}, // 字典
+      systemList: [],
+      accessShow: false,
+      areaInfo: {},
     };
   },
   created() {
+    this.getSystemList();
     this.getAccessList();
   },
   computed: {},
   methods: {
+    // 获取区域系统列表
+    async getSystemList() {
+      let res = await getSystemList({
+        page: 1,
+        size: -1,
+      });
+      if (res.data.code == 1) {
+        let { data } = res.data.data;
+        this.systemList = data;
+      }
+    },
     // 获取接入区域列表
     async getAccessList() {
       this.loading = true;
@@ -282,6 +326,10 @@ export default {
           console.log("取消成功！");
         });
     },
+    accessSystem(row) {
+      this.$refs.AccessSystem.onAdd(row);
+      this.accessShow = true;
+    },
   },
 };
 </script>

admin_2/src/pages/system/access/components/AccessSystem.vue

+<template>
+  <el-drawer
+    :title="`区县接入系统-${areaInfo.areaName}`"
+    :visible.sync="drawer"
+    size="40%"
+    @close="handleClose"
+  >
+    <div class="main w-full">
+      <el-button size="small" type="primary" @click="addSystem">添加</el-button>
+      <el-table :data="accessSystemList" style="width: 100%">
+        <el-table-column type="index" :index="1" label="序号" align="center">
+        </el-table-column>
+        <el-table-column prop="systemName" align="center" label="系统名称">
+          <template slot-scope="scope">
+            <el-input
+              size="small"
+              placeholder="请输入"
+              v-model="scope.row.systemName"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column prop="systemCode" align="center" label="系统编码">
+          <template slot-scope="scope">
+            <el-input
+              size="small"
+              placeholder="请输入"
+              v-model="scope.row.systemCode"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="accessTime"
+          align="center"
+          label="接入日期"
+          width="220"
+        >
+          <template slot-scope="scope">
+            <el-date-picker
+              style="width: 150px"
+              size="small"
+              v-model="scope.row.accessTime"
+              type="date"
+              placeholder="选择日期"
+              value-format="timestamp"
+            >
+            </el-date-picker>
+          </template>
+        </el-table-column>
+        <el-table-column
+          width="80"
+          align="center"
+          prop="enabled"
+          label="启\停用"
+        >
+          <template slot-scope="scope">
+            <YSwitch
+              active-text="启用"
+              inactive-text="停用"
+              v-model="scope.row.enabled"
+            ></YSwitch>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" width="60" prop="enabled" label="删除">
+          <template slot-scope="scope">
+            <i
+              class="el-icon-remove delete cursor-pointer text-[24px]"
+              @click="delSystem(scope)"
+            ></i>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="footer">
+      <el-button size="small" @click="handleClose">取 消</el-button>
+      <el-button size="small" @click="handleReset">重 置</el-button>
+      <el-button
+        size="small"
+        type="primary"
+        :loading="loading"
+        @click="handleOk"
+        >确 定</el-button
+      >
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { saveAccess, deleteSystem } from "@/api/system";
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    systemList: {
+      required: true,
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      form: {
+        systemName: "",
+        systemCode: "",
+        accessTime: "",
+        enabled: 1,
+      },
+      accessSystemList: [],
+      areaInfo: {},
+    };
+  },
+  computed: {
+    drawer: {
+      get() {
+        return this.show;
+      },
+      set(val) {
+        this.$emit("update:show", val);
+      },
+    },
+  },
+
+  methods: {
+    addSystem() {
+      let row = this.$cloneDeep(this.form);
+      this.accessSystemList.push(row);
+    },
+    handleClose() {
+      this.$resetForm("form");
+      this.drawer = false;
+    },
+    handleReset() {
+      this.$resetForm("form");
+      this.drawer = false;
+    },
+
+    onAdd(row) {
+      this.areaInfo = row;
+      this.accessSystemList = this.areaInfo.accessSystemList || [];
+    },
+    async handleOk() {
+      this.loading = true;
+      // this.accessSystemList.forEach((v) => {
+      //   v.accessId = this.areaInfo.id;
+      // });
+      this.areaInfo.accessSystemList = this.accessSystemList;
+      let res = await saveAccess(this.areaInfo);
+      this.loading = false;
+      let { code, msg } = res.data;
+      if (code === 1) {
+        this.$message.success(msg);
+        this.$emit("success");
+        this.handleClose();
+      }
+    },
+    async delSystem({ row, $index }) {
+      if (row.id) {
+        let res = await deleteSystem({ id: row.id });
+        if (res.data.code == 1) {
+          this.$message.success(res.data.msg);
+        }
+      }
+      this.accessSystemList.splice($index, 1);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+:deep(.el-drawer__body) {
+  padding: 0px !important;
+  display: flex;
+  flex-direction: column;
+}
+.main {
+  padding: 20px;
+  flex: 1;
+  overflow-y: auto;
+}
+.footer {
+  width: 100%;
+  padding: 20px;
+  border-top: 1px solid #ececec;
+  background-color: #fff;
+  text-align: right;
+}
+</style>

admin_2/src/pages/system/menu/Menu.vue

@@ -90,20 +90,20 @@ export default {
         //   align: "center",
         //   reserveSelection: true,
         // },
-        {
-          label: "序号",
-          type: "index",
-          width: "55",
-          align: "center",
-          index: (index) => {
-            return (this.current - 1) * this.size + index + 1;
-          },
-        },
         // {
-        //   label: "树形展开",
-        //   width: "80",
+        //   label: "序号",
+        //   type: "index",
+        //   width: "55",
         //   align: "center",
+        //   index: (index) => {
+        //     return (this.current - 1) * this.size + index + 1;
+        //   },
         // },
+        {
+          label: "树形展开",
+          width: "80",
+          align: "center",
+        },
         {
           label: "菜单名称",
           prop: "name",

admin_2/src/pages/system/menu/components/AddMenu.vue

@@ -94,7 +94,7 @@
                 'cursor-pointer',
                 { active: form.imgPath == v },
               ]"
-              v-for="(v, i) in iconList"
+              v-for="(v, i) in iconJson"
               :key="i"
               @click="form.imgPath = v"
             >
@@ -116,7 +116,7 @@
 
 <script>
 import { saveMenu } from "@/api/system";
-import { iconList } from "@/assets/icon";
+import iconJson from "@/assets/icon.json";
 export default {
   components: {},
   props: {
@@ -143,7 +143,7 @@ export default {
   },
   data() {
     return {
-      iconList,
+      iconJson,
       form: {
         name: "",
         parentId: 0,

admin_2/src/router/index.js

@@ -149,15 +149,15 @@ const routes = [
               icon: "el-icon-set-up",
             },
           },
-          {
-            path: "/system/areasystem",
-            component: () => import("@/pages/system/areaSystem/AreaSystem.vue"),
-            meta: {
-              activeMenu: "/system",
-              title: "区县系统",
-              icon: "el-icon-monitor",
-            },
-          },
+          // {
+          //   path: "/system/areasystem",
+          //   component: () => import("@/pages/system/areaSystem/AreaSystem.vue"),
+          //   meta: {
+          //     activeMenu: "/system",
+          //     title: "区县系统",
+          //     icon: "el-icon-monitor",
+          //   },
+          // },
           {
             path: "/system/user",
             component: () => import("@/pages/system/user/User.vue"),
@@ -192,7 +192,7 @@ const routes = [
           //   meta: {
           //     activeMenu: "/system",
           //     title: "菜单管理",
-          //     icon: "el-icon-box",
+          //     icon: "el-icon-guide",
           //   },
           // },
           {