epmet-work-pc/src/views/modules/base/smartExcel/cpts/filling-info.vue

<template>
    <div class=''>
        <div class="card" :style="{ height: tableHeight }" v-show="!showView">
            <div class="flex title">
                <h3>任务信息</h3>
                <el-button type="text" round @click="handelClickBack" icon="el-icon-back">返回</el-button>
            </div>
            <el-form ref="form" label-position="left" :model="formData" label-width="120px"
                style="margin-left: 3%; margin-top: 30px;">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="任务主题">
                            <div style="display: flex; align-items: center;">
                                <div>{{ formData.taskTitle}}</div>
                            </div>

                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="任务发布时间">
                            <div>{{formData.createdTime}}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="任务发布部门">
                            <div>{{formData.agencyName}}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="任务发布人">
                            <div>{{formData.createByName}}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="任务类型">
                            <div>{{formData.type}}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="任务周期">
                            <div>{{formData.taskPeriod === 'once' ? '一次性' : '每周'}}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="任务接收人">
                            <div style="display: flex;flex-direction: row; align-items: center;">
                                <div>{{formData.userName}}</div>
                                <el-button @click="oncClickInfo('adjust1')" style="margin-left: 10px;"
                                    type="primary">转派其他接受人</el-button>
                            </div>

                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="任务说明">
                            <div style="display: flex;flex-direction: row; align-items: center;">
                                <div>{{formData.taskIntroduction}}</div>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="flex title flex-center-deputy">
                <h3>任务提醒</h3>
                <span>（点击以下表格开始提报任务）</span>
            </div>
            <div class="flex-wrap flex">
                <div class="item flex flex-y flex-center-deputy" @click="handleClickShowView(formData.subWorkBookId)"
                    :key="index">
                    <img :src="require(`@/assets/images/index/Excel.png`)" alt="">
                    <div class="agencyName">{{formData.taskTitle}}</div>
                    <div>（{{formData.taskStateName}}）</div>
                </div>
            </div>
            <div class="flex title flex-center-deputy">
                <h3>相关任务</h3>
            </div>
            <div class="m-table">
                <el-table :data="tableData" border class="m-table-item"
                    style="width: 70%;margin-left: 3%; margin-top: 30px;" :height="maxTableHeight">
                    <el-table-column label="序号" fixed="left" type="index" align="center" width="80" />
                    <el-table-column prop="taskPeriodName" align="center" :show-overflow-tooltip="true" label="任务周期">
                    </el-table-column>
                    <el-table-column prop="taskPeriod" fixed="right" label="状态" align="center">
                        <template slot-scope="scope">
                            <div  :style="{ color: scope.row.status ? '#08af58' : '' }">{{ scope.row.status?"已存档":"未完成" }}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div v-if="showView">
            <excel-view @close="close" :workbookId="workbookId" :pageType="'filling'" :sheetTotal="true" :infoObj="infoObj"></excel-view>
        </div>
        <el-dialog title="转派其他接收人" :visible.sync="showPersonel" width="50%" :close-on-click-modal="false">
                <acceptingPersonel :showType="showType" :taskId="formData.id"
                    @handelPersonel="handelPersonel"></acceptingPersonel>
            </el-dialog>
    </div>
</template>

<script>
import { requestPost, requestGet } from "@/js/dai/request";
import { mapGetters } from 'vuex'
import excelView from "./excel-view.vue";
import acceptingPersonel from "./acceptingPersonel.vue";
export default {
    data() {
        return {
            workbookId:"",
            showView:false,
            showType:"",
            showPersonel:false,
            tableData:[
            ],
            formData:{
            },
            infoObj:{}
        };
    },
    created() { },
    async mounted() {
        this.getDetail()
        this.getPeriodTaskList()
    },
    methods: {
        getPeriodTaskList(){
            let parms = {
                pageNo:1,
                pageSize:100,
                taskId: this.taskId,
            };
            requestGet('/actual/base/communityOneTablePeriodPublish/getPeriodTaskList', parms).then(res => {
                this.tableData=res.data.list
            });
        },

        getDetail() {
            let parms = {
                id: this.taskId,
            };
            requestGet('/actual/base/communityOneTablePeriodPublish/getDetail', parms).then(res => {
                this.formData=res.data;
                const { id, taskId, taskTitle, taskPeriod, taskType, taskIntroduction } = this.formData;
                this.infoObj = {id, taskId, taskTitle, taskPeriod, taskType, taskIntroduction} 
            });
        },
        close() {
            this.showView = false
        },
        handleClickBack() {
            this.$emit('close')
        },
        handelPersonel() {
            this.showPersonel = false;
        },
        oncClickInfo(value){
            console.log(value,"dslkjflksjd");
            this.showType=value
            this.showPersonel=true
        },
        handelClickBack() {
            this.$emit('handleShowPage')
        },
        handleClickShowView(val){
            this.$store.state.sidebarFold = true;
            this.showView = true;
            this.workbookId = val
        },
    },
    components: {acceptingPersonel,excelView},
    computed: {
        tableHeight() {
            return (this.clientHeight - 140) + 'px'
        },
        ...mapGetters(['clientHeight', 'resolution']),
    },
    watch: {},
    props: {
        taskId: {
            type: String,
            default: ""
        },
    },
}
</script>

<style lang='scss' scoped>
.card {
    background-color: #ffffff;
    border-radius: 5px;
    margin: 10px 16px;
}

.basic {
    padding: 0 30px;
    box-sizing: border-box;
    .el-row{
        margin-bottom: 16px;
        .label{
            min-width: 80px;
        }
    }
}

.title {
    position: relative;
    margin: 0 16px;

    &::after {
        content: '';
        width: 4px;
        height: 16px;
        background: #5493ff;
        display: block;
        position: absolute;
        top: 16px;
        left: -16px;
    }
}
.item {
    margin-right: 16px;
    width: 16%;
    margin-bottom: 16px;

    img {
        width: 80px;
        height: 80px;
    }
}
</style>