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

package/src/visual/config/Params.vue

@@ -0,0 +1,228 @@
+<template>
+<div>
+  <div class="params">
+    <p v-for="(value, key) in params" class="params-item" :key="key">
+      {{key}} = {{value}}
+      <i v-if="state!=='DETAIL'" class="el-icon-edit" @click="editParams(key, value)" ></i>
+      <i v-if="state!=='DETAIL'" class="el-icon-close" @click="deleteParams(key)" ></i>
+    </p>
+    <el-button type="primary" link @click="paramsDialog = true" v-if="state!=='DETAIL'">+ 添加参数</el-button>
+  </div>
+  <epx-visual-config-lazy-dialog
+    title="设置参数"
+    :model-value="!!paramsDialog"
+    center
+    width="420px"
+    :append-to-body="true"
+    @close="paramsDialog = false"
+  >
+    <div>
+      <div class="add-params-input">
+        <span>参数名：</span>
+        <div :style="{flex: 1}">
+          <el-radio-group v-if="paramList.length>0" class="add-params-key-type" v-model="paramKeyType">
+            <el-radio label="defined" value="defined">内置参数</el-radio>
+            <el-radio label="custom" value="custom">自定义</el-radio>
+          </el-radio-group>
+          <el-select size="default" v-if="paramKeyType==='defined'&&paramList.length>0" v-model="addParams.key">
+            <el-option v-for="item in paramList" :key="item.Id" :label="item.REMARK" :value="item.NAME"></el-option>
+          </el-select>
+          <el-input size="default" v-else :model-value="addParams.key" @update:model-value="v => (addParams['key'] = v)"> </el-input>
+        </div>
+      </div>
+     <div class="add-params-input">
+          <span>参数类型：</span>
+          <el-radio-group v-model="paramType">
+            <el-radio label="str" value="str" v-if="showParamsType.includes('str')">固定值</el-radio>
+            <el-radio label="field" value="field" v-if="showParamsType.includes('field')">字段值  </el-radio>
+            <el-radio label="page" value="page" v-if="showParamsType.includes('page')">页面参数</el-radio>
+          </el-radio-group>
+        </div>
+        <div class="add-params-input" >
+          <span>参数值：</span>
+          <template v-if="paramType==='str'">
+            <epx-visual-config-field
+              v-if="inParamType==='field_code'"
+              :value="selectedFieldList"
+              :metaId="metaId"
+              multiple
+              @change-configs="setParamsFieldValue"
+            />
+            <el-input v-else :model-value="addParams.value" @update:model-value="v => (addParams['value'] = v)"></el-input>
+          </template>
+          <el-popover
+            v-else-if="paramType==='field'"
+            width="200"
+            trigger="click"
+          >
+            <template v-slot:reference><el-input :model-value="addParams.value"></el-input></template>
+            <el-tree
+              :style="{maxHeight: '300px', overflow: 'auto'}"
+              :data="treeFieldStore"
+              :props="{
+                children: 'children',
+                label: 'text'
+              }"
+              @node-click="selectParamField"
+             >
+              <template v-slot="{node}"><span v-html="node.label"></span></template>
+            </el-tree>
+          </el-popover>
+          <el-select v-else-if="paramType==='page'" v-model="addParams.value">
+            <el-option
+              v-for="item in pageParams"
+              :key="item.code"
+              :label="item.name || item.code"
+              :value="`$[${item.code}]`">
+            </el-option>
+          </el-select>
+        </div>
+      <div class="button-group">
+        <el-button type="primary" @click="addParamsFn">确定</el-button>
+        <el-button @click="paramsDialog = false">取消</el-button>
+      </div>
+    </div>
+  </epx-visual-config-lazy-dialog>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'epx-visual-config-params',
+  props: {
+    value: Object,
+    defaultValue: Object,
+    treeFieldStore: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    pageParams: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    showParamsType: {
+      type: Array,
+      default () {
+        return ['str', 'field', 'page']
+      }
+    },
+    state: String,
+    metaId: String,
+    paramList: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      params: {},
+      paramType: 'str',
+      paramKeyType: 'defined',
+      paramsDialog: false,
+      addParams: {
+        key: '',
+        value: ''
+      }
+    }
+  },
+  computed: {
+    inParamType () {
+      const inParam = this.paramList.find(item => item.NAME === this.addParams.key)
+      return inParam?.PARAM_TYPE
+    },
+    selectedFieldList () {
+      return this.addParams.value ? this.addParams.value.split(',').map(v => v.replace(/#$/g, '')) : []
+    }
+  },
+  watch: {
+    params: {
+      handler (v) {
+        if (!this.$_.isEqual(v, this.value)) {
+          this.changeValue(v)
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    changeValue (v) {
+      if (v !== this.defaultValue) {
+        this.$emit('change-configs', v === this.defaultValue ? null : v)
+        this.$emit('input', v === this.defaultValue ? null : v)
+      }
+    },
+    setParamsFieldValue (v) {
+      this.addParams.value = v.length > 0 ? v.join('#,') + '#' : ''
+    },
+    addParamsFn () {
+      const { key, value } = this.addParams
+      const trimKey = key.trim()
+      const trimValue = value.trim()
+      if (key && value) {
+        this.params[trimKey] = trimValue
+      }
+      this.addParams = {}
+      this.paramsDialog = false
+    },
+    selectParamField (data) {
+      this.addParams.value = `#[${(data.field || data.code).replace(/\./g, '|')}]`
+    },
+    editParams (key, value) {
+      this.addParams = { key, value }
+      this.paramsDialog = true
+    },
+    deleteParams (key) {
+      delete this.params[key]
+    }
+  },
+  created () {
+    if (this.value) {
+      this.params = { ...this.value }
+    } else if (this.defaultValue) {
+      this.params = { ...this.defaultValue }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.params-item {
+  cursor: pointer;
+  >i {
+    font-size: var(--epx-font-size-l);
+    @include font_color_primary;
+    display: none;
+    margin-left: 6px;
+  }
+  &:hover {
+   >i {
+      display: inline;
+    }
+  }
+}
+.add-params-input {
+  display: flex;
+  margin-bottom: 16px;
+  &> span:first-child {
+    width: 80px;
+  }
+
+    :deep(.el-input) {
+      width: 240px;
+    }
+
+}
+.button-group {
+  text-align: center;
+  margin-top: 20px;
+}
+.add-params-key-type {
+  margin-bottom: 10px;
+}
+</style>

package/src/visual/config/Radio.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <el-radio-group v-model="radioValue" @change="changeRadioValue">
+      <el-radio v-for="item in options" :key="item.id" :label="item.code" :value="item.code">{{item.name}}</el-radio>
+      <el-radio label="CUSTOM" value="CUSTOM" v-if="inputable">自定义</el-radio>
+    </el-radio-group>
+    <el-input v-if="inputable && radioValue==='CUSTOM'" :model-value="value" @update:model-value="changeValue"></el-input>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'epx-visual-config-radio',
+  props: {
+    allConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    label: String,
+    value: [String, Boolean, Number],
+    defaultValue: [String, Boolean, Number],
+    code: String,
+    optionList: {
+      type: Array
+    },
+    configItem: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    inputable: Boolean
+  },
+  data () {
+    return {
+      radioValue: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getCodeById'
+    ]),
+    options () {
+      if (this.optionList) return this.optionList.map(item => ({ code: item.value, name: item.label }))
+      if (this.code) {
+        const options = this.getCodeById(this.code)
+        if (!options) {
+          this.$store.dispatch({
+            type: 'ADD_LIST',
+            key: this.code
+          })
+        }
+        return options || []
+      }
+      return []
+    },
+    _value () {
+      return !this.$_.isNil(this.value) ? this.value : this.defaultValue
+    }
+  },
+  methods: {
+    changeValue (v) {
+      this.$emit('change-configs', v === this.defaultValue ? null : v)
+    },
+    changeRadioValue (v) {
+      if (v !== 'CUSTOM') {
+        this.$emit('change-configs', v === this.defaultValue ? null : v)
+      } else {
+        this.$emit('change-configs', null)
+      }
+    }
+  },
+  created () {
+    if (this.inputable && this._value) {
+      const item = this.options.find(item => item.code === this._value)
+      if (!item) {
+        this.radioValue = 'CUSTOM'
+      } else {
+        this.radioValue = this._value
+      }
+    } else {
+      this.radioValue = this._value
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/visual/config/Row.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div class="row" v-for="(row, index) in rows" :key="index +'-'+ rows.length">
+      <epx-visual-config-list-field v-bind="$forwardAttrs($attrs)" :show-field-way="false" :value="row"  @change-configs="v=>changeFields(index, v)">
+        <template v-slot:operate><el-popconfirm
+          class="delete-btn"
+          title="确定删除？"
+          @confirm="deleteRow(index)"
+        >
+          <template v-slot:reference><el-button type="danger" size="small">删除</el-button></template>
+        </el-popconfirm></template>
+      </epx-visual-config-list-field>
+    </div>
+    <el-button type="primary" link @click="addRow">+ 添加一行</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'epx-visual-config-row',
+  props: {
+    value: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      rows: []
+    }
+  },
+  methods: {
+    addRow () {
+      this.rows.push([])
+    },
+    deleteRow (index) {
+      this.rows.splice(index, 1)
+    },
+    changeFields (index, v) {
+      this.rows.splice(index, 1, v)
+    }
+  },
+  watch: {
+    // Vue3 起浅层 watcher 不响应 push/splice，而 addRow / deleteRow / changeFields 全是 push/splice，
+    // 且 emit 只在这个 watcher 里 ⇒ 不加 deep 本组件对外零输出。首次配置（value 为空）时
+    // rows 是本地数组，新增的行 100% 丢失。
+    rows: {
+      deep: 1,
+      handler (v) {
+        this.$emit('change-configs', v)
+      }
+    },
+    value (v) {
+      if (!this.$_.isEqual(v, this.rows)) {
+        // 拷贝而不是直接赋 prop 引用：同引用时 rows 就是 config[key] 本身，就地 push 虽然能把数据
+        // 留在配置对象里，但设计器收不到 change 事件、预览不重渲染；而且 isEqual(v, this.rows)
+        // 在同引用下恒为真，这个守卫等于不存在。
+        this.rows = [...v]
+      }
+    }
+  },
+  created () {
+    if (this.value) {
+      // 同上：拷贝，别让 rows 与 config[key] 变成同一个数组
+      this.rows = [...this.value]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.row {
+  border-bottom: 1px dashed #e3e3e3;
+  padding: 6px 0;
+}
+.delete-btn {
+  margin-left: 6px;
+}
+</style>