epx-frame 3.5.0-shpgy.1

package/src/frame/views/visual/ListFirst.vue

@@ -0,0 +1,613 @@
+<template>
+  <!-- list页面可视化配置 -->
+  <div class="container">
+    <!-- 全局配置 -->
+    <ul class="config-container">
+      <li class="config-item" v-for="option in configOptions" :key="option.key">
+        <p class="config-title"> <i class="el-icon-s-operation"></i>{{option.name}}</p>
+        <el-form class="form" ref="form" :model="configs" label-width="160px">
+          <el-form-item  :class="['form-item',{'is-default':isDefaultValue(option.key, configItem.key)} ]"  v-for="configItem in option.children" :key="configItem.key" :label="`${configItem.name}：`">
+            <!-- 根据类型显示不同的表单组件 -->
+            <!--  单选 -->
+              <el-radio-group
+                v-if="configItem.type==='radio'"
+                :value="getValue(option.key,configItem.key)"
+               >
+                <el-radio @change="changeValue(option.key, configItem.key,item.value)" v-for="item in configItem.options" :key="item.value" :label="item.value">{{item.label}}</el-radio>
+              </el-radio-group>
+             <!-- 字段输入 -->
+             <div v-else-if="configItem.type==='field'" class="field">
+                <draggable
+                  class="fields-drag"
+                  tag="span"
+                  :list="getValue(option.key,configItem.key,configItem.type)"
+                  @change="changeDrag(option.key,configItem.key)"
+                  v-bind="dragOptions"
+                  @start="drag = true"
+                  @end="drag = false"
+                >
+                  <transition-group type="transition" class="field-list" :name="!drag ? 'flip-list' : null">
+                    <li v-for="(item, index) in getValue(option.key,configItem.key,configItem.type)" :key="item.attriName || item" class="field-item">{{fieldLabel(item)}}<i class="el-icon-close" @click="removeField(option.key,configItem.key, index)"></i></li>
+                  </transition-group>
+                </draggable>
+                <el-button key="-1" class="button-new-tag" size="small" @click="addField(option.key, configItem.key)">+ 添加字段</el-button>
+               <!-- 选中字段 -->
+             </div>
+             <!-- 操作列/按钮 -->
+             <div v-else-if="configItem.type==='operate'">
+               <draggable
+                 class="fields-drag"
+                  tag="span"
+                  :list="getValue(option.key,configItem.key,configItem.type)"
+                  @change="changeDrag(option.key,configItem.key)"
+                  v-bind="dragOptions"
+                  @start="drag = true"
+                  @end="drag = false"
+                >
+                  <transition-group type="transition" class="field-list" :name="!drag ? 'flip-list' : null">
+                    <li v-for="(item, index) in getValue(option.key,configItem.key,configItem.type)" :key="item.text" class="field-item">{{item.text}}<i class="el-icon-close" @click="removeField(option.key,configItem.key,index )"></i></li>
+                  </transition-group>
+               </draggable>
+                <el-button key="-1" class="button-new-tag" size="small" @click="settingOperates(option.key, configItem.key)">+ 设置按钮</el-button>
+             </div>
+              <!-- 文本输入 -->
+             <el-input class="form-item-input" v-else :value="getValue(option.key, configItem.key)" @input="value =>changeValue(option.key, configItem.key,value)"></el-input>
+          </el-form-item>
+        </el-form>
+      </li>
+    </ul>
+    <el-dialog title="添加字段" :visible.sync="dialogTableVisible">
+        <el-checkbox-group class="checkbox-group" v-model="selectFields" >
+          <ul class="field-group">
+            <li class="" v-for="item in fieldGroup" :key="item.code">
+              <p class="field-item-title" @click="switchFold(item.code)"><i :class="['fa',unFoldFieldItems[item.code]?'el-icon-minus': 'el-icon-plus']"></i><i class="el-icon-folder-opened"></i><span v-html="item.text"></span></p>
+              <div class="checkboxs" v-show="unFoldFieldItems[item.code]">
+                <el-checkbox class="checkbox" v-for="option in item.children" :key="option.code" :label="option.code">{{option.text}}</el-checkbox>
+              </div>
+            </li>
+          </ul>
+        </el-checkbox-group>
+    </el-dialog>
+    <el-dialog title="操作按钮设置" :visible.sync="dialogOperateVisible">
+      <div class="operate-container">
+        <div class="operate-slide" v-if="operateOptionKey">
+          <!-- 循环已存在按钮 -->
+          <el-button :class="{'active': editOperaIndex===index}" v-for="(item, index) in configs[operateOptionKey][operateConfigItemKey]" size="middle" :key="item.text" :type="item.type" @click="editOperate(index)">{{item.text}}</el-button>
+          <el-button type="text" @click="addOperate">+ 新增按钮</el-button>
+        </div>
+        <div class="operate-content">
+          <el-form :mode="operateSetting" label-width="140px" >
+            <el-form-item v-for="configItem in operateConfigs" :key="configItem.key" :label="`${configItem.name}：`">
+              <!-- 下拉选择 -->
+              <el-select v-if="configItem.type==='select'" v-model="operateSetting[configItem.key]" placeholder="请选择">
+                <el-option
+                  v-for="item in configItem.options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <!-- 文本输入 -->
+              <el-input class="form-item-input" v-else v-model="operateSetting[configItem.key]"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="saveOperateSetting">保存设置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+export default {
+  name: 'epx11-visual-list',
+  components: {
+    draggable
+  },
+  props: {
+    initConfigs: Object
+  },
+  data () {
+    return {
+      drag: false,
+      dialogTableVisible: false,
+      dialogOperateVisible: false,
+      operateConfigItemKey: '',
+      operateOptionKey: '',
+      fieldGroup: [],
+      unFoldFieldItems: {},
+      selectFields: [],
+      operateSetting: {},
+      // 页面配置
+      configs: {},
+      // 页面默认配置项
+      defaultConfigs: {
+        navConfigs: {
+          flag: true,
+          title: this.page.title || this.meta.title
+        },
+        searchConfigs: {
+          flag: true,
+          mode: 'keywords',
+          searchFields: [this.meta.label]
+        },
+        listConfigs: {
+          listFields: this.meta.getAttriNames(),
+          pageFlag: true, // 是否需要分页
+          multiSelectColumnFlag: true, // 是否显示多选框列
+          serialColumnFlag: true, // 是否显示序号列
+          operateColumnFlag: true, // 是否显示操作列
+          columnOperates: [{
+            text: '编辑',
+            handler: 'editEntity'
+          },
+          {
+            text: '删除',
+            handler: 'removeEntity'
+          }]
+        }
+      },
+      // 配置项
+      configOptions: [
+        {
+          key: 'navConfigs',
+          name: '导航配置',
+          children: [
+            { key: 'flag', name: '是否显示导航栏', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] },
+            { key: 'title', name: '页面标题', type: 'text' }
+          ]
+        },
+        {
+          key: 'searchConfigs',
+          name: '查询区域',
+          children: [
+            { key: 'flag', name: '是否显示查询区域', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] },
+            {
+              key: 'mode',
+              name: '查询模式',
+              type: 'radio',
+              options: [
+                {
+                  label: '关键字查询',
+                  value: 'keywords'
+                },
+                {
+                  label: '选项式查询',
+                  value: 'select'
+                },
+                {
+                  label: '字段组合查询',
+                  value: 'fields'
+                }
+              ]
+            },
+            {
+              key: 'searchFields',
+              name: '查询字段',
+              type: 'field' // 选取字段
+            }
+          ]
+        },
+        {
+          key: 'listConfigs',
+          name: '列表区域',
+          children: [
+            {
+              key: 'listFields',
+              name: '列表字段',
+              type: 'field'
+            },
+            {
+              key: 'pageFlag',
+              name: '是否需要分页',
+              type: 'radio',
+              options: [
+                { label: '需要', value: true },
+                { label: '不需要', value: false }
+              ]
+            },
+            {
+              key: 'multiSelectColumnFlag',
+              name: '是否显示多选框列',
+              type: 'radio',
+              options: [
+                { label: '需要', value: true },
+                { label: '不需要', value: false }
+              ]
+            },
+            {
+              key: 'serialColumnFlag',
+              name: '是否需要序号',
+              type: 'radio',
+              options: [
+                { label: '需要', value: true },
+                { label: '不需要', value: false }
+              ]
+            },
+            {
+              key: 'operateColumnFlag',
+              name: '是否需要操作列',
+              type: 'radio',
+              options: [
+                { label: '需要', value: true },
+                { label: '不需要', value: false }
+              ]
+            },
+            {
+              key: 'columnOperates',
+              name: '操作列',
+              type: 'operate'
+            }
+          ]
+        }
+      ],
+      // 按钮设置
+      operateConfigs: [
+        { key: 'text', name: '按钮名称', type: 'text' },
+        // { key: 'icon', name: '图标', type: 'text' },
+        {
+          key: 'type',
+          name: '按钮类型',
+          type: 'select',
+          options: [
+            { label: '默认按钮', value: 'default' },
+            { label: '主要按钮', value: 'primary' },
+            { label: '成功按钮', value: 'success' },
+            { label: '信息按钮', value: 'info' },
+            { label: '警告按钮', value: 'warning' },
+            { label: '危险按钮', value: 'danger' },
+            { label: '文本按钮', value: 'text' }
+          ]
+        },
+        {
+          key: 'handler',
+          name: '调用方法',
+          type: 'select',
+          options: [
+            { label: '进入新增页面', value: 'addEntity' },
+            { label: '进入编辑页面', value: 'editEntity' },
+            { label: '进入详情页面', value: 'viewEntity' },
+            { label: '删除记录', value: 'removeEntity' },
+            { label: '导入', value: 'entityImport' },
+            { label: '导出', value: 'entityExport' },
+            { label: '返回', value: 'backPage' },
+            { label: '跳转页面', value: 'goPage' },
+            { label: '通用请求', value: 'commonAction' }
+          ]
+        }
+        // { key: 'action', name: '请求命令', type: 'text' }
+      ]
+    }
+  },
+  computed: {
+    dragOptions () {
+      return {
+        animation: 200,
+        group: 'description',
+        disabled: false,
+        ghostClass: 'ghost'
+      }
+    },
+    fieldLabel () {
+      return (field) => {
+        let attriName = field
+        let attriLabel = ''
+        if (typeof field === 'object') {
+          attriName = field.attriName
+          attriLabel = field.attriLabel
+        }
+        // 查找该字段
+        if (!attriLabel) {
+          this.fieldGroup.forEach(fieldItem => {
+            const fieldConfig = fieldItem.children.find(item => item.code === attriName)
+            if (fieldConfig) {
+              attriLabel = fieldConfig.text
+            }
+          })
+        }
+        return attriLabel || attriName
+      }
+    },
+    isDefaultValue () {
+      return (optionKey, configItemKey) => {
+        // eslint-disable-next-line eqeqeq
+        return (this.configs[optionKey][configItemKey] == undefined && this.defaultConfigs[optionKey][configItemKey])
+      }
+    },
+    getValue: {
+      // get () {
+      //   return (optionKey, configItemKey) => {
+      //     // eslint-disable-next-line eqeqeq
+      //     return this.configs[optionKey][configItemKey] != undefined ? this.configs[optionKey][configItemKey] : this.defaultConfigs[optionKey][configItemKey]
+      //   }
+      // }
+      get () {
+        return (optionKey, configItemKey, type) => {
+          if ((type === 'field' || type === 'operate') && (typeof this.configs[optionKey][configItemKey] === 'object')) {
+            return this.configs[optionKey][configItemKey].length > 0 ? this.configs[optionKey][configItemKey] : this.defaultConfigs[optionKey][configItemKey]
+          } else {
+            // eslint-disable-next-line eqeqeq
+            return this.configs[optionKey][configItemKey] != undefined ? this.configs[optionKey][configItemKey] : this.defaultConfigs[optionKey][configItemKey]
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    configs: {
+      handler (v) {
+        this.$emit('updateConfig', v)
+      },
+      deep: true
+    },
+    selectFields (v) {
+      if (this.optionKey && this.configItemKey) {
+        const configItem = { ...this.configs[this.optionKey] }
+        configItem[this.configItemKey] = v
+        this.$set(this.configs, this.optionKey, configItem)
+      }
+    }
+  },
+  filters: {
+
+  },
+  methods: {
+    getConfigs () {
+      this.configs = { ...this.initConfigs }
+      this.configOptions.forEach(config => {
+        if (!this.configs[config.key]) {
+          const initValue = {}
+          config.children.forEach(item => {
+            if (item.type === 'field' || item.type === 'operate') {
+              // initValue[item.key] = []
+            }
+          })
+          this.$set(this.configs, config.key, initValue)
+        }
+      })
+    },
+    getFields () {
+      this.$http.entityFieldTreeStore({
+        metaId: this.$metaId,
+        allSub: true,
+        node: 'root'
+      })
+        .then(data => {
+          // eslint-disable-next-line no-eval
+          const fields = eval('(' + data + ')')
+          const fieldGroup = Object.values(fields) || []
+          fieldGroup.forEach(fieldItem => {
+            fieldItem.children.forEach(item => {
+              item.code = item.code.replace(/\./g, '|')
+            })
+          })
+          this.fieldGroup = [...fieldGroup]
+          const { code } = this.fieldGroup[0]
+          this.$set(this.unFoldFieldItems, code, true)
+        })
+    },
+    switchFold (code) {
+      const { [code]: flag } = this.unFoldFieldItems
+      this.$set(this.unFoldFieldItems, code, !flag)
+    },
+    addField (optionKey, configItemKey) {
+      this.optionKey = optionKey
+      this.configItemKey = configItemKey
+      const { [optionKey]: configItem } = this.configs
+      if (configItem[configItemKey].length > 0) {
+        this.selectFields = configItem[configItemKey] || this.defaultConfigs[optionKey][configItemKey] || []
+      } else {
+        this.selectFields = this.defaultConfigs[optionKey][configItemKey] || []
+      }
+      // this.selectFields = configItem[configItemKey] || this.defaultConfigs[optionKey][configItemKey] || []
+      this.dialogTableVisible = true
+    },
+    settingOperates (optionKey, configItemKey) {
+      this.operateOptionKey = optionKey
+      this.operateConfigItemKey = configItemKey
+      this.dialogOperateVisible = true
+    },
+    addOperate () {
+      this.editOperaIndex = null
+      this.operateSetting = {}
+    },
+    editOperate (index) {
+      const { [this.operateOptionKey]: configItem } = this.configs
+      const operates = configItem[this.operateConfigItemKey] || []
+      this.editOperaIndex = index
+      const editItem = operates[index]
+      this.operateSetting = { ...editItem }
+    },
+    saveOperateSetting () {
+      const configItem = { ...this.configs[this.operateOptionKey] }
+      const operates = [...(configItem[this.operateConfigItemKey] || [])]
+      if (this.editOperaIndex != null) {
+        operates.splice(this.editOperaIndex, 1, this.operateSetting)
+      } else {
+        operates.push(this.operateSetting)
+      }
+      configItem[this.operateConfigItemKey] = [...operates]
+      this.$set(this.configs, this.operateOptionKey, configItem)
+      this.editOperaIndex = null
+      this.operateSetting = {}
+    },
+    // 获取默认值
+    getDefaultValue () {
+
+    },
+    changeValue (optionKey, configItemKey, v) {
+      const configItem = { ...this.configs[optionKey] }
+      configItem[configItemKey] = v
+      this.$set(this.configs, optionKey, configItem)
+    },
+    changeDrag (optionKey, configItemKey) {
+      const configItem = { ...this.configs[optionKey] }
+      const { [optionKey]: defaultConfigItem } = this.defaultConfigs
+      if (!configItem[configItemKey]) {
+        configItem[configItemKey] = defaultConfigItem[configItemKey]
+        this.$set(this.configs, optionKey, configItem)
+      }
+    },
+    removeField (optionKey, configItemKey, index) {
+      const configItem = { ...this.configs[optionKey] }
+      const { [optionKey]: defaultConfigItem } = this.defaultConfigs
+      if (!configItem[configItemKey]) {
+        configItem[configItemKey] = defaultConfigItem[configItemKey]
+      }
+      configItem[configItemKey].splice(index, 1)
+      this.$set(this.configs, optionKey, configItem)
+    }
+  },
+  created () {
+    // 初始化configs
+    this.getConfigs()
+    this.getFields()
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: auto;
+  // background: #fff;
+  // padding: 20px;
+}
+.config-item {
+  background: #fff;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+.config-title {
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  height: 50px;
+  border-bottom: 1px solid #e3e3e3;
+  font-size: 16px;
+  i {
+    font-size: 18px;
+    margin-right: 6px;
+    color: #666;
+    position: relative;
+    top: -1px;
+  }
+}
+.form {
+  padding: 20px;
+}
+.form-item {
+  margin-bottom: 10px;
+  &:last-child {
+    margin: 0;
+  }
+ }
+ .form-item-input {
+    width: 300px;
+ }
+//  .field-list {
+
+//  }
+ .field-item {
+   display: inline-block;
+   padding: 6px 12px;
+   border:1px dashed rgba($--color-primary, .6);
+   @include bg_color_primary(.1);
+   @include font_color_primary;
+   line-height: 1;
+   margin: 4px 0;
+   margin-right: 10px;
+   cursor: move;
+   user-select: none;
+   i {
+     margin-left: 2px;
+     cursor: pointer;
+     color: #999
+   }
+ }
+ .checkbox-group {
+   font-size: inherit;
+ }
+ .checkboxs {
+   padding: 0 24px
+ }
+ .checkbox {
+   margin: 10px;
+   margin-right: 20px;
+ }
+ .field-item-title {
+   cursor: pointer;
+   margin: 24px 0;
+   i {
+     @include font_color_primary;
+     margin-right: 6px;
+   }
+ }
+.operate-container {
+  display: flex;
+  height: 400px;
+}
+.operate-slide {
+  width: 238px;
+  background-color: #fefefe;
+  border-radius: 4px;
+  border: solid 1px #eaedf4;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: auto;
+   &::v-deep {
+     .el-button {
+       width: 160px;
+       margin: 12px 0;
+       position: relative;
+
+     }
+   }
+   .active::after {
+      content: "\e791";
+      font-family: 'element-icons' !important;
+      position: absolute;
+      left: -20px;
+      @include font_color_primary;
+      font-size: 16px;
+    }
+ }
+.operate-content {
+  width: 640px;
+  background-color: #fefefe;
+  border-radius: 4px;
+  border: solid 1px #eaedf4;
+  padding: 24px 0;
+  margin-left: 20px;
+  overflow: auto;
+  &::v-deep {
+    .el-input {
+      width: 220px;
+    }
+  }
+ }
+ .is-default {
+   .fields-drag {
+     opacity: .6;
+   }
+   &::v-deep {
+     .is-checked {
+       .el-input__inner {
+         opacity: .6;
+       }
+       .el-radio__inner {
+        @include bg_color_primary(.6);
+        border-color:rgba($--color-primary, .6)
+       }
+       .el-radio__label {
+         color: rgba($--color-primary, .6);
+       }
+     }
+   }
+ }
+</style>

package/src/frame/views/visual/LoadPage.vue

@@ -0,0 +1,42 @@
+<script>
+import ComponentVue from './Component.vue'
+// 默认值逻辑
+export default {
+  name: 'epx-visual-load-page',
+  extends: ComponentVue,
+  methods: {
+    initDefaultConfigs () {
+      // 获取到该组件的默认配置
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        span: 24
+      }
+    },
+    initConfigOptions () {
+      const configOptions = [
+        { key: 'componentName', label: '组件名称', type: 'input' },
+        { key: 'pageId', label: '页面', type: 'object', object: 'FM_PAGE_CONFIG' },
+        { key: 'span', label: '宽度', type: 'select', options: this.spanOptions },
+        { key: 'xsspan', label: '移动端宽度', type: 'select', options: this.spanOptions },
+        { key: 'height', label: '高度', type: 'height' },
+        { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] }
+      ]
+      this.configOptions = configOptions
+    },
+    initConfig () {
+      const config = { ...this.compConfig }
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span
+      }
+      this.config = config
+      for (const key in this.config) {
+        const configOption = this.configOptions.find(item => item.key === key) || {}
+        if (configOption.type === 'field') {
+          this.selectFieldWay[key] = 'custom'
+        }
+      }
+    }
+  }
+}
+</script>