cd-vue-filter 2.2.5 → 2.2.6

package/src/components/cd-filter-bar.vue

@@ -1,412 +0,0 @@
-<template>
-  <div class="cd-filter-bar">
-    <!-- 内联筛选组件区域 -->
-    <div class="inline-filter-toolbar" v-if="filterCount > 0">
-      <FilterComponent
-        v-for="(cond, idx) in inlineHeaderConditions"
-        :key="idx"
-        :field-options="fieldOptions"
-        :size="size"
-        :filter-condition="inlineHeaderConditions[idx]"
-        :select-options="selectOptions"
-      />
-    </div>
-    <!-- 我的方案 - Radio Group 模式（当筛选长度为0时） -->
-    <div class="plan-radio-group" v-if="filterCount === 0 && planFilterOptions.length > 0">
-      <span class="plan-label">我的方案：</span>
-      <t-radio-group v-model="selectedPlanValue" :size="size" @change="handlePlanRadioChange">
-        <t-radio-button
-          v-for="plan in planFilterOptions"
-          :key="plan.value"
-          :value="plan.value"
-          :disabled="plan.disabled"
-        >
-          {{ plan.content }}
-        </t-radio-button>
-      </t-radio-group>
-      <!-- 高级筛选图标按钮 -->
-      <t-button theme="default" variant="outline" :size="size" @click="openAdvancedFilter" title="高级筛选">
-        <template #icon>
-          <t-icon name="filter" />
-        </template>
-      </t-button>
-    </div>
-    <!-- 操作按钮区域 -->
-    <div class="filter-action-buttons">
-      <!-- 搜索按钮 -->
-      <t-button theme="primary" :size="size" @click="emitSearch" title="搜索">
-        <template #icon>
-          <t-icon name="search" />
-        </template>
-      </t-button>
-      <!-- 重置按钮 -->
-      <t-button theme="primary" :size="size" @click="handleReset" title="重置">
-        <template #icon>
-          <t-icon name="refresh" />
-        </template>
-      </t-button>
-      <!-- 高级筛选按钮（当筛选长度大于0时） -->
-      <t-button v-if="filterCount > 0" theme="primary" :size="size" @click="openAdvancedFilter">
-        <template #icon>
-          <t-icon name="filter" />
-        </template>
-      </t-button>
-      <!-- 我的方案下拉菜单（当筛选长度大于0时） -->
-      <t-dropdown v-if="filterCount > 0" :options="dropdownOptions" @click="handlePlanSelect">
-        <t-button theme="primary" :size="size" class="margin-reset">
-          我的方案
-          <template #suffix><t-icon name="chevron-down" /></template>
-        </t-button>
-      </t-dropdown>
-    </div>
-    <!-- 高级筛选对话框 -->
-    <cd-filter
-      v-model:visible="showFilterDialog"
-      :field-options="fieldOptions"
-      :select-options="selectOptions"
-      :plan-filter-options="planFilterOptions"
-      :filter-cards="innerFilterCards"
-      :top-op="innerTopOp"
-      :size="size"
-      :person-tabs="personTabs"
-      :person-organizations="personOrganizations"
-      :visible-columns="visibleColumns"
-      width="1000"
-      @confirm="handleConfirm"
-      @reset="handleReset"
-      @delete-plan="(plan) => emit('delete-plan', plan)"
-      @copy-plan="(plan) => emit('copy-plan', plan)"
-      @set-default-plan="(plan) => emit('set-default-plan', plan)"
-      @update-plan="(payload) => emit('update-plan', payload)"
-      @load-users="(payload) => emit('load-users', payload)"
-      @search="(payload) => emit('search-persons', payload)"
-      @dept-click="(payload) => emit('dept-click', payload)"
-      @column-change="(columns) => emit('column-change', columns)"
-    />
-    <!-- 保存筛选方案弹窗 -->
-    <t-dialog
-      :header="planTitle"
-      :visible="savePlanDialogVisible"
-      width="600px"
-      @close="closeSavePlanDialog"
-    >
-      <template #body>
-        <div class="save-plan-content">
-          <t-form :data="newPlanData" label-width="100px">
-            <t-form-item label="方案名称" required>
-              <t-input v-model="newPlanData.name" placeholder="请输入筛选方案名称" />
-            </t-form-item>
-          </t-form>
-        </div>
-      </template>
-      <template #footer>
-        <t-button theme="default" @click="closeSavePlanDialog">取消</t-button>
-        <t-button theme="primary" @click="emitSavePlan">确定</t-button>
-      </template>
-    </t-dialog>
-  </div>
-</template>
-<script setup>
-import { ref, computed, watch } from 'vue'
-import FilterComponent from './FilterComponent.vue'
-import CdFilter from './cd-filter.vue'
-// Props
-const props = defineProps({
-  fieldOptions: { type: Array, required: true },
-  filterCount: { type: Number, default: 2 },
-  selectOptions: { type: Array, default: () => [] },
-  filterCards: {
-    type: Array,
-    default: () => [
-      {
-        id: 1,
-        connector: 'and',
-        conditions: [
-          { field: '', operator: 'eq', value: '' },
-          { field: '', operator: 'eq', value: '' }
-        ]
-      }
-    ]
-  },
-  topOp: { type: String, default: 'and' },
-  planFilterOptions: { type: Array, default: () => [] },
-  size: { type: String, default: 'small' },
-  width: { type: String, default: '1000px' },
-  personTabs: { type: Array, default: () => [] },
-  personOrganizations: { type: Array, default: () => [] },
-  visibleColumns: { type: Array, default: () => [] }
-})
-const emit = defineEmits([
-  'search',
-  'reset',
-  'save-plan',
-  'delete-plan',
-  'copy-plan',
-  'set-default-plan',
-  'update-plan',
-  'confirm',
-  'load-users',
-  'search-persons',
-  'dept-click',
-  'column-change'
-])
-// 内联条件根据 filterComCount 派生
-const inlineHeaderConditions = ref([])
-const makeBlankCondition = () => ({ field: '', operator: 'eq', value: '' })
-const initInlineHeaderConditions = () => {
-  // 如果 filterCount 为 0，不初始化内联条件
-  if (props.filterCount === 0) {
-    inlineHeaderConditions.value = []
-    return
-  }
-
-  const base = props.filterCards?.[0]?.conditions || []
-  inlineHeaderConditions.value = Array.from({ length: props.filterCount }, (_, i) => {
-    return base[i] ? JSON.parse(JSON.stringify(base[i])) : makeBlankCondition()
-  })
-}
-initInlineHeaderConditions()
-const clearInlineHeaderConditions = () => {
-  // 如果 filterCount 为 0，清空即可
-  if (props.filterCount === 0) {
-    inlineHeaderConditions.value = []
-    return
-  }
-  inlineHeaderConditions.value = Array.from({ length: props.filterCount }, () => makeBlankCondition())
-}
-const planTitle = ref('保存筛选方案')
-// 高级筛选内部状态
-const showFilterDialog = ref(false)
-const innerTopOp = ref(props.topOp)
-const innerFilterCards = ref(JSON.parse(JSON.stringify(props.filterCards)))
-watch(() => props.topOp, (v) => (innerTopOp.value = v))
-watch(() => props.filterCards, (v) => (innerFilterCards.value = JSON.parse(JSON.stringify(v))))
-// 方案相关
-const selectedPlanFilter = ref(null)
-const selectedPlanValue = ref('') // Radio Group 选中的值
-
-const dropdownOptions = computed(() => {
-  return props.planFilterOptions && props.planFilterOptions.length > 0
-    ? props.planFilterOptions
-    : [{ content: '暂无方案', value: 'empty', disabled: true }]
-})
-
-// Radio Group 方案选择处理
-const handlePlanRadioChange = (value) => {
-  const selectedPlan = props.planFilterOptions.find(p => p.value === value)
-  if (selectedPlan) {
-    handlePlanSelect(selectedPlan)
-  }
-}
-
-// 通用方案选择处理（适用于 dropdown 和 radio）
-const handlePlanSelect = (option) => {
-  if (!option.precepts || option.precepts.length === 0) return
-  // 更新选中的方案
-  selectedPlanFilter.value = option
-  selectedPlanValue.value = option.value // 同步更新 radio 选中值
-
-  // 更新内部筛选卡片和顶层操作符
-  innerFilterCards.value = JSON.parse(JSON.stringify(option.precepts))
-  innerTopOp.value = option.sqlConnectType
-
-  // 同步更新内联条件显示（仅当 filterCount > 0 时）
-  if (props.filterCount > 0) {
-    const firstCard = option.precepts[0]
-    if (firstCard && firstCard.conditions) {
-      inlineHeaderConditions.value = Array.from({ length: props.filterCount }, (_, i) => {
-        return firstCard.conditions[i]
-          ? JSON.parse(JSON.stringify(firstCard.conditions[i]))
-          : makeBlankCondition()
-      })
-    }
-  }
-
-  const cleaned = cleanFilterCards(option.precepts)
-  const transformed = transformConditions(cleaned, option.sqlConnectType)
-  emit('confirm', transformed)
-
-  // 如果方案包含列配置，通知父组件（只传递显示的列）
-  if (option.columns && option.columns.length > 0) {
-    const visibleColumns = option.columns.filter(col => col.show !== false)
-    emit('column-change', visibleColumns)
-  }
-}
-const emitSearch = () => {
-  // 当 filterCount 为 0 时，不处理内联条件，直接发送空筛选
-  if (props.filterCount === 0) {
-    emit('search', { conditions: { and: [] } })
-    return
-  }
-
-  const cleaned = cleanFilterCards([
-    { id: 1, connector: innerTopOp.value, conditions: inlineHeaderConditions.value }
-  ])
-  const transformed = transformConditions(cleaned, 'and')
-  emit('search', transformed)
-}
-// 高级筛选弹窗开关
-const openAdvancedFilter = () => {
-  showFilterDialog.value = true
-}
-const closeAdvancedFilter = () => {
-  showFilterDialog.value = false
-}
-// 清理筛选卡片，保证字段有效
-const cleanFilterCards = (cards) => {
-  return cards
-    .map((card) => {
-      const validConditions = card.conditions
-        .filter((condition) => condition.field && condition.field.trim() !== '')
-        .map((condition) => {
-          let cleanValue = ''
-          if (condition.value !== null && condition.value !== undefined) {
-            if (Array.isArray(condition.value)) {
-              cleanValue = condition.value.join('/')
-            } else {
-              cleanValue = String(condition.value)
-            }
-          }
-          return {
-            field: condition.field.trim(),
-            operator: condition.operator || 'eq',
-            value: cleanValue
-          }
-        })
-      return {
-        ...card,
-        connector: card.connector || 'and',
-        conditions: validConditions.length > 0 ? validConditions : [{ field: '', operator: 'eq', value: '' }]
-      }
-    })
-    .filter((card) => card.conditions.length > 0 && card.conditions[0].field !== '')
-}
-// 构建新的查询条件格式
-function transformConditions(conditions, type) {
-  if (type !== 'and' && type !== 'or') {
-    throw new Error('type参数必须是"and"或"or"')
-  }
-  function transformSingleCondition(condition) {
-    return {
-      [condition.field]: {
-        [condition.operator]: condition.value
-      }
-    }
-  }
-  function transformConditionGroup(group) {
-    if (group.conditions.length === 1) {
-      return transformSingleCondition(group.conditions[0])
-    }
-    return {
-      [group.connector]: group.conditions.map(transformSingleCondition)
-    }
-  }
-  const result = {
-    conditions: {
-      [type]: conditions.map(transformConditionGroup)
-    }
-  }
-  return result
-}
-// 保存方案对话框
-const openSavePlanDialog = (plan) => {
-  if (selectedPlanFilter.value) {
-    planTitle.value = '更新筛选方案'
-    newPlanData.value.name = selectedPlanFilter.value.content || ''
-  } else {
-    planTitle.value = '保存筛选方案'
-    newPlanData.value.name = ''
-    selectedPlanFilter.value = null
-  }
-  savePlanDialogVisible.value = true
-}
-const closeSavePlanDialog = () => {
-  savePlanDialogVisible.value = false
-}
-// 重置、保存
-const handleReset = () => {
-  clearInlineHeaderConditions()
-  selectedPlanFilter.value = null
-  selectedPlanValue.value = '' // 清空 radio 选中值
-  innerFilterCards.value = [
-    {
-      id: 1,
-      connector: 'and',
-      conditions: [
-        { field: '', operator: 'eq', value: '' },
-        { field: '', operator: 'eq', value: '' }
-      ]
-    }
-  ]
-  innerTopOp.value = 'and'
-  emit('reset')
-  emitSearch()
-}
-const emitSavePlan = () => {
-  if (selectedPlanFilter.value) {
-    const cleaned = cleanFilterCards(innerFilterCards.value)
-    emit('update-plan', {
-      name: newPlanData.value.name,
-      precepts: cleaned,
-      topOp: innerTopOp.value,
-      plan: selectedPlanFilter.value,
-      columns: props.visibleColumns || [] // 包含当前列配置
-    })
-  } else {
-    const cleaned = cleanFilterCards(innerFilterCards.value)
-    emit('save-plan', {
-      name: newPlanData.value.name,
-      precepts: cleaned,
-      topOp: innerTopOp.value,
-      plan: selectedPlanFilter.value,
-      columns: props.visibleColumns || [] // 包含当前列配置
-    })
-  }
-  closeSavePlanDialog()
-}
-const handleConfirm = (condition) => {
-  const transformed = transformConditions(condition.filterCards, condition.type1)
-  emit('confirm', transformed)
-  // 仅在 filterCount > 0 时清空内联条件
-  if (props.filterCount > 0) {
-    clearInlineHeaderConditions()
-  }
-  closeAdvancedFilter()
-}
-// 保存方案弹窗数据
-const savePlanDialogVisible = ref(false)
-const newPlanData = ref({ name: '' })
-</script>
-<style scoped lang="scss">
-.cd-filter-bar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.inline-filter-toolbar {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-.plan-radio-group {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: 1;
-
-  .plan-label {
-    font-size: 14px;
-    font-weight: 500;
-    color: #333;
-    white-space: nowrap;
-  }
-}
-.filter-action-buttons {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-.margin-reset {
-  margin: 0;
-}
-</style>