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

package/src/visual/config/OrderField.vue

@@ -0,0 +1,587 @@
+<template>
+<div class="field">
+    <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 class="field-order" @click="orderField(field, index)">
+            <i :class="['el-icon-sort-down', { active: field.sort === 'desc' }]"></i>
+            <i :class="['el-icon-sort-up', { active: field.sort !== 'desc' }]"></i>
+             {{ fieldLabel(field) }}
+            <i class="el-icon-close" @click.stop="deleteField(index)"></i>
+          </span>
+        </li>
+      </transition-group>
+    </draggable>
+    <el-button class="add-field-btn" size="small" type="primary" @click="openAddFieldDialog">+ 添加字段</el-button>
+  <epx-visual-config-lazy-dialog
+    title="添加字段"
+    class="show-field-dialog"
+    v-model="showFieldDialog"
+    :append-to-body="true"
+    destroy-on-close
+    width="800px"
+    top="10vh"
+  >
+   <div class="field-setting">
+     <div class="field-setting-item">
+      <p class="field-setting__header">
+        <span>选择字段</span>
+      </p>
+      <div class="field-setting__content">
+         <el-input class="field-setting__filter" suffix-icon="el-icon-search" size="default" v-model="filterText"></el-input>
+        <el-tree
+          ref="tree"
+          class="field-tree"
+          show-checkbox
+          node-key="field"
+          :default-expanded-keys="defaultExpandKeys"
+          :data="showFieldStore"
+          :auto-expand-parent="false"
+          :props="treeProps"
+          :check-strictly="true"
+          :filter-node-method="filterNode"
+          @check-change="checkFieldChange"
+        >
+          <template v-slot="{ node, data }"><span  :style="data.isSub? {color: 'red'}: {}">
+            {{node.label}}
+          </span></template>
+        </el-tree>
+        <div class="set-show-field">
+          显示字段：
+          <el-checkbox v-model="showLogField">日志字段</el-checkbox>
+          <el-checkbox v-if="showSubFlag" v-model="showSubField">子集字段</el-checkbox>
+        </div>
+      </div>
+     </div>
+     <div class="field-setting-item">
+       <p class="field-setting__header">
+        <span>已选字段</span>
+      </p>
+      <div class="field-setting__content">
+        <div 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" :class="['setting-fields__select--item']" :key="field.attriName || field">
+                <i class="el-icon-document"></i>
+                <el-tooltip :content="getFieldPath(field)" placement="top">
+                  <span>{{fieldLabel(field)}}</span>
+                </el-tooltip>
+                <i class="el-icon-delete fr" @click.stop="deleteSettingField(index)"></i>
+              </li>
+            </transition-group>
+          </draggable>
+        </div>
+    </div>
+     </div>
+   </div>
+   <div class="field-setting__button">
+     <el-button size="default" @click="showFieldDialog=false">取消</el-button>
+     <el-button size="default" type="primary" @click="saveSelectField">保存</el-button>
+   </div>
+  </epx-visual-config-lazy-dialog>
+</div>
+</template>
+
+<script>
+import { waitRef } from './wait-ref'
+import draggable from '@epxing/core/src/components/draggable'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'epx-visual-config-order-field',
+  components: {
+    draggable
+  },
+  props: {
+    showSubFlag: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: Array
+    },
+    defaultValue: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    treeFieldStore: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    metaId: String
+  },
+  data () {
+    return {
+      fieldList: [],
+      settingFieldList: [],
+      selectFieldList: [],
+      settingFieldWay: 'default',
+      showFieldDialog: false,
+      filterText: '',
+      treeProps: {
+        children: 'children',
+        label: 'text'
+      },
+      showLogField: false,
+      showSubField: true
+    }
+  },
+  watch: {
+    filterText (val) {
+      this.$refs.tree.filter(val)
+    },
+    // Vue3 起浅层 watcher 不响应 push/splice，而删字段、切升/降序走的正是 splice；
+    // 不加 deep 就是「改了排序配置却不回写 configs」。deep:1 对齐 Vue2 的浅层语义。
+    fieldList: {
+      deep: 1,
+      handler (v) {
+        this.$emit('change-configs', v)
+      }
+    },
+    settingFieldWay (v) {
+      if (v === 'custom') {
+        this.$emit('change-configs', this.fieldList)
+      } else {
+        this.$emit('change-configs', null)
+      }
+    },
+    metaId: {
+      handler (v) {
+        this.getFieldStore()
+      },
+      immediate: true
+    },
+    value (v) {
+      if (!this.$_.isEqual(v, this.fieldList)) {
+        this.fieldList = v
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getMetaViewFields'
+    ]),
+    fieldStore () {
+      if (this.treeFieldStore && this.treeFieldStore.length > 0 && (!this.metaId || this.treeFieldStore[0].id === this.metaId)) {
+        return this.treeFieldStore
+      } else {
+        return this.getMetaViewFields(this.metaId) || []
+      }
+    },
+    showFieldStore () {
+      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(this.fieldStore)
+      return formatField(copyFieldStore)
+    },
+    fieldLabel () {
+      return field => {
+        if (!field) return null
+        let attriName = null
+        let attriLabel = null
+        if (typeof field === 'string') {
+          attriName = field
+        } else {
+          attriName = field.attriName
+          if (field.attriLabel) attriLabel = field.attriLabel
+        }
+        if (attriLabel) return attriLabel
+        const getLabel = (arr) => {
+          for (const item of arr) {
+            if (item.field === attriName) return item.text
+            if (item.children) {
+              const label = getLabel(item.children)
+              if (label) return label
+            }
+          }
+        }
+        return getLabel(this.fieldStore) || attriName
+      }
+    },
+    defaultExpandKeys () {
+      return this.fieldStore[0] ? [this.fieldStore[0].field] : []
+    }
+  },
+  methods: {
+    filterNode (value, data) {
+      if (!value) return true
+      return data.text && data.text.indexOf(value) !== -1
+    },
+    getFieldStore () {
+      if (!this.metaId) return
+      if (!this.getMetaViewFields(this.metaId)) {
+        this.$store.dispatch({
+          type: 'ADD_META_RELATION_FIELDS',
+          id: this.metaId
+        })
+      }
+    },
+    getFieldPath (field) {
+      if (!field) return null
+      let attriName = null
+      if (typeof field === 'string') {
+        attriName = field
+      } else {
+        attriName = field.attriName
+      }
+      const getPath = (arr, path) => {
+        for (const item of arr) {
+          if (item.field === attriName) {
+            return path ? path + '/' + item.text : item.text
+          } else if (item.children) {
+            const childPath = getPath(item.children, path ? path + '/' + item.text : item.text)
+            if (childPath) return childPath
+          }
+        }
+      }
+      return getPath(this.fieldStore)
+    },
+    deleteField (index) {
+      this.fieldList.splice(index, 1)
+    },
+    deleteSettingField (index) {
+      const field = this.settingFieldList[index]
+      this.settingFieldList.splice(index, 1)
+      this.selectFieldList.splice(index, 1)
+      if (field) {
+        this.$refs.tree.setChecked(field.attriName || field, false)
+      }
+    },
+    openAddFieldDialog (key) {
+      this.selectFieldList = this.fieldList.map(item => (item.attriName || item).replace(/\|/g, '.'))
+      this.settingFieldList = this.$_.cloneDeep(this.fieldList)
+      this.showFieldDialog = true
+      // 弹窗与树都是打开时才渲染，等 ref 挂上再设勾选
+      waitRef(this, 'tree', 'setCheckedKeys').then(tree => {
+        if (tree) 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)
+            this.settingFieldList.push(data.field)
+          }
+          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.settingFieldList.splice(fieldIndex, 1)
+            this.selectFieldList.splice(index, 1)
+          }
+          if (parent && parent.isMain) this.$refs.tree.setChecked(parent.field, false)
+        }
+      }
+    },
+    orderField (field, index) {
+      let currentField = field
+      if (typeof currentField === 'string') {
+        currentField = { attriName: currentField }
+      }
+      this.fieldList.splice(index, 1, { ...currentField, sort: currentField.sort === 'desc' ? 'asc' : 'desc' })
+    },
+    selectAllField (value, index) {
+      const fieldList = this.fieldStore[index].children || []
+      if (value) {
+        // 添加字段
+        const fieldCodeList = fieldList.map(item => item.code)
+        this.selectFieldList = [...new Set([...this.selectFieldList, ...fieldCodeList])]
+      } else {
+        // 删除当前列所有字段
+        fieldList.forEach(item => {
+          const selectIndex = this.selectFieldList.findIndex(selectItem => selectItem === item.code)
+          if (selectIndex !== -1) {
+            delete this.selectFieldList[selectIndex]
+          }
+        })
+      }
+    },
+    saveSelectField () {
+      // 将已选择的字段修改到configs
+      this.fieldList = [...this.settingFieldList]
+      this.showFieldDialog = false
+    },
+    swicthFieldStoreFold (index) {
+      const item = this.fieldStore[index]
+      this.fieldStore[index] = { ...item, isUnFold: !item.isUnFold }
+    }
+  },
+  created () {
+    if (!this.showSubFlag) {
+      this.showSubField = false
+    }
+    if (this.value) {
+      this.fieldList = [...this.value]
+      this.settingFieldWay = 'custom'
+    } else {
+      this.fieldList = [...this.defaultValue]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.field {
+
+    :deep(.el-dialog__body) {
+      padding-top: 0;
+      padding-bottom: 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;
+  i {
+    cursor: pointer;
+  }
+}
+
+.field-order {
+  i {
+    font-size: var(--epx-font-size-l);
+    margin: 0 -5px;
+  }
+  .active {
+    @include font_color_primary;
+  }
+}
+.tree-field-checkbox-group {
+  font-size: var(--epx-font-size-base);
+}
+.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;
+}
+.setting-fields-container {
+  display: flex;
+  height: 400px;
+}
+.setting-fields__select {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+  .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;
+      }
+    }
+
+}
+.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)
+  }
+}
+// 字段设置
+.field-setting {
+  display: flex;
+  width: 100%;
+  // 原来靠 .show-field-dialog :deep(.el-dialog){height:80%} 逐层撑下来；Element Plus 里 class 直接落在
+  // .el-dialog 自身、后代选择器匹配不到，整条链塌成 auto、弹窗随内容长到几千像素。改为按视口直接定高：
+  // 80vh 减去 el-dialog 内边距 / 标题 / body 内边距 / 底部按钮共 145px
+  height: calc(80vh - 145px);
+  box-sizing: border-box;
+  padding: 20px 10px 0;
+}
+.field-setting-item {
+  width: 360px;
+  display: flex;
+  flex-direction: column;
+  margin: 0 10px;
+  border: 1px solid #e3e3e3;
+  &:last-child {
+    width: 400px
+  }
+}
+
+.field-setting__header {
+  padding: 12px 20px;
+  line-height: 1;
+  border-bottom: 1px solid #e3e3e3;
+  span {
+    position: relative;
+    font-size: var(--epx-font-size-l);
+    padding-left: 8px;
+    font-weight: 600;
+    color: #333;
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 3px;
+      width: 4px;
+      height: 16px;
+      @include bg_color_primary;
+      border-radius: var(--epx-radius-s);
+    }
+  }
+}
+.field-setting__filter {
+  margin: 10px 20px;
+  width: calc(100% - 40px);
+}
+.field-setting__content {
+  flex:1;
+  width: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.field-tree {
+  flex: 1;
+  overflow: auto;
+
+    :deep(.el-tree-node__content) {
+      height: 48px;
+    }
+
+}
+.set-show-field {
+  padding: 8px 12px;
+  border-top: 1px solid #e3e3e3;
+}
+.field-setting__button {
+  overflow: hidden;
+  padding: 10px 20px;
+  text-align: right;
+}
+.no-select-field {
+  text-align: center;
+  color: #999;
+  margin-top: 50%;
+}
+.show-field-dialog {
+
+    :deep(.el-dialog) {
+      height: 80%;
+    }
+    :deep(.el-dialog__body) {
+      height: calc(100% - 70px);
+    }
+
+}
+</style>

package/src/visual/config/Page.vue

@@ -0,0 +1,45 @@
+<template>
+<div>
+  <el-radio-group v-model="pageWay">
+    <el-radio label="component" value="component">指定页面模板</el-radio>
+    <el-radio label="page" value="page">指定页面</el-radio>
+  </el-radio-group>
+  <epx-object v-show="pageWay==='component'" v-model="selectOperate.component" :fieldConfigs="{ state: 'ADD', attriLabel: '页面模板', codeKey: 'FM_PAGE' ,scopeParams: [{lb: '(', field: 'SYSTEM', values: this.SYSTEM, link: 'or' }, { field: 'LEVEL', values: '01', rb: ')' }],}"></epx-object>
+  <epx-object v-show="pageWay==='page'" v-model="selectOperate.pageId" :fieldConfigs="{ state: 'ADD', attriLabel: '页面', codeKey: 'FM_PAGE_CONFIG', scopeParams: [{ field: 'SYSTEM', values: this.SYSTEM }], }"></epx-object>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'epx-visual-config-item-page',
+  props: {
+    value: String,
+    defaultValue: String,
+    change: Function
+  },
+  data () {
+    return {
+      pageWay: ''
+    }
+  },
+  methods: {
+    changeValue (v) {
+      if (v !== this.defaultValue) {
+        this.$emit('change-configs', v === this.defaultValue ? null : v)
+        if (this.change) this.change(v)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.input {
+
+    :deep(.el-input),
+    :deep(.el-input-number) {
+      width: 200px;
+    }
+
+}
+</style>