smartai2dian0/src/modules/permission/role/index.vue

<template>
  <a-card class="account-page-card">
    <Action :btn_text="'新建角色'" :btn_permission="'system:role:add'" @searchClick="searchClick" @resetClick="resetClick"
      @createClick="createClick" @sizeChange="tableSizeChange" @refreshClick="refreshClick"></Action>
    <DataTable :data="table_data" :columns="table_columns" row-key="roleId" :size="table_size" :loading="table_loading"
      :pagination="pagination_props" @pageChange="handlePageChange">
      <template #status="{ record }">
        <a-switch v-model="record.status" @change="statusChange(record)" checked-value="1" unchecked-value="0" />
      </template>
      <template #operationSlot="{ record }">
        <a-button v-hasPermi="'system:role:edit'" type="text" @click="handleEdit(record, true)">编辑</a-button>
        <a-button v-hasPermi="'system:role:permissionEdit'" type="text"
          @click="handlePermissionConfig(record, true)">权限配置</a-button>
        <a-button v-hasPermi="'system:role:deptEdit'" type="text"
          @click="handleDeptConfig(record, true)">部门配置</a-button>
        <a-popconfirm content="确定删除该条数据吗?" type="warning" @ok="handleDelete(record.roleId)">
          <a-button v-hasPermi="'system:role:delete'" type="text" status="warning">删除</a-button>
        </a-popconfirm>
      </template>
    </DataTable>
  </a-card>

  <Modal :visible.sync="edit_visible" @ok="modalSave" @cancel="handleEdit(null, false)"
    :title="is_edit_mode ? '编辑' : '新增'">
    <RoleForm :edit_form="edit_form" :is_edit_mode="is_edit_mode" />
  </Modal>

  <PermissionConfigModal :visible.sync="permission_config_visible" :menu_list="menu_list" :record="current_record"
    @ok="handlePermissionConfigSave" @cancel="handlePermissionConfig(null, false)" />

  <DeptConfigModal :visible.sync="dept_config_visible" :dept_list="dept_list" :record="current_record"
    @ok="handleDeptConfigSave" @cancel="handleDeptConfig(null, false)" />
</template>

<script setup>
import { ref, reactive, onMounted, h } from 'vue';
import { Message } from '@arco-design/web-vue';
import DataTable from '../../../views/permission/DataTable.vue';
import Action from '../../../views/permission/Action.vue';
import Modal from '../Modal.vue';
import RoleForm from './RoleForm.vue';
import PermissionConfigModal from './PermissionConfigModal.vue';
import DeptConfigModal from './DeptConfigModal.vue';
import { hasPermission } from '../../../utils/permission';
import { QueryRoleList, RoleStatusSwitch, DeleteRole, CreateRole, UpdateRole } from '../../../apis/permission/role';
import { QueryResourceTree } from '../../../apis/permission/resource';
import { QueryDeptTree } from '../../../apis/permission/common';

const keywords = ref('');
// 表格相关
const table_data = ref([]);
const table_columns = ref([
  { title: '序号', slotName: 'index' },
  { title: '角色名', dataIndex: 'roleName', titleSlotName: 'roleName' },
  { title: '状态', dataIndex: 'status', slotName: 'status' },
  { title: '操作', dataIndex: 'operation', slotName: 'operationSlot' }
]);
const pagination_props = ref({
  total: 10,
  current: 1,
  pageSize: 12
});
const table_size = ref('medium');
const table_loading = ref(false);

// 编辑表单相关
const edit_visible = ref(false);
const is_edit_mode = ref(false);
const edit_form = reactive({
  roleName: '',
  remark: ''
});

// 权限配置相关
const permission_config_visible = ref(false);
const menu_list = ref([]);

// 部门配置相关
const dept_config_visible = ref(false);
const current_record = ref(null);
const dept_list = ref([]);

const gerRoleList = async () => {
  const params = {
    keyword: keywords.value,
    current: pagination_props.value.current,
    pageSize: pagination_props.value.pageSize
  };
  table_loading.value = true;
  const { code, data } = await QueryRoleList(params);
  if (code === 200) {
    pagination_props.value.total = data.total;
    table_data.value = data.rows;

    table_loading.value = false;
  } else {
    table_loading.value = false;
  }
};

