dzhh-frontend/.svn/pristine/64/6445414868e9a2c48072103a8cce5e0ff5800a76.svn-base

<template>
  <div>
    <a-spin size="large" :spinning="spinning">
    <a-card size="small" :bordered="false" :bodyStyle="{paddingTop:'0px'}" :title="templetData.templet.templetName">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchByquery">
          <a-row :gutter="24" v-if="queryInfo && queryInfo.length>0">
            <template v-for="(item,index) in queryInfo">
              <template v-if="item.hidden==='1'">
                <a-col v-if="item.view=='datetime'" :md="12" :sm="16" :key=" 'query'+index " v-show="toggleSearchStatus">
                  <online-query-form-item :queryParam="queryParams" :item="item" :dictOptions="dictOptions"></online-query-form-item>
                </a-col>
                <a-col v-else :md="6" :sm="8" :key=" 'query'+index " v-show="toggleSearchStatus">
                  <online-query-form-item :queryParam="queryParams" :item="item" :dictOptions="dictOptions"></online-query-form-item>
                </a-col>
              </template>
              <template v-else>
                <a-col v-if="item.view=='datetime'" :md="12" :sm="16" :key=" 'query'+index ">
                  <online-query-form-item :queryParam="queryParams" :item="item" :dictOptions="dictOptions"></online-query-form-item>
                </a-col>
                <a-col v-else :md="6" :sm="8" :key=" 'query'+index ">
                  <online-query-form-item :queryParam="queryParams" :item="item" :dictOptions="dictOptions"></online-query-form-item>
                </a-col>
              </template>
            </template>
            <a-col :md="6" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchByquery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-tabs :defaultActiveKey="0" v-if="templetData.templet.templetStyle === 'tab'">
        <template v-for="(group,index) in templetData.groups">
          <a-tab-pane :key="index" :tab="group.groupTxt">
            <group-template-card  v-if="group.groupStyle ==='card'" :group="group"></group-template-card>
            <group-template-tab  v-if="group.groupStyle ==='tab'" :group="group"></group-template-tab>
            <group-template-grid v-if="group.groupStyle ==='grid'" :group="group"></group-template-grid>
            <group-template-combination v-if="group.groupStyle ==='combination'" :group="group"></group-template-combination>
          </a-tab-pane>
        </template>
      </a-tabs>
      <!-- <div v-if="templetData.templet.templetStyle === 'combination'">
        <template v-for="(group,index) in templetData.groups">
          <combination-graphreport-auto-chart :key="index" :style="{marginTop:'10px'}" :group="group"></combination-graphreport-auto-chart>
        </template>
      </div> -->
      <div v-if="templetData.templet.templetStyle === 'grid'">
        <a-row :gutter="24">
          <template v-for="(group,index) in templetData.groups">
            <a-col :key="index" :xl="group.templetGrid.xl" :lg="group.templetGrid.lg" :md="group.templetGrid.md" :sm="group.templetGrid.sm">
              <group-template-card  v-if="group.groupStyle ==='card'" :group="group"></group-template-card>
              <group-template-tab  v-if="group.groupStyle ==='tab'" :group="group"></group-template-tab>
              <group-template-grid  v-if="group.groupStyle ==='grid'" :group="group"></group-template-grid>
              <group-template-combination v-if="group.groupStyle ==='combination'" :group="group"></group-template-combination>
            </a-col>
          </template>
        </a-row>
      </div>
    </a-card>
    </a-spin>
  </div>
</template>
<script>
import GroupTemplateCard from '../components/GroupTemplateCard'
import GroupTemplateTab from '../components/GroupTemplateTab'
import GroupTemplateGrid from '../components/GroupTemplateGrid'
import GroupTemplateCombination from '../components/GroupTemplateCombination'
import { getAction } from '@/api/manage'
import OnlineQueryFormItem from '@/components/online/autoform/OnlineQueryFormItem.vue'
import { getDefValue } from '@/utils/util.js'

export default {
  name: 'OnlGraphreportTempletAutoChart',
  components: {
    GroupTemplateCombination, // 组合布局
    GroupTemplateCard,
    GroupTemplateGrid,
    GroupTemplateTab,
    OnlineQueryFormItem
  },
  data() {
    return {
      url: {
        list: '/diagram/diagramCombination/getTempletData'
      },
      templetData: {
        templet: {},
        groups: []
      },
      templetCode: '', // 组合图表code
      spinning: true,
      queryInfo: [], // 查询配置
      queryParams: {},
      dictOptions: {},
      toggleSearchStatus: false
    }
  },
  // watch: {
  //   $route() {
  //      this.init()
  //   }
  // },
  created() {
    this.init()
  },
  methods: {
    details(code) {
      this.$router.push({ path: '/online/cggraphreport/chart/' + code })
    },
    init() {
      const url = this.$route.fullPath
      const code = url.replace('/online/cggraphreport/templet/', '')
      this.templetCode = code
      this.loadData().then(res => {
        if (Object.keys(this.queryParams).length) { // 判断是否有默认值，有再次刷新
          const queryParams = this.getQueryParams()
          this.loadData(queryParams)
        }
      })
    },
    loadData(queryParam) {
      this.spinning = true
      this.templetData = {
        templet: {},
        groups: []
      }
      var params = Object.assign({}, queryParam, { templetCode: this.templetCode })
      return getAction(this.url.list, { params: params }).then((res) => {
        if (res.success) {
          this.templetData = res.result
          this.templetData.groups.forEach(element => { // 栅格配置字段转换为object
            element.templetGrid = element.templetGrid && JSON.parse(element.templetGrid)
          })
          res.result.queryConfigList.forEach(item => {
            item.view = item.viewType
            if (!queryParam) { // 如果是查询调用的方法  不赋值默认值
              this.$set(this.queryParams, item.field, getDefValue(item.defValue))
            }
          })
          this.queryInfo = res.result.queryConfigList
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.spinning = false
      })
    },
    searchByquery() {
      const queryParams = this.getQueryParams()
      this.loadData(queryParams)
    },
    getQueryParams() { // 把查询参数封装为后台需要的参数
      const queryParams = {}
      this.queryInfo.forEach(item => {
        const key = item.field
        if (item.mode === 'single') {
          queryParams[key] = {
            value: this.queryParams[key]
          }
          if (item.view === 'list_multi') { // 下拉多选框组装成另外一个格式
            queryParams[key].queryType = 'more'
          } else {
            queryParams[key].queryType = 'single'
          }
        } else {
          queryParams[key] = {
            queryType: 'group'
          }
          queryParams[key].startValue = this.queryParams[key + '_begin']
          queryParams[key].endValue = this.queryParams[key + '_end']
        }
      })
      return queryParams
    },
    searchReset() {
      this.queryParams = {}
      this.loadData()
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    }
  }
}
</script>
<style  scoped>
.table-page-search-wrapper{
  margin-top: 10px;
}
.table-page-search-wrapper .ant-form-inline .ant-form-item,
.table-page-search-wrapper .table-page-search-submitButtons
{
  margin-bottom: 10px;
}
</style>