feat: 增加资源信息页面

admin_2/src/api/system.js

@@ -92,3 +92,48 @@ export const getlog = (params) => {
     params,
   });
 };
+
+/**
+ *  资源信息
+ */
+
+// 获取资源信息列表
+export const getResourceList = (data) => {
+  return request({
+    url: `/bill/resource/list`,
+    method: "post",
+    data,
+  });
+};
+// 获取资源信息详情
+export const getResourceDetail = (params) => {
+  return request({
+    url: `/bill/resource/info`,
+    method: "get",
+    params,
+  });
+};
+// 添加资源信息
+export const saveResource = (data) => {
+  return request({
+    url: `/bill/resource/save`,
+    method: "post",
+    data,
+  });
+};
+// 删除资源信息
+export const deleteResource = (params) => {
+  return request({
+    url: `/bill/resource/delete`,
+    method: "get",
+    params,
+  });
+};
+// 刷新资源
+export const refreshResource = (data) => {
+  return request({
+    url: `/bill/resource/refreshUrl`,
+    method: "post",
+    data,
+  });
+};

admin_2/src/layouts/Layouts.vue

@@ -33,7 +33,7 @@ export default {
     return {};
   },
   created() {
-    // this.getSiteTree();
+    this.getSiteTree();
   },
   methods: {
     ...mapMutations("user", ["SET_areaTree"]),

admin_2/src/pages/system/resourceManage/ResourceManage.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="authType">
+            <el-select
+              size="small"
+              style="width: 150px"
+              v-model="searchForm.authType"
+            >
+              <el-option label="全部认证类型" value=""></el-option>
+              <el-option
+                v-for="(v, key) in dict.authType"
+                :key="key"
+                :label="v"
+                :value="key"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="name">
+            <el-input
+              size="small"
+              v-model="searchForm.name"
+              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="getResourceList"
+    ></Pagination>
+    <!-- 新增 -->
+    <AddResource
+      ref="AddResource"
+      :dict="dict"
+      :show.sync="show"
+      :title="title"
+      @success="getResourceList"
+    ></AddResource>
+  </div>
+</template>
+
+<script>
+import TableHeader from "@/components/TableHeader.vue";
+import Pagination from "@/components/Pagination.vue";
+import { getResourceList, deleteResource } from "@/api/system";
+import AddResource from "./components/AddResource.vue";
+export default {
+  components: {
+    TableHeader,
+    Pagination,
+    AddResource,
+  },
+  data() {
+    return {
+      loading: false,
+      show: false,
+      title: "新增资源",
+      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: "name",
+          align: "center",
+        },
+        {
+          label: "资源",
+          prop: "url",
+          align: "center",
+          formatter: (row) => {
+            if (row.url) {
+              return row.url.split(",").map((v) => {
+                return (
+                  <el-tag class="mb-2 mr-2" type="info" size="mini">
+                    {v}
+                  </el-tag>
+                );
+              });
+            }
+          },
+        },
+        {
+          label: "认证类型",
+          prop: "authType",
+          align: "center",
+          formatter: (row) => {
+            return this.dict.authType[row.authType];
+          },
+        },
+        {
+          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: {
+        authType: "",
+        name: "",
+      },
+      total: 0,
+      size: 10,
+      current: 1,
+      tableData: [],
+      selectionRows: [],
+      dict: {},
+    };
+  },
+  created() {
+    this.getResourceList();
+  },
+  methods: {
+    // 获取资源列表
+    async getResourceList() {
+      this.loading = true;
+      let res = await getResourceList({
+        page: this.current,
+        size: this.size,
+        ...this.searchForm,
+        name: `%${this.searchForm.name}%`,
+      });
+      this.loading = false;
+      if (res.data.code == 1) {
+        let { data, total, dict } = res.data.data;
+        if (!data.length && this.current > 1) {
+          this.current -= 1;
+          this.getResourceList();
+        }
+        this.total = total;
+        this.tableData = data;
+        this.dict = dict;
+      }
+    },
+    handleAdd() {
+      this.title = "新增资源";
+      this.$refs.AddResource.onAdd();
+      this.show = true;
+    },
+    handleSelectionChange(rows) {
+      this.selectionRows = rows;
+    },
+    handleDelAll() {
+      if (!this.selectionRows.length) {
+        this.$message.warning("请先勾选数据");
+        return;
+      }
+      let ids = this.selectionRows.map((v) => v.id).join(",");
+      this.handleDel(ids);
+    },
+    handleSearch() {
+      this.current = 1;
+      this.getResourceList();
+    },
+    handleReset() {
+      this.current = 1;
+      this.$resetForm("searchForm");
+      this.$clearSelection("MyTable");
+      this.getResourceList();
+    },
+
+    handleEdit(row) {
+      let data = this.$cloneDeep(row);
+      this.title = "编辑资源";
+      this.$refs.AddResource.onEdit(data);
+      this.show = true;
+    },
+    handleDel(id) {
+      this.$confirm("此操作将删除所选数据，是否继续？", "系统提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        cancelButtonClass: "btn-custom-cancel",
+        type: "warning",
+      })
+        .then(async () => {
+          let res = await deleteResource({ id });
+          let { code, msg } = res.data;
+          if (code === 1) {
+            this.$message.success(msg);
+            this.getResourceList();
+            this.$clearSelection("MyTable");
+          }
+        })
+        .catch(() => {
+          console.log("取消成功！");
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

admin_2/src/pages/system/resourceManage/components/AddResource.vue

+<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="name">
+          <el-input v-model="form.name" placeholder="请输入资源名称"></el-input>
+        </el-form-item>
+        <el-form-item label="权限类型" prop="authType">
+          <el-select v-model="form.authType">
+            <el-option
+              v-for="(v, key) in dict.authType"
+              :key="key"
+              :label="v"
+              :value="Number(key)"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item class="url-params-box" label="链接地址">
+          <el-form-item
+            class="url-params"
+            v-for="(v, i) in form.urls"
+            :key="i"
+            :prop="`urls.${i}.value`"
+            :rules="[
+              { required: true, validator: validatorUrl, trigger: 'blur' },
+            ]"
+          >
+            <el-input
+              class="mr-[10px]"
+              v-model="v.value"
+              placeholder="请输入链接地址"
+            />
+            <div class="flex">
+              <el-button type="primary" @click="changeParams(i, 'add')">
+                <i class="el-icon-plus"></i>
+              </el-button>
+              <el-button
+                type="danger"
+                v-if="i > 0"
+                @click="changeParams(i, 'remove')"
+                ><i class="el-icon-minus"></i
+              ></el-button>
+            </div>
+          </el-form-item>
+        </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"
+          :loading="loading"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { saveResource } from "@/api/system";
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+      default: "",
+    },
+    show: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    dict: {
+      type: Object,
+      required: true,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      form: {
+        name: "",
+        authType: "",
+        url: "",
+        urls: [
+          {
+            value: "",
+          },
+        ],
+      },
+      rules: {
+        name: [{ required: true, message: "请输入资源名称", trigger: "blur" }],
+        authType: [
+          { required: true, message: "请选择权限类型", trigger: "change" },
+        ],
+      },
+    };
+  },
+  computed: {
+    Visible: {
+      get() {
+        return this.show;
+      },
+      set(val) {
+        this.$emit("update:show", val);
+      },
+    },
+  },
+  created() {},
+  methods: {
+    // 确定
+    handleOk() {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          this.loading = true;
+          let res = await saveResource({
+            ...this.form,
+            url: this.form.urls.map((v) => v.value).join(","),
+          });
+          let { code, msg } = res.data;
+          this.loading = false;
+          if (code == 1) {
+            this.$message.success(msg);
+            this.$emit("success");
+            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 };
+        let arr = [];
+        if (this.form.url) {
+          arr = this.form.url.split(",").map((v) => {
+            return {
+              value: v,
+            };
+          });
+        }
+        this.$set(this.form, "urls", arr);
+      }, 10);
+    },
+    // 重置
+    handleRest() {
+      this.$resetForm("form");
+      this.$set(this.form, "urls", [{ value: "" }]);
+    },
+    // 关闭
+    handleClose() {
+      this.$resetForm("form");
+      this.Visible = false;
+    },
+    // 判断是否存在链接
+    isRepeat(val) {
+      return this.form.urls.filter((v) => v.value == val).length > 1;
+    },
+    // 校验链接地址
+    validatorUrl(rule, value, callback) {
+      if (!value) {
+        callback(new Error("请输入链接"));
+      } else if (this.isRepeat(value)) {
+        callback(new Error("重复的链接地址"));
+      } else {
+        callback();
+      }
+    },
+    changeParams(index, type) {
+      if (type == "add") {
+        let obj = {
+          value: "",
+        };
+        if (this.form.urls.some((v) => !v.value)) {
+          this.$message.warning("请先完成前面地址的填写");
+          return;
+        }
+        this.form.urls.splice(index + 1, 0, obj);
+      } else {
+        this.form.urls.splice(index, 1);
+      }
+      // this.$forceUpdate();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+:deep(.el-select) {
+  width: 100%;
+}
+:deep(.url-params) {
+  .el-form-item__content {
+    display: flex;
+  }
+}
+</style>

admin_2/src/router/index.js

@@ -133,8 +133,18 @@ const routes = [
         meta: {
           title: "系统设置",
         },
-        redirect: "/system/parameter",
+        redirect: "/system/resourcemanage",
         children: [
+          {
+            path: "/system/resourcemanage",
+            component: () =>
+              import("@/pages/system/resourceManage/ResourceManage.vue"),
+            meta: {
+              activeMenu: "/system",
+              title: "资源信息",
+              icon: "el-icon-box",
+            },
+          },
           {
             path: "/system/parameter",
             component: () => import("@/pages/system/parameter/Parameter.vue"),

admin_2/src/utils/request.js

@@ -34,7 +34,7 @@ axios.interceptors.response.use(
     if (response.data.code !== undefined && response.data.msg !== undefined) {
       // 取出数据
       let { code, msg } = response.data;
-      if (code === -1) {
+      if (code == -1) {
         message.error({
           content: msg,
           maxCount: 1,