768 lines
25 KiB
Vue
768 lines
25 KiB
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="checkBtn">
|
||
<el-button type="primary" size="medium" @click="handleAdd">航次数据录入</el-button>
|
||
</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="离港日期" />
|
||
<el-table-column prop="voyage_end_date" label="返港日期" />
|
||
<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>
|
||
<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
|
||
} from '@/api/dataTransfer'
|
||
import { time } from '@/utils/validate'
|
||
|
||
export default {
|
||
name: 'VoyageReg',
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
// 分页请求参数
|
||
params: {
|
||
start: 0,
|
||
limit: 10,
|
||
group: 10
|
||
},
|
||
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: ['男', '女', '保密'],
|
||
}
|
||
},
|
||
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()
|
||
}
|
||
}).cache(() => {
|
||
this.loadingNav = false
|
||
this.btnText = '上传导航文件'
|
||
})
|
||
},
|
||
// 上传参航人员
|
||
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(() => {})
|
||
},
|
||
},
|
||
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>
|
||
|