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

<template>
  <a-card class="account-page-card">
    <Action :btn_text="'新建用户组'" @searchClick="searchClick" @resetClick="resetClick" @createClick="createClick"
      @sizeChange="table_size_change" @refreshClick="refreshClick"></Action>
    <DataTable :data="table_data" :columns="table_columns" row-key="userId" :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="确定重置该账号密码吗?" @ok="handleResetPassword(record)">
          <a-button type="text">重制密码</a-button>
        </a-popconfirm>
        <a-button type="text" @click="handleEdit(record, true)">编辑</a-button>
        <a-button type="text" @click="handlePermissionConfig(record, true)">权限配置</a-button>
        <a-button type="text" @click="handleDeptConfig(record, true)">部门配置</a-button>
        <a-popconfirm content="确定删除该条数据吗?" type="warning" @ok="handleDelete(record.userId)">
          <a-button type="text" status="warning">删除</a-button>
        </a-popconfirm>
      </template>
    </DataTable>
  </a-card>

  <Modal :visible.sync="edit_visible" @ok="editModalSave" @cancel="handleEdit(null, false)" :title="'编辑'">
    <AccountForm :edit_form="edit_form" />
  </Modal>

  <!-- TODO -->
  <PermissionConfigModal :visible.sync="permission_config_visible" @cancel="handlePermissionConfig(null, false)" />

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

</template>

<script setup>
import { ref, reactive, onMounted } 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 AccountForm from './AccountForm.vue';
import PermissionConfigModal from './PermissionConfigModal.vue';
import DeptConfigModal from './DeptConfigModal.vue';

import { QueryRoleList, } from '../../../apis/permission/role';

