cnhis-design-vue 2.2.3 → 2.2.5

package/src/component/select-options/index.vue

@@ -1,430 +0,0 @@
-<template>
-  <div class="select-options_wrapper" @mousedown="e => e.preventDefault()">
-    <div v-if="freeAddItem" class="add-btn_wrapper" @click="selectData(freeAddItem, $event)">
-      <a-icon type="plus" :style="{ color: '#2D7AFF' }" />
-      {{ rows.length === 0 ? "无搜索内容" : "无符合选项" }}，新增
-      <span class="add-value">{{ freeAddItem[valueKey] }}</span>
-    </div>
-
-    <div class="header_wrapper" v-if="columns.length > 1">
-      <table>
-        <thead>
-          <tr>
-            <th v-for="column in columns" :key="column.key"><c-ellipsis :content="column.title" /></th>
-          </tr>
-        </thead>
-      </table>
-    </div>
-
-    <VueCustomScrollbar class="main_wrapper" v-if="rows.length > 0">
-      <div @mouseover="handlerMouseover">
-        <table v-if="columns.length > 0">
-          <tbody>
-            <tr
-              :class="getClassList(item, index)"
-              v-for="(item, index) in rows"
-              :key="index"
-              @click="selectData(item, $event)"
-            >
-              <td v-for="column in columns" :key="column.dataIndex">
-                <c-ellipsis :content="showLabel(item, column.key)" />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <template v-else>
-          <div
-            :class="getClassList(item, index)"
-            style="padding: 6px"
-            v-for="(item, index) in rows"
-            :key="index"
-            @click="selectData(item, $event)"
-          >
-            <c-ellipsis :content="item[valueKey]" />
-          </div>
-        </template>
-      </div>
-    </VueCustomScrollbar>
-    <div v-else class="main_empty">
-      <img src="~@/assets/img/nodata.png" alt="" />
-      暂无数据
-    </div>
-  </div>
-</template>
-
-<script>
-import {
-  defineComponent,
-  toRefs,
-  computed,
-  ref,
-  onMounted,
-  onBeforeUnmount,
-  watch,
-  getCurrentInstance,
-  nextTick
-} from "@vue/composition-api";
-import VueCustomScrollbar from "vue-custom-scrollbar";
-import "vue-custom-scrollbar/dist/vueScrollbar.css";
-import XEUtils from "xe-utils";
-
-const getProps = vnode => {
-  return vnode?.data?.props || {};
-};
-
-const scrollIntoView = (container, selected) => {
-  if (!selected) {
-    container.scrollTop = 0;
-    return;
-  }
-
-  const offsetParents = [];
-  let pointer = selected.offsetParent;
-  while (pointer !== null && container !== pointer && container.contains(pointer)) {
-    offsetParents.push(pointer);
-    pointer = pointer.offsetParent;
-  }
-  const top = selected.offsetTop + offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0);
-  const bottom = top + selected.offsetHeight;
-  const viewRectTop = container.scrollTop;
-  const viewRectBottom = viewRectTop + container.clientHeight;
-
-  if (top < viewRectTop) {
-    container.scrollTop = top;
-  } else if (bottom > viewRectBottom) {
-    container.scrollTop = bottom - container.clientHeight;
-  }
-};
-
-export default defineComponent({
-  name: "SelectOptions",
-  components: {
-    VueCustomScrollbar,
-  },
-  props: {
-    freeAddItem: {
-      type: Object,
-    },
-    fields: {
-      type: Array,
-      default: () => []
-    },
-    rows: {
-      type: Array,
-      default: () => [],
-    },
-    wordbook: {
-      type: Object,
-      required: true
-    },
-    context: {
-      type: Object
-    },
-    separate: {
-      type: String,
-      default: ">>>"
-    }
-  },
-  setup(props) {
-    const { proxy } = getCurrentInstance();
-    const { fields, wordbook, context, separate, rows } = toRefs(props);
-
-    const currentIndex = ref(-1);
-
-    const selectedVals = computed(() => {
-      return context?.value?.value || [];
-    });
-
-    const visible = computed(() => context?.value?.visible || false);
-
-    const multiple = computed(() => context?.value?.multiple || false);
-
-    const options = computed(() => context?.value?.options || []);
-
-    const renderKey = computed(() => wordbook.value.render_key || []);
-
-    const valueKey = computed(() => wordbook.value.value_key || []);
-
-    const filterFields = computed(() => {
-      const sortFields = [...fields.value].sort((pre, next) => pre.order - next.order);
-      return sortFields.filter(({ columnName }) => renderKey.value.includes(columnName));
-    });
-
-    const columns = computed(() =>
-      filterFields.value.map(field => ({
-        title: field.title,
-        dataIndex: field.columnName,
-        key: field.columnName
-      }))
-    );
-
-    const showLabel = (item, key) => {
-      const copyRowObj = item.copyRowObj || item;
-
-      let res = copyRowObj[key];
-      try {
-        if (res && typeof res == "string" && res.startsWith("###")) {
-          res = res.slice(3);
-          res = JSON.parse(res);
-          res = res.change_text;
-        }
-        return res || "";
-      } catch (error) {
-        return "";
-      }
-    };
-
-    const findOptionVNode = val => {
-      return options.value.find(i => getProps(i).value === val);
-    };
-
-    const isActive = data => {
-      const val = `${data[valueKey.value]}${separate.value}${data["myUniqueKey"]}`;
-      return selectedVals.value.includes(val);
-    };
-
-    const isDisabled = data => {
-      const val = `${data[valueKey.value]}${separate.value}${data["myUniqueKey"]}`;
-      const optionVNode = findOptionVNode(val);
-      return optionVNode ? getProps(optionVNode).disabled : false;
-    };
-
-    const getClassList = (data, index) => {
-      return [
-        "row",
-        isActive(data) ? "active" : "",
-        index === currentIndex.value ? "hover" : "",
-        isDisabled(data) ? "disabled" : ""
-      ];
-    };
-
-    const handlerMouseover = XEUtils.throttle(() => {
-      currentIndex.value = -1;
-    }, 500);
-
-    const triggerSelectInContext = val => {
-      const optionVNode = findOptionVNode(val);
-      if (optionVNode) {
-        optionVNode.context.onMenuSelect({ item: optionVNode });
-      }
-    };
-
-    const triggerDeSelectInContext = (val, evt) => {
-      const optionVNode = findOptionVNode(val);
-      if (optionVNode) {
-        optionVNode.context.onMenuDeselect({
-          item: { ...optionVNode, $el: optionVNode.context.$el },
-          domEvent: evt
-        });
-      }
-    };
-
-    const selectData = (data, evt) => {
-      if (isDisabled(data)) return;
-      const originVal = data[valueKey.value];
-      let val = `${originVal}${separate.value}${data["myUniqueKey"]}`;
-
-      //   console.log(context, evt);
-      if (multiple.value) {
-        if (selectedVals.value.includes(val)) {
-          triggerDeSelectInContext(val, evt);
-        } else {
-          triggerSelectInContext(val);
-        }
-      } else {
-        triggerSelectInContext(val);
-      }
-    };
-
-    const getNextIndex = index => {
-      const originIndex = index < -1 ? -1 : index;
-      const len = rows.value.length;
-
-      const getIndex = nextIndex => {
-        if (nextIndex === originIndex) {
-          return -1;
-        }
-
-        if (nextIndex === -1 || isDisabled(rows.value[nextIndex])) {
-          nextIndex += 1;
-          return getIndex(nextIndex >= len ? -1 : nextIndex);
-        }
-        return nextIndex;
-      };
-
-      return getIndex(originIndex + 1 >= len ? 0 : originIndex + 1);
-    };
-
-    const getPreIndex = index => {
-      const len = rows.value.length;
-      const originIndex = index <= -1 ? len : index;
-
-      const getIndex = preIndex => {
-        if (preIndex === originIndex) {
-          return -1;
-        }
-
-        if (preIndex === len || isDisabled(rows.value[preIndex])) {
-          preIndex -= 1;
-          return getIndex(preIndex <= -1 ? len : preIndex);
-        }
-        return preIndex;
-      };
-
-      return getIndex(originIndex - 1 <= -1 ? len - 1 : originIndex - 1);
-    };
-
-    const handlerKeyDown = evt => {
-      if (!visible.value) return;
-      if (evt.key === "ArrowDown") {
-        evt.stopPropagation();
-        evt.preventDefault();
-        currentIndex.value = getNextIndex(currentIndex.value);
-        return;
-      }
-      if (evt.key === "ArrowUp") {
-        evt.stopPropagation();
-        evt.preventDefault();
-        currentIndex.value = getPreIndex(currentIndex.value);
-        return;
-      }
-      if (evt.key === "Enter") {
-        evt.stopPropagation();
-        evt.preventDefault();
-        const item = rows.value[currentIndex.value];
-        item && selectData(item, evt);
-      }
-    };
-
-    const scrollToTarget = index => {
-      const container = proxy.$el.querySelector(".main_wrapper");
-      if (container) {
-        const target = container.querySelector(`.row:nth-of-type(${index + 1})`);
-        scrollIntoView(container, target);
-      }
-    };
-
-    const focusSelectedTarget = () => {
-      const [first] = selectedVals.value;
-      if (first) {
-        const index = rows.value.findIndex(
-          data => `${data[valueKey.value]}${separate.value}${data["myUniqueKey"]}` === first
-        );
-        scrollToTarget(index);
-      }
-    };
-
-    const init = () => {
-      currentIndex.value = -1;
-      nextTick(() => {
-        focusSelectedTarget();
-      });
-    };
-
-    onMounted(() => {
-      context.value?.$el?.addEventListener("keydown", handlerKeyDown);
-      init();
-    });
-
-    onBeforeUnmount(() => {
-      context.value?.$el?.removeEventListener("keydown", handlerKeyDown);
-    });
-
-    watch(visible, val => {
-      if (val) {
-        init();
-      }
-    });
-    watch(rows, () => {
-      init();
-    });
-
-    watch(currentIndex, scrollToTarget);
-
-    return {
-      columns,
-      valueKey,
-      getClassList,
-      handlerMouseover,
-      isActive,
-      isDisabled,
-      selectData,
-      handlerKeyDown,
-      showLabel
-    };
-  }
-});
-</script>
-<style lang="less" scoped>
-.select-options_wrapper {
-  // min-height: 100px;
-  padding: 4px 10px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  .add-btn_wrapper {
-    margin: -4px -10px 0;
-    padding: 6px 12px;
-    background: #f4f8fe;
-    border: 1px dashed #2474ff;
-    cursor: pointer;
-    .add-value {
-      color: #2d7aff;
-    }
-  }
-  table {
-    width: 100%;
-    table-layout: fixed;
-  }
-  .header_wrapper {
-    tr th {
-      font-size: 14px;
-      line-height: 20px;
-      padding: 6px;
-      overflow-wrap: break-word;
-      word-break: break-word;
-      font-weight: bold;
-      color: #212121;
-    }
-  }
-  .main_wrapper {
-    // max-height: 300px;
-    overflow-y: auto;
-    .row {
-      cursor: pointer;
-      color: #212121;
-      &:hover:not(.disabled),
-      &.hover {
-        background: #f2f2f2 !important;
-      }
-      &.active {
-        background: #fff3e0 !important;
-        // color: #2563f4 !important;
-      }
-      &.disabled {
-        color: rgba(0, 0, 0, 0.25);
-        cursor: not-allowed;
-        user-select: none;
-      }
-    }
-    .row td {
-      font-size: 14px;
-      line-height: 20px;
-      padding: 6px;
-    }
-  }
-  .main_empty {
-    min-height: 100px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding-bottom: 10px;
-    img {
-      width: 40%;
-      max-width: 150px;
-      margin-bottom: 6px;
-    }
-  }
-}
-</style>

