cnhis-design-vue 2.1.78 → 2.1.80

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

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