teachcloud-print-web/src/modules/base/components/ModifyRoleUser.vue

<template>
  <div>
    <el-dialog
      class="modify-role-user page-dialog"
      :visible.sync="modalIsShow"
      :title="title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      fullscreen
      destroy-on-close
      @open="visibleChange"
    >
      <div class="part-box part-box-filter part-box-flex">
        <el-form
          ref="FilterForm"
          label-position="left"
          label-width="85px"
          inline
        >
          <el-form-item label="名称：">
            <el-input
              v-model.trim="filter.name"
              placeholder="人员名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="part-box part-box-pad">
        <el-table ref="TableList" :data="userList">
          <el-table-column
            type="index"
            label="序号"
            width="70"
            :index="indexMethod"
          ></el-table-column>
          <el-table-column prop="realName" label="姓名"> </el-table-column>
          <el-table-column prop="code" label="用户名/工号"> </el-table-column>
          <el-table-column prop="mobileNumber" label="手机号">
          </el-table-column>
          <el-table-column class-name="action-column" label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                class="btn-primary"
                type="text"
                @click="toManageUser(scope.row)"
                >管理范围</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- SelectUserDialog -->
    <select-user-dialog
      ref="SelectUserDialog"
      :users="curUserMember"
      :user-limit-count="0"
      can-select-all
      @modified="userModified"
    ></select-user-dialog>
  </div>
</template>

<script>
import { roleGroupList, updateRoleGroup } from "../api";
import SelectUserDialog from "../components/SelectUserDialog";

export default {
  name: "modify-role-user",
  components: { SelectUserDialog },
  props: {
    role: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      filter: {
        name: "",
      },
      userList: [],
      curUser: {},
      curUserMember: [],
    };
  },
  computed: {
    title() {
      return `人员管理-${this.role.name}`;
    },
  },
  methods: {
    visibleChange() {
      this.filter.name = "";
      this.getList();
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getList() {
      const datas = {
        ...this.filter,
        roleId: this.role.id,
      };
      const data = (await roleGroupList(datas)) || [];

      this.userList = data.map((item) => {
        let nitem = { ...item.user };
        nitem.memberList = item.memberList;
        return nitem;
      });
    },
    toManageUser(row) {
      const memberList = row.memberList || [];
      this.curUserMember = memberList.map((item) => {
        return {
          id: item.id,
          name: item.realName,
        };
      });
      this.curUser = row;
      this.$refs.SelectUserDialog.open();
    },
    async userModified(users) {
      console.log(users);
      const data = {
        roleId: this.role.id,
        userId: this.curUser.id,
        memberIdList: users.map((item) => item.id),
      };
      await updateRoleGroup(data);

      this.$message.success("修改成功!");
      this.getList();
    },
  },
};
</script>