accout-vue3-ui/src/views/InvoiceSales/invoiceApply/components/add-edit-form/invoice-show.vue

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";

interface Buyer {
  title?: string;
  apis?: string;
  columns?: any;
  notReuqiredInit?: boolean;
  notPagination?: boolean;
  statusProp?: string;
  deleteProp?: string;
  isTree?: boolean;
}
interface Seller {
  title?: string;
  apis?: string;
  columns?: any;
  notReuqiredInit?: boolean;
  notPagination?: boolean;
  statusProp?: string;
  deleteProp?: string;
  isTree?: boolean;
}
interface invoiceConfig {
  title?: string;
  apis?: string;
  columns?: any;
  notReuqiredInit?: boolean;
  notPagination?: boolean;
  statusProp?: string;
  deleteProp?: string;
  isTree?: boolean;
}

const BuyerItem = reactive<Record<string, any>>({
  title: ""
});
const SellerItem = reactive<Record<string, any>>({
  title: ""
});
const configItem = reactive<Record<string, any>>({
  title: ""
});
const orderList = ref([]);
const showHeader = ref(false);
function show(
  Buyer: Buyer,
  Seller: Seller,
  order: object[],
  invoiceConfig: invoiceConfig
) {
  Object.keys(BuyerItem.value).forEach(key => {
    BuyerItem.value[key] = Buyer[key] ?? "";
  });
  Object.keys(SellerItem.value).forEach(key => {
    SellerItem.value[key] = Seller[key] ?? "";
  });
  Object.keys(configItem.value).forEach(key => {
    configItem.value[key] = invoiceConfig[key] ?? "";
  });
  orderList.value = [];
  orderList.value.push(...order);
}

function money(n) {
  if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)) {
    return "";
  }

  let unit = "仟佰拾亿仟佰拾万仟佰拾圆角分",
    str = "";
  n += "00";
  let p = n.indexOf(".");
  if (p >= 0) n = n.substring(0, p) + n.substr(p + 1, 2);

  unit = unit.substr(unit.length - n.length);

  for (let i = 0; i < n.length; i++)
    str += "零壹贰叁肆伍陆柒捌玖".charAt(n.charAt(i)) + unit.charAt(i);
  return str
    .replace(/零(仟|佰|拾|角)/g, "零")
    .replace(/(零)+/g, "零")
    .replace(/零(万|亿|圆)/g, "$1")
    .replace(/(亿)万|壹(拾)/g, "$1$2")
    .replace(/^圆零?|零分/g, "")
    .replace(/圆$/g, "圆整");
}

function editItem() {}

defineExpose({
  show
});
</script>

<template>
  <div class="InvoiceTmpDiv">
    <el-row v-if="showHeader">
      <el-col :span="12" :offset="6" class="title no-border"
        >XX市增值税XX票XX发票</el-col
      >
      <el-col :span="6" class="extra no-border">
        <div>
          <span class="label title-label">发票代码</span>：<span class="content"
            >xxxxxxxxxxxxxxxx</span
          >
        </div>
        <div>
          <span class="label title-label">发票号码</span>：<span class="content"
            >xxxxxxxxxxxxxxxx</span
          >
        </div>
        <div>
          <span class="label title-label">开票日期</span>：<span class="content"
            >xxxxxxxxxxxxxxxx</span
          >
        </div>
        <div>
          <span class="label title-label">校验码</span>：<span class="content"
            >xxxxxxxxxxxxxxxx</span
          >
        </div>
      </el-col>
    </el-row>
    <el-row class="row height84">
      <el-col :span="1" class="no-border">
        <ul class="tc">
          <li>购</li>
          <li>买</li>
          <li>方</li>
        </ul>
      </el-col>
      <el-col :span="15">
        <div>
          <span class="label">名称</span>：<span class="content"
            >xxxxxxxxxxxxxxxx</span
          >
        </div>
        <div>
          <span class="label">纳税人识别号</span>：<span class="content"
            >xxxxxxxxxxxxxxxx</span
          >
        </div>
        <div>
          <span class="label">地址、电话</span>：<span class="content"
            >xxxxxxxxxxxxxxxx</span
          >
        </div>
        <div>
          <span class="label">开户行及账号</span>：<span class="content"
            >xxxxxxxxxxxxxxxx</span
          >
        </div>
      </el-col>
      <el-col :span="1">
        <ul class="tc">
          <li>密</li>
          <li>码</li>
          <li>区</li>
        </ul></el-col
      >
      <el-col :span="7">
        <el-button
          class="fr"
          type="primary"
          :icon="useRenderIcon('eye-view')"
          @click="editItem()"
        >
          查看销售订单详情
        </el-button>
      </el-col>
    </el-row>
    <div class="row-div">
      <el-row>
        <el-col :span="8" class="no-border">
          <div class="tc">货物或应税劳务、服务名称</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">规格型号</div>
        </el-col>
        <el-col :span="1">
          <div class="tc">单位</div>
        </el-col>
        <el-col :span="2">
          <div class="tc">数量</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">单价</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">金额</div>
        </el-col>
        <el-col :span="1">
          <div class="tc">税率</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">税额</div>
        </el-col>
      </el-row>
      <el-row v-for="(si, sii) in orderList" :key="sii + si">
        <el-col :span="8" class="no-border">
          <div class="tc">{{ si[1] }}</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">{{ si[2] }}</div>
        </el-col>
        <el-col :span="1">
          <div class="tc">{{ si[3] }}</div>
        </el-col>
        <el-col :span="2">
          <div class="tc">{{ si[4] }}</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">{{ si[5] }}</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">{{ si[6] }}</div>
        </el-col>
        <el-col :span="1">
          <div class="tc">{{ si[7] }}</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">{{ si[8] }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="no-border">
          <div class="tc">合计</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">&nbsp;</div>
        </el-col>
        <el-col :span="1">
          <div class="tc">&nbsp;</div>
        </el-col>
        <el-col :span="2">
          <div class="tc">&nbsp;</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">&nbsp;</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">&nbsp;</div>
        </el-col>
        <el-col :span="1">
          <div class="tc">&nbsp;</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">&nbsp;</div>
        </el-col>
      </el-row>
    </div>
    <el-row class="row con">
      <el-col :span="8" class="no-border tc">价税合计（大写）</el-col>
      <el-col :span="9" class="no-border tl">{{ money(num) }}</el-col>
      <el-col :span="7" class="no-border tc"
        >（小写）<span>￥ 111</span></el-col
      >
    </el-row>
    <el-row class="row height84">
      <el-col :span="1" class="no-border">
        <ul class="tc">
          <li>销</li>
          <li>售</li>
          <li>方</li>
        </ul>
      </el-col>
      <el-col :span="15">
        <div>
          <span class="label">名称</span>：<span class="content"
            >xxxxxxxxxxxxxxxx</span
          >
        </div>
        <div>
          <span class="label">纳税人识别号</span>：<span class="content"
            >xxxxxxxxxxxxxxxx</span
          >
        </div>
        <div>
          <span class="label">地址、电话</span>：<span class="content"
            >xxxxxxxxxxxxxxxx</span
          >
        </div>
        <div>
          <span class="label">开户行及账号</span>：<span class="content">{{
            configItem.title
          }}</span>
        </div>
      </el-col>
      <el-col :span="1">
        <ul class="tc">
          <li>备</li>
          <li>&nbsp;</li>
          <li>注</li>
        </ul>
      </el-col>
      <el-col :span="7"> {{}} </el-col>
    </el-row>
    <el-row class="last-row">
      <el-col :span="6" class="no-border">
        <span>收款人：</span>
        <span class="content">{{ configItem.title }}</span>
      </el-col>
      <el-col :span="6" class="no-border">
        <span>复核：</span>
        <span class="content">{{ configItem.title }}</span>
      </el-col>
      <el-col :span="6" class="no-border">
        <span>开票人：</span>
        <span class="content">{{ configItem.title }}</span>
      </el-col>
      <el-col :span="5" class="no-border">
        <span>销售方：（章）</span>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
