epx-frame 3.5.0-shpgy.1

package/src/frame/packages/export/Export.vue

@@ -0,0 +1,530 @@
+<template>
+  <div class="export-container">
+    <!-- 导出方式 -->
+    <el-card class="box-card noTop">
+      <div slot="header" class="clearfix">
+        <span>{{$t('export range')}}</span>
+      </div>
+        <el-radio-group v-model="exportWay">
+          <el-radio  label="1">{{$t('export all data')}}（{{total}}）</el-radio>
+          <el-radio  label="2">{{$t('exporting selected data')}}（{{selectIds.length}}）</el-radio>
+        </el-radio-group>
+    </el-card>
+    <!-- 导出字段 默认列表字段 -->
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>{{$t('derived field')}}</span>
+      </div>
+      <div class="export-fields">
+        <draggable
+        tag="ul"
+        :list="exportFields"
+        class="list-group"
+        ghost-class="ghost"
+      >
+         <transition-group type="transition" class="trans" name="flip-list">
+          <li
+            class="field"
+            v-for="(field,index) in exportFields"
+            :key="field.code"
+          >
+            <span class="list-group-item">{{ getText(field) }}</span>
+            <i class="el-icon-close" @click="deleteFields(field,index)"></i>
+          </li>
+
+        </transition-group>
+      </draggable>
+       <div :key="-1" class="field clear" v-show="exportFields.length>0" @click="clearFields"  >{{$t('a key to empty')}}</div>
+        <div :key="-2" class="field addData"  @click="showAddDialog"> + {{$t('add fields')}}</div>
+      </div>
+      <div class="opera" v-show="exportFields.length>0">
+        <el-button :class="{'export-loading': loading }" type="primary" @click="exportFn">
+          <i v-if="loading" class="el-icon-loading"></i>
+          <span>{{loading? $t('exporting, please wait patiently...'): $t('export')}}</span>
+        </el-button>
+        <el-button type="info" @click="backPage">{{$t('cancel')}}</el-button>
+      </div>
+    </el-card>
+    <!-- 选择字段弹窗 -->
+    <el-dialog :title="$t('select the export field')" :visible.sync="addDialog">
+      <el-checkbox-group v-model="checkedList">
+        <div v-for="(item,index) in allFields" :key="index">
+          <div class="select">
+            <span class="title" @click="switchExpandFields(index)" >
+              <i :class="{'el-icon-plus': !expandMap[index], 'el-icon-minus': expandMap[index]}"></i>
+            </span>
+            <span class="title">
+              <i class="el-icon-folder-opened"></i>
+            </span>
+            <span v-html="item.text" class="title"></span>
+          </div>
+          <div  class="export" v-show="expandMap[index]">
+            <el-checkbox :label="item.code" @change="val => checkAllFields(val, index)">{{$t('check all')}}</el-checkbox>
+            <el-checkbox v-for="option in item.children" :label="option.code" :key="option.code">{{option.text}}</el-checkbox>
+          </div>
+        </div>
+      </el-checkbox-group>
+      <div class="opera">
+        <!-- <el-checkbox @change="showAll">显示全部子集</el-checkbox> -->
+        <el-button type="primary" @click="selectFn" class="sureBtn">{{$t('determine')}}</el-button>
+        <el-button type="info" @click="addDialog=false" class="sureBtn">{{$t('cancel')}}</el-button>
+      </div>
+    </el-dialog>
+    <form ref="form" :action="$util.getRequestUrl({action: formParams.action, entityId: formParams.entityId})" method="post" enctype="multipart/form-data" target="_blank">
+      <input v-for="(value, key) in formParams" :key="key" type="hidden" :name="key" :value="value" />
+    </form>
+  </div>
+</template>
+
+<script>
+// 导出组件
+import draggable from 'vuedraggable'
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-export',
+  mixins: [component],
+  components: {
+    draggable
+  },
+  data () {
+    return {
+      exportWay: '1',
+      allFields: [],
+      exportFields: [],
+      addDialog: false,
+      checkedList: [],
+      expandMap: {
+        0: true
+      },
+      formParams: {},
+      loading: false
+    }
+  },
+  computed: {
+    params () {
+      const { params = {}, action } = this.$query
+      if (action) {
+        params.action = action
+      }
+      return params
+    },
+    total () {
+      const { total = 0 } = this.$query
+      return total || 0
+    },
+    selectIds () {
+      const { selects = '' } = this.$query
+      if (selects.length === 0) {
+        return []
+      }
+      return selects.split(',')
+    },
+    getText () {
+      return field => {
+        if (field.text) return field.text
+        // 查寻字段名
+        for (const fieldGroup of this.allFields) {
+          if (fieldGroup.children) {
+            for (const fieldItem of fieldGroup.children) {
+              if (fieldItem.code === field.code) {
+                return fieldItem.text
+              }
+            }
+          }
+        }
+        return field.code
+      }
+    }
+  },
+  methods: {
+    initExportFields () {
+      const { fields: queryFields = [] } = this.$query
+      const { fields = queryFields } = this.$configs
+      this.exportFields = fields.map(item => ({
+        code: item.attriName || item,
+        text: item.attriLabel || this.getLabel(item.attriName || item)
+      }))
+    },
+    getAllFields () {
+      const { showLinkFields = true } = this.$configs
+      this.$http.entityFieldTreeStore({
+        metaId: this.$metaId,
+        allSub: showLinkFields,
+        subFields: '',
+        node: 'root'
+      })
+        .then(data => {
+          // eslint-disable-next-line no-eval
+          const allFields = eval(`(${data})`)
+          allFields.forEach(item => {
+            item.children.forEach(child => {
+              child.code = child.code.replace('.', '|')
+            })
+          })
+          if (showLinkFields) {
+            this.allFields = allFields
+          } else {
+            this.allFields = [allFields[0]]
+          }
+        })
+    },
+    getLabel (field, arr = this.allFields) {
+      for (const item of arr) {
+        if (item.code === field) {
+          return item.text
+        } else if (item.children) {
+          const childText = this.getLabel(field, item.children)
+          if (childText) return childText
+        }
+      }
+    },
+    deleteFields (field, index) {
+      this.exportFields.splice(index, 1)
+    },
+    clearFields () {
+      this.exportFields = []
+    },
+    showAddDialog () {
+      this.addDialog = true
+      this.checkedList = this.exportFields.map(item => item.code)
+      // 把当前字段赋值
+    },
+    switchExpandFields (index) {
+      if (this.expandMap[index]) {
+        this.$set(this.expandMap, index, false)
+      } else {
+        this.$set(this.expandMap, index, true)
+      }
+    },
+    checkAllFields (val, index) {
+      // 选中所有选项
+      const fieldGroup = this.allFields[index]
+      if (fieldGroup.children) {
+        for (const field of fieldGroup.children) {
+          const fieldIndex = this.checkedList.findIndex(item => item === field.code)
+          // 不存在添加
+          if (val && fieldIndex === -1) {
+            this.checkedList.push(field.code)
+          }
+          // 存在删除
+          if (!val && fieldIndex !== -1) {
+            this.checkedList.splice(fieldIndex, 1)
+          }
+        }
+      }
+    },
+    selectFn () {
+      // 添加
+      this.addDialog = false
+      this.exportFields = []
+      for (var i = 0; i < this.checkedList.length; i++) {
+        let checkItem = null
+        for (const fieldItem of this.allFields) {
+          checkItem = fieldItem.children.find(field => field.code === this.checkedList[i])
+          if (checkItem) break
+        }
+        if (checkItem) {
+          this.exportFields.push(checkItem)
+        }
+      }
+    },
+    exportFn () {
+      if (this.selectIds.length === 0 && this.exportWay === '2') {
+        this.$message({
+          message: this.$t('please select a record'),
+          type: 'warning'
+        })
+        return
+      }
+      if (this.exportFields.length === 0) {
+        this.$message({
+          message: this.$t('export fields have not been added'),
+          type: 'warning'
+        })
+        return
+      }
+      var linkSet = new Set()
+      var meta = this.$meta
+      this.exportFields.forEach(function (field) {
+        if (field.code.indexOf('|') !== -1) {
+          var arr = field.code.split('|')
+          var prefix = arr[0]
+          meta.relatedEntitys.forEach(function (relation) {
+            if (relation.flag.toUpperCase() === prefix.toUpperCase() && (relation.relationSort === '2' || relation.relationSort === '3')) {
+              linkSet.add(relation.flag)
+            }
+          })
+          var f2 = ''
+          var temp = ''
+          if (arr.length > 2) {
+            var flagstr = (field.code || field).toLowerCase().replace(/\./g, '#')
+            flagstr = flagstr.substring(0, flagstr.lastIndexOf('#'))
+            var flags = flagstr.split('#')
+            for (var i = 0; i < flags.length; i++) {
+              var f1 = flags[i]
+              if (i !== 0) {
+                f2 += temp + f1 + '|left join,'
+                temp = temp + f1 + '#'
+              } else {
+                f2 += f2 + f1 + '|left join,'
+                temp = f1 + '#'
+              }
+            }
+            f2 = f2.substring(0, f2.length - 1)
+            if (f2) { linkSet.add(f2) }
+          }
+        }
+      })
+      const links = [...linkSet].join(',')
+      const { params: queryParams = {} } = this.$query
+      const params = {
+        action: 'entityExport',
+        entityId: this.$metaId,
+        outputType: 'excel',
+        link: links,
+        fieldMate: this.exportFields.map(item => item.code || item).join(','),
+        ...queryParams,
+        ...this.params
+        // scopeParams: JSON.stringify(scopeParams)
+      }
+
+      const { fields = [] } = this.$query
+      const functionField = fields.filter(item => {
+        return item.function
+      })
+      let functionList = []
+      if (functionField.length > 0) {
+        functionList = functionField.map(item => ({ dataIndex: item.attriName, function: item.function }))
+        params.fieldFunctions = JSON.stringify(functionList)
+      }
+
+      if (this.exportWay === '2') params.ids = this.selectIds.join(',')
+      this.formParams = params
+      if (this.loading) return
+      this.loading = true
+      this.$http.$post(params, {
+        responseType: 'blob',
+        onDownloadProgress: function (progressEvent) {
+          // 对原生进度事件的处理
+        }
+      })
+        .then(({ blob, filename }) => {
+          const objectUrl = URL.createObjectURL(blob)
+          var a = document.createElement('a')
+          document.body.appendChild(a)
+          a.href = objectUrl
+          a.download = filename || this.$moment().format('YYYYMMDDHHMMSS') + '.xlsx'
+          a.click()
+          window.URL.revokeObjectURL(objectUrl)
+          document.body.removeChild(a)
+          this.loading = false
+          this.$message.success(this.$t('have downloaded the file to the local'))
+        })
+        .catch(err => {
+          this.loading = false
+          this.$message.error(err.message)
+        })
+    }
+  },
+  created () {
+    this.getAllFields()
+    this.initExportFields()
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.text {
+    font-size: 14px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+  .clearfix{
+    font-size:16px;
+  }
+
+  .box-card {
+    // width: 480px;
+    margin-top: 14px;
+  }
+  .field{
+    padding:6px 10px;
+    // background-color: #e6f2fe;
+    border-radius: 2px;
+    border: solid 1px #b3d7fe;
+    border-top: dashed 1px #b3d7fe;
+    border-bottom: dashed 1px #b3d7fe;
+    font-size: 12px;
+    text-align: center;
+    margin-right: 12px;
+    color:#1f82ef;
+    // @include font_color_primary;
+    margin-bottom: 10px;
+  }
+  .clear{
+    height: 32px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    color:#666;
+    background-color: #f3f3f3;
+    border: solid 1px #e3e3e3;
+    cursor: pointer;
+  }
+  .addData{
+    height: 32px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    color:#e3e3e3;
+    @include bg_color_primary;
+    @include border_primary(1px,top);
+    border-bottom: none;
+    cursor: pointer;
+  }
+  .el-input{
+    width: 230px;
+    background-color: #ffffff;
+    border-radius: 2px;
+  }
+  ::v-deep{
+    .el-input__inner{
+    height: 16px;
+    line-height: 16px;
+    font-size: 7px;
+  }
+  .el-input__icon{
+    line-height: 16px;
+    width: 10px;
+  }
+  .el-input__suffix{
+    top:3px;
+  }
+  .el-input--suffix .el-input__inner{
+    padding: 12px;
+    font-size: 14px;
+  }
+  .el-icon-folder-opened{
+    margin: 0 4px 0 6px;
+    // @include font_color_primary;
+  }
+  .el-card__body{
+    padding-left: 44px;
+  }
+  .el-card__header{
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
+  .el-dialog__header{
+    border-bottom: 1px solid #e3e3e3;
+    padding: 21px;
+  }
+  .el-dialog__title {
+    font-size: 16px;
+  }
+  .el-dialog__body {
+    padding-top:10px;
+  }
+  .el-dialog{
+    width: 70%;
+  }
+  .el-button--info{
+    width: 98px;
+    // background-color: #8395a7;
+    background-color: #fff;
+    border-color: #e3e3e3;
+    color: #8395a7;
+  }
+  }
+  .search{
+    margin-right:8px;
+    line-height: 26px;
+  }
+  .export{
+    margin-left:40px;
+    display:flex;
+    flex-wrap:wrap;
+    margin-top:23px;
+    color:#666;
+    cursor: pointer;
+    margin-bottom: 34px;
+  }
+  .export .active {
+    @include font_color_primary;
+  }
+  .list-group-item {
+  cursor: move;
+}
+.el-icon-close{
+  cursor: pointer;
+  margin-left:2px;
+}
+
+.export-fields {
+  display: flex;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+.flip-list-move .field {
+  @include font_color_primary;
+  @include border_color_primary;
+}
+
+.flip-list-move {
+  transition: transform 0.5s;
+}
+.no-move {
+  transition: transform 0s;
+}
+
+.trans{
+  display:flex;
+  flex-wrap:wrap;
+}
+.select{
+  @include font_color_primary;
+  margin-top:20px;
+  // margin-bottom:25px;
+}
+.add,.jian{
+  height: 14px;
+}
+.file{
+  height:14px;
+  margin: 14px;
+  margin:0 8px
+}
+.opera{
+  text-align:center;
+  margin-top:62px
+}
+.noTop{
+  margin-top: 0;
+}
+.sureBtn{
+  width: 100px;
+  margin: 0 10px;
+}
+.title{
+  font-size:14px;
+  vertical-align: middle;
+}
+.export-loading {
+    @include bg_color_primary(.4);
+    @include border_color_primary(.4)
+  }
+</style>

package/src/frame/packages/export/index.js

@@ -0,0 +1,8 @@
+import Export from './Export.vue'
+
+/* istanbul ignore next */
+Export.install = function install (Vue) {
+  Vue.component(Export.name, Export)
+}
+
+export default Export

package/src/frame/packages/footer/Footer.vue

@@ -0,0 +1,142 @@
+<template>
+<div class="tabbar-container footer" v-if="showFooter&&expandMenus.length>0">
+  <van-tabbar class="tabbar" v-model="activeMenu" :fixed="true">
+    <van-tabbar-item v-for="menu in expandMenus" :key="menu.ID" :name="'default-'+menu.ID" >
+      <template v-slot:icon>
+        <i :class="['tabbar-icon', menu.FONT_ICON]"></i>
+      </template>
+      {{menu.NAME}}
+    </van-tabbar-item>
+    <van-tabbar-item name="more" v-if="foldMenus.length>0">
+      <template v-slot:icon>
+        <i class="tabbar-icon epx-icon-menu"></i>
+      </template>
+        {{$t('more')}}
+    </van-tabbar-item>
+  </van-tabbar>
+  <van-action-sheet v-model="showPopover" :round="false" :actions="foldMenus" @select="toPage" />
+</div>
+
+</template>
+
+<script>
+export default {
+  name: 'epx-footer',
+  props: {
+    menus: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      showPopover: false
+    }
+  },
+  computed: {
+    activeMenu: {
+      get () {
+        return this.$tab.key
+      },
+      set (v) {
+        if (v === 'more') {
+          this.showPopover = true
+        } else {
+          const nav = this.menus.find(item => item.ID === v.replace('default-', ''))
+          if (nav) {
+            this.toPage(nav)
+          }
+        }
+      }
+    },
+    expandMenus () {
+      const menus = [...this.menus]
+      if (menus.length > 4) {
+        menus.length = 4
+      }
+      return menus
+    },
+    foldMenus () {
+      return this.menus.filter((item, index) => index > 3).map(item => ({ ...item, icon: item.ICON, name: item.NAME }))
+    },
+    showFooter () {
+      if (!this.$tab || !this.$tab.routes) {
+        return true
+      } else {
+        const route = this.$tab.routes[0]
+        if (this.$tab.routes.length === 1 && !(route.routes && route.routes.length > 1)) {
+          return true
+        } else {
+          return false
+        }
+      }
+    }
+  },
+  methods: {
+    toPage (nav, type) {
+      this.showPopover = false
+      const key = 'default-' + nav.ID
+      const navRouter = this.$tabs.find(item => item.key === key)
+      if (type) {
+        this.$createPage({
+          moduleId: nav.ID,
+          title: nav.NAME,
+          component: 'module-index-page',
+          openType: '1'
+        })
+        this.$store.commit('CREATE_TAB', {
+          key: key,
+          moduleId: nav.ID,
+          title: nav.NAME,
+          pageId: nav.MAIN_PAGE
+        })
+        this.openType = null
+      } else if (navRouter) {
+        this.$store.commit('DESTORY_TAB', key)
+        this.$nextTick(() => {
+          this.$store.commit('CREATE_TAB', {
+            key: 'default-' + nav.ID,
+            moduleId: nav.ID,
+            component: 'module-index-page',
+            title: nav.NAME,
+            pageId: nav.MAIN_PAGE
+          })
+        })
+      } else {
+        this.$store.commit('CREATE_TAB', {
+          key: 'default-' + nav.ID,
+          moduleId: nav.ID,
+          component: 'module-index-page',
+          title: nav.NAME,
+          pageId: nav.MAIN_PAGE
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.tabbar-container {
+  height: 50px;
+  &::v-deep {
+    .van-overlay {
+      top: -50px;
+      z-index: 100!important;
+    }
+    .van-action-sheet {
+      bottom: 50px;
+      z-index: 100!important;
+    }
+  }
+}
+.tabbar {
+  z-index: 101;
+  box-sizing: content-box;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+</style>

package/src/frame/packages/footer/index.js

@@ -0,0 +1,3 @@
+import Footer from './Footer'
+
+export default Footer