cd-vue-filter 2.2.5 → 2.2.7

package/src/components/filterDialog.vue

@@ -1,345 +0,0 @@
-<template>
-  <t-dialog header="筛选条件设置" placement="center" :visible="visible" @update:visible="$emit('update:visible', $event)"
-    width="700px" :z-index="999" :footer="true" @close="closeDialog" id="leader-line-clip-container">
-    <template #body>
-      <div class="filter-dialog-content">
-        <div class="leader-line-container">
-          <div class="filter-scroll-wrapper" id="filter-scroll-wrapper">
-            <div class="filter-dialog-left" v-if="filterCards.length > 1">
-              <!-- 单选框列表 -->
-              <div class="connectors-container" >
-                <t-radio-group size="small" class="connector-selector" v-model="type1" style="margin-right: 20px;">
-                  <t-radio-button value="and">且</t-radio-button>
-                  <t-radio-button value="or">或</t-radio-button>
-                </t-radio-group>
-              </div>
-            </div>
-            <!-- 左侧筛选内容 -->
-            <div class="filter-dialog-middle" id="filter-dialog-middle">
-              <!-- 筛选卡片区域 -->
-              <div class="filter-cards">
-                <!-- 筛选卡片 -->
-                <div v-for="(card, cardIndex) in filterCards" :key="card.id" class="filter-card-item">
-                  <!-- 卡片标题和删除按钮 -->
-                  <div class="filter-card-header">
-                    <div style="
-                        display: flex;
-                        align-items: center;
-                        flex-direction: row;
-                      ">
-                      <span class="filter-card-title">筛选卡片 {{ cardIndex + 1 }}</span>
-                      <t-radio-group size="small" v-model="card.connector" class="connector-selector">
-                        <t-radio-button value="and">且</t-radio-button>
-                        <t-radio-button value="or">或</t-radio-button>
-                      </t-radio-group>
-                    </div>
-                    <t-button theme="default" variant="text" size="small" @click="removeFilterCard(cardIndex)"
-                      :disabled="filterCards.length === 1">
-                      <template #icon>
-                        <t-icon name="close" />
-                      </template>
-                    </t-button>
-                  </div>
-                  <!-- 卡片内容：筛选条件组合 -->
-                  <div class="filter-card-content">
-                    <div v-for="(condition, condIndex) in card.conditions" :key="condIndex" class="filter-combination">
-                      <!-- 筛选组件 -->
-                      <FilterComponent :field-options="fieldOptions" :filter-condition="card.conditions[condIndex]"
-                        :index="condIndex" :select-options="[]" :size="size"/>
-                      <!-- 删除条件按钮 -->
-                      <t-button theme="default" variant="text" size="small"
-                        @click="removeConditionFromCard(cardIndex, condIndex)" :disabled="card.conditions.length === 1">
-                        <template #icon>
-                          <t-icon name="minus" />
-                        </template>
-                      </t-button>
-                    </div>
-                    <!-- 添加条件按钮 -->
-                    <div class="filter-card-actions">
-                      <t-button theme="default" size="small" @click="addConditionToCard(cardIndex)">
-                        <template #icon>
-                          <t-icon name="add" />
-                        </template>
-                        添加条件
-                      </t-button>
-                    </div>
-                  </div>
-                </div>
-                <!-- 增加筛选卡片按钮 -->
-                <div class="add-filter-card" @click="addFilterCard">
-                  <div class="add-card-content">
-                    <t-icon name="add" />
-                    <span>增加筛选卡片</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <div class="filter-dialog-footer1">
-        <div class="filter-dialog-footer2"></div>
-        <div class="filter-dialog-footer">
-          <t-button theme="default" @click="closeDialog">取消</t-button>
-          <t-button theme="primary" @click="submitFilter">确定</t-button>
-        </div>
-      </div>
-    </template>
-  </t-dialog>
-</template>
-<script setup>
-import { ref, watch } from 'vue'
-import { MessagePlugin } from 'tdesign-vue-next'
-import FilterComponent from "./FilterComponent.vue"
-// Props
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  fieldOptions: {
-    type: Array,
-    default: () => []
-  },
-  initialFilterCards: {
-    type: Array,
-    default: () => []
-  },
-  initialType1: {
-    type: String,
-    default: 'and'
-  },
-  size: {
-    type: String,
-    default: "medium"
-  }
-})
-// Emits
-const emit = defineEmits([
-  'update:visible',
-  'submit',
-  'close'
-])
-// 筛选卡片列表
-const filterCards = ref([
-  {
-    id: 1,
-    connector: "and",
-    conditions: [
-      { field: "", operator: "eq", value: "" },
-    ],
-  },
-])
-const type1 = ref("and")
-let nextCardId = 3
-// 监听props变化，同步数据
-watch(() => props.initialFilterCards, (newVal) => {
-  if (newVal && newVal.length > 0) {
-    filterCards.value = newVal
-  }
-}, { immediate: true, deep: true })
-watch(() => props.initialType1, (newVal) => {
-  if (newVal) {
-    type1.value = newVal
-  }
-}, { immediate: true })
-// 添加筛选卡片
-const addFilterCard = () => {
-  filterCards.value.push({
-    id: nextCardId++,
-    connector: "and",
-    conditions: [{ field: "", operator: "eq", value: "" }],
-  })
-}
-// 向指定卡片添加筛选条件
-const addConditionToCard = (cardIndex) => {
-  if (cardIndex >= 0 && cardIndex < filterCards.value.length) {
-    filterCards.value[cardIndex].conditions.push({
-      field: "",
-      operator: "eq",
-      value: "",
-    })
-  }
-}
-// 从指定卡片中删除筛选条件
-const removeConditionFromCard = (cardIndex, condIndex) => {
-  if (cardIndex >= 0 && cardIndex < filterCards.value.length) {
-    const card = filterCards.value[cardIndex]
-    if (
-      card.conditions.length > 1 &&
-      condIndex >= 0 &&
-      condIndex < card.conditions.length
-    ) {
-      card.conditions.splice(condIndex, 1)
-    } else if (card.conditions.length <= 1) {
-      MessagePlugin.warning("每个卡片至少需要一个筛选条件")
-    }
-  }
-}
-// 删除筛选卡片
-const removeFilterCard = (cardIndex) => {
-  if (filterCards.value.length > 1) {
-    filterCards.value.splice(cardIndex, 1)
-  } else {
-    MessagePlugin.warning("至少需要保留一个筛选卡片")
-  }
-}
-// 提交筛选
-const submitFilter = () => {
-  emit('submit', {
-    filterCards: filterCards.value,
-    type1: type1.value
-  })
-}
-// 关闭对话框
-const closeDialog = () => {
-  emit('close')
-  emit('update:visible', false)
-}
-</script>
-<style scoped>
-.filter-dialog-content {
-  min-height: 400px;
-}
-.leader-line-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-.filter-scroll-wrapper {
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  margin-left: auto;
-  z-index: 2 !important;
-}
-.filter-dialog-left {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  margin-bottom: 16px;
-  width: 25%;
-  padding-top: 80px;
-  position: relative;
-  z-index: 0;
-}
-.connectors-container {
-  display: flex;
-  align-items: center;
-}
-.connectors-container::before {
-      content: "";
-      position: absolute;
-      width: 100px;
-      left: 75px;
-      border: 1px solid blue;
-      border-right-color: transparent;
-      top: 50px;
-      bottom: 50px;
-      z-index: -1;
-    }
-.connector-selector {
-  margin-right: 20px;
-}
-.filter-dialog-middle {
-  flex: 1;
-}
-.filter-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-.filter-card-item {
-  border: 1px solid var(--td-component-stroke);
-  border-radius: 6px;
-  padding: 16px;
-  background-color: var(--td-bg-color-container);
-}
-.filter-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--td-component-stroke);
-}
-.filter-card-title {
-  font-weight: 500;
-  color: var(--td-text-color-primary);
-  margin-right: 12px;
-}
-.filter-card-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-.filter-combination {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-.filter-card-actions {
-  display: flex;
-  justify-content: flex-start;
-  padding-top: 8px;
-  border-top: 1px dashed var(--td-component-stroke);
-}
-.add-filter-card {
-  border: 2px dashed var(--td-component-stroke);
-  border-radius: 6px;
-  padding: 24px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  background-color: var(--td-bg-color-container-hover);
-}
-.add-filter-card:hover {
-  border-color: var(--td-brand-color);
-  background-color: var(--td-brand-color-light);
-}
-.add-card-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  color: var(--td-text-color-secondary);
-}
-.add-card-content span {
-  font-size: 14px;
-}
-.filter-dialog-footer1 {
-  display: flex;
-  flex-direction: column;
-}
-.filter-dialog-footer2 {
-  flex: 1;
-}
-.filter-dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding-top: 16px;
-  border-top: 1px solid var(--td-component-stroke);
-}
-/* 连接器选择器样式 - 为"且"和"或"添加背景区分 */
-.connector-selector :deep(.t-radio-button.t-is-checked) {
-  background-color: #e8f4ff;
-  border-color: #0052d9;
-}
-.connector-selector :deep(.t-radio-button.t-is-checked .t-radio-button__label) {
-  color: #0052d9;
-  font-weight: 500;
-}
-.connector-selector :deep(.t-radio-button:last-child.t-is-checked) {
-  background-color: #fff3e8;
-  border-color: #ff8800;
-}
-.connector-selector :deep(.t-radio-button:last-child.t-is-checked .t-radio-button__label) {
-  color: #ff8800;
-  font-weight: 500;
-}
-</style>

