系统通知和黑名单

src/api/system.js

@@ -0,0 +1,27 @@
+import { httpApp } from "@/plugins/axiosIndex";
+// import { object2QueryString } from "@/utils/utils";
+// import { pickBy } from "lodash-es";
+
+// black-list
+export function searchBlackList() {
+  return httpApp.post("/api/admin/user/query", {});
+}
+export function saveBlackItem(datas) {
+  return httpApp.post("/api/admin/user/query", datas);
+}
+export function deleteBlackItem(id) {
+  return httpApp.post("/api/admin/black/delete", { id });
+}
+// system-notice
+export function searchSystemNoice() {
+  return httpApp.post("/api/admin/user/query", {});
+}
+export function saveSystemNotice(datas) {
+  return httpApp.post("/api/admin/user/query", datas);
+}
+export function enableSystemNotice({ id, enable }) {
+  return httpApp.post("/api/admin/user/query", { id, enable });
+}
+// export function deleteSystemNotice(id) {
+//   return httpApp.post("/api/admin/black/delete", { id });
+// }

src/features/system/BlackList/BlackList.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="black-notice">
+    <div class="part-box-head">
+      <div class="part-box-head-left"><h1>黑名单设置</h1></div>
+    </div>
+    <div class="part-filter">
+      <div class="part-filter-form">
+        <div></div>
+        <div class="part-filter-form-action">
+          <el-button type="primary" icon="icon icon-add" @click="toAdd"
+            >新增</el-button
+          >
+        </div>
+      </div>
+    </div>
+
+    <el-table :data="tableData">
+      <el-table-column label="软件名称">
+        <span slot-scope="scope">{{ scope.row.name }}</span>
+      </el-table-column>
+      <el-table-column label="进程名称">
+        <span slot-scope="scope">{{ scope.row.code }}</span>
+      </el-table-column>
+      <el-table-column label="操作" width="100" fixed="right">
+        <div slot-scope="scope">
+          <el-button
+            size="mini"
+            type="danger"
+            plain
+            @click="toDelete(scope.row)"
+          >
+            删除
+          </el-button>
+        </div>
+      </el-table-column>
+    </el-table>
+
+    <ModifyBlackItem
+      ref="ModifyBlackItem"
+      :instance="curRow"
+      @modified="searchForm"
+    />
+  </div>
+</template>
+
+<script>
+import { searchBlackList, deleteBlackItem } from "@/api/system";
+import ModifyBlackItem from "./ModifyBlackItem.vue";
+
+export default {
+  name: "BlackList",
+  components: {
+    ModifyBlackItem,
+  },
+  data() {
+    return {
+      tableData: [],
+      curRow: {},
+    };
+  },
+  async created() {
+    this.searchForm();
+  },
+  methods: {
+    async searchForm() {
+      const res = await searchBlackList();
+      this.tableData = res.data.data;
+    },
+    toAdd() {
+      this.curRow = {};
+      this.$refs.ModifyBlackItem.open();
+    },
+    async toDelete(row) {
+      const result = await this.$confirm(
+        `确定要删除黑名单【${row.name}】吗?`,
+        "操作提醒",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          iconClass: "el-icon-warning",
+          customClass: "el-message-box__error",
+        }
+      ).catch(() => {});
+
+      if (result !== "confirm") return;
+
+      await deleteBlackItem(row.id);
+      this.tableData = this.tableData.filter((item) => item.id !== row.id);
+    },
+  },
+};
+</script>

src/features/system/BlackList/ModifyBlackItem.vue

