501 lines
15 KiB
Vue
501 lines
15 KiB
Vue
<template>
|
|
<div class="fullHeight">
|
|
<div class="searchBox whiteBlock">
|
|
<el-form :inline="true" size="medium" class="demo-form-inline">
|
|
<el-form-item>
|
|
<el-button size="medium" type="primary" plain @click="getBackBtn"
|
|
>
|
|
<!-- 返回 -->
|
|
{{$t('message.projectManage.back')}}
|
|
</el-button
|
|
>
|
|
<el-button
|
|
size="medium"
|
|
type="primary"
|
|
plain
|
|
@click="showPlanBtn"
|
|
v-if="itemForm.personCharge == userId && itemForm.state!=2"
|
|
>
|
|
<!-- 进度反馈 -->
|
|
{{$t('message.projectManage.progressFeedback')}}
|
|
</el-button
|
|
>
|
|
<el-button
|
|
size="medium"
|
|
type="primary"
|
|
plain
|
|
@click="planPerformBtn"
|
|
v-if="itemForm.personCharge == userId && itemForm.state!=2"
|
|
>
|
|
<!-- 完成任务 -->
|
|
{{$t('message.projectManage.completeTask')}}
|
|
</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="table_wrap">
|
|
<div class="task_wrap whiteBlock">
|
|
<div class="pageTitle">
|
|
<!-- 任务内容 -->
|
|
{{$t('message.projectManage.taskContent')}}
|
|
<el-button size="small" type="info" plain v-if="itemForm.state==0">
|
|
<!-- 未开始 -->
|
|
{{$t('message.projectManage.notStart')}}
|
|
</el-button>
|
|
<el-button size="small" type="primary" plain v-if="itemForm.state==1">
|
|
<!-- 进行中 -->
|
|
{{$t('message.projectManage.underway')}}
|
|
</el-button>
|
|
<el-button size="small" type="success" plain v-if="itemForm.state==2">
|
|
<!-- 已完成 -->
|
|
{{$t('message.projectManage.completed')}}
|
|
</el-button>
|
|
</div>
|
|
<el-form ref="form" :model="itemForm" label-width="150px" style="width: 80%">
|
|
<!-- 分部分项工程名称 -->
|
|
<el-form-item prop="taskName" :label="$t('message.projectManage.NameOfSubProject')+':'">
|
|
{{itemForm.taskName}}
|
|
</el-form-item>
|
|
<el-form-item prop="startDate" label="计划开始时间:">{{
|
|
itemForm.startDate
|
|
}}</el-form-item>
|
|
<el-form-item prop="actualStartDate" label="实际开始时间:">{{
|
|
itemForm.actualStartDate
|
|
}}</el-form-item>
|
|
<el-form-item prop="actualFinishDate" label="实际完成时间:">{{
|
|
itemForm.actualFinishDate
|
|
}}</el-form-item>
|
|
<el-form-item prop="dutyUserName" label="负责人名称:">{{
|
|
itemForm.dutyUserName
|
|
}}</el-form-item>
|
|
<el-form-item prop="isOverdue" label="是否预期:">
|
|
{{itemForm.isOverdue == '0' ? '否' : itemForm.isOverdue == '1' ? '是' :'逾期已处理' }}
|
|
</el-form-item>
|
|
<el-form-item prop="progressRatio" label="进度比例:">{{
|
|
itemForm.progressRatio
|
|
}}</el-form-item>
|
|
<el-form-item prop="resourceName" label="资源名称:">{{
|
|
itemForm.resourceName
|
|
}}</el-form-item>
|
|
|
|
<el-form-item prop="taskTypeId" label="任务模式:">
|
|
{{itemForm.taskTypeId == '0' ? '手动' : '自动'}}
|
|
</el-form-item>
|
|
<!-- 上传的附件 -->
|
|
<el-form-item :label="$t('message.projectManage.uploadedAttachments')+':'">
|
|
<img
|
|
v-for="(item, index) in fileList"
|
|
:key="index"
|
|
:src="fileUrl + item.url"
|
|
@click="handlePreview({url:item.url})"
|
|
style="height: 50px; width: auto; margin-right: 10px; cursor: pointer;"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="remark" label="备注:">{{
|
|
itemForm.remark
|
|
}}</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="plan_wrap whiteBlock">
|
|
<div class="pageTitle">
|
|
<!-- 进度记录 -->
|
|
{{$t('message.projectManage.progressRecord')}}
|
|
</div>
|
|
<vue-scroll class="scroll" style="height: 94%; padding: 10px 0" v-if="planList.length>0">
|
|
<div
|
|
class="flex plan_content"
|
|
v-for="(item, index) in planList"
|
|
:key="index"
|
|
>
|
|
<img src="@/assets/images/profile_photo.png" class="dialog_img" />
|
|
<div class="whiteBlock plan_info">
|
|
<div class="flex3 back_info">
|
|
<!-- 反馈人 -->
|
|
<div> {{$t('message.projectManage.feedbackPeople')+':'}} {{ item.feedbackPersonName }}</div>
|
|
<div>{{ item.feedbackTime }}</div>
|
|
</div>
|
|
<div class="flex2">
|
|
<el-slider
|
|
v-model="item.progressRatio"
|
|
style="width: 85%"
|
|
:disabled="true"
|
|
:show-tooltip="false"
|
|
></el-slider>
|
|
<span class="ratio">{{ item.progressRatio }}%</span>
|
|
</div>
|
|
<!-- 反馈内容 -->
|
|
<div class="back_info margin">{{$t('message.projectManage.feedbackContent')}}</div>
|
|
<el-input
|
|
type="textarea"
|
|
:readonly="true"
|
|
v-model="item.feedbackContent"
|
|
>
|
|
</el-input>
|
|
<div>
|
|
<div class="back_info margin">
|
|
{{$t('message.projectManage.accessory')}}
|
|
<!-- 附件 -->
|
|
</div>
|
|
<img
|
|
v-if="!item.imgUrl"
|
|
src="@/assets/images/profile_photo.png"
|
|
class="accessory_img"
|
|
/>
|
|
<img
|
|
v-else
|
|
v-for="(itemImg, index) in JSON.parse(item.imgUrl)"
|
|
:key="index"
|
|
:src="fileUrl + itemImg.url"
|
|
@click="handlePreview({url:itemImg.url})"
|
|
class="accessory_img"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
<div v-else class="noData">
|
|
<img src="@/assets/images/noData.png"/>
|
|
<div>
|
|
<!-- 暂无数据 -->
|
|
{{$t('message.projectManage.noData')}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 进度反馈弹窗 -->
|
|
<el-dialog
|
|
:modal-append-to-body="false"
|
|
:title="workerInfo.type == 1 ?$t('message.projectManage.progressFeedback') : $t('message.projectManage.completeTask')"
|
|
:visible.sync="dialogVisible"
|
|
width="667px"
|
|
>
|
|
<div class="dialog_content">
|
|
<el-form
|
|
ref="workerInfoForm"
|
|
label-width="100px"
|
|
size="medium"
|
|
class="dialogFormBox"
|
|
:rules="addEditRules"
|
|
:model="workerInfo"
|
|
>
|
|
<!-- 进度 -->
|
|
<el-form-item
|
|
:label="$t('message.projectManage.progress')"
|
|
prop="progressRatio"
|
|
v-if="workerInfo.type == 1"
|
|
>
|
|
<div class="flex2">
|
|
<el-slider
|
|
v-model="workerInfo.progressRatio"
|
|
style="width: 78%"
|
|
:show-tooltip="false"
|
|
></el-slider>
|
|
<span class="ratio">{{ workerInfo.progressRatio }}%</span>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="workerInfo.type == 1 ? $t('message.projectManage.feedbackContent') :$t('message.projectManage.taskSummary') "
|
|
prop="feedbackContent"
|
|
>
|
|
<el-input type="textarea" v-model="workerInfo.feedbackContent">
|
|
</el-input>
|
|
</el-form-item>
|
|
<!-- '附件' -->
|
|
<el-form-item :label="$t('message.projectManage.accessory')" prop="fileUrl">
|
|
<el-upload
|
|
class="upload-demo"
|
|
:action="uploadUrl"
|
|
:on-preview="handlePreview"
|
|
:on-success="handleSuccess"
|
|
:limit="5"
|
|
multiple
|
|
:file-list="palnFileList"
|
|
name="files"
|
|
:on-remove="handleRemove"
|
|
>
|
|
<el-button size="small" type="primary" plain>
|
|
<!-- 点击上传 -->
|
|
{{$t('message.projectManage.clickUpdate')}}
|
|
</el-button>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<div class="dialog-footer">
|
|
<el-button
|
|
class="cancleBtn"
|
|
@click="dialogVisible = false"
|
|
icon="el-icon-circle-close"
|
|
size="medium"
|
|
>{{ $t("message.personnelPosition.cancel") }}
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-circle-check"
|
|
@click="savePlanBtn"
|
|
size="medium"
|
|
>{{ $t("message.personnelPosition.determine") }}
|
|
</el-button>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- //查看大图 -->
|
|
<el-dialog :modal-append-to-body="false" :visible.sync="showBigImg">
|
|
<img width="100%" :src="dialogImageUrl" alt="" />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getProgressTaskApi, addPlanInfoApi } from "@/assets/js/api/scheduleInfo";
|
|
export default {
|
|
props: ["id"],
|
|
mounted() {},
|
|
data() {
|
|
return {
|
|
seedId: "",
|
|
projectSn: "",
|
|
uploadUrl: "",
|
|
fileUrl: "",
|
|
itemForm: {
|
|
taskName:"",
|
|
},
|
|
planList: [],
|
|
fileList: [],
|
|
dialogVisible: false,
|
|
addEditRules: {
|
|
progressRatio: [
|
|
{
|
|
required: true,
|
|
message: this.$t("message.personnelPosition.required"),
|
|
trigger: "change",
|
|
},
|
|
],
|
|
feedbackContent: [
|
|
{
|
|
required: true,
|
|
message: this.$t("message.personnelPosition.required"),
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
},
|
|
workerInfo: {
|
|
//进度反馈信息
|
|
progressRatio: 0,
|
|
feedbackContent: "",
|
|
imgUrl: "",
|
|
subitemId: "",
|
|
type: 1,
|
|
feedbackPerson: "",
|
|
},
|
|
showBigImg: false,
|
|
dialogImageUrl: "", //大图
|
|
palnFileList: [], // 新增反馈进度的附件
|
|
userId: "",
|
|
};
|
|
},
|
|
created() {
|
|
this.userId = this.$store.state.userInfo.userId;
|
|
this.seedId = this.$props.id;
|
|
this.projectSn = this.$store.state.projectSn;
|
|
this.uploadUrl = this.$store.state.UPLOADURL;
|
|
this.fileUrl = this.$store.state.FILEURL;
|
|
this.getDetailInfo();
|
|
},
|
|
methods: {
|
|
//返回列表页
|
|
getBackBtn() {
|
|
this.$emit("closeDetail", false);
|
|
},
|
|
|
|
//进度反馈按钮
|
|
showPlanBtn() {
|
|
this.dialogVisible = true;
|
|
this.workerInfo.progressRatio = 0;
|
|
this.workerInfo.feedbackContent = "";
|
|
this.palnFileList = [];
|
|
this.workerInfo.type = 1;
|
|
setTimeout(() => {
|
|
this.$refs.workerInfoForm.clearValidate();
|
|
}, 200);
|
|
},
|
|
|
|
//进度完成按钮
|
|
planPerformBtn() {
|
|
this.dialogVisible = true;
|
|
this.workerInfo.feedbackContent = "";
|
|
this.palnFileList = [];
|
|
this.workerInfo.type = 2;
|
|
setTimeout(() => {
|
|
this.$refs.workerInfoForm.clearValidate();
|
|
}, 200);
|
|
},
|
|
|
|
//获取详情数据
|
|
getDetailInfo() {
|
|
let data = {
|
|
id: this.seedId,
|
|
};
|
|
getProgressTaskApi(data).then((res) => {
|
|
if (res.code == 200) {
|
|
console.log('查看详情',res)
|
|
this.itemForm = res.result
|
|
this.planList = res.result.feedbackList;
|
|
// //获取项目的基本信息的附件
|
|
// this.fileList = res.result.itemDetail.fileUrl
|
|
// ? [JSON.parse(res.result.itemDetail.fileUrl)]
|
|
// : [];
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
});
|
|
},
|
|
|
|
//点击查看图片时
|
|
handlePreview(file) {
|
|
console.log(file)
|
|
this.dialogImageUrl = this.fileUrl+file.url;
|
|
this.showBigImg = true;
|
|
},
|
|
//上传成功
|
|
handleSuccess(file) {
|
|
let data = { name: file.data[0].filename, url: file.data[0].imageUrl };
|
|
this.palnFileList.push(data);
|
|
},
|
|
//删除成功
|
|
handleRemove(file, fileList) {
|
|
let url = file.url;
|
|
for (let i = 0; i < this.palnFileList.length; i++) {
|
|
if (this.palnFileList[i].url == url) {
|
|
//删除数据
|
|
this.palnFileList.splice(i, 1);
|
|
}
|
|
}
|
|
},
|
|
|
|
//保存进度
|
|
savePlanBtn() {
|
|
this.$refs.workerInfoForm.validate((valid) => {
|
|
if (valid) {
|
|
let data = this.workerInfo;
|
|
data.feedbackPerson = this.userId;
|
|
data.subitemId = this.seedId;
|
|
data.imgUrl =
|
|
this.palnFileList.length > 0 ? JSON.stringify(this.palnFileList) : "";
|
|
addPlanInfoApi(data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message.success(res.message);
|
|
this.dialogVisible = false;
|
|
this.getDetailInfo();
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
});
|
|
}else{
|
|
return false;
|
|
}
|
|
})
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
.flex2 {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.flex3 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.scroll {
|
|
background: #f3f5fd;
|
|
box-sizing: border-box;
|
|
}
|
|
.table_wrap {
|
|
display: flex;
|
|
width: 100%;
|
|
.task_wrap {
|
|
width: 60%;
|
|
margin-right: 12px;
|
|
padding: 15px;
|
|
box-sizing: border-box;
|
|
}
|
|
.plan_wrap {
|
|
width: 40%;
|
|
padding: 15px;
|
|
box-sizing: border-box;
|
|
.plan_content {
|
|
width: 100%;
|
|
padding: 12px 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.dialog_img {
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 50%;
|
|
margin-top: 15px;
|
|
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.11);
|
|
}
|
|
.plan_info {
|
|
width: 100%;
|
|
margin-left: 30px;
|
|
padding: 20px 25px;
|
|
position: relative;
|
|
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.11);
|
|
}
|
|
.plan_info:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: -10px;
|
|
top: 20px;
|
|
border-style: solid;
|
|
border-width: 10px;
|
|
border-color: #fff #fff transparent transparent;
|
|
transform: rotate(-135deg);
|
|
box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.margin {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.accessory_img {
|
|
width: auto;
|
|
height: 55px;
|
|
margin: 10px 10px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/deep/.el-slider__runway.disabled .el-slider__bar {
|
|
background-color: #5181f6 !important;
|
|
}
|
|
/deep/.el-slider__runway.disabled .el-slider__button {
|
|
border-color: #5181f6 !important;
|
|
}
|
|
}
|
|
.back_info {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-bottom: 10px;
|
|
}
|
|
.ratio {
|
|
margin-left: 24px;
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: #5181f6;
|
|
}
|
|
|
|
.noData{
|
|
text-align: center;
|
|
height: 90%;
|
|
padding-top: 50%;
|
|
box-sizing: border-box;
|
|
color: #BACDFC;
|
|
}
|
|
</style> |