feat: FcDesigner.vue不要开启fix校验

src/components/FormCreateDesigner/FcDesigner.vue

@@ -1,3 +1,151 @@
+<style>
+._fc-designer {
+	height: 100%;
+	min-height: 500px;
+	overflow: hidden;
+	cursor: default;
+	position: relative;
+}
+
+._fc-designer > .el-main {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding: 0px;
+}
+
+._fc-m .form-create ._fc-l-item {
+	background: #2e73ff;
+	width: 100%;
+	height: 10px;
+	overflow: hidden;
+	transition: all 0.3s ease;
+}
+
+._fc-l,
+._fc-m,
+._fc-r {
+	border-top: 1px solid #ececec;
+	box-sizing: border-box;
+}
+
+._fc-l-group {
+	padding: 0 12px;
+}
+
+._fc-l-title {
+	font-weight: 600;
+	font-size: 14px;
+	margin: 18px 0px 5px;
+}
+
+._fc-l-item {
+	display: inline-block;
+	background: #fff;
+	color: #000;
+	min-width: 70px;
+	width: 33.33%;
+	height: 70px;
+	line-height: 1;
+	text-align: center;
+	transition: all 0.2s ease;
+	cursor: pointer;
+}
+
+._fc-l-item i {
+	font-size: 21px;
+	display: inline-block;
+}
+
+._fc-l-item ._fc-l-name {
+	font-size: 12px;
+}
+
+._fc-l-item ._fc-l-icon {
+	padding: 10px 5px 12px;
+}
+
+._fc-l-item:hover {
+	background: #2e73ff;
+	color: #fff;
+}
+
+._fc-m-tools {
+	height: 40px;
+	align-items: center;
+	display: flex;
+	justify-content: flex-end;
+	border: 1px solid #ececec;
+	border-top: 0 none;
+}
+
+._fc-m-tools button.el-button {
+	padding: 5px 14px;
+	display: flex;
+	align-items: center;
+}
+
+._fc-m-tools .fc-icon {
+	font-size: 14px;
+	margin-right: 2px;
+}
+
+._fc-r .el-tabs__nav-wrap::after {
+	height: 1px;
+	background-color: #ececec;
+}
+
+._fc-r ._fc-r-tabs {
+	display: flex;
+	padding: 0;
+	border-bottom: 1px solid #ececec;
+}
+
+._fc-r ._fc-r-tab {
+	height: 40px;
+	box-sizing: border-box;
+	line-height: 40px;
+	display: inline-block;
+	list-style: none;
+	font-size: 14px;
+	font-weight: 600;
+	color: #303133;
+	position: relative;
+	flex: 1;
+	text-align: center;
+}
+
+._fc-r ._fc-r-tab.active {
+	color: #409eff;
+	border-bottom: 2px solid #409eff;
+}
+
+.drag-box {
+	min-height: 60px;
+	width: 100%;
+}
+
+._fc-m-drag {
+	overflow: auto;
+	padding: 2px;
+	box-sizing: border-box;
+}
+
+._fc-m-drag,
+.draggable-drag {
+	background: #fff;
+	height: 100%;
+	position: relative;
+}
+
+._fc-m-drag > form,
+._fc-m-drag > form > .el-row {
+	height: 100%;
+}
+</style>
+
 <template>
 	<ElContainer class="_fc-designer" :style="'height:' + dragHeight">
 		<ElMain>
@@ -6,7 +154,7 @@
 					<template v-for="(item, index) in menuList" :key="index">
 						<div class="_fc-l-group">
 							<h4 class="_fc-l-title">{{ item.title }}</h4>
-							<draggable :group="{ name: 'default', pull: 'clone', put: false }" :sort="false" item-key="name" :list="item.list">
+							<draggable :group="{ name: 'default', pull: 'clone', put: false }" :sort="false" itemKey="name" :list="item.list">
 								<template #item="{ element }">
 									<div class="_fc-l-item">
 										<div class="_fc-l-icon">
@@ -23,10 +171,10 @@
 					<el-header class="_fc-m-tools" height="45">
 						<slot name="handle"></slot>
 						<el-button size="small" @click="setJson">导入JSON</el-button>
