From 54015e3d0c4a004e067dd3a07baaa02e8b9d7a85 Mon Sep 17 00:00:00 2001
From: Administrator <123456>
Date: Tue, 25 May 2021 20:08:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=B1=E6=80=9D=E7=A6=B9=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=EF=BC=9A=E6=95=99=E5=B8=88=E4=BF=A1=E6=81=AFvue=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fieldComponent/FieldRowItem.vue           | 179 ++++++++++++++++++
 .../formCommon/EditAndViewForm.vue            |  89 +++++++--
 .../systemConfig/FieldAttributeConfig.vue     |  83 ++++----
 .../teacherInfo/systemConfig/FieldItem.vue    |  32 +++-
 .../teacherInfo/systemConfig/FieldRowItem.vue | 109 -----------
 .../teacherInfo/systemConfig/FormDesign.vue   | 171 +++++++++++------
 .../attributeConfig/ColItemAttribute.vue      |  47 +++++
 .../attributeConfig/FieldRowItemAttribute.vue |  73 +++++++
 .../systemConfig/fieldAndFormConfig.js        |   3 +-
 .../systemConfig/style/fieldRowItem.scss      |  17 +-
 10 files changed, 564 insertions(+), 239 deletions(-)
 create mode 100644 src/views/teacherInfo/fieldComponent/FieldRowItem.vue
 delete mode 100644 src/views/teacherInfo/systemConfig/FieldRowItem.vue
 create mode 100644 src/views/teacherInfo/systemConfig/attributeConfig/ColItemAttribute.vue
 create mode 100644 src/views/teacherInfo/systemConfig/attributeConfig/FieldRowItemAttribute.vue