.InvoiceTmpDiv {
  font-size: 12px;
  width: 100%;
  .title {
    font-size: 26px;
    color: #b16363;
    text-align: center;
    line-height: 56px;
  }
  .extra {
    color: #b15b16;
    padding: 0 0 6px 0;
    div {
      line-height: 18px;
    }
    .content {
      color: #181818;
    }
  }
  .height84 {
    [class*="el-col-"] {
      border-right: 1px solid #b16363;
      &:last-child {
        border-right: 0px;
      }
    }
    ul {
      padding: 15px 0;
      // border-right: 1px solid #b16363;
      li {
        height: 20px;
        line-height: 20px;
      }
    }
    .el-col-15 {
      padding: 5px 10px;
      div {
        line-height: 20px;
      }
    }
    .el-col-7 {
      padding: 5px 10px;
      line-height: 20px;
    }
  }
  .row {
    border: 1px solid #b16363;
    border-bottom: none;
    color: #b15b16;
    &.con {
      padding: 5px 0;
      line-height: 22px;
    }
    .content {
      color: #181818;
    }
    .col_1 {
      width: 4.16%;
    }
    .col_2 {
      width: 8.33%;
    }
    .col_3 {
      width: 12.5%;
    }
    .col_5 {
      width: 20.83%;
    }
    .col_6 {
      width: 25%;
    }
    .col_7 {
      width: 29.16%;
    }
    .col_8 {
      width: 33.33%;
    }
    .col_14 {
      width: 58.33%;
    }
    .col_15 {
      width: 62.5%;
    }
    .col_17 {
      width: 70.83%;
    }
    .col_18 {
      width: 75%;
    }
    .col_24 {
      width: 100%;
    }
    .col_1,
    .col_2,
    .col_3,
    .col_4,
    .col_5,
    .col_6,
    .col_7,
    .col_8,
    .col_14,
    .col_15,
    .col_17,
    .col_18,
    .col_24 {
      display: inline-block;
      padding: 8px;
      box-sizing: border-box;
      vertical-align: middle;
      border-left: 1px solid #b16363;
      height: 100%;
      &.no-border {
        border-left: none;
      }
    }
  }
  .row-div {
    border: 1px solid #b16363;
    // padding:7px 0;
    border-bottom: 0px;
    [class*="el-col-"] {
      padding: 4px 0;
      line-height: 22px;
      border-right: 1px solid #b16363;
      &:last-child {
        border-right: 0px;
      }
    }
    .el-row {
      &:first-child {
        [class*="el-col-"] {
          padding-top: 8px;
        }
      }
      &:last-child {
        [class*="el-col-"] {
          padding-bottom: 10px;
        }
      }
    }
  }

  .last-row {
    padding: 6px 0 0 0;
    .content {
      color: #181818;
    }
    color: #b15b16;
    border-top: 1px solid #b16363;
  }
  .label {
    width: 78px;
    display: inline-block;
    text-align-last: justify;
    text-align: justify;
  }
  .title-label {
    width: 52px;
  }
}
</style>