cloud-web-corejs 1.0.54-dev.9 → 1.0.54-dev.91

package/src/components/onlineTalk/index.vue

@@ -42,10 +42,21 @@
                     <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">
+                        <div class="tit"><i class="el-icon-chat-round"></i><b>猜你想问</b></div>
+                        <div class="o-cont">
+                        <li v-for="(answer,index) in item.answers" :key="index">
+                          <a href="javascript:void(0);" class="a-link"
+                             @click="answerCheckHandle(answer)">{{index+1}}、{{ answer.question }}</a>
+                        </li>
+                        </div>
+                      </ul>
+                    </template>
                   </div>
                 </div>
               </template>
@@ -60,6 +71,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>-->
             <el-input type="textarea" :rows="6" class="txt-textarea" v-model="talkUser.content" placeholder="请输入
 选择此处，可粘贴文件（Ctrl+V）"
                       :disabled="!talkUserId" ref="contentRef" @paste.native="pasteMessage"
@@ -117,6 +138,9 @@
                   <i class="iconfont icon-wendangshangchuan"></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>
@@ -191,6 +215,63 @@
       </el-button>
     </span>
     </el-dialog>
+
+    <el-dialog
+      title="历史记录"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      :close-on-click-modal="false"
+      v-if="showHistoryDialog"
+      :visible.sync="showHistoryDialog"
+      :modal="false"
+      custom-class="dialog-style list-dialog history-dialog"
+      width="586px"
+      v-el-drag-dialog
+      v-el-dialog-center
+    >
+      <div class="history-box">
+        <div class="h-form">
+          <div class="search-box">
+            <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="checkHistoryType(2)">文件</span>
+            <span @click="checkHistoryType(1)">图片</span>
+          </div>
+        </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">
+                  <div class="tit"><i class="el-icon-chat-round"></i><b>猜你想问</b></div>
+                  <div class="o-cont">
+                  <li v-for="(answer,index) in item.answers" :key="index">
+                    <a href="javascript:void(0);" class="a-link">{{index+1}}、{{ answer.question }}</a>
+                  </li>
+                  </div>
+                </ul>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -203,11 +284,213 @@ export default {
   components: {
     userDialog,
     privateProfileDialog: () => import('../../components/VabUpload/privateProfileDialog')
-  }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+  },
 };
 </script>
 <style scoped lang="scss">
 @import '~@/styles/variables.scss';
+.onlieTalk-search-list{
+  list-style: none;margin: -8px -4px 0;padding: 0;min-width: 360px;max-width: 90%;
+  .tit{color: #333;font-size: 14px;margin: 10px 0 3px;padding-left: 6px;
+    i{margin-right: 3px;}
+  }
+  .o-cont{background: #FFF;border-radius: 5px;margin-top: 7px;padding: 0 12px;}
+  li{
+    padding: 10px 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;
+    }
+  }
+}
+.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;
+        }
+      }
+    }
+
+    .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;
+      overflow: hidden;
+      .onlieTalk-search-list{
+        border: solid 1px #eee;padding:0 8px 6px;border-radius: 6px;margin: 10px 0 4px;background: #f7f7f7;overflow: hidden;
+      }
+      .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-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;
+          }
+        }
+      }
+    }
+  }
+}
+
 
 .ico-online {
   background: url(~@/resources/images/ico-service.png) no-repeat center 19px #FFF;
@@ -333,7 +616,8 @@ export default {
 
           .item {
             margin: 10px 0;
-            font-size:14px;
+            font-size: 14px;
+
             .name {
               color: rgba(102, 102, 102, 0.6);
               margin-bottom: 4px;
@@ -378,7 +662,8 @@ export default {
 
             &.right {
               text-align: right;
-              font-size:14px;
+              font-size: 14px;
+
               .cont {
                 background-color: #D8E8F9;
 
@@ -414,6 +699,36 @@ export default {
           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
+              }
+            }
+          }
+
           .btns {
             background-color: #FAFAFA;
             height: 36px;
@@ -429,7 +744,7 @@ export default {
 
           .txt-textarea {
             flex: 1;
-            padding-top: 6px;
+            padding-top: 20px;
 
             .el-textarea__inner {
               border: none;
@@ -584,6 +899,13 @@ export default {
             }
           }
 
+          .fl {
+            .button-sty .el-icon-time {
+              margin-bottom: 2px;
+              margin-right: 2px;
+            }
+          }
+
           .fr {
             .t {
               vertical-align: middle;