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.
231 lines
8.1 KiB
231 lines
8.1 KiB
<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>
|
|
|