doctor-admin-components 1.0.4 → 1.0.6-beta.0

package/packages/src/views/biz/contractTracing/contract.vue

@@ -0,0 +1,1256 @@
+<template>
+  <div>
+    <el-form
+      :model="form"
+      ref="form"
+      :label-position="'left'"
+      size="mini"
+      :disabled="form.contractStatus == 'signed'"
+    >
+      <div>
+        <el-descriptions
+          class="margin-top"
+          :title="form.contractType == 'sale' ? '买家争议' : '卖家争议'"
+          :column="1"
+        >
+          <template slot="extra">
+            <el-button type="text" size="small" @click="handleDisputeRecord"
+              >争议记录</el-button
+            >
+          </template>
+        </el-descriptions>
+        <div
+          v-if="form.normalDispute"
+          style="word-wrap: break-word; width: 99%; font-size: small"
+        >
+          {{
+            "【" +
+            (form.normalDispute.createTime
+              ? form.normalDispute.createTime
+              : "") +
+            "】" +
+            (form.normalDispute.dispute ? form.normalDispute.dispute : "")
+          }}
+        </div>
+      </div>
+
+      <el-row>
+        <div style="min-height: 40px; background: #e5e9f2; text-align: center">
+          <span
+            style="
+              font-size: 16px;
+              font-weight: 700;
+              height: 35px;
+              line-height: 35px;
+            "
+          >
+            {{
+              form.contractType == "sale"
+                ? "Sales Contract"
+                : "Purchase Contract"
+            }}
+          </span>
+        </div>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item
+            label="Contract Order #:"
+            prop="contractNo"
+            label-width="130px"
+          >
+            <el-input v-model="form.contractNo" clearable size="mini" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="Contract Date:"
+            prop="createTime"
+            label-width="120px"
+          >
+            <el-date-picker
+              style="width: 80%"
+              clearable
+              size="mini"
+              v-model="form.createTime"
+              type="date"
+              value-format="yyyy-MM-dd HH:mm:ss"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <div class="grid-content bg-purple-light">
+          <span class="text item">
+            {{ "Company information" }}
+          </span>
+        </div>
+      </el-row>
+
+      <el-row>
+        <el-col :span="17">
+          <div class="text item">
+            {{ "Seller" }}
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <el-button
+            type="text"
+            @click="handleUserCompany(form.supplierCompanyId, 'seller')"
+            buyerAccountId
+            >Select Seller's Company</el-button
+          >
+        </el-col>
+      </el-row>
+      <el-form-item label="Company Name" label-width="120px">
+        <el-input
+          v-model="form.supplierContractCompany.companyEnglishName"
+          clearable
+          size="mini"
+          disabled
+        />
+      </el-form-item>
+      <el-form-item label="Company Adress" label-width="128px">
+        <el-input
+          v-model="form.supplierContractCompany.address"
+          clearable
+          size="mini"
+          disabled
+        />
+      </el-form-item>
+      <el-form-item label="Contact">
+        {{ form.supplierContractCompany.contact }}
+      </el-form-item>
+      <el-form-item label="Email Address">
+        {{ form.supplierContractCompany.email }}
+      </el-form-item>
+
+      <el-row>
+        <el-col :span="17">
+          <div class="text item">
+            {{ "Buyer" }}
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <el-button
+            type="text"
+            @click="handleUserCompany(form.buyCompanyId, 'buyer')"
+            >Select Buyer's Company</el-button
+          >
+        </el-col>
+      </el-row>
+      <el-form-item label="Company Name" label-width="120px">
+        <el-input
+          v-model="form.buyContractCompany.companyEnglishName"
+          clearable
+          size="mini"
+          disabled
+        />
+      </el-form-item>
+      <el-form-item label="Company Adress" label-width="128px">
+        <el-input
+          v-model="form.buyContractCompany.address"
+          clearable
+          size="mini"
+          disabled
+        />
+      </el-form-item>
+      <el-form-item label="Contact">
+        {{ form.buyContractCompany.contact }}
+      </el-form-item>
+      <el-form-item label="Email Address">
+        {{ form.buyContractCompany.email }}
+      </el-form-item>
+
+      <el-row>
+        <div class="grid-content bg-purple-light">
+          <span class="text item">
+            {{ "Commodity information" }}
+          </span>
+        </div>
+      </el-row>
+
+      <el-table :data="form.contractDetailList" size="mini">
+        <el-table-column label="Description" align="center" width="180px">
+          <template slot-scope="scope">
+            <el-input
+              v-model="scope.row.askName"
+              type="textarea"
+              autosize
+              clearable
+              size="mini"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="Quantity" align="center" width="180px">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.weight" clearable size="mini">
+              <template slot="append">MT</template>
+            </el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="form.quoteType == 'FIXED'"
+          label="Unit Price/MT"
+          align="center"
+          width="180px"
+        >
+          <template slot-scope="scope">
+            <el-input
+              v-if="form.contractType == 'sale'"
+              v-model="scope.row.quotePrice"
+              clearable
+              size="mini"
+            >
+              <template slot="prepend">$</template>
+            </el-input>
+            <el-input
+              v-else
+              v-model="scope.row.sllerPrice"
+              clearable
+              size="mini"
+            >
+              <template slot="prepend">$</template>
+            </el-input>
+          </template>
+        </el-table-column>
+
+        <!-- CMX 都显示 -->
+        <el-table-column
+          v-if="form.quoteType == 'CMX'"
+          label="Unit Price/MT"
+          align="center"
+          width="250"
+        >
+          <template slot-scope="scope">
+            <el-input
+              v-if="form.contractType == 'sale'"
+              v-model="scope.row.quotePrice"
+              size="mini"
+            >
+              <template slot="prepend">$(CMX-</template>
+              <template slot="append">*2204.62</template>
+            </el-input>
+            <el-input v-else v-model="scope.row.sllerPrice" size="small">
+              <template slot="prepend">$(CMX-</template>
+              <template slot="append">*2204.62</template>
+            </el-input>
+          </template>
+        </el-table-column>
+        <!--  LME -->
+        <el-table-column
+          v-if="form.quoteType == 'LME'"
+          label="Unit Price/MT"
+          align="center"
+          width="300"
+        >
+          <template slot-scope="scope">
+            <el-input
+              v-if="form.contractType == 'sale'"
+              v-model="scope.row.quotePrice"
+              clearable
+              size="mini"
+            >
+              <template slot="prepend">$(LME 3M *</template>
+              <template slot="append">%</template>
+            </el-input>
+            <el-input
+              v-else
+              v-model="scope.row.sllerPrice"
+              clearable
+              size="mini"
+            >
+              <template slot="prepend">$(LME 3M *</template>
+              <template slot="append">%</template>
+            </el-input>
+          </template>
+        </el-table-column>
+
+        <!-- CMX 都显示 CMX Month-->
+        <el-table-column
+          v-if="form.quoteType == 'CMX'"
+          label="CMX Month"
+          align="center"
+          width="180px"
+        >
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.cmxMonth"
+              placeholder="Please select cmxMonth"
+              clearable
+              size="mini"
+            >
+              <el-option
+                v-for="dict in dict.type.cmx_month"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="Service fee/MT" align="center" width="180px">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.serviceFee" clearable size="small">
+              <template slot="prepend">$</template>
+            </el-input>
+          </template>
+        </el-table-column>
+
+        <!-- 采购合同 FIXED -->
+        <el-table-column label="Net Unit Price/MT" align="center" width="180px">
+          <template slot-scope="scope">
+            <span
+              v-if="
+                form.quoteType == 'FIXED' && form.contractType == 'purchase'
+              "
+            >
+              {{ "$" + (scope.row.sllerPrice - Number(scope.row.serviceFee)) }}
+            </span>
+            <span
+              v-else-if="
+                form.quoteType == 'FIXED' && form.contractType == 'sale'
+              "
+            >
+              {{
+                "$" +
+                (Number(scope.row.quotePrice) + Number(scope.row.serviceFee))
+              }}
+            </span>
+            <span
+              v-else-if="
+                form.quoteType == 'LME' && form.contractType == 'purchase'
+              "
+            >
+              {{
+                "$(LME 3M * " +
+                scope.row.sllerPrice +
+                "%) - $" +
+                Number(scope.row.serviceFee)
+              }}
+            </span>
+            <span
+              v-else-if="form.quoteType == 'LME' && form.contractType == 'sale'"
+            >
+              {{
+                "$(LME 3M * " +
+                scope.row.quotePrice +
+                "%) + $" +
+                Number(scope.row.serviceFee)
+              }}
+            </span>
+            <span
+              v-else-if="
+                form.quoteType == 'CMX' && form.contractType == 'purchase'
+              "
+            >
+              {{
+                "${(CMX-" +
+                scope.row.sllerPrice +
+                ")*2204.62} - $" +
+                Number(scope.row.serviceFee)
+              }}
+            </span>
+            <span v-else>
+              {{
+                "${(CMX-" +
+                scope.row.quotePrice +
+                ")*2204.62} + $" +
+                Number(scope.row.serviceFee)
+              }}
+            </span>
+          </template>
+        </el-table-column>
+
+        <!-- <el-table-column width="100" align="center">
+          <el-popconfirm
+            title="确定删除吗？"
+            @onConfirm="deleteTableRow(scope.row)"
+          >
+            <el-button
+              type="danger"
+              slot="reference"
+              style="min-width: 60px"
+              size="mini"
+              >删除</el-button
+            >
+          </el-popconfirm>
+        </el-table-column> -->
+      </el-table>
+
+      <el-button
+        type="success"
+        icon="el-icon-plus"
+        @click="addDetails"
+        size="mini"
+        >Add</el-button
+      >
+      <el-row></el-row>
+      <el-row>
+        <div class="grid-content bg-purple-light">
+          <span class="text item">
+            {{ "Trade information" }}
+          </span>
+        </div>
+      </el-row>
+
+      <el-form-item label="Service Fee" label-width="100px">
+        <el-radio-group v-model="form.serviceFeeSwitch">
+          <el-radio :label="false">Close</el-radio>
+          <el-radio :label="true">open</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label-width="100px">
+        <el-input
+          v-model="form.serviceFee"
+          placeholder="Please enter serviceFee"
+          clearable
+          size="small"
+        />
+      </el-form-item>
+      <el-form-item label="Freight Terms">
+        <el-select
+          v-model="form.freightTerms"
+          placeholder="请选择交易条款"
+          size="small"
+          clearable
+        >
+          <el-option
+            v-for="dict in dict.type.freight_terms"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="Payment Terms" label-width="120px">
+        <el-input
+          v-model="form.deposit"
+          size="mini"
+          clearable
+          style="width: 200px"
+        >
+          <template slot="prepend">Deposit</template>
+          <template slot="append">%</template>
+        </el-input>
+        <el-input
+          v-model="form.depositDays"
+          size="mini"
+          clearable
+          style="width: 240px"
+        >
+          <template slot="append">Days after the contract</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+          v-model="form.balance"
+          placeholder="Please enter balance"
+          size="mini"
+          clearable
+          style="width: 40%"
+        >
+          <template slot="append">% balance</template>
+        </el-input>
+        <el-input
+          style="width: 30%"
+          v-model="form.balancePaymentType"
+          size="mini"
+          clearable
+        >
+          <template slot="append">paid</template>
+        </el-input>
+        <el-input
+          style="width: 30%"
+          v-model="form.balanceDays"
+          size="mini"
+          clearable
+        >
+          <template slot="append">Days</template>
+        </el-input>
+
+        <el-radio-group v-model="form.balancePaymentForm">
+          <el-radio :label="'Before arrive'">Before arrive</el-radio>
+          <el-radio :label="'After arrival'">After arrival</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="Loading Country/Region">
+        <el-select
+          v-model="form.loadingCountry"
+          filterable
+          placeholder="Please select loadingCountry"
+        >
+          <el-option
+            v-for="item in countryDictList"
+            :key="item.dictDataId"
+            :label="item.dictValue"
+            :value="item.dictValue"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="Origin Country/Region">
+        <el-select
+          v-model="form.originCountry"
+          filterable
+          placeholder="Please select originCountry"
+        >
+          <el-option
+            v-for="item in countryDictList"
+            :key="item.dictDataId"
+            :label="item.dictValue"
+            :value="item.dictValue"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="Destination">
+        <el-select
+          v-model="form.destination"
+          filterable
+          placeholder="Please select destination"
+        >
+          <el-option
+            v-for="item in portDictList"
+            :key="item.dictDataId"
+            :label="item.dictValue"
+            :value="item.dictValue"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="Number of Containers"> </el-form-item>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="20'">
+            <el-input-number
+              v-model="form.numberOfContainersForTwenty"
+              :min="0"
+            >
+            </el-input-number>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="40'">
+            <el-input-number v-model="form.numberOfContainersForForty" :min="0">
+            </el-input-number>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="8">
+          <el-form-item label="20'/40'" label-width="60px">
+            <el-input-number
+              v-model="form.numberOfContainersForTwentyOrForty"
+              :min="0"
+            >
+            </el-input-number>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="More or less<" label-width="110px">
+            <el-input v-model="form.toleranceFloat">
+              <template slot="append">x100%</template>
+            </el-input>
+          </el-form-item></el-col
+        >
+        <el-col :span="12">
+          <el-form-item label="Weight Tolerance" label-width="130px">
+            <el-input v-model="form.weightTolerance">
+              <template slot="append">%</template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item label="Latest shipment" label-width="120px">
+        <el-input v-model="form.latestShipment">
+          <template slot="prepend">within</template>
+          <template slot="append">Days of the contract signed date</template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="Price Fixing Option">
+        <el-radio-group v-model="form.livePriceSwitch">
+          <el-radio :label="false">Close</el-radio>
+          <el-radio :label="true">open</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-row :gutter="5">
+        <el-col :span="6">
+          <el-form-item>
+            <el-input v-model="form.livePriceDays">
+              <template slot="append">Days</template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-radio-group v-model="form.livePriceForm">
+            <el-radio :label="'before'">Before arrive</el-radio>
+            <el-radio :label="'after'">After arrival</el-radio>
+          </el-radio-group>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="By" label-width="30px">
+            <el-radio-group v-model="form.livePriceUsertype">
+              <el-radio :label="'Buyer'">Buyer</el-radio>
+              <el-radio :label="'Seller'">Seller</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item label="Required documents">
+        <el-tag
+          :key="tag"
+          v-for="tag in dynamicTags"
+          closable
+          :disable-transitions="false"
+          @close="handleClose(tag)"
+          size="mini"
+        >
+          {{ tag }}
+        </el-tag>
+        <el-input
+          class="input-new-tag"
+          v-if="inputVisible"
+          v-model="inputValue"
+          ref="saveTagInput"
+          @keyup.enter.native="handleInputConfirm"
+          @blur="handleInputConfirm"
+        >
+        </el-input>
+        <el-button v-else class="button-new-tag" @click="showInput">
+          + New Tag
+        </el-button>
+      </el-form-item>
+      <el-form-item label="Quality certificate">
+        <el-radio-group v-model="form.qualityCertificateSwitch">
+          <el-radio :label="false">Close</el-radio>
+          <el-radio :label="true">open</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+          autosize
+          type="textarea"
+          placeholder="请输入内容"
+          v-model="form.qualityCertificate"
+        >
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="Claim ">
+        <el-radio-group v-model="form.claimSwitch">
+          <el-radio :label="false">Close</el-radio>
+          <el-radio :label="true">open</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+          type="textarea"
+          autosize
+          placeholder="请输入内容"
+          v-model="form.claim"
+        >
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="Arbitration ">
+        <el-radio-group v-model="form.arbitrationSwitch">
+          <el-radio :label="false">Close</el-radio>
+          <el-radio :label="true">open</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-row>
+        <el-col :span="15">
+          <el-form-item>
+            <el-input
+              type="textarea"
+              :autosize="{ minRows: 3, maxRows: 5 }"
+              placeholder="请输入内容"
+              v-model="form.arbitration"
+            >
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="Memo ">
+        <el-radio-group v-model="form.memoSwitch">
+          <el-radio :label="false">Close</el-radio>
+          <el-radio :label="true">open</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+          type="textarea"
+          autosize
+          placeholder="请输入内容"
+          v-model="form.memo"
+        >
+        </el-input>
+      </el-form-item>
+      <el-button type="text" @click="addCustomClause">新增条款</el-button>
+      <el-button type="text" @click="deleteCustomClause">删除条款</el-button>
+      <el-form-item v-for="(item, index) in customClause" :key="index">
+        <el-input
+          style="width: 25%"
+          v-model="item.title"
+          placeholder="请输入标题"
+        ></el-input>
+        <el-input
+          style="width: 75%"
+          v-model="item.content"
+          placeholder="请输入内容"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div style="text-align: center">
+      <el-button type="primary" @click="submitForm">保 存</el-button>
+      <el-button type="success" @click="updateAndDownload">下 载</el-button>
+      <el-button
+        type="primary"
+        :disabled="isButtonDisabled"
+        @click="sendDrafContractEmail"
+        >完成并发送草稿合同</el-button
+      >
+      <el-button @click="returnTracing">返回</el-button>
+    </div>
+
+    <company-list ref="companyList" @confirmCompany="confirmCompany" />
+
+    <contract-company-list
+      ref="contractCompanyList"
+      @confirmCompany="confirmCompany"
+    ></contract-company-list>
+
+    <send-draf-email ref="sendDrafEmail"></send-draf-email>
+
+    <dispute-record ref="disputeRecord"></dispute-record>
+  </div>
+</template>
+
+<script>
+import {
+  getBizContract,
+  updateBizContract,
+  getBizContractByNo,
+} from "../../../api/biz/bizContract";
+import CompanyList from "../bizContract/companyList.vue";
+import { updateCompanyInfo } from "../../../api/biz/companyInfo";
+import { portDictList, listDictData } from "../../../api/biz/dictData";
+import ContractCompanyList from "../bizContract/contractCompanyList";
+import { listBizContractDispute } from "../../../api/biz/bizContractDispute";
+import { sendDrafEmail } from "../../../api/biz/bizContract";
+
+import SendDrafEmail from "./sendDrafEmail.vue";
+import DisputeRecord from "./disputeRecord.vue";
+
+export default {
+  name: "ContractByNo",
+  dicts: ["freight_terms", "cmx_month"],
+  components: {
+    CompanyList,
+    ContractCompanyList,
+    SendDrafEmail,
+    DisputeRecord,
+  },
+  props: {
+    contractNo: {
+      type: String,
+      default: "",
+    },
+    //港口数据列表
+    portDictList: {
+      type: Array,
+      default: [],
+    },
+    //国家数据李北奥
+    countryDictList: {
+      type: Array,
+      default: [],
+    },
+  },
+  watch: {
+    contractNo: {
+      handler(val) {
+        if (val) {
+          this.getBizContractByNo(val);
+        }
+      },
+    },
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 表单参数
+      form: {
+        sellerCompanyInfo: {
+          companyEnglishName: null,
+          address: null,
+        },
+        buyerCompanyInfo: {
+          companyEnglishName: null,
+          address: null,
+        },
+        buyContractCompanyId: null,
+        buyContractCompany: { companyEnglishName: null, address: null },
+        supplierContractCompanyId: null,
+        supplierContractCompany: {
+          companyEnglishName: null,
+          address: null,
+        },
+        contractDetailList: [],
+      },
+      dynamicTags: [],
+      inputVisible: false,
+      inputValue: "",
+      //是否保存卖家地址
+      saveSellerCompanyAddress: false,
+      //是否保存买家地址
+      saveBuyerCompanyAddress: false,
+      //买家地址
+      buyerCompanyAddress: null,
+      //卖家地址
+      sellerCompanyAddress: null,
+      //
+      isButtonDisabled: false,
+      //自定义条款
+      customClause: [],
+    };
+  },
+  created() {
+    if (this.contractNo) {
+      this.getBizContractByNo(this.contractNo);
+    }
+  },
+  methods: {
+    addCustomClause() {
+      this.customClause.push({
+        title: "",
+        content: "",
+      });
+    },
+    deleteCustomClause() {
+      this.customClause.pop();
+    },
+    //合同争议记录
+    handleDisputeRecord() {
+      this.$refs.disputeRecord.handleShow(this.form.contractId);
+    },
+    //返回合同追踪
+    returnTracing() {
+      this.$router.push({
+        name: "ContractTracing",
+        params: { askId: this.form.askId },
+      });
+    },
+    //完成并发送草稿合同邮箱
+    sendDrafContractEmail() {
+      //合同未找到邮箱
+      if (this.form.contractType == "sale") {
+        this.findEmailTip(this.form.buyContractCompany);
+      } else {
+        this.findEmailTip(this.form.supplierContractCompany);
+      }
+
+      if (this.form.contractId) {
+        listBizContractDispute({
+          contractId: this.form.contractId,
+          disputeType: "normal",
+          disputeState: false,
+        }).then((res) => {
+          const list = res.rows;
+          if (list.length > 0) {
+            this.$refs.sendDrafEmail.handleSend(list, this.form);
+          } else {
+            if (this.form.contractType == "sale") {
+              const contractCompany = this.form.buyContractCompany;
+              if (contractCompany && contractCompany.email) {
+                sendDrafEmail(this.form).then((response) => {
+                  this.$modal.msgSuccess("发送成功");
+                  this.getBizContractByNo(this.form.contractNo);
+                });
+              }
+            } else {
+              const contractCompany = this.form.supplierContractCompany;
+              if (contractCompany && contractCompany.email) {
+                sendDrafEmail(this.form).then((response) => {
+                  this.$modal.msgSuccess("发送成功");
+                  this.getBizContractByNo(this.form.contractNo);
+                });
+              }
+            }
+          }
+        });
+      }
+      // 设置按钮为禁用状态
+      this.isButtonDisabled = true;
+      // 1秒后恢复按钮可用状态
+      setTimeout(() => {
+        this.isButtonDisabled = false;
+      }, 1000);
+    },
+    findEmailTip(contractCompany) {
+      if (!(contractCompany && contractCompany.email)) {
+        this.$confirm("发送失败，请先补充合同公司的邮箱后再点击发送", "提示", {
+          confirmButtonText: "补充邮箱",
+          cancelButtonText: "取消发送",
+          type: "warning",
+        })
+          .then(() => {
+            this.$router.push({
+              path: "/infomenu/companyInfo/edit/" + contractCompany.companyId,
+            });
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "取消发送",
+            });
+          });
+      }
+    },
+    //选择公司
+    handleUserCompany(companyId, type) {
+      this.$refs.contractCompanyList.handleShow(companyId, type);
+    },
+    //
+    addDetails() {
+      const detail = {
+        contractId: this.form.contractId,
+        askId: this.form.askId,
+        askName: "",
+        weight: "",
+        cmxMonth: "",
+        serviceFee: "",
+        quotePrice: "",
+        sllerPrice: "",
+      };
+      this.form.contractDetailList.push(detail);
+    },
+    //获取国家数据列表
+    getCountryDictList() {
+      const dictData = {
+        dictType: "Country",
+        pageNum: 1,
+        pageSize: 999,
+        orderByColumn: "dictValue",
+        isAsc: "asc",
+      };
+      listDictData(dictData).then((response) => {
+        this.countryDictList = response.rows;
+      });
+    },
+    //获取港口数据列表
+    getPortDictList() {
+      portDictList().then((response) => {
+        this.portDictList = response.rows;
+      });
+    },
+    //买家公司保存地址
+    handleBuyerCompanychange(buyerCompanyInfo, val) {
+      if (
+        val &&
+        this.form.buyerCompanyInfo.address !== this.buyerCompanyAddress
+      ) {
+        this.$modal
+          .confirm("该名下已有地址，是否更新覆盖")
+          .then(function () {
+            return updateCompanyInfo(buyerCompanyInfo);
+          })
+          .then(() => {
+            this.$modal.msgSuccess("覆盖成功");
+          })
+          .catch(() => {});
+      }
+    },
+    //卖家公司保存地址
+    handleSellerCompanychange(sellerCompanyInfo, val) {
+      if (
+        val &&
+        this.form.sellerCompanyInfo.address !== this.sellerCompanyAddress
+      ) {
+        this.$modal
+          .confirm("该名下已有地址，是否更新覆盖")
+          .then(function () {
+            return updateCompanyInfo(sellerCompanyInfo);
+          })
+          .then(() => {
+            this.$modal.msgSuccess("覆盖成功");
+          })
+          .catch(() => {});
+      }
+    },
+    //确认公司
+    confirmCompany(companyList, type) {
+      var company = companyList[0];
+      company.email =
+        company.email && company.email.length > 0 ? company.email[0] : "";
+      company.phoneNumber =
+        company.phoneNumber && company.phoneNumber.length > 0
+          ? company.phoneNumber[0]
+          : "";
+      if (type == "seller") {
+        this.$set(this.form, "supplierContractCompany", company);
+        this.form.supplierContractCompanyId = company.contractCompanyId;
+        this.form.supplierCompanyId = company.companyId;
+      } else if (type == "buyer") {
+        this.$set(this.form, "buyContractCompany", company);
+        this.form.buyContractCompanyId = company.contractCompanyId;
+        this.form.buyCompanyId = company.companyId;
+      }
+    },
+    //选择卖家公司弹框
+    handleAllCompany(type) {
+      this.$refs.companyList.handleShow(type);
+    },
+    handleClose(tag) {
+      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+    },
+
+    showInput() {
+      this.inputVisible = true;
+      this.$nextTick((_) => {
+        this.$refs.saveTagInput.$refs.input.focus();
+      });
+    },
+
+    handleInputConfirm() {
+      let inputValue = this.inputValue;
+      if (inputValue) {
+        this.dynamicTags.push(inputValue);
+      }
+      this.inputVisible = false;
+      this.inputValue = "";
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        contractId: null,
+        contractNo: null,
+        askId: null,
+        buyId: null,
+        supplierId: null,
+        buyCompanyId: null,
+        supplierCompanyId: null,
+        serviceFee: null,
+        serviceFeeSwitch: null,
+        freightTerms: null,
+        deposit: null,
+        depositDays: null,
+        balance: null,
+        balanceDays: null,
+        balancePaymentForm: null,
+        balancePaymentForm: null,
+        loadingCountry: null,
+        originCountry: null,
+        destination: null,
+        numberOfContainersForTwenty: null,
+        numberOfContainersForForty: null,
+        numberOfContainersForTwentyOrForty: null,
+        toleranceFloat: null,
+        weightTolerance: null,
+        latestShipment: null,
+        livePriceSwitch: null,
+        livePriceDays: null,
+        livePriceForm: null,
+        livePriceUsertype: null,
+        qualityCertificate: null,
+        qualityCertificateSwitch: null,
+        claim: null,
+        claimSwitch: null,
+        arbitration: null,
+        arbitrationSwitch: null,
+        memo: null,
+        memoSwitch: null,
+        contractStatus: "0",
+        createTime: null,
+        updateTime: null,
+        completionTime: null,
+        requiredDocuments: null,
+        supplierAccountId: null,
+        supplierCompanyId: null,
+        sellerCompanyInfo: {
+          companyEnglishName: null,
+          address: null,
+        },
+        buyerAccountId: null,
+        buyCompanyId: null,
+        buyerCompanyInfo: {
+          companyEnglishName: null,
+          address: null,
+        },
+        buyContractCompanyId: null,
+        buyContractCompany: { companyEnglishName: null, address: null },
+        supplierContractCompanyId: null,
+        supplierContractCompany: {
+          companyEnglishName: null,
+          address: null,
+        },
+        contractDetailList: [],
+      };
+      this.resetForm("form");
+    },
+    getBizContractByNo(contractNo) {
+      this.reset();
+      getBizContractByNo(contractNo).then((response) => {
+        this.form = response.data;
+        this.dynamicTags =
+          this.form.requiredDocuments && this.form.requiredDocuments != "null"
+            ? JSON.parse(this.form.requiredDocuments)
+            : [];
+        this.customClause = this.form.customClause
+          ? JSON.parse(this.form.customClause)
+          : [];
+        if (!this.form.contractDetailList) {
+          this.form.contractDetailList = [];
+        }
+        if (!this.form.supplierContractCompany) {
+          this.form.supplierContractCompany = {
+            companyEnglishName: "",
+            address: "",
+          };
+        }
+        if (!this.form.buyContractCompany) {
+          this.form.buyContractCompany = {
+            companyEnglishName: "",
+            address: "",
+          };
+        }
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.contractId != null) {
+            this.form.requiredDocuments = JSON.stringify(this.dynamicTags);
+            this.form.customClause = JSON.stringify(this.customClause);
+            updateBizContract(this.form).then((response) => {
+              this.$modal.msgSuccess("保存成功");
+              // this.$router.push({
+              //   name: "Contract",
+              //   params: { askId: this.form.askId },
+              // });
+            });
+          }
+        }
+      });
+    },
+    /** 下载合同 */
+    handleDownLoadContract(row) {
+      if (row.contractType == "sale") {
+        this.download(
+          "biz/contract/exportTemplate",
+          {
+            contractId: row.contractId,
+            templateType: "EXCEL",
+          },
+          `${
+            row.contractNo + "-" + row.buyContractCompany.companyEnglishName
+          }.xlsx`
+        );
+      } else {
+        this.download(
+          "biz/contract/exportTemplate",
+          {
+            contractId: row.contractId,
+            templateType: "EXCEL",
+          },
+          `${
+            row.contractNo +
+            "-" +
+            row.supplierContractCompany.companyEnglishName
+          }.xlsx`
+        );
+      }
+    },
+    updateAndDownload() {
+      this.submitForm();
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          this.handleDownLoadContract(this.form);
+        }, 2000);
+      });
+    },
+    deleteTableRow(value) {
+      console.log(this.form.contractDetailList);
+      console.log(value);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.text {
+  font-size: 16px;
+  font-weight: 700;
+  height: 35px;
+  line-height: 35px;
+}
+.item {
+  margin-bottom: 18px;
+}
+.text1 {
+  font-size: 15px;
+  text-align: center;
+  height: 35px;
+  line-height: 39px;
+}
+.bg-purple-dark {
+  background: #99a9bf;
+}
+.bg-purple {
+  background: #d3dce6;
+}
+.bg-purple-light {
+  background: #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.el-row {
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.el-col {
+  border-radius: 4px;
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+.button-new-tag {
+  margin-left: 10px;
+  height: 32px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.input-new-tag {
+  width: 90px;
+  margin-left: 10px;
+  vertical-align: bottom;
+}
+</style>