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'"
								v-model="form[item.id]"
								:value-format="item.format||(item.type=='year'? 'yyyy' : item.type=='month'? 'yyyy-MM' : 'yyyy-MM-dd' )"
								>
							</el-date-picker>
							<!-- <el-date-picker
								clearable
								v-else-if="type=='datetime'"
								v-model="form[item.id]"
								type="datetime"
								:placeholder="item.placeholder">
							</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>
							<el-input-number v-else-if="item.type=='inputNumber'" v-model="form[item.id]" :controls-position="item.controlsPosition||''" :placeholder="item.placeholder" :min="item.min||''" :max="item.max"></el-input-number>
							<template v-else-if="item.type=='richtext'">
								<quill-editor 
									ref="formQuillTextEditor"
									v-model="form[item.id]" 
									@blur="onEditorBlur($event, item)"
									@focus="onEditorFocus($event, item)"
									:options="resetEditorOption(item.editorOption)" 
									@ready="onEditorReady($event, item)"  
									@change="onEditorChange($event, item)">
								</quill-editor>
								<el-upload style="display:none"  :action="UploadUrl" :show-file-list="false" :before-upload='newEditorbeforeupload'  :on-success='newEditorSuccess'
									ref="uniqueId" id="uniqueId">
								</el-upload >
							</template>
						</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 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor, Quill} from 'vue-quill-editor'
import { ImageResize } from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);
import Upload from './Upload'
import {pickerOptions} from '../js/common'
import Tools from '../../utils/tool'
import defaultEditorOption from './editOptions'
let toolbarTooltips = {
	'font': '字体',
	'size': '字体大小',
	'header': '字体大小',
	'bold': '加粗',
	'italic': '斜体',
	'underline': '下划线',
	'strike': '删除线',
	'color' : '字体颜色',
	'background': '背景颜色',
	'script': {
		'sub' : 'Subscript',
		'super': 'Superscript'
	},
	'list': {
		'ordered':'Numbered list',
		'bullet': 'Bulleted list'
	},
	'indent': {
		'-1': '缩进-1',
		'+1':  '缩进+1'
	},
	'direction': {
		'rtl': 'Text direction (right to left | left to right)',
		'ltr': 'Text direction (left ro right | right to left)'
	},
	'align': '排列',
	'link': '插入超链接',
	'image': '插入图片',
	'video': '插入视频',
	'formula': 'Insert a formula',
	'clean': 'Clear format',
	'add-table': 'Add a new table',
	'table-row': 'Add a row to the selected table',
	'table-column': 'Add a column to the selected table',
	'remove-table': 'Remove selected table',
	'help': 'Show help'
};


export default {
	props: {
		fields: {},
		columnNum: {},
		form: {},
	},
	components:{
		Upload,
		quillEditor
	},
	computed:{
		
	},
	data(){
		return {
			rows: "",
			pickerOptions,
			uploadLoading: false,
			UploadUrl: Tools.upload_stream_url
		}
	},
	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.onChange){
				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) {
          	this.$emit('onEditorBlur', {editor, item})
		},
		onEditorFocus(editor) {
			this.$emit('onEditorFocus', {editor, item})
		},
		onEditorReady(editor) {
			this.showTooltips();
			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()
            }
		},
		showTooltips(){
			let showTooltip = (which,el) => {
				if (which=='button'){
					var tool = el.className.replace('ql-', '');
				}
				else if (which=='span'){
					var tool = el.className.replace('ql-','');
					tool=tool.substr(0,tool.indexOf(' '));
				}
				if (tool){
					//if element has value attribute.. handling is different
					//buttons without value
					if (el.value ==''){
						if (toolbarTooltips[tool])
						el.setAttribute('title',toolbarTooltips[tool]);
					}
					//buttons with value
					else if (typeof el.value !=='undefined'){
						if (toolbarTooltips[tool][el.value])
						el.setAttribute('title',toolbarTooltips[tool][el.value]);
					}
					//default
					else
						el.setAttribute('title',toolbarTooltips[tool]);
				}
			};

			let toolbarElement = document.querySelector('.ql-toolbar');
			if (toolbarElement) {
				let matchesButtons = toolbarElement.querySelectorAll('button');
				for (let el of matchesButtons) {
					showTooltip('button',el);
				}
				//for submenus inside 
				let matchesSpans = toolbarElement.querySelectorAll('.ql-toolbar > span > span');
				for (let el of matchesSpans) {
					showTooltip('span',el);
				}
			}
		} 
		//富文本编辑  新增  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>