-						<el-button v-if="false" size="small" type="primary" @click="showJson">生成JSON</el-button>
+						<el-button size="small" type="primary" @click="showJson" v-if="false">生成JSON</el-button>
 						<el-button size="small" type="primary" @click="saveAsForm">暂存表单</el-button>
 						<el-button type="primary" plain round size="small" @click="previewFc"
-							><i class="fc-icon icon-preview"></i> {{ t('designer.preview') }}
+						><i class="fc-icon icon-preview"></i> {{ t('designer.preview') }}
 						</el-button>
 						<el-popconfirm
 							:title="t('designer.clearConfirmTitle')"
@@ -42,24 +190,24 @@
 					</el-header>
 					<ElMain style="background: #f5f5f5; padding: 20px">
 						<div class="_fc-m-drag">
-							<DragForm v-model:api="dragForm.api" :rule="dragForm.rule" :option="form.value"></DragForm>
+							<DragForm :rule="dragForm.rule" :option="form.value" v-model:api="dragForm.api"></DragForm>
 						</div>
 					</ElMain>
 				</ElContainer>
-				<ElAside v-if="!config || config.showConfig !== false" class="_fc-r" width="320px">
+				<ElAside class="_fc-r" width="320px" v-if="!config || config.showConfig !== false">
 					<ElContainer style="height: 100%">
 						<el-header height="40px" class="_fc-r-tabs">
 							<div
-								v-if="!!activeRule || (config && config.showFormConfig === false)"
 								class="_fc-r-tab"
 								:class="{ active: activeTab === 'props' }"
+								v-if="!!activeRule || (config && config.showFormConfig === false)"
 								@click="activeTab = 'props'"
 							>
 								{{ t('designer.config.component') }}
 							</div>
 							<div
-								v-if="!config || config.showFormConfig !== false"
 								class="_fc-r-tab"
+								v-if="!config || config.showFormConfig !== false"
 								:class="{ active: activeTab === 'form' && !!activeRule }"
 								@click="activeTab = 'form'"
 							>
@@ -67,9 +215,9 @@
 							</div>
 						</el-header>
 						<ElMain v-show="activeTab === 'form'" v-if="!config || config.showFormConfig !== false">
-							<DragForm v-model="form.value.form" v-model:api="form.api" :rule="form.rule" :option="form.option"></DragForm>
+							<DragForm :rule="form.rule" :option="form.option" v-model="form.value.form" v-model:api="form.api"></DragForm>
 						</ElMain>
-						<ElMain v-show="activeTab === 'props'" :key="activeRule ? activeRule._id : ''" style="padding: 0 20px">
+						<ElMain v-show="activeTab === 'props'" style="padding: 0 20px" :key="activeRule ? activeRule._id : ''">
 							<div>
 								<ElDivider v-if="showBaseRule">{{ t('designer.config.rule') }}</ElDivider>
 								<DragForm
@@ -77,7 +225,7 @@
 									v-model:api="baseForm.api"
 									:rule="baseForm.rule"
 									:option="baseForm.options"
-									:model-value="baseForm.value"
+									:modelValue="baseForm.value"
 									@change="baseChange"
 								></DragForm>
 								<ElDivider>{{ t('designer.config.props') }}</ElDivider>
@@ -85,7 +233,7 @@
 									v-model:api="propsForm.api"
 									:rule="propsForm.rule"
 									:option="propsForm.options"
-									:model-value="propsForm.value"
+									:modelValue="propsForm.value"
 									@change="propChange"
 									@removeField="propRemoveField"
 								></DragForm>
@@ -95,7 +243,7 @@
 									v-model:api="validateForm.api"
 									:rule="validateForm.rule"
 									:option="validateForm.options"
-									:model-value="validateForm.value"
+									:modelValue="validateForm.value"
 									@update:modelValue="validateChange"
 								></DragForm>
 							</div>
@@ -104,16 +252,16 @@
 				</ElAside>
 				<!-- 预览表单 -->
 				<ElDialog v-model="preview.state" width="800px" append-to-body>
