ct-component-plus 0.0.42 → 0.0.43

package/packages/components/cascader/src/cascader.vue

@@ -1,248 +1,248 @@
-<template>
-  <el-cascader
-    ref="cascaderRef"
-    :class="[
-      ns.b(),
-      ns.is('disabled', disabled),
-      ns.is('filterable', filterable),
-    ]"
-    v-model="showValue"
-    :props="propsShow"
-    :options="optionsShow"
-    :show-all-levels="showAllLevels"
-    :filterable="filterable"
-    :clearable="clearable"
-    :disabled="disabled"
-    :popper-class="popperClassShow"
-    v-bind="{ ...$attrs, ...rawAttr }"
-  />
-  <!-- <Teleport :to="appendPanelDom">
-    <span>大写的六</span>
-  </Teleport> -->
-</template>
-
-<script setup>
-import {
-  onMounted,
-  computed,
-  ref,
-  watch,
-  inject,
-  watchEffect,
-  nextTick,
-} from "vue";
-import { cascaderEmits, cascaderProps } from "./index";
-import { useNamespace, useBuriedParams } from "../../../hooks";
-import { isArray, isFunction } from "../../../utils";
-const props = defineProps(cascaderProps);
-const emit = defineEmits(cascaderEmits);
-const baseDao = inject("$ctBaseDao");
-const serviceConfig = inject("$ctServiceConfig");
-
-const ns = useNamespace("cascader");
-const cascaderRef = ref(null);
-const checkedText = ref("");
-const propsShow = computed(() => {
-  return {
-    emitPath: false,
-    ...(props.props || {}),
-    multiple: props.multiple || props.props?.multiple || false,
-    label: props.mapObj?.label || "label",
-    value: props.mapObj?.value || "value",
-    children: props.mapObj?.children || "children",
-  };
-});
-const optionsByApi = ref([]);
-const optionsShow = computed(() => {
-  return optionsByApi.value.length ? optionsByApi.value : props.options;
-});
-const showValue = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(newValue) {
-    emit("update:modelValue", newValue);
-  },
-});
-watch(showValue, async (newValue) => {
-  if (isFunction(props.cbs.change)) {
-    await nextTick(); //这里得等一个nextTick，否则会拿不到最新选中的值
-    const checkedNodes = cascaderRef.value?.getCheckedNodes() || [];
-    const dataList = checkedNodes.map((item) => {
-      return item.data;
-    });
-    props.cbs.change(dataList, cascaderRef.value);
-  }
-});
-const popperClassShow = computed(() => {
-  let popperClass = ns.e("dropdown");
-  popperClass += props.popperClass || "";
-  if (propsShow.value.multiple) {
-    popperClass += " " + ns.is("multiple");
-  }
-  return popperClass;
-});
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    getCheckedText();
-  }
-);
-const appendPanelDom = document.createElement("div");
-
-const getCheckedText = () => {
-  const getCheckedNodes = cascaderRef.value?.getCheckedNodes;
-  if (getCheckedNodes) {
-    const textArr = getCheckedNodes();
-    if (props.showAllLevels)
-      checkedText.value = textArr
-        .map((item) => {
-          if (isArray(item.pathLabels))
-            return item.pathLabels.join(props.separator);
-          return item.label;
-        })
-        .join(props.separatorMultiple);
-    else {
-      checkedText.value = textArr
-        .map((item) => item.label)
-        .join(props.separatorMultiple);
-    }
-  }
-};
-
-const appendDom2Panel = () => {
-  const dom = cascaderRef.value?.contentRef;
-  if (dom) {
-    const referenceNode = dom?.children[0];
-    // appendPanelDom = document.createElement("div");
-    appendPanelDom.setAttribute("id", "cascader-panel-append");
-    dom.insertBefore(appendPanelDom, referenceNode);
-    // dom.appendChild(div);
-  }
-};
-useBuriedParams(props, emit);
-watchEffect(async () => {
-  // 通过api获取数据，会监听api以及serviceParams的改变（收集到的依赖改变）都会触发重新查询
-  const cbs = props.cbs || {};
-  if (props.api && baseDao) {
-    try {
-      const method = props.serviceMethod || serviceConfig.defaultMethod;
-      let params = props.serviceParams || {};
-      if (isFunction(cbs.beforeSearch)) {
-        const paramsHandle = await cbs.beforeSearch(params);
-        if (paramsHandle === false) return;
-        params = paramsHandle || params;
-      }
-
-      baseDao[method](props.api, params).then((res) => {
-        const mapObj = props.mapObj || {};
-        const { list } = mapObj; //其他参数放入propsShow
-        let data = [];
-        if (list) {
-          data = res[list];
-        } else {
-          data = res;
-        }
-
-        optionsByApi.value = data;
-        if (isFunction(cbs.afterSearch)) {
-          cbs.afterSearch(res, optionsByApi, showValue);
-        }
-      });
-    } catch (error) {}
-  }
-  if (isFunction(cbs.defineSearch)) {
-    try {
-      const defineSearchHandle = await cbs.defineSearch(
-        optionsByApi,
-        showValue
-      );
-      if (defineSearchHandle === false) return;
-      if (defineSearchHandle) {
-        optionsByApi.value = defineSearchHandle;
-      }
-    } catch (error) {}
-  }
-});
-
-defineExpose({
-  ref: cascaderRef,
-});
-onMounted(() => {
-  appendDom2Panel();
-});
-</script>
-<style lang='less'>
-.ct-cascader {
-  width: var(--ct-component-width);
-  --ct-cascader-inner-height: var(--ct-component-inner-height);
-  &.is-filterable {
-    .el-cascader__tags {
-      &:focus-within {
-        .el-tag {
-          display: none;
-        }
-      }
-    }
-  }
-  .el-cascader__tags {
-    display: inline-flex;
-    // display: inline-block;
-    align-items: center;
-    flex-wrap: nowrap;
-    height: var(--ct-cascader-inner-height);
-    padding-left: var(--ct-component-inner-padding);
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    .el-tag {
-      display: inline;
-      height: auto;
-      padding: 0;
-      margin: 0;
-      background-color: inherit;
-      font-size: var(--ct-font-size);
-      color: var(--ct-color-black);
-      &:not(:last-of-type)::after {
-        content: "、";
-      }
-    }
-    .el-tag__close {
-      display: none;
-    }
-  }
-  &__dropdown {
-    &:not(.is-multiple) {
-      .el-cascader__suggestion-item {
-        &.is-checked {
-          .el-icon {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-  .el-cascader__search-input {
-    position: absolute;
-    left: var(--ct-component-inner-padding);
-    top: 50%;
-    transform: translateY(-50%);
-    height: var(--ct-cascader-inner-height);
-    width: calc(100% - var(--ct-component-inner-padding));
-    font-size: var(--ct-font-size);
-    margin: 0;
-  }
-  .el-input__wrapper {
-    position: relative;
-    .el-input__inner {
-      height: var(--ct-cascader-inner-height) !important;
-    }
-    &::after {
-      position: absolute;
-      content: v-bind(checkedText);
-      // content: "11111";
-      left: var(--ct-component-inner-padding);
-    }
-  }
-}
+<template>
+  <el-cascader
+    ref="cascaderRef"
+    :class="[
+      ns.b(),
+      ns.is('disabled', disabled),
+      ns.is('filterable', filterable),
+    ]"
+    v-model="showValue"
+    :props="propsShow"
+    :options="optionsShow"
+    :show-all-levels="showAllLevels"
+    :filterable="filterable"
+    :clearable="clearable"
+    :disabled="disabled"
+    :popper-class="popperClassShow"
+    v-bind="{ ...$attrs, ...rawAttr }"
+  />
+  <!-- <Teleport :to="appendPanelDom">
+    <span>大写的六</span>
+  </Teleport> -->
+</template>
+
+<script setup>
+import {
+  onMounted,
+  computed,
+  ref,
+  watch,
+  inject,
+  watchEffect,
+  nextTick,
+} from "vue";
+import { cascaderEmits, cascaderProps } from "./index";
+import { useNamespace, useBuriedParams } from "../../../hooks";
+import { isArray, isFunction } from "../../../utils";
+const props = defineProps(cascaderProps);
+const emit = defineEmits(cascaderEmits);
+const baseDao = inject("$ctBaseDao");
+const serviceConfig = inject("$ctServiceConfig");
+
+const ns = useNamespace("cascader");
+const cascaderRef = ref(null);
+const checkedText = ref("");
+const propsShow = computed(() => {
+  return {
+    emitPath: false,
+    ...(props.props || {}),
+    multiple: props.multiple || props.props?.multiple || false,
+    label: props.mapObj?.label || "label",
+    value: props.mapObj?.value || "value",
+    children: props.mapObj?.children || "children",
+  };
+});
+const optionsByApi = ref([]);
+const optionsShow = computed(() => {
+  return optionsByApi.value.length ? optionsByApi.value : props.options;
+});
+const showValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit("update:modelValue", newValue);
+  },
+});
+watch(showValue, async (newValue) => {
+  if (isFunction(props.cbs.change)) {
+    await nextTick(); //这里得等一个nextTick，否则会拿不到最新选中的值
+    const checkedNodes = cascaderRef.value?.getCheckedNodes() || [];
+    const dataList = checkedNodes.map((item) => {
+      return item.data;
+    });
+    props.cbs.change(dataList, cascaderRef.value);
+  }
+});
+const popperClassShow = computed(() => {
+  let popperClass = ns.e("dropdown");
+  popperClass += props.popperClass || "";
+  if (propsShow.value.multiple) {
+    popperClass += " " + ns.is("multiple");
+  }
+  return popperClass;
+});
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    getCheckedText();
+  }
+);
+const appendPanelDom = document.createElement("div");
+
+const getCheckedText = () => {
+  const getCheckedNodes = cascaderRef.value?.getCheckedNodes;
+  if (getCheckedNodes) {
+    const textArr = getCheckedNodes();
+    if (props.showAllLevels)
+      checkedText.value = textArr
+        .map((item) => {
+          if (isArray(item.pathLabels))
+            return item.pathLabels.join(props.separator);
+          return item.label;
+        })
+        .join(props.separatorMultiple);
+    else {
+      checkedText.value = textArr
+        .map((item) => item.label)
+        .join(props.separatorMultiple);
+    }
+  }
+};
+
+const appendDom2Panel = () => {
+  const dom = cascaderRef.value?.contentRef;
+  if (dom) {
+    const referenceNode = dom?.children[0];
+    // appendPanelDom = document.createElement("div");
+    appendPanelDom.setAttribute("id", "cascader-panel-append");
+    dom.insertBefore(appendPanelDom, referenceNode);
+    // dom.appendChild(div);
+  }
+};
+useBuriedParams(props, emit);
+watchEffect(async () => {
+  // 通过api获取数据，会监听api以及serviceParams的改变（收集到的依赖改变）都会触发重新查询
+  const cbs = props.cbs || {};
+  if (props.api && baseDao) {
+    try {
+      const method = props.serviceMethod || serviceConfig.defaultMethod;
+      let params = props.serviceParams || {};
+      if (isFunction(cbs.beforeSearch)) {
+        const paramsHandle = await cbs.beforeSearch(params);
+        if (paramsHandle === false) return;
+        params = paramsHandle || params;
+      }
+
+      baseDao[method](props.api, params).then((res) => {
+        const mapObj = props.mapObj || {};
+        const { list } = mapObj; //其他参数放入propsShow
+        let data = [];
+        if (list) {
+          data = res[list];
+        } else {
+          data = res;
+        }
+
+        optionsByApi.value = data;
+        if (isFunction(cbs.afterSearch)) {
+          cbs.afterSearch(res, optionsByApi, showValue);
+        }
+      });
+    } catch (error) {}
+  }
+  if (isFunction(cbs.defineSearch)) {
+    try {
+      const defineSearchHandle = await cbs.defineSearch(
+        optionsByApi,
+        showValue
+      );
+      if (defineSearchHandle === false) return;
+      if (defineSearchHandle) {
+        optionsByApi.value = defineSearchHandle;
+      }
+    } catch (error) {}
+  }
+});
+
+defineExpose({
+  ref: cascaderRef,
+});
+onMounted(() => {
+  appendDom2Panel();
+});
+</script>
+<style lang='less'>
+.ct-cascader {
+  width: var(--ct-component-width);
+  --ct-cascader-inner-height: var(--ct-component-inner-height);
+  &.is-filterable {
+    .el-cascader__tags {
+      &:focus-within {
+        .el-tag {
+          display: none;
+        }
+      }
+    }
+  }
+  .el-cascader__tags {
+    display: inline-flex;
+    // display: inline-block;
+    align-items: center;
+    flex-wrap: nowrap;
+    height: var(--ct-cascader-inner-height);
+    padding-left: var(--ct-component-inner-padding);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    .el-tag {
+      display: inline;
+      height: auto;
+      padding: 0;
+      margin: 0;
+      background-color: inherit;
+      font-size: var(--ct-font-size);
+      color: var(--ct-color-black);
+      &:not(:last-of-type)::after {
+        content: "、";
+      }
+    }
+    .el-tag__close {
+      display: none;
+    }
+  }
+  &__dropdown {
+    &:not(.is-multiple) {
+      .el-cascader__suggestion-item {
+        &.is-checked {
+          .el-icon {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+  .el-cascader__search-input {
+    position: absolute;
+    left: var(--ct-component-inner-padding);
+    top: 50%;
+    transform: translateY(-50%);
+    height: var(--ct-cascader-inner-height);
+    width: calc(100% - var(--ct-component-inner-padding));
+    font-size: var(--ct-font-size);
+    margin: 0;
+  }
+  .el-input__wrapper {
+    position: relative;
+    .el-input__inner {
+      height: var(--ct-cascader-inner-height) !important;
+    }
+    &::after {
+      position: absolute;
+      content: v-bind(checkedText);
+      // content: "11111";
+      left: var(--ct-component-inner-padding);
+    }
+  }
+}
 </style>