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

feat(expense-management): 为成本明细页面添加年份和月份筛选功能

Browse Source 
- 在成本明细、支出明细和分摊明细页面的搜索表单中添加了年份和月份选择器
- 优化了搜索表单的样式和布局- 注释掉了部分未使用的代码
This commit is contained in:
dj
2025-08-19 16:14:23 +08:00
parent 7735d20021
commit d20b968307
3 changed files with 126 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/views/expense-management/cost-detail/index.vue
View File

@@ -1,9 +1,10 @@
<template>
<fvSearchForm :searchConfig="searchConfig" @search="search" style="margin-left: 15px"></fvSearchForm>
<div style="float: left">
<import-cost-excel @success="importTheExpenseLedger"/>
<import-cost-excel @success="importTheExpenseLedger"/>
</div>
<fvTable ref="tableIns" class="tablte" :tableConfig="tableConfig" @headBtnClick="headBtnClick" :changeExportPosition="true">
<fvTable ref="tableIns" class="tablte" :tableConfig="tableConfig" @headBtnClick="headBtnClick"
:changeExportPosition="true">
<template #empty>
<el-empty description="暂无数据"/>
</template>
@@ -21,10 +22,36 @@ import {
getMasterProjectNameOption,
getSubprojectNameOption
} from "@/api/project-demand/summary/index.js";
const router = useRouter()
const route = useRoute()
const searchConfig = ref([
// {
// label: '年份',
// prop: 'rdYear',
// component: 'el-date-picker',
// props: {
// placeholder: '请选择年份',
// clearable: true,
// type: 'year',
// format: 'YYYY',
// valueFormat: 'YYYY',
// },
// colProps: {}
// },
// {
// label: '月份',
// prop: 'rdMonth',
// component: 'el-date-picker',
// props: {
// placeholder: '请选择月份',
// clearable: true,
// type: 'month',
// format: 'MM',
// valueFormat: 'MM',
// },
// colProps: {}
// },
{
label: '主项目',
prop: 'masterProjectName',
@@ -35,12 +62,12 @@ const searchConfig = ref([
filterable: true,
options: [],
remote: true,
remoteMethod:async (val)=>{
console.log('val',val)
searchConfig.value.find(item => item.prop == 'masterProjectName').props.options= JSON.parse(localStorage.getItem("masterProjectNameOption"))
remoteMethod: async (val) => {
console.log('val', val)
searchConfig.value.find(item => item.prop == 'masterProjectName').props.options = JSON.parse(localStorage.getItem("masterProjectNameOption"))
if(val){
await getMasterProjectName( val)
if (val) {
await getMasterProjectName(val)
}
}
@@ -56,11 +83,11 @@ const searchConfig = ref([
filterable: true,
options: [],
remote: true,
remoteMethod:async (val)=>{
searchConfig.value.find(item => item.prop == 'subProjectName').props.options= JSON.parse(localStorage.getItem("subprojectNameOption"))
remoteMethod: async (val) => {
searchConfig.value.find(item => item.prop == 'subProjectName').props.options = JSON.parse(localStorage.getItem("subprojectNameOption"))
if(val){
await getSubprojectName(val)
if (val) {
await getSubprojectName(val)
}
}
},
@@ -100,19 +127,7 @@ const searchConfig = ref([
// },
// colProps: {}
// },
// {
// label: '归档时间',
// prop: 'filingTime',
// component: 'el-date-picker',
// props: {
// placeholder: '请选择归档时间',
// clearable: true,
// type:'date',
// format: 'YYYY-MM-DD HH:mm',
// valueFormat:'YYYY-MM-DD HH:mm',
// },
// colProps: {}
// },
])
const tableIns = ref()
const tableConfig = reactive({
@@ -221,44 +236,44 @@ const tableConfig = reactive({
{name: '模板下载', key: 'down', color: '#DED0B2'},
// {name: '导入', key: 'import', color: '#DED0B2'}
],
export:{
open :true,
fileName:`研发费用明细表`
export: {
open: true,
fileName: `研发费用明细表`
}
})
const getMasterProjectName =async (val) => {
const res=await getExpenseMasterProjectNameOption(val)
if(res.code==1000){
let optionObj={}
const getMasterProjectName = async (val) => {
const res = await getExpenseMasterProjectNameOption(val)
if (res.code == 1000) {
let optionObj = {}
let optionsMap = new Map();
res.data.forEach(item=>{
optionObj={
value:item.label,
label:item.label
res.data.forEach(item => {
optionObj = {
value: item.label,
label: item.label
}
optionsMap.set(optionObj.value, optionObj);
})
if(!val){
if (!val) {
localStorage.setItem('masterProjectNameOption', JSON.stringify(Array.from(optionsMap.values())))
}
// 将 Map 转换为数组
searchConfig.value.find(item => item.prop == 'masterProjectName').props.options = Array.from(optionsMap.values())
}
}
const getSubprojectName =async (val) => {
const res=await getExpenseSubprojectNameOption(val)
if(res.code==1000){
let optionObj={}
const getSubprojectName = async (val) => {
const res = await getExpenseSubprojectNameOption(val)
if (res.code == 1000) {
let optionObj = {}
let optionsMap = new Map();
res.data.forEach(item=>{
optionObj={
value:item.label,
label:item.label
res.data.forEach(item => {
optionObj = {
value: item.label,
label: item.label
}
optionsMap.set(optionObj.value, optionObj);
})
if(!val){
if (!val) {
localStorage.setItem('subprojectNameOption', JSON.stringify(Array.from(optionsMap.values())))
}
// 将 Map 转换为数组
@@ -292,23 +307,23 @@ const exportTable = () => {
exportExcel($table, (5 + (Object.keys(tableData.value[0]).length - 5) * 5), "四川省国有资产经营投资管理有限责任公司科技创新项目人工成本分摊明细表", 2)
}
//导入模板下载
const handleImportTemplateDownload=()=>{
const handleImportTemplateDownload = () => {
costTemplateDownload().then(res => {
let link = document.createElement('a')
try {
let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
let _fileName = "研发费用明细表模板.xlsx"//文件名，中文无法解析的时候会显示 _(下划线),生产环境获取不到
link.style.display='none';
link.style.display = 'none';
// 兼容不同浏览器的URL对象
const url = window.URL || window.webkitURL || window.moxURL;
link.href=url.createObjectURL(blob);
link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_')+1))
link.href = url.createObjectURL(blob);
link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_') + 1))
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
url.revokeObjectURL(link.href);//销毁url对象
}catch (e) {
console.log('下载的文件出错',e)
} catch (e) {
console.log('下载的文件出错', e)
}
})
}
@@ -317,9 +332,10 @@ const importTheExpenseLedger = () => {
}
</script>
<style scoped lang="scss">
:deep(.el-form-item__label-wrap){
margin-left: 0!important;
:deep(.el-form-item__label-wrap) {
margin-left: 0 !important;
}
:deep(.el-table__header) {
.is-leaf:first-child {
.cell {
@@ -335,7 +351,8 @@ const importTheExpenseLedger = () => {
}
}
}
:deep(.el-date-editor--month){
:deep(.el-date-editor--month) {
width: 100%;
}
</style>

27
src/views/expense-management/expend-detail/index.vue
View File

@@ -20,7 +20,32 @@ const router = useRouter()
const route = useRoute()
const searchConfig = ref(
[
// {
// label: '年份',
// prop: 'paymentYear',
// component: 'el-date-picker',
// props: {
// placeholder: '请选择年份',
// clearable: true,
// type: 'year',
// format: 'YYYY',
// valueFormat: 'YYYY',
// },
// colProps: {}
// },
// {
// label: '月份',
// prop: 'paymentMonth',
// component: 'el-date-picker',
// props: {
// placeholder: '请选择月份',
// clearable: true,
// type: 'month',
// format: 'MM',
// valueFormat: 'MM',
// },
// colProps: {}
// },
{
label: '主项目',
prop: 'masterProjectName',

29
src/views/expense-management/share-detail/index.vue
View File

@@ -2,7 +2,7 @@
<fvSearchForm :searchConfig="searchConfig" @search="search" style="margin-left: 16px"></fvSearchForm>
<!-- <el-button color="#DED0B2" style="float: left;margin: 0 10px 10px 0" @click="exportTable">导出</el-button>-->
<fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick" style="margin-top: 15px" @selectionChange="selectionChange">
<fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick" @selectionChange="selectionChange">
<template #empty>
<el-empty description="暂无数据"/>
</template>
@@ -24,7 +24,32 @@ import {
const router = useRouter()
const route = useRoute()
const searchConfig = ref([
// {
// label: '年份',
// prop: 'paymentYear',
// component: 'el-date-picker',
// props: {
// placeholder: '请选择年份',
// clearable: true,
// type: 'year',
// format: 'YYYY',
// valueFormat: 'YYYY',
// },
// colProps: {}
// },
// {
// label: '月份',
// prop: 'paymentMonth',
// component: 'el-date-picker',
// props: {
// placeholder: '请选择月份',
// clearable: true,
// type: 'month',
// format: 'MM',
// valueFormat: 'MM',
// },
// colProps: {}
// },
{
label: '主项目',
prop: 'masterProjectName',