From e6ed881b22de58fcac68828d007800ceb5bc07cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com>
Date: Tue, 17 Aug 2021 10:04:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86=E5=9B=BE=E7=89=87=E9=93=BE?=
 =?UTF-8?q?=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/policy/library.js        |   8 +++
 src/utils/editor.js              |  33 +++++++--
 src/views/policy/library/add.vue |  62 ++++++++++------
 src/views/service/index.vue      | 117 +++++++++++++++++--------------
 4 files changed, 142 insertions(+), 78 deletions(-)

diff --git a/src/api/policy/library.js b/src/api/policy/library.js
index 5eca25c..999c97c 100644
--- a/src/api/policy/library.js
+++ b/src/api/policy/library.js
@@ -83,3 +83,11 @@ export function getCityByLevel(params) {
     params
   });
 }
+// 中转图片
+export function handlePic(data) {
+  return request({
+    url: '/mobile/handlePic',
+    method: 'post',
+    data
+  });
+}
diff --git a/src/utils/editor.js b/src/utils/editor.js
index 225c957..387fc23 100644
--- a/src/utils/editor.js
+++ b/src/utils/editor.js
@@ -1,12 +1,33 @@
-export function formatRichText(url) {
-  let src = document.querySelectorAll('#text .ql-editor img');
-  console.log(src);
+import { handlePic } from '@/api/policy/library';
+export function formatRichText(url, id) {
+  // let src = document.querySelectorAll('#text .ql-editor img');
+
+  /**
+   * 不需要判断域名存不存在
+   */
+
+  let status = true;
+  let src = document.querySelectorAll('#text img');
+  let endUrl = [];
   for (let i = 0; i < src.length; i++) {
     const string = src[i].getAttribute('src');
-    const flag = string.includes('http://');
-    if (!flag) src[i].setAttribute('src', url + string);
+    endUrl.push(string);
   }
-  let src2 = document.querySelectorAll('#text .ql-editor a');
+  if (endUrl.length) {
+    const data = {
+      startUrl: url,
+      policyId: id,
+      endUrl
+    };
+    handlePic(data).then(({ data: res }) => {
+      console.log(res);
+      for (let i = 0; i < src.length; i++) {
+        src[i].setAttribute('src', res[i].name);
+      }
+    });
+  }
+  // let src2 = document.querySelectorAll('#text .ql-editor a');
+  let src2 = document.querySelectorAll('#text a');
   for (let i = 0; i < src2.length; i++) {
     const string = src2[i].getAttribute('href');
     const flag = string.includes('http://');
diff --git a/src/views/policy/library/add.vue b/src/views/policy/library/add.vue
index fd13ee7..340e724 100644
--- a/src/views/policy/library/add.vue
+++ b/src/views/policy/library/add.vue
@@ -73,10 +73,11 @@
       </el-form-item>
       <el-form-item label="正文" prop="text">
         <div id="text">
-          <editor v-model="ruleForm.text" :min-height="192" />
+          <editor v-model="ruleForm.text" :min-height="192" v-if="!editPage" />
+          <el-input v-html="ruleForm.text" v-else></el-input>
         </div>
       </el-form-item>
-      <el-form-item label="附件">
+      <el-form-item label="附件" v-if="ruleForm.method !== 1">
         <!-- <el-upload
           action="https://jsonplaceholder.typicode.com/posts/"
           :on-preview="handlePreview"
@@ -100,27 +101,44 @@
         <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
       </el-upload> -->
 
-      <el-button type="info" size="small" @click="upload.open = true">添加附件</el-button>
-      
+        <el-button type="info" size="small" @click="upload.open = true"
+          >添加附件</el-button
+        >
       </el-form-item>
-      <el-form-item v-if="ruleForm.method!==1">
-      <!-- <el-form-item v-if="!editPage"> -->
+      <el-form-item v-if="ruleForm.method !== 1">
+        <!-- <el-form-item v-if="!editPage"> -->
         <el-button type="primary" @click="submitForm('ruleForm')"
           >确定</el-button
         >
         <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
       </el-form-item>
     </el-form>
-    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls, .docx" :headers="upload.headers"
-        :action="upload.url" :disabled="upload.isUploading"
-        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+    <el-dialog
+      :title="upload.title"
+      :visible.sync="upload.open"
+      width="400px"
+      append-to-body
+    >
+      <el-upload
+        ref="upload"
+        :limit="1"
+        accept=".xlsx, .xls, .docx"
+        :headers="upload.headers"
+        :action="upload.url"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        drag
+      >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">
           将文件拖到此处，或
           <em>点击上传</em>
         </div>
-        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
+        <div class="el-upload__tip" style="color: red" slot="tip">
+          提示：仅允许导入“xls”或“xlsx”格式文件！
+        </div>
       </el-upload>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitFileForm">确 定</el-button>
@@ -131,7 +149,7 @@
 </template>
 <script>
 import Editor from '@/components/Editor';
-import { getToken } from "@/utils/auth";
+import { getToken } from '@/utils/auth';
 import { addPolicy, updatePolicy, getPolicyInfo } from '@/api/policy/library';
 import { getCityByLevel } from '@/api/policy/library';
 export default {
@@ -144,13 +162,13 @@ export default {
         // 是否显示弹出层（用户导入）
         open: false,
         // 弹出层标题（用户导入）
-        title: "添加附件",
+        title: '添加附件',
         // 是否禁用上传
         isUploading: false,
         // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
+        headers: { Authorization: 'Bearer ' + getToken() },
         // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/minio/upload"
+        url: process.env.VUE_APP_BASE_API + '/minio/upload',
       },
       editPage: false,
       ruleForm: {
@@ -232,7 +250,7 @@ export default {
               this.msgSuccess(message);
             });
           }
-          // this.$router.go(-1);
+          this.$router.go(-1);
         } else {
           console.log('error submit!!');
           return false;
@@ -243,19 +261,21 @@ export default {
     //   this.$refs[formName].resetFields();
     // }
     // 文件上传中处理
-    handleFileUploadProgress (event, file, fileList) {
+    handleFileUploadProgress(event, file, fileList) {
       this.upload.isUploading = true;
     },
     // 文件上传成功处理
-    handleFileSuccess (response, file, fileList) {
-      this.ruleForm.text+=`<div>附件<a href="${response.data.url}">${response.data.name}</a></div>`
+    handleFileSuccess(response, file, fileList) {
+      this.ruleForm.text += `<div>附件<a href="${response.data.url}">${response.data.name}</a></div>`;
       this.upload.open = false;
       this.upload.isUploading = false;
       this.$refs.upload.clearFiles();
-      this.$alert(response.message, "导入结果", { dangerouslyUseHTMLString: true });
+      this.$alert(response.message, '导入结果', {
+        dangerouslyUseHTMLString: true,
+      });
     },
     // 提交上传文件
-    submitFileForm () {
+    submitFileForm() {
       this.$refs.upload.submit();
     },
   },
diff --git a/src/views/service/index.vue b/src/views/service/index.vue
index ed00463..75abf59 100644
--- a/src/views/service/index.vue
+++ b/src/views/service/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container" style="background-color:#e6e6e6;">
+  <div class="app-container" style="background-color: #e6e6e6">
     <el-row :gutter="20">
       <el-col :span="6">
         <div class="box_l">
@@ -12,23 +12,24 @@
           >
             <div class="user_item_l">
               <div class="el-avatar">
-                <span :class="item.status?'el-avatar2':''"></span>
-                <img :src="item.icon" alt="">
+                <span
+                  :class="item.status ? 'el-avatar2' : ''"
+                  v-if="item.msgNoReadCount != 0"
+                ></span>
+                <img :src="item.icon" alt="" />
               </div>
               <div class="info">
-                <div class="phone">{{item.username}}</div>
-                <div class="company">科大讯飞股份有限公司</div>
+                <div class="phone">{{ item.username }}</div>
+                <div class="company">{{ num }}--msgNoReadCount:{{item.msgNoReadCount}}</div>
               </div>
             </div>
-            <div class="user_item_r">
-              14:19
-            </div>
+            <div class="user_item_r">14:19</div>
           </div>
         </div>
       </el-col>
       <el-col :span="18">
         <div class="box_r">
-          <div class="box" v-if="!activeId">
+          <!-- <div class="box" v-if="!activeId">
             <div class="famous-box">
               <img src="~@/assets/image/chat.png" width="300" />
               <p>
@@ -37,9 +38,9 @@
                 加油吧！ ......
               </p>
             </div>
-          </div>
-          <div class="box" v-else>
-            <div id="content" class="content">
+          </div> -->
+          <div class="box">
+            <div id="content" class="content" @scroll="scroll">
               <div v-for="(item, index) in info" :key="index">
                 <div class="info_r info_default" v-if="item.type == 'leftinfo'">
                   <span class="circle circle_r"></span>
@@ -72,13 +73,21 @@
             <div class="setproblem">
               <textarea
                 placeholder="请输入"
-                style="height: 100%;width: 100%;resize:none;padding-right:125px;outline: none;border-color:#ccc;border-radius:5px;"
+                style="
+                  height: 100%;
+                  width: 100%;
+                  resize: none;
+                  padding-right: 125px;
+                  outline: none;
+                  border-color: #ccc;
+                  border-radius: 5px;
+                "
                 id="text"
                 v-model="customerText"
                 @keyup.enter="sentMsg()"
               ></textarea>
               <button @click="sentMsg()" class="setproblems">
-                <span style="vertical-align: 4px;">发 送</span>
+                <span style="vertical-align: 4px">发 送</span>
               </button>
             </div>
           </div>
@@ -89,18 +98,19 @@
 </template>
 
 <script>
-import {getUsers} from '@/api/service'
+import { getUsers } from '@/api/service';
 export default {
   data() {
     return {
+      num: 0,
       queryParams: {
         pageNum: 1,
         pageSize: 10,
       },
-      a:{},
-      total:0,
-      userList:[],
-      activeId: null,
+      a: {},
+      total: 0,
+      userList: [],
+      activeId: '1424606573631770624',
       customerText: '',
       info: [
         // {
@@ -119,29 +129,29 @@ export default {
         {
           id: 4,
           content: '注册网站时需要一次填写完所有的客户资料吗',
-          index: 4
+          index: 4,
         },
-        { id: 5, content: '注册时使用的手机号变更怎么办', index: 5 }
+        { id: 5, content: '注册时使用的手机号变更怎么办', index: 5 },
       ],
       robotAnswer: [
         {
           id: 1,
           content:
             '答案客户资料完善后是由谁来审批,答案客户资料完善后是由谁来审批,答案客户资料完善后是由谁来审批',
-          index: 1
+          index: 1,
         },
         { id: 2, content: '测试', index: 2 },
         { id: 3, content: '测试', index: 3 },
         {
           id: 4,
           content: '3333333',
-          index: 4
+          index: 4,
         },
-        { id: 5, content: '44444444', index: 5 }
+        { id: 5, content: '44444444', index: 5 },
       ],
       textarea: '',
       path: 'ws://192.168.0.125:1919/webStock/' + this.$store.state.user.userId,
-      socket: ''
+      socket: '',
     };
   },
   mounted() {
@@ -151,15 +161,19 @@ export default {
     //   this.userList = data.list
     //   this.total = data.total
     // })
-    this.getUserList()
+    this.getUserList();
   },
   created() {},
   methods: {
-    getUserList(){
-      getUsers(this.queryParams).then(({data})=>{
-        this.userList = data.list
-        this.total = data.total
-      })
+    scroll(e) {
+      // console.log(e.srcElement.scrollTop);
+      this.num = e.srcElement.scrollTop;
+    },
+    getUserList() {
+      getUsers(this.queryParams).then(({ data }) => {
+        this.userList = data.list;
+        this.total = data.total;
+      });
     },
     // 用户发送消息
     sentMsg() {
@@ -169,7 +183,7 @@ export default {
         var obj = {
           type: 'rightinfo',
           time: this.getTodayTime(),
-          content: text
+          content: text,
         };
         this.info.push(obj);
         this.appendRobotMsg(this.customerText);
@@ -250,7 +264,7 @@ export default {
     active(id) {
       this.activeId = id;
     },
-    init: function() {
+    init: function () {
       if (typeof WebSocket === 'undefined') {
         alert('您的浏览器不支持socket');
       } else {
@@ -265,29 +279,30 @@ export default {
         this.socket.onmessage = this.getMessage;
       }
     },
-    open: function() {
+    open: function () {
       console.log('socket连接成功');
     },
-    error: function() {
+    error: function () {
       console.log('连接错误');
     },
     getMessage(msg) {
       console.log(msg.data);
       console.log(JSON.parse(msg.data));
-      this.a = JSON.parse(msg.data)
+      this.a = JSON.parse(msg.data);
       // sendUserId
     },
-    send: function(params) {
+    send: function (params) {
       this.socket.send(params);
     },
-    close: function() {
+    close: function () {
       console.log('socket已经关闭');
-    }
+    },
   },
   destroyed() {
+    console.log('out');
     // 销毁监听
     this.socket.onclose = this.close;
-  }
+  },
 };
 </script>
 
@@ -313,18 +328,18 @@ export default {
           .user_item_l {
             display: flex;
             align-items: center;
-            .el-avatar{
+            .el-avatar {
               position: relative;
-              span{
-              width: 7px;
-              height: 7px;
-              border-radius: 50%;
-              background-color: red;
-              position: absolute;
-              top: 0;
-              right: 0;
-            }
-              img{
+              span {
+                width: 7px;
+                height: 7px;
+                border-radius: 50%;
+                background-color: red;
+                position: absolute;
+                top: 0;
+                right: 0;
+              }
+              img {
                 width: 40px;
                 height: 40px;
                 border-radius: 50%;