ct-component-plus 0.0.42 → 0.0.43

package/packages/components/select/src/select.vue

@@ -1,380 +1,380 @@
-<template>
-  <!-- {{ rawAttr }}-- -->
-  <el-select
-    ref="selectRef"
-    :class="[ns.b(), ns.is('multiple', multiple)]"
-    v-model="valueModel"
-    collapse-tags
-    v-bind="rawAttr"
-    :multiple="multiple"
-    :filterable="filterable"
-    :clear-icon="clearIcon"
-    :suffix-icon="suffixIcon"
-    :fit-input-width="fitInputWidth"
-    :select-text="selectText"
-    :popper-class="ns.e('popper')"
-    @focus="showSearchPrefix"
-    @blur="hideSearchPrefix">
-    <template #prefix>
-      <div
-        :class="[ns.e('filterable-icon')]"
-        v-if="filterable && !valueModel && showSearch">
-        <ct-icon name="search_line"></ct-icon>
-      </div>
-      <slot name="prefix"></slot>
-    </template>
-    <div :class="[ns.e('top')]" v-if="multiple">
-      <div :class="[ns.e('filter')]">
-        <el-input v-model="keyword" ref="filterInput">
-          <template #prefix>
-            <ct-icon name="search_line"></ct-icon>
-          </template>
-        </el-input>
-      </div>
-      <div :class="[ns.e('select')]">
-        <span :class="[ns.e('select-title')]">
-          <span v-if="!keyword">已选{{ selectLength }}项</span>
-          <span v-else>检索结果</span>
-        </span>
-        <el-checkbox
-          v-model="checkedAll"
-          v-show="!noFilterOptions"
-          @change="changeCheckedAll"
-          >全选</el-checkbox
-        >
-      </div>
-    </div>
-    <div :class="[ns.e('options')]" v-show="!noFilterOptions">
-      <slot>
-        <el-option
-          v-for="(item, index) in filterOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-          :disabled="item.disabled">
-          <slot name="option" :item="item" :index="index">
-            <span :title="selectTooltip ? item.label : undefined">{{
-              item.label
-            }}</span>
-          </slot>
-        </el-option>
-      </slot>
-    </div>
-    <Empty :text="emptyText" v-if="multiple && noFilterOptions" />
-    <template #empty>
-      <slot name="empty">
-        <Empty :text="emptyText" />
-      </slot>
-    </template>
-  </el-select>
-</template>
-
-<script setup>
-import { onMounted, computed, ref, watch, inject, watchEffect } from "vue";
-import { selectEmits, selectProps } from "./index";
-import { useNamespace, useBuriedParams, useCheckedAll } from "../../../hooks";
-import { isFunction, isArray } from "../../../utils";
-import Empty from "./empty.vue";
-const baseDao = inject("$ctBaseDao");
-const serviceConfig = inject("$ctServiceConfig");
-const selectTooltip = inject("$selectTooltip");
-
-const props = defineProps(selectProps);
-const emit = defineEmits(selectEmits);
-
-// const getBuriedContent = () => {
-//   const select = selectObj.value;
-//   if (isArray(select)) {
-//     return select.map((item) => item.label);
-//   }
-//   return select.label;
-// };
-const ns = useNamespace("select");
-const optionsByApi = ref([]);
-const showOptions = computed(() => {
-  return optionsByApi.value.length ? optionsByApi.value : props.options;
-});
-const valueModel = computed({
-  get() {
-    return props.modelValue || (props.multiple ? [] : props.modelValue);
-  },
-  set(newValue) {
-    emit("update:modelValue", newValue);
-  },
-});
-const keyword = ref("");
-const selectRef = ref(null);
-const filterInput = ref(null);
-
-const selectLength = computed(() => {
-  return valueModel.value.length;
-});
-const filterOptions = ref([]);
-const noFilterOptions = ref(false);
-const selectObj = computed({
-  get() {
-    if (!props.multiple)
-      return showOptions.value.find((item) => item.value === valueModel.value);
-    return showOptions.value.filter((item) => {
-      return valueModel.value.includes(item.value);
-    });
-  },
-  set(newValue) {
-    if (!props.multiple) {
-      valueModel.value = newValue.value;
-    } else {
-      valueModel.value = newValue.map((item) => item.value);
-    }
-  },
-});
-const selectText = computed(() => {
-  if (!props.multiple) return "";
-  if (
-    showOptions.value.length &&
-    showOptions.value.length === valueModel.value.length
-  )
-    return props.selectAllText;
-  const cnt = props.connectors;
-  return selectObj.value.map((item) => item.label).join(cnt);
-});
-const emptyText = computed(() => {
-  return showOptions.value.length
-    ? props.noMatchText || "暂无匹配数据"
-    : props.noDataText || "暂无数据";
-});
-const getUseLabel = (label) => {
-  return typeof label === "string" ? label : String(label);
-};
-
-watch(
-  () => selectText.value,
-  (newVal) => {
-    selectRef.value.selectedLabel = newVal;
-  }
-);
-watchEffect(async () => {
-  // 输入框过滤，触发的事件
-  let arr = showOptions.value.filter((item) => {
-    return item.label && item.label.includes(keyword.value);
-  });
-  const cbs = props.cbs || {};
-  if (isFunction(cbs.filterCallback)) {
-    try {
-      const filterCallbackHandle = await cbs.filterCallback(
-        keyword.value,
-        showOptions.value,
-        valueModel
-      );
-      if (filterCallbackHandle === false) return;
-      arr = filterCallbackHandle || arr;
-    } catch (error) {}
-  }
-  if (arr.length) {
-    filterOptions.value = arr;
-    noFilterOptions.value = false;
-  } else {
-    filterOptions.value = showOptions.value;
-    noFilterOptions.value = true;
-  }
-});
-const watchServiceHandle = 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, label = "label", value = "value", self } = mapObj;
-        let data = [];
-        if (list) {
-          data = res[list];
-        } else {
-          data = res;
-        }
-        data = data.map((item) => {
-          if (self) {
-            return { label: getUseLabel(item), value: item };
-          }
-          return {
-            ...item,
-            label: getUseLabel(item[label]),
-            value: item[value],
-          };
-        });
-        optionsByApi.value = data;
-        if (isFunction(cbs.afterSearch)) {
-          cbs.afterSearch(res, optionsByApi, valueModel);
-        }
-      });
-    } catch (error) {
-      console.error(error);
-    }
-  }
-  if (isFunction(cbs.defineSearch)) {
-    try {
-      const defineSearchHandle = await cbs.defineSearch(
-        optionsByApi,
-        valueModel
-      );
-      if (defineSearchHandle === false) return;
-      if (defineSearchHandle) {
-        optionsByApi.value = defineSearchHandle;
-      }
-    } catch (error) {}
-  }
-};
-watch(
-  [
-    () => props.api,
-    () => props.serviceParams,
-    () => props.serviceMethod,
-    () => props.mapObj,
-  ],
-  (newVal, oldVal) => {
-    watchServiceHandle();
-  },
-  {
-    immediate: true,
-  }
-);
-const checkedAll = useCheckedAll(filterOptions, valueModel, {
-  onCheckedAll: (falg) => {
-    if (!keyword.value && !falg) {
-      // 没有搜索，去掉全选就置空
-      valueModel.value = [];
-    }
-  },
-}).checkedAll;
-const changeCheckedAll = () => {
-  const selectEmit = selectRef.value.$emit;
-  if (selectEmit) {
-    selectEmit("change", valueModel.value);
-  }
-};
-
-const focusFilter = () => {
-  if (filterInput.value && filterInput.value.focus) {
-    filterInput.value.focus();
-  }
-};
-
-const showSearch = ref(false);
-const showSearchPrefix = () => {
-  showSearch.value = true;
-};
-const hideSearchPrefix = () => {
-  showSearch.value = false;
-};
-
-useBuriedParams(props, emit, {
-  getContent: () => {
-    const select = selectObj.value || {};
-    if (isArray(select)) {
-      return select.map((item) => item.label);
-    }
-    return select.label;
-  },
-});
-
-onMounted(() => {
-  if (!baseDao) {
-    console.error("请先配置baseDao");
-  }
-});
-defineExpose({
-  ref: selectRef,
-  keyword,
-  filterInput,
-  focusFilter,
-  baseDao,
-  serviceConfig,
-  noFilterOptions,
-  selectObj,
-  checkedAll,
-});
-</script>
-<style lang="less">
-.ct-select {
-  width: 214px;
-  &__top {
-    padding: 0 16px;
-    font-size: var(--ct-font-size);
-  }
-  &__options {
-    max-height: 274px;
-    overflow-y: auto;
-  }
-  &__select {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-    &-title {
-      color: var(--ct-color-grey-sub);
-      line-height: 1;
-    }
-    .el-checkbox {
-      height: auto;
-    }
-  }
-  &__filter {
-    margin-bottom: 16px;
-    .el-input {
-      --el-input-height: 28px;
-    }
-  }
-  &__popper {
-    &.is-multiple {
-      min-width: 140px;
-    }
-    .el-select-dropdown__wrap {
-      max-height: unset;
-    }
-  }
-  .el-select__tags {
-    display: none;
-  }
-  .el-input__prefix-inner {
-    & > :last-child {
-      margin-right: 0;
-    }
-  }
-  &__filterable-icon {
-    position: absolute;
-    z-index: 3;
-    right: var(--ct-component-inner-padding);
-    top: 50%;
-    height: calc(var(--ct-component-size) - 2px);
-    transform: translateY(-50%);
-    background-color: #fff;
-  }
-  &__empty {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 15px 16px;
-    color: var(--ct-color-grey-sub);
-  }
-  &.is-multiple {
-    &::after {
-      content: attr(select-text);
-      position: absolute;
-      left: var(--ct-component-inner-padding);
-      right: calc(var(--ct-component-inner-padding) * 2);
-      top: 50%;
-      transform: translateY(-50%);
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      cursor: pointer;
-    }
-  }
-}
-</style>
+<template>
+  <!-- {{ rawAttr }}-- -->
+  <el-select
+    ref="selectRef"
+    :class="[ns.b(), ns.is('multiple', multiple)]"
+    v-model="valueModel"
+    collapse-tags
+    v-bind="rawAttr"
+    :multiple="multiple"
+    :filterable="filterable"
+    :clear-icon="clearIcon"
+    :suffix-icon="suffixIcon"
+    :fit-input-width="fitInputWidth"
+    :select-text="selectText"
+    :popper-class="ns.e('popper')"
+    @focus="showSearchPrefix"
+    @blur="hideSearchPrefix">
+    <template #prefix>
+      <div
+        :class="[ns.e('filterable-icon')]"
+        v-if="filterable && !valueModel && showSearch">
+        <ct-icon name="search_line"></ct-icon>
+      </div>
+      <slot name="prefix"></slot>
+    </template>
+    <div :class="[ns.e('top')]" v-if="multiple">
+      <div :class="[ns.e('filter')]">
+        <el-input v-model="keyword" ref="filterInput">
+          <template #prefix>
+            <ct-icon name="search_line"></ct-icon>
+          </template>
+        </el-input>
+      </div>
+      <div :class="[ns.e('select')]">
+        <span :class="[ns.e('select-title')]">
+          <span v-if="!keyword">已选{{ selectLength }}项</span>
+          <span v-else>检索结果</span>
+        </span>
+        <el-checkbox
+          v-model="checkedAll"
+          v-show="!noFilterOptions"
+          @change="changeCheckedAll"
+          >全选</el-checkbox
+        >
+      </div>
+    </div>
+    <div :class="[ns.e('options')]" v-show="!noFilterOptions">
+      <slot>
+        <el-option
+          v-for="(item, index) in filterOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          :disabled="item.disabled">
+          <slot name="option" :item="item" :index="index">
+            <span :title="selectTooltip ? item.label : undefined">{{
+              item.label
+            }}</span>
+          </slot>
+        </el-option>
+      </slot>
+    </div>
+    <Empty :text="emptyText" v-if="multiple && noFilterOptions" />
+    <template #empty>
+      <slot name="empty">
+        <Empty :text="emptyText" />
+      </slot>
+    </template>
+  </el-select>
+</template>
+
+<script setup>
+import { onMounted, computed, ref, watch, inject, watchEffect } from "vue";
+import { selectEmits, selectProps } from "./index";
+import { useNamespace, useBuriedParams, useCheckedAll } from "../../../hooks";
+import { isFunction, isArray } from "../../../utils";
+import Empty from "./empty.vue";
+const baseDao = inject("$ctBaseDao");
+const serviceConfig = inject("$ctServiceConfig");
+const selectTooltip = inject("$selectTooltip");
+
+const props = defineProps(selectProps);
+const emit = defineEmits(selectEmits);
+
+// const getBuriedContent = () => {
+//   const select = selectObj.value;
+//   if (isArray(select)) {
+//     return select.map((item) => item.label);
+//   }
+//   return select.label;
+// };
+const ns = useNamespace("select");
+const optionsByApi = ref([]);
+const showOptions = computed(() => {
+  return optionsByApi.value.length ? optionsByApi.value : props.options;
+});
+const valueModel = computed({
+  get() {
+    return props.modelValue || (props.multiple ? [] : props.modelValue);
+  },
+  set(newValue) {
+    emit("update:modelValue", newValue);
+  },
+});
+const keyword = ref("");
+const selectRef = ref(null);
+const filterInput = ref(null);
+
+const selectLength = computed(() => {
+  return valueModel.value.length;
+});
+const filterOptions = ref([]);
+const noFilterOptions = ref(false);
+const selectObj = computed({
+  get() {
+    if (!props.multiple)
+      return showOptions.value.find((item) => item.value === valueModel.value);
+    return showOptions.value.filter((item) => {
+      return valueModel.value.includes(item.value);
+    });
+  },
+  set(newValue) {
+    if (!props.multiple) {
+      valueModel.value = newValue.value;
+    } else {
+      valueModel.value = newValue.map((item) => item.value);
+    }
+  },
+});
+const selectText = computed(() => {
+  if (!props.multiple) return "";
+  if (
+    showOptions.value.length &&
+    showOptions.value.length === valueModel.value.length
+  )
+    return props.selectAllText;
+  const cnt = props.connectors;
+  return selectObj.value.map((item) => item.label).join(cnt);
+});
+const emptyText = computed(() => {
+  return showOptions.value.length
+    ? props.noMatchText || "暂无匹配数据"
+    : props.noDataText || "暂无数据";
+});
+const getUseLabel = (label) => {
+  return typeof label === "string" ? label : String(label);
+};
+
+watch(
+  () => selectText.value,
+  (newVal) => {
+    selectRef.value.selectedLabel = newVal;
+  }
+);
+watchEffect(async () => {
+  // 输入框过滤，触发的事件
+  let arr = showOptions.value.filter((item) => {
+    return item.label && item.label.includes(keyword.value);
+  });
+  const cbs = props.cbs || {};
+  if (isFunction(cbs.filterCallback)) {
+    try {
+      const filterCallbackHandle = await cbs.filterCallback(
+        keyword.value,
+        showOptions.value,
+        valueModel
+      );
+      if (filterCallbackHandle === false) return;
+      arr = filterCallbackHandle || arr;
+    } catch (error) {}
+  }
+  if (arr.length) {
+    filterOptions.value = arr;
+    noFilterOptions.value = false;
+  } else {
+    filterOptions.value = showOptions.value;
+    noFilterOptions.value = true;
+  }
+});
+const watchServiceHandle = 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, label = "label", value = "value", self } = mapObj;
+        let data = [];
+        if (list) {
+          data = res[list];
+        } else {
+          data = res;
+        }
+        data = data.map((item) => {
+          if (self) {
+            return { label: getUseLabel(item), value: item };
+          }
+          return {
+            ...item,
+            label: getUseLabel(item[label]),
+            value: item[value],
+          };
+        });
+        optionsByApi.value = data;
+        if (isFunction(cbs.afterSearch)) {
+          cbs.afterSearch(res, optionsByApi, valueModel);
+        }
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  if (isFunction(cbs.defineSearch)) {
+    try {
+      const defineSearchHandle = await cbs.defineSearch(
+        optionsByApi,
+        valueModel
+      );
+      if (defineSearchHandle === false) return;
+      if (defineSearchHandle) {
+        optionsByApi.value = defineSearchHandle;
+      }
+    } catch (error) {}
+  }
+};
+watch(
+  [
+    () => props.api,
+    () => props.serviceParams,
+    () => props.serviceMethod,
+    () => props.mapObj,
+  ],
+  (newVal, oldVal) => {
+    watchServiceHandle();
+  },
+  {
+    immediate: true,
+  }
+);
+const checkedAll = useCheckedAll(filterOptions, valueModel, {
+  onCheckedAll: (falg) => {
+    if (!keyword.value && !falg) {
+      // 没有搜索，去掉全选就置空
+      valueModel.value = [];
+    }
+  },
+}).checkedAll;
+const changeCheckedAll = () => {
+  const selectEmit = selectRef.value.$emit;
+  if (selectEmit) {
+    selectEmit("change", valueModel.value);
+  }
+};
+
+const focusFilter = () => {
+  if (filterInput.value && filterInput.value.focus) {
+    filterInput.value.focus();
+  }
+};
+
+const showSearch = ref(false);
+const showSearchPrefix = () => {
+  showSearch.value = true;
+};
+const hideSearchPrefix = () => {
+  showSearch.value = false;
+};
+
+useBuriedParams(props, emit, {
+  getContent: () => {
+    const select = selectObj.value || {};
+    if (isArray(select)) {
+      return select.map((item) => item.label);
+    }
+    return select.label;
+  },
+});
+
+onMounted(() => {
+  if (!baseDao) {
+    console.error("请先配置baseDao");
+  }
+});
+defineExpose({
+  ref: selectRef,
+  keyword,
+  filterInput,
+  focusFilter,
+  baseDao,
+  serviceConfig,
+  noFilterOptions,
+  selectObj,
+  checkedAll,
+});
+</script>
+<style lang="less">
+.ct-select {
+  width: 214px;
+  &__top {
+    padding: 0 16px;
+    font-size: var(--ct-font-size);
+  }
+  &__options {
+    max-height: 274px;
+    overflow-y: auto;
+  }
+  &__select {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    &-title {
+      color: var(--ct-color-grey-sub);
+      line-height: 1;
+    }
+    .el-checkbox {
+      height: auto;
+    }
+  }
+  &__filter {
+    margin-bottom: 16px;
+    .el-input {
+      --el-input-height: 28px;
+    }
+  }
+  &__popper {
+    &.is-multiple {
+      min-width: 140px;
+    }
+    .el-select-dropdown__wrap {
+      max-height: unset;
+    }
+  }
+  .el-select__tags {
+    display: none;
+  }
+  .el-input__prefix-inner {
+    & > :last-child {
+      margin-right: 0;
+    }
+  }
+  &__filterable-icon {
+    position: absolute;
+    z-index: 3;
+    right: var(--ct-component-inner-padding);
+    top: 50%;
+    height: calc(var(--ct-component-size) - 2px);
+    transform: translateY(-50%);
+    background-color: #fff;
+  }
+  &__empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 15px 16px;
+    color: var(--ct-color-grey-sub);
+  }
+  &.is-multiple {
+    &::after {
+      content: attr(select-text);
+      position: absolute;
+      left: var(--ct-component-inner-padding);
+      right: calc(var(--ct-component-inner-padding) * 2);
+      top: 50%;
+      transform: translateY(-50%);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      cursor: pointer;
+    }
+  }
+}
+</style>