@epxing/designer 0.0.0-stage → 5.3.0-beta.1

package/src/visual/config/ListField.vue

@@ -0,0 +1,1714 @@
+<template>
+<div class="field">
+  <el-radio-group v-model="settingFieldWay" v-if="showFieldWay">
+    <el-radio label="default" value="default">默认字段</el-radio>
+    <el-radio label="custom" value="custom">自定义字段</el-radio>
+  </el-radio-group>
+  <div v-if="settingFieldWay==='custom'">
+    <draggable
+      :list="fieldList"
+      class="list-group"
+      ghost-class="ghost"
+    >
+      <transition-group type="transition" name="flip-list" class="select-field-list">
+        <li v-for="(field, index) in fieldList" class="select-field-item list-group-item" :key="index">
+          <span>
+            {{ fieldLabel(field) }}
+          </span>
+          <div class="select-field-item__mask">
+            <i class="el-icon-edit" @click="editField(field, index)"></i> |
+            <i class="el-icon-close" @click="deleteField(index)"></i>
+          </div>
+        </li>
+      </transition-group>
+    </draggable>
+    <el-button class="add-field-btn" size="small" type="primary" @click="openAddFieldDialog">+ 添加字段</el-button>
+    <slot name="operate"></slot>
+  </div>
+  <ul v-else class="select-field-list">
+    <li v-for="field in defaultValue" class="select-field-item list-group-item" :key="field.attriName || field">
+      <span>
+        {{ fieldLabel(field) }}
+      </span>
+    </li>
+  </ul>
+  <epx-visual-config-lazy-dialog
+    title="添加字段"
+    v-model="showFieldDialog"
+    :append-to-body="true"
+    destroy-on-close
+    width="1200px"
+    class="show-field-dialog"
+    top="10vh"
+  >
+   <div class="field-setting">
+     <div class="field-setting-item">
+      <p class="field-setting__header">
+        <span>选择字段</span>
+      </p>
+      <div class="field-setting__content">
+        <el-input class="field-setting__filter" suffix-icon="el-icon-search" size="default" v-model="filterText"></el-input>
+        <el-tree
+          ref="tree"
+          class="field-tree"
+          show-checkbox
+          node-key="field"
+          :default-expanded-keys="defaultExpandKeys"
+          :data="unSelectFieldStore"
+          :render-after-expand="true"
+          :auto-expand-parent="false"
+          :props="treeProps"
+          :check-strictly="true"
+          :highlight-current="true"
+          @check-change="checkChange"
+          :filter-node-method="filterNode"
+          @node-click="nodeClick"
+
+        >
+          <template v-slot="{ node, data }"><span  :style="data.type==='meta' &&  data.relationType==='1'? {color: 'red'}: {}">
+            {{node.label}}
+          </span></template>
+        </el-tree>
+        <div class="set-show-field">
+          显示字段：
+          <el-checkbox v-model="showLogField">日志字段</el-checkbox>
+          <el-checkbox v-if="showSubFlag" v-model="showSubField">子集字段</el-checkbox>
+        </div>
+        <div v-show="checkedFieldList.length>0" class="field-setting-button__group">
+          <div class="field-setting-button__group_inner">
+            <el-button type="primary" size="default" @click="addCheckedField">添加选中字段</el-button>
+            <el-button size="default" @click="cancelChecked">取消</el-button>
+          </div>
+        </div>
+      </div>
+     </div>
+     <div class="field-setting-item">
+       <p class="field-setting__header">
+        <span>已选字段  <el-checkbox :style="{marginLeft: '8px'}" v-show="selectFieldMulti" v-model="isSelectAllField">全选</el-checkbox></span>
+        <el-checkbox class="fr" v-model="selectFieldMulti">多选</el-checkbox>
+      </p>
+      <div class="field-setting__content">
+        <el-checkbox-group ref="selectFieldContainer" class="setting-fields__select" v-model="checkedSelectFieldList">
+          <draggable
+            :list="settingFieldList"
+            class="list-group"
+            ghost-class="ghost"
+          >
+            <transition-group tag="ul" type="transition" name="flip-list" class="setting-fields__select--list">
+              <li v-for="(field, index) in settingFieldList" :ref="`select_field_${field.attriName || field}`" :class="['setting-fields__select--item', { active: selectFieldIndex===index}]" :key="field.attriName || field" @click="selectSettingField(field, index)">
+                <el-checkbox v-show="selectFieldMulti" @click.stop :label="index" :value="index">{{''}}</el-checkbox>
+                <i class="el-icon-document"></i>
+                <span>{{fieldLabel(field)}}</span>
+                <i v-show="!selectFieldMulti" class="el-icon-delete fr" @click.stop="deleteSettingField(index)"></i>
+              </li>
+            </transition-group>
+          </draggable>
+        </el-checkbox-group>
+        <div v-show="selectFieldMulti" class="field-setting-button__group">
+          <div class="field-setting-button__group_inner">
+            <el-button type="primary" size="default" @click="deleteSelectField">删除</el-button>
+            <el-button size="default" @click="selectFieldMulti=false">取消</el-button>
+          </div>
+        </div>
+    </div>
+     </div>
+     <div class="field-setting-item">
+       <p class="field-setting__header">
+        <span>字段属性</span>
+      </p>
+      <div class="field-setting__content">
+        <el-form v-if="selectField && loadFieldFinish" class="setting-field__config" inline label-position="left" label-width="98px">
+          <el-row class="setting-field__row">
+            <el-form-item label="字段路径">
+              {{getFieldPath}}
+            </el-form-item>
+          </el-row>
+          <el-row class="setting-field__row" v-for="item in showFieldOptions" :key="item.key">
+            <el-form-item :label="`${item.label}`" v-if="!(selectField.configWay !== 'custom' && (item.key !== 'configWay' && item.key !== 'attriName'))">
+              <template v-slot:label>
+                <span class="setting-field__form-label">{{ item.label }}
+                  <el-tooltip v-if="item.note" class="item" effect="dark" :content="item.note" placement="top">
+                    <i class="el-icon-warning-outline"></i>
+                  </el-tooltip>
+                </span>
+              </template>
+              <epx-visual-config-radio
+                  v-if="item.type==='radio' || item.type==='radio-input'"
+                  :code="item.code"
+                  :option-list="item.options"
+                  :value="selectField[item.key]"
+                  :defaultValue="item.defaultValue"
+                  :inputable="item.type==='radio-input'"
+                  @change-configs="v=>(selectField[item.key] = v)"
+                />
+                <epx-visual-config-switch
+                  v-else-if="item.type === 'switch'"
+                  :value="selectField[item.key]"
+                  :defaultValue="item.defaultValue"
+                  @change-configs="v=>(selectField[item.key] = v)"
+                />
+              <template v-else-if="item.type==='function' && fieldInfo.relationSort==='1'">
+                <el-select v-model="selectField[item.key]" placeholder="请选择">
+                  <el-option
+                    v-for="item in getFunctionOption(fieldInfo.dataType)"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </template>
+              <div v-else-if="item.type==='color'" class="setting-field__item">
+                <el-color-picker :model-value="selectField[item.key] || item.defaultValue" @change="v => (selectField[item.key] = v)"></el-color-picker>
+                <span class="setting-field__item--default">{{ selectField[item.key] && selectField[item.key] === item.defaultValue ? '（默认值）' : ''}}</span>
+              </div>
+              <div v-else-if="item.type==='object'" class="setting-field__item">
+                <epx-visual-config-object
+                  :value="selectField[item.key]"
+                  :defaultValue="item.defaultValue"
+                  :object="item.object"
+                  :label="item.label"
+                  :dataKey="item.dataKey"
+                  :fieldConfigs="item.fieldConfigs || {}"
+                  :scopeParams="formatScopeParams(item.scopeParams)"
+                  @change-configs="v => (selectField[item.key] = v)"
+                  >
+                  </epx-visual-config-object>
+              </div>
+               <div v-else-if="item.type==='scopeEntity'" class="setting-field__item" :style="{display: 'inline-block'}">
+                <el-radio-group v-model="scopeEntityType" @change="selectField[item.key] = ''">
+                  <el-radio label="string" value="string">固定值</el-radio>
+                  <el-radio label="field" value="field">字段值</el-radio>
+                </el-radio-group>
+                <div>
+                  <!-- epx-table-form-item 把 $attrs 转发给内层字段组件，内层只认 modelValue / update:modelValue；
+                       原来的 :value / @change 会让 setDefaultValue 永远收不到 -->
+                  <epx-table-form-item v-if="scopeEntityType==='string'" :key="fieldInfo.field" :model-value="selectField[item.key] || item.defaultValue" @update:model-value="v=>setDefaultValue(item.key, v)"
+                    :fieldConfigs="{
+                      attriName: 'scopeEntity',
+                      attriLabel: '查询对象',
+                      codeKey: 'FM_ENTITY',
+                      dataType: 'object',
+                      state: 'EDIT'
+                    }"
+                  ></epx-table-form-item>
+                  <!-- 字段值 -->
+                   <el-popover
+                      v-else-if="scopeEntityType==='field'"
+                      width="200"
+                      trigger="click"
+                    >
+                      <template v-slot:reference><el-input :model-value="selectField[item.key] || item.defaultValue"></el-input></template>
+                      <el-tree
+                        :style="{maxHeight: '300px', overflow: 'auto'}"
+                        :data="fieldStore"
+                        :props="{
+                          children: 'children',
+                          label: 'text'
+                        }"
+                      >
+                        <template v-slot="{node, data}"><span v-html="node.label" @click="selectField[item.key] = `#[${data.field}]`"></span></template>
+                      </el-tree>
+                    </el-popover>
+                </div>
+              </div>
+              <div v-else-if="item.type==='option-scope'" class="setting-field__item" :style="{display: 'inline-block'}">
+                <el-radio-group v-model="optionScopeType" @change="v=>(selectField[item.key] = null)">
+                  <el-radio label="all" value="all">全部</el-radio>
+                  <el-radio label="custom" value="custom">自定义</el-radio>
+                </el-radio-group>
+                <template  v-if="optionScopeType==='custom'">
+                <epx-object v-if="getFieldByCode(selectField.attriName).dataType==='treeList' || getFieldByCode(selectField.attriName).optionType==='treeList'" :modelValue="selectField[item.key]" :fieldConfigs="{ attriLabel: '', codeKey: getFieldByCode(selectField.attriName).codeKey, state: 'EDIT', dataType: 'treeList',isMultiple: '1', onlySelectLeaf: false}" @update:modelValue="v=>(selectField[item.key] = v.map(item=>item.id))"></epx-object>
+                <epx-visual-config-list
+                  v-else
+                  :code="getFieldByCode(selectField.attriName).codeKey"
+                  :multiple="true"
+                  :value="selectField[item.key]"
+                  :defaultValue="item.defaultValue"
+                  @change-configs="v=>(selectField[item.key] = v)"
+                />
+                </template>
+              </div>
+              <div v-else-if="item.type==='value'" class="setting-field__item" :style="{display: 'inline-block'}">
+                <el-radio-group v-model="valueType" @change="selectField[item.key] = ''">
+                  <el-radio label="string" value="string">固定值</el-radio>
+                  <el-radio label="page" value="page">页面参数</el-radio>
+                  <el-radio label="user" value="user">用户信息</el-radio>
+                  <el-radio label="field" value="field">字段值</el-radio>
+                </el-radio-group>
+                <div>
+                  <epx-table-form-item v-if="valueType==='string'" :key="fieldInfo.field" :model-value="selectField[item.key] || item.defaultValue" @update:model-value="v=>setDefaultValue(item.key, v)"
+                    :fieldConfigs="{
+                      attriName: fieldInfo.field,
+                      attriLabel: fieldInfo.text,
+                      dataType: fieldInfo.dataType,
+                      optionType: fieldInfo.optionType==='multibox'? 'multiList': fieldInfo.optionType,
+                      codeKey: fieldInfo.codeKey,
+                      relatedEntity: fieldInfo.relatedEntity,
+                      state: 'EDIT',
+                      datePrecision: fieldInfo.datePrecision,
+                      attribute: {
+                        isTree: fieldInfo.isTree,
+                        isMultiple: fieldInfo.isMultiple,
+                        objectWay: fieldInfo.objectWay
+                      }
+                    }"
+                  ></epx-table-form-item>
+                  <!-- <el-input v-if="valueType==='string'" :model-value="selectField[item.key] || item.defaultValue" @update:model-value="v => changeParams(item.key, v)" :readonly="item.readonly" type="text" size="medium" /> -->
+                  <!-- 页面参数  -->
+                  <el-select v-else-if="valueType==='page'" v-model="selectField[item.key]" filterable allow-create default-first-option>
+                    <el-option
+                      v-for="item in pageParams"
+                      :key="item.CODE"
+                      :label="item.NAME"
+                      :value="`$[${item.CODE}]`">
+                    </el-option>
+                  </el-select>
+                  <!-- 字段值 -->
+                  <el-popover
+                    v-else-if="valueType==='field'"
+                    width="200"
+                    trigger="click"
+                  >
+                    <template v-slot:reference><el-input :model-value="selectField[item.key]"></el-input></template>
+                    <el-tree
+                      :style="{maxHeight: '300px', overflow: 'auto'}"
+                      :data="fieldStore"
+                      node-key="field"
+                      :props="{
+                        children: 'children',
+                        label: 'text'
+                      }"
+                      @node-click="(data, node)=>(selectField[item.key] = `#[${data.field.replace(/\./g, '|')}]`)"
+                    >
+                      <template v-slot="{node}"><span v-html="node.label"></span></template>
+                    </el-tree>
+                  </el-popover>
+                  <!-- 用户信息 -->
+                  <el-select v-else v-model="selectField[item.key]" filterable allow-create default-first-option>
+                    <el-option value="#{user.id}" label="用户ID"></el-option>
+                    <el-option value="#{user.name}" label="用户名称"></el-option>
+                    <el-option value="#{user.client}" label="用户所属客户"></el-option>
+                    <el-option value="#{user.system}" label="用户所属系统"></el-option>
+                    <el-option value="#{user.deptId}" label="用户所属单位"></el-option>
+                    <el-option
+                      v-for="item in pageParams"
+                      :key="item.CODE"
+                      :label="item.NAME"
+                      :value="`$[${item.CODE}]`">
+                    </el-option>
+                  </el-select>
+
+                </div>
+              </div>
+              <div v-else-if="item.type==='events'">
+                <el-dropdown @command="createEvent">
+                  <el-button size="default" type="primary">
+                    新建事件<i class="el-icon-arrow-down el-icon--right"></i>
+                  </el-button>
+                  <template v-slot:dropdown><el-dropdown-menu>
+                    <el-dropdown-item v-for="(text , key) in eventList" :key="key" :command="key">{{key}} {{text}}</el-dropdown-item>
+                  </el-dropdown-menu></template>
+                </el-dropdown>
+                <!-- 事件列表 -->
+                <ul class="event-list">
+                  <li class="event-item" v-for="(item, key) in selectField.events" :key="key" >
+                    <p class="event-title">{{`${key} ${eventList[key]}`}}</p>
+                    <div class="event-type__list">
+                      <div class="event" v-for="(event, index) in item" :key="index">
+                        <p class="event-name">{{event}}</p>
+                        <p class="event-operate">
+                          <i class="el-icon-view" @click="showJsDrawer=true"></i>
+                          <i class="el-icon-setting" @click="settingEvent(key, index)"></i>
+                          <el-popconfirm
+                            title="确认删除吗？"
+                            @confirm="deleteEvent(key, index)"
+                          >
+                            <template v-slot:reference><i class="el-icon-delete" ></i></template>
+                          </el-popconfirm>
+                        </p>
+                      </div>
+                    </div>
+                  </li>
+              </ul>
+              </div>
+              <!-- 参数 -->
+              <div v-else-if="item.type === 'params'">
+                <p v-for="(value, key) in selectField[item.key]" class="operate-params-item" :key="key">
+                  {{key}} = {{value}}
+                  <i class="el-icon-close" @click="deleteParams(item.key, key)"></i>
+                </p>
+                <el-button type="primary" link @click="fieldParamDialog = `${item.key}`">添加参数</el-button>
+              </div>
+              <div v-else-if="item.type==='scope' || item.type==='child-scope'">
+                <epx-visual-config-scope :scopeConfigs="scopeConfigs" :componentMetaId="getScopeMetaId(item)" :value="selectField[item.key]" @change-configs="v=> (selectField[item.key] = v)"></epx-visual-config-scope>
+              </div>
+              <div v-else-if="item.type==='object-scope'">
+                <epx-visual-config-scope :scopeConfigs="scopeConfigs" :componentMetaId="getFieldByCode(selectField.attriName).codeKey || componentMetaId" :value="selectField[item.key]" @change-configs="v=> (selectField[item.key] = v)"></epx-visual-config-scope>
+              </div>
+              <div v-else-if="item.type==='rule'">
+                <epx-rule v-model="selectField[item.key]" :metaId="getScopeMetaId(item)" :fieldConfigs="{state: 'EDIT'}"></epx-rule>
+              </div>
+              <div v-else-if="item.type==='field'">
+                <epx-visual-config-field :value="selectField[item.key]" :metaId="getFieldByCode(selectField.attriName).id  || componentMetaId" @change-configs="v=> (selectField[item.key] = v)"></epx-visual-config-field>
+              </div>
+              <div v-else-if="item.type==='order-field'">
+                <epx-visual-config-order-field :value="selectField[item.key]" :metaId="getScopeMetaId(item)" @change-configs="v=> (selectField[item.key] = v)"></epx-visual-config-order-field>
+              </div>
+              <div class="date-range" v-else-if="item.type==='dateSelectRange'">
+                <el-select size="default" class="date-range__select" v-model="selectField.dateRangeMode">
+                  <el-option label="早于" value="less"></el-option>
+                  <el-option label="晚于" value="greater"></el-option>
+                </el-select>
+                <el-select size="default" class="date-range__select" v-model="selectField.dateRangeValue">
+                  <el-option label="今天" value="$[today]"></el-option>
+                  <el-option label="今天（含当日）" value="$[todayInclude]"></el-option>
+                </el-select>
+                <i class="date-range__delete el-icon-close" @click="selectField.dateRangeMode=null;selectField.dateRangeValue=null"></i>
+              </div>
+              <div v-else-if="item.type==='num'" class="setting-field__item">
+                <el-input-number :model-value="selectField[item.key] || item.defaultValue" @update:model-value="v => (selectField[item.key] = v)" :readonly="item.readonly"  size="medium" />
+                <span class="setting-field__item--default">{{ selectField[item.key] && selectField[item.key] === item.defaultValue ? '（默认值）' : ''}}</span>
+              </div>
+              <div v-else-if="item.type==='readonly'" class="setting-field__item">
+                {{selectField[item.key] || item.defaultValue}}
+              </div>
+              <div v-else-if="item.type==='textarea'" class="setting-field__item">
+                <epx-visual-config-textarea
+                  :label="item.label"
+                  :value="selectField[item.key]"
+                  :i18nValue="selectField[item.key + '.i18n']"
+                  :defaultValue="item.defaultValue"
+                  @change-configs="v => (selectField[item.key] = v)"
+                  @change-language-config="v=> (selectField[item.key+ '.i18n'] = v)"
+                />
+              </div>
+              <div v-else-if="item.type==='select'" class="setting-field__item">
+                <epx-visual-config-select
+                  :option-list="ruleList"
+                  :label="item.label"
+                  :value="selectField[item.key]"
+                  :i18nValue="selectField[item.key + '.i18n']"
+                  :defaultValue="item.defaultValue"
+                  @change-configs="v => (selectField[item.key] = v)"
+                  @change-language-config="v=> (selectField[item.key+ '.i18n'] = v)"
+                />
+              </div>
+              <div v-else class="setting-field__item">
+                <epx-visual-config-input
+                  :label="item.label"
+                  :value="selectField[item.key]"
+                  :readonly="item.readonly"
+                  :i18nValue="selectField[item.key + '.i18n']"
+                  :defaultValue="item.defaultValue"
+                  @change-configs="v => (selectField[item.key] = v)"
+                  @change-language-config="v=> (selectField[item.key+ '.i18n'] = v)"
+                />
+                <!-- <el-input :model-value="selectField[item.key] || item.defaultValue" @update:model-value="" :readonly="item.readonly" type="text" size="default" /> -->
+                <span class="setting-field__item--default">{{ selectField[item.key] && selectField[item.key] === item.defaultValue ? '（默认值）' : ''}}</span>
+              </div>
+            </el-form-item>
+          </el-row>
+
+          <!-- <el-form-item :style="{ marginLeft: '140px' }">
+            <el-button type="primary" @click="saveFieldConfig">保存</el-button>
+          </el-form-item> -->
+        </el-form>
+        <div class="no-select-field" v-else>请选择字段进行配置</div>
+      </div>
+     </div>
+   </div>
+   <div class="field-setting__button">
+     <el-button size="default" @click="showFieldDialog=false">取消</el-button>
+     <el-button size="default" type="primary" @click="saveFieldList">保存</el-button>
+   </div>
+    <epx-visual-config-lazy-dialog
+      title="添加参数"
+      :model-value="!!fieldParamDialog"
+      width="400px"
+      :append-to-body="true"
+      @close="fieldParamDialog = false"
+    >
+      <div>
+        <div class="add-params-input">
+          <span>参数名：</span>
+          <el-input :model-value="fieldParams.customKey" @update:model-value="v => (fieldParams['customKey'] = v)"> </el-input>
+        </div>
+        <div class="add-params-input">
+          <span>参数类型：</span>
+          <el-radio-group v-model="paramType">
+            <el-radio label="str" value="str">固定值</el-radio>
+            <el-radio label="field" value="field">字段值  </el-radio>
+            <el-radio label="page" value="page">页面参数</el-radio>
+          </el-radio-group>
+        </div>
+        <div class="add-params-input" >
+          <span>参数值：</span>
+          <el-input v-if="paramType==='str'" :model-value="fieldParams.value" @update:model-value="v => (fieldParams['value'] = v)"></el-input>
+          <el-popover
+            v-else-if="paramType==='field'"
+            width="200"
+            trigger="click"
+          >
+            <template v-slot:reference><el-input :model-value="fieldParams.value"></el-input></template>
+            <el-tree
+              :style="{maxHeight: '300px', overflow: 'auto'}"
+              :data="treeFieldStore"
+              node-key="code"
+              :props="{
+                children: 'children',
+                label: 'text'
+              }"
+              @node-click="(data, node)=>(fieldParams['value'] = `#[${data.code.replace(/\./g, '|')}]`)"
+             >
+              <template v-slot="{node}"><span v-html="node.label"></span></template>
+            </el-tree>
+          </el-popover>
+          <el-select v-else-if="paramType==='page'" v-model="fieldParams.value">
+            <el-option
+              v-for="item in pageParams"
+              :key="item.CODE"
+              :label="item.NAME"
+              :value="`$[${item.CODE}]`">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="add-params__footer">
+          <el-button type="primary" @click="addFieldParams">确定</el-button>
+          <el-button @click="fieldParamDialog = false">取消</el-button>
+        </div>
+      </div>
+    </epx-visual-config-lazy-dialog>
+  </epx-visual-config-lazy-dialog>
+  <epx-visual-config-lazy-dialog
+    title="添加事件"
+    v-model="eventDialog"
+    width="50%"
+  >
+    <div class="event-form__item">
+      <span>请选择事件：</span>
+      <el-select v-model="event.function">
+        <el-option value="new" label="添加新事件"></el-option>
+        <el-option v-for="item in functionList" :key="item" :value="item" :label="item"></el-option>
+      </el-select>
+    </div>
+    <div class="event-form__item" v-if="event.function==='new'">
+      <span>请输入事件名称：</span>
+      <el-input size="default" v-model="event.functionName" ></el-input>
+    </div>
+    <template v-slot:footer><span class="dialog-footer">
+      <el-button @click="eventDialog = false">取 消</el-button>
+      <el-button type="primary" @click="createFunction">确 定</el-button>
+    </span></template>
+  </epx-visual-config-lazy-dialog>
+  <el-drawer
+    size="50%"
+    v-model="showJsDrawer"
+    direction="rtl"
+    :withHeader="false"
+  >
+    <epx-js-panel :value="pageGlobalConfigs.JS" @change="v=>changeItemConfigs('page', { JS: v })"></epx-js-panel>
+  </el-drawer>
+</div>
+</template>
+
+<script>
+import draggable from '@epxing/core/src/components/draggable'
+import { mapGetters } from 'vuex'
+import { evalWith } from '@epxing/utils/src/eval-with'
+export default {
+  name: 'epx-visual-config-list-field',
+  components: {
+    draggable
+  },
+  props: {
+    showFieldWay: {
+      type: Boolean,
+      default: true
+    },
+    showSubFlag: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: Array
+    },
+    defaultValue: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    ruleList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    treeFieldStore: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    functionOption: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    fieldOptions: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    pageParams: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    pageGlobalConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    changeItemConfigs: {
+      type: Function,
+      default () {
+        return () => null
+      }
+    },
+    componentMetaId: String,
+    scopeConfigs: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      loadFieldFinish: true,
+      fieldList: [],
+      checkedFieldList: [],
+      settingFieldList: [],
+      selectFieldList: [],
+      selectFieldMulti: false,
+      checkedSelectFieldList: [],
+      selectFieldIndex: -1,
+      settingFieldWay: 'default',
+      showFieldDialog: false,
+      selectField: null,
+      showEditFieldDialog: false,
+      fieldInfo: {},
+      valueType: 'string',
+      scopeEntityType: 'string',
+      optionScopeType: 'all',
+      functionList: [],
+      eventDialog: false,
+      filterText: '',
+      event: {
+        function: 'new',
+        functionName: ''
+      },
+      showJsDrawer: false,
+      eventList: {
+        onChange: '值发生变化',
+        onFocus: '获取焦点',
+        onBlur: '失去焦点'
+      },
+      treeProps: {
+        children: 'children',
+        label: 'text'
+      },
+      fieldParamDialog: false,
+      fieldParams: {},
+      paramType: 'str',
+      showLogField: false,
+      showSubField: true
+    }
+  },
+  watch: {
+    defaultValue (v) {
+      if (!this.value) {
+        this.fieldList = [...this.defaultValue]
+      }
+    },
+    // Vue3 起浅层 watcher 不响应 push/splice，而删字段、保存字段详细配置走的正是 splice。
+    // 坏掉时用户感受最差：saveFieldConfig 第一行就弹「保存成功」，紧接着的 splice 却不回写配置。
+    fieldList: {
+      deep: 1,
+      handler (v) {
+        if (v === this.value) return
+        // 无自定义值且处于默认配置方式时，fieldList 只是默认值回显，不能写回配置
+        // （默认值是异步加载的，此时写回会把中间状态的默认字段快照固化进配置）
+        if (this.value == null && this.settingFieldWay !== 'custom') return
+        if (this.$_.isEqual(v, this.value)) return
+        this.$emit('change-configs', this.$_.cloneDeep(v))
+        this.$emit('input', this.$_.cloneDeep(v))
+      }
+    },
+    value (v) {
+      if (!this.$_.isEqual(v, this.fieldList)) {
+        // 拷贝而不是直接赋 prop 引用：同引用会让上面那句 `if (v === this.value) return` 永久短路
+        // ——就地 splice 会同时改到 value，两边永远相等 ⇒ **即使加了 deep 也一次都不 emit**。
+        // created 里本来就是 [...this.value]，这里漏了，导致「有时能修好、有时修不好」的不确定态。
+        this.fieldList = [...v]
+      }
+    },
+    settingFieldWay (v) {
+      if (this._skipFieldWayChange) {
+        this._skipFieldWayChange = false
+        return
+      }
+      if (v === 'custom') {
+        if (!this.fieldList) {
+          this.fieldList = this.$_.cloneDeep(this.defaultValue)
+        } else {
+          if (this.fieldList !== this.value && !this.$_.isEqual(this.fieldList, this.value)) {
+            const fieldList = this.$_.cloneDeep(this.fieldList || this.defaultValue)
+            this.$emit('change-configs', fieldList)
+            this.$emit('input', fieldList)
+          }
+        }
+      } else if (this.value && this.value.length) {
+        // 已有自定义字段时切回默认需确认，防止误触清空配置
+        this.$confirm('切换为默认配置后，已配置的自定义字段将被清除，是否继续？', '提示', { type: 'warning' })
+          .then(() => {
+            this.$emit('change-configs', null)
+            this.$emit('input', null)
+          })
+          .catch(() => {
+            this._skipFieldWayChange = true
+            this.settingFieldWay = 'custom'
+          })
+      } else {
+        this.$emit('change-configs', null)
+        this.$emit('input', null)
+      }
+    },
+    selectField (v) {
+      // this.loadFieldFinish = false
+      // const fieldIndex = this.settingFieldList.findIndex(item => (item.attriName || item) === v.attriName)
+      this.settingFieldList.splice(this.selectFieldIndex, 1, v)
+      // this.$nextTick(() => {
+      //   this.$refs.tree.setCurrentKey(v.attriName)
+      // })
+    },
+    // ⚠️ handler 于 2022-07-01 由 e685a40e42「列表字段配置-去除selectField监听」**刻意**整段
+    // 注释掉，不是漏删：本组件的 UI 已从扁平 el-checkbox-group 换成 el-tree，父子级联勾选由
+    // el-tree 原生处理，不再需要手工同步分组全选态（配套的 $refs.tree.setCheckedKeys 也一并
+    // 被注释）。同源的活实现仍在 MField.vue，那边 UI 是 checkbox-group，确实需要。
+    // ⇒ 既**别补 deep**（唤醒空 handler 纯成本），也**别恢复注释里的逻辑**（会与 el-tree 的
+    // 级联勾选打架，还会把分组 code 污染进 selectFieldList，让 unSelectFieldStore 跟着错）。
+    selectFieldList (fieldList) {
+      // this.fieldStore.forEach(item => {
+      //   const isAllChecked = item.children.every(field => {
+      //     return fieldList.find(fieldItem => fieldItem && (fieldItem.attriName || fieldItem) === field.code)
+      //   })
+      //   const isCheckIndex = fieldList.findIndex(field => item.code === field)
+      //   if (isAllChecked) {
+      //     if (isCheckIndex === -1) this.selectFieldList = [...fieldList, item.code]
+      //   } else {
+      //     if (isCheckIndex !== -1) this.selectFieldList.splice(isCheckIndex, 1)
+      //   }
+      // })
+    },
+    pageGlobalConfigs: {
+      handler (v) {
+        this.getFunctionList()
+      },
+      immediate: true
+    },
+    filterText (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getMetaViewFields'
+    ]),
+    fieldStore () {
+      if (this.treeFieldStore && this.treeFieldStore.length > 0) {
+        return this.treeFieldStore
+      } else {
+        return this.getMetaViewFields(this.componentMetaId) || []
+      }
+    },
+    unSelectFieldStore () {
+      const selectFields = this.selectFieldList.map(item => item.attriName || item)
+      const formatField = (arr) => {
+        return arr.filter(item => {
+          if (!this.showLogField && ['ID', 'LOG_C_TIME', 'LOG_C_USER', 'LOG_U_TIME', 'LOG_U_USER'].includes(item.code)) {
+            return false
+          }
+          if (!this.showSubField && (item.relationType === '1' || item.isSub)) {
+            return false
+          }
+          if (item.relationType !== '1') {
+            const index = selectFields.findIndex(key => item.field === key)
+            if (index !== -1) {
+              item.disabled = true
+              selectFields.splice(index, 1)
+            }
+          }
+          if (item.children) {
+            item.children = formatField(item.children)
+          }
+          return true
+        })
+      }
+      const copyFieldStore = this.$_.cloneDeep(this.fieldStore)
+
+      return formatField(copyFieldStore)
+    },
+    fieldLabel () {
+      return field => {
+        if (!field) return null
+        let attriName = null
+        let attriLabel = null
+        if (typeof field === 'string') {
+          attriName = field
+        } else {
+          attriName = field.attriName
+          if (field.attriLabel) attriLabel = field.attriLabel
+        }
+        if (attriLabel) return attriLabel
+        const getLabel = (arr) => {
+          for (const item of arr) {
+            if (item.field === attriName) return item.text
+            if (item.children) {
+              const label = getLabel(item.children)
+              if (label) return label
+            }
+          }
+        }
+        return getLabel(this.fieldStore) || attriName
+      }
+    },
+    getFunctionOption () {
+      return (type) => {
+        let option = []
+        if (type === 'num') {
+          option = this.functionOption.filter(item => {
+            return item.value !== 'GROUP_CONCAT'
+          })
+        } else if (type === 'date' || type === 'time') {
+          option = this.functionOption.filter(item => {
+            return item.value === 'MIN' || item.value === 'MAX'
+          })
+        } else {
+          option = this.functionOption.filter(item => {
+            return item.value === 'GROUP_CONCAT' || item.value === 'COUNT'
+          })
+        }
+        return option
+      }
+    },
+    defaultExpandKeys () {
+      return this.fieldStore[0] ? [this.fieldStore[0].field] : []
+    },
+    showTreeFieldStore () {
+      const fieldStore = []
+      this.fieldStore.forEach((item, index) => {
+        const children = item.children.filter(fieldItem => !this.fieldList.find(field => (field.attriName || field) === fieldItem.code))
+        fieldStore.push({
+          ...item, children
+        })
+      })
+      return fieldStore
+    },
+    parentField () {
+      return field => {
+        const parent = this.getChildParent(this.fieldStore, field) || {}
+        return parent
+      }
+    },
+    getFieldPath () {
+      const { attriName } = this.selectField
+      const getPath = (arr, path) => {
+        for (const item of arr) {
+          if (item.field === attriName) {
+            return path ? path + '/' + item.text : item.text
+          } else if (item.children) {
+            const childPath = getPath(item.children, path ? path + '/' + item.text : item.text)
+            if (childPath) return childPath
+          }
+        }
+      }
+      return getPath(this.fieldStore)
+    },
+    showFieldOptions () {
+      const fieldOptions = []
+      const { attriName, link, linkType } = this.selectField
+      const field = this.getField(this.fieldStore, attriName) || {}
+      const { dataType, optionType, type, isSub, relationSort } = field
+      field.isMeta = field.type === 'meta'
+      const selectField = { ...this.selectField }
+      // showFlag 的 key 是这些名字之一（找不到就退回 selectField.key）：显式传作用域，不能靠直接 eval 捕获（见 eval-with.js）
+      const scope = { attriName, link, linkType, dataType, optionType, type, isSub, relationSort, selectField, field }
+      this.fieldOptions.forEach(item => {
+        if (item.showFlag) {
+          for (const key in item.showFlag) {
+            try {
+              if (!evalWith(key, scope, this) || !item.showFlag[key].includes(evalWith(key, scope, this))) {
+                return
+              }
+            } catch (error) {
+              if (Array.isArray(item.showFlag[key])) {
+                if (!item.showFlag[key].includes(evalWith(`selectField.${key}`, scope, this))) {
+                  return
+                }
+              } else {
+                if (item.showFlag[key] !== evalWith(`selectField.${key}`, scope, this)) {
+                  return
+                }
+              }
+            }
+          }
+        }
+        if (item.showCondition) {
+          let flag = true
+          try {
+            const showCondition = typeof item.showCondition === 'string' ? JSON.parse(item.showCondition) : item.showCondition
+            const condition = showCondition.el
+            const el = condition.replace(/^#{(.*)}$/, '$1')
+            if (el) {
+              flag = evalWith(el, { config: this.allConfigs, selectField: this.selectField }, this)
+            }
+          } catch (error) {
+            flag = false
+          }
+          if (!flag) return
+        }
+        fieldOptions.push(item)
+      })
+      return fieldOptions
+    },
+    isSelectAllField: {
+      get () {
+        return this.checkedSelectFieldList.length === this.settingFieldList.length
+      },
+      set (v) {
+        if (v) {
+          this.checkedSelectFieldList = this.settingFieldList.map((item, index) => index)
+        } else {
+          this.checkedSelectFieldList = []
+        }
+      }
+    }
+  },
+  methods: {
+    getFieldStore () {
+      if (!this.componentMetaId) return
+      if (!(this.fieldStore && this.fieldStore.length > 0)) {
+        this.$store.dispatch({
+          type: 'ADD_META_VIEW_FIELDS',
+          metaId: this.componentMetaId
+        })
+      }
+    },
+    getField (arr, code) {
+      for (let i = 0; i < arr.length; i++) {
+        const field = arr[i]
+        if (field.field === code) {
+          return field
+        }
+        if (field.children) {
+          const findField = this.getField(field.children, code)
+          if (findField) return findField
+        }
+      }
+    },
+    formatScopeParams (scopeParams) {
+      if (!scopeParams) return []
+      const attribute = this.getField(this.fieldStore, this.selectField.attriName) || {}
+      const _scopeParams = this.$_.cloneDeep(scopeParams)
+      for (const scopeKey in _scopeParams) {
+        const scope = _scopeParams[scopeKey]
+        if (!scope) continue
+        let values = scope.values
+        if (/\$\[(.+)\]/.test(values)) {
+          values = values.replace(/\$\[(.+)\]/, (match, key) => {
+            try {
+              return evalWith(key, { attribute }, this) || evalWith(`this.${key}`, {}, this) || ''
+            } catch (error) {
+              return values
+            }
+          })
+        }
+        scope.values = values
+      }
+      return _scopeParams
+    },
+    getScopeMetaId (item) {
+      if (item.metaId) return item.metaId
+      const { attriName } = this.selectField
+      const field = this.getFieldByCode(attriName)
+      if (field.isMeta) {
+        return field.id
+      } else if (field.relationSort === '1') {
+        const parent = this.parentField(attriName)
+        return parent.id
+      } else if (field.dataType === 'object' || field.dataType === 'user' || field.dataType === 'dept') {
+        return field.relatedEntity
+      }
+      return this.componentMetaId
+    },
+    getFieldByCode (code) {
+      return this.getField(this.fieldStore, code)
+    },
+    deleteField (index) {
+      this.fieldList.splice(index, 1)
+    },
+    deleteSettingField (index) {
+      // const field = this.settingFieldList[index]
+      this.settingFieldList.splice(index, 1)
+      this.selectFieldList.splice(index, 1)
+      // this.$refs.tree.setChecked(field.attriName || field, false)
+    },
+    deleteSelectField () {
+      this.settingFieldList = this.settingFieldList.filter((item, index) => !this.checkedSelectFieldList.includes(index))
+      this.selectFieldList = [...this.settingFieldList]
+      this.selectFieldMulti = false
+    },
+    editField (field, index) {
+      this.selectFieldList = this.fieldList.map(item => (item.attriName || item).replace(/\./g, '|'))
+      this.settingFieldList = this.$_.cloneDeep(this.fieldList)
+      this.showFieldDialog = true
+      // this.$nextTick(() => {
+      //   this.$refs.tree.setCheckedKeys(this.selectFieldList)
+      // })
+      this.selectSettingField(field, index)
+    },
+    getFunctionList () {
+      const { JS = '' } = this.pageGlobalConfigs
+      const result = JS.match(/export\sfunction\s(\w+)/g)
+      const functionList = []
+      if (!result) return
+      result.forEach(item => {
+        functionList.push(item.replace(/export\sfunction\s/, ''))
+      })
+      this.functionList = functionList
+    },
+    selectSettingField (field, index) {
+      this.selectFieldIndex = index
+      let fieldConfig = field
+      if (typeof field === 'string') {
+        fieldConfig = { attriName: field }
+      }
+      const { attriName, ...other } = fieldConfig
+      if (!this.$_.isEmpty(other)) {
+        fieldConfig.configWay = 'custom'
+      } else {
+        fieldConfig.configWay = 'default'
+      }
+      this.selectField = { ...fieldConfig }
+      this.loadFieldFinish = false
+      this.$nextTick(() => {
+        this.loadFieldFinish = true
+      })
+      if (this.selectField.value) {
+        if (this.selectField.value.match(/\$\[(.+)\]/)) {
+          this.valueType = 'page'
+        } else if (this.selectField.value.match(/#\{user(.+)\}/)) {
+          this.valueType = 'user'
+        } else if (this.selectField.value.match(/#\[(.+)\]/)) {
+          this.valueType = 'field'
+        }
+      }
+      if (this.selectField.scopeEntity) {
+        if (this.selectField.scopeEntity.match(/#\[(.+)\]/)) {
+          this.scopeEntityType = 'field'
+        }
+      }
+      if (this.selectField.showOptionCodes) {
+        this.optionScopeType = 'custom'
+      }
+      this.fieldInfo = this.getField(this.fieldStore, fieldConfig.attriName) || {}
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return data.text && data.text.indexOf(value) !== -1
+    },
+    changeParams (key, v) {
+      const selectField = { ...this.selectField }
+      selectField[key] = v
+      this.selectField = selectField
+    },
+    saveFieldConfig () {
+      this.$message.success('保存成功')
+      const { configWay, attriName, ...otherConfigs } = this.selectField
+      const index = this.fieldList.findIndex(item => (item.attriName || item) === this.selectField.attriName)
+      if (configWay === 'custom') {
+        if (index !== -1) {
+          this.fieldList.splice(index, 1, { attriName, ...otherConfigs })
+        }
+      } else {
+        this.fieldList.splice(index, 1, { attriName })
+      }
+      this.showEditFieldDialog = false
+    },
+    setDefaultValue (key, v) {
+      let value = null
+      if (Array.isArray(v)) {
+        value = v.map(item => item.id || item).join(',')
+      } else {
+        value = v ? v.id || v : null
+      }
+      this.changeParams(key, value)
+    },
+    nodeClick (data, node) {
+      const field = this.settingFieldList.find(item => data.field === (item.attriName || item))
+      if (!field) return
+      this.selectSettingField(field)
+      // 滚动到对应位置
+      const fieldElem = this.$refs['select_field_' + (field.attriName || field)]
+      if (fieldElem && fieldElem[0]) {
+        const scrollEl = this.$refs.selectFieldContainer
+        if (fieldElem[0].offsetTop < scrollEl.scrollTop || fieldElem[0].offsetTop > (scrollEl.offsetHeight + scrollEl.scrollTop - 40)) {
+          scrollEl.scrollTop = fieldElem[0].offsetTop - scrollEl.offsetHeight / 2
+        }
+      }
+    },
+    openAddFieldDialog (key) {
+      this.selectFieldList = this.fieldList.map(item => (item.attriName || item).replace(/\./g, '|'))
+      this.settingFieldList = this.$_.cloneDeep(this.fieldList)
+      this.showFieldDialog = true
+      this.$nextTick(() => {
+        // this.$refs.tree.setCheckedKeys(this.selectFieldList)
+      })
+    },
+    getChildParent (arr, field, parent) {
+      for (const item of arr) {
+        if (item.field === field) {
+          return parent
+        } else if (item.children) {
+          const child = this.getChildParent(item.children, field, item)
+          if (child) return child
+        }
+      }
+    },
+    checkChange (data, isCheck) {
+      if (data.isMain || data.type === 'folder') {
+        if (isCheck) {
+          // 获取筛选后的
+          const children = data.children.filter(item => !item.isSub)
+          for (const child of children) {
+            if ((!this.filterText || child.text.indexOf(this.filterText) !== -1) && !this.selectFieldList.includes(child.field)) {
+              this.$nextTick(() => {
+                this.$refs.tree.setChecked(child.field, true)
+              })
+            }
+          }
+        } else {
+          const children = data.children.filter(item => !item.isSub && !item.disabled)
+          const flag = children.every(child => this.checkedFieldList.find(checked => checked.field === child.field))
+          if (flag) {
+            children.forEach(item => {
+              this.$refs.tree.setChecked(item.field, false)
+            })
+          }
+        }
+      } else {
+        const parent = this.getChildParent(this.unSelectFieldStore, data.field)
+        if (isCheck) {
+          if (parent && (parent.isMain)) {
+            const children = parent.children.filter(item => !item.isSub && !item.disabled)
+            const checkedFieldList = this.$refs.tree.getCheckedNodes()
+            const flag = children.every(child => checkedFieldList.find(checked => checked.field === child.field))
+            if (flag) this.$refs.tree.setChecked(parent.field, true)
+          }
+        } else {
+          if (parent && data.type !== 'meta' && (parent.isMain)) this.$refs.tree.setChecked(parent.field, false)
+        }
+      }
+      this.checkedFieldList = this.$refs.tree.getCheckedNodes()
+    },
+    cancelChecked () {
+      this.$refs.tree.setCheckedKeys([])
+    },
+    addCheckedField () {
+      this.checkedFieldList.forEach(data => {
+        if (data.type !== 'folder' && !data.isMain) {
+          const parent = this.getChildParent(this.fieldStore, data.field)
+          this.selectFieldList.push(data.field)
+          if (data.type === 'meta') {
+            this.settingFieldList.push({ attriName: data.field, type: 'meta' })
+          } else {
+            this.settingFieldList.push(data.field)
+          }
+          if (data.field.includes('|')) {
+            const nodesMap = this.$refs.tree.store.nodesMap
+            nodesMap[parent.field].expanded = true
+          }
+        }
+      })
+      this.$refs.tree.setCheckedKeys([])
+    },
+    checkFieldChange (data, isCheck) {
+      if (data.isMain || data.type === 'folder') {
+        if (isCheck) {
+          const children = data.children.filter(item => !item.isSub)
+          for (const child of children) {
+            this.$nextTick(() => {
+              this.$refs.tree.setChecked(child.field, true)
+            })
+          }
+        } else {
+          const children = data.children.filter(item => !item.isSub)
+          const flag = children.every(child => this.selectFieldList.includes(child.field))
+          if (flag) {
+            children.forEach(item => {
+              this.$refs.tree.setChecked(item.field, false)
+            })
+          }
+        }
+      } else {
+        const parent = this.getChildParent(this.fieldStore, data.field)
+        if (isCheck) {
+          const field = this.settingFieldList.find(item => (item.attriName || item) === data.field)
+          if (!field) {
+            this.selectFieldList.push(data.field)
+            if (data.type === 'meta') {
+              this.settingFieldList.push({ attriName: data.field, type: 'meta' })
+            } else {
+              this.settingFieldList.push(data.field)
+            }
+          }
+          if (data.field.includes('|')) {
+            const nodesMap = this.$refs.tree.store.nodesMap
+            nodesMap[parent.field].expanded = true
+          }
+          if (parent && (parent.isMain)) {
+            const children = parent.children.filter(item => !item.isSub)
+            const flag = children.every(child => this.selectFieldList.includes(child.field))
+            if (flag) this.$refs.tree.setChecked(parent.field, true)
+          }
+        } else {
+          const index = this.selectFieldList.findIndex(item => item === data.field)
+          const fieldIndex = this.settingFieldList.findIndex(item => (item.attriName || item) === data.field)
+          if (index !== -1) {
+            this.selectFieldList.splice(index, 1)
+          }
+          if (fieldIndex !== -1) {
+            this.settingFieldList.splice(fieldIndex, 1)
+          }
+          if (parent && data.type !== 'meta' && (parent.isMain)) this.$refs.tree.setChecked(parent.field, false)
+        }
+      }
+    },
+    selectAllField (value, index) {
+      const fieldList = this.fieldStore[index].children || []
+      if (value) {
+        // 添加字段
+        const fieldCodeList = fieldList.map(item => item.code)
+        this.selectFieldList = [...new Set([...this.selectFieldList, ...fieldCodeList])]
+      } else {
+        // 删除当前列所有字段
+        fieldList.forEach(item => {
+          const selectIndex = this.selectFieldList.findIndex(selectItem => selectItem === item.code)
+          if (selectIndex !== -1) {
+            delete this.selectFieldList[selectIndex]
+          }
+        })
+      }
+    },
+    saveSelectField () {
+      // 将已选择的字段修改到configs
+      // 对比fieldList
+      const fieldList = []
+      const allCheckCodes = this.fieldStore.map(item => item.code)
+      this.selectFieldList.forEach(item => {
+        if (allCheckCodes.includes(item)) return
+        const field = item.replace('.', '|')
+        const existField = this.fieldList.find(fieldItem => field === (fieldItem.attriName || fieldItem))
+        if (existField) {
+          fieldList.push(existField)
+        } else {
+          fieldList.push(field)
+        }
+      })
+      this.fieldList = fieldList
+      // ⚠️ 原文是 `this.$refs.tree` 换行接 `.this.showFieldDialog = false`——`this.$refs.tree.this`
+      // 是 undefined，给它赋值直接抛 TypeError，方法中途炸掉、「选择字段」弹窗点确定后关不掉。
+      // 看形态像是格式化/合并把中间半句吃了（同文件里 $refs.tree 的收尾惯用法是 setCheckedKeys([])），
+      // 但 git 里查不到引入点、原意不可考，所以只恢复能确定的「关闭弹窗」，不臆测被吃掉的那半句。
+      this.showFieldDialog = false
+    },
+    addFieldParams () {
+      const field = this.selectField
+      const { [this.fieldParamDialog]: params = {} } = field
+      let key = this.fieldParams.key
+      if (!key || key === 'custom') {
+        key = this.fieldParams.customKey
+      }
+      if (!key) {
+        this.$message.error('请输入参数名')
+        return
+      }
+      if (!this.fieldParams.value) {
+        this.$message.error('请输入参数值')
+        return
+      }
+      params[key] = this.fieldParams.value
+      this.selectField[this.fieldParamDialog] = params
+      this.fieldParams = {
+        key: '',
+        customKey: '',
+        value: ''
+      }
+      this.fieldParamDialog = false
+    },
+    deleteParams (itemKey, key) {
+      const selectField = { ...this.selectField }
+      const { [itemKey]: params = {} } = selectField
+      delete params[key]
+      this.selectField = selectField
+    },
+    swicthFieldStoreFold (index) {
+      const item = this.fieldStore[index]
+      this.fieldStore[index] = { ...item, isUnFold: !item.isUnFold }
+    },
+    saveFieldList () {
+      this.fieldList = this.settingFieldList.map(item => {
+        if (typeof item === 'string') return item
+        const { configWay, attriName, ...otherConfigs } = item
+        if (configWay !== 'default' && configWay !== null) {
+          return { attriName, ...otherConfigs }
+        } else {
+          return attriName
+        }
+      })
+      this.showFieldDialog = false
+    },
+    createEvent (command) {
+      this.eventDialog = command
+      let name = command
+      let index = 1
+      while (this.functionList.includes(name)) {
+        name = command + index++
+      }
+      this.event = {
+        function: 'new',
+        functionName: name
+      }
+    },
+    settingEvent (key, index) {
+      this.eventDialog = key
+      const { events = {} } = this.selectField
+      const eventName = events[key][index]
+      this.event = {
+        function: eventName,
+        index: index
+      }
+    },
+    deleteEvent (key, index) {
+      const { events = {} } = this.selectField
+      events[key].splice(index, 1)
+      this.selectField.events = events
+    },
+    createFunction () {
+      const event = { ...this.event }
+      const { JS = '' } = this.pageGlobalConfigs
+      const { events = {} } = this.selectField
+      const typeEvents = events[this.eventDialog] || []
+
+      if (!event.function || event.function === 'new') {
+        if (!event.functionName) {
+          this.$message.error('请输入事件名')
+          return
+        }
+        if (this.functionList.includes(event.functionName)) {
+          this.$message.error('该事件名称已存在')
+          return
+        }
+        const js = JS + `
+  /**
+   * Field ${event.functionName}
+   */
+  export function ${event.functionName} () {
+
+  }
+      `
+        this.changeItemConfigs('page', { JS: js })
+      }
+      const eventName = (!event.function || event.function === 'new') ? event.functionName : event.function
+      if (event.index !== undefined) {
+        typeEvents[event.index] = eventName
+      } else {
+        typeEvents.push(eventName)
+      }
+      events[this.eventDialog] = typeEvents
+      this.selectField.events = events
+      this.eventDialog = false
+      this.showJsDrawer = true
+    }
+  },
+  created () {
+    this.getFieldStore()
+    if (this.value) {
+      this.fieldList = [...this.value]
+      this.settingFieldWay = 'custom'
+    } else {
+      if (this.defaultValue) this.fieldList = [...this.defaultValue]
+    }
+    if (!this.showSubFlag) {
+      this.showSubField = false
+    }
+    //  this.fieldList.forEach(item=> {})
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.field {
+
+    :deep(.el-dialog__body) {
+      padding: 0;
+    }
+
+}
+.list-group {
+  display: inline-block;
+}
+.select-field-list {
+  display: flex;
+  flex-wrap: wrap;
+  flex-shrink: 1;
+}
+.select-field-item {
+  margin: 4px;
+  padding: 8px 12px;
+  line-height: 1.1;
+  @include bg_color_primary(.1);
+  @include border_primary(1px,null,dashed);
+  color: #333;
+  cursor: move;
+  user-select: none;
+  position: relative;
+  &:hover {
+    .select-field-item__mask {
+      display: flex;
+    }
+  }
+}
+.select-field-item__mask{
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: all .5s;
+  background: rgba(0,0,0, .6);
+  justify-content: center;
+  align-items: center;
+    color: #fff;
+  i {
+    font-size: var(--epx-font-size-l);
+    margin: 0 8px;
+    cursor: pointer;
+  }
+}
+.setting-fields-container {
+  display: flex;
+  height: 400px;
+}
+.setting-fields__select {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+  position: relative;
+  font-size: var(--epx-font-size-base);
+  .list-group {
+    width: 100%;
+  }
+}
+.setting-field__row {
+  margin-bottom: 10px;
+
+    :deep(>.el-form-item) {
+      vertical-align: auto;
+      width: 100%;
+      display: flex;
+      .el-form-item__content {
+        flex: 1;
+      }
+      .el-form-item__label {
+        line-height: 40px;
+      }
+    }
+
+}
+.setting-field__form-label {
+  position: relative;
+  >i {
+    cursor: pointer;
+    position: absolute;
+    top: 3px;
+    right: -18px;
+  }
+}
+.setting-fields__select--item {
+  line-height: 18px;
+  width: 100%;
+  padding: 8px 24px;
+  box-sizing: border-box;
+  cursor: pointer;
+  i {
+    line-height: 1;
+    font-size: 18px;
+  }
+  .el-icon-document {
+    @include font-color-primary();
+    margin-right: 8px;
+  }
+  .el-icon-delete {
+    display: none;
+    color: red;
+  }
+  &:hover, &.active {
+    .el-icon-delete {
+      display: inline;
+    }
+    @include font-color-primary();
+    @include bg-color-primary(.2)
+  }
+}
+.setting-fields__select--add {
+  margin-left: 24px;
+}
+.setting-field__config {
+  flex: 1;
+  padding: 16px;
+  overflow: auto;
+}
+.setting-field__item {
+  display: flex;
+
+    :deep(.el-color-picker__trigger) {
+      width: 120px;
+    }
+    :deep(.el-input) {
+      width: 200px;
+    }
+    :deep(.el-input-number .el-input) {
+      width: auto
+    }
+
+}
+.setting-field__item--default {
+  white-space: nowrap;
+}
+.tree-field-checkbox-group {
+  font-size: var(--epx-font-size-base);
+  padding: 20px;
+}
+.tree-field-header{
+  @inlcude font_color_primary;
+  // margin-bottom:25px;
+}
+.tree-field-title{
+  font-size:14px;
+  i {
+    margin-right: 4px;
+  }
+}
+.tree-field-checkbox{
+  display:flex;
+  flex-wrap:wrap;
+  margin:12px 0;
+  margin-left:40px;
+  color:#666;
+  cursor: pointer;
+  line-height: 24px;
+}
+.tree-field-checkbox .active {
+  @include font_color_primary;
+}
+.event-form__item {
+  width: 220px;
+  margin: 10px 30px;
+}
+.event-title {
+  width: 100%;
+  background: rgb(248, 248, 248);
+  padding: 6px 10px;
+  margin: 6px 0;
+  line-height: 1;
+  color: #666
+}
+.event {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #666;
+  margin: 0 12px;
+  padding: 6px 12px;
+  line-height: 1;
+  cursor: pointer;
+  &:hover {
+    background: rgb(248, 248, 248);
+  }
+  i {
+    margin: 0 3px;
+    font-size: var(--epx-font-size-l);
+    &:hover {
+      color: #333
+    }
+  }
+}
+
+// 字段设置
+.field-setting {
+  display: flex;
+  width: 100%;
+  // 原来靠 .show-field-dialog :deep(.el-dialog){height:80%} 逐层撑下来；Element Plus 里 class 直接落在
+  // .el-dialog 自身、后代选择器匹配不到，整条链塌成 auto、弹窗随内容长到几千像素。改为按视口直接定高：
+  // 80vh 减去 el-dialog 内边距 / 标题 / body 内边距 / 底部按钮共 145px
+  height: calc(80vh - 145px);
+  box-sizing: border-box;
+  padding: 20px 10px 0;
+}
+.field-setting-item {
+  width: 360px;
+  display: flex;
+  flex-direction: column;
+  margin: 0 10px;
+  border: 1px solid #e3e3e3;
+  position: relative;
+  &:last-child {
+    width: 400px
+  }
+}
+
+.field-setting__header {
+  padding: 12px 20px;
+  line-height: 1;
+  border-bottom: 1px solid #e3e3e3;
+  span {
+    position: relative;
+    font-size: var(--epx-font-size-l);
+    padding-left: 8px;
+    font-weight: 600;
+    color: #333;
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 3px;
+      width: 4px;
+      height: 16px;
+      @include bg_color_primary;
+      border-radius: var(--epx-radius-s);
+    }
+  }
+}
+.field-setting__filter {
+  margin: 10px 20px;
+  width: calc(100% - 40px);
+}
+.field-setting__content {
+  flex:1;
+  width: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.field-tree {
+  flex: 1;
+  overflow: auto;
+
+    :deep(.el-tree-node__content) {
+      height: 48px;
+    }
+
+}
+.set-show-field {
+  padding: 8px 12px;
+  border-top: 1px solid #e3e3e3;
+}
+.field-setting-button__group {
+  // height: 56px;
+}
+.field-setting-button__group_inner {
+  border-top: 1px solid #e3e3e3;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  text-align: center;
+  background:#fff;
+  z-index: 101;
+}
+.field-setting__button {
+  overflow: hidden;
+  padding: 10px 20px;
+  text-align: right;
+}
+.no-select-field {
+  text-align: center;
+  color: #999;
+  margin-top: 50%
+}
+.show-field-dialog {
+
+    :deep(.el-dialog) {
+      height: 80%;
+    }
+    :deep(.el-dialog__body) {
+      height: calc(100% - 70px);
+    }
+
+}
+.operate-params-item {
+  cursor: pointer;
+  i {
+    display: none;
+    margin-left: 8px;
+    color: #F56C6C;
+    font-size: var(--epx-font-size-l);
+  }
+  &:hover {
+    i {
+      display: inline;
+
+    }
+  }
+}
+.add-params-input {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 0 10px;
+  >span {
+    white-space: nowrap;
+  }
+
+    :deep(.el-input) {
+      width: 240px;
+    }
+
+}
+.add-params__footer {
+  text-align: center;
+}
+.date-range__select {
+  width: 100px;
+  margin-right: 8px;
+}
+.date-range__delete {
+  color: #F56C6C;
+  font-size: var(--epx-font-size-l);
+  cursor: pointer;
+}
+</style>
+<style >
+.visual-config-field-popover {
+  max-height: 300px;
+  overflow: auto;
+}
+
+</style>