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

feat: 主流程详情组件基本完成

Browse Source
This commit is contained in:
lilinyuan
2024-05-20 22:03:53 +08:00
parent 1c57cb277b
commit c97091db4f
6 changed files with 285 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/DetailComponent/ApprovalDetail.vue
View File

@@ -2,7 +2,20 @@
<div>
<fvForm :schema="schema" @getInstance="(e)=>form = e"></fvForm>
<!-- <AttachmentUpload></AttachmentUpload> -->
<el-form :model="formData" label-width="auto">
<el-form-item label="其他文件">
<el-table :data="formData.fileList" style="width: 100%">
<el-table-column label="序号" type="index" width="80"></el-table-column>
<el-table-column label="文件名称" prop="originalFileName"></el-table-column>
<el-table-column label="标签" prop="tag"></el-table-column>
<el-table-column label="文件大小" prop="size">
<template #default="{row}">
{{ parseInt(row.size / 1024) + 'KB' }}
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-form>
<div class="approval-record">
<baseTitle title="审批记录"></baseTitle>
<div class="process">
@@ -22,6 +35,8 @@ import OperationRender from '@/views/workflow/common/OperationRender.vue'
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue';
import Opinion from './Opinion.vue';
import fvTable from '@/fvcomponents/fvTable/index.vue'
import { ElLoading } from 'element-plus';
import {deleteFile, downloadFile} from "@/api/project-demand";
const props = defineProps({
formData: {
@@ -40,37 +55,99 @@ const props = defineProps({
type: Array,
default: []
},
// approval 立项, execute 实施, 归档 archivist
type: {
type: String,
default: 'approval'
}
})
const form = ref()
const localData = reactive({
fileList: props.formData.fileList
fileList: props.formData.fileList,
singleFile: props.formData.singleFile
})
const schema = computed(()=>{
return [
{
label: '前置流程',
prop: 'preProcess',
colProps: {
span: 24
}
},
{
label: '项目立项附件',
prop: 'singleFile',
colProps: {
span: 24
}
},
{
label: '其他文件',
prop: 'fileList',
}
]
let arr
if(props.type == 'approval') {
arr = [
{
label: '前置流程',
prop: 'preProcess',
colProps: {
span: 24
}
},
{
label: '项目立项附件',
prop: 'singleFile',
colProps: {
span: 24
},
component: ()=>(
<div>
{
props.formData.singleFile?.originalFileName ?
<span
style={{color: '#409EFF', cursor: 'pointer'}}
onClick={()=>handleDownload(props.formData.singleFile)}
>
{props.formData.singleFile?.originalFileName}
</span> :
<span>{'--'}</span>
}
</div>
)
},
]
} else if(props.type == 'execute') {
arr = [
{
label: '前置流程',
prop: 'preProcess',
colProps: {
span: 24
}
},
{
label: '项目验收附件',
prop: 'singleFile',
colProps: {
span: 24
}
},
]
} else {
arr = [
{
label: '项目归档附件',
prop: 'singleFile',
colProps: {
span: 24
}
},
]
}
return arr
})
const handleDownload = (row) => {
const loading = ElLoading.service({fullscreen: true})
downloadFile(row.fileId).then(res => {
const blob = new Blob([res])
let a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = row.originalFileName
a.click()
loading.close()
})
}
watchEffect(()=>{
Object.keys(props.formData).length && (form.value.setValues(props.formData))
})

41
src/components/steps/index.vue
View File

@@ -79,6 +79,10 @@ const localSteps = ref([
title: '项目归档',
key: 'archivist',
},
// {
// title: '项目结项',
// key: 'end',
// },
])
const baseForm = ref()
@@ -134,9 +138,11 @@ const formatProcedure = (data) => {
break
case '20': arr.push(2)
break
case '30': arr.push(3)
// case '30': arr.push(3)
// break
case '40': arr.push(3)
break
case '40': arr.push(4)
case '50': arr.push(4)
break
}
})
@@ -156,9 +162,11 @@ const formatReProcedure = (data) => {
break
case 2: arr.push('20')
break
case 3: arr.push('30')
// case 3: arr.push('30')
// break
case 3: arr.push('40')
break
case 4: arr.push('40')
case 4: arr.push('50')
break
}
})
@@ -166,26 +174,13 @@ const formatReProcedure = (data) => {
}
const formatActive = (val) => {
console.log(val, 'val');
let active = ''
// switch(val) {
// case '0' : active = '00'
// break
// case '1' : active = '10'
// break
// case '2' : active = '20'
// break
// case '3' : active = '30'
// break
// case '4' : active = '40'
// break
// }
val == 0 && (active = '00')
val == 1 && (active = '10')
val == 2 && (active = '20')
val == 3 && (active = '30')
val == 4 && (active = '40')
console.log(active, 'active--');
// val == 3 && (active = '30')
val == 3 && (active = '40')
val == 4 && (active = '50')
return active
}
@@ -207,9 +202,11 @@ const handleStep = (key, index) => {
break
case 2: active = '20'
break
case 3: active = '30'
// case 3: active = '30'
// break
case 3: active = '40'
break
case 4: active = '40'
case 4: active = '50'
break
}
emits('stepChange', { key, active })

