@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/views/report/DesignReport.vue

@@ -0,0 +1,1229 @@
+<template>
+  <div class="container" @click="showPopover=null">
+      <div class="design-operates" v-if="designOperates.length>0">
+        <div class="button-group">
+            <template v-for="operate in designOperates" :key="operate.text">
+              <el-dropdown v-if="operate.children&&operate.children.length>0"  trigger="click">
+                <el-button type="primary" size="default">
+                  {{operate.text}}<i class="el-icon-arrow-down el-icon--right"></i>
+                </el-button>
+                <template v-slot:dropdown><el-dropdown-menu>
+                  <template v-for="itemChildren in operate.children" :key="itemChildren.text">
+                    <el-dropdown-item @click="handler(itemChildren)">{{itemChildren.text}}</el-dropdown-item>
+                  </template>
+                </el-dropdown-menu></template>
+              </el-dropdown>
+              <template v-else>
+              <el-button v-if="checkShow(operate)" size="default" :key="operate.text" :type="operate.ui" @click="handler(operate)">{{operate.text}}</el-button>
+              </template>
+            </template>
+        </div>
+      </div>
+      <div class="design-content">
+          <div class="content-left">
+            <div class="left-top">
+                <div class="left-title" v-if="!isOne">横向统计项</div>
+                <div class="left-top-content">
+                    <div class="top-button">
+                        <el-button plain size="small" @click="volumeAdd('1')">批量添加</el-button>
+                        <el-button plain size="small" @click="singleAdd('1')">添加</el-button>
+                        <el-button plain size="small" @click="singleEdit('row')">编辑</el-button>
+                        <el-button plain size="small" @click="deleteItem('row')">删除</el-button>
+                    </div>
+                    <div class="tree-content">
+                      <el-tree
+                        :data="rowList"
+                        show-checkbox
+                        :check-strictly="true"
+                        default-expand-all
+                        :props="{label: 'title', children: 'children'}"
+                        node-key="id"
+                        ref="treerow"
+                        @node-contextmenu="showContextmenu"
+                      >
+                        <template v-slot="{ node, data }"><span>
+                          <el-popover
+                            popper-class="tree-opera-popover"
+                            :value="showPopover===data.id"
+                            trigger="manual"
+                            placement="right-start"
+                          >
+                            <template v-slot:reference><span class="tree-node">
+                              <span>{{ node.label }}</span>
+                          </span></template>
+                            <ul class="opera-list">
+                              <li @click="statisticsSetting('editStatistics',data,'1')">编辑统计项</li>
+                              <li @click="statisticsSetting('addSameLeval',data,'1')">添加同级统计项</li>
+                              <li @click="statisticsSetting('addChildren',data,'1')">添加子级统计项</li>
+                              <li @click="statisticsSetting('volumeAddChildren',data,'1')">批量添加子级统计项</li>
+                              <li @click="statisticsSetting('deteleStatistics',data,'1')">删除统计项</li>
+                            </ul>
+                          </el-popover>
+                        </span></template>
+                      </el-tree>
+                    </div>
+                </div>
+            </div>
+            <div class="left-bottom" v-if="!isOne">
+                <div>纵向统计项</div>
+                <div class="left-top-content">
+                    <div class="top-button">
+                        <el-button plain size="small" @click="volumeAdd('2')">批量添加</el-button>
+                        <el-button plain size="small" @click="singleAdd('2')">添加</el-button>
+                        <el-button plain size="small" @click="singleEdit('col')">编辑</el-button>
+                        <el-button plain size="small" @click="deleteItem('col')">删除</el-button>
+                    </div>
+                    <div class="tree-content">
+                      <el-tree
+                        :data="columnList"
+                        show-checkbox
+                        :check-strictly="true"
+                        default-expand-all
+                        :props="{label: 'title', children: 'children'}"
+                        node-key="id"
+                        ref="treeclo"
+                        @node-contextmenu="showContextmenu"
+                      >
+                        <template v-slot="{ node, data }"><span>
+                          <el-popover
+                            popper-class="tree-opera-popover"
+                            :value="showPopover===data.id"
+                            trigger="manual"
+                            placement="right-start"
+                          >
+                            <template v-slot:reference><span class="tree-node">
+                              <span>{{ node.label }}</span>
+                          </span></template>
+                            <ul class="opera-list">
+                              <li @click="statisticsSetting('editStatistics',data,'2')">编辑统计项</li>
+                              <li @click="statisticsSetting('addSameLeval',data,'2')">添加同级统计项</li>
+                              <li @click="statisticsSetting('addChildren',data,'2')">添加子级统计项</li>
+                              <li @click="statisticsSetting('volumeAddChildren',data,'2')">批量添加子级统计项</li>
+                              <li @click="statisticsSetting('deteleStatistics',data,'2')">删除统计项</li>
+                            </ul>
+                          </el-popover>
+                        </span></template>
+                      </el-tree>
+                    </div>
+                </div>
+            </div>
+          </div>
+          <div class="content-right">
+            <epx-page v-if="component&&showComponent" @refreshData="refreshData" @update="v=>updateCondition(v)" :designMode="true" :metaId="$metaId" :inline="true" :component="component" :init-config='initConfig'></epx-page>
+            <!-- <epx-page :flag="route.flag" :metaId="route.metaId" :inline="true" :component="component"></epx-page> -->
+          </div>
+      </div>
+      <!-- 批量添加 -->
+    <el-dialog title="批量添加统计项" v-model="dialogVolumeAddVisible" width="60%" append-to-body>
+      <div class="dialog-content batch-dialog-con">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-divider content-position="left">字段选择</el-divider>
+          <div class="choose-field">
+            <el-form-item label="统计字段:">
+              <el-popover
+                popper-class="object-popover"
+                ref="popover"
+                class="popover"
+                trigger="click"
+              >
+                <template v-slot:reference><el-input v-model="formInline.fieldText" placeholder="上一级统计项" suffix-icon="el-icon-search"></el-input></template>
+                <div class="poper-tree" v-if="fieldList.length>0">
+                  <el-tree
+                    :data="fieldList"
+                    :props="{label: 'text', children: 'children'}"
+                    node-key="code"
+                    @node-click="handleNodeClick"
+                    :default-expanded-keys="defaultExpandKey"
+                  ></el-tree>
+                </div>
+                <div class="no-data" v-else>
+                  暂未获取到数据
+                </div>
+              </el-popover>
+            </el-form-item>
+            <el-form-item label="上一级统计项:" v-if="!isOne">
+              <el-popover
+                popper-class="object-popover"
+                ref="popoverUp"
+                class="popover"
+                trigger="click"
+              >
+                <template v-slot:reference><el-input v-model="formInline.parentText" placeholder="上一级统计项" suffix-icon="el-icon-search"></el-input></template>
+                <div class="poper-tree">
+                  <el-tree
+                    :data="upList"
+                    :props="{label: 'text', children: 'children'}"
+                    @node-click="getUp"
+                  ></el-tree>
+                </div>
+              </el-popover>
+            </el-form-item>
+            <el-form-item label="树状模式" v-if="fieldValue.dataType==='object'||fieldValue.dataType==='treeList'">
+              <el-radio-group v-model="treeMode">
+                <el-radio label="1" value="1">平铺</el-radio>
+                <el-radio label="2" value="2">树状</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </div>
+          <el-divider content-position="left">字段值选择</el-divider>
+          <div :class="['field-value',fieldValue.dataType==='object'?'field-list-value':'']">
+            <template v-if="fieldValue.dataType==='list'||fieldValue.dataType === 'radio'">
+              <div style="margin: 5px 0;"></div>
+              <el-checkbox-group v-model="checkList">
+                <el-checkbox v-for="option in fieldValueList" :key="option.ID" :label="option.CODE" :value="option.CODE">{{option.NAME}}</el-checkbox>
+              </el-checkbox-group>
+              <template v-if="fieldValueList.length===0">
+                <div>
+                  数据为空
+                </div>
+              </template>
+            </template>
+            <template v-if="fieldValue.dataType==='treeList'">
+              <!-- <div style="margin: 5px 0;"></div> -->
+              <epx-page
+                class="field-treelist"
+                :flag="fieldValue.dataType==='treeList'? 'v_filter_tree_find': 'v_filter_find'"
+                :metaId="fieldValue.codeKey"
+                :component="fieldValue.dataType==='treeList'? 'entity-tree-find': 'entity-find'"
+                multiple
+                :halfCheckNodes="true"
+                :fieldConfig="{attriName: fieldValue.attriName, dataType: fieldValue.dataType, codeKey: fieldValue.codeKey}"
+                :value="fieldValue.value? fieldValue.value: []"
+                :change="changeObject"
+          />
+            </template>
+            <template v-if="fieldValue.dataType==='object'">
+              <epx-page
+                v-if="refresh"
+                :multiple="true"
+                :metaId="fieldValue.relatedEntity"
+                flag="v_report_find"
+                component="entity-find"
+                :change="change"
+              >
+              </epx-page>
+            </template>
+          </div>
+          <div class="dialog-button-group">
+            <el-button size="default" type="primary" @click.stop="chooseData">选中数据</el-button>
+            <el-button size="default" type="primary" @click="chooseAllData">全部数据</el-button>
+            <el-button size="default" @click="()=>{dialogVolumeAddVisible=false}">取消</el-button>
+          </div>
+        </el-form>
+      </div>
+    </el-dialog>
+    <!-- 添加 -->
+    <el-dialog title="添加统计项" v-model="dialogSingleAddVisible" width="60%" append-to-body>
+      <div class="dialog-content">
+        <epx-page v-if="dialogSingleAddVisible" :singleScope="singleScope" :pageTypes="pageTypes" :staObject="staObject" :singleSearchParams="singleSearchParams" :singleSearchParamCN="singleSearchParamCN" :closeDialog="closeDialog" :closeDialogRefresh="closeDialogRefresh" flag="v_add" metaId="FM_REPORT_ITEM" :inline="true" component="report-single-add" :default-value="defaultValue" :currentQuery="$query"></epx-page>
+      </div>
+    </el-dialog>
+    <!-- 全局范围 -->
+    <epx-scope-drawer v-model:visible="filterDrawer" :metaId="staObject" ref="globalfilterDrawer" :params="searchParams" :modeType="true">
+      <template v-slot:button><div class="filter-button">
+        <el-button type="primary" @click="saveRange()">保存</el-button>
+      </div></template>
+    </epx-scope-drawer>
+    <!-- <el-drawer
+        class="table-container__drawer"
+        :visible.sync="filterDrawer"
+        size="600px"
+        direction="rtl"
+      >
+        <epx-filter ref="filter" :showFilter="false" :metaId="staObject"  :fields="filterFields" :params.sync="searchParams" :init-condition="initCondition">
+          <div slot="button" class="filter-button">
+            <el-button type="primary" @click="saveRange()">保存</el-button>
+          </div>
+        </epx-filter>
+      </el-drawer> -->
+    <!-- 单个范围 -->
+    <epx-scope-drawer v-model:visible="singleFilterDrawer" :metaId="staObject" ref="filterDrawer" :params="singleSearchParams" :modeType="true">
+      <template v-slot:button><div class="filter-button">
+        <el-button type="primary" @click="saveSingleRange()">保存</el-button>
+      </div></template>
+    </epx-scope-drawer>
+    <!-- <el-drawer
+        class="table-container__drawer"
+        :visible.sync="singleFilterDrawer"
+        size="600px"
+        direction="rtl"
+      >
+        <epx-filter ref="filter" v-if="singleDrawar" :showFilter="false" :metaId="staObject"  :fields="singleFilterFields" :params.sync="singleSearchParams" :init-condition="singleInitCondition">
+          <div slot="button" class="filter-button">
+            <el-button type="primary" @click="saveSingleRange()">保存</el-button>
+          </div>
+        </epx-filter>
+      </el-drawer> -->
+  </div>
+</template>
+
+<script>
+// import { SET_ROUTER_QUERY } from '@epxing/core/src/store/actions'
+import { markRaw } from 'vue'
+import { SET_TAB_QUERY, ADD_META } from '@epxing/core/src/store/actions'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'epx-report-design-report',
+  provide () {
+    return {
+      reportId: this.reportId,
+      staObject: this.staObject
+    }
+  },
+  designOperates: [
+    {
+      text: '全局设置',
+      ui: 'primary',
+      // handler: 'globalSetting',
+      children: [{
+        text: '全局范围',
+        handler: 'globalScope'
+      }]
+    },
+    {
+      text: '预览',
+      ui: 'primary',
+      pageFlag: 'v_report_look',
+      handler: 'preview',
+      check: false
+    },
+    {
+      text: '导出',
+      ui: 'primary',
+      handler: 'entityExport',
+      check: true
+    },
+    {
+      text: '返回',
+      handler: 'backPage'
+    }
+  ],
+  props: {
+    id: String
+  },
+  data () {
+    return {
+      component: '',
+      initConfig: {},
+      rowList: [],
+      isOne: false,
+      columnList: [],
+      dialogVolumeAddVisible: false,
+      dialogSingleAddVisible: false,
+      formInline: {
+        fieldText: '',
+        parentText: ''
+      },
+      fieldList: [],
+      defaultExpandKey: [],
+      fieldValueList: [],
+      checkList: [],
+      // codeList: [],
+      checkObjectList: [],
+      fieldValue: {},
+      position: '',
+      showComponent: true,
+      upList: [],
+      up: '',
+      defaultValue: {},
+      pageTypes: '',
+      filterDrawer: false,
+      searchParams: [],
+      initCondition: [],
+      filterFields: [],
+      singleFilterDrawer: false,
+      singleSearchParams: [],
+      singleInitCondition: [],
+      singleFilterFields: [],
+      // singleSearchParam: {},
+      singleSearchParamCN: '',
+      singleDrawar: true,
+      refresh: true,
+      showPopover: '',
+      treeMode: '',
+      reportData: {},
+      staObject: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getCodeById',
+      'getTreeById',
+      'getTreeCountById'
+    ]),
+    designOperates () {
+      const { designOperates = [] } = this.pageConfig
+      return designOperates
+    },
+    reportId () {
+      return this.$query.reportId || this.id
+    },
+    checkShow () {
+      return operate => {
+        if (operate.check) {
+          if (this.reportData.TYPE === '1') {
+            return true
+          } else {
+            return false
+          }
+        } else {
+          return true
+        }
+      }
+    },
+    codeList () {
+      return (codeKey, value) => {
+        const code = this.getCodeById(codeKey)
+        if (code) {
+          // const arr = this.getCode(code, value)
+          const name = this.getCodeName(code, value)
+          return name || ''
+        } else {
+          return ''
+        }
+      }
+    }
+    // codeList () {
+    //   return (codeKey, value) => {
+    //     const code = this.getCodeById(codeKey)
+    //     if (code) {
+    //       const arr = code.find(item => {
+    //         return item.id === value
+    //       })
+    //       return arr.name
+    //     } else {
+    //       return ''
+    //     }
+    //   }
+    // }
+  },
+  methods: {
+    changeObject (check, parent) {
+      this.checkObjectList = [...check, ...parent]
+    },
+    statisticsSetting (key, data, position) {
+      const value = { id: data.id, up: data.parent, position: position }
+      this[key](value)
+    },
+    getCodeName (code, value) {
+      for (let i = 0; i < code.length; i++) {
+        const item = code[i]
+        if (item.id === value) {
+          return item.name
+        } else {
+          if (item.children) {
+            const name = this.getCodeName(item.children, value)
+            if (name) return name
+          }
+        }
+      }
+    },
+    showContextmenu (event, node) {
+      if (this.reportData.TYPE === '1') {
+        this.showPopover = node.id
+      }
+    },
+    updateCondition (params) {
+      const { key, value } = params
+      this[key](value)
+    },
+    deteleStatistics (params) {
+      this.$confirm('是否删除?', {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$http.$request({
+          action: 'removeMulti',
+          entityId: 'FM_REPORT_ITEM',
+          ids: params.id
+        })
+          .then(data => {
+            this.getTree()
+            this.$message.success('删除成功')
+            this.showComponent = false
+            this.$nextTick(() => {
+              const timer = setTimeout(() => {
+                this.showComponent = true
+                clearTimeout(timer)
+              }, 0)
+            })
+          })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    volumeAddChildren (params) {
+      this.$http.$request({
+        action: 'getLabel',
+        entityId: 'FM_REPORT_ITEM',
+        id: params.id
+      })
+        .then(data => {
+          // this.position = '1'
+          this.position = params.position
+          this.checkList = []
+          this.fieldValue = {}
+          this.up = params.id
+          this.formInline = {
+            fieldText: '',
+            parentText: data.label
+          }
+          this.dialogVolumeAddVisible = true
+          this.getFieldList()
+          if (!this.isOne) {
+            this.getUpList()
+          }
+        })
+    },
+    addChildren (params) {
+      // const position = '1'
+      const position = params.position
+      this.singleDrawar = false
+      this.$nextTick(() => {
+        const timer = setTimeout(() => {
+          this.singleDrawar = true
+          clearTimeout(timer)
+        }, 0)
+      })
+      this.$http.$request({
+        action: 'getLabel',
+        entityId: 'FM_REPORT_ITEM',
+        id: params.id
+      })
+        .then(data => {
+          this.$store.commit(SET_TAB_QUERY, { key: this.$tab.key, query: { position: position } })
+          const obj = { POSITION: position, UP: params.id, 'UP#': data.label }
+          if (position === '1') {
+            obj['POSITION#'] = '横向'
+          } else if (position === '2') {
+            obj['POSITION#'] = '纵向'
+          }
+          this.pageTypes = 'ADD'
+          this.dialogSingleAddVisible = true
+          this.defaultValue = { REPORT: this.reportId, 'REPORT#': this.reportData.NAME, MODE: 'COUNT', 'MODE#': '数量', MODEL: '1', 'MODEL#': '固定', ...obj }
+        })
+    },
+    addSameLeval (params) {
+      // const position = '1'
+      const position = params.position
+      this.singleDrawar = false
+      this.$nextTick(() => {
+        const timer = setTimeout(() => {
+          this.singleDrawar = true
+          clearTimeout(timer)
+        }, 0)
+      })
+      this.$http.$request({
+        action: 'getLabel',
+        entityId: 'FM_REPORT_ITEM',
+        id: params.up
+      })
+        .then(data => {
+          this.$store.commit(SET_TAB_QUERY, { key: this.$tab.key, query: { position: position } })
+          const obj = { POSITION: position, UP: params.up, 'UP#': data.label }
+          if (position === '1') {
+            obj['POSITION#'] = '横向'
+          } else if (position === '2') {
+            obj['POSITION#'] = '纵向'
+          }
+          this.pageTypes = 'ADD'
+          this.dialogSingleAddVisible = true
+          this.defaultValue = { REPORT: this.reportId, 'REPORT#': this.reportData.NAME, MODE: 'COUNT', 'MODE#': '数量', MODEL: '1', 'MODEL#': '固定', ...obj }
+        })
+    },
+    editStatistics (value) {
+      const itemType = '1'
+      this.singleDrawar = false
+      this.$nextTick(() => {
+        const timer = setTimeout(() => {
+          this.singleDrawar = true
+          clearTimeout(timer)
+        }, 0)
+      })
+      this.$http.$request({
+        action: 'getItemScope',
+        entityId: 'FM_REPORT_BASE',
+        reportId: this.reportId,
+        itemId: value.id,
+        itemType: itemType
+      })
+        .then(data => {
+          this.singleFilterFields = []
+          this.singleInitCondition = []
+          this.singleInitCondition = data.scope.data
+          this.singleInitCondition.forEach(item => {
+            this.singleFilterFields.push(item.attriName)
+          })
+        })
+      this.$http.get({
+        entityId: 'FM_REPORT_ITEM',
+        id: value.id
+      })
+        .then(data => {
+          this.pageTypes = 'EDIT'
+          this.dialogSingleAddVisible = true
+          this.defaultValue = {
+            REPORT: this.reportId,
+            'REPORT#': this.reportData.NAME,
+            ...data.data
+          }
+        })
+    },
+    refreshData () {
+      this.getTree()
+      this.showComponent = false
+      this.$nextTick(() => {
+        const timer = setTimeout(() => {
+          this.showComponent = true
+          clearTimeout(timer)
+        }, 0)
+      })
+    },
+    singleScope () {
+      this.singleFilterDrawer = true
+    },
+    saveSingleRange () {
+      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 }
+      })
+      this.singleSearchParams = _scopeParmas
+      this.singleSearchParamCN = scopeText
+      this.singleFilterDrawer = false
+    },
+    saveRange () {
+      const params = {
+        // action: 'updateScope',
+        entityId: this.$metaId,
+        'bean.ID': this.reportId,
+        staObject: this.staObject
+      }
+      const scopeParams = this.$refs.globalfilterDrawer.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, text, link }
+        }
+        return { lb, field, mode, values, rb, text, link }
+      })
+      const scopeInfo = JSON.stringify({
+        scopeParams: _scopeParmas
+        // scopeText
+      })
+      params['bean.SCOPE'] = scopeInfo
+      // params['bean.SCOPE_CN'] = scopeText
+      this.filterDrawer = false
+      this.$http.update(params)
+        .then(data => {
+          this.$message.success('保存成功')
+          this.closeDialogRefresh()
+        })
+        .catch(err => {
+          this.$message.error(err.message || '保存失败')
+        })
+    },
+    handler (buttonConfigs) {
+      const { handler } = buttonConfigs
+      this[handler](buttonConfigs)
+    },
+    globalScope (operate) {
+      this.$http.get({
+        entityId: this.$metaId,
+        id: this.reportId
+      })
+        .then(data => {
+          if (data.data && data.data.SCOPE) {
+            this.searchParams = JSON.parse(data.data.SCOPE).scopeParams
+          } else {
+            this.searchParams = []
+          }
+          this.filterDrawer = true
+        })
+      // this.$http.$request({
+      //   action: 'getScope',
+      //   entityId: this.$metaId,
+      //   reportId: this.reportId
+      // })
+      //   .then(data => {
+      //     if (data && data.scope) {
+      //       this.initCondition = data.scope.data
+      //       this.initCondition.forEach(item => {
+      //         this.filterFields.push(item.attriName)
+      //       })
+      //     }
+      //     this.filterDrawer = true
+      //   })
+      //   .catch(err => {
+      //     this.$message.error(err.message || '操作失败')
+      //   })
+    },
+    preview (operate) {
+      const { pageFlag: designPageFlag } = operate
+      const query = { ...this.$query }
+      query.flag = designPageFlag
+      this.$createPage({
+        ...query
+      })
+    },
+    async entityExport () {
+      let meta = null
+      const staObject = this.reportData.OBJECT
+      if (staObject) {
+        meta = this.metas[staObject]
+        if (!meta) {
+          meta = await this.$store.dispatch({
+            type: ADD_META,
+            metaId: staObject
+          })
+        }
+      } else {
+        meta = this.$meta
+      }
+      const url = this.$util.getRequestUrl({
+        action: 'getReportData',
+        entityId: staObject,
+        reportId: this.reportId,
+        reportType: 'toExcel'
+      })
+      window.open(encodeURI(url))
+    },
+    closeDialog () {
+      this.dialogSingleAddVisible = false
+    },
+    closeDialogRefresh () {
+      this.getTree()
+      this.showComponent = false
+      this.$nextTick(() => {
+        const timer = setTimeout(() => {
+          this.showComponent = true
+          clearTimeout(timer)
+        }, 0)
+      })
+      this.dialogSingleAddVisible = false
+    },
+    deleteItem (type) {
+      let check = []
+      if (type === 'row') {
+        check = this.$refs.treerow.getCheckedKeys()
+      } else {
+        check = this.$refs.treeclo.getCheckedKeys()
+      }
+      if (check.length === 0) {
+        this.$message.error('您未选择数据')
+        return
+      }
+      this.$confirm('是否删除?', {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        // let check = []
+        // if (type === 'row') {
+        //   check = this.$refs.treerow.getCheckedKeys()
+        // } else {
+        //   check = this.$refs.treeclo.getCheckedKeys()
+        // }
+        const ids = check.join(',')
+        const params = {
+          action: 'removeMulti',
+          entityId: 'FM_REPORT_ITEM',
+          ids: ids
+        }
+        this.$http.$request(params)
+          .then(data => {
+            this.getTree()
+            this.$message.success('删除成功')
+            this.showComponent = false
+            this.$nextTick(() => {
+              const timer = setTimeout(() => {
+                this.showComponent = true
+                clearTimeout(timer)
+              }, 0)
+            })
+          })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    singleAdd (position) {
+      this.position = position
+      this.singleDrawar = false
+      this.$nextTick(() => {
+        const timer = setTimeout(() => {
+          this.singleDrawar = true
+          clearTimeout(timer)
+        }, 0)
+      })
+      this.singleInitCondition = []
+      this.singleFilterFields = []
+      this.singleSearchParams = []
+      // this.$store.commit(SET_ROUTER_QUERY, { position: position })
+      this.$store.commit(SET_TAB_QUERY, { key: this.$tab.key, query: { position: position } })
+      const obj = { POSITION: position }
+      if (position === '1') {
+        obj['POSITION#'] = '横向'
+      } else if (position === '2') {
+        obj['POSITION#'] = '纵向'
+      }
+      this.pageTypes = 'ADD'
+      this.dialogSingleAddVisible = true
+      this.defaultValue = { CLIENT: this.$tab.CLIENT, SYSTEM: this.$tab.SYSTEM, REPORT: this.reportId, 'REPORT#': this.reportData.NAME, MODE: 'COUNT', 'MODE#': '数量', MODEL: '1', 'MODEL#': '固定', ...obj }
+    },
+    singleEdit (type) {
+      let choose = []
+      // let itemType = ''
+      if (type === 'row') {
+        choose = this.$refs.treerow.getCheckedKeys()
+        // itemType = '1'
+      } else {
+        choose = this.$refs.treeclo.getCheckedKeys()
+        // itemType = '2'
+      }
+      if (choose.length === 0) {
+        this.$message.error('您未选择数据')
+        return
+      }
+      this.singleDrawar = false
+      this.$nextTick(() => {
+        const timer = setTimeout(() => {
+          this.singleDrawar = true
+          clearTimeout(timer)
+        }, 0)
+      })
+      // this.$http.$request({
+      //   action: 'getItemScope',
+      //   entityId: 'FM_REPORT_BASE',
+      //   reportId: this.reportId,
+      //   itemId: choose[0],
+      //   itemType: itemType
+      // })
+      //   .then(data => {
+      //     this.singleFilterFields = []
+      //     this.singleInitCondition = []
+      //     this.singleInitCondition = data.scope.data
+      //     this.singleInitCondition.forEach(item => {
+      //       this.singleFilterFields.push(item.attriName)
+      //     })
+      //   })
+      this.$http.get({
+        entityId: 'FM_REPORT_ITEM',
+        id: choose[0]
+      })
+        .then(data => {
+          this.pageTypes = 'EDIT'
+          this.dialogSingleAddVisible = true
+          this.defaultValue = {
+            REPORT: this.reportId,
+            'REPORT#': this.reportData.NAME,
+            ...data.data
+          }
+          if (data.data.SCOPE) {
+            this.singleSearchParams = JSON.parse(data.data.SCOPE)
+          } else {
+            this.singleSearchParams = []
+          }
+          if (!this.defaultValue.CLIENT) {
+            this.defaultValue.CLIENT = this.$tab.CLIENT
+          }
+          if (!this.defaultValue.SYSTEM) {
+            this.defaultValue.SYSTEM = this.$tab.SYSTEM
+          }
+        })
+    },
+    // 父统计项
+    getUp (item) {
+      this.up = item.id
+      this.formInline.parentText = item.text
+      this.$refs.popoverUp.doClose()
+    },
+    getUpList () {
+      const params = {
+        action: 'getTree',
+        entityId: 'FM_REPORT_ITEM',
+        up_field: 'UP_ID',
+        multiFlag: 'false',
+        showLevel: '0',
+        reportId: this.reportId,
+        position: this.position,
+        node: 'root'
+      }
+      this.$http.getTree(params)
+        .then(data => {
+          // 只读树：markRaw 掐掉整棵树的深度响应式（省的是依赖收集，不是 Proxy 本身）。将来若要改
+          // 树里某个节点并期望 UI 跟着变，正确做法是重新赋一份新数组，而不是把 markRaw 摘掉。
+          this.upList = data && markRaw(data)
+        })
+    },
+    // 批量添加全部数据
+    chooseAllData () {
+      if (!this.fieldValue.code) {
+        this.$message.error('请选择统计字段')
+      } else {
+        const params = {
+          action: 'batchAddItems',
+          entityId: 'FM_REPORT_ITEM',
+          reportId: this.reportId,
+          staObject: this.staObject,
+          position: this.position,
+          submitType: 'ALL',
+          field: this.fieldValue.code,
+          up: this.up
+        }
+        if (this.fieldValue.dataType === 'object' || this.fieldValue.dataType === 'treeList') {
+          params.treeMode = this.treeMode
+        }
+        this.$http.$request(params)
+          .then(data => {
+            this.getTree()
+            this.$message.success('添加成功')
+            this.showComponent = false
+            this.$nextTick(() => {
+              const timer = setTimeout(() => {
+                this.showComponent = true
+                clearTimeout(timer)
+              }, 0)
+            })
+            this.dialogVolumeAddVisible = false
+          })
+          .catch(() => {
+            this.$message.error('添加失败')
+          })
+      }
+    },
+    // 批量添加选中数据
+    chooseData () {
+      if (this.fieldValue.dataType === 'list' && this.checkList.length === 0) {
+        this.$message.error('请选择统计字段统计值')
+        return
+      }
+      if ((this.fieldValue.dataType === 'object' || this.fieldValue.dataType === 'treeList') && this.checkObjectList.length === 0) {
+        this.$message.error('请选择统计字段统计值')
+        return
+      }
+      // if (this.fieldValue.dataType === 'list' && this.checkList.length > 0) {
+      // this.dialogVolumeAddVisible = false
+      let strData = ''
+      if (this.fieldValue.dataType === 'object' || this.fieldValue.dataType === 'treeList') {
+        strData = this.checkObjectList.map(item => item.id).join(',')
+      } else {
+        strData = this.checkList.join(',')
+      }
+      const params = {
+        action: 'batchAddItems',
+        entityId: 'FM_REPORT_ITEM',
+        reportId: this.reportId,
+        staObject: this.staObject,
+        position: this.position,
+        data: strData,
+        submitType: 'CHOOSE',
+        field: this.fieldValue.code,
+        up: this.up
+      }
+      if (this.fieldValue.dataType === 'object' || this.fieldValue.dataType === 'treeList') {
+        params.treeMode = this.treeMode
+      }
+      this.$http.$request(params)
+        .then(data => {
+          this.getTree()
+          this.$message.success('添加成功')
+          this.showComponent = false
+          this.$nextTick(() => {
+            const timer = setTimeout(() => {
+              this.showComponent = true
+              clearTimeout(timer)
+            }, 0)
+          })
+          this.dialogVolumeAddVisible = false
+        })
+        .catch(() => {
+          this.$message.error('添加失败')
+        })
+      // }
+      if (this.fieldValue.dataType === 'object' && this.checkObjectList.length > 0) {
+        this.dialogVolumeAddVisible = false
+      }
+    },
+    change (item) {
+      this.checkObjectList = [...item]
+    },
+    handleNodeClick (item) {
+      if (!item.leaf) return
+      this.fieldValue = item
+      this.formInline.fieldText = item.text
+      this.$refs.popover.doClose()
+      this.checkList = []
+      this.treeMode = ''
+      this.checkObjectList = []
+      if (item.dataType === 'list' || item.dataType === 'treeList' || item.dataType === 'radio') {
+        this.$http.list({
+          entityId: 'FM_CODE_PUB',
+          'scope.CODE_DEFINE': item.codeKey,
+          order_field: 'ORDER_NUM',
+          order_mode: 'ASC'
+        })
+          .then(data => {
+            this.fieldValueList = data.entitys
+            // this.codeList = this.fieldValueList.map((item) => item.CODE)
+          })
+      } else if (item.dataType === 'object') {
+        this.refresh = false
+        this.$nextTick(() => {
+          const timer = setTimeout(() => {
+            this.refresh = true
+            clearTimeout(timer)
+          }, 0)
+        })
+      }
+    },
+    // 批量添加
+    volumeAdd (position) {
+      this.position = position
+      this.checkList = []
+      this.fieldValue = {}
+      this.up = ''
+      this.formInline = {
+        fieldText: '',
+        parentText: ''
+      }
+      this.dialogVolumeAddVisible = true
+      this.getFieldList()
+      if (!this.isOne) {
+        this.getUpList()
+      }
+    },
+    getFieldList () {
+      this.$http.entityFieldTreeStore({
+        metaId: this.staObject,
+        attributeType: 'list,treeList,multibox,object,radio',
+        node: -1
+      })
+        .then(data => {
+          // eslint-disable-next-line no-eval
+          this.fieldList = eval('(' + data + ')')
+          this.defaultExpandKey = [this.fieldList[0].code]
+        })
+    },
+    getTree () {
+      const params = {
+        action: 'getTree',
+        entityId: 'FM_REPORT_ITEM',
+        reportId: this.reportId,
+        multiFlag: true,
+        dir: 'ASC',
+        mysort: 'ORDER_NUM',
+        node: 'root'
+      }
+      // 只读树：markRaw 掐掉整棵树的深度响应式（省的是依赖收集，不是 Proxy 本身）。下面两棵树的
+      // el-tree（:35 / :78）都没开 draggable，节点只被读、不被原地改。将来若要改树里某个节点并期望
+      // UI 跟着变，正确做法是重新赋一份新数组，而不是把 markRaw 摘掉。
+      this.$http.getTree({
+        ...params,
+        position: '1'
+      })
+        .then(data => {
+          this.rowList = data && markRaw(data)
+        })
+      this.$http.getTree({
+        ...params,
+        position: '2'
+      })
+        .then(data => {
+          this.columnList = data && markRaw(data)
+        })
+    },
+    getReportInfo () {
+      this.$http.get({
+        entityId: this.$metaId,
+        id: this.reportId
+      })
+        .then(data => {
+          if (data && data.data) {
+            this.reportData = data.data
+            const { ID, CHART_TYPE, TYPE, OBJECT, NAME } = this.reportData
+            this.staObject = OBJECT
+            if (TYPE === '1') { // 统计表
+              this.component = 'design-report-table'
+              this.initConfig = { ...this.$query, reportId: ID, reportType: TYPE, staObject: OBJECT, reportName: NAME }
+            } else if (TYPE === '2') { // 统计图
+              if (CHART_TYPE === 'pie' || CHART_TYPE === 'circularPie') {
+                this.initConfig = { ...this.$query, reportId: ID, reportType: TYPE, staObject: OBJECT, reportName: NAME, chartType: CHART_TYPE }
+                this.component = 'design-chart-pie'
+                this.isOne = true
+              }
+              if (CHART_TYPE === 'column' || CHART_TYPE === 'horiColumn') {
+                this.initConfig = { ...this.$query, reportId: ID, reportType: TYPE, staObject: OBJECT, reportName: NAME, chartType: CHART_TYPE }
+                this.component = 'design-chart-column'
+                // this.isOne = true
+              }
+              if (CHART_TYPE === 'line') {
+                this.initConfig = { ...this.$query, reportId: ID, reportType: TYPE, staObject: OBJECT, reportName: NAME, chartType: CHART_TYPE }
+                this.component = 'design-chart-line'
+                // this.isOne = true
+              }
+            }
+          }
+        })
+    }
+  },
+  created () {
+    // 获取报表信息
+    this.staObject = this.$query.staObject
+    this.getReportInfo()
+    this.getTree()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container{
+    background-color: var(--epx-bg-card);
+}
+.design-operates{
+    width: 100%;
+    box-sizing: border-box;
+    height: 44px;
+    border-bottom: 1px solid var(--epx-border);
+}
+.button-group{
+    margin: 6px 8px;
+    .el-dropdown{
+      margin-right: 10px;
+    }
+}
+.design-content{
+    width: 100%;
+    // height: calc(100% - 44px);
+    height: calc(100% - 50px);
+    box-sizing: border-box;
+    padding: 10px;
+    display: flex;
+}
+.content-left{
+    width: 300px;
+    height: 100%;
+}
+.left-top{
+    width: 100%;
+    height: 50%;
+}
+.left-bottom{
+    width: 100%;
+    height: 50%;
+}
+.left-title{
+    color: var(--epx-text);
+    // font-size: var(--epx-font-size-l);
+    height: 23px;
+}
+.left-top-content{
+    border: 1px solid var(--epx-border);
+    height: calc(100% - 30px);
+    overflow: auto;
+}
+.top-button{
+    width: 100%;
+    text-align: center;
+    padding: 5px 0;
+    border-bottom: 2px solid var(--epx-border);
+}
+.tree-content{
+    height: calc(100% - 45px);
+    overflow: auto;
+}
+.content-right{
+    width: calc(100% - 300px);
+    height: 100%;
+}
+.dialog-content{
+  height: 545px;
+}
+.batch-dialog-con{
+  padding: 20px 0;
+  overflow: auto;
+}
+.el-divider--horizontal{
+  margin: 0;
+  margin-bottom: 20px;
+}
+.choose-field{
+  margin-left: 40px;
+
+    :deep(.el-input) {
+      width: 170px;
+    }
+
+}
+.field-value{
+  height: 410px;
+  // padding: 10px 19px;
+  padding-left: 40px;
+  overflow: auto;
+  line-height: 28px;
+}
+.field-list-value{
+  padding-left: 0;
+
+    :deep(.container) {
+      box-shadow: none;
+    }
+
+}
+.field-treelist{
+
+    :deep(.container) {
+      width: 100%;
+    }
+
+}
+.dialog-button-group{
+  height: 50px;
+  line-height: 63px;
+  text-align: center;
+  border-top: 1px solid var(--epx-border);
+}
+.poper-tree{
+  height: 300px;
+  overflow: auto;
+  width: 146px;
+}
+.filter-button{
+  text-align: center;
+  margin: 10px 0;
+}
+.opera-list {
+  li {
+    line-height: 36px;
+    cursor: pointer;
+    padding: 0 20px;
+    color: var(--epx-text);
+    &:hover {
+      @include bg_color_primary(.2);
+    }
+  }
+}
+
+  :deep(.filter-condition__list) {
+    max-height: 76vh;
+    overflow: auto;
+  }
+
+</style>