1. 完善文章的新增与编辑

• 打开 src/views/admin/user/components/user-save.vue 并修改，完整代码如下：

 <template>
 <div>
   <el-dialog v-model="show" :title="dialogTitle">
     <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
       <el-row :gutter="16">
         <el-col :span="23">
           <el-form-item label="用户名" prop="username">
             <el-input
               clearable
               :maxlength="20"
               v-model="form.username"
               placeholder="请输入用户名"
               :disabled="isUpdate"
             />
           </el-form-item>
           <el-form-item label="手机号" prop="phone">
             <el-input
               clearable
               :maxlength="11"
               v-model="form.phone"
               placeholder="请输入手机号"
             />
           </el-form-item>
           <el-form-item label="密码" prop="password">
             <el-input
               show-password
               type="password"
               :maxlength="20"
               v-model="form.password"
               placeholder="请输入密码"
             />
           </el-form-item>
           <el-form-item label="性别" prop="sex">
             <el-select v-model="form.sex" placeholder="请选择">
               <el-option
                 v-for="item in selectOpt"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
               />
             </el-select>
           </el-form-item>
           <el-form-item label="状态" prop="status">
             <el-radio-group v-model="form.status">
               <el-radio :value="1" size="large">正常</el-radio>
               <el-radio :value="2" size="large">禁用</el-radio>
             </el-radio-group>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
     <template #footer>
       <el-button @click="close">取消</el-button>
       <el-button type="primary" @click="save">
         保存
       </el-button>
     </template>
   </el-dialog>
 </div>
 </template>
 
 <script setup>
 import { ref, reactive, watch } from 'vue'
 import { useFormData } from '@/utils/form-data.js'
 import { saveUser } from '@/api/user/index.js'
 import { ElMessage } from 'element-plus'
 
 //自定义事件
 const emit = defineEmits(['done'])
 
 //是否显示弹窗
 const show = defineModel('show')
 //是否是编辑（用户名不允许修改）
 const isUpdate = defineModel('isUpdate')
 //编辑时的用户数据
 const rowData = defineModel('rowData')
 //弹窗标题
 const dialogTitle = defineModel('dialogTitle')
 
 //表单对象
 const formRef = ref(null)
 
 //表单
 const { form, resetFields, assignFields } = useFormData({
   userId: void 0,
   username: '',
   password: '',
   phone: '',
   sex: void 0,
   status: void 0
 });
 
 //验证规则
 const rules = reactive({
   username: [
     {
         required: true,
         message: '请输入名称',
         type: 'string',
         trigger: 'blur'
      }
   ],
   phone: [
     {
         required: true,
         message: '请输入手机号码',
         type: 'string',
         trigger: 'blur'
      }
   ],
 });
 
 //性别选项
 const selectOpt = [
   { value: 1, label: '男' },
   { value: 2, label: '女' },
   { value: 3, label: '保密' }
 ]
 
 //保存
 const save = () => {
   //console.log(form)
   formRef.value?.validate?.((valid) => {
     if (!valid) {
       return false;
     }
     //验证通过后提交保存
     saveUser(form).then((msg) => {
       ElMessage.success(msg)
       //关闭弹窗
       show.value = false
       //刷新列表页
       emit('done')
     }).catch((err) => {
       return err && ElMessage.error(err.message)
     })
   });
 }
 
 //重置取消
 const close = () => {
   show.value = false;
 }
 
 //监听编辑
 watch(show, (showValue) => {
   if(showValue){
     if(rowData.value) {
       assignFields(rowData.value)
     }
   } else {
     resetFields();
     formRef.value?.clearValidate?.();
   }
 });
 
 </script>
 
 <style scoped>
 
 </style>

2. 完善父组件