package/src/component/select-pages/index.vue

@@ -1,95 +0,0 @@
-<template>
-  <div class="form-select-btn" @mousedown="e => e.preventDefault()">
-    <a-button
-      :class="{ 'disabled-btn': preDisabled }"
-      type="dashed"
-      block
-      @click.self.stop="handleSearchChangePageProxy('prev', preDisabled)"
-    >
-      <a-icon type="left" /> 上一页
-    </a-button>
-    <a-button
-      :class="{
-        'disabled-btn': nextDisabled
-      }"
-      type="dashed"
-      block
-      @click.self.stop="handleSearchChangePageProxy('next', nextDisabled)"
-    >
-      下一页 <a-icon type="right" />
-    </a-button>
-  </div>
-</template>
-
-<script>
-import {Button,Icon} from 'ant-design-vue'
-export default {
-  name: "selectPages",
-  components:{
-    [Button.name]:Button,
-    [Icon.name]:Icon
-  },
-  props: {
-    searchPageConfig: {
-      type: Object,
-      default: () => ({
-        page: 1,
-        total: 0,
-        hasNextPage: false
-      })
-    },
-    handleSearchChangePage: {
-      type: Function,
-      default: () => {}
-    }
-  },
-  computed: {
-    preDisabled() {
-      return this.searchPageConfig.page <= 1;
-    },
-    nextDisabled() {
-      return this.searchPageConfig.asyncCount == 1
-          ? !this.searchPageConfig.hasNextPage
-          : this.searchPageConfig.page >= this.searchPageConfig.total;
-    }
-  },
-  methods: {
-    handleSearchChangePageProxy(n, disabled) {
-      !disabled && this.handleSearchChangePage(n);
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.disabled-btn {
-  cursor: not-allowed !important;
-  color: rgba(0, 0, 0, 0.25) !important;
-  text-shadow: none !important;
-  box-shadow: none !important;
-}
-.form-select-btn {
-  width: 100%;
-  overflow: hidden;
-  display: flex;
-  justify-content: space-around;
-  border-top: 1px solid #d5d5d5;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-  /deep/ .ant-btn {
-    border: none;
-    border-radius: 0 0 4px 4px;
-    &:hover {
-      opacity: 0.7;
-    }
-  }
-  /deep/ .ant-btn-dashed[disabled] {
-    background-color: #fff !important;
-  }
-
-  .ant-btn + .ant-btn {
-    border-left: 1px solid #d5d5d5;
-    border-bottom-left-radius: 0;
-  }
-}
-</style>

package/src/component/svg/index.vue

@@ -1,59 +0,0 @@
-<!--
- * @Descripttion: ''
- * @version: ''
- * @Author: dengqian
- * @Date: 2019-10-24 10:54:49
- * @LastEditors: dengqian
- * @LastEditTime: 2019-10-24 11:34:07
- -->
-<template>
-  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
-    <title v-if="title">{{ title }}</title>
-    <use :xlink:href="iconName" />
-  </svg>
-</template>
-
-<script>
-// svg图标组件 使用方式
-// 将svg图片放入 /assets/icons/svg/图片名称.svg
-// vue页面中 <svg-icon icon-class="图片名称"></svg-icon>
-export default {
-  name: "SvgIcon",
-  props: {
-    iconClass: {
-      default: "",
-      required: true
-    },
-    title: {
-      type: String,
-      default: ""
-    },
-    className: {
-      type: String,
-      default: ""
-    }
-  },
-  computed: {
-    iconName() {
-      return `#icon-${this.iconClass}`;
-    },
-    svgClass() {
-      if (this.className) {
-        return "svg-icon " + this.className;
-      } else {
-        return "svg-icon";
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-</style>

package/src/core/create.js

@@ -1,6 +0,0 @@
-import { KEY_COMPONENT_NAME } from '@/global/variable';
-export default function(vm) {
-  vm.name = KEY_COMPONENT_NAME + (vm.name || '');
-  vm.mixins = vm.mixins || [];
-  return vm;
-}

package/src/core/event.js

@@ -1,23 +0,0 @@
-function bindEvent(safe, name, event) {
-  typeof safe[name] === 'function' && safe[name]({ value: safe.value, column: safe.column });
-  safe.$emit(name, safe.value, event);
-}
-export default function() {
-  return {
-    methods: {
-      handleFocus(event) {
-        bindEvent(this, 'focus', event);
-      },
-      handleBlur(event) {
-        bindEvent(this, 'blur', event);
-      },
-      handleClick(event) {
-        bindEvent(this, 'click', event);
-      },
-      handleChange(value) {
-        bindEvent(this, 'input', value);
-        bindEvent(this, 'change', value);
-      }
-    }
-  };
-}