mirror of
https://gitee.com/elegant_wings/dbd-meeting-html.git
synced 2025-06-21 07:59:37 +08:00
583 lines
18 KiB
Vue
583 lines
18 KiB
Vue
<template>
|
||
<a-card :bordered="false">
|
||
<div class="table-page-search-wrapper">
|
||
<a-form layout="inline">
|
||
<a-row :gutter="48">
|
||
<a-col :md="6" :sm="15">
|
||
<a-form-item label="客户名称">
|
||
<a-input placeholder="请输入客户名称" v-model="queryParam.queryCustomerName"/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="6" :sm="15">
|
||
<a-form-item label="账单编号">
|
||
<a-input placeholder="请输入账单编号" v-model="queryParam.sn"/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="6" :sm="15">
|
||
<a-form-item label="合同编号">
|
||
<a-input placeholder="请输入合同编号" v-model="queryParam.searchValue"/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="6" :sm="15">
|
||
<a-form-item label="账单月份">
|
||
<a-month-picker placeholder="请选择日期" v-model="queryParam.queryMonth" @change="onChange" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="6" :sm="15">
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="账单状态">
|
||
<a-radio-group button-style="solid" @change="radiogroupChange" v-model="queryParam.status">
|
||
<a-radio-button value="UNRECEIVED">未收</a-radio-button>
|
||
<a-radio-button value="RECEIVED">已收</a-radio-button>
|
||
<a-radio-button value="PART">部分</a-radio-button>
|
||
</a-radio-group>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="6" :sm="15">
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="账单类型">
|
||
<a-radio-group button-style="solid" @change="radiogroupChange" v-model="queryParam.billType">
|
||
<a-radio-button value="GENERAL">固定账单</a-radio-button>
|
||
<a-radio-button value="OTHER">其他账单</a-radio-button>
|
||
</a-radio-group>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="6" :sm="15">
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否逾期">
|
||
<a-radio-group button-style="solid" @change="isOverdueChange" v-model="queryParam.isOverdue">
|
||
<a-radio-button value="0">否</a-radio-button>
|
||
<a-radio-button value="1">是</a-radio-button>
|
||
</a-radio-group>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="24" :sm="24" style="text-align:center;">
|
||
<span class="table-page-search-submitButtons">
|
||
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
|
||
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
|
||
<a-button style="margin-left: 8px" @click="download">导出</a-button>
|
||
<a-button style="margin-left: 8px" @click="visible = true, exportType = '1'">租金导入</a-button>
|
||
<a-button style="margin-left: 8px" @click="visible = true, exportType = '0'">水电费导入</a-button>
|
||
</span>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</div>
|
||
<div class="table-operator">
|
||
<!-- <a-button type="primary" icon="plus" @click="billEdit">新建</a-button>-->
|
||
<a-dropdown>
|
||
<a-popconfirm
|
||
cancelText="取消"
|
||
okText="确定"
|
||
title="确定批量确认收款吗?"
|
||
@confirm="cancelContract"
|
||
>
|
||
<a-button type="primary">确认收款</a-button>
|
||
</a-popconfirm>
|
||
</a-dropdown>
|
||
<a-dropdown v-if="removeEnable&&selectedRowKeys.length > 0">
|
||
<a-button type="danger" icon="delete" @click="delByIds(selectedRowKeys)">删除</a-button>
|
||
</a-dropdown>
|
||
</div>
|
||
<s-table
|
||
size="default"
|
||
ref="table"
|
||
rowKey="id"
|
||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps: getCheckboxProps}"
|
||
:columns="columns"
|
||
:data="loadData"
|
||
:scroll="{x:200}"
|
||
>
|
||
<span slot="isOverdue" slot-scope="text">
|
||
{{ text === 0? "否":"是" }}
|
||
</span>
|
||
<span slot="status" slot-scope="text">
|
||
{{ text | statusFilter }}
|
||
</span>
|
||
<span slot="billType" slot-scope="text">
|
||
{{ text | billTypeFilter }}
|
||
</span>
|
||
<div slot="customerContract.sn" slot-scope="text, record" style="cursor:pointer;color:#1890ff" @click="binNav(record)">
|
||
<span>{{ text }}</span>
|
||
</div>
|
||
<span slot="action" slot-scope="text, record">
|
||
<!-- <a @click="billEdit(record)" style="margin-right:10px;">编辑</a>
|
||
-->
|
||
<a v-if="editEnabel && record.status != 'RECEIVED'" @click="handleEdit(record)">确认收款</a>
|
||
<a v-if="editEnabel && record.status == 'RECEIVED'" @click="cancel(record.id)">取消确认</a>
|
||
<a-divider type="vertical" />
|
||
<a-popconfirm
|
||
v-if="removeEnable"
|
||
cancelText="取消"
|
||
okText="确定"
|
||
title="确定删除这条数据吗?"
|
||
@confirm="delByIds([record.id])"
|
||
>
|
||
<a>删除</a>
|
||
</a-popconfirm>
|
||
</span>
|
||
</s-table>
|
||
<customerContractBill-modal ref="modal" @ok="handleOk" />
|
||
<customerContractOtherBill-modal ref="otherModal" @ok="handleOk" />
|
||
<a-modal
|
||
title="账单导入"
|
||
:width="600"
|
||
v-model="visible"
|
||
:confirmLoading="confirmLoading"
|
||
@ok="handleSubmit"
|
||
>
|
||
<div style="line-height:30px;">
|
||
<div>操作步骤：</div>
|
||
<div v-if="exportType === '0'">1、下载《<a @click="parameter =>exportPowerWaterFee(parameter, 0)">水电费账单模版</a>》</div>
|
||
<div v-else>1、下载《<a @click="parameter =>exportPowerWaterFee(parameter, 1)">租金账单模版</a>》</div>
|
||
<div>2、打开下载表，将对应字段信息输入或粘贴进本表，为保障粘贴信息被有效导入，请使用纯文本或数字</div>
|
||
<div>3、信息输入完毕，在本页面点击“上传”按钮，选择excel文档</div>
|
||
<div>4、点击“开始导入”，即可完成批量导入操作</div>
|
||
<a-upload
|
||
name="file"
|
||
:multiple="true"
|
||
:file-list="fileList"
|
||
:action="uploadUrl"
|
||
:headers="headers"
|
||
@change="handleChange"
|
||
>
|
||
<a-button> <a-icon type="upload" />上传</a-button>
|
||
</a-upload>
|
||
</div>
|
||
</a-modal>
|
||
</a-card>
|
||
</template>
|
||
|
||
<script>
|
||
import { STable } from '@/components'
|
||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||
import {
|
||
getCustomerContractBillList,
|
||
batchConfirmReceiveAmount,
|
||
delCustomerContractBill,
|
||
exportFileRequest,
|
||
exportPowerWaterFee,
|
||
exportRent,
|
||
importPowerWaterFee,
|
||
importRent,
|
||
cancelConfirm
|
||
} from '@/api/admin/customerContractBill'
|
||
import storage from 'store'
|
||
import { checkPermission } from '@/utils/permissions'
|
||
import CustomerContractBillModal from '@/views/admin/modules/CustomerContractBillModal'
|
||
import CustomerContractOtherBillModal from '@/views/admin/modules/CustomerContractOtherBillModal'
|
||
import moment from 'moment'
|
||
export default {
|
||
name: 'TableList',
|
||
components: {
|
||
CustomerContractBillModal,
|
||
CustomerContractOtherBillModal,
|
||
STable
|
||
},
|
||
data () {
|
||
return {
|
||
exportType: '0', // 账单导入类型
|
||
fileName: '',
|
||
fileList: [],
|
||
uploadUrl: process.env.VUE_APP_API_BASE_URL + '/api/dfs/upload',
|
||
headers: {
|
||
Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN)
|
||
},
|
||
confirmLoading: false,
|
||
visible: false,
|
||
allAmount: 0,
|
||
notPayBill: 0,
|
||
receiveRent: 0,
|
||
labelCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 5 }
|
||
},
|
||
wrapperCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 16 }
|
||
},
|
||
form: this.$form.createForm(this),
|
||
mdl: {},
|
||
// 高级搜索 展开/关闭
|
||
advanced: false,
|
||
// 查询参数
|
||
queryParam: {},
|
||
// 表头
|
||
columns: [
|
||
{
|
||
title: '账期',
|
||
width: '200px',
|
||
dataIndex: 'billDate',
|
||
fixed: 'left'
|
||
},
|
||
{
|
||
title: '客户名称',
|
||
width: '200px',
|
||
dataIndex: 'customerContract.customerName',
|
||
fixed: 'left'
|
||
},
|
||
{
|
||
title: '合同名称',
|
||
width: '210px',
|
||
dataIndex: 'customerContract.name'
|
||
},
|
||
{
|
||
title: '账单编号',
|
||
width: '200px',
|
||
dataIndex: 'sn'
|
||
},
|
||
{
|
||
title: '合同编号',
|
||
width: '210px',
|
||
dataIndex: 'customerContract.sn',
|
||
scopedSlots: { customRender: 'customerContract.sn' }
|
||
},
|
||
{
|
||
title: '物管合同号',
|
||
dataIndex: 'customerContract.pmSn',
|
||
width: '200px',
|
||
ellipsis: true
|
||
},
|
||
{
|
||
title: '账单类型',
|
||
width: '90px',
|
||
dataIndex: 'billType',
|
||
scopedSlots: { customRender: 'billType' }
|
||
},
|
||
{
|
||
title: '账单状态',
|
||
width: '90px',
|
||
dataIndex: 'status',
|
||
scopedSlots: { customRender: 'status' }
|
||
},
|
||
{
|
||
title: '是否逾期',
|
||
width: '90px',
|
||
dataIndex: 'isOverdue',
|
||
scopedSlots: { customRender: 'isOverdue' }
|
||
},
|
||
{
|
||
title: '收款截止日',
|
||
width: '130px',
|
||
dataIndex: 'receiveRentDate',
|
||
sorter: true
|
||
},
|
||
{
|
||
title: '应收租金(元)',
|
||
width: '100px',
|
||
dataIndex: 'rent'
|
||
},
|
||
{
|
||
title: '押金(元)',
|
||
width: '100px',
|
||
dataIndex: 'deposit'
|
||
},
|
||
{
|
||
title: '已收租金(元)',
|
||
width: '100px',
|
||
dataIndex: 'receiveRent'
|
||
},
|
||
{
|
||
title: '水费(元)',
|
||
width: '100px',
|
||
dataIndex: 'waterFee'
|
||
},
|
||
{
|
||
title: '电费(元)',
|
||
width: '100px',
|
||
dataIndex: 'powerFee'
|
||
},
|
||
{
|
||
title: '其它费用(元)',
|
||
width: '130px',
|
||
dataIndex: 'otherFee'
|
||
},
|
||
{
|
||
title: '退费(元)',
|
||
width: '100px',
|
||
dataIndex: 'refundFee'
|
||
},
|
||
{
|
||
title: '物业管理费(元)',
|
||
width: '130px',
|
||
dataIndex: 'managementTotalFee'
|
||
},
|
||
{
|
||
title: '合计应收(元)',
|
||
width: '100px',
|
||
dataIndex: 'totalBill'
|
||
},
|
||
{
|
||
title: '合计未收(元)',
|
||
width: '100px',
|
||
dataIndex: 'waitPay'
|
||
},
|
||
{
|
||
title: '合计已收(元)',
|
||
width: '100px',
|
||
dataIndex: 'receiveTotalBill'
|
||
},
|
||
{
|
||
title: '备注',
|
||
width: '100px',
|
||
dataIndex: 'remark'
|
||
},
|
||
{
|
||
title: '操作',
|
||
width: '130px',
|
||
dataIndex: 'action',
|
||
scopedSlots: { customRender: 'action' },
|
||
fixed: 'right'
|
||
}
|
||
],
|
||
// 加载数据方法 必须为 Promise 对象
|
||
loadData: parameter => {
|
||
var params = Object.assign(parameter, this.queryParam)
|
||
return getCustomerContractBillList(params)
|
||
},
|
||
selectedRowKeys: [],
|
||
selectedRows: [],
|
||
addEnable: checkPermission('admin:bill:add'),
|
||
editEnabel: checkPermission('admin:bill:edit'),
|
||
removeEnable: checkPermission('admin:bill:remove')
|
||
}
|
||
},
|
||
filters: {
|
||
statusFilter (status) {
|
||
const statusMap = {
|
||
'UNRECEIVED': '未收',
|
||
'PART': '部分',
|
||
'RECEIVED': '已收'
|
||
}
|
||
return statusMap[status]
|
||
},
|
||
billTypeFilter (billType) {
|
||
const billTypeMap = {
|
||
'GENERAL': '固定账单',
|
||
'OTHER': '其他账单'
|
||
}
|
||
return billTypeMap[billType]
|
||
},
|
||
NumFormat: function (value) {
|
||
if (!value) return '0.00'
|
||
value = value.toFixed(2)
|
||
var intPart = Math.trunc(value)// 获取整数部分
|
||
var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
|
||
var floatPart = '.00' // 预定义小数部分
|
||
var value2Array = value.split('.')
|
||
// =2表示数据有小数位
|
||
if (value2Array.length === 2) {
|
||
floatPart = value2Array[1].toString() // 拿到小数部分
|
||
if (floatPart.length === 1) { // 补0,实际上用不着
|
||
return intPartFormat + '.' + floatPart + '0'
|
||
} else {
|
||
return intPartFormat + '.' + floatPart
|
||
}
|
||
} else {
|
||
return intPartFormat + floatPart
|
||
}
|
||
}
|
||
},
|
||
created () {
|
||
if (this.$route.query.Date) {
|
||
this.queryParam.queryMonth = this.$route.query.Date
|
||
this.$refs.table.refresh(true)
|
||
} else if (this.$route.query.isOverdue) {
|
||
this.queryParam.isOverdue = '1'
|
||
this.$refs.table.refresh(true)
|
||
}
|
||
},
|
||
methods: {
|
||
handleSubmit () {
|
||
this.confirmLoading = true
|
||
if (this.fileList.length > 0) {
|
||
if (this.exportType === '0') {
|
||
importPowerWaterFee({ filePath: this.fileName }).then(res => {
|
||
if (res.code === 0) {
|
||
this.fileList = []
|
||
this.visible = false
|
||
this.confirmLoading = false
|
||
this.$message.success(res.msg)
|
||
} else {
|
||
this.confirmLoading = false
|
||
this.$message.error(res.msg)
|
||
}
|
||
})
|
||
} else {
|
||
importRent({ filePath: this.fileName }).then(res => {
|
||
if (res.code === 0) {
|
||
this.fileList = []
|
||
this.visible = false
|
||
this.confirmLoading = false
|
||
this.$message.success(res.msg)
|
||
} else {
|
||
this.confirmLoading = false
|
||
this.$message.error(res.msg)
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
this.confirmLoading = false
|
||
this.$message.success('请先上传文件')
|
||
}
|
||
},
|
||
handleChange (info) {
|
||
this.fileList = info.fileList
|
||
if (info.file.status === 'done') {
|
||
const result = info.file.response
|
||
this.fileName = result.fileName
|
||
}
|
||
},
|
||
exportPowerWaterFee (parameter, type) {
|
||
if (!this.queryParam.queryMonth) {
|
||
this.$message.error('账单月份不能为空!')
|
||
return
|
||
}
|
||
if (type === 0) {
|
||
exportPowerWaterFee(Object.assign(parameter, this.queryParam)).then(response => {
|
||
this.exportPowerWaterFile(response, type)
|
||
})
|
||
} else {
|
||
exportRent(Object.assign(parameter, this.queryParam)).then(response => {
|
||
this.exportPowerWaterFile(response, type)
|
||
})
|
||
}
|
||
},
|
||
exportPowerWaterFile (data, type) {
|
||
var link = document.createElement('a')
|
||
// 文件导出
|
||
if (!data) {
|
||
return
|
||
}
|
||
link.style.display = 'none'
|
||
link.href = window.URL.createObjectURL(new Blob([data]))
|
||
// var month = moment(this.queryParam.queryMonth).format('YYYY年MM月')
|
||
if (type === 0) {
|
||
link.setAttribute('download', '水电费账单模版.xls')
|
||
} else {
|
||
link.setAttribute('download', '租金账单模版.xls')
|
||
}
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
},
|
||
getCheckboxProps (record) {
|
||
return ({
|
||
props: {
|
||
disabled: record.status === 'RECEIVED'
|
||
}
|
||
})
|
||
},
|
||
cancelContract () {
|
||
batchConfirmReceiveAmount({ billIds: this.selectedRowKeys.join(',') }).then(res => {
|
||
if (res.code === 0) {
|
||
this.$message.success('操作已成功')
|
||
this.$refs.table.refresh(true)
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
this.selectedRowKeys = []
|
||
})
|
||
},
|
||
billEdit (e) {
|
||
this.$router.push({ name: 'customerContractBillEdit', query: { id: e.id, url: 'bill' } })
|
||
},
|
||
radiogroupChange (e) {
|
||
this.$refs.table.refresh(true)
|
||
},
|
||
isOverdueChange (e) {
|
||
var data = this.queryParam
|
||
this.queryParam = {}
|
||
delete data.isOverdue
|
||
this.queryParam = data
|
||
this.queryParam.isOverdue = e.target.value
|
||
this.$refs.table.refresh(true)
|
||
},
|
||
exportTypeChange (e) {
|
||
this.exportType = e.target.value
|
||
},
|
||
binNav (e) {
|
||
this.$router.push({ name: 'customerContractDetailModal', query: { id: e.contractId, url: 'bill' } })
|
||
},
|
||
download (parameter) {
|
||
if (!this.queryParam.queryMonth) {
|
||
this.$message.error('账单月份不能为空!')
|
||
return
|
||
}
|
||
exportFileRequest(Object.assign(parameter, this.queryParam)).then(response => {
|
||
this.downloadFile(response)
|
||
})
|
||
},
|
||
downloadFile (data) {
|
||
var link = document.createElement('a')
|
||
console.log(data)
|
||
// 文件导出
|
||
if (!data) {
|
||
return
|
||
}
|
||
link.style.display = 'none'
|
||
link.href = window.URL.createObjectURL(new Blob([data]))
|
||
var month = moment(this.queryParam.queryMonth).format('YYYY年MM月')
|
||
link.setAttribute('download', month + '办公场地租金一览表.xls')
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
},
|
||
onChange (data, datastring) {
|
||
var datas = this.queryParam
|
||
this.queryParam = {}
|
||
delete datas.queryMonth
|
||
this.queryParam = datas
|
||
this.queryParam.queryMonth = datastring
|
||
},
|
||
onSelectChange (selectedRowKeys, selectedRows) {
|
||
this.selectedRowKeys = selectedRowKeys
|
||
this.selectedRows = selectedRows
|
||
},
|
||
handleAdd () {
|
||
this.$refs.modal.add()
|
||
},
|
||
handleEdit (record) {
|
||
if (record.billType === 'OTHER') {
|
||
this.$refs.otherModal.edit(record)
|
||
} else {
|
||
this.$refs.modal.edit(record)
|
||
}
|
||
},
|
||
cancel (billId) {
|
||
cancelConfirm({ billId: billId }).then(res => {
|
||
if (res.code === 0) {
|
||
this.$message.success('取消成功')
|
||
this.handleOk()
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
})
|
||
},
|
||
handleOk () {
|
||
this.$refs.table.refresh(true)
|
||
},
|
||
delByIds (ids) {
|
||
delCustomerContractBill({ ids: ids.join(',') }).then(res => {
|
||
if (res.code === 0) {
|
||
this.$message.success('删除成功')
|
||
this.handleOk()
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
this.selectedRowKeys = []
|
||
})
|
||
}
|
||
},
|
||
watch: {
|
||
/*
|
||
'selectedRows': function (selectedRows) {
|
||
this.needTotalList = this.needTotalList.map(item => {
|
||
return {
|
||
...item,
|
||
total: selectedRows.reduce( (sum, val) => {
|
||
return sum + val[item.dataIndex]
|
||
}, 0)
|
||
}
|
||
})
|
||
}
|
||
*/
|
||
}
|
||
}
|
||
</script>
|