客服管理 修改

src/views/PeopleManage/Customer/CustomerServiceAccount.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {getCustomer} from "../../../http/moudules/customer/customerManage";
+import {BASE_URL} from "../../../../config/prod.env";
 
 export default {
   data() {
@@ -9,6 +9,7 @@ export default {
         nickname: "",
         pageNum: 1,
         pageSize: 20,
+        totalSize: 0
       },
       imageUrl: "",
       dialogVisible: false,
@@ -61,6 +62,12 @@ 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
         }
       })
@@ -108,26 +115,22 @@ export default {
     },
 
     // 加载编辑数据
-    async loadEditData(data) {
+    loadEditData(data) {
       this.loadDepartment()
+      this.$refs.deptTree.setCurrentKey(data.departmentId)
+      this.loadDepartmentUsers(data.departmentId)
       // 加载部门路径
       if (data.id) {
-        // await this.$api.customerManage.getDeptUser(data.departmentId)
-        await this.$api.customerManage.getCustomer(data.id).then((res) => {
-          data = res.data
-          this.from = {
-            id: data.id,
-            nickname: data.nickname,
-            avatar: data.avatar,
-            userId: data.userId,
-            departmentId: data.departmentId,
-            receptionist: data.receptionist,
-            receptionistId: data.receptionistId
-          }
-          this.imageUrl = res.data.avatarUrl
-        })
-        this.$refs.deptTree.setCurrentKey(data.departmentId)
-        this.loadDepartmentUsers(data.departmentId)
+        this.form = {
+          id: data.id,
+          nickname: data.nickname,
+          avatar: data.avatar,
+          userId: data.userId,
+          departmentId: data.departmentId,
+          receptionist: data.receptionist,
+          receptionistId: data.receptionistId
+        }
+        this.imageUrl = data.avatarUrl
       }
     },
 
@@ -138,7 +141,7 @@ export default {
       this.backendOptions = data
     },
 
-    // 部门懒加载
+    // 部门加载
     loadDepartment() {
       this.$api.customerManage.getDeptTree().then((rep) => {
         this.departmentTree = rep.data
@@ -196,10 +199,10 @@ export default {
       try {
         await this.$refs.formRef.validate()
         this.submitting = true
-        this.form.receptionist = this.wecomUsers.filter((item) => item.userId==this.form.receptionistId)[0].name
-        if(this.dialogType === 'add'){
+        this.form.receptionist = this.wecomUsers.filter((item) => item.userId == this.form.receptionistId)[0].name
+        if (this.dialogType === 'add') {
           await this.$api.customerManage.addCustomer(this.form)
-        }else if(this.dialogType === 'edit'){
+        } else if (this.dialogType === 'edit') {
           await this.$api.customerManage.reviseCustomer(this.form.id, this.form)
         }
         this.$emit('success')
@@ -219,12 +222,13 @@ export default {
         id: null,
         nickname: '',
         avatar: '',
+        avatarUrl: '',
         userId: null,
         departmentId: null,
         receptionist: '',
         receptionistId: null
       }
-      this.wecomUsers = []
+      this.imageUrl = ''
     },
 
     // 弹窗关闭处理
@@ -256,7 +260,11 @@ export default {
       color: '#606266',
     }">
       <el-table-column prop="id" label="序号" align="center"></el-table-column>
-      <el-table-column prop="avatar" 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>
@@ -271,46 +279,57 @@ export default {
           <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"
+      >
 
     </el-table>
 
     <!-- 弹窗主体 -->
     <el-dialog
-        :title="dialogType === 'add' ? '新增客服' : '编辑客服'"
-        :visible.sync="dialogVisible"
-        width="700px"
-        @closed="handleClose">
+      :title="dialogType === 'add' ? '新增客服' : '编辑客服'"
+      :visible.sync="dialogVisible"
+      width="700px"
+      @closed="handleClose">
       <el-form
-          ref="formRef"
-          :model="form"
-          :rules="rules"
-          label-width="100px"
-          label-position="right">
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-width="100px"
+        label-position="right">
 
         <!-- 客服昵称 -->
         <el-form-item label="客服昵称" prop="nickname">
           <el-input
-              v-model="form.nickname"
-              placeholder="请输入2-20个字符"
-              clearable
-              maxlength="20"/>
+            v-model="form.nickname"
+            placeholder="请输入2-20个字符"
+            clearable
+            maxlength="20"/>
         </el-form-item>
 
         <!-- 客服头像 -->
         <el-form-item label="客服头像" prop="avatar">
           <el-upload
-              style="margin-bottom: 10px"
-              class="upload-demo"
-              action="#"
-              :limit="1"
-              accept=".png, .jpg, .jpeg"
-              :auto-upload="false"
-              :on-change="imageUpload"
-              :show-file-list="false"
-              list-type="picture-card"
-              ref="upload1"
+            style="margin-bottom: 10px"
+            class="upload-demo"
+            action="#"
+            :limit="1"
+            accept=".png, .jpg, .jpeg"
+            :auto-upload="false"
+            :on-change="imageUpload"
+            :show-file-list="false"
+            list-type="picture-card"
+            ref="upload1"
           >
-            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 100px; height: 100px" alt=""/>
+            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 148px; height: 148px" alt=""/>
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
           <span>支持png，jpg格式图片，大小不超过2MB</span>
@@ -319,43 +338,43 @@ export default {
         <!-- 后线人员 -->
         <el-form-item label="后线人员" prop="userId">
           <el-select
-              v-model="form.userId"
-              filterable
-              clearable
-              placeholder="请选择后线人员"
-              @focus="loadBackendOptions">
+            v-model="form.userId"
+            filterable
+            clearable
+            placeholder="请选择后线人员"
+            @focus="loadBackendOptions">
             <el-option
-                v-for="item in backendOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"/>
+              v-for="item in backendOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"/>
           </el-select>
         </el-form-item>
 
         <!-- 企微部门树 -->
         <el-form-item label="企微部门" prop="departmentId">
           <el-tree
-              ref="deptTree"
-              :data="departmentTree"
-              :props="treeProps"
-              node-key="deptId"
-              highlight-current
-              @node-click="handleDeptClick"/>
+            ref="deptTree"
+            :data="departmentTree"
+            :props="treeProps"
+            node-key="deptId"
+            highlight-current
+            @node-click="handleDeptClick"/>
         </el-form-item>
 
         <!-- 企微用户 -->
         <el-form-item label="企微用户" prop="receptionistId">
           <el-select
-              v-model="form.receptionistId"
-              :loading="userLoading"
-              filterable
-              clearable
-              placeholder="请先选择企微用户">
+            v-model="form.receptionistId"
+            :loading="userLoading"
+            filterable
+            clearable
+            placeholder="请先选择企微用户">
             <el-option
-                v-for="user in wecomUsers"
-                :key="user.userId"
-                :label="user.name"
-                :value="user.userId"/>
+              v-for="user in wecomUsers"
+              :key="user.userId"
+              :label="user.name"
+              :value="user.userId"/>
           </el-select>
         </el-form-item>
       </el-form>
@@ -363,9 +382,9 @@ export default {
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button
-            type="primary"
-            :loading="submitting"
-            @click="handleSubmit">
+          type="primary"
+          :loading="submitting"
+          @click="handleSubmit">
           确 定
         </el-button>
       </div>