From efb5d3995df73d34ec54d23cff0b74a0afdf1c5d Mon Sep 17 00:00:00 2001
From: riverflow <3011499946@qq.com>
Date: Wed, 13 Aug 2025 21:02:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8views/user=E4=B8=8B=E6=96=B0=E5=BB=BAA?=
 =?UTF-8?q?ddUser.vue=E6=A8=A1=E5=9D=97=EF=BC=8C=E7=BB=86=E5=88=86?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=8C=89=E9=92=AE=E5=8A=9F=E8=83=BD=20?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87=E6=8C=89=E9=92=AE=E5=AE=9E=E7=8E=B0=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E5=BC=B9=E7=AA=97=20=E6=A0=B9=E6=8D=AEElement-plus?=
 =?UTF-8?q?=E6=8F=90=E4=BE=9B=E7=9A=84=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=94=B9=E8=A1=A8=E5=8D=95=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根据数据库表中的字段，设置需要从表单中获取的信息
---
 order-system/src/App.vue                      |   5 +-
 order-system/src/api/user/userModel.ts        |  11 ++
 order-system/src/components/SysDialog.vue     |   2 +-
 order-system/src/compositions/user/useUser.ts |  28 ++++
 .../src/compositions/user/useUserTable.ts     |  31 +++-
 order-system/src/hooks/useDialog.ts           |  11 +-
 order-system/src/layout/Index.vue             |   6 +-
 order-system/src/views/dashboard/Index.vue    |   2 +-
 order-system/src/views/user/AddUser.vue       | 149 ++++++++++++++++++
 order-system/src/views/user/Index.vue         |  38 +++--
 order-system/src/vite-env.d.ts                |  26 ++-
 11 files changed, 271 insertions(+), 38 deletions(-)
 create mode 100644 order-system/src/compositions/user/useUser.ts
 create mode 100644 order-system/src/views/user/AddUser.vue

diff --git a/order-system/src/App.vue b/order-system/src/App.vue
index 2cff022..6762809 100644
--- a/order-system/src/App.vue
+++ b/order-system/src/App.vue
@@ -1,7 +1,6 @@
 <!-- 作为应用程序的根组件，并提供路由视图的容器 -->
 <template>
-  <router-view/>
+  <router-view />
 </template>
 
-<style lang="scss">
-</style>
\ No newline at end of file
+<style lang="scss"></style>
\ No newline at end of file
diff --git a/order-system/src/api/user/userModel.ts b/order-system/src/api/user/userModel.ts
index cac5300..fdd90af 100644
--- a/order-system/src/api/user/userModel.ts
+++ b/order-system/src/api/user/userModel.ts
@@ -4,4 +4,15 @@ export type ListUserParm = {
   pageSize: number;
   name: string;
   phone: string;
+}
+
+// 定义表单数据类型
+export type UserModel = {
+  userId: string;
+  username: string;
+  password: string;
+  phone: string;
+  email: string;
+  sex: string;
+  name: string;
 }
