yudao-init/src/views/system/role/index.vue

<template>
  <div class="app-container">
    <!-- <doc-alert
      title="功能权限"
      url="https://doc.iocoder.cn/resource-permission"
    />
    <doc-alert title="数据权限" url="https://doc.iocoder.cn/data-permission" /> -->
    <!-- 搜索工作栏 -->
    <search-bar
      :formConfigs="formConfig"
      ref="searchBarForm"
      @headBtnClick="buttonClick"
    />
    <!-- 列表 -->
    <base-table
      :page="queryParams.pageNo"
      :limit="queryParams.pageSize"
      :table-props="tableProps"
      :table-data="list"
      :max-height="tableH"
    >
      <method-btn
        v-if="tableBtn.length"
        slot="handleBtn"
        :width="230"
        label="操作"
        :method-list="tableBtn"
        @clickBtn="handleClick"
      />
    </base-table>
    <pagination
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />

    <!-- 新增&编辑 -->
    <base-dialog
      :dialogTitle="addOrEditTitle"
      :dialogVisible="centervisible"
      @cancel="handleCancel"
      @confirm="handleConfirm"
      :before-close="handleCancel"
      width="50%"
    >
      <role-add ref="roleAdd" @successSubmit="successSubmit" />
    </base-dialog>
    <!-- 菜单权限 -->
    <base-dialog
      dialogTitle="分配菜单权限"
      :dialogVisible="menuVisible"
      @cancel="handleCancelm"
      @confirm="handleConfirmm"
      :before-close="handleCancelm"
      width="50%"
    >
      <menu-auth ref="menuAuth" @successSubmitm="successSubmitm" />
    </base-dialog>
    <!-- 数据权限 -->
    <base-dialog
      dialogTitle="分配数据权限"
      :dialogVisible="dataVisible"
      @cancel="handleCanceld"
      @confirm="handleConfirmd"
      :before-close="handleCanceld"
      width="50%"
    >
      <data-auth ref="dataAuth" @successSubmitd="successSubmitd" />
    </base-dialog>
  </div>
</template>

<script>
import { delRole, listRole } from "@/api/system/role";
import tableHeightMixin from "@/mixins/tableHeightMixin";
import RoleAdd from "./components/roleAdd";
import MenuAuth from "./components/menuAuth";
import DataAuth from "./components/dataAuth";
import statusBtn from "./../components/statusBtn.vue";
const tableProps = [
  {
    prop: "code",
    label: "角色编码",
    minWidth: 140,
    showOverflowtooltip: true,
  },
  {
    prop: "name",
    label: "角色名称",
    minWidth: 140,
    showOverflowtooltip: true,
  },
  {
    prop: "status",
    label: "状态",
    minWidth: 100,
    subcomponent: statusBtn,
  },
  {
    prop: "remark",
    label: "角色描述",
    minWidth: 140,
    showOverflowtooltip: true,
  },
];
export default {
  name: "SystemRole",
  mixins: [tableHeightMixin],
  components: { RoleAdd, MenuAuth, DataAuth },
  data() {
    return {
      formConfig: [
        {
          type: "input",
          label: "角色名称",
          placeholder: "角色名称",
          param: "name",
        },
        {
          type: "button",
          btnName: "查询",
          name: "search",
          color: "primary",
        },
        {
          type: "separate",
        },
        {
          type: "button",
          btnName: "新增",
          name: "add",
          color: "success",
          plain: true,
        },
      ],
      queryParams: {
        pageNo: 1,
        pageSize: 20,
        name: "",
      },
      tableProps,
      list: [],
      tableBtn: [
        {
          type: "menuAuth",
          btnName: "菜单权限",
          // showTip: "新增工单",
        },
        {
          type: "dataAuth",
          btnName: "数据权限",
          // showTip: "新增工单",
        },
        {
          type: "edit",
          btnName: "编辑",
        },
        {
          type: "delete",
          btnName: "删除",
        },
      ],
      addOrEditTitle: "",
      centervisible: false,
      // 菜单权限
      menuVisible: false,
      // 数据权限
      dataVisible: false,
      // 总条数
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询角色列表 */
    getList() {
      listRole(this.queryParams).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
      });
    },
    buttonClick(val) {
      console.log(val);
      if (val.btnName === "search") {
        this.queryParams.pageNo = 1;
        this.getList();
      } else {
        this.addOrEditTitle = "新增";
        this.centervisible = true;
        this.$nextTick(() => {
          this.$refs.roleAdd.init();
        });
      }
    },
    handleClick(val) {
      switch (val.type) {
        case "edit":
          this.addOrEditTitle = "编辑";
          this.centervisible = true;
          this.$nextTick(() => {
            this.$refs.roleAdd.init(val.data.id);
          });
          break;
        case "delete":
          this.handleDelete(val.data);
          break;
        case "menuAuth":
          this.menuVisible = true;
          this.$nextTick(() => {
            this.$refs.menuAuth.init(val.data.id);
          });
          break;
        default:
          this.dataVisible = true;
          this.$nextTick(() => {
            this.$refs.dataAuth.init(val.data.id);
          });
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm('是否确认删除角色名称为"' + row.name + '"的数据项?')
        .then(function () {
          return delRole(row.id);
        })
        .then(() => {
          this.queryParams.pageNo = 1;
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 新增取消
    handleCancel() {
      this.$refs.roleAdd.formClear();
      this.centervisible = false;
      this.addOrEditTitle = "";
    },
    handleConfirm() {
      this.$refs.roleAdd.submitForm();
    },
    successSubmit() {
      this.handleCancel();
      this.getList();
    },
    // 菜单权限
    handleCancelm() {
      this.$refs.menuAuth.formClear();
      this.menuVisible = false;
    },
    handleConfirmm() {
      this.$refs.menuAuth.submitForm();
    },
    successSubmitm() {
      this.handleCancelm();
      this.getList();
    },
    // 数据权限
    handleCanceld() {
      this.$refs.dataAuth.formClear();
      this.dataVisible = false;
    },
    handleConfirmd() {
      this.$refs.dataAuth.submitForm();
    },
    successSubmitd() {
      this.handleCanceld();
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: calc(100vh - 120px - 8px);
  background-color: #fff;
  border-radius: 8px;
  padding: 8px;
}
</style>