diff --git a/src/views/teacherInfo/fieldComponent/FieldRowItem.vue b/src/views/teacherInfo/fieldComponent/FieldRowItem.vue
new file mode 100644
index 0000000..1e2160b
--- /dev/null
+++ b/src/views/teacherInfo/fieldComponent/FieldRowItem.vue
@@ -0,0 +1,179 @@
+<template>
+    <a-row :class="{'grid-row-style':disabled === true}" :type="data.props.type" :align="data.props.align"
+           :justify="data.props.justify" :gutter="data.props.gutter" style="width: 100%;flex-flow: initial">
+        <a-col v-for="(col,index) in data.props.cols" :key="col.id" :span="col.span" :pull="col.pull" :push="col.push" :offset="col.offset"
+               :class="[{'col-style':disabled === true,'col-selected-style':(selected_id === col.id || curItem.item.id === col.id) && disabled}]"
+               @click.stop="onClick(col)" style="flex: initial">
+            <draggable v-if="disabled" v-model="col.data" group="itemGroup" forceFallback="true" chosenClass="chosen" ghostClass="ghost" class="col-draggable-style"
+                       @add="(e)=>{onAdd(col,e)}" handle=".move">
+                <field-item v-for="item in col.data" :key="item.id" :item="item" :design="true" :is_edit="is_edit"
+                            @delete="(d)=>{deleteRowData(col,d)}" @copy="(d)=>{copyRowData(col,d)}"/>
+            </draggable>
+            <template v-else>
+                <field-item v-for="item in col.data" :key="item.id" :item="item" :design="false" :is_edit="is_edit"/>
+            </template>
+            <div v-if="disabled && selected_id === col.id" class="col-operate-style">
+                <a-icon type="copy" title="复制" class="icon-style" @click.stop="addCol(index,col)"/>
+                <a-icon v-if="data.props.cols.length > 1" type="delete" title="删除" class="icon-style" @click.stop="deleteCol(index)"/>
+            </div>
+        </a-col>
+    </a-row>
+</template>
+
+<script>
+    import {Row,Icon,Col} from 'ant-design-vue'
+    import _ from 'lodash'
+    import Common from '../../../utils/common'
+    import draggable from 'vuedraggable'
+    import FieldItem from '../systemConfig/FieldItem'
+    import {curItem,commonConfig} from '../systemConfig/fieldAndFormConfig'
+    export default {
+        name: "FieldRowItem",
+        props: ["field","disabled","is_edit"],
+        data: function (){
+            return {
+                data:this.field,
+                selected_id:null,
+                initColItem:{tag:"col",id:"col_" + Common.getRandom(12),span:24,offset:0,pull:0,push:0,attributeUrl:"ColItemAttribute",data:[]},
+                curItem,
+                commonConfig
+            }
+        },
+        components: {
+            ARow:Row,
+            AIcon:Icon,
+            ACol:Col,
+            draggable,
+            FieldItem
+        },
+        beforeMount:function(){
+            if (this.data.props.cols.length === 0){
+                this.data.props.cols.push(_.cloneDeep(this.initColItem))
+            }
+        },
+        methods :{
+            onAdd:function(col,e){
+                if (e.from.className === "itemInnerContainer" || e.from.className === "sonFormDraggble"){
+                    this.$set(this.data.props.data[e.newIndex].props,"label_alignment",this.commonConfig["label_alignment"])//标题对题方式变为表单属性设置的标题对齐方式
+                    if (e.from.className === "sonFormDraggble"){//子表单拖来的字段，其属性改非子表单
+                        this.$set(col.data[e.newIndex].props,"is_sonForm_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])
+                        });
+                    }else{
+                        this.$set(this.curItem.item.props,"label_alignment",this.commonConfig["label_alignment"])
+                    }
+                    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.$bus.emit("clickItem",this.curItem.item)
+                }
+            },
+            deleteRowData:function(col,data){
+                let item = data[0];
+                let index = col.data.findIndex((field)=>{return field.id === item.id})
+                if (col.data.length > 1){
+                    if (index === col.data.length - 1){
+                        this.curItem.item = col.data[index - 1];
+                    }else{
+                        this.curItem.item = col.data[index + 1];
+                    }
+                    // this.selectedItem = this.curItem.item
+                    this.$bus.emit("clickItem",this.curItem.item)
+                }else{
+                    // this.selectedItem = {}
+                    this.curItem.item = {}
+                }
+                col.data.splice(index,1)
+            },
+            copyRowData:function(col,data){
+                let copyRowData = _.cloneDeep(data[0]);
+                let index = col.data.findIndex((field)=>{return field.id === copyRowData.id})
+                copyRowData.id = copyRowData.tag + "_" + Common.getRandom(12);
+                col.data.splice(index+1,0,copyRowData);
+                this.curItem.item = copyRowData;
+                // this.selectedItem = this.curItem.item
+                this.$bus.emit("clickItem",copyRowData)
+            },
+            // eslint-disable-next-line no-unused-vars
+            clickItem: function (add) {
+                this.selected_id = add.id
+            },
+            onClick: function (data) {
+                // eslint-disable-next-line no-debugger
+                if (this.selected_id !== data.id && this.disabled){
+                    this.selected_id = data.id
+                    this.curItem.item = data
+                    this.$bus.emit("clickItem",data)
+                }
+            },
+            addCol: function (index,data = null) {
+                let dataCopy = _.cloneDeep(data);
+                dataCopy.id = "col_" + Common.getRandom(12);
+                if (dataCopy.data && dataCopy.data.length > 0){
+                    data.data.forEach((field)=>{field.id = field.tag + "_" + Common.getRandom(12)})
+                }
+
+                this.data.props.cols.splice(index + 1,0,dataCopy)
+                this.curItem.item = dataCopy
+                this.$bus.emit("clickItem",dataCopy)
+            },
+            deleteCol: function (index) {
+                if (index === this.data.props.cols.length - 1){
+                    this.$bus.emit("clickItem",{id:this.data.props.cols[index - 1].id})
+                }else{
+                    this.$bus.emit("clickItem",{id:this.data.props.cols[index + 1].id})
+                }
+
+                this.data.props.cols.splice(index,1)
+            },
+        },
+        mounted() {
+            // eslint-disable-next-line no-undef
+            this.$bus.on("clickItem",this.clickItem);
+            // this.$bus.on("colAttributeChange",this.colAttributeChange)
+        },
+        beforeDestroy() {
+            this.$bus.off("clickItem",this.clickItem);
+            // this.$bus.off("colAttribute",this.colAttributeChange)
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "../systemConfig/style/fieldRowItem";
+    .ghostClass{
+        display: inline-block !important;
+        width: 0!important;
+        min-width: 0!important;
+        margin: 0!important;
+        height: 100% !important;
+        min-height: 0 !important;
+        border:0.2rem solid pink!important;
+        font-size: 0 !important;
+        border-radius: 0.25rem !important;
+        overflow: hidden !important;
+        padding:0 !important;
+    }
+    .ghost{
+        background-color: pink !important;
+        display: block !important;
+        width: 100% !important;
+        margin: 0!important;
+        height: 0 !important;
+        min-height: 0 !important;
+        border:0.2rem solid pink!important;
+        font-size: 0 !important;
+        border-radius: 0.25rem !important;
+        overflow: hidden !important;
+        padding:0 !important;
+    }
+</style>
diff --git a/src/views/teacherInfo/formCommon/EditAndViewForm.vue b/src/views/teacherInfo/formCommon/EditAndViewForm.vue
index a55b7a0..6f0d3f7 100644
--- a/src/views/teacherInfo/formCommon/EditAndViewForm.vue
+++ b/src/views/teacherInfo/formCommon/EditAndViewForm.vue
@@ -165,6 +165,7 @@
                 loadingTip:"加载数据中，请稍候...",
                 approveType:1,
                 showComment:false,
+                submitFieldList:[],
             }
         },
         methods:{
@@ -334,15 +335,6 @@
                     remarkList: ["("+this.BaseConfig.person_info_my.bureau_name+(this.BaseConfig.person_info_my.dep_name && this.BaseConfig.person_info_my.dep_name !== ""
                     && this.BaseConfig.person_info_my.bureau_name !== this.BaseConfig.person_info_my.dep_name?"/" + this.BaseConfig.person_info_my.dep_name:"")+")"],
                     isHasChild:false,
-                    // childList:[{childDataType:2,personInfo: {
-                    //     node_label:"操作人：" + this.BaseConfig.userInfo.person_name_cookie,
-                    //         person_id:this.BaseConfig.userInfo.person_id_cookie,
-                    //         time_stamp:"2021-04-20 15:30:30",
-                    //         remarkList: ["("+this.BaseConfig.person_info_my.bureau_name+(this.BaseConfig.person_info_my.dep_name && this.BaseConfig.person_info_my.dep_name !== ""
-                    //         && this.BaseConfig.person_info_my.bureau_name !== this.BaseConfig.person_info_my.dep_name?"/" + this.BaseConfig.person_info_my.dep_name:"")+")"],
-                    //     },title:"数据变更",list:[{name:"变更1",old_value:"旧值1",new_value:"新值1"},{name:"变更2",old_value:"旧值2",new_value:"新值2"},{name:"变更3",old_value:"旧值3",new_value:"新值3"},
-                    //     {name:"变更4",old_value:"旧值4",new_value:"新值4"},{name:"变更5",old_value:"旧值5",new_value:"新值5"},{name:"变更6",old_value:"旧值6",new_value:"新值6"},
-                    //     {name:"变更7",old_value:"旧值7",new_value:"新值7"},{name:"变更8",old_value:"旧值8",new_value:"新值8"}]}]
                 }
                 return record;
             },
