Files
income_payments_client/src/views/mailManagement/BillMail.vue
T

255 lines
8.7 KiB
Vue

<template>
<div>
<page-header-title :img-for-icon="IconImg"></page-header-title>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :xl="7" :lg="8" :md="8" :sm="24">
<a-form-item label="来款项目">
<a-input placeholder="请输入来款项目" v-model="queryParam.projectName" :maxLength='50'></a-input>
</a-form-item>
</a-col>
<a-col :xl="7" :lg="8" :md="8" :sm="24">
<a-form-item label="项目负责人">
<select-principal v-model="queryParam.principalId" placeholder="请选择项目负责人"></select-principal>
</a-form-item>
</a-col>
<a-col :xl="7" :lg="8" :md="8" :sm="24">
<a-form-item label="来款单位">
<a-input placeholder="请输入来款单位" v-model="queryParam.chargeCompanyName" :maxLength='50'></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :xl="12" :lg="12" :md="16" :sm="24">
<a-form-item label="邮寄时间">
<j-date
format="YYYY-MM-DD"
placeholder="请选择开始日期"
class="query-group-cust"
v-model="queryParam.startTime"
:disabled-date="disabledStartDate">
</j-date>
<span class="query-group-split-cust"></span>
<j-date
format="YYYY-MM-DD"
placeholder="请选择结束日期"
class="query-group-cust"
v-model="queryParam.endTime"
:disabled-date="disabledEndDate">
</j-date>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search" v-has="'billMail:search'">查询</a-button>
<a-button @click="searchReset" icon="reload" class="reset-button" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 查询区域-END -->
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button type="primary" icon="download" @click="handleExportXls" v-has="'billMail:export'">导出</a-button>
</div>
<!-- table区域-begin -->
<div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:scroll="{x: 1600}"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
class="j-table-force-nowrap"
@change="handleTableChange">
<!-- 项目名称-->
<template slot="projectName" slot-scope="text, record">
<j-ellipsis :value="text" :length="18" class="primary-color"
@click="openDetailModal(record)"></j-ellipsis>
</template>
<template slot="text" slot-scope="text">
<j-ellipsis :value="text" :length="18"></j-ellipsis>
</template>
<span slot="print" slot-scope="text, record" class="action-span-cell">
<a-button type="primary" :disabled="record.sendMethod === 2">打印</a-button>
</span>
<span slot="action" slot-scope="text, record" class="action-span-cell">
<a @click="handleAdd(record)" v-if="record.postStatus === 0" v-has="'billMail:mail'">邮寄</a>
<a @click="handleEdit(record)" v-if="record.postStatus === 1" v-has="'billMail:edit'">修改</a>
<a @click="goLogistics(record)" v-if="record.postStatus === 1" v-has="'billMail:checkLogistics'">查看物流</a>
</span>
</a-table>
</div>
<mail-modal ref="modalForm" @ok="modalFormOk"></mail-modal>
</a-card>
<project-detail-modal ref="projectDetail" not-id></project-detail-modal>
</div>
</template>
<script>
import { mixinDevice } from '@/utils/mixin'
import { JeroListMixin } from '@/mixins/JeroListMixin'
import { RangeDateMixin } from '@/mixins/RangeDateMixin'
import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
import IconImg from '@/assets/imgs/icon/xin.png'
import MailModal from './modules/MailModal'
import JDate from '@comp/tools/JDate'
import { downloadFile } from '@/api/manage'
import SelectPrincipal from '@/components/company/SelectPrincipal'
import ProjectDetailModal from '../../components/ProjectDetailModal'
export default {
name: 'BillMail',
mixins: [JeroListMixin, mixinDevice, RangeDateMixin],
components: {
PageHeaderTitle, JDate, MailModal, SelectPrincipal, ProjectDetailModal
},
data() {
return {
IconImg,
dateKeyObj: {
beginKey: 'startTime',
endKey: 'endTime'
},
filters: {
column: '',
order: ''
},
columns: [
{
title: '序号',
dataIndex: '',
width: 60,
key: 'rowIndex',
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
}
},
{
title: '来款项目',
width: 300,
ellipsis: true,
align: 'center',
dataIndex: 'projectName',
scopedSlots: { customRender: 'projectName' }
},
{
title: '票号',
align: 'center',
width: 300,
dataIndex: 'billNo',
scopedSlots: { customRender: 'text' }
},
{
title: '开票金额',
align: 'center',
width: 200,
dataIndex: 'invoiceAmount',
customRender: (text, record) => (
<j-ellipsis value={ record.invoiceAmount + '元' } length={ 15 }></j-ellipsis>
)
},
{
title: '项目负责人',
align: 'center',
width: 300,
dataIndex: 'principalName',
scopedSlots: { customRender: 'text' }
},
{
title: '来款单位',
align: 'center',
width: 300,
dataIndex: 'chargeCompanyName',
scopedSlots: { customRender: 'text' }
},
{
title: '邮寄联系人',
align: 'center',
width: 300,
dataIndex: 'contactName',
scopedSlots: { customRender: 'text' }
},
{
title: '联系人电话',
align: 'center',
width: 200,
dataIndex: 'contactMobile',
scopedSlots: { customRender: 'text' }
},
{
title: '状态',
align: 'center',
width: 200,
dataIndex: 'postStatus_dictText'
},
{
title: '打印',
width: 100,
align: 'center',
dataIndex: '',
scopedSlots: { customRender: 'print' }
},
{
title: '操作',
align: 'center',
fixed: 'right',
width: 160,
scopedSlots: { customRender: 'action' }
}
],
url: {
list: '/mail/payMailBill/list',
exportXlsUrl: '/mail/payMailBill/exportXls'
}
}
},
methods: {
// 查看物流
goLogistics(record) {
const com = Number(record.sendMethod) === 1 && 'ems' || 'shunfeng'
window.open(`https://www.kuaidi100.com/chaxun?com=${ com }&nu=${ record.postNo }`)
},
handleAdd: function (record) {
this.$refs.modalForm.add(record, 1)
this.$refs.modalForm.title = '邮寄'
this.$refs.modalForm.disableSubmit = false
},
handleEdit: function (record) {
this.$refs.modalForm.edit(record, 0)
console.log(record)
this.$refs.modalForm.title = '修改'
this.$refs.modalForm.disableSubmit = false
},
handleExportXls() {
let date = new Date()
let fileName = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日' + date.getHours() + '时' + date.getMinutes() + '分' + date.getSeconds() + '秒票据邮寄信息'
let param = this.getQueryParams()
if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
param['ids'] = this.selectedRowKeys.join(',')
}
console.log('导出参数', param)
downloadFile(this.url.exportXlsUrl, fileName + '.xlsx', param)
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
</style>