vue+ant-----收据的实现

首先看看效果

主要就是要把上一个页面的数据传递过来，父传子，相信大家都会

看看代码吧

body代码，其实就是根据所需要的样子把收据画出来

<template>
  <ele-modal  // 收据的弹框
    :width="900"
    :visible="visible"
    :closable="false"
    :footer="null"
    :body-style="{ padding: '0px' }"
    class="contract-modal"
    @update:visible="updateVisible"
  >
    <div class="contract-modal-wrap" ref="wrapRef">
      <div class="top">   // 收据的头部部分
        <div class="top-sj">
          <div
            class="shouju"
            style="
              letter-spacing: 58px;
              font-weight: 550;
              font-size: 30px;
              padding-right: 110px;
            "
            >收据</div
          >
          <div class="hengxian"></div> // 收据下面的两条横线
          <div class="hengxian"></div>
          <div class="year"  // 根据自己所需要的年月日进行传递
            ><span>{{ currentDate }}</span
            ><span>年</span><span>{{ currtentDay }}</span
            ><span>月</span><span>{{ currtentDays }}</span
            ><span>日</span></div
          >
        </div>
        <div
          ><span class="bianhao">No:</span   //No编号，根据当前时间戳取前七位实现的
          ><span class="bh-number">{{ noNumber }}</span></div
        >
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
        "
      >
      </div>
      <div
        style="
          border: 2px solid black;
          padding: 20px;
          box-sizing: border-box;
          border-radius: 10px;
          margin-top: 10px;
        "
      >
        <a-form   // 利用form表单实现数据的展示
          :model="formState"
          name="basic"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-form-item label="今&nbsp;收&nbsp;到&nbsp;" name="username">
            <a-input v-model:value="formState.house" />
          </a-form-item>

          <a-form-item
            label="交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;来&nbsp;"
            name="password"
          >
            <a-input v-model:value="formState.label" />
          </a-form-item>
          <div class="rmb">
            <div class="rmb-title">
              <span>人&nbsp;民&nbsp;币&nbsp;</span
              ><span style="font-size: 12px">(大写)</span>
            </div>
            <div class="rmb-danwei">
              <span>{{ numberInt[0] }}</span
              ><span>佰</span><span>{{ numberInt[1] }}</span
              ><span>拾</span><span>{{ numberInt[2] }}</span
              ><span>万</span><span>{{ numberInt[3] }}</span
              ><span>仟</span><span>{{ numberInt[4] }}</span
              ><span>佰</span><span>{{ numberInt[5] }}</span
              ><span>拾</span><span>{{ numberInt[6] }}</span
              ><span>元</span><span>{{ numberFloat[0] }}</span
              ><span>角</span><span>{{ numberFloat[0] }}</span
              ><span>分</span>
            </div>
          </div>
          <div class="rmb" style="margin-top: 10px">
            <div class="rmb-title" style="justify-content: center">
              <span>收&nbsp;款&nbsp;单&nbsp;位</span
              ><span style="font-size: 12px">(公章)</span>
            </div>
            <div class="rmb-danwei" style="border: 0">
              <div></div>
              <div style="font-size: 40px">￥</div>
              <div class="zffs">
                <a-checkbox-group
                  v-model:value="value"
                  name="checkboxgroup"
                  :options="plainOptions" />
                <br />
                <br />
                <a-checkbox-group
                  v-model:value="value"
                  :options="plainOptions1"
              /></div>
            </div>
          </div>
        </a-form>
      </div>

      <div
        style="margin-top: 10px; display: flex; justify-content: space-between"
        ><span>财务主管</span><span>记账：</span
        ><span style="margin-right: 80px">出纳：</span
        ><span style="margin-right: 80px">审核：</span>
        <span style="margin-right: 80px">经办：</span></div
      >
    </div>
    <div class="contract-tool-wrap">
      <div class="contract-modal-btn" @click="updateVisible(false)">
        <close-outlined />
      </div>
      <div class="contract-modal-btn" @click="onPrint">
        <printer-outlined />
      </div>
    </div>
  </ele-modal>
</template>

css样式

<style lang="less" scoped>
  .contract-modal-wrap {
    padding: 60px;
    // height: calc(100vh);
    box-sizing: border-box;
    overflow: auto;
  }
  :deep(.zffs) {
    span {
      font-size: 15px;
    }
  }
  .top {
    display: flex;
    justify-content: flex-end;
    margin-right: 3%;
    box-sizing: border-box;
    .shouju {
      margin-left: 60px;
    }
    .hengxian {
      border: 1px solid black;
      margin-bottom: 3px;
      width: 250px;
      box-sizing: border-box;
    }
    .year {
      display: flex;
      width: 250px;
      margin-top: 10px;
      box-sizing: border-box;
      justify-content: space-evenly;
      font-size: 18px;
      align-items: center;
    }
    .bianhao {
      font-size: 30px;
      font-weight: 600;
      box-sizing: border-box;
    }
    .bh-number {
      font-size: 30px;
      font-weight: 600;
      box-sizing: border-box;
    }
  }
  :deep(label) {
    font-size: 18px;
  }
  :deep(.ant-input) {
    border: 0;
    border-bottom: 1px solid;
    border-radius: 0;
    font-size: 15px;
    letter-spacing: 4px;
  }
  .rmb {
    display: flex;
    width: 100%;
    font-size: 18px;
    .rmb-title {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .rmb-danwei {
      display: flex;
      justify-content: space-between;
      width: 100%;
      border-bottom: 1px solid black;
      align-items: center;
      font-size: 17px;
      span {
        margin-top: 20px;
      }
    }
  }
  .contract-tool-wrap {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%);
    box-sizing: border-box;
    padding: 20px 12px;
  }
  .contract-modal-btn {
    width: 38px;
    height: 38px;
    line-height: 36px;
    text-align: center;
    border: 2px solid #fff;
    box-sizing: border-box;
    background: #1890ff;
    border-radius: 50%;
    cursor: pointer;

    & + .contract-modal-btn {
      margin-top: 16px;
    }

    :deep(.anticon) {
      color: #fff;
      font-size: 16px;
    }
  }