@@ -361,8 +353,8 @@
 
             testFormData:function(){
                 let b = true;
-                for (let i = 0; i < this.field_list.length; i++){
-                    let item = this.field_list[i];
+                for (let i = 0; i < this.submitFieldList.length; i++){
+                    let item = this.submitFieldList[i];
                     if (item.tag !== "son_form"){
                         if (item.is_input_field  === 1 && item.field_must_input === 1){//是输入场并且是必填项，检测是否已填写
                             if(this.isEmptyValue(item.props.value)){
@@ -469,7 +461,30 @@
                     }
                 }
             },
+            extractData:function(item){
+                if (item.tag === "grid"){//栅格
+                    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"){
+                                this.extractData(son)
+                            }else{
+                                son.is_main = false;//不在主表单内，在布局字段内
+                                this.submitFieldList.push(son)
+                            }
+                        }
+                    }
+                }
+            },
             submitFormData:function(){
+                this.submitFieldList = _.cloneDeep(this.field_list);
+                for (let i = 0; i < this.submitFieldList.length; i++){
+                    let item = this.submitFieldList[i];
+                    if (item.tag === "grid" || item.tag === "table"){//判断是栅格和表格布局字段，提取字段内容
+                       this.extractData(item);
+                    }
+                }
                 if (this.testFormData() === false){
                     return
                 }
@@ -478,7 +493,7 @@
                 this.is_loading = true;
                 let dataValue = [{form_id:this.form_id,value_list:[]}]
                 let obj = {};
-                this.field_list.forEach((item)=>{
+                this.submitFieldList.forEach((item)=>{
                     if (item.tag === "son_form"){//
                         let sonFormData = {
                             form_id:item.child_form_id,
@@ -578,6 +593,46 @@
                     });
                 }
             },
+            findAndReplaceData:function(json,targetFiled){
+                if (targetFiled.tag === "grid"){
+                    for (let j = 0; j < targetFiled.props.cols.length; j++){
+                        let col = targetFiled.props.cols[j];
+                        for (let k = 0; k < col.data.length; k++){
+                            let item = col.data[k];
+                            if (item.tag === "grid" || item.tag === "table"){//布局字段中嵌套布局字段
+                                return this.findAndReplaceData(json,item);
+                            }else{
+                                if(json.id === item.id){//找到布局字段中对应的字段
+                                    targetFiled.props.cols[j].data[k] = json;
+                                    return true;
+                                }
+                            }
+                        }
+                    }
+                }else if(targetFiled.tag === "table"){
+                    console.log("table")
+                }
+
+                return false;
+            },
+            deleteNotMainField:function(){
+                for (let j = this.field_list.length - 1; j >= 0; j--){
+                    let item = this.field_list[j];
+                    if (item.is_main === false){
+                        for (let i = 0; i < this.field_list.length; i ++){
+                            let find = false;
+                            let fieldJSON = this.field_list[i];
+                            if (fieldJSON.tag === "grid" || fieldJSON.tag === "table"){//找到布局字段
+                                find = this.findAndReplaceData(item,fieldJSON);
+                            }
+                            if (find === true){
+                                this.field_list.splice(j,1);
+                                break;
+                            }
+                        }
+                    }
+                }
+            },
             setFieldList:function(filedList,data){
                 this.sonFormCount = 0;
                 this.hasGetFormDataCount = 0;
@@ -630,6 +685,7 @@
 
                 this.mainFormErgodicComplete = true;//主表单遍历完成
                 if (this.sonFormCount === this.hasGetFormDataCount){//子表单数据已经全部整理完毕
+                    this.deleteNotMainField();
                     this.is_loading = false;
                 }
             },
@@ -654,7 +710,7 @@
                     }
                 });
             },
-             getChildFormData:function(json,data_id,version_no){
+            getChildFormData:function(json,data_id,version_no){
                 let params = {
                     org_id:this.BaseConfig.person_info_my.bureau_id,
                     system_id:10,
@@ -685,12 +741,6 @@
 
                                     data[field.id + "_json"] = _.cloneDeep(field)
                                     data[field.id + "_json_copy"] = _.cloneDeep(field)
-
-                                    // if (field.column_name && field.column_name !== ""){
-                                    //     data[field.column_name + "_json"] = _.cloneDeep(field)
-                                    // }else{
-                                    //     data[field.id + "_json"] = _.cloneDeep(field)
-                                    // }
                                 })
 
                                 tableData.push(data);
@@ -698,6 +748,7 @@
                             this.$set(json.props,"tableData",tableData);
                         }
                         if (this.mainFormErgodicComplete === true && this.sonFormCount === this.hasGetFormDataCount){//子表单数据已经全部整理完毕
+                            this.deleteNotMainField()
                             this.is_loading = false;
                         }
                     }
diff --git a/src/views/teacherInfo/systemConfig/FieldAttributeConfig.vue b/src/views/teacherInfo/systemConfig/FieldAttributeConfig.vue
index 0131eae..66e5bf0 100644
--- a/src/views/teacherInfo/systemConfig/FieldAttributeConfig.vue
+++ b/src/views/teacherInfo/systemConfig/FieldAttributeConfig.vue
@@ -3,46 +3,51 @@
         <div class="attribute-container-style" :style="{pointerEvents:data.tag === 'input' && data.props.field_input_type === 2 ? 'none':null,
         opacity:data.tag === 'input' && data.props.field_input_type === 2 ? '0.5':null,
         backgroundColor:data.tag === 'input' && data.props.field_input_type === 2 ? '#f2f2f2':null}">
