|
@@ -1,480 +0,0 @@
|
|
|
-<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"> </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>
|
|
|
- </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> </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>
|