Browse Source

feat(apiUsers): 添加用户编辑功能并优化用户列表

- 在用户列表中添加编辑按钮和相关功能
- 新增用户编辑对话框和表单
- 实现用户信息的获取、编辑和保存功能
- 优化用户列表的展示和操作
fugui001 6 tháng trước cách đây
mục cha
commit
a813d14a1b

+ 10 - 0
src/api/system/business/apiUsers/types.ts

@@ -229,6 +229,16 @@ export interface UserForm extends BaseEntity {
    * 上一次登录ip
    */
   lastLoginIp?: string;
+
+  /**
+   * 票数
+   */
+  ticketCount?: string;
+
+  /**
+   * 积分
+   */
+  score?: string;
 }
 
 export interface UserQuery extends PageQuery {

+ 79 - 2
src/views/system/business/apiUsers/index.vue

@@ -102,6 +102,9 @@
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['business:user:remove']"></el-button>
             </el-tooltip>
 
+            <el-tooltip content="编辑" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)" v-hasPermi="['business:user:edit']"></el-button>
+            </el-tooltip>
           </template>
         </el-table-column>
       </el-table>
@@ -151,6 +154,34 @@
         </div>
       </template>
     </el-dialog>
+
+    <!-- 编辑用户对话框 -->
+    <el-dialog :title="editDialog.title" v-model="editDialog.visible" width="500px" append-to-body>
+      <el-form ref="editUserFormRef" :model="editForm" :rules="rules2" label-width="80px">
+        <el-form-item label="用户ID" prop="id" v-show="false">
+          <el-input v-model="editForm.id" disabled />
+        </el-form-item>
+
+        <el-form-item label="手机号" prop="phone">
+          <el-input v-model="editForm.phone" placeholder="请输入手机号" @input="handlePhoneInput" />
+        </el-form-item>
+
+        <el-form-item label="积分数" prop="score">
+          <el-input v-model.number="editForm.score" />
+        </el-form-item>
+
+        <el-form-item label="门票数" prop="ticketCount">
+          <el-input v-model.number="editForm.ticketCount" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitEditForm">确 定</el-button>
+          <el-button @click="cancelEdit">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -177,6 +208,11 @@ const dialog = reactive<DialogOption>({
   title: ''
 });
 
+const editDialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
 const initFormData: UserForm = {
   id: undefined,
   loginName: undefined,
@@ -235,6 +271,45 @@ const data = reactive<PageData<UserForm, UserQuery>>({
   }
 });
 
+const editForm = ref<UserForm>({
+  id: undefined,
+  phone: '',
+  ticketCount: '',
+  score: ''
+});
+const rules2 = ref({
+  phone: [
+    { required: true, message: '手机号不能为空', trigger: 'blur' },
+    {
+      pattern: /^1[3-9]\d{9}$/,
+      message: '请输入正确的手机号格式',
+      trigger: 'blur'
+    }
+  ]
+});
+const submitEditForm = async () => {
+  try {
+    await updateUser(editForm.value); // 调用更新接口
+    proxy?.$modal.msgSuccess('编辑成功');
+    editDialog.visible = false;
+    getList(); // 刷新列表
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const cancelEdit = () => {
+  editDialog.visible = false;
+};
+
+const handleEdit = async (row: UserVO) => {
+  const userId = row.id;
+  const res = await getUser(userId);
+  editForm.value = { ...res.data }; // 把数据赋值给可编辑表单
+  editDialog.visible = true;
+  editDialog.title = '编辑';
+};
+
 const { queryParams, form, rules } = toRefs(data);
 
 /** 查询【请填写功能名称】列表 */
@@ -297,7 +372,7 @@ const handleUpdate = async (row?: UserVO) => {
 const toggleStatus = (row) => {
   const newStatus = row.status === 1 ? 0 : 1;
   const confirmText = newStatus === 0 ? '禁用' : '启用';
-  row.status=newStatus;
+  row.status = newStatus;
   // 弹出确认框
   ElMessageBox.confirm(`确认要${confirmText}用户【${row.nickName || row.loginName}】吗?`, '提示', {
     confirmButtonText: '确定',
@@ -357,7 +432,9 @@ const handleExport = () => {
     `user_${new Date().getTime()}.xlsx`
   );
 };
-
+const handlePhoneInput = (value: string) => {
+  editForm.value.phone = value.replace(/[^0-9]/g, '');
+};
 onMounted(() => {
   getList();
 });