syntec3-0-ui-components-test 1.0.0

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

@@ -0,0 +1,1000 @@
+<template>
+  <el-drawer
+    v-model="visible"
+    :show-close="false"
+    size="calc(60% - 100px)"
+    :append-to-body="false"
+    :close-on-press-escape="false"
+    :modal="false"
+    :z-index="2000"
+    :with-header="false"
+    body-class="drawer-box"
+    data-test-id="EL-DRAWER-bQvmdU"
+    class="create-view-drawer"
+  >
+    <template #default>
+      <div class="view-box" data-test-id="DIV-1N5GVN">
+        <div class="view-title" data-test-id="DIV-RHdrZN">
+          <h3 data-test-id="H4-2vhWDY">
+            <span data-test-id="SPAN-vzUpbG">
+              <v-icon class="mdi mdi-book-open-variant" data-test-id="V-ICON-52NN4f" />&thinsp;{{ viewTypeTitle }}
+            </span>
+          </h3>
+          <el-icon class="mdi mdi-close cursor" :size="25" data-test-id="EL-ICON-Y6FnRm" @click="close"> </el-icon>
+        </div>
+        <div class="view-content" data-test-id="DIV-lpvhN1">
+          <el-menu
+            v-model="activeMenu"
+            class="el-menu-vertical-demo"
+            background-color="#f5f7fa"
+            text-color="#333"
+            active-text-color="#125088"
+            :default-active="activeMenu"
+            unique-opened
+            data-test-id="EL-MENU-zUc2Ka"
+          >
+            <el-menu-item index="basicInfo" data-test-id="EL-MENU-ITEM-e3jZsV" @click="activeMenu = 'basicInfo'">
+              <span class="mdi mdi-note-text" data-test-id="SPAN-FXgldN" /> {{ t('basicInfo') }}
+            </el-menu-item>
+            <el-menu-item index="dataFilter" data-test-id="EL-MENU-ITEM-FP0Pdh" @click="activeMenu = 'dataFilter'">
+              <span class="mdi mdi-filter-cog" data-test-id="SPAN-DvUe8j" /> {{ t('dataFilter') }}
+            </el-menu-item>
+          </el-menu>
+          <div class="drawer-content" data-test-id="DIV-9dBeYG">
+            <div v-show="activeMenu === 'basicInfo'" data-test-id="DIV-qkoKbM">
+              <h3 data-test-id="H3-95pW9X">{{ t('basicInfo') }}</h3>
+              <el-form
+                ref="basicFormRef"
+                :model="formData"
+                :rules="rules"
+                label-width="auto"
+                data-test-id="EL-FORM-RLlvjp"
+              >
+                <el-form-item :label="t('viewName')" prop="viewName" data-test-id="EL-FORM-ITEM-wwCvB7">
+                  <el-input
+                    v-model="formData.viewName"
+                    :placeholder="t('enter') + t('viewName')"
+                    maxlength="20"
+                    :disabled="viewId < 0"
+                    show-word-limit
+                    clearable
+                    data-test-id="EL-INPUT-eTI2mw"
+                  />
+                </el-form-item>
+                <el-form-item :label="t('viewIcon')" data-test-id="EL-FORM-ITEM-UtKiIs">
+                  <div class="icon-options" data-test-id="DIV-OuotQS">
+                    <el-button
+                      v-for="(option, index) in 7"
+                      :key="index"
+                      :class="{ active: formData.selectedIconIndex === index }"
+                      :style="{
+                        color: iconColors[index],
+                        borderColor: formData.selectedIconIndex === index ? '#4665ad' : '#dcdcdc',
+                      }"
+                      type="text"
+                      data-test-id="EL-BUTTON-4Hyaga"
+                      @click="formData.selectedIconIndex = index"
+                    >
+                      <i class="mdi mdi-book-open-blank-variant radio-icon" data-test-id="V-ICON-oBZKUA" />
+                    </el-button>
+                  </div>
+                </el-form-item>
+                <el-form-item
+                  :label="t('viewPermission')"
+                  prop="permission"
+                  required
+                  data-test-id="EL-FORM-ITEM-Jb9jGY"
+                >
+                  <el-cascader
+                    v-model="formData.permission"
+                    :options="options"
+                    :props="cascadeProperty"
+                    :show-all-levels="false"
+                    show-checked-strategy="parent"
+                    clearable
+                    data-test-id="EL-CASCADER-X0KLWz"
+                    @change="handleChange"
+                  />
+                </el-form-item>
+              </el-form>
+            </div>
+            <div v-show="activeMenu === 'dataFilter'" data-test-id="DIV-ckP1yh">
+              <h3 data-test-id="H3-c1nKHQ">
+                {{ t('dataFilter') }}
+              </h3>
+              <filterCriteria
+                ref="filterCriteriaRef"
+                :field-setting="fieldSetting"
+                :filter-conditions="dataFilterList"
+                :select-options="selectOptions"
+                :default-create-time-string="defaultCreateTimeString"
+                data-test-id="FILTERCRITERIA-ShqDeQ"
+              />
+              <el-button link type="primary" data-test-id="EL-BUTTON-W21EYJ" @click="addFilterCondition">
+                <v-icon class="mdi mdi-plus" style="margin-right: 0.5rem" data-test-id="V-ICON-u6sfaW" />
+                {{ t('addFilterConditions') }}
+              </el-button>
+            </div>
+            <div class="drawer-footer" data-test-id="DIV-eCU0O7">
+              <el-button type="primary" data-test-id="EL-BUTTON-xHRONm" @click="saveView">
+                {{ t('save') }}
+              </el-button>
+              <el-button type="primary" data-test-id="EL-BUTTON-CQwuMO" @click="close">
+                {{ t('cancellation') }}
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup>
+import { ref, computed, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import apiFunction from '@/scriptFiles/checkApiErrorMechanism.js';
+import { ElMessage, ElLoading } from 'element-plus';
+import dayjs from 'dayjs';
+import filterCriteria from './filterCriteria.vue';
+import optionFile from './config.js';
+import CryptoJS from 'crypto-js';
+const loadin = ref(null);
+const loadingFun = (val) => {
+  if (val && !loadin.value) {
+    loadin.value = ElLoading.service({
+      target: '.create-view-drawer',
+      lock: true,
+    });
+    return;
+  }
+  loadin.value?.close();
+  loadin.value = null;
+};
+const props = defineProps({
+  permissionData: Object,
+  selectOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+  defaultCreateTimeString: {
+    type: String,
+    default: 'createTime',
+  }, // 默认创建时间字符串
+});
+const fieldSetting = ref([]);
+const emit = defineEmits(['updataView']);
+const dataFilterList = ref([]);
+const dataInfo = reactive({
+  Operator: 12, // 操作内容
+  IsCustomSetting: false, // 是否自定义
+  DocCustomId: null, // 自定义id
+  ColumnType: 3, // 字段类型
+  TextValue: null, // 文本内容
+  NumberValue: null, // 数字内容
+  NumberRangeValue: [], // 最大值最小值
+  CloumnName: props.defaultCreateTimeString, // 字段名
+  SelectRangeValue: [], // 下拉选择内容
+  // 单选日期
+  DateTimeOperatorValue: {
+    TimeType: null,
+    TimeValue: null,
+  },
+  // 多选日期范围对应的值
+  DateTimeRangeValue: {
+    TimeType: null,
+    TimeValue: [],
+  },
+  // 自定义区间1：双区间，0：单区间
+  DateTimeDynamicFilteringValue: {
+    DateType: 1,
+  },
+  // 自定义范围区间对应的值
+  DateTimeDynamicFilteringCustomize: [
+    {
+      PastOrFuture: 0,
+      NumberValue: 365,
+      DayType: 1,
+    },
+    {
+      PastOrFuture: 2,
+      NumberValue: 1,
+      DayType: 1,
+    },
+  ],
+  StartOrEnd: null,
+});
+const { t, locale } = useI18n();
+const activeMenu = ref('basicInfo');
+const viewId = ref(null); // 视图ID
+const viewTypeTitle = ref(t('newView'));
+const visible = ref(false); // 视图窗口
+const isType = ref(1); // 1：新增 0：编辑
+const formData = reactive({
+  viewName: '', // 视图名称
+  permission: ['-1'], // 查阅人员
+  selectedIconIndex: 0, // 图标
+});
+const filterCriteriaRef = ref(null);
+const basicFormRef = ref(null);
+// 校验
+const rules = computed(() => ({
+  viewName: [
+    { required: true, message: t('required'), trigger: ['change'] },
+    {
+      validator: async (rule, value, callback) => {
+        const {
+          data: { code },
+        } = await apiFunction.checkViewName({
+          viewName: value,
+          permissionCode: props.permissionData.permissionCode,
+          id: viewId.value,
+        });
+        if (code !== 0 && viewId.value >= 0) {
+          return callback(new Error(t('duplicateViewNames')));
+        }
+        if (value !== value.trim()) {
+          return callback(new Error(t('haveSpace')));
+        }
+        if (value.trim().length > 20) {
+          return callback(new Error(t('no20Characters')));
+        }
+        callback();
+      },
+      trigger: ['change'],
+    },
+  ],
+  permission: [{ required: true, message: t('required'), trigger: ['blur', 'change'] }],
+}));
+// 查询人员
+// 数据源 - 将"所有人"的value改为'1'保持一致性
+const options = ref([]);
+const queryDepartmentStaff = async () => {
+  await apiFunction
+    .getViewReadEmployeeList()
+    .then((res) => {
+      if (res.data.code === 0) {
+        options.value = res.data.content;
+      } else {
+        ElMessage.error(t('message'));
+      }
+    })
+    .catch(() => {
+      ElMessage.error(t('apiError'));
+    });
+};
+// 图标选择配置
+const iconColors = ref(['#125088', '#FF0000', '#F0D155', '#99C0E4', '#FF7A21', '#323338', '#34AA1A']);
+// 级联选择器配置
+const cascadeProperty = {
+  showPrefix: true,
+  multiple: true,
+  checkOnClickNode: true,
+  renderTag: (obj) => obj.label,
+};
+const handleChange = (newValues) => {
+  if (newValues.length && newValues.length > 1) {
+    if (newValues[0].includes('-1')) {
+      formData.permission = formData.permission.filter((ite, i) => i > 0);
+    } else {
+      newValues.forEach((item) => {
+        const isAll = item.some((el) => el === '-1');
+        if (isAll) {
+          formData.permission = ['-1'];
+        }
+      });
+    }
+  }
+};
+/* 筛选条件 */
+const addFilterCondition = () => {
+  dataFilterList.value.push({
+    Operator: null,
+    IsCustomSetting: null,
+    DocCustomId: null,
+    ColumnType: null,
+    TextValue: null,
+    NumberValue: null,
+    NumberRangeValue: [],
+    CloumnName: null,
+    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,
+      },
+    ],
+  });
+};
+const setPerson = (List) => {
+  if (!List.length) {
+    return ['-1'];
+  }
+  let result = [];
+  const allList = [];
+  options.value.forEach((item) => {
+    if (item.children.length) {
+      item.children.forEach((el) => {
+        allList.push(el.value);
+        if (List.includes(Number(el.value))) {
+          result.push([item.value, el.value]);
+        }
+      });
+    }
+  });
+  if (allList.length === List.length) {
+    result = [['-1']];
+  }
+  return result;
+};
+/* 查询自定义筛选字段内容 */
+const getViewFilterList = async () => {
+  try {
+    // 优先使用外部传入的selectOptions数据
+    if (props.selectOptions && props.selectOptions.fieldList && props.selectOptions.fieldList.length > 0) {
+      // 转换外部传入的fieldList数据为fieldSetting格式
+      fieldSetting.value = props.selectOptions.fieldList.map((item) => ({
+        fieldName: item.fieldName,
+        fieldTypeId: item.fieldTypeId,
+        fieldSelectOptions: item.fieldSelectOptions,
+        key: item.key || item.fieldName,
+        isDoc: item.isDoc || false,
+      }));
+    } else {
+      // 如果没有外部数据，则回退到API调用
+      const {
+        data: { code, content, message },
+      } = await apiFunction.getViewFilterList({ permissionCode: props.permissionData.permissionCode });
+      const params = {
+        docCode: props.permissionData.docCode,
+        status: 1,
+        fieldName: '',
+        consDate: [],
+        startIndex: 0,
+        count: 100,
+      };
+      const custom = await apiFunction.querySetting(params);
+      if (code !== 0) {
+        ElMessage.error(t(message));
+        return;
+      }
+      const fieldSettings = content.map((item) => ({
+        fieldName: item.fieldKey,
+        fieldTypeId: item.fieldTypeId,
+        fieldSelectOptions: item.fieldSelectOptions,
+        key: item.fieldKey,
+        isDoc: false,
+      }));
+      let docCustomSettings = [];
+      if (custom.data.code === 0) {
+        docCustomSettings = custom.data.content.data
+          .filter((it) => it.fieldTypeId !== 9)
+          .map((item) => ({
+            fieldName: item.fieldName,
+            fieldTypeId: item.fieldTypeId,
+            fieldSelectOptions: item.fieldSelectOptions,
+            key: item.docCustomId,
+            isDoc: true,
+          }));
+      }
+      fieldSetting.value = [...fieldSettings, ...docCustomSettings];
+    }
+    const createTimeSetting = fieldSetting.value.find((item) => item.key === props.defaultCreateTimeString);
+    if (!createTimeSetting) {
+      fieldSetting.value.unshift({
+        fieldName: props.defaultCreateTimeString,
+        fieldKey: props.defaultCreateTimeString,
+        fieldTypeId: 3,
+        fieldSelectOptions: [],
+        key: props.defaultCreateTimeString,
+        isDoc: false,
+      });
+    }
+  } catch (error) {
+    ElMessage.error(t('apiError'));
+  }
+};
+const open = async (id, type) => {
+  try {
+    loadingFun(true);
+    activeMenu.value = 'basicInfo';
+    visible.value = true;
+    await queryDepartmentStaff();
+    await getViewFilterList();
+    isType.value = type;
+    if (id) {
+      viewTypeTitle.value = type ? t('copyView') : t('editView');
+      if (!isType.value) {
+        viewId.value = id;
+      }
+      // 编辑逻辑待补充
+      const { data } = await apiFunction.getViewDetail(id, !!type);
+      if (data.code === 0) {
+        dataFilterList.value = data.content.fieldString ? [...JSON.parse(data.content.fieldString)] : [{ ...dataInfo }];
+        formData.viewName = type
+          ? `${t('copy')}${['zh-cn', 'zh-tw'].includes(locale.value) ? '' : ' '}${data.content.id < 0 && (data.content.viewName === '全部' || data.content.viewName === 'all') ? t('all') : data.content.viewName}`
+          : data.content.id < 0 && (data.content.viewName === '全部' || data.content.viewName === 'all')
+            ? t('all')
+            : data.content.viewName;
+        formData.permission = setPerson(data.content.viewPermissionEmpId);
+        formData.selectedIconIndex = Number(data.content.meta);
+      }
+    } else {
+      dataFilterList.value = [{ ...dataInfo }];
+    }
+  } catch (error) {
+    ElMessage.error(t('apiError'));
+  } finally {
+    loadingFun(false);
+    basicFormRef.value.clearValidate();
+  }
+};
+const close = () => {
+  viewTypeTitle.value = t('newView');
+  viewId.value = null;
+  visible.value = false;
+  dataFilterList.value = [{ ...dataInfo }];
+  formData.viewName = '';
+  formData.permission = ['-1'];
+  formData.selectedIconIndex = 0;
+  basicFormRef.value.clearValidate();
+};
+// 部门人员
+const getDepartmentStaff = (list) => {
+  let result = [];
+  if (list.length === 1 && list[0].includes('-1')) {
+    options.value.forEach((item) => {
+      if (item.children.length) {
+        item.children.forEach((el) => result.push(el.value));
+      }
+    });
+    return result;
+  }
+  list.forEach((item) => {
+    if (item.length > 1) {
+      result.push(item[1]);
+    } else if (item.length === 1) {
+      result.push(item[0]);
+    }
+  });
+  return result;
+};
+// 解析数据筛选
+const validateField = (val) => {
+  if (val === null || (Array.isArray(val) && !val.length)) {
+    return false;
+  }
+  return true;
+};
+// 时间经度处理
+const getTimeLongitude = (val) => {
+  const obj = optionFile.timePrecisionOptions.find((el) => el.value === val);
+  return obj.label === 'daily' ? 'day' : obj.label;
+};
+const getTimeFormat = (val) => optionFile.timePrecisionOptions.find((el) => el.value === val)?.timeFormat;
+// 动态筛选内容处理
+const getDynamicFilter = (val, sql) => {
+  const obj = optionFile.dynamicFilteringOptions.find((el) => el.value === val);
+  return sql ? obj.sql : obj.label;
+};
+// 动态筛选过去、未来处理
+const getFutureOptions = (val) => {
+  const obj = optionFile.pastOrFutureOptions.find((el) => el.value === val);
+  return obj.label;
+};
+// 动态筛选时间类型处理
+const getDateType = (val) => {
+  const obj = optionFile.dayTypeOptions.find((el) => el.value === val);
+  return obj.label === 'daily' ? 'day' : obj.label;
+};
+
+function calculateTimestamp(timestamp, dimension) {
+  // 定义各维度对应的毫秒数
+  const millisecondsPerUnit = {
+    0: 24 * 60 * 60 * 1000,
+    1: 60 * 60 * 1000,
+    2: 60 * 1000,
+    3: 1000,
+  };
+  const unitMs = millisecondsPerUnit[dimension];
+  return +timestamp + unitMs;
+}
+
+// 处理SQL语句
+const getSqlInfo = (item) => {
+  let title = fieldSetting.value.find((el) => el.key === item.CloumnName).fieldName;
+  let sqlTitle = item.IsCustomSetting ? `"${title}"` : title;
+  // 生产工单入库未完字段单独处理
+  if (sqlTitle === 'inboundRemain') {
+    sqlTitle = '(required_throughput-COALESCE(inboundQuantity,0)+COALESCE(returnQuantity,0))';
+  }
+  let sql = `${sqlTitle} ${optionFile.operatorOptions.find((el) => el.value === item.Operator)?.sql}`;
+  let str = '';
+  // 处理文本sql
+  if ([1, 5, 6].includes(item.ColumnType)) {
+    if (item.TextValue) {
+      if (item.Operator === 5) {
+        str = `${sql} '${item.TextValue}'`;
+      } else if (item.Operator === 6) {
+        str = `(${sql} '${item.TextValue}' or ${sqlTitle} is null)`;
+      } else if (item.Operator === 8) {
+        str = `(${sql} '%${item.TextValue}%' or ${sqlTitle} is null)`;
+      } else {
+        str = `${sql} '%${item.TextValue}%'`;
+      }
+    } else {
+      if (item.Operator === 10) {
+        str = `(${sql} null and ${sqlTitle} != '')`;
+      } else if (item.Operator === 9) {
+        str = `(${sql} null or ${sqlTitle} = '')`;
+      } else {
+        str = `${sql} null`;
+      }
+    }
+  }
+  // 处理下拉sql
+  if ([7, 8].includes(item.ColumnType)) {
+    if (item.SelectRangeValue.length) {
+      if (item.IsCustomSetting && item.ColumnType === 8) {
+        str = `STRING_TO_ARRAY(replace(replace(replace(${sqlTitle}, '"', ''), '[', ''), ']', ''), ',')::text[] && STRING_TO_ARRAY('${item.SelectRangeValue.toString()}', ',')::text[] =${item.Operator === 15 ? true : false}`;
+      } else {
+        if (item.ColumnType === 7) {
+          str = `${sql} '${item.SelectRangeValue}'`;
+        } else {
+          str = `${sql} (${item.SelectRangeValue.toString()})`;
+        }
+      }
+    } else {
+      if (item.Operator === 10 && item.IsCustomSetting) {
+        str = `(${sql} null and ${sqlTitle} != '')`;
+      } else if (item.Operator === 9 && item.IsCustomSetting) {
+        str = `(${sql} null or ${sqlTitle} = '')`;
+      } else {
+        str = `${sql} null`;
+      }
+    }
+  }
+  // 处理数字sql
+  if (item.ColumnType === 2 || item.ColumnType === 9) {
+    if (item.NumberRangeValue.length) {
+      if (item.Operator === 14) {
+        str = `(${sql} ${item.NumberRangeValue[0]} AND ${item.NumberRangeValue[1]} or ${sqlTitle} is null)`;
+      } else {
+        str = `${sql} ${item.NumberRangeValue[0]} AND ${item.NumberRangeValue[1]}`;
+      }
+    } else {
+      str = `${sql} null`;
+    }
+  }
+  // 处理日期sql
+  if ([3, 4].includes(item.ColumnType)) {
+    // 处理日期区间
+    let dateTitle = item.IsCustomSetting
+      ? `"${title}_${item.StartOrEnd ? 'end' : 'start'}"`
+      : `${title}_${item.StartOrEnd ? 'end' : 'start'}`;
+    if (item.ColumnType === 4) {
+      sql = `${dateTitle} ${optionFile.operatorOptions.find((el) => el.value === item.Operator)?.sql}`;
+    }
+    if ([1, 2, 3, 4].includes(item.Operator)) {
+      str = `${sql} ${item.DateTimeOperatorValue.TimeValue}`;
+    }
+    if ([5].includes(item.Operator)) {
+      const endTime = calculateTimestamp(item.DateTimeOperatorValue.TimeValue, item.DateTimeOperatorValue.TimeType);
+      str =
+        item.StartOrEnd === null
+          ? `${sqlTitle} >= ${item.DateTimeOperatorValue.TimeValue} AND ${sqlTitle} < ${endTime}`
+          : `${dateTitle} >= ${item.DateTimeOperatorValue.TimeValue} AND ${dateTitle} < ${endTime}`;
+    }
+    if ([9, 10].includes(item.Operator)) {
+      str = `${sql} null`;
+    }
+    if (item.Operator === 11) {
+      str = `${sql} ${dayjs(item.DateTimeRangeValue.TimeValue[0]).format('x')} AND ${calculateTimestamp(dayjs(item.DateTimeRangeValue.TimeValue[1]).format('x'), item.DateTimeRangeValue.TimeType)}`;
+    }
+    if (item.Operator === 12) {
+      // 动态筛选不需要处理类型
+      if ([4, 5, 6, 7, 8].includes(item.DateTimeDynamicFilteringValue.DateType)) {
+        str = `${sql} ${getDynamicFilter(item.DateTimeDynamicFilteringValue.DateType, true)}`;
+      }
+      // 天
+      if (item.DateTimeDynamicFilteringValue.DateType === 2) {
+        str = `${sql} currentday`;
+      }
+      // 昨天
+      if (item.DateTimeDynamicFilteringValue.DateType === 3) {
+        str = `${sql} past_day_1`;
+      }
+      if (item.DateTimeDynamicFilteringValue.DateType === 0) {
+        let rangeSql = `${getFutureOptions(item.DateTimeDynamicFilteringCustomize[0].PastOrFuture)}_${getDateType(item.DateTimeDynamicFilteringCustomize[0].DayType)}_${item.DateTimeDynamicFilteringCustomize[0].NumberValue}`;
+        if (item.DateTimeDynamicFilteringCustomize[0].PastOrFuture) {
+          str = `${sql} currentend AND ${rangeSql}`;
+        } else {
+          str = `${sql} ${rangeSql} AND currentstart`;
+        }
+      }
+      // 自定义范围
+      if (item.DateTimeDynamicFilteringValue.DateType === 1) {
+        let startSql = `${getFutureOptions(item.DateTimeDynamicFilteringCustomize[0].PastOrFuture)}_${getDateType(item.DateTimeDynamicFilteringCustomize[0].DayType)}_${item.DateTimeDynamicFilteringCustomize[0].NumberValue}`;
+        let endSql = `${getFutureOptions(item.DateTimeDynamicFilteringCustomize[1].PastOrFuture)}_${getDateType(item.DateTimeDynamicFilteringCustomize[1].DayType)}_${item.DateTimeDynamicFilteringCustomize[1].NumberValue}`;
+        if (item.DateTimeDynamicFilteringCustomize[0].PastOrFuture === 2) {
+          startSql = `${getFutureOptions(item.DateTimeDynamicFilteringCustomize[0].PastOrFuture)}${getDateType(item.DateTimeDynamicFilteringCustomize[0].DayType)}`;
+        }
+        if (item.DateTimeDynamicFilteringCustomize[1].PastOrFuture === 2) {
+          endSql = `${getFutureOptions(item.DateTimeDynamicFilteringCustomize[1].PastOrFuture)}${getDateType(item.DateTimeDynamicFilteringCustomize[1].DayType)}`;
+        }
+        str = `${sql} ${startSql} AND ${endSql}`;
+      }
+    }
+  }
+  return str;
+};
+// 获取日期区间信息
+const getIntervalInfo = (item) => {
+  let obj = {};
+  if ([1, 2, 3, 4, 5].includes(item.Operator)) {
+    obj = {
+      precision: getTimeLongitude(item.DateTimeOperatorValue.TimeType),
+      value: item.DateTimeOperatorValue.TimeValue,
+      judgeLogic: item.Operator,
+    };
+  }
+  if ([9, 10].includes(item.Operator)) {
+    obj = {
+      value: '',
+      judgeLogic: item.Operator,
+    };
+  }
+  if (item.Operator === 11) {
+    obj = {
+      precision: getTimeLongitude(item.DateTimeRangeValue.TimeType),
+      value: item.DateTimeRangeValue.TimeValue,
+      judgeLogic: item.Operator,
+    };
+  }
+  if (item.Operator === 12) {
+    if (item.DateTimeDynamicFilteringValue.DateType === 0) {
+      obj = {
+        value: getDynamicFilter(item.DateTimeDynamicFilteringValue.DateType),
+        customType: getFutureOptions(item.DateTimeDynamicFilteringCustomize[0].PastOrFuture),
+        customUnit: getDateType(item.DateTimeDynamicFilteringCustomize[0].DayType),
+        customUum: item.DateTimeDynamicFilteringCustomize[0].NumberValue,
+        judgeLogic: item.Operator,
+      };
+    } else if (item.DateTimeDynamicFilteringValue.DateType === 1) {
+      obj = {
+        value: getDynamicFilter(item.DateTimeDynamicFilteringValue.DateType),
+        customTypeStart: getFutureOptions(item.DateTimeDynamicFilteringCustomize[0].PastOrFuture),
+        customUnitStart: getDateType(item.DateTimeDynamicFilteringCustomize[0].DayType),
+        customNumStart: item.DateTimeDynamicFilteringCustomize[0].NumberValue,
+        customTypeEnd: getFutureOptions(item.DateTimeDynamicFilteringCustomize[1].PastOrFuture),
+        customUnitEnd: getDateType(item.DateTimeDynamicFilteringCustomize[1].DayType),
+        customNumEnd: item.DateTimeDynamicFilteringCustomize[1].NumberValue,
+        judgeLogic: item.Operator,
+      };
+    } else {
+      obj = {
+        value: getDynamicFilter(item.DateTimeDynamicFilteringValue.DateType),
+        judgeLogic: item.Operator,
+      };
+    }
+  }
+  return obj;
+};
+// 获取其余字段信息
+const getInfo = (item) => {
+  let obj = {};
+  if ([1, 5, 6].includes(item.ColumnType) && item.TextValue) {
+    obj = {
+      first: item.TextValue,
+    };
+  }
+  if ([7, 8].includes(item.ColumnType) && item.SelectRangeValue.length) {
+    obj = {
+      first: item.SelectRangeValue.toString(),
+    };
+  }
+  if ((item.ColumnType === 2 || item.ColumnType === 9) && item.NumberRangeValue.length) {
+    obj = {
+      first: item.NumberRangeValue[0],
+      second: item.NumberRangeValue[1],
+    };
+  }
+  if ([3].includes(item.ColumnType)) {
+    if ([1, 2, 3, 4, 5].includes(item.Operator)) {
+      obj = {
+        first: getTimeLongitude(item.DateTimeOperatorValue.TimeType),
+        second: item.DateTimeOperatorValue.TimeValue,
+      };
+    }
+    if (item.Operator === 11) {
+      obj = {
+        first: getTimeLongitude(item.DateTimeRangeValue.TimeType),
+        second: item.DateTimeRangeValue.TimeValue[0],
+        third: item.DateTimeRangeValue.TimeValue[1],
+      };
+    }
+    if (item.Operator === 12) {
+      if (item.DateTimeDynamicFilteringValue.DateType === 0) {
+        obj = {
+          first: getDynamicFilter(item.DateTimeDynamicFilteringValue.DateType),
+          second: getFutureOptions(item.DateTimeDynamicFilteringCustomize[0].PastOrFuture),
+          four: getDateType(item.DateTimeDynamicFilteringCustomize[0].DayType),
+          third: item.DateTimeDynamicFilteringCustomize[0].NumberValue,
+          judgeLogic: item.Operator,
+        };
+      } else if (item.DateTimeDynamicFilteringValue.DateType === 1) {
+        obj = {
+          first: getDynamicFilter(item.DateTimeDynamicFilteringValue.DateType),
+          second: getFutureOptions(item.DateTimeDynamicFilteringCustomize[0].PastOrFuture),
+          third: item.DateTimeDynamicFilteringCustomize[0].NumberValue,
+          four: getDateType(item.DateTimeDynamicFilteringCustomize[0].DayType),
+          five: getFutureOptions(item.DateTimeDynamicFilteringCustomize[1].PastOrFuture),
+          six: item.DateTimeDynamicFilteringCustomize[1].NumberValue,
+          seven: getDateType(item.DateTimeDynamicFilteringCustomize[1].DayType),
+          judgeLogic: item.Operator,
+        };
+      } else {
+        obj = {
+          first: getDynamicFilter(item.DateTimeDynamicFilteringValue.DateType),
+        };
+      }
+    }
+  }
+  return { ...obj };
+};
+const getFeild = (item) => {
+  let str = {};
+  if (item.ColumnType === 4) {
+    const type = item.StartOrEnd ? 'end' : 'start';
+    str[type] = { ...getIntervalInfo(item) };
+  } else {
+    str = { ...getInfo(item) };
+  }
+  return { ...str };
+};
+// 获取筛选字符串内容
+const getStringInfo = (item) => {
+  let str = [];
+  let field = {};
+  field = fieldSetting.value.find((el) => el.key === item.CloumnName);
+  str.push(field.key === 'salesOrderNumber' ? field.key : field.fieldName);
+  if (validateField(item.StartOrEnd)) {
+    str.push(item.StartOrEnd ? 'intervalEnd' : 'intervalStart');
+  }
+  if (validateField(item.Operator)) {
+    str.push(optionFile.operatorOptions.find((el) => el.value === item.Operator)?.label);
+  }
+  if (validateField(item.TextValue)) {
+    str.push(item.TextValue);
+  }
+  if (validateField(item.SelectRangeValue)) {
+    if (field.fieldSelectOptions) {
+      if (item.IsCustomSetting) {
+        str.push(item.SelectRangeValue.toString());
+      } else {
+        try {
+          // 验证 fieldSelectOptions 是有效的 JSON 字符串
+          if (
+            typeof field.fieldSelectOptions === 'string' &&
+            field.fieldSelectOptions.trim() &&
+            ((field.fieldSelectOptions.trim().startsWith('[') && field.fieldSelectOptions.trim().endsWith(']')) ||
+              (field.fieldSelectOptions.trim().startsWith('{') && field.fieldSelectOptions.trim().endsWith('}')))
+          ) {
+            const labelList = JSON.parse(field.fieldSelectOptions)
+              .filter((el) => item.SelectRangeValue.includes(el.value))
+              .map((el) => el.key);
+            str.push(labelList.toString());
+          } else {
+            // 如果不是有效的 JSON 字符串，直接使用 SelectRangeValue
+            str.push(item.SelectRangeValue.toString());
+          }
+        } catch (error) {
+          // 解析失败时直接使用 SelectRangeValue
+          str.push(item.SelectRangeValue.toString());
+        }
+      }
+    } else {
+      const list = [];
+      // 从统一的selectOptions中获取字段选项
+      const fieldOptions = props.selectOptions[item.CloumnName] || [];
+      if (Array.isArray(fieldOptions)) {
+        fieldOptions.forEach((el) => {
+          if (item.SelectRangeValue.includes(el.value)) {
+            list.push(el.label);
+          }
+        });
+      }
+      // 如果没有找到对应的选项，直接使用值
+      str.push(list.length ? list.toString() : item.SelectRangeValue.toString());
+    }
+  }
+  if (validateField(item.NumberRangeValue)) {
+    str.push(item.NumberRangeValue.toString());
+  }
+  if (validateField(item.DateTimeOperatorValue.TimeType)) {
+    str.push(
+      getTimeLongitude(item.DateTimeOperatorValue.TimeType),
+      dayjs(item.DateTimeOperatorValue.TimeValue).format(getTimeFormat(item.DateTimeOperatorValue.TimeType)),
+    );
+  }
+  if (validateField(item.DateTimeRangeValue.TimeType)) {
+    str.push(getTimeLongitude(item.DateTimeRangeValue.TimeType));
+  }
+  if (validateField(item.DateTimeRangeValue.TimeType)) {
+    str.push(
+      dayjs(item.DateTimeRangeValue.TimeValue[0]).format(getTimeFormat(item.DateTimeRangeValue.TimeType)),
+      dayjs(item.DateTimeRangeValue.TimeValue[1]).format(getTimeFormat(item.DateTimeRangeValue.TimeType)),
+    );
+  }
+  if (validateField(item.DateTimeDynamicFilteringValue.DateType)) {
+    str.push(getDynamicFilter(item.DateTimeDynamicFilteringValue.DateType));
+  }
+  if (validateField(item.DateTimeDynamicFilteringCustomize[0].DayType)) {
+    str.push(
+      getFutureOptions(item.DateTimeDynamicFilteringCustomize[0].PastOrFuture),
+      item.DateTimeDynamicFilteringCustomize[0].NumberValue,
+      getDateType(item.DateTimeDynamicFilteringCustomize[0].DayType),
+    );
+  }
+  if (validateField(item.DateTimeDynamicFilteringCustomize[1].DayType)) {
+    str.push(
+      getFutureOptions(item.DateTimeDynamicFilteringCustomize[1].PastOrFuture),
+      item.DateTimeDynamicFilteringCustomize[1].NumberValue,
+      getDateType(item.DateTimeDynamicFilteringCustomize[1].DayType),
+    );
+  }
+  return str.toString();
+};
+const parseDataFilter = () => {
+  const filterObj = {
+    viewField: [],
+    filterString: [],
+    whereSql: '',
+  };
+  const sqlList = [];
+  dataFilterList.value.forEach((item) => {
+    let fieldObj = fieldSetting.value.find((el) => el.key === item.CloumnName);
+    sqlList.push(getSqlInfo(item));
+    filterObj.filterString.push(getStringInfo(item));
+    filterObj.viewField.push({
+      fieldCode: fieldObj.fieldName,
+      fieldKey: item.IsCustomSetting ? fieldObj.fieldName : fieldObj.key,
+      docCustomId: item.DocCustomId || '',
+      fieldTypeId: item.ColumnType,
+      judgeLogic: item.ColumnType === 4 ? null : item.Operator,
+      fieldValue: JSON.stringify(getFeild(item)),
+      isCustom: item.IsCustomSetting ? 1 : 0,
+    });
+  });
+  sqlList.forEach((ite, ind) => {
+    filterObj.whereSql += ind ? ` AND ${ite}` : ite;
+  });
+  return { ...filterObj };
+};
+const encryptionSql = (sql) => {
+  const key = CryptoJS.enc.Utf8.parse('3847201956372841'); // 密钥，16字节
+  const iv = CryptoJS.enc.Utf8.parse('3847201956372841'); // 偏移量，16字节
+  const encrypted = CryptoJS.AES.encrypt(sql, key, {
+    iv: iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7,
+  });
+  return encrypted.toString();
+};
+const saveView = async () => {
+  try {
+    const filterValid = await filterCriteriaRef.value.validateAllForms();
+    const valid = await basicFormRef.value.validate();
+    if (valid && filterValid) {
+      loadingFun(true);
+      const { viewField, filterString, whereSql } = parseDataFilter();
+      const params = {
+        meta: String(formData.selectedIconIndex),
+        viewName: formData.viewName,
+        permissionCode: props.permissionData.permissionCode,
+        viewPermissionEmpId: getDepartmentStaff(formData.permission),
+        viewField: JSON.stringify(viewField),
+        filterString: JSON.stringify(filterString),
+        whereSql: encryptionSql(whereSql),
+        fieldString: JSON.stringify(dataFilterList.value),
+      };
+      if (isType.value) {
+        const {
+          data: { code },
+        } = await apiFunction.addView(params);
+        if (code === 0) {
+          ElMessage.success(t('addSuccess'));
+          emit('updataView');
+          close();
+        }
+      } else {
+        params.id = viewId.value;
+        const {
+          data: { code },
+        } = await apiFunction.editView(params);
+        if (code === 0) {
+          ElMessage.success(t('editSuccess'));
+          emit('updataView');
+          close();
+        }
+      }
+    }
+  } catch (err) {
+    ElMessage.error(t('someColumnRequired'));
+  } finally {
+    loadingFun(false);
+  }
+};
+defineExpose({
+  open,
+});
+</script>
+
+<style scoped lang="scss">
+.drawer-box {
+  width: 100%;
+}
+.view-box {
+  margin-top: -2rem;
+  margin-left: -1rem;
+  width: 100%;
+  height: 100%;
+}
+.view-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.view-content {
+  display: flex;
+  width: 100%;
+  height: calc(100% - 1.5rem);
+}
+.el-menu-vertical-demo {
+  width: 150px;
+  border-right: 1px solid #eee;
+}
+.drawer-content {
+  width: 90%;
+  height: 95%;
+  overflow: auto;
+  margin-left: 10px;
+}
+.icon-options {
+  display: flex;
+  gap: 12px;
+}
+.icon-options .el-button {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.icon-options .el-button.active {
+  border-width: 2px;
+}
+.radio-icon {
+  font-size: 18px;
+}
+.drawer-footer {
+  position: absolute;
+  bottom: 1rem;
+  right: 2rem;
+}
+.cursor {
+  cursor: pointer;
+}
+</style>