item-management-web/src/views/finance/invoiceCheck.vue

<template>
  <div class="app-container">
    <div class="title-container">
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
    </div>
    <y-page-list-layout :page-list="pageData" :page-para="listQuery" :get-page-list="getList">
      <template slot="left">
        <el-input v-model="listQuery.keyword" placeholder="关键字搜索..." clearable
          style="margin-left: 20px;width: 500px;float: left;">
        </el-input>
        <el-date-picker
          style="margin-left: 20px;float: left;"
          v-model="planDate"
          type="daterange"
          align="center"
          unlink-panels
          range-separator="至"
          start-placeholder="计划开票（开始）"
          end-placeholder="计划开票（结束）"
          :picker-options="pickerOptions" value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-date-picker
          style="margin-left: 20px;float: left;"
          v-model="applyDate"
          type="daterange"
          align="center"
          unlink-panels
          range-separator="至"
          start-placeholder="申请时间（开始）"
          end-placeholder="申请时间（结束）"
          :picker-options="pickerOptions" value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-button class="filter-item" style="margin-left: 10px;float: left;" type="primary" @click="searchList" round>搜索
        </el-button>
        <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置
        </el-button>
      </template>
      <parentTable  :data="pageData.records" slot="table" style="width: 100%;">
        <el-table-column label="业务类型" align="center">
          <template slot-scope="{row}">
            <span>{{ businessTypeAlias(row.businessType) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单名称" align="center" width="300" show-overflow-tooltip>
          <template slot-scope="{row}">
            <span>{{ row.orderName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单号" align="center" width="200">
          <template slot-scope="{row}">
            <span>{{ row.orderId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发票抬头" align="center">
          <template slot-scope="{row}">
            <span>{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="税号" align="center">
          <template slot-scope="{row}">
            <span>{{ row.taxNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发票类型" align="center">
          <template slot-scope="{row}">
            <span>{{ row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="待开金额" align="center">
          <template slot-scope="{row}">
            <span>{{ row.planAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="计划开票时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.planMakeDate}}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            <span>{{ row.remark==null?'-':row.remark}}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请人" align="center">
          <template slot-scope="{row}">
            <span>{{ row.applyName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" align="center" width="250">
          <template slot-scope="{row}">
            <span>{{ row.created }}</span>
          </template>
        </el-table-column>
        <el-table-column label="开票状态" align="center">
          <template slot-scope="{row}">
            <span style="color:red;font-weight:bold">{{ row.state }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150" fixed="right">
          <template slot-scope="{row}">
              <PermissionButton  menu-code="_views_make_invoice_check" class-name="filter-item" type="success"
              :page-jump="false" round size="mini" @click="openMakeDialog(row)" />
          </template>
        </el-table-column>
      </parentTable>
    </y-page-list-layout>
    <el-dialog :visible.sync="newInvoiceDialog" width="75%" center  custom-class="doWarehouseClass">
      <el-form ref="invoice" :model="invoice" >
        <el-divider content-position="left">开票信息</el-divider>
          <el-row>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="发票抬头："
                :rules="{required: true, message: '发票抬头不能为空', trigger: 'blur'}"
                prop="title"
                label-width="140px"
                class="postInfo-container-item"
              >
                <el-input v-model.trim="invoice.title" class="filter-item" readonly disabled />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="发票类型："
                :rules="{required: true, message: '发票类型不能为空', trigger: 'blur'}"
                prop="type"
                label-width="140px"
                class="postInfo-container-item"
              >
                <el-select v-model="invoice.type"  style="width:206px" readonly disabled>
                  <el-option label="普票" value="普票"></el-option> 
                  <el-option label="专票" value="专票"></el-option> 
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="税号："
                :rules="{required: true, message: '税号不能为空', trigger: 'blur'}"
                prop="taxNo"
                label-width="140px"
                class="postInfo-container-item"
              >
                <el-input v-model.trim="invoice.taxNo" class="filter-item" readonly disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="计划开票金额(元):"
                prop="planAmount"
                :rules="{required: true, message: '使用权面积不能为空', trigger: 'blur'}"
                label-width="140px"
                class="postInfo-container-item"
              >
              <el-input-number :precision="2" :min="0" :value-on-clear="0" v-model.number="invoice.planAmount" type="number"  readonly disabled
                style="width:206px" class="filter-item" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="计划开票日期："
                prop="planMakeDate"
                :rules="{required: true, message: '计划开票日期不能为空', trigger: 'blur'}"
                label-width="140px"
                class="postInfo-container-item"
              >
                <el-date-picker
                  v-model="invoice.planMakeDate" type="date" placeholder="选择日期" style="width:206px" readonly disabled>
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row> 
          <el-row>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="实开金额："
                :rules="{required: true, message: '实际开票金额不能为空', trigger: 'blur'}"
                prop="realAmount"
                label-width="140px"
                class="postInfo-container-item"
              >
              <el-input-number :precision="2" :min="0" :value-on-clear="0" v-model.number="invoice.realAmount" type="number" 
                style="width:206px" class="filter-item" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="实开日期："
                prop="realMakeDate"
                :rules="{required: true, message: '实际开票日期不能为空', trigger: 'blur'}"
                label-width="140px"
                class="postInfo-container-item"
              >
                <el-date-picker
                  v-model="invoice.realMakeDate" type="date" placeholder="选择日期" style="width:206px">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="全额收款："
                prop="isPayAll"
                label-width="140px"
                class="postInfo-container-item"
              >
                <el-radio  :value="invoice.isPayAll" :label="false||null" border size="medium" readonly>否</el-radio>
                <el-radio  :value="invoice.isPayAll" :label="true" border size="medium" readonly>是</el-radio>
              </el-form-item>
            </el-col>
          </el-row> 
          <el-row>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="业务类型："
                prop="businessType"
                label-width="140px"
                class="postInfo-container-item"
              >
                <el-input :value="businessTypeAlias(invoice.businessType)" class="filter-item" readonly disabled />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="12" :span="6">
              <el-form-item
                label="报告号："
                prop="reprotNo"
                label-width="140px"
                class="postInfo-container-item"
              >
              <el-input v-model.trim="invoice.reportNo" class="filter-item" readonly disabled />
              </el-form-item>
            </el-col>
          </el-row>
        <el-divider content-position="left">银行信息</el-divider>
          <el-row>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="开户行："
                prop="bankName"
                label-width="140px"
                class="postInfo-container-item"
              >
                <el-input v-model.trim="invoice.bankName" class="filter-item" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="银行账号："
                prop="bankAccount"
                label-width="140px"
                class="postInfo-container-item"
              >
              <el-input v-model.trim="invoice.bankAccount" class="filter-item" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="地址："
                prop="bankAddress"
                label-width="140px"
                class="postInfo-container-item"
              >
                <el-input v-model.trim="invoice.bankAddress" class="filter-item" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="电话："
                prop="bankTel"
                label-width="140px"
                class="postInfo-container-item"
              >
              <el-input v-model.trim="invoice.bankTel" class="filter-item" />
              </el-form-item>
            </el-col>
          </el-row>
        <el-divider content-position="left">发票信息</el-divider>
          <el-row>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="开票项目："
                prop="makeItem"
                label-width="140px"
                class="postInfo-container-item"
              >
                <el-input v-model.trim="invoice.makeItem" class="filter-item" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="项目数量:"
                prop="itemQuantity"
                label-width="140px"
                class="postInfo-container-item"
              >
              <el-input v-model.trim="invoice.itemQuantity" class="filter-item" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="计量单位："
                prop="itemUnit"
                label-width="140px"
                class="postInfo-container-item"
              >
              <el-input v-model.trim="invoice.itemUnit" class="filter-item" placeholder="个/套/箱/次/斤/公斤/..."/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="税点："
                prop="taxRate"
                label-width="140px"
                class="postInfo-container-item"
              >
              <el-input-number :precision="2" :min="0" :value-on-clear="0" v-model.number="invoice.taxRate" type="number" 
                style="width:206px" class="filter-item" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
              <el-form-item
                label="税额:"
                prop="taxAmount"
                label-width="140px"
                class="postInfo-container-item"
              >
              <el-input-number :precision="2" :min="0" :value-on-clear="0" v-model.number="invoice.taxAmount" type="number" 
                style="width:206px" class="filter-item" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="12" :lg="18" :span="6">
              <el-form-item
                label="备注："
                prop="remark"
                label-width="140px"
                class="postInfo-container-item"
              >
                <el-input v-model.trim="invoice.remark" type="textarea" class="filter-item" />
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newInvoiceDialog = false">取 消</el-button>
        <el-button type="primary" @click="makeInvoice()" :disabled="this.invoice.state!='审核中'">确认开票</el-button>
        <el-button type="danger" @click="refuseApply()" :disabled="this.invoice.state!='审核中'">拒绝申请</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import YPageListLayout from '@/components/YPageListLayout'
import Breadcrumb from '@/components/Breadcrumb'

export default {
  name: 'invoiceCheck',
  components: {
    Breadcrumb,
    YPageListLayout,
  },
  filters: {
    
  },
  data() {
    return {
      pageData: { records: [] },
      listQuery: {
        page: 1,
        size: 10,
        descs: 'id',
        keyword:null
      },
      newInvoiceDialog:false,
      invoice:{
        id:null,
        productionFundId:null,
        title:null,
        type:null,
        taxNo:null,
        planAmount:null,
        planMakeDate:null,
        bankName:null,
        bankAccount:null,
        bankAddress:null,
        bankTel:null,
        makeItem:null,
        itemQuantity:null,
        itemUnit:null,
        taxRate:null,
        taxAmount:null,
        remark:null,
        businessType:null,
        reportNo:null
      },
      planDate:"",
      applyDate:"",
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
    }
  },
  created() {
    this.getList();
  },
  methods: {
  
    resetSearch() {
      this.$router.push({ query: {} });
      this.planDate = '';
      this.applyDate = '';
      this.listQuery = {
        current: 1,
        size: 10,
        descs: 'id',
      }
      this.getList()
    },
   
    searchList() {
      // 重置分页
      this.listQuery.page = 1
      this.listQuery.size = 10
      if (this.planDate){
        this.listQuery.pStartDate = this.planDate[0];
        this.listQuery.pEndDate = this.planDate[1];
      }
      if (this.applyDate){
        this.listQuery.aStartDate = this.applyDate[0]+' 00:00:00';
        this.listQuery.aEndDate = this.applyDate[1]+' 23:59:59';
      }
      this.getList()
    },
    getList() {
      this.$api.financeInvoice.list(Object.assign({}, this.listQuery)).then(res=>{
        if (res.code ===200){
            this.pageData = res.data;
        }
      })
    },
    businessTypeAlias(code){
      return '大中型'
    },
    openMakeDialog(row){
      this.newInvoiceDialog= true;
      this.invoice = row;
    },
    makeInvoice(){
      this.$refs.invoice.validate(valid=>{
        if(valid){
          this.$confirm('请确认开票信息是否正确操作后无法修改!','提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(()=>{
            if (this.invoice.realAmount===0){
              this.$notify({
                  title: '提示',
                  message: '实开金额不能为0.00',
                  type: 'info',
                  duration: 2000
                });
                return;
            }
            this.$api.financeInvoice.edit(this.invoice).then(res=>{
              if (res.code === 200 && res.data){
                this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success',
                  duration: 2000
                });
                this.newInvoiceDialog= false;
                this.getList();
              }else {
                this.$notify({
                  title: '失败',
                  message: '操作失败',
                  type: 'error',
                  duration: 2000
                });
              }
            })
          })
        }
      })
    },
    refuseApply(){
      this.$prompt('请填写拒绝理由，若无可直接点击确认按钮。','提示',{
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: "warning",
      }).then(({value})=>{
          this.invoice.reason = value;
          this.invoice.state = '驳回';
          this.$api.financeInvoice.edit(this.invoice).then(res=>{
              if (res.code === 200 && res.data){
                this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success',
                  duration: 2000
                });
                this.newInvoiceDialog= false;
                this.getList();
              }else {
                this.$notify({
                  title: '失败',
                  message: '操作失败',
                  type: 'error',
                  duration: 2000
                });
              }
            })
      })
    }
  },
  
}
</script>
<style lang="scss" scoped>
 /deep/.doWarehouseClass {
     border-radius: 10px;
    }
</style>