\ No newline at end of file
diff --git a/order-system/src/components/SysDialog.vue b/order-system/src/components/SysDialog.vue
index 9aa0cf6..5de3e44 100644
--- a/order-system/src/components/SysDialog.vue
+++ b/order-system/src/components/SysDialog.vue
@@ -59,7 +59,7 @@ const onConfirm = ()=>{
  
  <style lang="scss">
   .container{
-    overflow-x: initial;
+    overflow-x: hidden;
     overflow-y: auto;
   }
 
diff --git a/order-system/src/compositions/user/useUser.ts b/order-system/src/compositions/user/useUser.ts
new file mode 100644
index 0000000..94c16c2
--- /dev/null
+++ b/order-system/src/compositions/user/useUser.ts
@@ -0,0 +1,28 @@
+import { ref } from "vue"
+
+// 抽取增删改的业务操作
+export default function useUser() {
+  // 获取AddUser里面的show方法
+  const showBtn = ref<{ show: (title: string, width: number, height: number) => void }>();
+
+  // 增
+  const addBtn = () => {
+    showBtn.value.show("新增", 630, 180)
+  }
+  // 删
+  const deleteBtn = () => {
+
+  }
+  // 改
+  const editBtn = () => {
+
+  }
+
+  return {
+    showBtn,
+    addBtn,
+    deleteBtn,
+    editBtn
+  }
+
+}
\ No newline at end of file
diff --git a/order-system/src/compositions/user/useUserTable.ts b/order-system/src/compositions/user/useUserTable.ts
index 9856a29..bc4ab76 100644
--- a/order-system/src/compositions/user/useUserTable.ts
+++ b/order-system/src/compositions/user/useUserTable.ts
@@ -1,9 +1,9 @@
 // 抽离表格相关业务
 
-import type { ListUserParm } from "../../api/user/userModel";
-import { reactive } from "vue";
+import type { ListUserParm } from "@/api/user/userModel";
+import { ref, reactive } from "vue";
 
-export default function useUserTable(){
+export default function useUserTable() {
   // 列表查询的参数
   const listParm = reactive<ListUserParm>({
     currentPage: 1,
@@ -13,8 +13,29 @@ export default function useUserTable(){
 
   })
 
+  // 列表
+  const getList = () => {
+
+  }
+
+  // 获取show方法
+  const tableShowBtn = ref<{show:(title: string)=>void}>()
+
+  // 搜索按钮
+  const searchBtn = () => {
+    
+  }
+
+  // 重置按钮
+  const resetBtn = () => {
+    tableShowBtn.value.show("重置")
+  }
   // 将表格查询的方法返回出去
-  return{
-    listParm
+  return {
+    tableShowBtn,
+    listParm,
+    getList,
+    searchBtn,
+    resetBtn
   }
 }
\ No newline at end of file
diff --git a/order-system/src/hooks/useDialog.ts b/order-system/src/hooks/useDialog.ts
index 560250a..dd34419 100644
--- a/order-system/src/hooks/useDialog.ts
+++ b/order-system/src/hooks/useDialog.ts
@@ -8,8 +8,8 @@ export default function useDialog(){
   const dialog = reactive({
     title: '新增',
     visible: false,
-    width: 600,
-    height: 100
+    width: 630,
+    height: 280
   })
 
   // 弹框关闭
@@ -23,7 +23,12 @@ export default function useDialog(){
   }
 
   // 显示弹框
-  const onShow = ()=>{
+  const onShow = (title: string, width: number, height: number)=>{
+    // 设置一个string参数，当不同按钮调用时，可以直接传参改弹框标题
+    dialog.title = title
+    // 宽高参数
+    dialog.width = width
+    dialog.height = height
     dialog.visible = true
   }
 
diff --git a/order-system/src/layout/Index.vue b/order-system/src/layout/Index.vue
index beeb70b..aaf882f 100644
--- a/order-system/src/layout/Index.vue
+++ b/order-system/src/layout/Index.vue
@@ -48,7 +48,7 @@
     justify-content: space-between;
   }
 
-  .main {
-    background-color: darkcyan;
-  }
+  // .main {
+  //   background-color: darkcyan;
+  // }
 </style>
\ No newline at end of file
diff --git a/order-system/src/views/dashboard/Index.vue b/order-system/src/views/dashboard/Index.vue
index 402dcf2..7659c85 100644
--- a/order-system/src/views/dashboard/Index.vue
+++ b/order-system/src/views/dashboard/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     首页面
-    <el-button type="primary" size="default" @click="onShow">测试弹框组件</el-button>
+    <el-button type="primary" size="default" @click="onShow('测试')">测试弹框组件</el-button>
     
   </div>
   <SysDialog
diff --git a/order-system/src/views/user/AddUser.vue b/order-system/src/views/user/AddUser.vue
new file mode 100644
index 0000000..61a6e36
--- /dev/null
+++ b/order-system/src/views/user/AddUser.vue
@@ -0,0 +1,149 @@
+<template>
+  <SysDialog :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
+    @onClose="onClose" @onConfirm="commit">
+
+    <!-- 通过插槽名称输入内容 -->
+    <template #content>
+      <el-form :model="addModel" ref="addFormRef" :rules="rules" label-width="80px" :inline="false" size="default">
+
+        <!-- 创建el-row容器，将姓名，性别放入一行美化页面 -->
+        <el-row :gutter="20">
+          <el-col :span="12" :offset="0">
+            <el-form-item prop="name" label="姓名">
+              <el-input v-model="addModel.name"></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12" :offset="0">
+
+            <!-- 通过单选框实现性别选择 -->
+
+            <el-form-item prop="sex" label="性别">
+              <el-radio-group v-model="addModel.sex">
+                <el-radio :value="'0'">男</el-radio>
+                <el-radio :value="'1'">女</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12" :offset="0">
+            <el-form-item prop="phone" label="电话">
+              <el-input v-model="addModel.phone"></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12" :offset="0">
+            <el-form-item prop="email" label="邮箱">
+              <el-input v-model="addModel.email"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+
+        <el-row :gutter="20">
+          <el-col :span="12" :offset="0">
+            <el-form-item prop="username" label="账户">
+              <el-input v-model="addModel.username"></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12" :offset="0">
+            <el-form-item prop="password" label="密码">
+              <el-input v-model="addModel.password"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+
+
+      </el-form>
+
+    </template>
+  </SysDialog>
+
+</template>
+
+<script setup lang="ts">
+// 引入弹窗组件
+import SysDialog from '@/components/SysDialog.vue';
+// 引入弹窗组件相关方法
+import useDialog from '@/hooks/useDialog';
+import { ref, reactive } from 'vue';
+
+// 引入UserModel获取表单数据类型
+import { UserModel } from '@/api/user/userModel';
+import { FormInstance } from 'element-plus';
+
+// 获取弹窗组件属性
+const { dialog, onClose, onConfirm, onShow } = useDialog()
+
+// 显示弹框，改写属性
+const show = (title: string, width: number, height: number) => {
+  // dialog.title: 
+  onShow(title, width, height)
+  // dialog.visible = true;
+  // 清空表单
+  addFormRef.value.resetFields()
+}
+
+// 将显示弹框方法暴露给父组件
+defineExpose({
+  show
+})
+
+// 表单绑定对象
+const addModel = reactive<UserModel>({
+  userId: "",
+  username: "",
+  password: "",
+  phone: "",
+  email: "",
+  sex: "",
+  name: "",
+})
+
+// 表单ref属性
+const addFormRef = ref<FormInstance>()
+
+// 定义表单验证规则
+const rules = reactive({
+  name: [{
+    required: true,
+    message: '请输入姓名',
+    trigger: 'blur'
+  }],
+  sex: [{
+    required: true,
+    message: '请选择性别',
+    trigger: 'blur'
+  }],
+  phone: [{
+    required: true,
+    message: '请输入电话',
+    trigger: 'blur'
+  }],
+  username: [{
+    required: true,
+    message: '请输入用户名',
+    trigger: 'blur'
+  }],
+  password: [{
+    required: true,
+    message: '请输入密码',
+    trigger: 'blur'
+  }]
+})
+
+// 表单提交
+const commit = () => {
+  addFormRef.value.validate((valid) => {
+    if(valid){
+      onConfirm()
+    }
+  })
+}
+</script>
+
+<style></style>
\ No newline at end of file
diff --git a/order-system/src/views/user/Index.vue b/order-system/src/views/user/Index.vue
index d32a8fa..48e6b30 100644
--- a/order-system/src/views/user/Index.vue
+++ b/order-system/src/views/user/Index.vue
@@ -9,27 +9,37 @@
         <el-input v-model="listParm.phone" placeholder="请输入电话："></el-input>
       </el-form-item>
       <el-form-item>
-        <el-button :icon="Search">搜索</el-button>
-        <el-button :icon="Close">重置</el-button>
-        <el-button type="primary" :icon="Plus">新增</el-button>
-        
+        <el-button :icon="Search" @click="searchBtn">搜索</el-button>
+        <el-button plain :icon="Close" type="danger" @click="resetBtn">重置</el-button>
+        <el-button plain type="primary" :icon="Plus" @click="addBtn">新增</el-button>
+
       </el-form-item>
     </el-form>
-    
+
   </el-main>
+
+  <!-- 新增、编辑按钮弹框 -->
+  <AddUser ref="showBtn"></AddUser>
+  <AddUser ref="tableShowBtn"></AddUser>
 </template>
 
 <script setup lang="ts">
 
-  import { Search, Close, Plus } from '@element-plus/icons-vue'
-  // 导入useUserTable,获取表格相关业务
-  // 第一次导入在vite-env.d.ts中添加路径别名支持
-  import useUserTable from '@/compositions/user/useUserTable';
+import { Search, Close, Plus } from '@element-plus/icons-vue'
+// 导入useUserTable,获取表格相关业务
+// 第一次导入在vite-env.d.ts中添加路径别名支持
+import useUserTable from '@/compositions/user/useUserTable';
 
-  // 获取表格相关业务
-  const { listParm } = useUserTable()
-</script>
+// 获取表格相关业务
+const { tableShowBtn, listParm, getList, searchBtn, resetBtn } = useUserTable()
 
-<style scoped>
+// 导入useUser,获取增删改相关业务
+import useUser from '@/compositions/user/useUser';
+
+const { showBtn, addBtn, deleteBtn, editBtn } = useUser()
+
+// 导入子组件AddUser,关联新增按钮
+import AddUser from './AddUser.vue';
+</script>
 
-</style>
\ No newline at end of file
+<style scoped></style>
\ No newline at end of file
diff --git a/order-system/src/vite-env.d.ts b/order-system/src/vite-env.d.ts
index 065a1c3..32b8c54 100644
--- a/order-system/src/vite-env.d.ts
+++ b/order-system/src/vite-env.d.ts
@@ -59,11 +59,21 @@ declare module '@/compositions/*' {
 }
 
 // 添加api路径别名支持
-// declare module '@/api/user/userModel' {
-//   export type ListUserParm = {
-//     currentPage: number;
-//     pageSize: number;
-//     name: string;
-//     phone: string;
-//   }
-// }
\ No newline at end of file
+declare module '@/api/user/userModel' {
+  export type ListUserParm = {
+    currentPage: number;
+    pageSize: number;
+    name: string;
+    phone: string;
+  }
+
+  export type UserModel = {
+  userId: string;
+  username: string;
+  password: string;
+  phone: string;
+  email: string;
+  sex: string;
+  name: string;
+}
+}
\ No newline at end of file