Smart_platform_ui/src/views/oceanShipping/maritimeExport/detailsPage.vue

<template>
  <div>
    <div class="customer-head">
      <div class="customer-back">
        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                   @click="backToList(0)">返回列表
        </el-button>
      </div>
      <div class="add-customer-btn">
        <el-button class="el-button--small-yh" style="margin-right: 10px" type="primary" size="small" v-if="!editButton"
                   @click="confirmEditing">编辑
        </el-button>
        <el-dropdown style="margin-right: 10px">
          <el-button type="primary" size="small">
            审核处理<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="pleaseCheck(1)" :disabled="form.status>0">请核数据</el-dropdown-item>
            <el-dropdown-item @click.native="checkScheduleDialog = true,checkId = form.id">审核进度</el-dropdown-item>
            <el-dropdown-item @click.native="repealCancel" :disabled="form.status === 0 || !form.status"
                              v-if="!detailData.id">撤销请核
            </el-dropdown-item>
            <el-dropdown-item @click.native="checkDialog = true,checkData = detailData.check;" v-if="detailData.id">审批
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button class="el-button--small-yh" type="primary" size="small"
                   @click="editCustomer">
          保存数据
        </el-button>
      </div>
    </div>
    <trade-card title="基础资料" style="margin-top: 50px">
      <avue-form :option="optionForm" v-model="form" ref="form">
        <template slot="affiliatedCompanyId" slot-scope="scope">
          <crop-select v-model="form.affiliatedCompanyId" corpType="GS" :disabled="scope.disabled"
                       @getCorpData="(val)=>{form.affiliatedCompanyName = val.cname || ''}"></crop-select>
        </template>
        <template slot="corpId" slot-scope="scope">
          <crop-select v-model="form.corpId" corpType="KH" :disabled="scope.disabled"
                       @getCorpData="(val)=>{form.corpName = val.cname || ''}"></crop-select>
        </template>
        <template slot="shippingCompanyId" slot-scope="scope">
          <crop-select v-model="form.shippingCompanyId" corpType="GS" :disabled="scope.disabled"
                       @getCorpData="(val)=>{form.shippingCompanyName = val.cname || ''}"></crop-select>
        </template>
      </avue-form>
    </trade-card>
    <trade-card title="提单信息">
      <avue-form :option="optionFormTwo" v-model="shippingBillDetails" ref="formTwo">
        <template slot="branchPayPlaceId" slot-scope="scope">
          <e-crop-select
              v-model="shippingBillDetails.branchPayPlaceId"
              corp-type="DD-ID"
              :disabled="scope.disabled"
              :name.sync="shippingBillDetails.branchPayPlaceId"
              @getCropId="(val)=>{shippingBillDetails.branchPayPlaceName = val.name}"
          />
        </template>
        <template slot="mainPayPlaceId" slot-scope="scope">
          <e-crop-select
              v-model="shippingBillDetails.mainPayPlaceId"
              corp-type="DD-ID"
              :disabled="scope.disabled"
              :name.sync="shippingBillDetails.mainPayPlaceId"
              @getCropId="(val)=>{shippingBillDetails.mainPayPlaceName = val.name}"
          />
        </template>
      </avue-form>
    </trade-card>
    <trade-card title="箱型箱量">
      <avue-crud :option="optionBox" v-model="formBox" ref="formBox" :data="shippingBoxTypeList" @row-save="rowSave"
                 @row-update="rowUpdate"
                 @resetColumn="resetColumnTwo('formBox','optionBox','optionBoxBack',254.1)"
                 @saveColumn="saveColumnTwo('formBox','optionBox','optionBoxBack',254.1)">>
        <template slot-scope="{type,size,row,index,disabled}" slot="menu">
          <el-button icon="el-icon-edit" :size="size" :disabled="disabled" :type="type"
                     @click="$refs.formBox.rowEdit(row,index)">编辑
          </el-button>
          <el-button icon="el-icon-delete" :size="size" :disabled="disabled" :type="type"
                     @click="rowDelBox(row,index)">删除
          </el-button>
        </template>
      </avue-crud>
    </trade-card>
    <trade-card title="地点信息">
      <avue-form :option="optionFormAdd" v-model="form" ref="formAdd">
        <template slot="deliverGoodsAddressName" slot-scope="scope">
          <port-info :disabled="scope.disabled" v-model="form.deliverGoodsAddressId" type="id"
                     @balabalaTow="(val)=>{form.deliverGoodsAddressName = val.name || ''}"/>
        </template>
        <template slot="loadingPortName" slot-scope="scope">
          <port-info :disabled="scope.disabled" v-model="form.loadingPortId" type="id"
                     @balabalaTow="(val)=>{form.loadingPortName = val.name || ''}"/>
        </template>
        <template slot="dischargeCargoHarborName" slot-scope="scope">
          <port-info :disabled="scope.disabled" v-model="form.dischargeCargoHarborId" type="id"
                     @balabalaTow="(val)=>{form.dischargeCargoHarborName = val.name || ''}"/>
        </template>
        <template slot="destinationName" slot-scope="scope">
          <port-info :disabled="scope.disabled" v-model="form.destinationId" type="id"
                     @balabalaTow="(val)=>{form.destinationName = val.name || ''}"/>
        </template>
        <template slot="deliveryAddressName" slot-scope="scope">
          <port-info :disabled="scope.disabled" v-model="form.deliveryAddressId" type="id"
                     @balabalaTow="(val)=>{form.deliveryAddressName = val.name || ''}"/>
        </template>
      </avue-form>
    </trade-card>
    <trade-card title="配箱信息">
      <avue-crud :option="optionBoxTwo" v-model="formBoxTwo" ref="formBoxTwo" :data="shippingMatchBoxList"
                 @row-save="rowSaveTwo" @row-update="rowUpdateTwo"
                 @resetColumn="resetColumnTwo('formBoxTwo','optionBoxTwo','optionBoxTwoBack',254.2)"
                 @saveColumn="saveColumnTwo('formBoxTwo','optionBoxTwo','optionBoxTwoBack',254.2)">
        <template slot-scope="{type,size,row,index,disabled}" slot="menu">
          <el-button icon="el-icon-edit" :size="size" :disabled="disabled" :type="type"
                     @click="$refs.formBoxTwo.rowEdit(row,index)">编辑
          </el-button>
          <el-button icon="el-icon-delete" :size="size" :disabled="disabled" :type="type"
                     @click="rowDelBoxTwo(row,index)">删除
          </el-button>
        </template>
      </avue-crud>
    </trade-card>
    <trade-card title="服务项目">
      <avue-form :option="optionFormThree" v-model="form" ref="formThree"></avue-form>
    </trade-card>
    <trade-card title="发货信息">
      <avue-form :option="optionFormFour" v-model="form" ref="formFour">
        <template slot="consignorId" slot-scope="{disabled}">
          <crop-select v-model="form.consignorId" corpType="KH" :disabled="disabled"
                       @getCorpData="(val)=>{form.consignorName = val.cname || '';form.consignorDetails = val.details}"></crop-select>
        </template>
        <template slot="consigneeId" slot-scope="{disabled}">
          <crop-select v-model="form.consigneeId" corpType="KH" :disabled="disabled"
                       @getCorpData="(val)=>{form.consigneeName = val.cname || '';form.consigneeDetails = val.details}"></crop-select>
        </template>
        <template slot="notifierId" slot-scope="{disabled}">
          <crop-select v-model="form.notifierId" corpType="KH" :disabled="disabled"
                       @getCorpData="(val)=>{form.notifierName = val.cname || '';form.notifierDetails = val.details}"></crop-select>
        </template>
      </avue-form>
    </trade-card>
    <!--    费用信息组件-->
    <sea-cost v-model="shippingFeesList" :id="form.id" :codeValue="254.3" type="CK" activeName="first" ref="boxCost"
              url="/api/blade-box-tube/shippingfees/remove" @generateBill="refresh(form.id)"></sea-cost>
    <trade-card title="附件管理">
      <c-upload
          basic
          :data="shippingFileList"
          :disabled="disabled"
          deleteUrl="/api/blade-box-tube/shippingfile/remove"
          :enumerationValue="254.4"
          display
      />
    </trade-card>
    <el-dialog
        append-to-body
        title="审批进度"
        class="el-dialogDeep"
        :visible.sync="checkScheduleDialog"
        width="40%"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        :close-on-press-escape="false"
        v-dialog-drag
    >
      <check-schedule
          :checkId="checkId"
          :batchNo="batchNo"
          @choceScheduleFun="choceScheduleFun"
      ></check-schedule>
    </el-dialog>
    <el-dialog append-to-body title="审批" class="el-dialogDeep" :visible.sync="checkDialog" width="50%"
               :close-on-click-modal="false" :destroy-on-close="true" :close-on-press-escape="false" v-dialog-drag>
      <check :checkData="checkData" :checkDetail="false" :idList="[]" @choceCheckFun="choceCheckFun">
      </check>
    </el-dialog>
  </div>
