From 338ef6126a528c625f580766d13569631453b379 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Wed, 7 Jan 2026 14:09:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=AE=A2=E6=9C=8D=E5=88=97=E8=A1=A8):=20?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E5=88=97=E8=A1=A8=E6=8E=A5=E5=8F=A3=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/sys/customer-service/index.vue | 381 +++++++++++++++--------
 1 file changed, 246 insertions(+), 135 deletions(-)

diff --git a/src/views/sys/customer-service/index.vue b/src/views/sys/customer-service/index.vue
index 4222e2a..5ba4fe1 100644
--- a/src/views/sys/customer-service/index.vue
+++ b/src/views/sys/customer-service/index.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="app-container">
+    <!-- 搜索栏 -->
     <div class="filter-container">
+      <!-- 系统选择框 -->
       <el-select
         v-model="listQuery.sysOrigin"
         placeholder="系统"
@@ -14,10 +16,14 @@
           :label="item.label"
           :value="item.value"
         >
-          <span style="float: left;"> <sys-origin-icon :icon="item.value" :desc="item.value" /></span>
+          <span style="float: left;">
+            <sys-origin-icon :icon="item.value" :desc="item.value"
+          /></span>
           <span style="float: left;margin-left:10px">{{ item.label }}</span>
         </el-option>
       </el-select>
+
+      <!-- 区域选择框 -->
       <el-select
         v-model="listQuery.region"
         v-loading="loading"
@@ -34,6 +40,8 @@
           :value="item.id"
         />
       </el-select>
+
+      <!-- 搜索按钮 -->
       <el-button
         class="filter-item"
         type="primary"
@@ -43,6 +51,8 @@
       >
         搜索
       </el-button>
+
+      <!-- 新增按钮 -->
       <el-button
         class="filter-item"
         type="primary"
@@ -52,11 +62,15 @@
         新增
       </el-button>
     </div>
+
+    <!-- 提示 -->
     <el-alert
       title="排班统一“上海时间”,不区分国家,时差等因素"
       type="success"
       :closable="false"
     />
+
+    <!-- 表单 -->
     <el-table
       v-loading="listLoading"
       :data="list"
@@ -66,33 +80,55 @@
     >
       <el-table-column prop="sysOrigin" label="来源系统" align="center">
         <template slot-scope="scope">
-          <sys-origin-icon :icon="scope.row.sysOrigin" :desc="scope.row.sysOrigin" />
+          <sys-origin-icon
+            :icon="scope.row.sysOrigin"
+            :desc="scope.row.sysOrigin"
+          />
         </template>
       </el-table-column>
       <el-table-column label="客服" align="center">
         <template slot-scope="scope">
-          <el-link v-if="scope.row.userProfile.id" @click="queryUserDetails(scope.row.userProfile.id)">
-            {{ scope.row.userProfile.userNickname }} / {{ scope.row.userProfile.account }}
+          <el-link
+            v-if="scope.row.userProfile.id"
+            @click="queryUserDetails(scope.row.userProfile.id)"
+          >
+            {{ scope.row.userProfile.userNickname }} /
+            {{ scope.row.userProfile.account }}
           </el-link>
         </template>
       </el-table-column>
       <el-table-column prop="regionNameStr" label="区域" align="center" />
       <el-table-column label="上班时间段" align="center">
         <template slot-scope="scope">
-          <span v-for="(item, index) in scope.row.timeSlots " :key="index">
+          <span v-for="(item, index) in scope.row.timeSlots" :key="index">
             <el-tag style="margin: 2px 2px;">{{ item }}:00</el-tag>
           </span>
         </template>
       </el-table-column>
-      <el-table-column prop="createTime" label="创建时间" width="100" align="center">
+      <el-table-column
+        prop="createTime"
+        label="创建时间"
+        width="100"
+        align="center"
+      >
         <template slot-scope="scope">
           {{ scope.row.createTime | dateFormat }}
         </template>
       </el-table-column>
       <el-table-column fixed="right" label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="primary" icon="el-icon-edit" circle @click.native="handleEdit(scope.row)" />
