zhouhaibin
3 weeks ago
18 changed files with 1249 additions and 239 deletions
@ -1,122 +1,300 @@ |
|||||
<template> |
<template> |
||||
<!-- 自定义表单 --> |
<!-- 自定义表单 --> |
||||
<!-- <el-divider content-position="left">模板表格文件下载</el-divider> |
<!-- <el-divider content-position="left">模板表格文件下载</el-divider> |
||||
<div style="padding-left: 40px;"> |
<div style="padding-left: 40px;"> |
||||
<el-button slot="trigger" type="primary">下载模板</el-button> |
<el-button slot="trigger" type="primary">下载模板</el-button> |
||||
</div> --> |
</div> --> |
||||
<el-divider content-position="left">上传文件</el-divider> |
<BasicForm @register="registerApprovalMoneyForm" v-if="dataTo.taskName == '立项审批'" /> |
||||
<el-form ref="importFormRef" > |
<BasicForm @register="registerContractMoneyForm" v-if="dataTo.taskName == '合同签订'" /> |
||||
<el-form-item v-for=" (item, index) in dataTo.files" :key="index" :label="item" label-width="auto"> |
|
||||
<el-upload class="upload-demo" ref="upload" action :http-request="httpRequest" |
|
||||
:before-upload="(file) => { return beforeUpload(file, item) }" :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">只能上传{{ item }}且不超过500M</div> |
|
||||
</el-upload> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" @click="submitImportForm">开始导入</el-button> |
|
||||
<el-button type="info" @click="dialogVisible">关闭窗口</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" name="uploadFile" setup> |
<el-divider content-position="left">上传文件</el-divider> |
||||
import { reactive, defineProps, onMounted } from 'vue' |
<el-divider content-position="left" v-if="dataTo.taskName.indexOf('可研报告初稿编制') >= 0 || |
||||
import { planUploadFile, planUploadModifyFile } from './projectPlan.api'; |
dataTo.taskName.indexOf('可研报告终稿编制') >= 0" >支持上传文件数量为1-2份</el-divider> |
||||
import { ElMessage } from 'element-plus' |
|
||||
|
|
||||
|
<el-form ref="importFormRef"> |
||||
|
<el-form-item |
||||
|
v-for="(item, index) in dataTo.files" |
||||
|
:key="index" |
||||
|
:label="item" |
||||
|
label-width="auto" |
||||
|
> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
ref="upload" |
||||
|
action |
||||
|
:http-request="httpRequest" |
||||
|
:before-upload=" |
||||
|
(file) => { |
||||
|
return beforeUpload(file, item); |
||||
|
} |
||||
|
" |
||||
|
: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">只能上传{{ item }}且不超过500M</div> |
||||
|
</el-upload> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="submitImportForm" :disabled="isSubmitting" |
||||
|
>开始导入</el-button |
||||
|
> |
||||
|
<el-button type="info" @click="dialogVisible">关闭窗口</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
|
||||
let fileList = reactive<Array<any>>([]); |
<script lang="ts" name="uploadFile" setup> |
||||
let dataTo = defineProps(["type", "files", "planinfoid"]) |
import { reactive, defineProps, onMounted, ref } from 'vue'; |
||||
const emit = defineEmits(['close']); |
import { planUploadFile, planUploadModifyFile,planREUploadFile } from './projectPlan.api'; |
||||
//加载项目数据 |
import { message } from 'ant-design-vue'; |
||||
onMounted(async () => { |
import { queryProjectInfoById } from '@/views/projectLib/projectInfo/projectInfo.api'; |
||||
console.log("dataTo", dataTo) |
import { getplaninfoByid } from '@/views/projectLib/projectPlan/projectPlan.api'; |
||||
}) |
import { |
||||
|
ApprovalMoneyFormSchemas, |
||||
|
ContractMoneyFormSchemas, |
||||
|
} from '@/views/projectLib/projectPlan/projectPlan.data'; |
||||
|
import { useForm, BasicForm } from '@/components/Form'; |
||||
|
const [ |
||||
|
registerApprovalMoneyForm, |
||||
|
{ |
||||
|
validate: validateApprovalMoneyForm, |
||||
|
getFieldsValue: getApprovalMoneyFieldsValue, |
||||
|
setFieldsValue: setApprovalMoneyFieldsValue, |
||||
|
}, |
||||
|
] = useForm({ |
||||
|
//注册表单列 |
||||
|
schemas: ApprovalMoneyFormSchemas, |
||||
|
showActionButtonGroup: false, |
||||
|
//回车提交 |
||||
|
// autoSubmitOnEnter: true, |
||||
|
// //不显示重置按钮 |
||||
|
// showResetButton: false, |
||||
|
//自定义提交按钮文本和图标 |
||||
|
// submitButtonOptions: { text: '提交', preIcon: '' }, |
||||
|
//查询列占比 24代表一行 取值范围 0-24 |
||||
|
// actionColOptions: { span: 17 }, |
||||
|
// size: "small", |
||||
|
// labelCol: { style: { width: '120px' } }, |
||||
|
wrapperCol: { style: { width: 'auto' } }, |
||||
|
}); |
||||
|
const [ |
||||
|
registerContractMoneyForm, |
||||
|
{ |
||||
|
validate: validateContractMoneyForm, |
||||
|
getFieldsValue: getContractMoneyFieldsValue, |
||||
|
setFieldsValue: setContractMoneyFieldsValue, |
||||
|
updateSchema: updateContractMoneySchema, |
||||
|
}, |
||||
|
] = useForm({ |
||||
|
//注册表单列 |
||||
|
schemas: ContractMoneyFormSchemas, |
||||
|
showActionButtonGroup: false, |
||||
|
//回车提交 |
||||
|
// autoSubmitOnEnter: true, |
||||
|
// //不显示重置按钮 |
||||
|
// showResetButton: false, |
||||
|
//自定义提交按钮文本和图标 |
||||
|
// submitButtonOptions: { text: '提交', preIcon: '' }, |
||||
|
//查询列占比 24代表一行 取值范围 0-24 |
||||
|
// actionColOptions: { span: 17 }, |
||||
|
// size: "small", |
||||
|
// labelCol: { style: { width: '120px' } }, |
||||
|
wrapperCol: { style: { width: 'auto' } }, |
||||
|
}); |
||||
|
|
||||
|
let fileList = reactive<Array<any>>([]); |
||||
|
let projectId = ref(''); |
||||
|
let isSubmitting = ref(false); |
||||
|
let dataTo = defineProps(['type', 'files', 'planinfoid', 'taskName']); |
||||
|
const emit = defineEmits(['close']); |
||||
|
//加载项目数据 |
||||
|
onMounted(async () => { |
||||
|
console.log('dataTo', dataTo); |
||||
|
let resList = await getplaninfoByid({ planinfoid: dataTo.planinfoid }); |
||||
|
let param: any = { |
||||
|
projectid: resList[0].projectId, |
||||
|
}; |
||||
|
projectId.value = resList[0].projectId; |
||||
|
let res = await queryProjectInfoById(param); |
||||
|
if (dataTo.taskName == '立项审批') { |
||||
|
setApprovalMoneyFieldsValue({ approvalTotalMoney: res.urtEstimatedAmount }); |
||||
|
} |
||||
|
if (dataTo.taskName == '合同签订') { |
||||
|
updateContractMoneySchema({ |
||||
|
field: 'contractTotalMoney', |
||||
|
componentProps: { |
||||
|
precision: 2, |
||||
|
min: 0, |
||||
|
style: { width: '100%' }, |
||||
|
max: res.urtEstimatedAmount, |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
function httpRequest(option) { |
function httpRequest(option) { |
||||
fileList.push(option) |
fileList.push(option); |
||||
console.log(fileList, option) |
console.log(fileList, option); |
||||
} |
} |
||||
function removeFile(option) { |
function removeFile(option) { |
||||
for (let i = 0; i < fileList.length; i++) { |
for (let i = 0; i < fileList.length; i++) { |
||||
if (fileList[i].file.name == option.name) { |
if (fileList[i].file.name == option.name) { |
||||
fileList.splice(i, 1) |
fileList.splice(i, 1); |
||||
} |
} |
||||
} |
} |
||||
console.log(fileList, option) |
console.log(fileList, option); |
||||
|
} |
||||
} |
// 上传前处理 |
||||
// 上传前处理 |
function beforeUpload(file, item) { |
||||
function beforeUpload(file, item) { |
console.log('file,item', file, item); |
||||
console.log("file,item", file, item) |
let fileSize = file.size; |
||||
let fileSize = file.size |
|
||||
const FIVE_M = 500 * 1024 * 1024; |
const FIVE_M = 500 * 1024 * 1024; |
||||
//大于5M，不允许上传 |
//大于5M，不允许上传 |
||||
if (fileSize > FIVE_M) { |
if (fileSize > FIVE_M) { |
||||
ElMessage.error("最大上传500M") |
message.error('最大上传500M'); |
||||
return false |
return false; |
||||
} |
} |
||||
let geShi = ["xlx","xlsx", "docx", "doc", "pdf"] as Array<string> |
let geShi = ['xlx', 'xlsx', 'docx', 'doc', 'pdf'] as Array<string>; |
||||
if (geShi.indexOf(file.name.substring(file.name.lastIndexOf(".") + 1)) == -1) { |
if (geShi.indexOf(file.name.substring(file.name.lastIndexOf('.') + 1)) == -1) { |
||||
ElMessage.error('文件格式错误！仅支持' + "xlx,xlsx, docx, doc, pdf"); |
message.error('文件格式错误！仅支持' + 'xlx,xlsx, docx, doc, pdf'); |
||||
console.log('文件格式错误！仅支持' + "xlsx", "docx", "doc", "pdf") |
console.log('文件格式错误！仅支持' + 'xlsx', 'docx', 'doc', 'pdf'); |
||||
return false; |
return false; |
||||
} |
} |
||||
if (item.indexOf(file.name.substring(0,file.name.indexOf(".")))==-1) { |
if (item.indexOf(file.name.substring(0, file.name.indexOf('.'))) == -1) { |
||||
ElMessage.error('请上传文件:' + item); |
message.error('请上传文件:' + item); |
||||
return false; |
return false; |
||||
} |
} |
||||
console.log('文件上传成功') |
console.log('文件上传成功'); |
||||
|
|
||||
return true |
return true; |
||||
} |
} |
||||
// 文件数量过多时提醒 |
// 文件数量过多时提醒 |
||||
function handleExceed() { |
function handleExceed() { |
||||
ElMessage.warning("最多只能上传一个文件") |
message.warning('最多只能上传一个文件'); |
||||
} |
} |
||||
//导入Excel病种信息数据 |
//导入Excel病种信息数据 |
||||
async function submitImportForm() { |
async function submitImportForm() { |
||||
if (fileList.length == 0) { |
if (fileList.length == 0) { |
||||
ElMessage({ |
message.error('未选择任何文件，无法上传！'); |
||||
message: "未选择任何文件，无法上传！", |
return; |
||||
type: "error" |
|
||||
}) |
|
||||
return |
|
||||
} |
} |
||||
// type ==0新增，type ==1 是修改 |
// type ==0新增，type ==1 是修改 |
||||
if (fileList.length != dataTo.files.length && dataTo.type == 0) { |
//“可研报告初稿编制”阶段：需支持上传《可行性研究报告（初稿）》或《项目建议书》（支持上传文件数量为1-2份） |
||||
ElMessage({ |
if ( |
||||
message: "上传的文件不符合要求请检查", |
dataTo.taskName.indexOf('可研报告初稿编制') >= 0 || |
||||
type: "error" |
dataTo.taskName.indexOf('可研报告终稿编制') >= 0 |
||||
}) |
) { |
||||
return |
//有一个文件就行 |
||||
|
} else { |
||||
|
if (fileList.length != dataTo.files.length && dataTo.type == 0) { |
||||
|
message.error('上传的文件不符合要求请检查'); |
||||
|
return; |
||||
|
} |
||||
} |
} |
||||
|
|
||||
// // 使用form表单的数据格式 |
// // 使用form表单的数据格式 |
||||
const params = new FormData() |
const params = new FormData(); |
||||
|
if (dataTo.taskName == '立项审批') { |
||||
|
if (await validateApprovalMoneyForm()) { |
||||
|
const approvalMoneyFieldsValue = getApprovalMoneyFieldsValue(); |
||||
|
const { |
||||
|
approvalTotalMoney, |
||||
|
approvalCentralMoney, |
||||
|
approvalProvincialMoney, |
||||
|
approvalCityMoney, |
||||
|
approvalCountyMoney, |
||||
|
approvalSelfMoney, |
||||
|
} = approvalMoneyFieldsValue; |
||||
|
|
||||
|
// 计算其他金额之和 |
||||
|
const sumOfOtherAmounts = |
||||
|
approvalCentralMoney + |
||||
|
approvalProvincialMoney + |
||||
|
approvalCityMoney + |
||||
|
approvalCountyMoney + |
||||
|
approvalSelfMoney; |
||||
|
// 校验总金额是否等于其他金额之和 |
||||
|
if (Math.abs(approvalTotalMoney - sumOfOtherAmounts) < Number.EPSILON) { |
||||
|
approvalMoneyFieldsValue['id'] = projectId.value; |
||||
|
params.append('approvalMoneyFieldsValue', JSON.stringify(approvalMoneyFieldsValue)); |
||||
|
} else { |
||||
|
message.error('总金额与其他金额之和不相等，请重新输入！'); |
||||
|
return; |
||||
|
} |
||||
|
} else { |
||||
|
return; |
||||
|
} |
||||
|
} else if (dataTo.taskName == '合同签订') { |
||||
|
if (await validateContractMoneyForm()) { |
||||
|
const contractMoneyFieldsValue = getContractMoneyFieldsValue(); |
||||
|
const { |
||||
|
contractTotalMoney, |
||||
|
contractCentralMoney, |
||||
|
contractProvincialMoney, |
||||
|
contractCityMoney, |
||||
|
contractCountyMoney, |
||||
|
contractSelfMoney, |
||||
|
} = contractMoneyFieldsValue; |
||||
|
|
||||
|
// 计算其他金额之和 |
||||
|
const sumOfOtherAmounts = |
||||
|
contractCentralMoney + |
||||
|
contractProvincialMoney + |
||||
|
contractCityMoney + |
||||
|
contractCountyMoney + |
||||
|
contractSelfMoney; |
||||
|
|
||||
|
// 校验总金额是否等于其他金额之和，使用Number.EPSILON进行比较 |
||||
|
if (Math.abs(contractTotalMoney - sumOfOtherAmounts) < Number.EPSILON) { |
||||
|
contractMoneyFieldsValue['id'] = projectId.value; |
||||
|
params.append('contractMoneyFieldsValue', JSON.stringify(contractMoneyFieldsValue)); |
||||
|
} else { |
||||
|
message.error('总金额与其他金额之和不相等，请重新输入！'); |
||||
|
|
||||
|
return; |
||||
|
} |
||||
|
} else { |
||||
|
return; |
||||
|
} |
||||
|
} |
||||
// 将上传文件数组依次添加到参数paramsData中 |
// 将上传文件数组依次添加到参数paramsData中 |
||||
fileList.forEach((x) => { |
fileList.forEach((x) => { |
||||
console.log("xxxxxxxxxx", x, x.file) |
console.log('xxxxxxxxxx', x, x.file); |
||||
params.append('file', x.file) |
params.append('file', x.file); |
||||
}); |
}); |
||||
params.append("planinfoid", dataTo.planinfoid) |
params.append('planinfoid', dataTo.planinfoid); |
||||
|
isSubmitting.value = true; |
||||
if (dataTo.type == 0) { |
if (dataTo.type == 0) { |
||||
planUploadFile(params).then(() => { |
planUploadFile(params) |
||||
emit("close") |
.then(() => { |
||||
|
emit('close'); |
||||
}) |
}) |
||||
} else { |
.catch(() => { |
||||
planUploadModifyFile(params).then(() => { |
isSubmitting.value = false; |
||||
emit("close") |
}); |
||||
|
} else if(dataTo.type == 1){ |
||||
|
planUploadModifyFile(params) |
||||
|
.then(() => { |
||||
|
emit('close'); |
||||
}) |
}) |
||||
|
.catch(() => { |
||||
|
isSubmitting.value = false; |
||||
|
}); |
||||
|
}else{ |
||||
|
planREUploadFile(params) |
||||
|
.then(() => { |
||||
|
emit('close'); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
isSubmitting.value = false; |
||||
|
}); |
||||
} |
} |
||||
|
} |
||||
} |
function dialogVisible() { |
||||
function dialogVisible() { |
emit('close'); |
||||
emit("close") |
} |
||||
} |
|
||||
</script> |
</script> |
||||
|
|
||||
<style></style> |
<style></style> |
||||
|
|||||
@ -0,0 +1,126 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
项目进度：<Progress :size="15" :percent="activities[0]?.totalPercent"></Progress> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<el-steps finish-status="success" :active="activities.status"> |
||||
|
<el-step |
||||
|
v-for="(item, index) in activities" |
||||
|
:key="index" |
||||
|
:status="item.isfinish == 2 ? 'success' : 'wait'" |
||||
|
> |
||||
|
<template #title> |
||||
|
<div> |
||||
|
{{ item.taskName }} |
||||
|
</div> |
||||
|
<div> |
||||
|
{{ item.scheduledStartTime + '--' + item.scheduledEndTime }} |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #description> |
||||
|
<elstepchild v-if="item.children != null" :child="item.children"></elstepchild> |
||||
|
</template> |
||||
|
<template #icon> |
||||
|
<Progress |
||||
|
type="circle" |
||||
|
:percent="item.percent" |
||||
|
:size="40" |
||||
|
:status="item.progressStatus" |
||||
|
></Progress> |
||||
|
</template> |
||||
|
</el-step> |
||||
|
</el-steps> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
<script lang="ts" name="viewPlanDetail" setup> |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
import elstepchild from './elstepchild.vue'; |
||||
|
import { Progress, message } from 'ant-design-vue'; |
||||
|
|
||||
|
|
||||
|
let dataTo = defineProps(["res"]); |
||||
|
let activities = ref([]); |
||||
|
onMounted(() => { |
||||
|
activities.value=dataTo.res |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
</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; |
||||
|
} |
||||
|
|
||||
|
.el-row { |
||||
|
margin-bottom: 25px; |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
|
||||
|
.componentA { |
||||
|
position: absolute; |
||||
|
z-index: 1; |
||||
|
/* 设置较低的z-index值 */ |
||||
|
/* 其他样式 */ |
||||
|
} |
||||
|
|
||||
|
.componentB { |
||||
|
position: absolute; |
||||
|
z-index: 2; |
||||
|
/* 设置较高的z-index值 */ |
||||
|
/* 其他样式 */ |
||||
|
} |
||||
|
|
||||
|
.custom-content { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
transform: translateX(-50%); |
||||
|
transition: left 0.3s; |
||||
|
z-index: 3; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.italicize { |
||||
|
/* transform: skew(15deg); 使用 transform 属性进行倾斜 */ |
||||
|
transform: rotate(-45deg); |
||||
|
display: inline-block; |
||||
|
/* 需要将元素设为块级元素才能应用transform属性 */ |
||||
|
z-index: 4; |
||||
|
margin-top: -20px; |
||||
|
color: #ea1212; |
||||
|
font-size: large; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue