fast-crud-ui3 1.5.16-tsc-beta → 1.5.16

package/packages/components/table/src/quick-filter-form.vue

@@ -1,140 +0,0 @@
-<template>
-  <el-form ref="quickFilterForm" :inline="true" :label-width="option.style.formLabelWidth" class="fc-quick-filter-form"
-           :style="formStyle">
-    <el-form-item v-for="filter in visibleFilters"
-                  :key="filter.col"
-                  :prop="filter.col"
-                  :label="filter.label + ':'"
-                  :style="filter.props && filter.props.quickFilterBlock !== false ? formItemBlockStyle : ''"
-                  :class="{'fc-block': filter.props && filter.props.quickFilterBlock !== false}"
-                  class="fc-quick-filter-form-item">
-      <component :size="option.style.size" :is="filter.component" v-model="filter.val" v-bind="filter.props"
-                 @change="handleChange(filter)" @click="handleClick(filter)"/>
-    </el-form-item>
-    <slot></slot>
-  </el-form>
-</template>
-
-<script>
-import {ArrowDown, ArrowUp} from "@element-plus/icons-vue";
-import {buildGridTemplateAreas, isFunction} from "../../../util/util.js";
-import {FastTableOption} from "../../../index.js";
-
-export default {
-  name: "quick-filter-form",
-  components: {ArrowDown, ArrowUp},
-  props: {
-    option: FastTableOption,
-    filters: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      showNum: 3, // 收缩展示数量
-      showFormItems: [] // 显示的formItem, 元素对象格式为 {block: Boolean}
-    }
-  },
-  computed: {
-    /**
-     * quickFilterBlock的独占一行且排前面。注意: 必须浅拷贝
-     * @return {*[]}
-     */
-    visibleFilters() {
-      const {filters = []} = this;
-      // 确保独占一行的快筛项排前面
-      filters.sort((a, b) => {
-        const {props: propsA} = a;
-        const {props: propsB} = b;
-        if (propsA.quickFilterBlock !== false && propsB.quickFilterBlock === false) {
-          return -1
-        } else if (propsA.quickFilterBlock === false && propsB.quickFilterBlock !== false) {
-          return 1
-        }
-        return 0;
-      });
-      return filters
-    },
-    formStyle() {
-      const rowSpan = this.option.style.quickFilterSpan
-      const gridGap = this.option.style.quickFilterGridGap
-      const gridTemplateAreas = buildGridTemplateAreas(rowSpan, this.showFormItems)
-      return {
-        display: 'grid',
-        gridTemplateColumns: `repeat(${rowSpan}, 1fr)`,
-        gridTemplateAreas: gridTemplateAreas,
-        gap: gridGap
-      }
-    },
-    formItemBlockStyle() {
-      const rowSpan = this.option.style.quickFilterSpan
-      return {
-        gridColumn: `span ${rowSpan}`
-      }
-    },
-    formModel() {
-      const model = {}
-      this.filters.forEach(f => model[f.col] = f.val)
-      return model
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      if (this.$refs.quickFilterForm) {
-        const formItemEls = this.$refs.quickFilterForm.$el.querySelectorAll(".el-form-item")
-        this.showFormItems = Array.prototype.map.call(formItemEls, e => {
-          return {
-            block: e.classList.contains('fc-block')
-          }
-        })
-      }
-    })
-  },
-  methods: {
-    handleChange(filter) {
-      const {props: {quickFilterConfig = {}}} = filter
-      const {onChange} = quickFilterConfig
-      if (!isFunction(onChange)) {
-        return
-      }
-      const filtersMap = this.filters.reduce((result, item) => {
-        result[item.col] = item
-        return result
-      }, {})
-      const context = this.option.context
-      onChange.call(context, filter.val, this.formModel, filter, filtersMap)
-    },
-    handleClick(filter) {
-      const {props: {quickFilterConfig = {}}} = filter
-      const {onClick} = quickFilterConfig
-      if (!isFunction(onClick)) {
-        return
-      }
-      const filtersMap = this.filters.reduce((result, item) => {
-        result[item.col] = item
-        return result
-      }, {})
-      const context = this.option.context
-      onClick.call(context, this.formModel, filter, filtersMap)
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.fc-quick-filter-form > .el-form-item {
-  margin: 0 !important;
-}
-</style>
-<style scoped lang="scss">
-.fc-quick-filter-form {
-  .fc-quick-filter-form-btns {
-    margin-left: 10px;
-  }
-  :deep(.el-form-item__content > *) {
-    flex: 1;
-  }
-}
-
-</style>

package/packages/components/table/src/row-form.vue

@@ -1,137 +0,0 @@
-<template>
-  <div class="fc-table-edit-form-wrapper">
-    <el-form ref="editForm"
-             class="fc-table-edit-form"
-             :model="formData"
-             :rules="rules"
-             :label-width="option.style.formLabelWidth">
-      <el-row v-for="row in localLayout" :key="row.col">
-        <el-col v-for="(span, col) in row" :span="span" :key="col">
-          <el-form-item :prop="col"
-                        :label="config[col].label"
-                        :key="col"
-                        v-if="canEdit(col)">
-            <component :is="config[col].component"
-                       v-bind="config[col].props"
-                       v-model="formData[col]"
-                       style="width: 100%"></component>
-          </el-form-item>
-          <span v-else>&nbsp;</span>
-        </el-col>
-      </el-row>
-    </el-form>
-    <div class="fc-table-edit-form-btns">
-      <el-button :size="option.style.size" type="primary" @click="submit">保存</el-button>
-      <el-button :size="option.style.size" @click="cancel">取消</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import {ElMessage} from 'element-plus';
-import FastTableOption from "../../../model/fastTableOption.js";
-import {isEmpty} from "../../../util/util";
-import {colEditable} from "./util";
-
-export default {
-  name: "row-form",
-  emits: ['ok', 'cancel'],
-  props: {
-    option: FastTableOption,
-    config: Object,
-    row: Object,
-    type: String,
-    layout: String
-  },
-  data() {
-    const formData = this.row.editRow
-    const ruleMap = {};
-    for (const col in this.config) {
-      const {component, props: {rules = []}} = this.config[col];
-      if (!isEmpty(rules)) {
-        rules.forEach(rule => rule.getRow = (() => formData)) // 为了自定义验证器里能获取到当前行 煞费苦心
-        ruleMap[col] = rules;
-      }
-      if (component === 'fast-object-picker') { // 对于FastObjectPicker需要特别把formData传进去
-        this.config[col].props.pickObject = formData;
-      }
-    }
-    return {
-      rules: ruleMap,
-      formData: formData
-    }
-  },
-  computed: {
-    localLayout() {
-      let {layout, config} = this;
-      const colArr = Object.keys(config);
-      if (isEmpty(layout)) {
-        layout = colArr.join(",");
-      }
-      return layout.split(",").map(row => {
-        const rowObj = {};
-        const cols = row.split("|");
-        const perSpan = Math.floor(24 / cols.length);
-        for (let i = 0; i < cols.length; i++) {
-          const key = cols[i].trim();
-          if (rowObj.hasOwnProperty(key)) {
-            rowObj[key] += perSpan;
-          } else {
-            rowObj[key] = perSpan;
-          }
-        }
-        return rowObj;
-      })
-    }
-  },
-  methods: {
-    /**
-     * 是否展示编辑模式
-     * @param col 列
-     * @param config 列配置
-     * @returns {boolean}
-     */
-    canEdit(col) {
-      return colEditable.call(this.option.context, {...this.row, status: this.type}, col);
-    },
-    cancel() {
-      const {context, beforeCancel} = this.option;
-      beforeCancel.call(context, {
-        fatRows: [this.row],
-        rows: [this.row.row],
-        status: this.type
-      }).then(() => {
-        this.$emit('cancel')
-      }).catch(() => {
-        // 不允许取消
-      })
-    },
-    submit() {
-      this.$refs['editForm'].validate().then(() => {
-        const fn = this.type === 'insert' ? this.option._insertRows : this.option._updateRows;
-        fn.call(this.option, [this.row]).then(() => {
-          this.$emit('ok')
-        })
-      }).catch((err) => {
-        console.error(err)
-        ElMessage.warning('表单校验未通过! 请检查输入内容');
-      })
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.fc-table-edit-form-wrapper {
-  .fc-table-edit-form {
-    //display: grid;
-    //grid-template-columns: 1fr 1fr;
-    //column-gap: 20px;
-  }
-
-  .fc-table-edit-form-btns {
-    display: flex;
-    justify-content: right;
-  }
-}
-</style>

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

@@ -1,240 +0,0 @@
-<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

@@ -1,180 +0,0 @@
-<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>