436 lines
13 KiB
Vue
436 lines
13 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="120">
|
|
<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="del" size="mini" type="danger" class="el-icon-delete" @click="handleDelete(scope.row)" style="margin-left: 0%;" />
|
|
</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>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { voyageRegList, voyageRegEdit, voyageRegDelete } 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: ''
|
|
}
|
|
},
|
|
created() {
|
|
const isLogin = localStorage.getItem('isLogin')
|
|
if (isLogin == 'false') {
|
|
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 = ''
|
|
}
|
|
}
|
|
},
|
|
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;
|
|
}
|
|
</style>
|
|
|