vue2+ant-design-vue 手写【付款凭证】与【收款凭证】

最新推荐文章于 2025-03-22 20:52:25 发布

zhongxiajiu

最新推荐文章于 2025-03-22 20:52:25 发布

阅读量1.0k

点赞数 1

文章标签： vue.js 前端 javascript anti-design-vue

本文链接：https://blog.csdn.net/zhongxiajiu/article/details/131806581

版权

场景

项目上遇到需要动态生成【付款凭证】与【收款凭证】的需求，故手写一个并记录下来。

最终效果

在这里插入图片描述

基础数据

      //基础数据
      baseData: {
        certificateType: this.isPay ? 2 : 1, //2为付款凭证；1为收款凭证
        subject: '', //借方科目/贷方科目
        dateY: '', //日期年份
        dateM: '', //日期月份
        dateD: '', //日期天
        genSymbol: '', //总 号
        voucherSymbol: '', //第 号
        attachments: '', //单据多少张
        headOfAccounting: undefined, //会计主管
        checked: undefined, //复核
        bookkeeper: undefined, //记账
        cashier: undefined, //出纳
        prepared: undefined, //制单
        receiver: undefined, //领款人
        total: 0, //合计金额
      },

      // 列表详细数据
      detailList: [
        {
          certificateType: this.isPay ? 2 : 1, //2为付款凭证；1为收款凭证
          documenDetailCode: undefined, //明细单号
          certificateAbstract: '', //摘要
          subjectTotal: '', //总账科目
          subjectDetail: '', //明细科目
          lenderList: ['', '', '', '', '', '', '', '', '', '', ''], //金额列表
          amount: '', //金额
          ifKeepAccount: 'false', //是否记账
          filterData: [],
        },
      ],

代码

