syntec3-0-ui-components-test 1.0.0

package/src/components/Layout/modules/viewFile/filterCriteria.vue

@@ -0,0 +1,816 @@
+<template>
+  <div>
+    <el-form
+      v-for="(item, index) in filterConditions"
+      ref="filterForm"
+      :key="index"
+      :model="item"
+      :rules="getRules(item)"
+      style="margin-bottom: 1rem"
+      :data-test-id="`EL-FORM-t4nN1q-${index}`"
+      class="filter-item"
+    >
+      <el-row :gutter="10" data-test-id="EL-ROW-i6hi71">
+        <!-- 字段选择 -->
+        <el-col :span="5" data-test-id="EL-COL-YtO6It">
+          <el-form-item prop="CloumnName" data-test-id="EL-FORM-ITEM-X2DfMG">
+            <el-select
+              v-model="item.CloumnName"
+              data-test-id="EL-SELECT-Tla5bC"
+              :disabled="item.CloumnName === defaultCreateTimeString"
+              filterable
+              @change="handleChangeColumn($event, index)"
+            >
+              <el-option
+                v-for="(it, index) in fieldSelectDataSource"
+                :key="it.key"
+                :label="it.key === 'salesOrderNumber' ? t(it.key) : t(it.fieldName)"
+                :value="it.key"
+                :disabled="filterConditions.some((item) => item.CloumnName === it.key)"
+                :data-test-id="`EL-OPTION-24JqP4-${index}`"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <!-- 操作符 -->
+        <el-col v-if="item.CloumnName" :span="5" data-test-id="EL-COL-o6tUCn">
+          <el-form-item prop="Operator" data-test-id="EL-FORM-ITEM-lwyEu4">
+            <el-select
+              v-model="item.Operator"
+              :placeholder="t('selectOperation')"
+              data-test-id="EL-SELECT-B8JVKa"
+              @change="handleChangeOperator($event, index)"
+            >
+              <el-option
+                v-for="(it, index) in operatorOptionsFunction(item.ColumnType)"
+                :key="it.value"
+                :label="t(it.label)"
+                :value="it.value"
+                :data-test-id="`EL-OPTION-698Ga6-${index}`"
+              />
+            </el-select>
+          </el-form-item>
+
+          <!-- StartOrEnd（仅类型4） -->
+          <el-form-item v-if="item.ColumnType === 4" prop="StartOrEnd" data-test-id="EL-FORM-ITEM-iI09Nl">
+            <el-select
+              v-model="item.StartOrEnd"
+              style="margin-top: 1rem"
+              :placeholder="t('startOrEndTime')"
+              data-test-id="EL-SELECT-hYLMt4"
+            >
+              <el-option
+                v-for="(it, index) in optionFile.startOrEndOptions"
+                :key="it.value"
+                :label="t(it.label)"
+                :value="it.value"
+                :data-test-id="`EL-OPTION-qkQDv6-${index}`"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <!-- 值输入 -->
+        <el-col v-if="item.Operator && ![9, 10].includes(item.Operator)" :span="12" data-test-id="EL-COL-bWX9Cb">
+          <!-- 文本 / 附件 / 超链接 -->
+          <el-form-item
+            v-if="isTextLikeType(item.ColumnType) && isTextOperator(item.Operator)"
+            prop="TextValue"
+            data-test-id="EL-FORM-ITEM-MaRru1"
+          >
+            <el-input v-model="item.TextValue" :placeholder="t('inputText')" clearable data-test-id="EL-INPUT-RoUXuD" />
+          </el-form-item>
+
+          <!-- 数字范围 -->
+          <el-form-item
+            v-else-if="(item.ColumnType === 2 || item.ColumnType === 9) && [13, 14].includes(item.Operator)"
+            prop="NumberRangeValue"
+            data-test-id="EL-FORM-ITEM-vLLx0f"
+          >
+            <el-input
+              v-model="item.NumberRangeValue[0]"
+              style="width: 150px"
+              type="number"
+              :controls="false"
+              :placeholder="t('minValue')"
+              clearable
+              data-test-id="EL-INPUT-NUMBER-nxVp98"
+            />
+            <span data-test-id="SPAN-aJGkhM"> - </span>
+            <el-input
+              v-model="item.NumberRangeValue[1]"
+              style="width: 150px"
+              type="number"
+              :controls="false"
+              :placeholder="t('maxValue')"
+              clearable
+              data-test-id="EL-INPUT-NUMBER-BhVdW7"
+            />
+          </el-form-item>
+
+          <!-- 单选/多选 -->
+          <el-form-item
+            v-else-if="isSelectType(item.ColumnType) && [5, 15, 16].includes(item.Operator)"
+            prop="SelectRangeValue"
+            data-test-id="EL-FORM-ITEM-tjsXva"
+          >
+            <el-select
+              v-model="item.SelectRangeValue"
+              collapse-tags
+              collapse-tags-tooltip
+              :multiple="item.ColumnType === 8"
+              :placeholder="t('selectOptions')"
+              clearable
+              data-test-id="EL-SELECT-3wxMWS"
+            >
+              <el-option
+                v-for="(opt, index) in fieldSelectOptionsFunction(item.CloumnName)"
+                :key="opt.value"
+                :label="t(opt.label)"
+                :value="opt.value"
+                :data-test-id="`EL-OPTION-5wrWi5-${index}`"
+              />
+            </el-select>
+          </el-form-item>
+
+          <!-- 日期单值 -->
+          <el-form-item
+            v-else-if="isDateType(item.ColumnType) && [1, 2, 3, 4, 5].includes(item.Operator)"
+            prop="DateTimeOperatorValue"
+            data-test-id="EL-FORM-ITEM-932Tco"
+          >
+            <el-row :gutter="10" data-test-id="EL-ROW-CWWfMC">
+              <el-col :span="6" data-test-id="EL-COL-3tGiBz">
+                <el-select
+                  v-model="item.DateTimeOperatorValue.TimeType"
+                  :placeholder="t('timePrecision')"
+                  clearable
+                  data-test-id="EL-SELECT-nphb5z"
+                >
+                  <el-option
+                    v-for="(it, index) in optionFile.timePrecisionOptions"
+                    :key="it.value"
+                    :label="t(it.label)"
+                    :value="it.value"
+                    :data-test-id="`EL-OPTION-7foEY9-${index}`"
+                  />
+                </el-select>
+              </el-col>
+              <el-col :span="18" data-test-id="EL-COL-rxXI8U">
+                <el-date-picker
+                  v-model="item.DateTimeOperatorValue.TimeValue"
+                  :type="item.DateTimeOperatorValue.TimeType === 0 ? 'date' : 'datetime'"
+                  :format="timePrecisionOptionsFunction(item.DateTimeOperatorValue.TimeType)"
+                  value-format="x"
+                  :placeholder="t('selectTime')"
+                  clearable
+                  data-test-id="EL-DATE-PICKER-BFwrVh"
+                />
+              </el-col>
+            </el-row>
+          </el-form-item>
+
+          <!-- 日期范围 -->
+          <el-form-item
+            v-else-if="isDateType(item.ColumnType) && item.Operator === 11"
+            prop="DateTimeRangeValue"
+            data-test-id="EL-FORM-ITEM-nM49hw"
+          >
+            <el-row :gutter="10" data-test-id="EL-ROW-zZIFj0">
+              <el-col :span="12" data-test-id="EL-COL-k6LrJP">
+                <el-select
+                  v-model="item.DateTimeRangeValue.TimeType"
+                  :placeholder="t('timePrecision')"
+                  clearable
+                  data-test-id="EL-SELECT-93yQnb"
+                >
+                  <el-option
+                    v-for="(it, index) in optionFile.timePrecisionOptions"
+                    :key="it.value"
+                    :label="t(it.label)"
+                    :value="it.value"
+                    :data-test-id="`EL-OPTION-WuL5hF-${index}`"
+                  />
+                </el-select>
+              </el-col>
+              <el-col :span="24" data-test-id="EL-COL-Zy3UKA">
+                <el-date-picker
+                  v-model="item.DateTimeRangeValue.TimeValue"
+                  style="width: 90%; margin-top: 1rem"
+                  :type="item.DateTimeRangeValue.TimeType === 0 ? 'daterange' : 'datetimerange'"
+                  :format="timePrecisionOptionsFunction(item.DateTimeRangeValue.TimeType)"
+                  clearable
+                  range-separator="-"
+                  :start-placeholder="t('startTime')"
+                  :end-placeholder="t('endTime')"
+                  data-test-id="EL-DATE-PICKER-fPXNSn"
+                />
+              </el-col>
+            </el-row>
+          </el-form-item>
+
+          <!-- 动态筛选 -->
+          <el-form-item
+            v-else-if="isDateType(item.ColumnType) && item.Operator === 12"
+            prop="DateTimeDynamicFilteringValue"
+            data-test-id="EL-FORM-ITEM-3pz54d"
+          >
+            <el-select
+              v-model="item.DateTimeDynamicFilteringValue.DateType"
+              :placeholder="t('dynamicFiltering')"
+              clearable
+              data-test-id="EL-SELECT-93zW0f"
+              @change="handleDateTimeDynamicFilteringValueChange($event, index)"
+            >
+              <el-option
+                v-for="(it, index) in optionFile.dynamicFilteringOptions"
+                :key="it.value"
+                :label="t(it.label)"
+                :value="it.value"
+                :data-test-id="`EL-OPTION-j2Gto6-${index}`"
+              />
+            </el-select>
+          </el-form-item>
+
+          <!-- 自定义单区间 -->
+          <el-form-item
+            v-if="
+              item.DateTimeDynamicFilteringValue.DateType === 0 || item.DateTimeDynamicFilteringValue.DateType === 1
+            "
+            prop="DateTimeDynamicFilteringCustomize"
+            data-test-id="EL-FORM-ITEM-oKi0MK"
+          >
+            <el-col
+              v-if="item.DateTimeDynamicFilteringValue.DateType === 0"
+              :span="24"
+              style="margin-top: 1rem"
+              data-test-id="EL-COL-5XNCgU"
+            >
+              <el-row :gutter="10" data-test-id="EL-ROW-zHGl1c">
+                <el-col :span="8" data-test-id="EL-COL-tTDMtb">
+                  <el-select
+                    v-model="item.DateTimeDynamicFilteringCustomize[0].PastOrFuture"
+                    :placeholder="t('pastOrFuture')"
+                    clearable
+                    data-test-id="EL-SELECT-xifi4x"
+                  >
+                    <el-option
+                      v-for="(it, ind) in optionFile.pastOrFutureOptions.filter((opt) => opt.value !== 2)"
+                      :key="it.value"
+                      :label="t(it.label)"
+                      :value="it.value"
+                      :data-test-id="`EL-OPTION-0ql2zr-${ind}`"
+                    />
+                  </el-select>
+                </el-col>
+                <el-col :span="8" data-test-id="EL-COL-T5qcri">
+                  <el-input-number
+                    v-model="item.DateTimeDynamicFilteringCustomize[0].NumberValue"
+                    :min="1"
+                    :max="365"
+                    :precision="0"
+                    :controls="false"
+                    style="width: 100%"
+                    clearable
+                    data-test-id="EL-INPUT-NUMBER-RYLnRt"
+                  />
+                </el-col>
+                <el-col :span="8" data-test-id="EL-COL-JlxABO">
+                  <el-select
+                    v-model="item.DateTimeDynamicFilteringCustomize[0].DayType"
+                    :placeholder="t('unity')"
+                    clearable
+                    data-test-id="EL-SELECT-8Lpazq"
+                  >
+                    <el-option
+                      v-for="(it, ind) in optionFile.dayTypeOptions"
+                      :key="it.value"
+                      :label="t(it.label)"
+                      :value="it.value"
+                      :data-test-id="`EL-OPTION-ncuVRo-${ind}`"
+                    />
+                  </el-select>
+                </el-col>
+              </el-row>
+            </el-col>
+
+            <!-- 自定义双区间 -->
+            <el-col
+              v-else-if="item.DateTimeDynamicFilteringValue.DateType === 1"
+              :span="24"
+              style="margin-top: 1rem"
+              data-test-id="EL-COL-eM8opS"
+            >
+              <el-row :gutter="10" data-test-id="EL-ROW-lcZ8pe">
+                <el-col :span="8" data-test-id="EL-COL-7j3j0p">
+                  <el-select
+                    v-model="item.DateTimeDynamicFilteringCustomize[0].PastOrFuture"
+                    :placeholder="t('pastOrFuture')"
+                    clearable
+                    data-test-id="EL-SELECT-FjHTpQ"
+                    @change="
+                      (vel) => {
+                        if (vel === 2) {
+                          item.DateTimeDynamicFilteringCustomize[0].NumberValue = 1;
+                        }
+                      }
+                    "
+                  >
+                    <el-option
+                      v-for="(it, ind) in optionFile.pastOrFutureOptions"
+                      :key="it.value"
+                      :label="t(it.label)"
+                      :value="it.value"
+                      :data-test-id="`EL-OPTION-xpcYp5-${ind}`"
+                    />
+                  </el-select>
+                </el-col>
+                <el-col :span="8" data-test-id="EL-COL-JnQ12D">
+                  <el-input-number
+                    v-model="item.DateTimeDynamicFilteringCustomize[0].NumberValue"
+                    :min="1"
+                    :max="365"
+                    :disabled="item.DateTimeDynamicFilteringCustomize[0].PastOrFuture === 2"
+                    :precision="0"
+                    :controls="false"
+                    style="width: 100%"
+                    clearable
+                    data-test-id="EL-INPUT-NUMBER-3lwksG"
+                  />
+                </el-col>
+                <el-col :span="8" data-test-id="EL-COL-ms7sgy">
+                  <el-select
+                    v-model="item.DateTimeDynamicFilteringCustomize[0].DayType"
+                    :placeholder="t('unity')"
+                    clearable
+                    data-test-id="EL-SELECT-fgZOLb"
+                  >
+                    <el-option
+                      v-for="(it, ind) in optionFile.dayTypeOptions"
+                      :key="it.value"
+                      :label="t(it.label)"
+                      :value="it.value"
+                      :data-test-id="`EL-OPTION-Q07Tx8-${ind}`"
+                    />
+                  </el-select>
+                </el-col>
+              </el-row>
+              <el-row :gutter="10" style="margin-top: 1rem" data-test-id="EL-ROW-XkOYka">
+                <el-col :span="8" data-test-id="EL-COL-dLQQRb">
+                  <el-select
+                    v-model="item.DateTimeDynamicFilteringCustomize[1].PastOrFuture"
+                    :placeholder="t('pastOrFuture')"
+                    clearable
+                    data-test-id="EL-SELECT-ZNyGMx"
+                    @change="
+                      (vel) => {
+                        if (vel === 2) {
+                          item.DateTimeDynamicFilteringCustomize[1].NumberValue = 1;
+                        }
+                      }
+                    "
+                  >
+                    <el-option
+                      v-for="(it, ind) in optionFile.pastOrFutureOptions"
+                      :key="it.value"
+                      :label="t(it.label)"
+                      :value="it.value"
+                      :data-test-id="`EL-OPTION-nlnE2g-${ind}`"
+                    />
+                  </el-select>
+                </el-col>
+                <el-col :span="8" data-test-id="EL-COL-3uTjYF">
+                  <el-input-number
+                    v-model="item.DateTimeDynamicFilteringCustomize[1].NumberValue"
+                    :min="1"
+                    :max="365"
+                    :disabled="item.DateTimeDynamicFilteringCustomize[1].PastOrFuture === 2"
+                    :precision="0"
+                    :controls="false"
+                    style="width: 100%"
+                    clearable
+                    data-test-id="EL-INPUT-NUMBER-w1GgpV"
+                  />
+                </el-col>
+                <el-col :span="8" data-test-id="EL-COL-wDLRGi">
+                  <el-select
+                    v-model="item.DateTimeDynamicFilteringCustomize[1].DayType"
+                    :placeholder="t('unity')"
+                    clearable
+                    data-test-id="EL-SELECT-3d7Hyz"
+                  >
+                    <el-option
+                      v-for="(it, ind) in optionFile.dayTypeOptions"
+                      :key="it.value"
+                      :label="t(it.label)"
+                      :value="it.value"
+                      :data-test-id="`EL-OPTION-wkFjZV-${ind}`"
+                    />
+                  </el-select>
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="item.CloumnName !== defaultCreateTimeString" :span="2" data-test-id="EL-COL-7VbmTB">
+          <!-- 删除按钮 -->
+          <el-button class="ml-2" type="text" data-test-id="EL-BUTTON-f9487D" @click="removeFilter(index)">
+            <i class="mdi mdi-close"></i>
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+<script setup>
+import { ref, nextTick, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ElMessageBox, ElMessage } from 'element-plus';
+// import apiFunction from '@/scriptFiles/checkApiErrorMechanism.js';
+import optionFile from './config.js';
+const { t } = useI18n();
+const props = defineProps({
+  filterConditions: {
+    type: Array,
+    default: () => [],
+  }, // 筛选条件
+  fieldSetting: {
+    type: Array,
+    default: () => [],
+  }, // 筛选条件内容的字段配置
+  // tz新增：外部提供的下拉数据源
+  selectOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+  defaultCreateTimeString: {
+    type: String,
+    default: 'createTime',
+  }, // 默认创建时间字符串
+});
+const filterConditions = computed(() => props.filterConditions);
+const filterForm = ref([]);
+// 工具函数：判断字段类型
+const isTextLikeType = (type) => [1, 5, 6].includes(type); // 文本、附件、超链接
+const isSelectType = (type) => [7, 8].includes(type); // 单选、多选
+const isDateType = (type) => [3, 4].includes(type); // 日期、日期范围
+const isTextOperator = (op) => [5, 6, 7, 8].includes(op); // 等于、包含等
+
+// 字段选择下拉框数据源处理 - 新增
+const fieldSelectDataSource = computed(() => {
+  // 优先使用外部提供的字段列表数据源
+  if (props.selectOptions.fieldList) {
+    return props.selectOptions.fieldList;
+  }
+  // 否则使用默认的fieldSetting
+  return props.fieldSetting;
+});
+
+// 验证规则动态生成
+const getRules = (item) => {
+  const rules = {
+    CloumnName: [{ required: true, message: t('selectField'), trigger: 'change' }],
+    Operator: [{ required: true, message: t('selectOperator'), trigger: 'change' }],
+  };
+
+  if (![9, 10].includes(item.Operator)) {
+    if (isTextLikeType(item.ColumnType) && isTextOperator(item.Operator)) {
+      rules.TextValue = [
+        { required: true, message: t('inputText'), trigger: 'blur' },
+        {
+          validator: (rule, value, callback) => {
+            if (value !== value.trim()) {
+              return callback(new Error(t('haveSpace')));
+            }
+            callback();
+          },
+          trigger: 'blur',
+        },
+      ];
+    }
+
+    if ((item.ColumnType === 2 || item.ColumnType === 9) && [13, 14].includes(item.Operator)) {
+      rules.NumberRangeValue = [
+        { required: true, message: t('inputRangeValue'), trigger: 'change' },
+        {
+          validator: (rule, value, callback) => {
+            const NumberReg = /^(([1-9]{1}[0-9]{0,9})|([0]{1}))((\.{1}[0-9]{1,6}$)|$)/;
+            if (!value || !Array.isArray(value) || value.some((v) => v == null) || value.length !== 2) {
+              return callback(new Error(t('inputValidRange')));
+            }
+            if ((!NumberReg.test(value[0]) && value[0]) || (!NumberReg.test(value[1]) && value[1])) {
+              return callback(new Error(t('numIntegerExceedTen') + ',' + t('numDecimalExceedSix')));
+            }
+            if (+value[0] > +value[1]) {
+              return callback(new Error(t('startValueCannotGreaterThanEndValue')));
+            }
+            callback();
+          },
+          trigger: 'change',
+        },
+      ];
+    }
+
+    if (isSelectType(item.ColumnType) && [15, 16].includes(item.Operator)) {
+      rules.SelectRangeValue = [{ required: true, message: t('selectOptions'), trigger: 'change' }];
+    }
+
+    if (isDateType(item.ColumnType) && [1, 2, 3, 4, 5].includes(item.Operator)) {
+      rules.DateTimeOperatorValue = [
+        { required: true, message: t('selectTime'), trigger: 'change' },
+        {
+          validator: (rule, value, callback) => {
+            if (value?.TimeType === null || !value?.TimeValue) {
+              return callback(new Error(t('selectTimeAndPrecision')));
+            }
+            callback();
+          },
+          trigger: 'change',
+        },
+      ];
+    }
+
+    if (item.ColumnType === 4) {
+      rules.StartOrEnd = [{ required: true, message: t('selectStartOrEnd'), trigger: 'change' }];
+    }
+
+    if (isDateType(item.ColumnType) && item.Operator === 11) {
+      rules.DateTimeRangeValue = [
+        { required: true, message: t('selectTimeRange'), trigger: 'change' },
+        {
+          validator: (rule, value, callback) => {
+            if (value?.TimeType === null || !value?.TimeValue || value.TimeValue.length !== 2) {
+              return callback(new Error(t('selectCompleteTimeRange')));
+            }
+            callback();
+          },
+          trigger: 'change',
+        },
+      ];
+    }
+
+    if (isDateType(item.ColumnType) && item.Operator === 12) {
+      rules.DateTimeDynamicFilteringValue = [
+        { required: true, message: t('selectDynamicFilteringType'), trigger: 'change' },
+        {
+          validator: (rule, value, callback) => {
+            if (value?.DateType === null) {
+              return callback(new Error(t('selectDynamicFilteringType')));
+            }
+            callback();
+          },
+          trigger: 'change',
+        },
+      ];
+      rules.DateTimeDynamicFilteringCustomize = [
+        {
+          validator: (rule, value, callback) => {
+            if (value[0]?.PastOrFuture === null || value[0]?.NumberValue === null || value[0]?.DayType === null) {
+              return callback(new Error(t('pleaseInput')));
+            }
+            callback();
+          },
+          trigger: 'change',
+        },
+      ];
+      if (
+        item?.DateTimeDynamicFilteringValue?.DateType !== null &&
+        item?.DateTimeDynamicFilteringValue?.DateType === 0
+      ) {
+        rules.DateTimeDynamicFilteringCustomize = [
+          {
+            validator: (rule, value, callback) => {
+              if (value[0]?.PastOrFuture === null || value[0]?.NumberValue === null || value[0]?.DayType === null) {
+                return callback(new Error(t('pleaseInput')));
+              }
+              callback();
+            },
+            trigger: 'change',
+          },
+        ];
+      }
+      if (
+        item?.DateTimeDynamicFilteringValue?.DateType !== null &&
+        item?.DateTimeDynamicFilteringValue?.DateType === 1
+      ) {
+        rules.DateTimeDynamicFilteringCustomize = [
+          {
+            validator: (rule, value, callback) => {
+              if (
+                value[0]?.PastOrFuture === null ||
+                value[0]?.NumberValue === null ||
+                value[0]?.DayType === null ||
+                value[1]?.PastOrFuture === null ||
+                value[1]?.NumberValue === null ||
+                value[1]?.DayType === null
+              ) {
+                return callback(new Error(t('pleaseInput')));
+              }
+              callback();
+            },
+            trigger: 'change',
+          },
+        ];
+      }
+    }
+  }
+
+  return rules;
+};
+
+/**
+ * 时间精度选项
+ * @param timeType 时间精度
+ * @returns 时间格式
+ */
+const timePrecisionOptionsFunction = (timeType) => {
+  return optionFile.timePrecisionOptions.find((item) => item.value === timeType)?.timeFormat;
+};
+/**
+ * 筛选条件内容的字段类型改变时，判断逻辑选项改变
+ * @param fieldTypeId 筛选条件内容的字段类型
+ * @returns 筛选条件内容的判断逻辑选项
+ */
+const operatorOptionsFunction = (fieldTypeId) => {
+  const mapping = {
+    1: [5, 6, 7, 8, 9, 10], // 文本
+    2: [9, 10, 13, 14], // 数字
+    3: [1, 2, 3, 4, 5, 9, 10, 11, 12], // 日期
+    4: [1, 2, 3, 4, 5, 9, 10, 11, 12], // 日期范围
+    5: [5, 6, 7, 8, 9, 10], // 附件
+    6: [5, 6, 7, 8, 9, 10], // 超链接
+    7: [5], // 单选
+    8: [9, 10, 15, 16], // 多选
+    9: [9, 10, 13, 14], // 公式 按数字类型处理
+  };
+  const allowed = mapping[fieldTypeId] || [];
+  // 优先使用外部提供的操作符选项
+  if (props.selectOptions.operatorOptions) {
+    return props.selectOptions.operatorOptions.filter((op) => allowed.includes(op.value));
+  }
+  return optionFile.operatorOptions.filter((op) => allowed.includes(op.value));
+};
+
+/**
+ * 筛选条件内容的字段类型改变时，判断逻辑选项改变
+ * @param columnName 筛选条件内容的字段类型
+ * @returns 筛选条件内容的判断逻辑选项
+ */
+const fieldSelectOptionsFunction = (columnName) => {
+  // 添加输入验证，确保columnName是有效的字符串
+  if (columnName === null || columnName === undefined) {
+    return [];
+  }
+  try {
+    // 优先使用外部提供的直接字段配置
+    if (props.selectOptions && typeof props.selectOptions === 'object') {
+      // 1.直接通过字段名配置
+      if (props.selectOptions[columnName]) {
+        return Array.isArray(props.selectOptions[columnName]) ? props.selectOptions[columnName] : [];
+      }
+      // 2.通过类型配置（例如xxxOptions）
+      const typeOptionsKey = Object.keys(props.selectOptions).find(
+        (key) => key.endsWith('Options') && columnName.includes(key.replace('Options', '')),
+      );
+      if (typeOptionsKey) {
+        return Array.isArray(props.selectOptions[typeOptionsKey]) ? props.selectOptions[typeOptionsKey] : [];
+      }
+    }
+    // 从字段配置中获取选项
+    const dataSource = Array.isArray(fieldSelectDataSource.value) ? fieldSelectDataSource.value : [];
+    const field = dataSource.find((f) => f && f.key === columnName);
+    if (field && (field.fieldTypeId === 7 || field.fieldTypeId === 8)) {
+      // 选择类型字段（单选/多选）
+      if (field.fieldSelectOptions) {
+        try {
+          const opts = JSON.parse(field.fieldSelectOptions);
+          return Array.isArray(opts)
+            ? opts.map((opt) => ({
+                label: field.isDoc ? opt : opt ? opt.key || opt.label || opt.value : '',
+                value: field.isDoc ? opt : opt ? opt.value : '',
+              }))
+            : [];
+        } catch (jsonError) {
+          return [];
+        }
+      }
+    }
+
+    return [];
+  } catch (e) {
+    ElMessage.error(t('apiError'));
+  }
+};
+/**
+ * 筛选条件内容的字段类型改变时，判断逻辑选项改变
+ * @param value 筛选条件内容的字段类型
+ * @param index 筛选条件的索引
+ */
+const fieldTypeFun = (type) => {
+  if ([1, 5, 6].includes(type)) {
+    return 5;
+  }
+  if (type === 2) {
+    return 13;
+  }
+  if ([3, 4].includes(type)) {
+    return 11;
+  }
+  if (type === 7) {
+    return 5;
+  }
+  if (type === 8) {
+    return 15;
+  }
+  return null;
+};
+const handleChangeColumn = (value, index) => {
+  const field = fieldSelectDataSource.value.find((f) => f.key === value);
+  // const field = props.fieldSetting.find((f) => f.key === value);
+  const item = filterConditions.value[index];
+  Object.assign(item, {
+    CloumnName: value,
+    ColumnType: field?.fieldTypeId,
+    Operator: fieldTypeFun(field?.fieldTypeId),
+    StartOrEnd: null,
+    TextValue: null,
+    IsCustomSetting: field?.isDoc,
+    DocCustomId: field?.isDoc ? field.key : null,
+    NumberRangeValue: [],
+    SelectRangeValue: [],
+    DateTimeOperatorValue: { TimeType: null, TimeValue: null },
+    DateTimeRangeValue: { TimeType: [3, 4].includes(field?.fieldTypeId) ? 0 : null, TimeValue: [] },
+    DateTimeDynamicFilteringValue: { DateType: null },
+    DateTimeDynamicFilteringCustomize: [
+      { PastOrFuture: null, NumberValue: null, DayType: null },
+      { PastOrFuture: null, NumberValue: null, DayType: null },
+    ],
+  });
+};
+/**
+ *
+ * @param value 筛选条件内容的判断逻辑
+ * @param index 筛选条件的索引
+ */
+const handleChangeOperator = (value, index) => {
+  const item = filterConditions.value[index];
+  // 清空无关字段
+  Object.assign(item, {
+    TextValue: null,
+    NumberRangeValue: [],
+    SelectRangeValue: [],
+    DateTimeOperatorValue: { TimeType: null, TimeValue: null },
+    DateTimeRangeValue: { TimeType: null, TimeValue: [] },
+    DateTimeDynamicFilteringValue: { DateType: null },
+    DateTimeDynamicFilteringCustomize: [
+      { PastOrFuture: null, NumberValue: null, DayType: null },
+      { PastOrFuture: null, NumberValue: null, DayType: null },
+    ],
+  });
+};
+/**
+ * 动态筛选自定义筛选时间类型改变时，判断逻辑选项改变
+ * @param value 动态筛选自定义筛选时间类型
+ * @param index 筛选条件的索引
+ */
+const handleDateTimeDynamicFilteringValueChange = (value, index) => {
+  const item = filterConditions.value[index];
+  item.DateTimeDynamicFilteringCustomize = [
+    { PastOrFuture: null, NumberValue: null, DayType: null },
+    { PastOrFuture: null, NumberValue: null, DayType: null },
+  ];
+};
+/**
+ * 删除筛选条件
+ * @param index 筛选条件的索引
+ */
+const removeFilter = (index) => {
+  ElMessageBox.confirm(t('confirmToDelete'), t('confirmDelete'), {
+    confirmButtonText: t('confirm'),
+    cancelButtonText: t('cancel'),
+    type: 'warning',
+  }).then(() => {
+    filterConditions.value.splice(index, 1);
+    // emit('update:filterConditions', filterConditions);
+  });
+};
+// 暴露提交方法
+const validateAllForms = async () => {
+  await nextTick();
+  try {
+    await Promise.all(filterForm.value.map((form) => form?.validate?.() || Promise.resolve()));
+    return true;
+  } catch (error) {
+    ElMessage.error(t('checkForm'));
+    return false;
+  }
+};
+defineExpose({ validateAllForms });
+</script>
+<style scoped lang="scss">
+.filter-item {
+  background-color: #f9fafb;
+  border-radius: 6px;
+}
+</style>