updata：客服添加多个客服人员

src/views/PeopleManage/Customer/CustomerServiceAccount.vue

@@ -39,13 +39,15 @@ export default {
       formData: {
         nickname: '',
         customerId: '',
-        dutyCustomerId: null,
-        dutyDateTimeList: [{
-          startTime: new Date().setHours(8, 30, 0),
-          endTime: new Date().setHours(18, 30, 0)
-        }]
+        dutyCustomerDTOS: [
+          {
+            dutyCustomerId: null,
+            dutyDateTimeList: [{
+              startTime: new Date().setHours(8, 30, 0),
+              endTime: new Date().setHours(18, 30, 0)
+            }]
+          }]
       },
-
       // 选项数据
       backendOptions: [],
       departmentTree: [],
@@ -64,8 +66,7 @@ export default {
         {prop: "username", label: "姓名"},
         {prop: "userId", label: "工号"},
         {prop: "receptionist", label: "企微用户"},
-        {prop: "dutyCustomer", label: "值班客服"},
-        {prop: "dutyDatetime", label: "值班时间", minWidth: 200, formatter: this.dutyDatetimeFormatter},
+        {prop: "dutyCustomerDTO", label: "值班客服/值班时间", minWidth: 200, formatter: this.dutyDatetimeFormatter},
       ],
 
       rules: {
@@ -192,9 +193,29 @@ export default {
       return <img src={"" + process.env.BASE_URL + row.avatarUrl + ""} style="width: 74px; height: 74px"></img>;
     },
     dutyDatetimeFormatter(row) {
-      if (row.dutyDatetime != null && row.dutyDatetime.length > 0) {
-        return row.dutyDatetime.map(x => {
-          return <el-tag>{x} </el-tag>
+      if (row.dutyCustomerDTO != null && row.dutyCustomerDTO.length > 0) {
+        return row.dutyCustomerDTO.map(item => {
+          const data = item.dutyDatetime.map(dateTime => {
+            return <el-tag size="small">{dateTime}</el-tag>
+          });
+          return (
+            <div style="padding: 10px;">
+              <el-row>
+                <el-col>
+                  <el-card class="duty-card">
+                    <div slot="header" class="clearfix">
+                      <span><strong>值班人员：</strong>{item.dutyCustomer}</span>
+                    </div>
+                    <div class="duty-content">
+                      <div class="duty-time">
+                        {data}
+                      </div>
+                    </div>
+                  </el-card>
+                </el-col>
+              </el-row>
+            </div>
+          )
         })
       }
     },
@@ -345,11 +366,14 @@ export default {
       this.formData = {
         nickname: '',
         customerId: '',
-        dutyCustomerId: null,
-        dutyDateTimeList: [{
-          startTime: new Date().setHours(8, 30, 0),
-          endTime: new Date().setHours(18, 30, 0)
-        }]
+        dutyCustomerDTOS: [
+          {
+            dutyCustomerId: null,
+            dutyDateTimeList: [{
+              startTime: new Date().setHours(8, 30, 0),
+              endTime: new Date().setHours(18, 30, 0)
+            }]
+          }]
       }
     },
     // 弹窗关闭处理
@@ -368,19 +392,18 @@ export default {
     getDutyConfig(customerId) {
       this.$api.customerManage.getDutyConfig(customerId).then(res => {
         if (res.code === 200) {
-          const isReceptionistId = this.allServiceList.some(service => service.id === Number(res.data.dutyCustomerId));
-          if (isReceptionistId) {
-            this.formData.dutyCustomerId = Number(res.data.dutyCustomerId)
-          }else {
-            this.formData.dutyCustomerId = null
-          }
-
-          res.data.dutyDateTimeList.map(item => {
-            this.startTime = dayjs(item.startTime).valueOf()
-            this.endTime = dayjs(item.endTime).valueOf()
+          res.data.dutyCustomerDTOS.forEach(item => {
+            const isReceptionistId = this.allServiceList.some(service => service.id === Number(item.dutyCustomerId));
+            if (isReceptionistId) {
+              item.dutyCustomerId = Number(item.dutyCustomerId)
+            } else {
+              item.dutyCustomerId = null
+            }
           })
+          this.formData.dutyCustomerDTOS = res.data.dutyCustomerDTOS
+        } else {
+          this.$message.error(res.msg);
         }
-        this.formData.dutyDateTimeList = res.data.dutyDateTimeList
       })
     },
     openDialog({row}) {
@@ -390,18 +413,41 @@ export default {
       this.formData.nickname = row.nickname
       this.dialogVisibleDuty = true;
     },
-    addTime() {
-      this.formData.dutyDateTimeList.push({
+    // 添加值班客服
+    addCustomer() {
+      this.formData.dutyCustomerDTOS.push({
+        customerId: null,
+        dutyDateTimeList: [{
+          startTime: new Date().setHours(8, 30, 0),
+          endTime: new Date().setHours(18, 30, 0)
+        }]
+      });
+    },
+    // 移除值班客服
+    removeCustomer(index) {
+      this.formData.dutyCustomerDTOS.splice(index, 1);
+    },
+    availableServices(currentIndex) {
+      return this.allServiceList.filter(service =>
+        !this.formData.dutyCustomerDTOS.some((cust, idx) =>
+          idx !== currentIndex && cust.dutyCustomerId === service.id
+        )
+      );
+    },
+    // 添加时间
+    addTime(cIndex) {
+      this.formData.dutyCustomerDTOS[cIndex].dutyDateTimeList.push({
         startTime: new Date().setHours(8, 30, 0),
         endTime: new Date().setHours(18, 30, 0)
       });
     },
-    removeTime(index) {
-      if (this.formData.dutyDateTimeList.length === 1) {
+    // 删除时间
+    removeTime(cIndex, tIndex) {
+      if (this.formData.dutyCustomerDTOS[cIndex].dutyDateTimeList.length === 1) {
         this.$message.warning('请至少保留一条数据');
         return;
       }
-      this.formData.dutyDateTimeList.splice(index, 1);
+      this.formData.dutyCustomerDTOS[cIndex].dutyDateTimeList.splice(tIndex, 1);
     },
     handleCancel() {
       this.resetFormData();
@@ -409,13 +455,15 @@ export default {
       this.$message({type: 'info', message: '已取消操作'});
     },
     dutyConfigData() {
+      this.formData.dutyCustomerDTOS.forEach(x => {
+        x.dutyDateTimeList = x.dutyDateTimeList.map(item => ({
+          startTime: dayjs(item.startTime).format('YYYY-MM-DD HH:mm:ss'),
+          endTime: dayjs(item.endTime).format('YYYY-MM-DD HH:mm:ss')
+        }))
+      })
       return {
         customerId: this.formData.customerId,
-        dutyCustomerId: this.formData.dutyCustomerId,
-        dutyDateTimeList: this.formData.dutyDateTimeList.map(t => ({
-          startTime: dayjs(t.startTime).format('YYYY-MM-DD HH:mm:ss'),
-          endTime: dayjs(t.endTime).format('YYYY-MM-DD HH:mm:ss')
-        }))
+        dutyCustomerDTOS: this.formData.dutyCustomerDTOS
       }
     },
     // 确认操作
@@ -440,20 +488,23 @@ export default {
 
     // 时间有效性校验
     validateTime() {
-      for (const time of this.formData.dutyDateTimeList) {
-        if(time.startTime === null){
-          this.$message.error('开始时间必填');
-          return false;
-        }
-        if(time.endTime === null){
-          this.$message.error('结束时间必填');
-          return false;
-        }
-        if (new Date(time.startTime) >= new Date(time.endTime)) {
-          this.$message.error('结束时间必须晚于开始时间');
-          return false;
-        }
-      }
+      this.formData.dutyCustomerDTOS.forEach(x => {
+        x.dutyDateTimeList.forEach(item => {
+          if (item.startTime === null) {
+            this.$message.error('开始时间必填');
+            return false;
+          }
+          if (item.endTime === null) {
+            this.$message.error('结束时间必填');
+            return false;
+          }
+          if (new Date(item.startTime) >= new Date(item.endTime)) {
+            this.$message.error('结束时间必须晚于开始时间');
+            return false;
+          }
+        })
+      })
+
       return true;
     }
   },
@@ -477,7 +528,7 @@ export default {
             </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" style="margin-left: 20px" @click="queryPage">查询</el-button>
             <el-button type="primary" size="small" @click="handleAdd">添加客服</el-button>
           </el-col>
         </el-row>
@@ -600,48 +651,78 @@ export default {
         </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>
+        <div v-for="(customer, cIndex) in formData.dutyCustomerDTOS" :key="cIndex" class="customer-block">
+          <!-- 值班客服选择 -->
+          <el-form-item :label="`值班客服 ${cIndex + 1}`">
+            <el-select
+              v-model="customer.dutyCustomerId"
+              placeholder="请选择值班客服"
+              filterable
+              style="width: 300px">
+              <el-option
+                v-for="item in availableServices(cIndex)"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id">
+              </el-option>
+            </el-select>
+            <el-button
+              v-if="cIndex !== 0"
+              @click="removeCustomer(cIndex)"
+              type="danger"
+              icon="el-icon-remove"
+              circle
+              style="margin-left: 10px">
+            </el-button>
+          </el-form-item>
+
+          <!-- 值班时间列表 -->
+          <div v-for="(time, tIndex) in customer.dutyDateTimeList" :key="tIndex" class="time-row">
+            <el-form-item label="值班时间">
+              <el-date-picker
+                v-model="time.startTime"
+                type="datetime"
+                format="yyyy-MM-dd HH:mm:ss"
+                placeholder="开始时间"
+              >
+              </el-date-picker>
+              <span style="margin: 0 10px">至</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="tIndex !== 0"
+                @click="removeTime(cIndex, tIndex)"
+                type="danger"
+                icon="el-icon-remove"
+                circle
+                style="margin-left: 10px">
+              </el-button>
+            </el-form-item>
+          </div>
 
-        <!-- 值班时间列表 -->
-        <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>
+            @click="addTime(cIndex)"
+            type="primary"
+            icon="el-icon-plus"
+            plain
+            style="margin-bottom: 20px">
+            添加时间段
           </el-button>
-        </el-form-item>
+        </div>
 
-        <!-- 添加按钮（动态隐藏） -->
+        <!-- 添加客服按钮 -->
         <el-button
-          v-if="showAddButton"
-          @click="addTime"
-          type="text"
-          icon="el-icon-plus">
-          添加值班时间
+          @click="addCustomer"
+          type="success"
+          icon="el-icon-plus"
+          plain>
+          添加值班客服
         </el-button>
       </el-form>
 
@@ -655,5 +736,33 @@ export default {
 </template>
 
 <style scoped>
+.customer-block {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 15px;
+  margin-bottom: 20px;
+  background: #fafafa;
+}
+
+.time-row {
+  margin-left: 30px;
+  border-left: 2px solid #409eff;
+  padding-left: 15px;
+}
+
+.duty-card {
+  margin-bottom: 20px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
 
+.duty-card .duty-content {
+  padding: 16px;
+}
+
+.duty-time p {
+  margin: 4px 0;
+  color: #909399;
+}
 </style>