客服管理 修改

src/http/moudules/customer/customerManage.js

@@ -17,6 +17,15 @@ export const getDeptUser = (deptId) => {
   })
 }
 
+// 修改和添加值班配置
+export const dutyConfig = (data) => {
+  return axios({
+    url: '/wechat/customer/manage/dutyConfig',
+    method: 'put',
+    data
+  })
+}
+
 //获取值班配置
 export const getDutyConfig = (customerId) => {
   return axios({
@@ -42,6 +51,14 @@ export const pageQuery = (data) => {
   })
 }
 
+//获取所有客服
+export const getAll = () => {
+  return axios({
+    url: '/wechat/customer/manage/getAll',
+    method: 'get',
+  })
+}
+
 // 编辑客服
 export const getCustomer = (customerId) => {
   return axios({

src/views/PeopleManage/Customer/CustomerServiceAccount.vue

@@ -1,7 +1,10 @@
 <script setup>
-import {BASE_URL} from "../../../../config/prod.env";
+import KtCommonTable from "@/views/Core/KtCommonTable.vue";
 
 export default {
+  components: {
+    KtCommonTable,
+  },
   data() {
     return {
       pageResult: [],
@@ -9,7 +12,6 @@ export default {
         nickname: "",
         pageNum: 1,
         pageSize: 20,
-        totalSize: 0
       },
       imageUrl: "",
       dialogVisible: false,
@@ -29,6 +31,19 @@ export default {
         receptionistId: null
       },
 
+      dialogVisibleDuty: false,
+
+      allServiceList: [], // 从接口获取的客服列表
+      formData: {
+        nickname: '',
+        customerId: '',
+        dutyCustomerId: '',
+        dutyDateTimeList: [{
+          startTime: new Date().setHours(8, 30, 0),
+          endTime: new Date().setHours(18, 30, 0)
+        }]
+      },
+
       // 选项数据
       backendOptions: [],
       departmentTree: [],
@@ -41,6 +56,16 @@ export default {
       },
 
       // 验证规则
+      columns: [ //数据列
+        {prop: "avatarUrl", label: "客服头像", formatter: this.imgFormatter},
+        {prop: "nickname", label: "客服昵称"},
+        {prop: "username", label: "姓名"},
+        {prop: "userId", label: "工号"},
+        {prop: "receptionist", label: "企微用户"},
+        {prop: "dutyCustomer", label: "值班客服"},
+        // {prop: "dutyCustomer", label: "值班时间"},
+      ],
+
       rules: {
         nickname: [
           {required: true, message: '请输入客服昵称', trigger: 'blur'},
@@ -62,23 +87,32 @@ export default {
     queryPage() {
       this.$api.customerManage.pageQuery(this.queryCondition).then((res) => {
         if (res.code === 200) {
-          res.data.content.map((item) => {
-            item.avatarUrl = process.env.BASE_URL + item.avatarUrl;
-            this.queryCondition.pageNum = res.data.pageNum;
-            this.queryCondition.pageSize = res.data.pageNum;
-            this.queryCondition.totalSize = res.data.totalSize;
-          })
-          this.pageResult = res.data.content
+          this.pageResult = res.data
+          this.queryCondition.pageNum = res.data.pageNum
+          this.queryCondition.pageSize = res.data.pageSize
         }
       })
     },
+    findPage(data) {
+      if (data && data.pageRequest) {
+        this.queryCondition.pageNum = data.pageRequest.pageNum;
+        this.queryCondition.pageSize = data.pageRequest.pageSize;
+      }
+      this.$api.customerManage.pageQuery(this.queryCondition).then((res) => {
+        if (res.code === 200) {
+          this.pageResult = res.data;
+        } else {
+          this.$message.error(res.msg)
+        }
+      });
+    },
     // 编辑客服
     editCustomer(customerID) {
 
     },
     // 删除客服
-    deleteCustomer(customerID) {
-      this.$api.customerManage.deleteCustomer(customerID).then((res) => {
+    deleteCustomer({row}) {
+      this.$api.customerManage.deleteCustomer(row.id).then((res) => {
         if (res.code === 200) {
           this.$message("删除成功")
         }
@@ -103,17 +137,20 @@ export default {
       this.dialogVisible = true
       this.resetForm()
       this.loadDepartment();
+      this.pageResult()
     },
-
     // 打开弹窗（编辑）
-    handleEdit(row) {
+    handleEdit({row}) {
+      console.log(row)
       this.dialogType = 'edit'
       this.dialogVisible = true
       this.$nextTick(() => {
         this.loadEditData(row)
       })
     },
-
+    imgFormatter(row) {
+      return <img src={"" + process.env.BASE_URL + row.avatarUrl + ""} style="width: 74px; height: 74px"></img>;
+    },
     // 加载编辑数据
     loadEditData(data) {
       this.loadDepartment()
@@ -130,30 +167,26 @@ export default {
           receptionist: data.receptionist,
           receptionistId: data.receptionistId
         }
-        this.imageUrl = data.avatarUrl
+        this.imageUrl = process.env.BASE_URL + data.avatarUrl
       }
     },
-
     // 加载后线人员选项
     async loadBackendOptions() {
       if (this.backendOptions.length) return
       const {data} = await this.$api.user.findBackListByDeptId(99)
       this.backendOptions = data
     },
-
     // 部门加载
     loadDepartment() {
       this.$api.customerManage.getDeptTree().then((rep) => {
         this.departmentTree = rep.data
       })
     },
-
     // 部门点击事件
     async handleDeptClick(data) {
       this.form.departmentId = data.deptId
       await this.loadDepartmentUsers(data.deptId)
     },
-
     // 加载部门用户
     async loadDepartmentUsers(departmentId) {
       this.userLoading = true
@@ -164,7 +197,6 @@ export default {
         this.userLoading = false
       }
     },
-
     // 上传图片
     imageUpload(file) {
       this.$refs.upload1.clearFiles();
@@ -193,7 +225,6 @@ export default {
       });
       return true
     },
-
     // 表单提交
     async handleSubmit() {
       try {
@@ -205,6 +236,7 @@ export default {
         } else if (this.dialogType === 'edit') {
           await this.$api.customerManage.reviseCustomer(this.form.id, this.form)
         }
+        this.queryPage()
         this.$emit('success')
         this.dialogVisible = false
         this.$message.success('操作成功')
@@ -215,7 +247,6 @@ export default {
         this.imageUrl = ""
       }
     },
-
     // 重置表单
     resetForm() {
       this.form = {
@@ -230,68 +261,130 @@ export default {
       }
       this.imageUrl = ''
     },
-
+    // 重置值班规则表单
+    resetFormData() {
+      this.formData = {
+        nickname: '',
+        customerId: '',
+        dutyCustomerId: '',
+        dutyDateTimeList: [{
+          startTime: new Date().setHours(8, 30, 0),
+          endTime: new Date().setHours(18, 30, 0)
+        }]
+      }
+    },
     // 弹窗关闭处理
     handleClose() {
       this.resetForm()
       this.uploadProgress = 0
-    }
+    },
+    // 获取客服列表
+    getCustomerServiceList() {
+      this.$api.customerManage.getAll().then(res => {
+        this.allServiceList = res.data
+      })
+    },
+    // 获取详情数据
+    getDutyConfig(customerId) {
+      this.$api.customerManage.getDutyConfig(customerId).then(res => {
 
-  }
+        this.formData.dutyCustomerId = res.data.dutyCustomerId
+        if (res.data.dutyDateTimeList != null && res.data.dutyDateTimeList.length > 0) {
+          this.formData.dutyDateTimeList = res.data.dutyDateTimeList
+        }
+      })
+    },
+    openDialog({row}) {
+      this.getCustomerServiceList()
+      this.getDutyConfig(row.id)
+      this.formData.customerId = row.id
+      this.formData.nickname = row.nickname
+      this.dialogVisibleDuty = true;
+    },
+    addTime() {
+      this.formData.dutyTimes.push({
+        startTime: new Date().setHours(8, 30, 0),
+        endTime: new Date().setHours(18, 30, 0)
+      });
+    },
+    removeTime(index) {
+      if (this.formData.dutyTimes.length === 1) {
+        this.$message.warning('请至少保留一条数据');
+        return;
+      }
+      this.formData.dutyTimes.splice(index, 1);
+    },
+    handleCancel() {
+      this.resetFormData();
+      this.dialogVisibleDuty = false;
+      this.$message({type: 'info', message: '已取消操作'});
+    },
+
+    // 确认操作
+    handleConfirm() {
+      // 数据校验
+      if (!this.validateTime()) return;
+
+      // 提交逻辑（示例）
+      this.$api.customerManage.dutyConfig(this.formData)
+        .then((res) => {
+          if (res.code === 200) {
+            this.$message.success('保存成功');
+            this.dialogVisibleDuty = false;
+            this.queryPage()
+          } else {
+            this.$message.error(res.msg);
+          }
+        })
+        .catch(error => {
+          this.$message.error(`保存失败: ${error.message}`);
+        });
+    },
+
+    // 时间有效性校验
+    validateTime() {
+      for (const time of this.formData.dutyTimes) {
+        if (new Date(time.start) >= new Date(time.end)) {
+          this.$message.error('结束时间必须晚于开始时间');
+          return false;
+        }
+      }
+      return true;
+    }
+  },
+  computed: {
+    showAddButton() {
+      return this.formData.dutyTimes.length < 10;
+    }
+  },
 }
 </script>
 
 <template>
 
   <div>
-    <el-form :inline="true" :model="queryCondition" class="demo-form-inline" size="small" label-width="130px">
-      <el-row>
-        <el-form-item label="昵称">
-          <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" @click="handleAdd">添加客服</el-button>
-      </el-row>
-    </el-form>
-    <el-table :data="pageResult" style="width: 100%" height="580" border highlight-current-row stripe
-              :header-cell-style="{
-      background: '#F2F7FC',
-      fontWeight: '700',
-      color: '#606266',
-    }">
-      <el-table-column prop="id" label="序号" align="center"></el-table-column>
-      <el-table-column prop="avatarUrl" label="客服头像" align="center">
-        <template slot-scope="scope">
-          <img :src="scope.row.avatarUrl" style="width: 74px; height: 74px" alt=""/>
-        </template>
-      </el-table-column>
-      <el-table-column prop="nickname" label="客服昵称" align="center"></el-table-column>
-      <el-table-column prop="username" label="姓名" align="center"></el-table-column>
-      <el-table-column prop="userId" label="工号" align="center"></el-table-column>
-      <el-table-column prop="receptionist" label="企微用户"></el-table-column>
-      <el-table-column prop="dutyCustomer" label="值班客服"></el-table-column>
-      <el-table-column prop="dutyCustomer" label="值班时间"></el-table-column>
-      <el-table-column label="操作" align="center" width="200" fixed="right">
-        <template slot-scope="scope">
-          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
-          <el-button type="text" size="small" @click="">删除</el-button>
-          <el-button type="text" size="small" @click="">值班配置</el-button>
-          <el-button type="text" size="small" @click="">清除值班配置</el-button>
-        </template>
-      </el-table-column>
-      <el-pagination
-        background
-        @size-change="handleSizeChange"
-        layout="total, sizes, prev, pager, next, jumper"
-        @current-change="refreshPageRequest"
-        :current-page="queryCondition.pageNum"
-        :page-size="queryCondition.pageSize"
-        :page-sizes="[10, 20, 50, 100]"
-        :total="queryCondition.totalSize"
-        style="float: left; margin-left: 20px"
+    <div class="container">
+      <el-form size="small" label-width="130px">
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="昵称">
+              <el-input v-model="queryCondition.nickname" placeholder="请输入昵称" class="widths" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-button type="primary" size="small" @click="queryPage">查询</el-button>
+            <el-button type="primary" size="small" @click="handleAdd">添加客服</el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+      <kt-common-table :showBatchDelete="false" :data="pageResult" :columns="columns" @findPage="findPage"
+                       button2Name="编辑" @handleButton2="handleEdit"
+                       button3Name="删除" @handleButton3="deleteCustomer"
+                       button4Name="值班配置" @handleButton4="openDialog"
       >
+      </kt-common-table>
 
-    </el-table>
+    </div>
 
     <!-- 弹窗主体 -->
     <el-dialog
@@ -390,6 +483,65 @@ export default {
       </div>
     </el-dialog>
 
+    <!-- 值班客服配置 -->
+    <el-dialog :visible.sync="dialogVisibleDuty" title="值班配置">
+      <el-form :model="formData" label-width="100px" label-position="right">
+        <!-- 当前客服（只读） -->
+        <el-form-item label="当前客服">
+          <el-input v-model="currentService" clearable readonly></el-input>
+        </el-form-item>
+
+        <!-- 值班客服（可编辑） -->
+        <el-form-item label="值班客服">
+          <el-select v-model="formData.dutyCustomerId" placeholder="请选择">
+            <el-option
+              v-for="item in allServiceList"
+              :key="item.id"
+              :label="item.nickname"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!-- 值班时间列表 -->
+        <el-form-item label="值班时间" v-for="(time, index) in formData.dutyDateTimeList" :key="index">
+          <el-date-picker
+            v-model="time.startTime"
+            type="datetime"
+            format="yyyy-MM-dd HH:mm:ss"
+            placeholder="开始时间">
+          </el-date-picker>
+          <span>至</span>
+          <el-date-picker
+            v-model="time.endTime"
+            type="datetime"
+            format="yyyy-MM-dd HH:mm:ss"
+            placeholder="结束时间">
+          </el-date-picker>
+          <!-- 删除按钮（首行隐藏） -->
+          <el-button
+            v-if="index !== 0"
+            @click="removeTime(index)"
+            icon="el-icon-close"
+            circle>
+          </el-button>
+        </el-form-item>
+
+        <!-- 添加按钮（动态隐藏） -->
+        <el-button
+          v-if="showAddButton"
+          @click="addTime"
+          type="text"
+          icon="el-icon-plus">
+          添加值班时间
+        </el-button>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleCancel">取 消</el-button>
+        <el-button type="primary" @click="handleConfirm">确 认</el-button>
+      </div>
+    </el-dialog>
   </div>
 
 </template>