cloud-web-corejs 1.0.0

package/src/components/onlineTalk/index.vue

@@ -0,0 +1,744 @@
+<template>
+  <div id="containt">
+    <div class="ico-online" :class="{no:isExitsRead}" ref="talkRef" @mousedown="bindMove" @click="openDialog"
+         v-if="isCanUserTalk">
+      <span>在线沟通</span>
+    </div>
+    <el-dialog
+      :title="title"
+      v-if="dialogTableVisible"
+      :visible.sync="dialogTableVisible"
+      width="1050px"
+      custom-class="dialog-style onlineCommunicate"
+      :append-to-body="true"
+      v-el-drag-dialog
+      v-el-dialog-center
+      :fullscreen="isFullscreen"
+      @close="handleClose"
+      ref="talkDialog"
+      :modal="false"
+    >
+      <el-button class="isFullIcon" v-if="!isFullscreen" @click="isFullscreen = true">
+        <el-tooltip effect="dark" content="全屏" placement="top">
+          <i class="iconfont icon-quanping"></i>
+        </el-tooltip>
+
+      </el-button>
+      <el-button class="isFullIcon" v-else @click="isFullscreen = false">
+        <el-tooltip effect="dark" content="缩小" placement="top">
+          <i class="iconfont icon-suoxiao"></i>
+        </el-tooltip>
+      </el-button>
+      <div class="cont">
+        <div class="online-left">
+          <div class="chat-box" @scroll="handleScroll1" ref="chatBox">
+            <!--            <div class="txt"><span>上次聊到这里</span></div>-->
+            <template v-for="(record,index1) in records">
+              <div class="time" :key="'a'+index1">{{ record.time }}</div>
+              <template v-for="(item,index2) in record.datas">
+                <div class="item" :key="index1+'_'+index2" :class="item.sendUser == userInfo.id ? 'right' : 'left'">
+                  <div class="name">{{ item.sendUserName }}</div>
+                  <div class="cont" :class="{nobg:item.contentType == 1}">
+                    <template v-if="item.contentType == 0">
+                      {{ item.content }}
+                    </template>
+                    <template v-else>
+                      <baseUpload accept="file" multi="false" :file.sync="item.file" :edit="false"
+                                  :showProperties="false" :showSize="true" :createBy="false"></baseUpload>
+                    </template>
+                  </div>
+                </div>
+              </template>
+            </template>
+          </div>
+          <label id="labBtn" class="transverse">
+            <div class="icon"><i class="el-icon-more"></i><i class="el-icon-more"></i></div>
+          </label>
+          <div class="chat-oper">
+            <!-- <div class="btns">
+              <el-tooltip :enterable="false" effect="dark" content="发送文件" placement="top">
+                <i class="el-icon-folder-opened btn" @click="addFile" :disabled="!talkUserId"></i>
+              </el-tooltip>
+            </div> -->
+            <el-input type="textarea" :rows="6" class="txt-textarea" v-model="talkUser.content" placeholder="请输入
+选择此处，可粘贴文件（Ctrl+V）"
+                      :disabled="!talkUserId" ref="contentRef" @paste.native="pasteMessage"
+                      @keydown.ctrl.enter.native="handleEnterWithCtrl">
+            </el-input>
+            <div class="online-upload" v-if="hasFile">
+              <ul class="el-upload-list el-upload-list--picture">
+                <template v-for="(file,index) in files">
+                  <li class="el-upload-list__item is-success" :key="index" v-if="file.status!=='success'">
+                    <div>
+                      <img
+                        :src="getShowImage(file)"
+                        class="el-upload-list__item-thumbnail"
+                      />
+                      <div class="el-upload-list__item-name">
+                        <!-- <p class="input">
+                          <el-input size="mini" v-model="file.fileName" @change="changeFileName(file)"></el-input>
+                          <span>.{{ file.fileSuffix }}</span>
+                        </p> -->
+                        <div class="txt-box">
+                          <div class="tb-left"></div>
+                          <div class="tb-mid name">
+                            <div class="txt">
+                              <span>{{ file.fileName }}.{{ file.fileSuffix }}</span>
+                              <span><i class="el-icon-edit" @click="openFileNameDialog(file,index)"></i></span>
+                            </div>
+                          </div>
+                          <div class="format"><i class="el-icon-edit" @click="openFileNameDialog(file,index)"></i></div>
+                        </div>
+                        <p>{{ formatFileSize(file.size) }} </p>
+                        <p v-if="file.status=='fail'" class="f-red">{{ file.failMsg }}</p>
+
+                      </div>
+                      <div class="el-upload-list__item-status-label error" v-if="file.status == 'fail'"><i
+                        class="el-icon-upload-success iconfont icon-gantanhao"></i></div>
+                      <div class="el-icon-close" @click="deleteFile(index)">
+                        <i class="el-tooltip iconfont iconshanchu"></i>
+                      </div>
+                      <el-progress :percentage="file.percentage"
+                                   v-if="file.status=='uploading' || file.status=='success'"></el-progress>
+                    </div>
+                  </li>
+                </template>
+              </ul>
+            </div>
+            <div class="clearfix">
+              <div class="fl" v-if="!!talkUserId">
+                <el-button type="warning" class="button-sty" slot="trigger" @click="$refs.inputFile.click()">
+                  <input type="file" multiple @change="changeFile" ref="inputFile" style="display:none;"/>
+                  <i class="el-icon-plus"></i>
+                  从本地选择
+                </el-button>
+                <el-button type="success" class="button-sty" @click="showPrivateProfileDialog=true"
+                           v-if="showPrivateUploadBtn">
+                  <i class="iconfont icon-wendangshangchuan"></i>
+                  从个人文档工作区选择
+                </el-button>
+              </div>
+              <div class="fr">
+                <span class="t">Ctrl + Enter </span>
+                <el-button type="primary" class="button-sty fr" @click="sendMsg" :disabled="!talkUserId">发送
+                </el-button>
+              </div>
+
+            </div>
+
+          </div>
+        </div>
+        <div class="online-user">
+          <div class="u-oper">
+            <el-input class="search-input" max="200" v-model="keyword" clearable placeholder="搜索"></el-input>
+          </div>
+          <div class="u-oper" style="padding: 2px 18px 0;">
+            <el-checkbox class="checkbox-box" v-model="unread">未读</el-checkbox>
+            <el-button @click="openUserDialog" class="button-sty" type="primary">
+              <i class="iconfont icon-tianjiarenyuan"></i>选择人员
+            </el-button>
+          </div>
+          <div class="u-list" ref="userBox">
+            <template v-for="(talkUser,index3) in talkUserDatas">
+              <div class="item" :key="'c'+index3" :class="getUserItemClass(talkUser)" @click="checkUser(talkUser)">
+                <p class="name">
+                  <b>{{ talkUser.nickName }}</b>
+                  <span> ({{ talkUser.mobile }})</span>
+                  <i class="iconfont icon-weidu" v-show="talkUser.readed==1"></i>
+                </p>
+                <i class="el-icon-error close" @click.stop="deleteTalkUser(talkUser,index3)"></i>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+    <userDialog v-if="showUserDialog" :visiable.sync="showUserDialog" @confirm="confirmInserUser" multi="false"
+                :param="{roleCodes:roleCodes}"/>
+    <privateProfileDialog v-if="showPrivateProfileDialog" :visiable.sync="showPrivateProfileDialog"
+                          @confirm="confirmPrivateProfileDialog"></privateProfileDialog>
+    <el-dialog
+      title="文件名修改"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      :close-on-click-modal="false"
+      v-if="showFileNameDialog"
+      :visible.sync="showFileNameDialog"
+      :modal="false"
+      custom-class="dialog-style list-dialog dialog-checkbox pd_8"
+      width="400px"
+      v-el-drag-dialog
+      v-el-dialog-center
+    >
+      <div class="cont">
+        <el-form ref="editForm" label-width="110px" class="adSearchForm" style="width: 362px;height: auto;">
+          <el-form-item label="文件名称">
+            <el-input v-model="editFileName" clearable class="all-width"/>
+          </el-form-item>
+          <el-form-item label="文件格式">
+            {{ editFileSuffix }}
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+      <el-button type="primary" plain class="button-sty" @click="showFileNameDialog=false">
+        <i class="el-icon-close el-icon"></i>
+        {{ $t2('取 消', 'system.button.cancel2') }}
+      </el-button>
+      <el-button type="primary" @click="confirmFileNameDialog" class="button-sty">
+        <i class="el-icon-check el-icon"></i>
+        {{ $t2('确 定', 'system.button.confirm2') }}
+      </el-button>
+    </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {mixins} from "./mixins";
+import userDialog from '../../views/user/user/dialog.vue';
+
+export default {
+  mixins: [mixins],
+  components: {
+    userDialog,
+    privateProfileDialog: () => import('../../components/VabUpload/privateProfileDialog')
+  }
+};
+</script>
+<style scoped lang="scss">
+@import '~@/styles/variables.scss';
+
+.ico-online {
+  background: url(~@/resources/images/ico-service.png) no-repeat center 19px #FFF;
+  background-size: 40px;
+  position: fixed;
+  right: 28px;
+  bottom: 28px;
+  padding: 63px 10px 10px;
+  border-radius: 50%;
+  box-shadow: 0 0 24px rgb(34 80 118 / 24%);
+  width: 100px;
+  text-align: center;
+  font-size: 12px;
+  height: 100px;
+  cursor: pointer;
+  color: #225076;
+  z-index: 9999;
+
+  &.no:after {
+    content: "新消息";
+    position: absolute;
+    right: -5px;
+    top: 12px;
+    height: 22px;
+    background-color: #ff5c5c;
+    border-radius: 16px;
+    border: solid 3px #FFF;
+    color: #FFF;
+    line-height: 16px;
+    font-size: 12px;
+    padding: 0 5px;
+  }
+}
+
+::v-deep .dialog-style.onlineCommunicate {
+  margin-top: 28.5px !important;
+
+  &.is-fullscreen {
+    top: 0 !important;
+    left: 0 !important;
+    margin-top: 0 !important;
+
+    .el-dialog__body .cont {
+      height: calc(100vh - 42px);
+    }
+  }
+
+  .el-dialog__header {
+    background: #FAFAFA;
+    border-bottom: solid 1px #E9E9E9;
+    border-radius: 8px 8px 0 0;
+
+    .el-dialog__title {
+      &:before {
+        content: "\e72e";
+      }
+    }
+  }
+
+  .el-dialog__body {
+    padding: 0;
+
+    .isFullIcon {
+      position: absolute;
+      top: 0;
+      right: 69px;
+      border: none !important;
+      background: none !important;
+      box-shadow: none !important;
+      color: #464646d6;
+      height: 42px;
+      line-height: 42px;
+      padding: 0;
+    }
+
+    .cont {
+      display: flex;
+      height: 620px;
+      overflow: hidden;
+
+      .online-left {
+        flex: 1;
+
+        #labBtn.transverse {
+          margin: 0;
+          width: 100%;
+          border-bottom: solid 1px #e9e9e9;
+          background: #f5f5f5;
+          height: 10px;
+          margin-bottom: -11px;
+        }
+
+        .chat-box {
+          height: calc(100% - 257px);
+          overflow: auto;
+          padding: 4px 20px 0;
+          font-size: 12px;
+
+          .txt {
+            text-align: center;
+            color: #808080;
+            padding: 10px 0;
+
+            &:before, &:after {
+              content: "";
+              width: 70px;
+              height: 1px;
+              vertical-align: middle;
+              background-color: #f7f7f7;
+              display: inline-block
+            }
+
+            span {
+              padding: 0 12px
+            }
+          }
+
+          .time {
+            text-align: center;
+            color: #808080;
+            margin-top: 15px;
+          }
+
+          .item {
+            margin: 10px 0;
+            font-size:14px;
+            .name {
+              color: rgba(102, 102, 102, 0.6);
+              margin-bottom: 4px;
+            }
+
+            .cont {
+              display: inline-block;
+              border-radius: 6px;
+              padding: 8px 12px;
+              position: relative;
+              height: auto;
+              overflow: visible;
+              min-height: 32.8px;
+
+              .upload-box {
+                margin: -5px 0;
+                text-align: left;
+                border-top: 0;
+              }
+
+              &:after {
+                content: "";
+                position: absolute;
+                width: 13px;
+                top: 10px;
+                height: 12px;
+              }
+
+              &.nobg {
+                background: #FFF !important;
+                padding: 0;
+
+                &:after {
+                  display: none;
+                }
+
+                .el-upload-list__item {
+                  margin-right: 0;
+                }
+              }
+            }
+
+            &.right {
+              text-align: right;
+              font-size:14px;
+              .cont {
+                background-color: #D8E8F9;
+
+                &:after {
+                  right: -10px;
+                  background: radial-gradient(180% 182% at right -71% top -72%, transparent 99%, #d8e8f9);
+                  transform: rotate(67deg)
+                }
+              }
+            }
+
+            &.left {
+              text-align: left;
+
+              .cont {
+                background-color: #F2F2F2;
+
+                &:after {
+                  left: -10px;
+                  background: radial-gradient(180% 182% at left -71% top -72%, transparent 99%, #F2F2F2);
+                  transform: rotate(282deg)
+                }
+              }
+            }
+          }
+        }
+
+        .chat-oper {
+          border-top: solid 1px #e9e9e9;
+          position: relative;
+          height: 257px;
+          padding: 10px 12px;
+          display: flex;
+          flex-direction: column;
+
+          .btns {
+            background-color: #FAFAFA;
+            height: 36px;
+            line-height: 36px;
+
+            .btn {
+              font-size: 18px;
+              color: #B9B9B9;
+              outline: none;
+              box-shadow: none;
+            }
+          }
+
+          .txt-textarea {
+            flex: 1;
+            padding-top: 6px;
+
+            .el-textarea__inner {
+              border: none;
+              height: 100%;
+              border-radius: 0 0 0 8px;
+              background: #FFF;
+              resize: none;
+              padding: 0;
+            }
+          }
+
+          .online-upload {
+            border-top: dashed 1px #E9E9E9;
+            overflow-x: auto;
+            overflow-y: hidden;
+            width: 778px;
+
+            .el-upload-list {
+              white-space: nowrap;
+
+              .el-upload-list__item {
+                width: 238px;
+                height: 74px;
+                padding-left: 60px;
+                display: inline-block;
+
+                .el-upload-list__item-thumbnail {
+                  width: 72px;
+                  height: 72px;
+                  padding: 6px;
+                  margin-left: -60px;
+                  border-radius: 6px;
+                }
+
+                .txt-box {
+                  width: 150px;
+                  height: 33px;
+                  overflow: hidden;
+                  margin-top: 5px;
+                  margin-left: -5px;
+                  margin-bottom: 2px;
+
+                  .tb-left {
+                    float: left;
+                    height: 36px;
+                    width: 1px;
+                  }
+
+                  .tb-mid {
+                    float: right;
+                    word-break: break-all;
+                    width: 145px;
+
+                    .txt {
+                      font-size: 12px;
+                      line-height: 1.2;
+                      margin-top: 3px;
+                      display: table-cell;
+                      width: 135px;
+                      height: 36px;
+                      white-space: break-spaces;
+
+                      .name {
+                        word-break: break-all;
+                      }
+
+                      span {
+                        vertical-align: middle;
+                        display: inline;
+                      }
+
+                      i {
+                        position: inherit;
+                        top: inherit;
+                        left: inherit;
+                        display: inline-block;
+                        font-size: 12px;
+                        line-height: 20px;
+                        height: 20px;
+                        color: #2a6494;
+                        margin-left: 6px;
+                      }
+                    }
+                  }
+
+                  .format {
+                    float: right;
+                    position: relative;
+                    background-color: #FFF;
+                    font-size: 12px;
+                    padding: 0 2px 0 6px;
+                    line-height: 1;
+                    width: 22px;
+                    height: 18px;
+                    top: -20px;
+                    left: 136px;
+                    margin-left: -17px;
+                    text-align: right;
+
+                    i {
+                      display: block;
+                      font-size: 12px;
+                      color: $baseColor;
+                      position: inherit;
+                    }
+                  }
+                }
+
+                .el-input {
+                  width: 107px !important;
+
+                  .el-input__inner {
+                    height: 24px !important;
+                    line-height: 24px;
+                  }
+
+                  + span {
+                    margin-left: 5px;
+                    vertical-align: middle;
+                  }
+                }
+
+                p {
+                  line-height: 1.2;
+
+                  &.input {
+                    margin-top: 5px;
+                    margin-bottom: 5px;
+                  }
+
+                  .f-red {
+                    color: #ff2626
+                  }
+
+                }
+
+                .el-progress {
+                  position: absolute;
+                  left: -3px;
+                  bottom: -3px;
+                  right: -3px;
+                  margin: 0;
+                  top: inherit;
+                  z-index: 2;
+                  width: auto;
+
+                  .el-progress__text {
+                    display: none
+                  }
+                }
+              }
+            }
+          }
+
+          .fr {
+            .t {
+              vertical-align: middle;
+              line-height: 28px;
+              color: #808080
+            }
+
+            .button-sty {
+              margin-left: 15px;
+            }
+          }
+        }
+      }
+
+      .online-user {
+        width: 248px;
+        border-left: solid 1px #e9e9e9;
+
+        .u-oper {
+          padding: 16px 18px 6px;
+          display: flex;
+
+          .search-input {
+            flex: 1;
+            height: 28px;
+
+            .el-input__inner {
+              padding: 0 8px 0 26px;
+            }
+
+            &:before {
+              content: "\e778";
+              font-family: element-icons !important;
+              position: absolute;
+              height: 28px;
+              line-height: 28px;
+              left: 8px;
+              color: #C0C4CC;
+              font-size: 13px;
+            }
+          }
+
+          .button-sty {
+            min-width: auto;
+            flex: 1;
+
+            .iconfont {
+              font-size: 12px;
+              margin-right: 6px;
+            }
+
+          }
+
+          .checkbox-box {
+            margin-bottom: 0;
+            margin-right: 46px;
+            line-height: 28px;
+          }
+        }
+
+        .u-list {
+          height: calc(100% - 80px);
+          overflow: auto;
+          padding: 10px 18px 0;
+
+          .item {
+            border: solid 1px #EEEEEE;
+            border-radius: 12px;
+            padding: 10px 36px 10px 20px;
+            margin-bottom: 8px;
+            position: relative;
+
+            p {
+              margin-bottom: 0;
+              color: #C0C4CC;
+              font-size: 12px;
+
+              &.name {
+                line-height: 18px;
+                position: relative;
+
+                &:before {
+                  content: "";
+                  width: 5px;
+                  height: 5px;
+                  border-radius: 50%;
+                  position: absolute;
+                  left: -10px;
+                  top: 50%;
+                  margin-top: -2.5px;
+                  background: #C0C4CC;
+                }
+
+                b {
+                  color: #333;
+                  vertical-align: middle;
+                  font-weight: 400;
+                  margin-right: 4px;
+                }
+
+                span {
+                  vertical-align: middle;
+                  display: inline-block;
+                }
+
+                i {
+                  vertical-align: middle;
+                  position: absolute;
+                  right: -29px;
+                  top: 50%;
+                  margin-top: -9px;
+                  font-size: 28px;
+                }
+              }
+            }
+
+            .close {
+              position: absolute;
+              right: -7px;
+              top: -7px;
+              background: #FFF;
+              border-radius: 50%;
+              color: #999999;
+              opacity: 1;
+              font-size: 18px;
+              display: none;
+            }
+
+            &:hover .close {
+              display: block;
+            }
+
+            &.on {
+              background-color: transparentize($baseColor, 0.92);
+              border-color: $baseColor;
+
+              p.name:before {
+                background-color: $baseColor;
+              }
+            }
+
+            &.noRead {
+              p.name:before {
+                background-color: $red;
+              }
+
+              .icon-weidu {
+                color: $red;
+                display: block;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>