feat: 监理月报部分功能新增

This commit is contained in:
kun 2023-09-05 16:04:16 +08:00
parent 8f60e57e73
commit d13c07e168

View File

@ -37,15 +37,179 @@
<div>签字</div>
</div>
<div class="report-content-part2">
<div class="engineer-name">项目监理部总监理工程师签认意见</div>
<div>项目监理部总监理工程师签认意见</div>
<div>
<el-input v-model="formData.advice" :rows="3" type="textarea" />
</div>
<div>编制人员</div>
<div>土建专业监理工程师</div>
<div>水暖专业监理工程师</div>
<div>电气专业监理工程师</div>
<div>签字</div>
<div>
<span>总监理工程师</span>
<span></span>
<span></span>
</div>
</div>
<div class="report-content-part3">
<div>
<div>工程名称</div>
<div>天地一号御花园项目</div>
<div>设计单位</div>
<div>威海城市规划建筑设计院</div>
</div>
<div>
<div>建设单位</div>
<div>中国建筑第八分公司</div>
<div>施工单位</div>
<div>秦天建设劳务施工有限公司</div>
</div>
</div>
<div class="report-content-part4">
<div><span>形象进度完成情况</span></div>
<div>
<div>
<div><span>实际完成</span></div>
<div>
<el-input v-model="formData.advice" :rows="3" type="textarea" placeholder="请输入内容" style="width: 98%" />
</div>
</div>
<div>
<div>原因分析</div>
<div>
<el-input v-model="formData.advice" :rows="3" type="textarea" placeholder="请输入内容" style="width: 98%" />
</div>
</div>
</div>
</div>
<div class="report-content-part5">
<div><span>工程签证情况</span></div>
<div>
<div>
<div><span>专题报告例会纪要</span></div>
<div>
<el-input v-model="formData.advice" :rows="3" type="textarea" placeholder="请输入内容" style="width: 95%" />
</div>
<div><span>内容简要</span></div>
<div>
<el-input v-model="formData.advice" :rows="3" type="textarea" placeholder="请输入内容" style="width: 95%" />
</div>
</div>
<div>
<div><span>工程质量签证</span></div>
<div>
<el-input v-model="formData.advice" :rows="3" type="textarea" placeholder="请输入内容" style="width: 95%" />
</div>
<div><span>内容简要</span></div>
<div>
<el-input v-model="formData.advice" :rows="3" type="textarea" placeholder="请输入内容" style="width: 95%" />
</div>
</div>
<div>
<div><span>向施工单位发出的通知指示指令</span></div>
<div>
<el-input v-model="formData.advice" :rows="3" type="textarea" placeholder="请输入内容" style="width: 95%" />
</div>
<div><span>内容简要</span></div>
<div>
<el-input v-model="formData.advice" :rows="3" type="textarea" placeholder="请输入内容" style="width: 95%" />
</div>
</div>
<div>
<div><span>施工单位提出的各种报告</span></div>
<div>
<el-input v-model="formData.advice" :rows="3" type="textarea" placeholder="请输入内容" style="width: 95%" />
</div>
<div><span>内容简要</span></div>
<div>
<el-input v-model="formData.advice" :rows="3" type="textarea" placeholder="请输入内容" style="width: 95%" />
</div>
</div>
<div>
<div><span>工程付款签证</span></div>
<div>
<el-input v-model="formData.advice" :rows="3" type="textarea" placeholder="请输入内容" style="width: 95%" />
</div>
<div><span>内容简要</span></div>
<div>
<el-input v-model="formData.advice" :rows="3" type="textarea" placeholder="请输入内容" style="width: 95%" />
</div>
</div>
</div>
</div>
<div class="report-content-step">
<div class="step-title">工程进度</div>
<div class="step-sub-title">本月完成情况</div>
<div class="step-input">
<el-input v-model="formData.advice" :rows="3" type="textarea" />
</div>
<div class="step-sub-title">下月计划完成</div>
<div class="step-input">
<el-input v-model="formData.advice" :rows="3" type="textarea" />
</div>
</div>
<div class="report-content-step">
<div class="step-title">工程质量</div>
<div class="step-input" style="margin-top: 11px">
<el-input v-model="formData.advice" :rows="3" type="textarea" />
</div>
</div>
<div class="report-content-step">
<div class="step-title">安全环保文明生产</div>
<div class="step-input" style="margin-top: 11px">
<el-input v-model="formData.advice" :rows="3" type="textarea" />
</div>
</div>
<div class="report-content-step">
<div class="step-title">费用支付</div>
<div class="step-input" style="margin-top: 11px">
<el-input v-model="formData.advice" :rows="3" type="textarea" />
</div>
</div>
<div class="report-content-step">
<div class="step-title">合同管理</div>
<div class="step-input" style="margin-top: 11px">
<el-input v-model="formData.advice" :rows="3" type="textarea" />
</div>
</div>
<div class="report-content-step">
<div class="step-title">存在的问题</div>
<div class="step-input" style="margin-top: 11px">
<el-input v-model="formData.advice" :rows="3" type="textarea" />
</div>
</div>
<div class="report-content-step">
<div class="step-title">监理工作小结</div>
<div class="step-input" style="margin-top: 11px">
<el-input v-model="formData.advice" :rows="3" type="textarea" />
</div>
</div>
<div class="report-content-step">
<div class="step-title">下月工作计划</div>
<div class="step-input" style="margin-top: 11px">
<el-input v-model="formData.advice" :rows="3" type="textarea" />
</div>
</div>
<div class="report-content-step">
<div class="step-title">本月大事记</div>
<div class="step-input" style="margin-top: 11px">
<el-input v-model="formData.advice" :rows="3" type="textarea" />
</div>
</div>
<div class="report-content-img">
<div class="step-title">本月大事记</div>
<div class="img-list">
<img src="" alt="" srcset="" />
<img src="" alt="" srcset="" />
<div class="face-img">
<el-upload
class="face-uploader"
:action="`${baseUrl}` + '/xmgl/file/upload'"
:show-file-list="false"
:on-success="(response, uploadFile) => handleAvatarSuccess(response, uploadFile)"
accept="image/jpg, image/jpeg, image/png"
>
<el-icon><plus /></el-icon>
</el-upload>
</div>
</div>
</div>
</div>
<template #footer>
@ -60,24 +224,31 @@
<script lang="ts" setup>
import { onMounted, ref, watch, reactive } from "vue";
import type { UploadProps } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
const baseUrl = import.meta.env.VITE_API_URL;
const props = defineProps({
addVisible: Boolean
});
const emits = defineEmits(["update:addVisible"]);
const formData = ref({
const formData = ref<any>({
number: "",
advice: ""
});
const visible1 = ref(true);
//
const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
console.log(response.result.url);
console.log(response, uploadFile);
};
const validatorPhone = (e: any, key: any) => {
//
// let pattern = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
// let dataValue = formData.value[key];
// if (!pattern.test(dataValue)) {
// ElMessage.error("");
// formData.value[key] = "";
// }
let pattern = /^\d+$/;
let dataValue = formData.value[key];
if (!pattern.test(dataValue)) {
ElMessage.error("请输入正确的手机号码");
formData.value[key] = "";
}
};
//
const closeMain = () => {
@ -192,6 +363,209 @@ onMounted(() => {});
padding: 16px 9px;
border: 1px solid #dedede;
border-top: 0;
div:nth-child(1) {
font-size: 16px;
font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
margin-bottom: 14px;
}
div:nth-child(3) {
@include flex;
justify-content: flex-end;
span:first-child {
margin-right: 120px;
}
span:nth-child(2) {
margin-right: 60px;
}
span:last-child {
margin-right: 107px;
}
}
}
&-part3 {
border: 1px solid #dedede;
border-top: 0;
> div {
@include flex;
height: 50px;
> div {
height: 50px;
line-height: 50px;
}
> div:nth-child(2n-1) {
width: 15%;
text-align: center;
}
> div:nth-child(2n) {
width: 35%;
text-indent: 1em;
}
}
> div:nth-child(1) {
> div:not(:last-child) {
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
> div:nth-child(4) {
border-bottom: 1px solid #dedede;
}
}
> div:nth-child(2) {
> div:not(:last-child) {
border-right: 1px solid #dedede;
}
}
}
&-part4 {
@include flex;
border: 1px solid #dedede;
border-top: 0;
height: 200px;
> div:nth-child(1) {
@include flex;
justify-content: center;
align-items: center;
width: 3%;
height: 200px;
border-right: 1px solid #dedede;
> span {
display: inline-block;
writing-mode: vertical-lr;
letter-spacing: 4px;
}
}
> div:nth-child(2) {
width: 97%;
> div {
height: 100px;
@include flex;
> div:nth-child(1) {
@include flex;
justify-content: center;
width: calc(12% + 3px);
height: 100%;
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
> div:nth-child(2) {
@include flex;
justify-content: center;
flex: 1;
height: 100%;
border-bottom: 1px solid #dedede;
}
}
}
}
&-part5 {
@include flex;
border: 1px solid #dedede;
border-top: 0;
height: 500px;
> div:nth-child(1) {
@include flex;
justify-content: center;
width: 3%;
height: 100%;
border-right: 1px solid #dedede;
> span {
display: inline-block;
writing-mode: vertical-lr;
letter-spacing: 4px;
}
}
> div:nth-child(2) {
width: 97%;
height: 100%;
> div {
height: 100px;
@include flex;
> div:nth-child(2n-1) {
@include flex;
justify-content: center;
width: calc(12% + 3px);
height: 100%;
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
> span {
display: inline-block;
width: 92%;
text-align: center;
}
}
> div:nth-child(2n) {
@include flex;
justify-content: center;
flex: 1;
height: 100%;
border-bottom: 1px solid #dedede;
}
> div:nth-child(3) {
border-left: 1px solid #dedede;
}
}
}
}
&-step {
border: 1px solid #dedede;
border-top: 0;
padding: 14px 23px;
.step-title {
font-size: 16px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.step-sub-title {
font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
margin-top: 17px;
margin-bottom: 9px;
}
}
&-img {
border: 1px solid #dedede;
border-top: 0;
padding: 14px 23px;
.step-title {
font-size: 16px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
margin-bottom: 12px;
}
.img-list {
@include flex;
img {
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin-right: 15px;
}
}
.face-img {
:deep(.face-uploader .el-upload) {
border: 2px dashed #d9d9d9 !important;
cursor: pointer !important;
position: relative !important;
overflow: hidden !important;
}
.face-uploader .el-upload:hover {
border-color: #409eff !important;
}
:deep(.el-icon) {
font-size: 42px;
color: #8c939d;
width: 96px;
height: 96px;
line-height: 53px;
text-align: center;
}
}
}
}
}