fast-crud-ui3 1.5.16 → 1.5.18-beta

package/packages/components/table-column-date-picker/config.js

@@ -0,0 +1,139 @@
+import {isUndefined, merge, ternary} from "../../util/util";
+import Cond from '../../model/cond.js'
+import Opt from '../../model/opt.js'
+
+const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD'
+const DEFAULT_DATETIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
+const defaultQueryConfig = {
+    component: 'el-date-picker',
+    opt: Opt.BTW,
+    val: [], // 默认值
+    props: {
+        type: `daterange`,
+        clearable: true,
+        valueFormat: DEFAULT_DATE_FORMAT,
+        // (易用性提升)
+        shortcuts: [{
+            text: '最近1h',
+            value: () => {
+                const end = new Date()
+                const start = new Date(end)
+                start.setTime(start.getTime() - 3600 * 1000)
+                return [start, end]
+            }
+        }, {
+            text: '最近1天',
+            value: () => {
+                const end = new Date()
+                const start = new Date(end)
+                start.setTime(start.getTime() - 3600 * 1000 * 24)
+                return [start, end]
+            }
+        }, {
+            text: '最近1周',
+            value: () => {
+                const end = new Date()
+                const start = new Date()
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+                return [start, end]
+            }
+        }, {
+            text: '最近1月',
+            value: () => {
+                const end = new Date()
+                const start = new Date()
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+                return [start, end]
+            }
+        }, {
+            text: '最近3月',
+            value: () => {
+                const end = new Date()
+                const start = new Date()
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+                return [start, end]
+            }
+        }, {
+            text: '最近1年',
+            value: () => {
+                const end = new Date()
+                const start = new Date(end)
+                start.setFullYear(end.getFullYear() - 1)
+                return [start, end]
+            }
+        }]
+    },
+    condMapFn: (cond) => {
+        const conds = []
+        const [start, end] = cond.val
+        if (start) {
+            conds.push(new Cond(cond.col, Opt.GE, start))
+        }
+        if (end) {
+            conds.push(new Cond(cond.col, Opt.LE, end))
+        }
+        return conds
+    }
+
+}
+const defaultEditConfig = {
+    component: 'el-date-picker',
+    opt: Opt.BTW,
+    val: null, // 默认值
+    props: {
+        type: "date",
+        clearable: true,
+        valueFormat: DEFAULT_DATE_FORMAT,
+        class: 'fc-table-inline-edit-component',
+        editable: true,
+        rules: []
+    }
+}
+
+export default {
+    query: (config, type) => {
+        let val = defaultQueryConfig.val;
+        const {props: {defaultVal, ...validProps} = {}} = config
+        const {type: dateType = 'date'} = validProps;
+        if (type === 'quick') {
+            val = ternary(isUndefined(defaultVal), val, defaultVal);
+        }
+        if (type === 'dynamic' || type === 'stored') {
+            validProps.teleported = false // 防止动筛二选时popover关闭
+        }
+        const {valueFormat} = validProps;
+        if (config.props.type === 'datetime') {
+            if (isUndefined(valueFormat)) {
+                validProps.valueFormat = DEFAULT_DATETIME_FORMAT;
+            }
+            // 限定时分秒的默认区间值(易用性提升)
+            validProps.defaultTime = [
+                new Date(0, 0, 0, 0, 0 ,0, 0),
+                new Date(0, 0, 0, 23, 59, 59, 999)]
+        }
+        config.val = val;
+        config.props = {
+            ...validProps,
+            type: `${dateType}range`
+        }
+        return merge(config, defaultQueryConfig, true, false)
+    },
+    edit: (config, type) => {
+        const {label, props: {defaultVal, ...validProps} = {}} = config;
+        const {rules = []} = validProps;
+        // 如果含有值不为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);
+        const {valueFormat} = validProps;
+        if (config.props.type === 'datetime' && isUndefined(valueFormat)) {
+            validProps.valueFormat = DEFAULT_DATETIME_FORMAT;
+        }
+        config.props = {
+            ...validProps,
+            rules: rules
+        }
+        return merge(config, defaultEditConfig, true, false)
+    }
+}

