cd-vue-filter 2.2.5 → 2.2.6

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>

package/src/components/SavePlanDialog.vue

@@ -1,239 +0,0 @@
-<template>
-  <t-dialog
-    :header="isEditing ? '编辑筛选方案' : '保存筛选方案'"
-    :visible="visible"
-    @update:visible="$emit('update:visible', $event)"
-    width="600px"
-    :footer="true"
-    @confirm="handleConfirm"
-    @close="handleClose"
-  >
-    <template #body>
-      <div class="save-plan-content">
-        <t-form :data="formData" label-align="left" label-width="100px">
-          <t-form-item label="方案名称" required>
-            <t-input v-model="formData.planName" placeholder="请输入方案名称" />
-          </t-form-item>
-          <t-form-item label="共享设置">
-            <t-radio-group v-model="formData.shareMode" :disabled="isShareModeDisabled">
-              <t-radio value="none">不共享</t-radio>
-              <t-radio value="share">共享给其他人</t-radio>
-              <t-tooltip content="复制方案只支持复制一次，建议共享方案" placement="top">
-                <t-radio value="copy">复制给其他人</t-radio>
-              </t-tooltip>
-            </t-radio-group>
-          </t-form-item>
-          <t-form-item v-if="formData.shareMode === 'share'" label="共享范围">
-            <t-radio-group v-model="formData.shareType">
-              <t-radio value="specific">指定用户</t-radio>
-              <t-radio value="all">所有用户</t-radio>
-            </t-radio-group>
-          </t-form-item>
-          <t-form-item v-if="(formData.shareMode === 'share' && formData.shareType === 'specific') || formData.shareMode === 'copy'" label="共享人员">
-            <CdUsersList
-              :users="sharedUsersList"
-              :avatar-size="32"
-              :max-display="10"
-              :edit="true"
-              :person-tabs="tabs"
-              :person-organizations="organizations"
-              :dept-members-data="deptMembersData"
-              @person-select="handlePersonSelect"
-              @load-users="handleLoadUsers"
-              @search="handlePersonSearch"
-              @dept-click="handleDeptClick"
-            />
-          </t-form-item>
-        </t-form>
-      </div>
-    </template>
-    <template #footer>
-      <t-button theme="default" @click="handleClose">取消</t-button>
-      <t-button theme="primary" @click="handleConfirm">确定</t-button>
-    </template>
-  </t-dialog>
-</template>
-<script setup>
-import { ref, watch, computed } from 'vue'
-import { MessagePlugin } from 'tdesign-vue-next'
-import { CdUsersList } from 'cd-usercard'
-
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  isEditing: {
-    type: Boolean,
-    default: false
-  },
-  planName: {
-    type: String,
-    default: ''
-  },
-  userOptions: {
-    type: Array,
-    default: () => []
-  },
-  tabs: {
-    type: Array,
-    default: () => []
-  },
-  organizations: {
-    type: Array,
-    default: () => []
-  },
-  deptMembersDataProp: {
-    type: Array,
-    default: () => []
-  },
-  // 原始方案的共享配置
-  originalShareMode: {
-    type: String,
-    default: 'none'
-  },
-  originalShareType: {
-    type: String,
-    default: 'specific'
-  },
-  originalSelectedUsers: {
-    type: Array,
-    default: () => []
-  }
-})
-
-const emit = defineEmits(['update:visible', 'confirm', 'close', 'load-users', 'search', 'dept-click'])
-
-const formData = ref({
-  planName: '',
-  shareMode: 'none',
-  shareType: 'specific',
-  selectedUsers: []
-})
-
-const sharedUsersList = ref([])
-const deptMembersData = ref([])
-
-// 判断是否禁用共享设置radio - 编辑模式下如果原方案是复制模式则禁用
-const isShareModeDisabled = computed(() => {
-  return props.isEditing && props.originalShareMode === 'copy'
-})
-
-watch(() => props.visible, (newVal) => {
-  if (newVal) {
-    // 打开对话框时，如果是编辑模式，预填充方案名称和共享配置
-    if (props.isEditing && props.planName) {
-      formData.value.planName = props.planName
-      formData.value.shareMode = props.originalShareMode || 'none'
-      formData.value.shareType = props.originalShareType || 'specific'
-
-      // 恢复原始共享用户列表
-      if (props.originalSelectedUsers && props.originalSelectedUsers.length > 0) {
-        formData.value.selectedUsers = [...props.originalSelectedUsers]
-        // 这里需要从父组件传入完整的用户信息
-        // 暂时只保存ID，实际使用时需要完整的用户信息
-      }
-    }
-  } else {
-    resetForm()
-  }
-})
-
-watch(() => props.deptMembersDataProp, (newVal) => {
-  if (newVal) {
-    deptMembersData.value = newVal
-  }
-})
-
-const resetForm = () => {
-  formData.value = {
-    planName: '',
-    shareMode: 'none',
-    shareType: 'specific',
-    selectedUsers: []
-  }
-  sharedUsersList.value = []
-  deptMembersData.value = []
-}
-
-const handlePersonSelect = (persons) => {
-  console.log('选中人员:', persons)
-  // 将选中的人员/部门转换为用户列表格式并添加到列表中
-  const newItems = persons.map(p => ({
-    id: p.id,
-    name: p.displayName || p.name,
-    avatar: '',
-    department: p.department,
-    role: p.position,
-    email: '',
-    mobile: p.phone || '',
-    employeeId: '',
-    signature: '',
-    tags: [],
-    isUser: p.isUser === true,
-  }))
-  // 去重并添加
-  newItems.forEach(newItem => {
-    const exists = sharedUsersList.value.find(u => u.id === newItem.id)
-    if (!exists) {
-      sharedUsersList.value.push(newItem)
-    }
-  })
-  // 更新 selectedUsers 用于提交
-  formData.value.selectedUsers = sharedUsersList.value.map(u => u.id)
-}
-
-const handleLoadUsers = (payload) => {
-  emit('load-users', payload)
-}
-
-const handlePersonSearch = (payload) => {
-  emit('search', payload)
-}
-
-const handleDeptClick = (dept) => {
-  emit('dept-click', dept)
-}
-
-const handleConfirm = () => {
-  if (!formData.value.planName.trim()) {
-    MessagePlugin.warning('请输入方案名称')
-    return
-  }
-  if ((formData.value.shareMode === 'share' || formData.value.shareMode === 'copy') &&
-      formData.value.shareType === 'specific' &&
-      formData.value.selectedUsers.length === 0) {
-    MessagePlugin.warning('请选择要共享的用户')
-    return
-  }
-  emit('confirm', {
-    planName: formData.value.planName,
-    shareMode: formData.value.shareMode,
-    shareType: formData.value.shareType,
-    selectedUsers: formData.value.selectedUsers
-  })
-  emit('update:visible', false)
-}
-const handleClose = () => {
-  emit('close')
-  emit('update:visible', false)
-}
-</script>
-<style scoped>
-.save-plan-content {
-  padding: 20px 0;
-  font-size: 9pt;
-}
-.save-plan-content :deep(.t-form-item__label) {
-  font-size: 9pt;
-}
-.save-plan-content :deep(.t-input),
-.save-plan-content :deep(.t-checkbox),
-.save-plan-content :deep(.t-radio),
-.save-plan-content :deep(.t-select) {
-  font-size: 9pt;
-}
-.save-plan-content :deep(.t-input__inner) {
-  font-size: 9pt;
-}
-</style>