DSDSWeb/src/views/sampleEntry.vue

<template>
  <!--
   1.先填写并保存平台信息，才能进行下一步，平台信息保存后不可修改
   2.设备信息点击下一步会调取保存接口
   3. 查看时所有都不能更改
   4. 编辑时，平台不能更改，但可以新增数据样品，已有的样本信息通过弹窗形式更改和查看
-->
  <div class="mainBox page-body">
    <div class="page-header">
      <h1 class="page-title">数据样品信息录入</h1>
      <el-breadcrumb>
        <el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{name: 'sampleRemitt'}">数据样品信息汇交</el-breadcrumb-item>
        <el-breadcrumb-item>数据样品信息录入</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-collapse v-model="activeName" accordion @change="handleChange">
      <el-collapse-item name="1">
        <template slot="title">
          <div class="topic1">
            ① 平台信息
          </div>
        </template>
        <div class="formBox">
          <el-form ref="formPlat" :inline="true" class="filter-box" :rules="rules" label-width="120px" :model="addFrom">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="航次名称：" prop="voyageName">
                  <el-select v-model="addFrom.voyageName" placeholder="" size="medium" :disabled="platFlag" @change="getAllOrg">
                    <el-option
                      v-for="item in voyageList"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="平台类型：" prop="platformType">
                  <el-select v-model="addFrom.platformType" placeholder="" size="medium" :disabled="platFlag" @change="platformTypeChange">
                    <el-option
                      v-for="item in platformTypeOption"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="平台名称：" prop="platformName">
                  <el-input
                    v-model="addFrom.platformName"
                    size="medium"
                    auto-complete="off"
                    placeholder=""
                    :disabled="platFlag"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="潜次号：" prop="submariner">
                  <el-input v-model="addFrom.submariner" size="medium" :disabled="platFlag" />
                </el-form-item>
              </el-col>

            </el-row>
            <div v-if="addFrom.platformType=='载人潜水器'">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="左舷：" prop="portSide">
                    <el-input v-model="addFrom.portSide" size="medium" :disabled="platFlag" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="右舷：" prop="starboard">
                    <el-input v-model="addFrom.starboard" size="medium" :disabled="platFlag" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="主驾：" prop="mainDriver">
                    <el-input v-model="addFrom.mainDriver" size="medium" :disabled="platFlag" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="入水点信息：" />
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="经度（°）：" prop="longitude">
                    <el-input v-model="addFrom.longitude" size="medium" :disabled="platFlag" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="纬度（°）：" prop="latitude">
                    <el-input v-model="addFrom.latitude" size="medium" :disabled="platFlag" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="深度（米）：" prop="depth">
                    <el-input v-model="addFrom.depth" size="medium" :disabled="platFlag" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="下潜时间信息：" />
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="入水时间：">
                    <el-date-picker
                      v-model="addFrom.entryTime"
                      size="medium"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width:100%;"
                      placeholder=""
                      :disabled="platFlag"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="坐底时间：">
                    <el-date-picker
                      v-model="addFrom.sittingTime"
                      size="medium"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width:100%;"
                      placeholder=""
                      :disabled="platFlag"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="抛载上浮时间：">
                    <el-date-picker
                      v-model="addFrom.floatTime"
                      size="medium"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width:100%;"
                      placeholder=""
                      :disabled="platFlag"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="回收甲板时间：" prop="latitude">
                    <el-date-picker
                      v-model="addFrom.recoveryDeckTime"
                      size="medium"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width:100%;"
                      placeholder=""
                      :disabled="platFlag"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <div class="fileBox">
                  <button v-show="status==''" class="fileButton">上传下潜轨迹文件</button>
                  <input
                    ref="platFile"
                    type="file"
                    class="file1"
                    multiple
                    @change="inputChangePlat($event)"
                  >
                  <ul class="fileList">
                    <li v-for="(item, index) in platFileList" :key="index">
                      <p>
                        <span class="docName">{{ item.fileName }}</span>
                        <el-button v-show="status==''" type="danger" size="mini" @click="deleteDoc('platFileList',item.id)">删除</el-button>
                        <el-button type="primary" size="mini" @click="downloadDoc(item.id)">下载</el-button>
                      </p>

                    </li>
                  </ul>
                </div>

              </el-row>
            </div>
            <div v-if="addFrom.platformType!='载人潜水器'">
              <el-row>
                <el-form-item label="布放点信息：" />
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="经度（°）：" prop="longitude">
                    <el-input v-model="addFrom.longitude" size="medium" :disabled="platFlag" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="纬度（°）：" prop="latitude">
                    <el-input v-model="addFrom.latitude" size="medium" :disabled="platFlag" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="深度（米）：" prop="depth">
                    <el-input v-model="addFrom.depth" size="medium" :disabled="platFlag" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="作业时间信息：" />
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="入水时间：">
                    <el-date-picker
                      v-model="addFrom.entryTime"
                      size="medium"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width:100%;"
                      placeholder=""
                      :disabled="platFlag"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="出水时间：" prop="sittingTime">
                    <el-date-picker
                      v-model="addFrom.surfacingTime"
                      size="medium"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width:100%;"
                      placeholder=""
                      :disabled="platFlag"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <el-row>
              <div class="tep_t">
                <el-button type="primary" size="medium" :disabled="platFlag" @click="savePlatInfo('formPlat')">保存</el-button>
                <el-button v-show="activeName>1" size="medium" @click="turnPage('last')">上一步</el-button>
                <el-button v-show="activeName<3" type="primary" size="medium" @click="turnPage('next')">下一步</el-button>
              </div>
            </el-row>
          </el-form>

        </div>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          <div class="topic1">
            ②设备信息
          </div>
        </template>
        <div class="formBox">
          <el-form ref="docForm" :inline="true" class="filter-box" :rules="docInfoRules" label-width="120px" :model="docInfoForm">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="设备类型：" prop="equipmentType">
                  <el-input v-model="docInfoForm.equipmentType" size="medium" placeholder="" clearable :disabled="status=='view'" @click.native="openListDialog(2,'设备类型')" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备序列号：">
                  <el-input v-model="docInfoForm.serialNumber" size="medium" :disabled="status=='view'" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <div class="tep_t">
                <el-button type="primary" size="medium" :disabled="status=='view'" @click="saveDoc('formPlat')">保存</el-button>
                <el-button v-show="activeName>1" size="medium" @click="turnPage('last')">上一步</el-button>
                <el-button v-show="activeName<3" type="primary" size="medium" @click="turnPage('next')">下一步</el-button>
              </div>
            </el-row>
          </el-form>
        </div>

      </el-collapse-item>

      <el-collapse-item name="3">
        <template slot="title">
          <div class="topic1">
            ③数据样品信息
          </div>
        </template>
        <div class="formBox">
          <el-form ref="sampleForm" :inline="true" class="filter-box" :rules="sampleRules" label-width="130px" :model="sampleForm" :disabled="status=='view'">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="设备类型：">
                  <el-select v-model="docInfoForm.equipmentType" placeholder="" size="medium" disabled>
                    <el-option
                      v-for="item in docTypeOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="作业类型：" prop="jobType">
                  <el-select v-model="sampleForm.jobType" placeholder="" size="medium" @change="handleJobChange1">
                    <el-option
                      v-for="item in jobTypeOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="作业序号：" prop="jobNum">
                  <el-input v-model="sampleForm.jobNum" size="medium" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="航次资助机构：" prop="fundingOrg">
                  <el-select
                    v-model="addFrom.fundingOrg"
                    multiple
                    placeholder=""
                    size="medium"
                    allow-create
                    default-first-option
                    filterable
                    clearable
                    value-key="name"
                    :disabled="platFlag"
                  >
                    <el-option
                      v-for="item in companyOption"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                  <!-- <el-tag
                    v-for="tag in sampleForm.fundingOrg"
                    :key="tag"
                    :closable="!platFlag"
                    :disable-transitions="false"
                    :disabled="platFlag"
                    @close="handleClose1(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                  <el-input
                    v-if="inputVisible"
                    ref="saveTagInput"
                    v-model="inputValue"
                    class="input-new-tag"
                    size="small"
                    :disabled="platFlag"
                    @keyup.enter="handleInputConfirm"
                    @blur="handleInputConfirm"
                  />
                  <el-button v-else class="button-new-tag" size="small" :disabled="platFlag" @click="showInput">+</el-button> -->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="数据公开期限：" prop="publicTime" :disabled="platFlag">
                  <el-select
                    v-model="sampleForm.publicTime"
                    placeholder=""
                    size="medium"
                    :disabled="platFlag"
                    clearable
                  >
                    <el-option
                      v-for="item in publicTimeOption"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <div v-if="sampleForm.jobType=='站位作业'">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="数据样品类型：" prop="sampleType">
                    <el-input v-model="sampleForm.sampleType" size="medium" placeholder="" @click.native="openListDialog(1,'数据样品类型')" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="时间：">
                    <el-date-picker
                      v-model="sampleForm.time"
                      size="medium"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width:100%;"
                      placeholder=""
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="经度（°）：">
                    <el-input v-model="sampleForm.longitude" size="medium" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="纬度（°）：">
                    <el-input v-model="sampleForm.latitude" size="medium" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="深度（米）：">
                    <el-input v-model="sampleForm.depth" size="medium" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="备注：">
                  <el-input v-model="sampleForm.remarks" type="textarea" size="medium" :rows="3" />
                </el-form-item>
              </el-row>

              <!-- <el-row>
                <el-form-item label="航次资助机构：" prop="company">
                  <el-select v-model="sampleForm.company" multiple placeholder="" size="medium">
                    <el-option
                      v-for="item in companyOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-row> -->

            </div>
            <div v-if="sampleForm.jobType=='测线作业'">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="数据样品类型：" prop="sampleType">
                    <el-input v-model="sampleForm.sampleType" size="medium" placeholder="" @click.native="openListDialog(1,'数据样品类型')" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="测线号：" prop="lineNum">
                    <el-input v-model="sampleForm.lineNum" size="medium" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="开始经度（°）：" prop="startLon">
                    <el-input v-model="sampleForm.startLon" size="medium" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="开始纬度（°）：" prop="startLat">
                    <el-input v-model="sampleForm.startLat" size="medium" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="结束经度（°）：" prop="endLon">
                    <el-input v-model="sampleForm.endLon" size="medium" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="结束纬度（°）：" prop="endLat">
                    <el-input v-model="sampleForm.endLat" size="medium" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="开始时间：" prop="startTime">
                    <el-date-picker
                      v-model="sampleForm.startTime"
                      size="medium"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width:100%;"
                      placeholder=""
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="结束时间：" prop="endTime">
                    <el-date-picker
                      v-model="sampleForm.endTime"
                      size="medium"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width:100%;"
                      placeholder=""
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <div class="fileBox">
                  <button class="fileButton">上传数据文件</button>
                  <input
                    ref="sampleFile"
                    type="file"
                    class="file1"
                    multiple
                    @change="inputChangeSample($event,'sample')"
                  >
                  <ul class="fileList">
                    <li v-for="(item, index) in sampleFileList" :key="index">
                      <p>
                        <span class="docName">{{ item.fileName }}</span>
                        <el-button type="danger" size="mini" @click="deleteDoc('sampleFileList',item.id)">删除</el-button>
                        <el-button type="primary" size="mini" @click="downloadDoc(sampleForm.documentId)">下载</el-button>
                      </p>

                    </li>
                  </ul>
                </div>

              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="数据格式：">
                    <el-input v-model="sampleForm.fileType" size="medium" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="数据处理状态：" prop="dataStatus">
                    <el-select v-model="sampleForm.dataStatus" placeholder="" size="medium">
                      <el-option
                        v-for="item in dataProcessOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="备注：" prop="description">
                    <el-input v-model="sampleForm.description" size="medium" />
                  </el-form-item>
                </el-col>
              </el-row>

            </div>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="数据样品标签：">
                  <el-select v-model="sampleForm.tag" placeholder="" size="medium" clearable @change="tagChange" @clear="tagChange">
                    <el-option
                      v-for="item in tagTypeOption"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="搜捞任务编号：">
                  <el-input v-model="sampleForm.tagNo" size="medium" disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="fileBox fileBox2">
            <el-button type="primary" size="medium" :disabled="status=='view'" @click="addDataSample('sampleForm')">添加数据样品条目</el-button>
          </div>
          <el-table v-loading="loading" stripe border :data="tableData" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" height="600px" @selection-change="handleSelectionChange" @row-click="confirmModal">
            <el-table-column
              type="index"
              width="50"
            />
            <el-table-column prop="sampleNumber" label="数据样品编号" />
            <el-table-column prop="equipmentType" label="设备类型" />
            <el-table-column prop="serialNumber" label="设备序列号" />
            <!-- <el-table-column prop="status" label="计划状态" /> -->
            <el-table-column prop="jobType" label="作业类型" />
            <el-table-column prop="sampleType" label="数据样品类型" />
            <el-table-column prop="time" label="时间" />
            <el-table-column v-show="status" label="操作" width="240">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="查看数据样品" placement="top-end">
                  <el-button id="view" size="mini" type="primary" class="el-icon-view" />
                </el-tooltip>
                <el-tooltip v-show="status=='edit'" class="item" effect="dark" content="编辑数据样品" placement="top-end">
                  <el-button id="edit" size="mini" type="warning" class="el-icon-edit" />
                </el-tooltip>
                <el-tooltip v-show="status!='view'" class="item" effect="dark" content="删除" placement="top-end">
                  <el-button id="delete" size="mini" type="danger" class="el-icon-delete" />
                </el-tooltip>
              </template>
            </el-table-column>

          </el-table>
          <el-row>
            <div class="tep_t">
              <el-button v-show="activeName>1" size="medium" @click="turnPage('last')">上一步</el-button>
              <el-button v-show="activeName<3" type="primary" size="medium" @click="turnPage('next')">下一步</el-button>
              <el-button v-show="status!='view' && tableData.length" size="medium" type="primary" @click="handleBack">完成</el-button>
            </div>
          </el-row>

        </div>

      </el-collapse-item>
    </el-collapse>
    <div class="modal">
      <el-dialog
        :title="userStatus? '编辑数据样品' : '查看数据样品'"
        :visible.sync="showUserForm"
        width="34%"
        :before-close="handleClose"
      >
        <!-- <el-form ref="form" :model="form" label-width="100px" :rules="rules">
          <el-form-item label="单位名称" prop="name">
            <el-input v-model="form.name" size="medium" auto-complete="off" placeholder="" />
          </el-form-item>
        </el-form> -->
        <el-form ref="form3" v-loading="formLoading" class="filter-box formSample" :rules="sampleRules" label-width="130px" :model="currentSample">
          <el-form-item label="设备类型：">
            <el-select v-model="currentSample.equipmentType" placeholder="" size="medium" disabled>
              <el-option
                v-for="item in docTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="作业类型：" prop="jobType">
            <el-select v-model="currentSample.jobType" placeholder="" size="medium" :disabled="!userStatus" @change="handleJobChange2">
              <el-option
                v-for="item in jobTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <div v-if="currentSample.jobType=='站位作业'">
            <el-form-item label="数据样品类型：" prop="sampleType">
              <el-input v-model="currentSample.sampleType" size="medium" placeholder="" :disabled="!userStatus" @click.native="openListDialog('edit','数据样品类型')" />
            </el-form-item>
            <el-form-item label="时间：">
              <el-date-picker
                v-model="currentSample.time"
                size="medium"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width:100%;"
                placeholder=""
                :disabled="!userStatus"
              />
            </el-form-item>
            <el-form-item label="经度（°）：">
              <el-input v-model="currentSample.longitude" size="medium" :disabled="!userStatus" />
            </el-form-item>
            <el-form-item label="纬度（°）：">
              <el-input v-model="currentSample.latitude" size="medium" :disabled="!userStatus" />
            </el-form-item>
            <el-form-item label="深度（米）：">
              <el-input v-model="currentSample.depth" size="medium" :disabled="!userStatus" />
            </el-form-item>
            <el-form-item label="备注：">
              <el-input v-model="currentSample.remarks" type="textarea" size="medium" :rows="3" :disabled="!userStatus" />
            </el-form-item>
          </div>
          <div v-if="currentSample.jobType=='测线作业'">
            <el-form-item label="数据样品类型：" prop="sampleType">
              <el-input v-model="currentSample.sampleType" size="medium" placeholder="" :disabled="!userStatus" @click.native="openListDialog('edit','数据样品类型')" />
            </el-form-item>
            <div class="fileBox fileBox3">
              <button v-show="userStatus" class="fileButton">上传数据文件</button>
              <input
                ref="sampleFile"
                type="file"
                class="file1"
                @change="inputChangeSample($event,'sampleEdit')"
              >
              <ul v-show="currentSample.documentId" class="fileList">
                <!-- <li v-for="(item, index) in detectFileList" :key="index">
                  <p>
                    <span class="docName">{{ item.fileName }}</span>
                    <el-button v-show="status!='view'" type="danger" size="mini" @click="deleteDoc(item.id)">删除</el-button>
                    <el-button type="primary" size="mini" @click="downloadDoc(item.id)">下载</el-button>
                  </p>
                </li> -->
                <li>
                  <p>
                    <span class="docName">{{ currentSample.fileName }}</span>
                    <el-button v-show="userStatus" type="danger" size="mini" @click="deleteDoc('currentSample')">删除</el-button>
                    <el-button type="primary" size="mini" @click="downloadDoc(currentSample.documentId)">下载</el-button>
                  </p>
                </li>
              </ul>
            </div>
            <el-form-item label="数据格式：">
              <el-input v-model="currentSample.fileType" size="medium" :disabled="!userStatus" />
            </el-form-item>
            <el-form-item label="数据处理状态：" prop="dataStatus">
              <el-select v-model="currentSample.dataStatus" placeholder="" size="medium" :disabled="!userStatus">
                <el-option
                  v-for="item in dataProcessOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

          </div>
        </el-form>

        <el-row v-show="userStatus" type="flex" justify="center">
          <el-button
            style="width: 100px"
            type="primary"
            size="medium"
            @click="saveData"
          >确定</el-button>
          <el-button
            size="medium"
            style="margin-left: 10px; width: 100px"
            type="info"
            plain
            @click="showUserForm = false;resetForm();"
          >取消</el-button>
        </el-row>
      </el-dialog>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showListDialog"
      :close-on-click-modal="false"
      :height="300"
      :append-to-body="true"
      width="800px"
    >
      <list-dialog v-if="showListDialog" :type="type" :choose-data="chooseData" :source-data="sourceData" @handleClose="closeListForm" @handleConfirm="confirmListForm" />
    </el-dialog>
    <el-dialog
      :title="dagdialogTitle"
      :visible.sync="tagVisable"
      :close-on-click-modal="false"
      :height="300"
      :append-to-body="true"
      width="800px"
    >
      <tag-dialog v-if="tagVisable" :type="type" :choose-data="chooseData" :source-data="sourceData" @handleClose="closeTagForm" @handleConfirm="confirmTagForm" />
    </el-dialog>
  </div>
