fast-crud-ui3 1.5.16 → 1.5.18-beta

package/packages/components/table/src/stored-filter-manager.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="fc-stored-filter-manager">
+    <div class="fc-stored-filter-manager-btns">
+      <el-button :icon="Plus" type="primary" plain @click="addStoreGroup">添加</el-button>
+      <el-button type="success" plain @click="saveStoreGroup">保存</el-button>
+    </div>
+    <template v-for="g in groups">
+      <el-card class="fc-stored-filter-item" shadow="hover" v-if="hiddenBuildIn === false || g.buildIn === false">
+        <template #header>
+          <div class="fc-stored-filter-item-header">
+            <div style="display: flex">
+              <el-input class="fc-stored-filter-item-label" placeholder="请输入组合名" v-model="g.label"
+                        :disabled="g.buildIn"/>&nbsp;
+              <el-alert type="warning" :closable="false" show-icon v-if="!g.compatible">此筛选组不兼容, 请修改
+              </el-alert>
+            </div>
+            <el-button type="danger" link @click="delStoreGroup(g)" v-if="!g.buildIn">删除</el-button>
+          </div>
+        </template>
+        <div class="fc-dynamic-filter-list">
+          <el-popover class="fc-stored-filter-item-cond" popper-style="max-width: none; width: auto; z-index: 3000"
+                      v-for="(f, index) in g.filters" :key="f.col + '.' + index" :disabled="g.buildIn">
+            <template v-slot:reference>
+              <div class="fc-dynamic-filter-btns">
+                <el-button link class="fc-dynamic-filter-open-btn">
+                  {{ f.condMsg }}
+                </el-button>
+                <el-button link class="fc-dynamic-filter-del-btn" :icon="Close" v-if="!g.buildIn"
+                           @click.stop="delConfig(index, g.filters)"></el-button>
+
+                <span style="margin-right: 10px; color: #909090;">且</span>
+              </div>
+            </template>
+            <component class="component" :is="f.component" v-model="f.val" v-bind="f.props" :teleported="false" @change="onChange(f)"
+                       v-if="f.opt !== Opt.NULL && f.opt !== Opt.NNULL && f.opt !== Opt.EMPTY && f.opt !== Opt.NEMPTY"/>
+          </el-popover>
+
+          <el-dropdown max-height="200px" @command="(col) => handleAddCond(col, g)" v-if="!g.buildIn">
+            <el-link :icon="Plus"></el-link>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item v-for="col in colsOption" :command="col.value">{{ col.label }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </el-card>
+    </template>
+    <el-button style="text-decoration: underline;" link @click="() => hiddenBuildIn = !hiddenBuildIn">
+      {{ hiddenBuildIn ? '显示' : '隐藏' }}内置的组合筛选项
+    </el-button>
+  </div>
+</template>
+
+<script>
+import {Close, Plus} from "@element-plus/icons-vue";
+import FastTableOption from '../../../model/fastTableOption.js'
+import Opt from '../../../model/opt.js'
+import {buildStoredFilterComponent, setCustomFilterGroups} from "./util.js";
+import * as util from "../../../util/util.js";
+import {ElMessage} from "element-plus";
+
+export default {
+  name: "stored-filter-manager",
+  emits: ['ok'],
+  props: {
+    tableOption: FastTableOption,
+    columnConfig: Object,
+    storeGroups: Array
+  },
+  data() {
+    const groups = util.deepClone(this.storeGroups) // 避免修改外部
+    groups.forEach(g => {
+      if (util.isFunction(g.filters)) { // 瞬化某些filter
+        g.filters = g.filters()
+      }
+    })
+    return {
+      hiddenBuildIn: true,
+      groups: groups.sort((a, b) => a.buildIn - b.buildIn)
+    }
+  },
+  computed: {
+    Plus() {
+      return Plus
+    },
+    Close() {
+      return Close
+    },
+    Opt() {
+      return Opt
+    },
+    colsOption() {
+      return Object.entries(this.columnConfig).map(([col, config]) => {
+        const {customConfig: {label}} = config
+        return {value: col, label: label}
+      })
+    },
+  },
+  async created() {
+    // 刷新条件显示
+    for (let i = 0; i < this.groups.length; i++) {
+      for (let j = 0; j < this.groups[i].filters.length; j++) {
+        await this.groups[i].filters[j].updateCondMsg()
+      }
+    }
+  },
+  methods: {
+    onChange(filter) {
+      filter.updateCondMsg()
+    },
+    async handleAddCond(col, storeGroup) {
+      const filter = buildStoredFilterComponent(col, this.columnConfig, this.tableOption)
+      if (!util.isEmpty(filter)) {
+        await filter.updateCondMsg()
+        storeGroup.filters.push(filter)
+      }
+    },
+    delConfig(index, filters) {
+      filters.splice(index, 1)
+    },
+    addStoreGroup() {
+      this.groups.unshift({
+        label: '',
+        filters: [],
+        buildIn: false,
+        compatible: true
+      })
+    },
+    /**
+     * 删除存筛: 只能删除自定义
+     */
+    delStoreGroup(group) {
+      this.groups = this.groups.filter(g => g !== group)
+    },
+    /**
+     * 保存自定义存筛到localStorage中，注意: 只保存自定义的
+     */
+    saveStoreGroup() {
+      const toBeSavedGroups = this.groups.filter(g => g.buildIn === false)
+      const labels = this.groups.map(g => g.label)
+      const duplicateLabel = labels.filter((l, i) => labels.indexOf(l) !== i)
+      // check
+      util.assertTip(util.isEmpty(duplicateLabel), '组合名重复,请修改:' + [...new Set(duplicateLabel)])
+      for (let i = 0; i < toBeSavedGroups.length; i++) {
+        const {label, filters} = toBeSavedGroups[i]
+        util.assertTip(!util.isEmpty(label), '请填写组合名')
+        util.assertTip(label.length <= 10, `组合名长度不得超过10:${label}`)
+        util.assertTip(!util.isEmpty(filters), `请为“${label}”配置筛选项`)
+        util.assertTip(filters.every(f => f.isEffective()), `“${label}”存在无效筛选项`)
+      }
+      setCustomFilterGroups(this.tableOption, toBeSavedGroups)
+      ElMessage.success('保存成功')
+      this.$emit('ok')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.fc-stored-filter-manager {
+  .fc-stored-filter-manager-btns {
+    margin-bottom: 20px;
+  }
+
+  .fc-stored-filter-item {
+    margin: 10px 0;
+
+    :deep(.fc-stored-filter-item-header) {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .fc-stored-filter-item-label {
+      width: 200px;
+    }
+
+
+    .fc-dynamic-filter-list {
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: 5px;
+      align-items: center;
+
+      .fc-dynamic-filter-btns {
+        display: flex;
+        align-items: center;
+
+        &:hover {
+          .fc-dynamic-filter-open-btn {
+            text-decoration: underline;
+          }
+
+          .fc-dynamic-filter-del-btn {
+            //display: inline-block;
+            visibility: visible;
+          }
+        }
+      }
+
+      .fc-dynamic-filter-open-btn {
+        color: gray;
+        padding: 3px 5px;
+        border: 1px solid #cacaca;
+        border-radius: 3px;
+        font-size: 15px !important;
+      }
+
+      .fc-dynamic-filter-del-btn {
+        visibility: hidden;
+        margin-left: 5px;
+        padding: 5px 0;
+        color: #8d4343;
+        font-size: 13px !important;
+      }
+
+      .fc-dynamic-filter-clear-btn {
+        font-size: 13px !important;
+        margin-left: 3px;
+      }
+    }
+
+    .component {
+      margin: 10px 0;
+      max-width: 420px;
+      max-height: 300px;
+      overflow: auto;
+
+      :deep(.fc-checkbox-group) {
+        display: block;
+      }
+
+      :deep(.fc-checkbox-group .el-checkbox) {
+        display: block;
+      }
+
+    }
+  }
+}
+</style>

package/packages/components/table/src/stored-filter.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="fc-stored-btn">
+    <el-dropdown :size="size">
+      <el-button type="primary" :size="size">
+        <span v-if="showLabel">{{ showLabel }}</span>
+        <el-icon v-else>
+          <Star/>
+        </el-icon>&nbsp;
+        <el-icon>
+          <arrow-down/>
+        </el-icon>
+      </el-button>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <!--          <el-dropdown-item @click="clear">清空</el-dropdown-item>-->
+          <el-dropdown-item v-for="item in storeGroups" :key="item.label"
+                            :style="{color: (groupLabels.indexOf(item.label) > -1) ? '#3f99f5 !important' : ''}"
+                            :disabled="!item.compatible"
+                            @click="handleClick(item, $event)">
+            <el-icon v-show="groupLabels.indexOf(item.label) > -1">
+              <Select/>
+            </el-icon>
+            <span>{{ item.label }}</span>
+          </el-dropdown-item>
+          <el-dropdown-item divided @click="toCustom">自定义</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+<script>
+import {nextTick} from "vue"
+import {dayjs} from "element-plus"
+import {ArrowDown, Star, Select} from "@element-plus/icons-vue"
+import * as util from "../../../util/util.js"
+import FastTableOption from "../../../model/fastTableOption.js"
+import {openDialog} from "../../../util/dialog.js";
+import StoredFilterManager from "./stored-filter-manager.vue";
+import {buildFilterGroups, buildStoredFilterComponent, getCustomFilterGroups} from "./util.js"
+
+export default {
+  name: "stored-filter",
+  components: {ArrowDown, Star, Select},
+  emits: ['change', 'update:modelValue'],
+  props: {
+    // 存筛label名组成的数组, 表示勾选项
+    groupLabels: Array,
+    size: String,
+    tableOption: FastTableOption,
+    columnConfig: Object
+  },
+  data() {
+    return {
+      storeGroups: [], // 存筛分组列表。元素格式: {label: '存筛名', filters: [{..}], buildIn: false, compatible: true}
+    }
+  },
+  computed: {
+    showLabel() {
+      if (util.isEmpty(this.groupLabels)) {
+        return ''
+      }
+      const firstLabel = this.groupLabels[0]
+      return firstLabel + (this.groupLabels.length > 1 ? `+${this.groupLabels.length - 1}` : '')
+    }
+  },
+  mounted() {
+    nextTick(() => this.init())
+  },
+  methods: {
+    init() {
+      this.storeGroups.length = 0
+      this.initCreateTimeFilter() // 基于创建时间构造内置存筛
+      this.initDevCustomFilter() // 构造开发者预定义存筛
+      this.initUserCustomFilter() // 构造用户自定义存筛
+      this.storeGroups.sort((a, b) => b.compatible - a.compatible)
+    },
+    initCreateTimeFilter() {
+      const {createTimeField} = this.tableOption
+      if (util.isEmpty(createTimeField)) {
+        return
+      }
+      const getFilters = (type) => {
+        const createTimeFilter = buildStoredFilterComponent(createTimeField, this.columnConfig, this.tableOption)
+        if (util.isNull(createTimeFilter)) {
+          return []
+        }
+        const {props: {valueFormat}} = createTimeFilter
+        const end = new Date()
+        let start
+        if (type === 'day') {
+          start = util.getBeginOfDate(end)
+        } else if (type === 'week') {
+          start = util.getBeginOfWeek(end)
+        } else if (type === 'month') {
+          start = util.getBeginOfMonth(end)
+        }
+        createTimeFilter.val = [dayjs(start).format(valueFormat), dayjs(end).format(valueFormat)]
+        return [createTimeFilter]
+      }
+
+      this.storeGroups.push({
+        label: '当天新建', buildIn: true, compatible: true, filters: () => {
+          return getFilters('day')
+        }
+      })
+      this.storeGroups.push({
+        label: '当周新建', buildIn: true, compatible: true, filters: () => {
+          return getFilters('week')
+        }
+      })
+      this.storeGroups.push({
+        label: '当月新建', buildIn: true, compatible: true, filters: () => {
+          return getFilters('month')
+        }
+      })
+    },
+    initDevCustomFilter() {
+      const {condGroups = []} = this.tableOption
+      const filterGroups = buildFilterGroups(this.tableOption, this.columnConfig, condGroups, true)
+      this.storeGroups.push(...filterGroups)
+    },
+    initUserCustomFilter() {
+      const filterGroups = getCustomFilterGroups(this.tableOption, this.columnConfig)
+      this.storeGroups.push(...filterGroups)
+    },
+    handleClick(group, e) {
+      const idx = this.groupLabels.indexOf(group.label)
+      if (idx > -1) { // 取消
+        this.groupLabels.splice(idx, 1)
+      } else {
+        if (!(e.ctrlKey || e.metaKey)) { // 支持按住ctrl/command点击可以选多个
+          this.groupLabels.length = 0
+        }
+        this.groupLabels.push(group.label)
+      }
+      this.$emit('change')
+    },
+    toCustom() {
+      openDialog({
+        component: StoredFilterManager,
+        props: {
+          tableOption: this.tableOption,
+          columnConfig: this.columnConfig,
+          storeGroups: this.storeGroups
+        },
+        dialogProps: {
+          title: '自定义组合筛选',
+          width: '60%'
+        }
+      }).then(() => {
+        this.init()
+      })
+
+    },
+    clear() {
+      this.groupLabels.length = 0
+      this.$emit('change')
+    },
+    /**
+     * 获取生效的筛选项, 通过勾选的存筛组(groupLabels)，从storeGroups中解析出生效的filters并返回
+     * @return {*[]}
+     */
+    getStoreFilters() {
+      const effectFilters = []
+      if (util.isEmpty(this.storeGroups)) {
+        this.init()
+      }
+      for (const g of this.storeGroups) {
+        if (this.groupLabels.indexOf(g.label) === -1) {
+          continue
+        }
+        const filters = util.isFunction(g.filters) ? g.filters.call(this.tableOption.context) : g.filters
+        util.assert(util.isArray(filters), `the filters prop of group(${g.label}) is wrong type, it should be a array, or a function that return a array`)
+        effectFilters.push(...filters)
+      }
+      return effectFilters
+    }
+  }
+}
+</script>

package/packages/components/table/src/table-head-cell.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="fc-table-column-head-cell" :class="{'filter': column.filter !== false && column.dynamicFilter !== false}">
+    <slot></slot>
+    <el-icon v-if="column.order === 'asc' || column.order === 'desc'" class="sort-icon">
+      <SortUp v-if="column.order === 'asc'"/>
+      <SortDown v-else/>
+    </el-icon>
+  </div>
+</template>
+
+<script>
+import {SortDown, SortUp} from "@element-plus/icons-vue"
+
+export default {
+  name: "fast-table-head-cell",
+  components: {SortDown, SortUp},
+  props: {
+    column: Object
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.fc-table-column-head-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  height: 38px;
+  line-height: 38px;
+  margin: 0 10px;
+}
+
+.fc-table-column-head-cell.filter {
+  cursor: pointer;
+}
+
+.sort-icon {
+  color: #409eff;
+}
+</style>