clearticket_ota/src/views/goodsCenter/invoiceList.vue

<template>
  <div class="form-wrap">
    <div class="searchBox">
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        label-width="150px">
        <el-form-item
          label="起始时间"
          prop="createTimeBegin">
          <el-date-picker
            v-model="form.createTimeBegin"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="截止时间"
          prop="createTimeEnd">
          <el-date-picker
            v-model="form.createTimeEnd"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="发票渠道"
          prop="channelName">
          <el-select
            v-model="form.channelName"
            filterable>
            <el-option
              v-for="item in channelList"
              :key="item.id"
              :value="item.invoiceSellerName"
              :label="item.invoiceSellerName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="发票状态"
          prop="status">
          <el-select
            v-model="form.status">
            <el-option
              value=""
              label="全部"></el-option>
            <el-option
              :value="0"
              label="未开票"></el-option>
            <el-option
              :value="1"
              label="已开票"></el-option>
            <el-option
              :value="2"
              label="开票失败"></el-option>
            <el-option
              :value="3"
              label="开票中"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="开票人"
          prop="userId">
          <el-input v-model="form.userId"></el-input>
        </el-form-item>
        <el-form-item
          label="买方名称"
          prop="invoiceBuyerName">
          <el-input v-model="form.invoiceBuyerName"></el-input>
        </el-form-item>
        <el-form-item
          label="买方税号"
          prop="invoiceBuyerTaxNumber">
          <el-input v-model="form.invoiceBuyerTaxNumber"></el-input>
        </el-form-item>
        <el-form-item
          label="买方接收邮箱"
          prop="invoiceBuyerReceiveEmail">
          <el-input v-model="form.invoiceBuyerReceiveEmail"></el-input>
        </el-form-item>
        <el-form-item
          label="买方接收号码"
          prop="invoiceBuyerReceivePhone">
          <el-input v-model="form.invoiceBuyerReceivePhone"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-wrap">
        <el-button @click="reset">重置</el-button>
        <el-button
          type="primary"
          @click="getList">搜索</el-button>
        <el-button
          type="primary"
          plain
          v-if="canEdit"
          @click="showAddDialog">开票</el-button>
      </div>
    </div>
    <div class="tableBox">
      <!-- <div class="block-title">查询信息</div> -->
      <el-table
        stripe
        :data="tableData"
        v-loading="loading">
        <el-table-column
          label="发票渠道"
          prop="channelName"></el-table-column>
        <el-table-column
          label="开票人"
          prop="userId">
        </el-table-column>
        <el-table-column
          prop="orderCreateTime"
          label="订单下单时间">
        </el-table-column>
        <el-table-column
          prop="price"
          label="开票金额">
        </el-table-column>
        <el-table-column
          prop="invoiceSellerName"
          label="开票卖方">
        </el-table-column>
        <el-table-column
          prop="invoiceBuyerName"
          label="买方名称">
        </el-table-column>
        <el-table-column
          prop="invoiceBuyerTaxNum"
          label="买方税号">
        </el-table-column>
        <el-table-column
          prop="invoiceBuyerAddress"
          label="买方地址">
        </el-table-column>
        <el-table-column
          prop="invoiceBuyerPhone"
          label="买方联系方式">
        </el-table-column>
        <el-table-column
          prop="invoiceBuyerBank"
          label="买方开户银行">
        </el-table-column>
        <el-table-column
          prop="invoiceBuyerAccount"
          label="买方开户行账号">
        </el-table-column>
        <el-table-column
          prop="invoiceBuyerReceiveEmail"
          label="买方接收邮箱">
        </el-table-column>
        <el-table-column
          prop="invoiceBuyerReceivePhone"
          label="买方接收号码">
        </el-table-column>
        <el-table-column
          prop="submitTime"
          label="开票提交时间">
        </el-table-column>
        <el-table-column
          prop="completeTime"
          label="开票完成时间">
        </el-table-column>
        <el-table-column
          prop="downloadUrl"
          label="开票下载地址">
          <template slot-scope="scope">
            <a
              v-if="scope.row.downloadUrl"
              :href="scope.row.downloadUrl"
              target="_blank">下载</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="qrcodeUrl"
          label="扫码开票二维码">
          <template slot-scope="scope">
            <img
              v-if="scope.row.qrcodeUrl"
              :src="scope.row.qrcodeUrl"
              alt="二维码"
              style="width:40px;height:40px;" >
          </template>
        </el-table-column>
        <el-table-column
          prop="fpdm"
          label="发票代码">
        </el-table-column>
        <el-table-column
          prop="fphm"
          label="发票号码">
        </el-table-column>
        <el-table-column
          prop="status"
          label="开票状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 0">未开票</span>
            <span v-else-if="scope.row.status === 1">已开票</span>
            <span v-else-if="scope.row.status === 2">开票失败</span>
            <span v-else-if="scope.row.status === 3">开票中</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="开票备注">
        </el-table-column>
        <el-table-column
          prop="errInfo"
          label="失败原因">
        </el-table-column>
        <el-table-column
          v-if="canEdit"
          width="120"
          label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="showDialog('edit', scope.row)">
              <i class="el-icon-edit"></i>
              编辑
            </el-button>
            <!-- <el-button
              type="text"
              @click="deleteItem(scope.row)">
              <i class="el-icon-delete"></i>
              删除
            </el-button> -->
            <!-- <el-button
              v-if="scope.row.otaSourceCode==='KS'"
              type="text"
              @click="$refs.KSNewDialogRef.show(scope.row)"
            >
              同步商品
            </el-button>
            <el-button
              v-if="scope.row.otaSourceCode==='KS' && scope.row.ksProductId"
              type="text"
              @click="$refs.KSUpdateDialogRef.show(scope.row)"
            >
              同步商品价格库存
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="form.pageNum"
        @current-change="getList"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <ElDialog
      :title="'编辑'"
      width="500px"
      v-model="dialogVisible">
      <el-form
        class="form-wrap"
        label-width="150px">
        <el-form-item label="发票ID">
          <el-input
            v-model="currentItem.id"
            disabled></el-input>
        </el-form-item>
        <el-form-item label="开票备注">
          <el-input
            v-model="currentItem.remark"
            type="area"></el-input>
        </el-form-item>
      </el-form>
    </ElDialog>

    <ElDialog
      :title="'开票'"
      width="800px"
      v-model="addDialogVisible">
      <AddDialog ></AddDialog>
    </ElDialog>

  </div>
