2024-03-08 18:03:40 +08:00

352 lines
14 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="edit-popup">
<popup ref="popupRef" :title="popupTitle" :async="true" width="80vw" @confirm="handleSubmit"
@close="handleClose">
<el-form ref="formRef" :model="formData" label-width="180px" :rules="formRules">
<el-row>
<el-col :span="8">
<el-form-item label="项目名称" prop="project_name">
<el-input v-model="formData.project_name" clearable placeholder="点击选择项目" readonly
@click="showDialog = true" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="年月" prop="date">
<el-date-picker class="flex-1 !flex" v-model="formData.date" clearable type="month"
value-format="YYYY-MM" placeholder="请选择日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="上月计划工程进度(%" prop="last_month_planned_progress">
<el-input v-model="formData.last_month_planned_progress" clearable
placeholder="请输入上月计划工程进度(%" type="number" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="下月计划工程进度(%)" prop="next_month_planned_progress">
<el-input v-model="formData.next_month_planned_progress" clearable
placeholder="请输入下月计划工程进度(%)" type="number" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="本月累计工程进度(%" prop="this_month_progress">
<el-input v-model="formData.this_month_progress" clearable placeholder="请输入本月累计工程进度(%"
type="number" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="工程状态" prop="engineering_status">
<el-select class="flex-1" v-model="formData.engineering_status" clearable
placeholder="请选择工程状态">
<el-option v-for="(item, index) in dictData.engineering_status" :key="index"
:label="item.name" :value="parseInt(item.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="进度描述" prop="progress_description">
<el-input v-model="formData.progress_description" clearable placeholder="请输入进度描述" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="存在的问题及解决措施" prop="problems_and_measure">
<el-input v-model="formData.problems_and_measure" clearable placeholder="请输入存在的问题及解决措施" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="本月完成(万元)" prop="this_month_amount">
<el-input v-model="formData.this_month_amount" clearable placeholder="请输入本月完成(万元)"
type="number" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="累计完成(万元)" prop="total_amount">
<el-input v-model="formData.total_amount" clearable placeholder="请输入累计完成(万元)"
type="number" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="本月支付(万元)" prop="this_month_pay">
<el-input v-model="formData.this_month_pay" clearable placeholder="请输入本月支付(万元)"
type="number" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="累计支付(万元)" prop="total_pay">
<el-input v-model="formData.total_pay" clearable placeholder="请输入累计支付(万元)" type="number" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="建设各方责任" prop="quality_behavior">
<el-input v-model="formData.quality_behavior" clearable placeholder="请输入建设各方责任主体质量行为" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="施工现场质量情况" prop="quality_situation">
<el-input v-model="formData.quality_situation" clearable placeholder="请输入施工现场质量情况" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="质量缺陷或质量隐患的处理情况" prop="quality_hazards">
<el-input v-model="formData.quality_hazards" clearable placeholder="请输入质量缺陷或质量隐患的处理情况" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="检查及抽检情况" prop="sampling_situation">
<el-input v-model="formData.sampling_situation" clearable placeholder="请输入检查及抽检情况" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="其他质量情况" prop="other_quality_conditions">
<el-input v-model="formData.other_quality_conditions" clearable placeholder="请输入其他质量情况" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="本月安全情况" prop="safety_situation">
<el-input v-model="formData.safety_situation" clearable placeholder="请输入本月安全情况" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" clearable placeholder="请输入备注" type="textarea" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="附件" prop="annex">
<annexUpload :annex="formData.annex" @handleAvatarSuccess="handleAvatarSuccess_four"
@delFile="delFileFn" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-dialog v-model="showDialog" title="选择项目" width="70%">
<dialogTable @customEvent="customEvent" :config="supervision_project" />
</el-dialog>
</popup>
</div>
</template>
<script lang="ts" setup name="supervisionProjectMonthlyReportEdit">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiSupervisionProjectMonthlyReportAdd, apiSupervisionProjectMonthlyReportEdit, apiSupervisionProjectMonthlyReportDetail } from '@/api/supervision_project_monthly_report'
import { supervision_project } from "@/components/dialogTable/dialogTableConfig"
import type { PropType } from 'vue'
defineProps({
dictData: {
type: Object as PropType<Record<string, any[]>>,
default: () => ({})
}
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const showDialog = ref(false)
// 弹窗标题
const popupTitle = computed(() => {
return mode.value == 'edit' ? '编辑工程监理--项目月报' : '新增工程监理--项目月报'
})
// 表单数据
const formData = reactive({
id: '',
project_id: '',
project_name: "",
date: '',
last_month_planned_progress: '',
next_month_planned_progress: '',
this_month_progress: '',
engineering_status: '',
progress_description: '',
problems_and_measure: '',
this_month_amount: '',
total_amount: '',
this_month_pay: '',
total_pay: '',
quality_behavior: '',
quality_situation: '',
quality_hazards: '',
sampling_situation: '',
other_quality_conditions: '',
safety_situation: '',
remark: '',
annex: [],
create_user: '',
})
const handleAvatarSuccess_four = (response: any) => {
Array.isArray(formData.annex) ? '' : formData.annex = []
// @ts-ignore
response.code != 0 ? formData.annex.push({ uri: response.data.uri, name: response.data.name }) : ElMessage.error(response.msg);
};
// 删除上传的文件
const delFileFn = (index: number) => { formData.annex.splice(index, 1) }
const customEvent = (e) => {
formData.project_id = e.id
formData.project_name = e.project_name
showDialog.value = false
}
// 表单验证
const formRules = reactive<any>({
project_id: [{
required: true,
message: '请输入项目id',
trigger: ['blur']
}],
date: [{
required: true,
message: '请输入年月',
trigger: ['blur']
}],
last_month_planned_progress: [{
required: true,
message: '请输入上月计划工程进度(%',
trigger: ['blur']
}],
next_month_planned_progress: [{
required: true,
message: '请输入下月计划工程进度(%)',
trigger: ['blur']
}],
this_month_progress: [{
required: true,
message: '请输入本月累计工程进度(%',
trigger: ['blur']
}],
engineering_status: [{
required: true,
message: '请输入工程状态',
trigger: ['blur']
}],
progress_description: [{
required: true,
message: '请输入进度描述',
trigger: ['blur']
}],
problems_and_measure: [{
required: true,
message: '请输入存在的问题及解决措施',
trigger: ['blur']
}],
this_month_amount: [{
required: true,
message: '请输入本月完成(万元)',
trigger: ['blur']
}],
total_amount: [{
required: true,
message: '请输入累计完成(万元)',
trigger: ['blur']
}],
this_month_pay: [{
required: true,
message: '请输入本月支付(万元)',
trigger: ['blur']
}],
total_pay: [{
required: true,
message: '请输入累计支付(万元)',
trigger: ['blur']
}],
quality_behavior: [{
required: true,
message: '请输入建设各方责任主体质量行为',
trigger: ['blur']
}],
quality_situation: [{
required: true,
message: '请输入施工现场质量情况',
trigger: ['blur']
}],
quality_hazards: [{
required: true,
message: '请输入质量缺陷或质量隐患的处理情况',
trigger: ['blur']
}],
sampling_situation: [{
required: true,
message: '请输入检查及抽检情况',
trigger: ['blur']
}],
other_quality_conditions: [{
required: true,
message: '请输入其他质量情况',
trigger: ['blur']
}],
safety_situation: [{
required: true,
message: '请输入本月安全情况',
trigger: ['blur']
}],
remark: [{
required: true,
message: '请输入备注',
trigger: ['blur']
}],
create_user: [{
required: true,
message: '请输入创建人',
trigger: ['blur']
}]
})
// 获取详情
const setFormData = async (data: Record<any, any>) => {
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key]
}
}
}
const getDetail = async (row: Record<string, any>) => {
const data = await apiSupervisionProjectMonthlyReportDetail({
id: row.id
})
setFormData(data)
}
// 提交按钮
const handleSubmit = async () => {
await formRef.value?.validate()
const data = { ...formData, }
mode.value == 'edit'
? await apiSupervisionProjectMonthlyReportEdit(data)
: await apiSupervisionProjectMonthlyReportAdd(data)
popupRef.value?.close()
emit('success')
}
//打开弹窗
const open = (type = 'add') => {
mode.value = type
popupRef.value?.open()
}
// 关闭回调
const handleClose = () => {
emit('close')
}
defineExpose({
open,
setFormData,
getDetail
})
</script>