fast-crud-ui3 1.5.16 → 1.5.18-beta

package/packages/components/table-column-input/src/table-column-input.vue

@@ -0,0 +1,60 @@
+<template>
+  <el-table-column class-name="fc-table-column"
+                   :prop="prop"
+                   :label="label"
+                   :min-width="minWidth"
+                   :show-overflow-tooltip="showOverflowTooltip"
+                   v-bind="$attrs"
+                   v-if="!hidden">
+    <template #header="{column, $index}">
+      <fast-table-head-cell :column="columnProp" @click="headCellClick(column)">
+        <slot name="header" v-bind:column="column" v-bind:$index="$index">
+          <span>{{ label }}</span>
+        </slot>
+      </fast-table-head-cell>
+    </template>
+
+    <template #default="{row, column, $index}">
+      <slot v-bind:row="row" v-bind:column="column" v-bind:$index="$index">
+        <div v-if="!canEdit(row, column, $index)">
+          <slot name="normal" v-bind:row="row" v-bind:column="column" v-bind:$index="$index">
+            <fast-cell-content :value="showLabel(row)" :fat-row="row" :show-length="showLength" :linkTo="link"/>
+          </slot>
+        </div>
+        <slot name="edit" v-bind:row="row" v-bind:column="column" v-bind:$index="$index" v-else>
+          <el-input v-model="row['editRow'][prop]"
+                    v-bind="row['config'][prop]['props']"
+                    :ref="prop + $index"
+                    @change="(val) => handleChange(val, {row, column, $index})"
+                    @blur="(event) => handleBlur(event, {row, column, $index})"
+                    @focus="(event) => handleFocus(event, {row, column, $index})"
+                    @input="(val) => handleInput(val, {row, column, $index})"
+                    @clear="() => handleClear({row, column, $index})">
+          </el-input>
+        </slot>
+      </slot>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+import tableColumn from "../../../mixins/table-column";
+
+export default {
+  name: "FastTableColumnInput",
+  mixins: [tableColumn],
+  props: {
+    minWidth: {
+      type: String,
+      default: () => '120px'
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/packages/components/table-column-number/config.js

@@ -0,0 +1,89 @@
+import {easyOptParse, isUndefined, merge, ternary} from "../../util/util";
+import Opt from "../../model/opt.js";
+
+const defaultQueryConfig = {
+    component: 'el-input',
+    opt: Opt.LIKE,
+    val: null, // 默认值
+    props: {
+        clearable: true,
+        placeholder: '请输入..'
+    },
+    condMapFn: (cond) => {
+        const operators = {
+            '^>=': {
+                opt: Opt.GE,
+                valExtract: (cond) => cond.val.substring(2)
+            },
+            '^<=': {
+                opt: Opt.LE,
+                valExtract: (cond) => cond.val.substring(2)
+            },
+            '^!=': {
+                opt: Opt.NE,
+                valExtract: (cond) => cond.val.substring(2)
+            },
+            '^=': {
+                opt: Opt.EQ,
+                valExtract: (cond) => cond.val.substring(1)
+            },
+            '^>': {
+                opt: Opt.GT,
+                valExtract: (cond) => cond.val.substring(1)
+            },
+            '^<': {
+                opt: Opt.LT,
+                valExtract: (cond) => cond.val.substring(1)
+            },
+            '^\\*': {
+                opt: Opt.LLIKE,
+                valExtract: (cond) => cond.val.substring(1)
+            },
+            '\\*$': {
+                opt: Opt.RLIKE,
+                valExtract: (cond) => cond.val.substring(0, cond.val.length - 1)
+            }
+        }
+        easyOptParse(cond, operators);
+        return [cond]
+    }
+}
+const defaultEditConfig = {
+    component: 'el-input-number',
+    val: undefined,
+    props: {
+        clearable: true,
+        'controls-position': "right",
+        class: 'fc-table-inline-edit-component',
+        editable: true,
+        rules: []
+    }
+}
+
+export default {
+    query: (config, type) => {
+        let val = defaultQueryConfig.val;
+        const {props: {defaultVal, ...validProps} = {}} = config
+        if (type === 'quick') {
+            val = ternary(isUndefined(defaultVal), val, defaultVal);
+        }
+        config.val = val;
+        config.props = validProps;
+        return merge(config, defaultQueryConfig, true, false)
+    },
+    edit: (config, type) => {
+        const {label, props = {}} = config;
+        const {defaultVal, rules = [], ...validProps} = props;
+        // 如果含有值不为false的required属性, 则将其转换为rules规则添加到props中
+        if (validProps.hasOwnProperty('required') && validProps.required !== false) {
+            rules.push({type: 'number', required: true, message: `${label}不能为空`})
+        }
+        config.val = ternary(isUndefined(defaultVal), defaultEditConfig.val, defaultVal);
+        config.props = {
+            ...validProps,
+            rules: rules
+        }
+        return merge(config, defaultEditConfig, true, false);
+    }
+
+}

package/packages/components/table-column-number/index.js

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

package/packages/components/table-column-number/src/table-column-number.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-table-column class-name="fc-table-column"
+                   :prop="prop"
+                   :label="label"
+                   :min-width="minWidth"
+                   :show-overflow-tooltip="showOverflowTooltip"
+                   v-bind="$attrs"
+                   v-if="!hidden">
+    <template #header="{column, $index}">
+      <fast-table-head-cell :column="columnProp" @click="headCellClick(column)">
+        <slot name="header" v-bind:column="column" v-bind:$index="$index">
+          <span>{{ label }}</span>
+        </slot>
+      </fast-table-head-cell>
+    </template>
+
+    <template #default="{row, column, $index}">
+      <slot v-bind:row="row" v-bind:column="column" v-bind:$index="$index">
+        <div v-if="!canEdit(row, column, $index)">
+          <slot name="normal" v-bind:row="row" v-bind:column="column" v-bind:$index="$index">
+            <fast-cell-content :value="showLabel(row)" :fat-row="row" :show-length="showLength" :linkTo="link"/>
+          </slot>
+        </div>
+        <slot name="edit" v-bind:row="row" v-bind:column="column" v-bind:$index="$index" v-else>
+          <el-input-number v-model="row['editRow'][prop]"
+                           v-bind="row['config'][prop]['props']"
+                           :ref="prop + $index"
+                           @change="(val) => handleChange(val, {row, column, $index})"
+                           @blur="(event) => handleBlur(event, {row, column, $index})"
+                           @focus="(event) => handleFocus(event, {row, column, $index})"></el-input-number>
+        </slot>
+      </slot>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+import tableColumn from "../../../mixins/table-column"
+
+export default {
+  name: "FastTableColumnNumber",
+  mixins: [tableColumn],
+  props: {
+    minWidth: {
+      type: String,
+      default: () => '90px'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/packages/components/table-column-object/config.js

@@ -0,0 +1,66 @@
+import {isArray, isSampleType, isUndefined, merge, ternary} from "../../util/util";
+import Opt from '../../model/opt.js'
+import Cond from '../../model/cond.js'
+import tableColumnInputConfig from '../table-column-input/config.js'
+
+const defaultQueryConfig = {
+    component: 'fast-object-picker',
+    opt: Opt.EQ,
+    val: null, // 默认值
+    props: {
+        clearable: true,
+        placeholder: '请点选..',
+        options: [] // 用以控件回显(val和label不一致时)
+    },
+    condMapFn: (cond) => {
+        if (isArray(cond.val) && cond.val.length > 0) {
+            return [new Cond(cond.col, Opt.IN, cond.val)]
+        }
+        if (isSampleType(cond.val)) {
+            return [new Cond(cond.col, Opt.EQ, cond.val)]
+        }
+        return []
+    }
+}
+const defaultEditConfig = {
+    component: 'fast-object-picker',
+    val: null,
+    props: {
+        class: 'fc-table-inline-edit-component',
+        clearable: true,
+        multiple: false, // 默认单选
+        title: '请点选...',
+        editable: true,
+        options: [] // 用以控件回显(val和label不一致时)
+    }
+}
+export default {
+    query: (config, type) => {
+        let val = defaultQueryConfig.val;
+        const {props: {defaultVal, ...validProps} = {}} = config
+        if (type === 'quick') {
+            val = ternary(isUndefined(defaultVal), val, defaultVal);
+        } else {
+            // 除了快筛，其它(简筛、动筛、存筛)里输入控件都采用输入框, 否则过犹不及
+            config.component = 'el-input'
+            return tableColumnInputConfig.query(config, type)
+        }
+        config.val = val;
+        config.props = validProps;
+        return merge(config, defaultQueryConfig, true, false)
+    },
+    edit: (config, type) => {
+        const {label, props = {}} = config;
+        const {defaultVal, rules = [], ...validProps} = props;
+        // 如果含有值不为false的required属性, 则将其转换为rules规则添加到props中
+        if (validProps.hasOwnProperty('required') && validProps.required !== false) {
+            rules.push({required: true, message: `${label}不能为空`})
+        }
+        config.val = ternary(isUndefined(defaultVal), defaultEditConfig.val, defaultVal);
+        config.props = {
+            ...validProps,
+            rules: rules
+        };
+        return merge(config, defaultEditConfig, true, false)
+    }
+}

package/packages/components/table-column-object/index.js

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

package/packages/components/table-column-object/src/table-column-object.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-table-column class-name="fc-table-column"
+                   :prop="prop"
+                   :label="label"
+                   :min-width="minWidth"
+                   :show-overflow-tooltip="showOverflowTooltip"
+                   v-bind="$attrs"
+                   v-if="!hidden">
+    <template #header="{column, $index}">
+      <fast-table-head-cell :column="columnProp" @click="headCellClick(column)">
+        <slot name="header" v-bind:column="column" v-bind:$index="$index">
+          <span>{{ label }}</span>
+        </slot>
+      </fast-table-head-cell>
+    </template>
+
+    <template #default="{row, column, $index}">
+      <slot v-bind:row="row" v-bind:column="column" v-bind:$index="$index">
+        <div v-if="!canEdit(row, column, $index)">
+          <slot name="normal" v-bind:row="row" v-bind:column="column" v-bind:$index="$index">
+            <fast-cell-content :value="showLabel(row)" :fat-row="row" :show-length="showLength" :linkTo="link"/>
+          </slot>
+        </div>
+        <slot name="edit" v-bind:row="row" v-bind:column="column" v-bind:$index="$index" v-else>
+          <fast-object-picker v-model="row['editRow'][prop]"
+                              v-bind="row['config'][prop]['props']"
+                              :table-option="getTableOption(row, column, $index)"
+                              :pick-object="row['editRow']"
+                              :ref="prop + $index"
+                              @change="(val) => handleChange(val, {row, column, $index})"
+                              @blur="(event) => handleBlur(event, {row, column, $index})"
+                              @focus="(event) => handleFocus(event, {row, column, $index})"
+                              @input="(val) => handleInput(val, {row, column, $index})"
+                              @clear="() => handleClear({row, column, $index})">
+          </fast-object-picker>
+        </slot>
+      </slot>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+import tableColumn from "../../../mixins/table-column"
+import {FastTableOption} from "../../../index"
+import {isFunction} from "../../../util/util"
+import FastObjectPicker from "../../object-picker/src/fast-object-picker.vue"
+
+export default {
+  name: "FastTableColumnObject",
+  components: {FastObjectPicker},
+  mixins: [tableColumn],
+  props: {
+    minWidth: {
+      type: String,
+      default: () => '100px'
+    },
+    tableOption: {
+      type: [FastTableOption, Function],
+      required: true
+    }
+  },
+  methods: {
+    getTableOption(fatRow, column, $index) {
+      if (isFunction(this.tableOption)) {
+        return this.tableOption(fatRow, column, $index);
+      }
+      return this.tableOption;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/packages/components/table-column-select/config.js

@@ -0,0 +1,67 @@
+import {isArray, isSampleType, isUndefined, merge, ternary} from "../../util/util";
+import Cond from '../../model/cond.js'
+import Opt from '../../model/opt.js'
+
+const defaultQueryConfig = {
+    component: 'fast-select',
+    opt: Opt.IN,
+    val: [], // 默认值
+    props: {
+        clearable: true,
+        filterable: true,
+        multiple: true,
+        collapseTags: true, // 默认合并
+        placeholder: '请选择..'
+    },
+    condMapFn: (cond) => {
+        if (isArray(cond.val) && cond.val.length > 0) {
+            return [new Cond(cond.col, Opt.IN, cond.val)]
+        }
+        if (isSampleType(cond.val)) {
+            return [new Cond(cond.col, Opt.EQ, cond.val)]
+        }
+        return []
+    }
+}
+const defaultEditConfig = {
+    component: 'fast-select',
+    val: null,
+    props: {
+        clearable: true,
+        class: 'fc-table-inline-edit-component',
+        editable: true,
+        rules: []
+    }
+}
+export default {
+    query: (config, type) => {
+        const {props: {defaultVal, ...validProps} = {}} = config
+        let val = []
+        let component = 'fast-select';
+
+        if (type === 'quick') {
+            val = ternary(isUndefined(defaultVal), defaultQueryConfig.val, defaultVal);
+            if (validProps.quickFilterCheckbox !== false) {
+                component = 'fast-checkbox-group';
+            }
+        }
+        config.val = val;
+        config.component = component;
+        config.props = validProps;
+        return merge(config, defaultQueryConfig, true, false)
+    },
+    edit: (config, type) => {
+        const {label, props = {}} = config;
+        const {defaultVal, rules = [], ...validProps} = props
+        // 如果含有值不为false的required属性, 则将其转换为rules规则添加到props中
+        if (validProps.hasOwnProperty('required') && validProps.required !== false) {
+            rules.push({required: true, message: `${label}不能为空`})
+        }
+        config.val = ternary(isUndefined(defaultVal), defaultEditConfig.val, defaultVal)
+        config.props = {
+            ...validProps,
+            rules: rules
+        }
+        return merge(config, defaultEditConfig, true, false)
+    }
+}

package/packages/components/table-column-select/index.js

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

package/packages/components/table-column-select/src/table-column-select.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-table-column class-name="fc-table-column"
+                   :prop="prop"
+                   :label="label"
+                   :min-width="minWidth"
+                   :show-overflow-tooltip="showOverflowTooltip"
+                   v-bind="$attrs"
+                   v-if="!hidden">
+    <template #header="{column, $index}">
+      <fast-table-head-cell :column="columnProp" @click="headCellClick(column)">
+        <slot name="header" v-bind:column="column" v-bind:$index="$index">
+          <span>{{ label }}</span>
+        </slot>
+      </fast-table-head-cell>
+    </template>
+
+    <template #default="{row, column, $index}">
+      <slot v-bind:row="row" v-bind:column="column" v-bind:$index="$index">
+        <div v-if="!canEdit(row, column, $index)">
+          <slot name="normal" v-bind:row="row" v-bind:column="column" v-bind:$index="$index">
+            <fast-cell-content :value="showLabel(row)" :fat-row="row" :show-length="showLength" :linkTo="link"/>
+          </slot>
+        </div>
+        <slot name="edit" v-bind:row="row" v-bind:column="column" v-bind:$index="$index" v-else>
+          <fast-select v-model="row['editRow'][prop]"
+                       v-bind="row['config'][prop]['props']"
+                       :ref="prop + $index"
+                       @change="(val) => handleChange(val, {row, column, $index})"
+                       @blur="(event) => handleBlur(event, {row, column, $index})"
+                       @focus="(event) => handleFocus(event, {row, column, $index})"
+                       @clear="() => handleClear({row, column, $index})"
+                       @visible-change="(visible) => $emit('visibleChange', visible, {row, column, $index})"
+                       @remove-tag="(tagVal) => $emit('removeTag', tagVal, {row, column, $index})"></fast-select>
+        </slot>
+      </slot>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+import tableColumn from "../../../mixins/table-column"
+import FastSelect from "../../select/src/fast-select.vue"
+import * as util from "../../../util/util.js"
+import FastTableOption from '../../../model/fastTableOption.js'
+import Query from '../../../model/query.js'
+
+export default {
+  name: "FastTableColumnSelect",
+  components: {FastSelect},
+  mixins: [tableColumn],
+  emits: ['visibleChange', 'removeTag'],
+  props: {
+    minWidth: {
+      type: String,
+      default: () => '90px'
+    },
+    quickFilterCheckbox: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  data() {
+    return {
+      options: []
+    }
+  },
+  async created() {
+    await this.loadOptions()
+  },
+  methods: {
+    /**
+     * 从属性中加载options(如果传入的options是FastTableOption类型, 则可能涉及异步加载)
+     */
+    async loadOptions() {
+      const {options, valKey = 'value', labelKey = 'label'} = this.columnProp
+      if (util.isArray(options)) {
+        this.options = options
+      } else if (options instanceof FastTableOption) {
+        const query = new Query().setDistinct().setCols([valKey, labelKey])
+        this.options = await options._buildSelectOptions(query, valKey, labelKey)
+      }
+    },
+    showLabel(fatRow) {
+      const {row, editRow, status, config} = fatRow
+      const {props = {}} = config[this.prop]
+      const {labelKey = 'label', valKey = 'value'} = props
+      let val;
+      if (status === 'normal') {
+        val = row[this.prop];
+      } else {
+        val = editRow[this.prop];
+      }
+      return util.escapeLabel(val, this.options, valKey, labelKey)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/packages/components/table-column-switch/config.js

@@ -0,0 +1,55 @@
+import {merge, ternary} from "../../util/util";
+import Opt from "../../model/opt.js";
+
+const defaultQueryConfig = {
+    component: 'fast-select',
+    opt: Opt.EQ,
+    val: null, // 默认值
+    props: {
+        clearable: true,
+        options: [],
+    }
+}
+const defaultEditConfig = {
+    component: 'el-switch',
+    val: null,
+    props: {
+        clearable: true,
+        options: [],
+        class: 'fc-table-inline-edit-component',
+        editable: true,
+        inlinePrompt: true,
+        activeValue: true,
+        inactiveValue: false,
+        activeText: '是',
+        inactiveText: '否'
+    }
+}
+export default {
+    query: (config, type) => {
+        const {props: {defaultVal, ...validProps} = {}} = config
+        const {activeValue = true, inactiveValue = false, activeText = '是', inactiveText = '否'} = validProps
+        let val = defaultQueryConfig.val;
+        if (type === 'quick') {
+            val = ternary(defaultVal === inactiveValue || defaultVal === activeValue, defaultVal, val);
+        }
+        const options = [
+            {label: inactiveText, value: inactiveValue},
+            {label: activeText, value: activeValue}
+        ]
+        config.val = val;
+        config.props = {
+            ...validProps,
+            options: options
+        }
+        return merge(config, defaultQueryConfig, true, false)
+    },
+    edit: (config, type) => {
+        const {props: {defaultVal, ...validProps} = {}} = config
+        const {activeValue = true, inactiveValue = false} = validProps
+        config.val = ternary(defaultVal === inactiveValue || defaultVal === activeValue, defaultVal, inactiveValue); // 默认值合法校验
+        config.props = validProps;
+        return merge(config, defaultEditConfig, true, false);
+    }
+
+}

package/packages/components/table-column-switch/index.js

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