ct-component-plus 2.1.13 → 2.2.1

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

@@ -1,490 +0,0 @@
-<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="popperClass"
-    @focus="showSearchPrefix"
-    @blur="hideSearchPrefix"
-    @click="focusSearchInput"
-    @visible-change="handleListSort"
-  >
-    <template #prefix>
-      <div
-        :class="[ns.e('filterable-icon')]"
-        v-if="filterable && showSearch && !multiple"
-      >
-        <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" @input="changeKeyword">
-          <template #prefix>
-            <ct-icon name="search_line"></ct-icon>
-          </template>
-        </el-input>
-      </div>
-      <div :class="[ns.e('select')]" v-if="!rawAttr.multipleLimit">
-        <span :class="[ns.e('select-title')]">
-          <span v-if="!keyword">已选{{ selectLength }}项</span>
-          <span v-else>检索结果</span>
-        </span>
-      </div>
-    </div>
-    <div
-      :class="[ns.e('options')]"
-      v-show="!noFilterOptions"
-      ref="optionsRef"
-      @scroll="handleScrollLoad"
-    >
-      <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>
-      <div :class="[ns.e('top')]" v-if="multiple">
-        <div :class="[ns.e('filter')]">
-          <el-input v-model="keyword" ref="filterInput" @input="changeKeyword">
-            <template #prefix>
-              <ct-icon name="search_line"></ct-icon>
-            </template>
-          </el-input>
-        </div>
-        <div :class="[ns.e('select')]" v-if="!rawAttr.multipleLimit">
-          <span :class="[ns.e('select-title')]">
-            <span v-if="!keyword">已选{{ selectLength }}项</span>
-            <span v-else>检索结果</span>
-          </span>
-        </div>
-      </div>
-      <slot name="empty">
-        <Empty :text="emptyText" />
-      </slot>
-    </template>
-  </el-select>
-</template>
-
-<script setup>
-import {
-  onMounted,
-  computed,
-  ref,
-  watch,
-  inject,
-  nextTick,
-  useAttrs,
-} from "vue";
-import { selectEmits, selectProps } from "./index";
-import { useNamespace, useBuriedParams } 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 attrs = useAttrs();
-
-const ns = useNamespace("select");
-const optionsByApi = ref([]);
-const showOptions = computed(() => {
-  return optionsByApi.value;
-});
-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 pageNo = ref(1);
-const pageSize = computed(() => props.pageSize || 20);
-const total = ref(0);
-const loading = 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(() => {
-  let result = "";
-  if (!props.multiple) {
-    return result;
-  } else {
-    if (
-      showOptions.value.length &&
-      showOptions.value.length === valueModel.value.length
-    ) {
-      result = props.selectAllText;
-    } else {
-      const cnt = props.connectors;
-      result = selectObj.value.map((item) => item.label).join(cnt);
-    }
-  }
-  //nextTick(() => {
-  // if (selectRef.value) {
-  // selectRef.value.$refs.reference.input.value = result;
-  // }
-  //});
-  return result;
-});
-const emptyText = computed(() => {
-  return showOptions.value.length
-    ? props.noMatchText || "暂无匹配数据"
-    : props.noDataText || "暂无数据";
-});
-
-const popperClass = computed(() => {
-  const defaultClass = ns.e("popper");
-  const userClass =
-    attrs["popper-class"] ||
-    attrs["popperClass"] ||
-    (props.rawAttr &&
-      (props.rawAttr["popper-class"] || props.rawAttr["popperClass"])) ||
-    "";
-  return `${defaultClass} ${userClass}`.trim();
-});
-
-const getUseLabel = (label) => {
-  return typeof label === "string" ? label : String(label);
-};
-
-watch(
-  () => selectText.value,
-  (newVal) => {
-    if (!selectRef.value) return;
-    selectRef.value.selectedLabel = newVal;
-  }
-);
-watch(optionsByApi, () => {
-  const arr = optionsByApi.value || [];
-  if (arr.length) {
-    filterOptions.value = arr;
-    noFilterOptions.value = false;
-  } else {
-    filterOptions.value = [];
-    noFilterOptions.value = true;
-  }
-});
-
-const optionsRef = ref(null);
-//针对多选时，已选的项要排在整个列表的最前面
-const handleListSort = (val) => {
-  if (props.multiple) {
-    if (val) {
-      const selectedSet = new Set(valueModel.value);
-      filterOptions.value = [
-        ...filterOptions.value.filter((item) => selectedSet.has(item.value)), // 选中的项
-        ...filterOptions.value.filter((item) => !selectedSet.has(item.value)), // 未选中的项
-      ];
-      nextTick(() => {
-        optionsRef.value.scrollTop = 0;
-      });
-    } else {
-      keyword.value = "";
-      if (!valueModel.value.length) {
-        filterOptions.value = [...showOptions.value];
-      }
-    }
-  }
-};
-const watchServiceHandle = async (reset = false) => {
-  // 通过api获取数据，会监听api以及serviceParams的改变（收集到的依赖改变）都会触发重新查询
-  const cbs = props.cbs || {};
-  if (props.api && baseDao) {
-    try {
-      const method = props.serviceMethod || serviceConfig.defaultMethod;
-      let params = { ...(props.serviceParams || {}) };
-      if (reset) {
-        pageNo.value = 1;
-        optionsByApi.value = [];
-      }
-      params.keyword = keyword.value;
-      params.page_no = pageNo.value;
-      params.page_size = pageSize.value;
-      if (isFunction(cbs.beforeSearch)) {
-        const paramsHandle = await cbs.beforeSearch(params);
-        if (paramsHandle === false) return;
-        params = paramsHandle || params;
-      }
-      loading.value = true;
-      baseDao[method](props.api, params)
-        .then((res) => {
-          const mapObj = props.mapObj || {};
-          const {
-            list,
-            label = "label",
-            value = "value",
-            self,
-            total: totalKey = "total",
-          } = 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],
-            };
-          });
-          total.value = (res && res[totalKey]) || 0;
-          optionsByApi.value =
-            pageNo.value > 1 ? optionsByApi.value.concat(data) : data;
-          if (isFunction(cbs.afterSearch)) {
-            cbs.afterSearch(res, optionsByApi, valueModel);
-          }
-        })
-        .finally(() => {
-          loading.value = false;
-        });
-    } 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(true);
-  },
-  {
-    immediate: true,
-  }
-);
-// watch(
-//   () => keyword.value,
-//   () => {
-
-//     watchServiceHandle(true);
-//   }
-// );
-
-function debounce(fn, delay = 300) {
-  //防抖
-  var timer = null; //借助闭包
-  return function (...args) {
-    const context = this;
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      fn.apply(context, args);
-    }, delay);
-  };
-}
-const changeKeyword = debounce(() => {
-  watchServiceHandle(true);
-});
-
-const handleScrollLoad = (e) => {
-  const el = e.target;
-  const reach = el.scrollTop + el.clientHeight >= el.scrollHeight - 2;
-  const hasMore = total.value > pageNo.value * pageSize.value;
-  if (reach && hasMore && !loading.value) {
-    pageNo.value += 1;
-    watchServiceHandle();
-  }
-};
-
-const focusFilter = () => {
-  if (filterInput.value && filterInput.value.focus) {
-    filterInput.value.focus();
-  }
-};
-
-const showSearch = ref(false);
-const focusSearchInput = () => {
-  setTimeout(() => {
-    filterInput.value && filterInput.value.focus();
-    // keyword.value = "";
-  }, 300);
-};
-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,
-});
-</script>
-<style lang="less">
-.ct-select {
-  width: 214px;
-  &.el-select {
-    position: relative;
-  }
-  &__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;
-      pointer-events: none;
-    }
-    .el-select__placeholder.is-transparent {
-      display: block;
-    }
-    .el-select__selected-item {
-      display: none;
-    }
-  }
-}
-</style>