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

<template>
  <a-card class="account-page-card">
    <Action
      :btn_text="$t('permission.account.new_user')"
      :btn_permission="'system:user:add'"
      @searchClick="searchClick"
      @resetClick="resetClick"
      @createClick="createClick"
      @sizeChange="tableSizeChange"
      @refreshClick="refreshClick"
    >
    </Action>
    <DataTable
      :data="table_data"
      :columns="table_columns"
      row-key="userId"
      :scroll="{
        x: 2000
      }"
      :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-popconfirm :content="$t('permission.account.reset_password')" @ok="handleResetPassword(record)">
          <a-button v-hasPermi="'system:role:resetPassword'" type="text">{{
            $t('permission.account.reset_password')
          }}</a-button>
        </a-popconfirm>
        <a-button v-hasPermi="'system:user:edit'" type="text" @click="handleEdit(record, true)">{{
          $t('permission.account.edit')
        }}</a-button>
        <a-button v-hasPermi="'system:user:viewPermission'" type="text" @click="handleView(record, true)">{{
          $t('permission.account.view_permission')
        }}</a-button>
        <a-button v-hasPermi="'system:user:deptEdit'" type="text" @click="handleDeptConfig(record, true)">{{
          $t('permission.account.dept_config')
        }}</a-button>
        <a-button
          v-hasPermi="'system:user:delete'"
          @click="handleDeleteModal(record.userId, $t('permission.delete_confirm'))"
          type="text"
          status="warning"
          >{{ $t('permission.account.delete') }}</a-button
        >
      </template>
    </DataTable>
  </a-card>

  <OperateModal
    :visible.sync="edit_visible"
    @ok="modalSave"
    @cancel="handleEdit(null, false)"
    :title="is_edit_mode ? $t('permission.account.edit') : $t('permission.account.new_user')"
  >
    <AccountForm :edit_form="edit_form" :is_edit_mode="is_edit_mode" :role_list="role_list" />
  </OperateModal>

  <ViewPermission
    :visible.sync="view_permission_visible"
    @cancel="handleView(null, false)"
    @close="handleView(null, false)"
    :menu_permissions_list="menu_permissions_list"
    :knowledge_permissions_list="knowledge_permissions_list"
    :dialog_permissions_list="dialog_permissions_list"
    :agent_permissions_list="agent_permissions_list"
  />

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

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Message, Modal } from '@arco-design/web-vue';
import DataTable from '../../../views/permission/DataTable.vue';
import Action from '../../../views/permission/Action.vue';
import OperateModal from '../../../views/permission/Modal.vue';
import AccountForm from './AccountForm.vue';
import ViewPermission from './ViewPermission.vue';
import DeptConfigModal from './DeptConfigModal.vue';
import { hasPermission } from '../../../utils/permission';
import {
  QueryUserList,
  QueryUserDeptDetail,
  UpdateUserDept,
  AddUser,
  UpdateUser,
  QueryUserPermission,
  UserStatusSwitch,
  ResetPassword,
  DeleteUser
} from '../../../apis/permission/account';
import { QueryAllRoleList, QueryDeptTree } from '../../../apis/permission/common';

