[update] 财务管理模块前端页面，到账开票新增阶段接口对接
This commit is contained in:
zhaoxiao
@@ -28,6 +28,8 @@ const queryUserByDepartId = (param) => getAction('/sys/user/listRoleAndDepart',
|
||||
const queryContactByName = (param) => getAction('/company/payContactsManagement/queryByName', param)
|
||||
// 通过id获取支出合同信息
|
||||
const getExpenditureContractById = (param) => getAction('/contract/paySpendingContract/queryById', param)
|
||||
// 添加来款阶段
|
||||
const addPaymentPhase = (param) => postAction('/paymentRecord/payPaymentRecord/addPhase', param)
|
||||
|
||||
export {
|
||||
getWorkingGroupById,
|
||||
@@ -43,5 +45,6 @@ export {
|
||||
archiveRevenueContract,
|
||||
queryUserByDepartId,
|
||||
queryContactByName,
|
||||
getExpenditureContractById
|
||||
getExpenditureContractById,
|
||||
addPaymentPhase
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
@@ -79,6 +79,7 @@
|
||||
text-align: left;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
&-text {
|
||||
|
||||
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div>
|
||||
<page-header-title :img-for-icon="IconImg"></page-header-title>
|
||||
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域-start -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="类型项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-model="queryParam.projectType" placeholder="请选择类型项目"
|
||||
dictCode="project_type"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="项目负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<select-principal placeholder="请选择负责人" v-model="queryParam.principalId"></select-principal>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入项目名称" v-model="queryParam.chargeProject"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入来款单位" v-model="queryParam.chargeCompanyTemporaryName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-year-date>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
|
||||
<a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- /查询区域-->
|
||||
|
||||
<!-- 操作按钮区域-->
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="export" @click="handleExportXls('到账开票')">导出</a-button>
|
||||
</div>
|
||||
<!-- 操作按钮区域-end-->
|
||||
|
||||
<!-- table表格区域-->
|
||||
<div>
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:scroll="{x: 1300}"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange"
|
||||
class="j-table-force-nowrap">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<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>
|
||||
|
||||
<!-- 打包、需要发票、到账、开票、邮寄状态-->
|
||||
<template slot="status" slot-scope="text,record">
|
||||
<status-slot :statu-obj="record" :status-no="text" :status-type="true"></status-slot>
|
||||
</template>
|
||||
|
||||
<template slot="status-pack" slot-scope="text,record">
|
||||
<status-slot :statu-obj="record" :status-no="text"></status-slot>
|
||||
</template>
|
||||
|
||||
<span slot="action" class="action-span-cell" slot-scope="text, record">
|
||||
<a @click="incomePayment(record.id)">来款</a>
|
||||
<a @click="invoicing(record.id)">开票</a>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
<!-- 来款阶段-->
|
||||
<arrive-stage-module ref="arriveStage" @ok="modalFormOk" :project-id="selectProjectId"></arrive-stage-module>
|
||||
<!-- 开票阶段-->
|
||||
<invoicing-stage-module ref="invoicingStage" @ok="modalFormOk"></invoicing-stage-module>
|
||||
<project-detail-modal ref="projectDetail"></project-detail-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
|
||||
import IconImg from '@/assets/imgs/icon/icon_financial.png'
|
||||
import { JeroListMixin } from '../../../mixins/JeroListMixin'
|
||||
import JYearDate from '../../../components/jero/JYearDate'
|
||||
import StatusSlot from '../../../components/tools/StatusSlot'
|
||||
import ArriveStageModule from './modules/ArriveStageModule'
|
||||
import InvoicingStageModule from './modules/InvoicingStageModule'
|
||||
import SelectPrincipal from '../../../components/company/SelectPrincipal'
|
||||
import ProjectDetailModal from '../../../components/ProjectDetailModal'
|
||||
|
||||
export default {
|
||||
name: 'ArriveAndInvoivingList',
|
||||
components: { PageHeaderTitle, JYearDate, StatusSlot, ArriveStageModule, InvoicingStageModule, SelectPrincipal, ProjectDetailModal },
|
||||
mixins: [JeroListMixin],
|
||||
data() {
|
||||
return {
|
||||
IconImg,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 10 }
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
}, {
|
||||
title: '来款项目',
|
||||
align: 'center',
|
||||
width: 200,
|
||||
dataIndex: 'chargeProject',
|
||||
scopedSlots: { customRender: 'projectName' }
|
||||
}, {
|
||||
title: '来款用途',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
dataIndex: 'chargeUse_dictText',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '项目负责人',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'principalName',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '来款单位',
|
||||
align: 'center',
|
||||
width: 200,
|
||||
dataIndex: 'chargeCompanyTemporaryName',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收金额',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'receivableAmount'
|
||||
}, {
|
||||
title: '实收金额',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'paidAmount'
|
||||
}, {
|
||||
title: '需要发票',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
dataIndex: 'needInvoice',
|
||||
scopedSlots: { customRender: 'status-pack' }
|
||||
}, {
|
||||
title: '打包',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
dataIndex: 'pack',
|
||||
scopedSlots: { customRender: 'status-pack' }
|
||||
}, {
|
||||
title: '到账',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
dataIndex: 'inAccount',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
}, {
|
||||
title: '开票',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
dataIndex: 'makeInvoice',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
}, {
|
||||
title: '邮寄',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
dataIndex: 'mail',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
}, {
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 160,
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: '/paymentRecord/payPaymentRecord/mainList',
|
||||
exportXlsUrl: ''
|
||||
},
|
||||
selectProjectId: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 来款
|
||||
* @param id
|
||||
*/
|
||||
incomePayment(id) {
|
||||
this.selectProjectId = id
|
||||
this.$refs.arriveStage.open()
|
||||
},
|
||||
/**
|
||||
* 开票
|
||||
* @param id
|
||||
*/
|
||||
invoicing(id) {
|
||||
console.log(id)
|
||||
this.$refs.invoicingStage.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
switchFullscreen
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
okText="保存"
|
||||
cancelText="关闭">
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-form-item label="到账金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入到账金额"
|
||||
v-decorator="['amountReceived',validatorRules.amountReceived]"
|
||||
:maxLength='50'
|
||||
@change="e => e.target.value = (e.target.value.replace(/[^0-9.]/g, '')).trim()"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="来款日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date placeholder="请选择来款日期"
|
||||
style="width: 100%;"
|
||||
v-decorator="['paymentDate',validatorRules.paymentDate]"
|
||||
:trigger-change="true"
|
||||
date-format="YYYY-MM-DD"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-textarea
|
||||
placeholder="请输入备注"
|
||||
v-decorator="['remark']"
|
||||
:auto-size="{ minRows: 3, maxRows: 6 }"
|
||||
:maxLength='200'
|
||||
@change="e => {e.target.value = (e.target.value + '').trim()}"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import { money } from '../../../../utils/validate'
|
||||
import JDate from '../../../../components/tools/JDate'
|
||||
import { addPaymentPhase } from '../../../../api/incomePaymentsApi'
|
||||
|
||||
export default {
|
||||
name: 'ArriveModule',
|
||||
components: { JDate },
|
||||
props: {
|
||||
// 项目id
|
||||
projectId: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '来款信息',
|
||||
width: 600,
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 18 }
|
||||
},
|
||||
validatorRules: {
|
||||
amountReceived: {
|
||||
rules: [{ required: true, validator: this.checkMoney }],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
paymentDate: {
|
||||
rules: [{ required: true, message: '请选择来款日期' }],
|
||||
validateTrigger: 'change'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.edit({})
|
||||
},
|
||||
edit(record) {
|
||||
this.model = Object.assign({}, record)
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'amountReceived', 'paymentDate', 'remark'))
|
||||
})
|
||||
},
|
||||
handleOk() {
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
values.projectId = this.projectId
|
||||
const formData = Object.assign(this.model, values)
|
||||
console.log('表单提交数据', formData)
|
||||
addPaymentPhase(formData).then(res => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.$emit('ok')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.warn(res.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
close() {
|
||||
this.visible = false
|
||||
},
|
||||
/**
|
||||
* 校验金额格式
|
||||
* @param rules
|
||||
* @param value
|
||||
* @param callback
|
||||
*/
|
||||
checkMoney(rules, value, callback) {
|
||||
if (value) {
|
||||
if (money(value)) {
|
||||
callback()
|
||||
return
|
||||
}
|
||||
callback('请输入正确格式的金额')
|
||||
}
|
||||
callback('请输入到账金额')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
switchFullscreen
|
||||
@ok="handleAdd"
|
||||
@cancel="handleCancel"
|
||||
okText="添加阶段"
|
||||
cancelText="关闭">
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<div v-for="(item, index) in stageList" :key="index" class="stage-box">
|
||||
<div class="title">
|
||||
<div class="title-text">第{{ item.chinaNumIndex }}阶段</div>
|
||||
<img src="../../../../assets/imgs/icon/icon_edit.png" @click="handleEdit(item)">
|
||||
</div>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<div class="stage">
|
||||
<div class="stage-title">到账金额：</div>
|
||||
<div class="stage-content stage-content-money">{{ item.amountReceived }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="stage">
|
||||
<div class="stage-title">来款日期：</div>
|
||||
<div class="stage-content">{{ item.paymentDate }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col>
|
||||
<div class="stage">
|
||||
<div class="stage-title stage-remark-title">备注：</div>
|
||||
<div class="stage-content">{{ item.remark }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-spin>
|
||||
<arrive-module ref="arriveModal" v-bind="$attrs" @ok="loadData"></arrive-module>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ArriveModule from './ArriveModule'
|
||||
|
||||
export default {
|
||||
name: 'ArriveStageModule',
|
||||
components: { ArriveModule },
|
||||
data() {
|
||||
return {
|
||||
title: '来款阶段',
|
||||
width: 800,
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
// 阶段列表，用于循环展示阶段信息
|
||||
stageList: [
|
||||
{
|
||||
amountReceived: 1000,
|
||||
paymentDate: '2020-09-09',
|
||||
remark: '这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!'
|
||||
}, {
|
||||
amountReceived: 2000,
|
||||
paymentDate: '2020-09-08',
|
||||
remark: '这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
handleAdd() {
|
||||
this.$refs.arriveModal.title='添加阶段'
|
||||
this.$refs.arriveModal.add()
|
||||
},
|
||||
handleEdit(record) {
|
||||
this.$refs.arriveModal.title='编辑阶段'
|
||||
this.$refs.arriveModal.edit(record)
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
open() {
|
||||
this.visible = true
|
||||
},
|
||||
close() {
|
||||
this.visible = false
|
||||
},
|
||||
loadData() {
|
||||
// 匹配每一项的汉字序号
|
||||
this.stageList.forEach((item, index) => {
|
||||
item.chinaNumIndex = this.convertToChinaNum(index + 1)
|
||||
})
|
||||
},
|
||||
//将数字（整数）转为汉字
|
||||
convertToChinaNum(num) {
|
||||
let arr1 = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九')
|
||||
let arr2 = new Array('', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿')//可继续追加更高位转换值
|
||||
if (!num || isNaN(num)) {
|
||||
return '零'
|
||||
}
|
||||
let english = num.toString().split('')
|
||||
let result = ''
|
||||
for (let i = 0; i < english.length; i++) {
|
||||
let des_i = english.length - 1 - i//倒序排列设值
|
||||
result = arr2[i] + result
|
||||
let arr1_index = english[des_i]
|
||||
result = arr1[arr1_index] + result
|
||||
}
|
||||
//将【零千、零百】换成【零】 【十零】换成【十】
|
||||
result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十')
|
||||
//合并中间多个零为一个零
|
||||
result = result.replace(/零+/g, '零')
|
||||
//将【零亿】换成【亿】【零万】换成【万】
|
||||
result = result.replace(/零亿/g, '亿').replace(/零万/g, '万')
|
||||
//将【亿万】换成【亿】
|
||||
result = result.replace(/亿万/g, '亿')
|
||||
//移除末尾的零
|
||||
result = result.replace(/零+$/, '')
|
||||
//将【零一十】换成【零十】
|
||||
//result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十
|
||||
//将【一十】换成【十】
|
||||
result = result.replace(/^一十/g, '十')
|
||||
return result
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.stage-box {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
|
||||
&-text {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
font-family: NotoSansHans, NotoSansHans-DemiLight;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&-text::before {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: -10px;
|
||||
content: "";
|
||||
height: 20px;
|
||||
width: 2px;
|
||||
background: #069f99;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.stage {
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
|
||||
&-title {
|
||||
width: 20%;
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
font-family: NotoSansHans, NotoSansHans-Light;
|
||||
color: #4D4D4D;
|
||||
}
|
||||
|
||||
&-remark-title {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
&-content {
|
||||
padding-right: 20px;
|
||||
word-break: break-all;
|
||||
font-size: 14px;
|
||||
font-family: NotoSansHans, NotoSansHans-Light;
|
||||
color: #4D4D4D;
|
||||
|
||||
&-money {
|
||||
color: #D40505;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
switchFullscreen
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
okText="保存"
|
||||
cancelText="关闭">
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-form-item label="开票金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入开票金额"
|
||||
v-decorator="['invoicingAmount',validatorRules.invoicingAmount]"
|
||||
:maxLength='50'
|
||||
@change="e => e.target.value = (e.target.value.replace(/[^0-9.]/g, '')).trim()"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="开票号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入开票号"
|
||||
v-decorator="['invoicingNum',validatorRules.invoicingNum]"
|
||||
:maxLength='50'
|
||||
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="开票日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date placeholder="请选择开票日期"
|
||||
style="width: 100%;"
|
||||
v-decorator="['invoicingDate',validatorRules.invoicingDate]"
|
||||
:trigger-change="true"
|
||||
date-format="YYYY-MM-DD"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-textarea
|
||||
placeholder="请输入备注"
|
||||
v-decorator="['remarks']"
|
||||
:auto-size="{ minRows: 3, maxRows: 6 }"
|
||||
:maxLength='200'
|
||||
@change="e => {e.target.value = (e.target.value + '').trim()}"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JDate from '../../../../components/tools/JDate'
|
||||
import pick from 'lodash.pick'
|
||||
import { money } from '../../../../utils/validate'
|
||||
|
||||
export default {
|
||||
name: 'InvoicingModule',
|
||||
components: { JDate },
|
||||
data() {
|
||||
return {
|
||||
title: '来款信息',
|
||||
width: 600,
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 18 }
|
||||
},
|
||||
validatorRules: {
|
||||
invoicingAmount: {
|
||||
rules: [{ required: true, validator: this.checkMoney }],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
invoicingNum: {
|
||||
rules: [{ required: true, message: '请输入开票号' }],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
invoicingDate: {
|
||||
rules: [{ required: true, message: '请选择开票日期' }],
|
||||
validateTrigger: 'change'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.edit({})
|
||||
},
|
||||
edit(record) {
|
||||
this.model = Object.assign({}, record)
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'invoicingAmount', 'invoicingNum', 'invoicingDate', 'remarks'))
|
||||
})
|
||||
},
|
||||
handleOk() {
|
||||
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
close() {
|
||||
this.visible = false
|
||||
},
|
||||
/**
|
||||
* 校验金额格式
|
||||
* @param rules
|
||||
* @param value
|
||||
* @param callback
|
||||
*/
|
||||
checkMoney(rules, value, callback) {
|
||||
if (value) {
|
||||
if (money(value)) {
|
||||
callback()
|
||||
return
|
||||
}
|
||||
callback('请输入正确格式的金额')
|
||||
}
|
||||
callback('请输入到账金额')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
switchFullscreen
|
||||
@ok="handleAdd"
|
||||
@cancel="handleCancel"
|
||||
okText="添加阶段"
|
||||
cancelText="关闭">
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<div v-for="(item, index) in stageList" :key="index" class="stage-box">
|
||||
<div class="title">
|
||||
<div class="title-text">第{{ item.chinaNumIndex }}阶段</div>
|
||||
<img src="../../../../assets/imgs/icon/icon_edit.png" @click="handleEdit(item)">
|
||||
</div>
|
||||
<a-row>
|
||||
<a-col :span="8">
|
||||
<div class="stage">
|
||||
<div class="stage-title">开票金额：</div>
|
||||
<div class="stage-content stage-content-money">{{ item.invoicingAmount }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<div class="stage">
|
||||
<div class="stage-title">开票号：</div>
|
||||
<div class="stage-content">{{ item.invoicingNum }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<div class="stage">
|
||||
<div class="stage-title">开票日期：</div>
|
||||
<div class="stage-content">{{ item.invoicingDate }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col>
|
||||
<div class="stage">
|
||||
<div class="stage-title stage-remark-title">备注：</div>
|
||||
<div class="stage-content">{{ item.remarks }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-spin>
|
||||
<invoicing-module ref="invoicingModal"></invoicing-module>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InvoicingModule from './InvoicingModule'
|
||||
|
||||
export default {
|
||||
name: 'InvoicingStageModule',
|
||||
components: { InvoicingModule },
|
||||
data() {
|
||||
return {
|
||||
title: '开票阶段',
|
||||
width: 800,
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
// 阶段列表，用于循环展示阶段信息
|
||||
stageList: [
|
||||
{
|
||||
invoicingAmount: 1000,
|
||||
invoicingNum: '1234465',
|
||||
invoicingDate: '2020-09-09',
|
||||
remarks: '这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!'
|
||||
}, {
|
||||
invoicingAmount: 2000,
|
||||
invoicingNum: '1234465',
|
||||
invoicingDate: '2020-09-08',
|
||||
remarks: '这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
handleAdd() {
|
||||
this.$refs.invoicingModal.title = '添加阶段'
|
||||
this.$refs.invoicingModal.add()
|
||||
},
|
||||
handleEdit(record) {
|
||||
this.$refs.invoicingModal.title = '编辑阶段'
|
||||
this.$refs.invoicingModal.edit(record)
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
open() {
|
||||
this.visible = true
|
||||
},
|
||||
close() {
|
||||
this.visible = false
|
||||
},
|
||||
loadData() {
|
||||
// 匹配每一项的汉字序号
|
||||
this.stageList.forEach((item, index) => {
|
||||
item.chinaNumIndex = this.convertToChinaNum(index + 1)
|
||||
})
|
||||
},
|
||||
//将数字（整数）转为汉字
|
||||
convertToChinaNum(num) {
|
||||
let arr1 = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九')
|
||||
let arr2 = new Array('', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿')//可继续追加更高位转换值
|
||||
if (!num || isNaN(num)) {
|
||||
return '零'
|
||||
}
|
||||
let english = num.toString().split('')
|
||||
let result = ''
|
||||
for (let i = 0; i < english.length; i++) {
|
||||
let des_i = english.length - 1 - i//倒序排列设值
|
||||
result = arr2[i] + result
|
||||
let arr1_index = english[des_i]
|
||||
result = arr1[arr1_index] + result
|
||||
}
|
||||
//将【零千、零百】换成【零】 【十零】换成【十】
|
||||
result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十')
|
||||
//合并中间多个零为一个零
|
||||
result = result.replace(/零+/g, '零')
|
||||
//将【零亿】换成【亿】【零万】换成【万】
|
||||
result = result.replace(/零亿/g, '亿').replace(/零万/g, '万')
|
||||
//将【亿万】换成【亿】
|
||||
result = result.replace(/亿万/g, '亿')
|
||||
//移除末尾的零
|
||||
result = result.replace(/零+$/, '')
|
||||
//将【零一十】换成【零十】
|
||||
//result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十
|
||||
//将【一十】换成【十】
|
||||
result = result.replace(/^一十/g, '十')
|
||||
return result
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.stage-box {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
|
||||
&-text {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
font-family: NotoSansHans, NotoSansHans-DemiLight;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&-text::before {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: -10px;
|
||||
content: "";
|
||||
height: 20px;
|
||||
width: 2px;
|
||||
background: #069f99;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.stage {
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
|
||||
&-title {
|
||||
width: 30%;
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
font-family: NotoSansHans, NotoSansHans-Light;
|
||||
color: #4D4D4D;
|
||||
}
|
||||
|
||||
&-remark-title {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
&-content {
|
||||
padding-right: 20px;
|
||||
word-break: break-all;
|
||||
font-size: 14px;
|
||||
font-family: NotoSansHans, NotoSansHans-Light;
|
||||
color: #4D4D4D;
|
||||
|
||||
&-money {
|
||||
color: #D40505;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div>
|
||||
<page-header-title :img-for-icon="IconImg"></page-header-title>
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域-start -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入来款单位" v-model="queryParam.chargeCompanyTemporaryName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="来款项目" v-model="queryParam.chargeProject"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
|
||||
<a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- /查询区域-->
|
||||
|
||||
<!-- 操作按钮区域-->
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" @click="setTimedDunning">设置定时催款</a-button>
|
||||
<a-button type="primary" icon="export" @click="handleExportXls('到账开票')">导出</a-button>
|
||||
</div>
|
||||
<!-- 操作按钮区域-end-->
|
||||
|
||||
<!-- table表格区域-->
|
||||
<div>
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:scroll="{x: 1300}"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange"
|
||||
class="j-table-force-nowrap">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<template slot="projectName" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="18" class="primary-color"
|
||||
@click="toProjectMaintenance(record)"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<!-- 打包、需要发票、到账、开票、邮寄状态-->
|
||||
<template slot="status" slot-scope="text,record">
|
||||
<status-slot :statu-obj="record" :status-no="text" :status-type="true"></status-slot>
|
||||
</template>
|
||||
|
||||
<template slot="status-pack" slot-scope="text,record">
|
||||
<status-slot :statu-obj="record" :status-no="text"></status-slot>
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
<dunning-set-time-module ref="setTimeModal" @ok="modalFormOk"></dunning-set-time-module>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
|
||||
import IconImg from '@/assets/imgs/icon/icon_financial.png'
|
||||
import { JeroListMixin } from '../../../mixins/JeroListMixin'
|
||||
import StatusSlot from '../../../components/tools/StatusSlot'
|
||||
import DunningSetTimeModule from './modules/DunningSetTimeModule'
|
||||
|
||||
export default {
|
||||
name: 'DunningList',
|
||||
components: { PageHeaderTitle, StatusSlot, DunningSetTimeModule },
|
||||
mixins: [JeroListMixin],
|
||||
data() {
|
||||
return {
|
||||
IconImg,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 10 }
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
}, {
|
||||
title: '来款项目',
|
||||
align: 'center',
|
||||
width: 200,
|
||||
dataIndex: 'chargeProject',
|
||||
scopedSlots: { customRender: 'projectName' }
|
||||
}, {
|
||||
title: '来款用途',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
dataIndex: 'chargeUse_dictText',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '负责人',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'principalName',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '来款单位',
|
||||
align: 'center',
|
||||
width: 200,
|
||||
dataIndex: 'chargeCompanyTemporaryName',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '联系人',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'contactsTemporaryName',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收金额',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'receivableAmount'
|
||||
}, {
|
||||
title: '实收金额',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'paidAmount'
|
||||
}, {
|
||||
title: '打包',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
dataIndex: 'pack',
|
||||
scopedSlots: { customRender: 'status-pack' }
|
||||
}, {
|
||||
title: '需要发票',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
dataIndex: 'needInvoice',
|
||||
scopedSlots: { customRender: 'status-pack' }
|
||||
}, {
|
||||
title: '到账',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
dataIndex: 'inAccount',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
}, {
|
||||
title: '开票',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
dataIndex: 'makeInvoice',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
}, {
|
||||
title: '邮寄',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
dataIndex: 'mail',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
}, {
|
||||
title: '催款时间',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'dunningTime',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
],
|
||||
url: {
|
||||
list: '',
|
||||
exportXlsUrl: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setTimedDunning() {
|
||||
this.$refs.setTimeModal.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
switchFullscreen
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
okText="保存"
|
||||
cancelText="关闭">
|
||||
<a-calendar :fullscreen="false" v-model="setTimeDate"></a-calendar>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DunningSetTimeModule',
|
||||
data() {
|
||||
return {
|
||||
title: '设置催款时间',
|
||||
width: 600,
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
setTimeDate: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOk() {
|
||||
console.log(this.setTimeDate)
|
||||
this.$emit('ok')
|
||||
this.close()
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
open() {
|
||||
this.visible = true
|
||||
},
|
||||
close() {
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -124,6 +124,10 @@
|
||||
<batch-income-payment-module ref="batchIncomePaymentModal" @ok="modalFormOk"></batch-income-payment-module>
|
||||
<!-- 批量开票-->
|
||||
<batch-invoicing-module ref="batchInvoicingModal" @ok="modalFormOk"></batch-invoicing-module>
|
||||
<!-- 来款阶段-->
|
||||
<arrive-stage-module ref="arriveStage" @ok="modalFormOk"></arrive-stage-module>
|
||||
<!-- 开票阶段-->
|
||||
<invoicing-stage-module ref="invoicingStage" @ok="modalFormOk"></invoicing-stage-module>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -136,6 +140,8 @@ import StatusSlot from '../../components/tools/StatusSlot'
|
||||
import PackProjectSelectProjectModule from './modules/PackProjectSelectProjectModule'
|
||||
import BatchIncomePaymentModule from './modules/BatchIncomePaymentModule'
|
||||
import BatchInvoicingModule from './modules/BatchInvoicingModule'
|
||||
import ArriveStageModule from '../financialManagement/arriveAndInvoicing/modules/ArriveStageModule'
|
||||
import InvoicingStageModule from '../financialManagement/arriveAndInvoicing/modules/InvoicingStageModule'
|
||||
|
||||
export default {
|
||||
name: 'PackProjectMaintenance',
|
||||
@@ -145,7 +151,9 @@ export default {
|
||||
StatusSlot,
|
||||
PackProjectSelectProjectModule,
|
||||
BatchIncomePaymentModule,
|
||||
BatchInvoicingModule
|
||||
BatchInvoicingModule,
|
||||
ArriveStageModule,
|
||||
InvoicingStageModule
|
||||
},
|
||||
mixins: [JeroListMixin],
|
||||
data() {
|
||||
@@ -275,10 +283,16 @@ export default {
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 160,
|
||||
width: 180,
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{
|
||||
id: 1,
|
||||
chargeProject: 'asd'
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: '',
|
||||
exportXlsUrl: ''
|
||||
@@ -320,14 +334,24 @@ export default {
|
||||
batchInvoicing() {
|
||||
this.$refs.batchInvoicingModal.open()
|
||||
},
|
||||
incomePayment() {
|
||||
|
||||
/**
|
||||
* 来款
|
||||
* @param id
|
||||
*/
|
||||
incomePayment(id) {
|
||||
console.log(id)
|
||||
this.$refs.arriveStage.open()
|
||||
},
|
||||
cancelPack() {
|
||||
|
||||
},
|
||||
invoicing() {
|
||||
|
||||
/**
|
||||
* 开票
|
||||
* @param id
|
||||
*/
|
||||
invoicing(id) {
|
||||
console.log(id)
|
||||
this.$refs.invoicingStage.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user