-          <el-button type="danger" icon="el-icon-delete" circle @click.native="del(scope.row)" />
+          <el-button
+            type="primary"
+            icon="el-icon-edit"
+            circle
+            @click.native="handleEdit(scope.row)"
+          />
+          <el-button
+            type="danger"
+            icon="el-icon-delete"
+            circle
+            @click.native="del(scope.row)"
+          />
         </template>
       </el-table-column>
     </el-table>
@@ -100,7 +136,7 @@
     <user-deatils-drawer
       v-if="userDeatilsDrawerVisible"
       :user-id="thatSelectedUserId"
-      @close="userDeatilsDrawerVisible=false"
+      @close="userDeatilsDrawerVisible = false"
     />
 
     <el-dialog
@@ -111,15 +147,37 @@
       width="80%"
     >
       <div v-loading="submitLoading">
-        <el-form ref="form" :model="form" :rules="rules" label-width="100px" style="margin-right: 50px;">
+        <el-form
+          ref="form"
+          :model="form"
+          :rules="rules"
+          label-width="100px"
+          style="margin-right: 50px;"
+        >
           <el-form-item label="平台">
-            <el-input v-model.trim="listQuery.sysOrigin" :disabled="true" type="text" />
+            <el-input
+              v-model.trim="listQuery.sysOrigin"
+              :disabled="true"
+              type="text"
+            />
           </el-form-item>
           <el-form-item v-if="form.id == ''" label="客服" prop="userId">
-            <account-input v-model="form.userId" :sys-origin="listQuery.sysOrigin" placeholder="用户ID" />
+            <account-input
+              v-model="form.userId"
+              :sys-origin="listQuery.sysOrigin"
+              placeholder="用户ID"
+            />
           </el-form-item>
           <el-form-item label="区域" prop="regionList">
-            <el-select v-model="form.regionList" v-loading="loading" multiple clearable placeholder="请选择" style="width:100%;" class="filter-item">
+            <el-select
+              v-model="form.regionList"
+              v-loading="loading"
+              multiple
+              clearable
+              placeholder="请选择"
+              style="width:100%;"
+              class="filter-item"
+            >
               <el-option
                 v-for="(item, index) in regions"
                 :key="index"
@@ -130,37 +188,50 @@
           </el-form-item>
           <el-form-item label="时间段" prop="timeSlots">
             <el-checkbox-group v-model="form.timeSlots">
-              <el-checkbox-button v-for="slot in timeSlotList" :key="slot" :label="slot">{{ slot }}:00</el-checkbox-button>
+              <el-checkbox-button
+                v-for="slot in timeSlotList"
+                :key="slot"
+                :label="slot"
+                >{{ slot }}:00</el-checkbox-button
+              >
             </el-checkbox-group>
           </el-form-item>
           <el-form-item>
-            <el-button v-if="form.id == ''" type="primary" @click="add()">添加</el-button>
-            <el-button v-if="form.id != ''" type="primary" @click="update()">修改</el-button>
+            <el-button v-if="form.id == ''" type="primary" @click="add()"
+              >添加</el-button
+            >
+            <el-button v-if="form.id != ''" type="primary" @click="update()"
+              >修改</el-button
+            >
             <el-button @click="handleClose()">取消</el-button>
           </el-form-item>
         </el-form>
       </div>
     </el-dialog>
-
   </div>
 </template>
 
 <script>
