jhbigscreen/src/pages/safe/workTrainListDlg.vue

<template>
    <MyDialog v-if="show" v-model="show" width="1600px" height="740px" class="work-train-dialog">
        <template slot="title">{{ trainType == 0 ? '专项培训' : '应急演练' }}{{ prjName ? ' - ' + prjName : '' }}</template>
        <div class="head-title-tab" style="padding: 10px 0px;max-width: unset;">
            <div v-for="(it, idx) in dicts" :key="idx" :class="nav == it.dictValue ? 'head-nav active' : 'head-nav'" @click="doNav(it.dictValue)"
                >{{ it.dictLabel }}</div>
        </div>
        <div class="data-list">
            <div class="data-item" v-for="(it, idx) in tableData" :key="idx" >
                <div class="data-item-row1">
                    <div class="data-item-img">
                        <el-image :src="getProfileImage(it.mainImage, true)" style="width:100%;"
                            :preview-src-list="[getProfileImage(it.mainImage)]" />
                    </div>
                    <div class="data-item-row-right" style="cursor: pointer;"  @click="doShowDlgTrain(it)">
                        <div class="bottom-line2" style="line-height: 24px;margin-top: 8px;">
                            <span style="color:#59A0DC;display: inline-block;margin-right: 8px;">{{ idx < 9 ? '0' + (idx +
                                1) : '' + (idx + 1) }}</span>
                                    <span style="font-weight: bold;color:#59A0DC;">{{ it.trainTitle }}</span>
                        </div>
                        <div style="display: flex;align-items: center;">
                            <div style="line-height: 24px;color:#aaa;font-size: 12px;margin-top:12px;">
                                <div><span>参与人数：</span><span style="color:#436CE9">{{ it.trainParticipants }}</span><span>
                                        人</span>
                                </div>
                                <div>
                                    <span>培训时间:</span><span>{{ it.beginDate }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="data-item-row2" style="cursor: pointer;"  @click="doShowDlgTrain(it)">
                    <div style="margin-top: -6px;color:#b8beef;font-size: 12px;">
                                        <span>协作队伍:</span><span class="txt-over" :title="it.trainDeptNames">{{ it.trainDeptNames }}</span></div>
                </div>
            </div>
        </div>
        <el-pagination layout="total,prev, pager, next" :hide-on-single-page="true" @current-change="handleCurrentChange"
            :total="total" :page-size="size" :current-page.sync="index" class="bg-pagination"></el-pagination>
        <worktrainDlg ref="workTrainDlg"></worktrainDlg>
    </MyDialog>
</template>

<script>

import MyDialog from '../components/MyDialog'
import worktrainDlg from '../dlg/workTrainDlg.vue'
export default {
    components: {
        MyDialog,worktrainDlg
    },
    name: 'JhbigscreenIndexDlg1',

    data() {
        return {
            show: false,
            tableData: [],
            nav: 1,
            index: 1,
            size: 9,
            deptId: 0,
            projectId: 0,
            total: 0,
            prjName: '',
            trainType: 0,
            dicts: [],
        };
    },

    mounted() {

    },

    methods: {
        doShowDlgTrain(it) {
            if (this.trainType == 0) {
                it.title = "专项培训";
                it.typeTitle = "培训";
            } else {
                it.title = "应急演练";
                it.typeTitle = "演练";
            }
            this.$refs.workTrainDlg.showDialog(it)
        },
        // 获取图片映射
        getProfileImage(url, min) {
            if (url) {
                return '/jhapi' + url + (min ? ".min.jpg" : "");
            }
            return url;
        },
        handleCurrentChange(n) {
            this.index = n;
            this.loadData();
        },
        doNav(n) {
            this.nav = n;
            this.index = 1;
            this.loadData();
        },
        showDialog(data) {
            this.dicts = data.dicts || [];
            this.trainType = data.type;
            this.deptId = data.deptId;
            this.projectId = data.projectId;
            if (data.prj) {
                this.prjName = data.prj.projectName || '';
            } else {
                this.prjName = "";
            }
            this.nav = this.dicts.length > 0 ? this.dicts[0].dictValue : 0;
            this.index = 1;
            this.loadData();
            this.show = true
        },
        loadData() {
            let data = {
                deptId: this.deptId,
                projectId: this.projectId,
                trainType: this.trainType,
                dataType: this.nav
            };
            this.$api.workTrain.queryWorkTrainList(this.index, 9, data).then(d => {
                this.tableData = d.rows || [];
                this.total = d.total;
            })
        }
    },
};
</script>

<style lang="less" scoped>
.mytable {
    /deep/ th .cell {
        color: aquamarine;
    }
}
</style>
<style lang="less">
.work-train-dialog {
    .popup-project-introduction-min {
        transform: translateY(10vh);
    }

    .head-nav {
        width: 150px;
    }

    .bg-pagination {
        margin-top: 20px;
    }

    .data-list {
        margin-top:12px;
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-row-gap: 30px;
        margin-left: -80px;
        width: calc(100% + 100px);

        .data-item {
            display: inline-block;
            height: 155px;
            border: solid 1px #ccc;
            border-radius: 5px;
            margin-left: 80px;

            &.col-1 {
                margin-left: 0px;
            }

            .data-item-row1 {
                display: grid;
                grid-template-columns: 50% 50%;

                .data-item-img {
                    padding: 10px;

                    div.el-image {
                        display: flex;
                        height: 100px;
                        justify-items: center;
                        align-items: center;

                        .el-image__inner {
                            height: unset;
                        }
                    }
                }
            }
            .data-item-row2 {
                padding:0px 10px;  
                display: flex;
                align-items: center;
                height: 30px;        
            }
        }
    }
}</style>