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="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: 16px 0">
              {{ printDetails.contract.buyAddress }},{{ printDetails.contract.buyPostalCode }},{{ printDetails.contract.buyCityName }},{{
                printDetails.contract.buyProvinceName
              }},{{ printDetails.contract.buyCountryName }}
            </div>
            <div>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: 16px 0">
              {{ printDetails.contract.buyAddress }},{{ printDetails.contract.buyPostalCode }},{{ printDetails.contract.buyCityName }},{{
                printDetails.contract.buyProvinceName
              }},{{ printDetails.contract.buyCountryName }}
            </div>
            <div>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">
          <thead>
            <tr>
              <td style="width: 100px">
                项目
                <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="[1].includes(openStatus)">
                <td style="width: 100px">
                  净重
                  <br />
                  N.W./ KG
                </td>
                <td style="width: 100px; border-right: 0">
                  毛重
                  <br />
                  G.W./ KG
                </td>
              </template>
              <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">
            <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 :rowspan="printDetails.documentsProducts.length" style="text-align: center" v-if="index === 0 && [1].includes(openStatus)">
                {{ printDetails.sumNetWeight }}
              </td>
              <td :rowspan="printDetails.documentsProducts.length" style="text-align: center; border-right: 0" v-if="index === 0 && [1].includes(openStatus)">
                {{ printDetails.sumRoughWeight }}
              </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"
            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>
      <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="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>
      <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;
};
</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>