cnhis-design-vue 2.1.57 → 2.1.59

package/packages/input/src/input-quick/components/quick-popover.vue

@@ -1,596 +1,596 @@
-<template>
-  <a-popover trigger="click" placement="bottomLeft" overlayClassName="form-quick-reply quick_reply_c-content" :visible="popoverVisible" ref="popoverRef" @visibleChange="handleVisibleChange">
-    <!-- @visibleChange="handleVisibleChange" -->
-    <div slot="title" ref="q-title">
-      <span>
-        快速输入
-        <!-- {{ $t("1.9.5") }} -->
-      </span>
-      <a-icon class="float-r" @click="popoverVisible = false" type="close" />
-    </div>
-    <div slot="content" class="quick-reply-container" ref="q-container">
-      <a-tabs v-if="is_category" v-model="quickReplyKey">
-        <a-tab-pane v-for="data in quickData" :key="data.category" :tab="data.tabName">
-          <template slot="tab">{{ data.category || data.categoryName }}</template>
-          <div class="quick-reply-wrapper" ref="quick-reply" v-if="data.list.length > 0">
-            <template v-for="(item, index) in data.list">
-              <quick-item
-                :isOrgAdmin="isOrgAdmin"
-                :item="item"
-                :key="index"
-                :categoryConfig="data"
-                v-on="$listeners"
-                @handleEditItem="handlerEditQieckItem(item, 'show', data, index)"
-                @handlerDelQieckItem="handlerDelQieckItem(item, data, index)"
-                @handleCancelItem="handlerEditQieckItem(item, 'cancel', data, index)"
-                @handleOkItem="handlerEditQieckItem(item, 'ok', data, index)"
-              />
-            </template>
-            <div style="text-align: center;margin-top: 10px;">
-              没有更多了
-              <!-- {{ $t("3.5.13") }} -->
-              ~
-            </div>
-          </div>
-          <div v-else class="quick-reply-no-wrapper">
-            <span style="display: inline-block;margin-top: 20px;font-size: 20px;">
-              暂无数据
-              <!-- {{ $t("1.1.6.11") }} -->
-            </span>
-          </div>
-        </a-tab-pane>
-      </a-tabs>
-
-      <div v-else>
-        <div class="quick-reply-wrapper" ref="quick-reply" v-if="quickData.length > 0">
-          <template v-for="(item, index) in quickData">
-            <quick-item
-              :isOrgAdmin="isOrgAdmin"
-              :item="item"
-              :key="index"
-              :categoryConfig="{}"
-              v-on="$listeners"
-              @handleEditItem="handlerEditQieckItem(item, 'show', {}, index)"
-              @handlerDelQieckItem="handlerDelQieckItem(item, {}, index)"
-              @handleCancelItem="handlerEditQieckItem(item, 'cancel', {}, index)"
-              @handleOkItem="handlerEditQieckItem(item, 'ok', {}, index)"
-            />
-          </template>
-          <div style="text-align: center;margin-top: 10px;">
-            没有更多了
-            <!-- {{ $t("3.5.13") }} -->
-            ~
-          </div>
-        </div>
-        <div v-else class="quick-reply-no-wrapper">
-          <span style="display: inline-block;margin-top: 20px;font-size: 20px;">
-            暂无数据
-            <!-- {{ $t("1.1.6.11") }} -->
-          </span>
-        </div>
-      </div>
-      <div> </div>
-
-      <!-- TODO: 操作限制 -->
-      <!-- v-if="isOrgAdmin || quickReplyKey === `个人`" -->
-      <div v-if="powerFn" class="quick-add" @click.prevent.stop="handleQuickAdd(false)">
-        <a-icon type="plus" />
-        新增
-        <!-- {{ $t("1.9.355") }} -->
-      </div>
-    </div>
-    <div>
-      <slot></slot>
-    </div>
-  </a-popover>
-</template>
-<script>
-import create from '@/core/create';
-import { Input, Tooltip, Icon, Popconfirm, Popover, Tabs } from 'ant-design-vue';
-import quickItem from './quick-item';
-
-export default create({
-  name: 'quick-popover',
-  data() {
-    return {
-      // popoverVisible: false,
-      popoverInput: '',
-      quickReplyKey: '个人',
-      data_type: 'simple',
-      quickData: [],
-      selectOptions: [],
-      curVisible: false
-    };
-  },
-  props: {
-    quickDataSource: {
-      type: Array,
-      default: () => []
-    },
-
-    isOrgAdmin: {
-      type: Boolean,
-      default: true
-    },
-
-    // 是否开启 “快速输入”模式
-    isShowQuick: {
-      type: Boolean,
-      default: true
-    },
-
-    quickBtntitle: {
-      type: String,
-      default: '点击打开快速输入'
-    },
-
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    is_category() {
-      return this.data_type === 'category';
-    },
-
-    powerFn() {
-      return this.isOrgAdmin || false;
-    },
-
-    popoverVisible: {
-      get() {
-        if (!this.isShowQuick) {
-          return false;
-        }
-        return this.visible;
-      },
-      set(val) {
-        this.$emit('update:visible', val);
-        this.$emit('visibleChange', val);
-      }
-    }
-  },
-  watch: {
-    quickDataSource: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (!val || !Object.keys(val).length) return;
-        let tempVal = JSON.parse(JSON.stringify(val));
-        this.handleInitQuickData(tempVal);
-        // TODO: ?
-        // if (isAdd) {
-        //   this.$nextTick(() => {
-        //     this.quickReplyKey = "个人";
-        //     this.handleQuickAdd(isAdd);
-        //   });
-        // }
-      }
-    },
-    popoverVisible: {
-      immediate: true,
-      handler(val) {
-        if (val) {
-          this.initStep = 1;
-          this.getPopupDomNode();
-        } else {
-          this.initStep = 0;
-          this.handlerOnHide();
-        }
-      }
-    }
-  },
-
-  methods: {
-    /**
-     * 初始化数据
-     */
-    handleInitQuickData(val) {
-      const { checkStringType, checkSimpleType, checkCategoryType } = this;
-      if (!Array.isArray(val)) {
-        console.error(`quickDataSource not an array`);
-        return;
-      }
-      // TODO: 取值字段可配置
-      let tempVal = JSON.parse(JSON.stringify(val));
-      if (checkCategoryType(tempVal)) {
-        tempVal = this.formatCategoryType(tempVal);
-        this.data_type = 'category';
-      } else if (checkSimpleType(tempVal)) {
-        tempVal = this.formatSimpleType(tempVal);
-        this.data_type = 'simple';
-      } else if (checkStringType) {
-        tempVal = this.formatStringType(tempVal);
-        this.data_type = 'simple';
-      } else {
-        this.data_type = '';
-        console.error(`quickDataSource data formatting error`);
-        return;
-      }
-      this.$set(this, 'quickData', tempVal);
-    },
-
-    // 分类类型
-    checkCategoryType(list) {
-      const { checkStringType, checkSimpleType } = this;
-      let f = list.every(v => {
-        if (!Array.isArray(v.list)) return false;
-        v._data_type = '';
-        if (checkStringType(v.list)) {
-          v._data_type = 'string';
-        } else if (checkSimpleType(v.list)) {
-          v._data_type = 'simple';
-        }
-        return v.category && v._data_type;
-      });
-
-      return f;
-    },
-
-    // 字符串数据
-    checkStringType(list) {
-      return list.every(v => typeof v === 'string');
-    },
-
-    // 数组对象
-    checkSimpleType(list) {
-      return list.every(v => {
-        if (typeof v === 'object') {
-          return 'content' in v;
-        }
-        return false;
-      });
-    },
-
-    formatCategoryType(list) {
-      list.forEach((v, i) => {
-        if (i === 0) {
-          // 分类默认取第一个
-          this.quickReplyKey = v.category;
-        }
-        if (v._data_type === 'string') {
-          v.list = this.formatStringType(v.list);
-        }
-      });
-      return list;
-    },
-
-    formatStringType(list) {
-      return list.map(v => {
-        return { content: v };
-      });
-    },
-
-    formatSimpleType(list) {
-      return list;
-    },
-
-    handlerEditQieckItem(item, type, config, i) {
-      switch (type) {
-        case 'show':
-          this.$set(item, 'edit', true);
-          this.$set(item, 'originContent', item.content);
-          break;
-        case 'cancel':
-          this.$set(item, 'edit', false);
-          item.content = item.originContent;
-          var list = [];
-          if (item._is_new_add) {
-            if (this.is_category) {
-              list = config?.list || [];
-            } else {
-              list = this.quickData;
-            }
-            let length = list.length;
-            list.splice(length - 1, 1);
-          }
-          break;
-        case 'ok':
-          if (item.content.replace(/\s+/g, '').length === 0) {
-            this.$message.warning('不允许内容为空');
-            return;
-          }
-          if (!item.content) {
-            // this.$message.warning(`${this.$t("1.2.1.11.60")}!`);
-            this.$message.warning(`内容不能为空!`);
-            return;
-          }
-          this.fastReplySave(item, config, i);
-          break;
-        default:
-          break;
-      }
-    },
-
-    async fastReplySave(item, config, i) {
-      let res = await this.handleTriggerEvent('saveQuickItem', item, config, i);
-      let list = [];
-      if (res) {
-        if (this.is_category) {
-          list = config?.list || [];
-        } else {
-          list = this.quickData;
-        }
-
-        let quick = Object.assign(item, res?.obj || {}, {
-          content: item.content
-        });
-
-        if (quick._is_new_add) {
-          quick._is_new_add = undefined;
-          list.splice(list.length - 1, 1, quick);
-        }
-        this.$set(item, 'edit', false);
-      } else {
-        this.handlerEditQieckItem(item, 'cancel', config, i);
-      }
-    },
-
-    handleSelectQuitck(v) {
-      this.$emit('select', v);
-    },
-
-    async handlerDelQieckItem(item, config, i) {
-      let res = await this.handleTriggerEvent('deleteQuickItem', item, config, i);
-      let list = [];
-      if (res) {
-        if (this.is_category) {
-          list = config?.list || [];
-        } else {
-          list = this.quickData;
-        }
-        list.splice(i, 1);
-      }
-    },
-
-    handleQuickAdd(isAdd = false) {
-      let list = [];
-      let length = 0;
-      if (this.is_category) {
-        let quickData = this.quickData.find(item => item.category == this.quickReplyKey);
-        if (!quickData) return;
-        list = quickData?.list || [];
-        length = quickData?.list.length || 0;
-      } else {
-        list = this.quickData;
-      }
-      if (length > 0 && list[length - 1]._is_new_add) {
-        // ${this.$t("1.9.361")}
-        !isAdd && this.$message.warning(`还有未完成的添加项!`);
-        return;
-      }
-
-      list.push({
-        content: '',
-        edit: true,
-        _is_new_add: true
-      });
-
-      this.$nextTick(() => {
-        this.handleScrollTo();
-      });
-    },
-
-    handleScrollTo() {
-      let target = this.$refs['quick-reply'];
-      if (!target) return;
-      for (let i = 0; i < target.length; i++) {
-        this.$nextTick().then(() => {
-          let top = target[i].scrollHeight;
-          target[i].scrollTo({
-            left: 0,
-            top,
-            behavior: 'instant'
-          });
-        });
-      }
-    },
-
-    handleVisibleChange(visible) {
-      if(this.popoverVisible && this.initStep === 1){
-        this.initStep = 2;
-        setTimeout(()=> {
-          this.listenerClickEvent();
-        }, 100)
-      }
-      // const disabled = this?.$attrs?.disabled || false;
-      // if (!this.visible) {
-      //   this.popoverVisible = false;
-      //   return;
-      // }
-      // if (!visible || disabled) {
-      //   this.popoverVisible = false;
-      //   return;
-      // }
-      // if (!this.isShowQuick) {
-      //   this.popoverVisible = false;
-      //   return;
-      // } else {
-      //   this.popoverVisible = visible;
-      // }
-    },
-
-    handleChange(e) {
-      if (e.target.value.length >= 200) {
-        this.$message.warning('最多支持200个字符');
-      }
-    },
-
-    async handleTriggerEvent(key, ...arg) {
-      let fn = this[key] || this.$attrs[key];
-      if (typeof fn === 'function') {
-        let res = await fn(...arg);
-        return res;
-      } else {
-        return true;
-      }
-    },
-
-    getPopupDomNode() {
-      this.$nextTick(() => {
-        this.popupDomNode = this.$refs?.popoverRef?.getPopupDomNode();
-
-      });
-    },
-
-    isDOM(item) {
-      if (!item) return false;
-      return typeof HTMLElement === 'function' ? item instanceof HTMLElement : item && typeof item === 'object' && item.nodeType === 1 && typeof item.nodeName === 'string';
-    },
-
-    listenerClickEvent() {
-      if(this.addclickListener) return;
-      this.addclickListener = true;
-      document.addEventListener('click', this.onClickEvent, false);
-    },
-
-    removeClickEvent() {
-      this.addclickListener = false;
-      document.removeEventListener('click', this.onClickEvent);
-    },
-
-    onClickEvent(e) {
-      const { popupDomNode, isDOM } = this;
-      if (isDOM(popupDomNode)) {
-        const target = e.target;
-        if (!popupDomNode.contains(target)) {
-          this.popoverVisible = false;
-        }
-      }
-    },
-
-    handlerOnHide() {
-      this.popupDomNode = null;
-      setTimeout(() => {
-        this.removeClickEvent();
-      }, 0);
-    }
-  },
-  components: {
-    [Input.name]: Input,
-    [Input.TextArea.name]: Input.TextArea,
-    [Icon.name]: Icon,
-    [Popconfirm.name]: Popconfirm,
-    [Popover.name]: Popover,
-    [Tabs.name]: Tabs,
-    [Tabs.TabPane.name]: Tabs.TabPane,
-    [Tooltip.name]: Tooltip,
-    quickItem
-  }
-});
-</script>
-<style lang="less">
-.form-quick-reply {
-  width: 600px;
-  height: 400px;
-  .ant-popover-title {
-    > div {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-  }
-  .ant-popover-inner-content {
-    height: calc(100% - 32px);
-  }
-  .quick-reply-container {
-    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;
-  }
-  .quick-reply-wrapper {
-    flex: 1;
-    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;
-    height: 100%;
-  }
-  .quick-reply-item {
-    padding: 0 17px;
-    font-size: 14px;
-    line-height: 24px;
-    word-wrap: break-word;
-    word-break: normal;
-    margin-top: 8px;
-    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;
-      color: #fff;
-      .operate {
-        display: block;
-      }
-    }
-  }
-  .quick-add {
-    width: fit-content;
-    line-height: 40px;
-    color: #5585f5;
-    cursor: pointer;
-  }
-}
-</style>
+<template>
+  <a-popover trigger="click" placement="bottomLeft" overlayClassName="form-quick-reply quick_reply_c-content" :visible="popoverVisible" ref="popoverRef" @visibleChange="handleVisibleChange">
+    <!-- @visibleChange="handleVisibleChange" -->
+    <div slot="title" ref="q-title">
+      <span>
+        快速输入
+        <!-- {{ $t("1.9.5") }} -->
+      </span>
+      <a-icon class="float-r" @click="popoverVisible = false" type="close" />
+    </div>
+    <div slot="content" class="quick-reply-container" ref="q-container">
+      <a-tabs v-if="is_category" v-model="quickReplyKey">
+        <a-tab-pane v-for="data in quickData" :key="data.category" :tab="data.tabName">
+          <template slot="tab">{{ data.category || data.categoryName }}</template>
+          <div class="quick-reply-wrapper" ref="quick-reply" v-if="data.list.length > 0">
+            <template v-for="(item, index) in data.list">
+              <quick-item
+                :isOrgAdmin="isOrgAdmin"
+                :item="item"
+                :key="index"
+                :categoryConfig="data"
+                v-on="$listeners"
+                @handleEditItem="handlerEditQieckItem(item, 'show', data, index)"
+                @handlerDelQieckItem="handlerDelQieckItem(item, data, index)"
+                @handleCancelItem="handlerEditQieckItem(item, 'cancel', data, index)"
+                @handleOkItem="handlerEditQieckItem(item, 'ok', data, index)"
+              />
+            </template>
+            <div style="text-align: center;margin-top: 10px;">
+              没有更多了
+              <!-- {{ $t("3.5.13") }} -->
+              ~
+            </div>
+          </div>
+          <div v-else class="quick-reply-no-wrapper">
+            <span style="display: inline-block;margin-top: 20px;font-size: 20px;">
+              暂无数据
+              <!-- {{ $t("1.1.6.11") }} -->
+            </span>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+
+      <div v-else>
+        <div class="quick-reply-wrapper" ref="quick-reply" v-if="quickData.length > 0">
+          <template v-for="(item, index) in quickData">
+            <quick-item
+              :isOrgAdmin="isOrgAdmin"
+              :item="item"
+              :key="index"
+              :categoryConfig="{}"
+              v-on="$listeners"
+              @handleEditItem="handlerEditQieckItem(item, 'show', {}, index)"
+              @handlerDelQieckItem="handlerDelQieckItem(item, {}, index)"
+              @handleCancelItem="handlerEditQieckItem(item, 'cancel', {}, index)"
+              @handleOkItem="handlerEditQieckItem(item, 'ok', {}, index)"
+            />
+          </template>
+          <div style="text-align: center;margin-top: 10px;">
+            没有更多了
+            <!-- {{ $t("3.5.13") }} -->
+            ~
+          </div>
+        </div>
+        <div v-else class="quick-reply-no-wrapper">
+          <span style="display: inline-block;margin-top: 20px;font-size: 20px;">
+            暂无数据
+            <!-- {{ $t("1.1.6.11") }} -->
+          </span>
+        </div>
+      </div>
+      <div> </div>
+
+      <!-- TODO: 操作限制 -->
+      <!-- v-if="isOrgAdmin || quickReplyKey === `个人`" -->
+      <div v-if="powerFn" class="quick-add" @click.prevent.stop="handleQuickAdd(false)">
+        <a-icon type="plus" />
+        新增
+        <!-- {{ $t("1.9.355") }} -->
+      </div>
+    </div>
+    <div>
+      <slot></slot>
+    </div>
+  </a-popover>
+</template>
+<script>
+import create from '@/core/create';
+import { Input, Tooltip, Icon, Popconfirm, Popover, Tabs } from 'ant-design-vue';
+import quickItem from './quick-item';
+
+export default create({
+  name: 'quick-popover',
+  data() {
+    return {
+      // popoverVisible: false,
+      popoverInput: '',
+      quickReplyKey: '个人',
+      data_type: 'simple',
+      quickData: [],
+      selectOptions: [],
+      curVisible: false
+    };
+  },
+  props: {
+    quickDataSource: {
+      type: Array,
+      default: () => []
+    },
+
+    isOrgAdmin: {
+      type: Boolean,
+      default: true
+    },
+
+    // 是否开启 “快速输入”模式
+    isShowQuick: {
+      type: Boolean,
+      default: true
+    },
+
+    quickBtntitle: {
+      type: String,
+      default: '点击打开快速输入'
+    },
+
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    is_category() {
+      return this.data_type === 'category';
+    },
+
+    powerFn() {
+      return this.isOrgAdmin || false;
+    },
+
+    popoverVisible: {
+      get() {
+        if (!this.isShowQuick) {
+          return false;
+        }
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:visible', val);
+        this.$emit('visibleChange', val);
+      }
+    }
+  },
+  watch: {
+    quickDataSource: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (!val || !Object.keys(val).length) return;
+        let tempVal = JSON.parse(JSON.stringify(val));
+        this.handleInitQuickData(tempVal);
+        // TODO: ?
+        // if (isAdd) {
+        //   this.$nextTick(() => {
+        //     this.quickReplyKey = "个人";
+        //     this.handleQuickAdd(isAdd);
+        //   });
+        // }
+      }
+    },
+    popoverVisible: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.initStep = 1;
+          this.getPopupDomNode();
+        } else {
+          this.initStep = 0;
+          this.handlerOnHide();
+        }
+      }
+    }
+  },
+
+  methods: {
+    /**
+     * 初始化数据
+     */
+    handleInitQuickData(val) {
+      const { checkStringType, checkSimpleType, checkCategoryType } = this;
+      if (!Array.isArray(val)) {
+        console.error(`quickDataSource not an array`);
+        return;
+      }
+      // TODO: 取值字段可配置
+      let tempVal = JSON.parse(JSON.stringify(val));
+      if (checkCategoryType(tempVal)) {
+        tempVal = this.formatCategoryType(tempVal);
+        this.data_type = 'category';
+      } else if (checkSimpleType(tempVal)) {
+        tempVal = this.formatSimpleType(tempVal);
+        this.data_type = 'simple';
+      } else if (checkStringType) {
+        tempVal = this.formatStringType(tempVal);
+        this.data_type = 'simple';
+      } else {
+        this.data_type = '';
+        console.error(`quickDataSource data formatting error`);
+        return;
+      }
+      this.$set(this, 'quickData', tempVal);
+    },
+
+    // 分类类型
+    checkCategoryType(list) {
+      const { checkStringType, checkSimpleType } = this;
+      let f = list.every(v => {
+        if (!Array.isArray(v.list)) return false;
+        v._data_type = '';
+        if (checkStringType(v.list)) {
+          v._data_type = 'string';
+        } else if (checkSimpleType(v.list)) {
+          v._data_type = 'simple';
+        }
+        return v.category && v._data_type;
+      });
+
+      return f;
+    },
+
+    // 字符串数据
+    checkStringType(list) {
+      return list.every(v => typeof v === 'string');
+    },
+
+    // 数组对象
+    checkSimpleType(list) {
+      return list.every(v => {
+        if (typeof v === 'object') {
+          return 'content' in v;
+        }
+        return false;
+      });
+    },
+
+    formatCategoryType(list) {
+      list.forEach((v, i) => {
+        if (i === 0) {
+          // 分类默认取第一个
+          this.quickReplyKey = v.category;
+        }
+        if (v._data_type === 'string') {
+          v.list = this.formatStringType(v.list);
+        }
+      });
+      return list;
+    },
+
+    formatStringType(list) {
+      return list.map(v => {
+        return { content: v };
+      });
+    },
+
+    formatSimpleType(list) {
+      return list;
+    },
+
+    handlerEditQieckItem(item, type, config, i) {
+      switch (type) {
+        case 'show':
+          this.$set(item, 'edit', true);
+          this.$set(item, 'originContent', item.content);
+          break;
+        case 'cancel':
+          this.$set(item, 'edit', false);
+          item.content = item.originContent;
+          var list = [];
+          if (item._is_new_add) {
+            if (this.is_category) {
+              list = config?.list || [];
+            } else {
+              list = this.quickData;
+            }
+            let length = list.length;
+            list.splice(length - 1, 1);
+          }
+          break;
+        case 'ok':
+          if (item.content.replace(/\s+/g, '').length === 0) {
+            this.$message.warning('不允许内容为空');
+            return;
+          }
+          if (!item.content) {
+            // this.$message.warning(`${this.$t("1.2.1.11.60")}!`);
+            this.$message.warning(`内容不能为空!`);
+            return;
+          }
+          this.fastReplySave(item, config, i);
+          break;
+        default:
+          break;
+      }
+    },
+
+    async fastReplySave(item, config, i) {
+      let res = await this.handleTriggerEvent('saveQuickItem', item, config, i);
+      let list = [];
+      if (res) {
+        if (this.is_category) {
+          list = config?.list || [];
+        } else {
+          list = this.quickData;
+        }
+
+        let quick = Object.assign(item, res?.obj || {}, {
+          content: item.content
+        });
+
+        if (quick._is_new_add) {
+          quick._is_new_add = undefined;
+          list.splice(list.length - 1, 1, quick);
+        }
+        this.$set(item, 'edit', false);
+      } else {
+        this.handlerEditQieckItem(item, 'cancel', config, i);
+      }
+    },
+
+    handleSelectQuitck(v) {
+      this.$emit('select', v);
+    },
+
+    async handlerDelQieckItem(item, config, i) {
+      let res = await this.handleTriggerEvent('deleteQuickItem', item, config, i);
+      let list = [];
+      if (res) {
+        if (this.is_category) {
+          list = config?.list || [];
+        } else {
+          list = this.quickData;
+        }
+        list.splice(i, 1);
+      }
+    },
+
+    handleQuickAdd(isAdd = false) {
+      let list = [];
+      let length = 0;
+      if (this.is_category) {
+        let quickData = this.quickData.find(item => item.category == this.quickReplyKey);
+        if (!quickData) return;
+        list = quickData?.list || [];
+        length = quickData?.list.length || 0;
+      } else {
+        list = this.quickData;
+      }
+      if (length > 0 && list[length - 1]._is_new_add) {
+        // ${this.$t("1.9.361")}
+        !isAdd && this.$message.warning(`还有未完成的添加项!`);
+        return;
+      }
+
+      list.push({
+        content: '',
+        edit: true,
+        _is_new_add: true
+      });
+
+      this.$nextTick(() => {
+        this.handleScrollTo();
+      });
+    },
+
+    handleScrollTo() {
+      let target = this.$refs['quick-reply'];
+      if (!target) return;
+      for (let i = 0; i < target.length; i++) {
+        this.$nextTick().then(() => {
+          let top = target[i].scrollHeight;
+          target[i].scrollTo({
+            left: 0,
+            top,
+            behavior: 'instant'
+          });
+        });
+      }
+    },
+
+    handleVisibleChange(visible) {
+      if(this.popoverVisible && this.initStep === 1){
+        this.initStep = 2;
+        setTimeout(()=> {
+          this.listenerClickEvent();
+        }, 100)
+      }
+      // const disabled = this?.$attrs?.disabled || false;
+      // if (!this.visible) {
+      //   this.popoverVisible = false;
+      //   return;
+      // }
+      // if (!visible || disabled) {
+      //   this.popoverVisible = false;
+      //   return;
+      // }
+      // if (!this.isShowQuick) {
+      //   this.popoverVisible = false;
+      //   return;
+      // } else {
+      //   this.popoverVisible = visible;
+      // }
+    },
+
+    handleChange(e) {
+      if (e.target.value.length >= 200) {
+        this.$message.warning('最多支持200个字符');
+      }
+    },
+
+    async handleTriggerEvent(key, ...arg) {
+      let fn = this[key] || this.$attrs[key];
+      if (typeof fn === 'function') {
+        let res = await fn(...arg);
+        return res;
+      } else {
+        return true;
+      }
+    },
+
+    getPopupDomNode() {
+      this.$nextTick(() => {
+        this.popupDomNode = this.$refs?.popoverRef?.getPopupDomNode();
+
+      });
+    },
+
+    isDOM(item) {
+      if (!item) return false;
+      return typeof HTMLElement === 'function' ? item instanceof HTMLElement : item && typeof item === 'object' && item.nodeType === 1 && typeof item.nodeName === 'string';
+    },
+
+    listenerClickEvent() {
+      if(this.addclickListener) return;
+      this.addclickListener = true;
+      document.addEventListener('click', this.onClickEvent, false);
+    },
+
+    removeClickEvent() {
+      this.addclickListener = false;
+      document.removeEventListener('click', this.onClickEvent);
+    },
+
+    onClickEvent(e) {
+      const { popupDomNode, isDOM } = this;
+      if (isDOM(popupDomNode)) {
+        const target = e.target;
+        if (!popupDomNode.contains(target)) {
+          this.popoverVisible = false;
+        }
+      }
+    },
+
+    handlerOnHide() {
+      this.popupDomNode = null;
+      setTimeout(() => {
+        this.removeClickEvent();
+      }, 0);
+    }
+  },
+  components: {
+    [Input.name]: Input,
+    [Input.TextArea.name]: Input.TextArea,
+    [Icon.name]: Icon,
+    [Popconfirm.name]: Popconfirm,
+    [Popover.name]: Popover,
+    [Tabs.name]: Tabs,
+    [Tabs.TabPane.name]: Tabs.TabPane,
+    [Tooltip.name]: Tooltip,
+    quickItem
+  }
+});
+</script>
+<style lang="less">
+.form-quick-reply {
+  width: 600px;
+  height: 400px;
+  .ant-popover-title {
+    > div {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+  .ant-popover-inner-content {
+    height: calc(100% - 32px);
+  }
+  .quick-reply-container {
+    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;
+  }
+  .quick-reply-wrapper {
+    flex: 1;
+    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;
+    height: 100%;
+  }
+  .quick-reply-item {
+    padding: 0 17px;
+    font-size: 14px;
+    line-height: 24px;
+    word-wrap: break-word;
+    word-break: normal;
+    margin-top: 8px;
+    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;
+      color: #fff;
+      .operate {
+        display: block;
+      }
+    }
+  }
+  .quick-add {
+    width: fit-content;
+    line-height: 40px;
+    color: #5585f5;
+    cursor: pointer;
+  }
+}
+</style>