eta_front/src/views/dataEntry_manage/databaseComponents/dataAssociateChart.vue

<template>
    <div class="associate-chart">
        <div v-if="list.length===0&&finished" style="text-align:center;display:block" class="empty-list">
            <span class="return-btn" @click="()=>{$emit('returnHandle')}">{{$t('Edb.detail_return_btn')}}</span>
            <tableNoData :text="$t('EtaBasePage.no_quote_chart')"/>
        </div>
        <template v-else>
        <p class="associate-chart-title">
            <span>{{$t('Chart.total_chart_show',{limit: chartTotal})}}</span>
            <span class="return-btn-tow" @click="()=>{$emit('returnHandle')}">{{$t('Edb.detail_return_btn')}}</span>
        </p>
        <div
            class="chart-public-list"
            v-infinite-scroll="load"
            infinite-scroll-immediate="false"
            :infinite-scroll-disabled="finished"
        >
            <div class="chart-list-item-wrap">
                <div class="chart-list-item" v-for="chart in list" :key="chart.ChartInfoId">
                    <div class="chart-item-top text_oneLine"><span class="text_oneLine">{{ chart.ChartName }}</span></div>
                    <div class="chart-item-img" @click="detailShowHandle(chart)"
                        :style="{background: `no-repeat top/cover url('${!chart.HaveOperaAuth ? $icons.lock_big : chart.ChartImage}')`}"></div>
                    <div class="chart-item-bottom">
                        <span>{{$t('Chart.list_chart_time')}}: {{ chart.CreateTime.slice(0,10) }}</span>
                        <!-- <span class="join_txt" @click="addMychartHandle(chart)" v-if="chart.HaveOperaAuth">
                            <img :src="$icons.chart_join_ico"
                                style="width: 13px; height: 12px; vertical-align: middle"/>
                            {{$t('Chart.chart_addmy_btn')}}
                        </span> -->
                    </div>
                </div>

            </div>
        </div>
        </template>

        <!-- 加入我的图库弹窗 -->
        <addMyClassifyDia
            :isAddMyDialog="isAddMyChart"
            :add_id="add_chart_id"
            :add_ids="add_ids"
            @cancel="isAddMyChart = false"
            @addSuccess="addMySuccess"
        />

        <!-- 图表详情弹窗 -->
        <chart-detail
            ref="chartDetailRef"
            :isOpenDetail="isOpenDetail"
            :select_classify="select_classify"
            :chart_code="chart_code"
            :allChart="chartArrParams"
            :classifyUserId="0"
            @close="chartCallBack"
            @remove="removeCallBack"
        />
    </div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import addMyClassifyDia from '../components/addMyClassifyDia';
import chartDetail from '@/views/mychart_manage/components/chartDetailDia.vue';
export default {
    components:{
        addMyClassifyDia,
        chartDetail
    },
    props:{
        edbInfoId:{
            type:Number
        }
    },
    watch: {
        'edbInfoId':{
            handler(n){
                if(n){
                    this.page=1
                    this.list=[]
                    this.finished=false
                    this.chartTotal=0
                    this.getChartList()
                }
            },
            immediate:true
        }
    },
    data() {
        return {
            list:[],
            page:1,
            pageSize:20,
            chartTotal:0,
            finished:false,

            // 加入我的
            isAddMyChart: false, //加入图库弹窗
            add_chart_id: 0, //要加入的图表
            add_ids:[],//加入时已有的分类

            // 显示详情弹窗
            chart_code:'',
            isOpenDetail:false,
            chartArrParams:[],
            select_classify:''
        }
    },
    methods: {
        async getChartList(){
            const res=await dataBaseInterface.edbRelationChartList({
                PageSize: this.pageSize,
                CurrentIndex: this.page,
                EdbInfoId:this.edbInfoId
            })
            if(res.Ret!==200) return
            this.list=res.Data?this.page==1?res.Data.List:[...this.list,...res.Data.List]:[]
            this.chartTotal=res.Data?res.Data.Paging.Totals : 0
            this.finished=res.Data?res.Data.Paging.IsEnd:true
        },

        load(){
            if(this.finished) return
            this.page++
            this.getChartList()
        },

        /* 加入我的图库 */
        addMychartHandle(item) {
            this.add_chart_id = item.ChartInfoId;
            //已有的分类ids
            this.add_ids = item.MyChartClassifyId ? item.MyChartClassifyId.split(',').map(item => Number(item)) : [];
            this.isAddMyChart = true;
        },
        /* 加入我的图库成功 */
        addMySuccess(params) {
            this.isAddMyChart = false;
            this.list.forEach(item => {
                if (item.ChartInfoId === this.add_chart_id) {
                    item.IsAdd = true;
                    item.MyChartId = params.MyChartInfoId;
                    item.MyChartClassifyId = params.MyChartClassifyId
                }
            });
            
            if(this.isOpenDetail) this.$refs.chartDetailRef.getChartInfo();
        },

        //显示详情
        detailShowHandle({ UniqueCode }){
            this.chart_code = UniqueCode;

            // 获取当前列表中所有图 获取code
            this.chartArrParams = this.list.map(item => item.UniqueCode) ||[];

            this.isOpenDetail = true;
        },
        chartCallBack(){
            this.page=1
            this.list=[]
            this.getChartList()
            this.isOpenDetail = false;
        },
        removeCallBack(code){
            this.chartArrParams.splice(this.chartArrParams.findIndex(item => item === code), 1)
        }
    },
}
</script>

<style lang="scss" scoped>
.associate-chart{
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.associate-chart-title{
    position:relative;
    font-size:16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .return-btn-tow{
        color: #409eff;
        font-size: 14px;
        cursor: pointer;
    }
}
.empty-list{
    min-height: calc(100vh - 300px);
    background-color: #fff;
    margin-top: -30px;
    padding-top: 100px;
    position: relative;
    .return-btn{
        position: absolute;
        top: 32px;
        right: 2px;
        cursor: pointer;
        color: #409eff;
    }
}
.chart-public-list{
    flex: 1;
    width: 100%;
    margin-top:20px;
    /* max-height: calc(100vh - 220px); */
    overflow-y: auto;
      .chart-list-item{
          width:23%;
          min-width: 235px;
          .join_txt {
            float: right;
            color: #409eff;
            cursor: pointer;
          }
      }
}
.public-chart-item {
        .item-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 16px;
          font-weight: 600;
        }
        .chart-img {
          width: 100%;
          height: 230px;
          object-fit: fill !important;
          cursor: pointer;
        }
        .item-bottom {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #666;
          .collected {
            color: #f00;
            cursor: pointer;
          }
          .join_txt {
            color: #409eff;
            cursor: pointer;
          }
        }
      }
</style>