-					<ViewForm v-if="preview.state" :rule="preview.rule" :option="preview.option"></ViewForm>
+					<ViewForm :rule="preview.rule" :option="preview.option" v-if="preview.state"></ViewForm>
 				</ElDialog>
 				<!-- 生成JSON / 导入JSON -->
-				<el-dialog v-model="state" :title="title[type]" class="_fc-t-dialog">
-					<div v-if="state" id="editor" ref="editorRef"></div>
-					<span v-if="err" style="color: red">输入内容格式有误!</span>
-					<template v-if="type > 2" #footer>
+				<el-dialog :title="title[type]" v-model="state" class="_fc-t-dialog">
+					<div ref="editorRef" id="editor" v-if="state"></div>
+					<span style="color: red" v-if="err">输入内容格式有误!</span>
+					<template #footer v-if="type > 2">
 						<span slot="footer" class="dialog-footer">
-							<el-button size="small" @click="state = false">取 消</el-button>
-							<el-button type="primary" size="small" @click="onOk">确 定</el-button>
+							<el-button @click="state = false" size="small">取 消</el-button>
+							<el-button type="primary" @click="onOk" size="small">确 定</el-button>
 						</span>
 					</template>
 				</el-dialog>
@@ -121,7 +269,6 @@
 		</ElMain>
 	</ElContainer>
 </template>
-
 <script>
 // 代码样式
 import 'codemirror/lib/codemirror.css'