</template>

<script>
import { getInvoiceSellerList, getInvoiceList } from '@/api/invoice'
import ElDialog from '@/components/Dialog'
import AddDialog from './invoice/Dialog'

export default {
  components: {
    ElDialog,
    AddDialog
  },
  data () {
    return {
      projectName: localStorage.getItem('otaProject'),
      performList: [],
      dialogType: 'add',
      dialogVisible: false,
      addDialogVisible: false,
      form: {
        pageNum: 1,
        pageSize: 10,
        createTimeBegin: '',
        createTimeEnd: '',
        status: '',
        channelName: '',
        userId: '',
        otaProductId: '',
        invoiceBuyerName: '',
        invoiceBuyerTaxNumber: '',
        invoiceBuyerReceiveEmail: '',
        invoiceBuyerReceivePhone: ''
      },
      loading: false,
      multipleSelection: [], // 批量删除多选数组
      total: 0,
      tableData: [],
      currentItem: {},
      channelList: [],
      otaList: []
    }
  },
  created () {
    this.getChannelList()
    this.getList()
    // this.fetchBatchConfigList()
    // getPerformList(this.projectName).then((res) => {
    //   this.performList = res.extraInfo
    // })
  },
  filters: {
    formatXCProductName (time) {
      if (!time) return ''
      const map = {
        '1': '一张一人需要证件',
        '2': '一张一人不需要证件',
        '3': '一单一人需要证件',
        '4': '一单一人不需要证件'
      }
      return map[time] || ''
    }
  },
  computed: {
    canEdit () {
      return true
      // return this.$store.state.user.permissionList.includes('product:pricecode_edit')
    },
    queryClear () {
      return this.$store.state.user.permissionList.includes('stats:clearwx_query')
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    getChannelList () {
      return getInvoiceSellerList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.ticketTypeList = res.data.records
      })
    },
    // 获取列表
    getList () {
      this.loading = true
      getInvoiceList(this.form).then(res => {
        this.total = res.data.total
        this.tableData = res.data.records
        this.loading = false
      })
    },
    // 打开编辑对话框
    showDialog (type, item) {
      this.dialogType = type
      this.currentItem = item || {}
      this.dialogVisible = true
    },
    showAddDialog () {
      this.addDialogVisible = true
    },
    reset () {
      this.$refs.form.resetFields()
    }
  }
}
</script>