-            <div class="single-attribute-container-style">
-                <div class="attribute-title">标题内容</div>
-                <a-input placeholder="标题内容，最多50个字符" :maxLength="50" :allowClear="true" :disabled="data.props.show_title === false && [23,230,231].every((num)=>{return num !== data.field_type})"
-                         v-model="data.field_name"/>
-                <a-switch v-if="data.props.is_sonForm_field !== true" v-model="data.props.show_title" checkedChildren="显示" unCheckedChildren="隐藏"
-                          style="float: right;margin-top: 0.2rem" size="small" :disabled="[21,22,24].some((num)=>{return num === data.field_type})"/>
-            </div>
-            <div v-if="data.props.is_sonForm_field !== true && data.props.show_title === true" class="single-attribute-container-style">
-                <div class="attribute-title">标题宽度</div>
-                <a-slider :disabled="data.props.show_title === false" :min="1" :max="10" v-model="data.props.label_width"/>
-            </div>
-            <div v-if="data.props.is_sonForm_field !== true && data.props.show_title === true" class="single-attribute-container-style">
-                <div class="attribute-title">标题对齐方式</div>
-                <a-radio-group default-value="flex-end" v-model="data.props.label_alignment" button-style="solid"
-                               style="margin-bottom: 2rem" :disabled="data.props.show_title === false">
-                    <a-radio-button value="flex-end" style="padding: 0 10px;font-size: 0.75rem;">右对齐</a-radio-button>
-                    <a-radio-button v-if="[23,231,230].some((num)=>{return num === data.field_type})" value="center" style="padding: 0 10px;font-size: 0.75rem;">中间对齐</a-radio-button>
-                    <a-radio-button value="flex-start" style="padding: 0 10px;font-size: 0.75rem;">左对齐</a-radio-button>
-                    <a-radio-button v-if="[23,231,230].every((num)=>{return num !== data.field_type})" value="top" style="padding: 0 10px;font-size: 0.75rem;">顶部对齐</a-radio-button>
-                </a-radio-group>
-            </div>
-            <div v-if="data.props.is_sonForm_field !== true" class="single-attribute-container-style">
-                <div class="attribute-title">字段内容宽度</div>
-                <a-slider :min="1" :max="100" :step="1" v-model="data.props.content_width"/>
-            </div>
+            <template v-if="data.tag !== 'col'">
+                <div class="single-attribute-container-style">
+                    <div class="attribute-title">标题内容</div>
+                    <a-input placeholder="标题内容，最多50个字符" :maxLength="50" :allowClear="true" :disabled="data.props.show_title === false && [23,230,231].every((num)=>{return num !== data.field_type})"
+                             v-model="data.field_name"/>
+                    <a-switch v-if="data.props.is_sonForm_field !== true" v-model="data.props.show_title" checkedChildren="显示" unCheckedChildren="隐藏"
+                              style="float: right;margin-top: 0.2rem" size="small" :disabled="[21,22,24].some((num)=>{return num === data.field_type})"/>
+                </div>
+                <div v-if="data.props.is_sonForm_field !== true && data.props.show_title === true" class="single-attribute-container-style">
+                    <div class="attribute-title">标题宽度</div>
+                    <a-slider :disabled="data.props.show_title === false" :min="1" :max="10" v-model="data.props.label_width"/>
+                </div>
+                <div v-if="data.props.is_sonForm_field !== true && data.props.show_title === true" class="single-attribute-container-style">
+                    <div class="attribute-title">标题对齐方式</div>
+                    <a-radio-group default-value="flex-end" v-model="data.props.label_alignment" button-style="solid"
+                                   style="margin-bottom: 2rem" :disabled="data.props.show_title === false">
+                        <a-radio-button value="flex-end" style="padding: 0 10px;font-size: 0.75rem;">右对齐</a-radio-button>
+                        <a-radio-button v-if="[23,231,230].some((num)=>{return num === data.field_type})" value="center" style="padding: 0 10px;font-size: 0.75rem;">中间对齐</a-radio-button>
+                        <a-radio-button value="flex-start" style="padding: 0 10px;font-size: 0.75rem;">左对齐</a-radio-button>
+                        <a-radio-button v-if="[23,231,230].every((num)=>{return num !== data.field_type})" value="top" style="padding: 0 10px;font-size: 0.75rem;">顶部对齐</a-radio-button>
+                    </a-radio-group>
+                </div>
+                <div v-if="data.props.is_sonForm_field !== true && data.tag" class="single-attribute-container-style">
+                    <div class="attribute-title">字段内容宽度</div>
+                    <a-slider :min="1" :max="100" :step="1" v-model="data.props.content_width"/>
+                </div>
+            </template>
+
             <component :is="getSelfAttribute" :data="data" :form_id="formId"/>
