Merge pull request 'fix : 修复新增专项资金/需求征集排版' (#702) from dd into master

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/702
This commit is contained in:
2024-08-12 14:37:54 +00:00
2 changed files with 142 additions and 82 deletions

View File

@@ -1,14 +1,15 @@
<template> <template>
<div v-loading="loading" class="add-block"> <div v-loading="loading" class="add-block">
<baseTitle title="需求征集信息录入"></baseTitle> <baseTitle title="需求征集信息录入"></baseTitle>
<el-form :model="formData" ref="demandForm" :rules="rules" :scroll-to-error="true"> <el-form :model="formData" ref="demandForm" :rules="rules" label-width="140px" :scroll-to-error="true"
<el-row gutter="40"> :style="{marginLeft: !formData.isSpecialFund?'-55px':'-30px'}">
<el-col :span="5"> <el-row gutter="30">
<el-form-item label="征集名称" prop="requirementName" > <el-col :span="6">
<el-input v-model="formData.requirementName" placeholder="请输入名称" clearable></el-input> <el-form-item label="征集名称" prop="requirementName">
<el-input v-model="formData.requirementName" placeholder="请输入征集名称" clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="6" style="margin-left: -40px">
<el-form-item label="征集类型" prop="collectType"> <el-form-item label="征集类型" prop="collectType">
<el-select v-model="formData.collectType" placeholder="请选择征集类型" clearable filterable> <el-select v-model="formData.collectType" placeholder="请选择征集类型" clearable filterable>
<el-option <el-option
@@ -20,29 +21,29 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="6" style="margin-left: 10px">
<el-form-item label="需求上报截止时间" prop="deadline"> <el-form-item label="需求上报截止时间" prop="deadline">
<el-config-provider> <el-config-provider>
<el-date-picker <el-date-picker
style="width: 100%" style="width: 100%"
v-model="formData.deadline" v-model="formData.deadline"
type="date" type="date"
placeholder="需求上报截止时间" placeholder="请选择需求上报截止时间"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
:disabled-date="disabledDate" :disabled-date="disabledDate"
/> />
</el-config-provider> </el-config-provider>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="6" style="margin-left: -20px">
<el-form-item label="是否专项资金" prop="isSpecialFund"> <el-form-item label="是否专项资金" prop="isSpecialFund">
<el-select v-model="formData.isSpecialFund" placeholder="是否专项资金" clearable filterable> <el-select v-model="formData.isSpecialFund" placeholder="请选择是否专项资金" clearable filterable>
<el-option :value="true" label="是"></el-option> <el-option :value="true" label="是"></el-option>
<el-option :value="false" label="否"></el-option> <el-option :value="false" label="否"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="6">
<el-form-item label="专项资金名称" prop="specialFundId" v-if="formData.isSpecialFund"> <el-form-item label="专项资金名称" prop="specialFundId" v-if="formData.isSpecialFund">
<el-select v-model="formData.specialFundId" placeholder="请选择专项资金名称" clearable filterable> <el-select v-model="formData.specialFundId" placeholder="请选择专项资金名称" clearable filterable>
<el-option <el-option
@@ -54,7 +55,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="margin-bottom: -18px"> <el-col :span="24">
<el-form-item label="征集公司" :required="true" prop="" class="company-select"> <el-form-item label="征集公司" :required="true" prop="" class="company-select">
<div style="width: 100%"> <div style="width: 100%">
<el-button color="#DED0B2" @click="showCompany">{{ selectedCompanyList.length === 0 ? '请选择征集公司' : '更改' }} <el-button color="#DED0B2" @click="showCompany">{{ selectedCompanyList.length === 0 ? '请选择征集公司' : '更改' }}
@@ -67,29 +68,32 @@
</div> </div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="margin-bottom: -18px">
<el-form-item label="征集说明" prop="" required>
<el-input
v-model="formData.collectExplain"
style="width:100%;margin-right: 50px"
:rows="5"
type="textarea"
placeholder="请输入征集说明"
/>
</el-form-item>
</el-col>
</el-row> </el-row>
</el-form> </el-form>
<baseTitle title="征集说明"></baseTitle> <baseTitle title="附件文件" style="margin-right: 10px"></baseTitle>
<el-input <file-upload v-if="checkFormPrem('fileList')" @getFile="getFile"/>
v-model="formData.collectExplain" <div style="margin-right: 50px">
style="width:100%" <fvTable style="width: 100%;max-height: 162px;" height="162" v-if="showTable"
:rows="5" :tableConfig="tableConfig" :data="formData.fileList"
type="textarea" :isSettingCol="false" :pagination="false" perm="EDIT">
placeholder="请输入征集说明" <template #empty>
/> <el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
<div style="display: flex;align-items: center"> </template>
<baseTitle title="申请文件" style="margin-right: 10px"></baseTitle> </fvTable>
<file-upload v-if="checkFormPrem('fileList')" @getFile="getFile"/>
</div> </div>
<fvTable style="width: 100%;max-height: 162px;" height="162" v-if="showTable"
:tableConfig="tableConfig" :data="formData.fileList"
:isSettingCol="false" :pagination="false" perm="EDIT">
<template #empty>
<el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
</template>
</fvTable>
<div class="approval-record"> <div class="approval-record">
<div class="approval-title" > <div class="approval-title">
<baseTitle title="审批记录"></baseTitle> <baseTitle title="审批记录"></baseTitle>
<div class="diagram"> <div class="diagram">
<div class="base-title">流程图</div> <div class="base-title">流程图</div>
@@ -99,8 +103,9 @@
/> />
</div> </div>
</div> </div>
<el-empty :image-size="100" description="暂无审批记录" v-if="processDiagramViewer&& !opentionData?.operationList&&!changeDiagram"/> <el-empty :image-size="100" description="暂无审批记录"
<!-- <process-diagram-viewer mode="view" v-if="processDiagramViewer&&changeDiagram"/>--> v-if="processDiagramViewer&& !opentionData?.operationList&&!changeDiagram"/>
<!-- <process-diagram-viewer mode="view" v-if="processDiagramViewer&&changeDiagram"/>-->
<div class="process"> <div class="process">
<operation-render <operation-render
v-if="processDiagramViewer&& opentionData?.operationList && opentionData?.operationList.length > 0&&!changeDiagram" v-if="processDiagramViewer&& opentionData?.operationList && opentionData?.operationList.length > 0&&!changeDiagram"
@@ -117,7 +122,8 @@
</div> </div>
<company-picker :multiple="true" ref="companyRef" title="请选择征集公司" @ok="selected" <company-picker :multiple="true" ref="companyRef" title="请选择征集公司" @ok="selected"
v-model:value="selectedCompanyList"/> v-model:value="selectedCompanyList"/>
<file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl" <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName"
:fileUrl="filePreviewParam.fileUrl"
:fileType="filePreviewParam.fileType"/> :fileType="filePreviewParam.fileType"/>
</div> </div>
</template> </template>
@@ -142,6 +148,7 @@ import {useTagsView} from '@/stores/tagsview.js'
import {getFundOption} from "@/api/special-fund"; import {getFundOption} from "@/api/special-fund";
import CompanyPicker from "@/components/DetailComponent/CompanyPicker.vue"; import CompanyPicker from "@/components/DetailComponent/CompanyPicker.vue";
import {useCacheStore} from '@/stores/cache.js' import {useCacheStore} from '@/stores/cache.js'
const filePreviewParam = ref({ const filePreviewParam = ref({
fileUrl: '', fileUrl: '',
fileName: '', fileName: '',
@@ -184,11 +191,11 @@ const processInstanceData = ref()
const formPermMap = ref(new Map()); const formPermMap = ref(new Map());
const companyNameArray = ref([]) const companyNameArray = ref([])
const rules = reactive({ const rules = reactive({
requirementName: [{required: true, message: '请输入征集名称', trigger: ['blur','change']}], requirementName: [{required: true, message: '请输入征集名称', trigger: ['blur', 'change']}],
isSpecialFund: [{required: true, message: '请选择是否专项资金', trigger: ['blur','change']}], isSpecialFund: [{required: true, message: '请选择是否专项资金', trigger: ['blur', 'change']}],
collectType: [{required: true, message: '请选择征集类型', trigger: ['blur','change']}], collectType: [{required: true, message: '请选择征集类型', trigger: ['blur', 'change']}],
deadline: [{required: true, message: '请选择需求上报截止时间', trigger: ['blur','change']}], deadline: [{required: true, message: '请选择需求上报截止时间', trigger: ['blur', 'change']}],
specialFundId: [{required: true, message: '请选择专项资金名称', trigger: ['blur','change']}], specialFundId: [{required: true, message: '请选择专项资金名称', trigger: ['blur', 'change']}],
}) })
const tableConfig = reactive({ const tableConfig = reactive({
@@ -244,7 +251,7 @@ const clickToPreview = (row) => {
fileName: row.originalFileName, fileName: row.originalFileName,
fileType: row.fileType fileType: row.fileType
} }
nextTick(()=>{ nextTick(() => {
filePreviewShow.value = true filePreviewShow.value = true
}) })
// filePreviewRef.value.show() // filePreviewRef.value.show()
@@ -278,7 +285,7 @@ const showCompany = () => {
} }
const selected = (select) => { const selected = (select) => {
formData.value.companyIds=[] formData.value.companyIds = []
for (let val of select) { for (let val of select) {
formData.value.companyIds.push(val.value) formData.value.companyIds.push(val.value)
} }
@@ -462,18 +469,18 @@ const handleResubmit = (instance) => {
}) })
}) })
} }
const matterTree = (array,data, id) => { const matterTree = (array, data, id) => {
if (id) { if (id) {
data.forEach(item => { data.forEach(item => {
if (item.value == id) { if (item.value == id) {
let obj={ let obj = {
label:item.label, label: item.label,
value:item.value value: item.value
} }
array.push(obj); array.push(obj);
} }
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
matterTree(array,item.children,id) matterTree(array, item.children, id)
} }
}) })
return array; return array;
@@ -493,8 +500,8 @@ const getDetailInfo = async () => {
if (res.data.formData.companyIds[0] == -1) { if (res.data.formData.companyIds[0] == -1) {
selectedCompanyList.value = [ selectedCompanyList.value = [
{ {
value:-1, value: -1,
label:'所有公司' label: '所有公司'
} }
] ]
} else { } else {
@@ -581,7 +588,7 @@ onMounted(async () => {
//justify-content: space-between; //justify-content: space-between;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
padding: 0 30px 0 15px; padding: 0 0 0 40px;
a { a {
cursor: pointer; cursor: pointer;
@@ -593,4 +600,20 @@ onMounted(async () => {
position: relative; position: relative;
} }
} }
:deep(.el-table__header) {
.is-leaf:first-child {
.cell {
margin-left: -20px !important;
}
}
}
:deep(.el-table__body) {
.el-table__cell:first-child {
.cell {
margin-left: -10px !important;
}
}
}
</style> </style>

View File

@@ -1,35 +1,43 @@
<template> <template>
<div v-loading="loading" class="add-block"> <div v-loading="loading" class="add-block">
<baseTitle title="专项资金信息录入"></baseTitle> <baseTitle title="专项资金信息录入"></baseTitle>
<el-form :model="formData" inline class="query-form" ref="fundForm" :rules="rules"> <el-form :model="formData" ref="fundForm" :rules="rules" label-width="135" style="margin-left: 5px;margin-bottom: -18px">
<el-form-item label="专项资金名称" prop="name"> <el-row gutter="30">
<el-input v-model="formData.name" placeholder="请输入专项资金名称" clearable></el-input> <el-col :span="6" >
</el-form-item> <el-form-item label="专项资金名称" prop="name">
<el-form-item label="金额(元)" prop="fundAmount"> <el-input v-model="formData.name" placeholder="请输入专项资金名称" clearable></el-input>
<el-input-number v-model="formData.fundAmount" placeholder="请输入金额" :controls="false"/> </el-form-item>
</el-form-item> </el-col>
<el-col :span="6">
<el-form-item label="金额(元)" prop="fundAmount" label-width="100">
<el-input-number v-model="formData.fundAmount" placeholder="请输入金额" :controls="false"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="专项资金情况说明" prop="introduce">
<el-input
v-model="formData.introduce"
style="width:100%"
:rows="5"
type="textarea"
placeholder="请输入专项资金情况说明"
/>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<baseTitle title="介绍"></baseTitle> <baseTitle title="附件文件" style="margin-right: 10px"></baseTitle>
<el-input <file-upload @getFile="getFile"/>
v-model="formData.introduce"
style="width:100%"
:rows="5"
type="textarea"
placeholder="请输入介绍"
/>
<div style="display: flex;align-items: center">
<baseTitle title="申请文件" style="margin-right: 10px"></baseTitle>
<file-upload @getFile="getFile"/>
</div>
<fvTable style="width: 100%;max-height: 162px;" v-if="showTable" <fvTable style="width: 100%;max-height: 162px;" v-if="showTable"
:tableConfig="tableConfig" height="162" :data="formData.files" :tableConfig="tableConfig" height="162" :data="formData.files"
:isSettingCol="false" :pagination="false"> :isSettingCol="false" :pagination="false">
<template #empty> <template #empty>
<el-empty :image-size="55" description="暂无数据" style="padding: 0"/> <el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
</template> </template>
</fvTable> </fvTable>
<div class="approval-record"> <div class="approval-record">
<div class="approval-title" > <div class="approval-title">
<baseTitle title="审批记录"></baseTitle> <baseTitle title="审批记录"></baseTitle>
<div class="diagram"> <div class="diagram">
<div class="base-title">流程图</div> <div class="base-title">流程图</div>
@@ -39,8 +47,9 @@
/> />
</div> </div>
</div> </div>
<el-empty :image-size="100" description="暂无审批记录" v-if="processDiagramViewer&& !opentionData?.operationList&&!changeDiagram"/> <el-empty :image-size="100" description="暂无审批记录"
<!-- <process-diagram-viewer mode="view" v-if="processDiagramViewer&&changeDiagram"/>--> v-if="processDiagramViewer&& !opentionData?.operationList&&!changeDiagram"/>
<!-- <process-diagram-viewer mode="view" v-if="processDiagramViewer&&changeDiagram"/>-->
<div class="process"> <div class="process">
<operation-render <operation-render
v-if="processDiagramViewer&& opentionData?.operationList && opentionData?.operationList.length > 0&&!changeDiagram" v-if="processDiagramViewer&& opentionData?.operationList && opentionData?.operationList.length > 0&&!changeDiagram"
@@ -54,7 +63,8 @@
<el-button color="#DED0B2" v-else @click="handleResubmit">重新提交</el-button> <el-button color="#DED0B2" v-else @click="handleResubmit">重新提交</el-button>
<el-button @click="handleBack">返回</el-button> <el-button @click="handleBack">返回</el-button>
</div> </div>
<file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl" <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName"
:fileUrl="filePreviewParam.fileUrl"
:fileType="filePreviewParam.fileType"/> :fileType="filePreviewParam.fileType"/>
</div> </div>
</template> </template>
@@ -63,7 +73,7 @@
import OperationRender from '@/views/workflow/common/OperationRender.vue' import OperationRender from '@/views/workflow/common/OperationRender.vue'
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'; import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue';
import {ElNotification} from "element-plus"; import {ElNotification} from "element-plus";
import {addFund, resubmitFund, getFundDetail,getFundDetailProcess, getFundProcess} from "@/api/special-fund"; import {addFund, resubmitFund, getFundDetail, getFundDetailProcess, getFundProcess} from "@/api/special-fund";
import {useRouter} from "vue-router"; import {useRouter} from "vue-router";
import {useTagsView} from '@/stores/tagsview.js' import {useTagsView} from '@/stores/tagsview.js'
import {useProcessStore} from '@/stores/processStore.js'; import {useProcessStore} from '@/stores/processStore.js';
@@ -100,7 +110,8 @@ const tableConfig = reactive({
label: '文件名', label: '文件名',
align: 'center', align: 'center',
showOverflowTooltip: false, showOverflowTooltip: false,
currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>) currentRender: ({row, index}) => (
<div style="color: #2a99ff;cursor: pointer;" onClick={() => clickToPreview(row)}>{row.originalFileName}</div>)
}, },
{ {
prop: 'tag', prop: 'tag',
@@ -133,9 +144,9 @@ const tableConfig = reactive({
}) })
const routerName = ref(router.currentRoute.value.name) const routerName = ref(router.currentRoute.value.name)
const rules = reactive({ const rules = reactive({
name: [{required: true, message: '请输入专项资金名称', trigger: 'blur'}], name: [{required: true, message: '请输入专项资金名称', trigger: ['blur', 'change']}],
fundAmount: [{required: true, message: '请输入金额', trigger: 'blur'}], fundAmount: [{required: true, message: '请输入金额', trigger: ['blur', 'change']}],
introduce: [{required: true, message: '请输入介绍', trigger: 'blur'}], introduce: [{required: true, message: '请输入专项资金情况说明', trigger: ['blur', 'change']}],
}) })
const filePreviewParam = ref({ const filePreviewParam = ref({
@@ -144,14 +155,14 @@ const filePreviewParam = ref({
fileType: 'pdf' fileType: 'pdf'
}) })
const filePreviewShow = ref(false) const filePreviewShow = ref(false)
const clickToPreview=(row)=>{ const clickToPreview = (row) => {
filePreviewShow.value = false filePreviewShow.value = false
filePreviewParam.value = { filePreviewParam.value = {
fileUrl: row.url, fileUrl: row.url,
fileName: row.originalFileName, fileName: row.originalFileName,
fileType: row.fileType fileType: row.fileType
} }
nextTick(()=>{ nextTick(() => {
filePreviewShow.value = true filePreviewShow.value = true
}) })
} }
@@ -322,8 +333,34 @@ onMounted(async () => {
:deep(.el-table--fit ) { :deep(.el-table--fit ) {
height: 300px !important; height: 300px !important;
} }
.add-block{
padding: 0 30px 30px 15px; .add-block {
padding: 0 40px;
}
:deep(.el-input-number) {
width: 88%;
.el-input__wrapper{
padding: 1px 11px!important;
}
.el-input__inner {
text-align: left;
}
}
:deep(.el-table__header) {
.is-leaf:first-child {
.cell {
margin-left: -20px !important;
}
}
}
:deep(.el-table__body) {
.el-table__cell:first-child {
.cell {
margin-left: -10px !important;
}
}
} }
</style> </style>