DSDSWeb/src/views/dataTransfer/voyageReg.vue

<template>
  <div id="" class="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: 'VoyageReg'}">数据汇交</el-breadcrumb-item>
        <el-breadcrumb-item>航次数据汇交</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="filter-container">
      <div class="search">
        <el-input placeholder="模糊查询" v-model="params.query" style="width: 300px;">
          <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
        </el-input>
      </div>
      <div class="checkBtn" style="display: flex">
        <el-button type="primary" size="medium" @click="handleAdd" style="margin-right: 10px;">航次数据录入</el-button>
        <el-upload
          class="upload-btn"
          ref="upload"
          action="action"
          :multiple="false"
          :show-file-list="false"
          :http-request="uploadReg"
          :before-upload="beforeUploadReg"
          accept=".xlsx"
        >
          <el-button :loading="loadingRegBtn">{{ textReg }}</el-button>
        </el-upload>
      </div>
    </div>
    <el-table ref="tableData" v-loading="loading" stripe border :data="tableData" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
      <el-table-column type="index" label="#" width="50"/>
      <el-table-column prop="voyage_name" label="航次名称" />
      <el-table-column prop="ship_name" label="科考船舶" />
      <el-table-column prop="voyage_start_date" label="航次开始">
        <template slot-scope="scope">
          <span>{{ scope.row.voyage_start_date ? scope.row.voyage_start_date.slice(0,10) : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="voyage_end_date" label="航次结束">
        <template slot-scope="scope">
          <span>{{ scope.row.voyage_end_date ? scope.row.voyage_end_date.slice(0,10) : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="voyage_officer" label="首席" />
      <el-table-column prop="member_total" label="参航人数" />
      <el-table-column prop="funding_org" label="资助机构" />
      <el-table-column prop="funding_code" label="资助编号" />
      <el-table-column label="操作" width="240">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="修改" placement="top-end">
            <el-button id="mod" size="mini" type="warning" class="el-icon-edit" @click="handleEdit(scope.row)" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="上传导航文件" placement="top-end">
            <el-button id="mod" size="mini" type="primary" class="el-icon-s-promotion" @click="handleUploadNav(scope.row)" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="上传参航人员" placement="top-end">
            <el-button id="mod" size="mini" type="info" class="el-icon-s-custom" @click="handlePeople(scope.row)" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-end">
            <el-button id="del" size="mini" type="danger" class="el-icon-delete" @click="handleDelete(scope.row)" />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box">
      <el-pagination
        background
        :page-sizes="[10, 20, 30]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :current-page="pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!--    新增/编辑弹窗-->
    <el-dialog :title="`${title}航次信息`" :visible.sync="open" :before-close="cancel" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="航次名称" prop="voyage_name">
              <el-input v-model="form.voyage_name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资助编号" prop="funding_code">
              <el-input v-model="form.funding_code" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="科考船舶" prop="ship_name">
              <el-select v-model="form.ship_name" style="width: 100%">
                <el-option
                  v-for="(item, index) in shipOptions"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="涉密航次" prop="serect_status">
              <el-select v-model="form.serect_status" style="width: 100%">
                <el-option
                  v-for="(item, index) in secretOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="航次开始" prop="start_date">
              <el-date-picker
                style="width: 100%"
                v-model="form.start_date"
                type="date">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="航次结束" prop="end_date">
              <el-date-picker
                style="width: 100%"
                v-model="form.end_date"
                type="date">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="航次资助机构">
              <el-tag
                :key="tag"
                v-for="tag in dynamicTags1"
                closable
                :disable-transitions="false"
                @close="handleClose(1, tag)">
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible1"
                v-model="inputValue1"
                ref="saveTagInput1"
                size="small"
                @keyup.enter.native="handleInputConfirm(1)"
                @blur="handleInputConfirm(1)"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput(1)">+ 添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="航次首席" prop="voyage_officer">
              <el-tag
                :key="tag"
                v-for="tag in dynamicTags2"
                closable
                :disable-transitions="false"
                @close="handleClose(2, tag)">
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible2"
                v-model="inputValue2"
                ref="saveTagInput2"
                size="small"
                @keyup.enter.native="handleInputConfirm(2)"
                @blur="handleInputConfirm(2)"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput(2)">+ 添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="描述信息" prop="voyage_remark">
              <el-input type="textarea" :rows="3" v-model="form.voyage_remark" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--    上传导航文件弹窗-->
    <el-dialog title="航次导航信息" :visible.sync="openNav" :before-close="cancelNav" width="800px" append-to-body>
      <el-form ref="formNav" :model="formNav" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="导航文件名称">
              <el-input v-model="formNav.navName" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="导航开始时间">
              <el-input v-model="formNav.startTime" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="导航结束时间">
              <el-input v-model="formNav.endTime" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="导航开始精度">
              <el-input v-model="formNav.startLon" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="导航开始纬度">
              <el-input v-model="formNav.startLat" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="导航结束经度">
              <el-input v-model="formNav.endLon" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="导航结束纬度">
              <el-input v-model="formNav.endLat" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-upload
          ref="upload"
          action="action"
          :multiple="false"
          :show-file-list="false"
          :http-request="uploadNav"
          :before-upload="beforeUploadNav"
        >
          <el-button :loading="loadingNav" type="primary">{{ textNav }}</el-button>
        </el-upload>
      </div>
    </el-dialog>
    <!--    上传参航人员-->
    <el-dialog title="参航人员信息" :visible.sync="openPeople" :before-close="cancelPeople" width="1000px" append-to-body>
      <div style="margin-bottom: 15px; text-align: right">
        <el-upload
          ref="upload"
          action="action"
          :multiple="false"
          :show-file-list="false"
          :http-request="uploadPeople"
          :before-upload="beforeUploadPeople"
        >
          <el-button :loading="loadingPeopleBtn" type="primary">{{ textPeople }}</el-button>
        </el-upload>
      </div>
      <el-card class="box-card"  v-show="showForm" >
        <el-form ref="formPeople" :model="formPeople" :rules="rulesPeople" label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="人员姓名" prop="member_name">
                <el-input v-model="formPeople.member_name" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="人员性别" prop="member_sex">
                <el-select v-model="formPeople.member_sex" style="width: 100%">
                  <el-option
                    v-for="(item, index) in sexOptions"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生日期" prop="member_birthday">
                <el-date-picker
                  style="width: 100%"
                  v-model="formPeople.member_birthday"
                  value-format="yyyy-MM-dd"
                  type="date">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="所在单位" prop="member_unit">
                <el-input v-model="formPeople.member_unit" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="参航岗位" prop="member_dept">
                <el-input v-model="formPeople.member_dept" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="btn-bar">
          <el-button type="primary" @click="submitFormPeople">修改追加参航人员</el-button>
          <el-button @click="onHidden">隐藏详情</el-button>
        </div>
      </el-card>

      <el-table v-loading="loadingPeople" stripe border :data="peopleList">
        <el-table-column type="index" label="#" width="50"/>
        <el-table-column prop="member_name" label="姓名" width="150" />
        <el-table-column prop="member_sex" label="性别" width="50" />
        <el-table-column prop="member_birthday" label="出生年月" width="100" />
        <el-table-column label="年龄" width="50">
          <template slot-scope="scope">
            <span>{{ formatAge(scope.row.member_birthday) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="member_unit" label="单位" />
        <el-table-column prop="member_dept" label="岗位职责" width="120" />
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="修改" placement="top-end">
              <el-button id="mod" size="mini" type="warning" class="el-icon-edit" @click="handleEditPeople(scope.row)" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top-end">
              <el-button id="del" size="mini" type="danger" class="el-icon-delete" @click="handleDeletePeople(scope.row)" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-box">
        <el-pagination
          background
          :page-sizes="[10, 20, 30]"
          :page-size="paramsPeople.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPeople"
          :current-page="pageNumPeople"
          @size-change="handleSizeChangePeople"
          @current-change="handleCurrentChangePeople"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  voyageRegList,
  voyageRegEdit,
  voyageRegDelete,
  voyageRegNav,
  uploadNavigation,
  voyageRegPeople,
  voyageRegPeopleDelete, voyageRegPeopleEdit, voyageRegPeopleUpload, voyageRegImport
} from '@/api/dataTransfer'
import { time } from '@/utils/validate'

export default {
  name: 'VoyageReg',
  data() {
    return {
      loading: false,
      // 分页请求参数
      params: {
        start: 0,
        limit: 10,
        group: 10,
        query: ''
      },
      pageNum: 1,
      // 列表数据
      tableData: [],
      total: 0,
      // 新增和编辑表单参数
      open: false,
      title: '新增',
      form: {
        voyage_name: '',
        ship_name: '',
        serect_status: '',
        start_date: '',
        end_date: '',
        voyage_officer_array: [],
        funding_org_array: [],
        funding_code: '',
        voyage_remark: '',
        voyage_officer: '',
        funding_org: '',
        voyage_start_date: '',
        voyage_end_date: ''
      },
      rules: {
        voyage_name: [
          { required: true, message: '此处为必填项', trigger: 'blur' }
        ],
        ship_name: [
          { required: true, message: '此处为必填项', trigger: 'change' }
        ],
        start_date: [
          { required: true, message: '此处为必填项', trigger: 'change' }
        ],
        end_date: [
          { required: true, message: '此处为必填项', trigger: 'change' }
        ],
        voyage_officer: [
          { required: true, message: '此处为必填项', trigger: 'change' }
        ]
      },
      shipOptions: ['探索一号', '探索二号'],
      secretOptions: [
        {
          label: '是',
          value: 'Active'
        },
        {
          label: '否',
          value: 'InActive'
        }
      ],
      inputVisible1: false,
      dynamicTags1: [],
      inputValue1: '',
      dynamicTags2: [],
      inputVisible2: false,
      inputValue2: '',
      // 上传导航文件弹窗参数
      loadingNav: false,
      textNav: '上传导航文件',
      openNav: false,
      id: '',
      formNav: {
        navName: '',
        startLat: '',
        startLon: '',
        startTime: '',
        endLat: '',
        endLon: '',
        endTime: ''
      },
      // 上传参航人员弹窗参数
      loadingPeople: false,
      openPeople: false,
      peopleList: [],
      paramsPeople: {
        start: 0,
        limit: 10,
        group: 10
      },
      pageNumPeople: 1,
      totalPeople: 0,
      showForm: false,
      formPeople: {},
      rulesPeople: {},
      sexOptions: ['男', '女', '保密'],
      textPeople: '上传参航人员',
      loadingPeopleBtn: false,
      // 航次数据批量导入
      loadingRegBtn: false,
      textReg: '航次数据批量导入'
    }
  },
  created() {
    const isLogin = localStorage.getItem('isLogin')
    if (isLogin == 'false' || isLogin == '' || isLogin == undefined) {
      this.$router.push({ name: 'home' })
      return
    }
    this.getData()
  },
  methods: {
    // 获取列表数据
    getData() {
      this.loading = true
      voyageRegList(this.params).then(res => {
        this.tableData = res.page.records
        this.total = Number(res.page.total)
        this.loading = false
      })
    },
    // 新增
    handleAdd() {
      this.title = '新增'
      this.open = true
    },
    // 编辑
    handleEdit(row) {
      this.title = '编辑'
      this.open = true
      this.form = JSON.parse(JSON.stringify(row))
      this.form.start_date = new Date(this.form.voyage_start_date)
      this.form.end_date = new Date(this.form.voyage_end_date)
      this.dynamicTags1 = this.form.funding_org.split('、')
      this.form.funding_org_array = this.dynamicTags1
      this.dynamicTags2 = this.form.voyage_officer.split('、')
      this.form.voyage_officer_array = this.dynamicTags2
    },
    // 表单参数处理
    formatParams() {
      this.form.funding_org_array = this.dynamicTags1
      this.form.funding_org = this.dynamicTags1.join('、')
      this.form.voyage_officer_array = this.dynamicTags2
      this.form.voyage_officer = this.dynamicTags2.join('、')
      this.form.voyage_start_date = time(this.form.start_date, 'date')
      this.form.voyage_end_date = time(this.form.end_date, 'date')
    },
    // 提交表单
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.title === '新增') {
            this.formatParams()
            voyageRegEdit(this.form).then(res => {
              this.$message.success('已创建新的航次信息!')
              this.getData()
              this.cancel()
            })
          } else {
            this.formatParams()
            voyageRegEdit(this.form).then(res => {
              this.$message.success('航次信息已更新!')
              this.getData()
              this.cancel()
            })
          }
        }
      })
    },
    // 关闭弹窗
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        voyage_name: '',
        ship_name: '',
        serect_status: '',
        start_date: '',
        end_date: '',
        voyage_officer_array: [],
        funding_org_array: [],
        funding_code: '',
        voyage_remark: '',
        voyage_officer: '',
        funding_org: '',
        voyage_start_date: '',
        voyage_end_date: ''
      }
      this.dynamicTags1 = []
      this.dynamicTags2 = []
      this.$refs['form'].resetFields()
    },
    // 删除
    handleDelete(row) {
      this.$confirm('确定要删除该航次数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        voyageRegDelete(row).then(() => {
          this.$message.success('删除成功!')
          this.getData()
        })
      }).catch(() => {})
    },
    // 分页
    handleCurrentChange(val) {
      this.pageNum = val
      this.params.start = val * this.params.limit - this.params.limit
      this.getData()
    },
    handleSizeChange(val) {
      this.params.limit = val
      this.getData()
    },
    handleClose(type, tag) {
      if (type === 1) {
        this.dynamicTags1.splice(this.dynamicTags1.indexOf(tag), 1)
      }
      if (type === 2) {
        this.dynamicTags2.splice(this.dynamicTags2.indexOf(tag), 1)
      }
    },
    showInput(type) {
      if (type === 1) {
        this.inputVisible1 = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput1.$refs.input.focus()
        })
      }
      if (type === 2) {
        this.inputVisible2 = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput2.$refs.input.focus()
        })
      }
    },
    handleInputConfirm(type) {
      if (type === 1) {
        const inputValue1 = this.inputValue1
        if (inputValue1) {
          this.dynamicTags1.push(inputValue1)
        }
        this.inputVisible1 = false
        this.inputValue1 = ''
      }
      if (type === 2) {
        const inputValue2 = this.inputValue2
        if (inputValue2) {
          this.dynamicTags2.push(inputValue2)
        }
        this.inputVisible2 = false
        this.inputValue2 = ''
      }
    },
    // 上传导航文件
    handleUploadNav(row) {
      this.openNav = true
      this.id = row.tsy_id
      this.getNavDetail()
      this.formNav.navName = row.navigation_file_name
    },
    // 获取导航文件详情
    getNavDetail() {
      voyageRegNav({ voyage_id: this.id }).then(res => {
        this.formNav.startLat = res.map.start.nav_lat
        this.formNav.startLon = res.map.start.nav_lon
        this.formNav.startTime = res.map.start.nav_time
        this.formNav.endLat = res.map.end.nav_lat
        this.formNav.endLon = res.map.end.nav_lon
        this.formNav.endTime = res.map.end.nav_time
      })
    },
    cancelNav() {
      this.openNav = false
      this.formNav.navName = ''
      this.formNav.startLat = ''
      this.formNav.startLon = ''
      this.formNav.startTime = ''
      this.formNav.endLat = ''
      this.formNav.endLon = ''
      this.formNav.endTime = ''
      this.getData()
    },
    beforeUploadNav(file) { // 上传文件之前钩子
      const type = file.name.split('.')[1]
      if (type !== 'txt') {
        this.$message({ type: 'error', message: '只支持txt文件格式！' })
        return false
      }
    },
    uploadNav(param) {
      this.loadingNav = true
      this.textNav = '数据处理中'
      const formData = new FormData()
      this.formNav.navName = param.file.name
      formData.append('file', param.file)
      formData.append('voyage_id', this.id)
      uploadNavigation(formData).then(res => {
        if (res.errorCode === 0) {
          this.loadingNav = false
          this.textNav = '上传导航文件'
          this.$message.success('导入成功！')
          this.getNavDetail()
        }
      })
    },
    // 上传参航人员
    handlePeople(row) {
      this.openPeople = true
      this.id = row.tsy_id
      this.getPeopleList()
    },
    getPeopleList() {
      this.loadingPeople = true
      voyageRegPeople({
        ...this.paramsPeople,
        voyage_id: this.id
      }).then(res => {
        this.peopleList = res.page.records
        this.totalPeople = Number(res.page.total)
        this.loadingPeople = false
      })
    },
    handleCurrentChangePeople(val) {
      this.pageNumPeople = val
      this.paramsPeople.start = val * this.paramsPeople.limit - this.paramsPeople.limit
      this.getPeopleList()
    },
    handleSizeChangePeople(val) {
      this.paramsPeople.limit = val
      this.getPeopleList()
    },
    formatAge(birthDateString) {
      if (birthDateString) {
        const today = new Date()
        const birthDate = new Date(birthDateString)
        let age = today.getFullYear() - birthDate.getFullYear()
        // 检查是否已过今年的生日
        const m = today.getMonth() - birthDate.getMonth()
        if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
          age--
        }
        return age
      } else {
        return ''
      }
    },
    cancelPeople() {
      this.openPeople = false
      this.onHidden()
    },
    handleEditPeople(row) {
      this.showForm = true
      this.formPeople = JSON.parse(JSON.stringify(row))
    },
    submitFormPeople() {
      voyageRegPeopleEdit(this.formPeople).then(res => {
        this.$message.success('修改成功！')
        this.onHidden()
        this.getPeopleList()
      })
    },
    onHidden() {
      this.showForm = false
      this.formPeople = {
        member_name: '',
        member_sex: '',
        member_birthday: '',
        member_unit: '',
        member_dept: ''
      }
      this.$refs['formPeople'].resetFields()
    },
    handleDeletePeople(row) {
      this.$confirm('确定要删除该参航人员吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        voyageRegPeopleDelete({ member_id: row.tsy_id }).then(() => {
          this.$message.success('删除成功!')
          this.getPeopleList()
        })
      }).catch(() => {})
    },
    beforeUploadPeople(file) { // 上传文件之前钩子
      const type = file.name.split('.')[1]
      if (type !== 'xlsx') {
        this.$message({ type: 'error', message: '只支持xlsx文件格式！' })
        return false
      }
    },
    uploadPeople(param) {
      this.loadingPeopleBtn = true
      this.textPeople = '数据处理中'
      const formData = new FormData()
      this.formNav.navName = param.file.name
      formData.append('file', param.file)
      formData.append('voyage_id', this.id)
      voyageRegPeopleUpload(formData).then(res => {
        if (res.errorCode === 0) {
          this.loadingPeopleBtn = false
          this.textPeople = '上传参航人员'
          this.$message.success('导入成功！')
          this.getPeopleList()
        }
      }).cache(() => {
        this.loadingPeopleBtn = false
        this.textPeople = '上传参航人员'
      })
    },
    // 航次数据批量导入
    beforeUploadReg(file) { // 上传文件之前钩子
      const type = file.name.split('.')[1]
      if (type !== 'xlsx') {
        this.$message({ type: 'error', message: '只支持xlsx文件格式！' })
        return false
      }
    },
    uploadReg(param) {
      this.loadingRegBtn = true
      this.textReg = '数据处理中'
      const formData = new FormData()
      formData.append('file', param.file)
      voyageRegImport(formData).then(res => {
        if (res.errorCode === 0) {
          this.loadingRegBtn = false
          this.textReg = '航次数据批量导入'
          this.$message.success('导入成功！')
          this.getData()
        }
      }).cache(() => {
        this.loadingRegBtn = false
        this.textReg = '航次数据批量导入'
      })
    },
  },
  watch: {
    dynamicTags2(arr) {
      if (arr.length) {
        this.form.voyage_officer = this.dynamicTags2.join('、')
        this.$refs.form.clearValidate('voyage_officer')
      } else {
        this.form.voyage_officer = ''
      }
    }
  }
}
</script>

<style>
.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;
}
.box-card {
  margin-bottom: 20px;
  .btn-bar {
    display: flex;
    justify-content: center;
  }
}
</style>