const keywords = ref('');
// 表格相关
const table_data = ref([]);
const table_columns = ref([
  { title: '序号', width: 80, fixed: 'left', slotName: 'index' },
  { title: '用户名', dataIndex: 'userName', width: 150, titleSlotName: 'userName' },
  { title: '姓名', dataIndex: 'loginName', titleSlotName: 'loginName' },
  {
    title: '角色',
    dataIndex: 'roleName',
    width: 300,
    ellipsis: true,
    tooltip: { position: 'top' },
    titleSlotName: 'roleName'
  },
  {
    title: '所属部门',
    dataIndex: 'deptName',
    width: 400,
    ellipsis: true,
    tooltip: { position: 'top' },
    titleSlotName: 'deptName'
  },
  { title: '手机号', dataIndex: 'phone', width: 150, titleSlotName: 'phone' },
  { title: '邮箱', dataIndex: 'email', width: 150, titleSlotName: 'email' },
  { title: '状态', dataIndex: 'status', width: 100, slotName: 'status' },
  { title: '操作', dataIndex: 'operation', width: 500, fixed: 'right', 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({
  userName: '',
  userName: '',
  phone: '',
  email: '',
  pwd: '',
  roles: []
});
const role_list = ref([]);
// 查看权限相关
const view_permission_visible = ref(false);
const menu_permissions_list = ref([]);
const knowledge_permissions_list = ref([]);
const dialog_permissions_list = ref([]);
const agent_permissions_list = ref([]);

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

const getUserList = async () => {
  const params = {
    keyword: keywords.value,
    current: pagination_props.value.current,
    pageSize: pagination_props.value.pageSize
  };
  table_loading.value = true;
  const { code, data } = await QueryUserList(params);

  if (code === 200) {
    // 处理部门名称和角色名称
    for (const user of data.rows) {
      user.deptName = ''; // 初始化 deptName
      user.roleName = ''; // 初始化 roleName
      if (user.depts) {
        for (let i = 0; i < user.depts.length; i++) {
          const d = user.depts[i];
          user.deptName += d.deptName + (i < user.depts.length - 1 ? ', ' : '');
        }
      }

      if (user.roles) {
        for (let i = 0; i < user.roles.length; i++) {
          const r = user.roles[i];
          user.roleName += r.roleName + (i < user.roles.length - 1 ? ', ' : '');
        }
      }
    }

    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;
  getUserList();
};
const resetClick = () => {
  keywords.value = '';
  getUserList();
};
const createClick = () => {
  edit_form.userId = '';
  edit_form.userName = '';
  edit_form.loginName = '';
  edit_form.phone = '';
  edit_form.email = '';
  edit_form.pwd = '';
  edit_form.roles = [];
  is_edit_mode.value = false;

  handleEdit(null, true);
};
const refreshClick = () => {
  console.log('刷新');
};

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

// 用户状态切换
const statusChange = async (record) => {
  if (record?.dept) {
    const params = {
      userId: record.userId,
      status: record.status
    };
    const { code } = await UserStatusSwitch(params);
    if (code === 200) {
      Message.success({
        title: '成功',
        content: '状态切换成功.'
      });
    }
  } else {
    record.status = '0';
    Message.warning({
      title: '提示',
      content: '如想启用用户，需进行部门配置.'
    });
  }
};
//重置密码
const handleResetPassword = async (record) => {
  const { code } = await ResetPassword(record.userId);
  if (code === 200) {
    Message.success({
      title: '重置密码',
      content: '该用户密码重置为000000'
    });
  }
};

const handleEdit = async (record, visible) => {
  if (visible) {
    const { code, data } = await QueryAllRoleList();
    if (code === 200) {
      role_list.value = data.rows;
    }
  }

  if (record) {
    edit_form.userId = record.userId;
    edit_form.userName = record.userName;
    edit_form.loginName = record.loginName;
    edit_form.phone = record.phone;
    edit_form.email = record.email;
    edit_form.pwd = record.pwd;
    edit_form.roles = record.roles.map((role) => role.roleId);

    is_edit_mode.value = true;
  }

  edit_visible.value = visible;
};
// 查看权限
const handleView = async (record, visible) => {
  if (record) {
    dialog_permissions_list.value = [];
    knowledge_permissions_list.value = [];
    menu_permissions_list.value = [];
    const { code, data } = await QueryUserPermission(record.userId);
    if (code === 200) {
      const { knowledge, menus, dialog } = data;
      if (dialog && dialog.length > 0) dialog_permissions_list.value = dialog;
      if (knowledge && knowledge.length > 0) knowledge_permissions_list.value = knowledge;
      if (menus && menus.length > 0) menu_permissions_list.value = getMenuTitles(menus);
    }
  }
  view_permission_visible.value = visible;
};
// 部门配置
const handleDeptConfig = async (record, visible) => {
  if (record) {
    edit_form.userId = record.userId;
    const {
      code,
      data: { rows }
    } = await QueryUserDeptDetail(record.userId);
    if (code === 200) {
      dept_detail.value = rows;
    }
  }
  dept_config_visible.value = visible;
};

const handleDeptConfigSave = async (checked_keys) => {
  dept_config_visible.value = false;
  const data = {
    userId: edit_form.userId,
    depts: checked_keys
  };
  const { code } = await UpdateUserDept(data);
  if (code === 200) {
    Message.success({
      title: '部门配置',
      content: '部门配置成功'
    });
    getUserList();
  }
};
// 删除用户
const handleDelete = async (userId) => {
  const { code } = await DeleteUser(userId);
  if (code === 200) {
    Message.success({
      title: '删除用户',
      content: '删除成功'
    });
    getUserList();
  }
};
const modalSave = async () => {
  edit_visible.value = false;
  const data = {
    userId: is_edit_mode.value ? edit_form.userId : undefined,
    ...edit_form
  };
  const apiCall = is_edit_mode.value ? UpdateUser : AddUser;
  const { code } = await apiCall(data);

  if (code === 200) {
    const action = is_edit_mode.value ? '编辑' : '新增';
    Message.success({
      title: `${action}用户`,
      content: `${action}成功`
    });
    getUserList();
  }
};
const tableSizeChange = (size) => {
  table_size.value = size;
};
// 铺开路由菜单title
const getMenuTitles = (data, result = []) => {
  data.forEach((item) => {
    // 检查item是否有id和name属性
    if (item.id && item.meta.title) {
      result.push({ id: item.id, name: item.meta.title });
    }
    // 如果有子项，递归调用函数
    if (item.children && item.children.length > 0) {
      getMenuTitles(item.children, result);
    }
  });
  return result;
};

const getDeptTree = async () => {
  const {
    code,
    data: { rows }
  } = await QueryDeptTree();
  if (code == 200) {
    dept_list.value = rows;
  }
};

const handleDeleteModal = (id, title) => {
  Modal.warning({
    title,
    okText: '确定',
    cancelText: '取消',
    hideCancel: false,
    onOk() {
      handleDelete(id);
    }
  });
};

onMounted(() => {
  if (hasPermission('system:user:list')) {
    getUserList();
    getDeptTree();
  } else {
    Message.error({
      title: '权限不足',
      content: '您没有权限查看用户列表'
    });
  }
});
</script>

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