cloud-web-corejs 1.0.54-dev.25 → 1.0.54-dev.27

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.25",
+  "version": "1.0.54-dev.27",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

package/src/components/onlineTalk/index.vue

@@ -42,10 +42,18 @@
                     <template v-if="item.contentType == 0">
                       {{ item.content }}
                     </template>
-                    <template v-else>
+                    <template v-else-if="item.contentType == 1">
                       <baseUpload accept="file" multi="false" :file.sync="item.file" :edit="false"
                                   :showProperties="false" :showSize="true" :createBy="false"></baseUpload>
                     </template>
+                    <template v-else-if="item.contentType == 2">
+                      <ul class="onlieTalk-search-list">
+                        <li v-for="(answer,index) in item.answers" :key="index">
+                          <a href="javascript:void(0);" class="a-link"
+                             @click="answerCheckHandle(answer)">{{ answer.question }}</a>
+                        </li>
+                      </ul>
+                    </template>
                   </div>
                 </div>
               </template>
@@ -60,16 +68,16 @@
                 <i class="el-icon-folder-opened btn" @click="addFile" :disabled="!talkUserId"></i>
               </el-tooltip>
             </div> -->
-            <div class="pop-inputTips" v-show="false">
-              <p>该商品的<span>有效</span>日期?</p>
-              <p><span>有效</span>使用时间是什么时候？</p>
-              <p>该商品的<span>有效</span>日期?</p>
-              <p><span>有效</span>使用时间是什么时候？</p>
-              <p>该商品的<span>有效</span>日期?</p>
-              <p><span>有效</span>使用时间是什么时候？</p>
-              <p>该商品的<span>有效</span>日期?</p>
-              <p><span>有效</span>使用时间是什么时候？</p>
-            </div>
+            <!--            <div class="pop-inputTips" v-show="false">
+                          <p>该商品的<span>有效</span>日期?</p>
+                          <p><span>有效</span>使用时间是什么时候？</p>
+                          <p>该商品的<span>有效</span>日期?</p>
+                          <p><span>有效</span>使用时间是什么时候？</p>
+                          <p>该商品的<span>有效</span>日期?</p>
+                          <p><span>有效</span>使用时间是什么时候？</p>
+                          <p>该商品的<span>有效</span>日期?</p>
+                          <p><span>有效</span>使用时间是什么时候？</p>
+                        </div>-->
             <el-input type="textarea" :rows="6" class="txt-textarea" v-model="talkUser.content" placeholder="请输入
 选择此处，可粘贴文件（Ctrl+V）"
                       :disabled="!talkUserId" ref="contentRef" @paste.native="pasteMessage"
@@ -127,7 +135,9 @@
                   <i class="iconfont icon-wendangshangchuan"></i>
                   从个人文档工作区选择
                 </el-button>
-                <el-button type="info" plain class="button-sty" @click="showHistoryDialog=true"><i class="el-icon-time"></i>历史记录</el-button>
+                <el-button type="info" plain class="button-sty" @click="openHistoryDialog"><i
+                  class="el-icon-time"></i>历史记录
+                </el-button>
               </div>
               <div class="fr">
                 <span class="t">Ctrl + Enter </span>
@@ -219,66 +229,41 @@
       <div class="history-box">
         <div class="h-form">
           <div class="search-box">
-            <div class="search-classify" v-if="fileTab == 'file'"><i class="el-icon-files"></i><span>文件</span><i class='el-icon-close' @click="fileTab = 'list'"></i></div>
-            <div class="search-classify" v-if="fileTab == 'pic'"><i class="el-icon-files"></i><span>图片</span><i class='el-icon-close' @click="fileTab = 'list'"></i></div>
-            <el-input class="search-input"></el-input>
+            <div class="search-classify" v-if="historyType == 2" @click="checkHistoryType(null)"><i
+              class="el-icon-files"></i><span>文件</span><i
+              class='el-icon-close'></i></div>
+            <div class="search-classify" v-if="historyType == 1" @click="checkHistoryType(null)"><i
+              class="el-icon-files"></i><span>图片</span><i
+              class='el-icon-close'></i></div>
+            <el-input class="search-input" v-model="historyKeyword" clearable @input="changeHistoryKeyword"></el-input>
           </div>
           <div class="keys-box">