@@ -397,7 +544,7 @@ export default defineComponent({
 				}
 			},
 			removeMenu(name) {
-				[...data.menuList].forEach((v, i) => {
+				;[...data.menuList].forEach((v, i) => {
 					if (v.name === name) {
 						data.menuList.splice(i, 1)
 					}
@@ -421,7 +568,7 @@ export default defineComponent({
 				data.menuList.forEach(v => {
 					let idx
 					if (is.String(item)) {
-						[...v.list].forEach((menu, idx) => {
+						;[...v.list].forEach((menu, idx) => {
 							if (menu.name === item) {
 								v.list.splice(idx, 1)
 							}
@@ -742,7 +889,7 @@ export default defineComponent({
 				if (!data.activeRule || data.validateForm.api[data.activeRule._id] !== data.activeRule) return
 				data.activeRule.validate = formData.validate || []
 				data.dragForm.api.refreshValidate()
-				data.dragForm.api.nextTick()()()()()()()()()()()()()()()()()()()(() => {
+				data.dragForm.api.nextTick(() => {
 					data.dragForm.api.clearValidateState(data.activeRule.__fc__.id)
 				})
 			},
@@ -786,9 +933,9 @@ export default defineComponent({
 				})
 				;['props', 'effect', 'attrs'].forEach(name => {
 					rule[name] &&
-						Object.keys(rule[name]).forEach(k => {
-							formData['formCreate' + upper(name) + '>' + k] = deepCopy(rule[name][k])
-						})
+					Object.keys(rule[name]).forEach(k => {
+						formData['formCreate' + upper(name) + '>' + k] = deepCopy(rule[name][k])
+					})
 				})
 				data.propsForm.value = formData
 
@@ -803,7 +950,7 @@ export default defineComponent({
 					}
 					data.validateForm.value = { validate: rule.validate ? [...rule.validate] : [] }
 					data.dragForm.api.refreshValidate()
-					data.dragForm.api.nextTick()()()()()()()()()()()()()()()()()()()(() => {
+					data.dragForm.api.nextTick(() => {
 						data.dragForm.api.clearValidateState(rule.__fc__.id)
 					})
 				}
@@ -905,7 +1052,7 @@ export default defineComponent({
 									const config = top.parent.config.config
 									const item = ruleList[config.children]
 									if (!item) return
-									;(!config.drag ? top.parent : top.parent.children[0]).children[0].children.push(methods.makeRule(item))
+										;(!config.drag ? top.parent : top.parent.children[0]).children[0].children.push(methods.makeRule(item))
 								},
 								copy: ({ self }) => {
 									const top = methods.getParent(self)
@@ -949,7 +1096,7 @@ export default defineComponent({
 								const config = self.children[0].config.config
 								const item = ruleList[config.children]
 								if (!item) return
-								;(!config.drag ? self : self.children[0]).children[0].children.push(methods.makeRule(item))
+									;(!config.drag ? self : self.children[0]).children[0].children.push(methods.makeRule(item))
 							},
 							copy: ({ self }) => {
 								vm.emit('copy', self.children[0])
@@ -1023,10 +1170,6 @@ export default defineComponent({
 				data.value = methods.getRule()
 				let val = JSON.parse(JSON.stringify(data.value))
 				vm.emit('export-json', val)
-			},
-			// form回显
-			initForm(json) {
-				methods.setRule(formCreate.parseJson(json))
 			}
 		}
 		data.dragForm.rule = methods.makeDragRule(methods.makeChildren(data.children))
@@ -1050,150 +1193,3 @@ export default defineComponent({
 	}
 })
 </script>
-<style>
-._fc-designer {
-	height: 100%;
-	min-height: 500px;
-	overflow: hidden;
-	cursor: default;
-	position: relative;
-}
-
-._fc-designer > .el-main {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	padding: 0px;
-}
-
-._fc-m .form-create ._fc-l-item {
-	background: #2e73ff;
-	width: 100%;
-	height: 10px;
-	overflow: hidden;
-	transition: all 0.3s ease;
-}
-
-._fc-l,
-._fc-m,
-._fc-r {
-	border-top: 1px solid #ececec;
-	box-sizing: border-box;
-}
-
-._fc-l-group {
-	padding: 0 12px;
-}
-
-._fc-l-title {
-	font-weight: 600;
-	font-size: 14px;
-	margin: 18px 0px 5px;
-}
-
-._fc-l-item {
-	display: inline-block;
-	background: #fff;
-	color: #000;
-	min-width: 70px;
-	width: 33.33%;
-	height: 70px;
-	line-height: 1;
-	text-align: center;
-	transition: all 0.2s ease;
-	cursor: pointer;
-}
-
-._fc-l-item i {
-	font-size: 21px;
-	display: inline-block;
-}
-
-._fc-l-item ._fc-l-name {
-	font-size: 12px;
-}
-
-._fc-l-item ._fc-l-icon {
-	padding: 10px 5px 12px;
-}
-
-._fc-l-item:hover {
-	background: #2e73ff;
-	color: #fff;
-}
-
-._fc-m-tools {
-	height: 40px;
-	align-items: center;
-	display: flex;
-	justify-content: flex-end;
-	border: 1px solid #ececec;
-	border-top: 0 none;
-}
-
-._fc-m-tools button.el-button {
-	padding: 5px 14px;
-	display: flex;
-	align-items: center;
-}
-
-._fc-m-tools .fc-icon {
-	font-size: 14px;
-	margin-right: 2px;
-}
-
-._fc-r .el-tabs__nav-wrap::after {
-	height: 1px;
-	background-color: #ececec;
-}
-
-._fc-r ._fc-r-tabs {
-	display: flex;
-	padding: 0;
-	border-bottom: 1px solid #ececec;
-}
-
-._fc-r ._fc-r-tab {
-	height: 40px;
-	box-sizing: border-box;
-	line-height: 40px;
-	display: inline-block;
-	list-style: none;
-	font-size: 14px;
-	font-weight: 600;
-	color: #303133;
-	position: relative;
-	flex: 1;
-	text-align: center;
-}
-
-._fc-r ._fc-r-tab.active {
-	color: #409eff;
-	border-bottom: 2px solid #409eff;
-}
-
-.drag-box {
-	min-height: 60px;
-	width: 100%;
-}
-
-._fc-m-drag {
-	overflow: auto;
-	padding: 2px;
-	box-sizing: border-box;
-}
-
-._fc-m-drag,
-.draggable-drag {
-	background: #fff;
-	height: 100%;
-	position: relative;
-}
-
-._fc-m-drag > form,
-._fc-m-drag > form > .el-row {
-	height: 100%;
-}
-</style>