odjbin/mosr-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : 项目详情中立项/编辑页面demo

Browse Source
This commit is contained in:
odjbin
2024-06-08 00:05:28 +08:00
parent 86ff3c2e94
commit 521e40cf3d
2 changed files with 291 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
src/components/DetailComponent/ProjectApply.vue Normal file
View File

@@ -0,0 +1,239 @@
<template>
<div class="apply-block">
<el-form :model="formData" ref="applyForm" label-width="auto" :rules="rules">
<el-row>
<el-col :span="12">
<el-form-item label="前置流程">
<el-input v-model="formData.requirementName" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<AttachmentUpload ref="attachment" :label="title+'附件'" :showTable="showTable" :otherFileList="otherFileList"
@getAttachment="getAttachment"
@getOtherFile="getOtherFile" :showFileList="true" :formData="formData"
:preview="route.query.state==3"/>
<div class="approval-record">
<baseTitle title="流程"></baseTitle>
<process-diagram-viewer mode="view" idName="projectApply" v-if="processDiagramViewer"/>
</div>
<div class="oper-page-btn">
<el-button color="#DED0B2" v-if="route.query.state==0" @click="handleSubmit(applyForm)">提交</el-button>
<el-button color="#DED0B2" v-else-if="route.query.state==3" @click="handleSubmit(applyForm)">重新提交</el-button>
</div>
</div>
</template>
<script setup lang="jsx">
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue';
import {ElNotification} from "element-plus";
import {getApplyProcess, projectApply, resubmitApply, getApplyDetail} from "@/api/project-manage";
import {useProcessStore} from '@/stores/processStore.js';
import {useTagsView} from '@/stores/tagsview.js'
const router = useRouter()
const route = useRoute()
const emit = defineEmits(["getAttachment", "getOtherFile"])
const props = defineProps({
title: {
type: String,
default: '项目立项'
},
showTable: {
type: Boolean,
default: false
}
})
const rules = reactive({
// requirementName: [{required: true, message: '请选择前置流程', trigger: 'blur'}],
})
const tagsViewStore = useTagsView()
const processStore = useProcessStore()
const otherFileList = ref([])
const formData = ref({})
const attachment = ref()
const showTable = ref(true)
const loading = ref(false)
const processDiagramViewer = ref(false)
const name = ref(router.currentRoute.value.name)
const applyForm = ref()
const deploymentId = ref()
const compositeParam = (item) => {
// let tag = ''
// if (name.value === 'Initiation/apply' || route.query.state==3) {
// tag = props.title
// }
return {
fileId: item.id,
size: item.size,
originalFileName: item.originalFilename,
fileType: item.fileType,
url: item.url,
newFile: false,
tag: props.title
}
}
const getAttachment = (val) => {
console.log('上传文件getAttachment', val)
formData.value.singleFile = compositeParam(val)
}
const getOtherFile = (val) => {
console.log('上传文件getOtherFile', val)
showTable.value = false
let fileObj = compositeParam(val)
otherFileList.value.push(fileObj)
nextTick(() => {
showTable.value = true
})
}
const getFileParam = (item) => {
return {
fileId: item.fileId,
tag: item.tag
}
}
const handleSubmit = (instance) => {
if (!instance) return
instance.validate(async (valid) => {
if (!valid) return
let files = []
if (route.query.state === '3') {
attachment.value.allFileList.forEach(item => {
files.push(getFileParam(item))
})
}else {
otherFileList.value.forEach(item => {
files.push(getFileParam(item))
})
}
// if (formData.value.singleFile !== undefined) {
// formData.value.singleFile = getFileParam(formData.value.singleFile)
// }
if (attachment.value.singleFile == null) {
attachment.value.validate()
ElNotification({
title: '提示',
message: '请上传附件',
type: 'error'
})
return;
} else {
attachment.value.clearValidate()
}
let params = {
deploymentId: deploymentId.value,
requirementId: route.query.id,
fileList: files,
singleFile: formData.value.singleFile,
projectId: route.query.projectId,
}
console.log('params', params)
let res
if (route.query.state === '3') {
res = await resubmitApply(params)
}else {
res = await projectApply(params)
}
ElNotification({
title: '提示',
message: res.msg,
type: res.code === 1000 ? 'success' : 'error'
})
if (res.code === 1000) {
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
await router.push({
name: 'Initiation'
})
}
})
}
// const handleResubmit = async () => {
// let files = []
// if (route.query.state == 3) {
// attachment.value.allFileList.forEach(item => {
// files.push(getFileParam(item))
// })
// }
// if (attachment.value.singleFile == null) {
// attachment.value.validate()
// ElNotification({
// title: '提示',
// message: '请上传附件',
// type: 'error'
// })
// return;
// } else {
// attachment.value.clearValidate()
// }
// let params = {
// deploymentId: deploymentId.value,
// requirementId: route.query.id,
// fileList: files,
// singleFile: attachment.value.singleFile,
// projectId: route.query.projectId,
// }
// console.log('params', params, attachment.value.singleFile)
// let res = await resubmitApply(params)
// ElNotification({
// title: '提示',
// message: res.msg,
// type: res.code === 1000 ? 'success' : 'error'
// })
// if (res.code === 1000) {
// tagsViewStore.delVisitedViews(router.currentRoute.value.path)
// await router.push({
// name: 'Initiation'
// })
// }
// }
const init = () => {
if (!route.query.projectId) return;
processDiagramViewer.value = false
getApplyProcess(route.query.projectId).then(res => {
if (res.code === 1000) {
let data = res.data
deploymentId.value = data.deploymentId
processStore.setDesign(data)
processStore.runningList.value = data.runningList;
processStore.endList.value = data.endList;
processStore.noTakeList.value = data.noTakeList;
processStore.refuseList.value = data.refuseList;
processStore.passList.value = data.passList;
nextTick(() => {
processDiagramViewer.value = true
})
} else {
ElNotification({
title: '提示',
message: res.msg,
type: 'error'
})
}
})
}
const getDetailInfo = async () => {
if (!route.query.projectId) return;
getApplyDetail(route.query.projectId).then(res => {
ElNotification({
title: '提示',
message: res.msg,
type: res.code === 1000 ? 'success' : 'error'
})
if (res.code === 1000) {
formData.value = res.data.formData
loading.value = false
}
})
}
onMounted(async () => {
await init()
if (route.query.state == 3) {
loading.value = true
await getDetailInfo()
}
})
</script>
<style scoped>
</style>

