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

fix : 修复直接上报的详情组件渲染

Browse Source
This commit is contained in:
odjbin
2024-06-02 22:22:06 +08:00
parent 6bb97b4a1d
commit 456f2284e9
7 changed files with 194 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,17 +1,10 @@
<template>
<div v-loading="loading">
<fvForm :schema="schema" @getInstance="(e)=>form = e"></fvForm>
<!-- <AttachmentUpload></AttachmentUpload> -->
<el-form :model="formData" label-width="auto" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'">
<el-form-item label="其他文件">
<file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>
<fvTable style="width: 100%;max-height: 400px;" v-if="processViewer" :tableConfig="tableConfig"
:data="localFormData.fileList" :isSettingCol="false" :pagination="false">
<template #empty>
<el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
</template>
</fvTable>
</el-form-item>
<el-form :model="formData" label-width="auto" >
<file-component title="需求上报附件" tag="需求上报"
v-model:value="formData.fileList" :processViewer="processViewer"
:file-list-show="fileListShow"/>
</el-form>
<div class="approval-record">
<baseTitle title="审批记录"></baseTitle>
@@ -21,19 +14,15 @@
<process-diagram-viewer v-if="processViewer" :id-name="type"/>
</div>
</div>
<!-- <Opinion: v-if="data.taskId" :formData="formData" :taskId="formData.taskId"></Opinion:>-->
</div>
</template>
<script setup lang="jsx">
import { computed, markRaw, reactive, ref, watchEffect } from 'vue';
import AttachmentUpload from '../AttachmentUpload.vue';
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";
import {downloadFile} from "@/api/project-demand";
const props = defineProps({
formData: {
@@ -52,12 +41,16 @@ const props = defineProps({
type: Array,
default: []
},
fileListShow: {
type: String,
default: 'READ'
},
// approval 立项, execute 实施, 归档 archivist
type: {
type: String,
default: 'approval'
}, loading: {
},
loading: {
type: Boolean,
default: false
}

39
src/components/DetailComponent/FileComponent.vue
View File

@@ -1,8 +1,8 @@
<template>
<el-form-item label="需求上报附件" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'">
<file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>{{fileList}}
<file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>
<fvTable style="width: 100%;max-height: 400px;" v-if="processViewer" :tableConfig="tableConfig"
:data="fileList" :isSettingCol="false" :pagination="false">
:data="_value" :isSettingCol="false" :pagination="false">
<template #empty>
<el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
</template>
@@ -29,14 +29,17 @@ const props = defineProps({
type: String,
default: 'READ'
},
fileList: {
value: {
type: Array,
default: []
},
processViewer: {
type: Boolean,
default: false
},
})
const processViewer = ref(false)
const tableConfig = reactive({
columns: [
@@ -93,13 +96,21 @@ const tableConfig = reactive({
]
})
const _value = computed({
get() {
return props.value;
},
set(val) {
emit("update:value", val);
}
})
const getOtherFile = (val) => {
processViewer.value = false
props.processViewer = false
let fileObj = compositeParam(val)
props.fileList.push(fileObj)
_value.value.push(fileObj)
nextTick(() => {
processViewer.value = true
props.processViewer = true
})
}
@@ -126,7 +137,7 @@ const handleDelete = (row) => {
deleteFile(row.fileId).then(res => {
if (res.code === 1000) {
ElMessage.success("删除成功");
props.fileList.splice(props.fileList.findIndex((item) => item.id === row.fileId), 1);
_value.splice(_value.findIndex((item) => item.id === row.fileId), 1);
}
});
}).catch(() => {
@@ -134,15 +145,9 @@ const handleDelete = (row) => {
})
}
const init = () => {
nextTick(() => {
processViewer.value = true
})
}
init()
watch(() => props.processViewer, (newVal) => {
props.processViewer = newVal
}, {deep: true})
</script>
<style scoped>

2
src/components/DetailComponent/SummaryDetail.vue
View File

@@ -133,7 +133,7 @@
</el-col>
<el-col :span="24">
<file-component title="需求上报附件" tag="需求上报"
:file-list="localFormData.fileList"
v-model:value="localFormData.fileList" :processViewer="processViewer"
:file-list-show="fileListShow"/>
</el-col>
</el-row>

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

@@ -5,11 +5,11 @@
<div class="steps-box">
<el-steps :active="localActive" finish-status="success">
<el-step
v-for="(item, index) in localSteps"
:key="item.key"
:title="item.title"
:class="stepClass(index)"
@click="handleStep(item.key, index)"
v-for="(item, index) in localSteps"
:key="item.key"
:title="item.title"
:class="stepClass(index)"
@click="handleStep(item.key, index)"
/>
</el-steps>
@@ -25,10 +25,10 @@
</template>
<script setup lang="jsx">
import { ElLoading, ElNotification } from 'element-plus';
import { computed, reactive, ref, watchEffect } from 'vue';
import { useRoute } from 'vue-router';
import { getBaseInfoApi } from './api';
import {ElLoading, ElNotification} from 'element-plus';
import {computed, reactive, ref, watchEffect} from 'vue';
import {useRoute} from 'vue-router';
import {getBaseInfoApi} from './api';
const props = defineProps({
// 步骤对应内容list
@@ -39,7 +39,7 @@ const props = defineProps({
// 当前显示步骤
active: {
type: Number,
default:0
default: 0
},
// 已完成的工作流步骤
stepSuccess: {
@@ -47,7 +47,7 @@ const props = defineProps({
default: ['00']
},
//直接上报/需求征集
reportType:{
reportType: {
type: String,
default: ''
}
@@ -57,9 +57,7 @@ const route = useRoute()
const emits = defineEmits(['stepChange', 'setDetail'])
const localData = reactive({
})
const localData = reactive({})
const localActive = ref(0) // 当前激活步骤
@@ -92,7 +90,7 @@ const localSteps = ref([
const baseForm = ref()
const schema = computed(()=>{
const schema = computed(() => {
return [
{
label: '所属公司',
@@ -134,22 +132,43 @@ const localStepSuccess = ref([])
// 格式化详情步骤条
const formatProcedure = (data) => {
let arr = []
if(data instanceof Array) {
data.forEach(item=>{
switch (item) {
case '00': arr.push(0)
break
case '10': arr.push(1)
break
case '20': arr.push(2)
break
// case '30': arr.push(3)
// break
case '40': arr.push(3)
break
case '50': arr.push(4)
break
if (data instanceof Array) {
data.forEach(item => {
if (props.reportType === 'direct') {
switch (item) {
case '10':
arr.push(0)
break
case '20':
arr.push(1)
break
case '40':
arr.push(2)
break
case '50':
arr.push(3)
break
}
} else {
switch (item) {
case '00':
arr.push(0)
break
case '10':
arr.push(1)
break
case '20':
arr.push(2)
break
case '40':
arr.push(3)
break
case '50':
arr.push(4)
break
}
}
})
}
return arr
@@ -158,20 +177,25 @@ const formatProcedure = (data) => {
// 反向格式化
const formatReProcedure = (data) => {
let arr = []
if(data instanceof Array) {
data.forEach(item=>{
if (data instanceof Array) {
data.forEach(item => {
switch (item) {
case 0: arr.push('00')
case 0:
arr.push('00')
break
case 1: arr.push('10')
case 1:
arr.push('10')
break
case 2: arr.push('20')
case 2:
arr.push('20')
break
// case 3: arr.push('30')
// break
case 3: arr.push('40')
// case 3: arr.push('30')
// break
case 3:
arr.push('40')
break
case 4: arr.push('50')
case 4:
arr.push('50')
break
}
})
@@ -179,17 +203,24 @@ const formatReProcedure = (data) => {
}
const formatActive = (val) => {
let newVal
if (props.reportType === 'direct') {
newVal = val + 1
} else {
newVal = val
}
let active = ''
val == 0 && (active = '00')
val == 1 && (active = '10')
val == 2 && (active = '20')
newVal == 0 && (active = '00')
newVal == 1 && (active = '10')
newVal == 2 && (active = '20')
// val == 3 && (active = '30')
val == 3 && (active = '40')
val == 4 && (active = '50')
newVal == 3 && (active = '40')
newVal == 4 && (active = '50')
return active
}
const stepClass = (val) => {
console.log('localStepSuccess.value',localStepSuccess.value,val)
if (localStepSuccess.value.includes(val)) {
return 'step-success'
}
@@ -197,24 +228,45 @@ const stepClass = (val) => {
}
const handleStep = (key, index) => {
console.log('key, index',key, index)
if (localStepSuccess.value.includes(index)) {
let active = ''
localActive.value = index
switch(index) {
case 0: active = '00'
break
case 1: active = '10'
break
case 2: active = '20'
break
// case 3: active = '30'
// break
case 3: active = '40'
break
case 4: active = '50'
break
if (props.reportType === 'direct') {
switch (index) {
case 0:
active = '10'
break
case 1:
active = '20'
break
case 2:
active = '40'
break
case 3:
active = '50'
break
}
} else {
switch (index) {
case 0:
active = '00'
break
case 1:
active = '10'
break
case 2:
active = '20'
break
case 3:
active = '40'
break
case 4:
active = '50'
break
}
}
emits('stepChange', { key, active })
emits('stepChange', {key, active})
return
}
ElNotification({
@@ -227,10 +279,9 @@ const handleStep = (key, index) => {
const getBaseInfo = async () => {
const loading = ElLoading.service({fullscreen: true})
try {
const { code, data } = await getBaseInfoApi(route.query.projectId)
const {code, data} = await getBaseInfoApi(route.query.projectId)
localStepSuccess.value = formatProcedure(data.procedure)
baseForm.value.setValues(data)
console.log(formatActive(localActive.value), 'formatActive(localActive.value)');
emits('setDetail', formatActive(localActive.value))
loading.close()
} catch {
@@ -244,8 +295,8 @@ watchEffect(() => {
localActive.value = props.active
})
watchEffect(() => {
if(props.reportType==='direct'){
localSteps.value=localSteps.value.slice(1)
if (props.reportType === 'direct') {
localSteps.value = localSteps.value.slice(1)
}
})
</script>