axwen-test31 2.0.0

package/src/views/market/market-event-edit/side/event-form.vue

@@ -0,0 +1,837 @@
+<script>
+import { formatFullDateTime, formatDate } from '@/utils'
+const getPrefix = (tag, lib) => {
+    let elementMap = {
+        'form': 'el-form',
+        'form-item': 'el-form-item',
+        'input': 'el-input',
+        'select': 'el-select',
+        'group-select': 'yt-group-select',
+        'option': 'el-option',
+        'checkbox': 'el-checkbox',
+        'checkbox-group': 'el-checkbox-group',
+        'date-picker': 'el-date-picker',
+        'time-picker': 'el-time-picker',
+        'radio': 'el-radio',
+        'radio-button': 'el-radio-button',
+        'radio-group': 'el-radio-group',
+        'switch': 'yt-switch',
+        'slider': 'el-slider',
+        'button': 'el-button',
+        'row': 'el-row',
+        'col': 'el-col',
+        'input-number': 'yt-input-number',
+        'input-number-str': 'yt-input-number-str',
+        'cascader': 'el-cascader',
+        'community': 'yt-community'
+    }
+
+    return elementMap[tag]
+}
+
+const setDefaultType = (list, isText = false) => {
+    list.forEach(item => {
+        if (isText || item.isText || item.type === 'text') {
+            if (['checkbox-group', 'radio', 'community', 'checkbox'].includes(item.type)) {
+                item.disabled = true
+            } else if (!item.renderContent) {
+                item._noDefaultRenderContent = true
+                item.renderContent = (h, item, form) => {
+                    let content = getTextNode(h, item, form)
+                    return <p class="form-text">{ content }</p>
+                }
+            }
+        } else {
+            if (item._noDefaultRenderContent) {
+                delete item.renderContent
+            }
+            if (item.type === 'password' || item.type === 'textarea') {
+                item.props = {
+                    ...item.props,
+                    type: item.type
+                }
+                if (item.type === 'textarea') {
+                    item.props['show-word-limit'] = true
+                }
+                item.type = 'input'
+            }
+        }
+    })
+}
+
+const getTextNode = (h, item, form) => {
+    let text = '-'
+    if (item.type) {
+        let value = form[item.key]
+        let target
+        switch (item.type) {
+            case 'input-number':
+            case 'input-number-str':
+                text = (value || 0) + item.props['unit']
+                break
+            case 'date':
+                text = value ? formatDate(value) : '-'
+                break
+            case 'datetime':
+                text = value ? formatFullDateTime(value) : '-'
+                break
+            case 'daterange':
+                if (value[0]) {
+                    text = (formatDate(value[0]) || '') + ' ～ ' + (formatDate(value[1]) || '')
+                }
+                break
+            case 'datetimerange':
+                if (value[0]) {
+                    text = (formatFullDateTime(value[0]) || '') + ' ～ ' + (formatFullDateTime(value[1]) || '')
+                }
+                break
+            case 'checkbox-group':
+                return form
+            case 'radio-group':
+            case 'select':
+                target = item.options.find(option => option.value === value)
+                text = target ? target.label : '-'
+                break
+            case 'cascader':
+            case 'group-select':
+                let options = []
+                item.options.forEach(group => {
+                    group.children.forEach(option => {
+                        options.push(option)
+                    })
+                })
+                target = options.find(option => option.value === value)
+                text = target ? target.label : '-'
+                break
+            case 'switch':
+                text = value ? '是' : '否'
+                break
+            default:
+                text = value || '-'
+                break
+        }
+    } else {
+        if (item.options) {
+            let target = item.options.find(option => option.value === form[item.key])
+            text = target ? target.label : '-'
+        } else {
+            text = form[item.key] || '-'
+        }
+    }
+    return text
+}
+
+const sortFields = (fields) => {
+    if (!fields.some(item => item.order)) {
+        return fields
+    }
+    return fields.sort((a, b) => {
+        return (a.order || 0) - (b.order || 0)
+    })
+}
+
+const fillPlaceholder = (list, hasPrefix = true) => {
+    list.forEach(item => {
+        let placeholder = (item.props && item.props.placeholder) ||
+            (hasPrefix ? `请${item.type === 'input' ? '输入' : '选择'}` : '') + (item.title || '')
+        let props = item.props || {}
+        if (item.type === 'datetimerange' || item.type === 'daterange') {
+            props['start-placeholder'] = '开始日期'
+            props['end-placeholder'] = '结束日期'
+        } else {
+            props.placeholder = placeholder
+        }
+        item.props = props
+    })
+}
+
+const validateDate = (rule, value, callback) => {
+    if (!value[0] || !value[1]) {
+        callback(new Error(rule.message))
+    } else {
+        callback()
+    }
+}
+
+export default {
+    name: 'event-form',
+    props: {
+        // formItem 项
+        fields: {
+            type: Array,
+            default: () => []
+        },
+        // 是否开启 input 标签默认
+        enterSubmit: {
+            type: Boolean,
+            default: false
+        },
+        // 默认 ui 库
+        lib: {
+            type: String,
+            default: 'element'
+        },
+        // 默认内容宽度
+        'content-width': {
+            type: [Number, String],
+            default: '100%'
+        },
+        // 原生 form 标签上的 props
+        options: {
+            type: Object
+        },
+        // 开启全局 clearable
+        clearable: {
+            type: Boolean,
+            default: true
+        },
+        // 文本框默认字符个数
+        maxlength: {
+            type: [Number, String],
+            default: 20
+        },
+        // 多行文本框默认字符个数
+        textareaMaxlength: {
+            type: Number,
+            default: 256
+        },
+        // 是否全局 disabled
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        autofillPlaceholder: {
+            type: Boolean,
+            default: true
+        },
+        hasPrefix: {
+            type: Boolean,
+            default: false
+        },
+        isText: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        return {
+            form: this.initForm()
+        }
+    },
+    render (h) {
+        return h(getPrefix('form', this.lib), {
+            props: {
+                model: this.form,
+                rules: this.rules,
+                ...this.options
+            },
+            class: 'event-form',
+            ref: 'form',
+            nativeOn: {
+                submit (e) {
+                    e.preventDefault()
+                    e.stopPropagation()
+                }
+            }
+        }, [
+            this.$slots.prepend,
+            this.renderFormList(h),
+            this.$slots.default
+        ])
+    },
+    watch: {
+        isText (value) {
+            this.$nextTick(() => {
+                value && this.clear()
+            })
+        }
+    },
+    computed: {
+        rules () {
+            let rules = {}
+            this.formList.forEach(item => {
+                if (item.rule !== undefined) {
+                    rules[item.key] = item.rule
+                } else if (item.isRequired) {
+                    let message = `请${item.type === 'input' ? '输入' : '选择'}` + (item.title || '')
+                    let rule = item.rule || { required: true, message, trigger: item.type === 'input' ? 'blur' : 'change' }
+                    if ((item.type === 'daterange' || item.type === 'datetimerange') && !item.rule) {
+                        rule = { required: true, message, trigger: item.type === 'input' ? 'blur' : 'change', validator: validateDate }
+                    }
+                    item.rule = rule
+                    rules[item.key] = rule
+                    delete item.isRequired
+                }
+            })
+            return rules
+        },
+        formList () {
+            let { fields, autofillPlaceholder, hasPrefix, isText } = this
+            let list = fields
+            setDefaultType(list, isText)
+            sortFields(list)
+            autofillPlaceholder && fillPlaceholder(list, hasPrefix)
+            return list
+        }
+    },
+    methods: {
+        // 默认值
+        initForm () {
+            let form = {}
+            let map = {
+                'input': '',
+                'select': null,
+                'group-select': null,
+                'checkbox': false,
+                'checkbox-group': [],
+                'date': '',
+                'datetime': '',
+                'daterange': [],
+                'datetimerange': [],
+                'time': '',
+                'radio': false,
+                'radio-group': '',
+                'slider': 0,
+                'textarea': '',
+                'password': '',
+                'switch': false,
+                'input-number': 0,
+                'input-number-str': '',
+                'cascader': null,
+                'community': ''
+            }
+            this.fields.forEach(item => {
+                let defaultValue = ''
+                defaultValue = item.defaultValue !== undefined ? item.defaultValue : map[item.type]
+                if (Array.isArray(defaultValue)) {
+                    defaultValue = [...defaultValue]
+                }
+                if (item.key) {
+                    form[item.key] = defaultValue
+                }
+            })
+            return form
+        },
+        getHypeScript () {
+            return this.$parent.$createElement
+        },
+        renderFormList (h) {
+            let list = []
+            list = this.getFormList(h)
+            return list
+        },
+        getFormList (h) {
+            return this.formList.map(item => {
+                return this.getFormItem(h, item, this.getContent(h, item))
+            })
+        },
+        // 当 grid 为数字时
+        getFormListByNumber (h) {
+            let list = []
+            // 过滤 grid
+            let grid = ~~Math.abs(this.grid)
+            if (grid < 1) grid = 1
+
+            for (let i = 0; i < this.formList.length; i += grid) {
+                let childrenList = []
+                // 获取当前分成几列 grid 为 number 时
+                for (let j = 0; j < grid && i + j < this.formList.length; j++) {
+                    let children = this.formList[i + j]
+                    if (!children) break
+                    let childrenItem = this.getFormItem(h, children, this.getContent(h, children))
+                    let childrenParts = h(getPrefix('col', this.lib), {
+                        props: {
+                            span: 24 / grid
+                        }
+                    }, [
+                        childrenItem
+                    ])
+                    childrenList.push(childrenParts)
+                }
+                let row = this.getRow(h, childrenList)
+                list.push(row)
+            }
+            return list
+        },
+        getRow (h, childrenList) {
+            return h(getPrefix('row', this.lib), {
+                props: {
+                    gutter: this.gutter
+                }
+            }, childrenList)
+        },
+        getContent (h, item) {
+            let content
+            if (typeof item.renderContent === 'function') {
+                content = item.renderContent(this.getHypeScript(), item, this.form)
+            } else {
+                switch (item.type) {
+                    case 'input':
+                        content = this.renderInput(h, item)
+                        break
+                    case 'select':
+                        content = this.renderSelect(h, item)
+                        break
+                    case 'group-select':
+                        content = this.renderGroupSelect(h, item)
+                        break
+                    case 'checkbox':
+                        content = this.renderCheckbox(h, item)
+                        break
+                    case 'checkbox-group':
+                        content = this.renderCheckboxGroup(h, item)
+                        break
+                    case 'date':
+                        content = this.renderDatePicker(h, item)
+                        break
+                    case 'datetime':
+                        content = this.renderDatePicker(h, item)
+                        break
+                    case 'daterange':
+                        content = this.renderDateRange(h, item)
+                        break
+                    case 'datetimerange':
+                        content = this.renderDateRange(h, item)
+                        break
+                    case 'time':
+                        content = this.renderTimePicker(h, item)
+                        break
+                    case 'radio':
+                        content = this.renderRadio(h, item)
+                        break
+                    case 'radio-group':
+                        content = this.renderRadioGroup(h, item)
+                        break
+                    case 'switch':
+                        content = this.renderSwitch(h, item)
+                        break
+                    case 'slider':
+                        content = this.renderSlider(h, item)
+                        break
+                    case 'input-number':
+                        content = this.renderInputNumber(h, item)
+                        break
+                    case 'input-number-str':
+                        content = this.renderInputNumberStr(h, item)
+                        break
+                    case 'cascader':
+                        content = this.renderCascader(h, item)
+                        break
+                    case 'community':
+                        content = this.renderCommunity(h, item)
+                        break
+                    default:
+                        break
+                }
+            }
+            return content
+        },
+        getFormItem (h, item, content) {
+            if (item.isShow === false) return ''
+            else if (typeof item.isShow === 'function') {
+                if (item.isShow(this.form, item) === false) {
+                    return ''
+                }
+            }
+            if (typeof item.render === 'function') {
+                return item.render(this.getHypeScript(), item, this.form)
+            } else if (item.type || item.renderContent) {
+                let settings = {
+                    props: {
+                        prop: item.key
+                    }
+                }
+                return h(getPrefix('form-item', this.lib), Object.assign(settings, item.settings), [
+                    this.renderTitle(h, item, this.form),
+                    content
+                ])
+            }
+        },
+        // 渲染 title
+        renderTitle (h, item) {
+            return typeof item.renderTitle === 'function'
+                ? <span slot="label">{item.renderTitle(h, item, this.form)}</span>
+                : <span slot="label">{item.title}</span>
+        },
+        // 渲染 input
+        renderInput (h, item) {
+            let props = item.props || {}
+            let attrs = item.attrs || {}
+            // 让 element-ui 在 props 里也可以设置 placeholder
+            if (props.placeholder) {
+                attrs.placeholder = props.placeholder
+            }
+
+            // 让 element-ui 在 props 里也可以设置 maxlength
+            if (props.type !== 'textarea') {
+                attrs.maxlength = +props.maxlength || +this.maxlength
+            } else {
+                // textarea 长度
+                attrs.maxlength = +props.maxlength || +this.textareaMaxlength
+            }
+
+            item.attrs = attrs
+
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('input', this.lib),
+                props: {
+                    clearable: this.clearable,
+                    ...props
+                },
+                nativeOn: {
+                    keydown: (e) => {
+                        if (e.keyCode === 13 && this.enterSubmit && props.type !== 'textarea') {
+                            this.submit()
+                        }
+                    }
+                }
+            }
+            return this.generateTag(tag)
+        },
+        // 渲染 select
+        renderSelect (h, item) {
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('select', this.lib),
+                props: {
+                    clearable: this.clearable,
+                    ...(item.props || {})
+                },
+                children: item.options.map(option => {
+                    let disabled = false
+                    if (typeof option.disabled === 'function') {
+                        disabled = option.disabled(this.form)
+                    } else {
+                        disabled = option.disabled || false
+                    }
+                    return h(getPrefix('option', this.lib), {
+                        props: {
+                            label: option.label,
+                            value: option.value,
+                            disabled
+                        }
+                    }, [
+                        typeof item.renderOption === 'function'
+                            ? item.renderOption(h, option, item)
+                            : item.text
+                    ])
+                })
+            }
+            return this.generateTag(tag)
+        },
+        // 渲染 group select
+        renderGroupSelect (h, item) {
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('group-select', this.lib),
+                props: {
+                    clearable: this.clearable,
+                    type: item.type,
+                    options: item.options,
+                    ...(item.props || {})
+                }
+            }
+            return this.generateTag(tag)
+        },
+        // 渲染 单个checkbox
+        renderCheckbox (h, item) {
+            let props = item.props || {}
+            if (item.border) {
+                props.border = true
+            }
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('checkbox', this.lib),
+                props,
+                children: item.text
+            }
+            return this.generateTag(tag)
+        },
+        // 渲染 checkbox group
+        renderCheckboxGroup (h, item) {
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('checkbox-group', this.lib),
+                props: item.props || {},
+                children: item.options.map(option => {
+                    return h(getPrefix('checkbox', this.lib), {
+                        props: {
+                            border: item.border,
+                            label: option.value
+                        }
+                    }, option.label)
+                })
+            }
+            return this.generateTag(tag)
+        },
+        // 渲染 datepicker
+        renderDatePicker (h, item) {
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('date-picker', this.lib),
+                props: {
+                    clearable: this.clearable,
+                    type: item.type,
+                    ...(item.props || {})
+                }
+            }
+            return this.generateTag(tag)
+        },
+        // 渲染范围的 daterange
+        renderDateRange (h, item) {
+            // 处理 datetimerange 可能宽度不够的问题
+            if (item.type === 'datetimerange') {
+                item.width = item.width || 360
+            }
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('date-picker', this.lib),
+                props: {
+                    clearable: this.clearable,
+                    type: item.type,
+                    ...(item.props || {})
+                }
+            }
+            return this.generateTag(tag)
+        },
+        renderTimePicker (h, item) {
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('time-picker', this.lib),
+                props: {
+                    clearable: this.clearable,
+                    type: item.type,
+                    ...(item.props || {})
+                }
+            }
+            return this.generateTag(tag)
+        },
+        // 渲染 radio
+        renderRadio (h, item) {
+            let props = item.props || {}
+            if (item.border) {
+                props.border = true
+            }
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('radio', this.lib),
+                props,
+                children: item.text
+            }
+            return this.generateTag(tag)
+        },
+        // 渲染 radio group
+        renderRadioGroup (h, item) {
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('radio-group', this.lib),
+                props: item.props || {},
+                children: item.options.map(option => {
+                    return h(item.button ? getPrefix('radio-button', this.lib) : getPrefix('radio', this.lib), {
+                        props: {
+                            border: item.border,
+                            label: option.value
+                        }
+                    }, option.text || option.label)
+                })
+            }
+            return this.generateTag(tag)
+        },
+        // 渲染 switch
+        renderSwitch (h, item) {
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('switch', this.lib),
+                props: item.props || {}
+            }
+            return this.generateTag(tag)
+        },
+        // 渲染 slider
+        renderSlider (h, item) {
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('slider', this.lib),
+                props: item.props || {}
+            }
+            return this.generateTag(tag)
+        },
+        // 渲染 input number
+        renderInputNumber (h, item) {
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('input-number', this.lib),
+                props: item.props || {}
+            }
+            return this.generateTag(tag)
+        },
+        // 渲染 input number
+        renderInputNumberStr (h, item) {
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('input-number-str', this.lib),
+                props: item.props || {}
+            }
+            return this.generateTag(tag)
+        },
+        // 渲染 cascader
+        renderCascader (h, item) {
+            let props = item.props || {}
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('cascader', this.lib)
+            }
+            props.options = this.getCascaderOptions(item.options)
+            tag.props = props
+            return this.generateTag(tag)
+        },
+        renderCommunity (h, item) {
+            let props = item.props || {}
+            let tag = {
+                h,
+                item,
+                tagName: getPrefix('community', this.lib)
+            }
+            tag.props = props
+            tag.props.clearable = this.clearable
+            return this.generateTag(tag)
+        },
+        // 转换 cascader options
+        getCascaderOptions (options = []) {
+            let list = JSON.stringify(options)
+            list = list.replace(/"text":/g, '"label":')
+            return JSON.parse(list)
+        },
+        // 生产 tag
+        generateTag ({ h, item, tagName, props, children, on = {}, nativeOn = {} }) {
+            let currProps = {
+                value: this.form[item.key],
+                min: 0,
+                max: 9999999,
+                ...props,
+                disabled: this.disabled || typeof item.disabled === 'function' ? item.disabled(item, this.form) : item.disabled
+            }
+            let attrs = item.attrs || {}
+            let width = null
+
+            let itemOn = item.on || {}
+            let itemNativeOn = item.nativeOn || {}
+
+            // 忽略这些标签的宽度设置
+            let ignoreMap = {
+                'switch': true,
+                'checkbox': true,
+                'checkbox-group': true,
+                'radio': true,
+                'radio-group': true,
+                'input-number': true
+            }
+
+            if (!ignoreMap[item.type]) {
+                let w = item.width || this['contentWidth']
+                if (typeof w === 'string' && (w.indexOf('%') >= 0 || w === 'auto')) {
+                    width = w
+                } else {
+                    width = w + 'px'
+                }
+            }
+
+            return h(tagName, {
+                props: currProps,
+                attrs,
+                style: {
+                    width
+                },
+                on: {
+                    ...itemOn,
+                    input: value => {
+                        let beforeValue = this.form[item.key]
+                        value = this.formatDateValue(value, item)
+                        if (typeof value === 'string') {
+                            value = value.trim()
+                        }
+                        this.form[item.key] = value
+                        this.emitInput(value, item, beforeValue)
+                    },
+                    ...on
+                },
+                nativeOn: {
+                    ...itemNativeOn,
+                    ...nativeOn
+                }
+            }, children)
+        },
+        // 格式化日期返回，避免 null 的出现
+        formatDateValue (value, item) {
+            switch (item.type) {
+                case 'date':
+                case 'datetitme':
+                    if (!value) {
+                        value = ''
+                    }
+                    break
+                case 'daterange':
+                case 'datetimerange':
+                    if (!value) {
+                        value = ['', '']
+                    }
+                    break
+                default:
+                    break
+            }
+            return value
+        },
+        // 触发 item onInput 事件
+        emitInput (value, item, beforeValue) {
+            if (typeof item.onInput === 'function') {
+                item.onInput(value, item, this.form, beforeValue)
+            }
+        },
+        // 提交事件
+        submit () {
+            this.$refs.form.validate(valid => {
+                this.$emit('submit', this.getForm(), valid)
+            })
+        },
+        validate () {
+            return new Promise((resolve, reject) => {
+                this.$nextTick(() => {
+                    this.$refs.form.validate(valid => {
+                        resolve(valid)
+                    })
+                })
+            })
+        },
+
+        validateField (field) {
+            this.$refs.form.validateField(field)
+        },
+        // 清空验证
+        clear () {
+            this.$refs.form.clearValidate && this.$refs.form.clearValidate()
+        },
+        // 获取整个 form
+        getForm () {
+            return {
+                ...this.form,
+                actInitiatorOrg: null
+            }
+        }
+    }
+}
+</script>