platform-customsdeclaration-ssr/pages/severPage/_id.vue

<template>
  <div class="section">
    <div class="headline">
      <span>委托报关单详情</span>
      <div class="search_time">
        <a :href="'/severPage/entrustApply?id=' + $route.params.id"><i class="el-icon-edit"></i>编 辑</a>
      </div>
    </div>
    <div class="entrust-apply">
      <el-form label-width="150px">
        <h4>深圳交货</h4>
        <el-row>
          <el-col :span="8">
            <el-form-item label="深圳交货方式">
              <span v-text="sheetInfo.deliveryType ? sheetInfo.deliveryType :'-'"/>
            </el-form-item>
          </el-col>
        </el-row>
        <tempalte v-if="sheetInfo.deliveryContactInfoSimplify">
          <el-row >
            <el-col :span="8">
              <el-form-item label="收货人">
              <span v-text="sheetInfo.deliveryContactInfoSimplify ? JSON.parse(sheetInfo.deliveryContactInfoSimplify).name : '-'"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式">
              <span v-text="sheetInfo.deliveryContactInfoSimplify ? JSON.parse(sheetInfo.deliveryContactInfoSimplify).telephone : '-'"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="仓库/提货地址">
              <span v-text="sheetInfo.deliveryContactInfoSimplify ? JSON.parse(sheetInfo.deliveryContactInfoSimplify).detailAddress : '-'"/>
              </el-form-item>
            </el-col>
          </el-row>
        </tempalte>
        <h4>香港交货</h4>
        <el-row>
          <el-col :span="8">
            <el-form-item label="香港交货方式">
              <span v-text="sheetInfo.stockType ? sheetInfo.stockType :'-'"/>
            </el-form-item>
          </el-col>
        </el-row>
        <template v-if="sheetInfo.addressFileUrl">
          <upload placeholder="请上传香港交货单" @closeEvent="(e) => {return closeFile(e, 'addressFile')}" @uploadEvent="(e) => {return upload(e, 'addressFile')}" :fileData="sheetInfo.addressFileUrl"/>
        </template>
        <template v-if="!sheetInfo.addressFileUrl && sheetInfo.stockContactInfoSimplify">
          <el-row>
            <el-col :span="8">
              <el-form-item label="收货人">
              <span v-text="sheetInfo.stockContactInfoSimplify ? JSON.parse(sheetInfo.stockContactInfoSimplify).name : '-'"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式">
              <span v-text="sheetInfo.stockContactInfoSimplify ? JSON.parse(sheetInfo.stockContactInfoSimplify).telephone : '-'"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="仓库/提货地址">
              <span v-text="sheetInfo.stockContactInfoSimplify ? JSON.parse(sheetInfo.stockContactInfoSimplify).detailAddress : '-'"/>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <el-row>
          <el-col :span="24" v-if="sheetInfo.contactUrl">
            <el-form-item label="供应商合同">
              <a class="download" @click="downFileData(sheetInfo.contactUrl)"><i class="el-icon-download"></i></a>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="sheetInfo.billUrl">
            <el-form-item label="供应商发票">
              <a class="download" @click="downFileData(sheetInfo.billUrl)"><i class="el-icon-download"></i></a>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="sheetInfo.packagelistUrl">
            <el-form-item label="供应商箱单">
              <a class="download" @click="downFileData(sheetInfo.packagelistUrl)"><i class="el-icon-download"></i></a>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="overflow-x:auto;width:100%;" class="table-info">
        <table cellspacing="0" cellpadding="0">
          <thead>
          <tr>
            <th width="45">序号</th>
            <th width="120">商品名称</th>
            <th width="130">规格型号</th>
            <th width="75">数量(pcs)</th>
            <th width="75">箱数</th>
            <th width="75">净重(KG)</th>
            <th width="75">毛重(KG)</th>
            <th width="75">币种</th>
            <th width="75">单价</th>
            <th width="75">总价</th>
            <th width="80">品牌</th>
            <th width="85">产地</th>
            <th width="100">批次</th>
            <th width="75">备注</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in detailData" @dblclick="dialogClick(item.id)" :class="{errmsg : errInfo[item.id]}">
            <td :class="{show: index === 0 || hasEdit}">
              <span v-text="index + 1"/>
              <div class="text-delete" @click="deleteRow(index)" v-if="index !== 0 && !hasEdit">
                <i class="el-icon-delete"/>
              </div>
            </td>
            <td :class="{err: item.errMsg.commodityName, is_select: item.isSelect.commodityName}">
              <template v-if="!item.dblclick.commodityName">
                <span v-text="item.commodityNameSimplify"></span>
              </template>
              <template v-else>
                <input type="text" v-model="item.commodityNameSimplify" :ref="'commodityName' + index" @blur="vaildCommodityName(index)" maxlength="100">
              </template>
            </td>
            <td :class="{err: item.errMsg.cmpCode, is_select: item.isSelect.cmpCode}">
              <template v-if="!item.dblclick.cmpCode">
                <span v-text="item.cmpCode"></span>
              </template>
              <template v-else>
                <input type="text" v-model="item.cmpCode" :ref="'cmpCode' + index" @blur="vaildCmpCode(index)" maxlength="100">
              </template>
            </td>
            <td :class="{err: item.errMsg.amount, is_select: item.isSelect.amount}">
              <template v-if="!item.dblclick.amount">
                <span v-text="item.amount"></span>
              </template>
              <template v-else>
                <input type="text" v-model.number.trim="item.amount" :ref="'amount' + index" @blur="vaildAmount(index)">
              </template>
              <div class="err-info" v-if="item.amountError">
                <i class="el-icon-question"/>
                <p v-text="item.amountErrorMessage">数量</p>
              </div>
            </td>
            <td v-if="item.show.cartonNum" :rowspan="item.rowspan.cartonNum" :class="{err: item.errMsg.cartonNum, is_select: item.isSelect.cartonNum}">
              <template v-if="!item.dblclick.cartonNum">
                <span v-text="item.cartonNum"></span>
              </template>
              <template v-else>
                <input type="text" v-model.number.trim="item.cartonNum" :ref="'cartonNum' + index" @blur="vaildCartonNum(index)">
              </template>
              <div class="err-info" v-if="item.cartonNumError">
                <i class="el-icon-question"/>
                <p v-text="item.cartonNumErrorMessage">商品名称</p>
              </div>
            </td>
            <td v-if="item.show.netWeight" :rowspan="item.rowspan.netWeight" :class="{err: item.errMsg.netWeight, is_select: item.isSelect.netWeight}">
              <template v-if="!item.dblclick.netWeight">
                <span v-text="item.netWeight"></span>
              </template>
              <template v-else>
                <input type="text" v-model.number.trim="item.netWeight" :ref="'netWeight' + index" @blur="vaildNetWeight(index)">
              </template>
              <div class="err-info" v-if="item.netWeightError">
                <i class="el-icon-question"/>
                <p v-text="item.netWeightErrorMessage">商品名称</p>
              </div>
            </td>
            <td v-if="item.show.grossWeight" :rowspan="item.rowspan.grossWeight" :class="{err: item.errMsg.grossWeight, is_select: item.isSelect.grossWeight}">
              <template v-if="!item.dblclick.grossWeight">
                <span v-text="item.grossWeight"></span>
              </template>
              <template v-else>
                <input type="text" v-model.number.trim="item.grossWeight" :ref="'grossWeight' + index" @blur="vaildGrossWeight(index)">
              </template>
              <div class="err-info" v-if="item.grossWeightError">
                <i class="el-icon-question"/>
                <p v-text="item.grossWeightErrorMessage">商品名称</p>
              </div>
            </td>
            <td :class="{err: item.errMsg.currency, is_select: item.isSelect.currency}">
              <template v-if="!item.dblclick.currency">
                <span v-text="item.currency"></span>
              </template>
              <template v-else>
                <input type="text" v-model.trim="item.currency" :ref="'currency' + index" @blur="vaildCurrency(index)">
              </template>
              <div class="err-info" v-if="item.currencyError">
                <i class="el-icon-question"/>
                <p v-text="item.currencyErrorMessage">商品名称</p>
              </div>
            </td>
            <td :class="{err: item.errMsg.unitPrice, is_select: item.isSelect.unitPrice}">
              <template v-if="!item.dblclick.unitPrice">
                <span v-text="item.unitPrice"></span>
              </template>
              <template v-else>
                <input type="text" v-model.number.trim="item.unitPrice" :ref="'unitPrice' + index" @blur="vaildUnitPrice(index)">
              </template>
              <div class="err-info" v-if="item.unitPriceError">
                <i class="el-icon-question"/>
                <p v-text="item.unitPriceErrorMessage">商品名称</p>
              </div>
            </td>
            <td :class="{err: item.errMsg.totalPrice, is_select: item.isSelect.totalPrice}">
              <template v-if="!item.dblclick.totalPrice">
                <span v-text="item.totalPrice"></span>
              </template>
              <template v-else>
                <input type="text" v-model.number.trim="item.totalPrice" :ref="'totalPrice' + index" @blur="vaildTotalPrice(index)">
              </template>
              <div class="err-info" v-if="item.totalPriceError">
                <i class="el-icon-question"/>
                <p v-text="item.totalPriceErrorMessage">商品名称</p>
              </div>
            </td>
            <td :class="{err: item.errMsg.brand, is_select: item.isSelect.brand}">
              <template v-if="!item.dblclick.brand">
                <span v-text="item.brand"></span>
              </template>
              <template v-else>
                <input type="text" v-model="item.brand" :ref="'brand' + index" @blur="vaildBrand(index)" maxlength="60">
              </template>
              <div class="err-info" v-if="item.brandError">
                <i class="el-icon-question"/>
                <p v-text="item.brandErrorMessage">商品名称</p>
              </div>
            </td>
            <td :class="{err: item.errMsg.producingArea, is_select: item.isSelect.producingArea}">
              <template v-if="!item.dblclick.producingArea">
                <span v-text="item.producingAreaSimplify"></span>
              </template>
              <template v-else>
                <input type="text" v-model="item.producingAreaSimplify" :ref="'producingArea' + index" @blur="vaildProducingArea(index)" maxlength="20">
              </template>
              <div class="err-info" v-if="item.producingAreaError">
                <i class="el-icon-question"/>
                <p v-text="item.producingAreaErrorMessage">商品名称</p>
              </div>
            </td>
            <td :class="{err: item.errMsg.batchNum, is_select: item.isSelect.batchNum}">
              <template v-if="!item.dblclick.batchNum">
                <span v-text="item.batchNum"></span>
              </template>
              <template v-else>
                <input type="text" v-model="item.batchNum" :ref="'batchNum' + index" @blur="vaildBatchNum(index)" maxlength="50">
              </template>
              <div class="err-info" v-if="item.batchNumError">
                <i class="el-icon-question"/>
                <p v-text="item.batchNumErrorMessage">商品名称</p>
              </div>
            </td>
            <td :class="{is_select: item.isSelect.remark}" :title="item.remark">
              <template v-if="!item.dblclick.remark">
                <span v-text="item.remarkSimplify"></span>
              </template>
              <template v-else>
                <input type="text" v-model="item.remarkSimplify" :ref="'remark' + index" @blur="vaildRemark(index)" maxlength="100">
              </template>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <buts :err-msg="errInfo"/>
      <el-dialog
        title="错误描述"
        :visible.sync="hasDialog"
        width="30%">
        <div><el-input type="textarea" v-model="errInfo[hasPcs]" placeholder="请在这里填写错误描述信息！"/></div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="hasDialog = false">取 消</el-button>
          <el-button type="primary" @click="deleteErr">删 除</el-button>
          <el-button type="success" @click="saveErr">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {Buts, Upload} from '@/components/common'
  export default {
    name: 'EntrustDetailId',
    layout: 'default',
    middleware: 'authenticated',
    fetch({store, route}) {
      return Promise.all([
        store.dispatch('loadSheetDetails', {id: route.params.id})
      ])
    },
    components: {
      Buts,
      Upload
    },
    data () {
      return {
        hasDialog: false,
        hasPcs: '',
        errInfo: {},
        hasEdit: false,
        tableData: {
          thead: [
            {id: 'index', name: '序号', type: 'String', width: 45},
            {id: 'commodityName', name: '商品名称', type: 'String', width: 117},
            {id: 'cmpCode', name: '规格型号', type: 'String', width: 129},
            {id: 'amount', name: '数量(pcs)', type: 'String', width: 100},
            {id: 'cartonNum', name: '箱数', type: 'String', width: 75},
            {id: 'netWeight', name: '净重(KG)', type: 'String', width: 75},
            {id: 'grossWeight', name: '毛重(KG)', type: 'String', width: 75},
            {id: 'currency', name: '币种', type: 'String', width: 75},
            {id: 'unitPrice', name: '单价', type: 'String', width: 98},
            {id: 'totalPrice', name: '总价', type: 'String', width: 98},
            {id: 'brand', name: '品牌', type: 'String', width: 80},
            {id: 'producingArea', name: '产地', type: 'String', width: 90},
            {id: 'batchNum', name: '批次', type: 'String', width: 115},
            {id: 'remark', name: '备注', type: 'String', width: 75},
          ],
          attr: [
            {id: 'errMsg', default: false},
            {id: 'isSelect', default: false},
            {id: 'show', default: true},
            {id: 'dblclick', default: false},
            {id: 'rowspan', default: 1},
            {id: 'splitData', default: ''}],
          filters: ['cartonNum', 'netWeight', 'grossWeight']
        },
        rowspan: [],
        fileList: {},
        detailData: []
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.clearSheet()
      })
    },
    computed: {
      sheetInfo () {
        return this.$store.state.severSheet.details.data.content
      }
    },
    methods: {
      // 下载文件信息
      downFileData (type) {
        window.open(type)
      },
      // 指定错误行信息
      dialogClick (type) {
        this.hasDialog = true
        this.hasPcs = type
      },
      // 删除错误信息
      deleteErr () {
        delete this.errInfo[this.hasPcs]
        this.hasDialog = false
      },
      // 保存错误信息
      saveErr () {
        this.errInfo[this.hasPcs] = this.errInfo[this.hasPcs]
        this.hasDialog = false
      },
      // 获取仓储部分返回的错误信息
      getErr (type) {
        this.errMsg = type
      },
      // 数据增加属性
      addAttrData (type) {
        let list = type
        for (let i = 0; i < list.length; i++) {
          for (let j = 0; j < this.tableData.attr.length; j++) {
            let _n = {}
            for (let k = 0; k < this.tableData.thead.length; k++) {
              if (this.tableData.attr[j].id === 'splitData') {
                _n[this.tableData.thead[k].id] = `${this.tableData.thead[k].id}_${i}_${i}`
              } else {
                _n[this.tableData.thead[k].id] = this.tableData.attr[j].default
              }
            }
            list[i][this.tableData.attr[j].id] = _n
          }
        }
        return list
      },
      // 识别返回数据存在的合并情况进行处理
      getSplitData (data, arr) {
        arr.forEach((value) => {
          let _m = []
          for (let i = 1; i < data.length; i++) {
            if (data[i][value] === -1) {
              _m.push(data[i].splitData[value])
            }
          }
          let counts = []
          if (_m.length > 0) {
            let count = {state: Number(_m[0].split('_')[1]), num: 1}
            for (let j = 1; j < _m.length; j++) {
              if (_m[j].split('_')[1] - _m[j - 1].split('_')[1] == 1) {
                count.num++
              } else {
                counts.push(count)
                count = {state: Number(_m[j].split('_')[1]), num: 1}
              }
            }
            counts.push(count)
            for(let k = 0; k < counts.length; k++) {
              let star = counts[k].state
              for (let n = 0; n < counts[k].num; n++) {
                data[star - 1].rowspan[value] = counts[k].num + 1
                data[star + n].show[value] = false
                data[star + n].splitData[value] = `${value}_${star + n - 1}_${star + counts[k].num - 1}`
                data[star - 1].splitData[value] = `${value}_${star - 1}_${star + counts[k].num - 1}`
              }
            }
          }
        })
      },
      // 清空数据
      clearSheet () {
        this.rowspan = []
        this.detailData = JSON.parse(JSON.stringify(this.sheetInfo.commissionSheetDetail)).sort((a, b) => {
          return a.detno > b.detno
        })
        this.getSplitData(this.addAttrData(this.detailData), this.tableData.filters)
      },
      // 删除指定行
      deleteRow (type) {
        let del = true
        let rowMax = this.form.commissionSheetDetail.length
        let rowData = this.form.commissionSheetDetail[type]
        for (let i = 0; i < this.tableData.thead.length; i++) {
          if (rowData.splitData[this.tableData.thead[i].id].split('_')[1] !== rowData.splitData[this.tableData.thead[i].id].split('_')[2]) {
            this.$message({
              message: '删除行不能存在合并的单元格，请先拆分！',
              type: 'error'
            })
            del = false
            break
          }
        }
        del ? this.form.commissionSheetDetail.splice(type, 1) : ''
        for (let k = 0; k < this.tableData.thead.length; k++) {
          for (let j = type; j < rowMax - 1; j++) {
            let _m = this.form.commissionSheetDetail[j].splitData
            _m[this.tableData.thead[k].id] = `${this.tableData.thead[k].id}_${Number(_m[this.tableData.thead[k].id].split('_')[1]) - 1}_${Number(_m[this.tableData.thead[k].id].split('_')[2]) - 1}`
          }
        }
      },
      // 合并表格
      mergeTd () {
        for(let i = 0; i < this.rowspan.length -1; i++) {
          if (this.rowspan[i].split('_')[0] !== this.rowspan[i+1].split('_')[0]) {
            this.$message({
              type: 'error',
              message: '合并失败，不能横向进行合并！'
            })
            return
          } else if (this.rowspan[i].split('_')[0] !== 'cartonNum' && this.rowspan[i].split('_')[0] !== 'netWeight' && this.rowspan[i].split('_')[0] !== 'grossWeight') {
            this.$message({
              type: 'error',
              message: '只能对箱数、净重、毛重进行合并！'
            })
            return
          }
        }
        this.rowspan.sort((a, b) => {return a.split('_')[2] - b.split('_')[2]})
        let minRow = this.rowspan[0]
        let maxRow = this.rowspan[this.rowspan.length-1]
        if (this.rowspan.length < 2) {
          this.$message({
            type: 'error',
            message: '必须含两个选择单元格！'
          })
        } else if ((maxRow.split('_')[2] - minRow.split('_')[2] + 1) !== this.rowspan.length) {
          this.$message({
            type: 'error',
            message: '选择单元格必须是连续的！'
          })
        } else {
          this.form.commissionSheetDetail[minRow.split('_')[1]].rowspan[minRow.split('_')[0]] = this.rowspan.length
          for(let j = Number(minRow.split('_')[1]); j <= Number(maxRow.split('_')[2]); j++) {
            this.form.commissionSheetDetail[j].splitData[minRow.split('_')[0]] = `${minRow.split('_')[0]}_${minRow.split('_')[1]}_${maxRow.split('_')[1]}`
            this.form.commissionSheetDetail[Number(minRow.split('_')[1])].isSelect[minRow.split('_')[0]] = false
            if (j !==  Number(minRow.split('_')[1])) {
              this.form.commissionSheetDetail[j].show[minRow.split('_')[0]] = false
              this.form.commissionSheetDetail[j].isSelect[minRow.split('_')[0]] = false
              this.form.commissionSheetDetail[j][minRow.split('_')[0]] = -1
            }
          }
          this.rowspan = []
        }
      },
      // 拆分表格
      splitTd () {
        if (this.rowspan.length > 0 && this.rowspan.length === 1 && (this.rowspan[0].split('_')[1] !== this.rowspan[0].split('_')[2])) {
          let rowMin = Number(this.rowspan[0].split('_')[1])
          let rowMax = Number(this.rowspan[0].split('_')[2])
          let name = this.rowspan[0].split('_')[0]
          this.form.commissionSheetDetail[rowMin].rowspan[name] = 1
          for (let i = rowMin; i <= rowMax; i++) {
            this.form.commissionSheetDetail[i].isSelect[name] = false
            this.form.commissionSheetDetail[i].splitData[name] = `${name}_${i}_${i}`
            if (i !== rowMin) {
              this.form.commissionSheetDetail[i].rowspan[name] = 1
              this.form.commissionSheetDetail[i].show[name] = true
              this.form.commissionSheetDetail[i][name] = 0
            }
          }
          this.rowspan = []
        } else {
          this.$message({
            type: 'error',
            message: '请选择一个合并过的单元格！'
          })
        }
      },
      // 表格增加一行
      addTable () {
        let _arr = {
          detno: '',
          commodityNameSimplify: '',
          cmpCode: '',
          amount: '',
          cartonNum: '',
          netWeight: '',
          grossWeight: '',
          currency: '',
          unitPrice: '',
          totalPrice: '',
          brand: '',
          producingAreaSimplify: '',
          batchNum: '',
          remarkSimplify: ''
        }
        for (let j = 0; j < this.tableData.attr.length; j++) {
          let _n = {}
          for (let k = 0; k < this.tableData.thead.length; k++) {
            if (this.tableData.attr[j].id === 'splitData') {
              _n[this.tableData.thead[k].id] = `${this.tableData.thead[k].id}_${this.form.commissionSheetDetail.length}_${this.form.commissionSheetDetail.length}`
            } else {
              _n[this.tableData.thead[k].id] = this.tableData.attr[j].default
            }
          }
          _arr[this.tableData.attr[j].id] = _n
        }
        this.form.commissionSheetDetail.push(_arr)
      },
      // 单元格单击
      cellClick (key, name) {
        this.form.commissionSheetDetail[key].isSelect[name] = !this.form.commissionSheetDetail[key].isSelect[name]
        if (this.rowspan.length === 0) {
          this.rowspan.push(this.form.commissionSheetDetail[key].splitData[name])
        } else {
          for(let index = 0; index < this.rowspan.length; index++) {
            if (this.rowspan[index].split('_')[1] === key.toString() && this.rowspan[index].split('_')[0] === name) {
              if (this.form.commissionSheetDetail[key].isSelect[name] === false) {
                this.rowspan.splice(index, 1)
                break
              }
            } else {
              if (this.form.commissionSheetDetail[key].isSelect[name] === true) {
                this.rowspan.push(this.form.commissionSheetDetail[key].splitData[name])
                break
              }
            }
          }
        }
      },
      // 表格双击
      dblclick (name, key) {
        this.form.commissionSheetDetail[key].dblclick[name] = !this.form.commissionSheetDetail[key].dblclick[name]
        this.form.commissionSheetDetail[key].isSelect[name] = false
        this.$nextTick (()=> {
          this.$refs[name + key + ''][0].focus()
        })
      },
      // 上传成功后的回调
      uploadSuccess (res, file, fileList) {
        console.log(file, fileList)
        if (res.success) {
          this.$message({
            message: '文件上传成功',
            type: 'success'
          })
        } else {
          this.$message.error(res.message)
        }
      },
      // 上传错误
      uploadError (res, file, fileList) {
        console.log(file, fileList)
        this.$message.error('上传失败，请重新上传文件！')
      },
      // 选择文件，对文件内容打包处理
      selectFile (file) {
        this.form.deliveryFileUrl = file.name
        this.fileList.push(file)
      },
      // 验证手机号
      checkTel (rule, value, callback) {
        if (!value) {
          return callback(new Error('联系方式不能为空'))
        } else {
          let reg = /^((17[0-9])|(14[0-9])|(13[0-9])|(15[^4,\D])|(18[0,5-9]))\d{8}$/
          if (!(reg.test(value))) {
            callback(new Error('请输入正确的手机号'))
          } else {
            callback()
          }
        }
      },
      // 验证商品名称
      vaildCommodityName (type) {
        this.form.commissionSheetDetail[type].dblclick.commodityName = false
        this.form.commissionSheetDetail[type].isSelect.commodityName = false
        if (this.form.commissionSheetDetail[type].commodityName == '') {
          this.form.commissionSheetDetail[type].errMsg.commodityName = true
          this.$message({
            message: '请填写' + (type + 1) + '行商品名称内容，不能为空！',
            type: 'warning'
          })
        } else {
          this.form.commissionSheetDetail[type].errMsg.commodityName = false
        }
      },
      // 验证规格型号
      vaildCmpCode (type) {
        this.form.commissionSheetDetail[type].dblclick.cmpCode = false
        this.form.commissionSheetDetail[type].isSelect.cmpCode = false
        let reg =  /[\u4E00-\u9FA5\uf900-\ufa2d]/
        if (this.form.commissionSheetDetail[type].cmpCode == '') {
          this.form.commissionSheetDetail[type].errMsg.cmpCode = true
          this.$message({
            message: '请填写序号' + (type + 1) + '行商品规格型号内容，不能为空！',
            type: 'warning'
          })
        } else if (reg.test(this.form.commissionSheetDetail[type].cmpCode)) {
          this.form.commissionSheetDetail[type].errMsg.cmpCode = true
          this.$message({
            message: '请注意序号' + (type + 1) + '行商品规格型号内容，不能含中文字符！',
            type: 'warning'
          })
        } else {
          this.form.commissionSheetDetail[type].errMsg.cmpCode = false
        }
      },
      // 验证数量
      vaildAmount (type) {
        this.form.commissionSheetDetail[type].dblclick.amount = false
        this.form.commissionSheetDetail[type].isSelect.amount = false
        let reg = /^[1-9]([0-9])*$/
        if (this.form.commissionSheetDetail[type].amount == '') {
          this.form.commissionSheetDetail[type].errMsg.amount = true
          this.$message({
            message: '请填写序号' + (type + 1) + '行商品数量内容，不能为空！',
            type: 'warning'
          })
        } else if (!reg.test(this.form.commissionSheetDetail[type].amount)) {
          this.form.commissionSheetDetail[type].errMsg.amount = true
          this.$message({
            message: '请填写序号' + (type + 1) + '行商品数量内容，必须是正整数！',
            type: 'warning'
          })
        } else {
          this.form.commissionSheetDetail[type].errMsg.amount = false
        }
      },
      // 验证箱数
      vaildCartonNum (type) {
        this.form.commissionSheetDetail[type].dblclick.cartonNum = false
        this.form.commissionSheetDetail[type].isSelect.cartonNum = false
        let reg = /(^[1-9]([0-9])*$)|(^(-1){1}$)/
        if (this.form.commissionSheetDetail[type].cartonNum == '') {
          this.form.commissionSheetDetail[type].errMsg.cartonNum = true
          this.$message({
            message: '请填写序号' + (type + 1) + '行箱数内容，不能为空！',
            type: 'warning'
          })
        } else if (!reg.test(this.form.commissionSheetDetail[type].cartonNum)) {
          this.form.commissionSheetDetail[type].errMsg.cartonNum = true
          this.$message({
            message: '请填写序号' + (type + 1) + '行箱数内容为正整数。为*号表示向下合并单元格！',
            type: 'warning'
          })
        } else {
          this.vaildNetWeight(type)
          this.vaildGrossWeight(type)
          this.form.commissionSheetDetail[type].errMsg.cartonNum = false
        }
      },
      // 验证净重
      vaildNetWeight (type) {
        this.form.commissionSheetDetail[type].dblclick.netWeight = false
        this.form.commissionSheetDetail[type].isSelect.netWeight = false
        let reg = /(^[0-9]+(\.[0-9]{1,2})?$)|(^(-1){1}$)/
        if (this.form.commissionSheetDetail[type].netWeight == '') {
          this.form.commissionSheetDetail[type].errMsg.netWeight = true
          this.$message({
            message: '请填写序号' + (type + 1) + '行净重内容，不能为空！',
            type: 'warning'
          })
        } else {
          if (this.form.commissionSheetDetail[type].netWeight == '*' && (this.form.commissionSheetDetail[type].cartonNum != '*' || this.form.commissionSheetDetail[type].grossWeight != '*')) {
            this.form.commissionSheetDetail[type].errMsg.netWeight = true
            this.$message({
              message: '请填写序号' + (type + 1) + '行净重内容有误，净重合并的情况必须毛重和箱数都要合并，请确认！',
              type: 'warning'
            })
          } else if (!reg.test(this.form.commissionSheetDetail[type].netWeight)) {
            this.form.commissionSheetDetail[type].errMsg.netWeight = true
            this.$message({
              message: '请填写序号' + (type + 1) + '行净重内容只保留两位有效数值！',
              type: 'warning'
            })
          } else {
            this.form.commissionSheetDetail[type].errMsg.netWeight = false
          }
        }
      },
      // 验证毛重
      vaildGrossWeight (type) {
        this.form.commissionSheetDetail[type].dblclick.grossWeight = false
        this.form.commissionSheetDetail[type].isSelect.grossWeight = false
        let reg = /(^[0-9]+(\.[0-9]{1,2})?$)|(^(-1){1}$)/
        if (this.form.commissionSheetDetail[type].grossWeight == '') {
          this.form.commissionSheetDetail[type].errMsg.grossWeight = true
          this.$message({
            message: '请填写序号' + (type + 1) + '行毛重内容，不能为空！',
            type: 'warning'
          })
        } else {
          if (this.form.commissionSheetDetail[type].cartonNum != '*' && this.form.commissionSheetDetail[type].grossWeight == '*') {
            this.form.commissionSheetDetail[type].errMsg.grossWeight = true
            this.$message({
              message: '请填写序号' + (type + 1) + '行毛重内容有误，毛重合并的情况箱数必须合并，请确认！',
              type: 'warning'
            })
          } else if (!reg.test(this.form.commissionSheetDetail[type].grossWeight)) {
            this.form.commissionSheetDetail[type].errMsg.grossWeight = true
            this.$message({
              message: '请填写序号' + (type + 1) + '行毛重内容只保留两位有效数值！',
              type: 'warning'
            })
          } else {
            this.vaildNetWeight(type)
            this.form.commissionSheetDetail[type].errMsg.grossWeight = false
          }
        }
      },
      // 验证币种
      vaildCurrency (type) {
        this.form.commissionSheetDetail[type].dblclick.currency = false
        this.form.commissionSheetDetail[type].isSelect.currency = false
        if (this.form.commissionSheetDetail[type].currency == '') {
          this.form.commissionSheetDetail[type].errMsg.currency = true
          this.$message({
            message: '请填写序号' + (type + 1) + '行币种内容，不能为空！',
            type: 'warning'
          })
        } else {
          this.form.commissionSheetDetail[type].errMsg.currency = false
        }
      },
      // 验证单价
      vaildUnitPrice (type) {
        this.form.commissionSheetDetail[type].dblclick.unitPrice = false
        this.form.commissionSheetDetail[type].isSelect.unitPrice = false
        let reg = /^\d*\.?\d{0,4}$/
        if (this.form.commissionSheetDetail[type].unitPrice == '') {
          this.form.commissionSheetDetail[type].errMsg.unitPrice = true
          this.$message({
            message: '请填写序号' + (type + 1) + '行单价内容，不能为空！',
            type: 'warning'
          })
        } else if (!reg.test(this.form.commissionSheetDetail[type].unitPrice)) {
          this.form.commissionSheetDetail[type].errMsg.unitPrice = true
          this.$message({
            message: '请填写序号' + (type + 1) + '行单价内容只保留四位有效数值！',
            type: 'warning'
          })
        } else {
          this.form.commissionSheetDetail[type].errMsg.unitPrice = false
        }
      },
      // 验证总价
      vaildTotalPrice (type) {
        this.form.commissionSheetDetail[type].dblclick.totalPrice = false
        this.form.commissionSheetDetail[type].isSelect.totalPrice = false
        if (this.form.commissionSheetDetail[type].amount && this.form.commissionSheetDetail[type].unitPrice) {
          this.form.commissionSheetDetail[type].totalPrice = this.form.commissionSheetDetail[type].amount * this.form.commissionSheetDetail[type].unitPrice
          let reg = /^\d*\.?\d{0,4}$/
          if (this.form.commissionSheetDetail[type].totalPrice == '') {
            this.form.commissionSheetDetail[type].errMsg.totalPrice = true
            this.$message({
              message: '请填写序号' + (type + 1) + '行总价内容，不能为空！',
              type: 'warning'
            })
          } else if (!reg.test(this.form.commissionSheetDetail[type].totalPrice)) {
            this.form.commissionSheetDetail[type].errMsg.totalPrice = true
            this.$message({
              message: '请填写序号' + (type + 1) + '行总价内容只保留四位有效数值！',
              type: 'warning'
            })
          } else {
            this.form.commissionSheetDetail[type].errMsg.totalPrice = false
          }
        }
      },
      // 验证品牌
      vaildBrand (type) {
        this.form.commissionSheetDetail[type].dblclick.brand = false
        this.form.commissionSheetDetail[type].isSelect.brand = false
        if (this.form.commissionSheetDetail[type].brand == '') {
          this.form.commissionSheetDetail[type].errMsg.brand = true
          this.$message({
            message: '请填写序号' + (type + 1) + '行品牌内容，不能为空！',
            type: 'warning'
          })
        } else {
          this.form.commissionSheetDetail[type].errMsg.brand = false
        }
      },
      // 验证产地
      vaildProducingArea (type) {
        this.form.commissionSheetDetail[type].dblclick.producingArea = false
        this.form.commissionSheetDetail[type].isSelect.producingArea = false
        if (this.form.commissionSheetDetail[type].producingArea == '') {
          this.form.commissionSheetDetail[type].errMsg.producingArea = true
          this.$message({
            message: '请填写序号' + (type + 1) + '行产地内容，不能为空！',
            type: 'warning'
          })
        } else {
          this.form.commissionSheetDetail[type].errMsg.producingArea = false
        }
      },
      // 验证批次
      vaildBatchNum (type) {
        this.form.commissionSheetDetail[type].dblclick.batchNum = false
        this.form.commissionSheetDetail[type].isSelect.batchNum = false
        if (this.form.commissionSheetDetail[type].batchNum == '') {
          this.form.commissionSheetDetail[type].errMsg.batchNum = true
          this.$message({
            message: '请填写序号' + (type + 1) + '行批次内容，不能为空！',
            type: 'warning'
          })
        } else {
          this.form.commissionSheetDetail[type].errMsg.batchNum = false
        }
      },
      // 验证备注信息
      vaildRemark (type) {
        this.form.commissionSheetDetail[type].dblclick.remark = false
        this.form.commissionSheetDetail[type].isSelect.remark = false
      },
      // 取消清空内容信息
      submitCancel (type) {
        this.$refs[type].clearValidate()
        this.clearSheet()
      },
      // 保存客户填写表单信息
      submitSave (type) {
        this.$refs[type].validate((valid) => {
          if (!valid) {
            this.$message({
              message: '请正确填写上面的信息，确认无误！',
              type: 'warning'
            })
            return false
          } else {
            let list = this.form.commissionSheetDetail
            for (let key of list.keys()) {
              this.vaildGrossWeight(key)
              this.vaildNetWeight(key)
              this.vaildCartonNum(key)
              this.vaildAmount(key)
              this.vaildBatchNum(key)
              this.vaildBrand(key)
              this.vaildCmpCode(key)
              this.vaildCommodityName(key)
              this.vaildCurrency(key)
              this.vaildProducingArea(key)
              this.vaildUnitPrice(key)
            }
            for(let i of list.values()) {
              if (i.errMsg.commodityName == true ||
                i.errMsg.amount == true ||
                i.errMsg.batchNum == true ||
                i.errMsg.brand == true ||
                i.errMsg.cartonNum == true ||
                i.errMsg.cmpCode == true ||
                i.errMsg.commodityName == true ||
                i.errMsg.currency == true ||
                i.errMsg.grossWeight == true ||
                i.errMsg.netWeight == true ||
                i.errMsg.producingArea == true ||
                i.errMsg.unitPrice == true ||
                i.errMsg.remark == true) {
                this.$message({
                  message: '请正确填写上面的信息，确认无误！',
                  type: 'warning'
                })
                return false
              }
            }
            for(let i of list.values()) {
              i.grossWeight == '*' ? i.grossWeight = null : i.grossWeight = Number(i.grossWeight)
              i.netWeight == '*' ? i.netWeight = null : i.netWeight = Number(i.netWeight)
              i.cartonNum == '*' ? i.cartonNum = null : i.cartonNum = Number(i.cartonNum)
              i.amount == '*' ? i.amount = null : i.amount = Number(i.amount)
              i.unitPrice = Number(i.unitPrice)
              i.totalPrice = Number(i.totalPrice)
            }
            this.form.commissionSheetDetail = list
            let params = new FormData()
            params.append('file' , this.fileList)
            params.append('params' , JSON.stringify(this.form))
            let config = {
              headers: {'Content-Type': 'multipart/form-data'}
            }
            this.$http.post('/CommissionSheet/save', params, config)
              .then(response => {
                if (response.data.success) {
                  this.$message({
                    message: '报关申请提交成功',
                    type: 'success'
                  })
                  this.$router.push('/clientPage/' + response.data.content.id)
                } else {
                  this.$message({
                    message: response.data.message,
                    type: 'warning'
                  })
                  this.$router.push('/clientPage/entrustApply/' + response.data.content.id)
                }
              }).catch(() => {
              this.$message.error( '请检查网络，提交失败！')
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  .entrust-apply{
    padding:0 15px;
    margin-bottom:100px;
    h4{
      color:#0d5ffe;
      font-size: 14px;
      margin:20px auto;
    }
    .el-form-item {
      position:relative;
      margin: 0;
      .el-select{
        width:100%;
      }
      .input-title{
        position:absolute;
        top:0;
        right:-20px;
        &:hover{
          cursor:pointer;
          span{
            display: inline-block;
            width: 400px;
            line-height: 40px;
            z-index: 20000;
            position: absolute;
            left:25px;
          }
        }
        span{
          display:none;
        }
      }
    }
    .el-form-item__label{
      color:#333;
    }
    hr{
      border:2px dashed #eaeaea;
      margin: 25px auto;
    }
    .download{
      font-size: 16px;
      font-weight: bold;
      text-align: center;
    }
    .table-info{
      padding-top:30px;
      table{
        width:100%;
        table-layout: fixed;
        margin-bottom:20px;
        border-collapse: unset;
        border-spacing: 0;
        th{
          border: 1px solid #eee;
          line-height: 46px;
          background: #deeffe;
        }
        tr{
          &.errmsg {
            color: #F56C6C;
          }
          &:hover{
            cursor:pointer;
          }
        }
        td{
          &.err{
            border:1px solid red;
          }
          &.is_select{
            background: #f0f7fe;
            color:#0d5ffe;
          }
          border: 1px solid #eee;
          text-align: center;
          word-break: break-all;
          word-wrap: break-word;
          vertical-align: middle;
          height:44px;
          position:relative;
          span{
            line-height: 18px;
          }
          &:first-child:hover{
            cursor:pointer;
            span{
              display:none;
            }
            .text-delete{
              display:block;
            }
          }
          &.show:hover{
            cursor:default;
            span{
              display:block;
            }
          }
          .text-delete{
            display:none;
            position:absolute;
            top:0;
            left:0;
            width:40px;
            height:40px;
            line-height: 40px;
            text-align: center;
            i{
              font-size: 18px;
              font-weight: bold;
            }
          }
          .err-info{
            position:absolute;
            display:inline-block;
            width:15px;
            height:15px;
            top:0;
            right:0;
            &:hover{
              cursor:pointer;
              p{
                display:block;
              }
            }
            i{
              color:red;
              font-size: 16px;
              vertical-align:top;
            }
            p{
              position: absolute;
              display: none;
              width: 160px;
              height: 50px;
              line-height: 20px;
              background: #fff;
              bottom: -50%;
              right: 20px;
              z-index: 20000;
              box-shadow: 0 0 5px rgba(0,0,0,.7);
              font-size: 12px;
              text-align: left;
              color:#333;
              padding-left:3px;
              overflow-y: auto;
            }
          }
          input{
            width:100%;
            font-size: 16px;
            line-height: 40px;
            border:none;
            margin:0;
            padding-left:5px;
          }
        }
      }
    }
    .form-btn{
      margin-left:150px;
      padding-top:55px;
    }
  }
</style>