epx-frame 3.5.0-shpgy.1

package/src/frame/packages/category-list/index.js

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

package/src/frame/packages/chart/Chart.vue

@@ -0,0 +1,124 @@
+<template>
+  <component :style="$component.style" v-if="componentName" :is="'epx-' + componentName" :init-config='initConfig' :scopeParams="scopeParams" :current-query="this.$query"></component>
+</template>
+
+<script>
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-report-chart',
+  mixins: [component],
+  props: {
+    config: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      componentName: '',
+      initConfig: {},
+      searchScopeParams: [],
+      reportScope: []
+    }
+  },
+  computed: {
+    scopeParams () {
+      const { scopeParams: configScopeParams = [] } = this.$configs
+      const { scopeParams: queryScopeParams = [] } = this.$query
+      const scopeParams = []
+      if (typeof queryScopeParams === 'object' && !Array.isArray(queryScopeParams)) {
+        Object.entries(queryScopeParams).forEach(([key, value]) => {
+          scopeParams.push({
+            field: key,
+            ...value
+          })
+        })
+      } else {
+        scopeParams.push(...queryScopeParams)
+      }
+      // 格式化scopeParams
+      const _scopeParams = this.$_.cloneDeep(scopeParams.concat([...configScopeParams, ...(this.searchScopeParams || [])]))
+      // eslint-disable-next-line no-unused-vars
+      const that = this
+      for (const scopeKey in _scopeParams) {
+        const scope = _scopeParams[scopeKey]
+        let values = scope.values
+        if (/\$\[(.+)\]/.test(values)) {
+          values = values.replace(/\$\[(.+)\]/, (match, key) => {
+            try {
+              // eslint-disable-next-line no-eval
+              return eval(`that.$query.${key}`) || eval(`that.$tab.${key}`) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        scope.values = values
+      }
+      return _scopeParams
+    }
+  },
+  created () {
+    // 编号
+    const { id: queryId } = this.$query
+    const { id: defaultId = queryId, reportId, code: defaultCode = '', queryParams: defaultQueryParams = {} } = this.$configs || {}
+    const { id = defaultId, code = defaultCode, queryParams = defaultQueryParams } = this.config || {}
+    const params = {
+      entityId: 'FM_REPORT_BASE',
+      ...queryParams
+    }
+    if (id || reportId) {
+      params.id = id || reportId
+    } else {
+      params.action = 'find'
+      if (code) {
+        params['scope.CODE'] = code
+      }
+    }
+    this.$http.get(params)
+      .then(data => {
+        if (data.data.SCOPE) {
+          try {
+            const scope = JSON.parse(data.data.SCOPE)
+            this.reportScope = scope.scopeParams || scope
+          } catch (error) {
+
+          }
+        }
+        const reportType = data.data.TYPE
+        const chartType = data.data.CHART_TYPE
+        const reportId = data.data.ID
+        const title = data.data.NAME
+        const staObject = data.data.OBJECT
+        if (reportType === '1') {
+          this.componentName = 'design-report-table'
+          this.initConfig = { ...this.config, ...this.$configs, reportInfo: data.data, reportId, chartType, title, staObject }
+        } else if (reportType === '2') {
+          if (chartType === 'pie' || chartType === 'circularPie') {
+            this.initConfig = { ...this.config, ...this.$configs, reportInfo: data.data, reportId, chartType, title, staObject }
+            this.componentName = 'design-chart-pie'
+          }
+          if (chartType === 'column' || chartType === 'horiColumn') {
+            this.initConfig = { ...this.config, ...this.$configs, reportInfo: data.data, reportId, chartType, title, staObject }
+            this.componentName = 'design-chart-column'
+          }
+          if (chartType === 'line') {
+            this.initConfig = { ...this.config, ...this.$configs, reportInfo: data.data, reportId, chartType, title, staObject }
+            this.componentName = 'design-chart-line'
+          }
+        }
+      })
+  },
+  mounted () {
+    this.$event.on('search', (scopeParams) => {
+      this.searchScopeParams = scopeParams
+    })
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/frame/packages/chart/ChartColumn.vue

@@ -0,0 +1,365 @@
+<template>
+  <div class="container" v-loading="loading" :style="{height:itemHeight}" >
+    <p class="header" v-if="showTitle && title">
+      <!-- <epx-icon v-if="iconCls" class="icon" :name="iconCls" ></epx-icon> -->
+      <span class="title">{{title}}</span>
+    </p>
+    <div ref="main" class="main" v-if="hasData">
+      <div class="error" v-if="error">
+        <i class="epx-icon-color-a-500"></i>
+      </div>
+    </div>
+    <el-dialog :title="$t('color selection')" width="30%" top="30vh" :visible.sync="dialogColorVisible">
+      <div :style="{textAlign: 'center'}">
+        <el-color-picker v-model="color" @change="colorChange"></el-color-picker>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { cool, light } from '@/utils/chartTheme.js'
+export default {
+  name: 'epx-design-chart-column',
+  props: {
+    config: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    initConfig: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    designMode: {
+      type: Boolean,
+      default: false
+    },
+    scopeParams: Array
+  },
+  computed: {
+    detailPage () {
+      const { detailPage = 'v_report_list' } = this.data
+      return detailPage
+    },
+    detailPageMeta () {
+      const { detailPageMeta = '' } = this.data
+      return detailPageMeta
+    },
+    iconCls () {
+      const { iconCls = 'el-icon-s-data' } = this.data
+      return iconCls
+    },
+    showTitle () {
+      const { showTitle = true } = this.data
+      return showTitle
+    },
+    title () {
+      const { title = '' } = this.data
+      return title
+    },
+    itemHeight () {
+      const { height = '' } = this.data
+      return height
+    },
+    reportScope () {
+      const { reportScope = {} } = this.data
+      return this.$formatParams(reportScope)
+    },
+    theme () {
+      const { theme = 'light' } = this.data
+      return theme
+    }
+  },
+  data () {
+    return {
+      chartParams: {},
+      data: {},
+      reportId: '',
+      chartType: '',
+      color: '',
+      dialogColorVisible: false,
+      chartId: '',
+      hasData: true,
+      loading: true,
+      error: false
+    }
+  },
+  watch: {
+    scopeParams () {
+      this.setChart()
+    }
+  },
+  methods: {
+    colorChange () {
+      this.$http.update({
+        entityId: 'FM_REPORT_ITEM',
+        'bean.ID': this.chartId,
+        'bean.ITEM_COLOR': this.color
+      })
+        .then(data => {
+          this.setChart()
+          this.dialogColorVisible = false
+        })
+    },
+    onLoad () {
+      this.$http.find({
+        ...this.chartParams
+      })
+        .then(data => {
+          this.reportId = data.data.ID
+          this.chartType = data.data.CHART_TYPE
+          this.setChart()
+        })
+    },
+    getReportConfig () {
+      const configs = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          x: 60,
+          y: 30,
+          x2: 60,
+          y2: 30,
+          borderWidth: 1
+        },
+        legend: {
+          bottom: this.$isMobile ? -20 : 0,
+          left: 'center'
+        },
+        xAxis: {
+          type: 'category'
+        },
+        yAxis: {
+          minInterval: 1, // 坐标轴最小间隔大小,设置成1保证坐标轴分割刻度显示成整数。
+          type: 'value'
+        }
+      }
+      if (this.chartType === 'horiColumn') {
+        configs.xAxis = {
+          minInterval: 1,
+          type: 'value',
+          nameTextStyle: {
+            width: 20
+          }
+        }
+        configs.yAxis = {
+          type: 'category'
+        }
+      }
+      return this.$http.list({
+        entityId: 'FM_REPORT_PARAM',
+        'scope.REPORT': this.reportId
+      })
+        .then(data => {
+          const _configs = {}
+          data.entitys.forEach(item => {
+            const key = item.NAME
+            // eslint-disable-next-line no-eval
+            let value = item.VALUE === 'true' || item.VALUE === 'false' ? eval(item.VALUE) : item.VALUE
+            if (/^\[.*\]$/.test(value) || /^{.*}$/.test(value)) {
+              value = JSON.parse(value)
+            }
+            _configs[key] = value
+            // this.$set(this.data, item.NAME, item.VALUE)
+          })
+          for (const key in _configs) {
+            const value = _configs[key]
+            if (key === 'legend._orient' || key === 'legend._orient.horizontal' || key === 'legend._orient.vertical') {
+              const { 'legend._orient': legendOrient = 'bottom', 'legend._orient.horizontal': legendOrientH = 'center', 'legend._orient.vertical': legendOrientV = 'center' } = _configs
+              if (!configs.legend) configs.legend = {}
+              if (legendOrient === 'top' || legendOrient === 'bottom') {
+                configs.legend.orient = 'horizontal'
+                configs.legend.top = legendOrient === 'top' ? '20px' : 'auto'
+                configs.legend.bottom = legendOrient === 'bottom' ? '20px' : 'auto'
+                configs.legend.left = legendOrientH === 'left' ? '20px' : legendOrientH === 'center' ? 'center' : 'auto'
+                configs.legend.right = legendOrientH === 'right' ? '20px' : 'auto'
+              } else {
+                configs.legend.orient = 'vertical'
+                configs.legend.top = legendOrientV === 'top' ? '20px' : legendOrientV === 'center' ? 'center' : 'auto'
+                configs.legend.bottom = legendOrientV === 'bottom' ? '20px' : 'auto'
+                configs.legend.left = legendOrient === 'left' ? '20px' : 'auto'
+                configs.legend.right = legendOrient === 'right' ? '20px' : 'auto'
+              }
+              delete _configs['legend._orient']
+              delete _configs['legend._orient.horizontal']
+              delete _configs['legend._orient.vertical']
+            } else if (key.includes('series-pie.')) {
+              if (key === 'series-line.radius') {
+                if (value) configs.series[0].radius = [value[0] + '%', value[1] + '%']
+              } else {
+                const keys = key.replace(/series-pie./, '').split('.')
+                let object = configs.series[0]
+                keys.forEach((item, index) => {
+                  if (index === keys.length - 1) {
+                    object[item] = value
+                  } else {
+                    if (!object[item]) object[item] = {}
+                    object = object[item]
+                  }
+                })
+              }
+            } else if (key && key.includes('.')) {
+              const keys = key.split('.')
+              let object = configs
+              keys.forEach((item, index) => {
+                if (index === keys.length - 1) {
+                  object[item] = value
+                } else {
+                  if (!object[item]) object[item] = {}
+                  object = object[item]
+                }
+              })
+            }
+          }
+          this.reportConfigs = configs
+          return configs
+        })
+    },
+    getColumnsOrLineChartData () {
+      this.loading = true
+      const { reportInfo = {} } = this.data
+      const params = {
+        action: reportInfo.REPORT_ACTION || 'getReportData',
+        reportType: 'column',
+        entityId: this.data.staObject,
+        reportId: this.reportId,
+        ...this.reportScope
+      }
+      if (this.scopeParams) {
+        params.scopeParams = JSON.stringify(this.scopeParams)
+      }
+      return this.$http.save(params)
+        .then(data => {
+          this.loading = false
+          // eslint-disable-next-line no-eval
+          var categories = eval('(' + data.categories + ')')
+          const { lineMap = {} } = data
+          let series = []
+          if (data.colItemSize === 0) {
+          // eslint-disable-next-line no-eval
+            const arr = eval('(' + data.onlyRowData + ')')
+            series = [{ data: arr, type: 'bar' }]
+          } else {
+          // eslint-disable-next-line no-eval
+            const arr = eval('(' + data.series + ')')
+            series = arr.map(item => ({ name: item.name, data: item.data.map((item, index) => ({ name: categories[index], value: item })), type: 'bar' }))
+          }
+          return { series, legend: data.colItemSize === 0 ? [] : series.map(item => item.name), categories, lineMap }
+        })
+        .catch(err => {
+          this.loading = false
+          this.error = true
+          this.$message.error(err.message)
+        })
+    },
+    setChart () {
+      const _this = this
+      Promise.all([this.getReportConfig(), this.getColumnsOrLineChartData()])
+        .then(([configs, { categories, legend, series, lineMap }]) => {
+          // 基于准备好的dom，初始化echarts实例
+          this.myChart = this.echarts.init(this.$refs.main, this.theme)
+          // 绘制图表
+          configs.series = series
+          configs.legend.data = legend
+          if (this.chartType === 'horiColumn') {
+            configs.yAxis.data = categories
+          } else {
+            configs.xAxis.data = categories
+          }
+          this.myChart.setOption(configs)
+          this.myChart.on('click', function (params) {
+            const { reportInfo = {} } = _this.data
+            const name = params.seriesName + params.name
+            const id = lineMap[name] || {}
+            if (!id.rowId && !id.colId) return
+            if (_this.designMode || _this.data.clickFlag === false) return
+            const query = {
+              flag: _this.detailPage,
+              metaId: _this.detailPageMeta || _this.data.staObject || 'FM_REPORT_BASE',
+              pageType: 'DETAIL',
+              reportId: _this.reportId,
+              staObject: _this.data.staObject,
+              component: 'report-form-list-page',
+              row: id.rowId,
+              col: id.colId,
+              pageId: reportInfo.CELL_PAGE,
+              queryParams: _this.reportScope
+            }
+            _this.$createPage({
+              ...query
+            })
+          })
+          this.myChart.on('contextmenu', function (params) {
+            if (!_this.designMode) return
+            _this.color = params.color
+            _this.chartId = params.data.id.rowId
+            _this.dialogColorVisible = true
+            window.event.preventDefault()
+          })
+        })
+    }
+  },
+  created () {
+    import('echarts')
+      .then(echarts => {
+        this.echarts = echarts
+        echarts.registerTheme('light', light)
+        echarts.registerTheme('cool', cool)
+        this.data = { ...this.initConfig, ...this.config }
+        if (this.initConfig.reportId) {
+          this.reportId = this.initConfig.reportId
+          this.chartType = this.initConfig.chartType
+          this.setChart()
+        } else {
+          this.chartParams = this.config.queryParams
+          this.onLoad()
+        }
+      })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 360px;
+  box-sizing: border-box;
+  padding: 16px 0;
+  background-color: #fff;
+  overflow: auto;
+}
+.main{
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+.error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  > i {
+    font-size: 120px;
+  }
+}
+.header{
+  flex-shrink: 0;
+  color: #666;
+  font-size: 18px;
+  font-weight: 600;
+  font-family: 'MicrosoftYaHei-Bold';
+  line-height: 1;
+}
+.title{
+  margin-left: 10px;
+}
+</style>