From 5fbc8fa02d3e6d6ecec8bfb8fec09942f4c979e5 Mon Sep 17 00:00:00 2001 From: jiaming <203605334@qq.com> Date: Mon, 22 Apr 2024 22:19:31 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=A7=92=E8=89=B2?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E6=A8=A1=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/system/role/index.tsx | 208 ++++++++++++++++---------------- 1 file changed, 107 insertions(+), 101 deletions(-) diff --git a/src/views/system/role/index.tsx b/src/views/system/role/index.tsx index 6171b99..579854a 100644 --- a/src/views/system/role/index.tsx +++ b/src/views/system/role/index.tsx @@ -1,76 +1,62 @@ -import Crud, { Title } from "@ainiteam/quick-react-ui"; -import { IRole } from "@/types"; +import { useState } from "react"; +import { Modal, message } from "antd"; +import { ExclamationCircleFilled } from "@ant-design/icons"; import { IActionbar, IColumn, IFormItem, - IPage, - IToolbar, + // IPage, + QuickCrud, + IDialogTitle, + // IToolbar, } from "@ainiteam/quick-react-ui"; -import { useState } from "react"; +import "./index.less"; +import { IDept, IRole } from "@/types"; import { getRoleList, addRole, updateRole, + // deleteRole, deleteRole, + // resetRolePassword, + // enableRole, + // disableRole, + getDeptList, } from "@/api/system/role"; -import { Modal, message } from "antd"; -import { ExclamationCircleFilled } from "@ant-design/icons"; -import { useDispatch, useSelector } from "react-redux"; -import { AppDispatch, RootState } from "@/store"; +import { listToSelectTree } from "@/utils"; +// import QuickCrud from "node_modules/@ainiteam/quick-react-ui/dist/src/crud/crud"; -const role: React.FC = () => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const dispatch: AppDispatch = useDispatch(); - const { activeTab } = useSelector((state: RootState) => state.tab); +const Role: React.FC = () => { const { confirm } = Modal; + const [deptDataList, setDeptDataList] = useState([]); + + const [deptTreeData, setDeptTreeData] = useState([]); /** * 属性 */ const [loading, setLoading] = useState(false); - const [tableDataList, setTableDataList] = useState([ - { - id: 116, - roleId: "YH_0003", - roleName: "管理员", - deptId: "管理层", - createTime: "2023-09-21 11:28:35", - remark: "管理员（请误删）", - }, - { - id: 115, - roleId: "YH_0002", - roleName: "员工1", - deptId: "普通角色", - createTime: "2023-09-21 11:27:28", - remark: "", - }, - { - id: 114, - roleId: "YH_0001", - roleName: "员工2", - deptId: "普通角色", - createTime: "2023-09-19 11:01:20", - remark: "", - }, - ]); + const [tableDataList, setTableDataList] = useState([]); - /** - * 工具栏 - */ - - const tableToolbar: IToolbar = { - hiddenBatchDeleteButton: true, - hiddenImportButton: true, - hiddenExportButton: true, - hiddenPrintButton: true, + const handleBatchDelete = (data: any, done: any) => { + const { ids } = data; + confirm({ + title: "警告", + icon: , + content: "你真的删除选择的角色吗？", + onOk() { + deleteRole(ids).then(() => { + message.success("角色删除成功"); + done(); + }); + }, + }); }; /** * 表单 */ - const dialogTitle: Title = { + const dialogTitle: IDialogTitle = { add: "添加角色", edit: "编辑角色", detail: "角色详情", @@ -79,7 +65,7 @@ const role: React.FC = () => { id: undefined, roleId: "", roleName: "", - deptId: "", + deptId: 0, remark: "", }; const formItems: IFormItem[] = [ @@ -97,6 +83,7 @@ const role: React.FC = () => { trigger: "blur", }, { + // validator: validateRoleId, trigger: "blur", }, ], @@ -105,17 +92,18 @@ const role: React.FC = () => { label: "角色名称", labelWidth: "80px", vModel: "roleName", - placeholder: "请输入角色名称", + placeholder: "请输入角色名", prop: "roleName", rules: [ { required: true, - message: "请输入角色名称", - trigger: "blur", - }, - { + message: "请输入角色名", trigger: "blur", }, + // { + // // validator: validateRoleName, + // trigger: "blur", + // }, ], }, { @@ -123,22 +111,17 @@ const role: React.FC = () => { labelWidth: "80px", vModel: "deptId", placeholder: "请选择所属部门", + type: "treeselect", prop: "deptId", + options: deptTreeData, rules: [ { - trigger: "blur", + required: true, + message: "请选择所属部门", + trigger: "change", }, ], }, - - { - label: "备注", - labelWidth: "80px", - vModel: "remark", - placeholder: "请输入备注", - type: "textarea", - prop: "remark", - }, ]; const handleFormSubmit = (form: IRole, done: any) => { const row = { ...form }; @@ -161,34 +144,19 @@ const role: React.FC = () => { /** * 操作栏 */ - const handleDelete = (item: IRole, done: any) => { - confirm({ - title: "警告", - icon: , - content: `你真的删除【${item.roleName}】的角色吗？`, - onOk() { - if (!item.id) { - return; - } - deleteRole(item.id).then(() => { - message.success("角色删除成功"); - done(); - }); - }, - }); - }; - /** - * 操作栏 - */ + const tableActionbar: IActionbar = { width: 300, + // hiddenEditButton: !validatePermission(permissionBtn?.edit), + // hiddenDeleteButton: !validatePermission(permissionBtn?.delete), + // hiddenDetailButton: !validatePermission(permissionBtn?.detail), + btns: [], }; /** * 表格 */ const tableColumns: IColumn[] = [ - { title: "序号", dataIndex: "key", rowScope: "row" }, { width: "100", label: "角色编号", @@ -198,40 +166,73 @@ const role: React.FC = () => { width: "100", label: "角色名称", prop: "roleName", + // edit: true, }, { - width: "100", + width: "200", label: "所属部门", prop: "deptId", - }, + format(row: IRole) { + console.log("拿到的所属部门", deptDataList); + const dept = deptDataList?.find((x: IDept) => x.id === row.deptId); + return dept ? dept.deptName : ""; + }, + }, { - width: "180", + width: "80", label: "创建时间", prop: "createTime", }, - { + // width: "100", label: "备注", prop: "remark", }, ]; + /** + * 工具栏 + */ + const tableToolbar = { + hiddenBatchDeleteButton: true, + hiddenImportButton: true, + hiddenExportButton: true, + hiddenPrintButton: true, + // hiddenAddButton: !validatePermission(permissionBtn.value?.add) + }; + // /** + // * 加载部门下拉框数据 + // */ + const loadDeptSelectData = () => { + getDeptList().then((res: any) => { + // debugger; + const { data: deptList } = res; + setDeptDataList([...deptList]); + const deptTree = listToSelectTree(deptList, 0, { + value: "id", + label: "deptName", + }); + setDeptTreeData([...deptTree]); + console.log("下拉框数据", deptTree); + }); + }; + /** * 加载数据 */ - const loadData = (parmas: object) => { + const loadData = () => { setLoading(true); - getRoleList(parmas) - .then((res) => { + loadDeptSelectData(); + getRoleList() + .then((res: any) => { setLoading(false); const { data: roleList } = res; console.log("roleList", roleList); if (roleList) { - tableDataList.length = 0; - tableDataList.push(...roleList); - setTableDataList(tableDataList); + setTableDataList([...roleList]); } + // page.total = total; }) .catch(() => { setLoading(false); @@ -239,8 +240,9 @@ const role: React.FC = () => { }; return ( - <> - +
+ { tableColumns={tableColumns} tableActionbar={tableActionbar} tableToolbar={tableToolbar} + pagebar={false} loading={loading} + rowEdit={true} + displayNumber={true} onLoad={loadData} onFormSubmit={handleFormSubmit} - onDelete={handleDelete} - > - + // onDelete={handleDelete} + onBatchDelete={handleBatchDelete} + > + ); }; -export default role; +export default Role; -- Gitee