@@ -0,0 +1,139 @@
+<template>
+  <el-dialog
+    class="modify-black-item"
+    :visible.sync="modalIsShow"
+    :title="title"
+    top="10vh"
+    width="600px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    @open="visibleChange"
+  >
+    <el-form
+      ref="modalFormComp"
+      :model="modalForm"
+      :rules="rules"
+      label-width="90px"
+    >
+      <el-form-item prop="name" label="软件名称：">
+        <el-input
+          v-model.trim="modalForm.name"
+          placeholder="请输入软件名称"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="processName" label="进程名称：">
+        <el-input
+          v-model.trim="modalForm.processName"
+          placeholder="请输入进程名称"
+          clearable
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button type="primary" :disabled="isSubmit" @click="submit"
+        >确认</el-button
+      >
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { objAssign } from "@/utils/utils";
+import { saveBlackItem } from "@/api/system";
+
+const initModalForm = {
+  id: null,
+  name: "",
+  processName: "",
+};
+
+export default {
+  name: "modifyBlackItem",
+  props: {
+    instance: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  computed: {
+    isEdit() {
+      return !!this.instance.id;
+    },
+    title() {
+      return (this.isEdit ? "编辑" : "新增") + "黑名单";
+    },
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      isSubmit: false,
+      modalForm: { ...initModalForm },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入软件名称",
+            trigger: "change",
+          },
+          {
+            message: "软件名称不能超过100个字",
+            max: 100,
+            trigger: "change",
+          },
+        ],
+        processName: [
+          {
+            required: true,
+            message: "请输入进程名称",
+            trigger: "change",
+          },
+          {
+            message: "进程名称不能超过100个字",
+            max: 100,
+            trigger: "change",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    initData(val) {
+      if (val.id) {
+        this.modalForm = objAssign(initModalForm, val);
+      } else {
+        this.modalForm = { ...initModalForm };
+      }
+    },
+    visibleChange() {
+      this.initData(this.instance);
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async submit() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      let datas = { ...this.modalForm };
+      const data = await saveBlackItem(datas).catch(() => {});
+      this.isSubmit = false;
+
+      if (!data) return;
+
+      this.$message.success(this.title + "成功！");
+      this.$emit("modified");
+      this.cancel();
+    },
+  },
+};
+</script>

src/features/system/SystemNotice/ModifySystemNotice.vue

@@ -0,0 +1,141 @@
+<template>
+  <el-dialog
+    class="modify-system-notice"
+    :visible.sync="modalIsShow"
+    :title="title"
+    top="10vh"
+    width="600px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    @open="visibleChange"
+  >
+    <el-form
+      ref="modalFormComp"
+      :model="modalForm"
+      :rules="rules"
+      label-width="60px"
+    >
+      <el-form-item prop="title" label="标题：">
+        <el-input
+          v-model.trim="modalForm.title"
+          placeholder="请输入标题"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="content" label="内容：">
+        <el-input
+          v-model.trim="modalForm.content"
+          placeholder="请输入内容"
+          type="textarea"
+          maxlength="999"
+          show-word-limit
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="状态：">
+        <el-radio v-model="modalForm.enable" :label="true">启用</el-radio>
+        <el-radio v-model="modalForm.enable" :label="false">禁用</el-radio>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button type="primary" :disabled="isSubmit" @click="submit"
+        >确认</el-button
+      >
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { objAssign } from "@/utils/utils";
+import { saveSystemNotice } from "@/api/system";
+
+const initModalForm = {
+  id: null,
+  title: "",
+  content: "",
+  enable: true,
+};
+
+export default {
+  name: "ModifySystemNotice",
+  props: {
+    instance: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  computed: {
+    isEdit() {
+      return !!this.instance.id;
+    },
+    title() {
+      return (this.isEdit ? "编辑" : "新增") + "系统通知";
+    },
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      isSubmit: false,
+      modalForm: { ...initModalForm },
+      rules: {
+        title: [
+          {
+            required: true,
+            message: "请输入标题",
+            trigger: "change",
+          },
+          {
+            message: "标题不能超过100个字",
+            max: 100,
+            trigger: "change",
+          },
+        ],
+        content: [
+          {
+            required: true,
+            message: "请输入内容",
+            trigger: "change",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    initData(val) {
+      if (val.id) {
+        this.modalForm = objAssign(initModalForm, val);
+      } else {
+        this.modalForm = { ...initModalForm };
+      }
+    },
+    visibleChange() {
+      this.initData(this.instance);
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async submit() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      let datas = { ...this.modalForm };
+      const data = await saveSystemNotice(datas).catch(() => {});
+      this.isSubmit = false;
+
+      if (!data) return;
+
+      this.$message.success(this.title + "成功！");
+      this.$emit("modified");
+      this.cancel();
+    },
+  },
+};
+</script>

src/features/system/SystemNotice/SystemNotice.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="system-notice">
+    <div class="part-box-head">
+      <div class="part-box-head-left"><h1>系统通知</h1></div>
+    </div>
+    <div class="part-filter">
+      <div class="part-filter-form">
+        <div></div>
+        <div class="part-filter-form-action">
+          <el-button type="primary" icon="icon icon-add" @click="toAdd"
+            >新增</el-button
+          >
+        </div>
+      </div>
+    </div>
+
+    <el-table :data="tableData">
+      <el-table-column prop="id" label="ID" width="80"> </el-table-column>
+      <el-table-column prop="title" label="标题" min-width="120">
+      </el-table-column>
+      <el-table-column prop="content" label="通知内容" min-width="240">
+      </el-table-column>
+      <el-table-column prop="enable" label="状态" width="80">
+        <template slot-scope="scope">
+          {{ scope.row.enable | booleanEnableDisableFilter }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="100" fixed="right">
+        <div slot-scope="scope">
+          <el-button
+            size="mini"
+            type="primary"
+            plain
+            @click="toEdit(scope.row)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            size="mini"
+            :type="scope.row.enable ? 'danger' : 'primary'"
+            plain
+            @click="toEnable(scope.row)"
+            >{{ scope.row.enable ? "禁用" : "启用" }}</el-button
+          >
+        </div>
+      </el-table-column>
+    </el-table>
+    <div class="part-page">
+      <el-pagination
+        background
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100, 200, 300]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+
+    <ModifySystemNotice
+      ref="ModifySystemNotice"
+      :instance="curRow"
+      @modified="searchForm"
+    />
+  </div>
+</template>
+
+<script>
+import { searchSystemNoice, enableSystemNotice } from "@/api/system";
+import ModifySystemNotice from "./ModifySystemNotice.vue";
+
+export default {
+  name: "BlackList",
+  components: {
+    ModifySystemNotice,
+  },
+  data() {
+    return {
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 10,
+      curRow: {},
+    };
+  },
+  created() {
+    this.searchForm();
+  },
+  methods: {
+    async searchForm() {
+      const res = await searchSystemNoice({
+        pageNumber: this.currentPage,
+        pageSize: this.pageSize,
+      });
+      this.tableData = res.data.data.records;
+      this.total = res.data.data.total;
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.searchForm();
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.searchForm();
+    },
+    toAdd() {
+      this.curRow = {};
+      this.$refs.ModifySystemNotice.open();
+    },
+    toEdit(row) {
+      this.curRow = row;
+      this.$refs.ModifySystemNotice.open();
+    },
+    async toEnable(row) {
+      const action = row.enable ? "禁用" : "启用";
+      const result = await this.$confirm(
+        `确定要${action}通知【${row.title}】吗?`,
+        "操作提醒",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          iconClass: "el-icon-warning",
+          customClass: "el-message-box__error",
+        }
+      ).catch(() => {});
+      if (result !== "confirm") return;
+
+      const enable = !row.enable;
+      await enableSystemNotice({
+        id: row.id,
+        enable,
+      });
+      row.enable = enable;
+      this.$message.success("操作成功！");
+    },
+  },
+};
+</script>