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

package/src/page-designer/previews/entity-sub-list/Preview.vue

@@ -0,0 +1,283 @@
+<template>
+  <div :style="style" :class="{'is-fold': isFold}">
+    <p :class="['epx-add-form-item__header', `epx-add-form-item__header--${$configs.formTitleStyle}`]">
+      <span class="epx-add-form-item__title">{{$configs.componentName || widget.title}}</span>
+      <span class="epx-add-form-item__title-operate fr">
+        <span v-if="$configs.componentType!=='READONLY' && $configs.editable" class="epx-add-form-item__title-edit">
+          <i class="el-icon-edit-outline"></i>
+          {{$t('edit')}}
+        </span>
+        <i :class="['epx-add-form-item__title-foldicon', 'el-icon-caret-top']" @click="isFold = !isFold"></i>
+      </span>
+    </p>
+    <div class="list-content">
+      <p class="epx-add-form-item__note" v-if="$configs.note">
+        <i class="el-icon-info"></i>
+        <span class="epx-add-form-item__note-html">
+          <span v-html="$configs.note"></span>
+          <el-button v-if="$configs.help" size="small" type="primary" link class="epx-add-form-item__help">了解更多</el-button>
+        </span>
+      </p>
+      <template v-if="loadSearch && $configs.searchFlag">
+        <epx-search-fields v-if="searchMode ==='field'" :fields="$configs.searchFields" :filterFields="$configs.filterFields" :keywords="$configs.keywords"></epx-search-fields>
+        <epx-search-filter v-if="searchMode ==='filter'" :fields="$configs.searchFields" :filterFields="$configs.filterFields" :keywords="$configs.keywords" />
+      </template>
+      <div class="list-operates" >
+        <div>
+          <div class="button-group" v-if="operateFlag && checkRightOperates.length> 0">
+            <el-button v-bind="{ [operate.type]: true }" v-for="operate in operates" :key="operate.text" size="default"   :type="operate.type === 'text' ? 'text' : operate.ui">
+              <i v-if="operate.icon" :class="['operate-icon', operate.icon]"></i>
+              {{operate.text}}
+            </el-button>
+                <el-dropdown class="more-table-operates" trigger="click" v-if="moreOperates.length>0">
+                  <el-button size="default">
+                    <i class="el-icon-more"></i>
+                  </el-button>
+                  <template v-slot:dropdown><el-dropdown-menu>
+                    <el-dropdown-item v-for="operate in moreOperates" :key="operate.text">{{operate.text}}</el-dropdown-item>
+                  </el-dropdown-menu></template>
+                </el-dropdown>
+          </div>
+        </div>
+        <div class="search-simple fr" v-if="searchFlag && (!searchMode || searchMode ==='keyword')">
+          <epx-search-keyword :keywords="$configs.keywords"></epx-search-keyword>
+        </div>
+        <span v-else-if="totalFlag">{{this.$t('A total of 0 pieces of data')}}</span>
+      </div>
+      <div class="list">
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          :default-sort = "{prop: 'date', order: 'descending'}"
+          >
+          <template v-for="item in listFields" :key="item.attriName">
+            <el-table-column
+              v-if="item.state!=='HIDDEN'"
+
+              :prop="item.attriName"
+              :label="item.attriLabel"
+              sortable
+            >
+            </el-table-column>
+          </template>
+        </el-table>
+        <el-pagination
+          class="pagination"
+          v-if="pageFlag"
+          :default-current-page="1"
+          :pageSizes="[5, 10, 15, 20, 30, 50, 100, 200]"
+          :default-page-size="pageSize"
+          layout="prev, pager, next, jumper, sizes,total"
+          :total="0"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-entity-sub-list--preview',
+  mixins: [previewMixin],
+  computed: {
+    currentMetaId () {
+      const { metaId = this.designer.page.metaId } = this.$configs
+      return this.componentMetaId || metaId
+    },
+    operateFlag () {
+      const { operateFlag = true } = this.$configs
+      return operateFlag
+    },
+    searchFlag () {
+      const { searchFlag = true } = this.$configs
+      return searchFlag
+    },
+    totalFlag () {
+      const { totalFlag = true } = this.$configs
+      return totalFlag
+    },
+    searchMode () {
+      const { searchMode = 'keyword' } = this.$configs
+      return searchMode
+    },
+    pageFlag () {
+      const { pageFlag = true } = this.$configs
+      return pageFlag
+    },
+    pageSize () {
+      const { pageSize = 20 } = this.$configs
+      return pageSize
+    },
+    buttonUi () {
+      return ui => (ui === 'blue' || ui === 'soft-blue') ? 'primary' : ui
+    },
+    checkRightOperates () {
+      let { operates } = this.$configs
+      if (!operates) {
+        operates = [
+          {
+            text: this.$t('add'),
+            ui: 'primary'
+          },
+          {
+            text: this.$t('delete')
+          },
+          {
+            text: this.$t('import')
+          },
+          {
+            text: this.$t('export')
+          }
+        ]
+      }
+      return operates
+    },
+    operates () {
+      let { operateEllipsis } = this.$configs
+      if (operateEllipsis == null) operateEllipsis = 2
+      let showOperateLength = 0
+      if (operateEllipsis === false) return this.checkRightOperates
+      if (operateEllipsis !== true) {
+        showOperateLength = operateEllipsis
+      }
+      const cOperates = [...this.checkRightOperates]
+      if (cOperates.length > showOperateLength) {
+        cOperates.length = showOperateLength
+      }
+      return cOperates
+    },
+    moreOperates () {
+      let { operateEllipsis } = this.$configs
+      if (operateEllipsis == null) operateEllipsis = 2
+      let showOperateLength = 0
+      if (operateEllipsis === false) return []
+      if (operateEllipsis !== true) {
+        showOperateLength = operateEllipsis
+      }
+      const cOperates = [...this.checkRightOperates]
+      if (cOperates.length > showOperateLength) {
+        cOperates.splice(0, showOperateLength)
+        return cOperates
+      }
+      return []
+    }
+  },
+  data () {
+    return {
+      isFold: false,
+      loadSearch: true,
+      tableData: [],
+      listFields: [],
+      componentMetaId: null
+    }
+  },
+  watch: {
+    '$configs.keywords' (v) {
+      this.loadSearch = false
+      this.$nextTick(() => {
+        this.loadSearch = true
+      })
+    },
+    '$configs.searchFields' (v) {
+      this.loadSearch = false
+      this.$nextTick(() => {
+        this.loadSearch = true
+      })
+    },
+    '$configs.filterFields' (v) {
+      this.loadSearch = false
+      this.$nextTick(() => {
+        this.loadSearch = true
+      })
+    },
+    '$configs.listFields': {
+      handler (v) {
+        this.getFields()
+      },
+      immediate: true
+    },
+    '$configs.relationId': {
+      handler (v) {
+        this.getFields()
+      }
+    },
+    pageRelationList: {
+      handler (v) {
+        this.getFields()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    formatter (row, column) {
+      return row.address
+    },
+
+    getFields () {
+      const { listFields, relationId } = this.$configs
+      if (this.pageRelationList) {
+        this.pageRelationList.forEach(entity => {
+          if (entity.value === relationId) {
+            this.componentMetaId = entity.entityA
+          } else if (entity.children && entity.children.length > 0) {
+            entity.children.forEach(item => {
+              if (item.value === relationId) {
+                this.componentMetaId = item.entityA
+              }
+            })
+          }
+        })
+      }
+      this.$FieldFactory.createFields({
+        fields: listFields,
+        metaId: this.currentMetaId
+      })
+        .then(data => {
+          this.listFields = [...data]
+        })
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.list-operates {
+  background: var(--epx-bg-card);
+  padding: 16px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.more-table-operates {
+  margin-left: 10px
+}
+.list {
+  background: var(--epx-bg-card);
+}
+.operate-icon {
+  margin-right: 4px;
+}
+.pagination {
+  background: var(--epx-bg-card);
+  padding: 16px 0;
+
+    :deep(.el-select) {
+      margin-left: 24px;
+    }
+    :deep(.el-pagination__total) {
+      float: right;
+    }
+
+}
+.is-fold {
+    .epx-add-form-item__title-foldicon {
+      transform: rotate(180deg);
+    }
+    .list-content {
+      padding: 0 10px;
+      height: 0;
+      overflow: hidden;
+    }
+  }
+</style>

package/src/page-designer/previews/entity-virtual-list/Preview.vue

@@ -0,0 +1,14 @@
+<script>
+// 设计态预览：与 entity-list 完全一样的静态示意（虚拟滚动只影响运行时渲染方式，设计态看不出区别）。
+// ⚠️ Vue3 的 extends 不继承 scoped 样式的 __scopeId（实证见 reference_extends_scoped_scopeid），
+// EntityListPreview 是 <style scoped>，这里手动把 __scopeId 接过来，否则预览一片素。
+import EntityListPreview from '../entity-list/Preview.vue'
+
+const Preview = {
+  name: 'epx-entity-virtual-list--preview',
+  extends: EntityListPreview
+}
+Preview.__scopeId = EntityListPreview.__scopeId
+
+export default Preview
+</script>

package/src/page-designer/previews/form-field/preview/Checkbox.vue

@@ -0,0 +1,57 @@
+<template>
+<div class="epx-form-field" :class="[`epx-form-field--label-${$configs.labelAlign || 'left'}` ]">
+    <label v-if="showLabel" :class="['epx-form-field__label', `epx-form-field__label--${$configs.labelAlign || 'left'}`]" :style="labelStyle">
+      {{$configs.label}}
+      <el-tooltip  v-if="$configs.notes" class="epx-form-field__tip" effect="dark" :content="$configs.notes" placement="top">
+        <i class="el-icon-warning-outline" :style="$configs.noteTipIconColor? { color: $configs.noteTipIconColor }: {}"></i>
+      </el-tooltip>
+      ：
+    </label>
+    <div class="epx-form-field__content">
+      <el-checkbox-group>
+        <el-checkbox label="复选框 A" value="复选框 A"></el-checkbox>
+        <el-checkbox label="复选框 B" value="复选框 B"></el-checkbox>
+        <el-checkbox label="复选框 C" value="复选框 C"></el-checkbox>
+      </el-checkbox-group>
+    </div>
+</div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-form-checkbox-field--preview',
+  mixins: [previewMixin],
+  computed: {
+    showLabel () {
+      return this.$configs.showLabel !== false && this.$configs.label
+    },
+    labelAlign () {
+      return this.$configs.labelAlign || 'left'
+    },
+    labelStyle () {
+      const { labelStyle: style = {}, labelColor, labelFontSize, labelWidthType, labelWidth } = this.$configs
+      let labelStyle = { ...style }
+      if (labelWidthType === 'auto') {
+        labelStyle = { width: 'auto' }
+      } else if (labelWidth) {
+        labelStyle = { width: labelWidth + 'px', ...labelStyle }
+      }
+      if (labelColor) {
+        labelStyle = { color: labelColor, ...labelStyle }
+      }
+      if (labelFontSize) {
+        labelStyle = { fontSize: labelFontSize + 'px', ...labelStyle }
+      }
+      return { ...labelStyle }
+    },
+    placeholder () {
+      return this.$configs.placeholder || `请选择${this.$configs.label}`
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/page-designer/previews/form-field/preview/Date.vue

@@ -0,0 +1,56 @@
+<template>
+<div class="epx-form-field" :class="[`epx-form-field--label-${$configs.labelAlign || 'left'}` ]">
+    <label v-if="showLabel" :class="['epx-form-field__label', `epx-form-field__label--${$configs.labelAlign || 'left'}`]" :style="labelStyle">
+      {{$configs.label}}
+      <el-tooltip  v-if="$configs.notes" class="epx-form-field__tip" effect="dark" :content="$configs.notes" placement="top">
+        <i class="el-icon-warning-outline" :style="$configs.noteTipIconColor? { color: $configs.noteTipIconColor }: {}"></i>
+      </el-tooltip>
+      ：
+    </label>
+    <div class="epx-form-field__content">
+       <el-date-picker
+        type="date"
+        :placeholder="placeholder">
+      </el-date-picker>
+    </div>
+</div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-form-date-field--preview',
+  mixins: [previewMixin],
+  computed: {
+    showLabel () {
+      return this.$configs.showLabel !== false && this.$configs.label
+    },
+    labelAlign () {
+      return this.$configs.labelAlign || 'left'
+    },
+    labelStyle () {
+      const { labelStyle: style = {}, labelColor, labelFontSize, labelWidthType, labelWidth } = this.$configs
+      let labelStyle = { ...style }
+      if (labelWidthType === 'auto') {
+        labelStyle = { width: 'auto' }
+      } else if (labelWidth) {
+        labelStyle = { width: labelWidth + 'px', ...labelStyle }
+      }
+      if (labelColor) {
+        labelStyle = { color: labelColor, ...labelStyle }
+      }
+      if (labelFontSize) {
+        labelStyle = { fontSize: labelFontSize + 'px', ...labelStyle }
+      }
+      return { ...labelStyle }
+    },
+    placeholder () {
+      return this.$configs.placeholder || `请选择${this.$configs.label || ''}`
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/page-designer/previews/form-field/preview/Input.vue

@@ -0,0 +1,53 @@
+<template>
+<div class="epx-form-field" :class="[`epx-form-field--label-${$configs.labelAlign || 'left'}` ]">
+    <label v-if="showLabel" :class="['epx-form-field__label', `epx-form-field__label--${$configs.labelAlign || 'left'}`]" :style="labelStyle">
+      {{$configs.label}}
+      <el-tooltip  v-if="$configs.notes" class="epx-form-field__tip" effect="dark" :content="$configs.notes" placement="top">
+        <i class="el-icon-warning-outline" :style="$configs.noteTipIconColor? { color: $configs.noteTipIconColor }: {}"></i>
+      </el-tooltip>
+      ：
+    </label>
+    <div class="epx-form-field__content">
+      <el-input :placeholder="placeholder"></el-input>
+    </div>
+</div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-form-input-field--preview',
+  mixins: [previewMixin],
+  computed: {
+    showLabel () {
+      return this.$configs.showLabel !== false && this.$configs.label
+    },
+    labelAlign () {
+      return this.$configs.labelAlign || 'left'
+    },
+    labelStyle () {
+      const { labelStyle: style = {}, labelColor, labelFontSize, labelWidthType, labelWidth } = this.$configs
+      let labelStyle = { ...style }
+      if (labelWidthType === 'auto') {
+        labelStyle = { width: 'auto' }
+      } else if (labelWidth) {
+        labelStyle = { width: labelWidth + 'px', ...labelStyle }
+      }
+      if (labelColor) {
+        labelStyle = { color: labelColor, ...labelStyle }
+      }
+      if (labelFontSize) {
+        labelStyle = { fontSize: labelFontSize + 'px', ...labelStyle }
+      }
+      return { ...labelStyle }
+    },
+    placeholder () {
+      return this.$configs.placeholder || `请输入${this.$configs.label || ''}`
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/page-designer/previews/form-field/preview/InputNumber.vue

@@ -0,0 +1,53 @@
+<template>
+<div class="epx-form-field" :class="[`epx-form-field--label-${$configs.labelAlign || 'left'}` ]">
+    <label v-if="showLabel" :class="['epx-form-field__label', `epx-form-field__label--${$configs.labelAlign || 'left'}`]" :style="labelStyle">
+      {{$configs.label}}
+      <el-tooltip  v-if="$configs.notes" class="epx-form-field__tip" effect="dark" :content="$configs.notes" placement="top">
+        <i class="el-icon-warning-outline" :style="$configs.noteTipIconColor? { color: $configs.noteTipIconColor }: {}"></i>
+      </el-tooltip>
+      ：
+    </label>
+    <div class="epx-form-field__content">
+      <el-input-number :placeholder="placeholder"></el-input-number>
+    </div>
+</div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-form-input-number-field--preview',
+  mixins: [previewMixin],
+  computed: {
+    showLabel () {
+      return this.$configs.showLabel !== false && this.$configs.label
+    },
+    labelAlign () {
+      return this.$configs.labelAlign || 'left'
+    },
+    labelStyle () {
+      const { labelStyle: style = {}, labelColor, labelFontSize, labelWidthType, labelWidth } = this.$configs
+      let labelStyle = { ...style }
+      if (labelWidthType === 'auto') {
+        labelStyle = { width: 'auto' }
+      } else if (labelWidth) {
+        labelStyle = { width: labelWidth + 'px', ...labelStyle }
+      }
+      if (labelColor) {
+        labelStyle = { color: labelColor, ...labelStyle }
+      }
+      if (labelFontSize) {
+        labelStyle = { fontSize: labelFontSize + 'px', ...labelStyle }
+      }
+      return { ...labelStyle }
+    },
+    placeholder () {
+      return this.$configs.placeholder || `请输入${this.$configs.label || ''}`
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/page-designer/previews/form-field/preview/Object.vue

@@ -0,0 +1,53 @@
+<template>
+<div class="epx-form-field" :class="[`epx-form-field--label-${$configs.labelAlign || 'left'}` ]">
+    <label v-if="showLabel" :class="['epx-form-field__label', `epx-form-field__label--${$configs.labelAlign || 'left'}`]" :style="labelStyle">
+      {{$configs.label}}
+      <el-tooltip  v-if="$configs.notes" class="epx-form-field__tip" effect="dark" :content="$configs.notes" placement="top">
+        <i class="el-icon-warning-outline" :style="$configs.noteTipIconColor? { color: $configs.noteTipIconColor }: {}"></i>
+      </el-tooltip>
+      ：
+    </label>
+    <div class="epx-form-field__content">
+      <el-input :placeholder="placeholder" suffix-icon="el-icon-search"></el-input>
+    </div>
+</div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-form-object-field--preview',
+  mixins: [previewMixin],
+  computed: {
+    showLabel () {
+      return this.$configs.showLabel !== false && this.$configs.label
+    },
+    labelAlign () {
+      return this.$configs.labelAlign || 'left'
+    },
+    labelStyle () {
+      const { labelStyle: style = {}, labelColor, labelFontSize, labelWidthType, labelWidth } = this.$configs
+      let labelStyle = { ...style }
+      if (labelWidthType === 'auto') {
+        labelStyle = { width: 'auto' }
+      } else if (labelWidth) {
+        labelStyle = { width: labelWidth + 'px', ...labelStyle }
+      }
+      if (labelColor) {
+        labelStyle = { color: labelColor, ...labelStyle }
+      }
+      if (labelFontSize) {
+        labelStyle = { fontSize: labelFontSize + 'px', ...labelStyle }
+      }
+      return { ...labelStyle }
+    },
+    placeholder () {
+      return this.$configs.placeholder || `请选择${this.$configs.label || ''}`
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/page-designer/previews/form-field/preview/Radio.vue

@@ -0,0 +1,69 @@
+<template>
+<div class="epx-form-field" :class="[`epx-form-field--label-${$configs.labelAlign || 'left'}` ]">
+    <label v-if="showLabel" :class="['epx-form-field__label', `epx-form-field__label--${$configs.labelAlign || 'left'}`]" :style="labelStyle">
+      {{$configs.label}}
+      <el-tooltip  v-if="$configs.notes" class="epx-form-field__tip" effect="dark" :content="$configs.notes" placement="top">
+        <i class="el-icon-warning-outline" :style="$configs.noteTipIconColor? { color: $configs.noteTipIconColor }: {}"></i>
+      </el-tooltip>
+      ：
+    </label>
+    <div class="epx-form-field__content">
+      <el-radio-group v-model="radio" :size="$configs.size">
+        <template v-if="$configs.radioType==='button'">
+          <el-radio-button :label="3" :value="3">备选项</el-radio-button>
+          <el-radio-button :label="6" :value="6">备选项</el-radio-button>
+          <el-radio-button :label="9" :value="9">备选项</el-radio-button>
+        </template>
+        <template v-else>
+          <el-radio :label="3" :value="3">备选项</el-radio>
+          <el-radio :label="6" :value="6">备选项</el-radio>
+          <el-radio :label="9" :value="9">备选项</el-radio>
+        </template>
+      </el-radio-group>
+    </div>
+</div>
+</template>
+
+<script>
+import previewMixin from '@epxing/designer/src/page-designer/widget-preview/Mixin'
+export default {
+  name: 'epx-form-radio-field--preview',
+  mixins: [previewMixin],
+  data () {
+    return {
+      radio: ''
+    }
+  },
+  computed: {
+    showLabel () {
+      return this.$configs.showLabel !== false && this.$configs.label
+    },
+    labelAlign () {
+      return this.$configs.labelAlign || 'left'
+    },
+    labelStyle () {
+      const { labelStyle: style = {}, labelColor, labelFontSize, labelWidthType, labelWidth } = this.$configs
+      let labelStyle = { ...style }
+      if (labelWidthType === 'auto') {
+        labelStyle = { width: 'auto' }
+      } else if (labelWidth) {
+        labelStyle = { width: labelWidth + 'px', ...labelStyle }
+      }
+      if (labelColor) {
+        labelStyle = { color: labelColor, ...labelStyle }
+      }
+      if (labelFontSize) {
+        labelStyle = { fontSize: labelFontSize + 'px', ...labelStyle }
+      }
+      return { ...labelStyle }
+    },
+    placeholder () {
+      return this.$configs.placeholder || `请选择${this.$configs.label}`
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>