middleground_code_v2/src/views/projectClassification/authorizationDialog.vue

<template>
  <div>
    <base-dialog
      :closeEscape="true"
      :showClose="true"
      :closeModal="false"
      @handleClose="handleDialogClose"
      @handleConfirmClick="handleConfirmClick"
      :dialogVisible="dialogVisible"
      :title="'权限分配'"
      width="95%"
      top="8vh"
      :footerShow="true"
    >
      <div style="height: 50vh; display: flex;    overflow: auto;">
        <div style="width: calc(50% - 5px);">
          <div class="small_title">
            已分配权限用户 {{ authorizedMembers.length }}
          </div>
          <base-table
            ref="authorizedMemberstable"
            :border="true"
            :showIndex="true"
            :tableHeight="'45vh'"
            :tableData="authorizedMembers"
            :tableColumn="tableAssColumn"
            :slotrow="false"
            :funData="funData"
            @onFunc="onFunc"
          ></base-table>
        </div>
        <div style="width: calc(50% - 5px); margin-left: 10px">
          <div
            class="small_title"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <span>未分配权限用户</span>
            <span>已选择 {{ SelectionData.length }} 人 </span>
          </div>
          <base-table
            ref="customtable"
            :border="true"
            :showIndex="true"
            :tableHeight="'45vh'"
            :tableData="tableData"
            :tableColumn="tableColumn"
            :slotrow="false"
            :showSelect="true"
            @onSelectionChange="onSelectionChange"
          ></base-table>
        </div>
      </div>
    </base-dialog>
  </div>
</template>

<script>
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseTable from "@/components/base/baseTable";
import { authApi } from "@/api/apis/auth";

export default {
  components: {
    baseDialog,
    baseTable,
  },
  data() {
    return {
      dialogVisible: false,
      tableColumn: [
        {
          label: "用户名称",
          prop: "personName",
        },
        {
          label: "用户编码",
          prop: "personCode",
        },
      ],
      tableAssColumn: [
        {
          label: "用户名称",
          prop: "userName",
        },
        {
          label: "用户编码",
          prop: "userCode",
        },
      ],
      funData: [
        {
          color: "#ff0000",
          text: "删除",
        },
      ],
      tableData: [],
      activeTab: "first",
      proClassID: "", //项目分类的id
      authorizedMembers: [], //权限成员
      SelectionData: [], //已选择
    };
  },
  mounted() {},
  methods: {
    openDialog(row) {
      this.proClassID = row.id;
      this.activeTab = "first";
      this.dialogVisible = true;
      this.queryRuleList();
      this.queryUserList();
    },
    // 查询未分配权限的用户
    async queryUserList() {
      let params = {
        flowClassId:this.proClassID,
      };
      this.openLoading("detail");
      let res = await authApi(
        "sysFlowClassRuleService",
        "",
        "queryUserList",
        "",
        params
      );
      if (res.status == "200") {
        this.tableData = res.attribute;
      }
    },
    // 流程分类权限列表查询
    async queryRuleList() {
      let params = {
        flowClassId: this.proClassID,
      };
      let res = await authApi(
        "sysFlowClassRuleService",
        "",
        "queryRuleList",
        "",
        params
      );
      if (res.status == "200") {
        this.authorizedMembers = res.attribute.ruleList;
      }
    },
    // 表格操作事件 复制 删除
    onFunc(index, row, item) {
      // 删除
      if (item.text == "删除") {
        this.$confirm("确认删除该内容吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.openLoading("del");
            this.userDelete(row);
          })
          .catch(() => {
            this.$vmNews("取消操作", "info");
          });
      }
    },
    async userDelete(row) {
      let params = {
        flowClassId:this.proClassID,
        userId: row.userId,
      };
      let res = await authApi(
        "sysFlowClassRuleService",
        "",
        "deleteFlowClassRule",
        "",
        params
      );
      if (res.status == "200") {
        this.$vmNews("删除成功！", "success");
        this.queryRuleList();
        this.queryUserList();
        this.SelectionData = [];
        this.$refs.customtable.clearSelect();
      }
    },
    // 确定分配权限
    async handleConfirmClick() {
      if (this.SelectionData.length <= 0) {
        this.$vmNews("请选择需要分配权限的用户！");
        return;
      }
      let userList = [];

      this.SelectionData.forEach((item) => {
        let obj = {
          userId: item.personId, //用户id
          userName: item.personName, //用户名
          userCode: item.personCode, //用户编码
        };
        userList.push(obj);
      });
      let params = {
        flowClassId: this.proClassID,
        ruleList: userList,
      };
      let res = await authApi(
        "sysFlowClassRuleService",
        "",
        "saveFlowClassRule",
        "",
        params
      );
      if (res.status == "200") {
        this.$vmNews("分配权限成功", "success");
        this.handleDialogClose();
        this.$emit('resetTable')
      }
    },
    // 多选事件
    onSelectionChange(value) {
      this.SelectionData = value;
    },
    // 弹窗关闭
    handleDialogClose() {
      this.$refs.customtable.clearSelect();
      this.tableData = [];
      this.authorizedMembers = [];
      this.SelectionData = [];
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.small_title {
  font-size: 14px;
  font-weight: bold;
  margin: 10px 0;
}

.authBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  padding: 10px;

  .content {
    display: flex;
    align-items: center;
  }

  .arrow {
    display: flex;
    align-items: center;
    i {
      margin: 0 5px;
      font-size: 16px;
    }
  }
}
</style>