epx-frame 3.5.0-shpgy.1

package/src/frame/views/visual/Add.vue

@@ -0,0 +1,1818 @@
+ <template>
+  <div>
+    <div class="add-configuration">
+      <el-button  type="primary" size="medium" plain @click="AddFieldAreas">添加字段区域</el-button>
+      <el-button  type="primary" size="medium" plain @click="()=>{dialogSublistVisible=true,dialogTitle='添加子集',sublistAdd=true}">添加子集列表区域</el-button>
+      <!-- <el-button  type="primary" plain @click="setTheButton">按钮设置</el-button> -->
+    </div>
+    <div class="form-container">
+      <div class="form-item" v-for="(fieldItem, index) in fieldGroups" :key="index" >
+        <template v-if="fieldItem &&  (fieldItem.contentType !== 'sublist' || fieldItem.contentType !== 'sub' || (fieldItem.contentType.includes('sub') && this.pageType !== 'ADD'))">
+          <p class="form-title" v-if="fieldItem.title && formConfigs.titleFlag">
+            <span>{{fieldItem.title}}</span>
+            <i :class="`el-icon-arrow-up ${foldList.includes(index) ? 'fold': ''}`" @click="foldFn(index)"></i>
+            <span v-if="(fieldItem.contentType !== 'sublist' && fieldItem.contentType !== 'sub')  && pageType!=='DETAIL'">
+              <span class="sub-add-btn" @click="deleteSublist(index)">删除</span>
+              <!-- <span class="sub-add-btn" @click="addField(index)">添加字段</span> -->
+              <span class="sub-add-btn" @click="configuration(index)">配置</span>
+            </span>
+            <span v-if="(fieldItem.contentType === 'sublist' || fieldItem.contentType === 'sub')  && pageType!=='DETAIL'">
+              <span class="sub-add-btn" @click="deleteSublist(index)">删除子集</span>
+              <span class="sub-add-btn" @click="updateSublist(index)">修改</span>
+            </span>
+          </p>
+          <div :style="foldList.includes(index)? {height: 0, padding: 0 }: {}" :class="`form-content ${(fieldItem.contentType === 'sublist' || fieldItem.contentType === 'sub') && 'no-padding'}`">
+            <epx-page
+              :ref="`sublist${index}`"
+              v-if="fieldItem.contentType==='sublist'&&showPage"
+              :inline="true"
+              :form-sub="true"
+              :pageType="pageType"
+              :pageId="fieldItem.pageId"
+              :parentMetaId="$metaId"
+              :metaId="getMetaIdByRelation(fieldItem.children[0])"
+              :flag="fieldItem.flag || 'v_sublist'"
+              :relationId="fieldItem.children[0]"
+              :parentId="$query.id"
+              component="sub-list"
+              class="sublist"
+            >
+            </epx-page>
+            <epx-page
+              v-if="fieldItem.contentType==='sub'&&showPage"
+              :ref="`sublist${index}`"
+              type="component"
+              :inline="true"
+              :form-sub="true"
+              :pageType="pageType"
+              :parentMetaId="$metaId"
+              :metaId="getMetaIdByRelation(fieldItem.children[0])"
+              :config="fieldItem.config"
+              :relationId="fieldItem.children[0]"
+              :parentId="$query.id"
+              component="sub-list"
+              class="sublist"
+              >
+            </epx-page>
+            <!-- <el-form v-else-if="!fieldItem.contentType" :inline="true"> -->
+            <draggable
+                v-else-if="!fieldItem.contentType"
+                class="fields-drag"
+                tag="span"
+                :list="fieldItem.children"
+                @change="changeDragField($event,index)"
+                v-bind="dragOptions"
+                @start="drag = true"
+                @end="drag = false"
+              >
+                <transition-group type="transition" class="field-list" :name="!drag ? 'flip-list' : null">
+                  <template v-for="(fieldConfigItem,fieldConfigIndex) in fieldItem.children" >
+                    <el-form  v-if="fieldConfigItem.state!=='HIDDEN'"  :key="fieldConfigIndex" :inline="true" label-width="130px" style="height:auto;display: inline-block;" :class="getFormWidth(index,fieldConfigItem)==='2'?'half':'whole'">
+                    <!-- <epx-form-item :key="fieldConfigIndex" @mouseenter.native="visualShow(fieldConfigIndex)" @mouseleave.native="visualHidden" :fieldConfig="fieldConfigItem" :column="formConfigs.fieldGroups[index].column||formConfigs.column"> -->
+                    <epx-form-item @mouseenter.native="visualShow(fieldConfigIndex)" @mouseleave.native="visualHidden" :fieldConfig="fieldConfigItem" :column="formConfigs.fieldGroups[index].column||formConfigs.column">
+                      <div  v-if="clickIndex===fieldConfigIndex" slot="field-item" class="form-visual">
+                        <span class="xiugai" @click.stop="updateHandler(fieldConfigItem,fieldConfigIndex,index)">修改</span>
+                        <span  @click.stop="deleteHandler(fieldConfigItem,fieldConfigIndex,index)">删除</span>
+                      </div>
+                    </epx-form-item>
+                    </el-form>
+                  </template>
+                </transition-group>
+            </draggable>
+            <!-- </el-form> -->
+            <!-- <epx-form @visualUpdate="visualUpdate(arguments,index)" @visualDelete="visualDelete(arguments,index)" :isVisual="true" :ref="`form${index}`" v-else-if="!fieldItem.contentType" :fieldConfigs="fieldItem.children" v-model="data" :column="formConfigs.fieldGroups[index].column||formConfigs.column"></epx-form> -->
+          </div>
+        </template>
+      </div>
+      <div class="button-container" v-if="operates.length>0">
+        <draggable
+            class="fields-drag"
+            tag="span"
+            :list="operates"
+            @change="changeDragButton"
+            v-bind="dragOptions"
+            @start="drag = true"
+            @end="drag = false"
+          >
+            <transition-group type="transition" class="field-list" :name="!drag ? 'flip-list' : null">
+              <template v-for="(operate,operateIndex) in operates">
+                <span class="drag-button" :key="operateIndex" @mouseenter="dragButtonHandler(operateIndex)" @mouseleave="dragButtonLeave">
+                  <el-button size="medium" :type="operate.ui">{{operate.text}}</el-button>
+                  <span class="drag-button-edit" v-show="mouseenterIndex===operateIndex">
+                    <span @click.stop="dragButtonEdit(operateIndex)">编辑</span>
+                    <span @click.stop="dragButtonDelete(operateIndex)">删除</span>
+                  </span>
+                </span>
+              </template>
+            </transition-group>
+        </draggable>
+        <el-button class="button-new-tag" size="small" @click="addSettingButtons">+ 设置按钮</el-button>
+      </div>
+
+      <!-- <div class="button-container" v-if="operates.length>0">
+        <template v-for="operate in operates">
+          <el-button size="medium" :key="operate.text" v-if="buttonFlag(operate)" :type="operate.ui"  @click="handler(operate)">{{operate.text}}</el-button>
+        </template>
+      </div> -->
+    </div>
+    <!-- 按钮设置 -->
+    <el-dialog title="操作按钮设置" :visible.sync="dialogOperateVisible">
+      <!-- <div style="height:61px" v-if="!formConfigs.operates"> -->
+      <div style="height:61px">
+        页面类型： <el-select v-model="pageTypeKey" placeholder="请选择">
+              <el-option
+                v-for="item in pageTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+      </div>
+      <div class="operate-container">
+        <div class="operate-container">
+        <div class="operate-slide" v-if="pageTypeKey">
+          <!-- 循环已存在按钮 -->
+         <div class="button-container" v-if="operates.length>0">
+          <template v-for="(operate,index) in operates">
+            <el-button :class="{'active': editOperaIndex===index}" size="medium" :key="operate.text" v-if="buttonFlag(operate)" :type="operate.ui" @click="editOperate(index)">{{operate.text}}</el-button>
+          </template>
+        </div>
+          <!-- <el-button :class="{'active': editOperaIndex===index}" v-for="(item, index) in configs[operateOptionKey][operateConfigItemKey]" size="middle" :key="item.text" :type="item.type" @click="editOperate(index)">{{item.text}}</el-button>
+          <el-button type="text" @click="addOperate">+ 新增按钮</el-button> -->
+        </div>
+        <div class="operate-content">
+          <el-form :mode="operateSetting" label-width="140px" >
+            <el-form-item v-for="configItem in operateConfigs" :key="configItem.key" :label="`${configItem.name}：`">
+              <!-- 下拉选择 -->
+              <el-select v-if="configItem.type==='select'" v-model="operateSetting[configItem.key]" placeholder="请选择">
+                <el-option
+                  v-for="item in configItem.options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <!-- 文本输入 -->
+              <el-input class="form-item-input" v-else v-model="operateSetting[configItem.key]"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="saveOperateSetting">保存设置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      </div>
+    </el-dialog>
+    <!-- 字段修改 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible">
+      <div class="dialog-con">
+        <el-form :model="fieldSetting" label-width="160px">
+          <el-form-item label="字段名：">
+            <div style="display: inline-block;width: 217px;">
+              <el-input v-model="fieldSetting.attriLabel"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="字段状态：">
+            <el-select  v-model="fieldSetting.state" placeholder="请选择">
+              <el-option
+                v-for="item in fieldStatus"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="是否必填：">
+            <el-select  v-model="fieldSetting.isRequired" placeholder="请选择">
+              <el-option
+                v-for="item in isRequiredList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <div class="dialog-button">
+            <el-button type="primary" @click="saveFieldSetting">保存</el-button>
+            <el-button type="primary" @click="cancelFieldSetting">取消</el-button>
+          </div>
+        </el-form>
+      </div>
+    </el-dialog>
+    <!-- 新增表单 -->
+    <el-dialog title="新增表单" :visible.sync="dialogAddFormVisible">
+      <div class="dialog-con">
+        <el-form :model="formSetting" label-width="160px">
+          <el-form-item label="标题：">
+            <div style="display: inline-block;width: 217px;">
+              <el-input v-model="formSetting.title"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="列数：">
+            <el-select  v-model="formSetting.column" placeholder="请选择">
+              <el-option
+                v-for="item in columnList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="字段：">
+            <el-checkbox-group class="checkbox-group" v-model="formSetting.children" >
+              <ul class="field-group">
+                <li class="" v-for="item in fieldGroup" :key="item.code">
+                  <p class="field-item-title" style="margin:0" @click="switchFold(item.code)">
+                    <i :class="['fa',unFoldFieldItems[item.code]?'el-icon-minus': 'el-icon-plus']"></i>
+                    <i class="el-icon-folder-opened"></i>
+                    <span v-html="item.text"></span>
+                  </p>
+                  <div class="checkboxs" v-show="unFoldFieldItems[item.code]">
+                    <el-checkbox class="checkbox" v-for="option in item.children" :key="option.code" :label="option.code">{{option.text}}</el-checkbox>
+                  </div>
+                </li>
+              </ul>
+            </el-checkbox-group>
+          </el-form-item>
+          <div class="dialog-button">
+            <el-button type="primary" @click="saveFormSetting">保存</el-button>
+            <el-button type="primary" @click="cancelFormSetting">取消</el-button>
+          </div>
+        </el-form>
+      </div>
+    </el-dialog>
+    <!-- 表单区域编辑（配置） -->
+    <el-dialog title="区域编辑" :visible.sync="dialogAreaVisible">
+      <div class="dialog-con">
+        <el-form :model="areaSetting" label-width="160px">
+          <el-form-item label="标题：">
+            <div style="display: inline-block;width: 217px;">
+              <el-input v-model="areaSetting.title"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="列数：">
+            <el-select  v-model="areaSetting.column" placeholder="请选择">
+              <el-option
+                v-for="item in columnList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="排序：">
+            <draggable
+              class="fields-drag"
+              tag="span"
+              :list="sortList"
+              @change="changeDrag"
+              v-bind="dragOptions"
+              @start="drag = true"
+              @end="drag = false"
+            >
+              <transition-group type="transition" class="field-list" :name="!drag ? 'flip-list' : null">
+                <li v-for="(item,selectIndex) in sortList" :key="item.attriName || item" class="field-item">{{fieldLabel(item)}}<i class="el-icon-close" @click="removeField(selectIndex)"></i></li>
+              </transition-group>
+            </draggable>
+          </el-form-item>
+          <el-form-item label="添加字段：">
+            <el-checkbox-group class="checkbox-group" v-model="selectFields" >
+              <ul class="field-group">
+                <li class="" v-for="item in fieldGroup" :key="item.code">
+                  <p class="field-item-title" @click="switchFold(item.code)">
+                    <i :class="['fa',unFoldFieldItems[item.code]?'el-icon-minus': 'el-icon-plus']"></i>
+                    <i class="el-icon-folder-opened"></i>
+                    <span v-html="item.text"></span>
+                  </p>
+                  <div class="checkboxs" v-show="unFoldFieldItems[item.code]">
+                    <el-checkbox class="checkbox" v-for="option in item.children" :key="option.code" :label="option.code">{{option.text}}</el-checkbox>
+                  </div>
+                </li>
+              </ul>
+            </el-checkbox-group>
+          </el-form-item>
+          <div class="dialog-button">
+            <el-button type="primary" @click="saveAreaSetting">保存</el-button>
+            <el-button type="primary" @click="cancelAreaSetting">取消</el-button>
+          </div>
+        </el-form>
+      </div>
+    </el-dialog>
+    <!-- 子集新增，修改 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogSublistVisible">
+      <div class="dialog-con">
+        <el-form :model="sublistSetting" label-width="160px">
+          <el-form-item label="关联对象：">
+            <el-select  v-model="sublistSetting.children[0]" placeholder="请选择" @change="sublistEntityChange">
+              <el-option
+                v-for="item in EntityRelation"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="标题：">
+            <div style="display: inline-block;width: 217px;">
+              <el-input v-model="sublistSetting.title"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="配置方式：">
+            <el-radio-group v-model="sublistRadio">
+              <el-radio :label="1">默认页面</el-radio>
+              <el-radio :label="2">指定页面</el-radio>
+              <el-radio :label="3">直接配置</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="sublistRadio===2" label="指定页面：">
+            <div style="display: inline-block;width: 217px;">
+            <el-popover
+              popper-class="object-popover"
+              ref="popover"
+              class="popover"
+              trigger="click"
+              :preventOverflowOrder="['left', 'right', 'top', 'bottom']"
+              v-model="popoverObejct"
+              :tabindex="1"
+            >
+              <el-input
+                ref="input"
+                slot="reference"
+                placeholder="请选择"
+                clearable
+                size="medium"
+                @clear="clearObject"
+                v-model="condition.label"
+              >
+                <i slot="suffix" class="el-icon-search"></i>
+              </el-input>
+              <epx-page class="find" v-if="condition.dataType==='treeList'" flag="v_tree_find" :metaId="condition.codeKey" component="entity-tree-find" :change="changeObject" />
+              <epx-page class="find" v-else flag="v_find" :metaId="condition.codeKey" component="entity-find" :change="changeObject" />
+            </el-popover>
+            </div>
+            <!-- <div style="display: inline-block;width: 217px;">
+              <el-input v-model="sublistSetting.pageId" @click.native="getPageId"></el-input>
+            </div> -->
+          </el-form-item>
+          <el-form-item v-if="sublistRadio===3" label="列表字段：">
+            <el-radio-group v-model="sublistField">
+              <el-radio :label="4">默认字段</el-radio>
+              <el-radio :label="5">指定字段</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="sublistField===5&&sublistRadio===3" label="添加字段：">
+            <el-checkbox-group class="checkbox-group" v-model="sublistFieldList">
+              <ul class="field-group">
+                  <div class="checkboxs">
+                    <el-checkbox class="checkbox" v-for="option in fieldGroupSub" :key="option.attriName" :label="option.attriName">{{option.attriLabel}}</el-checkbox>
+                  </div>
+              </ul>
+            </el-checkbox-group>
+            </el-form-item>
+          <div class="dialog-button" v-if="sublistAdd">
+            <el-button type="primary" @click="saveSublistSetting">保存</el-button>
+            <el-button type="primary" @click="cancelSublistSetting">取消</el-button>
+          </div>
+          <div class="dialog-button" v-else>
+            <el-button type="primary" @click="updateSublistSetting">修改</el-button>
+            <el-button type="primary" @click="cancelSublistSetting">取消</el-button>
+          </div>
+        </el-form>
+      </div>
+    </el-dialog>
+    <!-- 按钮修改 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogEditButtonVisible">
+        <div class="operate-content operate-content-edit">
+          <el-form :mode="buttonSetting" label-width="140px" >
+            <el-form-item v-for="configItem in operateConfigs" :key="configItem.key" :label="`${configItem.name}：`">
+              <!-- 下拉选择 -->
+              <el-select v-if="configItem.type==='select'" v-model="buttonSetting[configItem.key]" placeholder="请选择">
+                <el-option
+                  v-for="item in configItem.options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <!-- 文本输入 -->
+              <el-input class="form-item-input" v-else v-model="buttonSetting[configItem.key]"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="saveButtonSetting">保存设置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { ADD_META } from '@/store/actions'
+import draggable from 'vuedraggable'
+export default {
+  name: 'epx-visual-add',
+  components: {
+    draggable
+  },
+  props: {
+    initConfigs: Object
+  },
+  provide () {
+    return {
+      formModel: this.formModel,
+      type: this.type,
+      search: this.search
+    }
+  },
+  data () {
+    return {
+      type: 'ADD',
+      search: null,
+      formModel: {
+        user: ''
+      },
+      drag: false,
+      isPageId: false,
+      condition: {
+        lable: '',
+        codeKey: 'FM_PAGE_CONFIG'
+      },
+      popoverObejct: false,
+      mouseenterIndex: null,
+      clickIndex: null,
+      renderComponents: [],
+      fieldGroups: [],
+      data: {},
+      foldList: [],
+      showSubList: [],
+      activeName: 'base',
+      reload: false,
+      showPage: true,
+      showMoreOperates: false,
+      isVisual: true,
+      sublistRadio: null,
+      sublistField: null,
+      sublistFieldList: [],
+      // 页面配置
+      configs: {},
+      // 页面默认配置项
+      defaultConfigs: {
+        navConfigs: {
+          flag: true,
+          title: this.page.title || this.meta.title
+        },
+        formConfigs: {
+          titleFlag: true,
+          // fieldGroups: this.meta.getAttriNames(),
+          fieldGroups: [],
+          fieldConfigs: {}, // 字段配置
+          column: '2'
+        }
+      },
+      operateSetting: {},
+      buttonSetting: {},
+      pageTypeKey: 'DETAIL',
+      pageTypeList: [
+        { label: '新增', value: 'ADD' },
+        { label: '编辑', value: 'EDIT' },
+        { label: '详情', value: 'DETAIL' }
+      ],
+      operatesInit: [
+        { // 操作按钮
+          text: '保存',
+          ui: 'primary',
+          handler: 'submitForm',
+          option: "pageTypeKey==='ADD'"
+        }, { // 操作按钮
+          text: '保存',
+          ui: 'primary',
+          handler: 'submitForm',
+          option: "pageTypeKey==='EDIT'"
+        }, {
+          text: '编辑',
+          ui: 'primary',
+          handler: 'editEntity',
+          option: "pageTypeKey==='DETAIL'"
+        },
+        {
+          text: '返回',
+          ui: 'default',
+          // cls: 'btn_hollow',
+          handler: 'backPage'
+        }
+      ],
+      // 按钮设置
+      operateConfigs: [
+        { key: 'text', name: '按钮名称', type: 'text' },
+        // { key: 'icon', name: '图标', type: 'text' },
+        {
+          key: 'ui',
+          name: '按钮类型',
+          type: 'select',
+          options: [
+            { label: '默认按钮', value: 'default' },
+            { label: '主要按钮', value: 'primary' },
+            { label: '成功按钮', value: 'success' },
+            { label: '信息按钮', value: 'info' },
+            { label: '警告按钮', value: 'warning' },
+            { label: '危险按钮', value: 'danger' },
+            { label: '文本按钮', value: 'text' }
+          ]
+        },
+        {
+          key: 'handler',
+          name: '调用方法',
+          type: 'select',
+          options: [
+            { label: '保存', value: 'submitForm' },
+            { label: '编辑', value: 'editEntity' },
+            { label: '返回', value: 'backPage' },
+            { label: '通用请求', value: 'commonAction' }
+          ]
+        },
+        { key: 'option', name: '显示条件', type: 'text' }
+        // { key: 'action', name: '请求命令', type: 'text' }
+      ],
+      dialogTableVisible: false,
+      dialogFieldVisible: false,
+      dialogAreaVisible: false,
+      dialogSublistVisible: false,
+      dialogAddFormVisible: false,
+      dialogOperateVisible: false,
+      dialogEditButtonVisible: false,
+      fieldSetting: {},
+      sublistSetting: {
+        title: '',
+        contentType: 'sublist',
+        children: []
+      },
+      // formSetting: {},
+      formSetting: {
+        title: '',
+        column: '2',
+        children: []
+      },
+      areaSetting: {
+        title: '',
+        column: '2'
+      },
+      fieldStatus: [
+        { label: '编辑', value: 'EDIT' },
+        { label: '只读', value: 'INVALID' },
+        { label: '隐藏', value: 'HIDDEN' }
+      ],
+      isRequiredList: [
+        { label: '是', value: '1' },
+        { label: '否', value: '0' }
+      ],
+      columnList: [
+        { label: '1', value: '1' },
+        { label: '2', value: '2' }
+      ],
+      dialogTitle: '字段修改',
+      fieldGroup: [],
+      fieldGroupSub: [],
+      unFoldFieldItems: {},
+      selectFields: [],
+      optionKey: '',
+      configItemKey: '',
+      fieldIndex: null,
+      formFieldIndex: null,
+      editOperaIndex: null,
+      editButtonIndex: null,
+      EntityRelation: [],
+      sublistAdd: null,
+      fieldAreaNum: null,
+      sortList: []
+    }
+  },
+  computed: {
+    getFormWidth () {
+      return (index, fieldConfigItem) => {
+        const { dataType, state } = fieldConfigItem
+        if (((dataType === 'textarea' || dataType === 'bigtext') && state !== 'SEARCH') || dataType === 'photo' || dataType === 'file' || dataType === 'blob' || dataType === 'html') {
+          return '1'
+        }
+        return this.formConfigs.fieldGroups[index].column || this.formConfigs.column
+      }
+    },
+    dragOptions () {
+      return {
+        animation: 200,
+        group: 'description',
+        disabled: false,
+        ghostClass: 'ghost'
+      }
+    },
+    fieldLabel () {
+      return (field) => {
+        let attriName = field
+        let attriLabel = ''
+        if (typeof field === 'object') {
+          attriName = field.attriName
+          attriLabel = field.attriLabel
+        }
+        // 查找该字段
+        if (!attriLabel) {
+          this.fieldGroup.forEach(fieldItem => {
+            const fieldConfig = fieldItem.children.find(item => item.code === attriName)
+            if (fieldConfig) {
+              attriLabel = fieldConfig.text
+            }
+          })
+        }
+        return attriLabel || attriName
+      }
+    },
+    formConfigs () {
+      // const { formConfigs = {} } = this.configs
+      let formConfigs = {}
+      if (this.configs.formConfigs) {
+        formConfigs = { ...this.configs.formConfigs }
+        for (const item in this.defaultConfigs.formConfigs) {
+          if (this.configs.formConfigs[item] === undefined) {
+            formConfigs[item] = this.defaultConfigs.formConfigs[item]
+          }
+        }
+      } else {
+        formConfigs = { ...this.defaultConfigs.formConfigs }
+      }
+      return formConfigs
+    },
+    pageType () {
+      const { pageType: defaultPageType } = this.configs
+      const { pageType = defaultPageType } = this.$query
+      return pageType
+    },
+    operates () {
+      // const { operates = [] } = this.formConfigs
+      const operates = this.formConfigs.operates || this.operatesInit
+      return operates
+    },
+    actionOperates () {
+      const { operates = [] } = this.formConfigs
+      const actionOperates = [...operates]
+      actionOperates.map(item => (item.name = item.text))
+      return actionOperates.filter(item => this.buttonFlag(item))
+    },
+    buttonFlag () {
+      return ({ option, rightCode }) => {
+        if (option && option.indexOf('pageType===') !== -1) {
+          option = option.replace('pageType===', 'pageTypeKey===')
+        }
+        let flag = true
+        // eslint-disable-next-line no-eval
+        if (option) flag = eval(`this.${option}`)
+        return flag
+      }
+    },
+    linkAttrs () {
+      const { linkSubs } = this.configs
+      // const { linkSubs } = this.pageConfig
+      let linkAttrs = []
+      if (!this.meta) return linkAttrs
+      if (!linkSubs) {
+        // 获取关联sub
+        if (this.pageType === 'DETAIL') {
+          linkAttrs = this.meta.getRelatedEntitysOfDetail()
+        } else if (this.pageType === 'EDIT') {
+          linkAttrs = this.meta.getRelatedEntitysOfEdit()
+        }
+      } else {
+        // 获取每个关联关系
+        linkSubs.forEach(item => {
+          const linkAttr = this.meta.getRelationByFlag(item)
+          if (linkAttr) {
+            linkAttrs.push(linkAttr)
+          }
+        })
+      }
+      return linkAttrs
+    },
+    getMetaIdByRelation  () {
+      return (relationId) => {
+        let relation = null
+        let metaId = this.$metaId
+        const relations = relationId.split('#')
+        relations.forEach(async item => {
+          let meta = this.metas[metaId]
+          if (!meta) {
+            meta = await this.$store.dispatch({
+              type: ADD_META,
+              metaId
+            })
+          }
+          relation = meta.getRelationByFlag(item)
+          metaId = relation.entityA
+        })
+        return metaId
+      }
+    }
+  },
+  watch: {
+    // configs: {
+    //   handler (v) {
+    //     this.$emit('updateConfig', v)
+    //   },
+    //   deep: true
+    // },
+    selectFields (v) {
+      if (this.optionKey && this.configItemKey) {
+        const configItem = { ...this.configs[this.optionKey] }
+        // configItem[this.configItemKey][this.fieldIndex].children = v
+        configItem[this.configItemKey][this.fieldIndex].children = [...v]
+        this.$set(this.configs, this.optionKey, configItem)
+        this.sortList = [...v]
+        this.getFieldConfig()// 修改fieldGroups
+      }
+    }
+    // reload (v) {
+    //   if (v) {
+    //     this.showPage = false
+    //     this.$nextTick(() => {
+    //       setTimeout(() => {
+    //         this.showPage = true
+    //         this.reload = false
+    //       }, 0)
+    //     })
+    //   }
+    // }
+  },
+  methods: {
+    changeObject (v) {
+      // const selectItem = this.condition
+      // const value = selectItem.value ? (selectItem.value + ',' + v.id) : v.id
+      // const label = selectItem.label ? (selectItem.label + ',' + v.name) : v.name
+      const value = v.id
+      const label = v.name
+      this.popoverObejct = false
+      this.$set(this.condition, 'value', value)
+      this.$set(this.condition, 'label', label)
+    },
+    clearObject () {
+      this.$set(this.condition, 'value', '')
+      this.$set(this.condition, 'label', '')
+    },
+    savePageConfig () {
+      const content = JSON.stringify(this.configs, null, '\t')
+      this.$emit('saveUpdateConfig', content)
+    },
+    dragButtonEdit (operateIndex) {
+      this.dialogTitle = '按钮修改'
+      this.editButtonIndex = operateIndex
+      this.dialogEditButtonVisible = true
+      const editItem = this.operates[operateIndex]
+      this.buttonSetting = { ...editItem }
+    },
+    dragButtonDelete (operateIndex) {
+      this.$confirm('是否删除按钮?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const configItem = { ...this.configs.formConfigs }
+        const operates = this.operates
+        operates.forEach((item) => {
+          if (item.option) {
+            item.option = item.option.replace('pageTypeKey', 'pageType')
+          }
+        })
+        operates.splice(operateIndex, 1)
+        configItem.operates = [...operates]
+        this.$set(this.configs, 'formConfigs', configItem)
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+        this.savePageConfig()
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    dragButtonHandler (operateIndex) {
+      this.mouseenterIndex = operateIndex
+    },
+    dragButtonLeave () {
+      this.mouseenterIndex = null
+    },
+    addSettingButtons () {
+      this.dialogEditButtonVisible = true
+      this.editButtonIndex = null
+      this.buttonSetting = {}
+    },
+    saveButtonSetting () {
+      const configItem = { ...this.configs.formConfigs }
+      const operates = this.formConfigs.operates || this.operatesInit
+      if (this.editButtonIndex != null) {
+        operates.splice(this.editButtonIndex, 1, this.buttonSetting)
+      } else {
+        operates.push(this.buttonSetting)
+      }
+      operates.forEach((item) => {
+        if (item.option) {
+          item.option = item.option.replace('pageTypeKey', 'pageType')
+        }
+      })
+      configItem.operates = [...operates]
+      this.$set(this.configs, 'formConfigs', configItem)
+      this.editButtonIndex = null
+      this.buttonSetting = {}
+      this.savePageConfig()
+      this.dialogEditButtonVisible = false
+    },
+    // 设置按钮
+    setTheButton () {
+      this.dialogOperateVisible = true
+    },
+    // 编辑按钮
+    editOperate (index) {
+      // const { [this.operateOptionKey]: configItem } = this.configs
+      const operates = this.formConfigs.operates || this.operatesInit
+      this.editOperaIndex = index
+      const editItem = operates[index]
+      this.operateSetting = { ...editItem }
+    },
+    // 保存按钮设置
+    saveOperateSetting () {
+      const configItem = { ...this.configs.formConfigs }
+      const operates = this.formConfigs.operates || this.operatesInit
+      if (this.editOperaIndex != null) {
+        operates.splice(this.editOperaIndex, 1, this.operateSetting)
+      }
+      operates.forEach((item) => {
+        if (item.option) {
+          item.option = item.option.replace('pageTypeKey', 'pageType')
+        }
+      })
+      configItem.operates = [...operates]
+      this.$set(this.configs, 'formConfigs', configItem)
+      this.editOperaIndex = null
+      this.operateSetting = {}
+      // const content = JSON.stringify(this.configs, null, '\t')
+      // this.$emit('saveUpdateConfig', content)
+      this.savePageConfig()
+    },
+    // 拖动表单字段
+    changeDrag (event) {
+      const oldIndex = event.moved.oldIndex
+      const newIndex = event.moved.newIndex
+      const fieldGroupsItem = { ...this.fieldGroups[this.fieldIndex] }
+      const childrenarr = fieldGroupsItem.children
+      // 元素位置交换
+      // childrenarr.splice(newIndex, 1, ...childrenarr.splice(oldIndex, 1, childrenarr[newIndex]))
+      if (oldIndex > newIndex) { // 向上拖拽
+        childrenarr.splice(newIndex, 0, childrenarr[oldIndex])
+        childrenarr.splice(oldIndex + 1, 1)
+      } else { // 向下拖拽
+        childrenarr.splice(newIndex + 1, 0, childrenarr[oldIndex])
+        childrenarr.splice(oldIndex, 1)
+      }
+      const configItem = { ...this.configs[this.optionKey] }
+      const configChild = configItem[this.configItemKey][this.fieldIndex].children
+      // configChild.splice(newIndex, 1, ...configChild.splice(oldIndex, 1, configChild[newIndex]))
+      if (oldIndex > newIndex) { // 向上拖拽
+        configChild.splice(newIndex, 0, configChild[oldIndex])
+        configChild.splice(oldIndex + 1, 1)
+      } else { // 向下拖拽
+        configChild.splice(newIndex + 1, 0, configChild[oldIndex])
+        configChild.splice(oldIndex, 1)
+      }
+    },
+    changeDragField (event, index) {
+      this.optionKey = 'formConfigs'
+      this.configItemKey = 'fieldGroups'
+      this.fieldIndex = index
+      const oldIndex = event.moved.oldIndex
+      const newIndex = event.moved.newIndex
+      const configItem = { ...this.configs[this.optionKey] }
+
+      const { [this.optionKey]: defaultConfigItem } = this.defaultConfigs
+      if (!configItem[this.configItemKey]) {
+        configItem[this.configItemKey] = defaultConfigItem[this.configItemKey]
+        this.$set(this.configs, this.optionKey, configItem)
+      }
+
+      if (!configItem[this.configItemKey][this.fieldIndex].children) {
+        configItem[this.configItemKey][this.fieldIndex].children = [...this.meta.getListFields()]
+        // configItem[this.configItemKey][this.fieldIndex].children = [...this.defaultConfigs.formConfigs.fieldGroups]
+      }
+      const configChild = configItem[this.configItemKey][this.fieldIndex].children
+      // configChild.splice(newIndex, 1, ...configChild.splice(oldIndex, 1, configChild[newIndex]))
+      if (oldIndex > newIndex) { // 向上拖拽
+        configChild.splice(newIndex, 0, configChild[oldIndex])
+        configChild.splice(oldIndex + 1, 1)
+      } else { // 向下拖拽
+        configChild.splice(newIndex + 1, 0, configChild[oldIndex])
+        configChild.splice(oldIndex, 1)
+      }
+      this.$set(this.configs, this.optionKey, configItem)
+      this.savePageConfig()
+    },
+    // 拖动按钮
+    changeDragButton (event) {
+      const configItem = { ...this.configs.formConfigs }
+      const operates = this.operates
+      operates.forEach((item) => {
+        if (item.option) {
+          item.option = item.option.replace('pageTypeKey', 'pageType')
+        }
+      })
+      configItem.operates = [...operates]
+      this.$set(this.configs, 'formConfigs', configItem)
+      const content = JSON.stringify(this.configs, null, '\t')
+      this.$emit('saveUpdateConfig', content)
+    },
+    // 点击添加字段区域
+    AddFieldAreas () {
+      this.dialogAddFormVisible = true
+      const arr = this.formConfigs.fieldGroups
+      // for (let i = 0; i < arr.length; i++) {
+      //   if (arr[i].contentType === 'sublist') {
+      //     this.fieldAreaNum = i
+      //     break
+      //   }
+      // }
+      let num = 0
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].contentType === undefined) {
+          num++
+        }
+      }
+      this.fieldAreaNum = num
+    },
+    // 添加字段区域
+    saveFormSetting () {
+      const { fieldGroups = [] } = this.formConfigs
+      // fieldGroups.splice(this.fieldAreaNum - 1, 0, this.formSetting)
+      fieldGroups.splice(this.fieldAreaNum, 0, this.formSetting)
+      // this.fieldGroups.splice(this.fieldAreaNum - 1, 0, this.formSetting)
+      this.getFieldConfig()
+      this.configs.formConfigs.fieldGroups = fieldGroups
+      this.dialogAddFormVisible = false
+      this.formSetting = {
+        title: '',
+        column: '2',
+        children: []
+      }
+      this.savePageConfig()
+    },
+    // 取消添加字段区域
+    cancelFormSetting () {
+      this.dialogAddFormVisible = false
+    },
+    // 新增子集
+    saveSublistSetting () {
+      let contentType = ''
+      if (this.sublistRadio === 3) {
+        contentType = 'sub'
+      } else {
+        contentType = 'sublist'
+      }
+      if (this.sublistRadio === 3 && this.sublistField === 5) {
+        const config = {}
+        config.listConfigs = {}
+        config.listConfigs.listFields = [...this.sublistFieldList]
+        this.sublistSetting.config = config
+      }
+      if (this.sublistRadio === 2) {
+        this.sublistSetting.pageLable = this.condition.label
+        this.sublistSetting.pageId = this.condition.value
+      }
+      if (this.sublistRadio !== 2 && this.sublistSetting.pageId) {
+        delete this.sublistSetting.pageId
+        delete this.sublistSetting.pageLable
+      }
+      if (this.sublistRadio !== 3 && this.sublistSetting.config) {
+        delete this.sublistSetting.config
+      }
+      if (this.sublistRadio === 3 && this.sublistField !== 5) {
+        delete this.sublistSetting.config
+      }
+      this.sublistSetting.contentType = contentType
+      const { fieldGroups = [] } = this.formConfigs
+      fieldGroups.push(this.sublistSetting)
+      this.fieldGroups.push(this.sublistSetting)
+      this.configs.formConfigs.fieldGroups = fieldGroups
+      this.sublistSetting = {
+        title: '',
+        contentType: '',
+        children: []
+      }
+      this.sublistRadio = null
+      this.sublistField = null
+      this.sublistFieldList = []
+      this.savePageConfig()
+      this.dialogSublistVisible = false
+    },
+    // 修改子集
+    updateSublistSetting () {
+      let contentType = ''
+      if (this.sublistRadio === 3) {
+        contentType = 'sub'
+      } else {
+        contentType = 'sublist'
+      }
+      if (this.sublistRadio === 3 && this.sublistField === 5) {
+        const config = {}
+        config.listConfigs = {}
+        config.listConfigs.listFields = [...this.sublistFieldList]
+        this.sublistSetting.config = config
+      }
+      if (this.sublistRadio === 2) {
+        this.sublistSetting.pageLable = this.condition.label
+        this.sublistSetting.pageId = this.condition.value
+      }
+      if (this.sublistRadio !== 2 && this.sublistSetting.pageId) {
+        delete this.sublistSetting.pageId
+        delete this.sublistSetting.pageLable
+      }
+      if (this.sublistRadio !== 3 && this.sublistSetting.config) {
+        delete this.sublistSetting.config
+      }
+      if (this.sublistRadio === 3 && this.sublistField !== 5) {
+        delete this.sublistSetting.config
+      }
+      this.sublistSetting.contentType = contentType
+      const fieldGroupsItem = this.sublistSetting
+      this.$set(this.fieldGroups, this.fieldIndex, fieldGroupsItem)
+      const configItem = { ...this.configs[this.optionKey] }
+      configItem[this.configItemKey][this.fieldIndex] = this.sublistSetting
+      this.$set(this.configs, this.optionKey, configItem)
+
+      this.sublistSetting = {
+        title: '',
+        contentType: '',
+        children: []
+      }
+      this.sublistRadio = null
+      this.sublistField = null
+      this.sublistFieldList = []
+      this.savePageConfig()
+      this.showPage = false
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.showPage = true
+        }, 0)
+      })
+      this.dialogSublistVisible = false
+    },
+    // 取消子集修改
+    cancelSublistSetting () {
+      this.dialogSublistVisible = false
+    },
+    // // 点击新增字段按钮
+    // addField (index) {
+    //   this.optionKey = 'formConfigs'
+    //   this.configItemKey = 'fieldGroups'
+    //   this.fieldIndex = index
+
+    //   // this.selectFields = this.configs.formConfigs.fieldGroups[index].children || this.defaultConfigs.formConfigs.fieldGroups || []
+    //   const arr = this.configs.formConfigs.fieldGroups[index].children || this.defaultConfigs.formConfigs.fieldGroups || []
+    //   this.selectFields = [...arr]
+
+    //   this.dialogFieldVisible = true
+    // },
+    switchFold (code) {
+      const { [code]: flag } = this.unFoldFieldItems
+      this.$set(this.unFoldFieldItems, code, !flag)
+    },
+    // 点击表单配置
+    configuration (index) {
+      this.optionKey = 'formConfigs'
+      this.configItemKey = 'fieldGroups'
+      this.fieldIndex = index
+      const arr = this.configs.formConfigs.fieldGroups[index].children || this.defaultConfigs.formConfigs.fieldGroups || []
+      this.selectFields = [...arr]
+
+      this.areaSetting.title = this.configs.formConfigs.fieldGroups[index].title
+      this.areaSetting.column = this.configs.formConfigs.fieldGroups[index].column || this.configs.formConfigs.column
+      this.sortList = this.configs.formConfigs.fieldGroups[index].children || this.selectFields
+      // this.sortList = this.selectFields
+      this.dialogAreaVisible = true
+    },
+    async sublistEntityChange (value) {
+      const arr = this.EntityRelation.filter(item => {
+        return item.value === value
+      })
+      this.sublistSetting.title = arr[0].label
+      const meteId = this.getMetaIdByRelation(value)
+      let meta = this.metas[meteId]
+      if (!meta) {
+        meta = await this.$store.dispatch({
+          type: ADD_META,
+          metaId: meteId
+        })
+      }
+      this.$FieldFactory.createFields({
+        fields: this.metas[meteId].getListFields(),
+        meta: meta,
+        pageType: this.pageType
+      })
+        .then(data => {
+          // this.fieldGroupSub = [...data]
+          this.fieldGroupSub = data.filter(item => {
+            return item.state !== 'HIDDEN'
+          })
+        })
+    },
+    // 更新子集
+    updateSublist (index) {
+      this.sublistAdd = false
+      this.dialogTitle = '子集修改'
+      this.dialogSublistVisible = true
+      this.optionKey = 'formConfigs'
+      this.configItemKey = 'fieldGroups'
+      this.fieldIndex = index
+      // this.sublistSetting.title = this.configs.formConfigs.fieldGroups[index].title
+      // this.sublistSetting.children[0] = this.configs.formConfigs.fieldGroups[index].children[0]
+      this.sublistSetting = { ...this.configs.formConfigs.fieldGroups[index] }
+      if (this.sublistSetting.contentType === 'sub') {
+        this.sublistRadio = 3
+      } else if (this.sublistSetting.contentType === 'sublist' && this.sublistSetting.pageId) {
+        this.sublistRadio = 2
+        this.condition.value = this.sublistSetting.pageId
+        this.condition.label = this.sublistSetting.pageLable
+      } else {
+        this.sublistRadio = 1
+      }
+      const meteId = this.getMetaIdByRelation(this.sublistSetting.children[0])
+      const meta = this.metas[meteId]
+      // this.condition.codeKey = 'FM_PAGE_CONFIG'
+      this.$FieldFactory.createFields({
+        fields: this.metas[meteId].getListFields(),
+        meta: meta,
+        pageType: this.pageType
+      })
+        .then(data => {
+          // this.fieldGroupSub = [...data]
+          this.fieldGroupSub = data.filter(item => {
+            return item.state !== 'HIDDEN'
+          })
+        })
+      if (this.sublistRadio === 3 && this.sublistSetting.config) {
+        this.sublistField = 5
+        // const config = this.sublistSetting.config
+        this.sublistFieldList = [...this.sublistSetting.config.listConfigs.listFields]
+      }
+      if (this.sublistRadio === 3 && !this.sublistSetting.config) {
+        this.sublistField = 4
+      }
+    },
+    // 删除子集
+    deleteSublist (index) {
+      // this.optionKey = 'formConfigs'
+      // this.configItemKey = 'fieldGroups'
+      // this.fieldIndex = index
+      this.$confirm('是否删除?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const { fieldGroups = [] } = this.formConfigs
+        fieldGroups.splice(index, 1)
+        this.fieldGroups.splice(index, 1)
+        this.configs.formConfigs.fieldGroups = fieldGroups
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+        this.savePageConfig()
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    // 保存表单区域配置
+    saveAreaSetting () {
+      const obj = this.configs[this.optionKey][this.configItemKey][this.fieldIndex]
+      obj.title = this.areaSetting.title
+      obj.column = this.areaSetting.column
+
+      const configItem = { ...this.configs[this.optionKey] }
+      configItem[this.configItemKey][this.fieldIndex] = obj
+      this.$set(this.configs, this.optionKey, configItem)
+      this.dialogAreaVisible = false
+      this.savePageConfig()
+      this.getFieldConfig()
+    },
+    // 取消表单区域配置
+    cancelAreaSetting () {
+      this.dialogAreaVisible = false
+    },
+    // 取消字段修改
+    cancelFieldSetting () {
+      this.dialogTableVisible = false
+    },
+    // 字段修改保存
+    saveFieldSetting () {
+      const obj = {}
+      // obj.attriLabel = this.fieldSetting.attriLabel
+      if ((this.fieldConfig.attriLabel !== this.fieldSetting.attriLabel)) {
+        obj.attriLabel = this.fieldSetting.attriLabel
+        this.fieldConfig.attriLabel = this.fieldSetting.attriLabel
+      }
+      if ((this.fieldConfig.state !== this.fieldSetting.state)) {
+        obj.state = this.fieldSetting.state
+        this.fieldConfig.state = this.fieldSetting.state
+      }
+      if ((this.fieldConfig.isRequired !== this.fieldSetting.isRequired)) {
+        obj.isRequired = this.fieldSetting.isRequired
+        this.fieldConfig.isRequired = this.fieldSetting.isRequired
+      }
+      const arr = Object.keys(obj)
+      if (arr.length > 0) {
+        const { formConfigs = {} } = this.configs
+        const { fieldConfigs = {} } = this.configs.formConfigs
+        fieldConfigs[this.fieldSetting.attriName] = obj
+        formConfigs.fieldConfigs = fieldConfigs
+        this.$set(this.configs, 'formConfigs', formConfigs)
+        this.$emit('updateConfig', this.configs)
+        this.savePageConfig()
+      }
+      this.dialogTableVisible = false
+    },
+    visualShow (index) {
+      this.clickIndex = index
+    },
+    visualHidden () {
+      this.clickIndex = null
+    },
+    // 字段点击修改
+    updateHandler (fieldConfig, formFieldIndex, index) {
+      this.dialogTitle = '字段修改'
+      this.fieldConfig = fieldConfig
+      this.formFieldIndex = formFieldIndex
+      this.fieldIndex = index
+      this.fieldSetting = { ...this.fieldConfig }
+      this.dialogTableVisible = true
+    },
+    // 字段点击删除
+    deleteHandler (fieldConfig, formFieldIndex, index) {
+      this.optionKey = 'formConfigs'
+      this.configItemKey = 'fieldGroups'
+      this.fieldIndex = index
+      if (this.selectFields.length === 0) {
+        // this.selectFields = this.configs.formConfigs.fieldGroups[index].children || this.defaultConfigs.formConfigs.fieldGroups || []
+        const arr = this.configs.formConfigs.fieldGroups[index].children || this.defaultConfigs.formConfigs.fieldGroups || []
+        this.selectFields = [...arr]
+      }
+      this.$confirm('是否删除此字段?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.fieldConfig = fieldConfig
+        this.formFieldIndex = formFieldIndex
+        const obj = this.configs.formConfigs.fieldGroups
+        obj[index].children.splice(this.formFieldIndex, 1)
+        this.fieldGroups[index].children.splice(this.formFieldIndex, 1)
+        if (obj[index].children.length === 0) {
+          this.configs.formConfigs.fieldGroups.splice(index, 1)
+        }
+        const formConfigs = this.configs.formConfigs
+        formConfigs.fieldGroups = obj
+        this.$set(this.configs, 'formConfigs', formConfigs)
+        // this.getFieldConfig()
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+        this.savePageConfig()
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    // 字段点击修改
+    visualUpdate (params, index) {
+      this.dialogTitle = '字段修改'
+      this.fieldConfig = params[0]
+      this.formFieldIndex = params[1]
+      this.fieldSetting = { ...this.fieldConfig }
+      this.dialogTableVisible = true
+    },
+    // 字段点击删除
+    visualDelete (params, index) {
+      this.optionKey = 'formConfigs'
+      this.configItemKey = 'fieldGroups'
+      this.fieldIndex = index
+      if (this.selectFields.length === 0) {
+        // this.selectFields = this.configs.formConfigs.fieldGroups[index].children || this.defaultConfigs.formConfigs.fieldGroups || []
+        const arr = this.configs.formConfigs.fieldGroups[index].children || this.defaultConfigs.formConfigs.fieldGroups || []
+        this.selectFields = [...arr]
+      }
+      this.$confirm('是否删除此字段?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.fieldConfig = params[0]
+        this.formFieldIndex = params[1]
+        const obj = this.configs.formConfigs.fieldGroups
+        obj[index].children.splice(this.formFieldIndex, 1)
+        this.fieldGroups[index].children.splice(this.formFieldIndex, 1)
+        if (obj[index].children.length === 0) {
+          this.configs.formConfigs.fieldGroups.splice(index, 1)
+        }
+        const formConfigs = this.configs.formConfigs
+        formConfigs.fieldGroups = obj
+        this.$set(this.configs, 'formConfigs', formConfigs)
+        // this.getFieldConfig()
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    removeField (index) {
+      this.selectFields.splice(index, 1)
+    },
+    getFieldConfig () {
+      const { fieldGroups = [], fieldConfigs = {} } = this.formConfigs
+      // const { fieldGroups, fieldConfigs = {} } = this.formConfigs
+      const { fieldConfigs: routeFieldConfigs = {} } = this.$query
+      if (!fieldGroups || fieldGroups.length === 0) {
+        fieldGroups.push({
+          title: '基本信息'
+        })
+      }
+      fieldGroups.forEach((item, index) => {
+        // 生成字段配置
+        if (item.contentType) {
+          this.$set(this.fieldGroups, index, { ...item })
+        } else {
+          this.$FieldFactory.createFields({
+            defaultFieldConfigs: { ...routeFieldConfigs, ...fieldConfigs },
+            meta: this.meta,
+            metaId: this.$metaId,
+            pageType: item.pageType || this.pageType,
+            fields: item.children
+          })
+            .then(data => {
+              this.$set(this.fieldGroups, index, { ...item, children: [...data] })
+            })
+        }
+      })
+    },
+    getFormData () {
+      let submitFlag = true
+      const params = {}
+      for (let index = 0; index < this.fieldGroups.length; index++) {
+        const fieldItem = this.fieldGroups[index]
+        if (!fieldItem.contentType && fieldItem.children) {
+          const form = this.$refs[`form${index}`]
+          for (let i = 0; i < fieldItem.children.length; i++) {
+            const fieldConfig = fieldItem.children[i]
+            const field = fieldItem.children[i].attriName
+            form.$refs.form.validate((valid, err) => {
+              if (!valid) {
+                for (const key in err) {
+                  const errMessgae = err[key][0]
+                  this.$message.error(errMessgae.message)
+                  submitFlag = false
+                  return
+                }
+              }
+            })
+            if (submitFlag === false) {
+              break
+            }
+            const formValue = form.formModel[field]
+            if (!field.includes('#')) {
+              let submitValue = formValue
+              if (Array.isArray(formValue)) {
+                submitValue = formValue[formValue.length - 1]
+              }
+              params[fieldConfig.name || `bean.${field}`] = submitValue || ''
+            }
+          }
+        }
+      }
+      return submitFlag ? params : false
+    },
+    verify () {
+      // 校验字段
+      let flag = true
+      for (let i = 0; i < this.fieldGroups.length; i++) {
+        const fields = this.fieldGroups[i]
+        if (flag === false) {
+          break
+        }
+        if (!fields.contentType) {
+          for (let j = 0; j < fields.children.length; j++) {
+            const field = fields.children[j]
+            if (field.isRequired === '1' && field.showFlag) {
+              let isShow = true
+              for (const key in field.showFlag) {
+                if (field.showFlag[key] !== (this.data[key] || this.updateData[key])) {
+                  isShow = false
+                }
+              }
+              if (isShow && !(this.data[field.attriName] || this.updateData[field.attriName])) {
+                flag = false
+                this.$message.error(`请填写${field.attriLabel}`)
+                break
+              }
+            } else if (field.isRequired === '1' && !(this.data[field.attriName] || this.updateData[field.attriName])) {
+              flag = false
+              this.$message.error(`请填写${field.attriLabel}`)
+              break
+            }
+          }
+        }
+      }
+      return flag
+    },
+    foldFn (key) {
+      const index = this.foldList.indexOf(key)
+      if (index === -1) {
+        this.foldList.push(key)
+      } else {
+        this.foldList.splice(index, 1)
+      }
+    },
+    subAddEntity (index) {
+      const subListPage = this.$refs['sublist' + index]
+      if (subListPage) {
+        const subList = subListPage.$refs.component
+        if (subList) subList.addEntity()
+      }
+    },
+    init () {
+      this.getFieldConfig()
+      // 获取其级联编辑页面
+      // this.getData()
+    },
+    // 获取字段
+    getFields () {
+      this.$http.entityFieldTreeStore({
+        metaId: this.$metaId,
+        allSub: false,
+        node: 'root'
+      })
+        .then(data => {
+          // eslint-disable-next-line no-eval
+          const fields = eval('(' + data + ')')
+          const fieldGroup = Object.values(fields) || []
+          fieldGroup.forEach(fieldItem => {
+            fieldItem.children.forEach(item => {
+              item.code = item.code.replace(/\./g, '|')
+            })
+          })
+          this.fieldGroup = [...fieldGroup]
+          const { code } = this.fieldGroup[0]
+          this.$set(this.unFoldFieldItems, code, true)
+        })
+    },
+    // 获取关联对象
+    getEntityRelation () {
+      this.$http.list({
+        action: 'list',
+        entityId: 'FM_ENTITY_RELATION',
+        searchMode: 'simple',
+        'scope.ENTITY_B': this.$metaId
+      })
+        .then(data => {
+          // this.EntityRelation = data.entitys
+          this.EntityRelation = data.entitys.map(item => ({ label: item.TITLE, value: item.FLAG }))
+        })
+    }
+  },
+  created () {
+    this.configs = { ...this.initConfigs }
+    // for (const item in this.defaultConfigs) { // formConfigs,navConfigs
+    //   if (typeof this.defaultConfigs[item] === 'object') {
+    //     // for (const itemtwo in this.defaultConfigs[item]) {
+    //     //   // if (!this.configs[item][itemtwo]) {
+    //     //   //   this.configs[item][itemtwo] = this.defaultConfigs[item][itemtwo]
+    //     //   // }
+    //     //   if (!this.configs[item][itemtwo]) {
+    //     //     if (itemtwo !== 'fieldGroups') {
+    //     //       this.configs[item][itemtwo] = this.defaultConfigs[item][itemtwo]
+    //     //     } else {
+    //     //       this.configs[item][itemtwo] = []
+    //     //     }
+    //     //   }
+    //     // }
+    //   }
+    // }
+    this.getFields()
+    this.init()
+    this.getEntityRelation()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.half{
+  width: 50%;
+}
+.whole{
+  width: 100%;
+}
+// .form-visual{
+//    @include font_color_primary;
+//    margin-left: 20px;
+//    span{
+//      cursor: pointer;
+//    }
+// }
+// .xiugai{
+//   margin-right: 10px;
+// }
+// .dialog-con{
+//   // text-align: center;
+// }
+.add-configuration{
+  // text-align: center;
+  position: absolute;
+  top: 15px;
+  left: 31%;
+}
+// .dialog-con::v-deep .el-form-item__content{
+//   // margin-left: 0px !important;
+// }
+.dialog-button{
+  margin-top: 52px;
+  text-align: center;
+}
+.tabs {
+  &::v-deep {
+    .el-tabs__header {
+      // display: none;
+      background: #fff;
+      margin: 0;
+    }
+    .el-tabs__item.is-active::after{
+      content: '';
+      position: absolute;
+      left: 0;
+      top: -1px;
+      width: 100%;
+      height: 2px;
+      @include bg_color_primary;
+    }
+    .el-tabs__nav-wrap::after {
+      display: none;
+    }
+    .el-tabs__content {
+      flex: 1;
+      overflow: hidden;
+    }
+    .el-tab-pane {
+      height: 100%;
+    }
+  }
+}
+.form-container {
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+}
+// .form-container ::v-deep .el-form-item{
+//   margin-bottom: 12px;
+// }
+.sub-add-btn {
+  float: right;
+  width: 70px;
+  height: 36px;
+  box-sizing: border-box;
+  // @include border_primary;
+  // @include border_color_primary;
+  border-radius: 4px;
+  @include font_color_primary;
+  font-size: 14px;
+  text-align: center;
+  line-height: 34px;
+  margin-right: 12px;
+  cursor: pointer;
+}
+.form-item {
+  background: #fff;
+  margin-bottom: 16px;
+}
+.form-title {
+  padding: 6px 24px;
+  position: relative;
+  overflow: hidden;
+  font-size: 16px;
+  line-height: 36px;
+  &::after {
+    content: '';
+    position: absolute;
+    left: -24px;
+    bottom: 0;
+    width: calc(100% + 48px);
+    height: 1px;
+    background: #e3e3e3;
+  }
+  i {
+    @include font_color_primary;
+    font-size: 20px;
+    float: right;
+    cursor: pointer;
+    transition: all .5s;
+    line-height: 36px;
+  }
+  .fold {
+    transform: rotate(180deg);
+  }
+}
+.form-title-border{
+  border-left: 3px solid;
+  @include border_color_primary;
+  padding-left: 6px;
+}
+.form-content {
+  padding: 24px;
+  overflow: hidden;
+  &.no-padding {
+    padding: 0;
+  }
+}
+.button-container {
+  // margin-top: 10px;
+  // padding: 10px 24px;
+  margin: 12px 0;
+  text-align: center;
+  &::v-deep {
+    .el-button {
+      padding: 12px 42px;
+      margin: 0 12px;
+    }
+  }
+}
+.button-container .button-new-tag{
+  padding: 12px;
+  margin: 0 12px;
+}
+.mobile-button-container {
+  height: 46px;
+}
+.mobile-button-inner {
+ display: flex;
+  position: fixed;
+  z-index: 2;
+  bottom: 0;
+  box-shadow: 0 -1px 2px rgba(0,0,0,.1);
+  width: 100%;
+  margin: 0;
+  &::v-deep {
+  .el-button {
+      flex: 1;
+      margin: 0;
+      border:0;
+      border-radius: 0;
+      padding: 16px 42px;
+    }
+  }
+}
+.field-item {
+   display: inline-block;
+   padding: 6px 12px;
+   border:1px dashed rgba($--color-primary, .6);
+   @include bg_color_primary(.1);
+   @include font_color_primary;
+   line-height: 1;
+   margin: 4px 0;
+   margin-right: 10px;
+   cursor: move;
+   user-select: none;
+   i {
+     margin-left: 2px;
+     cursor: pointer;
+     color: #999
+   }
+ }
+.el-checkbox-group{
+   font-size: inherit;
+ }
+.field-item-title {
+   cursor: pointer;
+  //  margin: 24px 0;
+   i {
+     @include font_color_primary;
+     margin-right: 6px;
+   }
+ }
+ .operate-container {
+  display: flex;
+  height: 400px;
+}
+.operate-slide {
+  width: 238px;
+  background-color: #fefefe;
+  border-radius: 4px;
+  border: solid 1px #eaedf4;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: auto;
+   &::v-deep {
+     .el-button {
+       width: 160px;
+       margin: 12px 0;
+       position: relative;
+
+     }
+   }
+   .active::after {
+      content: "\e791";
+      font-family: 'element-icons' !important;
+      position: absolute;
+      left: -20px;
+      @include font_color_primary;
+      font-size: 16px;
+    }
+ }
+.operate-content {
+  // width: 640px;
+  background-color: #fefefe;
+  border-radius: 4px;
+  border: solid 1px #eaedf4;
+  padding: 24px 0;
+  margin-left: 20px;
+  overflow: auto;
+  &::v-deep {
+    .el-input {
+      width: 220px;
+    }
+  }
+}
+.operate-content-edit{
+  width: 400px;
+  margin: auto;
+}
+.is-default {
+   .fields-drag {
+     opacity: .6;
+   }
+   &::v-deep {
+     .is-checked {
+       .el-input__inner {
+         opacity: .6;
+       }
+       .el-radio__inner {
+        @include bg_color_primary(.6);
+        border-color:rgba($--color-primary, .6)
+       }
+       .el-radio__label {
+         color: rgba($--color-primary, .6);
+       }
+     }
+   }
+ }
+.drag-button{
+  // width: 130px;
+  display: inline-block;
+  // min-height: 66px;
+  vertical-align: top;
+}
+.form-visual{
+   @include font_color_primary;
+  //  margin-left: 20px;
+  //  width: 73px;
+   margin-left: 10px;
+   width: 93px;
+   span{
+     cursor: pointer;
+   }
+}
+.xiugai{
+  margin-right: 10px;
+}
+.drag-button-edit{
+  margin-top: 6px;
+  display: flex;
+  padding: 0 12px;
+  justify-content: space-around;
+  span{
+    cursor: pointer;
+    @include font_color_primary;
+  }
+}
+@media screen and (max-width: 992px) {
+  .form-content {
+    padding: 0;
+  }
+}
+</style>