zhouhaibin
10 months ago
7 changed files with 519 additions and 133 deletions
@ -0,0 +1,141 @@ |
|||||
|
<template> |
||||
|
<!-- 自定义表单 --> |
||||
|
<el-divider content-position="left">项目信息</el-divider> |
||||
|
<BasicForm @register="registerMoneyForm" /> |
||||
|
<el-divider content-position="left">合同信息</el-divider> |
||||
|
<BasicForm @register="registerContractForm" /> |
||||
|
<el-divider content-position="left">合同文件</el-divider> |
||||
|
<UploadfileDetail :projectid="projectid" :stage="4" /> |
||||
|
</template> |
||||
|
<script lang="ts" name="addAndModify" setup> |
||||
|
import { ref, reactive, onMounted } from 'vue' |
||||
|
import { useForm, BasicForm } from '@/components/Form'; |
||||
|
import { contractformSchemas, MoneyFormSchemas } from '@/views/projectLib/projectContract/projectContract.data'; |
||||
|
import { getContractinfoByProjectId } from '@/views/projectLib/projectContract/projectContract.api'; |
||||
|
import { queryProjectInfoById } from '@/views/projectLib/projectInfo/projectInfo.api' |
||||
|
import { FormSchema } from '@/components/Form'; |
||||
|
import UploadfileDetail from "@/views/ProcessApprovalSubPage/component/UploadfileDetail.vue" |
||||
|
import { cloneDeep } from 'lodash-es'; |
||||
|
import { getTaskNameTypeDict } from "@/views/projectLib/projectContract/projectContract.api" |
||||
|
|
||||
|
let data = defineProps(["projectid", "isEdit"]) |
||||
|
|
||||
|
let fileList = reactive<Array<any>>([]); |
||||
|
let projectid = ref() |
||||
|
let payNum = ref(1) |
||||
|
let resMoney = ref() |
||||
|
let taskNameTypeDict = ref() |
||||
|
let tempSchemas = cloneDeep(contractformSchemas) as Array<FormSchema> |
||||
|
const emit = defineEmits(['close']); |
||||
|
|
||||
|
|
||||
|
onMounted(async () => { |
||||
|
payNum.value = 1 |
||||
|
projectid.value = data.projectid |
||||
|
tempSchemas = cloneDeep(contractformSchemas) as Array<FormSchema> |
||||
|
taskNameTypeDict.value = await getTaskNameTypeDict({ projectid: projectid.value }) |
||||
|
console.log("datadatadata", data, tempSchemas) |
||||
|
let parammoney: any = { |
||||
|
projectid: data.projectid |
||||
|
} |
||||
|
resMoney.value = await queryProjectInfoById(parammoney) |
||||
|
setFieldsValueMoneyForm(resMoney.value) |
||||
|
fileList.pop() |
||||
|
let param: any = { |
||||
|
projectid: data.projectid |
||||
|
} |
||||
|
let res = await getContractinfoByProjectId(param) as Array<any> |
||||
|
let obj = new Object() |
||||
|
//记录一共有几次支付 |
||||
|
let num = res.length |
||||
|
//把数组变成对象 |
||||
|
for (let i = 1; i <= num; i++) { |
||||
|
|
||||
|
if (i == 1) { |
||||
|
obj = res[i - 1] |
||||
|
} else { |
||||
|
Object.keys(res[i - 1]).forEach(key => { |
||||
|
obj[key + i] = res[i - 1][key] |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
tempSchemas.forEach(item => { |
||||
|
if (item.field == "taskName") { |
||||
|
item.componentProps.options = taskNameTypeDict.value |
||||
|
} |
||||
|
}) |
||||
|
if (num > 1) { |
||||
|
payNum.value = num |
||||
|
for (let i = 2; i <= num; i++) { |
||||
|
contractformSchemas.forEach(item => { |
||||
|
let tempitem = cloneDeep(item) |
||||
|
if (tempitem.field == "payDate") { |
||||
|
tempitem.label = "第" + i + "次支付" |
||||
|
} |
||||
|
if (tempitem.field == "totalMoney") { |
||||
|
tempitem.label = "第" + i + "支付总金额" |
||||
|
} |
||||
|
if (tempitem.field == "taskName") { |
||||
|
tempitem.componentProps.options = taskNameTypeDict.value |
||||
|
|
||||
|
} |
||||
|
tempitem.field = tempitem.field + i |
||||
|
tempSchemas.push(tempitem) |
||||
|
}) |
||||
|
} |
||||
|
resetSchema(tempSchemas) |
||||
|
} |
||||
|
console.log("结果是", res, obj) |
||||
|
obj["id"] = data.projectid |
||||
|
setFieldsValue(obj) |
||||
|
setProps({ disabled: !data.isEdit }) |
||||
|
}) |
||||
|
|
||||
|
//项目金额相关信息 |
||||
|
const [registerMoneyForm, { setFieldsValue: setFieldsValueMoneyForm }] = useForm({ |
||||
|
//注册表单列 |
||||
|
schemas: MoneyFormSchemas, |
||||
|
showActionButtonGroup: false, |
||||
|
//回车提交 |
||||
|
// autoSubmitOnEnter: true, |
||||
|
// //不显示重置按钮 |
||||
|
// showResetButton: false, |
||||
|
//自定义提交按钮文本和图标 |
||||
|
// submitButtonOptions: { text: '提交', preIcon: '' }, |
||||
|
//查询列占比 24代表一行 取值范围 0-24 |
||||
|
// actionColOptions: { span: 17 }, |
||||
|
disabled: true, |
||||
|
size: "small", |
||||
|
// labelCol: { style: { width: '120px' } }, |
||||
|
wrapperCol: { style: { width: 'auto' } }, |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
|
||||
|
//项目入库详情 |
||||
|
const [registerContractForm, { setFieldsValue: setFieldsValue, resetSchema, setProps }] = useForm({ |
||||
|
//注册表单列 |
||||
|
schemas: contractformSchemas, |
||||
|
showActionButtonGroup: false, |
||||
|
//回车提交 |
||||
|
// autoSubmitOnEnter: true, |
||||
|
// //不显示重置按钮 |
||||
|
// showResetButton: false, |
||||
|
//自定义提交按钮文本和图标 |
||||
|
// submitButtonOptions: { text: '提交', preIcon: '' }, |
||||
|
//查询列占比 24代表一行 取值范围 0-24 |
||||
|
// actionColOptions: { span: 17 }, |
||||
|
size: 'small', |
||||
|
disabled: true, |
||||
|
// labelCol: { style: { width: '120px' } }, |
||||
|
wrapperCol: { style: { width: 'auto' } }, |
||||
|
}); |
||||
|
|
||||
|
function dialogVisible() { |
||||
|
closeModal() |
||||
|
emit("close") |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
<style scoped></style> |
||||
@ -0,0 +1,151 @@ |
|||||
|
<template> |
||||
|
<!-- 自定义表单 --> |
||||
|
<projectContract :projectid="projectId" :isModify="resButton.isEdit" :isEdit="resButton.isEdit" ref="projectContractRef"/> |
||||
|
<el-divider content-position="left">合同文件</el-divider> |
||||
|
<UploadfileDetail :projectid="projectId" :stage="4" /> |
||||
|
<ApprovalDetails :processInstanceId="processInstanceId" /> |
||||
|
|
||||
|
<ApprovalFromPage :showApprovalForm="showApprovalForm" :buttons="resButton.buttons" ref="ApprovalFromPageRef" |
||||
|
@submit="handleSubmit" @exit="exit"> |
||||
|
<div> |
||||
|
<el-divider content-position="left" v-if="resButton.isEdit">重新上传合同文件</el-divider> |
||||
|
<div v-if="resButton.isEdit" style="display: flex; justify-content: center; align-items: center; height: 100px;"> |
||||
|
<el-upload class="upload-demo" ref="upload" action :http-request="httpRequest" :before-upload="beforeUpload" |
||||
|
:on-exceed="handleExceed" :limit="1" :on-remove="removeFile"> |
||||
|
<el-button slot="trigger" size="small" type="primary">选取文件</el-button> |
||||
|
<div slot="tip" class="el-upload__tip">文件大小且不超过5M</div> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ApprovalFromPage> |
||||
|
</template> |
||||
|
<script lang="ts" name="contractApproval" setup> |
||||
|
import { ref, onMounted, reactive } from 'vue' |
||||
|
import { useModal } from '@/components/Modal'; |
||||
|
import { getActionParam } from '../myWork/inComplete/inComplete.api'; |
||||
|
import { approvalContractinfo } from '@/views/projectLib/projectContract/projectContract.api' |
||||
|
import { ElMessage } from 'element-plus' |
||||
|
import ApprovalDetails from "../ProcessApprovalSubPage/component/ApprovalDetails.vue"; |
||||
|
import ApprovalFromPage from "../ProcessApprovalSubPage/component/ApprovalFromPage.vue" |
||||
|
import projectContract from '@/views/projectLib/projectContract/projectContract.vue'; |
||||
|
import UploadfileDetail from "@/views/ProcessApprovalSubPage/component/UploadfileDetail.vue" |
||||
|
|
||||
|
|
||||
|
let dataTo = defineProps(["record"]) |
||||
|
const emit = defineEmits(['close']); |
||||
|
let processInstanceId = dataTo.record.processInstanceId |
||||
|
let projectId = dataTo.record.projectId as string |
||||
|
let taskid = dataTo.record.taskId as string |
||||
|
let showApprovalForm = ref() |
||||
|
let ApprovalFromPageRef = ref() |
||||
|
let projectContractRef= ref() |
||||
|
let resButton = reactive({ |
||||
|
showApprovalForm: false, |
||||
|
isEdit: false, |
||||
|
buttons: [] |
||||
|
}) |
||||
|
let fileList = reactive<Array<any>>([]); |
||||
|
|
||||
|
onMounted(async () => { |
||||
|
resButton = await getActionParam({ processInstanceId: processInstanceId, taskId: taskid, procesType: dataTo.record.procesType }) |
||||
|
showApprovalForm.value = resButton.showApprovalForm |
||||
|
}) |
||||
|
|
||||
|
async function handleSubmit() { |
||||
|
let approvalform = await ApprovalFromPageRef.value.getFieldsValueApprovalForm(); |
||||
|
// &&await projectContractRef.value.checkForm() |
||||
|
if (await ApprovalFromPageRef.value.validateApprovalForm()) { |
||||
|
let fromdate = await projectContractRef.value.getFieldsValuetoRef() |
||||
|
|
||||
|
const params = new FormData() |
||||
|
params.append("flag", approvalform.flag) |
||||
|
params.append("projectid", projectId) |
||||
|
params.append("comment", approvalform.comment) |
||||
|
params.append("taskId", taskid) |
||||
|
params.append("isEdit", resButton.isEdit) |
||||
|
params.append("contractinfoList", JSON.stringify(fromdate)) |
||||
|
|
||||
|
if (fileList.length > 0) { |
||||
|
params.append("file", fileList[0].file) |
||||
|
} |
||||
|
await approvalContractinfo(params) |
||||
|
console.log("提交成功！", params) |
||||
|
emit("close") |
||||
|
} |
||||
|
} |
||||
|
async function exit() { |
||||
|
emit("close") |
||||
|
|
||||
|
} |
||||
|
function removeFile(option) { |
||||
|
for (let i = 0; i < fileList.length; i++) { |
||||
|
if (fileList[i].file.name == option.name) { |
||||
|
fileList.splice(i, 1) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
function httpRequest(option) { |
||||
|
fileList.push(option) |
||||
|
} |
||||
|
|
||||
|
// 上传前处理 |
||||
|
function beforeUpload(file) { |
||||
|
let fileSize = file.size |
||||
|
const FIVE_M = 5 * 1024 * 1024; |
||||
|
const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1); |
||||
|
|
||||
|
let whiteList = ["xls", "xlsx"]; |
||||
|
|
||||
|
if (whiteList.indexOf(fileSuffix) === -1) { |
||||
|
ElMessage.error('上传文件只能是xls、xlsx格式'); |
||||
|
return false; |
||||
|
} |
||||
|
//大于5M，不允许上传 |
||||
|
if (fileSize > FIVE_M) { |
||||
|
ElMessage.error("最大上传5M") |
||||
|
return false |
||||
|
} |
||||
|
|
||||
|
return true |
||||
|
} |
||||
|
// 文件数量过多时提醒 |
||||
|
function handleExceed() { |
||||
|
ElMessage.warning("最多只能上传一个文件") |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.timeline { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
margin-bottom: 100px; |
||||
|
|
||||
|
.lineitem { |
||||
|
transform: translateX(50%); |
||||
|
width: 25%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:deep(.el-timeline-item__tail) { |
||||
|
border-left: none; |
||||
|
border-top: 2px solid #e4e7ed; |
||||
|
width: 100%; |
||||
|
position: absolute; |
||||
|
top: 9px; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-timeline-item__wrapper) { |
||||
|
padding-left: 0; |
||||
|
position: absolute; |
||||
|
top: 20px; |
||||
|
transform: translateX(-50%); |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-timeline-item__timestamp) { |
||||
|
font-size: 14px; |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue