epx-frame 3.5.0-shpgy.1

package/src/frame/views/visual/config/ListField.vue

@@ -0,0 +1,1229 @@
+<template>
+<div class="field">
+  <el-radio-group v-model="settingFieldWay" v-if="showFieldWay">
+    <el-radio label="default">默认字段</el-radio>
+    <el-radio label="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="field.attriName || field">
+          <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>
+  <el-dialog
+    title="添加字段"
+    :visible.sync="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="medium" v-model="filterText"></el-input>
+        <el-tree
+          ref="tree"
+          class="field-tree"
+          show-checkbox
+          node-key="field"
+          :default-expanded-keys="defaultExpandKeys"
+          :data="fieldStore"
+          :render-after-expand="true"
+          :auto-expand-parent="false"
+          :props="treeProps"
+          :check-strictly="true"
+          :highlight-current="true"
+          @check-change="checkFieldChange"
+          :filter-node-method="filterNode"
+          @node-click="nodeClick"
+
+        >
+          <span slot-scope="{ node, data }"  :style="data.type==='meta' &&  data.relationType==='1'? {color: 'red'}: {}">
+            {{node.label}}
+          </span>
+        </el-tree>
+      </div>
+     </div>
+     <div class="field-setting-item">
+       <p class="field-setting__header">
+        <span>已选字段</span>
+      </p>
+      <div class="field-setting__content">
+        <div ref="selectFieldContainer" class="setting-fields__select">
+          <draggable
+            :list="settingFieldList"
+            class="list-group"
+            ghost-class="ghost"
+          >
+            <transition-group  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: selectField && selectField.attriName===(field.attriName || field)}]" :key="field.attriName || field" @click="selectSettingField(field)">
+                <i class="el-icon-document"></i>
+                <span>{{fieldLabel(field)}}</span>
+                <i class="el-icon-delete fr" @click.stop="deleteSettingField(index)"></i>
+              </li>
+            </transition-group>
+          </draggable>
+        </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" 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'))">
+              <epx-visual-config-radio
+                  v-if="item.type==='radio'"
+                  :code="item.code"
+                  :option-list="item.options"
+                  :value="selectField[item.key]"
+                  :defaultValue="item.defaultValue"
+                  @change-configs="v=>$set(selectField, item.key, v)"
+                />
+                <epx-visual-config-switch
+                  v-else-if="item.type === 'switch'"
+                  :value="selectField[item.key]"
+                  :defaultValue="item.defaultValue"
+                  @change-configs="v=>$set(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 :value="selectField[item.key] || item.defaultValue" @change="v => $set(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"
+                  @change-configs="v => $set(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="$set(selectField, item.key,'')">
+                  <el-radio label="string">固定值</el-radio>
+                  <el-radio label="field">字段值</el-radio>
+                </el-radio-group>
+                <div>
+                  <epx-table-form-item v-if="scopeEntityType==='string'" :key="fieldInfo.field" :value="selectField[item.key] || item.defaultValue" @change="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"
+                    >
+                      <el-input slot="reference" :value="selectField[item.key] || item.defaultValue"></el-input>
+                      <el-tree
+                        :style="{maxHeight: '300px', overflow: 'auto'}"
+                        :data="fieldStore"
+                        :props="{
+                          children: 'children',
+                          label: 'text'
+                        }"
+                      >
+                        <span slot-scope="{node, data}" v-html="node.label" @click="$set(selectField, item.key,`#[${data.field}]`)"></span>
+                      </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=>$set(selectField, item.key, null)">
+                  <el-radio label="all">全部</el-radio>
+                  <el-radio label="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'" :value="selectField[item.key]" :fieldConfigs="{ attriLabel: '', codeKey: getFieldByCode(selectField.attriName).codeKey, state: 'EDIT', dataType: 'treeList',isMultiple: '1'}" @change="v=>$set(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=>$set(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="$set(selectField, item.key,'')">
+                  <el-radio label="string">固定值</el-radio>
+                  <el-radio label="page">页面参数</el-radio>
+                  <el-radio label="user">用户信息</el-radio>
+                </el-radio-group>
+                <div>
+                  <epx-table-form-item v-if="valueType==='string'" :key="fieldInfo.field" :value="selectField[item.key] || item.defaultValue" @change="v=>setDefaultValue(item.key, v)"
+                    :fieldConfigs="{
+                      attriName: fieldInfo.field,
+                      attriLabel: fieldInfo.text,
+                      dataType: fieldInfo.dataType,
+                      codeKey: fieldInfo.codeKey,
+                      relatedEntity: fieldInfo.relatedEntity,
+                      state: 'EDIT',
+                      attribute: {
+                        isTree: fieldInfo.isTree,
+                        isMultiple: fieldInfo.isMultiple,
+                        objectWay: fieldInfo.objectWay
+                      }
+                    }"
+                  ></epx-table-form-item>
+                  <!-- <el-input v-if="valueType==='string'" :value="selectField[item.key] || item.defaultValue" @input="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-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="medium" type="primary">
+                    新建事件<i class="el-icon-arrow-down el-icon--right"></i>
+                  </el-button>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item v-for="(text , key) in eventList" :key="key" :command="key">{{key}} {{text}}</el-dropdown-item>
+                  </el-dropdown-menu>
+                </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)"
+                          >
+                            <i class="el-icon-delete" slot="reference" ></i>
+                          </el-popconfirm>
+                        </p>
+                      </div>
+                    </div>
+                  </li>
+              </ul>
+              </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=> $set(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=> $set(selectField, item.key, v)"></epx-visual-config-scope>
+              </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=> $set(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=> $set(selectField, item.key, v)"></epx-visual-config-order-field>
+              </div>
+              <div v-else-if="item.type==='num'" class="setting-field__item">
+                <el-input-number :value="selectField[item.key] || item.defaultValue" @input="v => $set(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 class="setting-field__item">
+                <epx-visual-config-input
+                  :label="item.label"
+                  :value="selectField[item.key]"
+                  :i18nValue="selectField[item.key + '.i18n']"
+                  :defaultValue="item.defaultValue"
+                  @change-configs="v => $set(selectField, item.key, v)"
+                  @change-language-config="v=> $set(selectField, item.key+ '.i18n', v)"
+                />
+                <!-- <el-input :value="selectField[item.key] || item.defaultValue" @input="" :readonly="item.readonly" type="text" size="medium" /> -->
+                <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="medium" @click="showFieldDialog=false">取消</el-button>
+     <el-button size="medium" type="primary" @click="saveFieldList">保存</el-button>
+   </div>
+  </el-dialog>
+  <el-dialog
+    title="添加事件"
+    :visible.sync="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="medium" v-model="event.functionName" ></el-input>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="eventDialog = false">取 消</el-button>
+      <el-button type="primary" @click="createFunction">确 定</el-button>
+    </span>
+  </el-dialog>
+  <el-drawer
+    size="50%"
+    :visible.sync="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 'vuedraggable'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'epx-visual-config-list-field',
+  components: {
+    draggable
+  },
+  props: {
+    showFieldWay: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: Array
+    },
+    defaultValue: {
+      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: [],
+      settingFieldList: [],
+      selectFieldList: [],
+      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'
+      }
+    }
+  },
+  watch: {
+    defaultValue (v) {
+      if (!this.value) {
+        this.fieldList = [...this.defaultValue]
+      }
+    },
+    fieldList (v) {
+      if (v !== this.value) {
+        this.$emit('change-configs', v)
+      }
+    },
+    settingFieldWay (v) {
+      if (v === 'custom') {
+        if (this.fieldList !== this.value) {
+          this.$emit('change-configs', this.fieldList)
+        }
+      } else {
+        this.$emit('change-configs', null)
+      }
+    },
+    selectField (v) {
+      // this.loadFieldFinish = false
+      const fieldIndex = this.settingFieldList.findIndex(item => (item.attriName || item) === v.attriName)
+      this.settingFieldList.splice(fieldIndex, 1, v)
+      this.$nextTick(() => {
+        this.$refs.tree.setCurrentKey(v.attriName)
+      })
+    },
+    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([
+      'getMetaRelationFields'
+    ]),
+    fieldStore () {
+      if (this.treeFieldStore && this.treeFieldStore.length > 0) {
+        return this.treeFieldStore
+      } else {
+        return this.getMetaRelationFields(this.componentMetaId) || []
+      }
+    },
+    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
+      }
+    },
+    showFieldOptions () {
+      const fieldOptions = []
+      const { attriName } = this.selectField
+      const field = this.getField(this.fieldStore, attriName) || {}
+      // eslint-disable-next-line no-unused-vars
+      const { dataType, type, isSub, meta } = field
+      field.isMeta = field.type === 'meta'
+      // eslint-disable-next-line no-unused-vars
+      const { relationType: relationSort } = meta || {}
+      this.fieldOptions.forEach(item => {
+        if (item.showFlag) {
+          for (const key in item.showFlag) {
+            // eslint-disable-next-line no-eval
+            if (!item.showFlag[key].includes(eval(key))) {
+              return
+            }
+          }
+        }
+        if (item.showCondition) {
+          let flag = true
+          try {
+            const condition = JSON.parse(item.showCondition).el
+            console.log(condition)
+            const el = condition.replace(/^#{(.+)}$/, '$1')
+            // eslint-disable-next-line no-unused-vars
+            const config = this.allConfigs
+            // eslint-disable-next-line no-eval
+            if (el) flag = eval(el)
+          } catch (error) {
+            flag = false
+          }
+          if (!flag) return
+        }
+        fieldOptions.push(item)
+      })
+      return fieldOptions
+    }
+  },
+  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
+        }
+      }
+    },
+    getScopeMetaId (item) {
+      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
+      }
+      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)
+    },
+    editField (field) {
+      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)
+    },
+    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) {
+      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'
+        }
+      }
+      if (this.selectField.scopeEntity) {
+        if (this.selectField.scopeEntity.match(/#\[(.+)\]/)) {
+          this.scopeEntityType = 'field'
+        }
+      }
+      if (this.selectField.showOptionCodes) {
+        this.optionScopeType = 'custom'
+      }
+      let item = this.selectField.attriName
+      if (item.includes('|')) {
+        item = item.replace('|', '.')
+      }
+      this.fieldStore.forEach(fields => {
+        const fieldItem = fields.children.find(fieldItem => (fieldItem.field || fieldItem.code) === item)
+        if (fieldItem) {
+          this.fieldInfo = { ...fieldItem }
+        }
+      })
+    },
+    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
+        }
+      }
+    },
+    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) {
+            this.$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
+    },
+    swicthFieldStoreFold (index) {
+      const item = this.fieldStore[index]
+      this.$set(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.$set(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.$set(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]
+    }
+    //  this.fieldList.forEach(item=> {})
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.field {
+  &::v-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: 16px;
+    margin: 0 8px;
+    cursor: pointer;
+  }
+}
+.setting-fields-container {
+  display: flex;
+  height: 400px;
+}
+.setting-fields__select {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+  position: relative;
+  .list-group {
+    width: 100%;
+  }
+}
+.setting-field__row {
+  margin-bottom: 10px;
+  &::v-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-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;
+   &::v-deep {
+    .el-color-picker__trigger {
+      width: 120px;
+    }
+    .el-input , .el-input__inner{
+      width: 200px;
+    }
+    .el-input-number .el-input {
+      width: auto
+    }
+  }
+}
+.setting-field__item--default {
+  white-space: nowrap;
+}
+.tree-field-checkbox-group {
+  font-size: 14px;
+  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: 16px;
+    &:hover {
+      color: #333
+    }
+  }
+}
+
+// 字段设置
+.field-setting {
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  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;
+  &:last-child {
+    width: 400px
+  }
+}
+
+.field-setting__header {
+  padding: 12px 20px;
+  line-height: 1;
+  border-bottom: 1px solid #e3e3e3;
+  span {
+    position: relative;
+    font-size: 16px;
+    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: 2px;
+    }
+  }
+}
+.field-setting__filter {
+  margin: 10px 20px;
+  width: calc(100% - 40px);
+}
+.field-setting__content {
+  flex:1;
+  width: 100%;
+  overflow: auto;
+}
+
+.field-tree {
+  &::v-deep {
+    .el-tree-node__content {
+      height: 48px;
+    }
+  }
+}
+.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 {
+  &::v-deep {
+    .el-dialog {
+      height: 80%;
+    }
+    .el-dialog__body {
+      height: calc(100% - 70px);
+    }
+  }
+}
+</style>
+<style >
+.visual-config-field-popover {
+  max-height: 300px;
+  overflow: auto;
+}
+
+</style>