byte-sailing-new/src/views/salesMange/shipmentMange/document/index.vue

<template>
  <div class="tenant">
    <div class="content">
      <byTable
        :source="sourceList.data"
        :pagination="sourceList.pagination"
        :config="config"
        :loading="loading"
        highlight-current-row
        :action-list="[
          {
            text: '创建单证',
            action: () => openModal(),
          },
        ]"
        @get-list="getList"
      >
        <template #acceptCode="{ item }">
          <div>
            <div style="color: #409eff" v-if="item.acceptCode">
              {{ item.acceptCarriage }} ({{ item.acceptCode }})
            </div>
            <div v-else>
              <el-button
                type="warning"
                style="background-color: var(--el-button-bg-color) !important"
                @click="clickAddAcceptCode(item)"
                >填写</el-button
              >
            </div>
          </div>
        </template>
        <template #toView="{ item }">
          <div>
            <el-button
              type="warning"
              style="background-color: var(--el-button-bg-color) !important"
              @click="clickToView(item)"
              >查看</el-button
            >
          </div>
        </template>
      </byTable>
    </div>

    <el-dialog
      title="创建单证"
      v-if="dialogVisible"
      v-model="dialogVisible"
      width="1000"
    >
      <byForm
        :formConfig="formConfig"
        :formOption="formOption"
        v-model="formData.data"
        :rules="rules"
        ref="submit"
        v-loading="loadingDialog"
      >
        <template #details>
          <div style="width: 100%">
            <el-table
              :data="formData.data.documentsProductList"
              style="width: 100%; margin-top: 16px"
            >
              <el-table-column label="货物描述" min-width="240">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    <el-form-item
                      :prop="'documentsProductList.' + $index + '.describes'"
                      :rules="rules.describes"
                      :inline-message="true"
                    >
                      <el-input
                        v-model="row.describes"
                        placeholder="请输入货物描述"
                      />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="副描述" min-width="200">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    <el-form-item
                      :prop="'documentsProductList.' + $index + '.subDescribe'"
                      :rules="rules.subDescribe"
                      :inline-message="true"
                    >
                      <el-input
                        v-model="row.subDescribe"
                        placeholder="请输入副描述"
                      />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="海关编码" width="160">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    <el-form-item
                      :prop="'documentsProductList.' + $index + '.customsCode'"
                      :rules="rules.customsCode"
                      :inline-message="true"
                    >
                      <el-input
                        v-model="row.customsCode"
                        placeholder="请输入海关编码"
                      />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="数量" width="160">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    <el-form-item
                      :prop="'documentsProductList.' + $index + '.quantity'"
                      :rules="rules.quantity"
                      :inline-message="true"
                    >
                      <el-input-number
                        v-model="row.quantity"
                        placeholder="请输入数量"
                        style="width: 100%"
                        :precision="0"
                        :controls="false"
                        :min="0"
                      />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="单价" width="160">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    <el-form-item
                      :prop="'documentsProductList.' + $index + '.price'"
                      :rules="rules.price"
                      :inline-message="true"
                    >
                      <el-input-number
                        v-model="row.price"
                        placeholder="请输入单价"
                        style="width: 100%"
                        :precision="2"
                        :controls="false"
                        :min="0"
                      />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </byForm>
      <template #footer>
        <el-button @click="dialogVisible = false" size="large">取 消</el-button>
        <el-button type="primary" @click="submitForm()" size="large"
          >确 定</el-button
        >
      </template>
    </el-dialog>

    <el-dialog
      title="货运详情"
      v-if="openAddAcceptCode"
      v-model="openAddAcceptCode"
      width="600"
    >
      <byForm
        :formConfig="formConfigTwo"
        :formOption="formOption"
        v-model="formDataTwo.data"
        :rules="rulesTwo"
        ref="submitTwo"
        v-loading="loadingTwo"
      >
        <template #departureTime>
          <div>
            <el-date-picker
              v-model="formDataTwo.data.departureTime"
              type="datetime"
              placeholder="请选择起运时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </div>
        </template>
        <template #file>
          <div style="width: 100%">
            <el-upload
              v-model:fileList="fileList"
              action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
              :data="uploadData"
              multiple
              :before-upload="uploadFile"
              :on-preview="onPreviewFile"
            >
              <el-button>选择</el-button>
            </el-upload>
          </div>
        </template>
      </byForm>
      <template #footer>
        <el-button @click="openAddAcceptCode = false" size="large"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitTwoForm()" size="large"
          >确 定</el-button
        >
      </template>
    </el-dialog>

    <el-dialog
      title="打印"
      v-if="openSelectPrint"
      v-model="openSelectPrint"
      width="600"
    >
      <div>
        <el-button @click="clickPrint(1)" type="primary">装箱单</el-button>
        <el-button @click="clickPrint(2)" type="primary">商业发票</el-button>
        <el-button @click="clickPrint(3)" type="primary">销售确认书</el-button>
        <el-button @click="clickPrint(4)" type="primary">报关单</el-button>
      </div>
      <template #footer>
        <el-button @click="openSelectPrint = false" size="large"
          >关闭</el-button
        >
      </template>
    </el-dialog>

    <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="860">
      <div id="printMe">
        <div
          id="pdfDom"
          style="width: 800px; padding: 16px; font-size: 12px !important"
        >
          <div v-if="openStatus === 1">
            <div style="font-size: 16px; text-align: center; font-weight: 700">
              装箱单
            </div>
            <div
              style="
                font-size: 16px;
                text-align: center;
                text-decoration: underline;
                font-weight: 700;
              "
            >
              PACKING LIST
            </div>
          </div>
          <div v-else-if="openStatus === 2">
            <div style="font-size: 16px; text-align: center; font-weight: 700">
              商业发票
            </div>
            <div
              style="
                font-size: 16px;
                text-align: center;
                text-decoration: underline;
                font-weight: 700;
              "
            >
              COMMERCIAL INVOICE
            </div>
          </div>
          <div v-else-if="openStatus === 3">
            <div style="font-size: 16px; text-align: center; font-weight: 700">
              合同
            </div>
            <div
              style="
                font-size: 16px;
                text-align: center;
                text-decoration: underline;
                font-weight: 700;
              "
            >
              CONTRACT
            </div>
          </div>
          <div style="padding-top: 8px" v-if="[1, 2].includes(openStatus)">
            <div>C.I. NO. : {{ printDetails.contract.code }}</div>
            <div>C.I. DATE: {{ printDetails.date }}</div>
          </div>
          <div style="padding-top: 8px" v-else-if="[3].includes(openStatus)">
            <div>P.I. NO. : {{ printDetails.contract.code }}</div>
            <div>P.I. DATE: {{ printDetails.date }}</div>
          </div>
          <!-- <div style="height: 16px"></div> -->
          <div
            style="border: 1px solid black; display: flex"
            v-if="[1, 2].includes(openStatus)"
          >
            <div
              style="
                width: 50%;
                border-right: 1px solid black;
                padding-left: 4px;
              "
            >
              <div style="font-weight: 700">买方 SOLD TO MESSRS:</div>
              <div>{{ printDetails.customer.name }}</div>

              <div style="padding-top: 16px" v-if="[2].includes(openStatus)">
                <span style="font-weight: 700">TAX NUMBER:</span>
                <span> {{ printDetails.contract.taxNumber }} </span>
              </div>
              <div style="padding: 16px 0">
                {{ printDetails.contract.buyAddress }},{{
                  printDetails.contract.buyPostalCode
                }},{{ printDetails.contract.buyCityName }},{{
                  printDetails.contract.buyProvinceName
                }},{{ printDetails.contract.buyCountryName }}
              </div>
              <div v-if="[2].includes(openStatus)">
                <span style="font-weight: 700">POST CODE:</span>
                <span> {{ printDetails.contract.buyPostalCode }} </span>
              </div>
              <div style="padding-top: 16px">
                CONTRACT: {{ printDetails.contract.buyContactName }}
              </div>
              <div>TEL.: {{ printDetails.contract.buyContactNumber }}</div>
            </div>
            <div style="width: 50%; padding-left: 4px">
              <div style="font-weight: 700">卖方 VENDOR:</div>
              <div>{{ printDetails.corporation.name }}</div>
              <div>{{ printDetails.corporation.nameEn }}</div>

              <div style="padding: 16px 0">
                {{ printDetails.contract.sellAddress }},{{
                  printDetails.contract.sellCityName
                }},{{ printDetails.contract.sellProvinceName }},{{
                  printDetails.contract.sellCountryName
                }}
              </div>

              <div>CONTRACT: {{ printDetails.contract.sellContactName }}</div>
              <div>TEL.: {{ printDetails.contract.sellContactNumber }}</div>
            </div>
          </div>
          <div
            style="border: 1px solid black; display: flex"
            v-else-if="[3].includes(openStatus)"
          >
            <div
              style="
                width: 50%;
                border-right: 1px solid black;
                padding-left: 4px;
              "
            >
              <div style="font-weight: 700">卖方 VENDOR:</div>
              <div>{{ printDetails.corporation.name }}</div>
              <div>{{ printDetails.corporation.nameEn }}</div>
              <div style="padding: 16px 0">
                {{ printDetails.contract.sellAddress }},{{
                  printDetails.contract.sellCityName
                }},{{ printDetails.contract.sellProvinceName }},{{
                  printDetails.contract.sellCountryName
                }}
              </div>
              <div>CONTRACT: {{ printDetails.contract.sellContactName }}</div>
              <div>TEL.: {{ printDetails.contract.sellContactNumber }}</div>
            </div>
            <div style="width: 50%; padding-left: 4px">
              <div style="font-weight: 700">买方 BUYER:</div>
              <div>{{ printDetails.customer.name }}</div>
              <div style="padding-top: 16px">
                <span style="font-weight: 700">TAX NUMBER:</span>
                <span> {{ printDetails.contract.taxNumber }} </span>
              </div>
              <div style="padding: 16px 0">
                {{ printDetails.contract.buyAddress }},{{
                  printDetails.contract.buyPostalCode
                }},{{ printDetails.contract.buyCityName }},{{
                  printDetails.contract.buyProvinceName
                }},{{ printDetails.contract.buyCountryName }}
              </div>
              <div>
                <span style="font-weight: 700">POST CODE:</span>
                <span> {{ printDetails.contract.buyPostalCode }} </span>
              </div>
              <div style="padding-top: 16px">
                CONTRACT: {{ printDetails.contract.buyContactName }}
              </div>
              <div>TEL.: {{ printDetails.contract.buyContactNumber }}</div>
            </div>
          </div>
          <div style="height: 16px"></div>
          <div
            style="border: 1px solid black"
            v-if="[1, 2].includes(openStatus)"
          >
            <div style="display: flex; width: 100%">
              <div
                style="
                  width: 33%;
                  border-bottom: 1px solid black;
                  border-right: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">原产国 COUNTRY OF ORIGIN:</div>
                <div>{{ printDetails.contract.sellCountryName }}</div>
              </div>
              <div
                style="
                  width: 34%;
                  border-bottom: 1px solid black;
                  border-right: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">
                  目的国 COUNTRY OF DESTINATION:
                </div>
                <div>{{ printDetails.documents.countryName }}</div>
              </div>
              <div
                style="
                  width: 33%;
                  border-bottom: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">贸易方式 TERMS OF DELIVERY:</div>
                <div>
                  {{
                    dictValueLabel(
                      printDetails.contract.tradeMethods,
                      tradeMethods
                    )
                  }}
                </div>
              </div>
            </div>
            <div style="display: flex; width: 100%">
              <div
                style="
                  width: 33%;
                  border-bottom: 1px solid black;
                  border-right: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">付款方式 TERMS OF PAYMENT:</div>
                <div>
                  {{ printDetails.contract.remark }}
                </div>
              </div>
              <div
                style="
                  width: 34%;
                  border-bottom: 1px solid black;
                  border-right: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">交货期 DELIVERY TIME:</div>
                <div>{{ printDetails.contract.deliveryTime }}</div>
              </div>
              <div
                style="
                  width: 33%;
                  border-bottom: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">运输方式 EXPORT BY/VIA:</div>
                <div>
                  {{
                    dictValueLabel(
                      printDetails.contract.transportMethod,
                      shippingMethod
                    )
                  }}
                </div>
              </div>
            </div>
            <div style="display: flex; width: 100%">
              <div
                style="
                  width: 33%;
                  border-right: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">装卸港 PLACE OF DISCHARGE:</div>
                <div>{{ printDetails.contract.transportRemark }}</div>
              </div>
              <div
                style="
                  width: 34%;
                  border-right: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">目的港 FINAL DESTINATION:</div>
                <div>{{ printDetails.documents.portOfDestination }}</div>
              </div>
              <div style="width: 33%; padding-left: 4px">
                <div style="font-weight: 700">质保期 WARRANTY:</div>
                <div>
                  <span v-if="printDetails.contract.warranty"
                    >{{ printDetails.contract.warranty }}天</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            style="border: 1px solid black"
            v-else-if="[3].includes(openStatus)"
          >
            <div style="display: flex; width: 100%">
              <div
                style="
                  width: 33%;
                  border-bottom: 1px solid black;
                  border-right: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">COUNTRY OF ORIGIN:</div>
                <div>{{ printDetails.contract.sellCountryName }}</div>
              </div>
              <div
                style="
                  width: 34%;
                  border-bottom: 1px solid black;
                  border-right: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">COUNTRY OF DESTINATION:</div>
                <div>{{ printDetails.documents.countryName }}</div>
              </div>
              <div
                style="
                  width: 33%;
                  border-bottom: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">PLACE OF DISCHARGE:</div>
                <div>{{ printDetails.contract.transportRemark }}</div>
              </div>
            </div>
            <div style="display: flex; width: 100%">
              <div
                style="
                  width: 33%;
                  border-bottom: 1px solid black;
                  border-right: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">TERMS OF DELIVERY:</div>
                <div>
                  {{
                    dictValueLabel(
                      printDetails.contract.tradeMethods,
                      tradeMethods
                    )
                  }}
                </div>
              </div>
              <div
                style="
                  width: 34%;
                  border-bottom: 1px solid black;
                  border-right: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">CURRENCY:</div>
                <div>
                  {{ printDetails.contract.currency }}
                </div>
              </div>
              <div
                style="
                  width: 33%;
                  border-bottom: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">EXPORT BY/VIA:</div>
                <div>
                  {{
                    dictValueLabel(
                      printDetails.contract.transportMethod,
                      shippingMethod
                    )
                  }}
                </div>
              </div>
            </div>
            <div style="display: flex; width: 100%">
              <div
                style="
                  width: 33%;
                  border-right: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">DELIVERY TIME:</div>
                <div>{{ printDetails.contract.deliveryTime }}</div>
              </div>
              <div style="width: 67%; padding-left: 4px">
                <div style="font-weight: 700">付款方式 TERMS OF PAYMENT:</div>
                <div>
                  {{ printDetails.contract.remark }}
                </div>
              </div>
            </div>
          </div>
          <div style="height: 16px"></div>
          <div
            style="border: 1px solid black"
            v-if="[1, 2].includes(openStatus)"
          >
            <div style="display: flex; width: 100%">
              <div
                style="
                  width: 33%;
                  border-right: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">唛头及箱号 MARK & NUMBERS</div>
                <div
                  style="padding: 8px 0"
                  v-html="getStyle(printDetails.documents.remark)"
                ></div>
              </div>
              <div
                style="
                  width: 34%;
                  border-right: 1px solid black;
                  padding-left: 4px;
                "
              >
                <div style="font-weight: 700">
                  包装规格 PACKING & DESCRIPTION
                </div>
                <div
                  v-if="
                    printDetails.packDetailList &&
                    printDetails.packDetailList.length > 0
                  "
                >
                  <div
                    style="padding: 8px 0"
                    v-for="(item, index) in printDetails.packDetailList"
                    :key="index"
                  >
                    <span style="padding-right: 16px">{{ index + 1 }}</span>
                    <span v-if="item.boxLong">{{ item.boxLong }}cm</span>
                    <span>*</span>
                    <span v-if="item.boxWide">{{ item.boxWide }}cm</span>
                    <span>*</span>
                    <span v-if="item.boxHigh">{{ item.boxHigh }}cm</span>
                    <span>*</span>
                    <span>{{ item.packQuantity }}TNS</span>
                  </div>
                </div>
              </div>
              <div style="width: 33%; padding-left: 4px">
                <div style="font-weight: 700">总毛重 TOTAL GROSS WEIGHT/KG</div>
                <div>{{ printDetails.sumRoughWeight }}</div>
                <div style="font-weight: 700">总净重 TOTAL NET WEIGHT/KG</div>
                <div>{{ printDetails.sumNetWeight }}</div>
                <div style="font-weight: 700">总体积 TOTAL DIMENSION/M3</div>
                <div>{{ printDetails.sumBomVolume }}</div>
              </div>
            </div>
          </div>
          <div style="height: 16px"></div>
          <!-- 装箱单 -->
          <table
            class="three"
            cellspacing="0"
            cellpadding="0"
            border="0"
            style="width: 100%; border-bottom: 0"
            v-if="[1].includes(openStatus)"
          >
            <thead>
              <tr>
                <td style="width: 100px">
                  项目
                  <br />
                  ITEM NO.
                </td>
                <td>
                  货物描述
                  <br />
                  DESCRIPTION OF GOODS
                </td>

                <td style="width: 100px">
                  单位
                  <br />
                  UNIT
                </td>

                <td style="width: 100px; border-right: 0">
                  数量
                  <br />
                  QUANTITY
                  <br />
                  (SET/PCS)
                </td>
              </tr>
            </thead>
            <!-- 其他 -->
            <tbody
              v-if="
                printDetails.documentsProducts &&
                printDetails.documentsProducts.length > 0
              "
            >
              <tr
                v-for="(item, index) in printDetails.documentsProducts"
                :key="index"
              >
                <td style="text-align: center">{{ index + 1 }}</td>
                <td>
                  <div style="text-align: center">{{ item.describes }}</div>
                  <div style="text-align: center">{{ item.subDescribe }}</div>
                  <div style="text-align: center">
                    HS CODE: {{ item.customsCode }}
                  </div>
                </td>
                <td style="text-align: center">
                  {{ dictValueLabel(item.productUnit, productUnit) }}
                </td>
                <td style="text-align: center; border-right: 0">
                  {{ item.quantity }}
                </td>
              </tr>
            </tbody>
          </table>
          <!-- 商业发票、销售确认书 -->
          <table
            class="three"
            cellspacing="0"
            cellpadding="0"
            border="0"
            style="width: 100%; border-bottom: 0"
            v-if="[2, 3].includes(openStatus)"
          >
            <thead>
              <tr>
                <td style="width: 100px" v-if="[2, 3].includes(openStatus)">
                  项目
                  <br />
                  ITEM NO.
                </td>
                <td>
                  货物描述
                  <br />
                  DESCRIPTION OF GOODS
                </td>
                <template v-if="[3].includes(openStatus)">
                  <td style="width: 100px">
                    单位
                    <br />
                    UNIT
                  </td>
                </template>
                <td style="width: 100px">
                  数量
                  <br />
                  QUANTITY
                  <br />
                  (SET/PCS)
                </td>

                <template v-if="[2, 3].includes(openStatus)">
                  <td style="width: 100px">
                    单价
                    <br />
                    UNIT PRICE
                    <br />
                    {{
                      dictValueLabel(
                        printDetails.contract.currency,
                        accountCurrency
                      )
                    }}
                  </td>
                  <td style="width: 100px; border-right: 0">
                    总价
                    <br />
                    TOTAL PRICE
                    <br />
                    {{
                      dictValueLabel(
                        printDetails.contract.currency,
                        accountCurrency
                      )
                    }}
                  </td>
                </template>
              </tr>
            </thead>
            <!-- 其他 -->
            <tbody
              v-if="
                printDetails.documentsProducts &&
                printDetails.documentsProducts.length > 0 &&
                [2, 3].includes(openStatus)
              "
            >
              <tr
                v-for="(item, index) in printDetails.documentsProducts"
                :key="index"
              >
                <td style="text-align: center">{{ index + 1 }}</td>
                <td>
                  <div style="text-align: center">{{ item.describes }}</div>
                  <div style="text-align: center">{{ item.subDescribe }}</div>
                  <div style="text-align: center">
                    HS CODE: {{ item.customsCode }}
                  </div>
                </td>
                <td style="text-align: center" v-if="[3].includes(openStatus)">
                  {{ dictValueLabel(item.productUnit, productUnit) }}
                </td>
                <td style="text-align: center">{{ item.quantity }}</td>

                <td
                  style="text-align: center"
                  v-if="[2, 3].includes(openStatus)"
                >
                  {{ printDetails.contract.currency }}{{ item.price }}
                </td>
                <td
                  style="text-align: center; border-right: 0"
                  v-if="[2, 3].includes(openStatus)"
                >
                  {{ printDetails.contract.currency
                  }}{{
                    parseFloat(
                      Number(item.quantity) * Number(item.price)
                    ).toFixed(2)
                  }}
                </td>
              </tr>
            </tbody>
            <!-- 商业发票 -->
            <template v-if="[2].includes(openStatus)">
              <tr>
                <td :colspan="2" style="text-align: left; padding-left: 4px">
                  SUBTOTAL:
                </td>
                <td style="text-align: center">
                  {{ statistics("quantity", "", 0) }}
                </td>
                <td></td>
                <td style="text-align: center">
                  {{ printDetails.contract.currency
                  }}{{ statistics("price", "quantity", 2) }}
                </td>
              </tr>
              <template
                v-if="
                  printDetails.contractProjectList &&
                  printDetails.contractProjectList.length > 0
                "
              >
                <tr
                  v-for="(item, index) in printDetails.contractProjectList"
                  :key="index"
                >
                  <td :colspan="4" style="text-align: left; padding-left: 4px">
                    {{ item.payName }}:
                  </td>
                  <td style="text-align: center">
                    {{ printDetails.contract.currency }}{{ item.amount }}
                  </td>
                </tr>
              </template>
              <tr>
                <td :colspan="4" style="text-align: left; padding-left: 4px">
                  TOTAL
                  {{
                    dictValueLabel(
                      printDetails.contract.tradeMethods,
                      tradeMethods
                    )
                  }}
                  PRICE:
                </td>
                <td style="text-align: center">
                  {{ printDetails.contract.currency
                  }}{{ getAllMoney(statistics("price", "quantity", 2)) }}
                </td>
              </tr>
            </template>
            <!-- 销售确认书 -->
            <template v-if="[3].includes(openStatus)">
              <tr>
                <td :colspan="3" style="text-align: left; padding-left: 4px">
                  SUBTOTAL:
                </td>
                <td style="text-align: center">
                  {{ statistics("quantity", "", 0) }}
                </td>
                <td></td>
                <td style="text-align: center">
                  {{ printDetails.contract.currency
                  }}{{ statistics("price", "quantity", 2) }}
                </td>
              </tr>
              <template
                v-if="
                  printDetails.contractProjectList &&
                  printDetails.contractProjectList.length > 0
                "
              >
                <tr
                  v-for="(item, index) in printDetails.contractProjectList"
                  :key="index"
                >
                  <td :colspan="5" style="text-align: left; padding-left: 4px">
                    {{ item.payName }}:
                  </td>
                  <td style="text-align: center">
                    {{ printDetails.contract.currency }}{{ item.amount }}
                  </td>
                </tr>
              </template>
              <tr>
                <td :colspan="5" style="text-align: left; padding-left: 4px">
                  TOTAL
                  {{
                    dictValueLabel(
                      printDetails.contract.tradeMethods,
                      tradeMethods
                    )
                  }}
                  PRICE:
                </td>
                <td style="text-align: center">
                  {{ printDetails.contract.currency
                  }}{{ getAllMoney(statistics("price", "quantity", 2)) }}
                </td>
              </tr>
            </template>
          </table>
          <!-- 装箱单 -->
          <div v-if="[1].includes(openStatus)">
            <div style="font-weight: 700; padding: 4px 0">
              THE PACK FOR ABOVE CARGO ARE AS BELOWING SHOWS:
            </div>
            <table
              class="three"
              cellspacing="0"
              cellpadding="0"
              border="0"
              style="width: 100%; border-bottom: 0"
            >
              <thead>
                <tr>
                  <td style="width: 100px">
                    箱号
                    <br />
                    Case NO.
                  </td>

                  <td>
                    货物描述
                    <br />
                    DESCRIPTION OF GOODS
                  </td>
                  <td style="width: 100px">
                    数量
                    <br />
                    QUANTITY
                    <br />
                    (SET/PCS)
                  </td>
                  <td style="width: 100px">
                    净重
                    <br />
                    N.W./ KG
                  </td>
                  <td style="width: 100px; border-right: 0">
                    毛重
                    <br />
                    G.W./ KG
                  </td>
                </tr>
              </thead>
              <tbody
                v-if="
                  printDetails.packDetailList &&
                  printDetails.packDetailList.length > 0
                "
              >
                <template
                  v-for="(item, index) in printDetails.packDetailList"
                  :key="index"
                >
                  <tr
                    v-for="(sonItem, sonIndex) in item.documentsProductList"
                    :key="sonIndex"
                  >
                    <td
                      style="text-align: center"
                      :rowspan="item.documentsProductList.length"
                      v-if="sonIndex === 0"
                    >
                      {{ index + 1 }}
                    </td>
                    <td>
                      <div style="text-align: center">
                        {{ sonItem.describes }}
                      </div>
                      <div style="text-align: center">
                        {{ sonItem.subDescribe }}
                      </div>
                      <div style="text-align: center">
                        HS CODE: {{ sonItem.customsCode }}
                      </div>
                    </td>

                    <td style="text-align: center">{{ sonItem.quantity }}</td>
                    <td
                      :rowspan="item.documentsProductList.length"
                      style="text-align: center"
                      v-if="sonIndex === 0"
                    >
                      {{ item.netWeight }}
                    </td>
                    <td
                      :rowspan="item.documentsProductList.length"
                      style="text-align: center; border-right: 0"
                      v-if="sonIndex === 0"
                    >
                      {{ item.roughWeight }}
                    </td>
                  </tr>
                </template>
              </tbody>
            </table>
            <!-- <table
              class="three"
              cellspacing="0"
              cellpadding="0"
              border="0"
              style="width: 100%; border-bottom: 0"
              v-if="
                printDetails.packDetailList &&
                printDetails.packDetailList.length > 0
              "
            >
              <tbody
                v-for="(item, index) in printDetails.packDetailList"
                :key="index"
              >
                <tr
                  v-for="(itemAAA, indexAAA) in item.packDetailGoodsList"
                  :key="indexAAA"
                >
                  <td
                    :rowspan="item.packDetailGoodsList.length"
                    style="text-align: center; width: 100px"
                    v-if="indexAAA === 0"
                  >
                    CTN NO.{{ index + 1 }}
                  </td>
                  <td>
                    <div style="text-align: center">{{ itemAAA.remark }}</div>
                  </td>
                  <td style="text-align: center; width: 100px">
                    {{ itemAAA.unit }}
                  </td>
                  <td style="text-align: center; width: 100px">
                    {{ itemAAA.quantity }}
                  </td>
                  <td
                    :rowspan="item.packDetailGoodsList.length"
                    style="text-align: center; width: 200px; border-right: 0"
                    v-if="indexAAA === 0"
                  >
                    <span v-if="item.boxLong">{{ item.boxLong }}cm</span>
                    <span>*</span>
                    <span v-if="item.boxLong">{{ item.boxWide }}cm</span>
                    <span>*</span>
                    <span v-if="item.boxLong">{{ item.boxHigh }}cm</span>
                    <span> / {{ item.roughWeight }}KG</span>
                  </td>
                </tr>
              </tbody>
            </table> -->
          </div>
          <div v-if="[3].includes(openStatus)">
            <div style="height: 16px"></div>
            <div class="baseRow">
              <div class="contentRow" style="width: 100%; font-weight: 700">
                ACCOUNT INFORMATION:
              </div>
            </div>
            <div class="baseRow" style="border-bottom: 1px solid black">
              <div class="contentRow" style="width: 100%">
                <div
                  style="
                    line-height: 24px;
                    padding-left: 4px;
                    word-break: break-all;
                    word-wrap: break-word;
                  "
                >
                  Beneficiary Name: {{ printDetails.contract.beneficiaryName }}
                </div>
                <div
                  style="
                    line-height: 24px;
                    padding-left: 4px;
                    word-break: break-all;
                    word-wrap: break-word;
                  "
                >
                  Beneficiary Bank: {{ printDetails.contract.beneficiaryBank }}
                </div>
                <div
                  style="
                    line-height: 24px;
                    padding-left: 4px;
                    word-break: break-all;
                    word-wrap: break-word;
                  "
                >
                  Beneficiary Bank Address:
                  {{ printDetails.contract.beneficiaryBankAddress }}
                </div>
                <div
                  style="
                    line-height: 24px;
                    padding-left: 4px;
                    word-break: break-all;
                    word-wrap: break-word;
                  "
                >
                  Beneficiary Account Number:
                  {{ printDetails.contract.beneficiaryAccountNumber }}
                </div>
                <div
                  style="
                    line-height: 24px;
                    padding-left: 4px;
                    word-break: break-all;
                    word-wrap: break-word;
                  "
                >
                  Swift Code: {{ printDetails.contract.swiftCode }}
                </div>
                <div
                  style="
                    line-height: 24px;
                    padding-left: 4px;
                    word-break: break-all;
                    word-wrap: break-word;
                  "
                >
                  Beneficiary Address:
                  {{ printDetails.contract.beneficiaryAddress }}
                </div>
              </div>
            </div>
            <div style="height: 32px"></div>
            <div style="display: flex">
              <div style="width: 50%">
                <div style="font-weight: 700">CONFIRMED BY VENDOR:</div>
                <div>{{ printDetails.corporation.nameEn }}</div>
              </div>
              <div style="width: 50%">
                <div style="font-weight: 700">CONFIRMED BY BUYER:</div>
                <div>{{ printDetails.customer.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="openPrint = false" size="large">取消</el-button>
        <el-button type="primary" @click="clickDownload()" size="large"
          >下载PDF</el-button
        >
      </template>
    </el-dialog>

    <el-dialog
      title="打印"
      v-if="openCustomsDeclaration"
      v-model="openCustomsDeclaration"
      width="1460"
    >
      <div id="printMe">
        <div
          id="pdfDom"
          style="width: 1400px; padding: 16px; font-size: 12px !important"
        >
          <table cellspacing="0" cellpadding="0" border="0" class="one">
            <tr>
              <td colspan="8">
                <span style="font-weight: 700"
                  >出口货物正式报关单草单/申报信息填制模板</span
                >
              </td>
            </tr>
            <tr>
              <td colspan="2" style="background-color: #dce6f1">
                <div>发件公司清关负责人</div>
                <div>联系电话/手机(必填）</div>
              </td>
              <td colspan="2" style="background-color: #ebf1de">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.contacts }}
                </div>
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.contactsMobile }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.contacts"
                  size="small"
                />
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.contactsMobile"
                  size="small"
                />
              </td>
              <td colspan="2" style="background-color: #dce6f1">
                <span>联系人邮箱</span>
              </td>
              <td
                colspan="2"
                style="background-color: #ebf1de; text-align: left"
              >
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.contactsEmail }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.contactsEmail"
                  size="small"
                />
              </td>
            </tr>
            <tr style="background-color: #dce6f1">
              <td colspan="2">
                <span>境内发货人名称（填写发货公司中文名称）</span>
              </td>
              <td colspan="2">
                <span
                  >境内发货人代码（填写18位统一社会信用代码,没有信用证代码填报10位海关备案编码）</span
                >
              </td>
              <td colspan="2">
                <span>出境关别（不用填写）</span>
              </td>
              <td colspan="2">
                <span>备案号（如是手册的请填写）</span>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.companyNameChinese }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.companyNameChinese"
                  size="small"
                />
              </td>
              <td colspan="2">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.organizationCode }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.organizationCode"
                  size="small"
                />
              </td>
              <td colspan="2">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.exitCustoms }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.exitCustoms"
                  size="small"
                />
              </td>
              <td colspan="2">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.recordNo }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.recordNo"
                  size="small"
                />
              </td>
            </tr>
            <tr style="background-color: #dce6f1">
              <td colspan="2">
                <span
                  >境外收货人（指合同买方或合同指定的收货人公司英文名称）</span
                >
              </td>
              <td colspan="2">
                <span
                  >境外收货人代码（AEO互认企业需填报AEO编码；不填默认非AEO互认）</span
                >
              </td>
              <td colspan="2">
                <span>运输方式（不用填写）</span>
              </td>
              <td>
                <span>运输工具名称及航次号（不用填写）</span>
              </td>
              <td>
                <span>提运单号（指12位快递运单号码）</span>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="background-color: #ebf1de">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.customerCompanyName }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.customerCompanyName"
                  size="small"
                />
              </td>
              <td colspan="2">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.overseasConsigneeCode }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="
                    printCustomsDeclaration.content.overseasConsigneeCode
                  "
                  size="small"
                />
              </td>
              <td colspan="2">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.typeOfShipping }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.typeOfShipping"
                  size="small"
                />
              </td>
              <td>
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.meansOfTransport }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.meansOfTransport"
                  size="small"
                />
              </td>
              <td>
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.waybillCode }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.waybillCode"
                  size="small"
                />
              </td>
            </tr>
            <tr style="background-color: #dce6f1">
              <td colspan="2">
                <span>生产销售单位（指生产该产品的公司名称）</span>
              </td>
              <td colspan="2">
                <span
                  >生产销售单位代码（填写18位统一社会信用代码，没有信用证代码填写“NO”）</span
                >
              </td>
              <td colspan="2">
                <span>监管方式</span>
              </td>
              <td>
                <span>征免性质（与监管方式对应填写）</span>
              </td>
              <td>
                <span>许可证号（如需许可证的请填写）</span>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{
                    printCustomsDeclaration.content.productCompanyNameChinese
                  }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="
                    printCustomsDeclaration.content.productCompanyNameChinese
                  "
                  size="small"
                />
              </td>
              <td colspan="2">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.productOrganizationCode }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="
                    printCustomsDeclaration.content.productOrganizationCode
                  "
                  size="small"
                />
              </td>
              <td colspan="2">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.supervisionMode }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.supervisionMode"
                  size="small"
                />
              </td>
              <td>
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.exemptionNature }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.exemptionNature"
                  size="small"
                />
              </td>
              <td>
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.licenseKey }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.licenseKey"
                  size="small"
                />
              </td>
            </tr>
            <tr style="background-color: #dce6f1">
              <td colspan="2">
                <span>合同协议号（根据合同填写）</span>
              </td>
              <td colspan="2">
                <span>贸易国（合同买方所在国）</span>
              </td>
              <td colspan="2">
                <span>运抵国</span>
              </td>
              <td>
                <span>指运港（不用填写）</span>
              </td>
              <td>
                <span>离境口岸（不用填写）</span>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="background-color: #ebf1de">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.contractCode }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.contractCode"
                  size="small"
                />
              </td>
              <td colspan="2" style="background-color: #ebf1de">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.tradingCountry }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.tradingCountry"
                  size="small"
                />
              </td>
              <td colspan="2" style="background-color: #ebf1de">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.arrivalCountry }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.arrivalCountry"
                  size="small"
                />
              </td>
              <td>
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.portOfDestination }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.portOfDestination"
                  size="small"
                />
              </td>
              <td>
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.departurePort }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.departurePort"
                  size="small"
                />
              </td>
            </tr>
            <tr style="background-color: #dce6f1">
              <td>
                <span>包装种类</span>
              </td>
              <td>
                <span>件数（运单和装箱单一致）</span>
              </td>
              <td>
                <span>毛重（千克）</span>
              </td>
              <td>
                <span>净重（千克）</span>
              </td>
              <td>
                <span>成交方式</span>
              </td>
              <td>
                <span>运费</span>
              </td>
              <td>
                <span>保费</span>
              </td>
              <td>
                <span>杂费（如有请填写）</span>
              </td>
            </tr>
            <tr>
              <td style="background-color: #ebf1de">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.packageType }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.packageType"
                  size="small"
                />
              </td>
              <td style="background-color: #ebf1de">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.sumPackQuantity }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.sumPackQuantity"
                  size="small"
                />
              </td>
              <td style="background-color: #ebf1de">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.sumRoughWeight }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.sumRoughWeight"
                  size="small"
                />
              </td>
              <td style="background-color: #ebf1de">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.sumNetWeight }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.sumNetWeight"
                  size="small"
                />
              </td>
              <td style="background-color: #ebf1de">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.tradeModeName }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.tradeModeName"
                  size="small"
                />
              </td>
              <td>
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.freightPrice }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.freightPrice"
                  size="small"
                />
              </td>
              <td>
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.premiumPrice }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.premiumPrice"
                  size="small"
                />
              </td>
              <td>
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.incidentalPrice }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.incidentalPrice"
                  size="small"
                />
              </td>
            </tr>
            <tr>
              <td colspan="3" style="background-color: #dce6f1">
                <span>随附单证及编号（常见如通关单号、原进口报关单号）</span>
              </td>
              <td colspan="5">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.documentsAttached }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.documentsAttached"
                  size="small"
                />
              </td>
            </tr>
            <tr>
              <td colspan="2" style="background-color: #dce6f1">
                <span>标记唛码及备注</span>
              </td>
              <td colspan="2" style="background-color: #ebf1de">
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.shippingMark }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.shippingMark"
                  size="small"
                />
              </td>
              <td style="background-color: #dce6f1">
                <span>境内货源地</span>
              </td>
              <td
                colspan="3"
                style="background-color: #ebf1de; text-align: left"
              >
                <div
                  style="word-wrap: break-word; padding: 0 4px"
                  v-if="textShow"
                >
                  {{ printCustomsDeclaration.content.withinChinaSource }}
                </div>
                <el-input
                  autosize
                  type="textarea"
                  v-if="!textShow"
                  v-model="printCustomsDeclaration.content.withinChinaSource"
                  size="small"
                />
              </td>
            </tr>
          </table>
          <table cellspacing="0" cellpadding="0" border="0" class="two">
            <tr>
              <th style="width: 20px">
                <span>项号</span>
              </th>
              <th style="width: 140px">
                <span>商品编号(13位)原10位海关编码+3位检验检疫附加编码</span>
              </th>
              <th style="width: 140px">
                <span>商品名称</span>
              </th>
              <th>
                <span>品牌</span>
              </th>
              <th>
                <span>品牌类型</span>
              </th>
              <th style="width: 140px">
                <span>出口享惠情况（不填写则默认不享受）</span>
              </th>
              <th>
                <span>型号</span>
              </th>
              <th style="width: 140px">
                <span>税号所需申报要素(如:用途、材质等）</span>
              </th>
              <th>
                <span>各项净重</span>
              </th>
              <th>
                <span>成交数量</span>
              </th>
              <th>
                <span>成交单位</span>
              </th>
              <th>
                <span>原产国（地区）</span>
              </th>
              <th>
                <span>总价与币制</span>
              </th>
              <th>
                <span>成交单价</span>
              </th>
              <th>
                <span>EXW 单价</span>
              </th>
            </tr>
            <template
              v-if="
                printCustomsDeclaration.content.products &&
                printCustomsDeclaration.content.products.length > 0
              "
            >
              <tr
                v-for="(item, index) in printCustomsDeclaration.content
                  .products"
                :key="index"
              >
                <td>
                  <span>{{ index + 1 }}</span>
                </td>
                <td>
                  <div
                    style="word-wrap: break-word; padding: 0 4px"
                    v-if="textShow"
                  >
                    {{ item.customsCode }}
                  </div>
                  <el-input
                    autosize
                    type="textarea"
                    v-if="!textShow"
                    v-model="item.customsCode"
                    size="small"
                  />
                </td>
                <td>
                  <div
                    style="word-wrap: break-word; padding: 0 4px"
                    v-if="textShow"
                  >
                    {{ item.productName }}
                  </div>
                  <el-input
                    autosize
                    type="textarea"
                    v-if="!textShow"
                    v-model="item.productName"
                    size="small"
                  />
                </td>
                <td>
                  <div
                    style="word-wrap: break-word; padding: 0 4px"
                    v-if="textShow"
                  >
                    {{ item.brand }}
                  </div>
                  <el-input
                    autosize
                    type="textarea"
                    v-if="!textShow"
                    v-model="item.brand"
                    size="small"
                  />
                </td>
                <td>
                  <div
                    style="word-wrap: break-word; padding: 0 4px"
                    v-if="textShow"
                  >
                    {{ item.brandType }}
                  </div>
                  <el-input
                    autosize
                    type="textarea"
                    v-if="!textShow"
                    v-model="item.brandType"
                    size="small"
                  />
                </td>
                <td>
                  <div
                    style="word-wrap: break-word; padding: 0 4px"
                    v-if="textShow"
                  >
                    {{ item.exportBenefits }}
                  </div>
                  <el-input
                    autosize
                    type="textarea"
                    v-if="!textShow"
                    v-model="item.exportBenefits"
                    size="small"
                  />
                </td>
                <td>
                  <div
                    style="word-wrap: break-word; padding: 0 4px"
                    v-if="textShow"
                  >
                    {{ item.productModelChinese }}
                  </div>
                  <el-input
                    autosize
                    type="textarea"
                    v-if="!textShow"
                    v-model="item.productModelChinese"
                    size="small"
                  />
                </td>
                <td>
                  <div
                    style="word-wrap: break-word; padding: 0 4px"
                    v-if="textShow"
                  >
                    {{ item.declareRemark }}
                  </div>
                  <el-input
                    autosize
                    type="textarea"
                    v-if="!textShow"
                    v-model="item.declareRemark"
                    size="small"
                  />
                </td>
                <td>
                  <div
                    style="word-wrap: break-word; padding: 0 4px"
                    v-if="textShow"
                  >
                    {{ item.netWeight }}
                  </div>
                  <el-input
                    autosize
                    type="textarea"
                    v-if="!textShow"
                    v-model="item.netWeight"
                    size="small"
                  />
                </td>
                <td>
                  <div
                    style="word-wrap: break-word; padding: 0 4px"
                    v-if="textShow"
                  >
                    {{ item.quantity }}
                  </div>
                  <el-input
                    autosize
                    type="textarea"
                    v-if="!textShow"
                    v-model="item.quantity"
                    size="small"
                  />
                </td>
                <td>
                  <div
                    style="word-wrap: break-word; padding: 0 4px"
                    v-if="textShow"
                  >
                    {{ item.unit }}
                  </div>
                  <el-input
                    autosize
                    type="textarea"
                    v-if="!textShow"
                    v-model="item.unit"
                    size="small"
                  />
                </td>
                <td>
                  <div
                    style="word-wrap: break-word; padding: 0 4px"
                    v-if="textShow"
                  >
                    {{ item.countryChinese }}
                  </div>
                  <el-input
                    autosize
                    type="textarea"
                    v-if="!textShow"
                    v-model="item.countryChinese"
                    size="small"
                  />
                </td>
                <td>
                  <div
                    style="word-wrap: break-word; padding: 0 4px"
                    v-if="textShow"
                  >
                    {{ item.sumPrice }}
                  </div>
                  <el-input
                    autosize
                    type="textarea"
                    v-if="!textShow"
                    v-model="item.sumPrice"
                    size="small"
                  />
                </td>
                <td>
                  <div
                    style="word-wrap: break-word; padding: 0 4px"
                    v-if="textShow"
                  >
                    {{ item.declaredPrice }}
                  </div>
                  <el-input
                    autosize
                    type="textarea"
                    v-if="!textShow"
                    v-model="item.declaredPrice"
                    size="small"
                  />
                </td>
                <td>
                  <div
                    style="word-wrap: break-word; padding: 0 4px"
                    v-if="textShow"
                  >
                    {{ item.exwPrice }}
                  </div>
                  <el-input
                    autosize
                    type="textarea"
                    v-if="!textShow"
                    v-model="item.exwPrice"
                    size="small"
                  />
                </td>
              </tr>
            </template>
            <tr>
              <td colspan="15" style="text-align: left; padding-left: 8px">
                <span style="color: red">
                  我司保证以上所提供的信息及资料准确无误，如在海关申报、查验时有任何异议，所造成的损失及后果由我司承担。
                  确认签名/盖章：_________________________
                </span>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <template #footer>
        <el-button @click="openCustomsDeclaration = false" size="large"
          >取消</el-button
        >
        <el-button type="primary" @click="clickDownload()" size="large"
          >下载PDF</el-button
        >
        <el-button type="primary" @click="clickSave()" size="large"
          >保存</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import { ElMessage, ElMessageBox } from "element-plus";
import useUserStore from "@/store/modules/user";

const { proxy } = getCurrentInstance();
const shipmentList = ref([]);
const countryData = ref([]);
const fundsPaymentMethod = ref([]);
const shippingMethod = ref([]);
const tradeMethods = ref([]);
const accountCurrency = ref([]);
const productUnit = ref([]);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    keyword: "",
    warehouseId: "",
    toWarehouseId: "",
    type: "3",
  },
});
const loading = ref(false);
const config = computed(() => {
  return [
    {
      attrs: {
        label: "归属公司",
        prop: "sellCorporationName",
        "min-width": 260,
      },
    },
    {
      attrs: {
        label: "客户名称",
        prop: "buyCorporationName",
        "min-width": 200,
      },
    },
    {
      attrs: {
        label: "主合同编号",
        prop: "code",
        width: 200,
      },
    },
    {
      attrs: {
        label: "货运详情",
        slot: "acceptCode",
        width: 200,
      },
    },
    {
      attrs: {
        label: "查看单证",
        slot: "toView",
        width: 140,
      },
    },
    {
      attrs: {
        label: "创建时间",
        prop: "createTime",
        width: 160,
      },
    },
    {
      attrs: {
        label: "操作",
        width: "80",
        align: "center",
      },
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "删除",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              ElMessageBox.confirm(
                "此操作将永久删除该数据, 是否继续?",
                "提示",
                {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                }
              ).then(() => {
                proxy
                  .post("/documents/delete", {
                    id: row.id,
                  })
                  .then(() => {
                    ElMessage({
                      message: "删除成功",
                      type: "success",
                    });
                    getList();
                  });
              });
            },
          },
        ];
      },
    },
  ];
});
const getDict = () => {
  proxy.post("/customizeArea/list", { parentId: "0" }).then((res) => {
    if (res && res.length > 0) {
      countryData.value = res.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
    }
  });
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      dictCode: "funds_payment_method",
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      if (res.rows && res.rows.length > 0) {
        fundsPaymentMethod.value = res.rows.map((item) => {
          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        });
      }
    });
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      dictCode: "shipping_method",
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      if (res.rows && res.rows.length > 0) {
        shippingMethod.value = res.rows.map((item) => {
          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        });
      }
    });
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      dictCode: "trade_mode",
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      if (res.rows && res.rows.length > 0) {
        tradeMethods.value = res.rows.map((item) => {
          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        });
      }
    });
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      dictCode: "account_currency",
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      if (res.rows && res.rows.length > 0) {
        accountCurrency.value = res.rows.map((item) => {
          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        });
      }
    });
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      dictCode: "unit",
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      if (res.rows && res.rows.length > 0) {
        productUnit.value = res.rows.map((item) => {
          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        });
      }
    });
};
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy.post("/documents/page", sourceList.value.pagination).then((res) => {
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getDict();
getList();
const dialogVisible = ref(false);
const loadingDialog = ref(false);
const submit = ref(null);
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const formData = reactive({
  data: {
    documentsProductList: [],
  },
});
const formConfig = computed(() => {
  return [
    {
      type: "select",
      prop: "contractId",
      label: "出货主合同",
      required: true,
      data: shipmentList.value,
      fn: (val) => {
        changeContract(val);
      },
    },
    {
      type: "slot",
      slotName: "details",
      label: "产品信息",
    },
    {
      label: "唛头信息",
    },
    {
      type: "select",
      prop: "countryId",
      label: "目的国",
      required: true,
      filterable: true,
      data: countryData.value,
      itemWidth: 40,
    },
    {
      type: "input",
      prop: "portOfDestination",
      label: "目的港",
      itemWidth: 60,
    },
    {
      type: "input",
      prop: "remark",
      label: "唛头明细",
      itemType: "textarea",
    },
  ];
});
const rules = ref({
  contractId: [
    { required: true, message: "请选择出货主合同", trigger: "change" },
  ],
  countryId: [{ required: true, message: "请选择目的国", trigger: "change" }],
  describes: [{ required: true, message: "请输入货物描述", trigger: "blur" }],
  subDescribe: [{ required: true, message: "请输入副描述", trigger: "blur" }],
  customsCode: [{ required: true, message: "请输入海关编码", trigger: "blur" }],
  quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
  price: [{ required: true, message: "请输入单价", trigger: "blur" }],
});
const openModal = () => {
  proxy.post("/packShipment/list", {}).then((res) => {
    if (res && res.length > 0) {
      shipmentList.value = res.map((item) => {
        return {
          packShipmentId: item.id,
          label: item.contractCode,
          value: item.contractId,
          packDetailIds: item.packDetailIds,
        };
      });
    } else {
      shipmentList.value = [];
    }
  });
  formData.data = {
    documentsProductList: [],
  };
  loadingDialog.value = false;
  dialogVisible.value = true;
};
const changeContract = (val) => {
  if (val) {
    let data = shipmentList.value.filter((item) => item.value === val);
    if (data && data.length > 0) {
      formData.data.packShipmentId = data[0].packShipmentId;
      proxy
        .post("/packShipment/productDetailList", {
          packDetailIds: data[0].packDetailIds,
        })
        .then((res) => {
          if (res && res.length > 0) {
            formData.data.documentsProductList = res.map((item) => {
              return {
                businessId: item.businessId,
                productId: item.productId,
                describes: item.remark,
                subDescribe: item.subDescription,
                customsCode: item.customsCode,
                quantity: item.quantity,
                price: item.price,
                type: item.type,
              };
            });
          } else {
            formData.data.documentsProductList = [];
          }
        });
    } else {
      formData.data.documentsProductList = [];
    }
    proxy.post("/contract/detail", { id: val }).then((res) => {
      formData.data.countryId = res.buyCountryId;
    });
  } else {
    formData.data.documentsProductList = [];
  }
};
const submitForm = () => {
  submit.value.handleSubmit(() => {
    loadingDialog.value = true;
    proxy.post("/documents/add", formData.data).then(
      () => {
        ElMessage({
          message: "提交成功",
          type: "success",
        });
        dialogVisible.value = false;
        sourceList.value.pagination.pageNum = 1;
        getList();
      },
      (err) => {
        console.log(err);
        loadingDialog.value = false;
      }
    );
  });
};
const openAddAcceptCode = ref(false);
const loadingTwo = ref(false);
const submitTwo = ref(null);
const fileList = ref([]);
const uploadData = ref({});
const formDataTwo = reactive({
  data: {
    documentsId: "",
  },
});
const formConfigTwo = computed(() => {
  return [
    {
      type: "input",
      prop: "acceptCarriage",
      label: "承运方",
      itemType: "text",
      itemWidth: 40,
    },
    {
      type: "input",
      prop: "code",
      label: "单号",
      itemType: "text",
      itemWidth: 60,
    },
    {
      type: "slot",
      prop: "departureTime",
      slotName: "departureTime",
      label: "起运时间",
    },
    {
      type: "input",
      prop: "remark",
      label: "备注",
      itemType: "textarea",
    },
    {
      type: "slot",
      prop: "file",
      slotName: "file",
      label: "上传附件",
    },
  ];
});
const rulesTwo = ref({
  acceptCarriage: [
    { required: true, message: "请输入承运方", trigger: "blur" },
  ],
  code: [{ required: true, message: "请输入承运单号", trigger: "blur" }],
  departureTime: [
    { required: true, message: "请选择起运时间", trigger: "change" },
  ],
});
const clickAddAcceptCode = (item) => {
  formDataTwo.data = {
    documentsId: item.id,
  };
  fileList.value = [];
  openAddAcceptCode.value = true;
};
const uploadFile = async (file) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadData.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  return true;
};
const onPreviewFile = (file) => {
  window.open(file.raw.fileUrl, "_blank");
};
const submitTwoForm = () => {
  submitTwo.value.handleSubmit(() => {
    if (fileList.value && fileList.value.length > 0) {
      formDataTwo.data.fileList = fileList.value.map((item) => {
        return {
          id: item.raw.id,
          fileName: item.raw.fileName,
          fileUrl: item.raw.fileUrl,
        };
      });
    } else {
      formDataTwo.data.fileList = [];
    }
    loadingTwo.value = true;
    proxy.post("/documentsTransport/add", formDataTwo.data).then(
      () => {
        ElMessage({
          message: "提交成功",
          type: "success",
        });
        openAddAcceptCode.value = false;
        getList();
      },
      (err) => {
        console.log(err);
        loadingTwo.value = false;
      }
    );
  });
};
const rowData = ref({});
const openSelectPrint = ref(false);
const clickToView = (item) => {
  rowData.value = item;
  openSelectPrint.value = true;
  printDetails.value = {
    packDetailGoodsList: [],
    documents: {},
    contract: {},
    corporation: {},
    packDetailList: [],
    documentsProducts: [],
    customer: {},
  };
  proxy
    .get("/documents/generateInvoiceAPackPdf", { id: rowData.value.id })
    .then((res) => {
      printDetails.value = res.data;
    });
};
const openPrint = ref(false);
const openStatus = ref("");
const printDetails = ref({
  packDetailGoodsList: [],
  documents: {},
  contract: {},
  contractProjectList: [],
  corporation: {},
  packDetailList: [],
  documentsProducts: [],
  customer: {},
});
const openCustomsDeclaration = ref(false);
const printCustomsDeclaration = ref({
  content: {},
});
const textShow = ref(false);
const clickPrint = (status) => {
  // printDetails.value = {
  //   packDetailGoodsList: [],
  //   documents: {},
  //   contract: {},
  //   contractProjectList: [],
  //   corporation: {},
  //   packDetailList: [],
  //   documentsProducts: [],
  //   customer: {},
  // };
  if ([1, 2, 3].includes(status)) {
    openStatus.value = status;
    openPrint.value = true;
  } else {
    printCustomsDeclaration.value = {
      content: {},
    };
    openStatus.value = status;
    textShow.value = false;
    openCustomsDeclaration.value = true;
    proxy
      .get("/documents/generateClearanceePdf", { id: rowData.value.id })
      .then((res) => {
        if (res.data.content) {
          res.data.content = JSON.parse(res.data.content);
        }
        printCustomsDeclaration.value = res.data;
      });
  }
  // proxy.get("/documents/generateInvoiceAPackPdf", { id: rowData.value.id }).then((res) => {
  //   printDetails.value = res.data;
  // });
};
const clickDownload = () => {
  if (openStatus.value === 1) {
    proxy.getPdf("装箱单PDF文件");
  } else if (openStatus.value === 2) {
    proxy.getPdf("商业发票PDF文件");
  } else if (openStatus.value === 3) {
    proxy.getPdf("销售确认书PDF文件");
  } else if (openStatus.value === 4) {
    textShow.value = true;
    let data = proxy.deepClone(printCustomsDeclaration.value);
    data.content = JSON.stringify(data.content);
    proxy.post("/documentsPdf/add", data).then();
    setTimeout(() => {
      proxy.getPdfTransverseA4("报关单PDF文件");
      nextTick(() => {
        setTimeout(() => {
          textShow.value = false;
        }, 1000);
      });
    }, 1000);
  }
};
const clickSave = () => {
  if (openStatus.value === 1) {
    proxy.getPdf("装箱单PDF文件");
  } else if (openStatus.value === 2) {
    proxy.getPdf("商业发票PDF文件");
  } else if (openStatus.value === 3) {
    proxy.getPdf("销售确认书PDF文件");
  } else if (openStatus.value === 4) {
    textShow.value = true;
    let data = proxy.deepClone(printCustomsDeclaration.value);
    data.content = JSON.stringify(data.content);
    proxy.post("/documentsPdf/add", data).then((res) => {
      ElMessage({
        message: "保存成功",
        type: "success",
      });
    });
  }
};
const getStyle = (text) => {
  if (text) {
    return text.replace(/\n|\r\n/g, "<br>");
  } else {
    return "";
  }
};
const statistics = (label, label2, index) => {
  let num = 0;
  if (
    printDetails.value.documentsProducts &&
    printDetails.value.documentsProducts.length > 0
  ) {
    printDetails.value.documentsProducts.map((item) => {
      if (label2) {
        if (item[label] && item[label2]) {
          num = parseFloat(
            Number(num) + Number(item[label]) * Number(item[label2])
          ).toFixed(index);
        }
      } else {
        if (item[label]) {
          num = parseFloat(Number(num) + Number(item[label])).toFixed(index);
        }
      }
    });
  }
  return num;
};
const getAllMoney = (num) => {
  let money = num;
  if (
    printDetails.value.contractProjectList &&
    printDetails.value.contractProjectList.length > 0
  ) {
    printDetails.value.contractProjectList.map((item) => {
      if (item.amount) {
        money = parseFloat(Number(money) + Number(item.amount)).toFixed(2);
      }
    });
  }
  return money;
};
const printObj = ref({
  id: "printMe",
  popTitle: "",
  extraCss:
    "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
});
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
.baseRow {
  min-height: 20px;
  border-top: 1px solid black;
  border-left: 1px solid black;
}
.contentRow {
  border-right: 1px solid black;
  line-height: 20px;
  padding-left: 4px;
}
.three {
  width: 100%;
  border: 1px solid black;
}
.three thead {
  text-align: center;
  line-height: 20px;
  font-weight: 700;
}
.three th {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.three td {
  line-height: 20px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.one {
  width: 100%;
  text-align: center;
  border-top: 1px solid black;
  border-left: 1px solid black;
  table-layout: fixed;
}
.one td {
  border: 0;
  line-height: 18px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.two {
  width: 100%;
  text-align: center;
  border-top: 1px solid black;
  border-left: 1px solid black;
  table-layout: fixed;
}
.two th {
  border: 0;
  line-height: 18px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #dce6f1;
}
.two td {
  border: 0;
  line-height: 18px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
:deep(#pdfDom .el-textarea__inner) {
  background: transparent !important;
  overflow-y: hidden;
  padding: 0 4px !important;
  resize: none;
}
:deep(#pdfDom .el-textarea) {
  --el-input-focus-border: transparent;
  --el-input-transparent-border: 0 0 0 0px;
  --el-input-border-color: transparent;
  --el-input-hover-border: 0px !important;
  --el-input-hover-border-color: transparent;
  --el-input-focus-border-color: transparent;
  --el-input-clear-hover-color: transparent;
  box-shadow: 0 0 0 0px !important;
  --el-input-border: 0px;
}
</style>