Files
mosr-web/src/views/project-management/filing/attachment.vue

420 lines
9.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div style="padding: 0 30px">
<baseTitle title="项目基本信息"></baseTitle>
<fvForm :schema="schema" @getInstance="(e)=>baseForm = e" label-position="left" label-width="left" style="margin-left: 15px"></fvForm>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane v-for="item in paneList" :label="item.label" :name="item.name">
<search-files-by-tag @search="search" @upload="upload" :type="item.name==='30'?'30':''"
:fileList="fileList" :uploadState="uploadState" v-model:loading="loading"/>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup lang="jsx">
import {searchFileList,searchAllFileList} from "@/api/project-manage/attachment.js";
import {ElNotification} from "element-plus";
import {computed, ref} from "vue";
import {getBaseInfoApi} from "@/components/steps/api";
import {useCacheStore} from '@/stores/cache.js'
import {toThousands} from '@/utils/changePrice.js'
const cacheStore = useCacheStore()
const route = useRoute()
const router = useRouter()
const activeName = ref('50')
const attachment = ref({})
const loading = ref(false)
const uploadState = ref(false)
const fileList = ref([])
const projectId = ref(route.query.id)
const requirementId = ref(route.query.requirementId)
const baseFormData = ref([])
const schema = computed(() => {
return [
{
label: '承办单位',
prop: 'affiliatedCompany',
colProps: {
span: 6
}
},
{
label: '项目名称',
prop: 'projectName',
colProps: {
span: 6
}
},
{
label: '开始时间',
prop: 'startTime',
colProps: {
span: 6
}
},
{
label: '结束时间',
prop: 'endTime',
colProps: {
span: 6
}
},
{
label: '项目类型',
prop: 'projectType',
colProps: {
span: 6
},
component: () => (
<div>
{
baseFormData.value?.projectType ?
<span>{filterDict(cacheStore.getDict('project_type'), baseFormData.value?.projectType)}</span>
: <span>{'--'}</span>
}
</div>
)
},
{
label: '研发主体',
prop: 'rdSubject',
colProps: {
span: 6
},
component: () => (
<div>
{
baseFormData.value?.rdSubject ?
<span>{filterDict(cacheStore.getDict('rd_subject'), baseFormData.value?.rdSubject)}</span>
: <span>{'--'}</span>
}
</div>
)
},
{
label: '出资类型',
prop: 'investmentType',
colProps: {
span: 6
},
component: () => (
<div>
{
baseFormData.value?.investmentType ?
<span>{filterDict(cacheStore.getDict('invest_type'), baseFormData.value?.investmentType)}</span>
: <span>{'--'}</span>
}
</div>
)
},
{
label: '所属业务板块',
prop: 'businessSegment',
colProps: {
span: 6
},
component: () => (
<div>
{
baseFormData.value?.businessSegment ?
<span>{filterDict(cacheStore.getDict('business_segment'), baseFormData.value?.businessSegment)}</span>
: <span>{'--'}</span>
}
</div>
)
},
{
label: '标准制定',
prop: 'technicalStandard',
colProps: {
span: 6
},
component: () => (
<div>
{
baseFormData.value?.technicalStandard ?
<span>{filterDict(cacheStore.getDict('technical_standard'), baseFormData.value?.technicalStandard)}</span>
: <span>{'--'}</span>
}
</div>
)
},
{
label: '项目影响',
prop: 'projectImpact',
colProps: {
span: 6
},
component: () => (
<div>
{
baseFormData.value?.projectImpact ?
<span>{filterDict(cacheStore.getDict('project_impact'), baseFormData.value?.projectImpact)}</span>
: <span>{'--'}</span>
}
</div>
)
},
{
label: '经费预算(元)',
prop: 'economicEstimate',
colProps: {
span: 6
},
component: () => (
<div>
{
baseFormData.value?.economicEstimate ?
<span>{ toThousands(baseFormData.value?.economicEstimate )}</span>
: <span>{'--'}</span>
}
</div>
)
},
{
label: '产学研联合',
prop: 'industryUniversityResearch',
colProps: {
span: 6
},
component: () => (
<div>
{
baseFormData.value?.industryUniversityResearch ?
<span>{filterDict(cacheStore.getDict('industry_university'), baseFormData.value?.industryUniversityResearch)}</span>
: <span>{'--'}</span>
}
</div>
)
},
{
label: '开展政府申报',
prop: 'governmentDeclaration',
colProps: {
span: 6
},
component: () => (
<div>
{
baseFormData.value?.governmentDeclaration ?
<span>{filterDict(cacheStore.getDict('government_declaration'), baseFormData.value?.governmentDeclaration)}</span>
: <span>{'--'}</span>
}
</div>
)
},
{
label: '所属专项资金项目',
prop: 'specialFund',
colProps: {
span: 6
}
},
{
label: '申请总部专项资金(元)',
prop: 'specialFundAmount',
colProps: {
span: 6
},
component: () => (
<div>
{
baseFormData.value?.specialFundAmount ?
<span>{ toThousands(baseFormData.value?.specialFundAmount )}</span>
: <span>{'--'}</span>
}
</div>
)
},
{
label: '是否在预算内',
prop: 'isWithinBudget',
colProps: {
span: 6
},
component: () => (
<div>
{
baseFormData.value?.isWithinBudget!=null ? baseFormData.value?.isWithinBudget?
<span>{'预算内'}</span>
: <span>{'预算外'}</span>:'--'
}
</div>
)
},
{
label: '部门分管领导',
prop: 'optionalChargeLeadership',
colProps: {
span: 6
}
}
]
})
const baseForm = ref()
const paneList = ref([
{
label: '全部',
name: 'all'
},
{
label: '需求征集',
name: '00'
},
{
label: '需求上报',
name: '10'
},
{
label: '项目立项',
name: '20'
},
{
label: '项目实施',
name: '30'
},
{
label: '项目验收',
name: '40'
},
{
label: '项目归档',
name: '50'
}
])
//匹配字典值,返回对应值的字典标签
const filterDict = (data, value) => {
if (data === undefined || value === undefined) return;
let label = ''
let result = []
if (value instanceof Array) {
value.forEach(item1 => {
data.find(item => {
if (item.value == item1) {
result.push(item.label)
}
})
})
label = result.map(item => item).join('')
} else {
if (data instanceof Array) {
data.find(item => {
if (item.value == value) {
label = item.label
}
})
}
}
return label
}
const getBaseInfo = async () => {
try {
const {code, data} = await getBaseInfoApi(route.query.id)
baseForm.value.setValues(data)
baseFormData.value = data
} catch {
}
}
getBaseInfo()
const handleClick = (tab) => {
activeName.value = tab.props.name
loading.value = true
search({})
}
const search = async (param) => {
if( activeName.value=='all'){
param.targetId = projectId.value
searchAllFileList(param).then(res => {
loading.value = false
changeFileList(res)
})
}else {
param.targetId = projectId.value
param.targetState = activeName.value
searchFileList(param).then(res => {
loading.value = false
changeFileList(res)
})
}
}
const changeFileList = (res) => {
if (res.code === 1000) {
fileList.value = res.data.fileList
uploadState.value = res.data.upload
} else {
ElNotification({
title: '提示',
message: res.msg,
type: 'error'
})
}
}
const upload = () => {
if (activeName.value === '30') {
router.push({
name: 'Implementation/upload',
query: {
projectId: route.query.id,
requirementId: requirementId.value,
type: '30'
}
})
} else {
router.push({
name: 'Filing/upload',
query: {
id: route.query.id,
name: activeName.value,
requirementId: requirementId.value
}
})
}
}
watchEffect(() => {
if (requirementId.value === '-1') {
console.info("🚀 ~method: -----", paneList.value.filter(item=>item.name!=='00'))
paneList.value = paneList.value.filter(item=>item.name!=='00')
}
})
search({})
onActivated(() => {
if (route.query.name) {
activeName.value = route.query.name
search({})
}
})
</script>
<style scoped lang="scss">
:deep(.el-tabs__header) {
margin: 15px 0 30px 0;
}
:deep(.el-tabs__nav-scroll) {
width: 100%;
display: flex;
.el-tabs__nav {
display: flex;
flex: 1;
.el-tabs__item {
flex: 1;
font-size: 16px;
}
.is-active {
color: black;
//background-color: #DED0B2;
}
}
}
</style>