epmet pc工作端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

214 lines
8.8 KiB

<template>
<div class="g-main" :style="{ height: tableHeight }">
<div class="right" v-if="!showSummary">
<div class="title-small" id="base">任务信息
<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
style="display: flex;margin-left: 10px;
justify-content: center; align-items: center; width: 60px; height: 20px; border: 2px solid #ADD8E6; color: #ADD8E6; font-size: 12px;">
{{ formData.taskStateName }}
</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="16" >
<el-form-item label="任务类型">
<div>{{formData.type || '数据填报'}}</div>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="完成时限">
<div>{{formData.completeLimitDay}}</div>
</el-form-item>
</el-col>
<el-col :span="16" v-if="formData.taskPeriod!=='once'">
<el-form-item label="任务完成有效期">
<div>{{formData.startTime }}-{{formData.endTime }}</div>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="任务周期">
<div>{{ formData.taskPeriod === 'once' ? '一次性' : formData.taskPeriod === 'weekly' ? '每周' : formData.taskPeriod === 'halfAMonth' ? '每半月' : formData.taskPeriod === 'month' ? '每月' : '每季度' }}</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.totalNum}}人</div>
<el-button @click="oncClickInfo('adjust')" type="text">调整接收人员</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>
<el-button style="margin-left: 10px;" type="text"
@click="oncClickInfo('edit')">[修改]</el-button>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="title-small" id="reside">任务进展情况</div>
<div class="m-table">
<el-table :data="tableData" border class="m-table-item"
style="width: 70%;margin-left: 3%; margin-top: 30px;" >
<el-table-column label="序号" fixed="left" type="index" align="center" width="80" />
<el-table-column prop="taskPeriodName" align="center" :show-overflow-tooltip="true" label="任务周期">
<template slot-scope="scope" v-if="taskPeriod === 'once'">
{{taskPeriod === 'once'?'一次性':`第${scope.row.taskNum}个周期`}}
</template>
<template slot-scope="scope" v-else>
{{scope.row.taskPeriodName}}
</template>
</el-table-column>
<el-table-column fixed="right" label="汇报情况" align="center">
<template slot-scope="scope">
<el-button @click="handleInfo(scope.row)" type="text" size="small">{{ scope.row.resolveNum}}/{{ scope.row.totalNum }}</el-button>
<el-button @click="handelClickShowSummary(scope.row)" type="text" size="small">查看</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div v-if="showSummary" style="width: 100%;background: #ffffff;">
<excel-summary @close="closeSummary" :summaryDetal=summaryDetal></excel-summary>
</div>
<div class=''>
<el-dialog :title="title" v-if="showPersonel" :visible.sync="showPersonel" width="50%" :close-on-click-modal="false">
<acceptingPersonel :showType="showType" :acceptingId="formData.acceptingId" :taskId="taskId"
@handelPersonel="handelPersonel" :formDatas="formData"></acceptingPersonel>
</el-dialog>
</div>
</div>
</template>
<script>
import { requestPost, requestGet } from "@/js/dai/request";
import acceptingPersonel from "./acceptingPersonel.vue";
import excelSummary from "./excel-summary.vue";
import { mapGetters } from 'vuex'
export default {
data() {
return {
title:"",
taskId:"",
showType:"",
showPersonel:false,
showSummary:false,
formData:{
},
tableData:[],
summaryDetal:{}
};
},
created() {},
mounted() {
this.getDetail()
this.getTableList()
},
methods: {
getDetail() {
let parms = {
id: this.taskId,
};
requestGet('/actual/base/communityOneTablePublish/getDetail', parms).then(res => {
this.formData=res.data
});
},
handelClickBack() {
this.$emit('handleShowPage')
},
handelPersonel() {
this.showPersonel = false;
this.getDetail()
},
oncClickPersonel(){
this.showType="adjust"
this.showPersonel=true
},
oncClickInfo(value){
this.taskId=this.formData.id
this.showType=value
if (value=="adjust") {
this.title="调整接收人员名单"
}else if(value === 'edit'){
this.title = '修改'
}
this.showPersonel=true
},
handelClickShowSummary(value){
console.log(value,"dslkjlksdf");
this.showSummary = true
this.summaryDetal=value
},
closeSummary(){
this.showSummary = false;
},
async getTableList(){
let url = '/actual/base/communityOneTablePeriodPublish/getPeriodTaskList'
let params = {
taskId:this.taskId,
pageSize:100,
pageNo:1
}
let {code,msg,data} = await requestGet(url,params)
if(code === 0){
this.tableData = data.list
}
}
},
components:{
acceptingPersonel,excelSummary
},
computed:{
tableHeight() {
return (this.clientHeight - 140) + 'px'
},
...mapGetters(['clientHeight', 'resolution']),
},
props: {
taskId: {
type: String,
default: ""
},
},
watch: {},
}
</script>
<style lang='scss' scoped>
@import "@/assets/scss/pages/resiInfo.scss";
@import "@/assets/scss/modules/management/list-main.scss";
</style>