jhbigscreen/src/pages/dlg/projectSpecialDlg.vue

<template>
    <MyDialog v-if="show" v-model="show" width="1200px" height="550px" class="projectSpecialDlg">
        <template slot="title">{{title}}</template>
        <div>
            <div class="head-title-select">
                <div class="head-select">
                    <input type="text" value="" @click="setScreenSpecial()" placeholder="请选择项目" readonly>
                </div>
                <el-collapse-transition>
                    <ul class="header-screen-ul" ref="selectUl">
                        <li v-for="item in specialTypeList" @click="setScreenSpecial(item)" :title="item.dictLabel">{{
                            item.dictLabel }}
                        </li>
                    </ul>
                </el-collapse-transition>
            </div>
        </div>
        <div class="head-title-tab">
            <div :class="nav == 'all' ? 'head-nav active' : 'head-nav'" @click="doNav(all)">全部数据({{ tags.all }})</div>
            <div :class="nav == 'wgq' ? 'head-nav active' : 'head-nav'" @click="doNav(wgq)">未过期({{ tags.wgq }})</div>
            <div :class="nav == 'ygq' ? 'head-nav active' : 'head-nav'" @click="doNav(ygq)">已过期({{ tags.ygq }})</div>
            
        </div>
        <el-table :data="dataList" class="mytable" style="width: 100%;background: transparent;" height="470">
            <el-table-column prop="name" align="center" label="人员名称"></el-table-column>
            <el-table-column prop="sex" align="center" label="性别">
                <template slot-scope="scope">
                    <span v-if="scope.row.sex==0">男</span>
                    <span v-if="scope.row.sex==1">女</span>
                    <span v-if="scope.row.sex==2">未知</span>
                </template>
            </el-table-column>
            <el-table-column prop="phoneNumber" align="center" label="联系方式"> </el-table-column>
            <el-table-column label="证书编号" align="center" prop="credentialNumber"></el-table-column>
            <el-table-column label="证书过期时间" align="center" prop="credentialExpirationTime"></el-table-column>
            <el-table-column label="证书类型" align="center" prop="credentialType" v-if="false"></el-table-column>
            <el-table-column label="提交时间" align="center" prop="createTime"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-download"
                        @click="handledownload(scope.row)"
                    >查看证书</el-button>
                </template>
            </el-table-column>
        </el-table>
    </MyDialog>
</template>

<script>
import '@/components/module/module-one-1-1'
import MyDialog from '../components/MyDialog'

export default {
    components: {
        MyDialog,
    },
    name: 'projectSpecialDlg',
    data() {
        return {
            title:'',
            data: null,
            dataList: [],
            show: false,
            nav:"wgq",
            specialType:0,
            tags:{
                all:0,
                wgq:0,
                qgq:0
            },
            specialTypeList:[],
        };
    },

    /**特种作业人员数据 */
    mounted() {
        this.data = null;
    },

    methods: {
        /** 下载证书 */
        handledownload(row){
            window.open('/jhapi'+row.credentialFile);
        },
        showDialog(it) {
            this.data = it;
            this.title = it.title;
            this.getList();
            this.queryCount();
            this.$api.dict('project_special_type').then(response => {
                this.specialTypeList = response;
            });
        },
        doNav(nav) {
            this.nav = nav();
            this.getList();
        },
        getList(){
            this.$api.special.getProjectSpecialList(this.data.projectId,this.nav,this.specialType).then(response => {
                this.dataList = response.rows;
                this.show = true;
            });
        },
        queryCount(){
            this.$api.special.findWorkSpecialCount(this.data.projectId,this.specialType).then(response => {
                if (response && response.data) {
                    let sum = 0;
                    if (response.data.notExpired) {
                        sum += response.data.notExpired;
                        this.tags.wgq = response.data.notExpired;
                    }
                    if (response.data.expired) {
                        sum += response.data.expired;
                        this.tags.ygq = response.data.expired;
                    }
                    this.tags.all = sum;
                }
            });
        },
        setScreenSpecial(it){
            debugger
        }
    },
};
</script>

<style lang="less" scoped>
.mytable {
    /deep/ th .cell {
        color: aquamarine;
    }
}
.head-title-select {
    width: 320px;
    padding-top: 0px;
}
</style>