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

<template>
    <div class="main-box">
        <el-table 
            :data="list" 
            ref="tableRef" 
            highlight-current-row 
            border
        >
            <el-table-column
                v-for="item in tableColums"
                :key="item.label"
                :label="item.label"
                :width="item.widthsty"
                :min-width="item.minwidthsty"
                align="center"
            >
                <template slot-scope="scope">
                <!-- 中文 -->
                <span v-show="currentLang == 'ch'">{{ scope.row[item.key] }}</span>
                <!-- 英文 没有内容 只有指标名称、单位可以编辑 -->
                <!-- 中文没有内容 对应英文显示为空 -->
                <span
                    v-show="currentLang == 'en' && !scope.row[item.enKey || item.key]"
                    style="color: #999; cursor: pointer"
                    @click="openEnNameDia()"
                    >{{ scope.row[item.key] ? item.inputTip : "" }}</span
                >
                <!-- 英文有内容 只有指标名称、单位可以编辑 -->
                <span
                    v-show="
                    currentLang == 'en' &&
                    scope.row[item.enKey || item.key] &&
                    ['EdbNameEn', 'UnitEn'].includes(item.enKey)
                    "
                    style="cursor: pointer"
                    @click="openEnNameDia()"
                    >{{ scope.row[item.enKey || item.key] }}</span
                >
                <span
                    v-show="
                    currentLang == 'en' &&
                    scope.row[item.enKey || item.key] &&
                    !['EdbNameEn', 'UnitEn'].includes(item.enKey)
                    "
                    >{{ scope.row[item.enKey || item.key] }}</span
                >
                </template>
            </el-table-column>
            <el-table-column :label="$t('Edb.Detail.e_opera')" key="Copy" align="center" width="110">
                <template slot-scope="scope">
                <span v-permission="permissionBtn.edbDataPermission.edbData_copyData"
                class="editsty" @click="copyCode(scope.row)">
                    <i class="el-icon-document-copy" />&nbsp;{{$t('Edb.detail_copydata_btn')}}</span
                >
                <span class="editsty" @click="viewTarget(scope.row)">{{$t('Edb.detail_lookdata_btn')}}</span>
                </template>
            </el-table-column>
            <div slot="empty">
                <tableNoData :text="$t('EtaBasePage.no_quote_edb')" size="mini"/>
            </div>
        </el-table>
        <el-pagination 
		    layout="total,prev,pager,next" 
			background
			:current-page="page"
			@current-change="handleCurrentChange"
			:page-size="pageSize" 
			:total="Total"
			style="float:right;margin-top:20px">
		</el-pagination>
    </div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import { chartSetMixin } from '../mixins/chartPublic'
export default {
    mixins: [chartSetMixin],
    props: {
        edbInfoId: {
            type: Number
        }
    },
    watch: {
        'edbInfoId': {
            handler(n) {
                if (n) {
                    this.page = 1
                    this.list = []
                    this.finished = false
                    this.chartTotal = 0
                    this.getEDBList()
                }
            },
            immediate: true
        }
    },
    data() {
        return {
            list: [],
            page: 1,
            pageSize: 20,
            Total: 0,
            finished: false,

        }
    },
    methods: {
        async getEDBList() {
            const res = await dataBaseInterface.edbRelationComputerList({
                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.finished = res.Data ? res.Data.Paging.IsEnd : true
            this.Total=res.Data?res.Data.Paging.Totals:0
        },

        handleCurrentChange(e){
            this.page=e
            this.getEDBList()
        }
    },
}
</script>

<style  lang="scss" scoped>
.main-box{
    margin-top: -30px;
    background-color: #fff;
    min-height: calc(100vh - 300px);
    padding: 30px;
    height: 100%;
    overflow-y: auto;
}
</style>