zhouhaibin
7 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