|
|
<template >
|
|
|
<div @dragover="dragOver" style="width: 100%">
|
|
|
<a-row class="formTitle" type='flex' align='middle'>
|
|
|
{{data.form_name}}
|
|
|
</a-row>
|
|
|
<a-row class="formRow" style="height:calc(100% - 4rem);display: flex">
|
|
|
<a-col :span='3' class="colStyle" align="start">
|
|
|
<vue-scroll :ops="ops">
|
|
|
<template v-for="(item,index) in fieldArray">
|
|
|
<div class="item-title-style" :key="'title' + index">{{item.title}}</div>
|
|
|
<draggable :group="{ name: 'itemGroup', pull: 'clone', put: false, sort: false }" :value="item.list"
|
|
|
:sort="false" :clone="cloneComponent" @start="onDraggableHandle($event,item.list)"
|
|
|
animation="300" :key="'draggable'+index" @end="onDraggableHandle($event,item.list)"
|
|
|
forceFallback="true" chosenClass="chosen">
|
|
|
<div v-for="field in item.list" :key="field.field_type" class="item-style" @click="fieldClick(field)">
|
|
|
<my-icon :type="field.icon" style="margin-right: 0.2rem"></my-icon>
|
|
|
{{ field.field_name }}
|
|
|
</div>
|
|
|
</draggable>
|
|
|
</template>
|
|
|
</vue-scroll>
|
|
|
</a-col>
|
|
|
<a-col :span='17' class="colStyle" style="background-color: #f2f2f2;">
|
|
|
<a-row class="operateRow" type="flex" align="middle" justify="end" style="background-color: white">
|
|
|
<!-- <div class="operate-container-style">-->
|
|
|
<!-- <a-icon type="arrow-left" />-->
|
|
|
<!-- 撤销-->
|
|
|
<!-- </div>-->
|
|
|
<div class="operate-container-style" @click="returnList">
|
|
|
<a-icon type="export" />
|
|
|
返回
|
|
|
</div>
|
|
|
<div class="operate-container-style" @click="clearAll">
|
|
|
<a-icon type="delete"/>
|
|
|
清空
|
|
|
</div>
|
|
|
<div class="operate-container-style" @click="onPreview">
|
|
|
<a-icon type="search" />
|
|
|
预览
|
|
|
</div>
|
|
|
<div class="operate-container-style" @click="submitData">
|
|
|
<a-icon type="cloud-upload"/>
|
|
|
提交
|
|
|
</div>
|
|
|
<!-- <div class="operate-container-style">-->
|
|
|
<!-- <a-icon type="file" />-->
|
|
|
<!-- 生成JSON-->
|
|
|
<!-- </div>-->
|
|
|
</a-row>
|
|
|
<!-- <a-spin tip="正在加载中，请稍候..." size="large" :spinning="is_spinning" wrapperClassName="spin-self-style">-->
|
|
|
<div class="itemOuterContainer" style="height: calc(100% - 3rem);padding: 0.5rem 0;background-color: #f2f2f2">
|
|
|
<vue-scroll :ops="ops" style="height:100%">
|
|
|
<draggable group="itemGroup" v-model="fieldsList" class="itemInnerContainer"
|
|
|
:style="{width:form_width !== 100 ? form_width + '%':'calc(100% - 1rem)',margin: '0 auto',minHeight:draggableMinHeight}" handle=".move"
|
|
|
filter=".no-field" forceFallback="true" chosenClass="chosen" ghostClass="ghost" @add="onAdd">
|
|
|
<FieldItem v-for="field in fieldsList" :key="field.id" :item="field" @delete="deleteRowData" @copy="copyRowData" :design="true" @addCol="onAddCol"/>
|
|
|
<div v-if="fieldsList.length <= 0" class="no-field">请拖拽或者点击左侧字段添加表单内容</div>
|
|
|
</draggable>
|
|
|
</vue-scroll>
|
|
|
|
|
|
</div>
|
|
|
<!-- </a-spin>-->
|
|
|
</a-col>
|
|
|
<a-col :span='4' class="colStyle">
|
|
|
<a-tabs style="height: 100%">
|
|
|
<a-tab-pane key="tab1" tab="字段属性">
|
|
|
<FieldAttributeConfig v-if="Object.keys(selectedItem).length > 0" :fieldData="selectedItem" :form_id="data.form_id"/>
|
|
|
<div v-else :style="{height: innerItemContainerHeight,display:'flex',justifyContent:'center',alignItems:'center',fontSize:'1rem'}">
|
|
|
请选择显示属性字段</div>
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane key="tab2" tab="表单属性">
|
|
|
<FormAttributeConfig :dataConfig="getFormConfigData" ref="formAttributeCom"/>
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import draggable from 'vuedraggable'
|
|
|
import { Row, Col, Tabs, Icon} from 'ant-design-vue'
|
|
|
import { baseFields, advancedFields, businessFields, layoutFields,formConfig,commonConfig,curItem} from "./fieldAndFormConfig"
|
|
|
import _ from 'lodash'
|
|
|
import Common from '../../../utils/common'
|
|
|
import FieldItem from './FieldItem'
|
|
|
import FormAttributeConfig from './FormAttributeConfig'
|
|
|
import {EventConfig} from '../../../utils/eventConfig'
|
|
|
import FieldAttributeConfig from './FieldAttributeConfig'
|
|
|
import InterfaceConfig from './interfaceConfig';
|
|
|
import { Modal } from 'ant-design-vue'
|
|
|
import StaticParams from '../../../global-llibs/staticParams'
|
|
|
import TypesCheck from '../../../global-llibs/under-score/types-check'
|
|
|
import CommonOperate from '../utils/commonOperate';
|
|
|
// import Upload from '../../components/common/uploader/Upload'
|
|
|
// import RichEditor from '../../components/common/richEditor/RichEditor'
|
|
|
const MyIcon = Icon.createFromIconfontCN({
|
|
|
scriptUrl: '//at.alicdn.com/t/font_2575830_yvczzbhmrtn.js', // 在 iconfont.cn 上生成
|
|
|
});
|
|
|
export default {
|
|
|
name: 'FormDesign',
|
|
|
props:['formData'],
|
|
|
data: function () {
|
|
|
return {
|
|
|
draggableMinHeight:document.body.clientHeight - 8 * 16 + "px",
|
|
|
ops:StaticParams.scrollOption,
|
|
|
selectedItem:{},
|
|
|
commonConfig,
|
|
|
formConfig,
|
|
|
curItem,
|
|
|
data:this.formData,
|
|
|
// data:Object.assign(this.formData, {formConfig:_.cloneDeep(formConfig)}),
|
|
|
baseFields,
|
|
|
advancedFields,
|
|
|
businessFields,
|
|
|
layoutFields,
|
|
|
fieldsList: [],
|
|
|
fieldArray:[
|
|
|
{title : '基础字段',list: baseFields},
|
|
|
{title : '高级字段',list: advancedFields},
|
|
|
{title : '业务字段',list: businessFields},
|
|
|
{title : '布局字段',list: layoutFields}
|
|
|
],
|
|
|
is_spinning:true,//是否为加载总的状态,
|
|
|
form_width:100,
|
|
|
submitList:[]
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
innerItemContainerHeight: function () {
|
|
|
return document.body.clientHeight - 8 * 16 + "px";
|
|
|
},
|
|
|
getFormConfigData: function () {
|
|
|
return this.data.formConfig ?_.cloneDeep(this.data.formConfig):_.cloneDeep(this.formConfig)
|
|
|
}
|
|
|
},
|
|
|
mounted: function (){
|
|
|
this.$bus.on(EventConfig.FORM_WIDTH_CHANGE,this.changeFormWidth)
|
|
|
this.$bus.on("clickItem",this.selectItem)
|
|
|
this.InterfaceConfig.callInterface([{
|
|
|
url:InterfaceConfig.getCustomizeFormFieldByFormId.url,
|
|
|
method:InterfaceConfig.getCustomizeFormFieldByFormId.method,
|
|
|
params:{
|
|
|
org_id:this.BaseConfig.person_info_my.bureau_id,
|
|
|
form_id:this.data.form_id
|
|
|
},
|
|
|
isTestLogin:InterfaceConfig.getCustomizeFormFieldByFormId.isTestLogin
|
|
|
}],(result)=>{
|
|
|
if (result && result[0]){
|
|
|
let data = result[0].data
|
|
|
if (data.code === 2000){
|
|
|
this.is_spinning = false;
|
|
|
// this.data = data.data;
|
|
|
this.data.form_json = data.data.form_json
|
|
|
this.data.form_config_json = data.data.form_config_json
|
|
|
this.fieldsList = this.data.form_json && this.data.form_json !== ""?JSON.parse(this.data.form_json): []
|
|
|
|
|
|
if(this.fieldsList.length === 0){
|
|
|
let person_num_data = _.cloneDeep(baseFields.filter((item)=>{return item.tag === "input"})[0])
|
|
|
Object.keys(this.commonConfig).forEach((prop)=>{
|
|
|
this.$set(person_num_data.props,prop,this.commonConfig[prop])
|
|
|
});
|
|
|
|
|
|
let person_name_data = _.cloneDeep(person_num_data);
|
|
|
let person_org_dept = _.cloneDeep(person_num_data);
|
|
|
|
|
|
person_num_data.id = "input_" + Common.getRandom(12);
|
|
|
person_num_data.field_name = "教师编号";
|
|
|
person_num_data.props.field_input_type = 2;
|
|
|
person_num_data.props.filed_auto_input_info = "person_num";
|
|
|
person_num_data.props.can_search = false;
|
|
|
person_num_data.props.is_search = false;
|
|
|
|
|
|
person_name_data.id = "input_" + Common.getRandom(12);
|
|
|
person_name_data.field_name = "教师姓名";
|
|
|
person_name_data.props.field_input_type = 2;
|
|
|
person_name_data.props.filed_auto_input_info = "person_name";
|
|
|
person_name_data.props.can_search = false;
|
|
|
person_name_data.props.is_search = false;
|
|
|
|
|
|
person_org_dept.id = "input_" + Common.getRandom(12);
|
|
|
person_org_dept.field_name = "单位(部门)";
|
|
|
person_org_dept.props.field_input_type = 2;
|
|
|
person_org_dept.props.filed_auto_input_info = "org_dept_name";
|
|
|
person_org_dept.props.can_search = false;
|
|
|
person_org_dept.props.is_search = false;
|
|
|
|
|
|
this.fieldsList.push(person_num_data);
|
|
|
this.fieldsList.push(person_name_data);
|
|
|
this.fieldsList.push(person_org_dept);
|
|
|
}else{//去掉实际在布局字段中的数据
|
|
|
this.fieldsList = this.fieldsList.filter((item)=>{return item.is_main !== false})
|
|
|
}
|
|
|
|
|
|
if (this.data.form_config_json && this.data.form_config_json !== ""){
|
|
|
this.data.formConfig = this.$set(this.data,"formConfig",JSON.parse(this.data.form_config_json))
|
|
|
this.form_width = this.data.formConfig.form_width
|
|
|
}
|
|
|
// this.data.formConfig = this.data.form_config_json && this.data.form_config_json !== ""?JSON.parse(this.data.form_config_json):{}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
beforeDestroy: function() {
|
|
|
this.$bus.off(EventConfig.FORM_WIDTH_CHANGE,this.changeFormWidth)
|
|
|
this.$bus.off("clickItem",this.selectItem)
|
|
|
},
|
|
|
methods: {
|
|
|
fieldClick:function(field){
|
|
|
this.curItem.item = _.cloneDeep(field);
|
|
|
this.curItem.item.id = this.curItem.item.tag + "_" + Common.getRandom(12);
|
|
|
// if(this.curItem.item.tag !== "label"){
|
|
|
Object.keys(this.commonConfig).forEach((prop)=>{
|
|
|
this.$set(this.curItem.item.props,prop,this.commonConfig[prop])
|
|
|
});
|
|
|
if (this.$refs.formAttributeCom){
|
|
|
this.curItem.item.props.label_alignment = this.$refs.formAttributeCom.config.label_alignment
|
|
|
this.curItem.item.props.label_width = this.$refs.formAttributeCom.config.label_width
|
|
|
this.curItem.item.props.label_prefix = this.$refs.formAttributeCom.config.label_prefix
|
|
|
this.curItem.item.props.label_suffix = this.$refs.formAttributeCom.config.label_suffix
|
|
|
}
|
|
|
if (this.curItem.item.field_type <=24 && this.curItem.item.field_type >= 21){
|
|
|
this.curItem.item.props.show_title = false;
|
|
|
|
|
|
if (this.curItem.item.field_type === 23){//子表单对于标题特殊处理
|
|
|
this.curItem.item.props.label_alignment = "center"
|
|
|
}
|
|
|
}
|
|
|
this.fieldsList.push(this.curItem.item);
|
|
|
this.selectedItem = this.curItem.item
|
|
|
this.$bus.emit("clickItem",this.curItem.item);
|
|
|
},
|
|
|
clearAll:function(){
|
|
|
if (this.fieldsList.length > 3){
|
|
|
this.fieldsList.splice(3);
|
|
|
}else{
|
|
|
this.$toast("未添加任何字段，无需清空")
|
|
|
}
|
|
|
},
|
|
|
onPreview:function(){
|
|
|
if (!this.fieldsList || this.fieldsList.length === 0){
|
|
|
Modal.warning({
|
|
|
title:"预览失败",
|
|
|
centered:true,
|
|
|
content:"当前表单没有字段，无法预览",
|
|
|
okText:'我知道了'
|
|
|
})
|
|
|
}else{
|
|
|
StaticParams.showPopModal(this,'预览','views/teacherInfo/formCommon/ViewForm.vue',
|
|
|
{"fieldsList":_.cloneDeep(this.fieldsList),"form_width":this.form_width},false,true,null,"calc(55% + 48px)","preview-style")
|
|
|
}
|
|
|
},
|
|
|
returnList:function(){
|
|
|
this.curItem.item = {}
|
|
|
this.$emit("back",null)
|
|
|
},
|
|
|
onDraggableHandle: function(e,list){
|
|
|
// console.log(e);
|
|
|
// console.log(list);
|
|
|
let tag = list[e.oldIndex].tag;
|
|
|
if (tag === "son_form" || tag === "table" || tag === "grid" || tag === "divider"){
|
|
|
this.fieldsList.forEach((item)=>{
|
|
|
if (item.tag === "son_form"){
|
|
|
// eslint-disable-next-line no-debugger
|
|
|
// debugger;
|
|
|
this.$bus.emit(EventConfig.SON_FORM_DISABLED,e.type === "start")
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
selectItem: function(data) {
|
|
|
if (this.selectedItem.id !== data.id){
|
|
|
if (data.tag === "td"){
|
|
|
this.selectedItem = {};
|
|
|
}else{
|
|
|
this.selectedItem = data;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
changeFormWidth: function (value) {
|
|
|
this.form_width = value
|
|
|
},
|
|
|
dragOver: function (event) {
|
|
|
event.preventDefault()
|
|
|
event.dataTransfer.dropEffect = 'move'
|
|
|
},
|
|
|
cloneComponent: function(origin) {
|
|
|
this.curItem.item = _.cloneDeep(origin);
|
|
|
return this.curItem.item
|
|
|
},
|
|
|
onAdd: function (e) {
|
|
|
if (e.from.className === "sonFormDraggble"){
|
|
|
this.$set(this.fieldsList[e.newIndex].props,"is_sonForm_field",false)
|
|
|
}else if(e.from.className === "td-draggable-style"){
|
|
|
this.$set(this.fieldsList[e.newIndex].props,"is_table_field",false)
|
|
|
}else{
|
|
|
this.curItem.item.id = this.curItem.item.tag + "_" + Common.getRandom(12);
|
|
|
// if(this.curItem.item.tag !== "label"){
|
|
|
Object.keys(this.commonConfig).forEach((prop)=>{
|
|
|
this.$set(this.curItem.item.props,prop,this.commonConfig[prop])
|
|
|
});
|
|
|
if (this.$refs.formAttributeCom){
|
|
|
this.curItem.item.props.label_alignment = this.$refs.formAttributeCom.config.label_alignment
|
|
|
this.curItem.item.props.label_width = this.$refs.formAttributeCom.config.label_width
|
|
|
this.curItem.item.props.label_prefix = this.$refs.formAttributeCom.config.label_prefix
|
|
|
this.curItem.item.props.label_suffix = this.$refs.formAttributeCom.config.label_suffix
|
|
|
}
|
|
|
// }
|
|
|
}
|
|
|
|
|
|
if (this.curItem.item.field_type <=24 && this.curItem.item.field_type >= 21){
|
|
|
this.curItem.item.props.show_title = false;
|
|
|
|
|
|
if (this.curItem.item.field_type === 23){//子表单对于标题特殊处理
|
|
|
this.curItem.item.props.label_alignment = "center"
|
|
|
}
|
|
|
}
|
|
|
this.selectedItem = this.curItem.item
|
|
|
this.$bus.emit("clickItem",this.curItem.item)
|
|
|
},
|
|
|
copyRowData: function (data) {
|
|
|
let copyRowData = _.cloneDeep(data[0]);
|
|
|
let index = this.fieldsList.findIndex((field)=>{return field.id === copyRowData.id});
|
|
|
CommonOperate.redefineTableOrGridId(copyRowData);
|
|
|
this.fieldsList.splice(index+1,0,copyRowData)
|
|
|
this.curItem.item = copyRowData;
|
|
|
this.selectedItem = this.curItem.item
|
|
|
this.$bus.emit("clickItem",copyRowData)
|
|
|
},
|
|
|
onAddCol:function(data){
|
|
|
if (data.props.cols.length < 24){
|
|
|
let col = _.cloneDeep({tag:"col",id:"col_" + Common.getRandom(12),span:24,offset:0,pull:0,push:0,attributeUrl:"ColItemAttribute",data:[]})
|
|
|
data.props.cols.push(col);
|
|
|
}
|
|
|
},
|
|
|
deleteRowData: function (data) {
|
|
|
let item = data[0];
|
|
|
if (CommonOperate.checkHasChangelessField(item)){
|
|
|
Modal.warning({
|
|
|
title:"删除失败",
|
|
|
centered:true,
|
|
|
content:"当前字段包含类目固定字段（教师编号，教师姓名，单位(部门)），故无法删除，请将固定字段从此字段中移除，再进行删除操作"
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
let index = this.fieldsList.findIndex((field)=>{return field.id === item.id})
|
|
|
if (this.fieldsList.length > 1){
|
|
|
if (index === this.fieldsList.length - 1){
|
|
|
this.curItem.item = this.fieldsList[index - 1];
|
|
|
}else{
|
|
|
this.curItem.item = this.fieldsList[index + 1];
|
|
|
}
|
|
|
this.selectedItem = this.curItem.item
|
|
|
this.$bus.emit("clickItem",this.curItem.item)
|
|
|
}else{
|
|
|
this.selectedItem = {}
|
|
|
this.curItem.item = {}
|
|
|
}
|
|
|
this.fieldsList.splice(index,1)
|
|
|
},
|
|
|
extractData:function(item){
|
|
|
if (item.tag === "grid"){//栅格
|
|
|
if(item.props.cols.length === 0 || item.props.cols.every((col)=>{return !col.data || col.data.length === 0})){
|
|
|
Modal.warning({
|
|
|
title: '表单提交失败',
|
|
|
content:"栅格布局字段中最少要包含一个字段",
|
|
|
okText:'我知道了',
|
|
|
centered:true
|
|
|
})
|
|
|
return false;
|
|
|
}else{
|
|
|
for (let i = 0; i < item.props.cols.length; i++){
|
|
|
let col = item.props.cols[i];
|
|
|
for (let j = 0; j < col.data.length; j++){
|
|
|
let son = col.data[j];
|
|
|
if (son.tag === "grid" || son.tag === "table"){
|
|
|
if (this.extractData(son) === false){
|
|
|
return false
|
|
|
}
|
|
|
}else{
|
|
|
son.is_main = false;//不在主表单内，在布局字段内
|
|
|
this.submitList.push(son)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}else{
|
|
|
if (item.props.tr.every((tr)=>{ return tr.td.every((td)=>{ return !td.data || td.data.length === 0})})){
|
|
|
Modal.warning({
|
|
|
title: '表单提交失败',
|
|
|
content:"表格布局字段中最少要包含一个字段",
|
|
|
okText:'我知道了',
|
|
|
centered:true
|
|
|
})
|
|
|
return false;
|
|
|
}else{
|
|
|
for (let i = 0; i < item.props.tr.length; i++){
|
|
|
let tr = item.props.tr[i];
|
|
|
for (let j = 0; j < tr.td.length; j++){
|
|
|
let td = tr.td[j];
|
|
|
for (let k = 0; k < td.data.length; k++){
|
|
|
let data = td.data[k];
|
|
|
if (data.tag === "grid" || data.tag === "table"){
|
|
|
if (this.extractData(data) === false){
|
|
|
return false
|
|
|
}
|
|
|
}else{
|
|
|
data.is_main = false;//不在主表单内，在布局字段内
|
|
|
this.submitList.push(data)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return true;
|
|
|
},
|
|
|
submitData:function () {//提交表单信息
|
|
|
this.submitList = _.cloneDeep(this.fieldsList);
|
|
|
if (this.submitList.length === 3){
|
|
|
Modal.warning({
|
|
|
title: '表单提交失败',
|
|
|
content:"表单中最少要包含一个除默认字段（教师编号、教师姓名、单位(部门)）的字段",
|
|
|
okText:'我知道了',
|
|
|
centered:true
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
let extract = true;
|
|
|
for (let i = 0; i < this.submitList.length; i++){
|
|
|
let item = this.submitList[i];
|
|
|
if (item.tag === "grid" || item.tag === "table"){//判断是栅格和表格布局字段，提取字段内容
|
|
|
item.field_type = item.tag === "grid"?240:210;
|
|
|
extract = this.extractData(item);
|
|
|
if (extract === false){
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (extract === false){
|
|
|
return;
|
|
|
}
|
|
|
if (this.testData(this.submitList)){
|
|
|
this.organizeData(this.submitList);
|
|
|
let has_certificate = 0;
|
|
|
if (this.submitList.some((item)=>{return item.is_certificate === 1})){
|
|
|
has_certificate = 1
|
|
|
}
|
|
|
|
|
|
let fom_config = this.$refs.formAttributeCom?this.$refs.formAttributeCom.config:this.formConfig
|
|
|
fom_config.include_certificate = has_certificate
|
|
|
|
|
|
let params = {
|
|
|
org_id:this.BaseConfig.person_info_my.bureau_id,
|
|
|
form_id:this.data.form_id,
|
|
|
form_json:JSON.stringify(this.submitList),
|
|
|
form_config_json:JSON.stringify(fom_config),
|
|
|
person_id:this.BaseConfig.userInfo.person_id_cookie,
|
|
|
system_id:10
|
|
|
}
|
|
|
|
|
|
this.InterfaceConfig.callInterface([{
|
|
|
url:InterfaceConfig.saveAllCustomizeFormField.url,
|
|
|
method:InterfaceConfig.saveAllCustomizeFormField.method,
|
|
|
params:params,
|
|
|
isTestLogin:InterfaceConfig.saveAllCustomizeFormField.isTestLogin
|
|
|
}],(result)=>{
|
|
|
if (result && result[0]){
|
|
|
this.curItem.item = {}
|
|
|
if (result[0].data.code === 2000){
|
|
|
this.$toast("表单提交成功")
|
|
|
this.$emit("back")
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
organizeData:function(ary,isChild = false){
|
|
|
let i = 1;
|
|
|
let j = 81;
|
|
|
let k = 101;
|
|
|
ary.forEach((field)=>{
|
|
|
let curType = parseInt(field.field_type);
|
|
|
if (curType !== 20 && curType !== 21 && curType !== 22 && curType !== 23 && curType !== 24 && curType !== 210
|
|
|
&& curType !== 211 && curType !== 230 && curType !== 231 && curType !== 240 && curType !== 241){
|
|
|
field.is_input_field = 1//输入场
|
|
|
if (field.props.is_must){//是否必填
|
|
|
field.field_must_input = 1
|
|
|
}else{
|
|
|
field.field_must_input = 0
|
|
|
}
|
|
|
|
|
|
if (isChild === false && field.props.can_search === true && field.props.is_search === true){//是否可以作为必填字段
|
|
|
field.is_query = 1
|
|
|
}else{
|
|
|
field.is_query = 0
|
|
|
}
|
|
|
|
|
|
if (curType === 1){//单行文本组件的特殊处理
|
|
|
field.field_input_type = parseInt(field.props.field_input_type)
|
|
|
if (field.field_input_type === 2){
|
|
|
field.is_input_field = 0//不是输入场
|
|
|
field.filed_auto_input_info = field.props.filed_auto_input_info
|
|
|
}else {
|
|
|
if (field.props.data_source_form_id){
|
|
|
field.data_source_form_id = field.props.data_source_form_id
|
|
|
field.data_source_field_id = field.props.data_source_field_id
|
|
|
field.compare_standard = field.props.compare_standard
|
|
|
}
|
|
|
}
|
|
|
}else if (curType === 3){//单选按钮的特殊处理
|
|
|
field.is_multiple_choice = 0
|
|
|
// field.data_resource = parseInt(field.props.data_resource);
|
|
|
if (parseInt(field.data_resource) === 2){
|
|
|
field.data_resource_info = JSON.stringify(field.props.datas);
|
|
|
}
|
|
|
|
|
|
}else if (curType === 4){//多选框组特殊处理
|
|
|
field.is_multiple_choice = 1
|
|
|
if (parseInt(field.data_resource) === 2){
|
|
|
field.data_resource_info = JSON.stringify(field.props.datas);
|
|
|
}
|
|
|
}else if (curType === 5){//时间日期组件特殊处理
|
|
|
field.date_format = field.props.format
|
|
|
}else if(curType === 6){//下拉选择
|
|
|
// field.data_resource = parseInt(field.props.data_resource);
|
|
|
if (parseInt(field.data_resource) === 2){
|
|
|
field.data_resource_info = JSON.stringify(field.props.datas);
|
|
|
}
|
|
|
if(field.props.mode === "default"){
|
|
|
field.is_multiple_choice = 0
|
|
|
}else{
|
|
|
field.is_multiple_choice = 1;
|
|
|
}
|
|
|
}else if (curType === 9){//图片字段特殊处理
|
|
|
field.is_certificate = field.props.is_certificate === true ? 1 : 0
|
|
|
}else if(curType === 17 || curType === 18){
|
|
|
field.is_multiple_choice = field.props.is_multiple_choice === true?1:0;
|
|
|
}else if(curType === 27){
|
|
|
field.data_source_form_id = field.props.data_source_form_id;
|
|
|
field.data_source_field_id = field.props.data_source_field_id;
|
|
|
field.compare_standard = field.props.compare_standard;
|
|
|
}
|
|
|
|
|
|
if(field.is_input_field === 1){
|
|
|
if (field.column_name && field.column_name !== ""){//已存在column_name 已有字段
|
|
|
if (field.props.max_length === "text" || parseInt(field.props.max_length) > 200){
|
|
|
k = parseInt(field.column_name.substring(9,field.column_name.length)) + 1
|
|
|
}else if (parseInt(field.props.max_length) <= 200 && parseInt(field.props.max_length) > 50){
|
|
|
j = parseInt(field.column_name.substring(9,field.column_name.length)) + 1
|
|
|
}else{
|
|
|
i = parseInt(field.column_name.substring(9,field.column_name.length)) + 1
|
|
|
}
|
|
|
}else{//不存在column_name 新添加字段
|
|
|
let columnName = ""
|
|
|
if (field.props.max_length === "text" || parseInt(field.props.max_length) > 200){
|
|
|
columnName = "itemvalue" + k;
|
|
|
while (ary.some((item)=>{return item.column_name === columnName})){
|
|
|
k += 1;
|
|
|
columnName = "itemvalue" + k;
|
|
|
}
|
|
|
field.column_name = columnName;
|
|
|
k += 1;
|
|
|
}else if (parseInt(field.props.max_length) <= 200 && parseInt(field.props.max_length) > 50){
|
|
|
columnName = "itemvalue" +j;
|
|
|
while (ary.some((item)=>{return item.column_name === columnName})){
|
|
|
j += 1;
|
|
|
columnName = "itemvalue" + j;
|
|
|
}
|
|
|
field.column_name = columnName;
|
|
|
j += 1;
|
|
|
}else{
|
|
|
columnName = "itemvalue" +i;
|
|
|
while (ary.some((item)=>{return item.column_name === columnName})){
|
|
|
i += 1;
|
|
|
columnName = "itemvalue" + i;
|
|
|
}
|
|
|
field.column_name = columnName;
|
|
|
i += 1;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}else {//处理非输入场字段数据
|
|
|
field.is_input_field = 0;
|
|
|
if (curType !== 20 && curType !== 22){//字段为子表单 栅格 表格
|
|
|
if(field.props.data && field.props.data.length > 0){//有子字段
|
|
|
field.field_type = parseInt(field.field_type.toString().substr(0,2) + "1")
|
|
|
this.organizeData(field.props.data,true);
|
|
|
field.child_form_json = JSON.stringify(field.props.data);
|
|
|
let child_has_certificate = 0;
|
|
|
if (field.props.data.some((item)=>{return item.is_certificate === 1})){
|
|
|
child_has_certificate = 1
|
|
|
}
|
|
|
|
|
|
field.child_form_config_json = JSON.stringify({
|
|
|
data_num_type:field.props.is_can_add === true?1:2,
|
|
|
include_certificate:child_has_certificate,
|
|
|
})
|
|
|
}else{
|
|
|
field.field_type = parseInt(field.field_type.toString().substr(0,2) + "0")
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
testData:function (ary,isChild = false,index=0) {
|
|
|
let i = 0;//50的字段个数
|
|
|
let j = 0;//51到200的字段个数
|
|
|
let k = 0;//200个字符以上的字段个数
|
|
|
let stopTest = false;
|
|
|
for(let m = 0; m < ary.length; m++){
|
|
|
let item = ary[m];
|
|
|
if (item.tag === "son_form"){
|
|
|
//子表单
|
|
|
index += 1
|
|
|
let result = true;
|
|
|
if (!item.props.data || item.props.data.length === 0){
|
|
|
Modal.warning({
|
|
|
title: '表单提交失败',
|
|
|
content:"子表单中至少包含一个字段",
|
|
|
okText:'我知道了',
|
|
|
centered:true
|
|
|
})
|
|
|
result = false
|
|
|
}else {
|
|
|
result = this.testData(item.props.data,true,index)
|
|
|
}
|
|
|
if (result === false){
|
|
|
stopTest = true;
|
|
|
break;
|
|
|
}
|
|
|
}else{
|
|
|
if ([3,4,6].some((type)=>{return type === item.field_type}) && (item.props.datas === null || item.props.datas === undefined ||
|
|
|
(TypesCheck.isString(item.props.datas) && item.props.datas === "") || (TypesCheck.isArray(item.props.datas) && item.props.datas.length === 0))){
|
|
|
Modal.warning({
|
|
|
title: '表单提交失败',
|
|
|
content:"请设置“" + item.field_name + "”字段的数据源",
|
|
|
okText:'我知道了',
|
|
|
centered:true
|
|
|
})
|
|
|
stopTest = true;
|
|
|
break;
|
|
|
}else if(item.field_type === 27){
|
|
|
let tips = "";
|
|
|
if (!item.props.data_source_form_id || item.props.data_source_form_id === ""){
|
|
|
// eslint-disable-next-line no-debugger
|
|
|
tips = "请选择“" + item.field_name + "”字段的数据更新来源表单";
|
|
|
}else if (!item.props.data_source_field_id || item.props.data_source_field_id === ""){
|
|
|
tips = "请选择“" + item.field_name + "”字段的数据更新来源字段";
|
|
|
}else if (!item.props.compare_standard){
|
|
|
tips = "请选择“" + item.field_name + "”字段的更新关联数据规则";
|
|
|
}
|
|
|
|
|
|
if (tips !== ""){
|
|
|
Modal.warning({
|
|
|
title: '表单提交失败',
|
|
|
content:tips,
|
|
|
okText:'我知道了',
|
|
|
centered:true
|
|
|
})
|
|
|
stopTest = true;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (item.props.max_length){
|
|
|
if (item.props.max_length === "text" || parseInt(item.props.max_length) > 200){
|
|
|
k += 1
|
|
|
}else if (parseInt(item.props.max_length) <= 50){
|
|
|
i += 1
|
|
|
}else{
|
|
|
j += 1;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (stopTest){
|
|
|
return false;
|
|
|
}
|
|
|
if (i > 80){
|
|
|
Modal.warning({
|
|
|
title: '表单提交失败',
|
|
|
content:(isChild?'子表单' + index:"") + '字段值最大限制为1-50（包含50）的字段不能超过80个，请更改后再试',
|
|
|
okText:'我知道了',
|
|
|
centered:true
|
|
|
})
|
|
|
return false;
|
|
|
}else if(j > 20){
|
|
|
Modal.warning({
|
|
|
title: '表单提交失败',
|
|
|
content:(isChild?'子表单' + index:"") + '字段值最大限制为51-200（包含200）的字段不能超过20个，请更改后再试',
|
|
|
okText:'我知道了',
|
|
|
centered:true
|
|
|
})
|
|
|
return false;
|
|
|
}else if (k > 20){
|
|
|
Modal.warning({
|
|
|
title: '表单提交失败',
|
|
|
content: (isChild?'子表单' + index:"") + '字段值最大限制为200（包含不限制）以外的字段不能超过20个，请更改后再试',
|
|
|
okText:'我知道了',
|
|
|
centered:true
|
|
|
})
|
|
|
return false;
|
|
|
}
|
|
|
return true
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
ARow: Row,
|
|
|
ACol: Col,
|
|
|
ATabs: Tabs,
|
|
|
ATabPane: Tabs.TabPane,
|
|
|
AIcon: Icon,
|
|
|
draggable,
|
|
|
FieldItem,
|
|
|
FormAttributeConfig,
|
|
|
FieldAttributeConfig,
|
|
|
MyIcon
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
@import "style/formDesign";
|
|
|
.preview-style{
|
|
|
.ant-modal-body{
|
|
|
height: 50rem;
|
|
|
max-height: 800px;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
