custom-components/src/components/Form/form.vue

<template>
	<div>
		<el-row :gutter="40">
			<template v-for="(item, k) in fields">
				<el-col v-if="!item.isHide" :span="(item.span||1)/columnNum * 24" :key="k">
					<el-form-item  :label="item.label" :prop="item.id">
						<slot v-if="$scopedSlots[item.id]" :name="item.id" :config="item" />
						<template v-else>
							<el-input v-bind="item" v-if="item.type=='text'||item.type=='number'||item.type=='digit'" v-model="form[item.id]" :placeholder="item.placeholder" clearable/>
							<el-input
								v-bind="item"
								v-if="item.type=='textarea'"
								v-model="form[item.id]">
							</el-input>
							<el-date-picker
								v-else-if="item.type=='daterange'||item.type=='monthrange'"
								v-model="form[item.id]"
								:start-placeholder="item.label+ '起'"
								:end-placeholder="item.label+ '至'"
								align="right"
								unlink-panels
								:value-format="item.format||(item.type=='monthrange'? 'yyyy-MM' : 'yyyy-MM-dd' )"
								range-separator="至"
								:picker-options="item.pickerOptions || pickerOptions"
								v-bind="item"
								>
							</el-date-picker>
							<el-date-picker
								v-bind="item"
								clearable
								v-else-if="item.type=='date'||item.type=='year'||item.type=='month'||item.type=='week'||item.type=='dates'||item.type=='datetime'"
								v-model="form[item.id]"
								:value-format="item.format||(item.type=='year'? 'yyyy' : item.type=='month'? 'yyyy-MM' : item.type=='datetime'? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd' )"
								>
							</el-date-picker>
							<el-select 
								v-else-if="item.type=='select'"
								v-model="form[item.id]"
								clearable 
								v-bind="item"
								@change="onSelChange($event, item)"
								v-on="item.evts"
								>
								<el-option
									v-for="opt in item.optionList"
									:key="opt.value"
									:label="opt.label"
									:value="opt.value">
								</el-option>
							</el-select>
							<Upload
								:configs="item"
								v-else-if="item.type=='photo'"
								v-model="form[item.id]">
							</Upload>
							<template v-else-if="item.type=='radio'">
								<el-radio 
									v-for="opt in item.optionList" 
									:key="opt.value" 
									v-model="form[item.id]" 
									:label="opt.value">{{opt.label}}</el-radio>
							</template>
							<template v-else-if="item.type=='checkbox'">
								<el-checkbox-group 
									@change="onCheckboxChange($event, item)"
									v-model="form[item.id]">
									<el-checkbox 
										v-for="opt in item.optionList" 
										:key="opt.value" 
										:label="opt.value">
										{{opt.label}}
									</el-checkbox>
								</el-checkbox-group>
							</template>
							<div v-else-if="item.type=='inputNumber'">
								<el-input-number  v-model="form[item.id]" :controls-position="item.controlsPosition||''" v-bind="item.elmentCfg" :placeholder="item.placeholder" :min="item.min||0" :max="item.max"></el-input-number>
								<span v-if="item.afterText" class="ml5">{{item.afterText}}</span>
							</div>
							<template v-else-if="item.type=='richtext'">
								<QuillEditor 
									ref="formQuillTextEditor"
									v-model="form[item.id]" 
									@blur="onEditorBlur($event, item)"
									@focus="onEditorFocus($event, item)"
									@ready="onEditorReady($event, item)"  
									@change="onEditorChange($event, item)">
								</QuillEditor>
							</template>
							<div v-else-if="item.type=='label'"  >
								{{form[item.id]}}
							</div>
						</template>
					</el-form-item>
					<slot v-if="$scopedSlots[item.id+'_tips']" :name="item.id+'_tips'" :config="item" />
				</el-col>
			</template>
		</el-row>
	</div>
</template>

