project init

src/views/manage/cuser/index.vue

@@ -0,0 +1,243 @@
+<template>
+  <basic-container>
+    <avue-crud
+      :option="option"
+      :table-loading="loading"
+      :data="data"
+      ref="crud"
+      v-model="form"
+      :permission="permissionList"
+      :before-open="beforeOpen"
+      :before-close="beforeClose"
+      @row-update="rowUpdate"
+      @row-save="rowSave"
+      @search-change="searchChange"
+      @search-reset="searchReset"
+      @selection-change="selectionChange"
+      @refresh-change="refreshChange"
+    >
+      <template slot-scope="scope" slot="menu">
+        <el-button
+          type="text"
+          size="small"
+          @click.stop="rowDisable(scope.row)"
+          v-if="scope.row.status === 0 && vaildData(permission.manage_cuser_stop, false)"
+        >停用</el-button>
+        <el-button
+          type="text"
+          size="small"
+          @click.stop="rowEnable(scope.row)"
+          v-else-if="vaildData(permission.manage_cuser_enable, false)"
+        >启用</el-button>
+        <el-button type="text" size="small" @click.stop="rowRemove(scope.row)">删除</el-button>
+      </template>
+      <template v-slot:status="{row}">
+        <span v-if="row.status === 0">启用</span>
+        <span v-else>停用</span>
+      </template>
+    </avue-crud>
+  </basic-container>
+</template>
+
+<script>
+import { getList, open, close, remove } from "@/api/manage/user";
+import { mapGetters } from "vuex";
+
+export default {
+  components: {},
+  name: "manage_cuser",
+  data() {
+    return {
+      form: {},
+      selectionList: [],
+      query: {},
+      loading: false,
+      checkDialog: false,
+      delayDialog: false,
+      finishDialog: false,
+      option: {
+        height: "auto",
+        tip: false,
+        searchShow: true,
+        searchMenuSpan: 6,
+        border: true,
+        index: false,
+        selection: false,
+        addBtn: false,
+        viewBtn: false,
+        editBtn: false,
+        delBtn: false,
+        dialogClickModal: false,
+        dialogType: "drawer",
+        dialogFullscreen: true,
+        column: [
+          {
+            label: "账号",
+            prop: "account",
+            type: "input",
+            search: true,
+          },
+          {
+            label: "注册时间",
+            prop: "createTime",
+            type: "input",
+          },
+          {
+            label: "账号状态",
+            prop: "status",
+            type: "select",
+            slot: true,
+          },
+        ],
+      },
+      data: [],
+    };
+  },
+  created() {
+    this.getData(this.query);
+  },
+  computed: {
+    ...mapGetters(["userInfo", "permission"]),
+    permissionList() {
+      return {};
+    },
+    ids() {
+      let ids = [];
+      this.selectionList.forEach((ele) => {
+        ids.push(ele.id);
+      });
+      return ids;
+    },
+  },
+  methods: {
+    rowEnable(row) {
+      const h = this.$createElement;
+      this.$confirm(
+        h("p", { style: "color: #F56C6C" }, "启用账号后即可操作系统"),
+        "您确定要启用此账号吗？",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+          center: true,
+        }
+      )
+        .then(() => {
+          this.loading = true;
+          open(row.account)
+            .then((resp) => {
+              this.$message({
+                type: "success",
+                message: resp.data.msg,
+              });
+              this.getData(this.query);
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        })
+        .catch(() => {});
+    },
+    rowDisable(row) {
+      const h = this.$createElement;
+      this.$confirm(
+        h("p", { style: "color: #F56C6C" }, "一旦停用不可操作系统"),
+        "您确定要停用此账号吗？",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+          center: true,
+        }
+      )
+        .then(() => {
+          this.loading = true;
+          close(row.account)
+            .then((resp) => {
+              this.$message({
+                type: "success",
+                message: resp.data.msg,
+              });
+              this.getData(this.query);
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        })
+        .catch(() => {});
+    },
+    rowRemove(row) {
+      const h = this.$createElement;
+      this.$confirm(
+        h("p", { style: "color: #F56C6C" }, ""),
+        "您确定要删除此账号吗？",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+          center: true,
+        }
+      )
+        .then(() => {
+          this.loading = true;
+          remove(row.account)
+            .then((resp) => {
+              this.$message({
+                type: "success",
+                message: resp.data.msg,
+              });
+              this.getData(this.query);
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        })
+        .catch(() => {});
+    },
+    searchReset() {
+      this.query = {};
+      this.getData();
+    },
+    searchChange(params, done) {
+      this.query = params;
+      this.getData(params);
+      done();
+    },
+    selectionChange(list) {
+      this.selectionList = list;
+    },
+    selectionClear() {
+      this.selectionList = [];
+      this.$refs.crud.toggleSelection();
+    },
+    beforeOpen(done) {
+      done();
+    },
+    beforeClose(done) {
+      done();
+    },
+    refreshChange() {
+      this.getData(this.query);
+    },
+    getData(params = {}) {
+      if (params.account) {
+        this.loading = true;
+        getList(params.account)
+          .then((res) => {
+            const data = res.data.data;
+            this.data = data;
+            this.loading = false;
+          })
+          .catch(() => {
+            this.loading = false;
+          });
+      } else {
+        this.data = [];
+      }
+    },
+  },
+};
+</script>
+
+<style>
+</style>