cnhis-design-vue 2.1.56 → 2.1.58

package/src/component/player-vod/video-modal.vue

@@ -1,128 +1,128 @@
-<template>
-  <a-modal
-    :visible="previewVisible"
-    :footer="null"
-    @cancel="handleCancel"
-    wrapClassName="image-modal"
-    width="65vw"
-    :bodyStyle="{
-      height: '600px',
-      overflowY: 'auto'
-    }"
-  >
-    <div class="preview-wrap">
-      <div class="preview">
-        <playerVod
-          :playerOptions="playerOptions"
-          v-if="fileList && fileList.length === 0"
-        ></playerVod>
-        <a-carousel v-else arrows :initialSlide="palyerIndex">
-          <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
-            <a-icon type="left-circle" />
-          </div>
-          <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
-            <a-icon type="right-circle" />
-          </div>
-          <template v-for="(v, i) in fileList">
-            <playerVod :playerOptions="v.playerOptions" :key="i"></playerVod>
-          </template>
-        </a-carousel>
-      </div>
-    </div>
-  </a-modal>
-</template>
-
-<script>
-import { Modal, Carousel } from 'ant-design-vue'
-import playerVod from "./index";
-export default {
-  name: "videoModal",
-  data() {
-    return {
-      previewVisible: this.visible
-    };
-  },
-  props: {
-    visible: Boolean,
-    playerOptions: {
-      type: Object,
-      default: () => ({
-        sources: [
-          {
-            type: "video/mp4",
-            src: ""
-          }
-        ]
-      })
-    },
-    fileList: {
-      type: Array,
-      default: () => []
-    },
-    palyerIndex: {
-      type: Number,
-      default: 0
-    }
-  },
-  computed: {},
-  watch: {
-    visible(value) {
-      this.previewVisible = value;
-    }
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {
-    handleCancel() {
-      this.$emit("update:visible", false);
-      this.previewVisible = false;
-    }
-  },
-  components: {
-    playerVod,
-    AModal: Modal,
-    [Carousel.name]: Carousel
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.preview-wrap {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .preview {
-    padding: 20px 0;
-    width: 60vw;
-    height: 100%;
-    // height: 60vh;
-    // display: flex;
-    // justify-content: center;
-    // align-items: center;
-  }
-}
-.ant-carousel /deep/ .custom-slick-arrow {
-  width: 25px;
-  height: 25px;
-  font-size: 25px;
-  color: #fff;
-  background-color: rgba(31, 45, 61, 0.11);
-  opacity: 0.5;
-}
-.ant-carousel /deep/ .custom-slick-arrow:before {
-  display: none;
-}
-.ant-carousel /deep/ .custom-slick-arrow:hover {
-  opacity: 0.5;
-  color: #fff;
-}
-</style>
+<template>
+  <a-modal
+    :visible="previewVisible"
+    :footer="null"
+    @cancel="handleCancel"
+    wrapClassName="image-modal"
+    width="65vw"
+    :bodyStyle="{
+      height: '600px',
+      overflowY: 'auto'
+    }"
+  >
+    <div class="preview-wrap">
+      <div class="preview">
+        <playerVod
+          :playerOptions="playerOptions"
+          v-if="fileList && fileList.length === 0"
+        ></playerVod>
+        <a-carousel v-else arrows :initialSlide="palyerIndex">
+          <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
+            <a-icon type="left-circle" />
+          </div>
+          <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
+            <a-icon type="right-circle" />
+          </div>
+          <template v-for="(v, i) in fileList">
+            <playerVod :playerOptions="v.playerOptions" :key="i"></playerVod>
+          </template>
+        </a-carousel>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { Modal, Carousel } from 'ant-design-vue'
+import playerVod from "./index";
+export default {
+  name: "videoModal",
+  data() {
+    return {
+      previewVisible: this.visible
+    };
+  },
+  props: {
+    visible: Boolean,
+    playerOptions: {
+      type: Object,
+      default: () => ({
+        sources: [
+          {
+            type: "video/mp4",
+            src: ""
+          }
+        ]
+      })
+    },
+    fileList: {
+      type: Array,
+      default: () => []
+    },
+    palyerIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {},
+  watch: {
+    visible(value) {
+      this.previewVisible = value;
+    }
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  activated() {},
+  methods: {
+    handleCancel() {
+      this.$emit("update:visible", false);
+      this.previewVisible = false;
+    }
+  },
+  components: {
+    playerVod,
+    AModal: Modal,
+    [Carousel.name]: Carousel
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.preview-wrap {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .preview {
+    padding: 20px 0;
+    width: 60vw;
+    height: 100%;
+    // height: 60vh;
+    // display: flex;
+    // justify-content: center;
+    // align-items: center;
+  }
+}
+.ant-carousel /deep/ .custom-slick-arrow {
+  width: 25px;
+  height: 25px;
+  font-size: 25px;
+  color: #fff;
+  background-color: rgba(31, 45, 61, 0.11);
+  opacity: 0.5;
+}
+.ant-carousel /deep/ .custom-slick-arrow:before {
+  display: none;
+}
+.ant-carousel /deep/ .custom-slick-arrow:hover {
+  opacity: 0.5;
+  color: #fff;
+}
+</style>

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

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