feat(user): 新增用户管理功能

- 添加用户新增、编辑和删除功能
- 实现用户权限控制
- 优化用户列表展示和查询
- 新增登录页面和相关功能

src/components/ShowDialogWrap.vue

@@ -26,6 +26,7 @@
 <script>
 import _ from 'lodash'
 import ElementDialogResize from '@/components/element-dialog-resize'
+import { Typeof } from "@ease-forge/shared";
 
 export default {
   directives: { ElementDialogResize },
@@ -55,6 +56,8 @@ export default {
 
     childCmp: { type: Object, default: undefined, required: false },
     onMounted: { type: Function, default: undefined, required: false },
+
+    manualClose: { type: Function, required: false },
   },
   mounted() {
       this.$props.onMounted?.(this);
@@ -67,6 +70,13 @@ export default {
   },
   methods: {
     onOk(result) {
+      if(Typeof.isFun(this.manualClose)) {
+          this.manualClose(()=> {
+              this.isShow = false
+              this.returnOk = true
+          })?.finally?.();
+          return;
+      }
       // 通过收到业务组件 bizMixin.js 的 OK 事件，引起窗口关闭
       this.isShow = false
       this.returnOk = true

src/components/data-form/DataForm.vue

@@ -81,7 +81,10 @@ watch(() => state.data, newData => {
 // 监听loading
 watch(() => state.loading, loading => emit("loadingChange", loading));
 // 设置ctxData(表单上下文数据)
-onMounted(() => data.ctxData.instance = instance!);
+onMounted(() => {
+    data.ctxData.instance = instance!;
+    props.refCallback?.(instance?.exposed);
+});
 
 /** bothFixed：label和input都固定宽度布局 */
 function isBothFixed() {

src/components/data-form/DataFormTypes.ts

@@ -174,6 +174,7 @@ interface DataFormItem {
 
 // 定义 Props 类型
 interface DataFormProps {
+    refCallback?: (ref: any) => void;
     // 核心配置
     /** 表单名称，会作为表单字段 id 前缀使用 */
     name?: string;

src/router/index.ts

@@ -156,6 +156,11 @@ const router = createRouter({
             component: () => import('@/components/ThreePerfView.vue')
         },
         {
+            path: '/login',
+            name: 'login',
+            component: () => import('@/views/Login.vue')
+        },
+        {
             path: '/editor',
             name: 'editor',
             // component: HomeView,

src/runtime/System.ts

@@ -305,4 +305,5 @@ export interface ShowDialogOption {
   cancelButtonText?: string
   okButtonText?: string
   onMounted?: (dialog: any) => void;
+  manualClose?: (close: Function)=> void;
 }

src/views/user/users.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { createVNode, reactive } from "vue";
 import { ElButton } from "element-plus";
-import { Delete, Plus, Search } from "@element-plus/icons-vue";
+import { Delete, EditPen, Plus, Search } from "@element-plus/icons-vue";
 import DataForm from "@/components/data-form/DataForm.vue";
 import type { FormField } from "@/components/data-form/DataFormTypes.ts";
 import { AgGridVue } from "ag-grid-vue3";
@@ -113,14 +113,109 @@ function serverSideDatasource(params: IServerSideGetRowsParams) {
         params.success({ rowData: page.records, rowCount: page.total })
     }).finally(() => state.loading = false);
 }
+
+function addOrUpdate(add: boolean = true) {
+    let row = {};
+    let ref;
+    if (!add) {
+        const select = data.api?.getSelectedRows()?.[0];
+        if (!select) {
+            system.msg("未选择数据行");
+            return;
+        }
+        row = select;
+    }
+    system.showDialog(createVNode(DataForm, {
+        refCallback: v => ref = v,
+        data: row,
+        formFields: [
+            {
+                dataPath: 'loginName', label: '登录名', input: 'Input',
+                inputProps: {
+                    placeholder: '登录名',
+                    disabled: !add,
+                }
+            },
+            {
+                dataPath: 'password', label: '密码', input: 'Input',
+                inputProps: {
+                    placeholder: '密码',
+                    type: "password",
+                    showPassword: true,
+                }
+            },
+            {
+                dataPath: 'userName', label: '姓名', input: 'Input',
+                inputProps: {
+                    placeholder: '姓名'
+                }
+            },
+            {
+                dataPath: 'isEnable', label: '启用', input: 'Switch',
+                inputProps: {
+                    inactiveValue: 0,
+                    activeValue: 1,
+                    inlinePrompt: true,
+                    inactiveText: "禁用",
+                    activeText: "启用",
+                },
+            },
+        ],
+        rules: {
+            loginName: [
+                { required: true, message: "登录名必填", trigger: "blur" },
+            ],
+            password: [
+                { required: true, message: "密码必填", trigger: "blur" },
+            ],
+            userName: [
+                { required: true, message: "姓名必填", trigger: "blur" },
+            ],
+        },
+        showMessage: true,
+        columnCount: 1,
+        labelWidth: '70px'
+    }), {
+        title: `${add ? "新增" : "编辑"}用户`,
+        width: 480,
+        height: 300,
+        showClose: true,
+        showMax: false,
+        showCancelButton: true,
+        showOkButton: true,
+        okButtonText: '确定',
+        cancelButtonText: '取消',
+        manualClose: async (close) => {
+            await ref.data.formRef.validate();
+            Request.request.post(`/api/workbench/UserPermissions@${add ? "addUser" : "updateUser"}`, row).then(() => {
+                close();
+                reload();
+            });
+        },
+    }).then().finally()
+}
+
+function delUser() {
+    const select = data.api?.getSelectedRows()?.[0];
+    if (!select) {
+        system.msg("未选择数据行");
+        return;
+    }
+    system.confirm(`是否删除用户: ${select.loginName}?`).then(() => {
+        Request.request.post(`/api/workbench/UserPermissions@delUser?id=${select.id}`).then(() => {
+            reload();
+        });
+    });
+}
 </script>
 
 <template>
     <div class="dashboard flex-column-container">
         <div class="tools flex-item-fixed">
             <ElButton :icon="Search" :loading="state.loading" @click="reload">查询</ElButton>
-            <ElButton :icon="Plus">新增</ElButton>
-            <ElButton :icon="Delete" type="danger" :plain="true">删除</ElButton>
+            <ElButton :icon="Plus" @click="addOrUpdate(true)">新增</ElButton>
+            <ElButton :icon="EditPen" @click="addOrUpdate(false)">编辑</ElButton>
+            <ElButton :icon="Delete" type="danger" :plain="true" @click="delUser">删除</ElButton>
         </div>
         <DataForm
             class="query-form flex-item-fixed"