cd-vue-filter 2.2.5 → 2.2.7

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>

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>