package/src/index.ts

@@ -1,43 +0,0 @@
-// 直接从项目源文件导入组件
-import FilterDialog from './components/filterDialog.vue';
-import FilterComponent from './components/filterDialog.vue';
-import CdFilterBar from './components/cd-filter-bar.vue';
-import type { 
-  FilterComponentProps, 
-  FilterDialogProps,
-  FilterCard,
-  FilterCondition, 
-  FieldOption, 
-  FieldType, 
-  OperatorOption, 
-  CascaderOption,
-  ProvinceData,
-  CityData
-} from './types/index';
-
-// 导出组件
-export { FilterDialog, FilterComponent, CdFilterBar };
-
-// 导出类型
-export type {
-  FilterComponentProps,
-  FilterDialogProps,
-  FilterCard,
-  FilterCondition,
-  FieldOption,
-  FieldType,
-  OperatorOption,
-  CascaderOption,
-  ProvinceData,
-  CityData
-};
-
-// Vue 插件安装函数
-export const install = (app: any) => {
-  app.component('FilterDialog', FilterDialog);
-  app.component('FilterComponent', FilterComponent);
-  app.component('CdFilterBar', CdFilterBar);
-};
-
-// 默认导出 FilterDialog
-export default FilterDialog;

package/src/types/index.ts

@@ -1,65 +0,0 @@
-// 字段类型定义
-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;
-}
-
-// FilterComponent 组件属性接口
-export interface FilterComponentProps {
-  fieldOptions: FieldOption[];
-  filterCondition: FilterCondition;
-  selectOptions?: Record<string, any[]>;
-}
-
-// FilterDialog 组件属性接口
-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[];
-}