fast-crud-ui3 1.5.16 → 1.5.17

package/packages/components/object-picker/src/fast-object-picker.vue

@@ -0,0 +1,170 @@
+<template>
+  <!-- 使用 el-select 以便更好的支持搜索以及多选(可借助el-select的远程搜索模式实现——避免下拉) -->
+  <el-select v-model="value"
+             :clearable="clearable"
+             :placeholder="placeholder"
+             :size="size"
+             :disabled="disabled"
+             :multiple="multiple"
+             remote :suffix-icon="null"
+             @clear="handleClear"
+             @blur="(event) => $emit('blur', event)"
+             @change="(val) => $emit('change', val)"
+             @click="handleClick"
+             @focus="handleFocus">
+    <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"/>
+  </el-select>
+</template>
+
+<script>
+import {pick} from "../../../util/pick"
+import {defaultIfEmpty, isArray, isEmpty, isObject} from "../../../util/util"
+import FastTableOption from "../../../model/fastTableOption.js"
+
+export default {
+  name: "FastObjectPicker",
+  emits: ['update:modelValue', 'blur', 'change', 'clear', 'click', 'focus'],
+  props: {
+    modelValue: {
+      required: true
+    },
+    tableOption: {
+      type: FastTableOption,
+      required: true
+    },
+    showField: String, // 回显到控件上的字段 @deprecated 1.6 使用valKey替代
+    valKey: String, // 替代showField, 指定"值"key
+    labelKey: String, // 当控件需要"值显"不一致时, 指定"显"key
+    pickObject: Object, // 单选时, pick选择后回填到的目标object上
+    pickMap: Object, // 单选时, pick选择后回填到目标object上时，指导字段对应关系: key为pick的数据的字段名, value为pickObject中的字段名
+    valueCovert: { // 针对showField取值的值转换, 对于多选时, 会讲showField的多个值用英文逗号分隔后返回，作为组件v-model值
+      type: Function,
+      default: (pickData, field) => {
+        if (isArray(pickData)) {
+          return pickData.map(row => row[field])
+        } else {
+          return pickData[field]
+        }
+      }
+    },
+    beforeOpen: {
+      type: Function,
+      default: () => Promise.resolve()
+    },
+    title: String,
+    multiple: {
+      type: Boolean,
+      default: () => false
+    },
+    placeholder: {
+      type: String,
+      default: () => "请点选..."
+    },
+    appendToBody: {
+      type: Boolean,
+      default: () => true
+    },
+    disabled: {
+      type: Boolean,
+      default: () => false
+    },
+    clearable: {
+      type: Boolean,
+      default: () => true
+    },
+    size: String,
+    // pick弹窗的宽度
+    dialogWidth: {
+      type: String,
+      default: () => '70%'
+    },
+    // 用以内置el-select回显
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  mounted() {
+    if (isEmpty(this.options) && !isEmpty(this.modelValue)) { // 有初始值, 先构造一个选项以便正常显示
+      // this.options = [{label: this.modelValue, value: this.modelValue}]
+      this.options.length = 0
+      this.options.push([{label: this.modelValue, value: this.modelValue}])
+    }
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue
+      },
+      set(val) {
+        this.$emit('update:modelValue', val)
+      }
+    }
+  },
+  methods: {
+    handleClear(event) {
+      this.$emit('clear', event)
+      // 清除pickMap的其它属性
+      if (!isEmpty(this.pickMap) && !isEmpty(this.pickObject)) {
+        Object.entries(this.pickMap).forEach(([pickFieldName, formFieldName]) => {
+          this.pickObject[formFieldName] = null
+        })
+      }
+    },
+    handleClick(event) {
+      // 检查点击事件的目标是否为清除按钮, 清除按钮的话不上抛点击事件
+      if (event.target.classList.contains('el-input__clear')) {
+        return
+      }
+      this.$emit('click', event)
+      this.openPick()
+    },
+    handleFocus(event) {
+      this.$emit('focus', event)
+      // this.openPick() // ESC退出后焦点又回到input，会导致ESC关不掉
+    },
+    openPick() {
+      const {beforeOpen, tableOption} = this
+      beforeOpen().then(() => {
+        pick({
+          option: tableOption,
+          multiple: this.multiple,
+          dialog: {
+            title: this.title,
+            width: this.dialogWidth,
+            appendToBody: this.appendToBody
+          }
+        }).then((fatData) => {
+          const data = isArray(fatData) ? fatData.map((item) => item.row) : fatData.row
+          const valKey = defaultIfEmpty(this.valKey, this.showField)
+          const labelKey = defaultIfEmpty(this.labelKey, valKey)
+          // 赋值options
+          const options = (isArray(data) ? data : [data]).map(item => {
+            return {value: item[valKey], label: item[labelKey]}
+          })
+          this.options.length = 0
+          this.options.push(...options)
+          // 赋值value
+          const newVal = this.valueCovert(data, valKey)
+          this.value = newVal
+          this.$emit('change', newVal)
+          if (this.multiple !== true && isObject(data)) {
+            // 赋值pickObject
+            Object.entries(this.pickMap).forEach(([pickFieldName, formFieldName]) => {
+              this.pickObject[formFieldName] = data[pickFieldName]
+            })
+          }
+        }).catch((err = '你取消了pic弹窗') => {
+          console.debug(err)
+        })
+      }).catch((err = '你取消了打开pick') => {
+        console.debug(err)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/packages/components/select/index.js

@@ -0,0 +1,7 @@
+import FastSelect from './src/fast-select.vue'
+
+FastSelect.install = (app) => {
+    app.component(FastSelect.name, FastSelect)
+}
+
+export default FastSelect

package/packages/components/select/src/fast-select.vue

@@ -0,0 +1,89 @@
+<template>
+  <el-select v-model="value" v-bind="$attrs" :size="size" :multiple="multiple"
+             @change="(val) => $emit('change', val)"
+             @clear="() => $emit('clear')"
+             @focus="(event) => $emit('focus', event)"
+             @blur="(event) => $emit('blur', event)"
+             @visible-change="(visible) => $emit('visibleChange', visible)"
+             @remove-tag="(tagVal) => $emit('removeTag', tagVal)">
+    <el-option v-for="item in nativeOptions" :key="item.value" :label="item[labelKey]" :value="item[valKey]"
+               :disabled="disableVal.indexOf(item[valKey]) > -1"></el-option>
+  </el-select>
+</template>
+
+<script>
+import FastTableOption from '../../../model/fastTableOption.js'
+import Query from '../../../model/query.js'
+import * as util from '../../../util/util.js'
+
+export default {
+  name: "fast-select",
+  emits: ['update:modelValue', 'change', 'clear', 'focus', 'blur', 'visibleChange', 'removeTag'],
+  props: {
+    modelValue: {
+      required: true
+    },
+    options: {
+      type: [Array, FastTableOption],
+      default: () => []
+    },
+    labelKey: {
+      type: String,
+      default: () => "label"
+    },
+    valKey: {
+      type: String,
+      default: () => "value"
+    },
+    multiple: { // 多值时, value为数组
+      type: Boolean,
+      default: () => false
+    },
+    disableVal: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: 'default'
+    }
+  },
+  data() {
+    return {
+      nativeOptions: util.isArray(this.options) ? this.options : []
+    }
+  },
+  async mounted() {
+    if (this.options instanceof FastTableOption) {
+      await this.buildSelectOptions()
+    }
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue
+      },
+      set(val) {
+        this.$emit('update:modelValue', val)
+      }
+    }
+  },
+  methods: {
+    buildSelectOptions() {
+      if (!(this.options instanceof FastTableOption)) {
+        return
+      }
+      const query = new Query().setDistinct().setCols([this.valKey, this.labelKey]);
+      this.options._buildSelectOptions(query, this.valKey, this.labelKey).then(options => {
+        this.nativeOptions = options
+      }).catch(err => {
+        console.error(err)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/packages/components/table/index.js

@@ -0,0 +1,7 @@
+import FastTable from './src/table.vue'
+
+FastTable.install = (app) => {
+    app.component(FastTable.name, FastTable)
+}
+
+export default FastTable

package/packages/components/table/src/RowConfirm.vue

@@ -0,0 +1,87 @@
+<template>
+  <fast-table class="fc-fast-table"
+              :data="rows"
+              :is-static="true"
+              :option="tableOption"
+              @selection-change="handleSelectionChange">
+    <template v-for="column in columnProps">
+      <component :is="column.componentName"
+                 v-bind="column.props"
+                 v-if="column.hidden === false"/>
+    </template>
+    <template #button>
+      <el-button type="danger" plain :disabled="checkedRows.length === 0" @click="handleRemove"
+                 v-if="action === 'delete' && rows.length > 1">从删除清单里移出</el-button>
+    </template>
+  </fast-table>
+</template>
+
+<script>
+import FastTableOption from "../../../model/fastTableOption.js"
+
+export default {
+  name: 'RowConfirm',
+  props: {
+    rows: {
+      type: Array,
+      default: () => []
+    },
+    columnConfigs: Object,
+    action: {
+      type: String,
+      default: () => 'view',
+      validator: (value) => ['view', 'delete'].indexOf(value) > -1
+    }
+  },
+  data() {
+    return {
+      tableOption: new FastTableOption({
+        queryable: false,
+        insertable: false,
+        updatable: false,
+        deletable: false,
+        exportable: false,
+        enableMulti: this.rows.length > 1
+      }),
+      checkedRows: []
+    }
+  },
+  computed: {
+    columnProps() {
+      return this.columnConfigs.map(({tableColumnComponentName, customConfig}) => {
+        const {hidden, showLength, col, label, props} = customConfig
+        return {
+          componentName: tableColumnComponentName,
+          hidden: hidden,
+          props: {
+            ...props,
+            filter: false,
+            prop: col,
+            label: label,
+            showOverflowToolTip: true,
+            showLength: showLength
+          }
+        }
+      })
+    }
+  },
+  methods: {
+    handleSelectionChange({fatRows}) {
+      this.checkedRows = fatRows
+    },
+    handleRemove() {
+      for (let i = this.rows.length - 1; i >= 0; i--) {
+        if (this.checkedRows.some(r => r === this.rows[i])) {
+          this.rows.splice(i, 1)
+        }
+      }
+    },
+    getRows() {
+      return this.rows
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

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

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