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

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

@@ -1,253 +0,0 @@
-<template>
-  <div class="fc-dynamic-filter-form">
-    <div class="fc-dynamic-filter-sort-btn">
-      <el-radio v-model="asc" label="" border :size="size">不排序</el-radio>
-      <el-radio v-model="asc" :label="true" border :size="size">升序</el-radio>
-      <el-radio v-model="asc" :label="false" border :size="size">降序</el-radio>
-    </div>
-    <div class="fc-dynamic-filter-component-wrapper">
-      <div class="title">输入过滤：</div>
-      <div class="fc-dynamic-filter-component">
-        <component :is="localFilter.component" v-model="localFilter.val" v-bind="localFilter.props"/>
-      </div>
-    </div>
-    <div class="fc-dynamic-filter-distinct-wrapper">
-      <div class="title">
-        <div>
-          <span>去重筛选：</span>
-          <el-checkbox size="small" type="info" v-model="reuseCond" @change="distinctLoad">复用已生效的条件
-          </el-checkbox>
-        </div>
-        <el-button link
-                   :style="{'color': distinctOptionAsc === '' ? 'gray': '#409EFF', 'padding': 0}"
-                   :icon="distinctOptionsAscIcon"
-                   @click="() => distinctOptionAsc = !distinctOptionAsc"
-                   v-if="distinctLoaded"></el-button>
-      </div>
-      <!-- 由于distinct查询可能比较慢, 因此由用户点击触发展示 -->
-      <div class="fc-dynamic-filter-distinct" v-loading="distinctLoading">
-        <!-- distinct 勾选项 -->
-        <el-input size="small" v-model="distinctOptionFilterKeyword" :clearable="true" placeholder="输入过滤.."
-                  v-if="distinctLoaded"></el-input>
-        <fast-checkbox-group :options="distinctFilteredOptions" :show-chose-all="false"
-                             class="fc-dynamic-filter-distinct-options"
-                             v-model="distinctCheckedValue"
-                             v-if="distinctLoaded"></fast-checkbox-group>
-        <div style="display: flex; justify-content: center;" v-if="!distinctLoaded">
-          <el-button link style="color: gray;" @click="distinctLoad">请点击加载</el-button>
-        </div>
-        <el-empty v-if="distinctLoaded && distinctOptions.length === 0">
-          <template #image><span></span></template>
-        </el-empty>
-      </div>
-    </div>
-    <div class="fc-dynamic-filter-form-btn">
-      <el-button :size="size" @click="getEmpty">查空值</el-button>
-      <el-button :size="size" @click="getNotEmpty">查非空值</el-button>
-      <span style="flex: 1;"></span>
-      <el-button type="primary" :size="size" @click="ok">确认</el-button>
-      <el-button :size="size" @click="close">关闭</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import FastTableOption from '../../../model/fastTableOption.js'
-import FilterComponentConfig from '../../../model/filterComponentConfig.js'
-import Query from '../../../model/query.js'
-import Opt from '../../../model/opt.js'
-import {escapeValToLabel} from "../../../util/escape.js"
-import {isEmpty, isObject, toStr} from "../../../util/util"
-import FastCheckboxGroup from "../../checkbox-group/src/fast-checkbox-group.vue"
-import {Sort, SortUp, SortDown} from "@element-plus/icons-vue"
-
-export default {
-  name: "dynamic-filter-form",
-  components: {FastCheckboxGroup},
-  emits: ['ok', 'cancel'],
-  props: {
-    option: FastTableOption,
-    filter: FilterComponentConfig,
-    order: [String],
-    conds: {
-      type: Array,
-      default: () => []
-    }
-  },
-  mounted() {
-    console.log(this.localFilter)
-  },
-  computed: {
-    size() {
-      return this.option.style.size
-    },
-    distinctOptionsAscIcon() {
-      return this.distinctOptionAsc === '' ? Sort : (this.distinctOptionAsc === true ? SortUp : SortDown)
-    },
-    distinctFilteredOptions() {
-      const {distinctOptionFilterKeyword, distinctOptionAsc} = this
-      return this.distinctOptions.filter(item => isEmpty(distinctOptionFilterKeyword) || toStr(item.label).indexOf(distinctOptionFilterKeyword) !== -1)
-          .sort((a, b) => {
-            const label1 = toStr(a.label), label2 = toStr(b.label);
-            return distinctOptionAsc ? label1.localeCompare(label2) : label2.localeCompare(label1)
-          })
-    }
-  },
-  data() {
-    const localFilter = new FilterComponentConfig({...this.filter})
-    return {
-      localFilter: localFilter,
-      asc: this.order === 'asc' ? true : (this.order === 'desc' ? false : ''),
-      reuseCond: true, // 复用已生效的条件
-      distinctLoaded: false, // 是否distinct query loaded
-      distinctLoading: false, // 是否distinct query loading中
-      distinctOptions: [], // 检索出的distinct选项
-      distinctOptionAsc: '', // distinct选项排序, 默认不排序
-      distinctOptionFilterKeyword: null, // distinct选项过滤关键词
-      distinctCheckedValue: [], // 勾选的distinct值
-      distinctAbortCtrl: null // distinct请求终止控制器
-    }
-  },
-  methods: {
-    distinctLoad() {
-      this.distinctLoading = true;
-      this.distinctAbortCtrl = new AbortController();
-      const {col, component, props} = this.localFilter;
-
-      const distinctQuery = new Query().setDistinct().setCols([col]);
-      if (this.reuseCond) {
-        distinctQuery.setConds(this.conds);
-      }
-      this.option._list(distinctQuery, {signal: this.distinctAbortCtrl.signal}).then((res) => {
-        if (res.length > 1000) { // 为防止页面卡死, 最多显示1000个
-          res.splice(1001);
-        }
-        const distinctValues = res.filter(item => isObject(item) && item.hasOwnProperty(col)).map(item => item[col])
-        this.distinctOptions.length = 0 // 清空
-        distinctValues.map((v) => {
-          escapeValToLabel(component, v, props).then(label => {
-            this.distinctOptions.push({
-              value: v,
-              label: label
-            })
-          }).catch(err => {
-            console.error(err)
-            this.distinctOptions.push({
-              value: v,
-              label: v
-            })
-          })
-        })
-        this.distinctLoaded = true;
-      }).catch(err => {
-        console.error(err)
-      }).finally(() => {
-        this.distinctLoading = false;
-      })
-    },
-    getEmpty() {
-      this.$emit('ok', {
-        filter: new FilterComponentConfig({...this.localFilter, opt: Opt.EMPTY}),
-        order: {
-          col: this.localFilter.col,
-          asc: this.asc
-        }
-      })
-    },
-    getNotEmpty() {
-      this.$emit('ok', {
-        filter: new FilterComponentConfig({...this.localFilter, opt: Opt.NEMPTY}),
-        order: {
-          col: this.localFilter.col,
-          asc: this.asc
-        }
-      })
-    },
-    ok() {
-      let filterConfig;
-      if (this.distinctCheckedValue.length > 0) {
-        filterConfig = {
-          component: 'fast-checkbox-group',
-          col: this.localFilter.col,
-          label: this.localFilter.label,
-          opt: 'in',
-          val: this.distinctCheckedValue,
-          disabled: false,
-          props: {
-            options: this.distinctOptions,
-            labelKey: 'label',
-            valKey: 'value',
-            showChoseAll: true
-          }
-        }
-      } else {
-        filterConfig = {...this.localFilter};
-      }
-      this.$emit('ok', {
-        filter: new FilterComponentConfig(filterConfig),
-        order: {
-          col: this.localFilter.col,
-          asc: this.asc
-        }
-      })
-    },
-    close() {
-      this.$emit('cancel')
-    }
-  },
-  beforeUnmount() {
-    if (this.distinctAbortCtrl) {
-      this.distinctAbortCtrl.abort()
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.fc-dynamic-filter-form {
-  & > * {
-    margin-bottom: 10px;
-  }
-
-  & .title {
-    margin-bottom: 5px;
-    font-size: 13px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .fc-dynamic-filter-sort-btn, .fc-dynamic-filter-component {
-    display: flex;
-    justify-content: space-between;
-
-    & > * {
-      flex: 1;
-    }
-  }
-
-  .fc-dynamic-filter-component-wrapper {
-    margin: 20px 0;
-  }
-
-  .fc-dynamic-filter-distinct {
-    border: 1px solid #e1e1e1;
-    padding: 10px;
-    overflow: auto;
-    max-height: 300px;
-
-    .fc-dynamic-filter-distinct-options {
-      margin-top: 10px;
-
-      :deep(.el-checkbox) {
-        display: block;
-      }
-    }
-  }
-
-  .fc-dynamic-filter-form-btn {
-    display: flex;
-  }
-}
-
-</style>

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

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

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

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