cd-vue-filter 2.2.5 → 2.2.7

package/dist/types/index.d.ts

@@ -0,0 +1,60 @@
+export type FieldType = 'number' | 'money' | 'text' | 'date' | 'time' | 'select' | 'selectProvince' | 'basedata' | 'billdata';
+export interface FieldOption {
+    key: string;
+    label: string;
+    value: string;
+    type: FieldType;
+    options?: {
+        key: string;
+        label: string;
+        value: string;
+    }[];
+}
+export interface FilterCondition {
+    field: string;
+    operator: string;
+    value: any;
+}
+export interface FilterComponentProps {
+    fieldOptions: FieldOption[];
+    filterCondition: FilterCondition;
+    selectOptions?: Record<string, any[]>;
+}
+export interface FilterDialogProps {
+    visible: boolean;
+    fieldOptions: FieldOption[];
+    initialFilterCards?: FilterCard[];
+    initialType1?: string;
+}
+export interface FilterCard {
+    id: number;
+    connector: 'and' | 'or';
+    conditions: FilterCondition[];
+}
+export interface OperatorOption {
+    key: string;
+    label: string;
+    value: string;
+}
+export interface CascaderOption {
+    label: string;
+    value: string;
+    children?: CascaderOption[];
+}
+export interface ProvinceData {
+    name: string;
+    city: CityData[];
+}
+export interface CityData {
+    name: string;
+    area: string[];
+}
+export interface ColorFilterRule {
+    field: string;
+    operator: string;
+    value: any;
+    backgroundColor: string;
+    isBold: boolean;
+    applyTo: 'cell' | 'row' | 'column';
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,gBAAgB,GAAG,UAAU,GAAG,UAAU,CAAC;AAG9H,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC3D;AAGD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC;CACZ;AAGD,MAAM,WAAW,oBAAoB;IACnC,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,eAAe,EAAE,eAAe,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;CACvC;AAGD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,kBAAkB,CAAC,EAAE,UAAU,EAAE,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAGD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,eAAe,EAAE,CAAC;CAC/B;AAGD,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B;AAGD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;CAChB;AAGD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC;IACX,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;CACpC"}

package/dist/utils/province.d.ts

@@ -0,0 +1,3 @@
+import { ProvinceData } from '../types';
+export declare const provinces: ProvinceData[];
+//# sourceMappingURL=province.d.ts.map

package/dist/utils/province.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"province.d.ts","sourceRoot":"","sources":["../../src/utils/province.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,eAAO,MAAM,SAAS,EAAE,YAAY,EA03KjC,CAAA"}

package/package.json

@@ -1,13 +1,20 @@
 {
   "name": "cd-vue-filter",
-  "version": "2.2.5",
+  "version": "2.2.7",
   "type": "module",
   "description": "一个功能强大的 Vue 3 过滤器组件，支持多种字段类型和操作符",
-  "main": "src/index.ts",
-  "module": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "./dist/cd-vue-filter.umd.cjs",
+  "module": "./dist/cd-vue-filter.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/cd-vue-filter.js",
+      "require": "./dist/cd-vue-filter.umd.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "files": [
-    "src"
+    "dist"
   ],
   "keywords": [
     "vue",
@@ -20,21 +27,24 @@
   "author": "CD",
   "license": "MIT",
   "peerDependencies": {
-    "tdesign-vue-next": "^1.0.0",
-    "vue": "^3.0.0",
     "cd-personselector": "^1.1.0",
-    "cd-usercard": "^2.3.0"
+    "cd-usercard": "^2.3.0",
+    "remixicon": "^4.0.0",
+    "tdesign-vue-next": "^1.0.0",
+    "vue": "^3.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.4",
+    "cd-personselector": "1.1.0",
+    "cd-usercard": "^2.3.0",
+    "remixicon": "^4.0.0",
     "sass-embedded": "^1.97.1",
     "tslib": "^2.6.0",
     "typescript": "^5.0.0",
     "vite": "^5.4.21",
+    "vite-plugin-dts": "^4.5.4",
     "vue": "^3.3.0",
-    "vue-tsc": "^2.2.12",
-    "cd-personselector": "1.1.0",
-    "cd-usercard": "^2.3.0"
+    "vue-tsc": "^2.2.12"
   },
   "repository": {
     "type": "git",
@@ -49,7 +59,8 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vite build",
+    "type-check": "vue-tsc --noEmit",
     "preview": "vite preview"
   }
 }

package/src/components/FilterComponent.vue

@@ -1,359 +0,0 @@
-<!-- 过滤器组件 -->
-<template>
-  <div class="filter-component" >
-    <t-select 
-      v-model="props.filterCondition.field" 
-      placeholder="请选择字段" 
-      :size="props.size"
-      style="min-width: 80px; max-width: 110px;"
-      @change="handleFieldChange"
-      clearable
-      filterable
-    >
-      <t-option 
-        v-for="option in props.fieldOptions" 
-        :key="option.key" 
-        :label="option.key" 
-        :value="option.value" 
-      />
-    </t-select>
-    <t-select 
-      v-model="props.filterCondition.operator" 
-      placeholder="请选择条件" 
-      :size="props.size" 
-      style="width: 80px;"
-      :clearable="false"
-      @change="handleOperatorChange" 
-    >
-      <t-option 
-        v-for="option in operatorOptions" 
-        :key="option.key" 
-        :label="option.label" 
-        :value="option.value" 
-      />
-    </t-select>
-    <!-- 动态输入框 -->
-    <template v-if="getFieldType(props.filterCondition.field) === 'number'">
-      <t-input
-        type="number"
-        v-model="props.filterCondition.value"
-        placeholder="请输入数字"
-        :size="props.size"
-       style="min-width: 80px; max-width: 120px;"
-        @change="handleValueChange"
-        clearable
-      />
-    </template>
-    <template v-else-if="getFieldType(props.filterCondition.field) === 'money'">
-      <t-input
-        type="number"
-        v-model="props.filterCondition.value"
-        placeholder="请输入金额"
-        :size="props.size"
-       style="min-width: 80px; max-width: 120px;"
-        @change="handleValueChange"
-        clearable
-      />
-    </template>
-    <template v-else-if="getFieldType(props.filterCondition.field) === 'date'">
-      <t-date-picker
-        v-if="!isPresetDateOperator(props.filterCondition.operator)"
-        v-model="props.filterCondition.value"
-        placeholder="请选择日期"
-        :size="props.size"
-         style="min-width: 80px; max-width: 120px;"
-        @change="handleValueChange"
-        clearable
-      />
-      <t-input
-        v-else
-        :value="operatorOptions.find(op => op.value === props.filterCondition.operator)?.label"
-        disabled
-        :size="props.size"
-     style="min-width: 80px; max-width: 120px;"
-      />
-    </template>
-    <template v-else-if="getFieldType(props.filterCondition.field) === 'time'">
-      <t-date-picker
-        v-model="props.filterCondition.value"
-        placeholder="请选择日期时间"
-        :size="props.size"
-         style="min-width: 80px; max-width: 120px;"
-        enable-time-picker
-        format="YYYY-MM-DD HH:mm:ss"
-        @change="handleValueChange"
-        clearable
-      />
-    </template>
-    <template v-else-if="getFieldType(props.filterCondition.field) === 'select'">
-      <t-select
-        v-model="props.filterCondition.value"
-        :options="getSelectOptions(props.filterCondition.field)"
-        placeholder="请选择"
-        :size="props.size"
-      style="min-width: 80px; max-width: 120px;"
-        @change="handleValueChange"
-        clearable
-      />
-    </template>
-    <template v-else-if="getFieldType(props.filterCondition.field) === 'selectProvince'">
-      <t-cascader
-        v-model="props.filterCondition.value"
-        :options="cascaderOptions"
-        placeholder="请选择地区"
-        :size="props.size"
-       style="min-width: 80px; max-width: 120px;"
-        clearable
-        :loading="false"
-        :checkStrictly="true"
-        @change="handleValueChange"
-      />
-    </template>
-    <template v-else>
-      <t-input
-        v-model="props.filterCondition.value"
-        placeholder="请输入关键字"
-        :size="props.size"
-         style="min-width: 80px; max-width: 120px;"
-        @change="handleValueChange"
-        clearable
-      />
-    </template>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, watch, computed } from 'vue';
-import { provinces } from '../utils/province';
-// 缓存处理后的省市区数据
-const municipalities = ['北京市', '上海市', '天津市', '重庆市','香港特别行政区','澳门特别行政区'];
-const cascaderOptions = computed(() => {
-  return provinces.map(province => {
-    // 如果是直辖市，直接返回省级选项，不包含下级
-    if (municipalities.includes(province.name)) {
-      return {
-        label: province.name,
-        value: province.name,
-        children:province.city[0].area.map(area2 => ({
-          label: area2,
-          value: `${province.name}/${area2}`,  // 使用省份名称作为前缀
-        }))
-      };
-    }
-    // 非直辖市，保持原有的三级结构
-    return {
-      label: province.name,
-      value: province.name,
-      children: province.city.map(city => ({
-        label: city.name,
-        value: `${province.name}/${city.name}`,  // 使用省份名称作为前缀
-        children: city.area.map(area => ({
-          label: area,
-          value: `${province.name}/${city.name}/${area}`  // 使用省份和城市名称作为前缀
-        }))
-      }))
-    };
-  });
-});
-// 判断是否为预设日期操作符
-const isPresetDateOperator = (operator: string): boolean => {
-  const presetOperators = [
-    'today', 'yesterday', 'tomorrow',
-    'this_week', 'last_week', 'next_week',
-    'this_month', 'last_month', 'next_month',
-    'this_year', 'last_year', 'next_year'
-  ];
-  return presetOperators.includes(operator);
-};
-// 字段类型定义
-type FieldType = 'number' | 'money' | 'text' | 'date' | 'time' | 'select' | 'selectProvince' | 'basedata' | 'billdata';
-// 字段选项接口
-interface FieldOption {
-  key: string;
-  label: string;
-  value: string;
-  type: FieldType;
-  options?: { key: string; label: string; value: string }[];
-}
-// 过滤条件接口
-interface FilterCondition {
-  field: string;
-  operator: string;
-  value: any;
-}
-// 定义组件属性
-interface Props {
-  fieldOptions: FieldOption[];
-  filterCondition: FilterCondition;
-  selectOptions?: Record<string, any[]>; // 添加可选的selectOptions属性
-  size?: string;
-}
-// 获取选择框的选项
-// 获取选择框的选项
-const getSelectOptions = (field: string) => {
-  // 如果父组件传递了对应字段的选项，则使用父组件传递的选项
-  if (props.selectOptions && (props.selectOptions as any)[field]) {
-    return (props.selectOptions as any)[field];
-  }
-  // 尝试从父组件传来的字段列表中查找匹配的字段
-  if (props.selectOptions && Array.isArray(props.selectOptions)){
-   const fieldFromParent = (props.selectOptions as any[]).find((opt: any) =>
-    opt.columnName === field
-  );
-  if (fieldFromParent && fieldFromParent.value) {
-    return sortDepartments(fieldFromParent.value.map((item: any) => ({
-      label: item,
-      value: item
-    })));
-  }
-  }
-  // 如果都没有，返回空数组
-  return [];
-};
-function sortDepartments(departments: any[]) {
-    return [...departments].sort((a: any, b: any) => a.value.localeCompare(b.value, 'zh-CN'));
-}
-const props = defineProps<Props>();
-// Emits 定义
-const emit = defineEmits<{
-  (e: 'search', condition: FilterCondition): void;
-}>();
-// 使用传入的筛选条件
-const filterCondition = ref<FilterCondition>({
-  field: props.filterCondition?.field || '',
-  operator: props.filterCondition?.operator || 'eq',
-  value: props.filterCondition?.value || null
-});
-// 监听筛选条件变化
-watch(() => props.filterCondition, (newVal) => {
-  if (newVal) {
-    filterCondition.value = { ...newVal };
-  }
-}, { deep: true });
-// 获取字段类型
-const getFieldType = (field: string) => {
-  const option = props.fieldOptions.find(opt => opt.value === field);
-  return option ? option.type : 'text';
-};
-// 处理值变化
-const handleValueChange = () => {
-  // 将当前筛选条件直接发送给父组件
-  emit('search', { ...filterCondition.value });
-};
-// 处理操作符变化
-const handleOperatorChange = () => {
-  // 将当前筛选条件直接发送给父组件
-  emit('search', { ...filterCondition.value });
-};
-// 操作符选项
-const operatorOptions = computed(() => {
-  const field = props.filterCondition.field;
-  const fieldType = props.fieldOptions.find(opt => opt.value === field)?.type || 'text';
-  switch (fieldType) {
-    case 'number':
-      return [
-        { key: 'eq', label: '等于', value: 'eq' },
-        { key: 'ne', label: '不等于', value: 'ne' },
-        { key: 'gt', label: '大于', value: 'gt' },
-        { key: 'gte', label: '大于等于', value: 'gte' },
-        { key: 'lt', label: '小于', value: 'lt' },
-        { key: 'lte', label: '小于等于', value: 'lte' }
-      ];
-    case 'date':
-      return [
-        { key: 'eq', label: '等于', value: 'eq' },
-        { key: 'ne', label: '不等于', value: 'ne' },
-        { key: 'gt', label: '在此之后', value: 'gt' },
-        { key: 'gte', label: '在此之后（含）', value: 'gte' },
-        { key: 'lt', label: '在此之前', value: 'lt' },
-        { key: 'lte', label: '在此之前（含）', value: 'lte' },
-        { key: 'today', label: '今天', value: 'today' },
-        { key: 'yesterday', label: '昨天', value: 'yesterday' },
-        { key: 'tomorrow', label: '明天', value: 'tomorrow' },
-        { key: 'this_week', label: '本周', value: 'this_week' },
-        { key: 'last_week', label: '上周', value: 'last_week' },
-        { key: 'next_week', label: '下周', value: 'next_week' },
-        { key: 'this_month', label: '本月', value: 'this_month' },
-        { key: 'last_month', label: '上月', value: 'last_month' },
-        { key: 'next_month', label: '下月', value: 'next_month' },
-        { key: 'this_year', label: '今年', value: 'this_year' },
-        { key: 'last_year', label: '去年', value: 'last_year' },
-        { key: 'next_year', label: '明年', value: 'next_year' }
-      ];
-    case 'time':
-      return [
-        { key: 'eq', label: '等于', value: 'eq' },
-        { key: 'ne', label: '不等于', value: 'ne' },
-        { key: 'gt', label: '在此之后', value: 'gt' },
-        { key: 'gte', label: '在此之后（含）', value: 'gte' },
-        { key: 'lt', label: '在此之前', value: 'lt' },
-        { key: 'lte', label: '在此之前（含）', value: 'lte' }
-      ];
-    case 'select':
-      return [
-        { key: 'eq', label: '等于', value: 'eq' },
-        { key: 'ne', label: '不等于', value: 'ne' }
-      ];
-    case 'selectProvince':
-      return [
-        { key: 'eq', label: '等于', value: 'eq' },
-        { key: 'ne', label: '不等于', value: 'ne' },
-        { key: 'contains', label: '包含', value: 'contains' },
-        { key: 'not_contains', label: '不包含', value: 'not_contains' },
-        { key: 'one_of', label: '等于其中之一', value: 'one_of' },
-      ];
-    case 'basedata':
-      return [
-        { key: 'eq', label: '等于', value: 'eq' },
-        { key: 'ne', label: '不等于', value: 'ne' },
-        { key: 'contains', label: '包含', value: 'contains' },
-        { key: 'not_contains', label: '不包含', value: 'not_contains' },
-        { key: 'one_of', label: '等于其中之一', value: 'one_of' },
-      ];
-    case 'billdata':
-      return [
-        { key: 'eq', label: '等于', value: 'eq' },
-        { key: 'ne', label: '不等于', value: 'ne' },
-        { key: 'contains', label: '包含', value: 'contains' },
-        { key: 'not_contains', label: '不包含', value: 'not_contains' },
-        { key: 'one_of', label: '等于其中之一', value: 'one_of' },
-      ];
-    default:
-      return [
-        { key: 'contains', label: '包含', value: 'contains' },
-        { key: 'eq', label: '等于', value: 'eq' },
-        { key: 'ne', label: '不等于', value: 'ne' },
-        { key: 'starts_with', label: '开头是', value: 'starts_with' },
-        { key: 'ends_with', label: '结尾是', value: 'ends_with' }
-      ];
-  }
-});
-// 处理字段变化
-const handleFieldChange = () => {
-};
-// 监听字段变化
-watch(() => props.filterCondition.field, (oldField,newField) => {
-  if(oldField && newField){
-    props.filterCondition.operator = 'eq';
-    props.filterCondition.value = null;
-  }
-});
-</script>
-<style scoped>
-.filter-component {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  flex: 1;
-  border-radius: var(--td-radius-medium);
-}
-.filter-component :deep(.t-button) {
-  margin-left: 8px;
-}
-.filter-component :deep(.t-input),
-.filter-component :deep(.t-select),
-.filter-component :deep(.t-date-picker),
-.filter-component :deep(.t-time-picker),
-.filter-component :deep(.t-cascader) {
-  flex-shrink: 0;
-}
-</style>