perf: 优化

admin_2/src/api/system.js

@@ -137,3 +137,39 @@ export const refreshResource = (data) => {
     data,
   });
 };
+/**
+ *  区县接入系统
+ */
+
+// 获取接入区县列表
+export const getAccessList = (data) => {
+  return request({
+    url: `/bill/access/list`,
+    method: "post",
+    data,
+  });
+};
+// 查看接入区县
+export const getAccessInfo = (params) => {
+  return request({
+    url: `/bill/access/info`,
+    method: "get",
+    params,
+  });
+};
+// 保存编辑接入区县
+export const saveAccess = (data) => {
+  return request({
+    url: `/bill/access/save`,
+    method: "post",
+    data,
+  });
+};
+// 删除接入区县
+export const delAccess = (params) => {
+  return request({
+    url: `/bill/access/delete`,
+    method: "get",
+    params,
+  });
+};

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

+<template>
+  <div class="h-full w-full">
+    <TableHeader>
+      <div slot="left">
+        <el-button size="small" type="primary" @click="handleAdd"
+          >新增</el-button
+        >
+        <el-button size="small" type="danger" @click="handleDelAll"
+          >批量删除</el-button
+        >
+      </div>
+      <div slot="right">
+        <el-form ref="searchForm" :model="searchForm" inline>
+          <el-form-item prop="type">
+            <el-select
+              size="small"
+              style="width: 150px"
+              v-model="searchForm.type"
+            >
+              <el-option label="按参数名称" value="name"></el-option>
+              <el-option label="按二级组织" value="secondOrganize"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="keyword">
+            <el-input
+              size="small"
+              v-model="searchForm.keyword"
+              style="width: 200px"
+              class="ml10 mr10"
+              placeholder="请输入关键字搜索"
+              @keyup.native.enter="handleSearch"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="small" type="primary" @click="handleSearch"
+              >搜 索</el-button
+            >
+          </el-form-item>
+          <el-form-item>
+            <el-button size="small" @click="handleReset">重 置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </TableHeader>
+    <!-- 表格 -->
+    <div class="table-content">
+      <y-table
+        ref="MyTable"
+        :loading="loading"
+        :data="tableData"
+        :column="column"
+        border
+        tooltip-effect="dark"
+        :max-height="600"
+        :row-key="(row) => row.id"
+        @selection-change="handleSelectionChange"
+      ></y-table>
+    </div>
+    <Pagination
+      :total="total"
+      :current.sync="current"
+      :size.sync="size"
+      @get="getAccessList"
+    ></Pagination>
+    <!-- 新增 -->
+    <AddAccess
+      ref="AddAccess"
+      :addVisible.sync="show"
+      :title="title"
+    ></AddAccess>
+  </div>
+</template>
+
+<script>
+import TableHeader from "@/components/TableHeader.vue";
+import AddAccess from "./components/AddAccess.vue";
+import { getAccessList, delAccess } from "@/api/system";
+export default {
+  components: {
+    TableHeader,
+    AddAccess,
+  },
+  data() {
+    return {
+      column: [
+        {
+          label: "全选",
+          type: "selection",
+          width: "55",
+          align: "center",
+          reserveSelection: true,
+        },
+        {
+          label: "序号",
+          type: "index",
+          width: "55",
+          align: "center",
+          index: (index) => {
+            return (this.current - 1) * this.size + index + 1;
+          },
+        },
+
+        {
+          label: "区域名称",
+          prop: "areaName",
+          align: "center",
+        },
+        {
+          label: "区域编码",
+          prop: "firstOrganize",
+          align: "areaCode",
+        },
+        {
+          label: "背景图片",
+          prop: "bigPath",
+          align: "center",
+        },
+        {
+          label: "区域接入系统",
+          align: "center",
+          formatter: (row) => {
+            if (row.accessSystemList.length) {
+              return row.accessSystemList.map((item) => {
+                return <el-tag type="info">{item.systemName}</el-tag>;
+              });
+            }
+          },
+        },
+        {
+          label: "标签",
+          prop: "tag",
+          align: "center",
+        },
+        {
+          label: "排序",
+          prop: "sort",
+          align: "center",
+        },
+
+        {
+          label: "备注",
+          prop: "remark",
+          align: "center",
+        },
+        {
+          label: "操作",
+          align: "center",
+          width: "120",
+          formatter: (row) => {
+            return (
+              <div class="flex justify-center gap-4">
+                <span
+                  class="primary cursor-pointer"
+                  onClick={() => this.handleEdit(row)}
+                >
+                  编辑
+                </span>
+                <span
+                  class="delete cursor-pointer"
+                  onClick={() => this.handleDel(row.id)}
+                >
+                  删除
+                </span>
+              </div>
+            );
+          },
+        },
+      ],
+      searchForm: {
+        type: "name",
+        keyword: "",
+      },
+      tableData: [],
+      current: 1,
+      size: 10,
+      total: 0,
+      loading: false,
+      selectRows: [],
+      show: false,
+      title: "新增",
+      dict: {}, // 字典
+    };
+  },
+  created() {
+    this.getAccessList();
+  },
+  computed: {},
+  methods: {
+    // 获取接入区域列表
+    async getAccessList() {
+      let res = await getAccessList({
+        page: this.current,
+        size: this.size,
+        ...this.searchForm,
+      });
+      if (res.data.code == 1) {
+        let { data, total, dict } = res.data.data;
+        if (!data.length && this.current > 1) {
+          this.current -= 1;
+          this.getAccessList();
+        }
+        this.tableData = data;
+        this.total = total;
+        this.dict = dict;
+      }
+    },
+    // 批量移除
+    handleDelAll() {
+      if (!this.selectRows.length) {
+        this.$message.warning("请先勾选数据");
+        return;
+      }
+      let ids = this.selectRows.map((v) => v.id).join(",");
+      this.handleDel(ids);
+    },
+    // 搜索
+    handleSearch() {
+      this.current = 1;
+      this.$clearSelection("MyTable");
+      this.getAccessList();
+    },
+    // 重置
+    handleReset() {
+      this.current = 1;
+      this.$clearSelection("MyTable");
+      this.$resetForm("searchForm");
+      this.getAccessList();
+    },
+    // 选中
+    handleSelectionChange(select) {
+      this.selectRows = select;
+    },
+
+    // 新增
+    handleAdd() {
+      this.title = "新增";
+      this.$refs.AddAccess.onAdd();
+      this.show = true;
+    },
+    // 编辑
+    handleEdit(row) {
+      this.title = "编辑";
+      let data = this.$cloneDeep(row);
+      this.$refs.AddAccess.onEdit(data);
+      this.show = true;
+    },
+    // 移除
+    handleDel(id) {
+      this.$confirm("此操作将删除所选数据，是否继续？", "系统提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        cancelButtonClass: "btn-custom-cancel",
+        type: "warning",
+      })
+        .then(async () => {
+          let res = await delAccess({ id });
+          let { code, msg } = res.data;
+          if (code === 1) {
+            this.$message.success(msg);
+            this.getAccessList();
+            this.$clearSelection("MyTable");
+          }
+        })
+        .catch(() => {
+          console.log("取消成功！");
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

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

+el-dialog
+<template>
+  <div>
+    <el-dialog
+      :title="title"
+      :destroy-on-close="true"
+      :visible.sync="Visible"
+      width="30%"
+      @close="handleClose"
+      :close-on-click-modal="false"
+      top="10vh"
+    >
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        size="small"
+        label-width="100px"
+      >
+        <el-form-item label="区域" prop="areaName">
+          <InputTree
+            :treeData="initTree"
+            v-model="form.areaName"
+            @change="changeArea"
+          ></InputTree>
+        </el-form-item>
+        <el-form-item label="背景图片" prop="bigPath">
+          <el-upload
+            name="file"
+            accept="image/jpeg,image/png"
+            :file-list="fileList"
+            :action="api + '/bill/file/commonupload'"
+            list-type="picture-card"
+            :on-remove="handleRemoveImg"
+            :on-success="handleExampleImgSuccess"
+            :on-preview="handlePreview"
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0"></el-input-number>
+        </el-form-item>
+
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            resize="none"
+            :autosize="{ minRows: 3, maxRows: 3 }"
+            type="textarea"
+            placeholder="请输入备注"
+            v-model="form.remark"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="handleRest">重 置</el-button>
+        <el-button size="small" type="primary" @click="handleOk"
+          >确 定</el-button
+        >
+      </span>
+      <!-- 图片查看 -->
+      <el-image-viewer
+        v-if="preview"
+        :appendToBody="false"
+        :on-close="
+          () => {
+            (preview = false), (filepaths = []);
+          }
+        "
+        :url-list="filepaths"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import { saveAccess } from "@/api/system";
+import InputTree from "./InputTree.vue";
+export default {
+  components: {
+    InputTree,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+      default: "",
+    },
+    addVisible: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      api: process.env.VUE_APP_API_BASE_URL,
+      fileList: [],
+      preview: false,
+      filepaths: [],
+      form: {
+        areaName: "",
+        areaCode: "",
+        areaId: "",
+        siteId: "",
+        siteCode: "",
+        siteName: "",
+        latitude: "",
+        longitude: "",
+        type: "",
+        bigPath: "",
+        tag: "",
+        sort: 99,
+        remark: "",
+        icon: "",
+        accessSystemList: [],
+      },
+      rules: {
+        areaName: [
+          { required: true, message: "请选择区域", trigger: "change" },
+        ],
+        bigPath: [{ required: true, message: "请选择区域", trigger: "change" }],
+      },
+    };
+  },
+  computed: {
+    ...mapState("user", ["areaTree"]),
+    Visible: {
+      get() {
+        return this.addVisible;
+      },
+      set(val) {
+        this.$emit("update:addVisible", val);
+      },
+    },
+    initTree() {
+      return this.addAreaNameField(this.areaTree);
+    },
+  },
+  methods: {
+    // 确定
+    handleOk() {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          let res = await saveAccess(this.form);
+          let { code, msg } = res.data;
+          if (code === 1) {
+            this.$message.success(msg);
+            this.$emit("addSuccess");
+            this.handleClose();
+          }
+        }
+      });
+    },
+    // 新增
+    onAdd() {
+      Object.assign(this.form, this.$options.data().form);
+      this.form.id && this.$delete(this.form, "id");
+    },
+    // 编辑
+    onEdit(row) {
+      setTimeout(() => {
+        this.form = row;
+      }, 10);
+    },
+    // 重置
+    handleRest() {
+      this.$resetForm("form");
+    },
+    // 关闭
+    handleClose() {
+      this.$resetForm("form");
+      this.Visible = false;
+    },
+    changeArea(row) {
+      let {
+        areaName,
+        areaCode,
+        id,
+        label,
+        siteCode,
+        latitude,
+        longitude,
+        type,
+      } = row;
+      if (type == "area") {
+        this.form.areaId = id;
+        this.form.siteId = "";
+        this.form.siteName = "";
+      } else if (type == "site") {
+        this.form.areaId = "";
+        this.form.siteId = id;
+        this.form.siteName = label;
+      }
+      this.form.areaName = areaName;
+      this.form.areaCode = areaCode;
+      this.form.latitude = latitude;
+      this.form.longitude = longitude;
+      this.form.siteCode = siteCode;
+      this.form.type = type;
+    },
+    addAreaNameField(data) {
+      let arr = data;
+      arr.forEach((item) => {
+        if (!item.areaName) {
+          item.areaName = item.label;
+        }
+        if (item.children && item.children.length > 0) {
+          this.addAreaNameField(item.children);
+        }
+      });
+      return arr;
+    },
+    handleExampleImgSuccess(response, file, fileList) {
+      if (response.code && response.code == 1) {
+        let list = fileList.slice(-1);
+        this.fileList = list.map((v) => {
+          if (v.response) {
+            v.url = v.response.url;
+          }
+          return v;
+        });
+        this.form.bigPath = response.url;
+      } else {
+        let msg = response.msg || "上传失败";
+        this.$message.error(msg);
+      }
+    },
+    // 删除示例图片
+    handleRemoveImg() {
+      this.form.bigPath = "";
+      this.fileList = [];
+    },
+    // 预览
+    handlePreview(file) {
+      this.filepaths = [file.url];
+      this.preview = true;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+:deep(.el-select) {
+  width: 100%;
+}
+:deep(.el-cascader) {
+  width: 100%;
+}
+</style>

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

+<template>
+  <div>
+    <el-popover placement="bottom-start" trigger="click">
+      <el-tree
+        :data="treeData"
+        :props="defaultProps"
+        node-key="id"
+        ref="tree"
+        highlight-current
+        accordion
+        :expand-on-click-node="false"
+        :current-node-key="value"
+        @node-click="handleNodeClick"
+      ></el-tree>
+      <el-input
+        slot="reference"
+        :value="value"
+        placeholder="请选择区域"
+        clearable
+        @clear="handleClear"
+      ></el-input>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    treeData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    value: {
+      default: "",
+    },
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: "children",
+        label: "areaName",
+      },
+    };
+  },
+  methods: {
+    handleClear() {
+      this.$emit("input", "");
+      this.$emit("change", {});
+      this.$refs.tree.setCurrentKey(null);
+    },
+    handleNodeClick(row) {
+      this.$emit("input", row.areaName);
+      this.$emit("change", row);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

admin_2/src/router/index.js

@@ -133,8 +133,17 @@ const routes = [
         meta: {
           title: "系统设置",
         },
-        redirect: "/system/resourcemanage",
+        redirect: "/system/access",
         children: [
+          {
+            path: "/system/access",
+            component: () => import("@/pages/system/access/Access.vue"),
+            meta: {
+              activeMenu: "/system",
+              title: "区县接入",
+              icon: "el-icon-set-up",
+            },
+          },
           {
             path: "/system/resourcemanage",
             component: () =>