|
|
@@ -0,0 +1,216 @@
|
|
|
+<!--
|
|
|
+ * @Author: liuzhenlin 461480418@qq.ocm
|
|
|
+ * @Date: 2023-01-10 13:40:41
|
|
|
+ * @LastEditors: liuzhenlin
|
|
|
+ * @LastEditTime: 2023-01-11 18:59:03
|
|
|
+ * @Description: file content
|
|
|
+ * @FilePath: \订单全流程管理系统\src\views\contract\invoice.vue
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div class="collection-plan">
|
|
|
+ <vab-query-form>
|
|
|
+ <vab-query-form-top-panel>
|
|
|
+ <el-form :inline="true" label-width="0px" :model="queryForm" @submit.native.prevent>
|
|
|
+ <el-form-item prop="contractCode">
|
|
|
+ <el-input
|
|
|
+ v-model="queryForm.contractCode"
|
|
|
+ clearable
|
|
|
+ placeholder="合同编号"
|
|
|
+ @keyup.enter.native="queryData" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </vab-query-form-top-panel>
|
|
|
+ <vab-query-form-left-panel :span="12">
|
|
|
+ <!-- <el-button icon="el-icon-plus" size="mini" type="primary" @click="handleEdit()">新建</el-button>
|
|
|
+ <el-button icon="el-icon-delete" type="danger" @click="handleDelete()">删除</el-button> -->
|
|
|
+ </vab-query-form-left-panel>
|
|
|
+ <vab-query-form-right-panel :span="12">
|
|
|
+ <table-tool :check-list.sync="checkList" :columns="columns" />
|
|
|
+ </vab-query-form-right-panel>
|
|
|
+ </vab-query-form>
|
|
|
+ <el-table v-loading="listLoading" border :data="invoiceData" :height="height" @selection-change="setSelectRows">
|
|
|
+ <el-table-column align="center" show-overflow-tooltip type="selection" />
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in finallyColumns"
|
|
|
+ :key="index"
|
|
|
+ align="center"
|
|
|
+ :label="item.label"
|
|
|
+ :min-width="item.width"
|
|
|
+ :prop="item.prop"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :sortable="item.sortable">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span v-if="item.prop == 'invoiceType'">
|
|
|
+ <!-- {{ invoiceTypeData.filter((item) => item.key == row.invoiceType)[0].value || '-' }} -->
|
|
|
+ </span>
|
|
|
+ <span v-else-if="item.prop == 'approStatus'">
|
|
|
+ {{ row.approStatus == '10' ? '未通过' : '已通过' }}
|
|
|
+ </span>
|
|
|
+ <span v-else-if="item.prop == 'contractAmount'">
|
|
|
+ {{ formatPrice(row.contractAmount) }}
|
|
|
+ </span>
|
|
|
+ <span v-else-if="item.prop == 'invoiceDate'">{{ parseTime(row.invoiceDate, '{y}-{m}-{d}') }}</span>
|
|
|
+ <span v-else-if="item.prop == 'actualInvoiceDate'">
|
|
|
+ {{ parseTime(row.actualInvoiceDate, '{y}-{m}-{d}') }}
|
|
|
+ </span>
|
|
|
+ <span v-else-if="item.prop == 'invoiceAmount'">
|
|
|
+ {{ formatPrice(row.invoiceAmount) }}
|
|
|
+ </span>
|
|
|
+ <span v-else>{{ row[item.prop] }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" fixed="right" label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" @click="$refs.invoicing.init(scope.row.id)">通过</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ :current-page="queryForm.pageNum"
|
|
|
+ :layout="layout"
|
|
|
+ :page-size="queryForm.pageSize"
|
|
|
+ :total="total"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ @size-change="handleSizeChange" />
|
|
|
+ <invoicing ref="invoicing" @invoiceSave="queryData" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import to from 'await-to-js'
|
|
|
+ import invoiceApi from '@/api/contract/invoice'
|
|
|
+ import Invoicing from './components/Invoicing'
|
|
|
+ import TableTool from '@/components/table/TableTool'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'DetailsInvoice',
|
|
|
+ components: { Invoicing, TableTool },
|
|
|
+ props: {
|
|
|
+ details: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ height: this.$baseTableHeight(2),
|
|
|
+ listLoading: true,
|
|
|
+ layout: 'total, sizes, prev, pager, next, jumper',
|
|
|
+ total: 0,
|
|
|
+ queryForm: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ contractCode: '', // 合同编号
|
|
|
+ custName: '', // 客户名称 ()
|
|
|
+ },
|
|
|
+ checkList: [],
|
|
|
+ invoiceData: [],
|
|
|
+ invoiceTypeData: [], //发票类型
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ label: '合同编号',
|
|
|
+ width: '120px',
|
|
|
+ prop: 'contractCode',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '合同金额',
|
|
|
+ width: '100px',
|
|
|
+ prop: 'contractAmount',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '开票金额（元）',
|
|
|
+ width: '120px',
|
|
|
+ prop: 'invoiceAmount',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '开票日期',
|
|
|
+ width: '120px',
|
|
|
+ prop: 'invoiceDate',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '实际开票日期',
|
|
|
+ width: '120px',
|
|
|
+ prop: 'actualInvoiceDate',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '开票类型',
|
|
|
+ width: '80px',
|
|
|
+ prop: 'invoiceType',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '发票号码',
|
|
|
+ width: 'auto',
|
|
|
+ prop: 'invoiceCode',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '快递单号',
|
|
|
+ width: 'auto',
|
|
|
+ prop: 'courierCode',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '审核状态',
|
|
|
+ width: 'auto',
|
|
|
+ prop: 'approStatus',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '备注',
|
|
|
+ width: 'auto',
|
|
|
+ prop: 'remark',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ finallyColumns() {
|
|
|
+ return this.columns.filter((item) => this.checkList.includes(item.label))
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getOptions()
|
|
|
+ this.queryData()
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.queryForm.pageSize = val
|
|
|
+ this.queryData()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.queryForm.pageNum = val
|
|
|
+ this.queryData()
|
|
|
+ },
|
|
|
+ setSelectRows(val) {
|
|
|
+ this.selectRows = val.map((item) => item.id)
|
|
|
+ },
|
|
|
+ getOptions() {
|
|
|
+ Promise.all([this.getDicts('invoice_type')])
|
|
|
+ .then(([invoiceType]) => {
|
|
|
+ this.invoiceTypeData = invoiceType.data.values || []
|
|
|
+ })
|
|
|
+ .catch((err) => console.log(err))
|
|
|
+ },
|
|
|
+ async queryData() {
|
|
|
+ this.listLoading = true
|
|
|
+ const params = { ...this.queryForm }
|
|
|
+ const [err, res] = await to(invoiceApi.getList(params))
|
|
|
+ if (err) return
|
|
|
+ this.invoiceData = res.data.list
|
|
|
+ this.listLoading = false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ $base: '.collection-plan';
|
|
|
+ #{$base} {
|
|
|
+ height: calc(100vh - 60px - 12px * 2 - 40px);
|
|
|
+ padding: 12px;
|
|
|
+ background: #fff;
|
|
|
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s, color 0.1s, font-size 0s;
|
|
|
+ }
|
|
|
+</style>
|
liuzl