syntec3-0-ui-components-test 1.0.0

package/src/components/customFilter/customFilter.vue

@@ -0,0 +1,492 @@
+<template>
+  <div v-loading="!isLoad" data-test-id="DIV-Ydf0yz">
+    <div data-test-id="DIV-uWyNOt">
+      <el-row data-test-id="EL-ROW-Qs8O6C">
+        <el-col :span="15" data-test-id="EL-COL-7SqxcZ">
+          <filterCriteria
+            v-if="isLoad"
+            ref="defaultFilterRef"
+            :is-it-default="true"
+            :filter-conditions="defaultFilterConditions"
+            :other-filter-conditions="extraFilterConditions"
+            :field-setting="fieldSetting"
+            :select-options="selectOptions"
+            data-test-id="FILTERCRITERIA-1hVwQx"
+          />
+        </el-col>
+        <el-col :span="9" align="center" data-test-id="EL-COL-jTNbYx">
+          <div class="button-container" data-test-id="DIV-jtoMT9">
+            <el-button type="primary" data-test-id="EL-BUTTON-heY1hB" @click="handleSearch(true)">
+              <i class="mdi mdi-magnify" data-test-id="I-tbxET9" />
+              {{ t('query') }}
+            </el-button>
+            <el-popover
+              ref="popoverRef"
+              :visible="visible"
+              placement="bottom-start"
+              width="800"
+              trigger="click"
+              data-test-id="EL-POPOVER-fMMv4b"
+            >
+              <div v-loading="loading" data-test-id="DIV-u82ZkA">
+                <filterCriteria
+                  v-if="visible"
+                  ref="extraFilterRef"
+                  :is-it-default="false"
+                  :filter-conditions="extraFilterConditions"
+                  :other-filter-conditions="defaultFilterConditions"
+                  :field-setting="fieldSetting"
+                  :select-options="selectOptions"
+                  data-test-id="FILTERCRITERIA-1hVwQx"
+                />
+                <el-text
+                  class="title-content cursor mx-1"
+                  type="primary"
+                  data-test-id="EL-TEXT-fiYiUY"
+                  @click="addFilterCondition"
+                >
+                  <v-icon class="mdi mdi-plus" data-test-id="V-ICON-RTH8U1" />
+                  {{ t('addFilterCriteria') }}
+                </el-text>
+              </div>
+              <template #reference>
+                <el-button data-test-id="EL-BUTTON-AzDm8o" @click="handleMoreFilter">
+                  <i class="mdi mdi-cog" data-test-id="I-tbxET9" />
+                  {{ t('moreFilter') }}
+                </el-button>
+              </template>
+            </el-popover>
+            <el-button data-test-id="EL-BUTTON-f5txPo" @click="handleReset">{{ t('reset') }}</el-button>
+            <columnConfigNext
+              v-if="hasColumnConfig"
+              :parent-items="canEditHeaders"
+              :is-parent-checkbox="true"
+              :is-child-checkbox="false"
+              :is-child="false"
+              data-test-id="COLUMNCONFIGNEXT-fZb3uK"
+              @parentSaveData="parentSaveData"
+              @childSaveData="childSaveData"
+            />
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, nextTick, onBeforeUnmount, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import columnConfigNext from '@/components/columnConfigNext.vue';
+import filterCriteria from '@/components/customFilter/filterCriteria.vue';
+import apiFunction from '@/scriptFiles/checkApiErrorMechanism';
+import { ElMessage } from 'element-plus';
+const { t } = useI18n();
+const emit = defineEmits(['filterSearch', 'parentSaveData', 'childSaveData']);
+const props = defineProps({
+  hasColumnConfig: {
+    type: Boolean,
+    default: true,
+  },
+  canEditHeaders: Array,
+  permissionCode: String,
+  selectOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const isLoad = ref(false);
+const visible = ref(false);
+/* 列配置 */
+const canEditHeaders = computed(() => props.canEditHeaders);
+/* 权限编码 */
+const permissionCode = computed(() => props.permissionCode);
+
+/**
+ * 类配置修改
+ * @param {*} val
+ */
+const parentSaveData = (val) => {
+  emit('parentSaveData', val);
+};
+/**
+ * 子级数据保存
+ * @param {*} val
+ */
+const childSaveData = (val) => {
+  emit('childSaveData', val);
+};
+
+/* 过滤条件 */
+const filterConditions = ref([]);
+const defaultFilterConditions = ref([]); //外部默认筛选条件
+const extraFilterConditions = ref([]); //内部额外筛选条件
+/**
+ * 获取自定义筛选条件
+ */
+const fetchFilterConditions = async () => {
+  try {
+    const {
+      data: { code, message, content },
+    } = await apiFunction.queryFilterCondition({ permissionCode: permissionCode.value });
+    if (code !== 0) {
+      ElMessage.error(t(message));
+      return;
+    }
+    if (
+      content.data.filterCondition === '' ||
+      content.data.filterCondition === '[]' ||
+      content.data.filterCondition === null
+    ) {
+      defaultFilterConditions.value = [
+        {
+          Operator: null,
+          IsCustomSetting: null,
+          DocCustomId: null,
+          ColumnType: null,
+          TextValue: null,
+          NumberValue: null,
+          NumberRangeValue: [],
+          CloumnName: null,
+          SelectRangeValue: [],
+          SingleSelectValue: null,
+          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,
+            },
+          ],
+        },
+      ];
+      extraFilterConditions.value = [];
+      return;
+    }
+    filterConditions.value = JSON.parse(content.data.filterCondition);
+    defaultFilterConditions.value = [filterConditions.value[0]];
+    extraFilterConditions.value = filterConditions.value.length === 1 ? [] : filterConditions.value.slice(1, 10);
+  } catch (error) {
+    ElMessage.error(t('apiError'));
+  }
+};
+/**
+ * 添加筛选条件
+ */
+const addFilterCondition = () => {
+  if (extraFilterConditions.value.length >= 9) {
+    ElMessage.error(t('maxFilterConditions'));
+    return;
+  }
+  extraFilterConditions.value.push({
+    Operator: null,
+    IsCustomSetting: null,
+    DocCustomId: null,
+    ColumnType: null,
+    TextValue: null,
+    NumberValue: null,
+    NumberRangeValue: [],
+    CloumnName: null,
+    SelectRangeValue: [],
+    SingleSelectValue: null,
+    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 fieldSetting = ref([]);
+/**
+ * 获取自定义筛选字段内容
+ * @param permissionCode 权限编码
+ */
+const getFieldSetting = async (permissionCode) => {
+  try {
+    const {
+      data: { code, content, message },
+    } = await apiFunction.getFieldSetting(permissionCode);
+    if (code !== 0) {
+      ElMessage.error(t(message));
+      return;
+    }
+    const docCustomSettings = content.docCustomSettings.map((item) => ({
+      fieldName: item.fieldName,
+      fieldTypeId: item.fieldTypeId,
+      fieldSelectOptions: item.fieldSelectOptions,
+      key: item.docCustomId,
+      isDoc: true,
+    }));
+    const fieldSettings = content.fieldSettings.map((item) => ({
+      fieldName: item.fieldKey,
+      fieldTypeId: item.fieldTypeId,
+      fieldSelectOptions: item.fieldSelectOptions,
+      key: item.fieldKey,
+      isDoc: false,
+    }));
+    fieldSetting.value = [...fieldSettings, ...docCustomSettings];
+  } catch (error) {
+    ElMessage.error(t('apiError'));
+  }
+};
+
+/* 查询 */
+const defaultFilterRef = ref(null);
+const extraFilterRef = ref(null);
+const loading = ref(false);
+/**
+ * 校验筛选条件
+ */
+const validate = async () => {
+  try {
+    const defaultValidate = (await defaultFilterRef.value?.validateAllForms()) ?? true;
+    const extraValidate = (await extraFilterRef.value?.validateAllForms()) ?? true;
+    return defaultValidate && extraValidate;
+  } catch (error) {
+    return false;
+  }
+};
+/**
+ * 保存更多筛选条件
+ */
+const handleSaveExtraFilter = async () => {
+  isLoad.value = false;
+  loading.value = true;
+  try {
+    const valid = await validate();
+    if (!valid) {
+      return;
+    }
+    const {
+      data: { code, message },
+    } = await apiFunction.insertOrUpdateFilterCondition({
+      permissionCode: permissionCode.value,
+      filterCondition: JSON.stringify(
+        [...defaultFilterConditions.value, ...extraFilterConditions.value]
+          .filter((item) => item.CloumnName !== null)
+          .map((it) => ({
+            ...it,
+            NumberRangeValue: it.NumberRangeValue.every((num) => num === null) ? [] : it.NumberRangeValue,
+          })),
+      ),
+    });
+    if (code !== 0) {
+      ElMessage.error(t(message));
+      return;
+    }
+    await fetchFilterConditions();
+    visible.value = false;
+  } catch (error) {
+    ElMessage.error(t('apiError'));
+  } finally {
+    loading.value = false;
+    isLoad.value = true;
+  }
+};
+/**
+ * 筛选查询
+ * @param type
+ */
+const handleSearch = async (type) => {
+  if (type) {
+    await handleSaveExtraFilter();
+  }
+  // 获取筛选条件数据
+  const defaultConditions = defaultFilterRef.value?.filterConditions || [];
+  const extraConditions = extraFilterRef.value?.filterConditions || [];
+
+  // 合并筛选条件
+  const filterData = {
+    defaultConditions,
+    extraConditions,
+  };
+  emit('filterSearch', filterData);
+};
+/**
+ * 更多筛选条件
+ */
+const handleMoreFilter = () => {
+  visible.value = !visible.value;
+};
+
+// 添加点击外部区域关闭弹窗的逻辑
+const popoverRef = ref(null);
+const referenceRef = ref(null);
+
+const handleClickOutside = (event) => {
+  if (visible.value) {
+    const popoverEl = popoverRef.value?.$el;
+    const referenceEl = referenceRef.value?.$el || document.querySelector('[data-test-id="EL-BUTTON-AzDm8o"]');
+    if (popoverEl && referenceEl) {
+      // 检查点击的元素是否在弹窗或引用元素内部
+      const isClickInside = popoverEl.contains(event.target) || referenceEl.contains(event.target);
+      // 检查点击的元素是否是Element Plus的弹出组件（如日期选择器、下拉菜单等）
+      let isClickOnPopper = false;
+      let target = event.target;
+      // 向上遍历DOM树，检查是否是popper组件
+      while (target) {
+        if (
+          target.classList?.contains('el-popper') ||
+          target.classList?.contains('el-date-editor') ||
+          target.dataset?.testId?.includes('EL-DATE-PICKER') ||
+          target.dataset?.testId?.includes('EL-SELECT')
+        ) {
+          isClickOnPopper = true;
+          break;
+        }
+        target = target.parentElement;
+      }
+      // 检查点击的元素是否在弹窗的子组件内部
+      const isClickInFilterCriteria = event.target.closest('[data-test-id="FILTERCRITERIA-1hVwQx"]');
+      // 只有当点击确实在弹窗外部且不是弹窗的子组件或popper组件时，才关闭弹窗
+      if (!isClickInside && !isClickOnPopper && !isClickInFilterCriteria) {
+        visible.value = false;
+      }
+    }
+  }
+};
+
+// 监听visible变化，添加或移除事件监听器
+watch(visible, (newVal) => {
+  if (newVal) {
+    // 在下一个事件循环添加监听器，避免触发点击事件
+    setTimeout(() => {
+      document.addEventListener('click', handleClickOutside);
+    }, 0);
+  } else {
+    document.removeEventListener('click', handleClickOutside);
+  }
+});
+/**
+ * 重置筛选条件
+ */
+const handleReset = async () => {
+  isLoad.value = false;
+  loading.value = true;
+  filterConditions.value = [];
+  defaultFilterConditions.value = [];
+  extraFilterConditions.value = [];
+  try {
+    const {
+      data: { code, message },
+    } = await apiFunction.insertOrUpdateFilterCondition({
+      permissionCode: permissionCode.value,
+      filterCondition: null,
+    });
+    if (code !== 0) {
+      ElMessage.error(t(message));
+      return;
+    }
+    await fetchFilterConditions();
+    await handleSearch(false);
+    visible.value = false;
+  } catch (error) {
+    ElMessage.error(t('apiError'));
+  } finally {
+    loading.value = false;
+    isLoad.value = true;
+  }
+};
+
+defineExpose({
+  handleSearch,
+});
+
+onMounted(async () => {
+  await nextTick();
+  await getFieldSetting(permissionCode.value);
+  await fetchFilterConditions();
+  const stockViewQueryDataObj = window.stockViewQueryDataObj;
+  let searchObj = {};
+  if (stockViewQueryDataObj) {
+    searchObj = stockViewQueryDataObj.searchObj;
+  }
+  if (searchObj?.sourceOrderNumber) {
+    isLoad.value = false;
+    loading.value = true;
+    filterConditions.value = [
+      {
+        Operator: 5,
+        IsCustomSetting: false,
+        DocCustomId: null,
+        ColumnType: 1,
+        TextValue: searchObj.sourceOrderNumber,
+        NumberValue: null,
+        NumberRangeValue: [],
+        CloumnName: 'productionOrderNumber',
+        SelectRangeValue: [],
+        SingleSelectValue: null,
+        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,
+          },
+        ],
+      },
+    ];
+    defaultFilterConditions.value = [filterConditions.value[0]];
+    extraFilterConditions.value = filterConditions.value.length === 1 ? [] : filterConditions.value.slice(1, 10);
+    await handleSearch(true);
+    loading.value = false;
+    isLoad.value = true;
+  }
+  isLoad.value = true;
+});
+onBeforeUnmount(() => {
+  delete window.stockViewQueryDataObj;
+  // 移除事件监听器
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<style scoped>
+.el-form-item__content {
+  width: 100%;
+}
+
+.title-content {
+  max-width: 50%;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 20px !important;
+}
+
+.cursor {
+  cursor: pointer;
+}
+</style>