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

package/src/visual/config/Font.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="style-config__content">
+    <div class="style-config__subitem">
+        <label class="style-config__label" for="">{{$t('word size')}}</label>
+        <el-input-number size="small" :model-value="clearSuffix(style.fontSize)" controls-position="right" @change="v=>(style['fontSize'] = v+unit)"></el-input-number>
+    </div>
+    <div class="style-config__subitem">
+        <label class="style-config__label" for="">{{$t('row height')}}</label>
+        <el-input-number size="small" :model-value="clearSuffix(style.lineHeight)" controls-position="right" @change="v=>(style['lineHeight'] = v+unit)"></el-input-number>
+    </div>
+    <div class="style-config__subitem">
+      <label class="style-config__label" for="">字体</label>
+      <el-select class="selection" size="small" v-model="style.fontFamily" :placeholder="$t('default')">
+        <el-option
+          v-for="item in fontFamilyOption"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+          <span :style="{fontFamily: item.value}">{{item.label}}</span>
+        </el-option>
+      </el-select>
+    </div>
+    <div class="style-config__subitem">
+      <label class="style-config__label" for="">{{$t('word again')}}</label>
+      <el-select class="selection" size="small" v-model="style.fontWeight" :placeholder="$t('default')">
+        <el-option
+          v-for="item in fontWeightOption"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </div>
+    <div class="style-config__subitem">
+      <label class="style-config__label" for="">{{$t('font color')}}</label>
+      <el-color-picker
+        v-model="style.color"
+        show-alpha
+        :predefine="predefineColors">
+      </el-color-picker>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'epx-visual-config-font',
+  props: {
+    value: [String, Object],
+    defaultValue: String,
+    label: String,
+    unit: {
+      type: String,
+      default: 'px'
+    }
+  },
+  data () {
+    return {
+      style: {},
+      fontFamilyOption: [],
+      fontWeightOption: [],
+      predefineColors: []
+    }
+  },
+  watch: {
+    style (v) {
+      this.changeValue(v)
+    }
+  },
+  computed: {
+    clearSuffix () {
+      return (v = '') => {
+        if (v) return Number(v.replace(/[A-Za-z%]/g, ''))
+        return ''
+      }
+    }
+  },
+  methods: {
+    changeValue (v) {
+      if (v !== this.defaultValue) {
+        this.$emit('change-configs', v === this.defaultValue ? null : v)
+        this.$emit('input', v === this.defaultValue ? null : v)
+      }
+    }
+  },
+  created () {
+    this.predefineColors = ['#ff4500', '#ff8c00', '#ffd700', '#90ee90']
+    this.fontWeightOption = [
+      {
+        label: this.$t('overstriking'),
+        value: '700'
+      },
+      {
+        label: this.$t('thin'),
+        value: '400'
+      },
+      {
+        label: this.$t('default'),
+        value: '500'
+      }
+    ]
+    this.fontFamilyOption = [
+      { label: 'Arial, Helvetica, 微软雅黑', value: 'arial, helvetica, microsoft yahei' },
+      { label: 'Arial, Helvetica, 黑体', value: 'arial, helvetica, simhei' },
+      { label: 'Comic Sans MS, 微软雅黑', value: 'comic sans ms, microsoft yahei' },
+      { label: 'Comic Sans MS, 黑体', value: 'comic sans ms, simhei' },
+      { label: 'Impact, 微软雅黑', value: 'impact, microsoft yahei' },
+      { label: 'Impact, 黑体', value: 'impact, simhei' },
+      { label: 'Lucida Sans Unicode, 微软雅黑', value: 'lucida sans unicode, microsoft yahei' },
+      { label: 'Lucida Sans Unicode, 黑体', value: 'lucida sans unicode, simhei' },
+      { label: 'Trebuchet MS, 微软雅黑', value: 'trebuchet ms, microsoft yahei' },
+      { label: 'Trebuchet MS, 黑体', value: 'trebuchet ms, simhei' },
+      { label: 'Verdana, 微软雅黑', value: 'verdana, microsoft yahei' },
+      { label: 'Verdana, 黑体', value: 'verdana, simhei' },
+      { label: 'Georgia, 微软雅黑', value: 'georgia, microsoft yahei' },
+      { label: 'Georgia, 黑体', value: 'georgia, simhei' },
+      { label: 'Palatino Linotype, 微软雅黑', value: 'palatino linotype, microsoft yahei' },
+      { label: 'Palatino Linotype, 黑体', value: 'palatino linotype, simhei' },
+      { label: 'Times New Roman, 微软雅黑', value: 'times new roman, microsoft yahei' },
+      { label: 'Times New Roman, 黑体', value: 'times new roman, simhei' },
+      { label: 'Courier New, 微软雅黑', value: 'courier new, microsoft yahei' },
+      { label: 'Courier New, 黑体', value: 'courier new, simhei' },
+      { label: 'Lucida Console, 微软雅黑', value: 'lucida console, microsoft yahei' },
+      { label: 'Lucida Console, 黑体', value: 'lucida console, simhei' }
+    ]
+    if (this.value) {
+      this.style = { ...this.value }
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.style-config__content {
+  // display: none;
+  background: #F5F7FA;
+  overflow: hidden;
+  padding: 0 10px 0 28px;
+}
+.style-config__subitem {
+  display: flex;
+  align-items: center;
+  margin: 10px 0 ;
+}
+.style-config__label {
+  display: inline-block;
+  color: #666;
+  width: 90px;
+}
+</style>

package/src/visual/config/FormItem.vue

@@ -0,0 +1,25 @@
+<script>
+// @jsx-vue3
+// 单个配置项：把父 epx-visual-component 的 renderFormItem 放到独立子组件里执行，
+// 让每一项的 render effect 只依赖自己读到的 key（config[key] / defaultConfigs[key] / opened[key]…）。
+// 不重写渲染逻辑，只换依赖收集的归属；item.render 自定义项也走这里。
+export default {
+  name: 'epx-visual-config-form-item',
+  inject: {
+    visualComponent: {
+      default: null
+    }
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  render () {
+    const { item, visualComponent } = this
+    if (item.render) return item.render(item)
+    return visualComponent ? visualComponent.renderFormItem(item) : null
+  }
+}
+</script>

package/src/visual/config/Function.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="function">
+    <el-select size="default" clearable :model-value="value || 'new'" @clear="$emit('input', null)">
+      <el-option @click="$emit('input', option)" v-for="option in functionList" :key="option" :value="option">{{option}}</el-option>
+      <el-option @click="$emit('input', null)" value="new" label="添加新事件">添加新事件</el-option>
+    </el-select>
+    <div class="handler-function">
+      <el-input  size="default"  v-if="!value" v-model="functionName"></el-input>
+      <el-button class="handler-function__btn" size="small" @click="editJS(item)">编辑JS</el-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'epx-visual-config-function',
+  props: {
+    designer: Object,
+    value: Object,
+    defaultValue: String,
+    functionList: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      functionName: ''
+    }
+  },
+  methods: {
+    editJS (item, type) {
+      const { JS = '' } = this.designer?.pageConfig || {}
+
+      if (!this.value) {
+        if (!this.functionName) {
+          this.$message.error('请输入事件名')
+          return
+        }
+        if (this.functionList.includes(this.functionName)) {
+          this.$message.error('该事件名称已存在')
+          return
+        }
+        const js = JS + `
+  /**
+   * Button ${this.functionName}
+   */
+  export function ${this.functionName} () {
+
+  }
+      `
+        this.designer.updatePageConfig({ JS: js })
+        this.$emit('input', this.functionName)
+      }
+      this.designer.openPanel('jsPanel')
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.function {
+
+    :deep(.el-select) {
+      width: 180px;
+    }
+
+}
+.handler-function {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+}
+.handler-function__btn {
+  margin-left: 4px;
+  height: 36px;
+}
+</style>

package/src/visual/config/Html.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <el-button type="primary" link @click="dialogVisible=!dialogVisible">编辑内容</el-button>
+    <epx-visual-config-lazy-dialog
+      title="编辑内容"
+      v-model="dialogVisible"
+      append-to-body
+      width="700px"
+    >
+      <epx-form-html
+        class="html"
+        v-if="dialogVisible"
+        :modelValue="formatValue(value)"
+        :i18nValue="i18nValue"
+        :variableList="variableList"
+        @update:modelValue="changeValue"
+        @change-language="changeLanguageValue"
+        :fieldConfigs="{ state: 'ADD', attriLabel: this.label, attribute: {international: '1'}}"
+      >
+      </epx-form-html>
+    </epx-visual-config-lazy-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'epx-visual-config-html',
+  props: {
+    designer: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    value: String,
+    defaultValue: String,
+    label: String,
+    i18nValue: Object
+  },
+
+  data () {
+    return {
+      dialogVisible: false
+    }
+  },
+  computed: {
+    variableList () {
+      if (this.designer.pageConfig?.variableSets) {
+        return [{
+          type: 'folder',
+          name: '页面变量',
+          children: this.designer.pageConfig.variableSets.map(item => ({ ...item, type: 'variable', name: item.code }))
+        }]
+      }
+      return null
+    },
+    formatValue () {
+      return v => {
+        if (v) {
+          const node = document.createElement('div')
+          node.innerHTML = v
+          node.querySelectorAll('.datasource').forEach(item => {
+            item.innerText = `{${item.getAttribute('data-datasource')}.${item.getAttribute('data-field')}}`
+          })
+          const html = node.innerHTML
+          node.remove()
+          return html || ''
+        }
+        return ''
+      }
+    }
+  },
+  methods: {
+    changeValue (v) {
+      // 将内容替换
+      const node = document.createElement('div')
+      node.innerHTML = v
+      node.querySelectorAll('.datasource').forEach(item => {
+        item.innerText = `$[${item.getAttribute('data-field')}]`
+      })
+      const html = node.innerHTML
+      node.remove()
+      if (v !== this.defaultValue) {
+        this.$emit('change-configs', html === this.defaultValue ? null : html)
+      }
+    },
+    changeLanguageValue (v) {
+      this.$emit('change-language-config', v)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.html {
+  max-height: 560px;
+  overflow: auto;
+}
+</style>

package/src/visual/config/Image.vue

@@ -0,0 +1,132 @@
+<template>
+<div class="container">
+  <epx-visual-config-input
+    :designer="designer"
+    :label="label"
+    :value="modelValue"
+    :isInternational="false"
+    :inputVariable="true"
+    @change-configs="changeValue"
+    />
+  <el-popover
+  placement="right"
+  width="178"
+  popper-class="popper"
+  trigger="click">
+   <el-upload
+      class="avatar-uploader"
+      action=""
+      :http-request="upload"
+      :show-file-list="false"
+      :on-success="handleAvatarSuccess"
+      :before-upload="beforeAvatarUpload"
+    >
+      <img v-if="imageUrl" :src="imageUrl" class="avatar">
+      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+    </el-upload>
+  <template v-slot:reference><i class="el-icon-upload"></i></template>
+</el-popover>
+ <!-- <span v-show="value===defaultValue" class="is-default__tip" >（默认值）</span> -->
+</div>
+</template>
+
+<script>
+export default {
+  name: 'epx-visual-config-image',
+  props: {
+    label: String,
+    modelValue: String,
+    defaultValue: String,
+    change: Function,
+    designer: Object
+  },
+  data () {
+    return {
+      imageUrl: ''
+    }
+  },
+  methods: {
+    changeValue (v) {
+      if (v !== this.defaultValue) {
+        this.$emit('change-configs', v === this.defaultValue ? null : v)
+        if (this.change) {
+          this.change(v)
+        } else {
+          this.$emit('update:modelValue', v)
+        }
+      }
+    },
+    upload (params) {
+      this.$http.save({
+        action: 'upload',
+        file: params.file,
+        SOURCE: 'page'
+      }, {
+        requestType: 'formData'
+      }).then(data => {
+        this.imageUrl = this.$util.getFileUrl(data.bean)
+        this.changeValue(data.bean)
+      })
+    },
+    handleAvatarSuccess (res, file) {
+
+    },
+    beforeAvatarUpload (file) {
+      // const isJPG = file.type === "image/jpeg";
+      // const isLt2M = file.size / 1024 / 1024 < 2;
+      // if (!isJPG) {
+      //   this.$message.error("上传头像图片只能是 JPG 格式!");
+      // }
+      // if (!isLt2M) {
+      //   this.$message.error("上传头像图片大小不能超过 2MB!");
+      // }
+      // return isJPG && isLt2M;
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.container{
+  display: flex;
+  align-items: center;
+}
+.el-icon-upload{
+  color: #1F82EF;
+  margin-left: 6px;
+  font-size: 25px;
+  cursor: pointer;
+}
+.input {
+  width: 180px;
+
+    :deep(.el-input),
+    :deep(.el-input-number) {
+      width: 180px;
+    }
+
+}
+
+.avatar-uploader el-upload{
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+  }
+.avatar-uploader :hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+</style>