fix:封装发票组件

src/components/Invoice/index.ts

@@ -0,0 +1,3 @@
+import Invoice from "./src/index.vue";
+
+export default Invoice;

src/components/Invoice/src/configs.ts

@@ -0,0 +1,147 @@
+export type InvoiceDetail = Partial<{
+  title: string; //发票类型
+  code: string; //发票代码
+  number: string; //发票号码
+  openTime: string; //开票日期
+
+  checkNumber: string; //校验码
+  buyerTitle: string; //购买方抬头
+  buyerCode: string; //购买方纳税人识别号
+  buyerAddr: string; //购买方地址
+  buyerMobile: string; //购买方联系方式
+  buyerBank: string; //购买方银行
+  buyerBankNo: string; //购买方账号
+
+  sellerTitle: string; //销售方抬头
+  sellerCode: string; //销售方纳税人识别号
+  sellerAddr: string; //销售方地址
+  sellerMobile: string; //销售方联系方式
+  sellerBank: string; //销售方银行
+  sellerBankNo: string; //销售方账号
+
+  //发票商品列表
+  goodList: string;
+
+  //列表下的属性
+  listInfo: {
+    name: string; //名称
+    spec: string; //规格
+    unit: string; //单位
+    num: string; //数量
+    goodPrice: string; //单价
+    totalPrice: string; //总价
+    taxRate: string; //税率
+    tax: string; //税额
+  };
+
+  amountTax: string; //总税额
+  amountPrice: string; //总金额
+
+  TotalIncludingTax_C: string; //价税合计 大写
+  TotalIncludingTax_L: string; //价税合计 小写
+
+  payee: string; //收款人
+  reviewer: string; //复核人
+  drawer: string; //开票人
+  seller: string; //销售方
+  remarks: string; //备注
+}>;
+
+//销售发票配置
+const SALE: InvoiceDetail = {
+  title: "",
+  code: "",
+  number: "",
+  openTime: "",
+  checkNumber: "",
+
+  buyerTitle: "",
+  buyerCode: "",
+  buyerAddr: "",
+  buyerMobile: "",
+  buyerBank: "",
+  buyerBankNo: "",
+
+  sellerTitle: "",
+  sellerCode: "",
+  sellerAddr: "",
+  sellerMobile: "",
+  sellerBank: "",
+  sellerBankNo: "",
+
+  goodList: "",
+  listInfo: {
+    name: "",
+    spec: "",
+    unit: "",
+    num: "",
+    goodPrice: "",
+    totalPrice: "",
+    taxRate: "",
+    tax: ""
+  },
+
+  amountTax: "",
+  amountPrice: "",
+
+  TotalIncludingTax_C: "",
+  TotalIncludingTax_L: "",
+
+  payee: "",
+  reviewer: "",
+  drawer: "",
+  seller: "",
+  remarks: ""
+};
+
+//采购发票配置
+const PURCHASE: InvoiceDetail = {
+  title: "",
+  code: "",
+  number: "",
+  openTime: "",
+  checkNumber: "",
+
+  buyerTitle: "",
+  buyerCode: "",
+  buyerAddr: "",
+  buyerMobile: "",
+  buyerBank: "",
+  buyerBankNo: "",
+
+  sellerTitle: "",
+  sellerCode: "",
+  sellerAddr: "",
+  sellerMobile: "",
+  sellerBank: "",
+  sellerBankNo: "",
+
+  goodList: "",
+  listInfo: {
+    name: "",
+    spec: "",
+    unit: "",
+    num: "",
+    goodPrice: "",
+    totalPrice: "",
+    taxRate: "",
+    tax: ""
+  },
+
+  amountTax: "",
+  amountPrice: "",
+
+  TotalIncludingTax_C: "",
+  TotalIncludingTax_L: "",
+
+  payee: "",
+  reviewer: "",
+  drawer: "",
+  seller: "",
+  remarks: ""
+};
+
+export const RESPONSE_MAP = {
+  sale: SALE,
+  purchase: PURCHASE
+};

src/components/Invoice/src/index.vue