92
src/views/project-management/filing/detail.vue
View File

@@ -1,23 +1,33 @@
<template>
<div class="detail-block">
<el-tabs
v-model="activeName"
type="card"
class="demo-tabs"
@tab-click="handleClick"
>
<el-tab-pane label="需求征集" name="first">
<steps :active="'0'" @setDetail="setDetail" @stepChange="stepChange">
<template #content>
<collection-detail
:formData="collectionData.formData"
:data="collectionData"
:processViewer="commonProvessViewer"
:companyOption="companyOption"
@getInfo="getDemandCollectionInfo"
v-show="showActive == '00'"
/>
<summary-detail v-show="showActive == '10'" :formData="summaryData.formData" :data="summaryData" :processViewer="commonProvessViewer"/>
<ApprovalDetail type="approval" v-show="showActive == '20'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer"></ApprovalDetail>
<ApprovalDetail type="execute" v-show="showActive == '40'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer"></ApprovalDetail>
<ApprovalDetail type="archivist" v-show="showActive == '50'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer"></ApprovalDetail>
</el-tab-pane>
<el-tab-pane label="需求上报" name="second"></el-tab-pane>
<el-tab-pane label="项目立项" name="third" ></el-tab-pane>
<el-tab-pane label="项目实施" name="third"></el-tab-pane>
<el-tab-pane label="项目归档" name="third" :disabled="true"></el-tab-pane>
</el-tabs>
</div>
</template>
</steps>
</template>
<script setup lang="jsx">
import {getInfo} from "@/api/project-demand/index.js";
import {getSubCompOpt} from '@/api/user/user.js'
import {useProcessStore} from '@/stores/processStore.js';
import CollectionDetail from "@/components/DetailComponent/CollectionDetail.vue";
import SummaryDetail from "@/components/DetailComponent/SummaryDetail.vue";
import ApprovalDetail from "@/components/DetailComponent/ApprovalDetail.vue";
import { getMapProjectStateInfo } from '@/components/steps/api';
import { ElLoading } from "element-plus";
const activeName = ref('first')
const handleClick = (tab, event) => {
console.log(tab, event)
@@ -25,6 +35,58 @@ const handleClick = (tab, event) => {
}
}
const getCompanyOption = async () => {
const res = await getSubCompOpt()
companyOption.value = res.data
}
const commonForm = ref({})
const commonProvessViewer = ref(true)
const getAllInfo = async (state) => {
const loading = ElLoading.service({fullscreen: true})
try {
state == '00' && ( await getCompanyOption() )
commonProvessViewer.value = false
const { data, code } = await getMapProjectStateInfo(route.query.projectId, state)
if(state == '00') {
collectionData.value = data;
} else if(state == '10') {
summaryData.value = data;
}
commonForm.value = data
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(() => {
// summaryProcessViewer.value = true
commonProvessViewer.value = true
})
loading.close()
} catch {
loading.close()
}
}
const showActive = ref()
const setDetail = (active) => {
showActive.value = active
getAllInfo(active)
}
const stepChange = (data) => {
showActive.value = data.active
getAllInfo(data.active)
}
</script>
<style scoped lang="scss">

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

