|
|
<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>
|
|
|
|
|
|
<!-- <div style="display: flex;justify-content: flex-end;">
|
|
|
<Page :total="total" :page-size="select.pageSize" show-elevator @on-change="pageChange" />
|
|
|
</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: {
|
|
|
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,
|
|
|
fixed: this.$store.getters.device === 'mobile'?false:'left'
|
|
|
},
|
|
|
{
|
|
|
prop: 'name',
|
|
|
label: '项目名称',
|
|
|
width: 200,
|
|
|
align: 'left',
|
|
|
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,
|
|
|
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 >
|
|
|
)
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
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({
|
|
|
page: 1,
|
|
|
page_size: 999,
|
|
|
plan_id: row.id,
|
|
|
},true)
|
|
|
this.fundLogs = res.list.data
|
|
|
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>
|
|
|
<Table loading={this.isLoadingFundLogTable}
|
|
|
size="small"
|
|
|
data={this.fundLogs}
|
|
|
show-summary
|
|
|
summary-method={this.handleSummary}
|
|
|
columns={[
|
|
|
{
|
|
|
title: "支出类型",
|
|
|
minWidth: 200,
|
|
|
key: "model_type_text",
|
|
|
fixed: "left",
|
|
|
align: "left",
|
|
|
},
|
|
|
{
|
|
|
title: "支出金额(元)",
|
|
|
prop: "use_money",
|
|
|
align: "right",
|
|
|
width: 170,
|
|
|
render:(h, { row }) => h('span',Number(row.use_money)
|
|
|
.toFixed(2)
|
|
|
.replace(/(\d)(?=(\d{3})+\.)/g, "$1,"))
|
|
|
},
|
|
|
{
|
|
|
title: "事由/备注",
|
|
|
width: 200,
|
|
|
key: "model.reason",
|
|
|
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)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
{
|
|
|
title: "关联合同",
|
|
|
width: 120,
|
|
|
key: "model.contract_id",
|
|
|
align: "center",
|
|
|
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
|
|
|
}
|
|
|
}
|
|
|
},'查看')
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// <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",
|
|
|
// },
|
|
|
{
|
|
|
title: "创建时间",
|
|
|
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 => {
|
|
|
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>
|
