epx-frame 3.5.0-shpgy.1

package/src/frame/components/EntityViewSubList.vue

@@ -0,0 +1,976 @@
+<script>
+import EntitySubList from '@/frame/packages/entity-sub-list'
+export default {
+  name: 'epx-entity-view-sub-list',
+  extends: EntitySubList,
+  data () {
+    return {
+      formDialog: false,
+      addFormData: {},
+      fieldsConfigs: [],
+      activeView: {},
+      addFieldDialog: false,
+      addSubFieldDialog: false,
+      addFolderDialog: false,
+      viewFieldsMap: {},
+      viewFieldList: [],
+      viewAllFieldList: [],
+      activeViewFieldList: [],
+      activeViewSubFieldList: [],
+      metaFieldList: [],
+      metaSubFieldList: [],
+      checkedFieldKeys: [],
+      checkedFieldTree: [],
+      treeProps: {
+        children: 'children',
+        label: 'text'
+      },
+      editFieldDialog: false,
+      folderName: '',
+      showItemCode: null,
+      showItem: {}
+    }
+  },
+  methods: {
+    initComponent () {
+      // 获取子集查询条件
+      this.getDefaultOperates()
+      this.getFields()
+      this.getAddFieldConfigs()
+      this.getMetaFieldRelation()
+      // 设置当前对象
+    },
+    getAddFieldConfigs () {
+      this.$FieldFactory.createFields({
+        meta: this.$meta,
+        metaId: this.$metaId,
+        fieldScope: this.fieldScope,
+        pageType: 'EDIT',
+        fields: ['NAME', 'CODE', 'IS_DEFAULT', { attriName: 'SCOPE', metaId: this.$query.id }, 'SORT']
+      })
+        .then(data => {
+          this.fieldsConfigs = [...data]
+          data && data.forEach(item => {
+            if ((!this.formData[item.attriName] || this.componentType === 'ADD') && item.value) {
+              // eslint-disable-next-line no-unused-vars
+              const _this = this
+              // 设置字段默认值
+              const value = item.value.replace(/\$\[(.+)\]/, (match, key) => {
+                try {
+                  // eslint-disable-next-line no-eval
+                  return eval(`_this.${key}`) || eval(`_this.$query.${key}`) || eval(`_this.$tab.${key}`) || eval(`_this.$route.query.${key}`) || ''
+                } catch (error) {
+                  return item.value
+                }
+              })
+              this.$set(this.addFormData, item.attriName, value)
+            }
+          })
+        })
+    },
+    reloadData () {
+      this.getData(null, data => {
+        if (this.activeView.ID) {
+          const item = this.data.find(item => item.ID === this.activeView.ID)
+          this.clickViewItem(item)
+        }
+      })
+    },
+    afterData () {
+      this.getViewListFields()
+    },
+    editViewItem (item) {
+      let { SORT } = item
+      if (SORT) SORT = JSON.parse(SORT)
+      this.addFormData = { ...item, SORT }
+      this.formDialog = true
+    },
+    copyViewItem (item) {
+      this.$http.save({
+        action: 'copyMetaView',
+        entityId: this.$metaId,
+        metaViewId: item.ID
+      })
+        .then(data => {
+          this.$message.success('复制成功')
+          this.reloadData()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    deleteView (item) {
+      this.$http.removeMulti({
+        entityId: this.$metaId,
+        ids: item.ID
+      })
+        .then(() => {
+          this.$message.success('删除成功')
+          this.reloadData()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    addView () {
+      const formData = {}
+      if (!this.addFormData.NAME) {
+        this.$message.error('请输入名称')
+        return
+      }
+      if (!this.addFormData.CODE) {
+        this.$message.error('请输入编号')
+        return
+      }
+      for (const key in this.addFormData) {
+        if (!key.includes('#')) {
+          if (key === 'SORT' && Array.isArray(this.addFormData[key])) {
+            formData[`bean.${key}`] = JSON.stringify(this.addFormData[key])
+          } else {
+            formData[`bean.${key}`] = this.addFormData[key]
+          }
+        }
+      }
+      this.$http.save({
+        action: this.addFormData.ID ? 'update' : 'save',
+        entityId: this.$metaId,
+        'bean.ENTITY': this.$query.id,
+        ...formData
+      })
+        .then(data => {
+          this.$message.success('保存成功')
+          this.addFormData = {}
+          this.formDialog = false
+          this.reloadData()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    formatFields (arr, flag = '') {
+      arr.forEach(item => {
+        if (!item.field) item.field = flag ? flag.toUpperCase() + '|' + item.code : item.code
+        if (!item.codeKey) item.codeKey = item.relatedEntity
+        if (item.relationMeta) {
+          const { children, linkFlag, relationMetaList, id } = item.relationMeta
+          item.children = children.map(child => ({ ...child, meta: id }))
+          item.linkFlag = flag ? flag + '|' + linkFlag : linkFlag
+          if (relationMetaList) {
+            relationMetaList.forEach(meta => {
+              meta.isSub = true
+              meta.type = 'meta'
+              meta.linkFlag = item.linkFlag + '|' + meta.linkFlag
+              meta.field = meta.linkFlag
+              meta.children = meta.children.map(child => ({ ...child, meta: meta.id, relationSort: '1' }))
+            })
+            item.children.push(...relationMetaList)
+          }
+        }
+        if (item.children) this.formatFields(item.children, item.linkFlag)
+      })
+    },
+    getMetaFieldRelation () {
+      this.$http.get({
+        action: 'getMetaRelationTree',
+        entityId: 'FM_ENTITY',
+        metaId: this.$query.id,
+        allSub: true
+      })
+        .then(data => {
+          const formatData = (arr) => {
+            arr.forEach(item => {
+              item.disabled = item.type === 'meta' && item.relationType === '1'
+              if (item.children) formatData(item.children)
+            })
+          }
+          formatData(data)
+          data[0].disabled = true
+          data[0].isMain = true
+          this.metaFieldList = data
+        })
+    },
+    openAddFieldDialog (item) {
+      this.addFieldDialog = true
+      this.activeView = item
+      const { FIELDS = '[]' } = item
+      this.checkedFieldTree = JSON.parse(FIELDS)
+      const checkedFieldKeys = []
+      const mapField = (arr) => {
+        arr.map(item => {
+          if (!item.type || item.type === 'field') {
+            checkedFieldKeys.push(item.code)
+          }
+          if (item.children && item.children.length > 0) {
+            mapField(item.children)
+          }
+        })
+      }
+      mapField(this.checkedFieldTree)
+      this.checkedFieldKeys = checkedFieldKeys
+    },
+    openAddFolderDialog (item) {
+      this.addFolderDialog = true
+      this.activeView = item
+    },
+    openAddSubFieldDialog () {
+      this.addSubFieldDialog = true
+    },
+    addFolder () {
+      if (!this.folderName) {
+        this.$message.error('请填写分类名称')
+        return
+      }
+      const { FIELDS } = this.activeView
+      const fields = JSON.parse(FIELDS)
+      if (fields.length === 0) {
+        fields.push({
+          type: 'folder',
+          text: '基本信息',
+          code: 'base',
+          isDefault: true,
+          children: []
+        })
+      }
+      const index = fields.findIndex(item => item.type !== 'folder')
+      const code = 'folder'
+      let codeIndex = 1
+      while (fields.find(item => item.code === code + codeIndex)) {
+        codeIndex++
+      }
+      const item = {
+        type: 'folder',
+        text: this.folderName,
+        code: code + codeIndex,
+        children: []
+      }
+      if (index === -1) {
+        fields.push(item)
+      } else {
+        fields.splice(index, 0, item)
+      }
+      this.$http.update({
+        entityId: this.$metaId,
+        'bean.ID': this.activeView.ID,
+        'bean.FIELDS': JSON.stringify(fields)
+      })
+        .then(() => {
+          this.$message.success('添加成功')
+          this.reloadData()
+          this.folderName = ''
+          this.addFolderDialog = false
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    checkFieldChange (data, isCheck) {
+      // 查找其所有上级节点
+      const parentNodes = this.getFieldAllParents(data)
+      const parent = parentNodes[parentNodes.length - 1]
+      if (isCheck) {
+        if (this.checkedFieldTree.length === 0) {
+          this.checkedFieldTree.push({
+            type: 'folder',
+            text: '基本信息',
+            code: 'base',
+            isDefault: true,
+            children: []
+          })
+        }
+        const defaultFolderIndex = this.checkedFieldTree.findIndex(item => item.isDefault === true)
+        const fieldData = { type: 'field', code: data.linkCode, text: data.text, fieldId: data.id, metaId: data.meta.id }
+        if (parent && parent.relationType === '1') {
+          // 如果是一对多子集，要加上子集对象
+          if (parentNodes.length > 1) {
+            // 添加到基本信息
+            let index = -1
+            let folderIndex = defaultFolderIndex
+            for (let i = 0; i < this.checkedFieldTree.length; i++) {
+              const children = this.checkedFieldTree[i].children || []
+              index = children.findIndex(item => item.code === parent.linkFlag)
+              if (index !== -1) {
+                folderIndex = i
+                break
+              }
+            }
+            if (folderIndex !== -1) {
+              let item = null
+              const folder = this.checkedFieldTree[folderIndex]
+              if (index === -1) {
+                // 创建新的一对多字段
+                const parentText = parentNodes.filter(item => !item.isMain && item.id !== parent.id).map(item => item.text).join('/')
+                item = { code: parent.linkFlag, text: parentText ? parentText + '/' + parent.text : parent.text, metaId: parent.id, type: 'meta', children: [fieldData] }
+                folder.children.push(item)
+              } else {
+                item = folder.children[index]
+                item = { ...item, children: [...item.children, fieldData] }
+                folder.children.splice(index, 1, item)
+              }
+              this.checkedFieldTree.splice(folderIndex, 1, folder)
+            }
+          } else {
+            // 添加到外层
+            const index = this.checkedFieldTree.findIndex(item => item.code === parent.linkFlag)
+            if (index !== -1) {
+              const item = this.checkedFieldTree[index]
+              this.checkedFieldTree.splice(index, 1, { ...item, children: [...item.children, fieldData] })
+            } else {
+              const item = { text: parent.text, code: parent.linkFlag, metaId: parent.id, type: 'meta', children: [fieldData] }
+              this.checkedFieldTree.push(item)
+            }
+          }
+        } else {
+          // 一对一 多对一 或主对象字段
+          const parentText = parentNodes.filter(item => !item.isMain).map(item => item.text).join('/')
+          if (defaultFolderIndex !== -1) {
+            const defaultFolder = this.checkedFieldTree[defaultFolderIndex]
+            const children = defaultFolder.children || []
+            const item = { code: data.linkCode, text: parentText ? parentText + '/' + data.text : data.text, fieldId: data.id, metaId: data.meta.id }
+            if (!children.find(child => child.linkCode === data.linkCode)) {
+              this.checkedFieldTree.splice(defaultFolderIndex, 1, { ...defaultFolder, children: [...children, item] })
+            }
+          }
+        }
+      } else {
+        const deleteField = (arr, index, parentArr) => {
+          for (let i = 0; i < arr.length; i++) {
+            const item = arr[i]
+            if (item.code === data.linkCode) {
+              arr.splice(i, 1)
+              if (parent && parent.relationType === '1') {
+                if (arr.length === 0) {
+                  parentArr.splice(index, 1)
+                }
+              }
+              break
+            } else if (item.children) {
+              deleteField(item.children, i, arr)
+            }
+          }
+        }
+        deleteField(this.checkedFieldTree)
+      }
+    },
+    isSelectAllFn (children) {
+      const data = children.filter(item => item.type === 'field')
+      const findData = (arr) => {
+        arr.forEach(item => {
+          if (item.type === 'field' || !item.type) {
+            const index = data.findIndex(child => child.linkCode === item.code)
+            if (index !== -1) {
+              data.splice(index, 1)
+              if (data.length === 0) return true
+            }
+          }
+          if (item.children) findData(item.children)
+        })
+      }
+      findData(this.checkedFieldTree)
+      return data.length === 0
+    },
+    selectAll (data, e) {
+      e.stopPropagation()
+      const flag = this.isSelectAllFn(data.children)
+      data.children.forEach(item => {
+        if (item.type === 'field') {
+          this.$refs.fieldTree.setChecked(item.linkCode, !flag)
+          this.checkFieldChange(item, !flag)
+        }
+      })
+    },
+    saveMetaView () {
+      // 保存视图数据
+      this.$http.update({
+        entityId: this.$metaId,
+        'bean.ID': this.activeView.ID,
+        'bean.FIELDS': JSON.stringify(this.checkedFieldTree)
+      })
+        .then(() => {
+          this.$message.success('保存成功')
+          this.reloadData()
+          this.addFieldDialog = false
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    updateMetaView () {
+      this.$http.update({
+        entityId: this.$metaId,
+        'bean.ID': this.activeView.ID,
+        'bean.FIELDS': JSON.stringify(this.$refs.viewFields.fieldTreeList)
+      })
+        .then(() => {
+          this.$message.success('保存成功')
+          this.reloadData()
+          this.editFieldDialog = false
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    getFieldAllParents (data) {
+      const linkCode = data.linkCode
+      const findParent = (arr, parentNodes = []) => {
+        for (const item of arr) {
+          if (item.linkCode === linkCode) {
+            return parentNodes
+          } else if (item.children) {
+            const childParentNodes = findParent(item.children, [...parentNodes, item])
+            if (childParentNodes) return childParentNodes
+          }
+        }
+      }
+      return findParent(this.metaFieldList)
+    },
+    clickViewItem (item) {
+      this.activeView = item
+    },
+    getViewListFields () {
+      this.data = this.data.map(item => {
+        this.getViewFields(item.ID)
+        const { FIELDS } = item
+        return { ...item, FIELDS: FIELDS || '[]', jsonFields: JSON.parse(FIELDS || '[]') }
+      })
+    },
+    getViewFields (id) {
+      return this.$http.get({
+        action: 'getEntityMetaView',
+        entityId: this.$metaId,
+        metaId: this.$query.id,
+        metaViewId: id
+      })
+        .then(data => {
+          this.$set(this.viewFieldsMap, id, data)
+        })
+    },
+    deleteViewField (data, item) {
+      const { FIELDS } = item
+      const fields = JSON.parse(FIELDS || '[]')
+      const code = data.code
+      const deleteField = (arr) => {
+        for (let i = 0; i < arr.length; i++) {
+          const item = arr[i]
+          if (item.code === code) {
+            arr.splice(i, 1)
+            break
+          } else if (item.children) {
+            deleteField(item.children)
+          }
+        }
+      }
+      deleteField(fields)
+      this.$http.update({
+        entityId: this.$metaId,
+        'bean.ID': item.ID,
+        'bean.FIELDS': JSON.stringify(fields)
+      })
+        .then(() => {
+          this.$message.success('删除成功')
+          this.reloadData()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    editViewField (data, item) {
+      this.activeView = item
+      const { FIELDS = '[]' } = item
+      this.checkedFieldTree = JSON.parse(FIELDS)
+      this.editFieldDialog = true
+      this.$nextTick(() => {
+        this.$refs.viewFields.editField(data)
+      })
+
+      // if (data.type === 'sub' || data.type === 'meta') {
+      //   this.addSubFieldDialog = true
+      //   this.$nextTick(() => {
+      //     this.$refs.viewSubFields.editField(data)
+      //   })
+      // } else {
+      //   this.addFieldDialog = true
+      //   this.$nextTick(() => {
+      //     this.$refs.viewFields.editField(data)
+      //   })
+      // }
+    },
+    allowDrop (draggingNode, dropNode, type) {
+      const { data: dragData, parent: dragParentNode } = draggingNode
+      const { data: dropData, parent: dropParentNode } = dropNode
+      const dragParent = dragParentNode.data
+      const dropParent = dropParentNode.data
+      if (type === 'inner') {
+        // 子集的不允许拖到外层 外层的不允许拖到子集对象
+        if (dragParent.type === 'folder') {
+          if (dropData.type !== 'folder') {
+            return false
+          }
+        } else if (dragParent.code !== dropData.code) {
+          return false
+        }
+      } else {
+        if (dragParent.code !== dropParent.code) {
+          return false
+        }
+        if (dragData.type !== dropData.type) {
+          return false
+        }
+      }
+      return true
+    },
+    drop (item) {
+      // 生成字段树
+      const jsonFields = item.jsonFields
+      if (jsonFields) {
+        this.$http.update({
+          entityId: this.$metaId,
+          'bean.ID': item.ID,
+          'bean.FIELDS': JSON.stringify(jsonFields)
+        })
+          .then(() => {
+          })
+          .catch(err => {
+            this.$message.error(err.message)
+          })
+      }
+    },
+    showSelectAllBtn (data) {
+      const { linkCode, code } = this.showItem
+      if (data.children.length > 0 && (linkCode || code) !== (data.linkCode || data.code)) {
+        this.showItem = data
+      } else {
+        this.showItem = {}
+      }
+    },
+
+    renderButtons () {
+      return null
+    },
+    renderTable () {
+      return (
+        <div class="view-container">
+          <div class="view-list__container">
+            <div class="view-list__title">
+              <span>元数据视图列表</span>
+            </div>
+            <div class="view-list__content">
+              <ul class="view-list">
+                <li class="view-item view-item--add">
+                  <div class="view-item__add" onClick={() => { this.addFormData = {}; this.formDialog = true }}>
+                    <i class="el-icon-plus"></i>
+                    <span>添加元数据视图</span>
+                  </div>
+                </li>
+                {
+                  this.data.map(item => (
+                    <li class={['view-item']} key={item.ID} >
+                      <div class="view-item__header">
+                        <span class="view-item__title"><span class="view-item__name">{item.NAME}</span> {item.IS_DEFAULT === '1' && <el-tag size="small">默认</el-tag>}</span>
+                        <span class="view-item__operates" onClick={e => e.stopPropagation()}>
+                          <el-dropdown trigger="click">
+                            <i class="view-item__add el-icon-circle-plus-outline"></i>
+                            <el-dropdown-menu slot="dropdown">
+                              <el-dropdown-item nativeOnClick={this.openAddFieldDialog.bind(this, item)}>添加字段</el-dropdown-item>
+                              <el-dropdown-item nativeOnClick={this.openAddFolderDialog.bind(this, item)}>添加分类</el-dropdown-item>
+                            </el-dropdown-menu>
+                          </el-dropdown>
+                          <el-dropdown trigger="click">
+                            <span class="el-dropdown-link">
+                              <i class="el-icon-more"></i>
+                            </span>
+                            <el-dropdown-menu slot="dropdown" >
+                              <el-dropdown-item nativeOnClick={this.copyViewItem.bind(this, item)}>复制</el-dropdown-item>
+                              <el-dropdown-item nativeOnClick={this.editViewItem.bind(this, item)}>编辑</el-dropdown-item>
+                              <el-dropdown-item>
+                                <el-popconfirm
+                                  title="确认删除该视图？"
+                                  onConfirm={this.deleteView.bind(this, item)}
+                                >
+                                  <span slot="reference">删除</span>
+                                </el-popconfirm>
+                              </el-dropdown-item>
+                            </el-dropdown-menu>
+                          </el-dropdown>
+                        </span>
+                      </div>
+                      <div class="view-item__content">
+                        {
+                          item.jsonFields && item.jsonFields.length > 0 ? (
+                            <el-tree
+                              ref="tree"
+                              class="field-tree"
+                              node-key="code"
+                              draggable
+                              default-expanded-keys={this.defaultExpandKeys}
+                              data={item.jsonFields}
+                              render-after-expand={true}
+                              auto-expand-parent={false}
+                              props={this.treeProps}
+                              allow-drop={this.allowDrop}
+                              onNode-drop={this.drop.bind(this, item)}
+                              scopedSlots={{
+                                default: ({ node, data }) => (
+                                  <span class="field-tree__node" style={{ color: data.relationType === '1' }}>
+                                    {data.text}
+                                    {
+                                      !data.isMain && (
+                                        <span class="field-tree__operates">
+                                          <i class="el-icon-edit" onClick={this.editViewField.bind(this, data, item)}></i>
+                                          {
+                                            !data.isDefault && (
+                                              <el-popconfirm
+                                                title="确认删除该字段？"
+                                                onConfirm={this.deleteViewField.bind(this, data, item)}
+                                              >
+                                                <i slot="reference" class="el-icon-delete"></i>
+                                              </el-popconfirm>
+                                            )
+                                          }
+                                        </span>
+                                      )
+                                    }
+                                  </span>
+                                )
+                              }}
+                            >
+                            </el-tree>
+                          ) : (
+                            <div class="null-data" v-else-if="data">
+                              <i class="epx-icon-color-kong"></i>
+                              <p>暂无内容</p>
+                            </div>
+                          )
+                        }
+                      </div>
+                    </li>
+                  ))
+                }
+              </ul>
+            </div>
+          </div>
+          <el-dialog class="show-field-dialog" title="添加字段" width="800px" visible={this.addFieldDialog} {...{ on: { 'update:visible': v => { this.addFieldDialog = v } } }}>
+            {
+              this.addFieldDialog && (
+                <el-tree
+                  ref="fieldTree"
+                  class="field-tree"
+                  show-checkbox
+                  node-key="linkCode"
+                  data={this.metaFieldList}
+                  render-after-expand={true}
+                  auto-expand-parent={false}
+                  check-strictly={true}
+                  check-on-click-node={true}
+                  highlight-current={true}
+                  default-checked-keys={this.checkedFieldKeys}
+                  onCheck-change={this.checkFieldChange}
+                  scopedSlots={{
+                    default: ({ node, data }) => (
+                      <span class="field-tree__node" onMouseover={this.showSelectAllBtn.bind(this, data)} style={{ color: data.type === 'meta' && data.relationType === '1' ? 'red' : '' }}>
+                        {data.text}
+                        { data.children.length > 0 && <el-button class="field-tree_selectall" nativeOnMouseover={e => e.stopPropagation()} type="text" onClick={this.selectAll.bind(this, data)}>全选/取消</el-button>}
+                      </span>
+                    )
+                  }}
+                >
+                </el-tree>
+              )
+            }
+            <span slot="footer" class="dialog-footer">
+              <el-button onClick={() => { this.addFieldDialog = false }}>取 消</el-button>
+              <el-button type="primary"onClick={this.saveMetaView.bind(this)}>确 定</el-button>
+            </span>
+          </el-dialog>
+          <el-dialog class="field-dialog" title="修改字段信息" width="800px" visible={this.editFieldDialog} {...{ on: { 'update:visible': v => { this.editFieldDialog = v } } }}>
+            <epx-entity-view-fields
+              ref="viewFields"
+              treeFieldStore={this.checkedFieldTree}
+              componentMetaId={this.$query.id}
+              fieldOptions={[
+                { key: 'code', label: '字段', readonly: true },
+                { key: 'text', label: '名称', type: 'text' }
+              ]}
+            ></epx-entity-view-fields>
+            <span class="dialog-footer">
+              <el-button onClick={() => { this.editFieldDialog = false }}>取消</el-button>
+              <el-button type="primary" onClick={this.updateMetaView}>保存</el-button>
+            </span>
+          </el-dialog>
+          <el-dialog title={this.addFormData.ID ? '编辑视图' : '新增视图'} width="50%" visible={this.formDialog} {...{ on: { 'update:visible': v => { this.formDialog = v } } }}>
+            {
+              this.formDialog && (
+                <epx-table-form class="form-content" ref="form" metaId={this.$metaId} meta={this.$meta} fieldsConfigs={this.fieldsConfigs} pageType="EDIT" vModel={this.addFormData} column={1}
+                  scopedSlots={{
+                    default: ({ showLabel, fieldConfigs, metaId, ruleMetaId }) => {
+                      return fieldConfigs.attriName === 'SORT' ? (
+                        <epx-table-form-item
+                          show-label={showLabel}
+                          label={fieldConfigs.attriLabel}
+                          metaId={metaId}
+                          ruleMetaId={ruleMetaId}
+                          functionList={[]}
+                          variableList={this.variableList}
+                          fieldConfigs={fieldConfigs}
+                        >
+                          <epx-visual-config-order-field metaId={this.$query.id} value={this.addFormData[fieldConfigs.attriName]} onChange-configs={ v => this.$set(this.addFormData, fieldConfigs.attriName, v) }></epx-visual-config-order-field>
+                        </epx-table-form-item>
+                      ) : (
+                        <epx-table-form-item
+                          show-label={showLabel}
+                          label={fieldConfigs.attriLabel}
+                          metaId={metaId}
+                          ruleMetaId={ruleMetaId}
+                          fieldConfigs={fieldConfigs}
+                          rules={[{
+                            required: fieldConfigs.isRequired === '1' && fieldConfigs.state !== 'SEARCH',
+                            message: `${fieldConfigs.attriLabel}不能为空`
+                          }]}
+                        >
+                        </epx-table-form-item>
+                      )
+                    }
+                  }}
+                >
+                </epx-table-form>
+              )
+            }
+            <span slot="footer" class="dialog-footer">
+              <el-button onClick={() => { this.formDialog = false }}>取消</el-button>
+              <el-button type="primary" onClick={this.addView}>保存</el-button>
+            </span>
+          </el-dialog>
+          <el-dialog title="添加分类" width="400px" visible={this.addFolderDialog} {...{ on: { 'update:visible': v => { this.addFolderDialog = v } } }}>
+            <div class="folder-form__item">
+              <label>名称：</label>
+              <el-input vModel={this.folderName}></el-input>
+            </div>
+            <span slot="footer" class="dialog-footer">
+              <el-button onClick={() => { this.addFolderDialog = false }}>取消</el-button>
+              <el-button type="primary" onClick={this.addFolder}>保存</el-button>
+            </span>
+          </el-dialog>
+        </div>
+      )
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list-container {
+  height: 100%;
+  background: #fff;
+}
+.view-container {
+  height: 100%;
+  display: flex;
+  overflow: auto;
+}
+.view-list__container {
+  width: 100%;
+  height: 100%;
+  border-right: 1px solid #e8e8e8;
+}
+.view-list__title {
+  padding: 14px 20px;
+  border-bottom: 1px solid #E8E8E8;
+
+  span {
+    padding-left: 8px;
+    border-left: 4px solid;
+    @include border_color_primary;
+    font-size: 16px;
+    line-height: 1;
+  }
+}
+.view-list__operates {
+  margin: 12px;
+  text-align: center;
+}
+.view-list {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+  padding: 10px;
+}
+.view-item {
+  width: calc(33.33% - 20px);
+  height: 480px;
+  box-sizing: border-box;
+  margin: 10px;
+  border: 1px solid #DCDFE6;
+  &:hover, &.active {
+    // @include bg_color_primary(.2);
+    // @include font_color_primary;
+    .view-item__operates {
+      // display: block;
+    }
+  }
+}
+.view-item--add{
+  border-style: dashed;
+}
+.view-item__add {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: #666;
+  cursor: pointer;
+  i {
+    display: block;
+    font-size: 48px;
+    margin-bottom: 30px;
+  }
+}
+.view-item__header {
+  height: 48px;
+  padding: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #DCDFE6;
+
+}
+.view-item__name {
+  border-left: 4px solid;
+  @include border_color_primary;
+  padding-left: 8px;
+  line-height: 1;
+}
+.view-item__operates {
+  display: flex;
+  align-items: center;
+  i {
+    font-size: 16px;
+    margin-left: 4px;
+    cursor: pointer;
+    color: #333;
+
+    &:last-child {
+    }
+  }
+  .view-item__add {
+     @include font_color_primary;
+     margin-right: 10px;
+  }
+}
+.view-item__content {
+  height: calc(100% - 48px);
+  overflow: auto;
+}
+.view-fields {
+  flex: 1;
+  height:100%;
+  overflow: auto;
+  padding: 0 32px;
+}
+.view-fields__header {
+  padding: 20px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.view-title {
+  padding-left: 8px;
+  border-left: 4px solid;
+  @include border_color_primary;
+  font-size: 16px;
+  line-height: 1;
+}
+.show-field-dialog {
+  &::v-deep {
+    .el-dialog {
+      height: 80%;
+    }
+    .el-dialog__body {
+      height: calc(100% - 160px);
+      overflow: auto;
+    }
+  }
+}
+.field-tree {
+  &::v-deep {
+    .el-tree-node__content {
+      display: flex;
+      height: 48px;
+      align-items: center;
+      &:focus {
+        background: none;
+      }
+      &:hover {
+        @include bg_color_primary(.2);
+        .field-tree__operates {
+        display: block;
+      }
+      }
+    }
+  }
+  .field-tree__node {
+    flex: 1;
+    padding-right: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &:hover {
+      .field-tree_selectall {
+        display: block;
+      }
+    }
+  }
+  .field-tree_selectall {
+    display: none;
+  }
+  .field-tree__operates {
+    display: none;
+    i {
+    font-size: 16px;
+    margin-left: 12px;
+    cursor: pointer;
+    @include font_color_primary;
+    &:last-child {
+      color: red;
+    }
+  }
+  }
+}
+.field-dialog {
+  &::v-deep {
+    .el-dialog__body {
+        height: 600px;
+    }
+  }
+}
+.folder-form__item {
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+  >label {
+    flex-shrink: 0;
+    margin-right: 10px;
+  }
+  &::v-deep {
+    .el-input {
+      width: 220px;
+    }
+  }
+}
+.dialog-footer {
+  margin-top: 12px;
+  text-align: right;
+  display: flex;
+  justify-content: flex-end;
+}
+.null-data {
+  padding: 20px 0;
+  margin-top: 60px;
+  text-align: center;
+  color: #666;
+  i {
+    font-size: 100px;
+  }
+}
+</style>