<template>
  <div class="charge-container" id="chargeContainer">
    <div class="charge">
      <div class="charge-header">
        <a-col :span="6" class="sortRow" style="justify-content: flex-start">
          <a-col :span="10" class="sortCol">
            <span>{{ isPay ? '贷方科目' : '借方科目' }}</span>
            <span>{{ isPay ? 'CREDIT ACCOUNT' : 'DEBIT ACCOUNT' }}&nbsp;</span>
          </a-col>
          <span style="text-decoration: underline; word-break: break-word">{{ baseData.subject }}</span>
        </a-col>
        <a-col :span="10" class="header-title">
          <div class="sortCol title head">
            <span style="font-size: 40px">{{
              isPay
                ? '付&nbsp;&nbsp;&nbsp;&nbsp;款&nbsp;&nbsp;&nbsp;&nbsp;凭&nbsp;&nbsp;&nbsp;&nbsp;证'
                : '收&nbsp;&nbsp;&nbsp;&nbsp;款&nbsp;&nbsp;&nbsp;&nbsp;凭&nbsp;&nbsp;&nbsp;&nbsp;证'
            }}</span>
            <!-- <span style="font-size: 24px">PAYMENT VOCHER</span> -->
          </div>
          <a-divider class="divider" />
          <a-divider class="divider" />
          <div class="sortRow title date">
            <div>日期:</div>
            <div>{{ baseData.dateY }}</div>
            <div class="sortCol">
              <span>年</span>
              <span>Y</span>
            </div>
            <div>{{ baseData.dateM }}</div>
            <div class="sortCol">
              <span>月</span>
              <span>M</span>
            </div>
            <div>{{ baseData.dateD }}</div>
            <div class="sortCol">
              <span>日</span>
              <span>D</span>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <a-col :span="9"></a-col>
          <a-col :span="15">
            <div class="sortCol">
              <div class="sortRow"><span>总</span>{{ baseData.genSymbol }}<span>号</span></div>
              <span>GEN NO.</span>
            </div>
            <div class="sortCol">
              <div class="sortRow"><span>第</span>{{ baseData.voucherSymbol }}<span>号</span></div>
              <span>VOCHER NO.</span>
            </div>
          </a-col>
        </a-col>
      </div>
      <table class="charge-table" border="1">
        <tr>
          <td width="51%" class="sortCol zhaiyao">
            <span
              >摘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;要</span
            >
            <span>DESCRIPTION</span>
          </td>
          <td width="45%">
            <table style="height: 100%">
              <tr style="border-bottom: 1px solid #bab9b9">
                <td width="50%" style="border-right: 1px solid #bab9b9">
                  {{ isPay ? '借方科目&nbsp;&nbsp;&nbsp; DEBIT ACCOUNT' : '贷方科目&nbsp;&nbsp;&nbsp; CREDIT ACCOUNT' }}
                </td>
                <td width="50%">金&nbsp;&nbsp;额&nbsp;&nbsp;&nbsp; AMOUNT</td>
              </tr>
              <tr>
                <td style="border-right: 1px solid #bab9b9; width: 60%">
                  <table class="debtor-lender-table" style="height: 100%">
                    <tr class="sortRow" style="height: 100%">
                      <td class="sortCol" style="width: 50%; height: 100%">
                        <span>总账科目</span><span>GEN.LED.A/C</span>
                      </td>
                      <td class="sortCol" style="width: 50%; height: 100%">
                        <span>明细科目</span><span>SUB.LED.A/C</span>
                      </td>
                    </tr>
                  </table>
                </td>
                <td style="width: 40%">
                  <table class="debtor-lender-table" style="height: 100%">
                    <tr>
                      <td>亿</td>
                      <td>千</td>
                      <td>百</td>
                      <td>十</td>
                      <td>万</td>
                      <td>千</td>
                      <td>百</td>
                      <td>十</td>
                      <td>元</td>
                      <td>角</td>
                      <td>分</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
          <td width="100%" class="sortCol" style="border: 0"><span>记账</span><span>P.R</span><span>√</span></td>
        </tr>
        <tr v-for="(item, index) in detailList" :key="index">
          <td style="word-break: break-all; padding: 4px" width="51%">
            <p style="margin-bottom: 0; text-align: left">
              {{ item.certificateAbstract }}
            </p>
          </td>

          <td width="45%">
            <table>
              <tr>
                <td width="60%" style="border-right: 1px solid #bab9b9">
                  <table class="debtor-tbale debtor-lender-table">
                    <tr>
                      <td style="word-break: break-all; padding: 4px; width: 50%">
                        <p style="margin-bottom: 0; text-align: left">{{ item.subjectTotal }}</p>
                      </td>
                      <td style="word-break: break-all; padding: 4px; width: 50%">
                        <p style="margin-bottom: 0; text-align: left">{{ item.subjectDetail }}</p>
                      </td>
                    </tr>
                  </table>
                </td>
                <td width="40%">
                  <table class="lender-tbale debtor-lender-table">
                    <tr :class="item.lender * 1 < 0 ? 'tr-negative' : ''">
                      <td v-for="(lender, i) in item.lenderList" :key="i">{{ lender }}</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
          <td>{{ item.ifKeepAccount == 'true' ? '√' : '' }}</td>
        </tr>
        <tr>
          <td colspan="1" class="sortRow danju">
            <span>附单据</span>{{ baseData.attachments }}<span>张&nbsp;&nbsp; ATTACHMENTS</span>
          </td>
          <td>
            <table>
              <tr>
                <td width="60%" style="border-right: 1px solid #bab9b9">
                  <table class="debtor-tbale debtor-lender-table">
                    <tr>
                      <td><span>合&nbsp;&nbsp;&nbsp;&nbsp;计</span>&nbsp;&nbsp;<span>TOTAL</span></td>
                    </tr>
                  </table>
                </td>
                <td width="40%">
                  <table class="lender-tbale debtor-lender-table">
                    <tr>
                      <td v-for="(lender, j) in baseData.lenderList" :key="j">{{ lender }}</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
          <td></td>
        </tr>
      </table>
      <div class="sortRow" style="padding-right: 50px">
        <div class="sortRow">
          <div class="sortCol"><span>会计主管：</span><span>SUPERVISOR</span></div>
          {{ baseData.headOfAccounting }}
        </div>
        <div class="sortRow">
          <div class="sortCol"><span>复核：</span><span>CHECKED</span></div>
          {{ baseData.checked }}
        </div>
        <div class="sortRow">
          <div class="sortCol"><span>记帐：</span><span>ENTERED</span></div>
          {{ baseData.bookkeeper }}
        </div>
        <div class="sortRow">
          <div class="sortCol"><span>出纳：</span><span>CASHIER</span></div>
          {{ baseData.cashier }}
        </div>
        <div class="sortRow">
          <div class="sortCol"><span>制单：</span><span>PREPARED</span></div>
          {{ baseData.prepared }}
        </div>
        <div class="sortRow">
          <div class="sortCol">
            <span>{{ isPay ? '领' : '付' }}款人：</span><span>RECEIVER</span>
          </div>
          {{ baseData.receiver }}
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'vocherView',
  props: ['id'],
  data() {
    return {
      lenderTotalList: ['', '', '', '', '', '', '', '', '', '', ''], //合计金额

      //列表基础数据
      detailBaseData: {
        certificateAbstract: '', //摘要
        subjectTotal: '', //总账科目
        subjectDetail: '', //明细科目
        lenderList: ['', '', '', '', '', '', '', '', '', '', ''], //金额列表
        amount: 0, //金额
        ifKeepAccount: false, //是否记账
      },
    }
  },
  props: {
    //是否为付款凭证
    isPay: { type: Boolean, default: false },
    //基础数据
    baseData: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // 列表详细数据
    detailList: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  created() {},
  watch: {},
  mounted() {},
  updated() {},
  methods: {},
}
</script>
 
