cnhis-design-vue 3.1.24-beta.7 → 3.1.24-beta.8

package/es/components/select-label/index.js

@@ -0,0 +1,15 @@
+import { COMPONENT_NAMESPACE } from '../../shared/global/variable.js';
+import { safeComponentRegister } from '../../shared/utils/index.js';
+import script from './src/SelectLabel.js';
+import scriptFormContent from './src/LabelFormContent.js';
+
+const SelectLabel = script;
+const LabelFormContent = scriptFormContent;
+SelectLabel.install = function(app) {
+  safeComponentRegister(app, SelectLabel, COMPONENT_NAMESPACE + "SelectLabel");
+};
+LabelFormContent.install = function(app) {
+  safeComponentRegister(app, LabelFormContent, COMPONENT_NAMESPACE + "LabelFormContent");
+};
+
+export { LabelFormContent as CLabelFormContent, SelectLabel as default };

package/es/components/select-label/src/LabelFormContent.js

@@ -0,0 +1,447 @@
+import { defineComponent, ref, reactive, computed, watch, openBlock, createElementBlock, unref, createCommentVNode, withDirectives, createElementVNode, createVNode, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, normalizeClass, vShow, nextTick } from 'vue';
+import { useMessage, NTabs, NTabPane, NAnchor, NAnchorLink } from 'naive-ui';
+import labelClassify from './components/label-classify.js';
+import { handleLabelColor } from '../../../shared/utils/vexutils.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+import XEUtils from 'xe-utils';
+
+const _hoisted_1 = {
+  key: 0,
+  class: "label-disable-wrap"
+};
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("p", { class: "label-disable-title" }, "\u65E0\u53EF\u9009\u6807\u7B7E", -1);
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("p", { class: "label-disable-desc" }, "\u8BF7\u8054\u7CFB\u7BA1\u7406\u5458\u8FDB\u884C\u6807\u7B7E\u7BA1\u7406\u8BBE\u7F6E", -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+const _hoisted_5 = { style: { "height": "100%" } };
+const _hoisted_6 = { class: "label-wrap" };
+const _hoisted_7 = {
+  key: 0,
+  class: "explicit-continer"
+};
+const _hoisted_8 = { slot: "tab" };
+const _hoisted_9 = { class: "edit-label-type" };
+const _hoisted_10 = { class: "explicit-label-wrap left-label-wrap" };
+const _hoisted_11 = { class: "edit-label-content" };
+const _hoisted_12 = ["id"];
+const _hoisted_13 = { class: "edit-label-type" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LabelFormContent",
+  props: {
+    item: { default: () => ({}) },
+    isEdit: { type: Boolean, default: true },
+    isLock: { type: Boolean, default: false },
+    labelSelectedList: null,
+    isChangeWindow: { type: Boolean },
+    getLabelList: { type: Function, default: () => Promise.resolve({ rows: [] }) },
+    deleteLabel: { type: Function, default: () => Promise.resolve({ status: true }) },
+    saveLabelItem: { type: Function, default: () => Promise.resolve({ status: true }) },
+    labelOptions: null,
+    sourceType: { default: "" },
+    explicit: { type: Boolean, default: false }
+  },
+  emits: ["explicitOnChange", "change", "updateLabelData"],
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const $message = useMessage();
+    const labelFormContent = ref(null);
+    const state = reactive({
+      editLabelItem: {},
+      inited: false,
+      labelSelectedEdit: [],
+      labelAnchorKey: "",
+      cacheAnchorKey: "",
+      labelConfig: {}
+    });
+    let theKey = ref(0);
+    const allDisable = computed(() => {
+      if (!state.inited)
+        return false;
+      let labelObj = state.labelConfig;
+      if (!labelObj)
+        return true;
+      let keys = Object.keys(labelObj);
+      return keys.every((key) => {
+        return !labelObj[key].itemList;
+      });
+    });
+    const SelectedList = computed(() => {
+      let list = [].concat(...state.labelSelectedEdit, ...props.labelSelectedList);
+      return uniqArrObj(list, "labelId");
+    });
+    const selectLabelId = computed(() => {
+      const list = SelectedList.value || [];
+      if (Array.isArray(list)) {
+        return list.map((v) => v.labelId);
+      }
+      return [];
+    });
+    const uniqArrObj = (arr, name) => {
+      let obj = {};
+      return arr.reduce((cur, next) => {
+        obj[next[name]] ? "" : obj[next[name]] = cur.push(next);
+        return cur;
+      }, []);
+    };
+    const handleLabelInit = () => {
+      var _a;
+      if (props.isLock)
+        return;
+      const copy = JSON.parse(JSON.stringify(props.labelOptions));
+      for (let key in copy) {
+        let typeId = ((_a = copy[key]) == null ? void 0 : _a.typeId) || "";
+        Object.assign(copy[key], {
+          curKey: `${key}_${typeId}}`
+        });
+      }
+      state.labelConfig = copy;
+      nextTick(() => {
+        hanldeBackfill();
+        let defKey = void 0;
+        if (props.explicit && state.inited) {
+          defKey = state.labelAnchorKey;
+        }
+        setLabelDeafultClick(state.labelConfig, defKey);
+        state.inited = true;
+      });
+    };
+    const hanldeBackfill = () => {
+      state.labelSelectedEdit = SelectedList.value;
+      if (typeof state.labelConfig === "object") {
+        let keys = Object.keys(state.labelConfig || {});
+        keys.forEach((k) => {
+          var _a;
+          let itemList = ((_a = state.labelConfig[k]) == null ? void 0 : _a.itemList) || [];
+          if (itemList.length) {
+            itemList.forEach((v) => {
+              if (selectLabelId.value.includes(v.labelId)) {
+                v.isSelect = true;
+              }
+            });
+          }
+        });
+      }
+    };
+    const setLabelDeafultClick = (labelObj, deafulteKey) => {
+      if (!labelObj)
+        return;
+      let objKeys = Object.keys(labelObj) || [];
+      if (!objKeys.length)
+        return;
+      let curKey = labelObj[objKeys[0]].curKey;
+      if (deafulteKey && typeof deafulteKey === "string") {
+        let [q] = deafulteKey.split("~");
+        let f = objKeys.find((k) => labelObj[k] && labelObj[k].curKey && labelObj[k].curKey.includes(q));
+        if (f) {
+          curKey = labelObj[f].curKey;
+        }
+      }
+      if (!curKey)
+        return;
+      labelAnchorTabsOnChange(curKey);
+    };
+    const resetShowAdd = () => {
+      let { labelObj } = state.editLabelItem;
+      if (!labelObj || !Object.keys(labelObj).length)
+        return;
+      for (let key in labelObj) {
+        let item = labelObj[key];
+        Object.assign(item, {
+          showAdd: false
+        });
+      }
+    };
+    const handleAddLabel = ($event, item) => {
+      item.showAdd = true;
+      const nextInput = $event.target.nextElementSibling;
+      nextTick(() => {
+        var _a;
+        (_a = nextInput == null ? void 0 : nextInput.firstChild) == null ? void 0 : _a.focus();
+      });
+    };
+    const handleLabelForm = (cb) => {
+      const selectList = [...state.labelSelectedEdit || []];
+      cb(selectList);
+    };
+    const hanldeBlur = ($event, d) => {
+      setTimeout(() => {
+        if (d.addVal) {
+          handleReqSaveLabel(d);
+        } else {
+          d.showAdd = false;
+        }
+      }, 150);
+    };
+    const clearaddVal = (e, v) => {
+      v.addVal = "";
+      v.showAdd = false;
+    };
+    const handleReqSaveLabel = async (v) => {
+      var _a;
+      let privateLabel = v.itemList.filter((item) => {
+        return !(item.isPublic && item.isPublic == 1);
+      });
+      let hasRepetition = !!privateLabel.find((item) => {
+        return item.labelName === v.addVal;
+      });
+      if (hasRepetition) {
+        $message.error("\u6807\u7B7E\u540D\u79F0\u91CD\u590D!");
+        return false;
+      }
+      let parentColor = "";
+      if ((_a = v.itemList) == null ? void 0 : _a.length) {
+        parentColor = v.itemList[0].parentColor || v.parentColor || "";
+      } else {
+        parentColor = (v == null ? void 0 : v.parentColor) || "";
+      }
+      const params = {
+        type: v.typeId,
+        name: v.addVal,
+        parentColor
+      };
+      const { status } = await props.saveLabelItem(params, v);
+      if (status) {
+        $message.success("\u6DFB\u52A0\u6210\u529F\uFF01");
+        emit("updateLabelData");
+        v.showAdd = false;
+      }
+    };
+    const handleLabelChange = (value, d, labelGroup, v) => {
+      var _a;
+      const list = labelGroup.itemList;
+      const multipleChoice = labelGroup.multipleChoice;
+      let selectedList = ((_a = state.labelSelectedEdit) == null ? void 0 : _a.length) && XEUtils.clone(state.labelSelectedEdit, true) || [];
+      if (value) {
+        if (selectedList.some((n) => n.labelId == d.labelId)) {
+          return;
+        }
+        if (multipleChoice == 2) {
+          const { typeId, labelId } = d;
+          selectedList = selectedList.filter((item) => item.typeId !== typeId);
+          list.forEach((item) => {
+            if (item.labelId !== labelId) {
+              item.isSelect = false;
+            }
+          });
+        }
+        selectedList.push(d);
+      } else {
+        const fdIndex = selectedList.findIndex((n) => n.labelId == d.labelId);
+        if (fdIndex != -1) {
+          selectedList.splice(fdIndex, 1);
+        }
+      }
+      state.labelSelectedEdit = [...selectedList];
+      theKey.value++;
+      if (props.explicit) {
+        emit("explicitOnChange", [...state.labelSelectedEdit]);
+      }
+    };
+    const handleDelLabel = async (v) => {
+      const { status } = await props.deleteLabel(v, props.item);
+      if (status) {
+        $message.success("\u5220\u9664\u6210\u529F\uFF01");
+        for (const label in state.labelConfig) {
+          const delIndex = state.labelConfig[label].itemList.findIndex((k) => k.labelId == v.labelId);
+          delIndex != -1 && state.labelConfig[label].itemList.splice(delIndex, 1);
+        }
+        const selectList = state.labelSelectedEdit || [];
+        const selectObj = props.labelSelectedList || [];
+        if (selectList && selectList.length) {
+          const delIndex = selectList.findIndex((n) => n.labelId == v.labelId);
+          delIndex != -1 && selectList.splice(delIndex, 1);
+        }
+        if (selectObj && selectObj.length) {
+          const delKey = selectObj.findIndex((n) => n.labelId == v.labelId);
+          delKey != -1 && selectObj.splice(delKey, 1);
+          emit("change", [...selectObj], props.item);
+        }
+        emit("updateLabelData");
+      } else {
+        $message.warning("\u5220\u9664\u5931\u8D25");
+      }
+    };
+    const labelAnchorTabsOnChange = (key) => {
+      if (!key)
+        return;
+      setTimeout(() => {
+        let anchorKey = "#" + key;
+        let curLink;
+        curLink = labelFormContent.value.querySelector("a[href='" + anchorKey + "']");
+        curLink && curLink.click();
+        state.labelAnchorKey = key;
+      }, 32);
+    };
+    const handleAnchorClick = (e) => {
+      e.preventDefault();
+    };
+    const anchorOnChange = (link) => {
+      if (!link)
+        return;
+      let curLink = link.slice(1);
+      state.cacheAnchorKey = curLink;
+    };
+    const anchorGetContainer = () => {
+      var _a;
+      return (_a = labelFormContent.value) == null ? void 0 : _a.querySelector(".right-label-wrap");
+    };
+    const handleResetOptions = () => {
+    };
+    const hanldeSetLabelItem = (id, status) => {
+      if (typeof state.labelConfig === "object") {
+        let keys = Object.keys(state.labelConfig || {});
+        keys.forEach((k) => {
+          var _a;
+          let itemList = ((_a = state.labelConfig[k]) == null ? void 0 : _a.itemList) || [];
+          if (itemList.length) {
+            itemList.forEach((v) => {
+              if (id == v.labelId) {
+                v.isSelect = status;
+              }
+            });
+          }
+        });
+      }
+      if (false === status) {
+        if (Array.isArray(state.labelSelectedEdit)) {
+          const fdIndex = state.labelSelectedEdit.findIndex((n) => n.labelId == id);
+          if (fdIndex != -1) {
+            state.labelSelectedEdit.splice(fdIndex, 1);
+          }
+        }
+      }
+    };
+    watch(
+      () => props.labelOptions,
+      (val) => {
+        if (!val)
+          return;
+        handleLabelInit();
+      },
+      { immediate: true, deep: true }
+    );
+    expose({
+      resetShowAdd,
+      handleLabelForm,
+      handleResetOptions,
+      hanldeSetLabelItem
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "c-label-form-content",
+        ref_key: "labelFormContent",
+        ref: labelFormContent
+      }, [
+        unref(allDisable) ? (openBlock(), createElementBlock("div", _hoisted_1, _hoisted_4)) : createCommentVNode("v-if", true),
+        withDirectives(createElementVNode("div", _hoisted_5, [
+          createElementVNode("div", _hoisted_6, [
+            createCommentVNode(" \u8868\u5355\u5185\u5D4C\u6253\u5F00\u6807\u7B7E\u7EC4\u4EF6\u7684\u6837\u5F0F "),
+            __props.explicit ? (openBlock(), createElementBlock("div", _hoisted_7, [
+              createVNode(unref(NTabs), {
+                value: state.labelAnchorKey,
+                type: "card",
+                onChange: labelAnchorTabsOnChange,
+                "tab-position": "top"
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(state.labelConfig, (v, i) => {
+                    return openBlock(), createBlock(unref(NTabPane), {
+                      name: v.curKey
+                    }, {
+                      default: withCtx(() => [
+                        createElementVNode("span", _hoisted_8, [
+                          createTextVNode(toDisplayString(i) + " ", 1),
+                          createElementVNode("span", _hoisted_9, "(" + toDisplayString(v.multipleChoice == 2 ? "\u5355" : "\u591A") + "\u9009)", 1)
+                        ]),
+                        createElementVNode("div", _hoisted_10, [
+                          createElementVNode("div", _hoisted_11, [
+                            createVNode(labelClassify, {
+                              classifyItem: v,
+                              handleLabelChange,
+                              handleLabelColor: unref(handleLabelColor),
+                              handleDelLabel,
+                              hanldeBlur,
+                              handleAddLabel,
+                              clearaddVal,
+                              isEdit: __props.isEdit,
+                              sourceType: __props.sourceType
+                            }, null, 8, ["classifyItem", "handleLabelColor", "isEdit", "sourceType"])
+                          ])
+                        ])
+                      ]),
+                      _: 2
+                    }, 1032, ["name"]);
+                  }), 256))
+                ]),
+                _: 1
+              }, 8, ["value"])
+            ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createCommentVNode(" \u666E\u901A\u6807\u7B7E\u6837\u5F0F "),
+              createElementVNode("div", {
+                class: normalizeClass(["left-label-wrap", {
+                  "total-left-label-wrap": __props.isChangeWindow
+                }])
+              }, [
+                createVNode(unref(NAnchor), {
+                  "offset-target": anchorGetContainer,
+                  type: "block",
+                  onClick: handleAnchorClick,
+                  onChange: anchorOnChange
+                }, {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(state.labelConfig, (v, i) => {
+                      return openBlock(), createBlock(unref(NAnchorLink), {
+                        href: `#${v.curKey}`,
+                        title: String(i)
+                      }, null, 8, ["href", "title"]);
+                    }), 256))
+                  ]),
+                  _: 1
+                })
+              ], 2)
+            ], 2112)),
+            !__props.explicit ? (openBlock(), createElementBlock("div", {
+              key: 2,
+              class: normalizeClass(["right-label-wrap", {
+                "total-right-label-wrap": __props.isChangeWindow
+              }])
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(state.labelConfig, (v, k) => {
+                return openBlock(), createElementBlock("div", {
+                  key: k,
+                  class: "edit-label-content"
+                }, [
+                  createElementVNode("div", {
+                    class: "edit-label",
+                    id: v.curKey
+                  }, [
+                    createTextVNode(toDisplayString(k) + " ", 1),
+                    createElementVNode("span", _hoisted_13, "(" + toDisplayString(v.multipleChoice == 2 ? "\u5355" : "\u591A") + "\u9009)", 1)
+                  ], 8, _hoisted_12),
+                  createVNode(labelClassify, {
+                    classifyItem: v,
+                    handleLabelChange,
+                    handleLabelColor: unref(handleLabelColor),
+                    handleDelLabel,
+                    hanldeBlur,
+                    handleAddLabel,
+                    clearaddVal,
+                    isEdit: __props.isEdit,
+                    sourceType: __props.sourceType
+                  }, null, 8, ["classifyItem", "handleLabelColor", "isEdit", "sourceType"])
+                ]);
+              }), 128))
+            ], 2)) : createCommentVNode("v-if", true)
+          ])
+        ], 512), [
+          [vShow, !unref(allDisable)]
+        ])
+      ], 512);
+    };
+  }
+});
+var scriptFormContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "LabelFormContent.vue"]]);
+
+export { scriptFormContent as default };