|
|
<template>
|
|
|
<div>
|
|
|
<Modal fullscreen class-name="oa-modal" footer-hide title="科室资金执行率明细" :mask-closable="false" v-model="isShowModal">
|
|
|
<div class="department-progress-detail">
|
|
|
<el-container>
|
|
|
<el-main>
|
|
|
<!-- 科室标题 -->
|
|
|
<div class="department-title">
|
|
|
<h3>{{row?(row.plan_department?row.plan_department.name:''):''}} - 资金执行率明细</h3>
|
|
|
</div>
|
|
|
|
|
|
<!-- 执行率统计卡片 -->
|
|
|
<el-row :gutter="20" class="mb-4">
|
|
|
<el-col :span="8">
|
|
|
<el-card class="summary-card" shadow="hover">
|
|
|
<div class="card-title">当前执行率</div>
|
|
|
<div class="execution-rate">{{ getCompletionRate(row.rate) }}%</div>
|
|
|
<div class="card-desc">已财务确认的资金比例</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-card class="summary-card" shadow="hover">
|
|
|
<div class="card-title">预计执行率</div>
|
|
|
<div class="execution-rate">{{ getCompletionRate(row.rate_end) }}%</div>
|
|
|
<div class="card-desc">全部付款确认后预计的执行率</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-card class="summary-card" shadow="hover">
|
|
|
<div class="card-title">预算金额</div>
|
|
|
<div class="execution-rate">{{ formatToWan(row.money_total) }}</div>
|
|
|
<div class="card-desc">科室预算金额</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<!-- 已执行项目表格 -->
|
|
|
<el-card class="table-container mb-4">
|
|
|
<div class="section-title">已执行项目（财务付款确认）
|
|
|
</div>
|
|
|
<xy-table ref="xyTable" :list="endList" :table-item="table" :height='300'>
|
|
|
<template v-slot:status>
|
|
|
<el-table-column header-align="center" label="当前状态" width="120">
|
|
|
<template slot-scope="scope">
|
|
|
<el-tag type='success'>已完成</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</template>
|
|
|
<template v-slot:btns>
|
|
|
<el-table-column :fixed="$store.getters.device === 'mobile'?false:'right'" header-align="center"
|
|
|
label="操作" width="120">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button type="primary" size="small" @click="getDetail(scope.row,'end')">详情</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</template>
|
|
|
</xy-table>
|
|
|
<div style="display: flex; justify-content: flex-end">
|
|
|
<Page :total="endTotal" show-elevator @on-change="endPageChange" />
|
|
|
</div>
|
|
|
</el-card>
|
|
|
|
|
|
<!-- 未执行完项目表格 -->
|
|
|
<el-card class="table-container">
|
|
|
<div class="section-title">未执行完项目（流程中/预算流转中）
|
|
|
</div>
|
|
|
<xy-table ref="xyTable" :list="partList" :table-item="table" :height='300'>
|
|
|
<template v-slot:status>
|
|
|
<el-table-column header-align="center" label="当前状态" width="120" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<el-tag v-if="scope.row.funds_count>0" type='warning'>部分支付中</el-tag>
|
|
|
<el-tag v-else type='warning'>oa流程中</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</template>
|
|
|
<template v-slot:btns>
|
|
|
<el-table-column :fixed="$store.getters.device === 'mobile'?false:'right'" header-align="center"
|
|
|
label="操作" width="120" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button type="primary" size="small" @click="getDetail(scope.row,'part')">详情</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</template>
|
|
|
</xy-table>
|
|
|
<div style="display: flex; justify-content: flex-end">
|
|
|
<Page :total="partTotal" show-elevator @on-change="partPageChange" />
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-main>
|
|
|
</el-container>
|
|
|
</div>
|
|
|
|
|
|
</Modal>
|
|
|
<detail ref="detail"></detail>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
endIndex,
|
|
|
partIndex,
|
|
|
} from "@/api/departmentProgress"
|
|
|
import detail from "../components/detail.vue"
|
|
|
export default {
|
|
|
name: 'DepartmentProgressDetail',
|
|
|
components: {
|
|
|
detail
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
isShowModal: false,
|
|
|
row: {},
|
|
|
endTotal: 0,
|
|
|
partTotal: 0,
|
|
|
endSelect: {
|
|
|
page: 1,
|
|
|
page_size: 10,
|
|
|
},
|
|
|
partSelect: {
|
|
|
page: 1,
|
|
|
page_size: 10,
|
|
|
},
|
|
|
endList: [],
|
|
|
partList: [],
|
|
|
table: [{
|
|
|
prop: 'name',
|
|
|
label: '项目名称',
|
|
|
// fixed: 'left',
|
|
|
// width: 240,
|
|
|
align: 'left'
|
|
|
}, {
|
|
|
prop: 'department.name',
|
|
|
label: '科室',
|
|
|
width: 240,
|
|
|
}, {
|
|
|
prop: 'admin.name',
|
|
|
label: '经办人',
|
|
|
width: 100,
|
|
|
}, {
|
|
|
prop: 'money_total',
|
|
|
label: '预算金额',
|
|
|
width: 100,
|
|
|
formatter(v1, v2, value){
|
|
|
return value ? value: '0.00'
|
|
|
}
|
|
|
}, {
|
|
|
prop: 'funds_count',
|
|
|
label: '发起支付笔数',
|
|
|
width: 100,
|
|
|
}, {
|
|
|
prop: 'contract_plan_act_sum',
|
|
|
label: '已确认付款金额',
|
|
|
width: 120,
|
|
|
formatter(v1, v2, value){
|
|
|
return value ? value: '0.00'
|
|
|
}
|
|
|
}, {
|
|
|
prop: 'status',
|
|
|
label: '当前状态',
|
|
|
width: 120,
|
|
|
}]
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
isShowModal(newval) {
|
|
|
if (newval) {
|
|
|
|
|
|
} else {
|
|
|
this.row = {}
|
|
|
}
|
|
|
},
|
|
|
row(newval) {
|
|
|
if (newval) {
|
|
|
this.getEndIndex(newval.plan_department_id)
|
|
|
this.getPartIndex(newval.plan_department_id)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
partPageChange(e) {
|
|
|
this.partSelect.page = e
|
|
|
this.getPartIndex(this.row.plan_department_id)
|
|
|
},
|
|
|
endPageChange(e) {
|
|
|
this.endSelect.page = e
|
|
|
this.getEndIndex(this.row.plan_department_id)
|
|
|
},
|
|
|
async getEndIndex(id) {
|
|
|
const res = await endIndex({
|
|
|
department_id: id,
|
|
|
page: this.endSelect.page,
|
|
|
page_size: this.endSelect.page_size
|
|
|
})
|
|
|
this.endList = res.list.data
|
|
|
this.endTotal = res.list.total
|
|
|
},
|
|
|
async getPartIndex(id) {
|
|
|
const res = await partIndex({
|
|
|
department_id: id,
|
|
|
page: this.partSelect.page,
|
|
|
page_size: this.partSelect.page_size
|
|
|
})
|
|
|
this.partList = res.list.data
|
|
|
this.partTotal = res.list.total
|
|
|
},
|
|
|
getDetail(row,type) {
|
|
|
this.$refs.detail.type = type
|
|
|
this.$refs.detail.detailRow = row
|
|
|
this.$refs.detail.detailDrawerVisible = true
|
|
|
},
|
|
|
getCompletionRate(dept) {
|
|
|
return dept ? Number(dept.toFixed(2)) : 0
|
|
|
},
|
|
|
formatToWan(num) {
|
|
|
if (num === null || num === undefined) return '0元';
|
|
|
num = Number(num);
|
|
|
if (isNaN(num)) return '0元';
|
|
|
|
|
|
if (Math.abs(num) < 10000) {
|
|
|
return num.toString() + '元'; // 小于1万直接返回原数值
|
|
|
} else {
|
|
|
return (num / 10000).toFixed(2) + '万元'; // 除以1万并保留两位小数
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
::v-deep .ivu-modal-body {
|
|
|
max-height: none !important;
|
|
|
}
|
|
|
|
|
|
.department-progress-detail {
|
|
|
min-height: 100vh;
|
|
|
background: #f4f6fa;
|
|
|
}
|
|
|
|
|
|
.header-bg {
|
|
|
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
|
|
|
color: white;
|
|
|
padding: 0;
|
|
|
height: 70px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.header-container {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
width: 100%;
|
|
|
padding: 0 30px;
|
|
|
}
|
|
|
|
|
|
.header-title {
|
|
|
font-size: 20px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.header-user {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.sidebar {
|
|
|
background-color: #f8f9fa;
|
|
|
min-height: calc(100vh - 70px);
|
|
|
border-right: 1px solid #dee2e6;
|
|
|
}
|
|
|
|
|
|
.department-title {
|
|
|
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
|
|
color: white;
|
|
|
padding: 15px;
|
|
|
border-radius: 10px;
|
|
|
margin-bottom: 20px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.action-buttons {
|
|
|
margin-bottom: 20px;
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
.summary-card {
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
color: white;
|
|
|
border-radius: 10px;
|
|
|
padding: 20px;
|
|
|
margin-bottom: 20px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.card-title {
|
|
|
font-size: 16px;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.execution-rate {
|
|
|
font-size: 32px;
|
|
|
font-weight: bold;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
.card-desc {
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
|
|
|
.section-title {
|
|
|
background-color: #f8f9fa;
|
|
|
padding: 15px;
|
|
|
margin: 20px 0 15px 0;
|
|
|
border-left: 4px solid #007bff;
|
|
|
border-radius: 5px;
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.table-container {
|
|
|
background: white;
|
|
|
border-radius: 10px;
|
|
|
padding: 20px;
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.detail-table {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
</style>
|
