<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"
|
@submit.native.prevent>
|
<el-form-item label="舰型" prop="shipType">
|
<el-input v-model="queryParams.shipType" placeholder="请输入舰型" clearable @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
v-hasPermi="['system:harbor:add']">新增</el-button>
|
</el-col>
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
</el-row>
|
|
<el-table v-loading="loading" :data="dailyTaskList">
|
<el-table-column label="序号" align="center" type="index" />
|
<el-table-column label="舰型" align="center" prop="shipType" />
|
<el-table-column label="舷号" align="center" prop="shipNo" />
|
<el-table-column label="吨位(吨)" align="center" prop="tonnage" />
|
<el-table-column label="吃水(米)" align="center" prop="draft" />
|
<el-table-column label="舰长(米)" align="center" prop="shipLen" />
|
<el-table-column label="定员(人)" align="center" prop="staff" />
|
<el-table-column label="战术编组" align="center" prop="grpName" />
|
<!-- <el-table-column label="位置区间" align="center" prop="posArea" /> -->
|
<!-- <el-table-column label="优先级" align="center" prop="level" /> -->
|
<el-table-column label="航用柴油(吨)" align="center" prop="oilA" />
|
<el-table-column label="通用柴油(吨)" align="center" prop="oilB" />
|
<el-table-column label="航空煤油(吨)" align="center" prop="oilG" />
|
<el-table-column label="导弹(枚)" align="center" prop="ammoD" />
|
<el-table-column label="炮弹(枚)" align="center" prop="ammoP" />
|
<el-table-column label="鱼水雷(枚)" align="center" prop="ammoS" />
|
<el-table-column label="其他弹药(枚)" align="center" prop="ammoO" />
|
<el-table-column label="淡水(吨)" align="center" prop="water" />
|
<el-table-column label="纯水(吨)" align="center" prop="waterP" />
|
<el-table-column label="主副食(车)" align="center" prop="food" />
|
<el-table-column label="桶装水(车)" align="center" prop="foodW" />
|
<el-table-column label="其他物资(车)" align="center" prop="foodO" />
|
<el-table-column label="计划抵港时间" align="center" prop="peTime" />
|
<el-table-column label="计划离港时间" align="center" prop="psTime" />
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
v-hasPermi="['system:harbor:remove']">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
@pagination="getList" />
|
|
<!-- 添加或修改港口信息对话框 -->
|
<el-dialog :title="title" :visible.sync="open" width="750px" 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="shipNo">
|
<el-input v-model="form.shipNo" placeholder="请输入舷号" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="舰型" prop="shipType">
|
<el-select v-model="form.shipType" placeholder="请选择" @change="selectedChange">
|
<el-option v-for="column in deptOptions" :key="column.id" :label="column.shipDesign"
|
:value="column.shipDesign"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="码头" prop="harborId">
|
<el-select v-model="form.harborInfo" value-key="whId" @change="selectedHarbor" placeholder="请选择要分配的码头">
|
<el-option v-for="column in harborOptions" :key="column.id" :label="column.name"
|
:value="column"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="泊位" prop="berthinfo">
|
<el-select :disabled="berthAvailable" value-key="pkid" v-model="form.berthInfo" placeholder="请选择要分配的泊位">
|
<el-option v-for="column in berthOptions" :key="column.pkid" :label="column.name"
|
:value="column"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="战术编组" prop="grpName">
|
<el-input v-model="form.grpName" placeholder="请输入战术编组" />
|
</el-form-item>
|
</el-col>
|
<!-- <el-col :span="8">
|
<el-form-item label="位置区间" prop="posArea">
|
<el-input v-model="form.posArea" placeholder="请输入位置区间" />
|
</el-form-item>
|
</el-col> -->
|
<el-col :span="12">
|
<el-form-item label="优先级" prop="level">
|
<el-input v-model="form.level" placeholder="请输入优先级" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="舰用柴油" prop="oilA">
|
<el-input v-model="form.oilA" placeholder="请输入舰用柴油量" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="通用柴油" prop="oilB">
|
<el-input v-model="form.oilB" placeholder="请输入通用柴油量" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="航空煤油" prop="oilG">
|
<el-input v-model="form.oilG" placeholder="请输入航空煤油量" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="6">
|
<el-form-item label="导弹" prop="ammoD">
|
<el-input v-model="form.ammoD" placeholder="请输入导弹数量" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="炮弹" prop="ammoP">
|
<el-input v-model="form.ammoP" placeholder="请输入炮弹数量" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="鱼水雷" prop="ammoS">
|
<el-input v-model="form.ammoS" placeholder="请输入鱼水雷数量" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="其他弹药" prop="ammoO">
|
<el-input v-model="form.ammoO" placeholder="请输入其他弹药数量" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="淡水数量" prop="water">
|
<el-input v-model="form.water" placeholder="请输入淡水数量" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="纯水数量" prop="waterP">
|
<el-input v-model="form.waterP" placeholder="请输入纯水数量" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="主副食量" prop="food">
|
<el-input v-model="form.food" placeholder="请输入主副食量" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="桶装水数量" prop="foodW">
|
<el-input v-model="form.foodW" placeholder="请输入桶装水数量" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="其他物资数量" prop="foodO">
|
<el-input v-model="form.foodO" placeholder="请输入其他物资数量" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="计划抵港时间" prop="psTime">
|
<el-date-picker v-model="form.psTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
|
type="datetime" placeholder="计划抵港时间"></el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="计划离港时间" prop="peTime">
|
<el-date-picker v-model="form.peTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
|
type="datetime" placeholder="计划离港时间"></el-date-picker>
|
</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 { getDailyTask, delDailyTask, addDailyTask } from "@/api/manage/dsTask";
|
import axios from "axios";
|
import { listAlldpShipTypeList } from "@/api/manage/shipType";
|
import { list } from "@/api/manage/wharf";
|
import { beList } from "@/api/manage/berth";
|
import Treeselect from "@riophae/vue-treeselect";
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
export default {
|
name: "Harbor",
|
components: { Treeselect },
|
data() {
|
return {
|
// 遮罩层
|
loading: true,
|
// 选中数组
|
ids: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
selectShipType: "",
|
berthPOI: [],
|
// 部门树选项
|
deptOptions: undefined,
|
harborOptions: undefined,
|
berthOptions: undefined,
|
berthAvailable: true,
|
// 显示搜索条件
|
showSearch: true,
|
// 总条数
|
total: 0,
|
// 保障需求表格数据
|
dailyTaskList: [],
|
// 弹出层标题
|
title: "",
|
// 是否显示弹出层
|
open: false,
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
},
|
// 表单参数
|
form: {},
|
// 表单校验
|
rules: {
|
shipNo: [{ required: true, message: "舷号不能为空", trigger: "blur" }],
|
shipType: [{ required: true, message: "舰型不能为空", trigger: "blur" }],
|
},
|
};
|
},
|
created() {
|
this.getList();
|
this.getShipTypeList();
|
},
|
methods: {
|
/** 查询保障需求列表 */
|
getList() {
|
this.loading = true;
|
getDailyTask(this.queryParams).then((response) => {
|
this.dailyTaskList = response.rows;
|
this.total = response.total;
|
this.loading = false;
|
});
|
},
|
/** 查询下拉数据 */
|
getShipTypeList() {
|
listAlldpShipTypeList().then((response) => {
|
this.deptOptions = response.data;
|
});
|
},
|
// 取消按钮
|
cancel() {
|
this.open = false;
|
this.reset();
|
},
|
// 表单重置
|
reset() {
|
this.form = {
|
taskId: 999,
|
shipNo: null,
|
shipType: null,
|
harborInfo: null,
|
harborName: null,
|
harborId: null,
|
berthInfo: null,
|
berthName: null,
|
berthId: null,
|
tonnage: null,
|
draft: null,
|
shipLen: null,
|
staff: null,
|
grpName: null,
|
posArea: null,
|
level: "1",
|
oilA: null,
|
oilB: null,
|
oilG: null,
|
ammoD: null,
|
ammoP: null,
|
ammoS: null,
|
ammoO: null,
|
water: null,
|
waterP: null,
|
food: null,
|
foodW: null,
|
foodO: null,
|
remark: null,
|
psTime: "",
|
peTime: "",
|
posArea: "XMG",
|
};
|
this.resetForm("form");
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.resetForm("queryForm");
|
this.handleQuery();
|
},
|
// 多选框选中数据
|
selectedChange(selection) {
|
let selectedShipType = this.deptOptions.find(
|
(item) => item.shipDesign == this.form.shipType
|
);
|
this.form.tonnage = selectedShipType.tonnage;
|
this.form.draft = selectedShipType.draft;
|
this.form.shipLen = selectedShipType.length;
|
this.form.staff = selectedShipType.crew;
|
},
|
selectedHarbor(value) {
|
this.berthAvailable = false;
|
this.form.harborId = value.whId
|
this.form.harborName = value.name
|
|
beList(value.whId).then((response) => {
|
this.berthOptions = response.data.filter((item) => item.name !== "园区");
|
});
|
axios.get("/berthPOI.json").then((res) => {
|
this.berthPOI = res.data;
|
});
|
},
|
/** 新增按钮操作 */
|
handleAdd() {
|
this.reset();
|
this.open = true;
|
this.title = "添加待补给舰艇";
|
list().then((response) => {
|
this.harborOptions = response.data;
|
});
|
},
|
|
/** 提交按钮 */
|
submitForm() {
|
this.$refs["form"].validate((valid) => {
|
if (valid) {
|
this.form.berthId = this.form.berthInfo.pkid;
|
this.form.berthName = this.form.berthInfo.name;
|
delete this.form.harborInfo;
|
delete this.form.berthInfo;
|
let { lon, lat, alt, heading } = this.berthPOI.filter(
|
(item) => item.berthId == this.form.berthId
|
)[0];
|
addDailyTask({ lon, lat, alt, heading }, this.form).then((response) => {
|
this.$modal.msgSuccess("新增成功");
|
this.open = false;
|
this.getList();
|
});
|
}
|
});
|
},
|
/** 删除按钮操作 */
|
handleDelete(row) {
|
this.$modal
|
.confirm('是否确认删除"' + row.shipNo + '"的数据项？')
|
.then(function () {
|
return delDailyTask(row.pkid);
|
})
|
.then(() => {
|
this.getList();
|
this.$modal.msgSuccess("删除成功");
|
})
|
.catch(() => { });
|
},
|
},
|
};
|
</script>
|