package/packages/components/table-column-date-picker/index.js

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

package/packages/components/table-column-date-picker/src/table-column-date-picker.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-date-picker 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})"/>
+        </slot>
+      </slot>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+import tableColumn from "../../../mixins/table-column"
+
+export default {
+  name: "FastTableColumnDatePicker",
+  mixins: [tableColumn],
+  props: {
+    minWidth: {
+      type: String,
+      default: () => '150px'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,83 @@
+import {
+    addStartWith,
+    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.NE,
+                valExtract: (cond) => cond.val.substring(2)
+            },
+            '^=': {
+                opt: Opt.EQ,
+                valExtract: (cond) => cond.val.substring(1)
+            },
+            '^~': {
+                opt: Opt.NLIKE,
+                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: 'fast-upload',
+    val: null,
+    props: {
+        action: '/',
+        'list-type': 'text',
+        class: 'fc-table-inline-edit-component',
+        multiple: false, // 默认单选文件
+        editable: true
+    }
+}
+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, tableOption) => {
+        const {label, props = {}} = config;
+        const {defaultVal, rules = [], ...validProps} = 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
+        }
+        const finalConfig = merge(config, defaultEditConfig, true, false);
+        finalConfig.props.action = addStartWith(tableOption.uploadUrl, '/');
+        finalConfig.props.listType = 'text'; // 固定避免被自定义覆盖
+        return finalConfig;
+    }
+}

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

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

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

