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

<template>
  <el-dialog
    class="modify-organization"
    :visible.sync="modalIsShow"
    title="机构管理人员"
    top="10px"
    width="1000px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <div class="part-box part-box-pad part-box-border">
      <div class="part-title">
        <h2>部门主管</h2>
      </div>
      <el-table>
        <el-table-column prop="realName" label="姓名"></el-table-column>
        <el-table-column prop="realName" label="手机号"></el-table-column>
        <el-table-column prop="realName" label="用户名/工号"></el-table-column>
        <el-table-column prop="realName" label="角色"></el-table-column>
        <el-table-column prop="realName" label="部门"></el-table-column>
        <el-table-column class-name="action-column" label="操作" width="120px">
          <template slot-scope="scope">
            <el-button
              class="btn-primary"
              type="text"
              @click="setAdmin(scope.row)"
            >
              {{ scope.row.isAdmin ? "取消部门主管" : "设为部分主管" }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="part-box part-box-pad part-box-border">
      <div class="flex-between">
        <el-form ref="modalFormComp" :model="filter" label-width="100px">
          <el-form-item prop="name" label="部分成员：">
            <el-input
              style="width: 282px"
              v-model.trim="filter.name"
              placeholder="姓名/工号/手机号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="search">查询</el-button>
          </el-form-item>
        </el-form>
        <div>
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="toAdd"
            >添加成员</el-button
          >
        </div>
      </div>
      <table>
        <el-table-column prop="realName" label="姓名"></el-table-column>
        <el-table-column prop="realName" label="手机号"></el-table-column>
        <el-table-column prop="realName" label="用户名/工号"></el-table-column>
        <el-table-column prop="realName" label="角色"></el-table-column>
        <el-table-column prop="realName" label="部门"></el-table-column>
        <el-table-column class-name="action-column" label="操作" width="120px">
          <template slot-scope="scope">
            <el-button
              class="btn-primary"
              type="text"
              @click="setAdmin(scope.row)"
            >
              {{ scope.row.isAdmin ? "取消部门主管" : "设为部分主管" }}
            </el-button>
          </template>
        </el-table-column>
      </table>
    </div>
    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import { updateOrganization } from "../api";

export default {
  name: "modify-organization",
  props: {
    orgId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      modalIsShow: false,
      filter: { name: "" },
      admins: [],
      users: [],
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
    };
  },
  watch: {
    orgId(val, oldval) {
      if (val !== oldval) this.initData();
    },
  },
  methods: {
    initData() {
      this.filter.name = "";
      this.admins = [];
      this.users = [];
      this.getAdmins();
      this.toPage(1);
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getAdmins() {
      if (!this.orgId) return;
      const data = await updateOrganization({ orgId: this.orgId });
      this.admins = data || [];
    },
    async getList() {
      if (!this.orgId) return;
      const datas = {
        ...this.filter,
        orgId: this.orgId,
        pageNumber: this.current,
        pageSize: this.size,
      };

      const data = await updateOrganization(datas);
      this.users = data.records;
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    search() {
      this.toPage(1);
    },
    setAdmin(user) {
      console.log(user);
    },
    toAdd() {},
  },
};
</script>