Files
mosr-web/src/views/expense-management/share-detail/index.vue

199 lines
4.4 KiB
Vue

<template>
<fvSearchForm :searchConfig="searchConfig" @search="search" style="margin-left: 16px"></fvSearchForm>
<fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick">
<template #empty>
<el-empty description="暂无数据"/>
</template>
</fvTable>
</template>
<script setup lang="jsx">
import fvSelect from '@/fvcomponents/fvSelect/index.vue'
import {toThousands} from '@/utils/changePrice.js'
import { getSubCompOpt } from '@/api/user/user.js';
import {reactive, ref} from "vue";
const router = useRouter()
const route = useRoute()
const searchConfig = reactive([
{
label: '分摊名称',
prop: 'shareName',
component: 'el-input',
props: {
placeholder: '请输入分摊名称查询',
clearable: true,
filterable: true,
checkStrictly: true
}
},
{
label: '分摊月份',
prop: 'apportionmentMonth',
component: 'el-date-picker',
props: {
placeholder: '请选择分摊月份',
clearable: true,
type:'month',
format: 'YYYY-MM',
valueFormat:"YYYY-MM"
},
colProps: {}
},
// {
// label: '状态',
// prop: 'state',
// component: shallowRef(fvSelect),
// props: {
// placeholder: '请选择状态',
// clearable: true,
// cacheKey: 'special_fund'
// }
// },
])
const tableIns = ref()
const tableConfig = reactive({
columns: [
// {
// prop: 'name',
// type: 'index',
// label: '序号',
// align: 'center',
// width:85,
// index: index => {
// return (tableIns.value.getQuery().pageNum - 1) * tableIns.value.getQuery().pageSize + index + 1
// }
// },
{
prop: 'affiliatedCompany',
label: '支出年份',
align: 'center'
},
{
prop: 'projectName',
label: '月份',
align: 'center'
},
{
prop: 'projectCost',
label: '主项目',
align: 'center',
width: 120,
showOverflowTooltip: false,
currentRender: ({row, index}) => {
if (row.projectCost !== null&&row.projectCost !== null&&row.projectCost!==undefined) {
return (<Tag dictType={'project_cost'} value={row.projectCost}/>)
} else {
return '--'
}
}
},
{
prop: 'time',
label: '子项目',
align: 'center',
width: 120,
},
{
prop: 'researchStage',
label: '研发人员',
align: 'center',
width: 120,
showOverflowTooltip: false,
currentRender: ({row, index}) => {
if (row.researchStage&&row.researchStage !== null&&row.researchStage!==undefined) {
return (<Tag dictType={'research_stage'} value={row.researchStage}/>)
} else {
return '--'
}
}
},
{
prop: 'digest',
label: '人员性质',
align: 'center'
},
{
prop: 'digest',
label: '当月研发工时(天)',
align: 'center',
currentRender:({row})=>{
return <span>{toThousands(row.afterTax)}</span>
}
},
{
prop: 'digest',
label: '当月总工时(天)',
align: 'center',
showOverflowTooltip: false,
currentRender: ({row, index}) => {
if (row.source&&row.source !== null&&row.source!==undefined) {
return (<Tag dictType={'ledger_source'} value={row.source}/>)
} else {
return '--'
}
}
},
{
prop: 'digest',
label: '人工成本分摊(元)',
align: 'center',
},
],
api: '',
params: {},
btns: [
{name: '添加分摊', key: 'add', color: '#DED0B2'}
],
export:{
open :false,
}
})
const search = (val) => {
tableConfig.params = {...val}
tableIns.value.refresh()
}
const headBtnClick = (key) => {
switch (key) {
case 'add':
handleAdd()
break;
}
}
const handleAdd = () => {
router.push({
name: 'Sharedetail/add',
query: {}
})
}
const init = async () => {
const res = await getSubCompOpt()
searchConfig.value.find(item=>item.prop == 'affiliatedCompanyIds').props.data = res.data
}
// init()
</script>
<style scoped lang="scss">
:deep(.el-table__header) {
.is-leaf:first-child {
.cell {
margin-left: -25px !important;
}
}
}
:deep(.el-table__body) {
.el-table__cell:first-child {
.cell {
margin-left: -13px !important;
}
}
}
:deep(.el-date-editor--month){
width: 100%;
}
</style>