660 lines
20 KiB
Vue
660 lines
20 KiB
Vue
<template>
|
|
<!-- 表格形式的项目信息页面 -- 简易版 -->
|
|
<div class="extendInfo whiteBlock">
|
|
<vue-scroll style="width: 100%">
|
|
<div class="btn_wrap">
|
|
<el-button
|
|
v-permission="{key: 'xmkzxx_edit', menuPath: '/project/summary/extendInfo'}"
|
|
type="primary"
|
|
size="medium"
|
|
@click="editBtn">{{$t("message.companyDiagram.Table.edit")}}
|
|
</el-button>
|
|
</div>
|
|
<div>
|
|
<div class="custom_tab">
|
|
<div class="title">
|
|
{{ $t("message.extendInfo.projectExtension") }}
|
|
</div>
|
|
<div class="flex4">
|
|
<div class="type_content">
|
|
<!-- 施工合同额 -->
|
|
<div class="flex3">
|
|
<span class="width_35">
|
|
{{ $t("message.extendInfo.contractPrice") }}
|
|
</span>
|
|
<span class="width_65">{{ projectDetail.contractPrice }}</span>
|
|
</div>
|
|
<!-- 总投资额(万元) -->
|
|
<div class="flex3">
|
|
<span class="width_35">
|
|
{{ $t("message.extendInfo.investmentPrice") }}
|
|
</span>
|
|
<span class="width_65">{{ projectDetail.contractPrice }}</span>
|
|
</div>
|
|
|
|
<div class="flex3">
|
|
<span class="width_35">
|
|
{{ $t("message.extendInfo.contractSigning") }}
|
|
</span>
|
|
<span class="width_65">{{
|
|
projectDetail.contractSignTime
|
|
}}</span>
|
|
</div>
|
|
<div class="flex3">
|
|
<span class="width_35">
|
|
{{ $t("message.extendInfo.contractProjectTime") }}
|
|
</span>
|
|
<span class="width_65 bg_color"
|
|
>{{ projectDetail.contractPeriodStartTime }} /
|
|
{{ projectDetail.contractPeriodEndTime }}</span
|
|
>
|
|
</div>
|
|
<div class="flex3">
|
|
<span class="width_35">
|
|
{{ $t("message.extendInfo.actualConstructionTime") }}
|
|
</span>
|
|
<span class="width_65"
|
|
>{{ projectDetail.realPeriodStartTime }} /
|
|
{{ projectDetail.realPeriodEndTime }}
|
|
</span>
|
|
</div>
|
|
<div class="flex3">
|
|
<span class="width_35">
|
|
{{ $t("message.extendInfo.toryBurchOnSale") }}
|
|
</span>
|
|
<span class="width_65 bg_color">{{
|
|
projectDetail.bidWinner
|
|
}}</span>
|
|
</div>
|
|
<div class="flex3">
|
|
<span class="width_35">
|
|
{{ $t("message.extendInfo.architect") }}
|
|
</span>
|
|
<span class="width_65">{{ projectDetail.designUnit }}</span>
|
|
</div>
|
|
<div class="flex3">
|
|
<span class="width_35 bg_color">
|
|
{{ $t("message.extendInfo.ownersUnit") }}
|
|
</span>
|
|
<span class="width_65 bg_color" style="padding: 0 15px">{{
|
|
projectDetail.ownerUnit
|
|
}}</span>
|
|
</div>
|
|
|
|
<div class="flex3" style="height: 120px">
|
|
<span class="width_35">
|
|
{{ $t("message.extendInfo.projectProfile") }}
|
|
</span>
|
|
<span
|
|
class="position"
|
|
style="padding: 0 15px; box-sizing: border-box"
|
|
>{{ projectDetail.projectOverview }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="type_content">
|
|
<div class="flex3">
|
|
<!-- <span class="width_35"></span> -->
|
|
<span class="width_65"></span>
|
|
</div>
|
|
<div class="flex3">
|
|
<!-- <span class="width_35"></span> -->
|
|
<span class="width_65"></span>
|
|
</div>
|
|
<div class="flex3">
|
|
<!-- <span class="width_35"></span> -->
|
|
<span class="width_65"></span>
|
|
</div>
|
|
<div class="flex3">
|
|
<span
|
|
class="width_35 bg_color"
|
|
style="width: 35%; height: 60px; border: none"
|
|
></span>
|
|
<span class="width_65 bg_color"></span>
|
|
</div>
|
|
<div class="flex3">
|
|
<!-- <span class="width_35"></span> -->
|
|
<span class="width_65"></span>
|
|
</div>
|
|
<div class="flex3">
|
|
<span class="width_35 border_l">
|
|
{{ $t("message.extendInfo.constructionUnit") }}
|
|
</span>
|
|
<span class="width_65 bg_color">{{
|
|
projectDetail.constructionUnit
|
|
}}</span>
|
|
</div>
|
|
<div class="flex3">
|
|
<span class="width_35 border_l">
|
|
{{ $t("message.extendInfo.supervisingUnit") }}
|
|
</span>
|
|
<span class="width_65">{{ projectDetail.supervisorUnit }}</span>
|
|
</div>
|
|
<!-- <div class="flex3">
|
|
<span class="width_35 border_l">
|
|
{{'代建单位'}}
|
|
</span>
|
|
<span class="width_65">{{ projectDetail.supervisorUnit }}</span>
|
|
</div> -->
|
|
<div class="flex3">
|
|
<span class="width_35 border_l">
|
|
安全教育培训
|
|
</span>
|
|
<span class="width_65 bg_color">{{ projectDetail.eduCourseName }}</span>
|
|
</div>
|
|
<div class="flex3" style="height: 120px">
|
|
<span class=""></span>
|
|
<span class="width_65"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
<!-- 项目弹框 -->
|
|
<el-dialog
|
|
:modal-append-to-body="false"
|
|
class="projectDialog"
|
|
:title="projectDialogTitle"
|
|
:visible.sync="editProjectDialog"
|
|
width="700px"
|
|
:close-on-click-modal="false"
|
|
>
|
|
<div class="dialog_content" style="padding: 0 100px">
|
|
<el-form
|
|
ref="editProjectForm"
|
|
:model="editProjectForm"
|
|
label-width="140px"
|
|
:rules="editProjectFormRules"
|
|
size="medium"
|
|
>
|
|
<el-form-item
|
|
:label="$t('message.extendInfo.contractPrice')"
|
|
prop="contractPrice"
|
|
>
|
|
<el-input
|
|
type="number"
|
|
@change="checkValue()"
|
|
v-model="editProjectForm.contractPrice"
|
|
placeholder="请输入数字类型"
|
|
></el-input>
|
|
<!-- <el-input-number
|
|
type="number"
|
|
@change="checkValue()"
|
|
style="width: 100%"
|
|
v-model="editProjectForm.contractPrice"
|
|
:min="0"
|
|
:placeholder="$t('message.extendInfo.pleaseEnter')"
|
|
></el-input-number> -->
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('message.extendInfo.contractSigning')"
|
|
prop="contractSignTime"
|
|
>
|
|
<el-date-picker
|
|
style="width: 100%"
|
|
v-model="editProjectForm.contractSignTime"
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
:placeholder="$t('message.extendInfo.optionDate')"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('message.extendInfo.contractProjectTime')"
|
|
prop="contractPeriodEndTime"
|
|
>
|
|
<!-- 合同 -->
|
|
<el-date-picker
|
|
v-model="editProjectForm.contractTime"
|
|
type="daterange"
|
|
unlink-panels
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
clearable
|
|
value-format="yyyy-MM-dd"
|
|
format="yyyy-MM-dd"
|
|
@input="getContractTime"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('message.extendInfo.actualConstructionTime')"
|
|
prop="realPeriodStartTime"
|
|
>
|
|
<!-- 实际 -->
|
|
<el-date-picker
|
|
v-model="editProjectForm.realTime"
|
|
type="daterange"
|
|
unlink-panels
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
clearable
|
|
value-format="yyyy-MM-dd"
|
|
format="yyyy-MM-dd"
|
|
@input="getRealTime"
|
|
>
|
|
</el-date-picker>
|
|
<!-- <el-date-picker
|
|
style="width: 100%"
|
|
v-model="editProjectForm.realTime"
|
|
type="daterange"
|
|
value-format="yyyy-MM-dd"
|
|
:range-separator="$t('message.extendInfo.to')"
|
|
:start-placeholder="$t('message.extendInfo.startDate')"
|
|
:end-placeholder="$t('message.extendInfo.endingDate')"
|
|
@change="getRealTime"
|
|
>
|
|
</el-date-picker> -->
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('message.extendInfo.toryBurchOnSale')"
|
|
prop="bidWinner"
|
|
>
|
|
<el-input
|
|
v-model="editProjectForm.bidWinner"
|
|
:placeholder="$t('message.extendInfo.pleaseEnter')"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('message.extendInfo.architect')"
|
|
prop="designUnit"
|
|
>
|
|
<el-input
|
|
v-model="editProjectForm.designUnit"
|
|
:placeholder="$t('message.extendInfo.pleaseEnter')"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('message.extendInfo.constructionUnit')"
|
|
prop="constructionUnit"
|
|
>
|
|
<el-input
|
|
v-model="editProjectForm.constructionUnit"
|
|
:placeholder="$t('message.extendInfo.pleaseEnter')"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('message.extendInfo.supervisingUnit')"
|
|
prop="supervisorUnit"
|
|
>
|
|
<el-input
|
|
v-model="editProjectForm.supervisorUnit"
|
|
:placeholder="$t('message.extendInfo.pleaseEnter')"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('message.extendInfo.ownersUnit')"
|
|
prop="ownerUnit"
|
|
>
|
|
<el-input
|
|
v-model="editProjectForm.ownerUnit"
|
|
:placeholder="$t('message.extendInfo.pleaseEnter')"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="安全教育培训" prop="educationId">
|
|
<el-select
|
|
v-model="editProjectForm.educationId"
|
|
style="width: 100%"
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in educationList"
|
|
:key="item.id"
|
|
:label="item.eduCourseName"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('message.extendInfo.projectProfile')"
|
|
prop="projectOverview"
|
|
>
|
|
<el-input
|
|
v-model="editProjectForm.projectOverview"
|
|
:placeholder="$t('message.extendInfo.pleaseEnter')"
|
|
type="textarea"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="dialog-footer">
|
|
<el-button
|
|
class="cancleBtn"
|
|
@click="editProjectDialog = false"
|
|
icon="el-icon-circle-close"
|
|
size="medium"
|
|
>{{ $t("message.companyDiagram.cancel") }}</el-button
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-circle-check"
|
|
size="medium"
|
|
@click="onSubmit('editProjectForm')"
|
|
>{{ $t("message.companyDiagram.determine") }}</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 查看大图 -->
|
|
<el-dialog :modal-append-to-body="false" :visible.sync="bigImageDialog">
|
|
<img width="100%" :src="bigImageUrl" alt />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getProjectExtendInfoApi,
|
|
editProjectExtendApi,
|
|
getSafeEducationDataApi
|
|
} from "@/assets/js/api/baseInfo.js";
|
|
export default {
|
|
name: "extendInfo",
|
|
data() {
|
|
return {
|
|
projectDialogTitle: this.$t("message.extendInfo.editProjectInfo"),
|
|
editProjectDialog: false,
|
|
editProjectForm: {
|
|
contractTime: ["", ""],
|
|
realTime: [],
|
|
contractSignTime: "",
|
|
contractPeriodEndTime: "",
|
|
contractPeriodStartTime: "",
|
|
realPeriodStartTime: "",
|
|
realPeriodEndTime: "",
|
|
bidWinner: "",
|
|
designUnit: "",
|
|
constructionUnit: "",
|
|
supervisorUnit: "",
|
|
ownerUnit: "",
|
|
projectOverview: "",
|
|
educationId: "",
|
|
contractPrice: "",
|
|
},
|
|
educationList: [],
|
|
editProjectFormRules: this.$t("message.extendInfo.editProjectFormRules"),
|
|
projectSn: "",
|
|
projectDetail: {},
|
|
bigImageDialog: false,
|
|
bigImageUrl: "",
|
|
provincesCityArr: [],
|
|
provincesCityList: [],
|
|
cascaderProps: {
|
|
label: "name",
|
|
children: "childrenlist",
|
|
value: "code",
|
|
},
|
|
showMap: false,
|
|
};
|
|
},
|
|
created() {
|
|
this.projectSn = this.$store.state.projectSn;
|
|
this.getProjectExtendInfo();
|
|
this.getEducationListFn();
|
|
},
|
|
methods: {
|
|
getEducationListFn() {
|
|
let requestData = {
|
|
projectSn: this.projectSn,
|
|
pageSize: -1
|
|
}
|
|
getSafeEducationDataApi(requestData).then(res => {
|
|
console.log(res,'123测试520')
|
|
if(res.code == 200){
|
|
this.educationList = res.result.records;
|
|
} else {
|
|
this.educationList = [];
|
|
}
|
|
})
|
|
},
|
|
checkValue() {
|
|
var value = "" + this.editProjectForm.contractPrice.toString();
|
|
value = value
|
|
.replace(/[^\d.]/g, "") // 清除“数字”和“.”以外的字符
|
|
.replace(/\.{2,}/g, ".") // 只保留第一个. 清除多余的
|
|
.replace(/^\./g, "") //保证第一个为数字而不是.
|
|
.replace(".", "$#$")
|
|
.replace(/\./g, "")
|
|
.replace("$#$", ".")
|
|
.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); // 只能输入两个小数
|
|
if (value.indexOf(".") < 0 && value != "") {
|
|
// 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
|
|
value = parseFloat(value);
|
|
}
|
|
value = Number(value).toFixed(2); //不足补位
|
|
this.editProjectForm.contractPrice = value;
|
|
},
|
|
//获取列表信息
|
|
getProjectExtendInfo() {
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
};
|
|
getProjectExtendInfoApi(data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.projectDetail = res.result
|
|
? JSON.parse(JSON.stringify(res.result))
|
|
: this.editProjectForm;
|
|
this.editProjectForm = res.result
|
|
? JSON.parse(JSON.stringify(res.result))
|
|
: this.editProjectForm;
|
|
}
|
|
});
|
|
},
|
|
|
|
// 编辑按钮
|
|
editBtn() {
|
|
this.editProjectDialog = true;
|
|
if (this.editProjectForm.id) {
|
|
let data = JSON.parse(JSON.stringify(this.editProjectForm));
|
|
data.contractTime = [];
|
|
data.realTime = [];
|
|
this.editProjectForm = data;
|
|
this.editProjectForm.contractTime = [
|
|
data.contractPeriodStartTime,
|
|
data.contractPeriodEndTime,
|
|
];
|
|
this.editProjectForm.realTime = [
|
|
data.realPeriodStartTime,
|
|
data.realPeriodEndTime,
|
|
];
|
|
}
|
|
},
|
|
|
|
//获取合同工期
|
|
getContractTime(value) {
|
|
if (value) {
|
|
this.editProjectForm.contractPeriodStartTime = value[0];
|
|
this.editProjectForm.contractPeriodEndTime = value[1];
|
|
} else {
|
|
this.editProjectForm.contractPeriodStartTime = "";
|
|
this.editProjectForm.contractPeriodEndTime = "";
|
|
}
|
|
},
|
|
//获取实际工期
|
|
getRealTime(value) {
|
|
if (value) {
|
|
this.editProjectForm.realPeriodStartTime = value[0];
|
|
this.editProjectForm.realPeriodEndTime = value[1];
|
|
} else {
|
|
this.editProjectForm.realPeriodStartTime = "";
|
|
this.editProjectForm.realPeriodEndTime = "";
|
|
}
|
|
},
|
|
|
|
onSubmit(formName) {
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
let data = this.editProjectForm;
|
|
data.projectSn = this.projectSn;
|
|
editProjectExtendApi(data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message.success(
|
|
this.$t("message.extendInfo.modifySuccessfully")
|
|
);
|
|
this.editProjectDialog = false;
|
|
this.getProjectExtendInfo();
|
|
}
|
|
});
|
|
} else {
|
|
console.log("error submit!!");
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.flex2 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
.flex3 {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.flex4 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.flex5 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.extendInfo {
|
|
width: 100%;
|
|
height: 100%;
|
|
// background: #ffffff;
|
|
padding: 15px;
|
|
box-sizing: border-box;
|
|
.btn_wrap {
|
|
text-align: right;
|
|
}
|
|
.custom_tab {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
border: 1px solid rgba(148, 148, 148, 0.5);
|
|
border-bottom: none;
|
|
margin-top: 23px;
|
|
// color: #333;
|
|
.title {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
padding: 12px 20px;
|
|
border-bottom: 1px solid rgba(148, 148, 148, 0.5);
|
|
box-sizing: border-box;
|
|
height: 60px;
|
|
background: #eeeeee;
|
|
line-height: 35px;
|
|
}
|
|
|
|
.type_content {
|
|
width: 50%;
|
|
div {
|
|
font-size: 14px;
|
|
// padding: 12px 0;
|
|
height: 60px;
|
|
// line-height: 60px;
|
|
// display: inline-flex;
|
|
// align-items: center;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid rgba(148, 148, 148, 0.5);
|
|
}
|
|
}
|
|
|
|
.width_65 {
|
|
width: 65%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
padding: 0 15px;
|
|
word-break: break-all;
|
|
}
|
|
.width_35 {
|
|
height: 100%;
|
|
width: 35%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
border-right: 1px solid rgba(148, 148, 148, 0.5);
|
|
padding: 0 15px;
|
|
text-align: right;
|
|
background: rgba(235, 234, 234, 0.5);
|
|
}
|
|
}
|
|
.bg_color {
|
|
background: rgba(235, 234, 234, 0.5);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
}
|
|
.border_l {
|
|
border-left: 1px solid rgba(148, 148, 148, 0.5);
|
|
}
|
|
|
|
/deep/ .el-dialog {
|
|
margin-top: 80px !important;
|
|
}
|
|
.avatar-uploader {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
// overflow: hidden;
|
|
height: 178px;
|
|
}
|
|
|
|
.avatar-uploader:hover {
|
|
border-color: #409eff;
|
|
}
|
|
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
line-height: 178px;
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar {
|
|
width: 178px;
|
|
height: 178px;
|
|
display: block;
|
|
}
|
|
|
|
.imgBox {
|
|
position: relative;
|
|
|
|
.el-icon-error {
|
|
font-size: 20px;
|
|
position: absolute;
|
|
right: -10px;
|
|
top: -10px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.position {
|
|
position: absolute;
|
|
right: 0;
|
|
width: calc(100% - 17.5%);
|
|
z-index: 2;
|
|
height: 60px;
|
|
top: auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|