c-admin-kit 1.0.0

package/src/components/SelectWithAll/index.vue

@@ -0,0 +1,281 @@
+<template>
+  <el-select
+    v-model="internalValue"
+    v-bind="$attrs"
+    multiple
+    collapse-tags
+    collapse-tags-tooltip
+    filterable
+    :placeholder="placeholder"
+    :remote="remote"
+    :remote-method="remote ? handleRemoteSearch : undefined"
+    :loading="loading"
+    :loading-text="loadingText"
+    @change="handleChange"
+    @visible-change="handleVisibleChange"
+  >
+    <!-- 全选选项 -->
+    <el-option
+      v-if="showSelectAll"
+      :value="SELECT_ALL_VALUE"
+      :label="selectAllLabel"
+      class="select-all-option"
+    >
+      <el-checkbox
+        :model-value="isAllSelected"
+        :indeterminate="isIndeterminate"
+        @change="handleSelectAll"
+        @click.stop
+      >
+        {{ selectAllLabel }}
+      </el-checkbox>
+    </el-option>
+
+    <!-- 普通选项 -->
+    <el-option
+      v-for="item in displayOptions"
+      :key="item[valueKey]"
+      :label="item[labelKey]"
+      :value="item[valueKey]"
+      :disabled="item.disabled"
+    />
+
+    <!-- 空状态 -->
+    <template #empty>
+      <div class="empty-text">{{ emptyText }}</div>
+    </template>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onBeforeUnmount, onMounted, type PropType } from "vue";
+import type { AnyRecord } from "../../types";
+
+defineOptions({ name: "CSelectWithAll" });
+
+const SELECT_ALL_VALUE = "__SELECT_ALL__";
+
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<any[]>,
+    default: () => [],
+  },
+  options: {
+    type: Array as PropType<AnyRecord[]>,
+    default: () => [],
+  },
+  // 是否显示全选选项
+  showSelectAll: {
+    type: Boolean,
+    default: true,
+  },
+  // 全选文本
+  selectAllLabel: {
+    type: String,
+    default: "全选",
+  },
+  // 占位符
+  placeholder: {
+    type: String,
+    default: "请选择",
+  },
+  // 选项的标签字段名
+  labelKey: {
+    type: String,
+    default: "label",
+  },
+  // 选项的值字段名
+  valueKey: {
+    type: String,
+    default: "value",
+  },
+  // 是否启用远程搜索
+  remote: {
+    type: Boolean,
+    default: false,
+  },
+  // 远程搜索方法（返回 Promise）
+  remoteMethod: {
+    type: Function as PropType<(params: AnyRecord) => Promise<any>>,
+    default: null,
+  },
+  // 传给后端的搜索关键词参数名
+  remoteSearchKey: {
+    type: String,
+    default: "keyword",
+  },
+  // 传给后端的其他额外参数
+  remoteParams: {
+    type: Object as PropType<AnyRecord>,
+    default: () => ({}),
+  },
+  // 防抖延迟时间(ms)
+  debounceDelay: {
+    type: Number,
+    default: 300,
+  },
+  // 加载中文本
+  loadingText: {
+    type: String,
+    default: "加载中...",
+  },
+  // 无数据文本
+  emptyText: {
+    type: String,
+    default: "暂无数据",
+  },
+  // 是否在打开下拉框时自动搜索
+  searchOnOpen: {
+    type: Boolean,
+    default: false,
+  },
+  // 初始搜索关键词（用于打开时的默认搜索）
+  initialSearchKeyword: {
+    type: String,
+    default: "",
+  },
+  dataKey: {
+    type: String,
+    default: "data",
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "change", "remote-search"]);
+
+// 内部值
+const internalValue = ref<any[]>([...props.modelValue]);
+
+// 远程搜索的选项列表
+const remoteOptions = ref<AnyRecord[]>([]);
+
+// 加载状态
+const loading = ref(false);
+
+// 防抖定时器
+let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+// 显示的选项列表
+const displayOptions = computed<AnyRecord[]>(() => {
+  return props.remote ? remoteOptions.value : (props.options as AnyRecord[]);
+});
+
+// 所有可选项的值（排除禁用项）
+const allValues = computed(() => {
+  return displayOptions.value
+    .filter((item) => !item.disabled)
+    .map((item) => item[props.valueKey]);
+});
+
+// 是否全选
+const isAllSelected = computed(() => {
+  if (allValues.value.length === 0) return false;
+  return allValues.value.every((val) => internalValue.value.includes(val));
+});
+
+// 是否半选（部分选中）
+const isIndeterminate = computed(() => {
+  const selectedCount = internalValue.value.filter((val) =>
+    allValues.value.includes(val)
+  ).length;
+  return selectedCount > 0 && selectedCount < allValues.value.length;
+});
+
+// 处理全选
+const handleSelectAll = (checked: boolean | string | number) => {
+  if (checked) {
+    internalValue.value = [...new Set([...allValues.value])];
+  } else {
+    internalValue.value = [];
+  }
+
+  emit("update:modelValue", internalValue.value);
+  emit("change", internalValue.value);
+};
+
+// 处理选择变化
+const handleChange = (val: any[]) => {
+  const filteredValue = val.filter((v) => v !== SELECT_ALL_VALUE);
+  internalValue.value = filteredValue;
+  emit("update:modelValue", filteredValue);
+  emit("change", filteredValue);
+};
+
+// 处理远程搜索
+const handleRemoteSearch = (query: string = "") => {
+  if (debounceTimer) {
+    clearTimeout(debounceTimer);
+  }
+
+  debounceTimer = setTimeout(async () => {
+    if (!props.remoteMethod) return;
+
+    loading.value = true;
+    try {
+      const searchParams = {
+        ...props.remoteParams,
+        [props.remoteSearchKey]: query || "",
+      };
+
+      const res = await props.remoteMethod(searchParams);
+      let data: any[] = [];
+      if (res && res.code === 200) {
+        data = res[props.dataKey] || res.data || [];
+      } else if (Array.isArray(res)) {
+        data = res;
+      }
+      remoteOptions.value = Array.isArray(data) ? data : [];
+      emit("remote-search", { query, result: remoteOptions.value });
+    } catch (error) {
+      console.error("CSelectWithAll 远程搜索失败:", error);
+      remoteOptions.value = [];
+    } finally {
+      loading.value = false;
+    }
+  }, props.debounceDelay);
+};
+
+const handleVisibleChange = (visible: boolean) => {
+  if (visible && props.remote && props.searchOnOpen) {
+    handleRemoteSearch(props.initialSearchKeyword);
+  }
+};
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    internalValue.value = [...(newVal || [])];
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  if (props.remote && props.searchOnOpen) {
+    handleRemoteSearch();
+  }
+});
+
+onBeforeUnmount(() => {
+  if (debounceTimer) {
+    clearTimeout(debounceTimer);
+  }
+});
+</script>
+
+<style scoped>
+.select-all-option {
+  border-bottom: 1px solid #e4e7ed;
+  font-weight: 600;
+}
+
+:deep(.el-checkbox) {
+  width: 100%;
+}
+
+.empty-text {
+  padding: 10px 0;
+  margin: 0;
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}
+</style>