-            <div class="single-attribute-container-style">
-                <div class="attribute-title">展示方式</div>
-                <a-checkbox v-if="[21,22,23,24].every((num)=>{return num !== data.field_type})" v-model="data.props.is_read_only">只读</a-checkbox>
-                <a-checkbox v-if="[21,22,23,24].every((num)=>{return num !== data.field_type})" v-model="data.props.is_disabled">禁用</a-checkbox>
-                <a-checkbox v-model="data.props.is_hidden">隐藏</a-checkbox>
-            </div>
-            <div v-if="[20,21,22,23,24,27].every((num)=>{return num !== data.field_type})" class="single-attribute-container-style">
-                <div class="attribute-title">校验</div>
-                <a-checkbox v-model="data.props.is_must">字段必填</a-checkbox>
-            </div>
-            <div v-if="data.props.is_sonForm_field !== true && data.props.can_search === true && data.props.field_input_type !== 2" class="single-attribute-container-style">
-                <div class="attribute-title">其它</div>
-                <a-checkbox v-model="data.props.is_search">作为高级查询字段</a-checkbox>
-            </div>
+            <template v-if="data.tag !== 'col'">
+                <div class="single-attribute-container-style">
+                    <div class="attribute-title">展示方式</div>
+                    <a-checkbox v-if="[21,22,23,24].every((num)=>{return num !== data.field_type})" v-model="data.props.is_read_only">只读</a-checkbox>
+                    <a-checkbox v-if="[21,22,23,24].every((num)=>{return num !== data.field_type})" v-model="data.props.is_disabled">禁用</a-checkbox>
+                    <a-checkbox v-model="data.props.is_hidden">隐藏</a-checkbox>
+                </div>
+                <div v-if="[20,21,22,23,24,27].every((num)=>{return num !== data.field_type})" class="single-attribute-container-style">
+                    <div class="attribute-title">校验</div>
+                    <a-checkbox v-model="data.props.is_must">字段必填</a-checkbox>
+                </div>
+                <div v-if="data.props.is_sonForm_field !== true && data.props.can_search === true && data.props.field_input_type !== 2" class="single-attribute-container-style">
+                    <div class="attribute-title">其它</div>
+                    <a-checkbox v-model="data.props.is_search">作为高级查询字段</a-checkbox>
+                </div>
+            </template>
         </div>
     </vue-scroll>
 </template>
diff --git a/src/views/teacherInfo/systemConfig/FieldItem.vue b/src/views/teacherInfo/systemConfig/FieldItem.vue
index cbaf87d..10d8d56 100644
--- a/src/views/teacherInfo/systemConfig/FieldItem.vue
+++ b/src/views/teacherInfo/systemConfig/FieldItem.vue
@@ -2,7 +2,8 @@
     <div :class="['field-item-style',{'select-style':(selected_id === fieldData.id || curItem.item.id === fieldData.id) && design},
     {'sonForm-field-style':fieldData.props.is_sonForm_field === true && design}]" @click.stop="onSelect(fieldData)"
     :style="design?{backgroundColor:fieldData.props.is_hidden?'rgba(255,11,124,0.1)':''}:{display:fieldData.props.is_hidden && !design?'none':'block',
-    padding:'0.5rem 0 0 0',borderBottom:fieldData.field_type < 21 || fieldData.field_type > 24 ?'1px solid #e5e5e5':null,margin:'0 0.5rem'}" :data-operate="design">
+    padding:fieldData.tag === 'grid'?'0':'0.5rem 0 0 0',borderBottom:fieldData.field_type < 21 || (fieldData.field_type > 24 && fieldData.field_type < 200)?'1px solid #e5e5e5':null,
+    margin:fieldData.tag === 'grid'?'0':'0 0.5rem'}" :data-operate="design">
         <span v-if="fieldData.props.show_title === true || (design && fieldData.props.is_sonForm_field === true)"
               class="label-style" ref="label" :style="[23,230,231].some((num)=>{return num === fieldData.field_type})?{display:'flex',width:'100%',justifyContent:fieldData.props.label_alignment}:
               {display:fieldData.props.label_alignment === 'top'?'flex':'inline-flex',justifyContent:fieldData.props.label_alignment === 'top'?'flex-start':fieldData.props.label_alignment,
@@ -14,18 +15,18 @@
         (fieldData.props.show_title === false || fieldData.props.label_alignment === 'top'? fieldData.props.content_width + '%':
         'calc((100% - ' + fieldData.props.label_width + 'rem) * ' +  fieldData.props.content_width / 100 +')'),paddingLeft:design ||
         fieldData.props.showTitle === false || [21,22,23,24,210,211,230,231,240,241].some((num)=>{return num === fieldData.field_type})?null:'0.5rem',marginBottom:design?null:'0.5rem',
-        pointerEvents:(design && fieldData.tag !== 'son_form') || (edit === false && (fieldData.field_type !== 9 && fieldData.field_type !== 10))?'none':null,borderLeft:design ||
+        pointerEvents:(design && (fieldData.tag !== 'son_form' && fieldData.tag !== 'grid')) || (edit === false && (fieldData.field_type !== 9 && fieldData.field_type !== 10))?'none':null,borderLeft:design ||
         fieldData.props.show_title === false || [21,22,23,24,230,231,210,211,240,241].some((num)=>{return num === fieldData.field_type}) || fieldData.props.is_sonForm_field === true ?null:'1px solid #e5e5e5'}">
             <!--表单设计-->
             <template v-if="design">
-                <component :is="com" :field="fieldData" :disabled="true"></component>
+                <component :is="com" :field="fieldData" :disabled="true" :is_edit="false"></component>
             </template>
             <!--表单新建/查看/编辑-->
             <template v-else>
                 <SonFormFilling v-if="fieldData.tag === 'son_form'" :fieldData="fieldData" :edit="edit">子表单查看</SonFormFilling>
                 <template v-else-if="edit === false"><!--查看-->
-                    <component v-if="fieldData.field_type > 200 || fieldData.field_type === 22 || fieldData.field_type === 13 || fieldData.field_type === 14"
-                               :is="com" :field="fieldData"></component>
+                    <component v-if="fieldData.field_type > 200 || [22,21,24,13,14].some((num)=>{return num === fieldData.field_type})"
+                               :is="com" :field="fieldData" :is_edit="edit"></component>
                     <Upload v-else-if="fieldData.field_type === 9 || fieldData.field_type === 10" :type="fieldData.props.type" :title="fieldData.props.title" :option="fieldData.props.option"  :multiple="fieldData.props.multiple"
                             :canDownload="fieldData.props.can_downLoad" :canUpload="false" :fileData="getUploadData()"/>
                     <div v-else-if="fieldData.field_type === 1 || fieldData.field_type === 2 || fieldData.field_type === 5 || fieldData.field_type === 12
