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">
            <tableNoData :text="$t('EtaBasePage.no_quote_chart')"/>
        </div>
        <template v-else>
        <p style="position:relative;font-size:16px">共 {{chartTotal}} 张图表</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="chart.ChartImage?{background: `no-repeat top/cover url('${chart.ChartImage}')`}:{}"></div>
                    <div class="chart-item-bottom">
                        <span>创建时间: {{ chart.CreateTime.slice(0,10) }}</span>
                        <span class="join_txt" @click="addMychartHandle(chart)">
                            <img :src="$icons.chart_join_ico"
                                style="width: 13px; height: 12px; vertical-align: middle"/>
                            加入我的图库
                        </span>
                    </div>
                </div>

            </div>
            <!-- <el-col
                :span="6"
                style="margin-bottom: 20px; padding-right: 20px"
                v-for="chart in list"
                :key="chart.ChartInfoId"
            >
                <el-card class="public-chart-item">
                    <div slot="header" class="item-top">
                        <span class="text_oneLine">{{ chart.ChartName }}</span>
                    </div>
                    <img
                        :src="chart.ChartImage"
                        alt=""
                        class="chart-img"
                        @click="detailShowHandle(chart)"
                    />
                    <div class="item-bottom">
                        <span>创建时间: {{ chart.CreateTime.slice(0,10) }}</span>
                        <span
                            class="join_txt"
                            @click="addMychartHandle(chart)"
                        >
                            <img
                                :src="$icons.chart_join_ico"
                                alt=""
                                style="width: 13px; height: 12px; vertical-align: middle"
                            />
                            加入我的图库
                        </span>
                    </div>
                </el-card>
            </el-col> -->
        </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;
}
.empty-list{
    min-height: calc(100vh - 300px);
    background-color: #fff;
    margin-top: -30px;
    padding-top: 100px;
}
.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>