msyj-admin-org/src/modules/client-set/ClientAccountSet.vue

<template>
  <div class="client-account-set">
    <Button
      class="account-add-btn"
      type="success"
      icon="recode-white icon"
      shape="circle"
      @click="toAdd"
      >添加账号</Button
    >
    <Table
      ref="TableList"
      :columns="columns"
      :data="users"
      :row-class-name="getRowClassName"
      disabled-hover
      border
    ></Table>

    <div class="part-page">
      <Page
        :current="current"
        :total="total"
        :page-size="size"
        show-total
        show-elevator
        @on-change="toPage"
      ></Page>
    </div>

    <!-- modify-client-user -->
    <modify-client-user
      :instance="curUser"
      @modified="getList"
      ref="ModifyClientUser"
    ></modify-client-user>
  </div>
</template>

<script>
import { clientUserPageList, deleteClientUser, updateClientUser } from "@/api";
import ModifyClientUser from "./components/ModifyClientUser";
import { SYSTEM_ROLE_TYPE } from "@/constants/enumerate";

export default {
  name: "client-account-set",
  components: { ModifyClientUser },
  data() {
    return {
      workId: this.$route.params.workId,
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      users: [],
      curUser: {},
      columns: [
        {
          type: "index",
          title: "序号",
          width: 100,
          align: "center",
          indexMethod: row => {
            return (this.current - 1) * this.size + row._index + 1;
          }
        },
        {
          title: "账号",
          key: "loginName"
        },
        {
          title: "密码",
          key: "password"
        },
        {
          title: "操作",
          key: "action",
          width: 240,
          align: "center",
          className: "table-action",
          render: (h, param) => {
            let actions = [
              {
                icon: param.row.enabled ? "enable icon" : "disable icon",
                attrs: {
                  title: param.row.enabled ? "禁用" : "启用"
                },
                action: () => {
                  this.toAble(param.row);
                }
              },
              {
                icon: "md-create",
                classes: [param.row.enabled ? "" : "btn-disabled"],
                attrs: {
                  title: "编辑"
                },
                action: () => {
                  this.toEdit(param.row);
                }
              }
            ];

            return h("div", this.$tableIconAction(h, actions));
          }
        }
      ]
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const datas = {
        workId: this.workId,
        page: this.current - 1,
        size: this.size
      };
      const data = await clientUserPageList(datas);
      this.users = data.data.map(item => {
        item.roleName = SYSTEM_ROLE_TYPE[item.role];
        return item;
      });
      this.total = data.totalCount;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    getRowClassName(row) {
      return row.enabled ? "" : "row-disabled";
    },
    toAdd() {
      this.curUser = {
        role: "COLLECTOR",
        roleName: "采集员",
        workId: this.workId
      };
      this.$refs.ModifyClientUser.open();
    },
    toEdit(row) {
      if (!row.enabled) return;
      this.curUser = row;
      this.$refs.ModifyClientUser.open();
    },
    async toAble(row) {
      await updateClientUser({
        id: row.id,
        loginName: row.loginName,
        enabled: !row.enabled
      });
      this.users[row._index].enabled = !row.enabled;
    },
    toDelete(row) {
      this.$Modal.confirm({
        title: "删除警告",
        content: "确定要删除当前账号吗？",
        onOk: () => {
          this.toDel(row.id);
        }
      });
    },
    async toDel(id) {
      await deleteClientUser(id);
      this.$Message.success("删除成功！");
      this.deletePageLastItem();
    }
  }
};
</script>