drp-ui/src/views/system/table-template/auth-dialog.vue

<script>
import { role, auth } from "@/api/system/table-template";
// import { listRole } from "@/api/system/role";
import { listOptionselect } from "@/api/system/role";
export default {
  name: "AuthDialog",
  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      form: { id: "" },
      roleList: [],
      authRoleList: [],
    };
  },
  methods: {
    //
    fetchItem(prop) {
      let { id } = prop;
      this.form.id = id;
      this.loading = true;
      this.dialogFormVisible = true;
      listOptionselect({ id })
        .then((res) => {
          // let { rows, total } = res;
          // this.roleList = rows.map((item) => ({
          //   key: item.roleId,
          //   label: item.roleName,
          // }));
          let { data } = res;
          this.roleList = data.map((item) => ({
            key: item.roleId,
            label: item.roleName,
          }));
        })
        .finally(() => {
          this.loading = false;
        });
      role(id)
        .then((res) => {
          let { data } = res;
          this.authRoleList = data.map((item) => item.roleId);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //
    onSubmit() {
      auth({ templateId: this.form.id, roleIdList: this.authRoleList })
        .then((res) => {
          let { code } = res;
          if (code == 200) {
            this.dialogFormVisible = false;
            this.$message.success("授权成功");
            this.$parent.$children
              .find((el) => el.$vnode.tag.indexOf("SearchTable") > -1)
              .fetchList();
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  created() {},
};
</script>

<template>
  <el-dialog
    width="fit-content"
    destroy-on-close
    title="授权"
    :visible.sync="dialogFormVisible"
  >
    <el-transfer
      v-loading="loading"
      v-model="authRoleList"
      :data="roleList"
      :titles="['未授权', '已授权']"
    >
    </el-transfer>
    <div slot="footer">
      <el-button :disabled="loading" @click="dialogFormVisible = false"
        >取 消</el-button
      >
      <el-button :disabled="loading" type="primary" @click="onSubmit"
        >确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<style scoped>
.el-transfer .el-transfer-panel__footer {
  display: flex;
  align-items: center;
}
</style>