Jcdm041-Mes.git

2024-01-16 e2f15526d72f9c2cc9ffc609d85d10be6421c158

提交 \| 用户 \| 时间
fd2207	1	<template>
懒	2	<div class="right-board">
	3	<el-tabs v-model="currentTab" class="center-tabs">
	4	<el-tab-pane label="组件属性" name="field" />
	5	<el-tab-pane label="表单属性" name="form" />
	6	</el-tabs>
	7	<div class="field-box">
	8	<a class="document-link" target="_blank" :href="documentLink" title="查看组件文档">
	9	<i class="el-icon-link" />
	10	</a>
	11	<el-scrollbar class="right-scrollbar">
	12	<!-- 组件属性 -->
	13	<el-form v-show="currentTab==='field' && showField" size="small" label-width="90px">
	14	<el-form-item v-if="activeData.changeTag" label="组件类型">
	15	<el-select
	16	v-model="activeData.tagIcon"
	17	placeholder="请选择组件类型"
	18	:style="{width: '100%'}"
	19	@change="tagChange"
	20	>
	21	<el-option-group v-for="group in tagList" :key="group.label" :label="group.label">
	22	<el-option
	23	v-for="item in group.options"
	24	:key="item.label"
	25	:label="item.label"
	26	:value="item.tagIcon"
	27	>
	28	<svg-icon class="node-icon" :icon-class="item.tagIcon" />
	29	<span> {{ item.label }}</span>
	30	</el-option>
	31	</el-option-group>
	32	</el-select>
	33	</el-form-item>
	34	<el-form-item v-if="activeData.vModel!==undefined" label="字段名">
	35	<el-input v-model="activeData.vModel" placeholder="请输入字段名（v-model）" />
	36	</el-form-item>
	37	<el-form-item v-if="activeData.componentName!==undefined" label="组件名">
	38	{{ activeData.componentName }}
	39	</el-form-item>
	40	<el-form-item v-if="activeData.label!==undefined" label="标题">
	41	<el-input v-model="activeData.label" placeholder="请输入标题" />
	42	</el-form-item>
	43	<el-form-item v-if="activeData.placeholder!==undefined" label="占位提示">
	44	<el-input v-model="activeData.placeholder" placeholder="请输入占位提示" />
	45	</el-form-item>
	46	<el-form-item v-if="activeData['start-placeholder']!==undefined" label="开始占位">
	47	<el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" />
	48	</el-form-item>
	49	<el-form-item v-if="activeData['end-placeholder']!==undefined" label="结束占位">
	50	<el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示" />
	51	</el-form-item>
	52	<el-form-item v-if="activeData.span!==undefined" label="表单栅格">
	53	<el-slider v-model="activeData.span" :max="24" :min="1" :marks="{12:''}" @change="spanChange" />
	54	</el-form-item>
	55	<el-form-item v-if="activeData.layout==='rowFormItem'" label="栅格间隔">
	56	<el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔" />
	57	</el-form-item>
	58	<el-form-item v-if="activeData.layout==='rowFormItem'" label="布局模式">
	59	<el-radio-group v-model="activeData.type">
	60	<el-radio-button label="default" />
	61	<el-radio-button label="flex" />
	62	</el-radio-group>
	63	</el-form-item>
	64	<el-form-item v-if="activeData.justify!==undefined&&activeData.type==='flex'" label="水平排列">
	65	<el-select v-model="activeData.justify" placeholder="请选择水平排列" :style="{width: '100%'}">
	66	<el-option
	67	v-for="(item, index) in justifyOptions"
	68	:key="index"
	69	:label="item.label"
	70	:value="item.value"
	71	/>
	72	</el-select>
	73	</el-form-item>
	74	<el-form-item v-if="activeData.align!==undefined&&activeData.type==='flex'" label="垂直排列">
	75	<el-radio-group v-model="activeData.align">
	76	<el-radio-button label="top" />
	77	<el-radio-button label="middle" />
	78	<el-radio-button label="bottom" />
	79	</el-radio-group>
	80	</el-form-item>
	81	<el-form-item v-if="activeData.labelWidth!==undefined" label="标签宽度">
	82	<el-input v-model.number="activeData.labelWidth" type="number" placeholder="请输入标签宽度" />
	83	</el-form-item>
	84	<el-form-item v-if="activeData.style&&activeData.style.width!==undefined" label="组件宽度">
	85	<el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable />
	86	</el-form-item>
	87	<el-form-item v-if="activeData.vModel!==undefined" label="默认值">
	88	<el-input
	89	:value="setDefaultValue(activeData.defaultValue)"
	90	placeholder="请输入默认值"
	91	@input="onDefaultValueInput"
	92	/>
	93	</el-form-item>
	94	<el-form-item v-if="activeData.tag==='el-checkbox-group'" label="至少应选">
	95	<el-input-number
	96	:value="activeData.min"
	97	:min="0"
	98	placeholder="至少应选"
	99	@input="$set(activeData, 'min', $event?$event:undefined)"
	100	/>
	101	</el-form-item>
	102	<el-form-item v-if="activeData.tag==='el-checkbox-group'" label="最多可选">
	103	<el-input-number
	104	:value="activeData.max"
	105	:min="0"
	106	placeholder="最多可选"
	107	@input="$set(activeData, 'max', $event?$event:undefined)"
	108	/>
	109	</el-form-item>
	110	<el-form-item v-if="activeData.prepend!==undefined" label="前缀">
	111	<el-input v-model="activeData.prepend" placeholder="请输入前缀" />
	112	</el-form-item>
	113	<el-form-item v-if="activeData.append!==undefined" label="后缀">
	114	<el-input v-model="activeData.append" placeholder="请输入后缀" />
	115	</el-form-item>
	116	<el-form-item v-if="activeData['prefix-icon']!==undefined" label="前图标">
	117	<el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称">
	118	<el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('prefix-icon')">
	119	选择
	120	</el-button>
	121	</el-input>
	122	</el-form-item>
	123	<el-form-item v-if="activeData['suffix-icon'] !== undefined" label="后图标">
	124	<el-input v-model="activeData['suffix-icon']" placeholder="请输入后图标名称">
	125	<el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('suffix-icon')">
	126	选择
	127	</el-button>
	128	</el-input>
	129	</el-form-item>
	130	<el-form-item v-if="activeData.tag === 'el-cascader'" label="选项分隔符">
	131	<el-input v-model="activeData.separator" placeholder="请输入选项分隔符" />
	132	</el-form-item>
	133	<el-form-item v-if="activeData.autosize !== undefined" label="最小行数">
	134	<el-input-number v-model="activeData.autosize.minRows" :min="1" placeholder="最小行数" />
	135	</el-form-item>
	136	<el-form-item v-if="activeData.autosize !== undefined" label="最大行数">
	137	<el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数" />
	138	</el-form-item>
	139	<el-form-item v-if="activeData.min !== undefined" label="最小值">
	140	<el-input-number v-model="activeData.min" placeholder="最小值" />
	141	</el-form-item>
	142	<el-form-item v-if="activeData.max !== undefined" label="最大值">
	143	<el-input-number v-model="activeData.max" placeholder="最大值" />
	144	</el-form-item>
	145	<el-form-item v-if="activeData.step !== undefined" label="步长">
	146	<el-input-number v-model="activeData.step" placeholder="步数" />
	147	</el-form-item>
	148	<el-form-item v-if="activeData.tag === 'el-input-number'" label="精度">
	149	<el-input-number v-model="activeData.precision" :min="0" placeholder="精度" />
	150	</el-form-item>
	151	<el-form-item v-if="activeData.tag === 'el-input-number'" label="按钮位置">
	152	<el-radio-group v-model="activeData['controls-position']">
	153	<el-radio-button label="">
	154	默认
	155	</el-radio-button>
	156	<el-radio-button label="right">
	157	右侧
	158	</el-radio-button>
	159	</el-radio-group>
	160	</el-form-item>
	161	<el-form-item v-if="activeData.maxlength !== undefined" label="最多输入">
	162	<el-input v-model="activeData.maxlength" placeholder="请输入字符长度">
	163	<template slot="append">
	164	个字符
	165	</template>
	166	</el-input>
	167	</el-form-item>
	168	<el-form-item v-if="activeData['active-text'] !== undefined" label="开启提示">
	169	<el-input v-model="activeData['active-text']" placeholder="请输入开启提示" />
	170	</el-form-item>
	171	<el-form-item v-if="activeData['inactive-text'] !== undefined" label="关闭提示">
	172	<el-input v-model="activeData['inactive-text']" placeholder="请输入关闭提示" />
	173	</el-form-item>
	174	<el-form-item v-if="activeData['active-value'] !== undefined" label="开启值">
	175	<el-input
	176	:value="setDefaultValue(activeData['active-value'])"
	177	placeholder="请输入开启值"
	178	@input="onSwitchValueInput($event, 'active-value')"
	179	/>
	180	</el-form-item>
	181	<el-form-item v-if="activeData['inactive-value'] !== undefined" label="关闭值">
	182	<el-input
	183	:value="setDefaultValue(activeData['inactive-value'])"
	184	placeholder="请输入关闭值"
	185	@input="onSwitchValueInput($event, 'inactive-value')"
	186	/>
	187	</el-form-item>
	188	<el-form-item
	189	v-if="activeData.type !== undefined && 'el-date-picker' === activeData.tag"
	190	label="时间类型"
	191	>
	192	<el-select
	193	v-model="activeData.type"
	194	placeholder="请选择时间类型"
	195	:style="{ width: '100%' }"
	196	@change="dateTypeChange"
	197	>
	198	<el-option
	199	v-for="(item, index) in dateOptions"
	200	:key="index"
	201	:label="item.label"
	202	:value="item.value"
	203	/>
	204	</el-select>
	205	</el-form-item>
	206	<el-form-item v-if="activeData.name !== undefined" label="文件字段名">
	207	<el-input v-model="activeData.name" placeholder="请输入上传文件字段名" />
	208	</el-form-item>
	209	<el-form-item v-if="activeData.accept !== undefined" label="文件类型">
	210	<el-select
	211	v-model="activeData.accept"
	212	placeholder="请选择文件类型"
	213	:style="{ width: '100%' }"
	214	clearable
	215	>
	216	<el-option label="图片" value="image/*" />
	217	<el-option label="视频" value="video/*" />
	218	<el-option label="音频" value="audio/*" />
	219	<el-option label="excel" value=".xls,.xlsx" />
	220	<el-option label="word" value=".doc,.docx" />
	221	<el-option label="pdf" value=".pdf" />
	222	<el-option label="txt" value=".txt" />
	223	</el-select>
	224	</el-form-item>
	225	<el-form-item v-if="activeData.fileSize !== undefined" label="文件大小">
	226	<el-input v-model.number="activeData.fileSize" placeholder="请输入文件大小">
	227	<el-select slot="append" v-model="activeData.sizeUnit" :style="{ width: '66px' }">
	228	<el-option label="KB" value="KB" />
	229	<el-option label="MB" value="MB" />
	230	<el-option label="GB" value="GB" />
	231	</el-select>
	232	</el-input>
	233	</el-form-item>
	234	<el-form-item v-if="activeData.action !== undefined" label="上传地址">
	235	<el-input v-model="activeData.action" placeholder="请输入上传地址" clearable />
	236	</el-form-item>
	237	<el-form-item v-if="activeData['list-type'] !== undefined" label="列表类型">
	238	<el-radio-group v-model="activeData['list-type']" size="small">
	239	<el-radio-button label="text">
	240	text
	241	</el-radio-button>
	242	<el-radio-button label="picture">
	243	picture
	244	</el-radio-button>
	245	<el-radio-button label="picture-card">
	246	picture-card
	247	</el-radio-button>
	248	</el-radio-group>
	249	</el-form-item>
	250	<el-form-item
	251	v-if="activeData.buttonText !== undefined"
	252	v-show="'picture-card' !== activeData['list-type']"
	253	label="按钮文字"
	254	>
	255	<el-input v-model="activeData.buttonText" placeholder="请输入按钮文字" />
	256	</el-form-item>
	257	<el-form-item v-if="activeData['range-separator'] !== undefined" label="分隔符">
	258	<el-input v-model="activeData['range-separator']" placeholder="请输入分隔符" />
	259	</el-form-item>
	260	<el-form-item v-if="activeData['picker-options'] !== undefined" label="时间段">
	261	<el-input
	262	v-model="activeData['picker-options'].selectableRange"
	263	placeholder="请输入时间段"
	264	/>
	265	</el-form-item>
	266	<el-form-item v-if="activeData.format !== undefined" label="时间格式">
	267	<el-input
	268	:value="activeData.format"
	269	placeholder="请输入时间格式"
	270	@input="setTimeValue($event)"
	271	/>
	272	</el-form-item>
	273	<template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.tag) > -1">
	274	<el-divider>选项</el-divider>
	275	<draggable
	276	:list="activeData.options"
	277	:animation="340"
	278	group="selectItem"
	279	handle=".option-drag"
	280	>
	281	<div v-for="(item, index) in activeData.options" :key="index" class="select-item">
	282	<div class="select-line-icon option-drag">
	283	<i class="el-icon-s-operation" />
	284	</div>
	285	<el-input v-model="item.label" placeholder="选项名" size="small" />
	286	<el-input
	287	placeholder="选项值"
	288	size="small"
	289	:value="item.value"
	290	@input="setOptionValue(item, $event)"
	291	/>
	292	<div class="close-btn select-line-icon" @click="activeData.options.splice(index, 1)">
	293	<i class="el-icon-remove-outline" />
	294	</div>
	295	</div>
	296	</draggable>
	297	<div style="margin-left: 20px;">
	298	<el-button
	299	style="padding-bottom: 0"
	300	icon="el-icon-circle-plus-outline"
	301	type="text"
	302	@click="addSelectItem"
	303	>
	304	添加选项
	305	</el-button>
	306	</div>
	307	<el-divider />
	308	</template>
	309
	310	<template v-if="['el-cascader'].indexOf(activeData.tag) > -1">
	311	<el-divider>选项</el-divider>
	312	<el-form-item label="数据类型">
	313	<el-radio-group v-model="activeData.dataType" size="small">
	314	<el-radio-button label="dynamic">
	315	动态数据
	316	</el-radio-button>
	317	<el-radio-button label="static">
	318	静态数据
	319	</el-radio-button>
	320	</el-radio-group>
	321	</el-form-item>
	322
	323	<template v-if="activeData.dataType === 'dynamic'">
	324	<el-form-item label="标签键名">
	325	<el-input v-model="activeData.labelKey" placeholder="请输入标签键名" />
	326	</el-form-item>
	327	<el-form-item label="值键名">
	328	<el-input v-model="activeData.valueKey" placeholder="请输入值键名" />
	329	</el-form-item>
	330	<el-form-item label="子级键名">
	331	<el-input v-model="activeData.childrenKey" placeholder="请输入子级键名" />
	332	</el-form-item>
	333	</template>
	334
	335	<el-tree
	336	v-if="activeData.dataType === 'static'"
	337	draggable
	338	:data="activeData.options"
	339	node-key="id"
	340	:expand-on-click-node="false"
	341	:render-content="renderContent"
	342	/>
	343	<div v-if="activeData.dataType === 'static'" style="margin-left: 20px">
	344	<el-button
	345	style="padding-bottom: 0"
	346	icon="el-icon-circle-plus-outline"
	347	type="text"
	348	@click="addTreeItem"
	349	>
	350	添加父级
	351	</el-button>
	352	</div>
	353	<el-divider />
	354	</template>
	355
	356	<el-form-item v-if="activeData.optionType !== undefined" label="选项样式">
	357	<el-radio-group v-model="activeData.optionType">
	358	<el-radio-button label="default">
	359	默认
	360	</el-radio-button>
	361	<el-radio-button label="button">
	362	按钮
	363	</el-radio-button>
	364	</el-radio-group>
	365	</el-form-item>
	366	<el-form-item v-if="activeData['active-color'] !== undefined" label="开启颜色">
	367	<el-color-picker v-model="activeData['active-color']" />
	368	</el-form-item>
	369	<el-form-item v-if="activeData['inactive-color'] !== undefined" label="关闭颜色">
	370	<el-color-picker v-model="activeData['inactive-color']" />
	371	</el-form-item>
	372
	373	<el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
	374	<el-switch v-model="activeData['allow-half']" />
	375	</el-form-item>
	376	<el-form-item v-if="activeData['show-text'] !== undefined" label="辅助文字">
	377	<el-switch v-model="activeData['show-text']" @change="rateTextChange" />
	378	</el-form-item>
	379	<el-form-item v-if="activeData['show-score'] !== undefined" label="显示分数">
	380	<el-switch v-model="activeData['show-score']" @change="rateScoreChange" />
	381	</el-form-item>
	382	<el-form-item v-if="activeData['show-stops'] !== undefined" label="显示间断点">
	383	<el-switch v-model="activeData['show-stops']" />
	384	</el-form-item>
	385	<el-form-item v-if="activeData.range !== undefined" label="范围选择">
	386	<el-switch v-model="activeData.range" @change="rangeChange" />
	387	</el-form-item>
	388	<el-form-item
	389	v-if="activeData.border !== undefined && activeData.optionType === 'default'"
	390	label="是否带边框"
	391	>
	392	<el-switch v-model="activeData.border" />
	393	</el-form-item>
	394	<el-form-item v-if="activeData.tag === 'el-color-picker'" label="颜色格式">
	395	<el-select
	396	v-model="activeData['color-format']"
	397	placeholder="请选择颜色格式"
	398	:style="{ width: '100%' }"
	399	@change="colorFormatChange"
	400	>
	401	<el-option
	402	v-for="(item, index) in colorFormatOptions"
	403	:key="index"
	404	:label="item.label"
	405	:value="item.value"
	406	/>
	407	</el-select>
	408	</el-form-item>
	409	<el-form-item
	410	v-if="activeData.size !== undefined &&
	411	(activeData.optionType === 'button' \|\|
	412	activeData.border \|\|
	413	activeData.tag === 'el-color-picker')"
	414	label="选项尺寸"
	415	>
	416	<el-radio-group v-model="activeData.size">
	417	<el-radio-button label="medium">
	418	中等
	419	</el-radio-button>
	420	<el-radio-button label="small">
	421	较小
	422	</el-radio-button>
	423	<el-radio-button label="mini">
	424	迷你
	425	</el-radio-button>
	426	</el-radio-group>
	427	</el-form-item>
	428	<el-form-item v-if="activeData['show-word-limit'] !== undefined" label="输入统计">
	429	<el-switch v-model="activeData['show-word-limit']" />
	430	</el-form-item>
	431	<el-form-item v-if="activeData.tag === 'el-input-number'" label="严格步数">
	432	<el-switch v-model="activeData['step-strictly']" />
	433	</el-form-item>
	434	<el-form-item v-if="activeData.tag === 'el-cascader'" label="是否多选">
	435	<el-switch v-model="activeData.props.props.multiple" />
	436	</el-form-item>
	437	<el-form-item v-if="activeData.tag === 'el-cascader'" label="展示全路径">
	438	<el-switch v-model="activeData['show-all-levels']" />
	439	</el-form-item>
	440	<el-form-item v-if="activeData.tag === 'el-cascader'" label="可否筛选">
	441	<el-switch v-model="activeData.filterable" />
	442	</el-form-item>
	443	<el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
	444	<el-switch v-model="activeData.clearable" />
	445	</el-form-item>
	446	<el-form-item v-if="activeData.showTip !== undefined" label="显示提示">
	447	<el-switch v-model="activeData.showTip" />
	448	</el-form-item>
	449	<el-form-item v-if="activeData.multiple !== undefined" label="多选文件">
	450	<el-switch v-model="activeData.multiple" />
	451	</el-form-item>
	452	<el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传">
	453	<el-switch v-model="activeData['auto-upload']" />
	454	</el-form-item>
	455	<el-form-item v-if="activeData.readonly !== undefined" label="是否只读">
	456	<el-switch v-model="activeData.readonly" />
	457	</el-form-item>
	458	<el-form-item v-if="activeData.disabled !== undefined" label="是否禁用">
	459	<el-switch v-model="activeData.disabled" />
	460	</el-form-item>
	461	<el-form-item v-if="activeData.tag === 'el-select'" label="是否可搜索">
	462	<el-switch v-model="activeData.filterable" />
	463	</el-form-item>
	464	<el-form-item v-if="activeData.tag === 'el-select'" label="是否多选">
	465	<el-switch v-model="activeData.multiple" @change="multipleChange" />
	466	</el-form-item>
	467	<el-form-item v-if="activeData.required !== undefined" label="是否必填">
	468	<el-switch v-model="activeData.required" />
	469	</el-form-item>
	470
	471	<template v-if="activeData.layoutTree">
	472	<el-divider>布局结构树</el-divider>
	473	<el-tree
	474	:data="[activeData]"
	475	:props="layoutTreeProps"
	476	node-key="renderKey"
	477	default-expand-all
	478	draggable
	479	>
	480	<span slot-scope="{ node, data }">
	481	<span class="node-label">
	482	<svg-icon class="node-icon" :icon-class="data.tagIcon" />
	483	{{ node.label }}
	484	</span>
	485	</span>
	486	</el-tree>
	487	</template>
	488
	489	<template v-if="activeData.layout === 'colFormItem' && activeData.tag !== 'el-button'">
	490	<el-divider>正则校验</el-divider>
	491	<div
	492	v-for="(item, index) in activeData.regList"
	493	:key="index"
	494	class="reg-item"
	495	>
	496	<span class="close-btn" @click="activeData.regList.splice(index, 1)">
	497	<i class="el-icon-close" />
	498	</span>
	499	<el-form-item label="表达式">
	500	<el-input v-model="item.pattern" placeholder="请输入正则" />
	501	</el-form-item>
	502	<el-form-item label="错误提示" style="margin-bottom:0">
	503	<el-input v-model="item.message" placeholder="请输入错误提示" />
	504	</el-form-item>
	505	</div>
	506	<div style="margin-left: 20px">
	507	<el-button icon="el-icon-circle-plus-outline" type="text" @click="addReg">
	508	添加规则
	509	</el-button>
	510	</div>
	511	</template>
	512	</el-form>
	513	<!-- 表单属性 -->
	514	<el-form v-show="currentTab === 'form'" size="small" label-width="90px">
	515	<el-form-item label="表单名">
	516	<el-input v-model="formConf.formRef" placeholder="请输入表单名（ref）" />
	517	</el-form-item>
	518	<el-form-item label="表单模型">
	519	<el-input v-model="formConf.formModel" placeholder="请输入数据模型" />
	520	</el-form-item>
	521	<el-form-item label="校验模型">
	522	<el-input v-model="formConf.formRules" placeholder="请输入校验模型" />
	523	</el-form-item>
	524	<el-form-item label="表单尺寸">
	525	<el-radio-group v-model="formConf.size">
	526	<el-radio-button label="medium">
	527	中等
	528	</el-radio-button>
	529	<el-radio-button label="small">
	530	较小
	531	</el-radio-button>
	532	<el-radio-button label="mini">
	533	迷你
	534	</el-radio-button>
	535	</el-radio-group>
	536	</el-form-item>
	537	<el-form-item label="标签对齐">
	538	<el-radio-group v-model="formConf.labelPosition">
	539	<el-radio-button label="left">
	540	左对齐
	541	</el-radio-button>
	542	<el-radio-button label="right">
	543	右对齐
	544	</el-radio-button>
	545	<el-radio-button label="top">
	546	顶部对齐
	547	</el-radio-button>
	548	</el-radio-group>
	549	</el-form-item>
	550	<el-form-item label="标签宽度">
	551	<el-input-number v-model="formConf.labelWidth" placeholder="标签宽度" />
	552	</el-form-item>
	553	<el-form-item label="栅格间隔">
	554	<el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔" />
	555	</el-form-item>
	556	<el-form-item label="禁用表单">
	557	<el-switch v-model="formConf.disabled" />
	558	</el-form-item>
	559	<el-form-item label="表单按钮">
	560	<el-switch v-model="formConf.formBtns" />
	561	</el-form-item>
	562	<el-form-item label="显示未选中组件边框">
	563	<el-switch v-model="formConf.unFocusedComponentBorder" />
	564	</el-form-item>
	565	</el-form>
	566	</el-scrollbar>
	567	</div>
	568
	569	<treeNode-dialog :visible.sync="dialogVisible" title="添加选项" @commit="addNode" />
	570	<icons-dialog :visible.sync="iconsVisible" :current="activeData[currentIconModel]" @select="setIcon" />
	571	</div>
	572	</template>
	573
	574	<script>
	575	import { isArray } from 'util'
	576	import draggable from 'vuedraggable'
	577	import TreeNodeDialog from './TreeNodeDialog'
	578	import { isNumberStr } from '@/utils/index'
	579	import IconsDialog from './IconsDialog'
	580	import {
	581	inputComponents,
	582	selectComponents,
	583	layoutComponents
	584	} from '@/utils/generator/config'
	585
	586	const dateTimeFormat = {
	587	date: 'yyyy-MM-dd',
	588	week: 'yyyy 第 WW 周',
	589	month: 'yyyy-MM',
	590	year: 'yyyy',
	591	datetime: 'yyyy-MM-dd HH:mm:ss',
	592	daterange: 'yyyy-MM-dd',
	593	monthrange: 'yyyy-MM',
	594	datetimerange: 'yyyy-MM-dd HH:mm:ss'
	595	}
	596
	597	export default {
	598	components: {
	599	draggable,
	600	TreeNodeDialog,
	601	IconsDialog
	602	},
	603	props: ['showField', 'activeData', 'formConf'],
	604	data() {
	605	return {
	606	currentTab: 'field',
	607	currentNode: null,
	608	dialogVisible: false,
	609	iconsVisible: false,
	610	currentIconModel: null,
	611	dateTypeOptions: [
	612	{
	613	label: '日(date)',
	614	value: 'date'
	615	},
	616	{
	617	label: '周(week)',
	618	value: 'week'
	619	},
	620	{
	621	label: '月(month)',
	622	value: 'month'
	623	},
	624	{
	625	label: '年(year)',
	626	value: 'year'
	627	},
	628	{
	629	label: '日期时间(datetime)',
	630	value: 'datetime'
	631	}
	632	],
	633	dateRangeTypeOptions: [
	634	{
	635	label: '日期范围(daterange)',
	636	value: 'daterange'
	637	},
	638	{
	639	label: '月范围(monthrange)',
	640	value: 'monthrange'
	641	},
	642	{
	643	label: '日期时间范围(datetimerange)',
	644	value: 'datetimerange'
	645	}
	646	],
	647	colorFormatOptions: [
	648	{
	649	label: 'hex',
	650	value: 'hex'
	651	},
	652	{
	653	label: 'rgb',
	654	value: 'rgb'
	655	},
	656	{
	657	label: 'rgba',
	658	value: 'rgba'
	659	},
	660	{
	661	label: 'hsv',
	662	value: 'hsv'
	663	},
	664	{
	665	label: 'hsl',
	666	value: 'hsl'
	667	}
	668	],
	669	justifyOptions: [
	670	{
	671	label: 'start',
	672	value: 'start'
	673	},
	674	{
	675	label: 'end',
	676	value: 'end'
	677	},
	678	{
	679	label: 'center',
	680	value: 'center'
	681	},
	682	{
	683	label: 'space-around',
	684	value: 'space-around'
	685	},
	686	{
	687	label: 'space-between',
	688	value: 'space-between'
	689	}
	690	],
	691	layoutTreeProps: {
	692	label(data, node) {
	693	return data.componentName \|\| `${data.label}: ${data.vModel}`
	694	}
	695	}
	696	}
	697	},
	698	computed: {
	699	documentLink() {
	700	return (
	701	this.activeData.document
	702	\|\| 'https://element.eleme.cn/#/zh-CN/component/installation'
	703	)
	704	},
	705	dateOptions() {
	706	if (
	707	this.activeData.type !== undefined
	708	&& this.activeData.tag === 'el-date-picker'
	709	) {
	710	if (this.activeData['start-placeholder'] === undefined) {
	711	return this.dateTypeOptions
	712	}
	713	return this.dateRangeTypeOptions
	714	}
	715	return []
	716	},
	717	tagList() {
	718	return [
	719	{
	720	label: '输入型组件',
	721	options: inputComponents
	722	},
	723	{
	724	label: '选择型组件',
	725	options: selectComponents
	726	}
	727	]
	728	}
	729	},
	730	methods: {
	731	addReg() {
	732	this.activeData.regList.push({
	733	pattern: '',
	734	message: ''
	735	})
	736	},
	737	addSelectItem() {
	738	this.activeData.options.push({
	739	label: '',
	740	value: ''
	741	})
	742	},
	743	addTreeItem() {
	744	++this.idGlobal
	745	this.dialogVisible = true
	746	this.currentNode = this.activeData.options
	747	},
	748	renderContent(h, { node, data, store }) {
	749	return (
	750	<div class="custom-tree-node">
	751	<span>{node.label}</span>
	752	<span class="node-operation">
	753	<i on-click={() => this.append(data)}
	754	class="el-icon-plus"
	755	title="添加"
	756	></i>
	757	<i on-click={() => this.remove(node, data)}
	758	class="el-icon-delete"
	759	title="删除"
	760	></i>
	761	</span>
	762	</div>
	763	)
	764	},
	765	append(data) {
	766	if (!data.children) {
	767	this.$set(data, 'children', [])
	768	}
	769	this.dialogVisible = true
	770	this.currentNode = data.children
	771	},
	772	remove(node, data) {
	773	const { parent } = node
	774	const children = parent.data.children \|\| parent.data
	775	const index = children.findIndex(d => d.id === data.id)
	776	children.splice(index, 1)
	777	},
	778	addNode(data) {
	779	this.currentNode.push(data)
	780	},
	781	setOptionValue(item, val) {
	782	item.value = isNumberStr(val) ? +val : val
	783	},
	784	setDefaultValue(val) {
	785	if (Array.isArray(val)) {
	786	return val.join(',')
	787	}
	788	if (['string', 'number'].indexOf(val) > -1) {
	789	return val
	790	}
	791	if (typeof val === 'boolean') {
	792	return `${val}`
	793	}
	794	return val
	795	},
	796	onDefaultValueInput(str) {
	797	if (isArray(this.activeData.defaultValue)) {
	798	// 数组
	799	this.$set(
	800	this.activeData,
	801	'defaultValue',
	802	str.split(',').map(val => (isNumberStr(val) ? +val : val))
	803	)
	804	} else if (['true', 'false'].indexOf(str) > -1) {
	805	// 布尔
	806	this.$set(this.activeData, 'defaultValue', JSON.parse(str))
	807	} else {
	808	// 字符串和数字
	809	this.$set(
	810	this.activeData,
	811	'defaultValue',
	812	isNumberStr(str) ? +str : str
	813	)
	814	}
	815	},
	816	onSwitchValueInput(val, name) {
	817	if (['true', 'false'].indexOf(val) > -1) {
	818	this.$set(this.activeData, name, JSON.parse(val))
	819	} else {
	820	this.$set(this.activeData, name, isNumberStr(val) ? +val : val)
	821	}
	822	},
	823	setTimeValue(val, type) {
	824	const valueFormat = type === 'week' ? dateTimeFormat.date : val
	825	this.$set(this.activeData, 'defaultValue', null)
	826	this.$set(this.activeData, 'value-format', valueFormat)
	827	this.$set(this.activeData, 'format', val)
	828	},
	829	spanChange(val) {
	830	this.formConf.span = val
	831	},
	832	multipleChange(val) {
	833	this.$set(this.activeData, 'defaultValue', val ? [] : '')
	834	},
	835	dateTypeChange(val) {
	836	this.setTimeValue(dateTimeFormat[val], val)
	837	},
	838	rangeChange(val) {
	839	this.$set(
	840	this.activeData,
	841	'defaultValue',
	842	val ? [this.activeData.min, this.activeData.max] : this.activeData.min
	843	)
	844	},
	845	rateTextChange(val) {
	846	if (val) this.activeData['show-score'] = false
	847	},
	848	rateScoreChange(val) {
	849	if (val) this.activeData['show-text'] = false
	850	},
	851	colorFormatChange(val) {
	852	this.activeData.defaultValue = null
	853	this.activeData['show-alpha'] = val.indexOf('a') > -1
	854	this.activeData.renderKey = +new Date() // 更新renderKey,重新渲染该组件
	855	},
	856	openIconsDialog(model) {
	857	this.iconsVisible = true
	858	this.currentIconModel = model
	859	},
	860	setIcon(val) {
	861	this.activeData[this.currentIconModel] = val
	862	},
	863	tagChange(tagIcon) {
	864	let target = inputComponents.find(item => item.tagIcon === tagIcon)
	865	if (!target) target = selectComponents.find(item => item.tagIcon === tagIcon)
	866	this.$emit('tag-change', target)
	867	}
	868	}
	869	}
	870	</script>
	871
	872	<style lang="scss" scoped>
	873	.right-board {
	874	width: 350px;
	875	position: absolute;
	876	right: 0;
	877	top: 0;
	878	padding-top: 3px;
	879	.field-box {
	880	position: relative;
	881	height: calc(100vh - 42px);
	882	box-sizing: border-box;
	883	overflow: hidden;
	884	}
	885	.el-scrollbar {
	886	height: 100%;
	887	}
	888	}
	889	.select-item {
	890	display: flex;
	891	border: 1px dashed #fff;
	892	box-sizing: border-box;
	893	& .close-btn {
	894	cursor: pointer;
	895	color: #f56c6c;
	896	}
	897	& .el-input + .el-input {
	898	margin-left: 4px;
	899	}
	900	}
	901	.select-item + .select-item {
	902	margin-top: 4px;
	903	}
	904	.select-item.sortable-chosen {
	905	border: 1px dashed #409eff;
	906	}
	907	.select-line-icon {
	908	line-height: 32px;
	909	font-size: 22px;
	910	padding: 0 4px;
	911	color: #777;
	912	}
	913	.option-drag {
	914	cursor: move;
	915	}
	916	.time-range {
	917	.el-date-editor {
	918	width: 227px;
	919	}
	920	::v-deep .el-icon-time {
	921	display: none;
	922	}
	923	}
	924	.document-link {
	925	position: absolute;
	926	display: block;
	927	width: 26px;
	928	height: 26px;
	929	top: 0;
	930	left: 0;
	931	cursor: pointer;
	932	background: #409eff;
	933	z-index: 1;
	934	border-radius: 0 0 6px 0;
	935	text-align: center;
	936	line-height: 26px;
	937	color: #fff;
	938	font-size: 18px;
	939	}
	940	.node-label{
	941	font-size: 14px;
	942	}
	943	.node-icon{
	944	color: #bebfc3;
	945	}
	946	</style>