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.
cz-hjjc-ht/src/views/finance/paymentRegistrationList cop...

625 lines
17 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" />
<slot>
<div class="selects">
<div>
<span style="padding: 0 6px; word-break: keep-all">关键字</span>
<span>
<Input
v-model="keyword"
placeholder="请输入关键字"
style="width: 180px"
/>
</span>
</div>
<div>
<span style="padding: 0 6px; word-break: keep-all">部门</span>
<el-select v-model="select.department_id" style="width: 140px" size="small" clearable placeholder="部门选择">
<el-option v-for="dept in departments" :key="dept.id" :value="dept.id" :label="dept.name" />
</el-select>
</div>
<div>
<span style="padding: 0 6px; word-break: keep-all">预算计划</span>
<span>
<Input
v-model="select.plan_name"
clearable
placeholder="请选择预算计划"
style="width: 200px"
@on-focus="showPlanForSearch"
@on-clear="clearSelectForSearch"
/>
</span>
</div>
<div>
<span style="padding: 0 6px; word-break: keep-all"> 财务确认状态 </span>
<Select
v-model="status"
clearable
placeholder="请选择"
style="width: 100px"
>
<Option
v-for="item in [
{ label: '待审核', value: 0 },
{ label: '已审核', value: 1 },
]"
:key="item.value"
:value="item.value"
>
{{ item.label }}
</Option>
</Select>
</div>
<div>
<span style="padding: 0 6px; word-break: keep-all">流转状态</span>
<el-select v-model="select.flow_status" style="width: 100px" size="small" clearable placeholder="状态选择">
<el-option value="" label="待申请" />
<el-option :value="0" label="流转中" />
<el-option :value="1" label="已办结" />
</el-select>
</div>
<div>
<span style="padding: 0 6px; word-break: keep-all">创建日期</span>
<span>
<DatePicker
:value="selectDate"
placeholder="请选择日期"
type="date"
placement="bottom-start"
style="width: 180px"
@on-change="(e) => (selectDate = e)"
/>
</span>
</div>
<div>
<Button
type="primary"
@click="doSearch()"
>查询</Button>
</div>
<div>
<Button type="primary" ghost>重置</Button>
</div>
<div>
<Button
type="primary"
@click="toExport()"
>导出</Button>
</div>
</div>
</slot>
</lx-header>
<!-- 搜索使用 预算计划 -->
<xy-dialog
:is-show.sync="isShowPlanForSearch"
title="预算计划"
:width="720"
@on-ok="planSelectForSearch"
>
<template>
<Input
v-model="planSearch.name"
search
enter-button="搜 索"
placeholder="搜索预算计划.."
@on-search="searchBudgets"
/>
<div
style="
margin: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
"
>
<div>
已选择:<span style="margin-right: 10px">{{
select.plan_name
}}</span>
</div>
<el-link
type="success"
@click="clearSelectForSearch"
>清空选择</el-link>
</div>
<xy-table
ref="singlePlanTable"
highlight-current-row
:list="plans"
:show-index="false"
:table-item="planTableSearch"
:height="310"
style="margin-top: 10px"
@rowClick="selectPlanForSearch"
>
<template v-slot:btns />
</xy-table>
<div style="display: flex; justify-content: flex-end">
<Page :total="planTotal" show-elevator @on-change="planPageChange" />
</div>
<el-tag type="warning">点击行进行选择</el-tag>
</template>
<template v-slot:footerContent>
<Button type="primary" @click="confirmPlanForSearch">确定</Button>
</template>
</xy-dialog>
<xy-table :list="list" :table-item="table">
<template v-slot:btns>
<el-table-column
label="操作"
:fixed="$store.getters.device === 'mobile'?false:'right'"
width="160"
header-align="center"
>
<template v-if="authOa(scope.row)" slot-scope="scope">
<template v-if="scope.row.status === 0">
<Button
size="small"
type="primary"
style="margin-left: 10px; margin-bottom: 4px"
@click="
($refs['examineRegistration'].isShow = true),
$refs['examineRegistration'].getRegistration(scope.row.id)
"
>审核确认</Button>
</template>
<!-- <template v-else>
<Button
size="small"
type="error"
ghost
style="margin-left: 10px; margin-bottom: 4px"
@click="cancelExamine(scope.row)"
>审核撤销</Button
>
</template> -->
</template>
</el-table-column>
</template>
</xy-table>
<div style="display: flex; justify-content: flex-end">
<Page
:total="total"
show-elevator
show-sizer
@on-change="pageChange"
@on-page-size-change="pageSizeChange"
/>
</div>
<examineRegistration
ref="examineRegistration"
@refresh="getFundLogs"
/>
</div>
</template>
<script>
import {
getFundLog,
delFundLog,
editorFundLog
} from '@/api/paymentRegistration/fundLog'
import { getToken } from '@/utils/auth'
import { parseTime } from '@/utils'
import { Message } from 'element-ui'
import { getBudget } from '@/api/budget/budget'
import { getparameter } from '@/api/system/dictionary'
import examineRegistration from './components/examineRegistration'
import { listdeptNoAuth } from '@/api/system/department'
export default {
components: {
examineRegistration
},
data() {
return {
departments: [],
moneyWay: [],
plan: [],
planTableSearch: [
{
label: '分类',
prop: 'type',
formatter: (cell, data, value) => {
const res = this.moneyWay.filter((item) => {
return item.id === value
})
return res[0]?.value || '未知'
},
width: 120
},
{
label: '年份',
prop: 'year',
align: 'center',
width: 90
},
{
label: '名称',
prop: 'name',
width: 200,
align: 'left'
},
{
label: '计划金额',
prop: 'money',
align: 'right',
width: 160
}
],
plans: [], // 预算数据
planSearch: {
name: '',
plan_department_id: ''
},
planTotal: 0,
plansPageIndex: 1,
isShowPlanForSearch: false,
status: 0,
keyword: '',
select: {
plan_id: '',
plan_name: '',
flow_status: 1,
department_id: ''
},
selectDate: '',
list: [],
total: 0,
flowStatus: new Map([
[2, '待申请'],
[-1, '已退回'],
[-2, '-'],
[0, '流转中'],
[1, '已办结']
]),
flowStatusColor: new Map([
[-2, 'rgb(140, 140, 140)'],
[-1, '#dca550'],
[2, 'rgb(96, 109, 241)'],
[0, 'rgb(219, 122, 122)'],
[1, 'rgb(147, 201, 134)']
]),
pageIndex: 1,
pageSize: 10,
table: [
{
label: '项目名称',
minWidth: 300,
prop: 'contract.name',
fixed: this.$store.getters.device === 'mobile' ? false : 'left',
align: 'left',
customFn: row => {
return (<span>{ row.contract_id ? (row.contract ? row.contract.name : '') : (row.away ? row.away.title : '') }</span>)
}
},
{
label: '付款申请金额(元)',
prop: 'apply_money',
align: 'right',
width: 170,
formatter: (v1, v2, value) => {
return Number(value)
.toFixed(2)
.replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
}
},
{
label: '实际付款金额(元)',
prop: 'act_money',
align: 'right',
width: 170,
formatter: (v1, v2, value) => {
return Number(value)
.toFixed(2)
.replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
}
},
{
label: '预算计划',
width: 320,
align: 'left',
customFn: (row) => {
if (row.plan_link && row.plan_link.length > 0) {
return row.plan_link.map((item) => {
return (
<div>
{' '}
[{item.plan.year}] {(item.plan && item.plan.pid_info) ? item.plan.pid_info.name : ''} - {item.plan.name} <br /> [使用金额]{' '}
{item.use_money}元{' '}
</div>
)
})
}
}
},
{
label: '款项类型',
prop: 'type',
width: 120
},
{
prop: 'fund_log_collect.flow_links',
label: '流程状态',
customFn: row => {
return (
<span style={'color:' + this.flowStatusColor.get(row.fund_log_collect?.flow_links?.find(i => i.tag === 'pay')?.flow_status)
}>{this.flowStatus.get(row.fund_log_collect?.flow_links?.find(i => i.tag === 'pay')?.flow_status)}</span>)
}
// formatter: (cell, data, value) => {
// return this.flowStatus.get(value.find(i => i.tag === 'pay')?.flow_status)
// }
},
{
prop: 'status',
label: '财务确认状态',
width: 100,
customFn: row => {
return (row.status === 0)
? (<span style='color:rgb(96, 109, 241)'>待审核</span>)
: (<span style='color: rgb(147, 201, 134)'>已审核</span>)
}
},
{
label: '次数',
prop: 'pay_count',
width: 95,
customFn: row => {
return (<span>{ row.contract_id ? row.pay_count : row.pay_count_away }</span>)
}
},
{
label: '最后一笔',
prop: 'is_end',
width: 125,
formatter: (cell, data, value) => {
return value === 1 ? '是' : '否'
}
},
{
label: '经办人',
minWidth: 120,
prop: 'admin.name',
align: 'center'
},
{
label: '业务科室',
minWidth: 140,
prop: 'department.name',
align: 'center'
},
{
label: '备注',
minWidth: 360,
prop: 'remark',
align: 'left'
},
{
label: '创建信息',
prop: 'created_at',
width: 160,
formatter: (cell, data, value) => {
return parseTime(new Date(value), '{y}-{m}-{d}')
}
}
]
}
},
computed: {
authOa() {
return function(row) {
return row.fund_log_collect?.flow_links?.find(i => i.tag === 'pay')?.flow_status === 1
}
}
},
mounted() {
this.getDepartment()
this.getMoneyWay()
this.getFundLogs()
},
methods: {
planPageChange(e) {
this.plansPageIndex = e
this.getBudgets()
},
// 获取科室
async getDepartment() {
this.departments = (await listdeptNoAuth())?.data
},
// 获取资金渠道
async getMoneyWay() {
this.moneyWay = (
await getparameter({
number: 'money_way'
})
).detail
},
clearSelectForSearch() {
this.select.plan_id = ''
this.select.plan_name = '请选择预算计划'
},
// 计划搜索
searchBudgets() {
this.plansPageIndex = 1
this.getBudgets()
},
doSearch() {
this.pageIndex = 1
this.getFundLogs()
},
confirmPlanForSearch() {
this.isShowPlanForSearch = false
this.getFundLogs()
},
// 默认选择计划
toggleSelection(plans, type) {
if (plans) {
this.plans
.filter((plan) => {
if (plans.includes(plan.id)) {
plan.useMoney = this.plan[plans.indexOf(plan.id)].value.use_money
return true
}
})
.map((row) => {
this.$refs.planTable.toggleRowSelection(row)
})
} else {
this.$refs.planTable.clearSelection()
}
},
// 获取预算计划
async getBudgets() {
await getBudget({
name: this.planSearch.name,
page_size: 10,
page: this.plansPageIndex,
plan_department_id: this.planSearch.plan_department_id,
top_pid: 1
}).then((res) => {
this.plans = res.list.data
this.planTotal = res.list.total
this.toggleSelection(
this.plan.map((item) => {
return item.value.plan_id
}),
1
)
})
},
async showPlanForSearch() {
this.isShowPlanForSearch = true
await this.getBudgets()
},
// 选择计划 搜索
selectPlanForSearch(sel) {
console.log(sel)
if (sel) {
this.select.plan_id = sel.id
this.select.plan_name = '[' + sel.year + ']-' + sel.name
} else {
this.select.plan_id = ''
this.select.plan_name = ''
}
},
// 确认计划选择搜索
planSelectForSearch() {
if (this.select.plan_id === '') {
Message({
type: 'warning',
message: '选择计划不能为空'
})
return
}
this.isShowPlanForSearch = false
},
pageSizeChange(e) {
this.pageSize = e
this.pageIndex = 1
this.getFundLogs()
},
pageChange(e) {
this.pageIndex = e
this.getFundLogs()
},
toExport() {
this.is_export = 1
this.getFundLogs(true)
},
async getFundLogs(is_export) {
await getFundLog({
page_size: this.pageSize,
page: this.pageIndex,
keyword: this.keyword,
date: this.selectDate,
status: this.status,
act_plan_link_id: this.select.plan_id,
show_type: 1,
'flow_link[0][custom_model_id]': 75,
'flow_link[0][flow_status]': this.select.flow_status,
department_id: this.select.department_id
}).then((res) => {
const tokens = getToken()
if (is_export) {
var url = '/api/ht/fund_log/index?token=' + tokens
if (this.selectDate) url += '&date=' + this.selectDate
if (this.keyword) url += '&keyword=' + this.keyword
if (typeof this.status !== 'undefined') { url += '&status=' + this.status }
if (this.select.plan_id) { url += '&act_plan_link_id=' + this.select.plan_id }
url += '&is_export=' + this.is_export
url = location.host + url
console.log(url)
window.open('http://' + url, '_blank')
this.select.is_export = 0
return
}
this.list = res.data
this.total = res.total
})
},
deleteFundLog(row) {
delFundLog({
id: row.id
}).then((res) => {
Message({
type: 'success',
message: '操作成功'
})
this.getFundLogs()
})
},
cancelExamine(row) {
editorFundLog({
id: row.id,
contract_id: row.contract_id,
status: 0
}).then((res) => {
this.getFundLogs()
Message({
type: 'success',
message: '操作成功'
})
})
}
}
}
</script>
<style scoped lang="scss">
.selects {
display: flex;
flex-wrap: wrap;
& > div {
margin-bottom: 6px;
margin-right: 4px;
& > span {
word-break: keep-all;
padding: 0 4px ;
}
}
}
</style>