在views/user下新建AddUser.vue模块，细分新增功能

完善新增按钮功能
通过按钮实现表单弹窗
根据Element-plus提供的表单组件，修改表单属性

根据数据库表中的字段，设置需要从表单中获取的信息

order-system/src/App.vue

@@ -1,7 +1,6 @@
 <!-- 作为应用程序的根组件，并提供路由视图的容器 -->
 <template>
-  <router-view/>
+  <router-view />
 </template>
 
-<style lang="scss">
+<style lang="scss"></style>
-</style>

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;
 }

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;
   }
 

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
+  }
+
+}

order-system/src/compositions/user/useUserTable.ts

@@ -1,9 +1,9 @@
 // 抽离表格相关业务
 
-import type { ListUserParm } from "../../api/user/userModel";
+import type { ListUserParm } from "@/api/user/userModel";
-import { reactive } from "vue";
+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{
+  return {
-    listParm
+    tableShowBtn,
+    listParm,
+    getList,
+    searchBtn,
+    resetBtn
   }
 }

order-system/src/hooks/useDialog.ts

@@ -8,8 +8,8 @@ export default function useDialog(){
   const dialog = reactive({
     title: '新增',
     visible: false,
-    width: 600,
+    width: 630,
-    height: 100
+    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
   }
 

order-system/src/layout/Index.vue

@@ -48,7 +48,7 @@
     justify-content: space-between;
   }
 
-  .main {
+  // .main {
-    background-color: darkcyan;
+  //   background-color: darkcyan;
-  }
+  // }
 </style>

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

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>

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="Search" @click="searchBtn">搜索</el-button>
-        <el-button :icon="Close">重置</el-button>
+        <el-button plain :icon="Close" type="danger" @click="resetBtn">重置</el-button>
-        <el-button type="primary" :icon="Plus">新增</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'
+import { Search, Close, Plus } from '@element-plus/icons-vue'
-  // 导入useUserTable,获取表格相关业务
+// 导入useUserTable,获取表格相关业务
-  // 第一次导入在vite-env.d.ts中添加路径别名支持
+// 第一次导入在vite-env.d.ts中添加路径别名支持
-  import useUserTable from '@/compositions/user/useUserTable';
+import useUserTable from '@/compositions/user/useUserTable';
 
-  // 获取表格相关业务
+// 获取表格相关业务
-  const { listParm } = useUserTable()
+const { tableShowBtn, listParm, getList, searchBtn, resetBtn } = useUserTable()
-</script>
 
-<style scoped>
+// 导入useUser,获取增删改相关业务
+import useUser from '@/compositions/user/useUser';
+
+const { showBtn, addBtn, deleteBtn, editBtn } = useUser()
+
+// 导入子组件AddUser,关联新增按钮
+import AddUser from './AddUser.vue';
+</script>
 
-</style>
+<style scoped></style>

order-system/src/vite-env.d.ts

@@ -59,11 +59,21 @@ declare module '@/compositions/*' {
 }
 
 // 添加api路径别名支持
-// declare module '@/api/user/userModel' {
+declare module '@/api/user/userModel' {
-//   export type ListUserParm = {
+  export type ListUserParm = {
-//     currentPage: number;
+    currentPage: number;
-//     pageSize: number;
+    pageSize: number;
-//     name: string;
+    name: string;
-//     phone: string;
+    phone: string;
-//   }
+  }
-// }
+
+  export type UserModel = {
+  userId: string;
+  username: string;
+  password: string;
+  phone: string;
+  email: string;
+  sex: string;
+  name: string;
+}
+}