epx-frame 3.5.0-shpgy.1

package/src/frame/views/visual/config/Event.vue

@@ -0,0 +1,218 @@
+<template>
+<div>
+  <el-dropdown @command="createEvent">
+    <el-button size="medium" type="primary">
+      新建事件<i class="el-icon-arrow-down el-icon--right"></i>
+    </el-button>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item v-for="(text , key) in eventList" :key="key" :command="key">{{key}} {{text}}</el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+  <!-- 事件列表 -->
+  <ul class="event-list">
+    <li class="event-item" v-for="(item, key) in events" :key="key" >
+      <p class="event-title">{{`${key} ${eventList[key]}`}}</p>
+      <div class="event-type__list">
+        <div class="event" v-for="(event, index) in item" :key="index">
+          <p class="event-name">{{event}}</p>
+          <p class="event-operate">
+            <i class="el-icon-view" @click="showJsDrawer=true"></i>
+            <i class="el-icon-setting" @click="settingEvent(key, index)"></i>
+            <el-popconfirm
+              title="确认删除吗？"
+              @confirm="deleteEvent(key, index)"
+            >
+              <i class="el-icon-delete" slot="reference" ></i>
+            </el-popconfirm>
+          </p>
+        </div>
+      </div>
+    </li>
+</ul>
+<el-dialog
+    title="添加事件"
+    :visible.sync="eventDialog"
+    width="50%"
+  >
+    <div class="event-form__item">
+      <span>请选择事件：</span>
+      <el-select v-model="event.function">
+        <el-option value="new" label="添加新事件"></el-option>
+        <el-option v-for="item in functionList" :key="item" :value="item" :label="item"></el-option>
+      </el-select>
+    </div>
+    <div class="event-form__item" v-if="event.function==='new'">
+      <span>请输入事件名称：</span>
+      <el-input size="medium" v-model="event.functionName" ></el-input>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="eventDialog = false">取 消</el-button>
+      <el-button type="primary" @click="createFunction">确 定</el-button>
+    </span>
+  </el-dialog>
+  <el-drawer
+    size="50%"
+    :visible.sync="showJsDrawer"
+    direction="rtl"
+    :withHeader="false"
+  >
+    <epx-js-panel :value="pageGlobalConfigs.JS" @change="v=>changeItemConfigs('page', { JS: v })"></epx-js-panel>
+  </el-drawer>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'epx-visual-config-event',
+  props: {
+    value: Object,
+    defaultValue: String,
+    functionList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    pageGlobalConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    changeItemConfigs: {
+      type: Function,
+      default () {
+        return () => null
+      }
+    },
+    change: Function,
+    eventList: {
+      type: Object,
+      default () {
+        return {
+          onMounted: '组件加载时',
+          onDestory: '组件销毁时'
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      eventDialog: false,
+      event: {
+        function: 'new',
+        functionName: ''
+      },
+      showJsDrawer: false
+    }
+  },
+  computed: {
+    events: {
+      get () {
+        return this.value || {}
+      },
+      set (v) {
+        this.$emit('change-configs', v)
+      }
+    }
+  },
+  methods: {
+    createEvent (command) {
+      this.eventDialog = command
+      let name = command
+      let index = 1
+      while (this.functionList.includes(name)) {
+        name = command + index++
+      }
+      this.event = {
+        function: 'new',
+        functionName: name
+      }
+    },
+    settingEvent (key, index) {
+      this.eventDialog = key
+      const eventName = this.events[key][index]
+      this.event = {
+        function: eventName,
+        index: index
+      }
+    },
+    deleteEvent (key, index) {
+      const events = { ...this.events }
+      events[key].splice(index, 1)
+      this.events = events
+    },
+    createFunction () {
+      const events = { ...this.events }
+      const event = { ...this.event }
+      const { JS = '' } = this.pageGlobalConfigs
+      const typeEvents = this.events[this.eventDialog] || []
+
+      if (!event.function || event.function === 'new') {
+        if (!event.functionName) {
+          this.$message.error('请输入事件名')
+          return
+        }
+        if (this.functionList.includes(event.functionName)) {
+          this.$message.error('该事件名称已存在')
+          return
+        }
+        const js = JS + `
+  /**
+   * Component ${event.functionName}
+   */
+  export function ${event.functionName} () {
+
+  }
+      `
+        this.changeItemConfigs('page', { JS: js })
+      }
+      const eventName = (!event.function || event.function === 'new') ? event.functionName : event.function
+      if (event.index !== undefined) {
+        typeEvents[event.index] = eventName
+      } else {
+        typeEvents.push(eventName)
+      }
+      events[this.eventDialog] = typeEvents
+      this.events = events
+      this.eventDialog = false
+      this.showJsDrawer = true
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.event-form__item {
+  width: 220px;
+  margin: 10px 30px;
+}
+.event-title {
+  width: 100%;
+  background: rgb(248, 248, 248);
+  padding: 6px 10px;
+  margin: 6px 0;
+  line-height: 1;
+  color: #666
+}
+.event {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #666;
+  margin: 0 12px;
+  padding: 6px 12px;
+  line-height: 1;
+  cursor: pointer;
+  &:hover {
+    background: rgb(248, 248, 248);
+  }
+  i {
+    margin: 0 3px;
+    font-size: 16px;
+    &:hover {
+      color: #333
+    }
+  }
+}
+</style>

package/src/frame/views/visual/config/Field.vue

@@ -0,0 +1,494 @@
+<template>
+<div class="field">
+    <draggable
+      :list="fieldList"
+      class="list-group"
+      ghost-class="ghost"
+    >
+      <transition-group type="transition" name="flip-list" class="select-field-list">
+        <template v-for="(field, index) in fieldList" >
+          <li class="select-field-item list-group-item" v-if="field" :key="field.attriName || field">
+            <span class="field-order">
+              {{ fieldLabel(field) }}
+              <i class="el-icon-close" @click.stop="deleteField(index)"></i>
+            </span>
+          </li>
+        </template>
+      </transition-group>
+    </draggable>
+    <el-button class="add-field-btn" size="small" type="primary" @click="openAddFieldDialog">+ 添加字段</el-button>
+  <el-dialog
+    title="添加字段"
+    :visible.sync="showFieldDialog"
+    :append-to-body="true"
+    class="show-field-dialog"
+    destroy-on-close
+    width="800px"
+    top="10vh"
+  >
+   <div class="field-setting">
+     <div class="field-setting-item">
+      <p class="field-setting__header">
+        <span>选择字段</span>
+      </p>
+      <div class="field-setting__content">
+        <el-input class="field-setting__filter" suffix-icon="el-icon-search" size="medium" v-model="filterText"></el-input>
+        <el-tree
+          ref="tree"
+          class="field-tree"
+          show-checkbox
+          node-key="field"
+          :default-expanded-keys="defaultExpandKeys"
+          :data="fieldStore"
+          :auto-expand-parent="false"
+          :props="treeProps"
+          :check-strictly="true"
+          :filter-node-method="filterNode"
+          @check-change="checkFieldChange"
+        >
+          <span slot-scope="{ node, data }"  :style="data.isSub? {color: 'red'}: {}">
+            {{node.label}}
+          </span>
+        </el-tree>
+      </div>
+     </div>
+     <div class="field-setting-item">
+       <p class="field-setting__header">
+        <span>已选字段</span>
+      </p>
+      <div class="field-setting__content">
+        <div class="setting-fields__select">
+          <draggable
+            :list="settingFieldList"
+            class="list-group"
+            ghost-class="ghost"
+          >
+            <transition-group type="transition" name="flip-list" class="setting-fields__select--list">
+              <li v-for="(field, index) in settingFieldList" :class="['setting-fields__select--item', { active: selectField && selectField.attriName===(field.attriName || field)}]" :key="field.attriName || field">
+                <i class="el-icon-document"></i>
+                <span>{{fieldLabel(field)}}</span>
+                <i class="el-icon-delete fr" @click.stop="deleteSettingField(index)"></i>
+              </li>
+            </transition-group>
+          </draggable>
+        </div>
+    </div>
+     </div>
+   </div>
+   <div class="field-setting__button">
+     <el-button size="medium" @click="showFieldDialog=false">取消</el-button>
+     <el-button size="medium" type="primary" @click="saveSelectField">保存</el-button>
+   </div>
+  </el-dialog>
+</div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'epx-visual-config-field',
+  components: {
+    draggable
+  },
+  props: {
+    value: {
+      type: Array
+    },
+    defaultValue: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    treeFieldStore: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    metaId: String
+  },
+  data () {
+    return {
+      fieldList: [],
+      settingFieldList: [],
+      selectFieldList: [],
+      settingFieldWay: 'default',
+      showFieldDialog: false,
+      filterText: '',
+      treeProps: {
+        children: 'children',
+        label: 'text',
+        disabled: 'isSub'
+      }
+    }
+  },
+  watch: {
+    filterText (val) {
+      this.$refs.tree.filter(val)
+    },
+    fieldList (v) {
+      this.$emit('change-configs', v)
+    },
+    settingFieldWay (v) {
+      if (v === 'custom') {
+        this.$emit('change-configs', this.fieldList)
+      } else {
+        this.$emit('change-configs', null)
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getMetaRelationFields'
+    ]),
+    fieldStore () {
+      if (this.treeFieldStore && this.treeFieldStore.length > 0) {
+        return this.treeFieldStore
+      } else {
+        return this.getMetaRelationFields(this.metaId) || []
+      }
+    },
+    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
+        const getLabel = (arr) => {
+          for (const item of arr) {
+            if (item.field === attriName) return item.text
+            if (item.children) {
+              const label = getLabel(item.children)
+              if (label) return label
+            }
+          }
+        }
+        return getLabel(this.fieldStore) || attriName
+      }
+    },
+    defaultExpandKeys () {
+      return this.fieldStore[0] ? [this.fieldStore[0].field] : []
+    }
+  },
+  methods: {
+    filterNode (value, data) {
+      if (!value) return true
+      return data.text && data.text.indexOf(value) !== -1
+    },
+    getFieldStore () {
+      if (!this.metaId) return
+      if (!(this.fieldStore && this.fieldStore.length > 0)) {
+        this.$store.dispatch({
+          type: 'ADD_META_VIEW_FIELDS',
+          metaId: this.metaId
+        })
+      }
+    },
+    deleteField (index) {
+      this.fieldList.splice(index, 1)
+    },
+    deleteSettingField (index) {
+      const field = this.settingFieldList[index]
+      this.settingFieldList.splice(index, 1)
+      this.selectFieldList.splice(index, 1)
+      if (field) {
+        this.$refs.tree.setChecked(field.attriName || field, false)
+      }
+    },
+    orderField (field, index) {
+      let currentField = field
+      if (typeof currentField === 'string') {
+        currentField = { attriName: currentField }
+      }
+      this.fieldList.splice(index, 1, { ...currentField, sort: currentField.sort === 'desc' ? 'asc' : 'desc' })
+    },
+    selectAllField (value, index) {
+      const fieldList = this.fieldStore[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) {
+            this.$delete(this.selectFieldList, selectIndex)
+          }
+        })
+      }
+    },
+    saveSelectField () {
+      // 将已选择的字段修改到configs
+      this.fieldList = this.settingFieldList.map(item => item.replace('.', '|'))
+      this.showFieldDialog = false
+    },
+    swicthFieldStoreFold (index) {
+      const item = this.fieldStore[index]
+      this.$set(this.fieldStore, index, { ...item, isUnFold: !item.isUnFold })
+    },
+    openAddFieldDialog (key) {
+      this.selectFieldList = this.fieldList.map(item => (item.attriName || item).replace(/\./g, '|'))
+      this.settingFieldList = this.$_.cloneDeep(this.fieldList)
+      this.showFieldDialog = true
+      this.$nextTick(() => {
+        this.$refs.tree.setCheckedKeys(this.selectFieldList)
+      })
+    },
+    getChildParent (arr, field, parent) {
+      for (const item of arr) {
+        if (item.field === field) {
+          return parent
+        } else if (item.children) {
+          const child = this.getChildParent(item.children, field, item)
+          if (child) return child
+        }
+      }
+    },
+    checkFieldChange (data, isCheck) {
+      if (data.isMain || data.type === 'folder') {
+        if (isCheck) {
+          const children = data.children.filter(item => !item.isSub)
+          for (const child of children) {
+            this.$nextTick(() => {
+              this.$refs.tree.setChecked(child.field, true)
+            })
+          }
+        } else {
+          const children = data.children.filter(item => !item.isSub)
+          const flag = children.every(child => this.selectFieldList.includes(child.field))
+          if (flag) {
+            children.forEach(item => {
+              this.$refs.tree.setChecked(item.field, false)
+            })
+          }
+        }
+      } else {
+        const parent = this.getChildParent(this.fieldStore, data.field)
+        if (isCheck) {
+          const field = this.settingFieldList.find(item => item === data.field)
+          if (!field) {
+            this.selectFieldList.push(data.field)
+            this.settingFieldList.push(data.field)
+          }
+          if (parent && parent.isMain) {
+            const children = parent.children.filter(item => !item.isSub)
+            const flag = children.every(child => this.selectFieldList.includes(child.field))
+            if (flag) this.$refs.tree.setChecked(parent.field, true)
+          }
+        } else {
+          const index = this.selectFieldList.findIndex(item => item === data.field)
+          const fieldIndex = this.settingFieldList.findIndex(item => (item.attriName || item) === data.field)
+          if (index !== -1) {
+            this.settingFieldList.splice(fieldIndex, 1)
+            this.selectFieldList.splice(index, 1)
+          }
+          if (parent && parent.isMain) this.$refs.tree.setChecked(parent.field, false)
+        }
+      }
+    }
+  },
+  created () {
+    this.getFieldStore()
+    if (this.value) {
+      this.fieldList = [...this.value]
+      this.settingFieldWay = 'custom'
+    } else {
+      this.fieldList = [...this.defaultValue]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.field {
+  &::v-deep {
+    .el-dialog__body {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+}
+.list-group {
+  display: inline-block;
+}
+.select-field-list {
+  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;
+  i {
+    cursor: pointer;
+  }
+}
+
+.field-order {
+  i {
+    font-size: 16px;
+    margin: 0 -5px;
+  }
+  .active {
+    @include font_color_primary;
+  }
+}
+tree-field-checkbox-group {
+  font-size: 14px;
+}
+.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;
+}
+.setting-fields-container {
+  display: flex;
+  height: 400px;
+}
+.setting-fields__select {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+  .list-group {
+    width: 100%;
+  }
+}
+.setting-field__row {
+  margin-bottom: 10px;
+  &::v-deep {
+    >.el-form-item {
+      vertical-align: auto;
+      width: 100%;
+      display: flex;
+      .el-form-item__content {
+        flex: 1;
+      }
+    }
+  }
+}
+.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)
+  }
+}
+// 字段设置
+.field-setting {
+  display: flex;
+  width: 100%;
+  height: 660px;
+  box-sizing: border-box;
+  padding: 20px 10px 0;
+}
+.field-setting-item {
+  width: 360px;
+  display: flex;
+  flex-direction: column;
+  margin: 0 10px;
+  border: 1px solid #e3e3e3;
+  &:last-child {
+    width: 400px
+  }
+}
+
+.field-setting__header {
+  padding: 12px 20px;
+  line-height: 1;
+  border-bottom: 1px solid #e3e3e3;
+  span {
+    position: relative;
+    font-size: 16px;
+    padding-left: 8px;
+    font-weight: 600;
+    color: #333;
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 3px;
+      width: 4px;
+      height: 16px;
+      @include bg_color_primary;
+      border-radius: 2px;
+    }
+  }
+}
+.field-setting__content {
+  flex:1;
+  width: 100%;
+  overflow: auto;
+}
+
+.field-tree {
+  &::v-deep {
+    .el-tree-node__content {
+      height: 48px;
+    }
+  }
+}
+.field-setting__button {
+  overflow: hidden;
+  padding: 10px 20px;
+  text-align: right;
+}
+.no-select-field {
+  text-align: center;
+  color: #999;
+  margin-top:50%;
+}
+
+</style>