|
|
@@ -0,0 +1,318 @@
|
|
|
+<template>
|
|
|
+ <ContentCard class="add-invoice">
|
|
|
+ <template #title>订单发票录入</template>
|
|
|
+ <section class="list-content">
|
|
|
+ <div class="table-container">
|
|
|
+ <Table :loading="listState.loading" :columns="tableState.columns" :data="listState.list"></Table>
|
|
|
+ </div>
|
|
|
+ <div class="pagination-container">
|
|
|
+ <Page
|
|
|
+ :total="listState.total"
|
|
|
+ :page-size="listState.pageSize"
|
|
|
+ :current="listState.pageNum"
|
|
|
+ :page-size-opts="[5,10,20,50,100]"
|
|
|
+ @on-change="onPageChange"
|
|
|
+ @on-page-size-change="onSizeChange"
|
|
|
+ show-elevator show-sizer></Page>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <Modal
|
|
|
+ v-model="modal.addInvoiceShow"
|
|
|
+ title="订单发票录入"
|
|
|
+ :mask-closable="false"
|
|
|
+ ref="invoiceModal"
|
|
|
+ loading
|
|
|
+ @on-ok="copyAndCreateModalOk">
|
|
|
+ <Form class="modal-form-container">
|
|
|
+ <FormItem label="订单编号">
|
|
|
+ <!-- <Input type="text" v-model="addInvoiceModalForm.order_code" readonly></Input> -->
|
|
|
+ {{ addInvoiceModalForm.order_code }}
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="发票地址" prop="invoiceLink">
|
|
|
+ <Input type="text" v-model="addInvoiceModalForm.invoiceLink" placeholder="请输入发票地址"></Input>
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+ </ContentCard>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ContentCard from '@/components/ContentCard'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'AddInvoice',
|
|
|
+ components: {
|
|
|
+ ContentCard,
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ tableState: {
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '订单编号',
|
|
|
+ key: 'order_code'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '产品类型',
|
|
|
+ key: 'product_type'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '发票类型',
|
|
|
+ key: 'invoice_variety'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '发票抬头',
|
|
|
+ key: 'invoice_type'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '公司名称',
|
|
|
+ key: 'company_name'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '单位税号',
|
|
|
+ key: 'taxpayer_identnum'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '单位地址',
|
|
|
+ key: 'company_address'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '电话号码',
|
|
|
+ key: 'phone'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '开户银行',
|
|
|
+ key: 'bank_name'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '银行账号',
|
|
|
+ key: 'bank_account'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '开票金额（元）',
|
|
|
+ key: 'invoice_money'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '开票备注',
|
|
|
+ key: 'remark'
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // title: '来源',
|
|
|
+ // key: 'sourceText'
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ key: 'action',
|
|
|
+ align: 'center',
|
|
|
+ render: (h, params) => {
|
|
|
+ return h('div', {
|
|
|
+ class: 'table-action-container'
|
|
|
+ },
|
|
|
+ [
|
|
|
+ h('a', {
|
|
|
+ class: 'table-action-item',
|
|
|
+ on: {
|
|
|
+ click: () => {
|
|
|
+ this.showAddInvoiceInfoDialog(params)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, '发票录入')
|
|
|
+ ]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ listState: {
|
|
|
+ loaded: false, // 是否已经搜索过
|
|
|
+ loading: false,
|
|
|
+ pageNum: 1, // 当前页, 从0开始
|
|
|
+ pageSize: 10, // 每页多少条数据
|
|
|
+ total: 0, // 一共多少条数据
|
|
|
+ list: [
|
|
|
+ // {
|
|
|
+ // company_name: '',
|
|
|
+ // invoice_type: '个人',
|
|
|
+ // invoice_variety: '电子普通发票',
|
|
|
+ // order_code: '113029303292',
|
|
|
+ // phone: '13525530909',
|
|
|
+ // product_type: '',
|
|
|
+ // source: 1
|
|
|
+ // }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ modal: {
|
|
|
+ addInvoiceShow: false,
|
|
|
+ },
|
|
|
+ defaultAddInvoiceModalForm: {
|
|
|
+ order_code: '',
|
|
|
+ invoiceLink: '',
|
|
|
+ },
|
|
|
+ addInvoiceModalForm: {
|
|
|
+ order_code: '',
|
|
|
+ invoiceLink: '',
|
|
|
+ },
|
|
|
+ pageCache: {
|
|
|
+ orderInfo: {}
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.doSearch()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ startLoading() {
|
|
|
+ this.listState.loading = true
|
|
|
+ this.listState.loaded = false
|
|
|
+ },
|
|
|
+ finishLoading() {
|
|
|
+ this.listState.loading = false
|
|
|
+ this.listState.loaded = true
|
|
|
+ },
|
|
|
+ resetListState() {
|
|
|
+ const state = {
|
|
|
+ loaded: false,
|
|
|
+ loading: false,
|
|
|
+ pageNum: 1,
|
|
|
+ total: 0,
|
|
|
+ list: []
|
|
|
+ }
|
|
|
+ Object.assign(this.listState, state)
|
|
|
+ },
|
|
|
+ doSearch() {
|
|
|
+ this.resetListState()
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ const params = {
|
|
|
+ pageSize: this.listState.pageSize,
|
|
|
+ pageNum: this.listState.pageNum, // 当前页, 从1开始
|
|
|
+ offset: (this.listState.pageNum - 1) * this.listState.pageSize
|
|
|
+ }
|
|
|
+ this.startLoading()
|
|
|
+ this.$request('/order/invoiceList').data(params).success((r) => {
|
|
|
+ if (r && r.data) {
|
|
|
+ this.listState.total = r.data.total || 0
|
|
|
+ if (Array.isArray(r.data.list))
|
|
|
+ this.listState.list = r.data.list.map((m) => {
|
|
|
+ return {
|
|
|
+ ...m,
|
|
|
+ company_name: m.company_name || '',
|
|
|
+ product_type: m.product_type || '',
|
|
|
+ sourceText: m.source === 1 ? '线下开票' : '线上开票'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.finishLoading()
|
|
|
+ }).error(() => {
|
|
|
+ this.finishLoading()
|
|
|
+ }).post()
|
|
|
+ },
|
|
|
+ onPageChange(p) {
|
|
|
+ this.listState.pageNum = p
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ onSizeChange(s) {
|
|
|
+ this.listState.pageSize = s
|
|
|
+ this.listState.pageNum = 1
|
|
|
+ this.onPageChange(this.listState.pageNum)
|
|
|
+ },
|
|
|
+ showAddInvoiceInfoDialog(params) {
|
|
|
+ this.modal.addInvoiceShow = true
|
|
|
+ this.pageCache.orderInfo = params.row
|
|
|
+
|
|
|
+ this.addInvoiceModalForm.order_code = params.row.order_code
|
|
|
+ },
|
|
|
+ resetAddInvoiceModalForm() {
|
|
|
+ const def = JSON.parse(JSON.stringify(this.defaultAddInvoiceModalForm))
|
|
|
+ this.addInvoiceModalForm = def
|
|
|
+ // Object.assign(this.addInvoiceModalForm, def)
|
|
|
+ },
|
|
|
+ resetModalLoading() {
|
|
|
+ const modalVm = this.$refs.invoiceModal
|
|
|
+ if (modalVm) {
|
|
|
+ modalVm.buttonLoading = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ copyAndCreateModalOk() {
|
|
|
+ // const { orderInfo } = this.pageCache
|
|
|
+ const params = {
|
|
|
+ orderCodes: this.addInvoiceModalForm.order_code, // 订单编号
|
|
|
+ url: this.addInvoiceModalForm.invoiceLink, // 发票地址
|
|
|
+ logisticsCode: '', // 物流号
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!params.orderCodes) {
|
|
|
+ this.resetModalLoading()
|
|
|
+ return this.$Message.error('订单编号不能为空')
|
|
|
+ }
|
|
|
+ // if (!params.logisticsCode) {
|
|
|
+ // this.resetModalLoading()
|
|
|
+ // return this.$Message.error('物流号不能为空')
|
|
|
+ // }
|
|
|
+ if (!params.url) {
|
|
|
+ this.resetModalLoading()
|
|
|
+ return this.$Message.error('发票地址不能为空')
|
|
|
+ }
|
|
|
+ this.$request('/order/savaInvoice').data(params).success((r) => {
|
|
|
+ if (r) {
|
|
|
+ if (r.status === 'success') {
|
|
|
+ this.$Message.success(r.info || '提交成功')
|
|
|
+ this.modal.addInvoiceShow = false
|
|
|
+ this.resetAddInvoiceModalForm()
|
|
|
+ this.getList()
|
|
|
+ } else {
|
|
|
+ this.$Message.success(r.info || '提交失败')
|
|
|
+ }
|
|
|
+ this.resetModalLoading()
|
|
|
+ }
|
|
|
+ }).error(() => {
|
|
|
+ this.modal.addInvoiceShow = false
|
|
|
+ }).post()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+
|
|
|
+ $height: 38px;
|
|
|
+ ::v-deep {
|
|
|
+ .ivu-input {
|
|
|
+ height: $height;
|
|
|
+ }
|
|
|
+ .ivu-btn {
|
|
|
+ height: $height;
|
|
|
+ line-height: $height;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep {
|
|
|
+ .table-action-item {
|
|
|
+ &:not(:last-of-type) {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-modal {
|
|
|
+ .ivu-modal-body {
|
|
|
+ max-height: 400px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.pagination-container {
|
|
|
+ text-align: right;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-form-container {
|
|
|
+ min-height: 200px;
|
|
|
+}
|
|
|
+.modal-form-item-value {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+</style>
|
