GitBucket
Newer
<template>
<el-form
label-width="auto"
ref="ruleFormRef"
:model="tableDate"
class="demo-form-inline"
>
<el-row gutter="10">
<el-divider content-position="left">基本信息</el-divider>
<el-col :span="8">
<el-form-item label="项目名称:" prop="projectName">
<el-input
disabled
v-model="tableDate.projectName"
placeholder="项目名称"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="项目编号:" prop="projectNo">
<el-input
disabled
v-model="tableDate.projectNo"
placeholder="项目编号"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="项目状态:"
prop="buildStatus"
:rules="[{ required: true, message: '项目状态', trigger: 'blur' }]"
>
<el-select
@change="stateChange"
clearable
style="width: 100%"
v-model="tableDate.buildStatus"
placeholder="项目状态"
size="mini"
>
<el-option
v-for="item in build_status"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="建设进度:"
prop="totalProgress"
:rules="[{ required: true, message: '建设进度', trigger: 'blur' }]"
>
<el-input v-model="tableDate.totalProgress" :min="0" :max="100">
<template #append> % </template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="当月完成项目总投资:"
prop="monthInvest"
:rules="[
{ required: true, message: '当月完成项目总投资', trigger: 'blur' },
]"
>
<el-input v-model="tableDate.monthInvest" :min="0" @input="monthInvestChange">
<template #append> 万元 </template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="当月完成海绵相关投资:"
prop="monthSpongeInvest"
:rules="[
{
required: true,
message: '当月完成海绵相关投资',
trigger: 'blur',
},
]"
>
<el-input v-model="tableDate.monthSpongeInvest" :min="0" @input="monthSpongeInvestChange">
<template #append> 万元 </template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label-width="auto"
label="完成项目总投资:"
:rules="[
{ required: true, message: '完成项目总投资', trigger: 'blur' },
]"
prop="completeTotalInvest"
>
<el-input
clearable
v-model="tableDate.completeTotalInvest"
placeholder="完成项目总投资"
:min="0"
:disabled="true"
>
<template #append> 万元 </template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label-width="auto"
label="完成海绵相关投资:"
:rules="[
{ required: true, message: '完成海绵相关投资', trigger: 'blur' },
]"
prop="completeSpongeInvest"
>
<el-input
clearable
v-model="tableDate.completeSpongeInvest"
placeholder="完成海绵相关投资"
:min="0"
:disabled="true"
>
<template #append> 万元 </template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="补充说明:">
<el-input
type="textarea"
v-model="tableDate.supplement"
placeholder="补充说明"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件:" style="width: 93%">
<el-upload
v-model:file-list="fileList1"
class="upload-demo"
style="width: 100%"
action="/prod-api/system/upload"
:headers="uploadHeader"
multiple
:on-preview="handlePreview"
>
<el-button type="primary">选择文件</el-button>
<template #tip>
<div class="el-upload__tip">支持CSV格式,可一次性上传多个文件</div>
</template>
</el-upload>
</el-form-item>
</el-col>
<el-divider content-position="left">进度汇报明细</el-divider>
<el-form
class="tableForm"
ref="tableFormRef"
:model="tableDate"
:rules="tableRules"
>
<el-table
:data="tableDate.projectPlanInventoryList"
style="width: 100%"
row-key="id"
:tree-props="{ children }"
>
<el-table-column
prop="nodeName"
label="一级节点"
width="180"
align="center"
/>
<el-table-column
prop="planStartTime"
label="计划开始日期"
align="center"
width="120"
>
<template #default="{ row }">
{{ row.planStartTime.substring(0, 10) }}
</template>
</el-table-column>
<el-table-column
prop="planEndTime"
label="计划结束日期"
align="center"
width="120"
>
<template #default="{ row }">
{{ row.planEndTime.substring(0, 10) }}
</template>
</el-table-column>
<el-table-column
prop="actualFinishStartTime"
align="center"
width="160"
label="完成开始日期"
>
<template #default="{ row }">
<el-form-item
:prop="'projectPlanInventoryList.' + findPosi(tableDate.projectPlanInventoryList, row.id) + '.actualFinishStartTime'"
:rules="tableRules['actualFinishStartTime']"
>
<el-date-picker
style="width: 100%"
v-model="row.actualFinishStartTime"
type="date"
placeholder="开始日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="actualFinishEndTime"
align="center"
width="160"
label="完成结束日期"
>
<template #default="{ row }">
<el-form-item
:prop="'projectPlanInventoryList.' + findPosi(tableDate.projectPlanInventoryList, row.id) + '.actualFinishEndTime'"
:rules="tableRules['actualFinishEndTime']"
>
<el-date-picker
style="width: 100%"
v-model="row.actualFinishEndTime"
type="date"
placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="workContent"
align="center"
width="170"
label="工作内容"
>
<template #default="{ row }">
<el-input
v-model="row.workContent"
type="textarea"
placeholder="工作内容"
:autosize="{ minRows: 1, maxRows: 3 }"
/>
</template>
</el-table-column>
<el-table-column
prop="estimatedWorkHours"
label="预计工时H"
align="center"
width="160"
>
<template #default="{ row }">
<el-input-number
controls-position="right"
:min="0"
:precision="3"
size="small"
v-model.number="row.estimatedWorkHours"
placeholder="预计工时"
:disabled="true"
/>
</template>
</el-table-column>
<el-table-column
prop="manHour"
label="工时H"
align="center"
width="160"
>
<template #default="{ row }">
<el-input-number
controls-position="right"
:min="0"
:precision="3"
size="small"
v-model.number="row.manHour"
placeholder="工时"
/>
</template>
</el-table-column>
<el-table-column
prop="schedule"
align="center"
width="160"
label="进度%"
>
<template #default="{ row }">
<el-input-number
controls-position="right"
:min="0"
:max="100"
:precision="2"
size="small"
v-model.number="row.schedule"
placeholder="进度"
/>
</template>
</el-table-column>
<el-table-column
prop="plannedFundsMonth"
label="计划资金"
align="center"
width="160"
>
<template #default="{ row }">
<el-input-number
controls-position="right"
:min="0"
:precision="3"
size="small"
v-model.number="row.plannedFundsMonth"
placeholder="计划资金"
/>
</template>
</el-table-column>
<el-table-column
prop="actualUseFunds"
label="实际使用资金"
align="center"
width="160"
>
<template #default="{ row }">
<el-input-number
controls-position="right"
:min="0"
:precision="3"
size="small"
v-model.number="row.actualUseFunds"
placeholder="实际使用资金"
/>
</template>
</el-table-column>
<el-table-column
prop="capitalDescription"
align="center"
width="170"
label="资金描述"
>
<template #default="{ row }">
<el-input
v-model="row.capitalDescription"
type="textarea"
placeholder="描述"
:autosize="{ minRows: 1, maxRows: 3 }"
/>
</template>
</el-table-column>
<el-table-column
prop="planDescription"
align="center"
width="170"
label="进度描述"
>
<template #default="{ row }">
<el-input
v-model="row.planDescription"
type="textarea"
placeholder="描述"
:autosize="{ minRows: 1, maxRows: 3 }"
/>
</template>
</el-table-column>
<!-- <el-table-column prop="dutyUserId" align="center" label="负责人" /> -->
<el-table-column prop="dutyUserId" label="负责人">
<template #default="{ row }">
<span>{{ getStateName(row.dutyUserId) }}</span>
</template>
</el-table-column>
<el-table-column prop="outputData" align="center" label="输出资料" />
<el-table-column prop="remark" align="center" label="备注" />
<el-table-column
label="操作"
align="center"
class-name="nodename"
fixed="right"
width="250"
>
<template #default="{ row }">
<el-upload
v-model:file-list="row.sysFileList"
class="upload-demo"
action="/prod-api/system/upload"
:headers="uploadHeader"
multiple
:on-preview="handlePreview"
>
<el-button size="mini" type="primary"
>上传文件</el-button
>
</el-upload>
</template>
</el-table-column>
</el-table>
</el-form>
</el-row>
</el-form>
</template>
<script setup>
import { projectInfoAdd } from "@/api/shangbao";
import { FileSystemList } from "@/api/project/tenderReview";
import { stateOption } from "@/utils/common";
import { userList } from "@/api/projectInformation";
import { getToken } from "@/utils/auth";
import { ElMessage, ElMessageBox } from "element-plus";
import { required } from '@/utils/validate-helper'
const uploadHeader = ref({
Authorization: "Bearer " + getToken(),
});
const Emits = defineEmits(["closed"]);
const { proxy } = getCurrentInstance();
const { project_status, build_status } = proxy.useDict(
"project_status",
"build_status"
);
const tableData = ref([]);
let { tableList } = defineProps(["tableList"]);
let Datas = new Date().getDate();
let Datam = new Date().getMonth();
const disabledDate = (time = new Date()) => {
let dataM = time.getMonth();
if (Datas < 15) {
return dataM >= Datam;
}
};
let tableDate = ref({
spongeInvestAmountMonth: 0,
investAmountMoneyMonth: 0,
spongeInvestAmountMonth: 0,
investAmountMoney: 0,
spongeInvestAmount: 0,
projectPlanInventoryList: []
});
const tableRules = reactive({
actualFinishStartTime: required('完成开始日期'),
actualFinishEndTime: required('完成结束日期'),
})
const findPosi = (tree, targetId, path = '') => {
for (let i = 0; i < tree.length; i++) {
const node = tree[i]
if (node.id === targetId) {
return path + i
}
if (node.children && node.children.length > 0) {
const childPath = `${path}${i}.children.`
const result = findPosi(node.children, targetId, childPath)
if (result !== null) {
return result
}
}
}
return null
}
// async function systemUploadM(p) {
// if (p.length > 0) {
// let formData = new FormData()
// formData.append("file", p[0].raw)
// let { data: { originalName, url } } = await systemUpload(formData)
// tableDate.value.fileSaveRequestList = [url]
// }
// let array = {
// reportTime: Date.parse(reportTime.value),
// }
// delete tableDate.value.id
// progressSaveM({ ...tableDate.value, ...array })
// }
//建设进度数据
let isDisabled = ref(true);
let progressNum = ref(0);
// 上传照片
let isRequired = ref(false);
let reportTime = ref(new Date());
// 项目状态变更
const stateChange = (v) => {
if (v > 4) {
isDisabled.value = false;
isRequired.value = true;
} else {
isDisabled.value = true;
isRequired.value = false;
}
};
const progressSaveM = async (data) => {
let { code } = await projectInfoAdd(data);
if (code == 200) {
Emits("closed");
}
};
const ruleFormRef = ref();
const tableFormRef = ref()
const checkClick = async () => {
tableDate.value.progressNum = progressNum.value;
console.log(" tableDate.value", tableDate.value)
ruleFormRef.value.validate((valid, fields) => {
if (valid) {
tableFormRef.value.validate((innerValid, innerFields) => {
if(innerValid){
tableDate.value.fileSaveRequestList = [];
fileList1.value.forEach((element) => {
if (element.hasOwnProperty("response")) {
element.response.data.refType = "proProjectMonthReport";
// element.response.data.refField = "proProjectMonthReportNode";
tableDate.value.fileSaveRequestList.push(element.response.data);
} else {
tableDate.value.fileSaveRequestList.push(element);
}
});
for (const item of tableDate.value.projectPlanInventoryList) {
item.fileSaveRequestList = []
item.sysFileList.forEach((element) => {
if (element.hasOwnProperty("response")) {
element.response.data.refType = "proProjectMonthReportNode";
// element.response.data.refField = "proProjectMonthReportNode";
item.fileSaveRequestList.push(element.response.data);
} else {
item.fileSaveRequestList.push(element);
}
});
}
console.log("tableDate.value", tableDate.value);
progressSaveM(tableDate.value);
} else {
console.log('error', innerFields)
}
})
}
});
};
//当月完成项目总投资变化
const monthInvestChange = (val) => {
const regex = /^(-?\d+)(\.\d+)?$/
if(val && !regex.test(val)) return
val = val ? val * 1 : 0
const completeTotalInvest = tableList.completeTotalInvest * 1
tableDate.value.completeTotalInvest = (completeTotalInvest + val) + ''
}
//当月完成海绵相关投资变化
const monthSpongeInvestChange = (val) => {
const regex = /^(-?\d+)(\.\d+)?$/
if(val && !regex.test(val)) return
val = val ? val * 1 : 0
const completeSpongeInvest = tableList.completeSpongeInvest * 1
tableDate.value.completeSpongeInvest = (completeSpongeInvest + val) + ''
}
defineExpose({ checkClick, desertFilds });
async function projectPlanTemplateListM() {
let { data } = await projectPlanTemplateList();
tableData.value = data;
}
// let arrayList = ref({fileSaveRequestList:[]});
// function onCheck(row) {
// arrayList.value = { ...row, fileSaveRequestList: [] };
// }
// function handleSuccess({ data }, t) {
// data.refType = "proProjectMonthReport";
// // data.response.data.refField = "proProjectMonthReportNode";
// arrayList.value.fileSaveRequestList.push(data);
// }
/** 文件上传 */
const fileList1 = ref([]);
// const fileList2 = ref([]);
function handlePreview(file) {
console.log(file);
return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
() => window.open(file.url),
() => false
);
}
// function beforeRemove({response:{data}}) {
// console.log("file", data)
// arrayList.value.fileSaveRequestList=arrayList.value.fileSaveRequestList.filter(item => item.url !== data.url);
// return true;
// }
const FileSystemListM = async (p) => {
let { data } = await FileSystemList(p);
fileList1.value = data;
};
function desertFilds() {
proxy.$refs.ruleFormRef.resetFields();
}
const userListM = async () => {
let { data } = await userList();
personList.value = data;
};
const personList = ref([]);
const getStateName = (r) => {
let a = "";
personList.value.map((i) => {
if (i.userId == r) {
a = i;
}
});
return a.nickName;
};
onMounted(() => {
tableDate.value = JSON.parse(JSON.stringify(tableList));
tableDate.value.monthInvest = tableDate.value.monthInvest || 0
tableDate.value.monthSpongeInvest = tableDate.value.monthSpongeInvest || 0
for (const item of tableDate.value.projectPlanInventoryList) {
item.plannedFundsMonth = item.plannedFundsMonth || 0
item.actualUseFunds = item.actualUseFunds || 0
}
// tableDate.value.inventoryList = JSON.parse(JSON.stringify(tableList.projectPlanInventoryList));
// FileSystemListM({
// refType: "proProjectMonthReport",
// refId: tableList.projectTypeId,
// });
userListM();
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
padding: 20px;
border: 1px solid #ddd;
}
</style>