-            <span @click="fileTab = 'file'">文件</span><span @click="fileTab = 'pic'">图片</span>
+            <span @click="checkHistoryType(2)">文件</span>
+            <span @click="checkHistoryType(1)">图片</span>
           </div>
         </div>
-        <div class="h-list" v-if="fileTab == 'list'">
-          <div class="item">
-            <div class="name">营销管理11</div>
-            <div class="time">2024-01-06 16:06</div>
-            <div>你好~</div>
-          </div>
-          <div class="item">
-            <div class="name">营销管理11</div>
-            <div class="time">2024-01-06 16:06</div>
-            <div>你好~</div>
-          </div>
-          <div class="item">
-            <div class="name">营销管理11</div>
-            <div class="time">2024-01-06 16:06</div>
-            <div>你好~</div>
-          </div>
-        </div>
-        <div class="h-file" v-if="fileTab == 'file'">
-          <div class="item">
-            <div class="img"><el-image :src="src"></el-image></div>
-            <div class="txt">
-              <div class="t-l">
-                <p class="name">放大.pdf</p>
-                <p>admin</p>
-              </div>
-              <div class="t-r">
-                <p>2021-12-10</p>
-                <p>
-                  <span>2.3M</span>
-                  <el-tooltip class="ico" effect="dark" content="下载" placement="top"><i class="el-icon-download"></i></el-tooltip>
-                </p>
-              </div>
+        <div class="h-list" @scroll="handleScrollH" >
+          <div class="item" v-for="(item,index) in talkHRecords" :key="index" :class="'talk_h'+item.id">
+            <div class="name">{{ item.sendUserName }}</div>
+            <div class="time">{{ item.createDate }}</div>
+            <div>
+              <template v-if="item.contentType == 0">
+                {{ item.content }}
+              </template>
+              <template v-else-if="item.contentType == 1">
+                <baseUpload accept="file" multi="false" :file.sync="item.file" :edit="false"
+                            :showProperties="false" :showSize="true" :createBy="false"></baseUpload>
+              </template>
+              <template v-else-if="item.contentType == 2">
+                <ul class="onlieTalk-search-list">
+                  <li v-for="(answer,index) in item.answers" :key="index">
+                    <a href="javascript:void(0);" class="a-link">{{ answer.question }}</a>
+                  </li>
+                </ul>
+              </template>
             </div>
           </div>
         </div>
-        <div class="h-pic" v-if="fileTab == 'pic'">
-          <div class="item">
-            <el-image :src="src"></el-image>
-          </div>
-          <div class="item">
-            <el-image :src="src"></el-image>
-          </div>
-          <div class="item">
-            <el-image :src="src"></el-image>
-          </div>
-          <div class="item">
-            <el-image :src="src"></el-image>
-          </div>
-          <div class="item">
-            <el-image :src="src"></el-image>
-          </div>
-        </div>
       </div>
     </el-dialog>
   </div>
@@ -295,10 +280,7 @@ export default {
     privateProfileDialog: () => import('../../components/VabUpload/privateProfileDialog')
   },
   data() {
-    return {
-      showHistoryDialog:false,
-      fileTab:'list'
-    };
+    return {};
   },
   mounted() {
   },
