fast-crud-ui3 1.5.16 → 1.5.17

package/packages/components/table/src/dynamic-filter-list.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="fc-dynamic-filter-list">
+    <el-popover v-for="(f, index) in filters" popper-style="max-width: none; width: auto;" :key="f.col + '.' + index">
+      <template v-slot:reference>
+        <div class="fc-dynamic-filter-btns">
+          <el-button link class="fc-dynamic-filter-open-btn" :class="{'strikethrough': f.disabled}">
+            {{ ellipsis(f.condMsg, 30) }}
+          </el-button>
+          <el-button link class="fc-dynamic-filter-del-btn" :icon="Close"
+                     @click.stop="delConfig(index)"></el-button>
+        </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"/>
+      <div class="fc-dynamic-filter-footer">
+        <el-button type="primary" size="small" :icon="Search" @click="confirm">查询</el-button>
+        <el-button :type="f.disabled ? 'primary' : 'info'" plain size="small" @click="toggleFilter(f)">
+          {{ f.disabled ? '启用' : '禁用' }}
+        </el-button>
+      </div>
+    </el-popover>
+    <template v-if="filters.length > 1">
+      <el-button class="fc-dynamic-filter-clear-btn" link style="padding: 0; color: #d37c84" @click="clearFilters">
+        清空
+      </el-button>
+      <el-button class="fc-dynamic-filter-clear-btn" type="info" link style="padding: 0;" @click="toggleAllFilters">
+        {{ allDisabled ? '全启' : '全禁' }}
+      </el-button>
+    </template>
+  </div>
+</template>
+
+<script>
+import Opt from "../../../model/opt.js";
+import {ellipsis} from '../../../util/util'
+import {Close, Search} from "@element-plus/icons-vue"
+
+export default {
+  name: "dynamic-filter-list",
+  emits: ['search'],
+  props: {
+    filters: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: () => 'small'
+    }
+  },
+  computed: {
+    Search() {
+      return Search
+    },
+    Close() {
+      return Close
+    },
+    allDisabled() {
+      return this.filters.every(f => f.disabled)
+    }
+  },
+  data() {
+    return {
+      Opt: Opt
+    }
+  },
+  watch: {
+    'filters' : function (filters) {
+      this.$nextTick(() => {
+        filters.forEach(f => f.updateCondMsg())
+      })
+    }
+  },
+  methods: {
+    ellipsis,
+    delConfig(index) {
+      this.filters.splice(index, 1)
+      this.confirm()
+    },
+    confirm(/*filter*/) {
+      this.$emit('search')
+    },
+    toggleFilter(filter) {
+      filter.disabled = !filter.disabled
+      this.confirm()
+    },
+    clearFilters() {
+      this.filters.splice(0, this.filters.length);
+      this.confirm()
+    },
+    toggleAllFilters() {
+      const {allDisabled} = this
+      this.filters.forEach(f => f.disabled = !allDisabled)
+      this.confirm()
+    },
+    onChange(filter) {
+      filter.updateCondMsg()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.fc-dynamic-filter-list {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 5px;
+
+  .fc-dynamic-filter-btns {
+    &:hover {
+      .fc-dynamic-filter-open-btn {
+        text-decoration: underline;
+      }
+
+      .fc-dynamic-filter-del-btn {
+        //display: inline-block;
+        visibility: visible;
+      }
+    }
+  }
+
+  .strikethrough {
+    text-decoration: line-through !important;
+    color: #acacac !important;
+  }
+
+  .fc-dynamic-filter-open-btn {
+    color: gray;
+    padding: 3px 5px;
+    border: 1px solid #cacaca;
+    border-radius: 3px;
+    font-size: 13px !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;
+  }
+}
+
+// 针对distinct后的checkbox调整样式
+.component.fc-fast-checkbox-group {
+  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;
+  }
+
+}
+
+.fc-dynamic-filter-footer {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+</style>

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

@@ -0,0 +1,129 @@
+<template>
+  <div class="fc-easy-filter">
+    <template v-if="activeFilter">
+      <fast-select class="fc-easy-filter-column" :options="filters" v-model="activeFilterCol" label-key="label"
+                   val-key="col"
+                   :size="size"
+                   :filterable="true"
+                   @change="changeField"/>
+      <component ref="easyFilterComp" class="fc-easy-filter-value" :is="activeFilter.component"
+                 v-model="activeFilter.val"
+                 v-bind="activeFilter.props"
+                 :size="size"
+                 @clear="handleClear"
+                 @keydown.enter="handleEnter"/>
+    </template>
+  </div>
+</template>
+
+<script>
+import {nextTick} from "vue";
+import FastSelect from "../../select/src/fast-select.vue";
+import {RefreshLeft, Search} from "@element-plus/icons-vue";
+import {isEmpty, isFunction, isUndefined} from "../../../util/util.js";
+
+export default {
+  name: "easy-filter",
+  components: {FastSelect},
+  emits: ['search'],
+  props: {
+    filters: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: () => 'small'
+    }
+  },
+  computed: {
+    RefreshLeft() {
+      return RefreshLeft
+    },
+    Search() {
+      return Search
+    },
+    activeFilter() {
+      if (this.filters.length === 0 || isEmpty(this.activeFilterCol)) {
+        return null
+      }
+      const activeFilter = this.filters.find(filter => filter.col === this.activeFilterCol)
+      activeFilter.disabled = false // 启用此列
+      return activeFilter
+    }
+  },
+  data() {
+    return {
+      activeFilterCol: null
+    }
+  },
+  created() {
+    this.initActiveFilterCol()
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.$refs.easyFilterComp && isFunction(this.$refs.easyFilterComp.focus)) {
+        setTimeout(() => {
+          this.$refs.easyFilterComp.focus()
+        }, 50) // 如果当前FastTable在ElDialog中,会因为visible之后的动画二导致渲染会稍晚一点, 只nextTick不够，这里稍等会会
+      }
+    })
+  },
+  watch: {
+    'filters.length': function () {
+      this.initActiveFilterCol()
+    }
+  },
+  methods: {
+    initActiveFilterCol() {
+      if (!isEmpty(this.filters)) {
+        const activeFilter = this.filters.find(f => f.disabled === false)
+        this.activeFilterCol = isUndefined(activeFilter) ? this.filters[0].col : activeFilter.col
+      }
+    },
+    changeField() {
+      this.filters.map(filter => {
+        filter.disabled = (filter.col !== this.activeFilterCol) // 保证只有activeFilter生效， 这样就不用清理切换之前的控件值了，使用体验更好
+      })
+    },
+    handleClear() {
+      nextTick(() => {
+        this.$emit('search')
+      })
+    },
+    handleEnter() {
+      nextTick(() => {
+        this.$emit('search')
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.fc-easy-filter {
+  display: flex;
+
+  .fc-easy-filter-column {
+    width: 100px;
+
+    :deep(.el-select__wrapper),
+    :deep(.el-input__wrapper) {
+      box-shadow: inset 0 1px 0 0 #DCDFE6, inset 0 -1px 0 0 #DCDFE6, inset 1px 0 0 0 #DCDFE6; // 阴影模拟边框, 无"右边框"
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .fc-easy-filter-value {
+    width: 280px;
+  }
+
+  .fc-easy-filter-value :deep(.el-input__wrapper),
+  :deep(.fc-easy-filter-value.el-input__wrapper),
+  :deep(.fc-easy-filter-value .el-select__wrapper) {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+}
+</style>

package/packages/components/table/src/export-confirm.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="export-confirm">
+    <el-table :data="columns">
+<!--      <el-table-column prop="col" label="字段"/>-->
+      <el-table-column prop="label" label="标题行">
+        <template #default="{row}">
+          <el-input v-model="row.label" size="default" placeholder="请输入名称"></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column prop="exportable" label="是否导出">
+        <template #default="{row}">
+          <el-switch v-model="row.exportable"></el-switch>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="footer">
+      <span class="flex"></span>
+      <el-button :icon="Download" size="default" type="primary" plain @click="exportData(false)">导出当前页</el-button>
+      <el-button :icon="Download" size="default" type="primary" @click="exportData(true)">导出全部</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {Download} from "@element-plus/icons-vue";
+
+export default {
+  name: "export-confirm",
+  computed: {
+    Download() {
+      return Download
+    }
+  },
+  emits: ['ok'],
+  props: {
+    columns: Array
+  },
+  methods: {
+    exportData(all) {
+      this.$emit('ok', { columns: this.columns, all: all })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.footer {
+  display: flex;
+  margin-top: 10px;
+
+  .flex {
+    flex: 1;
+  }
+}
+</style>

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

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

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