package/src/components/SelectWithPage/index.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="remote-select-wrapper">
+    <el-select
+      v-model="selectedValue"
+      filterable
+      remote
+      :remote-method="handleSearch"
+      :loading="loading"
+      :placeholder="placeholder"
+      clearable
+      v-bind="$attrs"
+      @clear="handleClear"
+      @change="handleChange"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item[valueKey]"
+        :label="item[labelKey]"
+        :value="item[valueKey]"
+      />
+
+      <!-- 加载中 -->
+      <el-option v-if="loading" disabled value="">
+        <div class="loading-text">
+          <el-icon class="is-loading"><Loading /></el-icon>
+          加载中...
+        </div>
+      </el-option>
+
+      <!-- 无数据（已搜索） -->
+      <el-option
+        v-if="!loading && options.length === 0 && keyword"
+        disabled
+        value=""
+      >
+        <div class="no-data-text">暂无数据</div>
+      </el-option>
+
+      <!-- 未搜索 -->
+      <el-option
+        v-if="!loading && options.length === 0 && !keyword"
+        disabled
+        value=""
+      >
+        <div class="no-data-text">请输入关键词进行搜索</div>
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount, type PropType } from "vue";
+import { Loading } from "@element-plus/icons-vue";
+import type { AnyRecord } from "../../types";
+
+defineOptions({ name: "CSelectWithPage" });
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number] as PropType<string | number>,
+    default: "",
+  },
+  placeholder: {
+    type: String,
+    default: "请输入关键词搜索",
+  },
+  labelKey: {
+    type: String,
+    default: "keyword",
+  },
+  valueKey: {
+    type: String,
+    default: "id",
+  },
+  fetchApi: {
+    type: Function as PropType<(params: AnyRecord) => Promise<any>>,
+    required: true,
+  },
+  // 外部传入的初始选项，用于回显 label
+  initialOptions: {
+    type: Array as PropType<AnyRecord[]>,
+    default: () => [],
+  },
+  debounceDelay: {
+    type: Number,
+    default: 300,
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "selectItem", "clear"]);
+
+const selectedValue = ref(props.modelValue);
+const options = ref<AnyRecord[]>([...props.initialOptions]);
+const loading = ref(false);
+const keyword = ref("");
+let searchTimer: ReturnType<typeof setTimeout> | null = null;
+const selectedItem = ref<AnyRecord | null>(null);
+
+const loadData = async (searchKeyword = "") => {
+  if (loading.value || !props.fetchApi) return;
+
+  loading.value = true;
+  try {
+    const result = await props.fetchApi({
+      keyword: searchKeyword.trim(),
+      pageNum: 1,
+      pageSize: 2000,
+    });
+    const rows = (result?.rows || result?.data || []).slice(0, 1000);
+    options.value = Array.isArray(rows) ? rows : [];
+
+    if (selectedValue.value) {
+      const matched = options.value.find((item) => item[props.valueKey] === selectedValue.value);
+      if (matched) selectedItem.value = matched;
+    }
+  } catch (error) {
+    console.error("CSelectWithPage 加载数据失败:", error);
+    options.value = [];
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleSearch = (query: string) => {
+  if (searchTimer) clearTimeout(searchTimer);
+
+  keyword.value = query;
+
+  if (!query.trim()) {
+    options.value = [...props.initialOptions];
+    return;
+  }
+
+  searchTimer = setTimeout(() => {
+    loadData(query);
+  }, props.debounceDelay);
+};
+
+const handleClear = () => {
+  keyword.value = "";
+  options.value = [...props.initialOptions];
+  selectedItem.value = null;
+  selectedValue.value = "";
+  emit("update:modelValue", "");
+  emit("selectItem", null);
+  emit("clear");
+};
+
+const handleChange = (val: any) => {
+  const item = options.value.find((e) => e[props.valueKey] === val);
+  selectedItem.value = item || null;
+
+  emit("update:modelValue", val || "");
+  emit("selectItem", selectedItem.value);
+};
+
+watch(
+  () => props.modelValue,
+  async (newVal) => {
+    if (newVal !== selectedValue.value) {
+      selectedValue.value = newVal;
+
+      if (newVal && !options.value.some((item) => item[props.valueKey] === newVal)) {
+        await loadData("");
+      }
+
+      selectedItem.value =
+        options.value.find((item) => item[props.valueKey] === newVal) || null;
+    }
+  },
+  { immediate: true }
+);
+
+watch(selectedValue, (newVal) => {
+  if (newVal !== props.modelValue) {
+    emit("update:modelValue", newVal || "");
+  }
+});
+
+onBeforeUnmount(() => {
+  if (searchTimer) clearTimeout(searchTimer);
+});
+</script>
+
+<style scoped>
+.remote-select-wrapper {
+  width: 100%;
+}
+.loading-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: #909399;
+  font-size: 14px;
+  padding: 10px;
+}
+.no-data-text {
+  text-align: center;
+  color: #c0c4cc;
+  font-size: 14px;
+  padding: 10px;
+}
+</style>