cnhis-design-vue 0.2.64-beta → 0.3.2-beta

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

@@ -1,596 +0,0 @@
-<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>