@@ -0,0 +1,79 @@
+<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">
+        <template v-if="!canEdit(row, column, $index)">
+          <slot name="normal" v-bind:row="row" v-bind:column="column" v-bind:$index="$index">
+            <fast-upload v-model="row[row.status === 'normal' ? 'row' : 'editRow'][prop]"
+                         v-bind="row['config'][prop]['props']"
+                         list-type="text"
+                         :disabled="true"
+                         class="fc-fast-upload-file"></fast-upload>
+          </slot>
+        </template>
+        <slot name="edit" v-bind:row="row" v-bind:column="column" v-bind:$index="$index" v-else>
+          <fast-upload v-model="row['editRow'][prop]"
+                       :data="{row: JSON.stringify(row['editRow']), col: prop}"
+                       v-bind="row['config'][prop]['props']"
+                       :ref="prop + $index"
+                       :on-preview="(file) => onPreview(file, {row, column, $index})"
+                       :before-remove="(file, files) => handleBeforeRemove(file, files, {row, column, $index})"
+                       :on-remove="(file, files) => isFunction(onRemove) ? onRemove(file, files, {row, column, $index}) : null"
+                       :response-handler="(response, file, files) => isFunction(responseHandler) ? responseHandler(response, file, files, {row, column, $index}) : response"
+                       :on-success="(response, file, files) => isFunction(onSuccess) ? onSuccess(response, file, files, {row, column, $index}) : null"
+                       :on-progress="(event ,file, files) => isFunction(onProgress) ? onProgress(event, file, files, {row, column, $index}) : null"
+                       :on-change="(file, files) => isFunction(onChange) ? onChange(file, files, {row, column, $index}) : null"
+                       :on-exceed="(file, files) => isFunction(onExceed) ? onExceed(file, files, {row, column, $index}) : null"
+                       class="fc-fast-upload-file"/>
+        </slot>
+      </slot>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+import FastUpload from "../../upload/src/fast-upload.vue"
+import tableColumn from "../../../mixins/table-column"
+import UploadMixin from "../../../mixins/upload.js"
+import {isFunction} from "../../../util/util.js"
+
+export default {
+  name: "FastTableColumnFile",
+  components: {FastUpload},
+  mixins: [tableColumn, UploadMixin],
+  props: {
+    minWidth: {
+      type: String,
+      default: () => '300px'
+    },
+  },
+  methods: {
+    isFunction,
+    handleBeforeRemove(file, files, scope) {
+      return isFunction(this.beforeRemove) ? this.beforeRemove(file, files, scope) : Promise.resolve(true) // Promise在模版中不识别?
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.fc-fast-upload-file {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

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

@@ -0,0 +1,83 @@
+import {
+    addStartWith,
+    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
+    },
+    condMapFn: (cond) => {
+        const operators = {
+            '^!=': {
+                opt: Opt.NE,
+                valExtract: (cond) => cond.val.substring(2)
+            },
+            '^=': {
+                opt: Opt.EQ,
+                valExtract: (cond) => cond.val.substring(1)
+            },
+            '^~': {
+                opt: Opt.NLIKE,
+                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: 'fast-upload',
+    val: null,
+    props: {
+        action: '/',
+        listType: 'picture-card',
+        accept: 'image/*',
+        class: 'fc-table-inline-edit-component',
+        multiple: false, // 默认单选文件
+        editable: true
+    }
+}
+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, tableOption) => {
+        const {label, props = {}} = config;
+        const {defaultVal, rules = [], ...validProps} = 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
+        }
+        const finalConfig = merge(config, defaultEditConfig, true, false);
+        finalConfig.props.action = addStartWith(tableOption.uploadUrl, '/');
+        finalConfig.props.listType = 'picture-card'; // 固定避免被自定义覆盖
+        return finalConfig;
+    }
+}

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

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

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

@@ -0,0 +1,82 @@
+<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">
+        <template v-if="!canEdit(row, column, $index)">
+          <slot name="normal" v-bind:row="row" v-bind:column="column" v-bind:$index="$index">
+            <fast-upload v-model="row[row.status === 'normal' ? 'row' : 'editRow'][prop]"
+                         v-bind="row['config'][prop]['props']"
+                         list-type="picture-card"
+                         :disabled="true"></fast-upload>
+          </slot>
+        </template>
+        <slot name="edit" v-bind:row="row" v-bind:column="column" v-bind:$index="$index" v-else>
+          <fast-upload v-model="row['editRow'][prop]"
+                       v-bind="row['config'][prop]['props']"
+                       :data="{row: JSON.stringify(row['editRow']), col: prop}"
+                       :ref="prop + $index"
+                       :on-preview="(file) => onPreview(file, {row, column, $index})"
+                       :before-remove="(file, files) => handleBeforeRemove(file, files, {row, column, $index})"
+                       :on-remove="(file, files) => isFunction(onRemove) ? onRemove(file, files, {row, column, $index}) : null"
+                       :response-handler="(response, file, files) => isFunction(responseHandler) ? responseHandler(response, file, files, {row, column, $index}) : response"
+                       :on-success="(response, file, files) => isFunction(onSuccess) ? onSuccess(response, file, files, {row, column, $index}) : null"
+                       :on-progress="(event ,file, files) => isFunction(onProgress) ? onProgress(event, file, files, {row, column, $index}) : null"
+                       :on-change="(file, files) => isFunction(onChange) ? onChange(file, files, {row, column, $index}) : null"
+                       :on-exceed="(file, files) => isFunction(onExceed) ? onExceed(file, files, {row, column, $index}) : null"
+          />
+        </slot>
+      </slot>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+import FastUpload from "../../upload/src/fast-upload.vue";
+import tableColumn from "../../../mixins/table-column";
+import UploadMixin from "../../../mixins/upload.js";
+import {isFunction} from "../../../util/util.js";
+
+export default {
+  name: "FastTableColumnImg",
+  components: {FastUpload},
+  mixins: [tableColumn, UploadMixin],
+  props: {
+    minWidth: {
+      type: String,
+      default: () => '100px'
+    },
+  },
+  methods: {
+    isFunction,
+    handleBeforeRemove(file, files, scope) {
+      return isFunction(this.beforeRemove) ? this.beforeRemove(file, files, scope) : Promise.resolve(true) // Promise在模版中不识别?
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.img-list {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 3px 0;
+}
+
+img {
+  object-fit: cover;
+}
+</style>

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

@@ -0,0 +1,77 @@
+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.NE,
+                valExtract: (cond) => cond.val.substring(2)
+            },
+            '^=': {
+                opt: Opt.EQ,
+                valExtract: (cond) => cond.val.substring(1)
+            },
+            '^~': {
+                opt: Opt.NLIKE,
+                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',
+    val: null,
+    props: {
+        clearable: true,
+        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({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-input/index.js

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