From 72fdf8d75a73adfd087e000d03e26158a3b9ed4e Mon Sep 17 00:00:00 2001
From: lizw-2015 <1183409807@qq.com>
Date: Fri, 27 Jun 2025 17:22:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(user):=20=E6=96=B0=E5=A2=9E=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加用户新增、编辑和删除功能
- 实现用户权限控制
- 优化用户列表展示和查询
- 新增登录页面和相关功能
---
 src/components/ShowDialogWrap.vue         |  10 +++
 src/components/data-form/DataForm.vue     |   5 +-
 src/components/data-form/DataFormTypes.ts |   1 +
 src/router/index.ts                       |   5 ++
 src/runtime/System.ts                     |   1 +
 src/views/user/users.vue                  | 103 ++++++++++++++++++++++++++++--
 6 files changed, 120 insertions(+), 5 deletions(-)

diff --git a/src/components/ShowDialogWrap.vue b/src/components/ShowDialogWrap.vue
index e67f30a..5a60c92 100644
--- a/src/components/ShowDialogWrap.vue
+++ b/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
diff --git a/src/components/data-form/DataForm.vue b/src/components/data-form/DataForm.vue
index 9cfe7b6..5c05e9d 100644
--- a/src/components/data-form/DataForm.vue
+++ b/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() {
diff --git a/src/components/data-form/DataFormTypes.ts b/src/components/data-form/DataFormTypes.ts
index fa682a0..247ed8c 100644
--- a/src/components/data-form/DataFormTypes.ts
+++ b/src/components/data-form/DataFormTypes.ts
@@ -174,6 +174,7 @@ interface DataFormItem {
 
 // 定义 Props 类型
 interface DataFormProps {
+    refCallback?: (ref: any) => void;
     // 核心配置
     /** 表单名称，会作为表单字段 id 前缀使用 */
     name?: string;
diff --git a/src/router/index.ts b/src/router/index.ts
index 63715c6..80f91dd 100644
--- a/src/router/index.ts
+++ b/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,
diff --git a/src/runtime/System.ts b/src/runtime/System.ts
index 76b0bf2..c15ec0d 100644
--- a/src/runtime/System.ts
+++ b/src/runtime/System.ts
@@ -305,4 +305,5 @@ export interface ShowDialogOption {
   cancelButtonText?: string
   okButtonText?: string
   onMounted?: (dialog: any) => void;
+  manualClose?: (close: Function)=> void;
 }
diff --git a/src/views/user/users.vue b/src/views/user/users.vue
index cadb0f8..0a6b8fb 100644
--- a/src/views/user/users.vue
+++ b/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"