cnhis-design-vue 2.1.12 → 2.1.15

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

@@ -1,361 +1,439 @@
-<template>
-  <div class="quick-reply">
-    <div class="quick-search">
-      <a-input v-model="value" allowClear @change="handleSearch" />
-    </div>
-    <a-tabs v-model="quickReplyKey">
-      <a-tab-pane v-for="data in validQuick" :key="data.category">
-        <template slot="tab">{{ data.category }}</template>
-        <ul class="quick-reply-wrapper" ref="quick-reply" v-if="data.list.length > 0">
-          <template v-for="(item, index) in data.list">
-            <li class="quick-reply-item" :class="{ 'quick-input': item.edit }" :key="index" v-if="item.content !== undefined">
-              <div class="text" v-if="!item.edit" @click="setFooterMessage(item.content)">
-                {{ item.content }}
-                <span class="operate">
-                  <svg-icon icon-class="fasong" @click.stop="handleQuickEdit(item, 'send')" style="font-size: 16px;"></svg-icon>
-                  <a-icon v-if="quickReplyKey === `个人`" type="edit" @click.stop="handleQuickEdit(item, 'show')" />
-                  <a-icon v-if="quickReplyKey === `个人`" type="delete" @click.stop="handleQuickDelete(item)" />
-                </span>
-              </div>
-              <div class="input" v-else>
-                <a-textarea :placeholder="i18nText('1.9.40') + '...'" autosize :maxLength="200" @change="handleChange" v-model="item.editValue" />
-                <div class="confirm">
-                  <span style="color: #969696;" @click.stop="handleQuickEdit(item, 'cancel')">{{ i18nText('1.1.1.1.4') }}</span>
-                  |
-                  <span style="color: #5585F5;" @click.stop="handleQuickEdit(item, 'ok')">{{ i18nText('1.1.1.1.3') }}</span>
-                </div>
-              </div>
-            </li>
-          </template>
-          <div style="text-align: center;margin-top: 10px;"> {{ i18nText('3.5.13') }}~ </div>
-        </ul>
-        <div v-else class="quick-reply-no-wrapper">
-          <img src="../img/no-data.png" />
-          <span style="display: inline-block;margin-top: 20px;font-size: 20px;">{{ i18nText('1.1.6.11') }}</span>
-        </div>
-      </a-tab-pane>
-    </a-tabs>
-
-    <div class="quick-add" @click.stop="handleQuickAdd" v-if="isOrgAdmin || quickReplyKey === `个人`">
-      <a-icon type="plus" />
-      {{ i18nText('1.9.355') }}
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters, mapMutations, mapActions } from '../store/helper';
-import fetch, { qs } from '@/utils/chatFetch';
-import vexutils from '@/utils/vexutils';
-import { Icon, Input, Tabs } from 'ant-design-vue';
-import SvgIcon from '@/component/svg/index.vue';
-
-export default {
-  inject: ['store', 'i18nText'],
-  components: {
-    [Tabs.name]: Tabs,
-    [Tabs.TabPane.name]: Tabs.TabPane,
-    [Input.name]: Input,
-    [Icon.name]: Icon,
-    [Input.TextArea.name]: Input.TextArea,
-    SvgIcon
-  },
-  data() {
-    return {
-      value: '',
-      keyword: '',
-      quickReplyKey: '个人'
-    };
-  },
-  props: {
-    quickShow: {
-      type: Boolean
-    },
-    quickData: {
-      type: Array,
-      default: () => []
-    }
-  },
-  computed: {
-    ...mapGetters(['userInfo']),
-    ...mapGetters(['assemblySetting']),
-    isOrgAdmin() {
-      return this.userInfo?.sysParams?.userType === 'orgAdmin';
-    },
-    validQuick() {
-      const keyword = this.keyword.toUpperCase();
-      return keyword
-        ? this.quickData.map(item => {
-            return {
-              ...item,
-              list: item.list.filter(v => {
-                const content = v.content || '';
-                return v.edit || content.toUpperCase().includes(keyword);
-              })
-            };
-          })
-        : this.quickData;
-    }
-  },
-  created() {
-    this.handleSearch = vexutils.debounce(this.handleSearch, 300);
-  },
-  watch: {
-    quickShow(v) {
-      if (!v) {
-        let edit;
-        this.quickData.find(item => {
-          edit = item.list ? item.list.find(child => child.edit) : edit;
-          return !!edit;
-        });
-        edit && this.handleQuickEdit(edit, 'cancel'); // 清除修改未保存的数据
-      }
-    }
-  },
-  methods: {
-    ...mapMutations(['setFooterMessage']),
-    ...mapActions(['sendMessage', 'sendRobotMessage']),
-    handleQuickEdit(item, type) {
-      switch (type) {
-        case 'send':
-          var body = {
-            content: `<div>${item.content}</div>`,
-            type: 0
-          };
-          if (this.curChatType === 'robot') {
-            this.sendRobotMessage(item.content);
-          } else {
-            this.sendMessage(body);
-          }
-          this.$emit('quickShow:update', false);
-          break;
-        case 'show':
-          this.$set(item, 'edit', true);
-          this.$set(item, 'editValue', item.content);
-          break;
-        case 'cancel':
-          this.$set(item, 'edit', false);
-          this.$delete(item, 'editValue');
-          if (!item.id) {
-            let quickData = this.quickData.find(item => item.category == this.quickReplyKey);
-            let length = quickData.list.length;
-            quickData.list.splice(length - 1, 1);
-          }
-          break;
-        case 'ok':
-          if (item.editValue.replace(/\s+/g, '').length === 0) {
-            this.$message.warning(`${this.i18nText('1.2.1.11.60')}!`);
-            return;
-          }
-          fetch
-            .post(
-              `/fastReply/${this.quickReplyKey !== '个人' ? 'savePublicChat' : 'saveChat'}`,
-              qs.stringify({
-                content: item.editValue,
-                id: item.id,
-                category: this.quickReplyKey !== '个人' ? 'CHAT_ASSEMBLY ' : undefined
-              })
-            )
-            .then(({ data }) => {
-              if (data.result === 'SUCCESS') {
-                const content = item.editValue;
-                let quick = Object.assign({}, data.obj, {
-                  content: content,
-                  edit: false
-                });
-                if (!item.id) {
-                  let quickData = this.quickData.find(item => item.category == this.quickReplyKey);
-                  quickData.list.splice(quickData.list.length - 1, 1, quick);
-                  this.$message.success('添加成功');
-                } else {
-                  item.content = content;
-                  item.edit = false;
-                  this.$delete(item, 'editValue');
-                  this.$message.success('编辑成功');
-                }
-              } else {
-                this.$message.warning(data.resultMsg || '删除失败');
-              }
-            });
-
-          break;
-      }
-    },
-    handleQuickAdd() {
-      let quickData = this.quickData.find(item => item.category == this.quickReplyKey);
-      let length = quickData.list.length;
-      if (length > 0 && !quickData.list[length - 1].id) {
-        this.$message.warning(`${this.i18nText('1.9.361')}!`);
-        return;
-      }
-      quickData.list = quickData.list.concat({
-        editValue: '',
-        content: '',
-        edit: true
-      });
-      this.$nextTick(() => {
-        this.handleScrollTo();
-      });
-    },
-    handleQuickDelete(item) {
-      fetch.post('/fastReply/remove', qs.stringify({ id: item.id })).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          let quickData = this.quickData.find(item => item.category == this.quickReplyKey);
-          let index = quickData.list.findIndex(q => q.id === item.id);
-          quickData.list.splice(index, 1);
-          this.$message.success('删除成功');
-        } else {
-          this.$message.warning(data.resultMsg || '删除失败');
-        }
-      });
-    },
-    handleScrollTo() {
-      let target = this.$refs['quick-reply'];
-      for (let i = 0; i < target.length; i++) {
-        this.$nextTick().then(() => {
-          let top = target[i].scrollHeight;
-          target[i].scrollTo({
-            left: 0,
-            top,
-            behavior: 'instant'
-          });
-        });
-      }
-    },
-    handleChange(e) {
-      if (e.target.value.length >= 200) {
-        this.$message.warning('最多支持200个字符');
-      }
-    },
-    handleSearch() {
-      this.keyword = this.value;
-    }
-  }
-};
-</script>
-
-<style lang="less">
-.quick-reply {
-  width: 600px;
-  height: 400px;
-
-  .ant-popover-inner-content {
-    height: 100%;
-  }
-  .quick-reply {
-    // padding: 10px 0;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-  }
-  .ant-popover-content {
-    height: 100%;
-  }
-  .ant-popover-inner {
-    height: 100%;
-    > div {
-      height: 100%;
-    }
-  }
-  .ant-tabs {
-    flex: 1;
-  }
-  .ant-tabs-content {
-    height: calc(100% - 44px);
-  }
-  .ant-tabs-tabpane,
-  .quick-reply-wrapper {
-    height: 100%;
-  }
-  .ant-input {
-    min-height: 40px;
-    box-sizing: border-box;
-    resize: none;
-    padding-bottom: 34px;
-    background-color: #f5f7fc;
-    border: none;
-    outline: none;
-    // border-bottom: 1px solid #efefef;
-  }
-  .quick-reply-wrapper {
-    height: 100%;
-    overflow: auto;
-    &::-webkit-scrollbar {
-      width: 5px;
-      background-color: #f5f5f5;
-    }
-  }
-  .quick-reply-no-wrapper {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-  .quick-reply-item {
-    padding: 0 17px;
-    font-size: 14px;
-    line-height: 24px;
-    word-wrap: break-word;
-    word-break: normal;
-    cursor: pointer;
-    .text {
-      display: inline-block;
-      width: 100%;
-      padding: 5px 0;
-      border-bottom: 1px solid #efefef;
-      &:hover {
-        border: none;
-      }
-      .operate {
-        display: none;
-        float: right;
-        > i {
-          margin-left: 10px;
-        }
-      }
-    }
-    .input {
-      position: relative;
-      margin-bottom: 6px;
-      .confirm {
-        position: absolute;
-        right: 10px;
-        bottom: 7px;
-        font-size: 14px;
-      }
-    }
-    &:not(.quick-input):hover {
-      background-color: #5585f5 !important;
-      color: #fff !important;
-      .operate {
-        display: block;
-      }
-    }
-  }
-  .quick-add {
-    line-height: 40px;
-    padding: 0 17px;
-    color: #5585f5;
-    cursor: pointer;
-  }
-
-  .quick-search {
-    .ant-input {
-      height: 40px;
-      line-height: 20px;
-      background-color: #fff;
-      padding: 10px 12px;
-      border: 1px solid #d9d9d9;
-    }
-  }
-  .input {
-    padding-top: 8px;
-    .ant-input {
-      background-color: #fbfbfb;
-      border: 1px solid #d5d5d5;
-    }
-  }
-}
-</style>
+<template>
+  <div class="quick-reply">
+    <div class="quick-search">
+      <a-input v-model="value" allowClear @change="handleSearch" />
+    </div>
+    <a-tabs v-model="quickReplyKey">
+      <a-tab-pane v-for="data in validQuick" :key="data.category">
+        <template slot="tab">{{ data.category }}</template>
+        <ul class="quick-reply-wrapper" ref="quick-reply" v-if="data.list.length > 0">
+          <template v-for="(item, index) in data.list">
+            <li
+              class="quick-reply-item"
+              :class="{ 'quick-input': item.edit }"
+              :key="index"
+              v-if="item.content !== undefined"
+            >
+              <div class="text" v-if="!item.edit" @click="setFooterMessage(item.content)">
+                {{ item.content }}
+                <span class="operate">
+                  <svg-icon
+                    v-if="quickReplyKey === `个人`"
+                    icon-class="a-xitongtubiaoliaotianzhiding"
+                    @click.stop="handleQuickEdit(item, 'top', data.list, index, k)"
+                    style="font-size: 16px;"
+                    class="quick-replay-to-top"
+                  ></svg-icon>
+                  <svg-icon
+                    icon-class="fasong"
+                    @click.stop="handleQuickEdit(item, 'send')"
+                    style="font-size: 16px;"
+                  ></svg-icon>
+                  <a-icon
+                    v-if="quickReplyKey === `个人`"
+                    type="edit"
+                    @click.stop="handleQuickEdit(item, 'show')"
+                  />
+                  <a-icon
+                    v-if="quickReplyKey === `个人`"
+                    type="delete"
+                    @click.stop="handleQuickDelete(item)"
+                  />
+                </span>
+              </div>
+              <div class="input" v-else>
+                <a-textarea
+                  :placeholder="i18nText('1.9.40') + '...'"
+                  autoSize
+                  :maxLength="200"
+                  @change="handleChange"
+                  v-model="item.editValue"
+                />
+                <div class="confirm">
+                  <span
+                    style="color: #969696;"
+                    @click.stop="handleQuickEdit(item, 'cancel')"
+                  >{{ i18nText('1.1.1.1.4') }}</span>
+                  |
+                  <span
+                    style="color: #5585F5;"
+                    @click.stop="handleQuickEdit(item, 'ok')"
+                  >{{ i18nText('1.1.1.1.3') }}</span>
+                </div>
+              </div>
+            </li>
+          </template>
+          <div style="text-align: center;margin-top: 10px;">{{ i18nText('3.5.13') }}~</div>
+        </ul>
+        <div v-else class="quick-reply-no-wrapper">
+          <img src="../img/no-data.png" />
+          <span
+            style="display: inline-block;margin-top: 20px;font-size: 20px;"
+          >{{ i18nText('1.1.6.11') }}</span>
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+
+    <div class="quick-add" @click.stop="handleQuickAdd" v-if="isOrgAdmin || quickReplyKey === `个人`">
+      <a-icon type="plus" />
+      {{ i18nText('1.9.355') }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations, mapActions } from '../store/helper';
+import fetch, { qs } from '@/utils/chatFetch';
+import vexutils from '@/utils/vexutils';
+import { Icon, Input, Tabs } from 'ant-design-vue';
+import SvgIcon from '@/component/svg/index.vue';
+
+export default {
+  inject: ['store', 'i18nText'],
+  components: {
+    [Tabs.name]: Tabs,
+    [Tabs.TabPane.name]: Tabs.TabPane,
+    [Input.name]: Input,
+    [Icon.name]: Icon,
+    [Input.TextArea.name]: Input.TextArea,
+    SvgIcon
+  },
+  data() {
+    return {
+      value: '',
+      keyword: '',
+      quickReplyKey: '个人'
+    };
+  },
+  props: {
+    quickShow: {
+      type: Boolean
+    },
+    quickData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    ...mapGetters(['userInfo']),
+    ...mapGetters(['assemblySetting']),
+    isOrgAdmin() {
+      return this.userInfo?.sysParams?.userType === 'orgAdmin';
+    },
+    validQuick() {
+      const keyword = this.keyword.toUpperCase();
+      return keyword
+        ? this.quickData.map(item => {
+            return {
+              ...item,
+              list: item.list.filter(v => {
+                const content = v.content || '';
+                return v.edit || content.toUpperCase().includes(keyword);
+              })
+            };
+          })
+        : this.quickData;
+    }
+  },
+  created() {
+    this.handleSearch = vexutils.debounce(this.handleSearch, 300);
+  },
+  watch: {
+    quickShow(v) {
+      if (!v) {
+        let edit;
+        this.quickData.find(item => {
+          edit = item.list ? item.list.find(child => child.edit) : edit;
+          return !!edit;
+        });
+        edit && this.handleQuickEdit(edit, 'cancel'); // 清除修改未保存的数据
+      }
+    }
+  },
+  methods: {
+    ...mapMutations(['setFooterMessage']),
+    ...mapActions(['sendMessage', 'sendRobotMessage']),
+    topPersonalData(item, list, index, tabIndex) {
+      const params = { id: item.id };
+      fetch.post('/fastReply/topPersonalData', this.$qs.stringify(params)).then(({ data }) => {
+        if (data.result !== 'SUCCESS') {
+          this.$message.error(data.resultMsg || '置顶失败');
+          return;
+        }
+        list.splice(index, 1);
+        list.unshift(item);
+        this.$forceUpdate();
+        // 如果input search 中有值 this.quickData也要排序
+        if (this.keyword) {
+          let curList = this.quickData[tabIndex]?.list;
+          if (curList.length) {
+            let curIndex = curList.findIndex(v => v.id === item.id);
+            if (curIndex > -1) {
+              let curItem = curList[curIndex];
+              curList.splice(curIndex, 1);
+              curList.unshift(curItem);
+            }
+          }
+        }
+        let target = this.$refs['quick-reply'];
+        if (!target.length || !target[tabIndex]) return;
+        this.$nextTick(() => {
+          target[tabIndex].scrollTo({
+            left: 0,
+            top: 0,
+            behavior: 'instant'
+          });
+        });
+      });
+    },
+    handleQuickEdit(item, type, list, index, tabIndex) {
+      switch (type) {
+        case 'top':
+          if (!item.id) return;
+          this.topPersonalData(item, list, index, tabIndex);
+          break;
+        case 'send':
+          var body = {
+            content: `<div>${item.content}</div>`,
+            type: 0
+          };
+          if (this.curChatType === 'robot') {
+            this.sendRobotMessage(item.content);
+          } else {
+            this.sendMessage(body);
+          }
+          this.$emit('quickShow:update', false);
+          break;
+        case 'show':
+          this.$set(item, 'edit', true);
+          this.$set(item, 'editValue', item.content);
+          break;
+        case 'cancel':
+          this.$set(item, 'edit', false);
+          this.$delete(item, 'editValue');
+          if (!item.id) {
+            let quickData = this.quickData.find(item => item.category == this.quickReplyKey);
+            let length = quickData.list.length;
+            quickData.list.splice(length - 1, 1);
+          }
+          break;
+        case 'ok':
+          if (item.editValue.replace(/\s+/g, '').length === 0) {
+            this.$message.warning(`${this.i18nText('1.2.1.11.60')}!`);
+            return;
+          }
+          fetch
+            .post(
+              `/fastReply/${this.quickReplyKey !== '个人' ? 'savePublicChat' : 'saveChat'}`,
+              qs.stringify({
+                content: item.editValue,
+                id: item.id,
+                category: this.quickReplyKey !== '个人' ? 'CHAT_ASSEMBLY ' : undefined
+              })
+            )
+            .then(({ data }) => {
+              if (data.result === 'SUCCESS') {
+                const content = item.editValue;
+                let quick = Object.assign({}, data.obj, {
+                  content: content,
+                  edit: false
+                });
+                if (!item.id) {
+                  let quickData = this.quickData.find(item => item.category == this.quickReplyKey);
+                  quickData.list.splice(quickData.list.length - 1, 1, quick);
+                  this.$message.success('添加成功');
+                } else {
+                  item.content = content;
+                  item.edit = false;
+                  this.$delete(item, 'editValue');
+                  this.$message.success('编辑成功');
+                }
+              } else {
+                this.$message.warning(data.resultMsg || '删除失败');
+              }
+            });
+
+          break;
+      }
+    },
+    handleQuickAdd() {
+      let quickData = this.quickData?.find(item => item.category == this.quickReplyKey);
+      let length = quickData?.list?.length;
+      if (length > 0 && !quickData.list[length - 1].id) {
+        this.$message.warning(`${this.i18nText('1.9.361')}!`);
+        return;
+      }
+      quickData.list = quickData.list.concat({
+        editValue: '',
+        content: '',
+        edit: true
+      });
+      this.$nextTick(() => {
+        this.handleScrollTo();
+      });
+    },
+    handleQuickDelete(item) {
+      fetch.post('/fastReply/remove', qs.stringify({ id: item.id })).then(({ data }) => {
+        if (data.result === 'SUCCESS') {
+          let quickData = this.quickData.find(item => item.category == this.quickReplyKey);
+          let index = quickData.list.findIndex(q => q.id === item.id);
+          quickData.list.splice(index, 1);
+          this.$message.success('删除成功');
+        } else {
+          this.$message.warning(data.resultMsg || '删除失败');
+        }
+      });
+    },
+    handleScrollTo() {
+      let target = this.$refs['quick-reply'];
+      for (let i = 0; i < target.length; i++) {
+        this.$nextTick().then(() => {
+          let top = target[i].scrollHeight;
+          target[i].scrollTo({
+            left: 0,
+            top,
+            behavior: 'instant'
+          });
+        });
+      }
+    },
+    handleChange(e) {
+      if (e.target.value.length >= 200) {
+        this.$message.warning('最多支持200个字符');
+      }
+    },
+    handleSearch() {
+      this.keyword = this.value;
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.quick-reply {
+  width: 600px;
+  height: 400px;
+
+  .ant-popover-inner-content {
+    height: 100%;
+  }
+  .quick-reply {
+    // padding: 10px 0;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+  }
+  .ant-popover-content {
+    height: 100%;
+  }
+  .ant-popover-inner {
+    height: 100%;
+    > div {
+      height: 100%;
+    }
+  }
+  .ant-tabs {
+    flex: 1;
+  }
+  .ant-tabs-content {
+    height: calc(100% - 44px);
+  }
+  .ant-tabs-tabpane,
+  .quick-reply-wrapper {
+    height: 100%;
+  }
+  .ant-input {
+    min-height: 40px;
+    box-sizing: border-box;
+    resize: none;
+    padding-bottom: 34px;
+    background-color: #f5f7fc;
+    border: none;
+    outline: none;
+    // border-bottom: 1px solid #efefef;
+  }
+  .quick-reply-wrapper {
+    height: 100%;
+    overflow: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+      background-color: #f5f5f5;
+    }
+  }
+  .quick-reply-no-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .quick-reply-item {
+    padding: 0 17px;
+    font-size: 14px;
+    line-height: 24px;
+    word-wrap: break-word;
+    word-break: normal;
+    cursor: pointer;
+    .text {
+      display: inline-block;
+      width: 100%;
+      padding: 5px 0;
+      border-bottom: 1px solid #efefef;
+      &:hover {
+        border: none;
+      }
+      .quick-replay-to-top {
+        margin-right: 10px;
+      }
+      .operate {
+        display: none;
+        float: right;
+        > i {
+          margin-left: 10px;
+        }
+      }
+    }
+    .input {
+      position: relative;
+      margin-bottom: 6px;
+      .confirm {
+        position: absolute;
+        right: 10px;
+        bottom: 7px;
+        font-size: 14px;
+      }
+    }
+    &:not(.quick-input):hover {
+      background-color: #5585f5 !important;
+      color: #fff !important;
+      .operate {
+        display: block;
+      }
+    }
+  }
+  .quick-add {
+    line-height: 40px;
+    padding: 0 17px;
+    color: #5585f5;
+    cursor: pointer;
+  }
+
+  .quick-search {
+    .ant-input {
+      height: 40px;
+      line-height: 20px;
+      background-color: #fff;
+      padding: 10px 12px;
+      border: 1px solid #d9d9d9;
+    }
+  }
+  .input {
+    padding-top: 8px;
+    .ant-input {
+      background-color: #fbfbfb;
+      border: 1px solid #d5d5d5;
+    }
+  }
+}
+</style>