sohelp-eleplus 1.1.13

package/sohelp-grid-view/filter/filter-form.vue

@@ -0,0 +1,427 @@
+<template>
+  <ele-card
+    :class="['sohelp-filter', config.filter?.config.filterPosition.toLowerCase(), { mobile: mobile }]"
+    :footerStyle="{ padding: '10px 0 0px 0' }"
+    :headerStyle="{ padding: '5px 0', fontSize: '14px' }"
+    :bodyStyle="{ height: '100%', padding: '0' }"
+    ref="sohelpFilterRef"
+    v-loading="loading"
+    v-if="propertiesMap"
+  >
+    <div class="scheme-box" v-show="schemeList.length" v-if="config.filter.config.visibleScheme">
+      <ele-text class="scheme-label">{{ t('grid.scheme.filter') }}</ele-text>
+      <el-radio-group v-model="filterValue.scheme" class="scheme-list">
+        <el-radio
+          border
+          v-for="scheme in schemeList"
+          :key="scheme"
+          :label="scheme"
+          size="small"
+          @click.prevent="handleRadioClick(scheme)"
+          >{{ scheme }}
+        </el-radio>
+      </el-radio-group>
+    </div>
+    <!-- advanced -->
+    <div class="advanced-box" ref="advancedBoxRef">
+      <filter-condition-item
+        v-for="(item, index) in getFilterList"
+        :key="item.name"
+        v-model="filterValue.filter[index]"
+        :properties="propertiesMap?.[item.name]"
+        :ref="(el) => setItemRef(el, item.name)"
+      ></filter-condition-item>
+
+      <div
+        class="footer-top-right"
+        v-if="filterList.length > 0 && config.filter?.config.filterPosition !== 'MODAL'"
+        ref="searchButtonRef"
+      >
+        <el-button size="small" plain @click="reset">{{ t('grid.toolbar.reset') }}</el-button>
+        <el-button type="primary" size="small" @click="filter">{{ t('grid.toolbar.filter') }}</el-button>
+        <el-link
+          plain
+          @click="toggleFilter"
+          v-if="
+            maxRowsConfig.maxRows > 0 &&
+            config.filter.config.filterPosition === 'TOP' &&
+            filterList.length !== maxRowsConfig.current.index
+          "
+          style="margin-left: 20px !important"
+        >
+          <ele-text size="xs" :icon="Plus" v-if="!maxRowsConfig.isExpand"> 展开</ele-text>
+          <ele-text size="xs" :icon="Minus" v-else> 收缩</ele-text>
+        </el-link>
+      </div>
+    </div>
+  </ele-card>
+</template>
+
+<script setup>
+  import { computed, nextTick, onMounted, reactive, ref, onBeforeUnmount } from 'vue';
+  import FilterConditionItem from '../../sohelp-grid/components/filter-condition-item.vue';
+  import { useMobile } from '@/utils/use-mobile';
+  import { useI18n } from 'vue-i18n';
+  import { Plus, Minus } from '@element-plus/icons-vue';
+
+  const { mobile } = useMobile();
+  const { t } = useI18n();
+
+  const props = defineProps({
+    propertiesMap: Object,
+    title: {
+      type: String,
+      default: '高级筛选'
+    },
+    config: Object
+  });
+
+  const emit = defineEmits(['filter', 'reset', 'changeFilterScheme']);
+  const sohelpFilterRef = ref(null);
+  const loading = ref(false);
+
+  const config = defineModel('config');
+  const filterValue = defineModel('filterValue');
+  const advancedBoxRef = ref(null);
+
+  const itemRefs = ref(new Map());
+  const maxRowsConfig = reactive({
+    maxRows: config.value?.filter?.config?.maxRows || 0,
+    height: 'auto',
+    isExpand: false,
+    rowHeight: 69,
+    width: '100%',
+    gap: 15,
+    itemWidth: [],
+    current: {},
+    searchButtonWidth: 0
+  });
+
+  const searchButtonRef = ref(null);
+
+  // 设置元素引用的函数
+  const setItemRef = (el, id) => {
+    if (el) {
+      itemRefs.value.set(id, el);
+    } else {
+      itemRefs.value.delete(id);
+    }
+  };
+
+  // 获取所有元素高度
+  const getAllHeights = () => {
+    const width = new Map();
+    itemRefs.value.forEach((el, id) => {
+      const { offsetWidth } = el.$el;
+      if (offsetWidth) {
+        width.set(id, offsetWidth + maxRowsConfig.gap);
+      }
+    });
+    return width;
+  };
+
+  const toggleFilter = () => {
+    maxRowsConfig.isExpand = !maxRowsConfig.isExpand;
+    if (maxRowsConfig.isExpand) {
+      maxRowsConfig.current.index = filterList.value.length + 1;
+    } else {
+      maxRowsConfig.current.index = maxRowsConfig.current._index;
+    }
+  };
+
+  function findAccumulateIndex(map, threshold) {
+    let sum = 0;
+    let index = 0;
+    for (let [key, value] of map) {
+      let _sum = sum + value + maxRowsConfig.searchButtonWidth + maxRowsConfig.maxRows * 36;
+      if (_sum > threshold) {
+        return {
+          _index: index,
+          index: index, // 从0开始的索引
+          key: key, // 对应的键名
+          accumulatedSum: sum, // 当前累计总和
+          value: value // 当前元素值
+        };
+      }
+      sum += value;
+      index++;
+    }
+    return {
+      index: map.size
+    };
+  }
+
+  /**
+   * 获取当前显示的元素
+   */
+  const getFilterList = computed(() => {
+    return filterList.value?.slice(0, maxRowsConfig.current.index);
+  });
+
+  const load = () => {
+    maxRowsConfig.width = advancedBoxRef.value.offsetWidth;
+    maxRowsConfig.current = findAccumulateIndex(maxRowsConfig.itemWidth, maxRowsConfig.width * maxRowsConfig.maxRows);
+  };
+
+  onMounted(() => {
+    loading.value = true;
+    nextTick(() => {
+      loading.value = false;
+      // 高级筛选高度
+      maxRowsConfig.height = advancedBoxRef.value.offsetHeight + 'px';
+      const advancedRow = advancedBoxRef.value.querySelector('.sohelp-filter-condition');
+      if (advancedRow) {
+        maxRowsConfig.rowHeight = advancedRow.offsetHeight;
+      }
+      nextTick(() => {
+        maxRowsConfig.searchButtonWidth = searchButtonRef.value.offsetWidth + 35;
+        maxRowsConfig.itemWidth = getAllHeights();
+        load();
+      });
+    });
+  });
+
+  //高级筛选过滤某些字段
+  const filterList = computed(() => {
+    const excludeField = ['id', 'flw_id', '_operation'];
+    return config.value?.filter?.field?.filter((item) => {
+      return !excludeField.includes(item.name);
+    });
+  });
+
+  // 方案列表
+  const schemeList = computed(() => {
+    const { filter } = config.value;
+    if (filter.scheme?.length) {
+      return filter.scheme?.map((item) => {
+        return item.label;
+      });
+    }
+    return [];
+  });
+
+  /**
+   * radio 取消点击
+   */
+  const handleRadioClick = (val) => {
+    filterValue.value.scheme = filterValue.value.scheme === val ? '' : val;
+    emit('changeFilterScheme', filterValue.value.scheme, filterValue.value);
+  };
+
+  /**
+   *
+   */
+  const filter = () => {
+    emit('filter', filterValue.value);
+  };
+
+  const reset = () => {
+    emit('reset', filterValue.value);
+  };
+
+  //监听页面尺寸变化时load
+  addEventListener('resize', () => {
+    maxRowsConfig.isExpand = false;
+    load();
+  });
+
+  //销毁时移除监听
+  onBeforeUnmount(() => {
+    removeEventListener('resize', () => {});
+  });
+</script>
+<script>
+  export default {
+    name: 'FilterForm'
+  };
+</script>
+
+<style lang="scss" scoped>
+  .sohelp-filter.modal {
+    width: 100%;
+  }
+
+  .sohelp-filter.mobile {
+    box-sizing: border-box;
+    padding-left: 10px;
+
+    .scheme-box {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .advanced-box {
+      .sohelp-filter-condition {
+        width: 100% !important;
+
+        :deep(.filter-condition) {
+          width: 100% !important;
+        }
+      }
+    }
+
+    .footer-top-right {
+      text-align: right;
+      margin-left: auto;
+    }
+  }
+
+  .sohelp-filter {
+    .footer-right {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    .el-form-item {
+      margin: 5px 0 5px 0;
+    }
+
+    .scheme-box {
+      padding-top: 10px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .scheme-list {
+        display: flex;
+      }
+    }
+
+    .advanced-box {
+      overflow-y: scroll;
+      // padding-right: 10px;
+      display: flex;
+      flex-direction: column;
+      margin-top: 15px;
+      gap: 15px;
+      position: relative;
+    }
+
+    .advanced-box .is-expand .ele-text {
+      color: #1677ff;
+    }
+
+    .advanced-box .is-expand:hover {
+      opacity: 1;
+    }
+  }
+
+  .sohelp-filter.top {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    margin-bottom: 0;
+    flex-direction: row;
+    overflow: auto;
+
+    .footer-top-right {
+      display: flex;
+      align-items: flex-end;
+
+      .el-button:nth-child(1) {
+        margin-left: 0;
+      }
+    }
+
+    :deep(.ele-card-body) {
+      flex: 1;
+      padding-bottom: 0 !important;
+    }
+
+    :deep(.ele-card-footer) {
+      padding-left: 10px !important;
+      display: flex;
+      box-sizing: border-box;
+      align-items: flex-end;
+    }
+  }
+
+  .sohelp-filter.top .advanced-box {
+    // height: 100%;
+    overflow: hidden;
+    flex-direction: row;
+    // max-height: 100%;
+    flex-wrap: wrap;
+    // margin-bottom: 10px;
+
+    .is-expand {
+      display: block;
+    }
+  }
+
+  .sohelp-filter.top .filter-condition {
+    width: auto;
+  }
+
+  .sohelp-filter.right {
+    width: 100%;
+    height: calc(100% - 70px);
+    padding-left: 10px;
+    margin-left: 0px;
+    box-sizing: border-box;
+    border-radius: 0;
+    display: flex;
+
+    overflow: scroll;
+
+    flex-direction: column;
+
+    :deep(.ele-card-body) {
+      min-width: 230px;
+    }
+
+    :deep(.ele-card-footer) {
+      width: calc(100% - 30px);
+      background: #fff;
+      z-index: 99999;
+      bottom: 0px;
+      position: absolute;
+    }
+  }
+
+  .sohelp-filter.right .sohelp-filter-condition {
+    width: 100% !important;
+
+    :deep(.filter-condition) {
+      width: 100% !important;
+    }
+  }
+
+  .sohelp-filter.right .advanced-box {
+    flex: 1;
+
+    .is-expand {
+      display: none !important;
+    }
+  }
+
+  .sohelp-filter.right :deep(.ele-card-body) {
+    flex: 1;
+    max-height: calc(100% - 75px);
+  }
+
+  .sohelp-filter.modal :deep(.ele-card-body) {
+    min-height: 300px !important;
+    max-height: 60vh !important;
+    overflow-y: auto;
+
+    .advanced-box {
+      display: flex;
+      // gap: 20px;
+      flex-direction: row;
+      flex-wrap: wrap;
+
+      .is-expand {
+        display: none !important;
+      }
+
+      .sohelp-filter-condition {
+        width: calc(50% - 10px);
+
+        .filter-condition {
+          width: 100% !important;
+        }
+      }
+    }
+  }
+</style>

package/sohelp-grid-view/filter/filter-toolbar.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="sohelp-filter-header">
+    <slot name="left"></slot>
+    <ele-tooltip :content="t('grid.toolbar.fix_modal')" effect="light" placement="top">
+      <el-button
+        @click="changeFilterPosition('MODAL')"
+        size="small"
+        :type="positionValue === 'MODAL' ? 'primary' : ''"
+        text
+      >
+        <el-icon>
+          <TopRight />
+        </el-icon>
+      </el-button>
+    </ele-tooltip>
+
+    <ele-tooltip :content="t('grid.toolbar.fix_top')" effect="light" placement="top">
+      <el-button
+        @click="changeFilterPosition('TOP')"
+        size="small"
+        :type="positionValue === 'TOP' ? 'primary' : ''"
+        text
+      >
+        <el-icon>
+          <Upload />
+        </el-icon>
+      </el-button>
+    </ele-tooltip>
+
+    <ele-tooltip :content="t('grid.toolbar.fix_right')" effect="light" placement="top">
+      <el-button
+        @click="changeFilterPosition('RIGHT')"
+        size="small"
+        :type="positionValue === 'RIGHT' ? 'primary' : ''"
+        text
+      >
+        <el-icon style="transform: rotate(90deg)">
+          <Upload />
+        </el-icon>
+      </el-button>
+    </ele-tooltip>
+
+    <ele-tooltip :content="t('grid.toolbar.close')" effect="light" placement="top">
+      <el-button @click="closeFilterPosition()" size="small" text>
+        <el-icon>
+          <Close />
+        </el-icon>
+      </el-button>
+    </ele-tooltip>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { Close, TopRight, Upload } from "@element-plus/icons-vue";
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n();
+
+const emit = defineEmits(["click", "close"]);
+
+/** 显示位置 top | right | modal */
+const positionValue = defineModel("positionValue");
+
+/**
+ * 单击按钮改变高级搜索的位置
+ * @param type top | right | modal | close
+ */
+const changeFilterPosition = (type) => {
+  //再次点击关闭高级搜索
+  if (type === positionValue.value) {
+    emit("close");
+  } else {
+    positionValue.value = type;
+    emit("click", type);
+  }
+};
+
+/**
+ * 关闭
+ */
+const closeFilterPosition = () => {
+  emit("close");
+};
+
+</script>
+<script>
+export default {
+  name: "FilterToolbar"
+};
+</script>
+<style lang="scss" scoped>
+.sohelp-filter-header {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+
+  .el-button {
+    margin-left: 5px;
+    height: 22px;
+    line-height: 22px;
+    margin-top: 2px;
+    padding: 0px 5px !important;
+  }
+
+  .el-button--primary {
+    background: #eee;
+  }
+}
+</style>

package/sohelp-grid-view/filter/index.vue

@@ -0,0 +1,160 @@
+<script setup>
+  import FilterForm from '@/components/sohelp-eleplus/sohelp-grid-view/filter/filter-form.vue';
+  import FilterToolbar from '@/components/sohelp-eleplus/sohelp-grid-view/filter/filter-toolbar.vue';
+  import { computed, ref } from 'vue';
+  import FilterConfig from '@/components/sohelp-eleplus/sohelp-grid-view/filter/config/index.vue';
+  import { useI18n } from 'vue-i18n';
+
+  const emit = defineEmits('change', 'filter', 'update:modelValue', 'close', 'reset', 'save', 'changeFilterScheme');
+
+  const props = defineProps({
+    modelValue: Object,
+    propertiesMap: {
+      type: Object,
+      default: () => ({})
+    }
+  });
+
+  const { t } = useI18n();
+  const filterKey = ref(0);
+  const gridConfigVisible = ref(false);
+  const config = defineModel('config');
+  const filterValue = defineModel('filterValue');
+
+  const changeFilterScheme = (schemeValue, filterValue) => {
+    emit('changeFilterScheme', schemeValue, filterValue);
+  };
+
+  const filterValueChange = () => {
+    emit('change');
+  };
+  const filter = (visible) => {
+    emit('filter', filterValue.value);
+  };
+  /**
+   * 修改配置后，进行更新
+   * @param filterConfig
+   */
+  const updateFilterConfig = (filterConfig) => {
+    //这里没有赋值成功
+    config.value.list = filterConfig.list;
+    config.value.filter = filterConfig.filter;
+    filterKey.value++;
+    //单击确认，并关闭，并触发更新
+    emit('save', true);
+  };
+  /**
+   * 重置过滤
+   */
+  const reset = () => {
+    emit('reset');
+  };
+
+  /**
+   * 关闭
+   */
+  const close = () => {
+    emit('close');
+  };
+
+  //弹出窗口
+  const filterModalVisible = computed(() => {
+    return config.value.filter.config.filterPosition === 'MODAL' && config.value.filter.config.visibleFilter;
+  });
+</script>
+
+<template>
+  <ele-card
+    ref="filterCardRef"
+    :style="{
+      height: '100%',
+      marginLeft: config.filter.config.filterPosition === 'TOP' ? '0' : '10px',
+      marginBottom: '0'
+    }"
+    :class="['sohelp-filter-card', config.filter.config.filterPosition]"
+    :header="t('grid.toolbar.adv_filter')"
+    :headerStyle="{ padding: '0 10px 10px 0' }"
+    :bodyStyle="{ padding: '0', height: 'calc(100% - 40px)', background: '#fff' }"
+  >
+    <template #extra>
+      <filter-toolbar v-model:positionValue="config.filter.config.filterPosition" @close="close">
+        <template #left>
+          <ele-tooltip :content="t('grid.toolbar.config')" effect="light" placement="top">
+            <el-button size="small" plan text class="tooltip-btn" @click="gridConfigVisible = true">
+              <el-icon>
+                <Setting />
+              </el-icon>
+            </el-button>
+          </ele-tooltip>
+        </template>
+      </filter-toolbar>
+    </template>
+
+    <filter-form
+      ref="sohelpFilterRef"
+      :config="config"
+      v-model:filterValue="filterValue"
+      :propertiesMap="propertiesMap"
+      @reset="reset"
+      @filter="filter(true)"
+      @change-filter-scheme="changeFilterScheme"
+      @change="filterValueChange"
+    ></filter-form>
+  </ele-card>
+  <!-- 高级筛选弹窗 -->
+  <ele-modal
+    :width="560"
+    v-model="filterModalVisible"
+    :bodyStyle="{ padding: '20px 10px 10px 20px' }"
+    :close-on-click-modal="false"
+    :show-close="false"
+  >
+    <template #header>
+      <div class="flex">
+        {{ t('grid.toolbar.adv_filter') }}
+        <div class="ml-auto" style="padding-right: 5px">
+          <filter-toolbar
+            v-model:positionValue="config.filter.config.filterPosition"
+            @close="close"
+            style="margin-top: -1px"
+          >
+            <template #left>
+              <ele-tooltip :content="t('grid.toolbar.config')" effect="light" placement="top">
+                <el-button size="small" plan text class="tooltip-btn" @click="gridConfigVisible = true">
+                  <el-icon>
+                    <Setting />
+                  </el-icon>
+                </el-button>
+              </ele-tooltip>
+            </template>
+          </filter-toolbar>
+        </div>
+      </div>
+    </template>
+    <filter-form
+      ref="sohelpFilterRef"
+      :config="config"
+      v-model:filterValue="filterValue"
+      :propertiesMap="propertiesMap"
+      :position="config.filter.config.filterPosition"
+      @reset="reset"
+      @filter="filter"
+      @change="filterValueChange"
+    ></filter-form>
+    <template #footer>
+      <div class="footer-right" v-if="config.filter.config.filterPosition !== 'TOP'">
+        <el-button size="small" plain @click="reset">{{ t('grid.toolbar.reset') }}</el-button>
+        <el-button type="primary" size="small" @click="filter(false)">{{ t('grid.toolbar.filter') }}</el-button>
+      </div>
+    </template>
+  </ele-modal>
+  <!-- 配置弹窗 -->
+  <filter-config
+    v-model="gridConfigVisible"
+    :config="config"
+    @done="updateFilterConfig"
+    :key="filterKey"
+  ></filter-config>
+</template>
+
+<style scoped lang="scss"></style>