<style scoped lang="less">
table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  padding: 0;
  margin: 0;
}

table td {
  text-align: center;
  table-layout: fixed;
  padding: 0px;
  position: relative;
}

.charge-container {
  padding: 10px;
  font-size: 14px;
  color: #444;
  font-weight: 400;
  background-color: white;
}

.charge {
  width: 1124px;
  margin: auto;
}

.charge-header {
  margin-bottom: 10px;
}

.charge-header > div {
  // display: inline-block;
  margin-right: 15px;
}
.charge-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  .header-title {
    .head {
      width: 430px;
    }
    .date {
      width: 430px;
    }
  }
  .title {
    align-items: center;
  }
  .divider {
    width: 90%;
    margin: 0 0 2px 0 !important;
  }
}

.charge-table,
.tip-box-table {
  border: 1px solid #bab9b9;
}

.charge-table,
.debtor-tbale,
.lender-tbale > tr {
  height: 50px;
}

.charge-table > tr:first-child {
  height: 50px;
}
.charge-table .zhaiyao {
  font-size: 22px;
  border: 0;
  width: 100%;
  height: 100%;
}

.charge-table-icon {
  cursor: pointer;
  display: inline-block;
}

.debtor-lender-table tr td {
  width: 9%;
  border-right: 1px solid #bab9b9;
}

.debtor-lender-table tr td:nth-child(3) {
  border-right-color: rgba(74, 144, 226, 0.5);
}

.debtor-lender-table tr td:nth-child(6) {
  border-right-color: rgba(74, 144, 226, 0.5);
}

.debtor-lender-table tr td:nth-child(9) {
  border-right-color: rgba(226, 106, 74, 0.5);
}

.debtor-lender-table tr td:last-child {
  border-right: none;
}

.tr-negative {
  color: red;
}

.sortCol {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sortRow {
  display: flex;
  justify-content: space-between;
}
.danju {
  border: 0;
  height: 100%;
  justify-content: space-around;
  align-items: center;
}
</style>