@@ -40,7 +41,7 @@
                     <Upload v-if="fieldData.field_type === 9 || fieldData.field_type === 10" :type="fieldData.props.type"
                             :title="fieldData.props.title" :option="fieldData.props.option"  :multiple="fieldData.props.multiple"
                             :canDownload="fieldData.props.can_downLoad" :canUpload="true" :fileData="getUploadData()"/>
-                    <component v-else :is="com" :field="fieldData"></component>
+                    <component v-else :is="com" :field="fieldData" :is_edit="true"></component>
                 </template>
             </template>
         </div>
@@ -52,6 +53,7 @@
         </div>
         <div v-if="(selected_id === fieldData.id || curItem.item.id === fieldData.id) && design
         && !(fieldData.tag === 'input' && fieldData.field_input_type === 2)" class="operate-style">
+            <a-icon v-if="fieldData.tag === 'grid'" type="plus-square" title="添加列" class="icon-style" @click.stop="addCol"/>
             <a-icon type="copy" title="复制" class="icon-style" @click.stop="copyItem"/>
             <a-icon type="delete" title="删除" class="icon-style" @click.stop="deleteItem"/>
         </div>
@@ -105,6 +107,9 @@
                     return "字段值最大长度为" + this.fieldData.props.max_length + "个字符"
                 }
             },
+            addCol:function(){
+                this.$emit("addCol",this.fieldData)
+            },
             copyItem:function(){
                 this.$emit("copy",[this.fieldData])
             },
@@ -153,6 +158,8 @@
         },
         computed:{
             com: function (){
+                // eslint-disable-next-line no-debugger
+                debugger;
                 // eslint-disable-next-line no-debugger
                 // let a = this
                 // let url ="Input.vue"
@@ -172,4 +179,17 @@
 
 <style scoped lang="scss">
     @import "style/fieldItem";
+    .ghost{
+        background-color: pink !important;
+        display: block !important;
+        width: 100% !important;
+        margin: 0!important;
+        height: 0 !important;
+        min-height: 0 !important;
+        border:0.2rem solid pink!important;
+        font-size: 0 !important;
+        border-radius: 0.25rem !important;
+        overflow: hidden !important;
+        padding:0 !important;
+    }
 </style>
diff --git a/src/views/teacherInfo/systemConfig/FieldRowItem.vue b/src/views/teacherInfo/systemConfig/FieldRowItem.vue
deleted file mode 100644
index 88b7b98..0000000
--- a/src/views/teacherInfo/systemConfig/FieldRowItem.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-    <div :class="['grid-row-style',selected_id === data.id ? 'is-selected-style':'']" @click="onClick(data)">
-        <a-row style="padding: 0.25rem">
-                <a-col v-for="(col,index) in data.cols" :key="col.id" :span="24 / data.cols.length"
-                       :class="['col-style',selected_id === col.id ? 'col-selected-style':'']"
-                       @click.stop="onClick(col)">
-                    <draggable v-model="col.items" group="itemGroup" forceFallback="true" ghostClass="ghostClass">
-                        <field-item v-for="item in col.items" :key="item.id" :item="item"/>
-                    </draggable>
-                    <div v-if="selected_id === col.id" class="col-operate-style">
-                        <a-icon v-if="data.cols.length < 4" type="copy" title="复制" class="icon-style" @click.stop="addCol(index,col)"/>
-                        <a-icon v-if="data.cols.length > 1" type="delete" title="删除" class="icon-style" @click.stop="deleteCol(index)"/>
-                    </div>
-                </a-col>
-        </a-row>
-        <div class="move" v-if="selected_id === data.id">
-            <icon-font type="icon-move" />
-        </div>
-        <div class="operate" v-if="selected_id === data.id">
-            <a-icon type="plus-square" title="增加列" @click.stop="addCol(-1)" :class="['style-icon',{'disable':data.cols.length === 4}]"/>
-            <a-icon type="copy" title="复制" class='style-icon' @click.stop="copyRow"/>
-            <a-icon type="delete" title="删除" class='style-icon' @click.stop="deleteRow"/>
-        </div>
-    </div>
-</template>
-
-<script>
-    // eslint-disable-next-line no-unused-vars
-    import {Row,Icon,Col} from 'ant-design-vue'
-    import _ from 'lodash'
-    import Common from '../../../utils/common'
-    import draggable from 'vuedraggable'
-    import FieldItem from './FieldItem'
-    // eslint-disable-next-line no-unused-vars
-    const IconFont = Icon.createFromIconfontCN({
-        scriptUrl: '//at.alicdn.com/t/font_2363602_ovz7ocuydo.js',
-    });
-    export default {
-        name: "FieldRowItem",
-        props: ["rowData"],
-        data: function (){
-            return {
-                data:this.rowData,
-                selected_id:this.rowData.id
-            }
-        },
-        components: {
-            ARow:Row,
-            IconFont,
-            AIcon:Icon,
-            ACol:Col,
-            draggable,
-            FieldItem
-        },
-        methods :{
-            // eslint-disable-next-line no-unused-vars
-            clickItem: function (add) {
-                this.selected_id = add.id
-            },
-            onClick: function (data) {
-                // eslint-disable-next-line no-debugger
-                if (this.selected_id !== data.id){
-                    this.selected_id = data.id
-                    this.$bus.emit("clickItem",{id:this.selected_id})
-                }
-            },
-            addCol: function (index = -1,data = null) {
-                let col_id = "col_" + Common.getRandom(12);
-                if (index === -1){//添加列
-                    this.data.cols.push({id:col_id});
-                }else{//复制列
-                    let dataCopy = _.cloneDeep(data);
-                    dataCopy.id = "col_" + Common.getRandom(12);
-                    if (dataCopy.items && dataCopy.items.length > 0){
-                        data.item.forEach((field)=>{field.id = field.tag + "_" + Common.getRandom(12)})
-                    }
-
-                    this.data.cols.splice(index + 1,0,dataCopy)
-                    this.$bus.emit("clickItem",{id:dataCopy.id})
-                }
-            },
-            deleteCol: function (index) {
-                if (index === this.data.cols.length - 1){
-                    this.$bus.emit("clickItem",{id:this.data.cols[index - 1].id})
-                }else{
-                    this.$bus.emit("clickItem",{id:this.data.cols[index + 1].id})
-                }
-
-                this.data.cols.splice(index,1)
-            },
-            copyRow: function () {
-                this.$emit("copyRow",this.data)
-            },
-            deleteRow: function (){
-                this.$emit("deleteRow",null)
-            }
-        },
-        mounted() {
-            // eslint-disable-next-line no-undef
-            this.$bus.on("clickItem",this.clickItem)
-        },
-
-
-    }
-</script>
-
-<style scoped lang="scss">
-    @import "style/fieldRowItem";
-</style>
diff --git a/src/views/teacherInfo/systemConfig/FormDesign.vue b/src/views/teacherInfo/systemConfig/FormDesign.vue
index 9096740..be7e99f 100644
--- a/src/views/teacherInfo/systemConfig/FormDesign.vue
+++ b/src/views/teacherInfo/systemConfig/FormDesign.vue
@@ -52,7 +52,7 @@
                   <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"/>
+                      <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>
@@ -118,7 +118,8 @@ export default {
         {title : '布局字段',list: layoutFields}
         ],
         is_spinning:true,//是否为加载总的状态,
-        form_width:100
+        form_width:100,
+        submitList:[]
     }
   },
   computed: {
@@ -183,6 +184,8 @@ export default {
             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 !== ""){
@@ -290,6 +293,12 @@ export default {
       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];
       let index = this.fieldsList.findIndex((field)=>{return field.id === item.id})
@@ -307,50 +316,97 @@ export default {
       }
       this.fieldsList.splice(index,1)
     },
-    submitData:function () {//提交表单信息
-      if (this.fieldsList.length === 3){
-        Modal.warning({
-          title: '表单提交失败',
-          content:"表单中最少要包含一个除默认字段（教师编号、教师姓名、单位(部门)）的字段",
-          okText:'我知道了',
-          centered:true
-        })
-        return;
-      }
-      if (this.testData(this.fieldsList)){
-        this.organizeData(this.fieldsList);
-        let has_certificate = 0;
-        if (this.fieldsList.some((item)=>{return item.is_certificate === 1})){
-          has_certificate = 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)
+                        }
+                    }
+
+                }
+            }
         }
 
