You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

600 lines
21 KiB

<template>
<div style="padding: 0 20px;">
<lx-header icon="md-apps" text="预算进展情况" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<div slot="content"></div>
<slot>
<span style="padding: 0 6px;word-break: keep-all;">年份</span>
<span>
<DatePicker :value="select.year" placeholder="请选择年份" type="year" placement="bottom-start" style="width: 160px"
@on-change="(e)=>select.year = e"></DatePicker>
</span>
<span style="padding: 0 6px;word-break: keep-all;">预算类型</span>
<span>
<el-cascader
:options="types"
:props="{
checkStrictly: false,
label: 'name',
value: 'id',
}"
:value="select.type"
clearable
size="small"
style="width: 160px"
@change="(e) => (select.type = e[e.length - 1] || '')"
/>
</span>
<span style="padding: 0 6px;">
科室
</span>
<span>
<el-select placeholder="科室选择" clearable size="small" v-model="select.department" style="width: 160px;">
<el-option v-for="item in departments" :label="item.name" :value="item.id" :key="item.id">
</el-option>
</el-select>
</span>
<Button type="primary" style="margin-left: 10px" ghost
@click="select = {pageIndex:1,year:'',type:'',department:''}">重置</Button>
<Button type="primary" style="margin-left: 10px" @click="getPlanProgress"></Button>
</slot>
</lx-header>
<xy-table ref="xyTable" :objectSpanMethod="objectSpanMethod" :table-item="table" :list="list" :show-summary="true" :summary-method="summary">
<template v-slot:btns>
<div></div>
</template>
</xy-table>
5 months ago
<!-- <div style="display: flex;justify-content: flex-end;">
<Page :total="total" :page-size="select.pageSize" show-elevator @on-change="pageChange" />
5 months ago
</div> -->
<!-- 查看-->
<detail ref="detailContract"></detail>
</div>
</template>
<script>
import {
getProgress
} from "@/api/budget/budget"
import {
listdeptNoAuth
} from "@/api/system/department";
import {
getparameter, getparameterTree
} from '@/api/system/dictionary'
import {
moneyFormatter
} from "@/utils";
import {
mergeTableRow
} from "@/utils/mergeTableRow"
import { getFundLog,getPlanActLinks } from "@/api/paymentRegistration/fundLog"
import detail from "@/views/contract/components/detailContract";
import { getToken } from '@/utils/auth'
export default {
components:{
detail
},
data() {
return {
types: [], //预算类型
departments: [],
select: {
5 months ago
pageSize:999,
pageIndex: 1,
year: '',
type: '',
department: '',
// sort_name:'id',
},
rateTotal: '0%',
moneyTotal: 0,
updateMoneyTotal: 0,
useMoneyTotal: 0,
total: 0,
list: [],
table: [{
label: "隶属项目",
prop: 'pid_info_name',
width: 200,
align: 'left',
sortable: false,
9 months ago
fixed: this.$store.getters.device === 'mobile'?false:'left'
},
{
prop: 'name',
label: '项目名称',
width: 200,
align: 'left',
9 months ago
fixed: this.$store.getters.device === 'mobile'?false:'left'
},
{
prop: 'type_detail.value',
label: '预算类型',
width: 120,
},
{
prop: 'year',
label: '所属年份',
width: 160
},
{
prop: 'plan_department.name',
label: "相关科室",
width: 180
},
{
prop: 'content',
label: '描述',
align: 'left',
minWidth: 300
},
{
prop: 'money',
width: 180,
label: '年初预算金额(元)',
align: 'right'
},
{
prop: 'update_money',
width: 180,
label: '调整后预算金额(元)',
align: 'right'
},
{
prop: 'use_money_total',
label: '使用金额',
align: 'right',
width: 180
},
{
prop: 'rate',
label: '进展率',
width: 200,
9 months ago
fixed: this.$store.getters.device === 'mobile'?false:'right',
customFn: (row) => {
let m2 = row.update_money;
let m1 = row.money;
let m3 = row.use_money_total;
let per = 0;
if (m2 != 0) {
per = ((m3 / m2) * 100).toFixed(2);
} else if (m1 != 0) {
per = ((m3 / m1) * 100).toFixed(2);
}
return ( < div >
<el-progress percentage = {
Number(per)
} > </el-progress> </div >
)
}
},
9 months ago
{
prop: "show",
label: "支出",
width: 66,
fixed: "right",
customFn: row => (
<el-popover width="800"
trigger="click"
placement="left-end"
on={{
['show']:async _ => {
try {
this.isLoadingFundLogTable = true
const res = await getPlanActLinks({
9 months ago
page: 1,
page_size: 999,
plan_id: row.id,
9 months ago
},true)
this.fundLogs = res.list.data
9 months ago
this.isLoadingFundLogTable = false
} catch (e) {
this.isLoadingFundLogTable = false
}
}
}}>
<Button style={this.fundLogs.length>0?'display:block':'display:none'} size="small" type="primary"
on={{
['click']:async _ => {
try {
this.exportDetail(row.id)
} catch (e) {
}
}
}}
>导出</Button>
9 months ago
<Table loading={this.isLoadingFundLogTable}
size="small"
data={this.fundLogs}
show-summary
summary-method={this.handleSummary}
9 months ago
columns={[
{
title: "支出类型",
minWidth: 200,
key: "model_type_text",
9 months ago
fixed: "left",
align: "left",
},
{
title: "支出金额(元)",
prop: "use_money",
9 months ago
align: "right",
width: 170,
render:(h, { row }) => h('span',Number(row.use_money)
9 months ago
.toFixed(2)
.replace(/(\d)(?=(\d{3})+\.)/g, "$1,"))
},
{
title: "事由/备注",
width: 200,
key: "model.reason",
9 months ago
align: "left",
render:(h, { row }) => {
if (row.model.reason) {
return h('div',row.model.reason)
}
if (row.model.remark) {
return h('div',row.model.remark)
9 months ago
}
}
},
9 months ago
{
title: "关联合同",
9 months ago
width: 120,
key: "model.contract_id",
align: "center",
9 months ago
render:(h, { row }) => {
if(row.model.contract_id){
return h('div',{
style: {
color: '#409EFF', // 蓝色文字
cursor: 'pointer', // 手型光标
textDecoration: 'underline', // 下划线
fontWeight: 'bold', // 加粗
padding: '4px 8px', // 内边距
borderRadius: '4px', // 圆角
},
on: {
click: () => {
console.log('查看点击事件触发', row.model.contract_id);
this.$refs['detailContract'].getDetail(row.model.contract_id),
this.$refs['detailContract'].isShowDetail = true
}
}
},'查看')
}
9 months ago
}
},
// <Button
// class="slot-btns-item"
// size="small"
// type="primary"
// @click="
// $refs['detailContract'].getDetail(scope.row.id),
// ($refs['detailContract'].isShowDetail = true)
// "
// >
// 查看
// </Button>
// {
// title: "实际付款金额(元)",
// key: "act_money",
// align: "right",
// width: 170,
// render:(h, { row }) => h('span',Number(row.act_money)
// .toFixed(2)
// .replace(/(\d)(?=(\d{3})+\.)/g, "$1,"))
// },
// {
// title: "预算计划",
// width: 320,
// align: "left",
// render:(h, { row }) => {
// if (row.act_plan_link.length > 0) {
// return h('div',row.act_plan_link.map(item => (
// <div> {" "}
// [{item.plan.year}] {(item.plan && item.plan.pid_info) ? item.plan.pid_info.name: ''} - {item.plan.name} <br /> [使用金额]{" "}
// {item.use_money}元{" "}</div>
// )))
// }
// }
// },
// {
// title: "款项类型",
// key: "type",
// width: 120,
// },
// {
// key: "status",
// title: "状态",
// width: 100,
// render:(h, { row }) => h('span',row.status ? "已审核" : "待审核")
// },
// {
// key: 'flow_status',
// title: '流程状态',
// width: 100,
// render:(h, { row }) => {
// let map = new Map([
// [1,'待申请'],
// [2,'流转中'],
// [3,'已完成']
// ])
// return h('span',map.get(row.flow_status))
// }
// },
// {
// title: "次数",
// key: "pay_count",
// width: 95,
// render:(h , { row }) => {
// let val = row.pay_count + 1
// return h('span',val)
// }
// },
// {
// title: "最后一笔",
// key: "is_end",
// width: 125,
// render: (h, { row }) => h('span',row.is_end ? "是" : "否")
// },
// {
// title: "经办人",
// minWidth: 120,
// key: "admin.name",
// align: "center",
// render: (h, { row }) => h('span',row.admin?.name)
// },
// {
// title: "业务科室",
// minWidth: 140,
// key: "department.name",
// align: "center",
// render: (h, { row }) => h('span',row.department?.name)
// },
// {
// title: "备注",
// minWidth: 360,
// key: "remark",
// align: "left",
// },
9 months ago
{
title: "创建时间",
9 months ago
key: "created_at",
width: 160,
render: (h, { row }) => h('span',this.$moment(row.created_at).format('YYYY-MM-DD'))
},
]}></Table>
<Button slot="reference" size="small" type="primary">查看</Button>
</el-popover>
)
}
],
isLoadingFundLogTable: false,
fundLogs: [],
export_fields:{
'model_type_text':'支出类型',
'use_money':'支出金额',
'model.reason':'事由/备注',
'created_at':'创建时间'
}
}
},
methods: {
exportDetail(id){
let export_fields = "export_fields[model_type_text]=支出类型&export_fields[use_money]=支出金额&export_fields[model.reason]=事由/备注&export_fields[created_at]=创建时间"
window.open(`${process.env.VUE_APP_BASE_API}/api/ht/plan/plan-act-links?token=${getToken()}&is_export=1&page=1&page_size=999&plan_id=${id}&${export_fields}`,"_blank")
},
//合并行
objectSpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
const span = column['property'] + '-span'
if (row[span]) {
return row[span]
}
},
toper(m2, m1, m3) {
let per = 0;
if (m2 != 0) {
per = ((m3 / m2) * 100).toFixed(2);
} else if (m1 != 0) {
per = ((m3 / m1) * 100).toFixed(2);
}
return per;
},
handleSummary({ columns, data }){
console.log("data",data)
const sums = {};
columns.forEach((column, index) => {
const key = column.key;
if (index === 0) {
sums[key] = {
key,
value: '合计'
};
return;
}
const values = data.map(item => Number(item['use_money']));
if (!values.every(value => isNaN(value))) {
const v = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
if(index===1){
sums[key] = {
key,
value: v + ' 元'
};
}else{
sums[key] = {
key,
value: ''
};
}
} else {
sums[key] = {
key,
value: ''
};
}
});
return sums
},
//统计
summary(param) {
this.$nextTick(() => {
this.$refs['xyTable'].$children[0].doLayout()
})
const {
columns,
data
} = param
const sums = []
columns.map((column, index) => {
if (index === 0) {
sums[index] = '总计'
return
}
if (column.property === 'rate') {
sums[index] = this.rateTotal + "%";
return
}
if (column.property === 'use_money_total') {
sums[index] = moneyFormatter(this.useMoneyTotal)
}
if (column.property === 'money') {
sums[index] = moneyFormatter(this.moneyTotal)
}
if (column.property === 'update_money') {
sums[index] = moneyFormatter(this.updateMoneyTotal)
}
})
return sums
},
async getType() {
const res = await getparameterTree({
id: 3
});
const dataHandler = (data) => {
data.forEach(i => {
if (i.hasOwnProperty('detail')) {
i.children = i.detail.map(j => {
j.name = j.value
return j;
})
} else {
dataHandler(i['children'])
}
})
return data;
}
this.types = dataHandler(res?.children) || []
},
//翻页
pageChange(e) {
this.select.pageIndex = e
this.getPlanProgress()
},
//获取科室
getDepartment() {
listdeptNoAuth().then(res => {
11 months ago
this.departments = res.data
})
},
async getPlanProgress() {
const res = await getProgress({
page_size: this.select.pageSize,
page: this.select.pageIndex,
year: this.select.year,
type: this.select.type,
plan_department_id: this.select.department,
top_pid: 1,
// sort_name:this.select.sort_name
})
for (var m of res.list.data) {
m.pid_info_name = m.pid_info?.name
}
this.list =
mergeTableRow({
data: res.list.data,
mergeColNames: ["pid_info_name"], // 需要合并的列,默认合并列相同的数据
firstMergeColNames: ["pid_info_name"], // 受影响的列只合并以firstMerge为首的同类型数据
firstMerge: 'pid_info_name' // 以哪列为基础进行合并,一般为第一列
})
this.total = res.list.total
this.useMoneyTotal = res.use_money_total
this.moneyTotal = res.money;
this.updateMoneyTotal = res.update_money;
this.rateTotal = this.toper(this.updateMoneyTotal, this.moneyTotal, this.useMoneyTotal)
console.log(res)
},
customParamsSerializer(params) {
let result = '';
for (let key in params) {
if (params.hasOwnProperty(key)) {
if (Array.isArray(params[key])) {
params[key].forEach((item,index) => {
if(item.key){
result += `${key}[${index}][key]=${item.key}&${key}[${index}][op]=${item.op}&${key}[${index}][value]=${item.value}&`;
}else{
result +=`${key}[${index}]=${item}&`
}
});
} else {
result += `${key}=${params[key]}&`;
}
}
}
return result.slice(0, -1);
}
},
created() {
this.select.year = this.$moment().format('YYYY');
},
async mounted() {
await this.getType()
await this.getDepartment()
this.select.department = Number(this.$route.query.departmentId) || ''
this.select.type = Number(this.$route.query.typeId) || ''
await this.getPlanProgress()
}
}
</script>
<style scoped lang="scss">
</style>