-
-import { listCustomerService, addCustomerService, updateCustomerService, deleteCustomerService, regionConfigTable } from '@/api/sys'
-import { mapGetters } from 'vuex'
+import {
+  listCustomerService,
+  addCustomerService,
+  updateCustomerService,
+  deleteCustomerService,
+  regionConfigTable
+} from "@/api/sys";
+import { mapGetters } from "vuex";
 
 function getFormData() {
   return {
     regionList: [],
-    userId: '',
-    sysOrigin: '',
-    id: '',
+    userId: "",
+    sysOrigin: "",
+    id: "",
     timeSlots: []
-  }
+  };
 }
 export default {
-  name: 'CustomerService',
+  name: "CustomerService",
   props: {
     row: {
       type: Object,
@@ -169,26 +240,53 @@ export default {
     sysOrigin: {
       type: String,
       require: false,
-      default: ''
+      default: ""
     }
   },
   data() {
-    const commonRules = [{ required: true, message: '必填字段', trigger: 'blur' }]
+    const commonRules = [
+      { required: true, message: "必填字段", trigger: "blur" }
+    ];
     return {
       searchDisabled: false,
       userDeatilsDrawerVisible: false,
-      thatSelectedUserId: '',
+      thatSelectedUserId: "",
       formVisible: false,
       submitLoading: false,
       form: getFormData(),
-      textOptTitle: '',
+      textOptTitle: "",
       list: [],
-      timeSlotList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
+      timeSlotList: [
+        0,
+        1,
+        2,
+        3,
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        10,
+        11,
+        12,
+        13,
+        14,
+        15,
+        16,
+        17,
+        18,
+        19,
+        20,
+        21,
+        22,
+        23
+      ],
       rangeDate: [],
       regions: [],
       listQuery: {
-        region: '',
-        sysOrigin: 'YOLO'
+        region: "",
+        sysOrigin: "LIKEI"
       },
       rules: {
         regionList: commonRules,
@@ -197,164 +295,177 @@ export default {
         timeSlots: commonRules
       },
       listLoading: true
-    }
+    };
   },
   computed: {
-    ...mapGetters(['permissionsSysOriginPlatforms'])
+    ...mapGetters(["permissionsSysOriginPlatforms"])
   },
   watch: {
     row: {
       handler(val) {
         if (!val) {
-          this.listRegion()
-          return
+          this.listRegion();
+          return;
         }
-        const form = Object.assign({}, val)
+        const form = Object.assign({}, val);
         if (form.regions) {
-          form.regionList = form.regions.split(',')
+          form.regionList = form.regions.split(",");
         }
-        this.form = Object.assign(this.form, form)
-        this.listRegion()
+        this.form = Object.assign(this.form, form);
+        this.listRegion();
       },
       immediate: true
     }
   },
   created() {
-    const that = this
-    const querySystem = this.permissionsSysOriginPlatforms[0]
+    const that = this;
+    const querySystem = this.permissionsSysOriginPlatforms[0];
     if (!querySystem) {
-      return
+      return;
     }
-    this.listRegion()
-    that.listQuery.sysOrigin = querySystem.value
-    that.renderData()
+    this.listRegion();
+    that.listQuery.sysOrigin = querySystem.value;
+    that.renderData();
   },
   methods: {
     renderData(isClean) {
-      const that = this
+      const that = this;
       if (isClean === true) {
-        that.list = []
+        that.list = [];
       }
-      that.listLoading = true
-      listCustomerService(that.listQuery.sysOrigin, that.listQuery.region).then(res => {
-        const { body } = res
-        that.list = body
-        that.listLoading = false
-      })
+      that.listLoading = true;
+      listCustomerService(that.listQuery.sysOrigin, that.listQuery.region).then(
+        res => {
+          const { body } = res;
+          that.list = body;
+          that.listLoading = false;
+        }
+      );
     },
     handleSearch() {
-      this.renderData(true)
+      this.renderData(true);
     },
     listRegion() {
-      const that = this
-      that.loading = true
-      regionConfigTable({ 'sysOrigin': that.listQuery.sysOrigin }).then(res => {
-        that.regions = res.body || []
-        that.loading = false
-      }).catch(er => {
-        that.loading = false
-      })
+      const that = this;
+      that.loading = true;
+      regionConfigTable({ sysOrigin: that.listQuery.sysOrigin })
+        .then(res => {
+          that.regions = res.body || [];
+          that.loading = false;
+        })
+        .catch(er => {
+          that.loading = false;
+        });
     },
     handleCreate() {
-      console.log(1111, this.form.userId)
-      this.formVisible = true
-      this.form.userId = ''
+      console.log(1111, this.form.userId);
+      this.formVisible = true;
+      this.form.userId = "";
     },
     handleEdit(row) {
-      this.formVisible = true
-      this.form = row
-      this.form.userId = row.userProfile.account
+      this.formVisible = true;
+      this.form = row;
+      this.form.userId = row.userProfile.account;
     },
     changeSysOrigin() {
-      this.listRegion()
-      this.handleSearch()
+      this.listRegion();
+      this.handleSearch();
     },
     queryUserDetails(id) {
-      this.userDeatilsDrawerVisible = true
-      this.thatSelectedUserId = id
+      this.userDeatilsDrawerVisible = true;
+      this.thatSelectedUserId = id;
     },
     del(item) {
-      const that = this
-      that.$confirm('确定删除客服人员吗', '提示', {
-        type: 'warning'
-      }).then(() => {
-        that.$message({
-          message: '删除中，请等待结果',
-          type: 'warning'
+      const that = this;
+      that
+        .$confirm("确定删除客服人员吗", "提示", {
+          type: "warning"
         })
-        that.listLoading = true
-        deleteCustomerService(item.id).then((res) => {
-          that.listLoading = false
+        .then(() => {
           that.$message({
-            message: '成功删除',
-            type: 'success'
-          })
-          that.renderData()
-        }).catch(er => {
-          console.error(er)
-          that.listLoading = false
+            message: "删除中，请等待结果",
+            type: "warning"
+          });
+          that.listLoading = true;
+          deleteCustomerService(item.id)
+            .then(res => {
+              that.listLoading = false;
+              that.$message({
+                message: "成功删除",
+                type: "success"
+              });
+              that.renderData();
+            })
+            .catch(er => {
+              console.error(er);
+              that.listLoading = false;
+            });
         })
-      }).catch(er => {
-        console.error(er)
-        that.listLoading = false
-      })
+        .catch(er => {
+          console.error(er);
+          that.listLoading = false;
+        });
     },
     add() {
-      const that = this
+      const that = this;
       that.$refs.form.validate(valid => {
         if (!valid) {
-          console.error('error submit!!')
-          return false
+          console.error("error submit!!");
+          return false;
         }
-        that.submitLoading = true
-        that.form.sysOrigin = that.listQuery.sysOrigin
-        addCustomerService(that.form).then(res => {
-          that.submitLoading = false
-          that.$emit('success', res)
-          that.handleClose()
-          that.renderData(true)
-        }).catch(er => {
-          that.submitLoading = false
-          that.$emit('fail')
-          console.error(er)
-        })
-      })
+        that.submitLoading = true;
+        that.form.sysOrigin = that.listQuery.sysOrigin;
+        addCustomerService(that.form)
+          .then(res => {
+            that.submitLoading = false;
+            that.$emit("success", res);
+            that.handleClose();
+            that.renderData(true);
+          })
+          .catch(er => {
+            that.submitLoading = false;
+            that.$emit("fail");
+            console.error(er);
+          });
+      });
     },
     update() {
-      const that = this
-      that.Addormodify = false
+      const that = this;
+      that.Addormodify = false;
       that.$refs.form.validate(valid => {
         if (!valid) {
-          console.error('error submit!!')
-          return false
+          console.error("error submit!!");
+          return false;
         }
-        that.submitLoading = true
-        updateCustomerService(that.form).then(res => {
-          that.submitLoading = false
-          that.$emit('success', res)
-          that.handleClose()
-          that.renderData(true)
-        }).catch(er => {
-          that.submitLoading = false
-          that.$emit('fail')
-          console.error(er)
-        })
-      })
+        that.submitLoading = true;
+        updateCustomerService(that.form)
+          .then(res => {
+            that.submitLoading = false;
+            that.$emit("success", res);
+            that.handleClose();
+            that.renderData(true);
+          })
+          .catch(er => {
+            that.submitLoading = false;
+            that.$emit("fail");
+            console.error(er);
+          });
+      });
     },
     handleClose() {
-      this.formVisible = false
-      this.resetForm()
+      this.formVisible = false;
+      this.resetForm();
     },
     resetForm() {
-      this.form = getFormData()
+      this.form = getFormData();
     }
   }
-}
+};
 </script>
 <style scoped lang="scss">
- .store-table-expand {
-    font-size: 0;
-    label {
+.store-table-expand {
+  font-size: 0;
+  label {
     width: 90px;
     color: #99a9bf;
     .el-form-item {
@@ -362,6 +473,6 @@ export default {
       margin-bottom: 0;
       width: 50%;
     }
-   }
- }
+  }
+}
 </style>