epx-frame 3.5.0-shpgy.1

package/src/frame/components/permiss/jurisdiction.vue

@@ -0,0 +1,425 @@
+<template>
+  <div class="container">
+      <!-- <div class="title">角色授权 —— {{baseInfo.NAME}}({{baseInfo['SYSTEM#']}})</div> -->
+      <div class="jurisdiction" v-loading="loading">
+          <div class="left">
+            <div class="tree-title">未授权限</div>
+            <el-tree
+              class="menu-tree"
+              ref="left-tree"
+              :props="props"
+              :data="chooseTreeData"
+              node-key="id"
+              show-checkbox
+              >
+              <span slot-scope="{ node, data }" class="tree-node">
+                  <!-- 图标 -->
+                  <i :class="data.children.length>0? 'el-icon-folder-opened' : 'el-icon-document'"></i>
+                  <!-- 文字 -->
+                  <span>{{ node.label }}</span>
+              </span>
+            </el-tree>
+          </div>
+          <div class="center">
+              <div class="button-con">
+                  <el-button type="primary" @click="shouquan">授权<i class="el-icon-right"></i></el-button>
+                  <el-button type="danger" @click="xiaoquan"><i class="el-icon-back"></i>销权</el-button>
+              </div>
+          </div>
+          <div class="right">
+            <div class="tree-title-right title-three">
+              <div class="tree-title-item">已授权限</div>
+              <div class="tree-title-item">数据范围</div>
+              <div class="tree-title-item">字段范围</div>
+            </div>
+            <el-tree
+              :data="selectedTreeData"
+              show-checkbox
+              ref="select-tree"
+              :expand-on-click-node="false"
+              node-key="id"
+              >
+              <div class="custom-tree-node" slot-scope="{ node,data }">
+                <div class="line-tree">
+                  <div class="line-tree-item line-tree-item-one">
+                    <!-- 图标 -->
+                    <i :class="data.children.length>0? 'el-icon-folder-opened' : 'el-icon-document'"></i>
+                    {{ data.title }}
+                  </div>
+                  <!-- <el-tooltip class="item" effect="dark" :content="getDataScopeText(data.dataScope)" placement="top">
+                    <div class="line-tree-item line-tree-item-two" @click="setDataScope(data)">{{getDataScopeText(data.dataScope)}}</div>
+                  </el-tooltip> -->
+                  <div class="line-tree-item line-tree-item-two" :title="getDataScopeText(data.dataScope)" @click="setDataScope(data)">
+                    <span v-if="getDataScopeText(data.dataScope)">{{getDataScopeText(data.dataScope)}}</span>
+                    <span v-else class="setting-btn">设置</span>
+                  </div>
+                  <div class="line-tree-item line-tree-item-two" :title="getFielfScopeText(data.fieldScope)" @click="setFieldScope(data)">
+                    <span v-if="getFielfScopeText(data.fieldScope)">{{getFielfScopeText(data.fieldScope)}}</span>
+                    <span v-else class="setting-btn">设置</span>
+                  </div>
+                </div>
+              </div>
+            </el-tree>
+            <epx-scope-drawer :visible.sync="filterDrawer" :metaId="info.entityId" ref="filterDrawer" :params="scopeParams" :modeType="['FIXED_VALUE', 'SYSTEM_VARIABLE', 'DEFINED']">
+              <el-button :style="{ marginLeft: '45%' }" slot="button" type="primary" @click="saveScopeParams">保存</el-button>
+            </epx-scope-drawer>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-permiss-role-jurisdiction',
+  mixins: [component],
+  data () {
+    return {
+      props: {
+        label: 'title',
+        children: 'children'
+      },
+      baseInfo: {},
+      roleId: '',
+      selectedTreeData: [],
+      chooseTreeData: [],
+      selection: [],
+      loading: false,
+      info: {},
+      itemId: '',
+      filterDrawer: false,
+      scopeParams: []
+    }
+  },
+  computed: {
+    getDataScopeText () {
+      return (scope) => {
+        let text = ''
+        if (scope) {
+          text = JSON.parse(scope).scopeText
+        }
+        return text
+      }
+    },
+    getFielfScopeText () {
+      return (scope) => {
+        let text = ''
+        if (scope) {
+          text = JSON.parse(scope).fieldNames
+        }
+        return text
+      }
+    }
+  },
+  methods: {
+    setFieldScope (item) {
+      if (item.entityId) {
+        let fields = ''
+        let fieldType = '1'
+        if (item.fieldScope) {
+          fields = JSON.parse(item.fieldScope).fields
+          fieldType = JSON.parse(item.fieldScope).type
+        }
+        const scope = [{ field: 'ROLE', mode: 'equal', values: this.baseInfo.ID }, { field: 'RIGHT', mode: 'equal', values: item.id }]
+        const scopeParams = JSON.stringify(scope)
+        this.$http.find({
+          entityId: 'FM_ROLE_RIGHT',
+          scopeParams
+        })
+          .then(data => {
+            const query = {
+              metaId: item.entityId,
+              component: 'permiss-field-scope',
+              openType: '2',
+              title: '设置字段范围',
+              itemId: data.data.ID,
+              fieldType,
+              fields,
+              callback: this.getSelectedTreeData
+            }
+            this.$createPage({
+              ...query
+            })
+          })
+      } else {
+        this.$message.error('没有关联对象')
+      }
+    },
+    setDataScope (item) {
+      this.info = item
+      if (item.entityId) {
+        this.subItem = item
+        this.scopeParams = []
+        if (item.dataScope) {
+          this.scopeParams = JSON.parse(item.dataScope).scopeParams
+        }
+        const scope = [{ field: 'ROLE', mode: 'equal', values: this.baseInfo.ID }, { field: 'RIGHT', mode: 'equal', values: item.id }]
+        const scopeParams = JSON.stringify(scope)
+        this.$http.find({
+          entityId: 'FM_ROLE_RIGHT',
+          scopeParams
+        })
+          .then(data => {
+            this.itemId = data.data.ID
+            this.filterDrawer = true
+          })
+      } else {
+        this.$message.error('没有关联对象')
+      }
+    },
+    saveScopeParams () {
+      const scopeParams = this.$refs.filterDrawer.scopeParams || []
+      let scopeText = ''
+      // 防止数据获取不到
+      const _scopeParmas = scopeParams.map(item => {
+        const { lb = '', field, mode, values, rb = '', link, label, 'mode#': modelLabel = '是', 'values#': valueLabel, 'link#': linkLabel = '', valueType = '' } = item
+        const text = lb + label + modelLabel + (valueLabel || values) + rb + linkLabel
+        scopeText += text
+        if (valueType) {
+          return { lb, field, mode, valueType, values, rb, link }
+        }
+        return { lb, field, mode, values, rb, link }
+      })
+      const params = {
+        action: 'setDataScope',
+        entityId: 'FM_ROLE_RIGHT',
+        id: this.itemId
+      }
+      const scopeInfo = JSON.stringify({
+        scopeParams: _scopeParmas,
+        scopeText
+      })
+      this.$http.save({
+        ...params,
+        scopeInfo: scopeInfo
+      })
+        .then(() => {
+          this.getSelectedTreeData()
+          this.filterDrawer = false
+          this.$message.success('保存成功')
+        })
+        .catch(err => {
+          this.$message.error(err.message || '保存失败')
+        })
+    },
+    // 授权
+    shouquan () {
+      const select = this.$refs['left-tree'].getCheckedKeys()
+      const parent = this.$refs['left-tree'].getHalfCheckedKeys()
+      const selection = [...select, ...parent]
+      if (selection.length === 0) {
+        this.$message.error('请选择至少一条数据')
+        return
+      }
+      const rightIds = selection.join(',')
+      this.loading = true
+      this.$http.$post({
+        action: 'saveRoleRights',
+        entityId: 'FM_ROLE_RIGHT',
+        roleId: this.roleId,
+        rightIds
+      })
+        .then(data => {
+          this.loading = false
+          this.$message.success('授权成功！')
+          this.getChooseTreeData()
+          this.getSelectedTreeData()
+        })
+    },
+    // 销权
+    xiaoquan () {
+      // if (this.selection.length === 0) {
+      //   this.$message.error('请选择至少一条数据')
+      //   return
+      // }
+      // const rightIds = this.selection.map(item => item.id).join(',')
+      const selection = this.$refs['select-tree'].getCheckedKeys()
+      if (selection.length === 0) {
+        this.$message.error('请选择至少一条数据')
+        return
+      }
+      const rightIds = selection.join(',')
+      this.loading = true
+      this.$http.$post({
+        action: 'removeRoleRight',
+        entityId: 'FM_ROLE_RIGHT',
+        roleId: this.roleId,
+        rightIds
+      })
+        .then(data => {
+          this.loading = false
+          this.$message.success('销权成功！')
+          this.getChooseTreeData()
+          this.getSelectedTreeData()
+        })
+    },
+    getBaseInfo () {
+      this.$http.get({
+        entityId: 'FM_ROLE',
+        id: this.roleId
+      })
+        .then(data => {
+          this.baseInfo = data.data
+        })
+    },
+    getChooseTreeData () {
+      this.$http.list({
+        action: 'getChooseTreeData',
+        entityId: 'FM_ROLE_RIGHT',
+        roleId: this.roleId,
+        systemId: this.$tab.SYSTEM
+      })
+        .then(data => {
+          this.chooseTreeData = data
+        })
+    },
+    getSelectedTreeData () {
+      this.$http.list({
+        action: 'getSelectedTreeData',
+        entityId: 'FM_ROLE_RIGHT',
+        roleId: this.roleId,
+        systemId: this.$tab.SYSTEM
+      })
+        .then(data => {
+          this.selectedTreeData = data
+        })
+    }
+  },
+  created () {
+    this.roleId = this.$query.id
+    this.getBaseInfo()
+    this.getChooseTreeData()
+    this.getSelectedTreeData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container{
+    box-sizing: border-box;
+    height: 100%;
+    padding: 16px;
+    background-color: #fff;
+}
+.title{
+    height: 46px;
+    line-height: 46px;
+    font-size: 16px;
+    color: #666;
+    text-indent: 12px;
+    border-bottom: 1px dotted #e3e3e3;
+    margin-bottom: 16px;
+}
+.jurisdiction{
+    height: calc(100% - 70px);
+    display: flex;
+}
+.left{
+    flex: 3;
+    height: 100%;
+    border: 1px solid #e3e3e3;
+}
+.center{
+    flex: 1;
+    height: 100%;
+    display: flex;
+    align-content: center;
+    align-items: center;
+}
+.button-con{
+    text-align: center;
+}
+.button-con::v-deep .el-button{
+    margin-left: 0;
+    margin-bottom: 16px;
+}
+.right{
+    flex: 6;
+    height: 100%;
+    border: 1px solid #e3e3e3;
+}
+.setting{
+  text-indent: 6px;
+  cursor: pointer;
+}
+.menu-tree{
+  height: calc(100% - 46px);
+  overflow: auto;
+}
+.tree-title{
+  height: 45px;
+  line-height: 45px;
+  padding: 0 10px;
+  color: #909399;
+  font-size: 14px;
+  font-weight: bold;
+  border-bottom: 1px solid #e3e3e3;
+}
+// color:#606266;
+.left::v-deep .el-tree-node__content{
+  height: 45px;
+  border-bottom: 1px solid #e3e3e3;
+}
+.tree-title-right{
+  height: 46px;
+  line-height: 46px;
+  background-color: #f9f9f9;
+  border-bottom: 1px solid #e3e3e3;
+}
+.title-three{
+  display: flex;
+}
+.tree-title-item{
+  flex: 4;
+  text-indent: 16px;
+  border-right: 1px solid #e3e3e3;
+}
+.tree-title-four{
+  flex: 1;
+  text-align: center;
+  font-size: 20px;
+}
+.custom-tree-node{
+  width: calc(100% - 46px);
+  height: 100%;
+}
+.line-tree{
+  height: 100%;
+  display: flex;
+}
+.line-tree-item{
+  height: 100%;
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.line-tree-item-one{
+  flex: 4;
+  i{
+    margin-right: 8px;
+    font-size: 16px;
+    color: #1f82ef;
+  }
+}
+.line-tree-item-two{
+  flex:5;
+  margin: 0 10px;
+  overflow: hidden;
+}
+.line-tree-item-two:hover{
+  color: #1f82ef;
+}
+.setting-btn{
+  color: #1f82ef;
+  margin-left: 20px;
+}
+::v-deep{
+  // .el-tree-node{
+  .el-tree-node__content{
+    box-sizing: border-box;
+    height: 46px;
+    padding: 12px 0;
+    border-bottom: 1px solid #e3e3e3;
+  }
+}
+</style>

package/src/frame/components/report/ChartLine.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="container" v-loading="loading" :style="{height:itemHeight}" v-if="hasData">
+    <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"></div>
+  </div>
+</template>
+
+<script>
+import component from '@/utils/mixins/component'
+import { cool, light } from '@/utils/chartTheme.js'
+export default {
+  name: 'epx-design-chart-line',
+  mixins: [component],
+  props: {
+    config: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    initConfig: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    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-data-line' } = 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: '',
+      hasData: true,
+      loading: true
+    }
+  },
+  watch: {
+    scopeParams () {
+      this.getColumnsOrLineChartData()
+    }
+  },
+  methods: {
+    onLoad () {
+      this.$http.find({
+        ...this.chartParams
+      })
+        .then(data => {
+          this.reportId = data.data.ID
+          this.chartType = data.data.CHART_TYPE
+          this.getColumnsOrLineChartData()
+        })
+    },
+    getChartData () {
+      this.$http.$request({
+        action: 'getChartData',
+        entityId: 'FM_REPORT_BASE',
+        reportId: this.reportId
+      })
+        .then(data => {
+        })
+    },
+    getColumnsOrLineChartData () {
+      this.loading = true
+      const params = {
+        action: 'getReportData',
+        reportType: 'line',
+        entityId: this.data.staObject,
+        reportId: this.reportId,
+        ...this.reportScope
+
+      }
+      if (this.scopeParams) {
+        params.scopeParams = JSON.stringify(this.scopeParams)
+      }
+      this.$http.save(params)
+        .then(data => {
+          this.loading = false
+          var lineMap = data.lineMap
+          // eslint-disable-next-line no-eval
+          var categories = eval('(' + data.categories + ')')
+          // eslint-disable-next-line no-eval
+          const arr = eval('(' + data.series + ')')
+          const abscissa = []
+          const series = arr
+          let num = 0
+          series.forEach(item => {
+            abscissa.push(item.name)
+            item.type = 'line'
+            item.smooth = true
+            const itemData = []
+            item.data.forEach((dataitem, dataindex) => {
+              itemData[dataindex] = {}
+              itemData[dataindex].name = item.name
+              itemData[dataindex].value = dataitem
+              if (dataitem > 0) num++
+              if (categories.length > 0) {
+                itemData[dataindex].id = lineMap[item.name + categories[dataindex]]
+              } else {
+                itemData[dataindex].id = lineMap[item.name]
+              }
+            })
+            item.data = [...itemData]
+          })
+          // const abscissa = []
+          // arr.forEach(item => {
+          //   abscissa.push(item.name)
+          // })
+          if (num === 0) {
+            this.hasData = false
+          }
+          var _this = this
+          // 基于准备好的dom，初始化echarts实例
+          this.myChart = this.echarts.init(this.$refs.main, this.theme)
+          // 绘制图表
+          this.myChart.setOption({
+            tooltip: {
+              trigger: 'axis'
+            },
+            // toolbox: {
+            //   feature: {
+            //     saveAsImage: {}
+            //   }
+            // },
+            grid: {
+              y: 30
+            },
+            legend: {
+              // data: categories
+              bottom: 0,
+              left: 'center',
+              data: abscissa
+            },
+            xAxis: {
+              type: 'category',
+              boundaryGap: false,
+              // data: abscissa
+              data: categories
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: series
+          })
+          this.myChart.on('click', function (params) {
+            const { id = {} } = params.data
+            if (!id.rowId && !id.colId) 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-design-detail-list',
+              row: id.rowId,
+              col: id.colId,
+              queryParams: _this.reportScope,
+              scopeParams: this.scopeParams
+            }
+            _this.$createPage({
+              ...query
+            })
+          })
+        })
+    }
+  },
+  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.getColumnsOrLineChartData()
+        } 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{
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.header{
+  flex-shrink: 0;
+  color: #666;
+  font-size: 16px;
+  font-weight: 600;
+  font-family: 'MicrosoftYaHei-Bold';
+  line-height: 1;
+}
+.title{
+  margin-left: 10px;
+}
+</style>