eta_front/src/views/dataEntry_manage/thirdBase/gqExchangeData.vue

<template>
    <div class="exchangedata-wrap">
        <span class="slide-btn-icon" :class="{'slide-left':isLeftWrapShow,'slide-right':!isLeftWrapShow}"
        @click="isLeftWrapShow = !isLeftWrapShow">
            <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
        </span>
        <div class="left-wrap box" v-show="isLeftWrapShow">
            <el-date-picker  style="width:100%"  v-model="time" type="date" placeholder="选择日期"
            value-format="yyyy-MM-dd" :clearable="false" @change="handleTimeChange">
            </el-date-picker>
            <div class="scroll-wrap">
                <el-tree ref="treeRef" class="target_tree custom-tree" :data="typeList" 
                node-key="BaseFromTradeGuangzhouClassifyId" :default-expanded-keys="defaultShowNodes"
                :props="{
                    label: 'ClassifyName',
                    children: 'Children',
                }"
                :current-node-key="type" empty-text="暂无分类" @current-change="handleChangeType">
                    <span slot-scope="{ node, data }">{{ data.ClassifyName }}</span>
                </el-tree>
            </div>
        </div>
        <div class="right-wrap box" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
            <el-button v-if="list.length>0 && haveSummation && (!summationView)" 
                class="export-button" type="primary" plain @click="excelExport" :loading="exportBtnload">导出Excel</el-button>
            <div class="content" v-if="list.length>0">
                <table width="auto" border="0">
                    <thead class="border-head">
                        <tr>
                            <td v-for="(val,index) in labelArr" :key="`${val}_${index}`">
                                {{ val }}
                            </td>
                            <td v-if="haveSummation && summationView">操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in list" :key="item.BaseFromTradeGuangzhouIndexId">
                            <td v-for="(val,key) in labelArr" :key="key">{{item[key]}}</td>
                            <td v-if="haveSummation && summationView">
                                <el-button type="text" @click="detailView(item)">查看详情</el-button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="empty-wrap" v-else>
                <tableNoData text="暂无数据"/>
            </div>
            <div class="num-warp" v-if="numList.length>0">
                <div v-for="item in numList" :key="item.BaseFromTradeGuangzhouContractId" 
                :class="['num-box',num===item.BaseFromTradeGuangzhouContractId&&'num-active']" @click="handleChangeNum(item)">
                    {{item.Contract}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 广期所数据
import { guangqiInterface } from "@/api/api.js";
import {waitRequestReturn} from '@/utils/common.js'
export default {
    name: "gqExchangeData",
    data() {
        return {
            isLeftWrapShow:true,
            labelArr: {
                IndexCode: "指标ID",
                IndexName: "指标名称",
                Value: "数值",
                Unit: "单位",
                Frequency: "频度",
                StartDate: "起始日期",
                EndDate: "最新日期",
                // Operations:"操作"
            },
            summationView:true,// 当前是否是合计
            haveSummation:false, // 是否有合计
            time:'',
            topLevelType:'',
            type:'',
            typeList:[],
            defaultShowNodes:[],
            numList:[],
            num:'',
            list:[],
            loading:false,
            tradeIndexId:'',
            exportApi:process.env.VUE_APP_API_ROOT + "/data_source/gfex/index/detail/export",
            exportBtnload:false
        };
    },
    watch:{
        type(value){
            this.summationView=true
        },
        time(value){
            this.summationView=true
        }
    },
    computed:{
        exportUrl(){
            let url=this.exportApi + 
                `?${localStorage.getItem("auth") || ""}&BaseFromTradeGuangzhouIndexId=${this.tradeIndexId}&TradeDate=${this.time}`
            return this.escapeStr(url);
        }
    },
    created () {
        this.getClassifyListFun()  
        this.getNewtestDateFun()  
        waitRequestReturn(()=> this.type && this.time,this.getNumList,10)
    },
    methods: {
        escapeStr(str) {
            return str.replace(/#/g, escape("#")).replace(/;/g, escape(";"));
        },
        handleChangeNum(e){
            this.num=e.BaseFromTradeGuangzhouContractId
            this.getData()
        },

        // 时间切换
        handleTimeChange(){
            this.getNumList()
        },

        // 获取分类
        getClassifyListFun(){
            guangqiInterface.getClassifyList().then(res=>{
                if(res.Ret===200){
                    this.typeList=res.Data || []
                    try {
                        this.type=this.typeList[0].Children[0].BaseFromTradeGuangzhouClassifyId
                        this.topLevelType = this.typeList[0].BaseFromTradeGuangzhouClassifyId
                        this.$nextTick(() => {
                            this.$refs.treeRef.setCurrentKey(this.type);
                        });
                        this.defaultShowNodes=[this.typeList[0].BaseFromTradeGuangzhouClassifyId,this.typeList[0].Children[0].BaseFromTradeGuangzhouClassifyId]
                    } catch (error) {
                        console.error('Data的返回存在问题或为空');
                    }
                }
            })
        },
        // 获取最新日期
        getNewtestDateFun(){
            guangqiInterface.getNewtestDate().then(res=>{
                if(res.Ret == 200){
                    this.time=res.Data || this.$moment(new Date()).format('YYYY-MM-DD')
                }
            })
        },
        handleChangeType(data, node) {
            if (data.BaseFromTradeGuangzhouClassifyId == this.type || (!data.ParentId)) return;
            this.type = data.BaseFromTradeGuangzhouClassifyId
            this.topLevelType = data.ParentId
            this.getNumList()
        },
        // 获取合约号
        async getNumList(){
            this.loading=true
            guangqiInterface.getContractList({
                BaseFromTradeGuangzhouClassifyId:this.type,
                TradeDate:this.time,
            }).then(res=>{
                if(res.Ret===200){
                    this.numList=res.Data||[]
                    this.num=this.numList[0]?this.numList[0].BaseFromTradeGuangzhouContractId||'':''
                    this.getData()
                }else{
                    this.loading=false
                }
            }).catch(()=>{
                this.loading=false
            })
        },
        getData(){
            $('.content').animate({scrollTop:0},0)
            this.loading=true
            guangqiInterface.getIndexDataList({
                BaseFromTradeGuangzhouClassifyId:this.type,
                TradeDate:this.time,
                BaseFromTradeGuangzhouContractId:this.num
            }).then(res =>{
                if(res.Ret===200){
                    this.list=res.Data || []
                }
            }).finally(()=>{
                this.haveSummation = this.topLevelType == 4
                this.loading=false
            })
        },
        detailView(item){
            this.loading=true
            this.tradeIndexId = item.BaseFromTradeGuangzhouIndexId
            let params={
                BaseFromTradeGuangzhouIndexId:item.BaseFromTradeGuangzhouIndexId,
                TradeDate:this.time
            }
            guangqiInterface.getIndexDataDetail(params).then(res=>{
                if(res.Ret == 200){
                    this.list=res.Data || []
                    this.summationView=false
                }
            })
            .finally(()=>{
                this.loading=false
            })
        },
        excelExport(){
            this.exportBtnload = true;
            const link = document.createElement("a");
            link.href = this.exportUrl;
            link.download = "";
            link.click();
            setTimeout(() => {
                this.exportBtnload = false;
            }, 2000);
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../css/exchangedata.scss";

.exchangedata-wrap{
    .right-wrap{
        display: flex;
        flex-direction: column;
        .export-button{
            align-self: flex-start;
            padding:0 40px;
            margin-bottom: 20px;
            height: 40px;
        }
        .content{
            flex-grow: 1;
            min-height: 90%;
        }
        .empty-wrap{
            min-height: 90%;
            flex-grow: 1;
        }
    }
    .slide-btn-icon{
        &.slide-left{
            left:285px;
        }
        &.slide-right{
            left: 0;
        }
      }
    .left-wrap{
        width: 300px;
    }
}

.scroll-wrap {
    margin: 20px 0;
    height: calc(100vh - 250px);
    overflow-y: auto;
    .target_tree {
        color: #333;
    }
}

thead{
    position: sticky;
    top: 0;
    left: 0;
    border-top: 1px solid #dcdfe6;
}
</style>
<style lang="scss">
@import "../css/customtree.scss";

</style>