supplier-dispatch-h5/src/views/index/invoicingDetail.vue

<template>
<div class="wrap">
  <div class="navBar">
    <van-nav-bar
        title="工单批次详情"
        left-arrow
        left-arrow-color="#FFFFFF"
        :border="false"
        :fixed="true"
        :safe-area-inset-top="true"
        @click-left="h5GoBack"
    />
  </div>
  <div class="contentWrap">
    <div class="content_tab">
      <div class="tab_title">批次详情</div>
      <div class="tab_content">
        <div class="item_wrap">
          <div class="item_label">批次编号</div>
          <div class="item_content">
            <span id="copyText">{{invoiceInfo.batchCode}}</span>
            <img class="copyIcon" @click="copyHandler(invoiceInfo.batchCode)" src="@/assets/copy.png" />
          </div>
        </div>
        <div class="item_wrap">
          <div class="item_label">财务编号</div>
          <div class="item_content">
            <span id="copyText2">{{invoiceInfo.financeBatchCode}}</span>
            <img class="copyIcon" @click="copyHandler(invoiceInfo.financeBatchCode)" src="@/assets/copy.png" />
          </div>
        </div>
        <div class="item_wrap">
          <div class="item_label">工单数量</div>
          <div class="item_content">
            {{invoiceInfo.orderNum}}
          </div>
        </div>
        <div class="item_wrap">
          <div class="item_label">总金额</div>
          <div class="item_content">
            {{invoiceInfo.orderNum}}
          </div>
        </div>
        <div class="item_wrap">
          <div class="item_label">扣款</div>
          <div class="item_content">
            {{invoiceInfo.cutMoney || ''}}
          </div>
        </div>
        <div class="item_wrap">
          <div class="item_label">税额扣款</div>
          <div class="item_content">
            {{invoiceInfo.taxCutMoney || ''}}
          </div>
        </div>
        <div class="item_wrap">
          <div class="item_label">开票金额</div>
          <div class="item_content">
            {{invoiceInfo.invoiceMoney || ''}}
          </div>
        </div>
        <div class="item_wrap">
          <div class="item_label">备注</div>
          <div class="item_content">
            {{invoiceInfo.remark || ''}}
          </div>
        </div>
        <div class="item_wrap">
          <div class="item_label">创建时间</div>
          <div class="item_content">
            {{invoiceInfo.createTime}}
          </div>
        </div>
        <div class="item_wrap">
          <div class="item_label">对账状况</div>
          <div class="item_content">
            {{invoiceInfo.statusString}}
          </div>
        </div>
      </div>
    </div>
    <div class="content_tab mt_cls">
      <div class="tab_title">关联案件</div>
      <table>
        <tr>
          <th class="text_left">案件编号</th>
          <th>服务类型</th>
          <th>结算类型</th>
        </tr>
        <tr v-for="(item, index) in orderList" :key="index">
          <td class="text_left">
            {{item.orderCode}}
            <img class="copyIcon" @click="copyHandler(item.orderCode)" src="@/assets/copy.png" />
          </td>
          <td>{{item.serviceType || ''}}</td>
          <td>{{item.settleAmount || ''}}</td>
        </tr>
      </table>
    </div>
  </div>
</div>
</template>

<script>
import {myMixins} from "@/utils/myMixins"
import { notifyInvoiceDetail, getOrderListByInvoice } from  "@/api/mine"
export default {
  name: "invoicingDetail",
  mixins:[myMixins],
  data(){
    return{
      batchCode: '',
      id: '',
      invoiceInfo: {},
      orderList: [],
    }
  },
  async mounted() {
    this.batchCode = this.$route.query?.batchCode;
    this.id = this.$route.query?.id;
    await this.getDetail()
    await this.getOrderList();
  },
  methods:{
    copyHandler(copyText){
      let inputNode = document.createElement('input')  // 创建input
      inputNode.value = copyText // 赋值给 input 值
      document.body.appendChild(inputNode) // 插入进去
      inputNode.select() // 选择对象
      document.execCommand('Copy') // 原生调用执行浏览器复制命令
      inputNode.className = 'oInput'
      inputNode.style.display = 'none' // 隐藏
      this.$toast('复制成功')
    },
    async getOrderList() {
      let res = await getOrderListByInvoice({
        batchCode: this.batchCode,
        pageSize: 1000,
        pageNum: 1,
        createTime: this.invoiceInfo.startTime
      })
      this.orderList = res.data;
      console.log('rerere', res);
    },
    async getDetail(){
      let res = await notifyInvoiceDetail({
        id: this.id
      })
      this.invoiceInfo = res.data
      console.log('rerere', res)
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap{
  @include wh(100%,100%);
  background-color: #F4F5F7;
}
.navBar{
  height: 46px;
}
.contentWrap{
  .mt_cls {
    margin-top: 10px;
  }
  .content_tab {
    background-color: #fff;
    width: 100%;
    padding: 15px 15px;
    box-sizing: border-box;
    .tab_title {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .tab_content {
      .item_wrap {
        display: flex;
        align-items: center;
        line-height: 30px;
        font-size: 12px;
        .item_label {
          color: rgba(0,0,0,0.5);
          margin-right: 5px;
          width: 60px;
        }
        .item_content {
          display: flex;
          align-items: center;
        }
      }
    }
    table {
      line-height: 30px;
      width: 100%;
      .text_left {
        text-align: left;
        width: 50%;
      }
      th {
        color: rgba(0, 0, 0, 0.5);
      }
      td {
        text-align: center;
      }
    }
  }
}
  .copyIcon {
    width: 35px;
    height: 15px;
    margin-left: 10px
  }

</style>