askbot-dragon 1.6.35-beta → 1.6.36-beta

package/src/components/AnswerDocknowledge.vue

@@ -1,625 +1,675 @@
-<template>
-    <div class="answer-docknowledge">
-        <div :class="['answer-docknowledge-header',msg.content.isKnowledgeSummary ? 'bgc' : '']">
-          <div v-if="msg.content.isKnowledgeSummary" class="tips">AI为您总结生成了以下摘要</div>
-          <div v-if="msg.content.type == 0" class="answer-text">
-            <template v-if="msg.content.renderType == 1">
-              <p v-html="msg.content.text"></p>
-            </template>
-            <template v-else>
-              {{ msg.content.text }}
-            </template>
-          </div>
-          <div v-if="msg.content.type == 1" class="answer-text">
-            <template v-if="msg.content.renderType == 1">
-              <p v-html="msg.content.text"></p>
-            </template>
-            <template v-else>
-              {{ msg.content.text }}
-            </template>
-          </div>
-          <div v-if="msg.content.images && msg.content.images.length != 0" class="answer-kn-image-box">
-            <img v-for="(imageItem, imageItemIndex) in msg.content.images" style='max-width: 230px;border-radius: 25px;margin-bottom: 15px' :src="imageItem.url" :key="imageItemIndex" alt="" @click="lookAttach(imageItem.url, imageItem, $event)">
-          </div>
-        </div>
-        <div class="ad-list">
-            <div v-for="(item, itemIndex) in  msg.content.list" :style="{paddingBottom: itemIndex === msg.content.list.length - 1?0:'10px'}" :key="itemIndex" class="ad-list-cell">
-                <div class="alc-title">
-                    <div class="alc-box">
-                      <div class="alc-source-left">
-                        <span class="source-form">出自</span>
-                        <img class="alc-title-icon" height="24px" width="24px" :src="item.src" alt="" srcset="">
-                        <span class="alc-title-from">{{ item.from }}</span>
-                      </div>
-                      
-                    </div>
-                  <div v-html="item.introduction" v-if="!srcContentTypeIMG(item)" class="alc-box-introduction">
-                  </div>
-                  <div  v-else class="alc-box-introduction">
-                    <img :src="item.expiredUrl" alt="" @click="lookAttach(item.url, item, $event)">
-                  </div>
-                  <div  v-if="item.previewImage" class="alc-box-introduction-previewImage">
-                    <img :src="item.previewImage" alt="" @click="lookAttach(item.previewImage, {url: item.previewImage}, $event)">
-                  </div>
-                  <div class="alc-updateTime">
-                    <div v-show="docSource[item.source]" class="upload-source">
-                      {{docSource[item.source]}}
-                    </div>
-                    <div v-show="item.url" class="alc-content-text">
-                        <span @click="lookAttach(item.url, item, $event)" class="aci-view">查看 ></span>
-                    </div>
-                    <!-- <div class="time">
-                      <span>更新时间:</span>
-                      {{ new Date(item.updateTime).Format('MM-dd hh:mm') }}
-                    </div> -->
-                  </div>
-<!--                    <span v-if="isPC" class="alc-title-updateTime">最后更新时间: {{ item.updateTime }}</span>-->
-                </div>
-                <div class="alc-content" v-if="false">
-                    <div v-if="msg.content.type == 1" class="alc-content-text">{{ item.introduction }} <span
-                            @click="lookAttach(item.url, item,  $event)" class="aci-view">查看原文 ></span>
-                    </div>
-                    <span v-if="!isPC" class="alc-title-updateTime">最后更新时间: {{ item.updateTime }}</span>
-                    <div v-if="false" class="alc-content-info">
-                        <div class="alcc-box">
-                            <span class="aci-owner">所有者: {{ item.owner }}</span>
-                            <span class="aci-enterprise">所属企业: {{ item.enterprise }}</span>
-                            <span class="aci-source">文件来源: {{ item.source }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="ad-loadmore" v-if="loadMoreFlag" @click="lazyLoadKnowledegList">
-              查看更多
-            </div>
-        </div>
-        <previewPdf ref="previewPdf"
-                    :url="previewHref"
-                    :watermark="watermark" :sourceFileType="sourceFileType"
-                    officePreviewType="pdf"
-                    @previewToDialog="previewToDialog"
-                    :isHasChat="isHasChat"
-        ></previewPdf>
-    </div>
-</template>
-  
-<script>
-/* eslint-disable */
-import previewPdf from "./previewPdf";
-import { isMobile } from "../assets/js/common";
-export default {
-    name: "answerDocknowledge",
-    components: { previewPdf },
-    data() {
-        return {
-            isPC: true,
-            previewHref: "",
-            sourceFileType:'',
-            docSource: {
-              LOCAL_FILE: "来源于本地文件",
-              CREATED_BY_ONESELF: "来源于自建知识",
-              WECHAT: "来源于微信",
-              AUTO_SYN_FROM_LOCAL_FILE: "自动同步于本地",
-              YUQUE: "来源于语雀",
-              CORP_LOCAL_FILE:'来源于企业知识库',
-              FEISHU:'来源于飞书-云文档'
-            },
-            imageObj: {
-              PDF: 'pdf1',
-              pdf: 'pdf1',
-              TXT: 'txt1',
-              txt: 'txt1',
-              selfadd: 'selfadd1',
-              md: "md2",
-              html: 'selfadd1',
-              mode: "mode",
-              general: 'general',
-              word: "word1",
-              Word: "word1",
-              docx: "word1",
-              doc: "word1",
-              WORD: "word1",
-              Excel: 'excel1',
-              EXCEL: 'excel1',
-              excel: 'excel1',
-              PPT: 'ppt1',
-              ppt: 'ppt1',
-              pptx: 'ppt1',
-              img: "image1",
-              image: "image1",
-              video: "video",
-              audio: 'audio',
-              link: "link",
-              wechat: "wechat",
-              mp4: "video",
-              MP4: "video",
-              xlsx: "excel1",
-              SLSX: "excel1",
-              xls: "excel1",
-              XLS: "excel1",
-              jpg: "image1",
-              JPG: "image1",
-              jpeg: "image1",
-              JPEG: "image1",
-              png: "image1",
-              PNG: "image1",
-              webp: "image1",
-              WEBP: "image1",
-              gif: "image1",
-              GIF: "image1",
-              svg: "image1",
-              SVG: "image1",
-              bmp: "image1",
-              BMP: "image1",
-              avi: "video",
-              AVI: "video",
-              mov: "video",
-              MOV: "video",
-              rmvb: "video",
-              RMVB: "video",
-              wav: "audio",
-              WAV: "audio",
-              mp3: "audio",
-              MP3: "audio",
-              yqhtml: "yqhtml",
-              feishuhtml:"feishuhtml"
-            },
-            watermark: {
-              textWatermarkValue:'',
-              visitorWatermarkValue:'',
-              source:""
-            },
-            allKnowledgeList:[],
-            loadMoreFlag:false,
-            previewKnowledgeId:"",
-            previewKnowledge:{}
-        }
-    },
-    props: ['msg','isAskLightning', 'isMessageRecord',"isApp","isHasChat","activeKnowledgeId"],
-    beforeMounted() {
-    },
-    watch:{
-      msg:{
-        handler(n){
-          console.log(n,'answerDocknowledge');
-          n.content.list.forEach(element => {
-            console.log(this.imageObj[element.format],1111);
-            element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/' + this.imageObj[element.format] + '.png';
-            if ((element.format === "txt" || element.format === "html") && element.source === "WECHAT") {
-              element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/wechat.png';
-            }
-          });
-        },
-        deep:true,
-        immediate:true
-      }
-    },
-    created() {
-        var system = {};
-        system.pingtai = /(Win32|Win16|WinCE|Mac68K|MacIntel|MacIntel|MacPPC|Linux mips64)/i.test(navigator.platform);
-        if (system.pingtai) {
-            //电脑
-            this.isPC = true;
-        } else {
-            //手机
-            this.isPC = false;
-        }
-        // this.msg.content.list.forEach(element => {
-        //   console.log(this.imageObj[element.format],1111);
-        //     element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/' + this.imageObj[element.format] + '.png';
-        //     if ((element.format === "txt" || element.format === "html") && element.source === "WECHAT") {
-        //       element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/wechat.png';
-        //     }
-        // });
-    },
-    mounted() {
-      console.log(this.msg.content,'this.msg.content');
-      // if(this.msg.content.type == 1) {
-
-      // }
-      if(this.msg.content.list && this.msg.content.list.length > 0) {
-        this.loadMoreFlag = true
-        this.allKnowledgeList = JSON.parse(JSON.stringify(this.msg.content.list))
-        // console.log(this.allKnowledgeList.length, 'this.allKnowledgeList');
-        this.msg.content.list = []
-        this.lazyLoadKnowledegList()
-      }
-    },
-    methods: {
-        //预览图片
-        lookAttach(url, item, event) {
-          // console.log(item.knowledgeId);
-          // this.$http.get("/knowledge-api/internal/knowledgeBaseStructure/" + "642ffbccde420e2772f7787b")
-          // debugger
-          event.preventDefault();
-          if (this.isAskLightning == 1 && !this.isApp){
-            window.parent.postMessage({
-              data: "bot_preview",
-              item: JSON.stringify(item),
-              url: url
-            },"*");
-          } else {
-            // if (isMobile()) {
-            //   this.$refs.previewPdf.drawer = true;
-            //   this.$refs.previewPdf.previewShowPopup = false;
-            // } else {
-            //   this.$refs.previewPdf.drawer = false;
-            // }
-            this.previewKnowledge = item;
-            this.previewKnowledgeId = item.knowledgeId
-            this.$refs.previewPdf.previewShowPopup = false;
-            this.$refs.previewPdf.drawer = false;
-            let index = url.lastIndexOf('?')
-            let type = ''
-            let httpUrl = '/knowledge-api/knowledge/getTemporaryCertificate'
-            if (index !== -1) {
-              url = url.substring(0, index)
-              type = this.fileType(url)
-            } else {
-              type = this.fileType(url)
-            }
-            if (type === '' || type === 'OTHER') {
-              httpUrl = httpUrl += '?needEncrypt=true'
-            } else {
-              httpUrl = httpUrl += '?needEncrypt=false'
-            }
-            this.$http.post(httpUrl, {
-              "fileInOssPath":url
-            }).then(async res =>{
-              if(res.data.code == '0') {
-                this.watermark = await this.getknowledgeBaseStructure(item.knowledgeId);
-                this.watermark.source = item.source;
-                this.previewHref = res.data.data;
-                this.sourceFileType = url.substring(url.lastIndexOf('.'))
-                let isOhmPc = sessionStorage.getItem('isOhmPc')
-                if (isMobile() || isOhmPc == 'true'){
-                  this.$refs.previewPdf.drawer = true;
-                  this.$refs.previewPdf.previewShowPopup = true;
-                } else {
-                  this.$refs.previewPdf.previewShowPopup = false;
-                  this.$refs.previewPdf.drawer = true;
-                }
-                //聊一聊按钮的选中状态
-                if (this.activeKnowledgeId == item.knowledgeId){
-                  this.$refs.previewPdf.previewKnowledgeId = this.activeKnowledgeId
-                } else {
-                  this.$refs.previewPdf.previewKnowledgeId = ""
-                }
-                this.$refs.previewPdf.fileType = type
-                this.$refs.previewPdf.tagIds = item.tagIds
-                this.$refs.previewPdf.isMessageRecord = this.isMessageRecord ? true : false ;
-                let index = url.indexOf("?");
-                let newFileInOssPath = url;
-                if (index !== -1){
-                  newFileInOssPath =  url.substring(0, url.indexOf("?"))
-                }
-                let fileName = newFileInOssPath.substring(newFileInOssPath.lastIndexOf('.'))
-                if (fileName === '.doc' || fileName === '.docx' || fileName === '.txt'|| fileName === '.html'){
-                  this.$refs.previewPdf.fileName = fileName;
-                } else {
-                  this.$refs.previewPdf.fileName = '';
-                }
-                if(item.tagIds && item.tagIds.length != 0) {
-                  this.$refs.previewPdf.loading = false
-                  return
-                }
-                this.$nextTick(() =>{
-                  if(item.source == 'CREATED_BY_ONESELF' || type === 'HTML') {
-                    this.$refs.previewPdf.getBolb(item)
-                  }
-                  this.$refs.previewPdf.loadIframe(item)
-                })
-              }
-            })
-          }
-        },
-        fileType (url) {
-            const fileType = url.substring(url.lastIndexOf('.'));
-            if (fileType === '.mp4' || fileType === '.MP4' || fileType === '.MOV' || fileType === '.MOVC' || fileType === '.mov' || fileType === '.movc' || fileType === '.mav' || fileType === '.MAV' || fileType == '.mp3' || fileType == '.MP3' || fileType === '.wav') {
-                return 'VIDEO'
-            } else if (fileType === '.html') {
-                return 'HTML'
-            } else {
-                return 'OTHER'
-            }
-        },
-        srcContentTypeIMG(item) {
-          let url = item.url || '';
-          const type =  url.substring(url.lastIndexOf('.'));
-          if(type === '.jpg' || type === '.jpeg' || type === '.png' || type === '.gif') {
-            this.getSrc(item)
-            return true
-          }  else {
-            return false
-          }
-        },
-        getSrc (item) {
-          // let imgurl = ''
-          this.$http.post(
-            '/knowledge-api/temporary-certificate/or-origin?expired=30',
-            item.url,
-            {
-              headers: {
-                "Content-Type": "application/json",
-              },
-            }).then( res => {
-              console.log(res,'=====');
-              // imgurl = await res.bodyText
-              this.$set(item,'expiredUrl',res.data ? res.data : res.bodyText)
-              // return res.data
-            })
-          // return imgurl
-        },
-        async getknowledgeBaseStructure(knowledgeId) {
-          let watermark = {
-            textWatermarkValue:'',
-            visitorWatermarkValue:''
-          }
-          await this.$http.get("/knowledge-api/internal/knowledgeBaseStructure/" + knowledgeId).then( async res =>{
-            if(res.data) {
-              watermark.textWatermarkValue = await res.data.textWatermarkValue
-              if(res.data.visitorWatermark) {
-                let userInfo = sessionStorage.getItem('userInfo') || localStorage.getItem('userInfo')
-                if(userInfo && userInfo !== 'null') {
-                  watermark.visitorWatermarkValue = JSON.parse(userInfo).realName
-                }
-              }
-            }
-          })
-          return watermark
-        },
-        lazyLoadKnowledegList() {
-          if(this.allKnowledgeList.length !== 0) {
-            let arr = this.allKnowledgeList.splice(0, 5)
-            if(arr.length < 5) {
-              this.loadMoreFlag = false
-              this.msg.content.list = [...this.msg.content.list, ...arr]
-              return
-            }
-            if(this.allKnowledgeList.length == 0) {
-              this.loadMoreFlag = false
-            }
-            this.msg.content.list = [...this.msg.content.list, ...arr]
-            return
-          }
-        },
-      previewToDialog(flag){
-          if (!flag){
-            this.$refs.previewPdf.previewKnowledgeId = ""
-          } else {
-            this.$refs.previewPdf.previewKnowledgeId = this.previewKnowledgeId
-          }
-          this.$emit('previewToDialog',flag,this.previewKnowledgeId,this.previewKnowledge)
-      },
-      clearKnowledgeId(){
-        this.previewKnowledgeId = "";
-      }
-    }
-}
-</script>
-  
-<style scoped lang="less">
-.answer-docknowledge {
-    min-width: 100px;
-    .answer-docknowledge-header{
-      
-     
-      .tips{
-        width: 154px;
-        height: 22px;
-        background: #366AFF;
-        border-radius: 5px;
-        text-align: center;
-        line-height: 22px;
-        color: #fff;
-        font-size: 12px;
-        margin-bottom: 7px;
-      }
-       .answer-text {
-        // font-size: 13px;
-        text-align: left;
-        line-height: 25px;
-        padding: 0px 0px 12px 0px;
-
-        .aci-view {
-            // font-size: 13px;
-            display: inline-block;
-            // margin-left: 5px;
-            color: #366aff;
-            cursor: pointer;
-        }
-      }
-      &.bgc{
-        padding: 10px;
-        background: #EEF1FF;
-        border-radius: 10px;
-        margin-bottom: 16px;
-        .answer-text {
-          padding: 0;
-        }
-      }
-    }
-
-    .ad-list {
-        .ad-list-cell {
-            border-top: solid 1px #EEEEEE;
-            padding: 10px 0 10px;
-
-            .alc-title {
-                display: flex;
-                flex-wrap: wrap;
-                align-items: center;
-                justify-content: space-between;
-                line-height: 16px;
-
-                .alc-box {
-                  display: flex;
-                  align-items: center;
-                  justify-content: space-between;
-                  // font-size: 12px;
-                  width: 100%;
-                  .alc-source-left{
-                    display: flex;
-                    align-items: center;
-                    .source-form{
-                      width: 34px;
-                      flex: none;
-                      color: #A9B3C6;
-                    }
-                  }
-                  .alc-content-text{
-                    width: 55px;
-                    flex: none;
-                    .aci-view{
-                      color: #366aff;
-                      cursor: pointer;
-                    }
-                  }
-                    .alc-title-from {
-                        line-height: 22px;
-                        word-break: break-all !important;
-                        text-align: left;
-                        flex: auto;
-                        display: flex;
-                        justify-content: flex-start;
-                    }
-                }
-                .alc-box-introduction{
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  display: -webkit-box;
-                  -webkit-line-clamp:3;
-                  -webkit-box-orient:vertical;
-                  margin-top: 10px;
-                  color: #616161;
-                  // font-size: 12px;
-                  line-height: 24px;
-                  text-align: left;
-                  img {
-                    width: 50px;
-                    height: 50px;
-                    margin: 10px;
-                    cursor: pointer;
-                  }
-                }
-                .alc-box-introduction-previewImage {
-                  width: 100%;
-                  display: block;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  display: -webkit-box;
-                  -webkit-line-clamp:3;
-                  -webkit-box-orient:vertical;
-                  margin-top: 10px;
-                  color: #616161;
-                  // font-size: 12px;
-                  line-height: 24px;
-                  text-align: left;
-                  img {
-                    max-width: 300px;
-                    width: 100%;
-                    max-height: 150px;
-                    margin: 10px;
-                    cursor: pointer;
-                  }
-                }
-                .alc-updateTime{
-                  display: flex;
-                  align-items: center;
-                  justify-content: space-between;
-                  font-size: 13px;
-                  width: 100%;
-                  margin-top: 10px;
-                  .upload-source{
-                    flex: none;
-                    height: 18px;
-                    line-height: 18px;
-                    background: #E9F9F8;
-                    border: 1px solid #AFF2CD;
-                    border-radius: 2px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    padding: 0 8px;
-                    color: #00C2BB;
-                  }
-                  .time{
-                    color: #999999;
-                    margin-left: 10px;
-                  }
-                  .alc-content-text {
-                    color: #366aff;
-                    cursor: pointer;
-                  }
-                }
-                .alc-title-icon {
-                  margin: 0 2px;
-                  width: 18px;
-                  height: 18px;
-                  flex: none;
-                }
-
-                .alc-title-updateTime {
-                    text-align: right;
-                    color: #999999;
-                    // font-size: 13px;
-                }
-            }
-
-            .alc-content {
-                .alc-title-updateTime {
-                    margin-top: 6px;
-                    display: block;
-                    text-align: right;
-                    color: #999999;
-                    // font-size: 13px;
-                }
-
-                .alc-content-text {
-                    margin-bottom: 6px;
-                    width: 55px;
-                    flex: none;
-                    .aci-view {
-                        display: inline-block;
-                        margin-left: 30px;
-                        color: #366aff;
-                        cursor: pointer;
-                    }
-                }
-
-                .alc-content-info {
-                    display: flex;
-                    flex-wrap: wrap;
-                    justify-content: space-between;
-
-                    .alcc-box {
-                        display: flex;
-                        flex-wrap: wrap;
-                        color: #999999;
-
-                        .aci-owner {
-                            margin-right: 20px;
-                        }
-
-                        .aci-enterprise {
-                            margin-right: 20px;
-                        }
-                    }
-                }
-            }
-        }
-        .ad-loadmore {
-          width: 100%;
-          height: 40px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          // background: #FFFFFF;
-          color: #366AFF;
-          font-size: 14px;
-          margin-top: 8px;
-          cursor: pointer;
-        }
-    }
-}
-</style>
+<template>
+    <div class="answer-docknowledge">
+        <div :class="['answer-docknowledge-header',msg.content.isKnowledgeSummary ? 'bgc' : '']">
+            <div v-if="msg.content.isKnowledgeSummary" class="tips">AI为您总结生成了以下摘要</div>
+            <div v-if="msg.content.type == 0" class="answer-text">
+                <template v-if="msg.content.renderType == 1">
+                    <p v-html="msg.content.text"></p>
+                </template>
+                <template v-else>{{ msg.content.text }}</template>
+            </div>
+            <div v-if="msg.content.type == 1" class="answer-text">
+                <template v-if="msg.content.renderType == 1">
+                    <p v-html="msg.content.text"></p>
+                </template>
+                <template v-else>{{ msg.content.text }}</template>
+            </div>
+            <div v-if="msg.content.images && msg.content.images.length != 0" class="answer-kn-image-box">
+                <img
+                    v-for="(imageItem, imageItemIndex) in msg.content.images"
+                    style="max-width: 230px;border-radius: 25px;margin-bottom: 15px"
+                    :src="imageItem.url"
+                    :key="imageItemIndex"
+                    alt
+                    @click="lookAttach(imageItem.url, imageItem, $event)"
+                />
+            </div>
+        </div>
+        <div class="ad-list">
+          <!-- :style="{paddingBottom: itemIndex === msg.content.list.length - 1?0:'10px'}" -->
+
+            <div
+                v-for="(item, itemIndex) in  msg.content.list"
+                :key="itemIndex"
+                class="ad-list-cell"
+            >
+                <!--     <div class="alc-title">
+                    <!~~ <div class="alc-box">
+                      <div class="alc-source-left">
+                        <span class="source-form">出自</span>
+                        <img class="alc-title-icon" height="24px" width="24px" :src="item.src" alt="" srcset="">
+                        <span class="alc-title-from">{{ item.from }}</span>
+                      </div>
+
+                    </div>~~>
+                    <!~~ <div v-html="item.introduction" v-if="!srcContentTypeIMG(item)" class="alc-box-introduction">
+                    </div>~~>
+                    <!~~ <div  v-else class="alc-box-introduction">
+                    <img :src="item.expiredUrl" alt="" @click="lookAttach(item.url, item, $event)">
+                    </div>~~>
+                    <!~~ <div  v-if="item.previewImage" class="alc-box-introduction-previewImage">
+                    <img :src="item.previewImage" alt="" @click="lookAttach(item.previewImage, {url: item.previewImage}, $event)">
+                    </div>~~>
+                    <!~~ <div class="alc-updateTime">
+                    <div v-show="docSource[item.source]" class="upload-source">
+                      {{docSource[item.source]}}
+                    </div>
+                    <div v-show="item.url" class="alc-content-text">
+                        <span @click="lookAttach(item.url, item, $event)" class="aci-view">查看 ></span>
+                    </div>
+                    </div>~~>
+                </div>-->
+                <div class="alc-source-name" @click="lookAttach(item.url, item, $event)">
+                    <img class="alc-title-icon" height="18px" width="18px" :src="item.src" alt srcset />
+                    <span class="alc-title-from">{{ item.from }}</span>
+                    <i class="iconfont guoran-right"></i>
+                </div>
+                <div class="alc-content" v-if="false">
+                    <div v-if="msg.content.type == 1" class="alc-content-text">
+                        {{ item.introduction }}
+                        <span
+                            @click="lookAttach(item.url, item,  $event)"
+                            class="aci-view"
+                        >查看原文 ></span>
+                    </div>
+                    <span v-if="!isPC" class="alc-title-updateTime">最后更新时间: {{ item.updateTime }}</span>
+                    <div v-if="false" class="alc-content-info">
+                        <div class="alcc-box">
+                            <span class="aci-owner">所有者: {{ item.owner }}</span>
+                            <span class="aci-enterprise">所属企业: {{ item.enterprise }}</span>
+                            <span class="aci-source">文件来源: {{ item.source }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="ad-loadmore" v-if="loadMoreFlag" @click="lazyLoadKnowledegList">查看更多</div>
+        </div>
+        <previewPdf ref="previewPdf"
+                    :url="previewHref"
+                    :watermark="watermark" :title="title" :sourceFileType="sourceFileType"
+                    officePreviewType="pdf"
+                    @previewToDialog="previewToDialog"
+                    :isHasChat="isHasChat"
+        ></previewPdf>
+    </div>
+</template>
+
+<script>
+/* eslint-disable */
+import previewPdf from "./previewPdf";
+import { isMobile } from "../assets/js/common";
+export default {
+    name: "answerDocknowledge",
+    components: { previewPdf },
+    data () {
+        return {
+            isPC: true,
+            previewHref: "",
+            sourceFileType: '',
+            docSource: {
+                LOCAL_FILE: "来源于本地文件",
+                CREATED_BY_ONESELF: "来源于自建知识",
+                WECHAT: "来源于微信",
+                AUTO_SYN_FROM_LOCAL_FILE: "自动同步于本地",
+                YUQUE: "来源于语雀",
+                CORP_LOCAL_FILE: '来源于企业知识库',
+                FEISHU: '来源于飞书-云文档'
+            },
+            imageObj: {
+                PDF: 'pdf1',
+                pdf: 'pdf1',
+                TXT: 'txt1',
+                txt: 'txt1',
+                selfadd: 'selfadd1',
+                md: "md2",
+                html: 'selfadd1',
+                mode: "mode",
+                general: 'general',
+                word: "word1",
+                Word: "word1",
+                docx: "word1",
+                doc: "word1",
+                WORD: "word1",
+                Excel: 'excel1',
+                EXCEL: 'excel1',
+                excel: 'excel1',
+                PPT: 'ppt1',
+                ppt: 'ppt1',
+                pptx: 'ppt1',
+                img: "image1",
+                image: "image1",
+                video: "video",
+                audio: 'audio',
+                link: "link",
+                wechat: "wechat",
+                mp4: "video",
+                MP4: "video",
+                xlsx: "excel1",
+                SLSX: "excel1",
+                xls: "excel1",
+                XLS: "excel1",
+                jpg: "image1",
+                JPG: "image1",
+                jpeg: "image1",
+                JPEG: "image1",
+                png: "image1",
+                PNG: "image1",
+                webp: "image1",
+                WEBP: "image1",
+                gif: "image1",
+                GIF: "image1",
+                svg: "image1",
+                SVG: "image1",
+                bmp: "image1",
+                BMP: "image1",
+                avi: "video",
+                AVI: "video",
+                mov: "video",
+                MOV: "video",
+                rmvb: "video",
+                RMVB: "video",
+                wav: "audio",
+                WAV: "audio",
+                mp3: "audio",
+                MP3: "audio",
+                yqhtml: "yqhtml",
+                feishuhtml: "feishuhtml"
+            },
+            watermark: {
+              textWatermarkValue:'',
+              visitorWatermarkValue:'',
+              source:""
+            },
+            allKnowledgeList:[],
+            loadMoreFlag:false,
+            previewKnowledgeId:"",
+            previewKnowledge:{},
+            title:''
+        }
+    },
+    props: ['msg', 'isAskLightning', 'isMessageRecord', "isApp","isHasChat","activeKnowledgeId"],
+    beforeMounted () {
+    },
+    watch: {
+        msg: {
+            handler (n) {
+                console.log(n, 'answerDocknowledge');
+                n.content.list.forEach(element => {
+                    console.log(this.imageObj[element.format], 1111);
+                    element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/' + this.imageObj[element.format] + '.png';
+                    if ((element.format === "txt" || element.format === "html") && element.source === "WECHAT") {
+                        element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/wechat.png';
+                    }
+                });
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    created () {
+        var system = {};
+        system.pingtai = /(Win32|Win16|WinCE|Mac68K|MacIntel|MacIntel|MacPPC|Linux mips64)/i.test(navigator.platform);
+        if (system.pingtai) {
+            //电脑
+            this.isPC = true;
+        } else {
+            //手机
+            this.isPC = false;
+        }
+        // this.msg.content.list.forEach(element => {
+        //   console.log(this.imageObj[element.format],1111);
+        //     element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/' + this.imageObj[element.format] + '.png';
+        //     if ((element.format === "txt" || element.format === "html") && element.source === "WECHAT") {
+        //       element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/wechat.png';
+        //     }
+        // });
+    },
+    mounted () {
+        console.log(this.msg.content, 'this.msg.content');
+        // if(this.msg.content.type == 1) {
+
+        // }
+        if (this.msg.content.list && this.msg.content.list.length > 0) {
+            this.loadMoreFlag = true
+            this.allKnowledgeList = JSON.parse(JSON.stringify(this.msg.content.list))
+            // console.log(this.allKnowledgeList.length, 'this.allKnowledgeList');
+            this.msg.content.list = []
+            this.lazyLoadKnowledegList()
+        }
+    },
+    methods: {
+        //预览图片
+        lookAttach(url, item, event) {
+          // console.log(item.knowledgeId);
+          // this.$http.get("/knowledge-api/internal/knowledgeBaseStructure/" + "642ffbccde420e2772f7787b")
+          // debugger
+          event.preventDefault();
+          if (this.isAskLightning == 1 && !this.isApp){
+            window.parent.postMessage({
+              data: "bot_preview",
+              item: JSON.stringify(item),
+              url: url
+            },"*");
+          } else {
+            // if (isMobile()) {
+            //   this.$refs.previewPdf.drawer = true;
+            //   this.$refs.previewPdf.previewShowPopup = false;
+            // } else {
+            //   this.$refs.previewPdf.drawer = false;
+            // }
+            this.title = item.from || item.name
+            this.previewKnowledge = item;
+            this.previewKnowledgeId = item.knowledgeId
+            this.$refs.previewPdf.previewShowPopup = false;
+            this.$refs.previewPdf.drawer = false;
+            let index = url.lastIndexOf('?')
+            let type = ''
+            let httpUrl = '/knowledge-api/knowledge/getTemporaryCertificate'
+            if (index !== -1) {
+              url = url.substring(0, index)
+              type = this.fileType(url)
+            } else {
+              type = this.fileType(url)
+            }
+            if (type === '' || type === 'OTHER') {
+              httpUrl = httpUrl += '?needEncrypt=true'
+            } else {
+              httpUrl = httpUrl += '?needEncrypt=false'
+            }
+            this.$http.post(httpUrl, {
+              "fileInOssPath":url
+            }).then(async res =>{
+              if(res.data.code == '0') {
+                this.watermark = await this.getknowledgeBaseStructure(item.knowledgeId);
+                this.watermark.source = item.source;
+                this.previewHref = res.data.data;
+                this.sourceFileType = url.substring(url.lastIndexOf('.'))
+                let isOhmPc = sessionStorage.getItem('isOhmPc')
+                if (isMobile() || isOhmPc == 'true'){
+                  this.$refs.previewPdf.drawer = true;
+                  this.$refs.previewPdf.previewShowPopup = true;
+                } else {
+                  this.$refs.previewPdf.previewShowPopup = false;
+                  this.$refs.previewPdf.drawer = true;
+                }
+                //聊一聊按钮的选中状态
+                if (this.activeKnowledgeId == item.knowledgeId){
+                  this.$refs.previewPdf.previewKnowledgeId = this.activeKnowledgeId
+                } else {
+                  this.$refs.previewPdf.previewKnowledgeId = ""
+                }
+                this.$refs.previewPdf.fileType = type
+                this.$refs.previewPdf.tagIds = item.tagIds
+                this.$refs.previewPdf.isMessageRecord = this.isMessageRecord ? true : false ;
+                let index = url.indexOf("?");
+                let newFileInOssPath = url;
+                if (index !== -1){
+                  newFileInOssPath =  url.substring(0, url.indexOf("?"))
+                }
+                let fileName = newFileInOssPath.substring(newFileInOssPath.lastIndexOf('.'))
+                if (fileName === '.doc' || fileName === '.docx' || fileName === '.txt'|| fileName === '.html'){
+                  this.$refs.previewPdf.fileName = fileName;
+                } else {
+                  this.$refs.previewPdf.fileName = '';
+                }
+                if(item.tagIds && item.tagIds.length != 0) {
+                  this.$refs.previewPdf.loading = false
+                  return
+                }
+                this.$nextTick(() =>{
+                  if(item.source == 'CREATED_BY_ONESELF' || type === 'HTML') {
+                    this.$refs.previewPdf.getBolb(item)
+                  }
+                  this.$refs.previewPdf.loadIframe(item)
+                })
+              }
+            })
+          }
+        },
+        fileType (url) {
+            const fileType = url.substring(url.lastIndexOf('.'));
+            if (fileType === '.mp4' || fileType === '.MP4' || fileType === '.MOV' || fileType === '.MOVC' || fileType === '.mov' || fileType === '.movc' || fileType === '.mav' || fileType === '.MAV' || fileType == '.mp3' || fileType == '.MP3' || fileType === '.wav') {
+                return 'VIDEO'
+            } else if (fileType === '.html') {
+                return 'HTML'
+            } else {
+                return 'OTHER'
+            }
+        },
+        srcContentTypeIMG (item) {
+            let url = item.url || '';
+            const type = url.substring(url.lastIndexOf('.'));
+            if (type === '.jpg' || type === '.jpeg' || type === '.png' || type === '.gif') {
+                this.getSrc(item)
+                return true
+            } else {
+                return false
+            }
+        },
+        getSrc (item) {
+            // let imgurl = ''
+            this.$http.post(
+                '/knowledge-api/temporary-certificate/or-origin?expired=30',
+                item.url,
+                {
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                }).then(res => {
+                    console.log(res, '=====');
+                    // imgurl = await res.bodyText
+                    this.$set(item, 'expiredUrl', res.data ? res.data : res.bodyText)
+                    // return res.data
+                })
+            // return imgurl
+        },
+        async getknowledgeBaseStructure(knowledgeId) {
+          let watermark = {
+            textWatermarkValue:'',
+            visitorWatermarkValue:''
+          }
+          await this.$http.get("/knowledge-api/internal/knowledgeBaseStructure/" + knowledgeId).then( async res =>{
+            if(res.data) {
+              watermark.textWatermarkValue = await res.data.textWatermarkValue
+              if(res.data.visitorWatermark) {
+                let userInfo = sessionStorage.getItem('userInfo') || localStorage.getItem('userInfo')
+                if(userInfo && userInfo !== 'null') {
+                  watermark.visitorWatermarkValue = JSON.parse(userInfo).realName
+                }
+              }
+            }
+          })
+          return watermark
+        },
+        lazyLoadKnowledegList () {
+            if (this.allKnowledgeList.length !== 0) {
+                let arr = this.allKnowledgeList.splice(0, 5)
+                if (arr.length < 5) {
+                    this.loadMoreFlag = false
+                    this.msg.content.list = [...this.msg.content.list, ...arr]
+                    return
+                }
+                if (this.allKnowledgeList.length == 0) {
+                    this.loadMoreFlag = false
+                }
+                this.msg.content.list = [...this.msg.content.list, ...arr]
+                return
+            }
+        },
+      previewToDialog(flag){
+          if (!flag){
+            this.$refs.previewPdf.previewKnowledgeId = ""
+          } else {
+            this.$refs.previewPdf.previewKnowledgeId = this.previewKnowledgeId
+          }
+          this.$emit('previewToDialog',flag,this.previewKnowledgeId,this.previewKnowledge)
+      },
+      clearKnowledgeId(){
+        this.previewKnowledgeId = "";
+      }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.answer-docknowledge {
+    min-width: 100px;
+    background: #ffffff;
+    .answer-docknowledge-header {
+        .tips {
+            width: 154px;
+            height: 22px;
+            background: #366aff;
+            border-radius: 5px;
+            text-align: center;
+            line-height: 22px;
+            color: #fff;
+            font-size: 12px;
+            margin-bottom: 7px;
+        }
+        .answer-text {
+            // font-size: 13px;
+            text-align: left;
+            line-height: 25px;
+            padding: 0px 0px 12px 0px;
+
+            .aci-view {
+                // font-size: 13px;
+                display: inline-block;
+                // margin-left: 5px;
+                color: #366aff;
+                cursor: pointer;
+            }
+        }
+        &.bgc {
+            padding: 10px;
+            background: #eef1ff;
+            border-radius: 10px;
+            margin-bottom: 16px;
+            .answer-text {
+                padding: 0;
+            }
+        }
+        .answer-kn-image-box {
+          margin-bottom: 10px;
+        }
+    }
+
+    .ad-list {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        /*        .ad-list-cell {
+            border-top: solid 1px #eeeeee;
+            padding: 10px 0 10px;
+
+            .alc-title {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                justify-content: space-between;
+                line-height: 16px;
+
+                .alc-box {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    // font-size: 12px;
+                    width: 100%;
+                    .alc-source-left {
+                        display: flex;
+                        align-items: center;
+                        .source-form {
+                            width: 34px;
+                            flex: none;
+                            color: #a9b3c6;
+                        }
+                    }
+                    .alc-content-text {
+                        width: 55px;
+                        flex: none;
+                        .aci-view {
+                            color: #366aff;
+                            cursor: pointer;
+                        }
+                    }
+                    .alc-title-from {
+                        line-height: 22px;
+                        word-break: break-all !important;
+                        text-align: left;
+                        flex: auto;
+                        display: flex;
+                        justify-content: flex-start;
+                    }
+                }
+                .alc-box-introduction {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 3;
+                    -webkit-box-orient: vertical;
+                    margin-top: 10px;
+                    color: #616161;
+                    // font-size: 12px;
+                    line-height: 24px;
+                    text-align: left;
+                    img {
+                        width: 50px;
+                        height: 50px;
+                        margin: 10px;
+                        cursor: pointer;
+                    }
+                }
+                .alc-box-introduction-previewImage {
+                    width: 100%;
+                  display: block;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp:3;
+                  -webkit-box-orient:vertical;
+                  margin-top: 10px;
+                  color: #616161;
+                  // font-size: 12px;
+                  line-height: 24px;
+                  text-align: left;
+                  img {
+                    max-width: 300px;
+                    width: 100%;
+                    max-height: 150px;
+                    margin: 10px;
+                    cursor: pointer;
+                  }
+                }
+                .alc-updateTime {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    font-size: 13px;
+                    width: 100%;
+                    margin-top: 10px;
+                    .upload-source {
+                        flex: none;
+                        height: 18px;
+                        line-height: 18px;
+                        background: #e9f9f8;
+                        border: 1px solid #aff2cd;
+                        border-radius: 2px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        padding: 0 8px;
+                        color: #00c2bb;
+                    }
+                    .time {
+                        color: #999999;
+                        margin-left: 10px;
+                    }
+                    .alc-content-text {
+                        color: #366aff;
+                        cursor: pointer;
+                    }
+                }
+                .alc-title-icon {
+                    margin: 0 2px;
+                    width: 18px;
+                    height: 18px;
+                    flex: none;
+                }
+
+                .alc-title-updateTime {
+                    text-align: right;
+                    color: #999999;
+                    // font-size: 13px;
+                }
+            }
+
+            .alc-content {
+                .alc-title-updateTime {
+                    margin-top: 6px;
+                    display: block;
+                    text-align: right;
+                    color: #999999;
+                    // font-size: 13px;
+                }
+
+                .alc-content-text {
+                    margin-bottom: 6px;
+                    width: 55px;
+                    flex: none;
+                    .aci-view {
+                        display: inline-block;
+                        margin-left: 30px;
+                        color: #366aff;
+                        cursor: pointer;
+                    }
+                }
+
+                .alc-content-info {
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-between;
+
+                    .alcc-box {
+                        display: flex;
+                        flex-wrap: wrap;
+                        color: #999999;
+
+                        .aci-owner {
+                            margin-right: 20px;
+                        }
+
+                        .aci-enterprise {
+                            margin-right: 20px;
+                        }
+                    }
+                }
+            }
+        }*/
+        .ad-list-cell {
+            .alc-source-name {
+                flex: none;
+                padding: 3px;
+                margin-right: 5px;
+                margin-bottom: 5px;
+                background: #f2f6ff;
+                border-radius: 5px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                color: #a9b3c6;
+                cursor: pointer;
+                img {
+                    vertical-align: middle;
+                    // width: 16px;
+                    // height: 16px;
+                    margin: 0 3px 0 5px;
+                }
+                .alc-title-from {
+                    margin-right: 5px;
+                    max-width: 240px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                i {
+                    font-size: 12px;
+                }
+            }
+        }
+
+        .ad-loadmore {
+            width: 100%;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            // background: #FFFFFF;
+            color: #366aff;
+            font-size: 14px;
+            margin-top: 8px;
+            cursor: pointer;
+        }
+    }
+}
+</style>