@@ -306,59 +288,191 @@ export default {
 </script>
 <style scoped lang="scss">
 @import '~@/styles/variables.scss';
-.history-box{
-  .h-form{
-    padding:2px 16px 10px;
-    .search-classify{
-      background:#F4F4F4;line-height:28px;height:28px;padding:0 8px;border-radius: 3px;
-      > i , > span{vertical-align: middle;font-size: 13px;margin-top: 2px;}
-      > span{margin:0 2px 0 4px}
-      .el-icon-close{cursor: pointer;}
+
+.history-box {
+  .h-form {
+    padding: 2px 16px 10px;
+
+    .search-classify {
+      background: #F4F4F4;
+      line-height: 28px;
+      height: 28px;
+      padding: 0 8px;
+      border-radius: 3px;
+
+      > i, > span {
+        vertical-align: middle;
+        font-size: 13px;
+        margin-top: 2px;
+      }
+
+      > span {
+        margin: 0 2px 0 4px
+      }
+
+      .el-icon-close {
+        cursor: pointer;
+      }
     }
-    ::v-deep .search-box{border:solid 1px #eee;padding:5px;border-radius: 8px;display:flex;background:#FFF;
-      .el-input{flex:1;
-        .el-input__inner{border:none;}
+
+    ::v-deep .search-box {
+      border: solid 1px #eee;
+      padding: 5px;
+      border-radius: 8px;
+      display: flex;
+      background: #FFF;
+
+      .el-input {
+        flex: 1;
+
+        .el-input__inner {
+          border: none;
+        }
       }
     }
-    .keys-box{
-      margin-top:10px;padding: 0 2px;
-      span{display: inline-block;margin-right: 42px;font-size: 13px;color: #2A6494;cursor: pointer;border-bottom:solid 1px #F7F7F7;
-        &:hover{border-bottom:solid 1px #2A6494}
+
+    .keys-box {
+      margin-top: 10px;
+      padding: 0 2px;
+
+      span {
+        display: inline-block;
+        margin-right: 42px;
+        font-size: 13px;
+        color: #2A6494;
+        cursor: pointer;
+        border-bottom: solid 1px #F7F7F7;
+
+        &:hover {
+          border-bottom: solid 1px #2A6494
+        }
       }
     }
   }
-  .h-list{
-    height: 520px;overflow: auto;padding:2px 0;background-color: #FFF;
-    .item{
-      border-bottom:solid 1px #f2f2f2;position: relative;padding:12px 16px;color: #323232;font-size: 13px;
-      .name{color:#999;margin-bottom: 5px;font-size: 12px;}
-      .time{position: absolute;right:16px;top: 14px;font-size: 12px;color: #999;}
-      &:hover{background:#f7f7f7;}
+
+  .h-list {
+    height: 520px;
+    overflow: auto;
+    padding: 2px 0;
+    background-color: #FFF;
+
+    .item {
+      border-bottom: solid 1px #f2f2f2;
+      position: relative;
+      padding: 12px 16px;
+      color: #323232;
+      font-size: 13px;
+      overflow: hidden;
+      .onlieTalk-search-list{
+        list-style: none;margin: -6px 0;padding: 0;min-width: 360px;max-width: 90%;border: solid 1px #eee;padding: 4px 8px;border-radius: 6px;margin: 10px 0 4px;background: #f7f7f7;overflow: hidden;
+        li{
+          padding: 12px 2px;border-bottom: dashed 1px #dfdfdf;display: block;position: relative;font-size: 12px;cursor: pointer;
+          &:after{content:"\e6e0";font-family: element-icons!important;color:#747474;height:30px;border-radius: 50%;position: absolute;top:50%;margin-top:-15px;right:0;line-height:30px;}
+          &:last-child{
+            border-bottom: none;
+          }
+        }
+      }
+      .name {
+        color: #999;
+        margin-bottom: 5px;
+        font-size: 12px;
+      }
+
+      .time {
+        position: absolute;
+        right: 16px;
+        top: 14px;
+        font-size: 12px;
+        color: #999;
+      }
+      ::v-deep .upload-box{margin:-10px 0 0 0 !important;border-top:none}
+      &:hover {
+        background: #f7f7f7;
+      }
+
     }
   }
-  .h-pic{
-    height: 520px;overflow: auto;padding:8px 14px;background-color: #FFF;
-    .item{
-      width:133px;height:133px;display:inline-block;vertical-align: middle;margin: 3px;
-      .el-image{width: 100%;height:100%;}
-      &:hover .el-image{border:solid 1px #2A6494}
+
+  .h-pic {
+    height: 520px;
+    overflow: auto;
+    padding: 8px 14px;
+    background-color: #FFF;
+
+    .item {
+      width: 133px;
+      height: 133px;
+      display: inline-block;
+      vertical-align: middle;
+      margin: 3px;
+
+      .el-image {
+        width: 100%;
+        height: 100%;
+      }
+
+      &:hover .el-image {
+        border: solid 1px #2A6494
+      }
     }
   }
-  .h-file{
-    height: 520px;overflow: auto;padding:8px 0;background-color: #FFF;
-    .item{
-      position: relative;padding:8px 16px 0;color: #323232;font-size: 13px;display: flex;
-      .img{
-        width:58px;height:58px;
-        .el-image{width: 100%;height:100%;}
+
+  .h-file {
+    height: 520px;
+    overflow: auto;
+    padding: 8px 0;
+    background-color: #FFF;
+
+    .item {
+      position: relative;
+      padding: 8px 16px 0;
+      color: #323232;
+      font-size: 13px;
+      display: flex;
+
+      .img {
+        width: 58px;
+        height: 58px;
+
+        .el-image {
+          width: 100%;
+          height: 100%;
+        }
       }
-      .txt{
-        border-bottom:solid 1px #f2f2f2;flex:1;display: flex;color:#999;font-size:12px;padding:0 0 6px;margin-left:12px;
-        p{margin:0 0 8px;}
-        .name{color:#323232;font-size: 13px;}
-        .t-l{flex:1}
-        .t-r{font-size:12px;text-align: right;
-          .ico{display: inline-block;color:#2A6494;margin-left:8px;font-size: 16px;}
+
+      .txt {
+        border-bottom: solid 1px #f2f2f2;
+        flex: 1;
+        display: flex;
+        color: #999;
+        font-size: 12px;
+        padding: 0 0 6px;
+        margin-left: 12px;
+
+        p {
+          margin: 0 0 8px;
+        }
+
+        .name {
+          color: #323232;
+          font-size: 13px;
+        }
+
+        .t-l {
+          flex: 1
+        }
+
+        .t-r {
+          font-size: 12px;
+          text-align: right;
+
+          .ico {
+            display: inline-block;
+            color: #2A6494;
+            margin-left: 8px;
+            font-size: 16px;
+          }
         }
       }
     }
@@ -366,7 +480,6 @@ export default {
 }
 
 
-
 .ico-online {
   background: url(~@/resources/images/ico-service.png) no-repeat center 19px #FFF;
   background-size: 40px;
@@ -491,7 +604,17 @@ export default {
 
           .item {
             margin: 10px 0;
-            font-size:14px;
+            font-size: 14px;
+            .onlieTalk-search-list{
+              list-style: none;margin: -6px 0;padding: 0;min-width: 360px;max-width: 90%;
+              li{
+                padding: 12px 2px;border-bottom: dashed 1px #dfdfdf;display: block;position: relative;font-size: 12px;cursor: pointer;
+                &:after{content:"\e6e0";font-family: element-icons!important;color:#747474;height:30px;border-radius: 50%;position: absolute;top:50%;margin-top:-15px;right:0;line-height:30px;}
+                &:last-child{
+                  border-bottom: none;
+                }
+              }
+            }
             .name {
               color: rgba(102, 102, 102, 0.6);
               margin-bottom: 4px;
@@ -536,7 +659,8 @@ export default {
 
             &.right {
               text-align: right;
-              font-size:14px;
+              font-size: 14px;
+
               .cont {
                 background-color: #D8E8F9;
 
@@ -571,13 +695,37 @@ export default {
           padding: 10px 12px;
           display: flex;
           flex-direction: column;
-          .pop-inputTips{
-            position: absolute;background: #FFF;left: 10px;border: solid 1px #eee;overflow: auto;height: 160px;width: 400px;font-size: 13px;bottom: 100%;margin-bottom: -22px;z-index: 22;box-shadow: 0 0 14px rgb(0 0 0 / 11%);padding:2px 0;
-            p{padding: 10px 16px;margin: 0;cursor: pointer;
-              &:hover{background:#f7f7f7}
-              span{color:$red}
+
+          .pop-inputTips {
+            position: absolute;
+            background: #FFF;
+            left: 10px;
+            border: solid 1px #eee;
+            overflow: auto;
+            height: 160px;
+            width: 400px;
+            font-size: 13px;
+            bottom: 100%;
+            margin-bottom: -22px;
+            z-index: 22;
+            box-shadow: 0 0 14px rgb(0 0 0 / 11%);
+            padding: 2px 0;
+
+            p {
+              padding: 10px 16px;
+              margin: 0;
+              cursor: pointer;
+
+              &:hover {
+                background: #f7f7f7
+              }
+
+              span {
+                color: $red
+              }
             }
           }
+
           .btns {
             background-color: #FAFAFA;
             height: 36px;
@@ -747,9 +895,14 @@ export default {
               }
             }
           }
-          .fl{
-            .button-sty .el-icon-time{margin-bottom: 2px;margin-right: 2px;}
+
+          .fl {
+            .button-sty .el-icon-time {
+              margin-bottom: 2px;
+              margin-right: 2px;
+            }
           }
+
           .fr {
             .t {
               vertical-align: middle;

package/src/components/onlineTalk/mixins.js

@@ -33,7 +33,14 @@ tmixins = {
       editFileIndex: -1,
       showFileNameDialog: false,
       editFileName: null,
-      editFileSuffix: null
+      editFileSuffix: null,
+
+      showHistoryDialog: false,
+      historyType: null,
+      topHistoryEnd: false,
+      talkHRecords: [],
+      historyKeyword: null,
+      fileTab: 'list'
     };
   },
   mounted() {
@@ -237,17 +244,20 @@ tmixins = {
 
 
     },
-    saveTalk() {
+    saveTalk(formData) {
       let talkUser = this.talkUser;
-      if (!this.talkUserId || !talkUser.content) return
+
       let userInfo = this.userInfo;
+      let reqDaqta = {
+        toUser: talkUser.toUser,
+        content: talkUser.content,
+        ...formData
+      }
+      if (!this.talkUserId || !reqDaqta.content) return
       this.$http({
         url: USER_PREFIX + `/talk/save`,
         method: `post`,
-        data: {
-          toUser: talkUser.toUser,
-          content: talkUser.content
-        },
+        data: reqDaqta,
         isLoading: true,
         loadingTarget: document.body,
         success: res => {
@@ -262,29 +272,6 @@ tmixins = {
         }
       });
     },
-    a(){
-      this.$http({
-        url: USER_PREFIX + `/knowledge_base/findLnowList`,
-        method: `post`,
-        data: {
-          toUser: talkUser.toUser,
-          content: talkUser.content
-        },
-        // isLoading: true,
-        loadingTarget: document.body,
-        success: res => {
-          let row = res.objx || {};
-          talkUser.content = null;
-          this.getList(0, () => {
-            this.$nextTick(() => {
-              this.topChatBoxButtom();
-              this.$refs.contentRef.focus();
-            })
-          })
-        }
-      });
-
-    },
     getUserPage(flag) {
       if (!this.dialogTableVisible) return
       if (!this.inited) {
@@ -423,28 +410,42 @@ tmixins = {
       //处理消息的发送时间（精确到分钟），用于分组
       row._time = row.createDate.substring(0, 16)
       //处理文本是否文件
+      let contentType = 0;
       let file = null;
+      let answers = [];
       let cotnent = row.content;
       let str = "#file:";
-      if (cotnent.indexOf(str) == 0) {
-        let jsonStr = cotnent.slice(str.length)
-        if (jsonStr) {
-          try {
-            file = JSON.parse(jsonStr);
-            if (!file.domain || !file.url) {
-              file = null;
+      let str2 = "#answer:";
+      if (cotnent) {
+        if (cotnent.indexOf(str) == 0) {
+          let jsonStr = cotnent.slice(str.length)
+          if (jsonStr) {
+            try {
+              file = JSON.parse(jsonStr);
+              if (!file.domain || !file.url) {
+                file = null;
+              }
+            } catch (e) {
+              console.error(e);
             }
-          } catch (e) {
           }
+          contentType = 1;
+        } else if (cotnent.startsWith(str2)) {
+          let jsonStr = cotnent.slice(str2.length)
+          if (jsonStr) {
+            try {
+              answers = JSON.parse(jsonStr) || [];
+            } catch (e) {
+              console.error(e);
+            }
+          }
+          contentType = 2;
         }
       }
-      if (file) {
-        row.file = file;
-        row.contentType = 1;
-      } else {
-        row.contentType = 0;
-        row.file = null;
-      }
+
+      row.contentType = contentType;
+      row.file = file;
+      row.answers = answers;
     },
     createTimerHandle() {
       this.clearTimerHandle();
@@ -727,7 +728,118 @@ tmixins = {
       file.fileName = this.editFileName.toString();
       file.name = (file.fileName + "." + file.fileSuffix).toString();
       this.showFileNameDialog = false;
-    }
+    },
+    answerCheckHandle(item) {
+      this.saveTalk({
+        content: item.question,
+        knowledgeId: item.id
+      })
+    },
+    openHistoryDialog() {
+      this.historyKeyword = null;
+      this.historyType = null;
+      this.topHistoryEnd = false;
+      this.talkHRecords = [];
+      this.showHistoryDialog = true;
+      this.getHList(0, () => {
+        if (this.talkHRecords.length) {
+          this.$nextTick(() => {
+            document.querySelector('.talk_h' + this.talkHRecords[this.talkHRecords.length - 1].id).scrollIntoView();
+          })
+        }
+      });
+    },
+    checkHistoryType(historyType) {
+      this.historyType = historyType;
+      this.topHistoryEnd = false;
+      this.talkHRecords = [];
+      this.getHList(0, () => {
+        if (this.talkHRecords.length) {
+          this.$nextTick(() => {
+            document.querySelector('.talk_h' + this.talkHRecords[this.talkHRecords.length - 1].id).scrollIntoView();
+          })
+        }
+      });
+    },
+    changeHistoryKeyword() {
+      this.topHistoryEnd = false;
+      this.talkHRecords = [];
+      this.getHList(0, () => {
+        if (this.talkHRecords.length) {
+          this.$nextTick(() => {
+            document.querySelector('.talk_h' + this.talkHRecords[this.talkHRecords.length - 1].id).scrollIntoView();
+          })
+        }
+      });
+    },
+    handleScrollH(event) {
+      let scrollTop = event.target.scrollTop;
+      let scrollHeight = event.target.scrollHeight;
+      let clientHeight = event.target.clientHeight;
+      let isTop = scrollTop <= 0;
+      let isButtom = scrollTop + clientHeight >= scrollHeight;
+      if (isTop) {
+        //上拉，查上一页的记录
+        let firstDom = event.target.querySelector('.item');
+        this.getHList(1, () => {
+          firstDom && firstDom.scrollIntoView();
+        });
+      }
+    },
+    getHList(direction, callback) {
+      if (!this.showHistoryDialog) return
+      if (!this.talkUserId) return
+      let talkUser = this.talkUser;
+      if (direction == 1 && this.topHistoryEnd) {
+        ////上拉，且没有记录
+        return;
+      }
+      let lastId = this.getLastHRecordId(direction);
+      direction = direction || 0;
+      this.$http({
+        url: USER_PREFIX + `/talk/list`,
+        method: `post`,
+        data: {
+          toUser: this.talkUserId,
+          lastId: lastId,
+          direction: direction,
+          type: this.historyType,
+          keyWord: this.historyKeyword
+        },
+        modal: false,
+        success: res => {
+          let rows = res.objx || [];
+          rows.forEach(row => {
+            this.handleContent(row);
+          })
+          if (direction == 0) {
+            this.talkHRecords.push(...rows);
+          } else {
+            this.talkHRecords.splice(0, 0, ...rows);
+          }
+
+          if (direction == 1 && rows.length == 0) {
+            //上拉，且没有记录
+            this.topHistoryEnd = true;
+          }
+          callback && callback();
+        }
+      });
+    },
+    getLastHRecordId(direction) {
+      direction = direction || 0;
+      let lastTalkRecordId = null;
+      if (this.talkHRecords.length) {
+        if (direction == 0) {
+          //下拉，获取最后一条记录的ID
+          lastTalkRecordId = this.talkHRecords[this.talkHRecords.length - 1].id;
+        } else {
+          //上拉，获取第一条记录的ID
+          lastTalkRecordId = this.talkHRecords[0].id;
+        }
+      }
+      return lastTalkRecordId;
+    },
     //file end
   }
 };