</template>

<script>
import {
  tradingBox,
  tradingBoxItem,
  detail,
  submit,
  pleaseCheck,
  repealCancel
} from "@/api/oceanShipping/maritimeExport/index.js";
import checkSchedule from "@/components/check/checkSchedule.vue";
import check from "@/components/check/check.vue";

export default {
  name: "detailsPage",
  props: {
    onLoad: Object,
    detailData: Object
  },
  components: {
    checkSchedule, check
  },
  data() {
    return {
      editButton: false,
      checkId: '',
      batchNo: '',
      checkData: {},
      checkScheduleDialog: false,
      checkDialog: false,
      shippingFeesList: [],
      shippingFileList: [],
      disabled: false,
      form: {},
      shippingBillDetails: {},
      optionForm: {
        menuBtn: false,
        span: 6,
        column: [{
          label: '系统号',
          prop: 'sysNo',
          disabled: true
        }, {
          label: '部门',
          prop: 'deptId',
          type: 'tree',
          props: {
            label: 'title',
            value: 'value'
          },
          dicUrl: '/api/blade-system/dept/tree',
          rules: [{
            required: true,
            message: "请选择部门",
            trigger: "blur"
          }],
        }, {
          label: '单据类型',
          prop: 'documentType'
        }, {
          label: '业务类型',
          prop: 'businessType',
          overHidden: true,
          filterable: true,
          type: 'select',
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_business_type",
          props: {
            label: "dictValue",
            value: "dictKey"
          }
        }, {
          label: '所属公司',
          prop: 'affiliatedCompanyId'
        }, {
          label: '客户',
          prop: 'corpId'
        }, {
          label: '客户联系人',
          prop: 'contacts'
        }, {
          label: '客户电话',
          prop: 'telephone'
        }, {
          label: '业务来源',
          prop: 'businessSource',
          overHidden: true,
          filterable: true,
          type: 'select',
          cascader: ['sourceId'],
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_business_source",
          props: {
            label: "dictValue",
            value: "dictKey"
          }
        }, {
          label: '来源',
          prop: 'sourceId',
          overHidden: true,
          filterable: true,
          type: 'select',
          dicUrl: "/api/blade-client/corpsdesc/oceanCorpsList?corpsTypeName={{key}}",
          props: {
            label: "cname",
            value: "id"
          }
        }, {
          label: '船公司',
          prop: 'shippingCompanyId'
        }, {
          label: '订舱代理',
          prop: 'bookingAgentId',
          filterable: true,
          type: 'select',
          dicUrl: "/api/blade-client/corpsdesc/oceanCorpsList?corpsTypeName=订舱代理",
          props: {
            label: "cname",
            value: "id"
          }
        }, {
          label: '场站',
          prop: 'station'
        }, {
          label: '场站联系人',
          prop: 'stationContacts'
        }, {
          label: '场站电话',
          prop: 'stationTelephone'
        }, {
          label: '航线',
          prop: 'route',
          type: "select",
          slot: true,
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_route",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          overHidden: true
        }, {
          label: '备注',
          prop: 'remarks',
          type: 'textarea',
          span: 24,
          minRows: 2,
        }]
      },
      optionFormTwo: {
        menuBtn: false,
        span: 6,
        column: [{
          label: '主提单号',
          prop: 'mainBillNo'
        }, {
          label: '主单条款',
          prop: 'mainClause',
          overHidden: true,
          filterable: true,
          type: 'select',
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_main_clause",
          props: {
            label: "dictValue",
            value: "dictKey"
          }
        }, {
          label: '主单付费地点',
          prop: 'mainPayPlaceId'
        }, {
          label: '分提单号',
          prop: 'branchBillNo'
        }, {
          label: '分单条款',
          prop: 'branchClause',
          overHidden: true,
          filterable: true,
          type: 'select',
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_branch_clause",
          props: {
            label: "dictValue",
            value: "dictKey"
          }
        }, {
          label: '分单付费地点',
          prop: 'branchPayPlaceId'
        }, {
          label: '装运方式',
          prop: 'shipmentMode',
          overHidden: true,
          filterable: true,
          type: 'select',
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_shipment_mode",
          props: {
            label: "dictValue",
            value: "dictKey"
          }
        }, {
          label: '签单方式',
          prop: 'signingMethod',
          overHidden: true,
          filterable: true,
          type: 'select',
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_signing_method",
          props: {
            label: "dictValue",
            value: "dictKey"
          }
        }, {
          label: '提单份数',
          prop: 'billCopies'
        }, {
          label: '操作员',
          prop: 'operatorId',
          filterable: true,
          remote: true,
          type: "select",
          dicUrl: "/api/blade-user/page?size=20&current=1&account={{key}}",
          props: {
            label: "account",
            value: "id",
            res: 'data.records'
          },
          change: (data) => {
            if (data.value) {
              for (let item of this.$refs.formTwo.DIC.operatorId || []) {
                if (data.value === item.id) {
                  this.shippingBillDetails.accountingDeptId = item.deptId
                }
              }
            }
          }
        }, {
          label: '核算部门',
          prop: 'accountingDeptId',
          type: "tree",
          multiple: true,
          tags: true,
          dicUrl: "/api/blade-system/dept/tree?tenantId=" + JSON.parse(localStorage.getItem("saber-userInfo")).content.tenant_id,
          props: {
            label: "title"
          },
          checkStrictly: true,
        }, {
          label: '合同号',
          prop: 'contractNo'
        }, {
          label: '提单状态',
          prop: 'billStatus',
          type: "select",
          slot: true,
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_bill_status",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          overHidden: true
        }, {
          label: '船名',
          prop: 'shipId',
          type: "select",
          cascader: ['voyageNumberId'],
          dicUrl: "/api/blade-box-tube/shippingvessel/listAll",
          props: {
            label: "name",
            value: "id",
          }
        }, {
          label: '航次',
          prop: 'voyageNumberId',
          type: "select",
          dicUrl: "/api/blade-box-tube/shippingvessel/listAllByVoyage?pid={{key}}",
          props: {
            label: "no",
            value: "id",
          },
          change: (data) => {
            if (data.value) {
              for (let item of this.$refs.formTwo.DIC.voyageNumberId || []) {
                if (data.value === item.id) {
                  this.form.route = item.lane
                  this.shippingBillDetails.sailDate = item.estimateSailDate
                  this.shippingBillDetails.actualSailDate = item.sailDate
                  this.shippingBillDetails.deadline = item.ducomentrayoffDate
                  this.shippingBillDetails.closingDate = item.cutoffDate
                }
              }
            }
          }
        }, {
          label: '开船日期',
          prop: 'sailDate',
          type: "date",
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        }, {
          label: '实际开船',
          prop: 'actualSailDate',
          type: "date",
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        }, {
          label: '截单日期',
          prop: 'deadline',
          type: "date",
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        }, {
          label: '截港日期',
          prop: 'closingDate',
          type: "date",
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        }, {
          label: '订舱日期',
          prop: 'bookingDate',
          type: "date",
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        }, {
          label: '账期截止',
          prop: 'accountingPeriodEndDate',
          type: "date",
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        }, {
          label: '服务条款',
          prop: 'serviceClause',
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_service_clause",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          overHidden: true
        }, {
          label: '贸易条款',
          prop: 'tradeTerms',
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_trade_terms",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          overHidden: true
        }, {
          label: '件数',
          prop: 'number'
        }, {
          label: '包装',
          prop: 'packing',
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_packing",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          overHidden: true
        }, {
          label: '包装描述',
          prop: 'packingDescribe'
        }, {
          label: '重量',
          prop: 'weight'
        }, {
          label: '尺码',
          prop: 'size'
        }, {
          label: '货物类型',
          prop: 'goodsType',
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_goods_type",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          overHidden: true
        }, {
          label: '货物',
          prop: 'goodsId',
          type: "select",
          dicUrl: "/api/blade-client/goodsdesc/descListAll",
          props: {
            label: "cname",
            value: "id"
          },
          change: (data) => {
            if (data.value) {
              for (let item of this.$refs.formTwo.DIC.goodsId || []) {
                if (data.value === item.id) {
                  this.shippingBillDetails.goodsDetails = item.nameDescription
                  this.shippingBillDetails.hsCode = item.hsCode
                }
              }
            }
          },
          overHidden: true
        }, {
          label: 'HS代码',
          prop: 'hsCode'
        }, {
          label: '货物详情',
          prop: 'goodsDetails',
          type: 'textarea',
          span: 12,
          minRows: 2,
        }, {
          label: '唛头',
          prop: 'remarks',
          type: 'textarea',
          span: 12,
          minRows: 2,
        }]
      },
      formBox: {},
      shippingBoxTypeList: [],
      optionBox: {},
      optionBoxBack: {
        align: 'center',
        index: true,
        addBtnText: "录入明细",
        refreshBtn: false,
        dialogDrag: true,
        addBtn: true,
        span: 8,
        height: 600,
        selection: true,
        addRowBtn: false,
        cellBtn: false,
        editBtn: false,
        delBtn: false,
        menuWidth: 140,
        dialogTop: 25,
        dialogWidth: "80%",
        showSummary: true,
        sumColumnList: [{
          name: 'emptyWeight',
          type: 'sum',
          decimals: 2
        }],
        column: [{
          label: '箱型',
          prop: 'boxType',
          width: 100,
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_box_ype",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          overHidden: true
        }, {
          label: '箱量',
          prop: 'boxQuantity',
          width: 100,
          overHidden: true
        }, {
          label: 'SOC箱',
          prop: 'socBox',
          width: 100,
          overHidden: true
        }, {
          label: '温度',
          prop: 'temperature',
          width: 100,
          overHidden: true
        }, {
          label: '温度单位',
          prop: 'temperatureUnit',
          width: 100,
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_temperature_unit",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          overHidden: true
        }, {
          label: '通风量',
          prop: 'ventilationCapacity',
          width: 100,
          overHidden: true
        }, {
          label: '湿度',
          prop: 'humidity',
          width: 100,
          overHidden: true
        }, {
          label: '备注',
          prop: 'remarks',
          overHidden: true
        }]
      },
      formBoxTwo: {},
      shippingMatchBoxList: [],
      optionBoxTwo: {},
      optionBoxTwoBack: {
        align: 'center',
        index: true,
        addBtnText: "录入明细",
        refreshBtn: false,
        dialogDrag: true,
        addBtn: true,
        span: 8,
        height: 600,
        selection: true,
        addRowBtn: false,
        cellBtn: false,
        editBtn: false,
        delBtn: false,
        menuWidth: 140,
        dialogTop: 25,
        dialogWidth: "80%",
        showSummary: true,
        sumColumnList: [{
          name: 'emptyWeight',
          type: 'sum',
          decimals: 2
        }],
        column: [{
          label: '箱型',
          prop: 'boxType',
          width: 100,
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_box_ype",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          overHidden: true
        }, {
          label: '箱号',
          prop: 'boxNo',
          width: 100,
          overHidden: true
        }, {
          label: 'HS代码',
          prop: 'hsCode',
          width: 100,
          overHidden: true
        }, {
          label: '货物明细',
          prop: 'goodsDetails',
          width: 100,
          overHidden: true
        }, {
          label: '件数',
          prop: 'number',
          width: 100,
          overHidden: true
        }, {
          label: '包装',
          prop: 'packing',
          width: 100,
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_packing",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          overHidden: true
        }, {
          label: '重量',
          prop: 'weight',
          width: 100,
          overHidden: true
        }, {
          label: '尺码',
          prop: 'size',
          width: 100,
          overHidden: true
        }, {
          label: '备注',
          prop: 'remarks',
          overHidden: true
        }]
      },
      optionFormThree: {
        menuBtn: false,
        span: 12,
        column: [{
          label: '服务项目',
          prop: 'serviceItems',
          type: 'checkbox',
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=ocean_service_items",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          overHidden: true
        }, {
          label: '其他服务',
          prop: 'serviceItemsDetails',
          disabled: false,
          type: 'textarea',
          minRows: 1,
        }]
      },
      optionFormAdd: {
        menuBtn: false,
        span: 8,
        column: [{
          label: '发货地',
          prop: 'deliverGoodsAddressName'
        }, {
          label: '装货港',
          prop: 'loadingPortName'
        }, {
          label: '卸货港',
          prop: 'dischargeCargoHarborName'
        }, {
          label: '目的地',
          prop: 'destinationName'
        }, {
          label: '交货地',
          prop: 'deliveryAddressName'
        }]
      },
      optionFormFour: {
        menuBtn: false,
        span: 8,
        column: [{
          label: '发货人',
          prop: 'consignorId',
        }, {
          label: '发货人详情',
          prop: 'consignorDetails',
          type: 'textarea',
          span: 16,
          minRows: 1,
        }, {
          label: '收货人',
          prop: 'consigneeId'
        }, {
          label: '收货人详情',
          prop: 'consigneeDetails',
          type: 'textarea',
          span: 16,
          minRows: 1,
        }, {
          label: '通知人',
          prop: 'notifierId'
        }, {
          label: '通知人详情',
          prop: 'notifierDetails',
          type: 'textarea',
          span: 16,
          minRows: 1,
        }]
      }
    }
  },
  async created() {
    this.optionBox = await this.getColumnData(this.getColumnName(254.1), this.optionBoxBack);
    this.optionBoxTwo = await this.getColumnData(this.getColumnName(254.2), this.optionBoxTwoBack);
    // this.key++
    if (this.onLoad.id && this.detailData.id) {
      this.refresh(this.onLoad.id, true)
    } else if (this.onLoad.id) {
      this.refresh(this.onLoad.id, true)
    }
  },
  methods: {
    //审核进度关闭
    choceScheduleFun() {
      this.checkScheduleDialog = false
    },
    //关闭审核
    choceCheckFun() {
      this.checkDialog = false;
      this.$store.commit("DOMXS_CLOSE_EXPORT_DETAIL");
      this.$router.$avueRouter.closeTag(window.location.hash.slice(1));
    },
    //刷新数据
    refresh(id, type) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(255,255,255,0.7)'
      })
      detail({id: id}).then(res => {
        this.form = res.data.data
        this.shippingBoxTypeList = this.form.shippingBoxTypeList
        this.shippingMatchBoxList = this.form.shippingMatchBoxList
        this.shippingFeesList = this.form.shippingFeesList
        this.shippingFileList = this.form.shippingFileList
        this.form.serviceItems = this.form.serviceItems.split(',')
        this.shippingBillDetails = this.form.shippingBillDetails
        delete this.form.shippingBoxTypeList
        delete this.form.shippingMatchBoxList
        delete this.form.shippingFeesList
        delete this.form.shippingFileList
        delete this.form.shippingBillDetails
        loading.close();
        this.limit(type)
      }).catch(() => {
        loading.close();
      })
    },
    confirmEditing() {
      this.editButton = true
      this.limit()
    },
    limit(type) {
      type = !this.editButton;
      if (type || this.form.status > 0) {
        this.$set(this.optionForm, "disabled", true)
        this.$set(this.optionFormTwo, "disabled", true)
        //箱型箱量
        this.$set(this.optionBox, "disabled", true)
        this.$set(this.optionBox, "menu", false)
        this.$set(this.optionBox, "addBtn", false)
        //地点信息
        this.$set(this.optionFormAdd, "disabled", true)
        //配箱信息
        this.$set(this.optionBoxTwo, "disabled", true)
        this.$set(this.optionBoxTwo, "menu", false)
        this.$set(this.optionBoxTwo, "addBtn", false)
        //服务项目
        this.$set(this.optionFormThree, "disabled", true)
        //发货信息
        this.$set(this.optionFormFour, "disabled", true)
        //附件明细
        this.disabled = true
      } else {
        this.$set(this.optionForm, "disabled", false)
        this.$set(this.optionFormTwo, "disabled", false)
        //箱型箱量
        this.$set(this.optionBox, "disabled", false)
        this.$set(this.optionBox, "menu", true)
        this.$set(this.optionBox, "addBtn", true)
        //地点信息
        this.$set(this.optionFormAdd, "disabled", false)
        //配箱信息
        this.$set(this.optionBoxTwo, "disabled", false)
        this.$set(this.optionBoxTwo, "menu", true)
        this.$set(this.optionBoxTwo, "addBtn", true)
        //服务项目
        this.$set(this.optionFormThree, "disabled", false)
        //发货信息
        this.$set(this.optionFormFour, "disabled", false)
        //附件明细
        this.disabled = false
      }
    },
    rowSave(form, done, loading) {
      done(form)
    },
    rowUpdate(form, index, done, loading) {
      done(form)
    },
    rowSaveTwo(form, done, loading) {
      done(form)
    },
    rowUpdateTwo(form, index, done, loading) {
      done(form)
    },
    rowDelBox(row, index) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
            if (row.id) {
              tradingBox(row.id).then(res => {
                this.shippingBoxTypeList.splice(index, 1);
                this.$message.success("操作成功!");
              });
            } else {
              this.shippingBoxTypeList.splice(index, 1);
              this.$message.success("操作成功!");
            }
          }
      )
      ;
    },
    rowDelBoxTwo(row, index) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (row.id) {
          tradingBoxItem(row.id).then(res => {
            this.shippingMatchBoxList.splice(index, 1);
            this.$message.success("操作成功!");
          });
        } else {
          this.shippingMatchBoxList.splice(index, 1);
          this.$message.success("操作成功!");
        }
      })
    },
    //保存数据
    editCustomer() {
      this.$refs["form"].validate((valid, done) => {
        done()
        if (valid) {
          this.$refs["formTwo"].validate((valid, done) => {
            done()
            if (valid) {
              let form = {
                ...this.form,
                shippingBillDetails: this.shippingBillDetails,
                shippingBoxTypeList: this.shippingBoxTypeList,
                shippingMatchBoxList: this.shippingMatchBoxList,
                shippingFeesList: this.shippingFeesList,
                shippingFileList: this.shippingFileList,
                serviceItems: this.form.serviceItems.join(','),
                billType: "HYCK",
                tradeType: "HY"
              }
              const loading = this.$loading({
                lock: true,
                text: '加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(255,255,255,0.7)'
              });
              submit(form).then(res => {
                this.$message.success("保存成功")
                loading.close()
                this.refresh(res.data.data.id)
              }).catch(() => {
                loading.close()
              })
            }
          })
        }
      })
    },
    //撤销
    repealCancel() {
      this.$confirm("您确定撤回此次申请吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        const data = {
          id: this.form.id,
          pageLabel: "买箱",
          approvalType: 1,
          checkFlag: 1,
        }
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(255,255,255,0.7)'
        });
        repealCancel(data).then(res => {
          loading.close();
          this.$message.success('撤回成功')
          this.refresh(this.form.id)
        }).catch(() => {
          loading.close();
        })
      })
    },
    pleaseCheck(type) {
      this.$confirm("您确定提交请核申请吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$refs["form"].validate((valid, done) => {
          done()
          if (valid) {
            let form = {
              ...this.form,
              shippingBillDetails: this.shippingBillDetails,
              shippingBoxTypeList: this.shippingBoxTypeList,
              shippingMatchBoxList: this.shippingMatchBoxList,
              shippingFeesList: this.shippingFeesList,
              shippingFileList: this.shippingFileList,
              serviceItems: this.form.serviceItems.join(','),
              billType: "HYCK",
              tradeType: "HY"
            }
            const loading = this.$loading({
              lock: true,
              text: '加载中',
              spinner: 'el-icon-loading',
              background: 'rgba(255,255,255,0.7)'
            });
            submit(form).then(res => {
              const data = {
                id: res.data.data.id,
                url: '/oceanShipping/maritimeExport/index',
                pageStatus: "this.$store.getters.maritimeExport",
                approvalType: type,
                pageLabel: "海运出口",
                checkFlag: 1,
                billType: "HYCK"
              }
              pleaseCheck(data).then(rest => {
                loading.close();
                this.$message.success('请核成功')
                this.refresh(res.data.data.id)
              }).catch(() => {
                loading.close();
              })
            }).catch(() => {
              loading.close()
            })
          }
        });
      })
    },
    //自定义列保存
    async saveColumnTwo(ref, option, optionBack, code) {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumnTwo(ref, option, optionBack, code) {
      this[option] = this[optionBack];
      const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
        this.limit()
      }
    },
    backToList(type) {
      this.$emit("backToList", type);
    }
  }
}
</script>

<style scoped>

</style>