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

package/src/visual/config/Background.vue

@@ -0,0 +1,398 @@
+<template>
+  <div class="container">
+    <div class="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for=""
+        >背景色样式</label
+      >
+      <div class="epx-page-designer-setting-style__upload">
+        <el-radio-group
+          v-model="backgroundStyle"
+          size="default"
+          @change="
+            style['backgroundImage'] = '';
+            style['backgroundColor'] = '';
+          "
+        >
+          <el-radio label="color" value="color">纯色</el-radio>
+          <el-radio label="gradient" value="gradient">渐变色</el-radio>
+        </el-radio-group>
+      </div>
+    </div>
+    <template v-if="backgroundStyle === 'gradient'">
+      <div class="epx-page-designer-setting-style__subitem">
+        <label class="epx-page-designer-setting-style__label" for="">{{
+          $t("background color")
+        }}</label>
+        <epx-color-picker
+          v-model="style['backgroundImage']"
+          append-to-body
+        ></epx-color-picker>
+      </div>
+    </template>
+    <template v-else>
+      <div class="epx-page-designer-setting-style__subitem">
+        <label class="epx-page-designer-setting-style__label" for="">{{
+          $t("background color")
+        }}</label>
+        <el-color-picker
+          v-model="style['backgroundColor']"
+          show-alpha
+          :predefine="predefineColors">
+        </el-color-picker>
+      </div>
+      <div class="epx-page-designer-setting-style__subitem">
+        <label class="epx-page-designer-setting-style__label" for=""
+          >背景图片</label
+        >
+        <div class="epx-page-designer-setting-style__upload">
+          <el-input
+            class="input upload-input"
+            :model-value="style['backgroundImage']"
+            type="text"
+            size="default"
+            clearable
+            @clear="style['backgroundImage'] = ''"
+          >
+            <template v-slot:suffix><i
+              class="el-icon-upload"
+              @click="$refs.fileInput.click()"
+            ></i></template>
+          </el-input>
+          <input
+            :style="{ width: 0, height: 0 }"
+            ref="fileInput"
+            type="file"
+            @change="changeBgImage"
+          />
+        </div>
+      </div>
+      <div class="epx-page-designer-setting-style__subitem">
+        <label class="epx-page-designer-setting-style__label" for=""
+          >背景图位置</label
+        >
+        <div class="epx-page-designer-setting-style__background-position">
+          <div
+            v-for="item in backgroundPositionList"
+            :key="item.value"
+            @click="style['backgroundPosition'] = item.value"
+            :class="{ 'is-active': (style.backgroundPosition || defaultStyle.backgroundPosition) === item.value }"
+          >
+            <i class="el-icon-picture"></i>
+          </div>
+        </div>
+      </div>
+      <div class="epx-page-designer-setting-style__subitem">
+        <label class="epx-page-designer-setting-style__label" for=""
+          >背景图重复</label
+        >
+        <div class="epx-page-designer-setting-style__subcontent">
+          <el-radio-group
+            :model-value="style.backgroundRepeat || defaultStyle.backgroundRepeat"
+            @update:model-value="v=>(style['backgroundRepeat'] = v)"
+            size="medium"
+          >
+            <el-radio label="repeat" value="repeat">重复</el-radio>
+            <el-radio label="repeat-x" value="repeat-x">水平重复</el-radio>
+            <el-radio label="repeat-y" value="repeat-y">垂直重复</el-radio>
+            <el-radio label="no-repeat" value="no-repeat">不重复</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="epx-page-designer-setting-style__subitem">
+        <label class="epx-page-designer-setting-style__label" for=""
+          >背景图大小</label
+        >
+        <div class="epx-page-designer-setting-style__subcontent">
+          <el-radio-group
+            :model-value="backgroundSize"
+            @update:model-value="changeBackgroundSize"
+            size="default"
+          >
+            <el-radio label="cover" value="cover">裁剪</el-radio>
+            <el-radio label="contain" value="contain">适应</el-radio>
+            <el-radio label="100% 100%" value="100% 100%">拉伸</el-radio>
+            <el-radio label="auto" value="auto">原图</el-radio>
+            <el-radio label="custom" value="custom">自定义</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <template v-if="backgroundSize === 'custom'">
+        <div class="epx-page-designer-setting-style__subitem">
+          <label class="epx-page-designer-setting-style__label" for=""
+            >背景图宽度</label
+          >
+          <div class="epx-page-designer-setting-style__subcontent">
+            <el-input
+              class="epx-page-designer-setting-style__number-with-unit"
+              size="small"
+              :model-value="clearSuffix(backgroundWidth)"
+              @update:model-value="
+                (v) => changePx('backgroundWidth', v, unit(backgroundWidth))
+              "
+            >
+              <template v-slot:append><el-select
+                class="epx-page-designer-setting-style__unit"
+                :model-value="unit(backgroundWidth)"
+                @update:model-value="(v) => changePx('backgroundWidth', backgroundWidth, v)"
+                size="small"
+                placeholder="-"
+              >
+                <el-option label="px" value="px"></el-option>
+                <el-option label="%" value="%"></el-option>
+                <el-option label="auto" value="auto"></el-option>
+              </el-select></template>
+            </el-input>
+          </div>
+        </div>
+        <div class="epx-page-designer-setting-style__subitem">
+          <label class="epx-page-designer-setting-style__label" for=""
+            >背景图高度</label
+          >
+          <div class="epx-page-designer-setting-style__subcontent">
+            <el-input
+              class="epx-page-designer-setting-style__number-with-unit"
+              size="small"
+              :model-value="clearSuffix(backgroundHeight)"
+              @update:model-value="(v) => changePx('backgroundHeight', v, unit(backgroundHeight))"
+            >
+              <template v-slot:append><el-select
+                class="epx-page-designer-setting-style__unit"
+                :model-value="unit(backgroundHeight)"
+                @update:model-value="(v) => changePx('backgroundHeight', backgroundHeight, v)"
+                size="small"
+                placeholder="-"
+              >
+                <el-option label="px" value="px"></el-option>
+                <el-option label="%" value="%"></el-option>
+                <el-option label="auto" value="auto"></el-option>
+              </el-select></template>
+            </el-input>
+          </div>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+<script>
+export default {
+  name: 'epx-visual-config-background',
+  props: {
+    value: Object,
+    defaultValue: Object,
+    definingNameType: String
+  },
+  data () {
+    return {
+      backgroundStyle: 'color',
+      predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90'],
+      backgroundPositionList: [
+        { label: '左上', value: 'left top' },
+        { label: '上', value: 'top' },
+        { label: '右上', value: 'right top' },
+        { label: '左', value: 'left' },
+        { label: '中', value: 'center' },
+        { label: '右', value: 'right' },
+        { label: '左下', value: 'left bottom' },
+        { label: '下', value: 'bottom' },
+        { label: '右下', value: 'right bottom' }
+      ],
+      backgroundWidth: '',
+      backgroundHeight: '',
+      style: {},
+      defaultStyle: {
+        backgroundPosition: 'left top',
+        backgroundSize: 'auto',
+        backgroundRepeat: 'repeat'
+      }
+    }
+  },
+  computed: {
+    backgroundSize: {
+      get () {
+        const { backgroundSize } = this.style
+        if (this.$_.isNil(backgroundSize)) return this.defaultStyle.backgroundSize
+        return backgroundSize === 'cover' ||
+          backgroundSize === 'contain' ||
+          backgroundSize === 'auto' ||
+          backgroundSize === '100% 100%'
+          ? backgroundSize
+          : 'custom'
+      },
+      set (v) {
+        if (v === 'custom') {
+          this.style.backgroundSize = ''
+        } else {
+          this.style.backgroundSize = v
+        }
+      }
+    },
+    clearSuffix () {
+      return (v = '') =>
+        v === 'auto'
+          ? 'auto'
+          : typeof v === 'string'
+            ? v.replace(/(px|%)/, '')
+            : v
+    },
+    toNumber () {
+      return (v) => Number(v) || 0
+    },
+    unit () {
+      return (value) => {
+        if (value === 'auto') {
+          return ''
+        } else if (value) {
+          return value.replace(/[-\d]+/, '')
+        } else {
+          return 'px'
+        }
+      }
+    }
+  },
+  watch: {
+    style: {
+      handler () {
+        this.updateStyle()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    changeBgImage (e) {
+      const file = e.target.files[0]
+      if (file) {
+        this.$http
+          .save(
+            {
+              action: 'upload',
+              file: file,
+              SOURCE: 'page'
+            },
+            {
+              requestType: 'formData'
+            }
+          )
+          .then((data) => {
+            if (data && data.bean) {
+              this.style.backgroundImage = data.bean
+            }
+          })
+      }
+    },
+    updateStyle () {
+      const style = { ...this.style }
+      const formatStyle = {}
+      if (style.backgroundImage) {
+        if (this.backgroundStyle === 'gradient') {
+          delete style.backgroundRepeat
+          delete style.backgroundPosition
+          delete style.backgroundSize
+        } else {
+          style.backgroundImage = `url(${style.backgroundImage})`
+        }
+      }
+      for (const key in style) {
+        if (this.definingNameType === 'kebab-case') {
+          formatStyle[this.camelToKebab(key)] = style[key]
+        } else {
+          formatStyle[key] = style[key]
+        }
+      }
+
+      this.$emit('input', formatStyle)
+    },
+    changePx (key, v, unit = 'px') {
+      if ((unit || v) === 'auto') {
+        this[key] = unit
+      } else {
+        const formatV = parseFloat(v) ? parseFloat(v) + unit : ''
+        if (formatV || v === '-') {
+          this[key] = formatV || v + unit
+        } else {
+          this[key] = null
+        }
+      }
+      this.changeBackgroundSize('custom')
+    },
+    changeBackgroundSize (v) {
+      if (v === 'custom') {
+        if (this.backgroundWidth || this.backgroundHeight) {
+          this.style.backgroundSize = (this.backgroundWidth || 0) + ' ' + (this.backgroundHeight || 0)
+        } else {
+          this.style.backgroundSize = ''
+        }
+      } else {
+        this.style.backgroundSize = v
+      }
+    },
+    kebabToCamel  (str) {
+      return str.replace(/-([a-z])/g, function (match, char) {
+        return char.toUpperCase()
+      })
+    },
+    camelToKebab  (str) {
+      return str.replace(/([A-Z])/g, function (match, char) {
+        return '-' + char.toLowerCase()
+      })
+    }
+  },
+  created () {
+    if (this.defaultValue) {
+      this.defaultStyle = { ...this.defaultStyle, ...this.defaultValue }
+    }
+    if (this.value) {
+      if (this.definingNameType === 'kebab-case') {
+        for (const key in this.value) {
+          this.style[this.kebabToCamel(key)] = this.value[key]
+        }
+      } else {
+        this.style = { ...this.value }
+      }
+      if (this.style.backgroundImage) {
+        if (this.style.backgroundImage.includes('linear-gradient(')) {
+          this.backgroundStyle = 'gradient'
+        } else {
+          this.style.backgroundImage = this.style.backgroundImage.replace(/url\((.+)\)/, '$1')
+        }
+      }
+      if (this.backgroundSize === 'custom') {
+        this.backgroundWidth = this.style.backgroundSize.split(' ')[0] || ''
+        this.backgroundHeight = this.style.backgroundSize.split(' ')[1] || ''
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+@include b(page-designer-setting-style) {
+  @include e(subcontent) {
+    flex: 1;
+  }
+  @include e(background-position) {
+    display: grid;
+    grid-template-columns: repeat(3, 24px);
+    grid-template-rows: repeat(3, 24px);
+    gap: 2px;
+    > div {
+      border: 1px solid #e3e3e3;
+      cursor: pointer;
+      i {
+        display: none;
+      }
+      &:hover {
+        @include bg_color_primary(0.1);
+      }
+      &.is-active {
+        @include border_color_primary;
+        text-align: center;
+        i {
+          display: inline;
+          font-size: var(--epx-font-size-l);
+          line-height: 22px;
+          @include font_color_primary;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/visual/config/Chart.vue

@@ -0,0 +1,139 @@
+<template>
+<div class="chart">
+  <!-- 选择图表 FM_REPORT_BASE report-design-report-->
+  <epx-object class="chart-select" v-model="chart" :fieldConfigs="{ state: 'ADD', attriLabel: '报表', codeKey: 'FM_REPORT_BASE', scopeParams: [{ field: 'SYSTEM', values: this.SYSTEM }], }"></epx-object>
+  <div>
+    <el-button type="default" :class="['add-operate', { 'no-border': !chart }]" size="small" @click="addChart">+ 新增</el-button>
+    <el-button v-if="chart" type="primary" link class="operate" @click="viewChart" >预览</el-button>
+    <el-button v-if="chart" type="primary" link class="operate" @click="editChart">设计</el-button>
+  </div>
+  <epx-visual-config-lazy-dialog
+    v-if="chart"
+    title="预览"
+    :append-to-body="true"
+    v-model="preview"
+    destroy-on-close
+    width="70%"
+  >
+    <epx-report-chart :designMode="true" :config="{id:  chart.id || chart}"></epx-report-chart>
+  </epx-visual-config-lazy-dialog>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'epx-visual-config-chart',
+  props: {
+    value: String,
+    defaultValue: String
+  },
+  data () {
+    return {
+      chart: null,
+      preview: false
+    }
+  },
+  watch: {
+    chart (v) {
+      if (v.id) {
+        this.$emit('callback', v)
+        this.changeValue(v.id)
+      }
+    }
+  },
+  methods: {
+    changeValue (v) {
+      if (v !== this.value) {
+        this.$emit('change-configs', v === this.defaultValue ? null : v)
+      }
+    },
+    addChart () {
+      const that = this
+      this.$createPage({
+        metaId: 'FM_REPORT_BASE',
+        openType: '2',
+        flag: 'dialog_add',
+        component: 'entity-add-page',
+        pageType: 'ADD',
+        callback (data) {
+          that.getChart(data.id)
+        }
+      })
+    },
+    viewChart () {
+      this.preview = true
+    },
+    editChart () {
+      if (!this.chart) {
+        this.$message('请先选择报表')
+        return
+      }
+      this.$createPage({
+        metaId: 'FM_REPORT_BASE',
+        openType: '2',
+        defaultFullscreen: true,
+        component: 'report-design',
+        reportId: this.chart.id || this.chart,
+        id: this.chart.id || this.chart
+      })
+    },
+    getChart (chartId) {
+      if (chartId) {
+      // 获取对应的报表
+        this.$http.get({
+          entityId: 'FM_REPORT_BASE',
+          id: chartId
+        })
+          .then(data => {
+            if (data && data.data) {
+              const { ID, NAME } = data.data
+              this.chart = {
+                id: ID,
+                name: NAME
+              }
+            }
+          })
+      }
+    }
+  },
+  created () {
+    this.getChart(this.value)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.chart {
+  // display: flex;
+  // align-items: center;
+}
+.chart-select {
+  // display: inline;
+  margin-right: 10px;
+}
+.add-operate {
+  margin-right: 12px;
+  height: 34px;
+  position: relative;
+  top: 1px;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -14px;
+    height: 100%;
+    border-right: 1px solid #e3e3e3;
+  }
+  &.no-border {
+    &::after {
+      display: none;
+    }
+  }
+}
+.operate {
+  // color: #;
+  i {
+    margin-right: 4px;
+  }
+}
+</style>

package/src/visual/config/Checkbox.vue

@@ -0,0 +1,64 @@
+<template>
+  <!-- epx-checkbox 迁 Vue3 后是 modelValue + update:modelValue（逗号串），还写 :value / @change 就是显示空白、勾了不回写 -->
+  <epx-checkbox
+   :modelValue="_value"
+   @update:modelValue="changeValue"
+   :fieldConfigs="{ attriLabel: label, codeKey: code, state: 'EDIT', options: options }"
+   >
+   </epx-checkbox>
+</template>
+
+<script>
+export default {
+  name: 'epx-visual-config-checkbox',
+  props: {
+    value: [String, Number, Array],
+    defaultValue: [String, Number, Array],
+    code: String,
+    label: String,
+    dataKey: String,
+    optionList: Array,
+    multiple: Boolean
+  },
+  computed: {
+    options () {
+      if (this.optionList) {
+        return this.optionList.map(item => ({ code: item.value, name: item.label }))
+      }
+      return null
+    },
+    _value () {
+      const value = this.value || this.defaultValue
+      if (Array.isArray(value)) {
+        return value.join(',')
+      }
+      return value
+    }
+  },
+  methods: {
+    getLabel (id) {
+      return this.$http.$request({
+        action: 'getLabel',
+        entityId: this.object,
+        id
+      })
+    },
+    changeValue (v) {
+      let value = v
+      if (typeof v === 'string') {
+        value = v.split(',')
+      }
+      this.$emit('change-configs', value === this.defaultValue ? null : value)
+    }
+  },
+  watch: {
+    // objectValue (v) {
+    //   if (v && v.id) this.changeValue(v.id)
+    // }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/visual/config/Color.vue

@@ -0,0 +1,40 @@
+<template>
+<div>
+   <el-color-picker :model-value="value" :predefine="predefineColors" color-format="rgb" show-alpha  @change="changeValue" ></el-color-picker>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'epx-visual-config-color',
+  props: {
+    value: String,
+    defaultValue: String,
+    change: Function
+  },
+  data () {
+    return {
+      predefineColors: ['#1F82EF', '#CE4545', '#F2970E', '#3D8A50', '#7569E2']
+    }
+  },
+  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>

package/src/visual/config/DesignReport.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <epx-report-design-report class="design-report" v-if="value" :id="value" ></epx-report-design-report>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'epx-visual-config-design-report',
+  props: {
+    value: String
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.design-report {
+  width: 100%;
+}
+</style>