sctj-components 1.0.62 → 1.0.64

package/lib/sctj-components.es.js

@@ -1290,7 +1290,7 @@ const _sfc_main$p = {
     };
   }
 };
-const index_vue_vue_type_style_index_0_scoped_a2fe1763_lang = "";
+const index_vue_vue_type_style_index_0_scoped_7b45925b_lang = "";
 const _hoisted_1$i = { class: "el-tree-select" };
 const _sfc_main$o = {
   __name: "index",
@@ -1311,9 +1311,22 @@ const _sfc_main$o = {
         return false;
       }
     },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    },
+    valueFormat: {
+      type: String,
+      default: "string",
+      validator: (value) => ["array", "string"].includes(value)
+    },
     modelValue: {
-      type: [String, Number],
-      default: ""
+      type: [String, Number, Array],
+      default: () => null
     },
     options: {
       type: Array,
@@ -1328,36 +1341,127 @@ const _sfc_main$o = {
   setup(__props, { emit }) {
     const props = __props;
     const { proxy } = getCurrentInstance();
+    const TREE_OPTION_VALUE = "__SCTJ_TREE_SELECT__";
+    function stringToArray(str) {
+      if (typeof str !== "string")
+        return [];
+      return str.split(",").map((item) => item.trim()).filter((item) => item !== "");
+    }
+    function arrayToString(arr) {
+      if (!Array.isArray(arr))
+        return "";
+      return arr.join(",");
+    }
     const valueId = computed$1({
-      get: () => props.modelValue,
+      get: () => {
+        if (props.multiple) {
+          if (Array.isArray(props.modelValue)) {
+            return props.modelValue;
+          } else if (typeof props.modelValue === "string") {
+            return stringToArray(props.modelValue);
+          } else if (props.modelValue !== null && props.modelValue !== void 0 && props.modelValue !== "") {
+            return [props.modelValue];
+          } else {
+            return [];
+          }
+        } else {
+          if (props.modelValue === null || props.modelValue === void 0 || props.modelValue === "") {
+            return "";
+          }
+          return String(props.modelValue);
+        }
+      },
       set: (val) => {
-        emit("update:modelValue", val);
+        if (props.multiple) {
+          if (props.valueFormat === "string") {
+            emit("update:modelValue", arrayToString(val));
+          } else {
+            emit("update:modelValue", val);
+          }
+        } else {
+          emit("update:modelValue", val === null || val === void 0 || val === "" ? "" : String(val));
+        }
       }
     });
     const valueTitle = ref$1("");
+    const selectedOptions = ref$1([]);
     const defaultExpandedKey = ref$1([]);
     function initHandle() {
       nextTick(() => {
+        if (!proxy.$refs.selectTree)
+          return;
         const selectedValue = valueId.value;
-        if (selectedValue !== null && typeof selectedValue !== "undefined") {
-          const node = proxy.$refs.selectTree.getNode(selectedValue);
-          if (node) {
-            valueTitle.value = node.data[props.objMap.label];
-            proxy.$refs.selectTree.setCurrentKey(selectedValue);
-            defaultExpandedKey.value = [selectedValue];
+        if (props.multiple) {
+          if (Array.isArray(selectedValue) && selectedValue.length > 0) {
+            const titles = [];
+            const opts = [];
+            const expandedKeys = [];
+            selectedValue.forEach((val) => {
+              const node = proxy.$refs.selectTree.getNode(val);
+              if (node) {
+                const label = node.data[props.objMap.label];
+                titles.push(label);
+                opts.push({ value: val, label });
+                expandedKeys.push(val);
+              } else {
+                opts.push({ value: val, label: String(val) });
+              }
+            });
+            valueTitle.value = titles.join(",");
+            selectedOptions.value = opts;
+            proxy.$refs.selectTree.setCheckedKeys(selectedValue);
+            defaultExpandedKey.value = expandedKeys;
+          } else {
+            valueTitle.value = "";
+            selectedOptions.value = [];
+            proxy.$refs.selectTree.setCheckedKeys([]);
+            defaultExpandedKey.value = [];
           }
         } else {
-          clearHandle();
+          if (selectedValue !== null && typeof selectedValue !== "undefined" && selectedValue !== "") {
+            const node = proxy.$refs.selectTree.getNode(selectedValue);
+            if (node) {
+              valueTitle.value = node.data[props.objMap.label];
+              proxy.$refs.selectTree.setCurrentKey(selectedValue);
+              defaultExpandedKey.value = [selectedValue];
+            }
+          } else {
+            clearHandle();
+          }
         }
       });
     }
-    function handleNodeClick(node) {
-      valueTitle.value = node[props.objMap.label];
-      valueId.value = node[props.objMap.value];
+    function handleNodeClick(data, node) {
+      if (props.multiple) {
+        return;
+      }
+      valueTitle.value = data[props.objMap.label];
+      const nodeValue = data[props.objMap.value];
+      valueId.value = nodeValue === null || nodeValue === void 0 ? "" : String(nodeValue);
       defaultExpandedKey.value = [];
       proxy.$refs.treeSelect.blur();
       selectFilterData("");
     }
+    function handleCheck(data, checkedInfo) {
+      if (!props.multiple)
+        return;
+      const checkedKeys = checkedInfo.checkedKeys || [];
+      const titles = [];
+      const opts = [];
+      checkedKeys.forEach((key) => {
+        const node = proxy.$refs.selectTree.getNode(key);
+        if (node) {
+          const label = node.data[props.objMap.label];
+          titles.push(label);
+          opts.push({ value: key, label });
+        } else {
+          opts.push({ value: key, label: String(key) });
+        }
+      });
+      valueId.value = checkedKeys;
+      valueTitle.value = titles.join(",");
+      selectedOptions.value = opts;
+    }
     function selectFilterData(val) {
       proxy.$refs.selectTree.filter(val);
     }
@@ -1367,8 +1471,17 @@ const _sfc_main$o = {
       return data[props.objMap["label"]].indexOf(value) !== -1;
     }
     function clearHandle() {
-      valueTitle.value = "";
-      valueId.value = "";
+      if (props.multiple) {
+        valueTitle.value = "";
+        valueId.value = [];
+        selectedOptions.value = [];
+        if (proxy.$refs.selectTree) {
+          proxy.$refs.selectTree.setCheckedKeys([]);
+        }
+      } else {
+        valueTitle.value = "";
+        valueId.value = "";
+      }
       defaultExpandedKey.value = [];
       clearSelected();
     }
@@ -1379,12 +1492,15 @@ const _sfc_main$o = {
     onMounted$1(() => {
       initHandle();
     });
+    watch(() => props.modelValue, () => {
+      initHandle();
+    }, { immediate: true });
     watch(valueId, () => {
       initHandle();
     });
     return (_ctx, _cache) => {
-      const _component_el_tree = resolveComponent("el-tree");
       const _component_el_option = resolveComponent("el-option");
+      const _component_el_tree = resolveComponent("el-tree");
       const _component_el_select = resolveComponent("el-select");
       return openBlock(), createElementBlock("div", _hoisted_1$i, [
         createVNode(_component_el_select, {
@@ -1394,14 +1510,31 @@ const _sfc_main$o = {
           ref: "treeSelect",
           filterable: true,
           clearable: true,
+          multiple: __props.multiple,
+          "collapse-tags": "",
+          "collapse-tags-tooltip": "",
           onClear: clearHandle,
           "filter-method": selectFilterData,
           placeholder: __props.placeholder
         }, {
           default: withCtx(() => [
-            createVNode(_component_el_option, {
+            __props.multiple ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selectedOptions.value, (opt) => {
+              return openBlock(), createBlock(_component_el_option, {
+                key: String(opt.value),
+                value: opt.value,
+                label: opt.label,
+                style: { "display": "none" }
+              }, null, 8, ["value", "label"]);
+            }), 128)) : (openBlock(), createBlock(_component_el_option, {
+              key: 1,
               value: unref(valueId),
-              label: valueTitle.value
+              label: valueTitle.value,
+              style: { "display": "none" }
+            }, null, 8, ["value", "label"])),
+            createVNode(_component_el_option, {
+              value: TREE_OPTION_VALUE,
+              label: "",
+              disabled: true
             }, {
               default: withCtx(() => [
                 createVNode(_component_el_tree, {
@@ -1414,19 +1547,22 @@ const _sfc_main$o = {
                   "expand-on-click-node": false,
                   "default-expanded-keys": defaultExpandedKey.value,
                   "filter-node-method": filterNode,
-                  onNodeClick: handleNodeClick
-                }, null, 8, ["accordion", "data", "props", "node-key", "default-expanded-keys"])
+                  "show-checkbox": __props.multiple,
+                  "check-strictly": __props.checkStrictly,
+                  onNodeClick: handleNodeClick,
+                  onCheck: handleCheck
+                }, null, 8, ["accordion", "data", "props", "node-key", "default-expanded-keys", "show-checkbox", "check-strictly"])
               ]),
               _: 1
-            }, 8, ["value", "label"])
+            })
           ]),
           _: 1
-        }, 8, ["modelValue", "placeholder"])
+        }, 8, ["modelValue", "multiple", "placeholder"])
       ]);
     };
   }
 };