• 打开 src/views/admin/user/index.vue 并修改，完整代码如下：

 <template>
   <el-space fill>
     <!--搜索-->
     <el-card style="width: 100%" shadow="never">
       <UserSearch @search="reload" />
     </el-card>
     <!--列表-->
     <el-card style="width: 100%" shadow="never">
       <!--按钮组-->
       <div style="margin-bottom: 10px">
         <el-button-group type="primary">
           <el-button type="primary" @click="add">
             <el-icon>
               <Plus />
             </el-icon>
             <span class="left-6">新增</span>
           </el-button>
           <el-button type="danger">
             <el-icon>
               <Delete />
             </el-icon>
             <span class="left-6">删除</span>
           </el-button>
         </el-button-group>
       </div>
       <!--列表-->
       <el-table :data="tableData.list">
         <el-table-column type="selection" width="55" />
         <el-table-column prop="userId" label="ID" width="50" />
         <el-table-column prop="username" label="用户名" />
         <el-table-column prop="phone" label="手机号码" />
         <el-table-column prop="sex" label="性别" width="90">
           <template #default="{ row }">
             <span v-if="row.sex === 1">男</span>
             <span v-else-if="row.sex === 2">女</span>
             <span v-else>保密</span>
           </template>
         </el-table-column>
         <el-table-column prop="status" label="状态" width="90">
           <template #default="{ row }">
             <span v-if="row.status === 1">正常</span>
             <span v-else>禁用</span>
           </template>
         </el-table-column>
         <el-table-column prop="create_time" label="创建时间" width="200">
           <template #default="{ row }">
             {{ row.createTime }}
           </template>
         </el-table-column>
 
         <el-table-column label="操作" width="200">
           <template #default="{row}">
             <el-button size="small" type="primary" @click="edit(row)">编辑</el-button>
             <el-button size="small" type="danger">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
       <div class="table-footer">
         <div class="pagination">
           <!-- 分页 -->
           <el-pagination background layout="prev, pager, next"
                          v-if="tableData.total"
                          :total="tableData.total"
                          :page-size="tableData.pageSize"
                          :current-page="tableData.page"
                          @current-change="currentChange" />
         </div>
       </div>
     </el-card>
   </el-space>
   <!-- 新增与编辑-->
   <UserSave v-model:show="show"
             v-model:dialogTitle="dialogTitle"
             v-model:isUpdate="isUpdate"
             v-model:rowData="rowData"
             @done = "reload"
   />
 
 </template>
 
 <script setup>
 import { reactive, onMounted, ref } from 'vue'
 import { Delete, Plus } from '@element-plus/icons-vue'
 import UserSearch from './components/user-search.vue'
 import { pageUser } from '@/api/user/index.js'
 import { ElMessage } from 'element-plus'
 import UserSave from './components/user-save.vue'
 
 //是否显示弹窗
 const show = ref(false)
 //是否是编辑
 const isUpdate = ref(false)
 //编辑时的用户数据
 const rowData = ref(null)
 //弹窗标题
 const dialogTitle = ref('')
 
 
 //表单属性
 const tableData = reactive({
   page: 1, //当前默认页
   total: 0, //模拟，总记录数
   pageSize: 10, //每页记录数
   list: [], //用户数据列表
 });
 
 //新增文件
 const add = () => {
   isUpdate.value = false
   rowData.value = null
   dialogTitle.value = '新增用户'
   //这个要放在最后
   show.value = true
 };
 
 //编辑文章
 const edit = (row) => {
   rowData.value = row ?? null
   isUpdate.value = true
   dialogTitle.value = '编辑用户'
   //这个要放在最后
   show.value = true
 }
 
 //Dom挂载后获取数据
 onMounted(() => {
   getUserList()
 })
 
 //重新加载
 const reload = (form) => {
   getUserList(form)
 };
 
 //获取分页数据
 const getUserList = (objData) => {
   pageUser({ page: tableData.page, pageSize: tableData.pageSize, ...objData}).then((res) => {
     //console.log(res)
     tableData.total = res.total;
     tableData.list = res.list;
   }).then((e) => {
     return e && ElMessage.error(e.message)
   })
 };
 
 //跳转导航
 const currentChange = (pageNum) => {
   tableData.page = pageNum
   getUserList()
 }
 </script>
 
 <style scoped>
 .left-6 {
   margin-left: 6px;
 }
 
 .table-footer {
   padding-top: 10px;
   box-sizing: border-box;
   display: flex;
   align-items: center;
 }
 
 .pagination {
   margin: 0 auto;
   flex-wrap: wrap;
   justify-content: center;
 }
 .el-table__header {
   background-color: #f0f0f0;
 }
 </style>

3. 追回 request的保存接口

• 打开 src/api/user/index.js 追回以下代码：

 
 /**
  * 提交保存
  */
 export const saveUser = async (data) => {
     const res = await service.post('/api/sys/user', data);
     if (res.data.code === 200) {
         return res.data.message
     }
     return Promise.reject(new Error(res.data.message))
 }