-        let fom_config = this.$refs.formAttributeCom?this.$refs.formAttributeCom.config:this.formConfig
-        fom_config.include_certificate = has_certificate
+        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;
+                }
+            }
+        }
 
-        let params = {
-          org_id:this.BaseConfig.person_info_my.bureau_id,
-          form_id:this.data.form_id,
-          form_json:JSON.stringify(this.fieldsList),
-          form_config_json:JSON.stringify(fom_config),
-          person_id:this.BaseConfig.userInfo.person_id_cookie,
-          system_id:10
+        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
 
-        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")
+            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;
@@ -487,13 +543,25 @@ export default {
       let stopTest = false;
       for(let m = 0; m < ary.length; m++){
           let item = ary[m];
-        if (item.props.data){//子表单
-          index += 1
-          let result = this.testData(item.props.data,true,index)
-          if (result === false){
-            stopTest = true;
-            break;
-          }
+        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))){
@@ -526,15 +594,6 @@ export default {
                   stopTest = true;
                   break;
               }
-          }else if ((item.field_type === 23 || item.field_type === 231) && item.props.data.length === 0){
-              Modal.warning({
-                  title: '表单提交失败',
-                  content:"子表单中必须至少包含一个字段",
-                  okText:'我知道了',
-                  centered:true
-              })
-              stopTest = true;
-              break;
           }
 
           if (item.props.max_length){
diff --git a/src/views/teacherInfo/systemConfig/attributeConfig/ColItemAttribute.vue b/src/views/teacherInfo/systemConfig/attributeConfig/ColItemAttribute.vue
new file mode 100644
index 0000000..34db464
--- /dev/null
+++ b/src/views/teacherInfo/systemConfig/attributeConfig/ColItemAttribute.vue
@@ -0,0 +1,47 @@
+<template>
+    <div>
+        <div class="single-attribute-container-style">
+            <div class="attribute-title">栅格占列数</div>
+            <a-input-number v-model="attribute.span" :min="1" :max="24" :step="1" @change="onChange"/>
+        </div>
+        <div class="single-attribute-container-style">
+            <div class="attribute-title">栅格左侧的间隔格数</div>
+            <a-input-number v-model="attribute.offset" :min="0" :step="1"/>
+        </div>
+
+        <div class="single-attribute-container-style">
+            <div class="attribute-title">栅格向左移动格数</div>
+            <a-input-number v-model="attribute.pull" :min="0" :step="1"/>
+        </div>
+        <div class="single-attribute-container-style">
+            <div class="attribute-title">栅格向右移动格数</div>
+            <a-input-number v-model="attribute.push" :min="0" :step="1"/>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {InputNumber} from 'ant-design-vue'
+    export default {
+        name: "ColItemAttribute",
+        props:["data"],
+        data: function(){
+            return {
+                attribute:this.data,
+            }
+        },
+        components:{
+            AInputNumber:InputNumber
+        },
+        methods:{
+            onChange:function () {
+                // this.$bus.emit("colAttributeChange",this.attribute.id)
+                // console.log(value);
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "style/attributeCommonStyle";
+</style>
diff --git a/src/views/teacherInfo/systemConfig/attributeConfig/FieldRowItemAttribute.vue b/src/views/teacherInfo/systemConfig/attributeConfig/FieldRowItemAttribute.vue
new file mode 100644
index 0000000..b62baeb
--- /dev/null
+++ b/src/views/teacherInfo/systemConfig/attributeConfig/FieldRowItemAttribute.vue
@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <div class="single-attribute-container-style">
+            <div class="attribute-title">栅格水平间隔</div>
+            <a-input-number v-model="attribute.props.gutter[1]" :min="0" :step="1"/>
+        </div>
+        <div class="single-attribute-container-style">
+            <div class="attribute-title">栅格垂直间隔</div>
+            <a-input-number v-model="attribute.props.gutter[0]" :min="0" :step="1"/>
+        </div>
+
+        <div class="single-attribute-container-style">
+            <div class="attribute-title">flex布局</div>
+            <div class="choice-style">
+                <ASwitch @change="onChangMode" :checked="attribute.props.type === 'flex'" size="small"/>
+            </div>
+        </div>
+        <div class="single-attribute-container-style">
+            <div class="attribute-title">水平排列方式</div>
+            <a-select v-model="attribute.props.justify" :options="justifyData" style="width: 10rem"/>
+        </div>
+        <div class="single-attribute-container-style">
+            <div class="attribute-title">垂直排列方式</div>
+            <a-select v-model="attribute.props.align" :options="alignData" style="width: 10rem"/>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {Switch,InputNumber,Select} from 'ant-design-vue'
+    export default {
+        name: "FieldRowItemAttribute",
+        props:["data"],
+        data: function(){
+            return {
+                attribute:this.data,
+                justifyData:[{value:"start",label:"左对齐"},{value:"end",label:"右对齐"},{value:"center",label:"居中"},
+                    {value:"space-around",label:"两侧间隔相等"},{value:"space-between",label:"两端对齐"}],
+                alignData:[{value:"top",label:"顶部对齐"},{value:"middle",label:"居中"},{value:"bottom",label:"底部对齐"}]
+            }
+        },
+        components:{
+            ASwitch:Switch,
+            AInputNumber:InputNumber,
+            ASelect:Select
+        },
+        methods:{
+            onChangMode: function (checked) {
+                if (checked){
+                    this.attribute.props.type = "flex";
+                }else{
+                    this.attribute.props.type = null;
+                }
+            }
+        },
+        watch:{
+            data:function (newData) {
+                this.attribute = newData
+            },
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "style/attributeCommonStyle";
+    .choice-style{
+        width: 100%;
+        height: 1rem;
+        display: flex;
+        align-items: center;
+        align-content: center;
+    }
+</style>
diff --git a/src/views/teacherInfo/systemConfig/fieldAndFormConfig.js b/src/views/teacherInfo/systemConfig/fieldAndFormConfig.js
index ca5fb94..30de275 100644
--- a/src/views/teacherInfo/systemConfig/fieldAndFormConfig.js
+++ b/src/views/teacherInfo/systemConfig/fieldAndFormConfig.js
@@ -111,7 +111,8 @@ export const businessFields = [
 ]
 
 export const layoutFields = [
-    { field_type: 24, field_name: '栅格',tag:"grid",content_width:100},
+    { field_type: 24, field_name: '栅格',tag:"grid",content_width:100,el:"FieldRowItem.vue",attributeUrl:"FieldRowItemAttribute",
+        props:{type:"flex",align:"top",justify:"start",gutter:[0,0],cols:[]}},
     { field_type: 21, field_name: '表格',tag:"table",content_width:100},
     { field_type: 22, field_name: '分隔线/符',tag:"divider",el:"Divider.vue",attributeUrl:"DividerAttribute",
     props:{value:"",can_search:false,is_search:false,dashed:false,orientation:"center",type:1,marginTop:8,marginBottom:8,height:40}}
diff --git a/src/views/teacherInfo/systemConfig/style/fieldRowItem.scss b/src/views/teacherInfo/systemConfig/style/fieldRowItem.scss
index 51bafc6..8811dfa 100644
--- a/src/views/teacherInfo/systemConfig/style/fieldRowItem.scss
+++ b/src/views/teacherInfo/systemConfig/style/fieldRowItem.scss
@@ -1,21 +1,20 @@
 .grid-row-style{
-  border:1px dotted rgba(0,0,0,0.2);
-  min-height: 4rem;
-  background-color: rgba(242,242,242,0.2);
-  //padding: 0.25rem;
-  margin-bottom: 0.2rem;
-  &:hover{
-    background-color: rgba(242,242,242,0.5);
-    border: 1px solid #31a8fa;
-  }
+  padding: 0.25rem;
+  width: 100%;
+  flex-flow: nowrap !important;
   .col-style{
     border: 1px dotted rgba(0,0,0,0.3);
     min-height: 3.5rem;
     padding:0.25rem 0.25rem 1rem  0.25rem ;
     position: relative;
+    background-color: white;
+    flex: initial!important;
     &:hover{
       border: 1px solid #31a8fa;
     }
+    .col-draggable-style{
+      min-height: 3rem;
+    }
   }
   .col-selected-style{
     border:2px solid #31a8fa !important;