-const SCTJTreeSelect = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-a2fe1763"]]);
+const SCTJTreeSelect = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-7b45925b"]]);
 const _sfc_main$n = {
   __name: "index",
   props: {
@@ -1442,6 +1578,11 @@ const _sfc_main$n = {
       type: Boolean,
       default: false
     },
+    valueFormat: {
+      type: String,
+      default: "string",
+      validator: (value) => ["array", "string"].includes(value)
+    },
     valueProp: {
       type: String,
       default: "value"
@@ -1457,13 +1598,28 @@ const _sfc_main$n = {
     const selectValue = computed$1({
       get() {
         if (props.multiple) {
-          return Array.isArray(props.modelValue) ? props.modelValue : props.modelValue.split(",").filter((item) => item !== "");
+          if (Array.isArray(props.modelValue)) {
+            return props.modelValue;
+          } else if (typeof props.modelValue === "string") {
+            return props.modelValue.split(",").filter((item) => item !== "");
+          } else if (props.modelValue != null && props.modelValue !== void 0) {
+            return [props.modelValue];
+          }
+          return [];
         } else {
           return props.modelValue;
         }
       },
       set(val) {
-        emit("update:modelValue", Array.isArray(val) ? val.join(",") : val);
+        if (props.multiple) {
+          if (props.valueFormat === "array") {
+            emit("update:modelValue", Array.isArray(val) ? val : val ? [val] : []);
+          } else {
+            emit("update:modelValue", Array.isArray(val) ? val.join(",") : val != null ? val : "");
+          }
+        } else {
+          emit("update:modelValue", val);
+        }
       }
     });
     return (_ctx, _cache) => {
@@ -1473,6 +1629,8 @@ const _sfc_main$n = {
         modelValue: unref(selectValue),
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(selectValue) ? selectValue.value = $event : null),
         placeholder: "\u8BF7\u9009\u62E9",
+        "collapse-tags": "",
+        "collapse-tags-tooltip": "",
         multiple: __props.multiple,
         filterable: "",
         clearable: ""