@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/base/CommonFieldList.vue

@@ -0,0 +1,1397 @@
+<script>
+// @jsx-vue3（T30 JSX 批③：scopedSlots 集群 Vue3 化）
+import EntitySubList from '@epxing/components/src/entity-sub-list'
+import draggable from '@epxing/core/src/components/draggable'
+import { mapGetters } from 'vuex'
+import { captureRef } from '@epxing/core/src/capture-ref'
+export default {
+  name: 'epx-base-common-field-list',
+  extends: EntitySubList,
+  components: {
+    draggable
+  },
+  data () {
+    return {
+      showFieldDialog: false,
+      filterText: '',
+      treeProps: {
+        children: 'children',
+        label: 'text',
+        disabled: 'isSub'
+      },
+      settingFieldList: [],
+      showLogField: false,
+      showSubField: this.defaultShowSubField !== false,
+      addCommonFieldDialod: false,
+      commonFieldName: '',
+      commonFieldOrder: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getMetaViewFields'
+    ]),
+    showFieldStore () {
+      const fieldStore = this.getMetaViewFields(this.$query.id) || []
+      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.children) {
+            item.children = formatField(item.children)
+          }
+
+          return true
+        })
+      }
+      const copyFieldStore = this.$_.cloneDeep(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.showFieldStore) || attriName
+      }
+    },
+    defaultExpandKeys () {
+      return this.showFieldStore[0] ? [this.showFieldStore[0].field] : []
+    }
+  },
+  watch: {
+    filterText (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  methods: {
+    initComponent () {
+      const { id: upparentId } = this.upPage.$query
+      const { id: parentId = upparentId } = this.$query
+      const { queryParams = {}, fieldConfigs = {}, pageSize } = this.$configs
+      const { showTitle, defaultFold } = this.$configs
+      if (defaultFold) {
+        if (showTitle !== 'none' && (this.showTitle || showTitle === 'always')) {
+          this.isFold = defaultFold
+        }
+      }
+      if (this.parentField) {
+        this.parentId = this.formData[this.parentField] || parentId
+      } else {
+        this.parentId = this.formData[this.parentMeta.getKey()] || parentId
+      }
+
+      this.configs.queryParams = { ...queryParams, [`scope.${this.linkAttrData}`]: this.parentId }
+      this.configs.fieldConfigs = { ...fieldConfigs, [this.linkAttrData]: { state: 'HIDDEN' } }
+      this.addFormFieldConfigs = {
+        [this.linkAttrData]: { state: 'HIDDEN', value: this.parentId }
+      }
+      this.pageSize = pageSize
+      if (!this.showFlag) return
+      // 获取子集查询条件
+      this.getDefaultOperates()
+      this.getFields()
+      this.getFieldStore()
+      this.$nextTick(() => {
+        this.rowDrop()
+      })
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return data.text && data.text.indexOf(value) !== -1
+    },
+    getFieldStore () {
+      if (!this.$query.id) return
+      if (!this.getMetaViewFields(this.$query.id)) {
+        this.$store.dispatch({
+          type: 'ADD_META_VIEW_FIELDS',
+          metaId: this.$query.id
+        })
+      }
+    },
+    deleteSettingField (index) {
+      const field = this.settingFieldList[index]
+      this.settingFieldList.splice(index, 1)
+      if (field) {
+        this.$refs.tree.setChecked(field.attriName || field, false)
+      }
+    },
+    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.settingFieldList.includes(child.field))
+          if (flag) {
+            children.forEach(item => {
+              this.$refs.tree.setChecked(item.field, false)
+            })
+          }
+        }
+      } else {
+        const parent = this.getChildParent(this.showFieldStore, data.field)
+        if (isCheck) {
+          const field = this.settingFieldList.find(item => item === data.field)
+          if (!field) {
+            this.settingFieldList.push(data.field)
+          }
+          if (parent && parent.isMain) {
+            const children = parent.children.filter(item => !item.isSub)
+            const flag = children.every(child => this.settingFieldList.includes(child.field))
+            if (flag) this.$refs.tree.setChecked(parent.field, true)
+          }
+        } else {
+          const index = this.settingFieldList.findIndex(item => item === data.field)
+          if (index !== -1) {
+            this.settingFieldList.splice(index, 1)
+          }
+          if (parent && parent.isMain) this.$refs.tree.setChecked(parent.field, false)
+        }
+      }
+    },
+    saveSelectField () {
+      if (this.editFieldId) {
+        this.saveCommonField()
+      } else {
+        this.addCommonFieldDialod = true
+      }
+    },
+    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)
+      })
+    },
+    setField (config, item) {
+      if (item && item.ID) {
+        this.editFieldId = item.ID
+      } else {
+      }
+      this.showFieldDialog = true
+      this.$nextTick(() => {
+        if (item && item.FIELDS) {
+          const fields = item.FIELDS.split(',')
+          this.settingFieldList = [...fields]
+          this.$refs.tree.setCheckedKeys(this.settingFieldList)
+        } else {
+          this.settingFieldList = []
+        }
+      })
+    },
+    saveCommonField () {
+      if (!this.commonFieldName && !this.editFieldId) {
+        this.$message.error('请输入名称')
+        return
+      }
+      if (this.settingFieldList.length === 0) {
+        this.$message.error('请设置导出字段')
+        return
+      }
+      let params = {}
+      if (this.editFieldId) {
+        params = {
+          action: 'update',
+          entityId: 'FM_FIELD_COMMON',
+          'bean.ID': this.editFieldId,
+          'bean.FIELDS': this.settingFieldList.map(item => item.code || item).join(',')
+        }
+      } else {
+        params = {
+          entityId: 'FM_FIELD_COMMON',
+          'bean.CLIENT': this.CLIENT,
+          'bean.SYSTEM': this.SYSTEM,
+          'bean.ENTITY': this.$query.id,
+          'bean.NAME': this.commonFieldName,
+          'bean.ORDER_NUM': this.commonFieldOrder,
+          'bean.FIELDS': this.settingFieldList.map(item => item.code || item).join(',')
+        }
+      }
+      this.$http.save(params)
+        .then(data => {
+          this.$message.success('保存成功')
+          this.commonFieldName = ''
+          this.commonFieldOrder = ''
+          this.addCommonFieldDialod = false
+          this.settingFieldList = []
+          this.showFieldDialog = false
+          this.editFieldId = null
+          this.reloadData()
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+        })
+    },
+    renderField (field, index) {
+      return {
+        default: ({ row }) => {
+          if (field.attriName === 'FIELDS' && row.FIELDS) {
+            return row.FIELDS.split(',').map(item => (
+              <el-tag size="small" style={{ margin: '0 4px' }}>{this.fieldLabel(item)}</el-tag>
+            ))
+          } else if (field.newLine) {
+            return (
+              <el-tooltip effect="dark" content={row[field.attriName + '#'] || row[field.attriName]} placement="top">
+                <div class="table-cell" style={field.newLine ? { maxHeight: `${22 * field.lineNum + 'px'}`, whiteSpace: 'normal', display: 'block' } : ''}>
+                  <epx-entity-list-edit-field fieldConfigs={field} row={row} onClick={this.clickField.bind(this)} onChange={this.changeField.bind(this)} isEdit={this.editField.rowId === row.ID && this.editField.columnId === field.attriName} />
+                  { index === 0 && this.$configs.type === 'tree' && this.$configs.operateTreeListFlag && this.treeListOperates.length > 0 && (
+                    <el-dropdown class="tree-list-sort" v-slots={{
+                      dropdown: () => (<el-dropdown-menu>
+                        {
+                          this.treeListOperates.map(item => (
+                            <el-dropdown-item onClick={this.$handler.bind(this, item, row)}>{item.text}</el-dropdown-item>
+                          ))
+                        }
+                      </el-dropdown-menu>)
+                    }}>
+                      <span class="el-dropdown-link">
+                        <i class="el-icon-sort"></i>
+                      </span>
+
+                    </el-dropdown>
+                  ) }
+                </div>
+              </el-tooltip>
+            )
+          } else {
+            return (
+              <div class={['table-cell', { 'table-cell--detail': field.state === 'DETAIL' || field.state === 'READONLY' }]}>
+                <epx-entity-list-edit-field fieldConfigs={field} row={row} onClick={this.clickField.bind(this)} onChange={this.changeField.bind(this)} isEdit={this.editField.rowId === row.ID && this.editField.columnId === field.attriName} />
+                { index === 0 && this.$configs.type === 'tree' && this.$configs.operateTreeListFlag && this.treeListOperates.length > 0 && (
+                  <el-dropdown class="tree-list-sort" v-slots={{
+                    dropdown: () => (<el-dropdown-menu>
+                      {
+                        this.treeListOperates.map(item => (
+                          <el-dropdown-item onClick={this.$handler.bind(this, item, row)}>{item.text}</el-dropdown-item>
+                        ))
+                      }
+                    </el-dropdown-menu>)
+                  }}>
+                    <span class="el-dropdown-link">
+                      <i class="el-icon-sort"></i>
+                    </span>
+
+                  </el-dropdown>
+                ) }
+              </div>
+            )
+          }
+        }
+      }
+    },
+    renderFieldDialog () {
+      return (
+        <el-dialog
+          title="添加字段"
+          modelValue={this.showFieldDialog}
+          {...{ 'onUpdate:modelValue': v => { this.showFieldDialog = v } }}
+          append-to-body={true}
+          class="show-field-dialog"
+          destroy-on-close
+          width="800px"
+          top="10vh"
+        >
+          <div class="field-setting">
+            <div class="field-setting-item">
+              <p class="field-setting__header1">
+                <span>选择字段</span>
+              </p>
+              <div class="field-setting__content">
+                <el-input class="field-setting__filter" suffix-icon="el-icon-search" size="default" v-model={this.filterText}></el-input>
+                <el-tree
+                  ref={captureRef(this, 'tree')}
+                  class="field-tree"
+                  show-checkbox
+                  node-key="field"
+                  default-expanded-keys={this.defaultExpandKeys}
+                  data={this.showFieldStore}
+                  auto-expand-parent={false}
+                  props={this.treeProps}
+                  check-strictly={true}
+                  filter-node-method={this.filterNode}
+                  onCheckChange={this.checkFieldChange}
+                  v-slots={{
+                    default: ({ node, data }) => (
+                      <span style={data.isSub ? { color: 'red' } : {}}>
+                        {data.text}
+                      </span>
+                    )
+                  }}
+                >
+
+                </el-tree>
+                <div class="set-show-field">
+                显示字段：
+                  <el-checkbox v-model={this.showLogField}>日志字段</el-checkbox>
+                  <el-checkbox v-model={this.showSubField}>子集字段</el-checkbox>
+                </div>
+              </div>
+            </div>
+            <div class="field-setting-item">
+              <p class="field-setting__header1">
+                <span>已选字段</span>
+              </p>
+              <div class="field-setting__content">
+                <div class="setting-fields__select">
+                  <draggable
+                    list={this.settingFieldList}
+                    class="list-group"
+                    ghost-class="ghost"
+                  >
+                    <transition-group type="transition" name="flip-list" class="setting-fields__select--list">
+                      {
+                        this.settingFieldList.map((field, index) => (
+                          <li class={['setting-fields__select--item']} key={field.attriName || field}>
+                            <i class="el-icon-document"></i>
+                            <span>{this.fieldLabel(field)}</span>
+                            <i class="el-icon-delete fr" onClick={this.deleteSettingField.bind(this, index)}></i>
+                          </li>
+                        ))
+                      }
+
+                    </transition-group>
+                  </draggable>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="field-setting__button">
+            <el-button size="default" onClick={() => { this.showFieldDialog = false }}>取消</el-button>
+            <el-button size="default" type="primary" onClick={this.saveSelectField.bind(this)}>保存</el-button>
+          </div>
+        </el-dialog>
+      )
+    },
+    renderNameDialog () {
+      return (
+        <el-dialog modelValue={this.addCommonFieldDialod} {...{ 'onUpdate:modelValue': v => { this.addCommonFieldDialod = v } }} width="400px" title="新增常用导出字段" v-slots={{
+          footer: () => (<span class="dialog-footer">
+            <el-button onClick={() => { this.addCommonFieldDialod = false }}>取 消</el-button>
+            <el-button type="primary" onClick={this.saveCommonField.bind(this)}>确 定</el-button>
+          </span>)
+        }}>
+          <div class="add-form-item">
+            <label for="">名称：</label>
+            <el-input size="default" v-model={this.commonFieldName} placeholder="请输入名称"></el-input>
+          </div>
+          <div class="add-form-item">
+            <label for="">排序号：</label>
+            <el-input size="default" v-model={this.commonFieldOrder} placeholder="请输入排序号"></el-input>
+          </div>
+
+        </el-dialog>
+      )
+    }
+  },
+  created () {
+    this.renderComponents.unshift(this.renderFieldDialog, this.renderNameDialog)
+  }
+}
+
+</script>
+<style scoped lang="scss">
+$paddingSize: 16px;
+.list-container {
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+  &.fold {
+    .list-note-container {
+      display: none
+    }
+    .list-operates {
+      display: none;
+    }
+    .list-table {
+      display: none;
+    }
+    .form-title-fold__icon {
+      transform: rotate(180deg);
+    }
+
+  }
+  &.list-container--fixed_table {
+    display: flex;
+    flex-direction: column;
+    .table {
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+    .table-checkbox-group {
+      flex: 1;
+      overflow: auto;
+    }
+    .list-table {
+      height: 100%;
+      overflow: auto;
+    }
+  }
+
+    :deep(.el-table__header-wrapper-copy),
+    :deep(.el-table__fixed-header-wrapper-copy) {
+      .caret-wrapper {
+        opacity: 0;
+      }
+    }
+    :deep(.cell) {
+      display: flex;
+      align-items: center;
+      .el-table__placeholder {
+          width: 0;
+          flex-shrink: 0;
+        }
+    }
+    :deep(.operate-column__cell) {
+      .cell {
+        line-height: 30px;
+        .el-table__placeholder {
+          flex-shrink: 0;
+        }
+      }
+    }
+    :deep(.el-table__column--edit) {
+      padding: 6px 0;
+    }
+    :deep(.el-table__expand-icon) {
+      position: relative;
+      left: -16px;
+      margin-right: -20px;
+    }
+
+}
+.search-container {
+  display: flex;
+  align-items: center;
+}
+.search-simple {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.search-simple__clear {
+  border-left: 1px solid var(--epx-border);
+  padding: 0;
+  margin: 0;
+  padding-left: 6px;
+  border-radius: 0;
+}
+.list-table {
+  background: var(--epx-bg-card);
+  // padding:0 12px;
+   // 无边框
+  &.no-border {
+    border: 0;
+    border-top: dashed 1px var(--epx-border);
+    &::after {
+      display: none
+    }
+
+      :deep(th.is-leaf),
+      :deep(td) {
+       border-right: 0
+      }
+
+  }
+}
+.is-label {
+  @include font_color_primary;
+  cursor: pointer;
+}
+.list-operates {
+  background: var(--epx-bg-card);
+  padding: $paddingSize 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.button-group {
+
+    :deep(.el-button + .more-table-operates) {
+      margin-left: 10px
+    }
+    :deep(.more-table-operates +  .el-button) {
+      margin-left: 10px
+    }
+
+}
+
+.column-operates {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  button {
+    padding: 4px 0;
+  }
+  button:not(:last-child) {
+    &::after {
+      content: '';
+      position: relative;
+      right: -6px;
+      top:0 ;
+      height: 14px;
+      border-right:  1px solid var(--epx-border);
+    }
+  }
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  float: left;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--epx-radius-base);
+  text-align: center;
+  line-height: 30px;
+  overflow: hidden;
+   border: 0;
+  outline: none;
+  margin-left: 6px;
+  &.active {
+    @include bg_color_primary( 0.1);
+  }
+}
+
+.column-operate-btn {
+  font-size: var(--epx-font-size-base);
+}
+.pagination {
+  background: var(--epx-bg-card);
+  padding: $paddingSize 0;
+
+    :deep(.el-select) {
+      margin-left: 24px;
+    }
+    :deep(.el-pagination__total) {
+      float: right;
+    }
+
+}
+.pagination--card {
+  background: none;
+
+    :deep(.number),
+    :deep(button) {
+      background: transparent;
+    }
+
+}
+.field__photo {
+
+    :deep(.el-avatar) {
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+      display: block;
+      >img {
+        width: 100%
+      }
+    }
+
+}
+.form-title {
+  padding: 6px 24px;
+  position: relative;
+  overflow: hidden;
+  font-size: var(--epx-font-size-l);
+  line-height: 36px;
+  white-space: pre-wrap;
+  background: var(--epx-bg-card);
+  &::after {
+    content: '';
+    position: absolute;
+    left: -24px;
+    bottom: 0;
+    width: calc(100% + 48px);
+    height: 1px;
+    background: var(--epx-border);
+  }
+  .form-title-fold__icon {
+    @include font_color_primary;
+    font-size: var(--epx-font-size-xl);
+    cursor: pointer;
+    transition: all .5s;
+    line-height: 36px;
+    margin-left: 10px;
+  }
+}
+
+.form-tilte__simple {
+  margin-bottom: -20px;
+  padding: 6px 12px 0;
+  &::after {
+    display: none;
+  }
+  .form-title-border {
+    border: 0;
+    padding-left: 0;
+  }
+  .form-title__operate {
+    display: none;
+  }
+  .form-title-fold__icon {
+    display: none;
+  }
+}
+.form-title-border{
+  border-left: 3px solid;
+  @include border_color_primary;
+  padding-left: 6px;
+}
+
+.form-title-edit {
+  font-size: var(--epx-font-size-base);
+  line-height: 36px;
+  cursor: pointer;
+  @include font_color_primary;
+  i {
+    margin-right: 4px;
+  }
+}
+.field-setting__btn {
+  display: inline;
+  margin-left: 24px;
+  cursor: pointer;
+  i {
+    margin-right: 4px
+  }
+}
+.field-setting {
+
+}
+.field-setting__drawer {
+
+    :deep(.el-drawer__body) {
+      display: flex;
+      flex-direction: column;
+    }
+
+  .field-setting__content {
+    flex: 1;
+    overflow: auto;
+  }
+}
+.field-setting__header{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 46px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--epx-border);
+  >span {
+    font-size: var(--epx-font-size-l);
+    font-weight: 600px;
+    border-left: 4px solid;
+    @include border_color_primary;
+    padding-left:6px;
+    line-height: 1;
+
+      :deep(.el-checkbox) {
+        margin-left: 20px;
+      }
+
+  }
+  >i {
+    font-size: var(--epx-font-size-l);
+    cursor: pointer;
+  }
+}
+.field-setting__operate {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  padding: 0 16px;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+
+    :deep(.el-button) {
+      color: #EE4949;
+      i {
+        margin-right: 4px;
+      }
+    }
+
+}
+.setting-field__checkboxgroup {
+  font-size: var(--epx-font-size-base);
+}
+.field-setting__item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  padding:  0 24px;
+  height: 40px;
+  >span {
+    color: var(--epx-text);
+    >i {
+      margin-right: 4px;
+    }
+  }
+   &:hover {
+    @include bg_color_primary(.1);
+    >i {
+      display: inline;
+    }
+    }
+  >i {
+    color :#EE4949;
+    display: none;
+
+  }
+}
+.field-setting__footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 50px;
+  border-top: 1px solid var(--epx-border);
+  box-sizing: border-box;
+  padding: 0 16px;
+
+    :deep(.el-button) {
+      width: 100%;
+    }
+
+}
+.add-field {
+}
+.add-field__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+    :deep(.el-input) {
+      width: 320px;
+    }
+
+}
+.add-field-tree {
+  max-height: 480px;
+  overflow: auto;
+}
+.field-meta {
+  padding: 12px 0;
+  border-bottom: 1px dashed var(--epx-border);
+  &:last-child {
+    border: 0;
+  }
+}
+.field-meta__header {
+  line-height: 24px;
+  margin-bottom: 12px;
+  > span {
+    border-left: 4px solid;
+    @include border_color_primary;
+    font-size: var(--epx-font-size-l);
+    font-weight: 600px;
+    padding-left: 6px;
+    padding-right: 10px;
+  }
+}
+.field-meta__content {
+  line-height: 24px;
+}
+.add-field-dialog {
+
+    :deep(.el-dialog__footer) {
+      padding-bottom: 10px;
+      text-align: center;
+      border-top: 1px solid var(--epx-border);
+    }
+
+}
+.list-note-container {
+  background: var(--epx-bg-card);
+  padding: 12px 10px 0;
+}
+.form-note {
+  @include bg_color_primary(.2);
+  @include border_color_primary;
+  @include font_color_primary;
+  border: 1px dashed;
+  padding: 8px 12px;
+  border-radius: var(--epx-radius-base);
+  white-space: pre-wrap;
+  display: flex;
+  align-items: center;
+  font-size: var(--epx-font-size-base);
+  >i {
+    margin-right: 8px;
+    font-size: var(--epx-font-size-l);
+    flex-shrink: 0;
+  }
+}
+.drag-icon {
+  cursor: move;
+}
+.sort-dialog {
+
+    :deep(.el-dialog__body) {
+      height: 60vh;
+    }
+    :deep(.el-dialog__footer) {
+      text-align: center;
+    }
+    :deep(.el-tree-node__content) {
+      height: 32px;
+    }
+
+}
+</style>
+<style lang="scss" scoped>
+.card-list__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.card-checkbox-group {
+  flex: 1;
+  overflow: hidden;
+}
+.card-list {
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+  margin: 0 -10px;
+}
+.card-item {
+  padding: 10px;
+  box-sizing: border-box;
+  overflow: hidden;
+
+}
+.card-item--horizontal {
+  .card-item__container {
+    flex-direction: row;
+
+  }
+  .card-item__content {
+    flex-basis: 100%;
+    flex-direction: row;
+    overflow: hidden;
+    width: auto;
+  }
+  .card-item__icon {
+    margin-right: 12px;
+    margin-bottom: 0;
+  }
+  .card-item__fields {
+    flex: 1;
+    overflow: hidden;
+  }
+  .card-item__row {
+    text-align: left;
+  }
+  .card-item__footer {
+    width: auto;
+    margin-top: 0;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.card-item--border {
+  .card-item__container {
+    border: 1px solid var(--epx-border);
+  }
+}
+.card-item__container {
+  padding: 14px;
+  background: var(--epx-bg-card);
+  border-radius: var(--epx-radius-base);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  box-sizing: border-box;
+  overflow: hidden;
+  &:hover {
+    box-shadow: 0px 6px 12px -3px rgba(0, 0, 0, 0.15);
+  }
+}
+.card-item__checkbox {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+.card-item__content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.card-item__icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  overflow: hidden;
+  @include bg_color_primary;
+  margin-bottom: 4px;
+  flex-shrink: 0;
+  text-align: center;
+  >img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  >i {
+    color: #fff;
+    font-size: 28px;
+    line-height: 56px;
+  }
+}
+.card-item__fields {
+  width: 100%;
+}
+.card-item__row {
+  margin: 8px 0;
+  font-size: var(--epx-font-size-base);
+  color: var(--epx-text);
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  &:first-child {
+    >span:first-child {
+      >font {
+        font-size: var(--epx-font-size-l);
+        color: var(--epx-text);
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.card-item__footer {
+  width: 100%;
+  margin-top: 8px;
+}
+.card-item__footer--rt {
+  position: absolute;
+  right: 12px;
+  top: 0px;
+  width: auto;
+}
+.card-item__operates--hover {
+    opacity: 0;
+    pointer-events: none;
+}
+.card-item__container:hover {
+  .card-item__operates--hover{
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+.card-item__operates--text {
+  width: 100%;
+  display: flex;
+  .column-operate-btn {
+    @include font_color_primary;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    flex: 1;
+    border-right: 1px solid var(--epx-border);
+    text-align: center;
+    &:last-child {
+      border: 0;
+    }
+  }
+}
+.card-item__operates--button {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  .column-operate-btn  {
+    margin: 4px 0;
+    margin-left: 10px;
+  }
+}
+.card-item--horizontal {
+  .card-item__operates--text {
+    .column-operate-btn {
+      padding: 0 10px;
+      color: var(--epx-text);
+    }
+  }
+}
+.null-data {
+  min-height:300px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  >i {
+    font-size: 120px;
+  }
+  >span {
+    display:block;
+    font-size: var(--epx-font-size-l);
+    color: var(--epx-text);
+  }
+}
+.table {
+
+    :deep(.hover-row) {
+      .tree-list-sort {
+        display: inline-block;
+      }
+    }
+    :deep(.is-right) {
+      .cell {
+        justify-content: flex-end;
+      }
+    }
+    :deep(.is-center) {
+      .cell {
+        justify-content: center;
+      }
+    }
+
+}
+.table-cell {
+
+}
+.table-cell--detail {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tree-list-sort {
+  display: none;
+  >span {
+    @include font_color_primary;
+  }
+}
+
+</style>
+
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  height: 100%;
+}
+.category-container {
+  max-height: 100%;
+  overflow: auto;
+  margin-right: 10px;
+  position: relative;
+  flex-shrink: 0;
+  &.fold {
+    width: 20px;
+    .category {
+      width: 0;
+    }
+     .fold-btn {
+      right: 0;
+    }
+  }
+}
+.fold-btn {
+  position: absolute;
+  right: 8px;
+  top: 10px;
+  width: 20px;
+  height: 30px;
+  font-size: 18px;
+  line-height: 30px;
+  text-align: center;
+  color: var(--epx-text-secondary);
+  cursor: pointer;
+}
+.category {
+  width: 304px;
+  overflow: hidden;
+  transition: all .3s ;
+}
+.category-inner {
+  width: 280px;
+  padding: 12px;
+  background: var(--epx-bg-card);
+}
+.category-title {
+  font-size: var(--epx-font-size-l);
+  margin-bottom: 12px;
+  font-weight: 600;
+}
+.category-search__container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+
+}
+.operate-icon {
+  font-size: var(--epx-font-size-l);
+  margin-right: 4px;
+  cursor: pointer;
+}
+
+.tree {
+
+    :deep(.el-tree-node.is-current) {
+      >.el-tree-node__content {
+        background: var(--epx-bg);
+      }
+    }
+    :deep(.el-tree-node__content) {
+      height: 32px;
+    }
+
+}
+.tree-node {
+  flex: 1;
+  overflow: hidden;
+  line-height: 32px;
+  display: flex;
+  align-items: center;
+  &:hover {
+    .node-operate-icon {
+      display: inline
+    }
+  }
+}
+.tree-node__name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tree-node-operate {
+  float: right;
+  margin-right: 6px;
+}
+.node-operate-icon {
+  color: var(--epx-text-secondary);
+  display: none;
+}
+.tree-node >i{
+  @include font_color_primary;
+  margin-right: 8px;
+  font-size: var(--epx-font-size-l);
+}
+.category-list__title {
+  background: var(--epx-bg-card);
+  height: 48px;
+  line-height: 48px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--epx-border);
+  >span {
+    padding: 0 10px;
+    border-left: 4px solid;
+    @include border_color_primary;
+    font-size: var(--epx-font-size-l);
+    color: var(--epx-text);
+    line-height: 1;
+  }
+}
+.category-list__name {
+  cursor: pointer;
+  &:hover {
+    @include font_color_primary;
+  }
+}
+.edit-table-form__item {
+
+    &.table-form-item {
+      display: inline-block;
+      margin: -10px 0;
+    }
+
+}
+</style>
+
+<style scoped lang="scss">
+.field-setting {
+  display: flex;
+  width: 100%;
+  height: 660px;
+  box-sizing: border-box;
+  padding: 20px 10px 0;
+}
+.field-setting-item {
+  width: 360px;
+  display: flex;
+  flex-direction: column;
+  margin: 0 10px;
+  border: 1px solid var(--epx-border);
+  &:last-child {
+    width: 400px
+  }
+}
+
+.field-setting__header1 {
+  padding: 12px 20px;
+  line-height: 1;
+  border-bottom: 1px solid var(--epx-border);
+  span {
+    position: relative;
+    font-size: var(--epx-font-size-l);
+    padding-left: 8px;
+    font-weight: 600;
+    color: var(--epx-text);
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 1px;
+      width: 4px;
+      height: 16px;
+      @include bg_color_primary;
+      border-radius: var(--epx-radius-s);
+    }
+  }
+}
+.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 var(--epx-border);
+}
+.field-setting__button {
+  overflow: hidden;
+  padding: 10px 20px;
+  text-align: right;
+}
+.field-setting__filter {
+  margin: 10px 20px;
+  width: calc(100% - 40px);
+}
+.no-select-field {
+  text-align: center;
+  color: var(--epx-text-secondary);
+  margin-top:50%;
+}
+.setting-fields-container {
+  display: flex;
+  height: 400px;
+}
+.setting-fields__select {
+  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-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;
+}
+.add-form-item {
+  display: flex;
+  margin: 20px 10px;
+  &:last-child {
+    margin-bottom: -10px;
+  }
+  label {
+    width: 90px;
+  }
+}
+</style>