platform-customsdeclaration-ssr/pages/severPage/entrustApply/index.vue

<template>
  <div class="section">
    <div class="headline">
      <span>委托报关单申请</span>
    </div>
    <div class="entrust-apply">
      <el-form label-width="150px" ref="form" :model="form" :rules="rules">
        <h4>深圳交货</h4>
        <el-row>
          <el-col :span="8">
            <el-form-item label="深圳交货方式" prop="deliveryType">
              <el-select size="mini" v-model="form.deliveryType" placeholder="请选择交货方式">
                <el-option
                  v-for="item in shenzhen"
                  :key="item.id"
                  :label="item.description" :value="item.description"/>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-for="item in shenzhen" v-if="form.deliveryType === item.description && item.supportFile === true">
            <el-col :span="8">
              <el-form-item>
                <el-switch
                  v-model="select.file"
                  active-text="表单录入"
                  inactive-text="文件导入"/>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
        <template v-for="item in shenzhen" v-if="form.deliveryType === item.description && item.requiredAddress === true && select.file">
          <el-row>
            <el-col :span="8">
              <el-form-item label="收货人" prop="deliveryAddress.name" :rules="[{required: true, message: '收货人信息不能为空'}]">
                <el-input size="mini" v-model="form.deliveryAddress.name"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式" prop="deliveryAddress.telephone" :rules="[{required: true, message: '收货人联系方式不能为空'}, {validator: checkTel, trigger: 'blur'}]">
                <el-input size="mini" v-model="form.deliveryAddress.telephone"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="仓库/提货地址" prop="deliveryAddress.detailAddress" :rules="[{required: true, message: '收货人地址不能为空'}]">
                <el-input size="mini" v-model="form.deliveryAddress.detailAddress"/>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template v-for="item in shenzhen" v-if="form.deliveryType === item.description && item.supportFile === true && !select.file">
          <el-row>
            <el-col :span="12">
              <el-form-item>
                <template v-if="$route.query.id">
                  <upload placeholder="请上传深圳交货单" @closeEvent="(e) => {return closeFile(e, 'addressFile')}" @uploadEvent="(e) => {return upload(e, 'addressFile')}" :fileData="sheetInfo.addressFileUrl"/>
                </template>
                <template v-else>
                  <upload placeholder="请上传深圳交货单" @closeEvent="(e) => {return closeFile(e, 'addressFile')}" @uploadEvent="(e) => {return upload(e, 'addressFile')}"/>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <h4>香港交货</h4>
        <el-row>
          <el-col :span="8">
            <el-form-item label="香港交货方式" prop="stockType">
              <el-select size="mini" v-model="form.stockType" placeholder="请选择交货方式">
                <el-option
                  v-for="item in hongkong"
                  :key="item.id"
                  :label="item.description" :value="item.description"/>
              </el-select>
              <template v-for="item in hongkong">
                <div class="input-title" v-if="form.stockType === item.description && item.notice">
                  <i class="el-icon-info"/>
                  <span v-text="item.notice"/>
                </div>
              </template>
            </el-form-item>
          </el-col>
          <template v-for="item in hongkong" v-if="form.stockType === item.description && item.supportFile === true">
            <el-col :span="8">
              <el-form-item>
                <el-switch
                  v-model="select.file1"
                  active-text="表单录入"
                  inactive-text="文件导入"/>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
        <template v-for="item in hongkong" v-if="form.stockType === item.description && item.requiredAddress === true && select.file1">
          <el-row>
            <el-col :span="8">
              <el-form-item label="收货人" prop="stockAddress.name" :rules="[{required: true, message: '收货人信息不能为空'}]">
                <el-input size="mini" v-model="form.stockAddress.name"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式" prop="stockAddress.telephone" :rules="[{required: true, message: '联系方式不能为空'},{validator: checkTel, trigger: 'blur'}]">
                <el-input size="mini" v-model="form.stockAddress.telephone"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="仓库/提货地址" prop="stockAddress.detailAddress" :rules="[{required: true, message: '收货地址不能为空'}]">
                <el-input size="mini" v-model="form.stockAddress.detailAddress"/>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template v-for="item in hongkong" v-if="form.stockType === item.description && item.supportFile === true && !select.file1">
          <el-row>
            <el-col :span="12">
              <el-form-item>
                <template v-if="$route.query.id">
                  <upload placeholder="请上传香港交货单" @closeEvent="(e) => {return closeFile(e, 'addressFile')}" @uploadEvent="(e) => {return upload(e, 'addressFile')}" :fileData="sheetInfo.addressFileUrl"/>
                </template>
                <template v-else>
                  <upload placeholder="请上传香港交货单" @closeEvent="(e) => {return closeFile(e, 'addressFile')}" @uploadEvent="(e) => {return upload(e, 'addressFile')}"/>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <el-row>
          <el-col :span="12">
            <div class="file_item" v-if="$route.query.id">
              <upload title="供应商合同" placeholder="请上传供应商合同" @closeEvent="(e) => {return closeFile(e, 'contact')}" @uploadEvent="(e) => {return upload(e, 'contact')}" :fileData="sheetInfo.contactUrl"/>
              <upload title="供应商发票" placeholder="请上传供应商发票" @closeEvent="(e) => {return closeFile(e, 'bill')}" @uploadEvent="(e) => {return upload(e, 'bill')}" :fileData="sheetInfo.billUrl"/>
              <upload title="供应商箱单" placeholder="请上传供应商箱单" @closeEvent="(e) => {return closeFile(e, 'packagelist')}" @uploadEvent="(e) => {return upload(e, 'packagelist')}" :fileData="sheetInfo.packagelistUrl"/>
            </div>
            <div class="file_item" v-else>
              <upload title="供应商合同" placeholder="请上传供应商合同" @closeEvent="(e) => {return closeFile(e, 'contact')}" @uploadEvent="(e) => {return upload(e, 'contact')}"/>
              <upload title="供应商发票" placeholder="请上传供应商发票" @closeEvent="(e) => {return closeFile(e, 'bill')}" @uploadEvent="(e) => {return upload(e, 'bill')}"/>
              <upload title="供应商箱单" placeholder="请上传供应商箱单" @closeEvent="(e) => {return closeFile(e, 'packagelist')}" @uploadEvent="(e) => {return upload(e, 'packagelist')}"/>
            </div>
          </el-col>
        </el-row>
        <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 form.commissionSheetDetail">
              <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}" @click="cellClick(index, 'commodityName')" @dblclick="dblclick('commodityName', index)">
                <template v-if="!item.dblclick.commodityName">
                  <span v-text="item.commodityName"></span>
                </template>
                <template v-else>
                  <input type="text" v-model="item.commodityName" :ref="'commodityName' + index" @blur="vaildCommodityName(index)" maxlength="100">
                </template>
              </td>
              <td :class="{err: item.errMsg.cmpCode, is_select: item.isSelect.cmpCode}" @click="cellClick(index, 'cmpCode')" @dblclick="dblclick('cmpCode', index)">
                <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}" @click="cellClick(index, 'amount')" @dblclick="dblclick('amount', index)">
                <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}" @click="cellClick(index, 'cartonNum')" @dblclick="dblclick('cartonNum', index)">
                <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}" @click="cellClick(index, 'netWeight')" @dblclick="dblclick('netWeight', index)">
                <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}" @click="cellClick(index, 'grossWeight')" @dblclick="dblclick('grossWeight', index)">
                <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}" @click="cellClick(index, 'currency')" @dblclick="dblclick('currency', index)">
                <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}" @click="cellClick(index, 'unitPrice')" @dblclick="dblclick('unitPrice', index)">
                <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}" @click="cellClick(index, 'totalPrice')" @dblclick="dblclick('totalPrice', index)">
                <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}" @click="cellClick(index, 'brand')" @dblclick="dblclick('brand', index)">
                <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}" @click="cellClick(index, 'producingArea')" @dblclick="dblclick('producingArea', index)">
                <template v-if="!item.dblclick.producingArea">
                  <span v-text="item.producingArea"></span>
                </template>
                <template v-else>
                  <input type="text" v-model="item.producingArea" :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}" @click="cellClick(index, 'batchNum')" @dblclick="dblclick('batchNum', index)">
                <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}" @click="cellClick(index, 'remark')" @dblclick="dblclick('remark', index)" :title="item.remark">
                <template v-if="!item.dblclick.remark">
                  <span v-text="item.remark"></span>
                </template>
                <template v-else>
                  <input type="text" v-model="item.remark" :ref="'remark' + index" @blur="vaildRemark(index)" maxlength="100">
                </template>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </el-form>
      <div class="form-btn" ref="btnEvent">
        <el-button type="blur" @click="mergeTd">合 并</el-button>
        <el-button type="blur" @click="splitTd">拆 分</el-button>
        <el-button :disabled="hasEdit" type="blur" @click="addTable">新增</el-button>
        <el-button type="yellow" @click="submitSave('form')">提交</el-button>
        <el-button type="yellow_plain" @click="submitCancel('form')">取消</el-button>
      </div>
      <div class="btn_event" v-if="fullHeight">
        <el-button type="blur" @click="mergeTd">合 并</el-button>
        <el-button type="blur" @click="splitTd">拆 分</el-button>
        <el-button :disabled="hasEdit" type="blur" @click="addTable">新增</el-button>
        <el-button type="yellow" @click="submitSave('form')">提交</el-button>
        <el-button type="yellow_plain" @click="submitCancel('form')">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {Upload} from '@/components/common'
  export default {
    name: 'EntrustApply',
    layout: 'default',
    middleware: 'authenticated',
    fetch({store, route}) {
      return Promise.all([
        store.dispatch('loadDelivery', {type: 'importdelivery', enuu: store.state.option.user.data.content.spaceUU}),
        store.dispatch('loadStock', {type: 'importstock', enuu: store.state.option.user.data.content.spaceUU}),
        route.query.id ? store.dispatch('loadSheetDetails', {id: route.query.id}) : ''
      ])
    },
    components: {
      Upload
    },
    data () {
      return {
        fullHeight: false,
        hasEdit: false,
        select: {
          file1: true,
          file: true
        },
        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: [],
        rules: {
          stockType: [
            {required: true, message: '请选择香港交货方式', trigger: 'blur'}
          ],
          deliveryType: [
            {required: true, message: '请选择香港交货方式', trigger: 'blur'}
          ]
        },
        form: {
          baileeCompanyenuu: '10041166',
          baileeCompanyName: '优软科技测试',
          warehousingNo: '测试',
          commissionCompany: '',
          commissionPersonLiable: '',
          commissionPersonLiableTel: '',
          stockType: '',
          stockAddress: {
            name: '',
            telephone: '',
            detailAddress: ''
          },
          deliveryType: '',
          deliveryAddress: {
            name: '',
            telephone: '',
            detailAddress: ''
          },
          commissionSheetDetail:[{
            detno: 1,
            commodityName: '',
            cmpCode: '',
            amount: '',
            cartonNum: '',
            netWeight: '',
            grossWeight: '',
            currency: '',
            unitPrice: '',
            totalPrice: '',
            brand: '',
            producingArea: '',
            batchNum: '',
            remark: '',
            errMsg: {
              commodityName: false,
              cmpCode: false,
              amount: false,
              cartonNum: false,
              netWeight: false,
              grossWeight: false,
              currency: false,
              unitPrice: false,
              totalPrice: false,
              brand: false,
              producingArea: false,
              batchNum: false,
              remark: false
            },
            isSelect: {
              commodityName: false,
              cmpCode: false,
              amount: false,
              cartonNum: false,
              netWeight: false,
              grossWeight: false,
              currency: false,
              unitPrice: false,
              totalPrice:false,
              brand: false,
              producingArea: false,
              batchNum: false,
              remark: false
            },
            dblclick: {
              commodityName: false,
              cmpCode: false,
              amount: false,
              cartonNum: false,
              netWeight: false,
              grossWeight: false,
              currency: false,
              unitPrice: false,
              totalPrice:false,
              brand: false,
              producingArea: false,
              batchNum: false,
              remark: false
            },
            rowspan: {
              cartonNum: 1,
              netWeight: 1,
              grossWeight: 1,
              commodityName: 1,
              cmpCode: 1,
              amount: 1,
              currency: 1,
              unitPrice: 1,
              totalPrice: 1,
              brand: 1,
              producingArea: 1,
              batchNum: 1,
              remark: 1
            },
            show: {
              commodityName: true,
              cmpCode: true,
              amount: true,
              currency: true,
              unitPrice: true,
              totalPrice: true,
              brand: true,
              producingArea: true,
              batchNum: true,
              remark: true,
              cartonNum: true,
              netWeight: true,
              grossWeight: true
            }
          }]
        }
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.clearSheet()
        let _this = this
        this.hasEdit = this.$route.query.id ? true : false
        window.addEventListener('scroll', function () {
          _this.onScroll()
        }, false)
      })
    },
    computed: {
      sheetInfo () {
        return this.$store.state.severSheet.details.data.content
      },
      shenzhen () {
        return this.$store.state.delivery.shenzhen.data.content
      },
      hongkong () {
        return this.$store.state.delivery.hongkong.data.content
      }
    },
    methods: {
      // 检测滚动事件
      onScroll () {
        if (this.$refs.btnEvent) {
          this.fullHeight = this.$refs.btnEvent.offsetTop - (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop) >= window.innerHeight
        }
      },
      // 数据增加属性
      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 (Number(_m[j].split('_')[1]) - Number(_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.fileList = []
        this.rowspan = []
        if (this.$route.query.id) {
          this.form.commissionCompany = this.sheetInfo.commissionCompany
          this.form.commissionPersonLiable = this.sheetInfo.commissionPersonLiable
          this.form.commissionPersonLiableTel = this.sheetInfo.commissionPersonLiableTel
          this.form.stockType = this.sheetInfo.stockType
          if (this.sheetInfo.stockContactInfo) {
            this.form.stockAddress.name = JSON.parse(this.sheetInfo.stockContactInfo).name
            this.form.stockAddress.telephone = JSON.parse(this.sheetInfo.stockContactInfo).telephone
            this.form.stockAddress.detailAddress = JSON.parse(this.sheetInfo.stockContactInfo).detailAddress
          }
          this.form.deliveryType = this.sheetInfo.deliveryType
          if (this.sheetInfo.deliveryContactInfo) {
            this.form.deliveryAddress.name = JSON.parse(this.sheetInfo.deliveryContactInfo).name
            this.form.deliveryAddress.telephone = JSON.parse(this.sheetInfo.deliveryContactInfo).telephone
            this.form.deliveryAddress.detailAddress = JSON.parse(this.sheetInfo.deliveryContactInfo).detailAddress
          }
          let list = JSON.parse(JSON.stringify(this.sheetInfo.commissionSheetDetail)).sort((a, b) => {
            return a.detno > b.detno
          })
          this.form.commissionSheetDetail = this.addAttrData(list)
          this.getSplitData(this.form.commissionSheetDetail, this.tableData.filters)
          for (let key of this.form.commissionSheetDetail.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)
            this.vaildTotalPrice(key)
          }
        } else {
          this.form.commissionSheetDetail = []
          this.addTable()
        }
      },
      // 删除指定行
      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: 1,
          commodityName: '',
          cmpCode: '',
          amount: '',
          cartonNum: '',
          netWeight: '',
          grossWeight: '',
          currency: '',
          unitPrice: '',
          totalPrice: '',
          brand: '',
          producingArea: '',
          batchNum: '',
          remark: ''
        }
        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()
        })
      },
      // 选择文件，对文件内容打包处理
      upload (e, type) {
        this.fileList[type] = e
      },
      // 删除选择文件
      closeFile (e, type) {
        delete this.fileList[type]
      },
      // 验证手机号
      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
          this.vaildTotalPrice (type)
        }
      },
      // 验证箱数
      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
          this.vaildTotalPrice (type)
        }
      },
      // 验证总价
      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 = Number(this.form.commissionSheetDetail[type].amount) * Number(this.form.commissionSheetDetail[type].unitPrice)
          let reg = /^\d*\.?\d{0,4}$/
          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
      },
      // 验证备注信息
      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.slice()
            list.forEach((value, key) => {
              console.log(value)
              list[key].detno = key + 1
              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)
              this.vaildTotalPrice(key)
            })
            list.forEach((i, key) => {
              console.log(key)
              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.totalPrice == true ||
                i.errMsg.remark == true) {
                this.$message({
                  message: '请正确填写上面的信息，确认无误！',
                  type: 'warning'
                })
                return false
              }
            })
            list.forEach((i, key) => {
              console.log(key)
              i.grossWeight == '-1' ? i.grossWeight = null : i.grossWeight = Number(i.grossWeight)
              i.netWeight == '-1' ? i.netWeight = null : i.netWeight = Number(i.netWeight)
              i.cartonNum == '-1' ? i.cartonNum = null : i.cartonNum = Number(i.cartonNum)
              i.amount == '-1' ? i.amount = null : i.amount = Number(i.amount)
              i.unitPrice = Number(i.unitPrice)
              i.totalPrice = Number(i.totalPrice)
            })
            this.form.commissionSheetDetail = list
            let config = {
              headers: {'Content-Type': 'multipart/form-data'}
            }
            let params = new FormData()
            params.append('addressFile' , this.fileList.addressFile)
            params.append('contact' , this.fileList.contact)
            params.append('bill' , this.fileList.bill)
            params.append('packagelist' , this.fileList.packagelist)
            params.append('params' , JSON.stringify(this.form))
            if (this.$route.query.id) {
              params.append('id' , this.$route.query.id)
              this.$http.post('/CommissionSheet/update', params, config)
                .then(response => {
                  if (response.data.success) {
                    this.$message({
                      message: '报关申请修改成功！',
                      type: 'success'
                    })
                    this.$router.push('/severPage/' + response.data.content.id)
                  } else {
                    this.$message({
                      message: response.data.message,
                      type: 'warning'
                    })
                    window.location.href = '/severPage/entrustApply?id=' + response.data.content.id
                  }
                }).catch(() => {
                this.$message.error( '请检查网络，提交失败！')
              })
            } else {
              this.$http.post('/CommissionSheet/save', params, config)
                .then(response => {
                  if (response.data.success) {
                    this.$message({
                      message: '报关申请提交成功',
                      type: 'success'
                    })
                    this.$router.push('/severPage/' + response.data.content.id)
                  } else {
                    this.$message({
                      message: response.data.message,
                      type: 'warning'
                    })
                    window.location.href = '/severPage/entrustApply?id=' + 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 0;
    }
    .el-form-item {
      position:relative;
      .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;
    }
    .table-info{
      padding-top:30px;
      margin-bottom:55px;
      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;
        }
        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;
          }
        }
      }
    }
    .btn_event{
      position:fixed;
      bottom:0;
      width:1190px;
      margin-left: -15px;
      background: #fef8f3;
      height:60px;
      line-height: 60px;
      text-align: center;
    }
    .form-btn{
      width:100%;
      margin:0 auto;
      text-align: center;
    }
  }
</style>