cnhis-design-vue 2.1.56 → 2.1.58

package/packages/multi-chat/chat/messageRecord.vue

@@ -1,324 +1,324 @@
-<template>
-  <div class="message-record">
-    <a-modal
-      :visible="visible"
-      :maskClosable="false"
-      :mask="false"
-      :footer="null"
-      width="800px"
-      :bodyStyle="{
-        boxSizing: 'content-box',
-        padding: '10px 10px 10px 24px'
-      }"
-      destroyOnClose
-      @cancel="handleCancel"
-    >
-      <div slot="title" style="display: flex; justify-content: center">
-        <img src="../img/default.png" width="24" style="margin-right: 6px" />
-        {{ clientName }}
-      </div>
-      <div class="message-list-wrapper" v-infinite-scroll="handleInfiniteOnLoad" infinite-scroll-immediate-check="immediate" :infinite-scroll-distance="10">
-        <ul class="message-list">
-          <li class="message-item" v-for="item in messageList" :key="item.id">
-            <img :src="getAvatar(item)" width="40" />
-            <div class="message-content">
-              <div class="name-time">
-                <span class="name">{{ getName(item) }}</span>
-                <span class="time">{{ formatDate(item.sendTime || item.createdTime, true) }}</span>
-              </div>
-              <div class="content" v-if="item.content.type === 0" v-html="$xss(item.content.content)"></div>
-              <MsgPicture v-if="item.content.type === 1" :image="item.content.content" style="width:160px;" @click="show(item.content.content)" />
-              <template v-else-if="item.content.type === 4">
-                <div v-if="isSystemMsg(item)" class="system-msg">
-                  <a-icon class="system-icon" theme="filled" type="exclamation-circle" />
-                  <div>
-                    <span v-html="getSystemMsgContent(item)"></span>
-                    <span class="system-btn" v-for="(btn, index) in getTemplateButton(item)" @click="handleTemplateButton(btn)" :key="index">{{ btn.title }}</span>
-                  </div>
-                </div>
-                <msg-describe v-else-if="isDescribeMsg(item)" :item="item" />
-                <MsgPrescription v-else :data="item" :isServer="true" @handleTemplateDetail="handleTemplateDetail" @handleTemplateButton="handleTemplateButton" />
-              </template>
-            </div>
-          </li>
-        </ul>
-        <div v-if="finished" class="immediate">{{ i18nText('1.9.391') }}~</div>
-        <a-spin v-if="loading" class="loading-icon" />
-      </div>
-    </a-modal>
-    <!-- 图片预览 -->
-    <viewer class="viewer" ref="viewer" :images="images" @inited="inited" :options="options" style="display: none">
-      <template slot-scope="scope">
-        <img v-for="src in scope.images" :src="src" :key="src" />
-      </template>
-    </viewer>
-  </div>
-</template>
-
-<script>
-import InfiniteScroll from 'vue-infinite-scroll';
-import viewerOptions from './mixins/viewerOptions';
-import MsgDescribe from '../components/msg-describe';
-import MsgPicture from '../components/msg-picture';
-import MsgPrescription from '../components/msg-prescription';
-import fetch from '@/utils/chatFetch';
-import vexutils from '@/utils/vexutils';
-import { Modal, Icon, Spin } from 'ant-design-vue';
-
-export default {
-  mixins: [viewerOptions],
-  inject: ['i18nText'],
-  components: {
-    AModal: Modal,
-    [Icon.name]: Icon,
-    [Spin.name]: Spin,
-    MsgPrescription,
-    MsgPicture,
-    MsgDescribe
-  },
-  data() {
-    return {
-      messageList: [],
-      immediate: false,
-      finished: false,
-      loading: false,
-      // 预览图片
-      images: []
-    };
-  },
-  props: ['clientName', 'serviceName', 'sessionId', 'fromId', 'clientId', 'assemblyId', 'userId', 'userInfo'],
-  computed: {
-    visible: {
-      get() {
-        return !!this.sessionId;
-      },
-      set() {
-        this.$emit('clearSessionId');
-      }
-    }
-  },
-  mounted() {},
-  methods: {
-    formatDate(date) {
-      return vexutils.formatDate(date, true);
-    },
-    handleCancel() {
-      this.$emit('clearSessionId');
-    },
-    getMessageRecord() {
-      this.loading = true;
-      let id = this.messageList[this.messageList.length - 1]?.id;
-      fetch
-        .get('/chat/service/getHistoryRecord', {
-          params: {
-            sessionId: this.sessionId,
-            id,
-            assemblyId: this.assemblyId,
-            orgId: this.userInfo?.sysParams?.orgId,
-            userId: this.userId,
-            mergeType: 1,
-            source: 1
-          }
-        })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            if (data.list.length < 20) {
-              this.finished = true;
-            }
-            let list = data.list.reverse();
-            this.messageList = [...this.messageList, ...list];
-            this.images = this.messageList
-              .filter(v => !v.recallFlag && v.content.type == 1)
-              ?.map(v => v.content?.content);
-            this.loading = false;
-          }
-        });
-    },
-    handleInfiniteOnLoad() {
-      this.getMessageRecord();
-    },
-    getTemplateTitle(item) {
-      let content = JSON.parse(item.content.content);
-      return content.title;
-    },
-    showArrow(item) {
-      let content;
-      if (vexutils.isJSON(item.content.content)) {
-        content = JSON.parse(item.content.content);
-      } else {
-        content = item.content.content;
-      }
-      let { address } = content.customerSetting || {};
-      if (!address) return false;
-      return true;
-    },
-    getTemplateTitleIcon(item) {
-      let content = JSON.parse(item.content.content);
-      return content.icon;
-    },
-    getTemplateContent(item) {
-      let content = JSON.parse(item.content.content);
-      let array = content.content.split('##');
-      array = array.map(item => `<div>${item}</div>`);
-      return array.join('');
-    },
-    handleTemplateDetail(item) {
-      let content = JSON.parse(item.content.content);
-      let { targetType, address, params } = content.serverSetting;
-      if (!address) return;
-      if (targetType === 'LINK_ADDRESS') {
-        let urlParams = [];
-        params.forEach(({ p_name, p_value }) => {
-          urlParams.push(`${p_name}=${p_value}`);
-        });
-        if (address.includes('?')) {
-          address += `&${urlParams.join('&')}`;
-        } else {
-          address += `?${urlParams.join('&')}`;
-        }
-        window.open(address);
-      }
-    },
-    getTemplateButton(item) {
-      let content = JSON.parse(item.content.content);
-      return content.serverSetting.toolbar_button;
-    },
-    handleTemplateButton(btn) {
-      let { targetType, address, params } = btn;
-      if (targetType === 'LINK_ADDRESS') {
-        let urlParams = [];
-        params.forEach(({ p_name, p_value }) => {
-          urlParams.push(`${p_name}=${p_value}`);
-        });
-        if (address.includes('?')) {
-          address += `&${urlParams.join('&')}`;
-        } else {
-          address += `?${urlParams.join('&')}`;
-        }
-        window.open(address);
-      }
-    },
-    getAvatar(item) {
-      if (item.content.source === 1) {
-        return require('../img/system_message.png');
-      }
-      if (item.fromId === this.clientId) {
-        return require('../img/default.png');
-      } else {
-        return require('../img/customer_staff.png');
-      }
-    },
-    getName(item) {
-      if (item.content.source === 1) {
-        return this.i18nText('1.9.471');
-      }
-      if (item.fromId === this.clientId) {
-        return this.clientName;
-      } else {
-        return item.fromName;
-      }
-    },
-    getSystemMsgContent(item) {
-      let content = JSON.parse(item.content.content);
-      let array = [];
-      try {
-        array = content.content.split('##');
-      } catch {
-        console.log(content, 'error');
-      }
-      return array.join('<br>');
-    },
-    isSystemMsg(item) {
-      let content = JSON.parse(item.content.content);
-      return content.styleId == '2';
-    },
-    isDescribeMsg(item) {
-      const content = JSON.parse(item.content.content);
-      return content.styleId == '3';
-    }
-  },
-  directives: {
-    InfiniteScroll
-  },
-  watch: {
-    sessionId: {
-      immediate: true,
-      handler(val) {
-        if (val) {
-          this.getMessageRecord();
-        }
-      }
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.message-list-wrapper {
-  height: 650px;
-  overflow: auto;
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-  .immediate {
-    text-align: center;
-    line-height: 40px;
-  }
-  .loading-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-  }
-}
-.message-item {
-  display: flex;
-  align-items: center;
-  min-height: 55px;
-  padding: 10px;
-  border-bottom: 1px solid #eeeff0;
-  > img {
-    align-self: flex-start;
-  }
-  .message-content {
-    align-self: stretch;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    margin-left: 8px;
-    overflow: hidden;
-    .name-time {
-      display: flex;
-      justify-content: space-between;
-      color: #969696;
-      margin-bottom: 10px;
-    }
-    .content {
-      word-wrap: break-word;
-    }
-  }
-}
-.msg-prescription {
-  border-top-left-radius: 0;
-}
-.system-msg {
-  text-align: left;
-  line-height: 20px;
-  word-wrap: break-word;
-  display: flex;
-  justify-content: center;
-  .system-icon {
-    font-size: 18px;
-    color: #ffc200;
-    vertical-align: middle;
-    margin-right: 10px;
-    margin-top: 1px;
-  }
-  .system-btn {
-    color: @primary-color;
-    margin-left: 8px;
-    cursor: pointer;
-    text-decoration: underline;
-  }
-}
-</style>
+<template>
+  <div class="message-record">
+    <a-modal
+      :visible="visible"
+      :maskClosable="false"
+      :mask="false"
+      :footer="null"
+      width="800px"
+      :bodyStyle="{
+        boxSizing: 'content-box',
+        padding: '10px 10px 10px 24px'
+      }"
+      destroyOnClose
+      @cancel="handleCancel"
+    >
+      <div slot="title" style="display: flex; justify-content: center">
+        <img src="../img/default.png" width="24" style="margin-right: 6px" />
+        {{ clientName }}
+      </div>
+      <div class="message-list-wrapper" v-infinite-scroll="handleInfiniteOnLoad" infinite-scroll-immediate-check="immediate" :infinite-scroll-distance="10">
+        <ul class="message-list">
+          <li class="message-item" v-for="item in messageList" :key="item.id">
+            <img :src="getAvatar(item)" width="40" />
+            <div class="message-content">
+              <div class="name-time">
+                <span class="name">{{ getName(item) }}</span>
+                <span class="time">{{ formatDate(item.sendTime || item.createdTime, true) }}</span>
+              </div>
+              <div class="content" v-if="item.content.type === 0" v-html="$xss(item.content.content)"></div>
+              <MsgPicture v-if="item.content.type === 1" :image="item.content.content" style="width:160px;" @click="show(item.content.content)" />
+              <template v-else-if="item.content.type === 4">
+                <div v-if="isSystemMsg(item)" class="system-msg">
+                  <a-icon class="system-icon" theme="filled" type="exclamation-circle" />
+                  <div>
+                    <span v-html="getSystemMsgContent(item)"></span>
+                    <span class="system-btn" v-for="(btn, index) in getTemplateButton(item)" @click="handleTemplateButton(btn)" :key="index">{{ btn.title }}</span>
+                  </div>
+                </div>
+                <msg-describe v-else-if="isDescribeMsg(item)" :item="item" />
+                <MsgPrescription v-else :data="item" :isServer="true" @handleTemplateDetail="handleTemplateDetail" @handleTemplateButton="handleTemplateButton" />
+              </template>
+            </div>
+          </li>
+        </ul>
+        <div v-if="finished" class="immediate">{{ i18nText('1.9.391') }}~</div>
+        <a-spin v-if="loading" class="loading-icon" />
+      </div>
+    </a-modal>
+    <!-- 图片预览 -->
+    <viewer class="viewer" ref="viewer" :images="images" @inited="inited" :options="options" style="display: none">
+      <template slot-scope="scope">
+        <img v-for="src in scope.images" :src="src" :key="src" />
+      </template>
+    </viewer>
+  </div>
+</template>
+
+<script>
+import InfiniteScroll from 'vue-infinite-scroll';
+import viewerOptions from './mixins/viewerOptions';
+import MsgDescribe from '../components/msg-describe';
+import MsgPicture from '../components/msg-picture';
+import MsgPrescription from '../components/msg-prescription';
+import fetch from '@/utils/chatFetch';
+import vexutils from '@/utils/vexutils';
+import { Modal, Icon, Spin } from 'ant-design-vue';
+
+export default {
+  mixins: [viewerOptions],
+  inject: ['i18nText'],
+  components: {
+    AModal: Modal,
+    [Icon.name]: Icon,
+    [Spin.name]: Spin,
+    MsgPrescription,
+    MsgPicture,
+    MsgDescribe
+  },
+  data() {
+    return {
+      messageList: [],
+      immediate: false,
+      finished: false,
+      loading: false,
+      // 预览图片
+      images: []
+    };
+  },
+  props: ['clientName', 'serviceName', 'sessionId', 'fromId', 'clientId', 'assemblyId', 'userId', 'userInfo'],
+  computed: {
+    visible: {
+      get() {
+        return !!this.sessionId;
+      },
+      set() {
+        this.$emit('clearSessionId');
+      }
+    }
+  },
+  mounted() {},
+  methods: {
+    formatDate(date) {
+      return vexutils.formatDate(date, true);
+    },
+    handleCancel() {
+      this.$emit('clearSessionId');
+    },
+    getMessageRecord() {
+      this.loading = true;
+      let id = this.messageList[this.messageList.length - 1]?.id;
+      fetch
+        .get('/chat/service/getHistoryRecord', {
+          params: {
+            sessionId: this.sessionId,
+            id,
+            assemblyId: this.assemblyId,
+            orgId: this.userInfo?.sysParams?.orgId,
+            userId: this.userId,
+            mergeType: 1,
+            source: 1
+          }
+        })
+        .then(({ data }) => {
+          if (data.result === 'SUCCESS') {
+            if (data.list.length < 20) {
+              this.finished = true;
+            }
+            let list = data.list.reverse();
+            this.messageList = [...this.messageList, ...list];
+            this.images = this.messageList
+              .filter(v => !v.recallFlag && v.content.type == 1)
+              ?.map(v => v.content?.content);
+            this.loading = false;
+          }
+        });
+    },
+    handleInfiniteOnLoad() {
+      this.getMessageRecord();
+    },
+    getTemplateTitle(item) {
+      let content = JSON.parse(item.content.content);
+      return content.title;
+    },
+    showArrow(item) {
+      let content;
+      if (vexutils.isJSON(item.content.content)) {
+        content = JSON.parse(item.content.content);
+      } else {
+        content = item.content.content;
+      }
+      let { address } = content.customerSetting || {};
+      if (!address) return false;
+      return true;
+    },
+    getTemplateTitleIcon(item) {
+      let content = JSON.parse(item.content.content);
+      return content.icon;
+    },
+    getTemplateContent(item) {
+      let content = JSON.parse(item.content.content);
+      let array = content.content.split('##');
+      array = array.map(item => `<div>${item}</div>`);
+      return array.join('');
+    },
+    handleTemplateDetail(item) {
+      let content = JSON.parse(item.content.content);
+      let { targetType, address, params } = content.serverSetting;
+      if (!address) return;
+      if (targetType === 'LINK_ADDRESS') {
+        let urlParams = [];
+        params.forEach(({ p_name, p_value }) => {
+          urlParams.push(`${p_name}=${p_value}`);
+        });
+        if (address.includes('?')) {
+          address += `&${urlParams.join('&')}`;
+        } else {
+          address += `?${urlParams.join('&')}`;
+        }
+        window.open(address);
+      }
+    },
+    getTemplateButton(item) {
+      let content = JSON.parse(item.content.content);
+      return content.serverSetting.toolbar_button;
+    },
+    handleTemplateButton(btn) {
+      let { targetType, address, params } = btn;
+      if (targetType === 'LINK_ADDRESS') {
+        let urlParams = [];
+        params.forEach(({ p_name, p_value }) => {
+          urlParams.push(`${p_name}=${p_value}`);
+        });
+        if (address.includes('?')) {
+          address += `&${urlParams.join('&')}`;
+        } else {
+          address += `?${urlParams.join('&')}`;
+        }
+        window.open(address);
+      }
+    },
+    getAvatar(item) {
+      if (item.content.source === 1) {
+        return require('../img/system_message.png');
+      }
+      if (item.fromId === this.clientId) {
+        return require('../img/default.png');
+      } else {
+        return require('../img/customer_staff.png');
+      }
+    },
+    getName(item) {
+      if (item.content.source === 1) {
+        return this.i18nText('1.9.471');
+      }
+      if (item.fromId === this.clientId) {
+        return this.clientName;
+      } else {
+        return item.fromName;
+      }
+    },
+    getSystemMsgContent(item) {
+      let content = JSON.parse(item.content.content);
+      let array = [];
+      try {
+        array = content.content.split('##');
+      } catch {
+        console.log(content, 'error');
+      }
+      return array.join('<br>');
+    },
+    isSystemMsg(item) {
+      let content = JSON.parse(item.content.content);
+      return content.styleId == '2';
+    },
+    isDescribeMsg(item) {
+      const content = JSON.parse(item.content.content);
+      return content.styleId == '3';
+    }
+  },
+  directives: {
+    InfiniteScroll
+  },
+  watch: {
+    sessionId: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.getMessageRecord();
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.message-list-wrapper {
+  height: 650px;
+  overflow: auto;
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+  .immediate {
+    text-align: center;
+    line-height: 40px;
+  }
+  .loading-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+  }
+}
+.message-item {
+  display: flex;
+  align-items: center;
+  min-height: 55px;
+  padding: 10px;
+  border-bottom: 1px solid #eeeff0;
+  > img {
+    align-self: flex-start;
+  }
+  .message-content {
+    align-self: stretch;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-left: 8px;
+    overflow: hidden;
+    .name-time {
+      display: flex;
+      justify-content: space-between;
+      color: #969696;
+      margin-bottom: 10px;
+    }
+    .content {
+      word-wrap: break-word;
+    }
+  }
+}
+.msg-prescription {
+  border-top-left-radius: 0;
+}
+.system-msg {
+  text-align: left;
+  line-height: 20px;
+  word-wrap: break-word;
+  display: flex;
+  justify-content: center;
+  .system-icon {
+    font-size: 18px;
+    color: #ffc200;
+    vertical-align: middle;
+    margin-right: 10px;
+    margin-top: 1px;
+  }
+  .system-btn {
+    color: @primary-color;
+    margin-left: 8px;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+}
+</style>