</template>
<script>
import ListDialog from './listDialog.vue'
import TagDialog from './tagDialog.vue'
import { upload, platformAdd, sampleAdd, equAdd, deleteDoc, sampleShow, sampleUpdate, deleteSampleList, getAllVoyage, getDataList, getAllVoyageOrg
} from '@/api/remit'
export default {
  name: 'VoyageEntry',
  components: { ListDialog, TagDialog },
  props: {
  },
  data() {
    return {
      formLoading: false,
      loading: false,
      activeName: '1',
      showListDialog: false,
      tagVisable: false,
      dialogTitle: '',
      dagdialogTitle: '',
      // 1是新增的数据样品类型 2是设备信息的设备类型 'edit'是编辑弹窗中的数据样品类型
      listfLag: '',
      chooseData: '',
      sourceData: [],
      addFrom: {
        voyageName: '',
        platformName: '',
        platformType: '',
        submariner: '',
        portSide: '',
        starboard: '',
        mainDriver: '',
        longitude: '',
        latitude: '',
        depth: '',
        entryTime: '',
        surfacingTime: '', // 出水时间
        sittingTime: '',
        floatTime: '',
        recoveryDeckTime: '',
        documentId: null // 下潜轨迹文件id,
      },
      // 设备信息
      docInfoForm: {
        equipmentType: '',
        serialNumber: '', // 设备序列号
        platformId: null, // 平台id,
        equipmentId: ''
      },
      sampleForm: {
        'depth': '',						// 深度
        'equipmentId': '',					// 设备id
        'equipmentType': '',		//	设备类型
        'jobType': '站位作业',				//	工作类型
        'latitude': '',				//	纬度
        'longitude': '',				// 经度
        'platformId': '',				// 平台id
        'sampleNumber': '',		//	样品编号
        'sampleType': '',			//	样品类型
        'serialNumber': '',				// 设备序列号
        'time': '',				// 时间
        remarks: '',
        documentId: '', // 样品信息文件id
        fileType: '',
        dataStatus: '原始数据',
        lineNum: '',
        startLon: '',
        startLat: '',
        endLon: '',
        endLat: '',
        startTime: '',
        endTime: '',
        jobNum: '',
        tag: '',
        tagNo: '',
        fundingOrg: [],
        publicTime: ''
      },
      bstDate: null,
      multipleSelection: [],
      tableData: [
      ],
      voyageList: [],
      rules: {
        voyageName: [
          { required: true, message: '请输入航次名称', trigger: 'blur' }
        ],
        platformName: [
          { required: true, message: '请输入平台名称', trigger: 'blur' }
        ],
        platformType: [
          { required: true, message: '请选择平台类型', trigger: 'change' }
        ],
        submariner: [
          { required: true, message: '请输入潜次号', trigger: 'blur' }
        ]
      },
      docInfoRules: {
        equipmentType: [
          { required: true, message: '请选择设备类型', trigger: 'change' }
        ]
      },
      sampleRules: {
        jobType: [
          { required: true, message: '请选择作业类型', trigger: 'change' }
        ],
        jobNum: [
          { required: true, message: '请输入作业序号', trigger: 'blur' }
        ],
        sampleType: [
          { required: true, message: '请选择数据样品类型', trigger: 'change' }
        ]
      },
      platformTypeOption: [
        // {
        //   label: '载人潜水器',
        //   value: '载人潜水器'
        // },
        // {
        //   label: '着陆器',
        //   value: '着陆器'
        // }
      ],
      personOption: [
        {
          label: '首席A',
          value: '首席A'
        },
        {
          label: '首席B',
          value: '首席B'

        }
      ],
      companyOption: [
      ],
      docTypeOption: [
        {
          label: '机械手',
          value: '机械手'
        },
        {
          label: '沉积物取样器',
          value: '沉积物取样器'
        },
        {
          label: '原位过滤装置',
          value: '原位过滤装置'
        },
        {
          label: 'CBD',
          value: 'CBD'
        }
      ],
      jobTypeOption: [
        {
          label: '站位作业',
          value: '站位作业'
        },
        {
          label: '测线作业',
          value: '测线作业'
        }
      ],
      dataProcessOption: [
        {
          label: '原始数据',
          value: '原始数据'
        },
        {
          label: '预处理数据',
          value: '预处理数据'
        },
        {
          label: '后处理数据',
          value: '后处理数据'
        }
      ],
      publicTimeOption: [
        '公开获取', '延期公开(6个月)', '延公开(12个月)', '延公开(24个月)', '不公开'
      ],
      platFileList: [
        // {
        //   fileName: '航次导航文件A',
        //   id: 1
        // }
      ],
      sampleFileList: [
        // {
        //   fileName: '航次导航文件A',
        //   id: 1
        // }
      ],
      platFlag: false,
      type_b: null,
      status: '',
      // 查看
      userStatus: false,
      showUserForm: false,
      currentSample: {
        dataStatus: '',
        depth: '',
        documentId: '',
        equipmentId: '',
        equipmentType: '',
        fileName: null,
        fileType: '',
        id: '',
        jobType: '',
        latitude: '',
        longitude: '',
        platformId: '',
        remarks: '',
        sampleId: '',
        sampleNumber: '',
        sampleType: '',
        serialNumber: '',
        time: ''
      },
      inputVisible: false,
      inputValue: '',
      type: '',
      tagTypeOption: ['应急搜捞']
    }
  },
  mounted() {
    if (this.$route.query.platformId) {
      this.docInfoForm.platformId = this.sampleForm.platformId = this.$route.query.platformId
      this.docInfoForm.equipmentId = this.sampleForm.equipmentId = this.$route.query.equipmentId
      // 编辑/查看
      this.status = this.$route.query.status
      this.showData()
      this.getAllOrg()
      this.platFlag = true
    }
    this.getAllVoyage()
    this.getDataList('platformType')
  },
  methods: {
    // 新增、平台类型修改
    platformTypeChange(val) {
      if (val == '载人潜水器') {
        this.addFrom.longitude = ''
        this.addFrom.latitude = ''
        this.addFrom.depth = ''
        this.addFrom.entryTime = ''
        this.addFrom.surfacingTime = ''
      } else {
        this.addFrom.portSide = ''
        this.addFrom.starboard = ''
        this.addFrom.mainDriver = ''
        this.addFrom.longitude = ''
        this.addFrom.latitude = ''
        this.addFrom.depth = ''
        this.addFrom.entryTime = ''
        this.addFrom.sittingTime = ''
        this.addFrom.floatTime = ''
        this.addFrom.recoveryDeckTime = ''
        this.platFileList = []
        this.addFrom.documentId = ''
      }
    },
    // 新增、作业类型修改
    handleJobChange1(val) {
      if (val == '测线作业') {
        this.sampleForm.sampleType = ''
        this.sampleForm.time = ''
        this.sampleForm.longitude = ''
        this.sampleForm.latitude = ''
        this.sampleForm.depth = ''
        this.sampleForm.remarks = ''
        this.sampleForm.lineNum = ''
        this.sampleForm.startLon = ''
        this.sampleForm.startLat = ''
        this.sampleForm.endLon = ''
        this.sampleForm.endLat = ''
        this.sampleForm.startTime = ''
        this.sampleForm.endTime = ''
      } else {
        this.sampleForm.sampleType = ''
        this.sampleFileList = []
        this.sampleForm.documentId = ''
        this.sampleForm.fileType = ''
        this.sampleForm.dataStatus = '原始数据'
        this.sampleForm.remarks = ''
      }
    },
    // 弹窗作业类型修改
    handleJobChange2(val) {
      if (val == '测线作业') {
        this.currentSample.sampleType = ''
        this.currentSample.time = ''
        this.currentSample.longitude = ''
        this.currentSample.latitude = ''
        this.currentSample.depth = ''
        this.currentSample.remarks = ''
      } else {
        this.currentSample.sampleType = ''
        this.currentSample.fileName = ''
        this.currentSample.documentId = ''
        this.currentSample.fileType = ''
        this.currentSample.dataStatus = '原始数据'
        this.currentSample.remarks = ''
      }
    },
    openListDialog(value, title) {
      this.listfLag = value
      this.dialogTitle = title
      if (title == '设备类型') {
        this.getDataList('equType')
        this.chooseData = this.docInfoForm.equipmentType
      } else if (title == '数据样品类型') {
        this.getDataList('sampleType')
        this.chooseData = value == 'edit' ? this.currentSample.sampleType : this.sampleForm.sampleType
      }
    },
    // 关闭列表
    closeListForm() {
      this.showListDialog = false
    },
    // 保存列表
    confirmListForm(val) {
      this.showListDialog = false
      if (val) {
        if (this.dialogTitle == '数据样品类型') {
          if (this.listfLag == 'edit') {
            this.currentSample.sampleType = val
          } else {
            this.sampleForm.sampleType = val
          }
        } else {
          this.docInfoForm.equipmentType = val
        }
      }
    },
    // 保存列表
    confirmTagForm(val) {
      this.tagVisable = false
      this.sampleForm.tagNo = val
    },
    closeTagForm() {
      this.tagVisable = false
    },
    // 回显
    async showData() {
      const data = { platformId: this.docInfoForm.platformId, equipmentId: this.docInfoForm.equipmentId }
      try {
        const res = await sampleShow(data)
        if (res.code == 200) {
          this.addFrom = res.data.platform
          this.tableData = res.data.sample ? res.data.sample : []
          if (this.addFrom.startTime && this.addFrom.endTime) {
            this.bstDate = [this.addFrom.startTime, this.addFrom.endTime]
          }
          if (res.data.file) {
            this.platFileList = []
            this.platFileList[0] = res.data.file
            this.addFrom.documentId = res.data.file.documentId
          } else {
            this.platFileList = []
            this.addFrom.documentId = ''
          }
          this.docInfoForm = JSON.parse(JSON.stringify(res.data.equipment))
        }
      } catch (error) {
        console.log(error)
      }
    },
    saveData() {
      this.$refs['form3'].validate((valid) => {
        if (valid) {
          this.updateFunction()
        } else {
          return false
        }
      })
    },
    async updateFunction() {
      this.formLoading = true
      const data = this.currentSample
      try {
        const res = await sampleUpdate(data)
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.showData()
          this.formLoading = false
          this.showUserForm = false
        }
        this.formLoading = false
      } catch (error) {
        console.log(error)
        this.formLoading = false
      }
    },
    // 手动展开
    handleChange(val) {
      if (!this.docInfoForm.platformId && this.activeName > 1) {
        this.$message({
          message: '请填写并保存平台信息',
          type: 'warning',
          duration: 5000
        })
      } else if (!this.sampleForm.equipmentId && this.activeName > 2 && !this.status) {
        this.$message({
          message: '请填写并保存设备信息',
          type: 'warning',
          duration: 5000
        })
      }
    },
    getData() {

    },
    batchExport() {

    },
    voyageEntry() {

    },
    confirmModal(row, event, column) {
      var opType = column.target.id
      if (opType == 'view') {
        this.userStatus = false
        this.currentSample = JSON.parse(JSON.stringify(row))
        this.showUserForm = true
      } else if (opType == 'edit') {
        this.userStatus = true
        this.currentSample = JSON.parse(JSON.stringify(row))
        this.showUserForm = true
      } else if (opType == 'delete') {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.sampleDelete(row.sampleId)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    async sampleDelete(sampleId) {
      const _this = this
      this.formLoading = true
      const data = { sampleId }
      try {
        const res = await deleteSampleList(data)
        if (res.code == 200) {
          _this.$message({
            message: '删除成功！',
            type: 'success'
          })
          _this.showData()
        }
        this.formLoading = false
      } catch (error) {
        console.log(error)
        this.formLoading = false
      }
    },
    handleClose(done) { // 加一个点击遮罩和关闭按钮时的回调函数
      this.resetForm()
      done()
    },
    resetForm() {
      this.$refs['form3'].resetFields()
    },
    // 点击 平台保存按钮
    savePlatInfo(val) {
      this.$refs[val].validate((valid) => {
        if (valid) {
          this.addSavePlat()
        } else {
          return false
        }
      })
    },
    // 点击 设备保存按钮
    saveDoc(val) {
      if (!this.docInfoForm.platformId) {
        this.$message({
          message: '请保存平台信息',
          type: 'warning',
          duration: 5000
        })
      } else {
        this.$refs[val].validate((valid) => {
          if (valid) {
            this.addSaveEqu()
          } else {
            return false
          }
        })
      }
    },
    // 点击 添加样本信息按钮
    addDataSample(val) {
      debugger
      if (!this.docInfoForm.platformId) {
        this.$message({
          message: '请保存平台信息',
          type: 'warning',
          duration: 5000
        })
      } else if (!this.sampleForm.equipmentId) {
        this.$message({
          message: '请填写设备信息',
          type: 'warning',
          duration: 5000
        })
      } else {
        this.$refs[val].validate((valid) => {
          if (valid) {
            this.addSubmitFinal()
          } else {
            return false
          }
        })
      }
    },
    // 第一步保存平台信息
    async addSavePlat() {
      const data = this.addFrom
      try {
        const res = await platformAdd(data)
        if (res.code == 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })

          this.docInfoForm.platformId = this.sampleForm.platformId = res.data
          this.platFlag = true
          this.activeName = '2'
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 第二步保存设备信息
    async addSaveEqu() {
      const data = this.docInfoForm
      try {
        const res = await equAdd(data)
        if (res.code == 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.activeName = '3'
          this.sampleForm.equipmentId = res.data
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 第三步添加数据样品条目
    async addSubmitFinal() {
      const data = this.sampleForm
      data.fundingOrg = this.sampleForm.fundingOrg.join('、')
      try {
        const res = await sampleAdd(data)
        if (res.code == 200) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          const platformId = this.docInfoForm.platformId
          this.docInfoForm = {
            equipmentType: '',
            serialNumber: '', // 设备序列号
            platformId: platformId, // 平台id
            equipmentId: this.docInfoForm.equipmentId
          }
          this.sampleForm = {
            'depth': '',						// 深度
            'equipmentId': '',					// 设备id
            'equipmentType': '',		//	设备类型
            'jobType': '站位作业',				//	工作类型
            'latitude': '',				//	纬度
            'longitude': '',				// 经度
            'platformId': platformId,				// 平台id
            'sampleNumber': '',		//	样品编号
            'sampleType': '',			//	样品类型
            'serialNumber': '',				// 设备序列号
            'time': '',				// 时间
            remarks: '',
            documentId: '', // 样品信息文件id
            fileType: '',
            dataStatus: '原始数据',
            jobNum: '',
            tag: '',
            tagNo: '',
            fundingOrg: [],
            publicTime: ''
          }
          this.tableData = res.data
        }
      } catch (error) {
        console.log(error)
      }
    },
    turnPage(value) {
      // debugger
      if (!this.docInfoForm.platformId) {
        this.$message({
          message: '请保存平台信息',
          type: 'warning',
          duration: 5000
        })
        return
      } else if (!this.sampleForm.equipmentId && !this.status) {
        this.$message({
          message: '请填写设备信息',
          type: 'warning',
          duration: 5000
        })
        return
      }
      if (value == 'last') {
        this.activeName = String(Number(this.activeName) - 1)
      } else {
        this.activeName = String(Number(this.activeName) + 1)
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange: function(size) {
      this.pagesize = size
      this.getData()
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getData()
    },
    // async getFileList() {
    //   const data = {
    //     uuid: this.$route.query.uuid
    //   }
    //   try {
    //     const res = await getDetectFileList(data)
    //     if (res.code == 2000) {
    //       this.platFileList = res.data.platFileList
    //     }
    //   } catch (error) {
    //     console.log(error)
    //   }
    // },
    // 下潜轨迹文件上传
    async inputChangePlat(event) {
      const typeList = ['txt', 'csv', 'xlsx']
      let flag = true
      for (let i = 0; i < this.$refs.platFile.files.length; i++) {
        const arr = this.$refs.platFile.files[i].name.split('.')
        if (typeList.indexOf(arr[arr.length - 1])< 0 ) {
          flag = false
          this.$message({
            message: '仅支持上传txt/excel/csv文件',
            type: 'warning'
          })
          event.target.value = ''
          return
        }
      }
      if (flag) {
        for (let i = 0; i < this.$refs.platFile.files.length; i++) {
          const file = this.$refs.platFile.files[i]
          const fd = new FormData()
          fd.append('file', file)
          fd.append('type', 'DiveTrajectory')
          if (this.addFrom.documentId) {
            fd.append('findId', this.addFrom.documentId)
          }
          await this.fileUploads(fd, file.name, 'plat')
        }
      }
      event.target.value = ''
    },
    // 样品信息文件上传
    async inputChangeSample(event, val) {
      let flag = true
      for (let i = 0; i < this.$refs.sampleFile.files.length; i++) {
        const arr = this.$refs.sampleFile.files[i].name.split('.')
        if (arr[arr.length - 1] != 'csv') {
          flag = false
          this.$message({
            message: '请上传csv文件',
            type: 'warning'
          })
          event.target.value = ''
          return
        }
      }
      if (flag) {
        for (let i = 0; i < this.$refs.sampleFile.files.length; i++) {
          const file = this.$refs.sampleFile.files[i]
          const fd = new FormData()
          fd.append('file', file)
          fd.append('type', 'Sample')
          if (val == 'sample' && this.sampleForm.documentId) {
            fd.append('findId', this.sampleForm.documentId)
          } else if (val == 'sampleEdit' && this.sampleForm.documentId) {
            fd.append('findId', this.sampleForm.documentId)
          }
          await this.fileUploads(fd, file.name, val)
        }
      }
      event.target.value = ''
    },
    async fileUploads(fd, name, val) {
      try {
        const res = await upload(fd)
        if (res.code == 200) {
          for (const a in res.data) {
            if (val == 'plat') {
              if (a == 'findId') {
                this.addFrom.documentId = this.addFrom.documentId ? this.addFrom.documentId : res.data.findId
              } else {
                this.platFileList.push({ fileName: a, id: res.data[a] })
              }
            // this.addFrom.documentId = res.data
            // this.platFileList = [{ fileName: name, id: res.data }]
            } else if (val == 'sample') {
              if (a == 'findId') {
                this.sampleForm.documentId = this.sampleForm.documentId ? this.sampleForm.documentId : res.data.findId
              } else {
                this.sampleFileList.push({ fileName: a, id: res.data[a] })
              }
              // this.sampleForm.documentId = res.data
              // this.sampleFileList = [{ fileName: name, id: res.data }]
            } else {
              if (a == 'findId') {
                this.currentSample.documentId = this.currentSample.documentId ? this.currentSample.documentId : res.data.findId
              } else {
                // this.currentSample.push({ fileName: a, id: res.data[a] })
                this.currentSample.fileName = name
              }
            }
          }
        }else{
          this.$message({
            message:res.message,
            type: 'error'
          })
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 删除doc
    deleteDoc(arr, documentId) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.requestDelete(arr, documentId)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async downloadDoc(documentId) {
      window.location.href = process.env.VUE_APP_BASE_APIURL + '/remit/download?documentId=' + documentId
    },
    async requestDelete(arr, documentId) {
      const data = { id: '' }
      if (arr == 'platFileList') {
        data.documentId = documentId
        // this.addFrom.documentId = ''
      } else if (arr == 'sampleFileList') {
        data.documentId = documentId
        // this.sampleForm.documentId = ''
      } else {
        data.documentId = documentId
        // this.currentSample.documentId = ''
        this.currentSample.fileName = ''
      }
      const _this = this
      try {
        const res = await deleteDoc(data)
        if (res.code == 200) {
          _this[arr] = _this[arr].filter(item => item.id !== documentId)
          _this.$message({
            message: '删除成功！',
            type: 'success'
          })
        }
      } catch (error) {
        console.log(error)
      }
    },
    async getAllVoyage() {
      try {
        const res = await getAllVoyage()
        if (res.code == 200) {
          this.voyageList = res.data
        }
      } catch (error) {
        console.log(error)
      }
    },
    async getAllOrg() {
      if (this.addFrom.voyageName) {
        try {
          const res = await getAllVoyageOrg(this.addFrom.voyageName)
          if (res.code == 200) {
            this.companyOption = res.data
            this.addFrom.fundingOrg = ''
          }
        } catch (error) {
          console.log(error)
        }
      } else {
        this.companyOption = []
      }
    },
    async getDataList(type) {
      this.type = type
      try {
        const res = await getDataList({ type })
        if (res.code == 200) {
          if (type == 'platformType') {
            this.platformTypeOption = res.data
          } else if (type == 'equType') {
            this.sourceData = res.data
            this.showListDialog = true
          } else if (type == 'sampleType') {
            this.sourceData = res.data
            this.showListDialog = true
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    handleBack() {
      this.$router.push({ name: 'sampleRemitt' })
    },
    handleClose1(tag) {
      this.sampleForm.fundingOrg.splice(this.sampleForm.fundingOrg.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.sampleForm.fundingOrg.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    tagChange() {
      if (this.sampleForm.tag) {
        this.tagVisable = true
        this.dagdialogTitle = '搜捞任务编列表'
      } else {
        this.sampleForm.tagNo = ''
      }
    }

  }
}
</script>
<style>
.formSample .el-form-item__content{
  /* width:55%; */
}

</style>
<style lang="scss" scoped>
.docName{
  padding-right:20px;
}
.fileList{
    /* margin-top:40px; */
    display: inline-block;
    margin-left:40px;
    height: auto;
    overflow: hidden;
}
.fileList li{
    float: left;
    margin-right:50px;
}
.fileBox2{
  float: right;
  /* margin:20px 0; */
  margin-bottom: 20px;

}
.fileBox3{
  margin:10px 0 20px;
}
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>