客服管理 修改

src/views/PeopleManage/Customer/CustomerServiceAccount.vue

@@ -1,4 +1,7 @@
 <script setup>
+
+import {getDeptTree} from "../../../http/moudules/customer/customerManage";
+
 export default {
   data() {
     return {
@@ -7,6 +10,22 @@ export default {
         nickname: "",
         pageNum: 1,
         pageSize: 20,
+      },
+      // 弹框
+      dialogVisible: false,
+      form: {
+        nickname: '',
+        avatar: '',
+        backendUser: '',
+        wechatUser: ''
+      },
+      backendUsers: [],
+      departmentTree: [],
+      wechatUsers: [],
+      treeProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'leaf'
       }
     }
   },
@@ -17,8 +36,7 @@ export default {
     queryPage() {
       this.$api.customerManage.pageQuery(this.queryCondition).then((res) => {
         if (res.code === 200) {
-          this.$message("删除成功")
-          // this.pageResult = res.data
+          this.pageResult = res.data
         }
       })
     },
@@ -45,12 +63,92 @@ export default {
           this.$message("清除值班配置成功")
         }
       })
+    },
+
+    // 头像上传成功处理
+    handleAvatarSuccess(res, file) {
+      this.form.avatar = URL.createObjectURL(file.raw)
+    },
+
+    // 头像上传前验证
+    beforeAvatarUpload(file) {
+      const isImage = file.type.startsWith('image/')
+      const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isImage) {
+        this.$message.error('只能上传图片文件!')
+      }
+      if (!isLt2M) {
+        this.$message.error('图片大小不能超过2MB!')
+      }
+      return isImage && isLt2M
+    },
+
+    // 加载后线人员
+    async loadBackendUsers() {
+      try {
+        const res = await this.$api.user.findBackListByDeptId(99)
+        this.backendUsers = res.data.map(item => ({
+          value: item.id,
+          label: item.name
+        }))
+      } catch (error) {
+        this.$message.error('获取后线人员失败')
+      }
+    },
+
+    // 加载部门数据（懒加载）
+    async loadDepartment(node, resolve) {
+      try {
+        const res = await this.$api.customerManage.getDeptTree();
+        const departments = res.data.map(d => ({
+          ...d,
+          leaf: d.childDept.size !== 0
+        }))
+        resolve(departments)
+      } catch (error) {
+        this.$message.error('加载部门失败')
+        resolve([])
+      }
+    },
+
+    // 部门点击事件
+    async handleDepartmentClick(department) {
+      try {
+        const res = await this.$api.customerManage.getDeptUser(department.id).then((res) => {
+          if (res.code === 200) {
+            this.wechatUsers = res.data
+          }else {
+            this.$message.error(res.message)
+          }
+        })
+      } catch (error) {
+        this.$message.error('获取部门用户失败')
+      }
+    },
+
+    // 确认提交
+    handleConfirm() {
+      // 这里添加验证逻辑
+      this.$api.customerManage.addCustomer.post(this.form)
+          .then((res) => {
+            if (res.code === 200) {
+              this.$message.success('保存成功')
+            }else {
+              this.$message.error(res.message)
+            }
+            this.dialogVisible = false
+          })
+          .catch(() => {
+            this.$message.error('保存失败')
+          })
     }
   }
 }
 </script>
 
 <template>
+
   <div>
     <el-form :inline="true" :model="queryCondition" class="demo-form-inline" size="small" label-width="130px">
       <el-row>
@@ -58,7 +156,7 @@ export default {
           <el-input v-model="queryCondition.nickname" placeholder="请输入昵称" class="widths" clearable></el-input>
         </el-form-item>
         <el-button type="primary" size="small" @click="queryPage">查询</el-button>
-        <el-button type="primary" size="small">添加客服</el-button>
+        <el-button type="primary" size="small" @click="dialogVisible=true">添加客服</el-button>
       </el-row>
     </el-form>
     <el-table :data="pageResult" style="width: 100%" height="580" border highlight-current-row stripe
@@ -84,6 +182,81 @@ export default {
         </template>
       </el-table-column>
     </el-table>
+
+    <!-- 添加客服弹框 -->
+    <el-dialog
+        title="客服信息设置"
+        :visible.sync="dialogVisible"
+        width="600px"
+    >
+      <el-form :model="form" label-width="100px">
+        <!-- 客服昵称 -->
+        <el-form-item label="客服昵称">
+          <el-input v-model="form.nickname" placeholder="请输入客服昵称"></el-input>
+        </el-form-item>
+
+        <!-- 客服头像上传 -->
+        <el-form-item label="客服头像">
+          <el-upload
+              class="avatar-uploader"
+              action="/api/upload"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload">
+            <img v-if="form.avatar" :src="form.avatar" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+
+        <!-- 后线人员选择 -->
+        <el-form-item label="后线人员">
+          <el-select
+              v-model="form.backendUser"
+              filterable
+              placeholder="请选择后线人员"
+              @focus="loadBackendUsers">
+            <el-option
+                v-for="item in backendUsers"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!-- 企微部门树 -->
+        <el-form-item label="企微部门">
+          <el-tree
+              :data="departmentTree"
+              :props="treeProps"
+              :load="loadDepartment"
+              lazy
+              @node-click="handleDepartmentClick"
+              highlight-current>
+          </el-tree>
+        </el-form-item>
+
+        <!-- 企微用户选择 -->
+        <el-form-item label="企微用户">
+          <el-select
+              v-model="form.wechatUser"
+              filterable
+              placeholder="请先选择部门">
+            <el-option
+                v-for="user in wechatUsers"
+                :key="user.id"
+                :label="user.name"
+                :value="user.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleConfirm">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 
 </template>