更新了用户编辑前端界面

src/api/system/user/index.js

@@ -16,7 +16,7 @@ export function add(data) {
 }
 export function edit(data) {
   return service.request({
-    url: "/api/v1/system/userInfo/update",
+    url: "/api/v1/system/userInfo/edit",
     method: "put",
     data,
     headers: { "Content-Type": "application/json;charset=UTF-8" },

src/views/system/user/index.vue

@@ -5,7 +5,7 @@ import { useUserStore } from '@/stores/system/user';
 import { storeToRefs } from 'pinia';
 const userStore = useUserStore();
 const { tableData, total, pageNum, pageSize } = storeToRefs(userStore);
-// 选中的⽤户ID数组
+// 选中的用户ID数组
 const selectedUserIds = ref([]);
 const queryFunction = function () {
   userStore.queryData({
@@ -20,11 +20,11 @@ const userAddFrom = ref({
   avatarAddress: ''
 });
 const userAddFromRules = {
-  userName: [{ required: true, message: '请输⼊⽤户名', trigger: 'blur' }],
-  password: [{ required: true, message: '请输⼊密码', trigger: 'blur' }],
-  fullName: [{ required: true, message: '请输⼊姓名', trigger: 'blur' }]
+  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+  fullName: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
 };
-// 创建表单引⽤
+// 创建表单引用
 const userAddFromRef = ref();
 onMounted(() => {
   queryFunction();
@@ -40,53 +40,83 @@ const handleCurrentChange = function (val) {
 const handleAdd = async () => {
   if (!userAddFromRef.value) return
   try {
-    // 这⾥可以打开添加⽤户对话框，并传递userAddFrom数据
+    // 这里可以打开添加用户对话框，并传递userAddFrom数据
     const valid = await userAddFromRef.value.validate();
     if (valid) {
       userStore.addUser(userAddFrom.value);
       userStore.dialogFormVisible = false;
     }
   } catch (error) {
-    // console.error('添加⽤户失败:', error);
-    // 可以显示错误提示给⽤户，例如使⽤ElMessage
-    ElMessage.error('添加⽤户失败，请重试');
+    // console.error('添加用户失败:', error);
+    // 可以显示错误提示给用户，例如使用ElMessage
+    ElMessage.error('添加用户失败，请重试');
   }
 };
+const userEditFrom = ref({
+  id: '',
+  userName: '',
+  password: '',
+  fullName: '',
+  phoneNumber: '',
+  avatarAddress: ''
+});
+const userEditFromRules = {
+  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  fullName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+  password: [{ required: false, message: '请输入新密码', trigger: 'blur' }]
+};
+const userEditFromRef = ref();
+
 const handleEdit = (row) => {
-  // 这⾥可以打开编辑⽤户对话框，并传递row数据
-  userStore.editUser(row);
+  // 初始化编辑表单数据
+  userEditFrom.value = { ...row };
+  // 显示编辑对话框
+  userStore.dialogEditFormVisible = true;
 };
-// 当前选中的⾏
+
+const handleEditSubmit = async () => {
+  if (!userEditFromRef.value) return
+  try {
+    const valid = await userEditFromRef.value.validate();
+    if (valid) {
+      await userStore.editUser(userEditFrom.value);
+      userStore.dialogEditFormVisible = false;
+    }
+  } catch (error) {
+    ElMessage.error('编辑用户失败，请重试');
+  }
+};
+// 当前选中的行
 const handleSelectionChange = (rows) => {
-  // 获取选中⾏的ID
+  // 获取选中行的ID
   selectedUserIds.value = rows.map(row => row.id);
 };
 const handleDelete = (row) => {
-  // 使⽤Element Plus的MessageBox组件实现确认对话框
-  ElMessageBox.confirm('确定要删除这个⽤户吗？', '提示', {
+  // 使用Element Plus的MessageBox组件实现确认对话框
+  ElMessageBox.confirm('确定要删除这个用户吗？', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
   }).then(() => {
     userStore.deleteUser(row.id);
   }).catch(() => {
-    // ⽤户点击取消时的处理
+    // 用户点击取消时的处理
   });
 };
-// 批量删除选中的⽤户
+// 批量删除选中的用户
 const handleBatchDelete = () => {
   if (selectedUserIds.value.length === 0) {
-    ElMessage.warning('请⾄少选择⼀条记录进⾏删除');
+    ElMessage.warning('请至少选择一条记录进行删除');
     return;
   }
-  ElMessageBox.confirm('确定要批量删除选中的⽤户吗？', '提示', {
+  ElMessageBox.confirm('确定要批量删除选中的用户吗？', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
   }).then(() => {
     userStore.batchDeleteUser(selectedUserIds.value);
   }).catch(() => {
-    // ⽤户点击取消时的处理
+    // 用户点击取消时的处理
   });
 };
 </script>
@@ -110,9 +140,9 @@ const handleBatchDelete = () => {
           element-loading-background="rgba(0, 0, 0, 0.1)" @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55" />
           <el-table-column type="index" label="序号" width="55" />
-          <el-table-column prop="userName" label="⽤户名" />
+          <el-table-column prop="userName" label="用户名" />
           <el-table-column prop="fullName" label="姓名" />
-          <el-table-column prop="phoneNumber" label="⼿机号" />
+          <el-table-column prop="phoneNumber" label="手机号" />
           <el-table-column label="头像" width="88">
             <template #default="{ row }">
               <el-image style="width: 40px; height: 40px" :src="row.avatarAddress" :zoom-rate="1.2" :max-scale="7"
@@ -139,19 +169,19 @@ const handleBatchDelete = () => {
       </div>
     </div>
   </div>
-  <el-dialog v-model="userStore.dialogFormVisible" title="新增⽤户" width="600" center>
+  <el-dialog v-model="userStore.dialogFormVisible" title="新增用户" width="600" center>
     <el-form ref="userAddFromRef" :model="userAddFrom" :rules="userAddFromRules">
       <el-form-item prop="userName">
-        <el-input v-model="userAddFrom.userName" autocomplete="off" placeholder="请输⼊⽤户名" />
+        <el-input v-model="userAddFrom.userName" autocomplete="off" placeholder="请输入用户名" />
       </el-form-item>
       <el-form-item prop="password">
-        <el-input v-model="userAddFrom.password" type="password" autocomp lete="off" placeholder="请输⼊密码" />
+        <el-input v-model="userAddFrom.password" type="password" autocomp lete="off" placeholder="请输入密码" />
       </el-form-item>
       <el-form-item prop="fullName">
-        <el-input v-model="userAddFrom.fullName" autocomplete="off" placeholder="请输⼊姓名" />
+        <el-input v-model="userAddFrom.fullName" autocomplete="off" placeholder="请输入姓名" />
       </el-form-item>
       <el-form-item>
-        <el-input v-model="userAddFrom.phoneNumber" autocomplete="off" placeholder="请输⼊⼿机号" />
+        <el-input v-model="userAddFrom.phoneNumber" autocomplete="off" placeholder="请输入手机号" />
       </el-form-item>
       <el-form-item>
         <el-input v-model="userAddFrom.avatarAddress" autocomplete="off" placeholder="请上传头像" />
@@ -166,6 +196,34 @@ const handleBatchDelete = () => {
       </div>
     </template>
   </el-dialog>
+  <!-- 编辑用户对话框 -->
+  <el-dialog v-model="userStore.dialogEditFormVisible" title="编辑用户" width="600" center>
+    <el-form ref="userEditFromRef" :model="userEditFrom" :rules="userEditFromRules">
+      <el-form-item prop="userName">
+        <el-input v-model="userEditFrom.userName" autocomplete="off" placeholder="请输入用户名" />
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input v-model="userEditFrom.password" type="password" autocomplete="off" placeholder="请输入新密码（可选）" />
+      </el-form-item>
+      <el-form-item prop="fullName">
+        <el-input v-model="userEditFrom.fullName" autocomplete="off" placeholder="请输入姓名" />
+      </el-form-item>
+      <el-form-item>
+        <el-input v-model="userEditFrom.phoneNumber" autocomplete="off" placeholder="请输入手机号" />
+      </el-form-item>
+      <el-form-item>
+        <el-input v-model="userEditFrom.avatarAddress" autocomplete="off" placeholder="请上传头像" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="userStore.dialogEditFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleEditSubmit">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 <style scoped lang="less">
 .data-table-container {