</style>

 最重要的就是js部分了

主要是把我们页面中数据取到，然后把获取到金额转换成大写就行了

<script setup>
  import { ref, reactive, watch } from 'vue';
  // import { message } from 'ant-design-vue/es';
  import { PrinterOutlined, CloseOutlined } from '@ant-design/icons-vue';
  import { printElement } from 'ele-admin-pro';
  import { assignObject } from 'ele-admin-pro/es';
  import dayjs from 'dayjs';

  const plainOptions = ['转账', '微信', '支付宝'];  // 支付方式勾选框
  const plainOptions1 = ['支票', '现金', '其他'];
  const value = ref([]);

  const props = defineProps({  // 父传子，子用defineProps接收收据
    // 弹窗是否打开
    visible: Boolean,  // 对应传递过来的数据类型
    // 数据
    data: Array
  });
  const formState = reactive({  // 需要取的值
    house: props.data.house,
    label: props.data.label,
    posMachineNo: props.data.posMachineNo
  });
  const emit = defineEmits(['update:visible', 'done']);  // 子传父，用defineEmits传递

  // 表单数据;
  //
  const wrapRef = ref(null);

  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };

  const numberInt = ref([]);
  const numberFloat = ref([]);

  const currentDate = dayjs(new Date()).format('YYYY');  // 页面中展示的年月日用的当前时间
  const currtentDay = dayjs(new Date()).format('MM'); // 利用dayjs分别把年月日取出来
  const currtentDays = dayjs(new Date()).format('DD');
  const noNumber = (new Date().getTime() + '').slice(0, 7);  // 获取no编号的

  /* 打印 */
  const onPrint = () => {
    printElement(wrapRef.value, {
      horizontal: false,
      blank: false,
      size: 'A4'
    });
  };

  watch( // 获取数据的实时更新，利用watch来监听传递过来的props
    () => props.visible,
    (visible) => {
      if (visible) {
        if (props.data) {
          var result = (parseInt(props.data.totalFee) + '').split('');// 获取传递过来的总价，把他变成字符串数组，利用parseInt取整没有小数部分
          var res = (
            props.data.totalFee -
            parseInt(props.data.totalFee) +
            ''
          ).split('');  // 利用总价-总价整数部分=小数部分，跟上面一样转成字符串数组
          switch (7 - result.length) {  // 利用switch补全七位数，往左添0补齐
            case 0:
              break;
            case 1:
              result.unshift('0');
              break;
            case 2:
              result.unshift('0', '0');
              break;
            case 3:
              result.unshift('0', '0', '0');
              break;
            case 4:
              result.unshift('0', '0', '0', '0');
              break;
            case 5:
              result.unshift('0', '0', '0', '0', '0');
              break;
            case 6:
              result.unshift('0', '0', '0', '0', '0', '0');
              break;
            case 7:
              result.unshift('0', '0', '0', '0', '0', '0', '0');
              break;
          }
          let res1=res;  // 上面的switch也可以换成for循环
          for (let j = 0; j < 2 - res1.length; j++) {
            res.push('0');
          }
          for (let i = 0; i < result.length; i++) {  // 把字符串数组换成大写
            switch (result[i]) {
              case '0':
                result[i] = '零';
                break;
              case '1':
                result[i] = '壹';
                break;
              case '2':
                result[i] = '贰';
                break;
              case '3':
                result[i] = '叁';
                break;
              case '4':
                result[i] = '肆';
                break;
              case '5':
                result[i] = '伍';
                break;
              case '6':
                result[i] = '陆';
                break;
              case '7':
                result[i] = '柒';
                break;
              case '8':
                result[i] = '捌';
                break;
              case '9':
                result[i] = '玖';
                break;
            }
          }
          for (let i = 0; i < res.length; i++) {
            switch (res[i]) {
              case '0':
                res[i] = '零';
                break;
              case '1':
                res[i] = '壹';
                break;
              case '2':
                res[i] = '贰';
                break;
              case '3':
                res[i] = '叁';
                break;
              case '4':
                res[i] = '肆';
                break;
              case '5':
                res[i] = '伍';
                break;
              case '6':
                res[i] = '陆';
                break;
              case '7':
                res[i] = '柒';
                break;
              case '8':
                res[i] = '捌';
                break;
              case '9':
                res[i] = '玖';
                break;
            }
          }
          switch (props.data.paymentType) {  // 支付方式勾选框
            case '10':
              value.value = ['现金'];
              break;
            case '06':
              value.value = ['POS消费(银行卡支付)'];
              break;
            case '04':
              value.value = ['聚合正扫（扫POS二维码）'];
              break;
            case '05':
              value.value = ['聚合反扫（扫手机付款码）'];
              break;
          }
          numberFloat.value = res;
          numberInt.value = result;
          console.log(numberInt.value, numberFloat.value);
          assignObject(formState, props.data);
          // isUpdate.value = true;
        } else {
          // isUpdate.value = false;
        }
      } else {
        // resetFields();
      }
    }
  );
</script>