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

package/src/visual/config/MField.vue

@@ -0,0 +1,601 @@
+<template>
+<div class="field">
+  <el-radio-group v-model="settingFieldWay">
+    <el-radio label="default" value="default">默认字段</el-radio>
+    <el-radio label="custom" value="custom">自定义字段</el-radio>
+  </el-radio-group>
+  <div v-if="settingFieldWay==='custom'">
+    <!-- <draggable
+      :list="formatFieldList"
+      class="list-group"
+      ghost-class="ghost"
+      :group="{ name: 'g1' }"
+    > -->
+      <!-- <transition-group type="transition" name="flip-list" class="select-field-list"> -->
+        <li class="list-row" v-for="(row, index) in formatFieldList" :key="index">
+          <draggable
+            :list="row"
+            class="row-field-group"
+            ghost-class="ghost"
+            :group="{ name: 'g1' }"
+          >
+            <div v-for="(field) in row" class="select-field-item list-group-item" :key="field.attriName || field">
+              <span>
+                  {{ fieldLabel(field) }}
+              </span>
+              <div class="select-field-item__mask">
+                  <i class="el-icon-edit" @click="editField(field)"></i> |
+                  <i class="el-icon-close" @click="deleteConfigField(field)"></i>
+              </div>
+            </div>
+          </draggable>
+        </li>
+      <!-- </transition-group> -->
+    <!-- </draggable> -->
+    <el-button class="add-field-btn" size="small" type="primary" @click="openAddFieldDialog">+ 添加字段</el-button>
+  </div>
+  <ul v-else class="select-field-list">
+    <li v-for="field in defaultValue" class="select-field-item list-group-item" :key="field.attriName || field">
+      <span>
+        {{ fieldLabel(field) }}
+      </span>
+    </li>
+  </ul>
+   <epx-visual-config-lazy-dialog
+    class="setting-fields-dialog"
+    title="设置字段"
+    v-model="showEditFieldDialog"
+    width="70%"
+  >
+    <div class="setting-fields-container">
+      <div class="setting-fields__select">
+        <draggable
+          :list="fieldList"
+          class="list-group"
+          ghost-class="ghost"
+        >
+          <transition-group type="transition" name="flip-list" class="setting-fields__select--list">
+            <li v-for="field in fieldList" :class="['setting-fields__select--item', { active: selectField && selectField.attriName===(field.attriName || field)}]" :key="field.attriName || field" @click="selectSettingField(field)">
+              <i class="el-icon-document"></i>
+              <span>{{fieldLabel(field)}}</span>
+              <i class="el-icon-delete fr" @click="deleteConfigField(field)"></i>
+            </li>
+          </transition-group>
+        </draggable>
+      </div>
+      <el-form v-if="selectField" class="setting-field__config" inline label-position="right" label-width="140px">
+        <el-row class="setting-field__row" v-for="item in fieldOptions" :key="item.key">
+          <el-form-item :label="`${item.label}：`" v-if="!(selectField.configWay !== 'custom' && (item.key !== 'configWay' && item.key !== 'attriName'))">
+            <el-radio-group v-if="item.type==='radio'" :model-value="selectField[item.key]===undefined? item.defaultValue:selectField[item.key]">
+              <el-radio v-for="option in item.options" :key="option.value" :label="option.value" :value="option.value" @click="selectField[item.key] = option.value">
+                {{option.label}}
+                {{option.value === item.defaultValue ? '（默认值）' : ''}}
+              </el-radio>
+            </el-radio-group>
+            <template v-else-if="item.type==='function'&&fieldInfo.relationSort==='1'">
+              <el-select v-model="selectField[item.key]" placeholder="请选择">
+                <el-option
+                  v-for="item in getFunctionOption(fieldInfo.dataType)"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </template>
+            <div v-else-if="item.type==='color'" class="setting-field__item">
+              <el-color-picker :model-value="selectField[item.key] || item.defaultValue" @change="v => (selectField[item.key] = v)"></el-color-picker>
+              <span class="setting-field__item--default">{{ selectField[item.key] && selectField[item.key] === item.defaultValue ? '（默认值）' : ''}}</span>
+            </div>
+            <div v-else-if="item.type==='fileNum'&&fieldInfo.dataType==='blob'" class="setting-field__item">
+              <el-input-number size="default" :model-value="selectField[item.key] || item.defaultValue" @change="v => (selectField[item.key] = v)"/>
+            </div>
+            <div v-else-if="item.type==='value'" class="setting-field__item" :style="{display: 'inline-block'}">
+              <el-radio-group v-model="valueType" @change="selectField[item.key]=null">
+                <el-radio label="string" value="string">固定值</el-radio>
+                <el-radio label="page" value="page">页面参数</el-radio>
+              </el-radio-group>
+              <div>
+                <el-input v-if="valueType==='string'" :model-value="selectField[item.key] || item.defaultValue" @update:model-value="v => (selectField[item.key] = v)" :readonly="item.readonly" type="text" size="medium" />
+                <!-- 页面参数  -->
+                <el-select v-else v-model="selectField[item.key]">
+                  <el-option
+                    v-for="item in pageParams"
+                    :key="item.CODE"
+                    :label="item.NAME"
+                    :value="`$[${item.CODE}]`">
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <div v-else class="setting-field__item">
+              <el-input :model-value="selectField[item.key] || item.defaultValue" @update:model-value="v => (selectField[item.key] = v)" :readonly="item.readonly" type="text" size="medium" />
+              <span class="setting-field__item--default">{{ selectField[item.key] && selectField[item.key] === item.defaultValue ? '（默认值）' : ''}}</span>
+            </div>
+          </el-form-item>
+        </el-row>
+        <el-form-item :style="{ marginLeft: '140px' }">
+          <el-button type="primary" @click="saveFieldConfig">保存</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </epx-visual-config-lazy-dialog>
+  <epx-visual-config-lazy-dialog
+    title="添加字段"
+    v-model="showFieldDialog"
+    width="70%"
+  >
+    <el-checkbox-group v-model="selectFieldList" class="tree-field-checkbox-group" >
+      <div v-for="(item, index) in treeFieldStore" :key="item.code">
+        <div class="tree-field-header">
+          <span class="tree-field-title" @click="swicthFieldStoreFold(index)">
+            <i v-show="item.isUnFold" class="el-icon-minus"></i>
+            <i v-show="!item.isUnFold" class="el-icon-plus"></i>
+          </span>
+          <span class="tree-field-title">
+            <i class="el-icon-folder-opened"></i>
+          </span>
+          <span v-html="item.text" class="tree-field-title"></span>
+        </div>
+        <div class="tree-field-checkbox" v-show="item.isUnFold">
+          <el-checkbox :label="item.code" :value="item.code" @change="val => selectAllField(val, index)">全选</el-checkbox>
+          <el-checkbox v-for="option in item.children" :label="option.code" :value="option.code" :key="option.code">{{option.text}}</el-checkbox>
+        </div>
+      </div>
+    </el-checkbox-group>
+    <template v-slot:footer><span class="dialog-footer">
+      <el-button @click="showFieldDialog = false">取 消</el-button>
+      <el-button type="primary" @click="saveSelectField">确 定</el-button>
+    </span></template>
+  </epx-visual-config-lazy-dialog>
+</div>
+</template>
+
+<script>
+import draggable from '@epxing/core/src/components/draggable'
+
+export default {
+  name: 'epx-visual-config-m-list-field',
+  components: {
+    draggable
+  },
+  props: {
+    value: {
+      type: Array
+    },
+    defaultValue: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    treeFieldStore: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    functionOption: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    fieldOptions: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    pageParams: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      formatFieldList: [],
+      selectFieldList: [],
+      settingFieldWay: 'default',
+      showFieldDialog: false,
+      selectField: null,
+      showEditFieldDialog: false,
+      fieldInfo: {},
+      valueType: 'string'
+    }
+  },
+  watch: {
+    formatFieldList: {
+      handler (v) {
+      },
+      deep: true
+    },
+    fieldList (V) {
+      this.$emit('change-configs', V)
+    },
+    settingFieldWay (v) {
+      if (v === 'custom') {
+        this.$emit('change-configs', this.fieldList)
+      } else {
+        this.$emit('change-configs', null)
+      }
+    },
+    // ⚠️ 这条在 array-watchers 基线里是误报，**别补 deep**。
+    // 该字段的原地变更只有两处：handler 自己体内的 splice（只为改视图），以及别处的
+    // `delete this.selectFieldList[i]`。后者是关键——`delete arr[i]` 在 **Vue2 下同样不触发**
+    // watcher（Vue2 只 patch 了 push/pop/shift/unshift/splice/sort/reverse，下标删除得用
+    // Vue.delete），所以这不是迁移回归。反过来 Vue3 的 Proxy **有** deleteProperty 陷阱，
+    // 补 deep 会让 watcher 在 Vue2 从未触发过的时机跑起来 ⇒ 凭空引入新行为。
+    // 其余入口（checkbox-group 的 v-model、两处整体赋值）本就产生新数组，浅层够用。
+    selectFieldList (fieldList) {
+      this.treeFieldStore.forEach(item => {
+        const isAllChecked = item.children.every(field => {
+          return fieldList.find(fieldItem => fieldItem && (fieldItem.attriName || fieldItem) === field.code)
+        })
+        const isCheckIndex = fieldList.findIndex(field => item.code === field)
+        if (isAllChecked) {
+          if (isCheckIndex === -1) this.selectFieldList = [...fieldList, item.code]
+        } else {
+          if (isCheckIndex !== -1) this.selectFieldList.splice(isCheckIndex, 1)
+        }
+      })
+    }
+  },
+  computed: {
+    fieldList () {
+      const fieldList = []
+      // 更新字段配置
+      this.formatFieldList.forEach((item, rowIndex) => {
+        item.forEach((field, index) => {
+          if (index === 0 && rowIndex !== 0) {
+            if (typeof field === 'string') {
+              field = {
+                attriName: field
+              }
+            }
+            field.isWrap = true
+          } else {
+            if (field.isWrap) {
+              delete field.isWrap
+            }
+          }
+          fieldList.push(field)
+        })
+      })
+      return fieldList
+    },
+    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
+        for (let i = 0; i < this.treeFieldStore.length; i++) {
+          const item = this.treeFieldStore[i]
+          for (let j = 0; j < item.children.length; j++) {
+            const field = item.children[j]
+            if (field.code.replace('.', '|') === attriName) {
+              return field.text
+            }
+          }
+        }
+        return attriName
+      }
+    },
+    getFunctionOption () {
+      return (type) => {
+        let option = []
+        if (type === 'num') {
+          option = this.functionOption.filter(item => {
+            return item.value !== 'GROUP_CONCAT'
+          })
+        } else if (type === 'date' || type === 'time') {
+          option = this.functionOption.filter(item => {
+            return item.value === 'MIN' || item.value === 'MAX'
+          })
+        } else {
+          option = this.functionOption.filter(item => {
+            return item.value === 'GROUP_CONCAT' || item.value === 'COUNT'
+          })
+        }
+        return option
+      }
+    },
+    showTreeFieldStore () {
+      const treeFieldStore = []
+      this.treeFieldStore.forEach((item, index) => {
+        const children = item.children.filter(fieldItem => !this.fieldList.find(field => (field.attriName || field) === fieldItem.code))
+        treeFieldStore.push({
+          ...item, children
+        })
+      })
+      return treeFieldStore
+    }
+  },
+  methods: {
+    deleteField (index) {
+      this.fieldList.splice(index, 1)
+    },
+    deleteConfigField (field) {
+      this.formatFieldList.forEach(row => {
+        const index = row.findIndex(item => (item.attriName || item) === (field.attriName || field))
+        if (index !== -1) {
+          row.splice(index, 1)
+        }
+      })
+    },
+    editField (field) {
+      this.showEditFieldDialog = true
+      this.selectSettingField(field)
+    },
+    selectSettingField (field) {
+      let fieldConfig = field
+      if (typeof field === 'string') {
+        fieldConfig = { attriName: field }
+      }
+      const { attriName, ...other } = fieldConfig
+      if (!this.$_.isEmpty(other)) {
+        fieldConfig.configWay = 'custom'
+      }
+      this.selectField = { ...fieldConfig }
+      if (this.selectField.value && this.selectField.value.match(/\$\[(.+)\]/)) {
+        this.valueType = 'page'
+      }
+      let item = this.selectField.attriName
+      if (item.includes('|')) {
+        item = item.replace('|', '.')
+      }
+      this.treeFieldStore.forEach(fields => {
+        const fieldItem = fields.children.find(fieldItem => fieldItem.code === item)
+        if (fieldItem) {
+          this.fieldInfo = { ...fieldItem }
+        }
+      })
+    },
+    saveFieldConfig () {
+      this.$message.success('保存成功')
+      const { configWay, attriName, ...otherConfigs } = this.selectField
+      const fieldList = [...this.fieldList]
+      const index = fieldList.findIndex(item => (item.attriName || item) === this.selectField.attriName)
+      if (configWay === 'custom') {
+        if (index !== -1) {
+          fieldList.splice(index, 1, { attriName, ...otherConfigs })
+        }
+      } else {
+        fieldList.splice(index, 1, { attriName })
+      }
+      this.formatFieldListFn(fieldList)
+      this.showEditFieldDialog = false
+    },
+    handleNodeClick (data, node) {
+      this.fieldList = [...new Set([...this.fieldList, { attriName: data.code.replace(/\./g, '|') }])]
+    },
+    openAddFieldDialog (key) {
+      this.selectFieldList = this.fieldList.map(item => item.attriName || item)
+      this.showFieldDialog = true
+    },
+    selectAllField (value, index) {
+      const fieldList = this.treeFieldStore[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
+      // 对比fieldList
+      const fieldList = []
+      const allCheckCodes = this.treeFieldStore.map(item => item.code)
+      this.selectFieldList.forEach(item => {
+        if (allCheckCodes.includes(item)) return
+        const field = item.replace('.', '|')
+        const existField = this.fieldList.find(fieldItem => field === (fieldItem.attriName || fieldItem))
+        if (existField) {
+          fieldList.push(existField)
+        } else {
+          fieldList.push(field)
+        }
+      })
+      this.formatFieldListFn(fieldList)
+      this.showFieldDialog = false
+    },
+    swicthFieldStoreFold (index) {
+      const item = this.treeFieldStore[index]
+      this.treeFieldStore[index] = { ...item, isUnFold: !item.isUnFold }
+    },
+    formatFieldListFn (fieldList) {
+      const list = []
+      let row = []
+      fieldList.forEach(item => {
+        if (item.isWrap) {
+          list.push(row)
+          row = [item]
+        } else {
+          row.push(item)
+        }
+      })
+      if (row.length > 0) {
+        list.push(row)
+      }
+      this.formatFieldList = list
+    }
+  },
+  created () {
+    if (this.value) {
+      this.formatFieldListFn(this.value)
+      this.settingFieldWay = 'custom'
+    } else {
+      this.formatFieldListFn(this.defaultValue)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.field {
+
+    :deep(.el-dialog__body) {
+      padding: 0;
+    }
+
+}
+.list-group {
+  display: inline-block;
+}
+.row-field-group {
+  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;
+  position: relative;
+  &:hover {
+    .select-field-item__mask {
+      display: flex;
+    }
+  }
+}
+.select-field-item__mask{
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: all .5s;
+  background: rgba(0,0,0, .6);
+  justify-content: center;
+  align-items: center;
+    color: #fff;
+  i {
+    font-size: var(--epx-font-size-l);
+    margin: 0 8px;
+    cursor: pointer;
+  }
+}
+.setting-fields-container {
+  display: flex;
+  height: 400px;
+}
+.setting-fields__select {
+  width: 210px;
+  height: 100%;
+  padding-top: 20px;
+  box-sizing: border-box;
+  border-right: 1px solid #e3e3e3;
+  overflow: auto;
+  .list-group {
+    width: 100%;
+  }
+}
+.setting-field__row {
+  margin-bottom: 10px;
+
+    :deep(.el-form-item) {
+      vertical-align: auto;
+    }
+
+}
+.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)
+  }
+}
+.setting-fields__select--add {
+  margin-left: 24px;
+}
+.setting-field__config {
+  flex: 1;
+  padding: 16px;
+  overflow: auto;
+}
+.setting-field__item {
+  display: flex;
+
+    :deep(.el-color-picker__trigger) {
+      width: 120px;
+    }
+
+}
+.setting-field__item--default {
+  white-space: nowrap;
+}
+.tree-field-checkbox-group {
+  font-size: var(--epx-font-size-base);
+  padding: 20px;
+}
+.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;
+}
+
+</style>
+<style >
+.visual-config-field-popover {
+  max-height: 300px;
+  overflow: auto;
+}
+</style>

package/src/visual/config/Number.vue

@@ -0,0 +1,41 @@
+<template>
+<div>
+  <el-input-number class="input" :model-value="_value" :min="0" :max="10000" @change="changeValue"></el-input-number>
+  <!-- <span v-show="value===defaultValue" class="is-default__tip" >（默认值）</span> -->
+</div>
+</template>
+
+<script>
+export default {
+  name: 'epx-visual-config-number',
+  props: {
+    value: Number,
+    defaultValue: Number
+  },
+  computed: {
+    _value () {
+      return this.$_.isNil(this.value) ? this.defaultValue : this.value
+    }
+  },
+  methods: {
+    changeValue (v) {
+      this.$emit('change-configs', v === this.defaultValue ? null : v)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.input {
+
+    :deep(.el-input) {
+      width: 200px;
+    }
+// 不能再给 .el-input__inner 定宽：Element Plus 外面多了一层 .el-input__wrapper（数字框左右各 42px
+// 放加减按钮），内层 input 硬定 200px 会把 wrapper 撑到 284px、超出面板
+&.el-input-number {
+      width: 200px;
+    }
+
+}
+</style>