const searchClick = (value) => {
  keywords.value = value;
  gerRoleList();
};
const resetClick = () => {
  keywords.value = '';
  gerRoleList();
};
const createClick = () => {
  edit_form.roleName = '';
  edit_form.remark = '';
  is_edit_mode.value = false;
  edit_visible.value = true;
};
const refreshClick = () => {
  console.log('刷新');
};

// 切换页码
const handlePageChange = (current) => {
  pagination_props.value.current = current;
  gerRoleList();
};

// TODO功能 状态切换拦截
const beforeStatusChange = async () => {
  await new Promise((resolve, reject) =>
    setTimeout(() => {
      resolve();
    }, 1000)
  );
};

// 用户状态切换
const statusChange = async (record) => {
  const params = {
    roleId: record.roleId,
    status: record.status
  };
  const { code } = await RoleStatusSwitch(params);
  if (code === 200) {
    Message.success({
      title: '成功',
      content: '状态切换成功.'
    });
  }
};

const handleEdit = (record, visible) => {
  if (record) {
    edit_form.roleId = record.roleId;
    edit_form.roleName = record.roleName;
    edit_form.remark = record.remark;

    is_edit_mode.value = true;
  }

  edit_visible.value = visible;
};
// 权限配置
const handlePermissionConfig = async (record, visible) => {
  if (record) {
    edit_form.roleId = record.roleId;
    current_record.value = record;
  }
  permission_config_visible.value = visible;
};

const handlePermissionConfigSave = async (checked_menu) => {
  permission_config_visible.value = false;
  const params = {
    roleId: edit_form.roleId,
    resources: checked_menu,
    editType: 2
  };
  const { code } = await UpdateRole(params);
  if (code === 200) {
    Message.success({
      title: '权限配置',
      content: '权限配置成功'
    });
    gerRoleList();
  }
};

// 部门配置
const handleDeptConfig = async (record, visible) => {
  if (record) {
    edit_form.roleId = record.roleId;
    current_record.value = record;
  }
  dept_config_visible.value = visible;
};

const handleDeptConfigSave = async (dept_ids) => {
  dept_config_visible.value = false;
  const params = {
    roleId: edit_form.roleId,
    depts: dept_ids,
    editType: 3
  };
  const { code } = await UpdateRole(params);
  if (code === 200) {
    Message.success({
      title: '部门配置',
      content: '部门配置成功'
    });
    gerRoleList();
  }
};

// 删除用户
const handleDelete = async (roleId) => {
  const { code } = await DeleteRole(roleId);
  if (code === 200) {
    Message.success({
      title: '删除用户',
      content: '删除成功'
    });
    gerRoleList();
  }
};
const modalSave = async () => {
  edit_visible.value = false;
  const data = {
    roleId: is_edit_mode.value ? edit_form.roleId : undefined,
    roleName: edit_form.roleName,
    editType: is_edit_mode.value ? 1 : undefined,
    remark: edit_form.remark
  };

  const apiCall = is_edit_mode.value ? UpdateRole : CreateRole;
  const { code } = await apiCall(data);

  if (code === 200) {
    const action = is_edit_mode.value ? '编辑' : '新增';
    Message.success({
      title: `${action}用户`,
      content: `${action}成功`
    });
    gerRoleList();
  }
};

const tableSizeChange = (size) => {
  table_size.value = size;
};

// 获取菜单树
const getMenuTree = async () => {
  const {
    code,
    data: { rows }
  } = await QueryResourceTree();
  if (code === 200) {
    menu_list.value = rows;
  }
};
// 获取部门树
const getDeptTree = async () => {
  const {
    code,
    data: { rows }
  } = await QueryDeptTree();
  if (code == 200) {
    dept_list.value = rows;
  }
};

onMounted(() => {
  if (hasPermission('system:role:list')) {
    gerRoleList();
    getMenuTree();
    getDeptTree();
  }

});
</script>

<style lang="css" scoped>
.account-page-card {
  height: calc(100% - 40px);
}
</style>