@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useAsync } from "/@/hooks";
+import { type InvoiceDetail, RESPONSE_MAP } from "./configs";
+import dayjs from "dayjs";
+
+type InvoiceType = "sale" | "purchase";
+
+let prop: InvoiceDetail = {};
+
+const props = defineProps<{
+  type: InvoiceType;
+  invNo: string;
+}>();
+
+const {
+  data: invoiceDetail,
+  run: invoiceDetailRun,
+  loading: invoiceLoading
+} = useAsync<InvoiceDetail>({
+  initalData: {}
+});
+
+function requesetInvoiceData() {
+  const { type, invNo } = props;
+  //映射响应字段
+  prop = RESPONSE_MAP[type];
+  //todo:区分销售采购 -> 请求不同的接口
+  const api = type === "purchase" ? "httpPurchase" : "httpSale"; //伪代码
+
+  invoiceDetailRun(
+    api({
+      invNo
+    })
+  );
+}
+
+onMounted(() => requesetInvoiceData());
+</script>
+
+<template>
+  <div class="InvoiceTmpDiv" v-loading="invoiceLoading">
+    <el-row>
+      <el-col :span="12" :offset="6" class="title no-border">
+        {{ invoiceDetail[prop.title] }}
+      </el-col>
+      <el-col :span="6" class="extra no-border">
+        <div>
+          <span class="label title-label">发票代码</span>：<span
+            class="content"
+            >{{ invoiceDetail[prop.code] }}</span
+          >
+        </div>
+        <div>
+          <span class="label title-label">发票号码</span>：<span
+            class="content"
+            >{{ invoiceDetail[prop.number] }}</span
+          >
+        </div>
+        <div>
+          <span class="label title-label">开票日期</span>：<span
+            class="content"
+            >{{
+              invoiceDetail[prop.openTime]
+                ? dayjs(invoiceDetail[prop.openTime]).format("YYYY-MM-DD")
+                : ""
+            }}</span
+          >
+        </div>
+        <div>
+          <span class="label title-label">校验码</span>：<span
+            class="content"
+            >{{ invoiceDetail[prop.checkNumber] }}</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 flex mb-1>
+          <span class="label">名称</span>：<span class="content">
+            {{ invoiceDetail[prop.buyerTitle] }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">纳税人识别号</span>：<span class="content">
+            {{ invoiceDetail[prop.buyerCode] }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">地址、电话</span>：<span class="content">
+            {{ invoiceDetail[prop.buyerAddr] }}
+            {{ invoiceDetail[prop.buyerMobile] }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">开户行及账号</span>：<span class="content">
+            {{ invoiceDetail[prop.buyerBank] }}
+            {{ invoiceDetail[prop.buyerBankNo] }}
+          </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-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>
+      <div
+        style="border-bottom: 1px solid #b16363"
+        v-if="invoiceDetail && invoiceDetail[prop.goodList]"
+      >
+        <el-row
+          v-for="(item, index) in invoiceDetail[prop.goodList]"
+          :key="index"
+        >
+          <el-col :span="8" class="no-border">
+            <div class="tc">{{ item[prop.listInfo.name] }}</div>
+          </el-col>
+          <el-col :span="3">
+            <div class="tc">{{ item[prop.listInfo.spec] }}</div>
+          </el-col>
+          <el-col :span="1">
+            <div class="tc">{{ item[prop.listInfo.unit] }}</div>
+          </el-col>
+          <el-col :span="2">
+            <div class="tc">{{ item[prop.listInfo.num] }}</div>
+          </el-col>
+          <el-col :span="3">
+            <div class="tc">
+              {{ item[prop.listInfo.goodPrice] }}
+            </div>
+          </el-col>
+          <el-col :span="3">
+            <div class="tc">{{ item[prop.listInfo.totalPrice] }}</div>
+          </el-col>
+          <el-col :span="1">
+            <div class="tc">{{ item[prop.listInfo.taxRate] }}</div>
+          </el-col>
+          <el-col :span="3">
+            <div class="tc">{{ item[prop.listInfo.tax] }}</div>
+          </el-col>
+        </el-row>
+      </div>
+      <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">
+            {{ invoiceDetail[prop.amountTax] }}
+          </div>
+        </el-col>
+        <el-col :span="1">
+          <div class="tc">&nbsp;</div>
+        </el-col>
+        <el-col :span="3">
+          <div class="tc">
+            {{ invoiceDetail[prop.amountPrice] }}
+          </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">
+        {{ invoiceDetail[prop.TotalIncludingTax_C] }}
+      </el-col>
+      <el-col :span="7" class="no-border tc"
+        >（小写）<span>{{
+          invoiceDetail[prop.TotalIncludingTax_L]
+        }}</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 flex mb-1>
+          <span class="label">名称</span>：<span class="content">
+            {{ invoiceDetail[prop.sellerTitle] }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">纳税人识别号</span>：<span class="content">
+            {{ invoiceDetail[prop.sellerCode] }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">地址、电话</span>：<span class="content">
+            {{ invoiceDetail[prop.sellerAddr] }}
+            {{ invoiceDetail[prop.sellerMobile] }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">开户行及账号</span>：<span class="content">
+            {{ invoiceDetail[prop.sellerBank] }}
+            {{ invoiceDetail[prop.sellerBankNo] }}
+          </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">{{ invoiceDetail[prop.remarks] }}</el-col>
+    </el-row>
+    <el-row class="last-row">
+      <el-col :span="6" class="no-border">
+        <span>收款人：</span>
+        <span class="content">{{ invoiceDetail[prop.payee] }}</span>
+      </el-col>
+      <el-col :span="6" class="no-border">
+        <span>复核：</span>
+        <span class="content">{{ invoiceDetail[prop.reviewer] }}</span>
+      </el-col>
+      <el-col :span="6" class="no-border">
+        <span>开票人：</span>
+        <span class="content">{{ invoiceDetail[prop.drawer] }}</span>
+      </el-col>
+      <el-col :span="5" class="no-border">
+        <span>销售方：</span>
+        <span class="content">{{ invoiceDetail[prop.seller] }}</span>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import "./style.scss";
+</style>

src/components/Invoice/src/style.scss

@@ -0,0 +1,161 @@
+
+.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;
+  }
+}

src/components/InvoiceTitle/index.ts

@@ -0,0 +1,3 @@
+import Invoice from "./src/index.vue";
+
+export default Invoice;

src/components/InvoiceTitle/src/index.vue

@@ -0,0 +1,407 @@
+<script setup lang="ts">
+import dayjs from "dayjs";
+import { INV_TYPE } from "/@/utils/details/inv-open";
+defineProps<{
+  invoiceData: Record<string, string>;
+  isRed: boolean;
+}>();
+</script>
+
+<template>
+  <div class="InvoiceTmpDiv" v-if="Object.keys(invoiceData || {}).length > 0">
+    <el-row>
+      <el-col :span="12" :offset="6" class="title no-border">{{
+        INV_TYPE.find(t => t.value === invoiceData?.inv_type)?.label
+      }}</el-col>
+      <el-col :span="6" class="extra no-border">
+        <div>
+          <span class="label title-label">发票代码</span>：<span
+            class="content"
+            >{{ invoiceData.invoiceCode }}</span
+          >
+        </div>
+        <div>
+          <span class="label title-label">发票号码</span>：<span
+            class="content"
+            >{{ invoiceData.invoiceNumber }}</span
+          >
+        </div>
+        <div>
+          <span class="label title-label">开票日期</span>：<span
+            class="content"
+            >{{
+              invoiceData.open_time
+                ? dayjs(invoiceData.open_time).format("YYYY-MM-DD")
+                : ""
+            }}</span
+          >
+        </div>
+        <div>
+          <span class="label title-label">校验码</span>：<span
+            class="content"
+            >{{ invoiceData.checkNumber }}</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 flex mb-1>
+          <span class="label">名称</span>：<span class="content">
+            {{ invoiceData.buyer_title }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">纳税人识别号</span>：<span class="content">
+            {{ invoiceData.buyer_code }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">地址、电话</span>：<span class="content">
+            {{ invoiceData.buyer_addr }} {{ invoiceData.buyer_mobile }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">开户行及账号</span>：<span class="content">
+            {{ invoiceData.buyer_bank }} {{ invoiceData.buyer_bankNo }}
+          </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"> 添加订单数据 </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>
+      <div
+        style="border-bottom: 1px solid #b16363"
+        v-if="invoiceData && invoiceData.goodList"
+      >
+        <el-row v-for="(item, index) in invoiceData.goodList" :key="index">
+          <el-col :span="8" class="no-border">
+            <div class="tc">{{ item.goodName }}</div>
+          </el-col>
+          <el-col :span="3">
+            <div class="tc">{{ item.specInfo }}</div>
+          </el-col>
+          <el-col :span="1">
+            <div class="tc">{{ item.unitName }}</div>
+          </el-col>
+          <el-col :span="2">
+            <div class="tc">{{ item.goodNum }}</div>
+          </el-col>
+          <el-col :span="3">
+            <div class="tc">
+              {{ isRad ? "-" + item.totalPrice : item.totalPrice }}
+            </div>
+          </el-col>
+          <el-col :span="3">
+            <div class="tc">{{ item.amount }}</div>
+          </el-col>
+          <el-col :span="1">
+            <div class="tc">{{ item.tax_rate }}</div>
+          </el-col>
+          <el-col :span="3">
+            <div class="tc">{{ item.tax }}</div>
+          </el-col>
+        </el-row>
+      </div>
+      <el-row>
+        <el-col :span="8" class="no-border" v-if="invoiceData.item_list">
+          <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">
+            {{ invoiceData.subtotal_amount }}
+          </div>
+        </el-col>
+        <el-col :span="1">
+          <div class="tc">&nbsp;</div>
+        </el-col>
+        <el-col :span="3">
+          <div class="tc">
+            {{ invoiceData.subtotal_tax }}
+          </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" />
+      <el-col :span="7" class="no-border tc"
+        >（小写）<span>{{ invoiceData.inv_value }}</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 flex mb-1>
+          <span class="label">名称</span>：<span class="content">
+            {{ invoiceData.seller_title }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">纳税人识别号</span>：<span class="content">
+            {{ invoiceData.seller_code }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">地址、电话</span>：<span class="content">
+            {{ invoiceData.seller_addr }} {{ invoiceData.seller_mobile }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">开户行及账号</span>：<span class="content">
+            {{ invoiceData.seller_bank }} {{ invoiceData.seller_bankNo }}
+          </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">{{ invoiceData.remarks }}</el-col>
+    </el-row>
+    <el-row class="last-row">
+      <el-col :span="6" class="no-border">
+        <span>收款人：</span>
+        <span class="content">{{ invoiceData.payee }}</span>
+      </el-col>
+      <el-col :span="6" class="no-border">
+        <span>复核：</span>
+        <span class="content">{{ invoiceData.reviewer }}</span>
+      </el-col>
+      <el-col :span="6" class="no-border">
+        <span>开票人：</span>
+        <span class="content">{{ invoiceData.drawer }}</span>
+      </el-col>
+      <el-col :span="5" class="no-border">
+        <span>销售方：</span>
+        <span class="content">{{ invoiceData.seller_title }}</span>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.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>

src/components/OrderRecordDetail/index.ts

@@ -0,0 +1,3 @@
+import OrderRecordDetail from "./src/index.vue";
+
+export default OrderRecordDetail;

src/components/OrderRecordDetail/src/index.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import BasicDescriptions from "/@/components/BasicDescriptions";
+import { RECONCILIATION_COLUMNS } from "/@/utils/details/reconciliation";
+import { computed, watchEffect } from "vue";
+import { httpInfo } from "/@/api/purchase/orderRecord";
+import { useAsync } from "/@/hooks";
+
+import {
+  send_status_list,
+  cg_order_source_options,
+  cgd_type_list
+} from "/@/utils/status";
+
+const props = defineProps<{
+  payNo: string;
+}>();
+
+const hiddenColumns = [
+  "inv_status",
+  "remark",
+  "ainv_fee",
+  "inv_fee",
+  "winv_fee",
+  "inv_tag_fee"
+];
+
+const columns = RECONCILIATION_COLUMNS.filter(col => {
+  return !hiddenColumns.includes(col.field);
+});
+
+const { data: orderRecordDetail, run: orderRecordDetailRun } = useAsync({
+  initalData: {}
+});
+
+//采购单个数
+const total = computed(
+  () =>
+    (orderRecordDetail.value as any).cgdlist &&
+    (orderRecordDetail.value as any).cgdlist.length
+);
+
+const requesetOrderRecordDetail = () => {
+  orderRecordDetailRun(
+    httpInfo({
+      payNo: props.payNo
+    })
+  );
+};
+
+watchEffect(() => {
+  const { payNo } = props;
+  if (!payNo) return;
+
+  requesetOrderRecordDetail();
+});
+</script>
+
+<template>
+  <BasicDescriptions
+    :col-number="2"
+    :data="orderRecordDetail"
+    :columns="columns"
+  />
+  <div flex justify-between w-full my-1>
+    <el-tag type="warning">共计:{{ total }}个订单</el-tag>
+  </div>
+
+  <el-table
+    ref="tableRef"
+    row-key="id"
+    size="small"
+    :data="(orderRecordDetail as any).cgdlist || []"
+    max-height="400"
+  >
+    <el-table-column label="采购单编号" prop="sequenceNo" width="150" />
+    <el-table-column label="采购单信息">
+      <el-table-column
+        label="供货商"
+        prop="supplierName"
+        width="160"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="发货状态"
+        prop="sendStatus"
+        width="90"
+        show-overflow-tooltip
+      >
+        <template #default="{ row }">
+          <el-tag>{{
+            send_status_list.find(s => s.value === row.sendStatus)?.label
+          }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="业务公司"
+        prop="companyName"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="订单来源"
+        prop="cgdSource"
+        width="100"
+        show-overflow-tooltip
+      >
+        <template #default="{ row }">
+          <el-tag>
+            {{
+              cg_order_source_options.find(t => t.value === row.cgdSource)
+                ?.label
+            }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="总货款"
+        prop="totalPrice"
+        width="80"
+        show-overflow-tooltip
+      />
+    </el-table-column>
+    <el-table-column label="商品信息">
+      <el-table-column
+        label="商品编号"
+        prop="goodNo"
+        width="140"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="商品名称"
+        prop="goodName"
+        width="180"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="商品来源"
+        prop="cgdType"
+        width="90"
+        show-overflow-tooltip
+      >
+        <template #="{ row }">
+          <el-tag>
+            {{
+              cgd_type_list.find(t => t.value === String(row.cgdType))?.label
+            }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="商品数量"
+        prop="goodNum"
+        width="90"
+        show-overflow-tooltip
+      />
+    </el-table-column>
+    <el-table-column
+      label="采购员"
+      prop="ownerName"
+      width="75"
+      show-overflow-tooltip
+    />
+  </el-table>
+</template>

src/components/PageContent/src/page-content.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from "vue";
+import { defineComponent, ref } from "vue";
 import PureTable from "@pureadmin/table";
 import { pageContentProps } from "./types";
 import { TableProBar } from "../../ReTable";
@@ -21,6 +21,8 @@ const PageConent = defineComponent({
     //根据传入的api决定表格需要的操作
     const action = createOperation(props.contentConfig.apis);
 
+    const tableRef = ref<InstanceType<typeof PureTable>>(null);
+
     const {
       loading,
       dataList,
@@ -110,12 +112,20 @@ const PageConent = defineComponent({
       );
     }
 
+    function renderExpand(row) {
+      const { contentConfig } = props;
+      const { showExpand } = contentConfig;
+      if (!showExpand || !showExpand(row)) return null;
+      return slots.expand && slots.expand(row);
+    }
+
     function renderPureTable(size, checkList) {
       const { contentConfig } = props;
-      const { columns, treeProps, rowKey } = contentConfig;
+      const { columns, treeProps, rowKey, isTree } = contentConfig;
 
       return (
         <PureTable
+          ref={isTree && tableRef}
           border
           align="left"
           defaultExp
@@ -134,7 +144,7 @@ const PageConent = defineComponent({
           {...paginationConfig}
           v-slots={{
             operation: ({ row }) => renderOperation(row),
-            expand: ({ row }) => slots.expand && slots.expand(row)
+            expand: ({ row }) => renderExpand(row)
           }}
         />
       );
@@ -152,6 +162,7 @@ const PageConent = defineComponent({
 
       return (
         <TableProBar
+          tableRef={tableRef.value?.getTableRef()}
           title={title}
           dataList={dataList.value}
           onRefresh={onSearch}

src/components/PageContent/src/types.ts

@@ -31,6 +31,7 @@ export interface ContentConfig {
   delTooltip?: string;
   showPreview?: (row: Record<string, string>) => boolean;
   showDelete?: (row: Record<string, string>) => boolean;
+  showExpand?: (row: Record<string, string>) => boolean;
 }
 
 interface ContentApiResponse {

src/hooks/permission/use-permission.ts

@@ -22,7 +22,6 @@ export function usePermission({ pageName, callback, contentConfig }: Params) {
 
   onMounted(() => {
     permissions.value = useUserStoreHook().getMenuActions(pageName);
-    console.log("hooks---");
     callback && callback(unref(permissions));
   });
 

src/style/index.scss

@@ -100,4 +100,4 @@ html {
     text-align: center;
     line-height: 32px;
   }
-}
+}

src/utils/details/inv-open.ts

@@ -192,3 +192,170 @@ export const INV_OPEN_COLUMNS: DescriptionColumns = [
     label: "复核人"
   }
 ];
+
+export const ORDER_COLUMNS = [
+  {
+    field: "invNo",
+    label: "发票编号"
+  },
+  {
+    field: "inv_value",
+    label: "发票金额"
+  },
+  {
+    field: "inv_out",
+    label: "开票业务公司"
+  },
+  {
+    field: "inv_in",
+    label: "客户公司"
+  },
+  {
+    field: "apply_name",
+    label: "申请人"
+  },
+  {
+    field: "status",
+    label: "开票状态",
+    render(data) {
+      return h(
+        ElTag,
+        {
+          type: INV_OPEN_STATUS.find(s => s.value === data)?.type as any
+        },
+        {
+          default: () =>
+            INV_OPEN_STATUS.find(s => s.value === data)?.label || "--"
+        }
+      );
+    }
+  },
+  {
+    field: "inv_type",
+    label: "发票类型",
+    render(data) {
+      return h(
+        ElTag,
+        {
+          type: INV_TYPE.find(s => s.value === data)?.type as any
+        },
+        {
+          default: () => INV_TYPE.find(t => t.value === data)?.label || "--"
+        }
+      );
+    }
+  },
+  {
+    field: "open_type",
+    label: "开票方式",
+    render(data) {
+      return h(ElTag, null, {
+        default: () => OPEN_TYPE.find(t => t.value === data)?.label || "--"
+      });
+    }
+  },
+  {
+    field: "is_ticket",
+    label: "是否支持金税",
+    render(data) {
+      return h(ElTag, null, {
+        default: () => (data === "0" ? "不支持" : "支持")
+      });
+    }
+  },
+  {
+    field: "exam_remark",
+    label: "审核备注"
+  },
+  {
+    field: "remark",
+    label: "备注"
+  },
+  {
+    field: "email",
+    label: "电子邮箱"
+  },
+  {
+    field: "winv_fee",
+    label: "未开票"
+  },
+  {
+    field: "ainv_fee",
+    label: "已开票"
+  },
+  {
+    field: "post_fee",
+    label: "快递费"
+  },
+  {
+    field: "post_code",
+    label: "快递编号"
+  },
+  {
+    field: "post_company",
+    label: "快递公司"
+  }
+];
+
+export const INVOICE_COLUMNS = [
+  {
+    field: "buyer_title",
+    label: "买方抬头"
+  },
+  {
+    field: "buyer_code",
+    label: "买方纳税识别号"
+  },
+  {
+    field: "buyer_addr",
+    label: "买方注册地址"
+  },
+  {
+    field: "buyer_mobile",
+    label: "买方联系方式"
+  },
+  {
+    field: "buyer_bank",
+    label: "买方银行"
+  },
+  {
+    field: "seller_title",
+    label: "销售方抬头"
+  },
+  {
+    field: "seller_code",
+    label: "销售方纳税识别号"
+  },
+  {
+    field: "seller_addr",
+    label: "销售方地址"
+  },
+  {
+    field: "seller_mobile",
+    label: "销售方联系方式"
+  },
+  {
+    field: "seller_bank",
+    label: "销售方银行"
+  },
+  {
+    field: "seller_bankNo",
+    label: "销售方账户"
+  },
+  {
+    field: "voider",
+    label: "作废人"
+  },
+  {
+    field: "payee",
+    label: "收款人"
+  },
+  {
+    field: "drawer",
+    label: "开票人"
+  },
+  {
+    field: "ownerPlace",
+    label: "复核人"
+  }
+];

src/utils/details/sale.ts

@@ -279,3 +279,219 @@ export const SALE_COLUMNS: DescriptionColumns = [
     label: "退货金额"
   }
 ];
+
+export const ORDER_COLUMNS: DescriptionColumns = [
+  {
+    field: "sequenceNo",
+    label: "销售单编号"
+  },
+  {
+    field: "ownerName",
+    label: "销售员"
+  },
+  {
+    field: "department",
+    label: "销售部门"
+  },
+  {
+    field: "createdTime",
+    label: "销售单新建时间"
+  },
+  {
+    field: "status",
+    label: "状态",
+    render(data) {
+      return h(ElTag, null, {
+        default: () => SALE_STATUS.find(s => s.value === data)?.label
+      });
+    }
+  },
+  {
+    field: "sequenceNo",
+    label: "销售单类型"
+  },
+  {
+    field: "companyName",
+    label: "业务公司名称"
+  },
+  {
+    field: "customerName",
+    label: "客户公司名称"
+  },
+  {
+    field: "poCode",
+    label: "po编号"
+  },
+  {
+    field: "platName",
+    label: "平台名称"
+  },
+  {
+    field: "workCode",
+    label: "业务编号"
+  },
+  {
+    field: "sendNum",
+    label: "发货数量"
+  },
+  {
+    field: "wsendNum",
+    label: "未发货数量"
+  },
+  {
+    field: "apay_fee",
+    label: "已付金额"
+  },
+  {
+    field: "pay_fee",
+    label: "付款中"
+  },
+  {
+    field: "inv_fee",
+    label: "开票中"
+  },
+  {
+    field: "ainv_fee",
+    label: "已开票"
+  },
+  {
+    field: "sendType",
+    label: "发货方式",
+    render(data) {
+      return h(ElTag, null, {
+        default: () => SEND_TYPE.find(t => t.value === data)?.label
+      });
+    }
+  },
+  {
+    field: "inv_status",
+    label: "开票状态",
+    render(data) {
+      return h(ElTag, null, {
+        default: () => INV_STATUS.find(t => t.value === data)?.label
+      });
+    }
+  },
+  {
+    field: "pay_status",
+    label: "付款状态",
+    render(data) {
+      return h(ElTag, null, {
+        default: () => PAY_STATUS.find(t => t.value === data)?.label
+      });
+    }
+  },
+  {
+    field: "paytime",
+    label: "付款时间"
+  },
+  {
+    field: "diff_weight",
+    label: "工差重量"
+  },
+  {
+    field: "diff_fee",
+    label: "工差金额"
+  },
+  {
+    field: "customerAttr",
+    label: "公司属性"
+  },
+  {
+    field: "branch",
+    label: "分公司"
+  },
+  {
+    field: "cgdNo",
+    label: "采购单号"
+  },
+  {
+    field: "thNum",
+    label: "退货数量"
+  },
+  {
+    field: "th_fee",
+    label: "退货金额"
+  }
+];
+
+export const GOOD_COLUMNS: DescriptionColumns = [
+  {
+    field: "goodNo",
+    label: "商品编号"
+  },
+  {
+    field: "goodBrand",
+    label: "品牌"
+  },
+  {
+    field: "firstCat",
+    label: "一级分类"
+  },
+  {
+    field: "secCat",
+    label: "二级分类"
+  },
+  {
+    field: "thirdCat",
+    label: "三级分类"
+  },
+  {
+    field: "goodMaterial",
+    label: "材质"
+  },
+  {
+    field: "goodType",
+    label: "商品类型",
+    render(data) {
+      return h(ElTag, null, {
+        default: () => SALE_GOOD_TYPE.find(t => t.value === data)?.label
+      });
+    }
+  },
+  {
+    field: "goodModel",
+    label: "型号"
+  },
+  {
+    field: "isStock",
+    label: "是否库存",
+    render(data) {
+      return h(ElTag, null, {
+        default: () => (data === "1" ? "库存" : "非库存")
+      });
+    }
+  },
+  {
+    field: "metalsType",
+    label: "贵金属种类"
+  },
+  {
+    field: "weight",
+    label: "重量"
+  },
+  {
+    field: "goldPrice",
+    label: "金价"
+  },
+  {
+    field: "workDay",
+    label: "工期"
+  },
+  {
+    field: "tax",
+    label: "税率"
+  },
+  {
+    field: "goodNum",
+    label: "商品数量"
+  },
+  {
+    field: "goodPrice",
+    label: "商品单价"
+  },
+  {
+    field: "totalPrice",
+    label: "总金额"
+  }
+];

src/utils/details/tragelog.ts

@@ -60,7 +60,7 @@ export const CAPITAL_COLUMNS: DescriptionColumns = [
     label: "付款公司"
   },
   {
-    field: "trade_in",
+    field: "trade_bank",
     label: "银行"
   },
   {

src/views/InvoiceSales/capitalClaim/components/basic-claim/sales-modal.vue

@@ -6,11 +6,12 @@ import { useAsync } from "/@/hooks";
 
 import {
   sale_type,
-  sale_source,
   sale_columns,
   sale_order_status
 } from "../../config/configs";
 
+import { xs_order_source_options } from "/@/utils/status";
+
 const emit = defineEmits(["save-click-button"]);
 
 const visible = ref(false);
@@ -36,7 +37,16 @@ const {
 });
 
 const handleSelectChange = values => (selectSaleOrder.value = values);
-const reuquestSalelist = () => salelistRun(httpSaleList(getPaginationParams()));
+
+const reuquestSalelist = () => {
+  salelistRun(
+    httpSaleList({
+      inv_status: "0",
+      pay_status: "0",
+      ...getPaginationParams()
+    })
+  );
+};
 
 function handleSave() {
   emit("save-click-button", unref(selectSaleOrder));
@@ -73,6 +83,7 @@ onMounted(() => reuquestSalelist());
         :prop="col.field"
         :label="col.label"
         :key="index"
+        :width="col.width"
         :type="col.type"
         show-overflow-tooltip
         reserve-selection
@@ -87,7 +98,10 @@ onMounted(() => reuquestSalelist());
           </el-tag>
 
           <el-tag v-else-if="col.field === 'qrdSource'">
-            {{ sale_source.find(s => s.value === row.qrdSource)?.label }}
+            {{
+              xs_order_source_options.find(s => s.value === row.qrdSource)
+                ?.label
+            }}
           </el-tag>
         </template>
       </el-table-column>

src/views/InvoiceSales/capitalClaim/components/capital-detail/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watchEffect } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute } from "vue-router";
 import { useResponseHandle } from "/@/hooks";
 import { httpDetail, httpStatus } from "/@/api/InvoiceSales/capitalPool";
 import { httpInfo } from "/@/api/InvoiceSales/capitalClaim";
@@ -8,14 +8,14 @@ import BasicDescriptions from "/@/components/BasicDescriptions";
 import { approval_process } from "../approval-process";
 import { CAPITAL_COLUMNS } from "/@/utils/details/tragelog";
 import PaymentReceipt from "../basic-claim/receipt-payment.vue";
-import { SALE_COLUMNS } from "/@/utils/details/sale";
+import { ORDER_COLUMNS, GOOD_COLUMNS } from "/@/utils/details/sale";
 
 const { query } = useRoute();
-const { push } = useRouter();
 const responseHandle = useResponseHandle();
 const capitalDetail = ref<any>({});
 const tradeDetail = ref<any>({});
-const collapses = ref(["1", "2", "3", "4"]);
+const collapses = ref(["1", "2", "3", "4", "5"]);
+const loading = ref(false);
 
 const logNo = computed(() => query.id);
 
@@ -27,9 +27,11 @@ const currentProcess = computed(() => {
 
 //资金认领详情
 async function requesetCapitalDetail() {
+  loading.value = true;
   const { code, message, data } = await httpDetail({
     logNo: logNo.value
   });
+  loading.value = false;
 
   responseHandle({
     code,
@@ -66,7 +68,7 @@ async function requesetCapitalStatus(otherParams) {
   responseHandle({
     code,
     message,
-    handler: () => push("/InvoiceSales/capitalClaim")
+    handler: () => requesetTradeDetail()
   });
 }
 
@@ -82,7 +84,7 @@ watchEffect(() => tradeNo.value && requesetTradeDetail());
 </script>
 
 <template>
-  <div class="capital__content" bg-white>
+  <div class="capital__content" bg-white v-loading="loading">
     <ElTabs>
       <ElTabPane label="详情">
         <ElCollapse v-model="collapses">
@@ -90,15 +92,23 @@ watchEffect(() => tradeNo.value && requesetTradeDetail());
             <PaymentReceipt :trade-info="tradeDetail" />
           </ElCollapseItem>
           <!-- 关联订单 -->
-          <ElCollapseItem title="关联订单" name="2">
+          <ElCollapseItem title="关联订单信息" name="2">
             <BasicDescriptions
-              :columns="SALE_COLUMNS"
+              :columns="ORDER_COLUMNS"
+              :data="capitalDetail.orderinfo ? capitalDetail.orderinfo : {}"
+              :col-number="2"
+            />
+          </ElCollapseItem>
+
+          <ElCollapseItem title="商品信息" name="3">
+            <BasicDescriptions
+              :columns="GOOD_COLUMNS"
               :data="capitalDetail.orderinfo ? capitalDetail.orderinfo : {}"
               :col-number="2"
             />
           </ElCollapseItem>
           <!-- 详情 -->
-          <ElCollapseItem title="认领资金详情" name="3">
+          <ElCollapseItem title="认领资金详情" name="4">
             <BasicDescriptions
               :columns="CAPITAL_COLUMNS"
               :data="capitalDetail"
@@ -108,7 +118,7 @@ watchEffect(() => tradeNo.value && requesetTradeDetail());
 
           <!-- 审核 -->
           <ElCollapseItem
-            name="4"
+            name="5"
             v-if="currentProcess"
             :title="currentProcess.title"
           >

src/views/InvoiceSales/capitalClaim/config/configs.ts

@@ -30,16 +30,16 @@ export const order_columns = [
     align: "left"
   },
   {
-    label: "已认领",
+    prop: "apay_fee",
+    label: "已付款"
+  },
+  {
     prop: "pay_fee",
-    minWidth: 180,
-    align: "left"
+    label: "付款中"
   },
   {
-    label: "未认领",
     prop: "wpay_fee",
-    minWidth: 180,
-    align: "left"
+    label: "未付款"
   },
   {
     label: "此次认领",
@@ -135,67 +135,53 @@ export const sale_columns = [
   },
   {
     field: "sequenceNo",
-    label: "确认单编号"
-  },
-  {
-    field: "ownerName",
-    label: "销售员"
-  },
-  {
-    field: "department",
-    label: "平台名称"
-  },
-  {
-    field: "status",
-    label: "订单状态"
+    label: "订单编号"
   },
   {
-    field: "qrdType",
-    label: "订单类型"
+    field: "companyNo",
+    label: "业务公司编号",
+    width: 120
   },
   {
-    field: "qrdSource",
-    label: "订单来源"
+    field: "goodNo",
+    label: "商品编号"
   },
   {
-    field: "companyNo",
-    label: "业务公司编号"
+    field: "goodName",
+    label: "商品名称"
   },
   {
     field: "companyName",
+    width: 120,
     label: "业务公司名称"
   },
   {
-    field: "customerName",
-    label: "客户名称"
-  },
-  {
-    field: "platName",
-    label: "平台名称"
+    field: "apay_fee",
+    label: "已付款"
   },
   {
-    field: "goodNo",
-    label: "商品编号"
+    field: "pay_fee",
+    label: "付款中"
   },
   {
-    field: "goodName",
-    label: "商品名称"
+    field: "wpay_fee",
+    label: "未付款"
   },
   {
-    field: "goodBrand",
-    label: "商品品牌"
+    field: "status",
+    label: "订单状态"
   },
   {
-    field: "firstCat",
-    label: "一级分类"
+    field: "qrdType",
+    label: "订单类型"
   },
   {
-    field: "secCat",
-    label: "二级分类"
+    field: "qrdSource",
+    label: "订单来源"
   },
   {
-    field: "thirdCat",
-    label: "三级分类"
+    field: "ownerName",
+    label: "销售员"
   }
 ];
 
@@ -231,46 +217,33 @@ export const sale_type = [
   }
 ];
 
-//销售单订单来源
-export const sale_source = [
+//认领状态
+export const capital_status = [
   {
     value: "1",
-    label: "直接下单"
+    label: "未认领"
   },
   {
     value: "2",
-    label: "咨询"
+    label: "部分认领"
   },
   {
     value: "3",
-    label: "项目"
-  },
-  {
-    value: "4",
-    label: "来源"
-  },
-  {
-    value: "5",
-    label: "有赞"
-  },
-  {
-    value: "6",
-    label: "售后补换货"
+    label: "已认领"
   }
 ];
 
-//认领状态
-export const capital_status = [
+export const capital_status_list = [
   {
     value: "1",
-    label: "未认领"
+    label: "待审批"
   },
   {
     value: "2",
-    label: "部分认领"
+    label: "审批通过"
   },
   {
     value: "3",
-    label: "已认领"
+    label: "审批驳回"
   }
 ];

src/views/InvoiceSales/capitalClaim/config/content.config.ts

@@ -19,14 +19,14 @@ const columns = [
     width: 70,
     hide: ({ checkList }) => !checkList.includes("序号列")
   },
-  // {
-  //   type: "expand",
-  //   slot: "expand"
-  // },
+  {
+    type: "expand",
+    slot: "expand"
+  },
   {
     label: "资金编号",
     prop: "tradNo",
-    width: 200
+    width: 160
   },
   {
     label: "状态",
@@ -49,12 +49,12 @@ const columns = [
   {
     label: "付款单位账号",
     prop: "trade_account",
-    width: 180
+    width: 160
   },
   {
     label: "付款银行单位名称",
     prop: "trade_out",
-    width: 200
+    width: 160
   },
   {
     label: "交易时间",
@@ -74,8 +74,7 @@ const columns = [
   },
   {
     label: "收款单位名称",
-    prop: "trade_in",
-    width: 130
+    prop: "trade_in"
   },
   {
     label: "未认领",
@@ -87,11 +86,6 @@ const columns = [
     prop: "used_fee",
     width: 80
   },
-  {
-    label: "交易用途",
-    prop: "trade_used",
-    width: 120
-  },
   {
     label: "操作",
     fixed: "right",
@@ -106,9 +100,8 @@ const contentConfig: ContentConfig = {
   apis: {
     httpList
   },
+  showExpand: row => row.child.length > 0,
   isTree: true,
-  rowKey: "id",
-  treeProps: { hasChildren: true, children: "child" },
   powers: ["001", "002", "003", "004", "005", "006", "007", "008"]
 };
 

src/views/InvoiceSales/capitalClaim/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
 import { utils, writeFile } from "xlsx";
 import { useRouter } from "vue-router";
 import { PageSearch, usePageSearch } from "/@/components/PageSearch";
@@ -8,8 +8,11 @@ import PagePower from "/@/components/PagePower/PagePower.vue";
 import ExeclUpload from "./components/execl-upload.vue";
 import searchFormConfig from "./config/search.config";
 import contentConfig from "./config/content.config";
-import { useUserStoreHook } from "/@/store/modules/user";
 import { template } from "./config/xls-template";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+import { usePermission } from "/@/hooks";
+import { cgd_type_list, xs_order_source_options } from "/@/utils/status";
+import { capital_status_list } from "./config/configs";
 
 defineOptions({
   name: "invoiceheader"
@@ -47,7 +50,7 @@ function onDownloadTemplate() {
 }
 
 //到详情页
-function toFundClaim(tradNo, logNo) {
+function toFundClaim({ tradNo, logNo }) {
   push({
     path: "/InvoiceSales/capitalClaimDetail",
     query: {
@@ -56,15 +59,16 @@ function toFundClaim(tradNo, logNo) {
   });
 }
 
-onMounted(
-  () =>
-    (contentConfig.powers = useUserStoreHook().getMenuActions("capitalClaim"))
-);
+const { permission, contentConfigRef } = usePermission({
+  pageName: "capitalClaim",
+  contentConfig,
+  callback: powers => (contentConfig.powers = powers)
+});
 </script>
 
 <template>
   <div class="main role">
-    <PagePower :is-show="contentConfig.powers.some(i => i === '001')">
+    <PagePower :is-show="permission.list">
       <div w-full>
         <PageSearch
           :form-config="searchFormConfig"
@@ -80,23 +84,27 @@ onMounted(
         </PageSearch>
         <PageContent
           ref="pageContentRef"
-          :content-config="contentConfig"
-          @preview-btn-click="({ tradNo, logNo }) => toFundClaim(tradNo, logNo)"
+          :content-config="contentConfigRef"
+          @preview-btn-click="row => toFundClaim(row)"
         >
-          <!-- <template #expand="row">
-            <el-table size="small" :data="row.child" border style="width: 100%">
+          <template #expand="row">
+            <el-table
+              size="small"
+              :data="row.child"
+              border
+              style="
+                width: 100%;
+                padding-left: 45px;
+                padding-top: 10px;
+                padding-bottom: 10px;
+              "
+            >
               <el-table-column
                 label="订单编号"
                 prop="orderCode"
                 width="160"
                 show-overflow-tooltip
               />
-              <el-table-column
-                label="订单来源"
-                prop="qrdSource"
-                width="80"
-                show-overflow-tooltip
-              />
               <el-table-column
                 label="商品编号"
                 prop="goodNo"
@@ -106,14 +114,51 @@ onMounted(
               <el-table-column
                 label="商品名称"
                 prop="goodName"
+                width="180"
                 show-overflow-tooltip
               />
               <el-table-column
-                label="商品类型"
+                label="状态"
+                prop="status"
+                width="80"
+                show-overflow-tooltip
+              >
+                <template #="{ $index }">
+                  <el-tag>{{
+                    capital_status_list.find(
+                      t => t.value === row.child[$index].status
+                    )?.label || "--"
+                  }}</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="订单来源"
+                prop="qrdSource"
+                width="90"
+                show-overflow-tooltip
+              >
+                <template #="{ $index }">
+                  <el-tag>{{
+                    xs_order_source_options.find(
+                      t => t.value === row.child[$index].qrdSource
+                    )?.label
+                  }}</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="商品来源"
                 prop="qrdType"
                 width="80"
                 show-overflow-tooltip
-              />
+              >
+                <template #="{ $index }">
+                  <el-tag>{{
+                    cgd_type_list.find(
+                      t => t.value === row.child[$index].qrdType
+                    )?.label
+                  }}</el-tag>
+                </template>
+              </el-table-column>
               <el-table-column
                 label="创建人"
                 prop="ownerName"
@@ -129,19 +174,21 @@ onMounted(
               <el-table-column
                 label="平台单号"
                 prop="poCode"
+                width="120"
                 show-overflow-tooltip
               />
               <el-table-column fixed="right" label="操作" width="60px">
-                <template #default>
+                <template #default="{ $index }">
                   <el-button
                     :icon="useRenderIcon('eye-view')"
+                    @click="() => toFundClaim(row.child[$index])"
                     type="primary"
                     link
                   />
                 </template>
               </el-table-column>
             </el-table>
-          </template> -->
+          </template>
         </PageContent>
       </div>
     </PagePower>

src/views/InvoiceSales/capitalPool/capital-dialog.vue

@@ -29,7 +29,7 @@ defineExpose({
     <BasicDescriptions
       v-loading="loading"
       :columns="CAPITAL_COLUMNS"
-      :col-number="3"
+      :col-number="2"
       :data="data"
     />
   </el-dialog>

src/views/InvoiceSales/capitalPool/config/content.config.ts

@@ -5,7 +5,7 @@ import dayjs from "dayjs";
 import { h } from "vue";
 import { ElTag } from "element-plus";
 import { CAPITAL_STATUS } from "/@/utils/details/tragelog";
-import { sale_source } from "../../capitalClaim/config/configs";
+import { xs_order_source_options } from "/@/utils/status";
 
 const columns = [
   {
@@ -30,8 +30,18 @@ const columns = [
     width: "140px"
   },
   {
-    label: "交易时间",
-    prop: "trade_time",
+    label: "销售单编号",
+    prop: "orderCode",
+    width: "120px"
+  },
+  {
+    label: "商品编号",
+    prop: "goodNo",
+    width: "120px"
+  },
+  {
+    label: "商品名称",
+    prop: "goodName",
     width: "120px"
   },
   {
@@ -52,6 +62,7 @@ const columns = [
   {
     label: "状态",
     prop: "status",
+    width: 120,
     cellRenderer: ({ row }) => {
       return h(ElTag, null, {
         default: () =>
@@ -59,55 +70,31 @@ const columns = [
       });
     }
   },
-  {
-    label: "销售单编号",
-    prop: "orderCode",
-    width: "120px"
-  },
   {
     label: "销售来源",
     prop: "qrdSource",
     width: "120px",
     cellRenderer({ row }) {
       return h(ElTag, null, {
-        default: () => sale_source.find(s => s.value === row.qrdSource)?.label
+        default: () =>
+          xs_order_source_options.find(s => s.value === row.qrdSource)?.label
       });
     }
   },
   {
-    label: "商品编号",
-    prop: "goodNo",
-    width: "120px"
+    label: "申请人",
+    prop: "apply_name"
   },
   {
-    label: "商品名称",
-    prop: "goodName",
+    label: "交易时间",
+    prop: "trade_time",
     width: "120px"
   },
-  // {
-  //   label: "商品来源",
-  //   prop: "returnCode",
-  //   width: "120px"
-  // },
-  // {
-  //   label: "订单所属平台",
-  //   prop: "returnCode",
-  //   width: "120px"
-  // },
-  // {
-  //   label: "平台订单编号",
-  //   prop: "returnCode",
-  //   width: "120px"
-  // },
   {
     label: "认领时间",
     prop: "addtime",
     formatter: ({ addtime }) => dayjs(addtime).format("YYYY-MM-DD HH:mm:ss")
   },
-  {
-    label: "申请人",
-    prop: "apply_name"
-  },
   {
     label: "操作",
     fixed: "right",

src/views/InvoiceSales/invoiceApply/components/add-edit-form/add-edit-form.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FormRules, ElForm } from "element-plus";
+import { FormRules, ElForm, ElMessage } from "element-plus";
 import { reactive, ref, watchEffect, watch } from "vue";
 import { httpAdd } from "/@/api/InvoiceSales/invoiceApply";
 import RemoteSelect from "/@/components/RemoteSelect";
@@ -45,6 +45,8 @@ const initform = {
 const ruleForm = ref({ ...initform });
 const rules = reactive<FormRules>({ ...ADD_EDIT_FORM_RULES });
 
+const max = 150;
+
 function handleShowEditModal(_, row: any) {
   editOrderRef.value.onDisplay({
     row
@@ -97,6 +99,14 @@ function generatorOrderArr() {
 function handleSave() {
   formRef.value.validate(async isValid => {
     if (!isValid) return;
+    if (ruleForm.value.remark.length > 184) {
+      return ElMessage.error("发票备注不能超过184个字符");
+    }
+
+    if (orderList.value.length > max) {
+      return ElMessage.error(`订单数量不能超过${max}个`);
+    }
+
     const { code, message } = await httpAdd({
       ...ruleForm.value,
       ...generatorOrderArr()
@@ -115,17 +125,26 @@ function menu_type_change() {
   rules.email[0].required = invtype === "26" || invtype === "27";
 }
 
+function handleAddModalShow() {
+  if (!ruleForm.value.companyNo) return ElMessage.warning("请选择销售公司抬头");
+
+  modelRef.value.show(ruleForm.value.companyNo);
+}
+
 function handleAddOrder(list) {
-  orderList.value = list;
   ruleForm.value.remark = "";
 
-  list.forEach(({ sequenceNo, winv_fee, wsendNum, poCode }, index) => {
-    mapSequenceNoToInvfee.value[sequenceNo] = {
-      inv_fee: winv_fee,
-      num: wsendNum
-    };
-
-    ruleForm.value.remark += index === 0 ? poCode : ";" + poCode;
+  list.forEach((item, index) => {
+    const { sequenceNo, winv_fee, wsendNum, poCode } = item;
+
+    if (!mapSequenceNoToInvfee.value[sequenceNo]) {
+      mapSequenceNoToInvfee.value[sequenceNo] = {
+        inv_fee: winv_fee,
+        num: wsendNum
+      };
+      orderList.value.push(item);
+      ruleForm.value.remark += index === 0 ? poCode : ";" + poCode;
+    }
   });
 }
 
@@ -252,7 +271,7 @@ watch(
               v-model="ruleForm.remark"
               :rows="3"
               type="textarea"
-              maxlength="184"
+              maxlength="2000"
               show-word-limit
               placeholder="发票备注"
             /> </el-form-item
@@ -272,12 +291,14 @@ watch(
         <el-col :span="24" v-show="TYPE === 'order'">
           <el-form-item label="订单列表">
             <div flex justify-between w-full mb-2>
-              <el-tag>共计:{{ orderList.length }}个订单</el-tag>
-              <el-button type="primary" @click="() => modelRef.show()"
+              <el-tag :type="orderList.length > max ? 'error' : 'info'"
+                >{{ orderList.length }} / {{ max }}</el-tag
+              >
+              <el-button type="primary" @click="handleAddModalShow"
                 >添加销售订单</el-button
               >
             </div>
-            <el-table :data="orderList" stripe border>
+            <el-table :data="orderList" stripe border max-height="300">
               <el-table-column
                 prop="sequenceNo"
                 label="销售订单编号"

src/views/InvoiceSales/invoiceApply/components/add-edit-form/columns.tsx

@@ -1,6 +1,6 @@
 import { ref } from "vue";
 import dayjs from "dayjs";
-import { send_status_list, inv_status_list } from "/@/utils/status";
+import { send_status_list } from "/@/utils/status";
 export function useColumns() {
   const columns = ref([
     {
@@ -14,20 +14,25 @@ export function useColumns() {
       showOverflowTooltip: true
     },
     {
-      label: "企业客户编号",
-      prop: "companyNo",
+      label: "商品编码",
+      prop: "goodNo",
       minWidth: 160,
       showOverflowTooltip: true
     },
     {
-      label: "企业客户名称",
-      prop: "companyName",
+      label: "po编号",
+      prop: "poCode",
+      minWidth: 160
+    },
+    {
+      label: "企业客户编号",
+      prop: "companyNo",
       minWidth: 160,
       showOverflowTooltip: true
     },
     {
-      label: "商品编码",
-      prop: "goodNo",
+      label: "企业客户名称",
+      prop: "companyName",
       minWidth: 160,
       showOverflowTooltip: true
     },
@@ -37,17 +42,36 @@ export function useColumns() {
       minWidth: 160,
       showOverflowTooltip: true
     },
-    {
-      label: "po编号",
-      prop: "poCode",
-      minWidth: 160
-    },
     {
       label: "订单总金额",
       prop: "totalPrice",
       minWidth: 110,
       showOverflowTooltip: true
     },
+    {
+      label: "发货状态",
+      prop: "sendStatus",
+      minWidth: 110,
+      showOverflowTooltip: true,
+      cellRenderer: ({ row, props }) => (
+        <el-tag
+          size={props.size}
+          type={
+            (
+              send_status_list.find(
+                item => item.value == row.sendStatus + ""
+              ) || {}
+            ).type || "info"
+          }
+          effect="plain"
+        >
+          {(
+            send_status_list.find(item => item.value == row.sendStatus + "") ||
+            {}
+          ).label || "--"}
+        </el-tag>
+      )
+    },
     {
       label: "商品数量",
       prop: "goodNum"
@@ -82,53 +106,6 @@ export function useColumns() {
       minWidth: 110,
       showOverflowTooltip: true
     },
-    {
-      label: "发票核销状态",
-      prop: "inv_type",
-      minWidth: 110,
-      showOverflowTooltip: true,
-      cellRenderer: ({ row, props }) => (
-        <el-tag
-          size={props.size}
-          type={
-            (
-              inv_status_list.find(item => item.value == row.inv_status + "") ||
-              {}
-            ).type || "info"
-          }
-          effect="plain"
-        >
-          {(
-            inv_status_list.find(item => item.value == row.inv_status + "") ||
-            {}
-          ).label || "--"}
-        </el-tag>
-      )
-    },
-    {
-      label: "发货状态",
-      prop: "sendStatus",
-      minWidth: 110,
-      showOverflowTooltip: true,
-      cellRenderer: ({ row, props }) => (
-        <el-tag
-          size={props.size}
-          type={
-            (
-              send_status_list.find(
-                item => item.value == row.sendStatus + ""
-              ) || {}
-            ).type || "info"
-          }
-          effect="plain"
-        >
-          {(
-            send_status_list.find(item => item.value == row.sendStatus + "") ||
-            {}
-          ).label || "--"}
-        </el-tag>
-      )
-    },
     {
       label: "业务员",
       prop: "ownerName",

src/views/InvoiceSales/invoiceApply/components/add-edit-form/order-dialog.vue

@@ -41,7 +41,7 @@ const initform = {
   status: "0"
 };
 const ruleForm = ref({ ...initform });
-
+const companyNo = ref("");
 const { handleSearchClick, handleResetClick } = usePageSearch(
   params => {
     otherParams = params;
@@ -54,7 +54,6 @@ const { handleSearchClick, handleResetClick } = usePageSearch(
   },
   () => {
     otherParams = {};
-    console.log(123);
     onSearch();
   }
 );
@@ -64,8 +63,9 @@ const handleCurrentChange = (current: number) => {
   onSearch();
 };
 
-async function show() {
+async function show(_companyNo) {
   showModel.value = true;
+  companyNo.value = _companyNo;
   await onSearch();
 }
 
@@ -78,6 +78,9 @@ async function onSearch() {
   loading.value = true;
   const { code, data, message } = await httpOrderList({
     cat_status: "1",
+    pay_status: "0",
+    inv_status: "0",
+    companyNo: companyNo.value,
     ...ruleForm.value,
     ...otherParams
   });

src/views/InvoiceSales/invoiceApply/components/invoice-detail/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { INV_OPEN_COLUMNS } from "/@/utils/details/inv-open";
+import { ORDER_COLUMNS } from "/@/utils/details/inv-open";
 import BasicDescriptions from "/@/components/BasicDescriptions";
 
 defineProps<{
@@ -12,7 +12,7 @@ defineProps<{
     ref="defaultRef"
     v-if="detail"
     :data="detail"
-    :columns="INV_OPEN_COLUMNS"
+    :columns="ORDER_COLUMNS"
     :col-number="3"
   />
 </template>

src/views/InvoiceSales/invoiceApply/config/search.config.ts

@@ -113,6 +113,7 @@ export const cat_status = [
 ];
 
 const searchFormConfig: FormConfig = {
+  colLayout: { span: 8 },
   formItems: [
     {
       field: "order_timer",
@@ -126,26 +127,17 @@ const searchFormConfig: FormConfig = {
     {
       field: "sequenceNo",
       type: "input",
-      placeholder: "订单编号"
+      placeholder: "销售订单编号"
     },
     {
-      field: "customer",
+      field: "sequenceNo",
       type: "input",
-      placeholder: "客户名称"
-    },
-    {
-      field: "inv_status",
-      type: "select",
-      placeholder: "开票状态",
-      options: inv_open_status,
-      span: 4
+      placeholder: "销售订单编号"
     },
     {
-      field: "sendstatus",
-      type: "select",
-      placeholder: "发货状态",
-      options: seend_type,
-      span: 4
+      field: "customer",
+      type: "input",
+      placeholder: "客户名称"
     }
   ]
 };

src/views/InvoiceSales/invoiceApply/detail.vue

@@ -2,6 +2,7 @@
 import { ref, computed, onMounted } from "vue";
 import { approvalProcess } from "./components/approval-process";
 import { examRecord } from "/@/components/examRecord";
+import Invoice from "/@/components/InvoiceTitle";
 import { useAsync, useResponseHandle } from "/@/hooks";
 import { useRoute, useRouter } from "vue-router";
 import InvoiceDetailVue from "./components/invoice-detail/index.vue";
@@ -23,7 +24,7 @@ const responseHandle = useResponseHandle();
 
 const examCode = ref("");
 const activeName = computed(() => (isCreate.value ? "0" : "1"));
-const collapseItem = ref(["0", "1", "2", "3"]);
+const collapseItem = ref(["0", "1", "2", "3", "4"]);
 
 const id = computed(() => query.id);
 const isCreate = computed(() => !id.value);
@@ -45,7 +46,6 @@ const currentProcess = computed(() => {
 //设置状态/物流
 async function handleChangeStatus({ status, ...otherParmas }) {
   let response: any;
-
   if (!status) {
     //设置物流
     response = await httpSetPost({ invNo: id.value, ...otherParmas });
@@ -83,8 +83,12 @@ onMounted(() => !isCreate.value && requesetInvoiceDetail());
             <InvoiceDetailVue v-loading="loading" :detail="invoiceDetail" />
           </el-collapse-item>
 
+          <el-collapse-item title="发票详情" name="3">
+            <Invoice :invoice-data="invoiceDetail" />
+          </el-collapse-item>
+
           <el-collapse-item
-            name="3"
+            name="4"
             :title="currentProcess.title"
             v-if="Object.keys(currentProcess).length"
           >

src/views/InvoiceSales/invoicePool/config/content.config.ts

@@ -5,7 +5,6 @@ import dayjs from "dayjs";
 import { h } from "vue";
 import { ElTag } from "element-plus";
 import { inv_type_list } from "../../invoiceApply/status";
-import { INV_OPEN_STATUS } from "/@/utils/details/inv-open";
 
 const columns = [
   {
@@ -34,14 +33,6 @@ const columns = [
     prop: "inv_out",
     width: 200
   },
-  {
-    label: "状态",
-    cellRenderer({ row }) {
-      return h(ElTag, null, {
-        defualt: INV_OPEN_STATUS.find(s => row.status === s.value)?.label
-      });
-    }
-  },
   {
     label: "业务公司名称",
     prop: "inv_company"
@@ -76,7 +67,8 @@ const columns = [
     label: "创建时间",
     width: 165,
     prop: "addtime",
-    formatter: ({ addtime }) => dayjs(addtime).format("YYYY-MM-DD HH:mm:ss")
+    formatter: ({ addtime }) =>
+      addtime ? dayjs(addtime).format("YYYY-MM-DD HH:mm:ss") : ""
   },
   {
     label: "操作",

src/views/InvoiceSales/invoicePool/detail-dialog.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { INV_OPEN_COLUMNS } from "/@/utils/details/inv-open";
-import BasicDescriptions from "/@/components/BasicDescriptions";
-import { httpDetail } from "/@/api/InvoiceSales/invoiceApply";
-import { useAsync } from "/@/hooks";
-
-const visible = ref(false);
-
-const { run, data, loading, setData } = useAsync<Record<string, string>>({
-  initalData: {}
-});
-
-const requsetInvoiceDetail = invNo => run(httpDetail({ invNo }));
-
-defineExpose({
-  onDisplay(invNo) {
-    setData({});
-    visible.value = true;
-    requsetInvoiceDetail(invNo);
-  }
-});
-</script>
-
-<template>
-  <ElDialog center title="发票详情" v-model="visible" width="1100px">
-    <div v-loading="loading">
-      <BasicDescriptions
-        ref="defaultRef"
-        :data="data"
-        :columns="INV_OPEN_COLUMNS"
-        :col-number="3"
-      />
-    </div>
-  </ElDialog>
-</template>

src/views/InvoiceSales/invoicePool/index.vue

@@ -6,13 +6,17 @@ import contentConfig from "./config/content.config";
 import { onMounted, ref } from "vue";
 import { useUserStoreHook } from "/@/store/modules/user";
 import PagePower from "/@/components/PagePower/PagePower.vue";
-import DetailDialog from "./detail-dialog.vue";
+import Invoice from "/@/components/InvoiceTitle";
+import { httpDetail } from "/@/api/InvoiceSales/invoiceApply";
+import { useResponseHandle } from "/@/hooks";
 
 defineOptions({
   name: "invoiceheader"
 });
 
-const detailDialogRef = ref<InstanceType<typeof DetailDialog>>(null);
+const visible = ref(false);
+const currentInvocice = ref<Record<string, string>>({});
+const responseHandle = useResponseHandle();
 
 function searchCallback({ timer }) {
   const [start, end] = timer;
@@ -28,6 +32,21 @@ function searchCallback({ timer }) {
   };
 }
 
+async function onDisplayInvoice(invNo) {
+  visible.value = true;
+  const { code, message, data } = await httpDetail({
+    invNo
+  });
+
+  responseHandle({
+    code,
+    message,
+    handler: () => { 
+      currentInvocice.value = data;
+    }
+  });
+}
+
 const { pageContentRef, handleResetClick, handleSearchClick } =
   usePageSearch(searchCallback);
 
@@ -49,11 +68,13 @@ onMounted(
         <PageContent
           ref="pageContentRef"
           :content-config="contentConfig"
-          @preview-btn-click="({ invNo }) => detailDialogRef.onDisplay(invNo)"
+          @preview-btn-click="({ invNo }) => onDisplayInvoice(invNo)"
         />
       </div>
 
-      <DetailDialog ref="detailDialogRef" />
+      <el-dialog width="1040px" v-model="visible">
+        <Invoice :invoice-data="currentInvocice" />
+      </el-dialog>
     </PagePower>
   </div>
 </template>

src/views/InvoiceSales/redInk/components/create-redink.vue

@@ -49,10 +49,6 @@ const { run: batchApplyRedRun, loading: batchApplyRedLoading } = useAsync({
   success
 });
 
-// const { run: applyRedRun, loading: applyRedLoading } = useAsync({
-//   success
-// });
-
 const requestBatchApplyred = () => {
   const invArr = selectInvioces.value.map(({ invNo }) => invNo);
 

src/views/InvoiceSales/redInk/components/open-dialog.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive } from "vue";
-import { ElMessage } from "element-plus";
-import { REMARK_MAX_LENGTH } from "/@/utils/global";
-import { httpOpenInvoice } from "/@/api/InvoiceSales/redInk";
-import { useAsync } from "/@/hooks";
-
-const visible = ref(false);
-const { run, loading } = useAsync();
-
-const params = reactive({
-  invRed: "",
-  redreason: ""
-});
-
-const requesetOpenInvoice = () => {
-  params.redreason
-    ? run(httpOpenInvoice(params))
-    : ElMessage.error("请输入红冲原因");
-};
-
-defineExpose({
-  onDisplay(invRed) {
-    visible.value = true;
-    params.invRed = invRed;
-    params.redreason = "";
-  }
-});
-</script>
-
-<template>
-  <el-dialog title="提交开票" v-model="visible" center>
-    <div flex items-start mb-2>
-      <p w-100px>红冲原因：</p>
-      <el-input
-        :rows="5"
-        type="textarea"
-        placeholder="请输入红冲原因"
-        v-bind="REMARK_MAX_LENGTH"
-        v-model="params.redreason"
-      />
-    </div>
-
-    <div w-full flex justify-end>
-      <el-button type="primary" :loading="loading" @click="requesetOpenInvoice"
-        >保存</el-button
-      >
-    </div>
-  </el-dialog>
-</template>

src/views/InvoiceSales/redInk/index.vue

@@ -1,18 +1,12 @@
 <script setup lang="ts">
-import { ref } from "vue";
 import { PageSearch, usePageSearch } from "/@/components/PageSearch";
 import { PageContent } from "/@/components/PageContent";
 import searchFormConfig from "./config/search.config";
 import contentConfig from "./config/content.config";
-import CreateRedink from "./components/create-redink.vue";
 import { usePermission } from "/@/hooks";
-import OpenDialog from "./components/open-dialog.vue";
 
 const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch();
 
-const createRedinkRef = ref<InstanceType<typeof CreateRedink>>(null);
-const openDialogRef = ref<InstanceType<typeof OpenDialog>>(null);
-
 const { permission, contentConfigRef } = usePermission({
   pageName: "redInk",
   contentConfig,
@@ -32,18 +26,10 @@ const { permission, contentConfigRef } = usePermission({
         <PageContent
           ref="pageContentRef"
           :content-config="contentConfigRef"
-          @create-btn-click="() => createRedinkRef.onDisplay()"
           @update-btn-click="({ invRed }) => openDialogRef.onDisplay(invRed)"
         />
       </div>
     </PagePower>
-
-    <CreateRedink
-      ref="createRedinkRef"
-      @reload="() => pageContentRef.getPageData()"
-    />
-
-    <OpenDialog ref="openDialogRef" />
   </div>
 </template>
 

src/views/InvoiceSales/refund/config/content.config.ts

@@ -6,7 +6,7 @@ import { ElTag, ElImage } from "element-plus";
 import { h } from "vue";
 import { RETRUN_STATUS } from "/@/utils/details/refund";
 import { refund_type } from "./search.config";
-import { sale_source } from "../../capitalClaim/config/configs";
+import { xs_order_source_options } from "/@/utils/status";
 
 const columns = [
   {
@@ -41,7 +41,8 @@ const columns = [
     width: "120px",
     cellRenderer({ row }) {
       return h(ElTag, null, {
-        default: () => sale_source.find(s => s.value === row.qrdSource)?.label
+        default: () =>
+          xs_order_source_options.find(s => s.value === row.qrdSource)?.label
       });
     }
   },

src/views/InvoiceSales/refund/detail.vue

@@ -48,7 +48,7 @@ async function requesetRefundStatus(otherParmas) {
   responseHandle({
     code,
     message,
-    handler: () => push("/InvoiceSales/refund")
+    handler: () => requesetRefundDetail()
   });
 }
 

src/views/InvoiceSales/returnTicket/components/create-return-ticket/index.vue

@@ -2,14 +2,17 @@
 import { reactive, ref } from "vue";
 import CapitalModal from "./capital-modal.vue";
 import BasicDescriptions from "/@/components/BasicDescriptions";
+import Invoice from "/@/components/InvoiceTitle";
 import { httpAdd } from "/@/api/InvoiceSales/returnTicket";
 import { httpDetail } from "/@/api/InvoiceSales/invoiceApply";
 import { useResponseHandle } from "/@/hooks";
 import { ElForm } from "element-plus";
 import { useRouter } from "vue-router";
-import { INV_OPEN_COLUMNS } from "/@/utils/details/inv-open";
+import { ORDER_COLUMNS } from "/@/utils/details/inv-open";
+import RedDialog from "./red-dialog.vue";
 
 const capitalModalRef = ref<InstanceType<typeof CapitalModal>>(null);
+const redDialog = ref<InstanceType<typeof RedDialog>>(null);
 const capitalDetail = ref<Record<string, string | null>>(null);
 const formRef = ref<InstanceType<typeof ElForm>>(null);
 const responseHandle = useResponseHandle();
@@ -17,7 +20,7 @@ const { push } = useRouter();
 const loading = ref(false);
 
 const formData = reactive({
-  invNo: "INV2208311508183780",
+  invNo: "",
   return_reason: "",
   remark: ""
 });
@@ -53,8 +56,15 @@ function handleCreate() {
   formRef.value.validate(async isVaild => {
     if (!isVaild) return;
 
-    const { code, message } = await httpAdd(formData);
+    //票是否超时
+    const { invNo } = capitalDetail.value;
+    const time = "123";
+
+    if (time) {
+      return redDialog.value.onDisplay(invNo);
+    }
 
+    const { code, message } = await httpAdd(formData);
     responseHandle({
       code,
       message,
@@ -89,12 +99,14 @@ function handleCreate() {
         v-if="capitalDetail"
         :data="capitalDetail"
         :col-number="2"
-        :columns="INV_OPEN_COLUMNS"
+        :columns="ORDER_COLUMNS"
       />
+
+      <Invoice mt-5 :invoice-data="capitalDetail" />
     </el-form-item>
 
-    <el-form-item label="退款原因" prop="return_reason" w-480px>
-      <el-input v-model="formData.return_reason" placeholder="请输入退款原因" />
+    <el-form-item label="退票原因" prop="return_reason" w-480px>
+      <el-input v-model="formData.return_reason" placeholder="请输入退票原因" />
     </el-form-item>
 
     <el-form-item label="备注" prop="remark" w-480px>
@@ -110,4 +122,6 @@ function handleCreate() {
     ref="capitalModalRef"
     @on-add-order="({ invNo }) => requesetCapitalDetail(invNo)"
   />
+
+  <RedDialog ref="redDialog" />
 </template>

src/views/InvoiceSales/returnTicket/components/create-return-ticket/red-dialog.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { httpApplyred } from "/@/api/InvoiceSales/redInk";
+import { useAsync } from "/@/hooks";
+
+const visible = ref(false);
+const { run, loading } = useAsync();
+
+const params = reactive({
+  invNo: ""
+});
+
+const requesetOpenInvoice = () => {
+  run(httpApplyred(params));
+};
+
+defineExpose({
+  onDisplay(invNo) {
+    visible.value = true;
+    params.invNo = invNo;
+  }
+});
+</script>
+
+<template>
+  <el-dialog title="红冲发票" v-model="visible" center>
+    <div w-full flex justify-end>
+      <el-button type="primary" :loading="loading" @click="requesetOpenInvoice"
+        >确认</el-button
+      >
+    </div>
+  </el-dialog>
+</template>

src/views/InvoiceSales/returnTicket/config/configs.ts

@@ -24,6 +24,10 @@ export const inv_columns = [
     prop: "apply_name",
     width: 80
   },
+  {
+    label: "开票日期",
+    prop: "invtime"
+  },
   {
     label: "创建时间",
     width: 145,

src/views/InvoiceSales/returnTicket/detail.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute } from "vue-router";
 import RefundDetail from "./components/refund-detail/index.vue";
 import { approval_process } from "./components/approval-process";
 import { httpStatus, httpDetail } from "/@/api/InvoiceSales/returnTicket";
 import CreateReturnTicket from "./components/create-return-ticket/index.vue";
+import Invoice from "/@/components/InvoiceTitle";
 import { useAsync } from "/@/hooks";
 
 const { query } = useRoute();
-const { push } = useRouter();
-
-const collapses = ref(["1", "2"]);
+const collapses = ref(["1", "2", "3"]);
 const returnCode = computed(() => query.id);
 
 const isCreate = computed(() => !returnCode.value);
@@ -25,7 +24,7 @@ const requesetReturnTicketDetail = () => {
 };
 
 const { run: retrunTicketStatusRun } = useAsync({
-  success: () => push("/InvoiceSales/returnTicket")
+  success: () => requesetReturnTicketDetail()
 });
 
 //退票审核流程
@@ -51,7 +50,7 @@ function initalData() {
 onMounted(() => initalData());
 </script>
 <template>
-  <div class="return-ticket__content" bg-white>
+  <div class="return-ticket__content" bg-white v-loading="loading">
     <div v-if="isCreate">
       <CreateReturnTicket />
     </div>
@@ -65,9 +64,13 @@ onMounted(() => initalData());
             <RefundDetail v-loading="loading" :detail="data" />
           </ElCollapseItem>
 
+          <ElCollapseItem title="发票详情" name="2">
+            <Invoice :invoice-data="data" />
+          </ElCollapseItem>
+
           <!-- 审核 -->
           <ElCollapseItem
-            name="2"
+            name="3"
             v-if="currentProcess"
             :title="currentProcess.title"
           >

src/views/purchase/porder/columns.tsx

@@ -166,29 +166,6 @@ export const cgd_type = [
   }
 ];
 
-export const cgd_source = [
-  {
-    value: "1",
-    label: "直接下单"
-  },
-  {
-    value: "2",
-    label: "咨询"
-  },
-  {
-    value: "3",
-    label: "项目"
-  },
-  {
-    value: "4",
-    label: "平台"
-  },
-  {
-    value: "5",
-    label: "有赞"
-  }
-];
-
 export const product_type = [
   {
     value: "1",

src/views/purchase/purchPay/component/create-payment/order-record.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { httpInfo } from "/@/api/purchase/orderRecord";
+import AddOrderModal from "./add-order-modal.vue";
+import BasicPurchase from "../../../orderRecord/components/basic-purchase.vue";
+import { useResponseHandle } from "/@/hooks";
+import BasicDescriptions from "/@/components/BasicDescriptions";
+import { RECONCILIATION_COLUMNS } from "/@/utils/details/reconciliation";
+
+const emit = defineEmits(["change-payment-detail"]);
+const addOrderRef = ref<InstanceType<typeof AddOrderModal>>(null);
+const detail = ref<Record<string, string> | null>(null);
+const loading = ref(false);
+const responseHandle = useResponseHandle();
+
+function handleShowAddModal() {
+  addOrderRef.value.onDisplay();
+}
+
+const hiddenColumns = [
+  "inv_status",
+  "remark",
+  "ainv_fee",
+  "inv_fee",
+  "winv_fee",
+  "inv_tag_fee"
+];
+
+const columns = RECONCILIATION_COLUMNS.filter(col => {
+  return !hiddenColumns.includes(col.field);
+});
+
+async function handleAddOrder(orders) {
+  const currentOrder = orders[0];
+  emit("change-payment-detail", currentOrder);
+  loading.value = true;
+
+  const { data, message, code } = await httpInfo({
+    payNo: currentOrder.payNo
+  });
+
+  responseHandle({
+    message,
+    code,
+    handler: () => (detail.value = data)
+  });
+
+  loading.value = false;
+}
+</script>
+
+<template>
+  <div w-full v-loading="loading">
+    <div flex justify-end mb-2>
+      <el-button type="primary" link @click="handleShowAddModal"
+        >选择</el-button
+      >
+    </div>
+
+    <BasicDescriptions
+      v-if="detail"
+      :col-number="2"
+      :columns="columns"
+      :data="detail"
+      mb-2
+    />
+
+    <BasicPurchase :purchase-order-list="detail?.cgdlist || []" readonly />
+  </div>
+
+  <AddOrderModal @on-add-order="handleAddOrder" ref="addOrderRef" />
+</template>

src/views/purchase/ticketReturn/components/invoice-dialog.vue

@@ -0,0 +1,411 @@
+<script setup lang="ts">
+import dayjs from "dayjs";
+import { ref } from "vue";
+
+const visible = ref(false);
+
+const invoiceData = ref<Record<string, any>>({});
+
+defineExpose({
+  onDisplay: (data: any) => {
+    visible.value = true;
+    invoiceData.value = data;
+  }
+});
+</script>
+
+<template>
+  <el-dialog v-model="visible" width="1040px" @close="() => (invoiceData = {})">
+    <div class="InvoiceTmpDiv">
+      <el-row>
+        <el-col :span="12" :offset="6" class="title no-border">{{
+          invoiceData.invoiceType_cn
+        }}</el-col>
+        <el-col :span="6" class="extra no-border">
+          <div>
+            <span class="label title-label">发票代码</span>：<span
+              class="content"
+              >{{ invoiceData.invoiceCode }}</span
+            >
+          </div>
+          <div>
+            <span class="label title-label">发票号码</span>：<span
+              class="content"
+              >{{ invoiceData.invoiceNumber }}</span
+            >
+          </div>
+          <div>
+            <span class="label title-label">开票日期</span>：<span
+              class="content"
+              >{{
+                invoiceData.open_time
+                  ? dayjs(invoiceData.open_time).format("YYYY-MM-DD")
+                  : ""
+              }}</span
+            >
+          </div>
+          <div>
+            <span class="label title-label">校验码</span>：<span
+              class="content"
+              >{{ invoiceData.checkNumber }}</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 flex mb-1>
+            <span class="label">名称</span>：<span class="content">
+              {{ invoiceData.buyer_name }}
+            </span>
+          </div>
+          <div flex mb-1>
+            <span class="label">纳税人识别号</span>：<span class="content">
+              {{ invoiceData.buyer_id }}
+            </span>
+          </div>
+          <div flex mb-1>
+            <span class="label">地址、电话</span>：<span class="content">
+              {{ invoiceData.buyer_address }}
+            </span>
+          </div>
+          <div flex mb-1>
+            <span class="label">开户行及账号</span>：<span class="content">
+              {{ invoiceData.buyer_bank }}
+            </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"> 添加订单数据 </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-scrollbar max-height="150px" always>
+          <el-row v-for="(item, index) in invoiceData.item_list" :key="index">
+            <el-col :span="8" class="no-border">
+              <div class="tc">{{ item.name }}</div>
+            </el-col>
+            <el-col :span="3">
+              <div class="tc">{{ item.specification }}</div>
+            </el-col>
+            <el-col :span="1">
+              <div class="tc">{{ item.unit }}</div>
+            </el-col>
+            <el-col :span="2">
+              <div class="tc">{{ item.quantity }}</div>
+            </el-col>
+            <el-col :span="3">
+              <div class="tc">{{ item.unit_price }}</div>
+            </el-col>
+            <el-col :span="3">
+              <div class="tc">{{ item.amount }}</div>
+            </el-col>
+            <el-col :span="1">
+              <div class="tc">{{ item.tax_rate }}</div>
+            </el-col>
+            <el-col :span="3">
+              <div class="tc">{{ item.tax }}</div>
+            </el-col>
+          </el-row>
+        </el-scrollbar>
+        <el-row>
+          <el-col :span="8" class="no-border" v-if="invoiceData.item_list">
+            <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">
+              {{ invoiceData.subtotal_amount }}
+            </div>
+          </el-col>
+          <el-col :span="1">
+            <div class="tc">&nbsp;</div>
+          </el-col>
+          <el-col :span="3">
+            <div class="tc">
+              {{ invoiceData.subtotal_tax }}
+            </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" />
+        <el-col :span="7" class="no-border tc"
+          >（小写）<span>{{ invoiceData.total }}</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 flex mb-1>
+            <span class="label">名称</span>：<span class="content">
+              {{ invoiceData.seller_name }}
+            </span>
+          </div>
+          <div flex mb-1>
+            <span class="label">纳税人识别号</span>：<span class="content">
+              {{ invoiceData.seller_id }}
+            </span>
+          </div>
+          <div flex mb-1>
+            <span class="label">地址、电话</span>：<span class="content">
+              {{ invoiceData.seller_address }}
+            </span>
+          </div>
+          <div flex mb-1>
+            <span class="label">开户行及账号</span>：<span class="content">
+              {{ invoiceData.seller_bank }}
+            </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">{{ invoiceData.remarks }}</el-col>
+      </el-row>
+      <el-row class="last-row">
+        <el-col :span="6" class="no-border">
+          <span>收款人：</span>
+          <span class="content">{{ invoiceData.receiver }}</span>
+        </el-col>
+        <el-col :span="6" class="no-border">
+          <span>复核：</span>
+          <span class="content">{{ invoiceData.reivewer }}</span>
+        </el-col>
+        <el-col :span="6" class="no-border">
+          <span>开票人：</span>
+          <span class="content">{{ invoiceData.issuer }}</span>
+        </el-col>
+        <el-col :span="5" class="no-border">
+          <span>销售方：</span>
+          <span class="content">{{ invoiceData.seller_name }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+.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>

src/views/purchase/ticketReturn/components/invoice-title.vue

@@ -0,0 +1,427 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+import dayjs from "dayjs";
+
+const props = defineProps<{
+  invoiceDetail: any;
+}>();
+
+const isMore = ref(false);
+
+const invoiceData = computed(() => props.invoiceDetail?.info || {});
+
+const showMoreButton = computed(
+  () => invoiceData.value.item_list && invoiceData.value.item_list.length > 5
+);
+</script>
+
+<template>
+  <div class="InvoiceTmpDiv">
+    <el-row>
+      <el-col :span="12" :offset="6" class="title no-border">{{
+        invoiceDetail?.invoiceType_cn
+      }}</el-col>
+      <el-col :span="6" class="extra no-border">
+        <div>
+          <span class="label title-label">发票代码</span>：<span
+            class="content"
+            >{{ invoiceData.code }}</span
+          >
+        </div>
+        <div>
+          <span class="label title-label">发票号码</span>：<span
+            class="content"
+            >{{ invoiceData.number }}</span
+          >
+        </div>
+        <div>
+          <span class="label title-label">开票日期</span>：<span
+            class="content"
+            >{{
+              invoiceData.issue_date
+                ? dayjs(invoiceData.issue_date).format("YYYY-MM-DD")
+                : ""
+            }}</span
+          >
+        </div>
+        <div>
+          <span class="label title-label">校验码</span>：<span
+            class="content"
+            >{{ invoiceData.check_code }}</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 flex mb-1>
+          <span class="label">名称</span>：<span class="content">
+            {{ invoiceData.buyer_name }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">纳税人识别号</span>：<span class="content">
+            {{ invoiceData.buyer_id }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">地址、电话</span>：<span class="content">
+            {{ invoiceData.buyer_address }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">开户行及账号</span>：<span class="content">
+            {{ invoiceData.buyer_bank }}
+          </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"> 添加订单数据 </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>
+      <div
+        :max-h="isMore ? 'auto' : '150px'"
+        overflow="hidden"
+        relative
+        ref="itemsRef"
+      >
+        <el-row v-for="(item, index) in invoiceData.item_list" :key="index">
+          <el-col :span="8" class="no-border">
+            <div class="tc">{{ item.name }}</div>
+          </el-col>
+          <el-col :span="3">
+            <div class="tc">{{ item.specification }}</div>
+          </el-col>
+          <el-col :span="1">
+            <div class="tc">{{ item.unit }}</div>
+          </el-col>
+          <el-col :span="2">
+            <div class="tc">{{ item.quantity }}</div>
+          </el-col>
+          <el-col :span="3">
+            <div class="tc">{{ item.unit_price }}</div>
+          </el-col>
+          <el-col :span="3">
+            <div class="tc">{{ item.amount }}</div>
+          </el-col>
+          <el-col :span="1">
+            <div class="tc">{{ item.tax_rate }}</div>
+          </el-col>
+          <el-col :span="3">
+            <div class="tc">{{ item.tax }}</div>
+          </el-col>
+        </el-row>
+
+        <div absolute bottom="10px" left="50%">
+          <el-button
+            link
+            type="primary"
+            size="large"
+            v-if="showMoreButton"
+            :icon="useRenderIcon(isMore ? 'ArrowUp' : 'arrowdown')"
+            @click="() => (isMore = !isMore)"
+          />
+        </div>
+      </div>
+      <el-row>
+        <el-col :span="8" class="no-border" v-if="invoiceData.item_list">
+          <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">
+            {{ invoiceData.subtotal_amount }}
+          </div>
+        </el-col>
+        <el-col :span="1">
+          <div class="tc">&nbsp;</div>
+        </el-col>
+        <el-col :span="3">
+          <div class="tc">
+            {{ invoiceData.subtotal_tax }}
+          </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" />
+      <el-col :span="7" class="no-border tc"
+        >（小写）<span>{{ invoiceData.total }}</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 flex mb-1>
+          <span class="label">名称</span>：<span class="content">
+            {{ invoiceData.seller_name }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">纳税人识别号</span>：<span class="content">
+            {{ invoiceData.seller_id }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">地址、电话</span>：<span class="content">
+            {{ invoiceData.seller_address }}
+          </span>
+        </div>
+        <div flex mb-1>
+          <span class="label">开户行及账号</span>：<span class="content">
+            {{ invoiceData.seller_bank }}
+          </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">{{ invoiceData.remarks }}</el-col>
+    </el-row>
+    <el-row class="last-row">
+      <el-col :span="6" class="no-border">
+        <span>收款人：</span>
+        <span class="content">{{ invoiceData.receiver }}</span>
+      </el-col>
+      <el-col :span="6" class="no-border">
+        <span>复核：</span>
+        <span class="content">{{ invoiceData.reivewer }}</span>
+      </el-col>
+      <el-col :span="6" class="no-border">
+        <span>开票人：</span>
+        <span class="content">{{ invoiceData.issuer }}</span>
+      </el-col>
+      <el-col :span="5" class="no-border">
+        <span>销售方：</span>
+        <span class="content">{{ invoiceData.seller_name }}</span>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.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>