fast-crud-ui3 1.5.16 → 1.5.18-beta

package/packages/components/table-column-switch/src/table-column-switch.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">
+        <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-switch v-model="row['editRow'][prop]"
+                     v-bind="row['config'][prop]['props']"
+                     :ref="prop + $index"
+                     @change="(val) => handleChange(val, {row, column, $index})"></el-switch>
+        </slot>
+      </slot>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+import tableColumn from "../../../mixins/table-column"
+
+export default {
+  name: "FastTableColumnSwitch",
+  mixins: [tableColumn],
+  props: {
+    minWidth: {
+      type: String,
+      default: () => '100px'
+    }
+  },
+  methods: {
+    showLabel(fatRow) {
+      const {row, editRow, status, config} = fatRow
+      const {
+        props: {
+          activeValue = true,
+          activeText = '是',
+          inactiveValue = false,
+          inactiveText = '否'
+        } = {}
+      } = config[this.prop]
+      const options = [
+        {label: inactiveText, value: inactiveValue},
+        {label: activeText, value: activeValue}
+      ]
+      let val;
+      if (status === 'normal') {
+        val = row[this.prop];
+      } else {
+        val = editRow[this.prop];
+      }
+      if (options) {
+        const option = options.find(item => item.value === val);
+        if (option) {
+          return option.label
+        }
+      }
+      return val;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/packages/components/table-column-textarea/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: {
+        type: 'textarea',
+        rows: 1,
+        class: 'fc-table-inline-edit-component',
+        editable: true,
+        rules: [],
+        placeholder: '请输入..'
+    }
+}
+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-textarea/index.js

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

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

@@ -0,0 +1,56 @@
+<template>
+  <el-table-column class-name="fc-table-column"
+                   :prop="prop"
+                   :label="label"
+                   :show-overflow-tooltip="showOverflowTooltip"
+                   :min-width="minWidth"
+                   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-cell-content :value="showLabel(row)" :fat-row="row" :show-length="showLength" :linkTo="link"/>
+          </slot>
+        </template>
+        <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: "FastTableColumnTextarea",
+  mixins: [tableColumn],
+  props: {
+    minWidth: {
+      type: String,
+      default: () => '200px'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,62 @@
+import {isUndefined, merge, ternary} from "../../util/util";
+import Cond from '../../model/cond.js'
+import Opt from '../../model/opt.js'
+
+const defaultQueryConfig = {
+    component: 'el-time-picker',
+    opt: Opt.BTW,
+    val: [],
+    props: {
+        clearable: true,
+        'is-range': true,
+        'value-format': 'HH:mm:ss'
+    },
+    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-time-picker',
+    val: null,
+    props: {
+        clearable: true,
+        'value-format': 'HH:mm:ss',
+        class: 'fc-table-inline-edit-component',
+        editable: true,
+        rules: []
+    }
+}
+export default {
+    query: (config, type) => {
+        let val = defaultQueryConfig.val;
+        const {props: {defaultVal, isRange, ...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: {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);
+        config.props = {
+            ...validProps,
+            rules: rules
+        }
+        return merge(config, defaultEditConfig, true, false)
+    }
+}

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

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

package/packages/components/table-column-time-picker/src/table-column-time-picker.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-table-column class-name="fc-table-column"
+                   :prop="prop"
+                   :label="label"
+                   :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-time-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})"></el-time-picker>
+        </slot>
+      </slot>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+import tableColumn from "../../../mixins/table-column"
+
+export default {
+  name: "FastTableColumnTimePicker",
+  mixins: [tableColumn],
+  props: {
+    minWidth: {
+      type: String,
+      default: () => '120px'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/packages/components/upload/index.js

@@ -0,0 +1,7 @@
+import FastUpload from "./src/fast-upload.vue";
+
+FastUpload.install= (app) => {
+    app.component(FastUpload.name, FastUpload)
+}
+
+export default FastUpload;

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

@@ -0,0 +1,272 @@
+<template>
+  <el-upload :file-list="files"
+             ref="uploadRef"
+             v-bind="$attrs"
+             :action="actionValue"
+             :limit="limit"
+             :list-type="listType"
+             :show-file-list="true"
+             :on-preview="onPreview"
+             :on-remove="onRemove"
+             :on-success="handleSuccess"
+             :on-progress="onProgress"
+             :on-change="onChange"
+             :on-exceed="onExceed"
+             :before-remove="beforeRemove"
+             class="fc-fast-upload"
+             :class="{'fc-fast-upload__hidden': hideUploadButton, 'fc-fast-upload__disable': disabled}">
+    <template #default>
+      <el-icon>
+        <Plus/>
+      </el-icon>
+    </template>
+    <template #file="{file}">
+      <!-- 图片 -->
+      <template v-if="isPicture">
+        <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
+        <span class="el-upload-list__item-actions">
+          <span class="el-upload-list__item-preview" @click="preview(file)">
+            <el-icon>
+              <ZoomIn/>
+            </el-icon>
+          </span>
+          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+            <el-icon><Delete/></el-icon>
+          </span>
+        </span>
+      </template>
+      <!-- 普通文件 -->
+      <div style="word-break: break-all; display: inline-flex;" v-else>
+        <el-icon v-if="disabled">
+          <Paperclip/>
+        </el-icon>
+        <el-icon @click="handleRemove(file)" style="cursor: pointer; padding: 2px; color: #f56c6c;" v-else>
+          <Delete/>
+        </el-icon>
+        <el-link :href="file.url" style="margin-left: 3px;">{{ file.name }}</el-link>
+      </div>
+    </template>
+  </el-upload>
+</template>
+
+<script>
+import {h, defineComponent} from "vue"
+import {
+  isArray,
+  isEmpty,
+  isFunction,
+  getNameFromUrl,
+  getFirstUrlFromFileItems,
+  defaultIfBlank,
+  cutPrefix,
+  isString,
+  isUrl
+} from "../../../util/util"
+import UploadMixin from "../../../mixins/upload.js"
+import FastTableOption from "../../../model/fastTableOption.js"
+import {openDialog} from "../../../util/dialog"
+import {Delete, Paperclip, Plus, ZoomIn} from "@element-plus/icons-vue"
+
+export default {
+  name: "fast-upload",
+  components: {Paperclip, Delete, ZoomIn, Plus},
+  mixins: [UploadMixin],
+  emits: ['update:modelValue'],
+  props: {
+    /**
+     * 是否支持多文件
+     */
+    multiple: {
+      type: Boolean,
+      default: () => false
+    },
+    // multiple为true则应当是单个url地址, 否则为url数组
+    modelValue: {
+      type: [String, Array],
+      default: () => null
+    },
+    action: {
+      type: String,
+      default: () => '/'
+    },
+    listType: {
+      type: String,
+      default: () => 'text'
+    },
+    limit: {
+      type: Number,
+      default: () => 1
+    },
+    disabled: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  computed: {
+    files() {
+      const value = this.modelValue
+      let files = []
+      if (this.multiple) {
+        if (isArray(value)) {
+          files = value
+        } else {
+          if (!isEmpty(value)) {
+            files.push({name: getNameFromUrl(value), url: value})
+          }
+        }
+      } else {
+        const url = isArray(value) ? getFirstUrlFromFileItems(value) : value;
+        if (!isEmpty(url)) {
+          files.push({name: getNameFromUrl(value), url: url})
+        }
+      }
+      // 处理代理前缀
+      return files.map(f => {
+        return {name: f.name, url: this.disposeUrl(f.url, true)}
+      })
+    },
+    actionValue() {
+      return this.apiPrefix + this.action;
+    },
+    isPicture() {
+      return this.listType === 'picture-card';
+    },
+    hideUploadButton() {
+      return this.disabled || (!isEmpty(this.files) && this.files.length >= this.limit);
+    }
+  },
+  data() {
+    return {
+      apiPrefix: defaultIfBlank(FastTableOption.$http.defaults.baseURL, '')
+    }
+  },
+  methods: {
+    /**
+     * emit值
+     * @param fileList
+     */
+    emitValue(fileList) {
+      if (isEmpty(fileList)) {
+        this.$emit('update:modelValue', null)
+        return
+      }
+      const {multiple} = this
+      let val
+      if (multiple) {
+        val = fileList.map(f => {
+          return {
+            name: f.name,
+            url: this.disposeUrl(f.url, false)
+          }
+        })
+      } else {
+        val = this.disposeUrl(fileList[0].url, false)
+      }
+      this.$emit('update:modelValue', val)
+    },
+    handleSuccess(response, file, fileList) {
+      const responseHandler = isFunction(this.responseHandler) ? this.responseHandler : (response) => response
+      const url = responseHandler(response, file, fileList);
+      this.files.push({
+        name: file.name,
+        url: url
+      })
+      this.emitValue(this.files)
+      this.onSuccess(response, file, fileList)
+    },
+    /**
+     * 自定义移除，实现外部透传的beforeRemove和onRemove
+     * @param file
+     */
+    handleRemove(file) {
+      console.log(this.beforeRemove)
+      const beforeRemove = isFunction(this.beforeRemove) ? this.beforeRemove : () => Promise.resolve(true)
+      beforeRemove(file, this.files).then(flag => {
+        if (flag) {
+          const index = this.files.findIndex(f => f.url === file.url);
+          this.files.splice(index, 1);
+          this.emitValue(this.files)
+          this.onRemove(file, this.files)
+        }
+      })
+    },
+    /**
+     * 预览图片
+     * @param file
+     * @return {VNode}
+     */
+    preview(file) {
+      const imgPreviewComponent = defineComponent({
+        render() {
+          return h('img', {
+            src: file.url,
+            width: '100%'
+          })
+        }
+      })
+      openDialog({
+        component: imgPreviewComponent
+      })
+    },
+    /**
+     * 处理url
+     * @param url 待处理的url
+     * @param append 添加前缀? 若true则追加this.apiPrefix前缀; false则移除前面可能得前缀
+     * @return {*}
+     */
+    disposeUrl(url, append) {
+      if (!isString(url) || isEmpty(url) || isUrl(url)) {
+        return url
+      }
+      return append ? this.apiPrefix + url : cutPrefix(url, this.apiPrefix)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.fc-fast-upload {
+  :deep(.el-upload-list--picture-card) {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 48px);
+    grid-gap: 2px;
+  }
+
+  :deep(.el-upload-list--text .el-upload-list__item) {
+    margin: 3px 0 !important;
+  }
+
+  .el-upload-list__item-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    & > * {
+      margin: 0 !important;
+
+      & i {
+        font-size: 14px;
+      }
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+
+  img {
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.fc-fast-upload.fc-fast-upload__hidden {
+  :deep(.el-upload) {
+    display: none;
+  }
+}
+
+.fc-fast-upload.fc-fast-upload__disable {
+  border: none !important;
+}
+</style>

package/packages/global.d.ts

@@ -0,0 +1,42 @@
+// 引入你的组件实现（dts插件会为它们生成类型）
+// 注意：这里要根据实际生成后的类型路径来写，或者直接引用源码
+import FastTable from './components/table'
+import FastSelect from './components/select'
+import FastCheckboxGroup from './components/checkbox-group'
+import FastObjectPicker from './components/object-picker'
+import FastTableColumn from './components/table-column'
+import FastTableColumnDatePicker from './components/table-column-date-picker'
+import FastTableColumnFile from './components/table-column-file'
+import FastTableColumnImg from './components/table-column-img'
+import FastTableColumnInput from './components/table-column-input'
+import FastTableColumnNumber from './components/table-column-number'
+import FastTableColumnObject from './components/table-column-object'
+import FastTableColumnSelect from './components/table-column-select'
+import FastTableColumnSwitch from './components/table-column-switch'
+import FastTableColumnTextarea from './components/table-column-textarea'
+import FastTableColumnTimePicker from './components/table-column-time-picker'
+import FastUpload from './components/upload'
+// ... 引入其他所有组件
+
+declare module '@vue/runtime-core' {
+    export interface GlobalComponents {
+        FastTable: typeof FastTable
+        FastSelect: typeof FastSelect
+        FastCheckboxGroup: typeof FastCheckboxGroup
+        FastObjectPicker: typeof FastObjectPicker
+        FastTableColumn: typeof FastTableColumn
+        FastTableColumnDatePicker: typeof FastTableColumnDatePicker
+        FastTableColumnFile: typeof FastTableColumnFile
+        FastTableColumnImg: typeof FastTableColumnImg
+        FastTableColumnInput: typeof FastTableColumnInput
+        FastTableColumnNumber: typeof FastTableColumnNumber
+        FastTableColumnObject: typeof FastTableColumnObject
+        FastTableColumnSelect: typeof FastTableColumnSelect
+        FastTableColumnSwitch: typeof FastTableColumnSwitch
+        FastTableColumnTextarea: typeof FastTableColumnTextarea
+        FastTableColumnTimePicker: typeof FastTableColumnTimePicker
+        FastUpload: typeof FastUpload
+    }
+}
+
+export {}