@@ -1,29 +1,101 @@
<template>
<div class="detail-block">
<el-tabs
v-model="activeName"
type="card"
class="demo-tabs"
@tab-click="handleClick"
>
<el-tab-pane label="需求征集" name="first">
<steps :active="'0'" @setDetail="setDetail" @stepChange="stepChange">
<template #content>
<collection-detail
:formData="collectionData.formData"
:data="collectionData"
:processViewer="commonProvessViewer"
:companyOption="companyOption"
@getInfo="getDemandCollectionInfo"
v-show="showActive == '00'"
/>
<summary-detail v-show="showActive == '10'" :formData="summaryData.formData" :data="summaryData" :processViewer="commonProvessViewer"/>
<ApprovalDetail type="approval" v-show="showActive == '20'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer"></ApprovalDetail>
<ApprovalDetail type="execute" v-show="showActive == '40'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer"></ApprovalDetail>
</el-tab-pane>
<el-tab-pane label="需求上报" name="second"></el-tab-pane>
<el-tab-pane label="项目立项" name="third" ></el-tab-pane>
<el-tab-pane label="项目实施" name="third" :disabled="true"></el-tab-pane>
</el-tabs>
</div>
</template>
</steps>
</template>
<script setup lang="jsx">
const activeName = ref('first')
import {getInfo} from "@/api/project-demand/index.js";
import {getSubCompOpt} from '@/api/user/user.js'
import {useProcessStore} from '@/stores/processStore.js';
import CollectionDetail from "@/components/DetailComponent/CollectionDetail.vue";
import SummaryDetail from "@/components/DetailComponent/SummaryDetail.vue";
import ApprovalDetail from "@/components/DetailComponent/ApprovalDetail.vue";
import { getMapProjectStateInfo } from '@/components/steps/api';
import { ElLoading } from "element-plus";
// const activeName = ref('first')
const handleClick = (tab, event) => {
console.log(tab, event)
if(tab.index.value === 0){
}
}
const route = useRoute()
const activeName = ref('first')
const collectionData = ref({})
const summaryData = ref({})
const collectionProcessViewer = ref(true)
const summaryProcessViewer = ref(true)
const processStore = useProcessStore()
const companyOption = ref([])
const rules = reactive({
auditOpinion: [{required: true, message: '请输入审核意见', trigger: 'blur'}],
})
const getCompanyOption = async () => {
const res = await getSubCompOpt()
companyOption.value = res.data
}
const commonForm = ref({})
const commonProvessViewer = ref(true)
const getAllInfo = async (state) => {
const loading = ElLoading.service({fullscreen: true})
try {
state == '00' && ( await getCompanyOption() )
commonProvessViewer.value = false
const { data, code } = await getMapProjectStateInfo(route.query.projectId, state)
if(state == '00') {
collectionData.value = data;
} else if(state == '10') {
summaryData.value = data;
}
commonForm.value = data
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(() => {
// summaryProcessViewer.value = true
commonProvessViewer.value = true
})
loading.close()
} catch {
loading.close()
}
}
const showActive = ref()
const setDetail = (active) => {
showActive.value = active
getAllInfo(active)
}
const stepChange = (data) => {
showActive.value = data.active
getAllInfo(data.active)
}
</script>
<style scoped lang="scss">

3
src/views/project-management/implementation/index.vue
View File

@@ -195,7 +195,8 @@ const handleDetail = (row) => {
router.push({
name: 'Implementation/detail',
query: {
id: row.requirementId
id: row.requirementId,
projectId: row.projectId
}
})
}

1
src/views/project-management/initiation/detail.vue
View File

@@ -122,6 +122,7 @@ const getAllInfo = async (state) => {
} else if(state == '10') {
summaryData.value = data;
}
console.log(data, 'data--22');
commonForm.value = data
processStore.setDesign(data)
processStore.runningList.value = data.runningList;