处理图片链接

2021-08-17 10:04:11 +08:00
parent c4727d712f
commit e6ed881b22
4 changed files with 142 additions and 78 deletions
--- 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
+  });
+}
--- 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://');
--- 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,8 +101,9 @@
        <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"> -->
@ -111,16 +113,32 @@
        <!-- <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;
@ -248,11 +266,13 @@ export default {
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
-      this.ruleForm.text+=`<div>附件<a href="${response.data.url}">${response.data.name}</a></div>`
+      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() {
--- 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="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,10 +98,11 @@
 </template>

 <script>
-import {getUsers} from '@/api/service'
+import { getUsers } from '@/api/service';
 export default {
  data() {
    return {
+      num: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
@ -100,7 +110,7 @@ export default {
      a: {},
      total: 0,
      userList: [],
-      activeId: null,
+      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: {
+    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
-      })
+        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);
@ -274,7 +288,7 @@ export default {
    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) {
@ -282,12 +296,13 @@ export default {
    },
    close: function () {
      console.log('socket已经关闭');
-    }
+    },
  },
  destroyed() {
+    console.log('out');
    // 销毁监听
    this.socket.onclose = this.close;
-  }
+  },
 };
 </script>