<script>
import QuillEditor from '../QuillEditor'
import Upload from './Upload'
import {pickerOptions} from '../js/common'
import Tools from '../../utils/tool'
export default {
	props: {
		fields: {},
		columnNum: {},
		form: {},
	},
	components:{
		Upload,
		QuillEditor
	},
	computed:{
		
	},
	data(){
		return {
			rows: "",
			pickerOptions,
		}
	},
	created(){
		this.fields.forEach((v, i) => {
			this.loadDict(v)
		});
	},
	mounted() {
		
	},
	methods: {
		loadDict(item){
			if(!item.optionListLoadConfig){
				return
			}
			if(!Tools.dictLoad){
				return
			}
			Tools.dictLoad(item.optionListLoadConfig).then(res=>{
				item.optionList = res
			})
		},
		onSelChange(value, item){
			if(item.multiple){
				if(item.valueName.length < value.length){
					var exist = _.find(item.optionList, (v)=>{
						return v.value == value[value.length - 1]
					})
					item.valueName.push(exist.label)
				} else {
					if(value.length == 0){
						item.valueName = []
					} else {
						_.each(item._value_bak, (v, i)=>{
							if(value.indexOf(v) === -1){
								item.valueName.splice(i, 1)
							}
						})
					}
				}
				item._value_bak = _.assign([], value)
			} 
			
			if(item.onChange){
				if(item.multiple){
					item.onChange(value, item.valueName)
				} else {
					var exist = _.filter(item.optionList, (v)=>{
						return v.value == value
					})
					item.onChange(exist)
				}
			}
		},
		onCheckboxChange(values, item){
			if(item.onChange){
				var exist = []
				values.forEach(m=>{
					exist = exist.concat(_.filter(item.optionList, (v)=>{
						return v.value == m
					})) 
				})
				item.onChange(exist)
			}
		},

		//富文本编辑  新增 start
		// resetEditorOption(editorOption){
		// 	if(editorOption){
		// 		return editorOption
		// 	}
		// 	return defaultEditorOption
		// },
		onEditorBlur(editor, item) {
          	this.$emit('onEditorBlur', {editor, item})
		},
		onEditorFocus(editor, item) {
			this.$emit('onEditorFocus', {editor, item})
		},
		onEditorReady(editor, item) {
			this.$emit('onEditorReady', {editor, item})
		},
		onEditorChange({editor, html, text}, item) {
			this.$emit('onEditorChange', {editor, html, text, item})
        },
        // newEditorbeforeupload(file){                       
        //     var $uptypes = ["image/jpg", "image/png",'image/jpeg'];
        //     const isJPG = $uptypes.indexOf(file.type) > -1;
        //     const isLt3M = file.size / 1024 / 1024 < 3;
        //     this.uploadLoading = this.$loading({
        //         background: 'rgba(0, 0, 0, 0.2)',
        //         text: '上传中'
        //     })
        //     if (!isJPG) {
        //         this.uploadLoading.close()
        //         this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
        //     }
        //     if (!isLt3M) {
        //         this.uploadLoading.close()
        //         this.$message.error("上传头像图片大小不能超过 3MB!");
        //     }
        //     return isJPG && isLt3M;  
                                                              
        // },
        // newEditorSuccess(res, file, fileList){
		// 	var vm = this
        //     if(res.status==200){ 
        //         var image = Tools.formatImgUrl(res.obj.fullUri),
        //             addImgRange = this.$refs.formQuillTextEditor.quill.getSelection()
        //         var length = addImgRange.index,quill = vm.$refs.formQuillTextEditor.quill
        //             quill.insertEmbed(addImgRange != null?length:0, 'image',image)
        //             quill.setSelection(length + 1);
        //     }else{ 
        //         vm.$message.error("图片上传失败！"); 
        //     }
        //     if (this.uploadLoading) {
        //         this.uploadLoading.close()
        //     }
		// },
		// addQuillTitle () {
		// 	const oToolBar = document.querySelector('.ql-toolbar')
		// 	const aButton = oToolBar.querySelectorAll('button')
		// 	const aSelect = oToolBar.querySelectorAll('select')
		// 	aButton.forEach(function (item) {
		// 		if (item.className === 'ql-script') {
		// 		item.value === 'sub' ? (item.title = '下标') : (item.title = '上标')
		// 		} else if (item.className === 'ql-indent') {
		// 		item.value === '+1' ? (item.title = '向右缩进') : (item.title = '向左缩进')
		// 		} else {
		// 		item.title = titleConfig[item.classList[0]]
		// 		}
		// 	})
		// 	aSelect.forEach(function (item) {
		// 		item.parentNode.title = titleConfig[item.classList[0]]
		// 	})
		// },
		//富文本编辑  新增  end
	}
}
</script>

<style scoped lang="scss">
.form-com{
	.el-form-item{
		width: auto;
		/deep/ .el-form-item__content{
			text-align: left;
		}
		/deep/ .ql-editor{
			min-height: 150px;
		}
	}
}
</style>