修改用户页面 询单

src/views/admin/user/index.vue

@@ -3,6 +3,7 @@
     <!-- 顶部操作栏 -->
     <div class="customer-toolbar boxshadow">
       <div class="customer-search-group">
+        <el-input v-model="keyword" placeholder="请输入关键字" />
         <el-select
           v-model="selectValue"
           style="min-width: 120px"
@@ -30,13 +31,13 @@
       >
         <template #default>
           <el-table-column prop="id" label="用户ID" align="center" />
+          <el-table-column prop="sn" label="SN" align="center" />
           <el-table-column prop="follow" label="头像" align="center">
             <template #default="scope">
               <img :src="scope.row.avatar" alt="头像" class="avatar" />
             </template>
           </el-table-column>
           <el-table-column prop="name" label="用户名称" align="center" />
-          <el-table-column prop="customer_count" label="客户数量" align="center" />
           <el-table-column prop="phone" label="电话" align="center" />
           <el-table-column prop="email" label="邮箱" align="center" />
           <el-table-column prop="follow" label="状态" align="center">
@@ -46,6 +47,7 @@
               </span>
             </template>
           </el-table-column>
+          <el-table-column prop="customer_count" label="客户数量" align="center" />
           <el-table-column fixed="right" label="操作" width="200px" align="center">
             <template #default="scope">
               <el-link
@@ -57,6 +59,15 @@
               >
                 <i class="iconfont-sys"> &#xe794;</i>客户转移
               </el-link>
+              <el-link
+                type="success"
+                underline="never"
+                style="margin-right: 8px"
+                @click="onEdit(scope.row)"
+                v-if="hasAuth('user@customer_transfer')"
+              >
+                <i class="iconfont-sys"> &#xe6bf;</i>编辑
+              </el-link>
             </template>
           </el-table-column>
         </template>
@@ -128,6 +139,45 @@
       </div>
     </el-form>
   </el-dialog>
+  <el-dialog
+    title="编辑用户"
+    v-model="AddDialogVisible"
+    width="800px"
+    :close-on-click-modal="false"
+  >
+    <el-form :model="addForm" ref="addFormRef" label-width="80px" class="add-form">
+      <el-row :gutter="16">
+        <el-col :span="24">
+          <el-form-item label="用户名" prop="country">
+            <el-input v-model="addForm.name" placeholder="请输入用户名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="Email" prop="email">
+            <el-input v-model="addForm.email" placeholder="请输入Email" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="电话" prop="tel">
+            <el-input v-model="addForm.phone" placeholder="请输入电话" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="状态" prop="status">
+            <el-select v-model="addForm.status">
+              <el-option label="正常" :value="1" />
+              <el-option label="离职" :value="2" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div class="form-submit-row">
+        <el-button type="primary" size="large" style="width: 50%" @click="handleAddSubmit"
+          >提交</el-button
+        >
+      </div>
+    </el-form>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -136,10 +186,12 @@
   import { useAuth } from '@/composables/useAuth'
   const { hasAuth } = useAuth()
   const selectValue = ref<string[]>([])
+  const keyword = ref<string>('')
   const loading = ref(false)
   const loadingkh = ref(false)
   const detailDialogVisible = ref(false)
   const plzyDialogVisible = ref(false)
+  const AddDialogVisible = ref(false)
   const pagination = reactive({
     currentPage: 1,
     pageSize: 10,
@@ -157,6 +209,13 @@
   const zyForm = reactive({
     customer_id: ''
   })
+  const addForm = reactive({
+    id: '',
+    name: '',
+    email: '',
+    phone: '',
+    status: ''
+  })
   const userOptions = ref<any>()
   const getuserList = async () => {
     // 这里调用获取用户列表的接口
@@ -172,7 +231,7 @@
     gettableList()
   })
   // tabs 切换联动
-  watch([selectValue], () => {
+  watch([selectValue, keyword], () => {
     pagination.currentPage = 1
     gettableList()
   })
@@ -185,7 +244,10 @@
         size: pageSize
       }
       if (selectValue.value) {
-        params.keyword = selectValue.value
+        params.id = selectValue.value
+      }
+      if (keyword.value) {
+        params.keyword = keyword.value
       }
       const { records, current, size, total } = await manageService.getUserList(params)
       tableData.value = records.map((item: any) => ({
@@ -275,6 +337,21 @@
     detailDialogVisible.value = false
     gettableList()
   }
+  // 编辑用户
+  const onEdit = (row: any) => {
+    AddDialogVisible.value = true
+    addForm.id = row.id
+    addForm.name = row.name
+    addForm.email = row.email
+    addForm.phone = row.phone
+    addForm.status = row.status
+  }
+  const handleAddSubmit = async () => {
+    const res = await manageService.userEdit(addForm)
+    ElMessage.success(res?.message || '编辑成功！')
+    AddDialogVisible.value = false
+    gettableList()
+  }
 </script>
 
 <style scoped lang="scss">
@@ -410,30 +487,7 @@
   .fade-leave-to {
     opacity: 0;
   }
-  .tag-items {
-    cursor: pointer;
-    border-radius: 4px;
-    padding: 5px 10px;
-    transition: background 0.2s;
-    min-width: 100px;
-    display: inline-block;
-    margin-right: 30px;
-  }
-  .tag-item {
-    border-radius: 4px;
-    padding: 5px 10px;
-  }
-  .tag-itemall {
-    border-radius: 4px;
-    padding: 5px 10px;
-    margin-right: 20px;
-  }
-  .tag-active {
-    background: #3471ff;
-    color: #fff;
-  }
-  .tag-active :deep(.el-badge__content) {
-    color: #3471ff !important; /* 文字颜色 */
-    background-color: #fff !important; /* 背景色 */
+  .form-submit-row {
+    text-align: center;
   }
 </style>