const keywords = ref('');
// 表格相关
const table_data = ref([]);
const table_columns = ref([
  { title: '序号', slotName: 'index' },
  { title: '用户名', dataIndex: 'userName', titleSlotName: 'userName' },
  { title: '角色', dataIndex: 'roleName', titleSlotName: 'roleName' },
  { title: '所属部门', dataIndex: 'deptName', titleSlotName: 'deptName' },
  { 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 edit_form = reactive({
  userName: '',
  userName: '',
  phone: '',
  email: '',
  pwd: '',
  role: []
});

// 权限配置相关
const permission_config_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 current_record = ref(null);
const dept_list = ref([
  {
    "address": null,
    "children": [
      {
        "address": "",
        "children": [],
        "code": null,
        "createTime": "Thu, 12 Sep 2024 14:56:43 GMT",
        "deptId": "2af7cb5e-1178-4adc-8abb-9780f7543081",
        "deptName": "成都",
        "email": "",
        "iconCls": null,
        "leader": "成都",
        "orderNum": 0,
        "parentId": "0",
        "parentName": "总部",
        "phone": "成都",
        "roles": [],
        "status": "",
        "updateTime": "Thu, 12 Sep 2024 14:56:43 GMT"
      },
      {
        "address": null,
        "children": [],
        "code": null,
        "createTime": "Sun, 22 May 2022 09:59:33 GMT",
        "deptId": "5477d9a9-e41e-485f-bb08-697e8facef88",
        "deptName": "南京分公司",
        "email": "ss@ada.com",
        "iconCls": null,
        "leader": "dd",
        "orderNum": 0,
        "parentId": "0",
        "parentName": "总部",
        "phone": "18905189016",
        "roles": [],
        "status": "0",
        "updateTime": "Tue, 12 Nov 2024 03:05:10 GMT"
      },
      {
        "address": null,
        "children": [
          {
            "address": "",
            "children": [
              {
                "address": "",
                "children": [],
                "code": null,
                "createTime": "Tue, 12 Nov 2024 03:09:57 GMT",
                "deptId": "c6ae93de-2436-4090-b567-ec4835c74112",
                "deptName": "成都",
                "email": "",
                "iconCls": null,
                "leader": "柔柔弱弱",
                "orderNum": 0,
                "parentId": "f86724f0-94d9-445c-9d95-3ec2540da0f8",
                "parentName": "太平洋派出所",
                "phone": "1234242342",
                "roles": [],
                "status": "",
                "updateTime": "Tue, 12 Nov 2024 06:58:15 GMT"
              }
            ],
            "code": null,
            "createTime": "Thu, 05 Sep 2024 03:15:13 GMT",
            "deptId": "f86724f0-94d9-445c-9d95-3ec2540da0f8",
            "deptName": "太平洋派出所",
            "email": "",
            "iconCls": null,
            "leader": "12",
            "orderNum": 0,
            "parentId": "ce627e90-57d6-4ed4-a789-1f3dd467ae7d",
            "parentName": "上海分公司",
            "phone": "12",
            "roles": [
              {
                "deptId": "f86724f0-94d9-445c-9d95-3ec2540da0f8",
                "roleId": "19f00d46-8f1b-45b5-b7b7-6197d7b8cb33",
                "roleName": "管理员1"
              }
            ],
            "status": "0",
            "updateTime": "Tue, 12 Nov 2024 06:58:07 GMT"
          }
        ],
        "code": null,
        "createTime": "Tue, 24 May 2022 23:54:10 GMT",
        "deptId": "ce627e90-57d6-4ed4-a789-1f3dd467ae7d",
        "deptName": "上海分公司",
        "email": null,
        "iconCls": null,
        "leader": "jack",
        "orderNum": 0,
        "parentId": "0",
        "parentName": "总部",
        "phone": null,
        "roles": [
          {
            "deptId": "ce627e90-57d6-4ed4-a789-1f3dd467ae7d",
            "roleId": "301ca518-2ed0-4092-a2ee-e46c24a42c8a",
            "roleName": "普通"
          }
        ],
        "status": "0",
        "updateTime": "Wed, 18 Sep 2024 09:58:16 GMT"
      }
    ],
    "code": null,
    "createTime": "Mon, 28 Nov 2016 10:34:54 GMT",
    "deptId": "0",
    "deptName": "总部",
    "email": null,
    "iconCls": "ext-icon-bricks",
    "leader": null,
    "orderNum": 100,
    "parentId": "",
    "parentName": "",
    "phone": null,
    "roles": [],
    "status": "0",
    "updateTime": "Mon, 28 Nov 2016 10:35:12 GMT"
  }
]);

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 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;
  getUserList();
}
const resetClick = () => {
  keywords.value = '';
  getUserList();
}
const createClick = () => {
  edit_form.userName = '';
  edit_form.loginName = '';
  edit_form.phone = '';
  edit_form.email = '';
  edit_form.pwd = '';
  edit_form.role = [];
  edit_visible.value = true;
}
const refreshClick = () => {
  console.log('刷新')
}

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

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

// 用户状态切换
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 {

  }
};
//重置密码
const handleResetPassword = async (record) => {
  const { code } = await ResetPassword(record.userId);
  if (code === 200) {
    Message.success({
      title: '重置密码',
      content: '该用户密码重置为000000',
    });
  }
}

const handleEdit = (record, visible) => {
  if (record) {
    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.role = record.role;
  }

  edit_visible.value = visible;
}
// 权限配置
const handlePermissionConfig = async (record, visible) => {
  if (record) {
    const { code, data } = await QueryUserPermission(record.userId);
    if (code === 200) {
      const { knowledge, menu, dialog } = data;
      if (dialog && dialog.length > 0) dialog_permissions_list.value = dialog
      if (menu && menu.length > 0) menu_permissions_list.value = menu
      if (knowledge && knowledge.length > 0) knowledge_permissions_list.value = knowledge
    }
  }
  permission_config_visible.value = visible;
}
// 部门配置
const handleDeptConfig = async (record, visible) => {
  if (record) {
    current_record.value = record;
    const { code, data: { rows } } = await QueryUserDept(record.userId);
    if (code === 200) {
      // TODO接口 机构接上再接这个
      console.log('rows', rows)
      // dept_list.value = rows;
    }
  }
  dept_config_visible.value = visible;
}

// 删除用户
const handleDelete = async (userId) => {
  const { code } = await DeleteUser(userId);
  if (code === 200) {
    Message.success({
      title: '删除用户',
      content: '该用户已删除',
    });
    getUserList();
  }
}
const editModalSave = () => {
  edit_visible.value = false;
}
const table_size_change = (size) => {
  table_size.value = size;
}


onMounted(() => {
  getUserList()
})
</script>

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