77
src/views/project-management/implementation/detail.vue
View File

@@ -11,19 +11,32 @@
v-model:value="auditOpinion"
/>
<summary-detail v-show="showActive == '10'" :formData="commonForm.formData" :data="commonForm"
:processViewer="commonProvessViewer" :loading="loading" :fileListShow="fileListShow" v-model:value="auditOpinion"/>
<ApprovalDetail type="approval" v-show="showActive == '20'" :formData="commonForm.formData"
:processViewer="commonProvessViewer" :loading="loading" :fileListShow="fileListShow"
v-model:value="auditOpinion"/>
<ApprovalDetail type="approval" v-show="showActive == '20'&&!showApply&&!showTabs" :formData="commonForm.formData"
:data="commonForm" :processViewer="commonProvessViewer" :loading="loading"
:fileListShow="fileListShow" v-model:value="auditOpinion"/>
<ApprovalDetail type="execute" v-show="showActive == '40'" :formData="commonForm.formData"
:data="commonForm" :processViewer="commonProvessViewer" :loading="loading"
:fileListShow="fileListShow" v-model:value="auditOpinion"/>
<ApprovalDetail type="archivist" v-show="showActive == '50'" :formData="commonForm.formData" :data="commonForm"
:processViewer="commonProvessViewer" :loading="loading" :fileListShow="fileListShow" v-model:value="auditOpinion"/>
:processViewer="commonProvessViewer" :loading="loading" :fileListShow="fileListShow"
v-model:value="auditOpinion"/>
<project-apply v-if="showApply"/>
<el-tabs v-if="showTabs" v-model="activeName">
<el-tab-pane label="详情" name="first">
<ApprovalDetail type="approval" idName="applyDetail" :formData="commonForm.formData"
:data="commonForm" :processViewer="commonProvessViewer" :loading="loading"
:fileListShow="fileListShow" v-model:value="auditOpinion"/>
</el-tab-pane>
<el-tab-pane label="重新提交" name="second">
<project-apply/>
</el-tab-pane>
</el-tabs>
</template>
</steps>
<opinion v-if="commonForm.taskId" :formData="commonForm.formData" :taskId="commonForm.taskId" v-model:value="auditOpinion"/>
<opinion v-if="commonForm.taskId" :formData="commonForm.formData" :taskId="commonForm.taskId"
v-model:value="auditOpinion"/>
</template>
<script setup lang="jsx">
@@ -37,6 +50,8 @@ import Opinion from "@/components/DetailComponent/Opinion.vue";
const route = useRoute()
const activeName = ref('first')
const showApply = ref(false)
const showTabs = ref(false)
const loading = ref(false)
const processStore = useProcessStore()
const fileListShow = ref('READ')
@@ -64,8 +79,8 @@ const getAllInfo = async (state) => {
message: msg,
type: 'error'
})
if(msg==='查询结果为空'){
commonForm.value=[]
if (msg === '查询结果为空') {
commonForm.value = []
}
loading.close()
}
@@ -79,7 +94,7 @@ const getAllInfo = async (state) => {
processStore.passList.value = data.passList;
nextTick(() => {
commonProvessViewer.value = true
if (data.formPermMap["fileList"]) {
if (data.formPermMap && data.formPermMap["fileList"]) {
fileListShow.value = data.formPermMap["fileList"].perm
}
})
@@ -88,41 +103,53 @@ const getAllInfo = async (state) => {
loading.close()
}
}
const changeModel = (active) => {
if (route.query.state === '0' && active === '20') {
showApply.value = true
} else if (route.query.state === '3' && active === '20') {
//tab左侧详情, 右侧重新提交
showTabs.value = true
getAllInfo(active)
} else {
showApply.value = false
showTabs.value = false
getAllInfo(active)
}
}
const setDetail = (active) => {
showActive.value = active
getAllInfo(active)
changeModel(active)
}
const stepChange = (data) => {
showActive.value = data.active
getAllInfo(data.active)
changeModel(data.active)
}
</script>
<style scoped lang="scss">
.detail-block {
padding-top: 15px;
}
:deep(.el-tabs__nav-scroll) {
width: 100%;
:deep(.el-tabs__nav-scroll) {
width: 100%;
display: flex;
.el-tabs__nav {
display: flex;
flex: 1;
.el-tabs__nav {
display: flex;
.el-tabs__item {
flex: 1;
.el-tabs__item {
flex: 1;
font-size: 16px;
}
.is-active {
color: black;
background-color: #DED0B2;
}
font-size: 16px;
}
//.is-active {
// color: black;
// //background-color: #DED0B2;
//}
}
}
</style>