<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>
|
<el-col :span="1.5">
|
<el-button
|
type="info"
|
plain
|
icon="el-icon-upload2"
|
size="mini"
|
@click="handleImport"
|
>导入</el-button
|
>
|
</el-col>
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
</el-row>
|
|
<el-table
|
v-loading="loading"
|
:data="dsTaskList"
|
@selection-change="handleSelectionChange"
|
>
|
<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="pstime" />
|
<el-table-column label="计划离港时间" align="center" prop="petime" />
|
<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-edit"
|
@click="handleUpdate(scope.row)"
|
v-hasPermi="['system:harbor:edit']"
|
>修改</el-button
|
>
|
<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="8">
|
<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="8">
|
<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>
|
|
<!-- 文件导入对话框 -->
|
<el-dialog
|
:title="upload.title"
|
:visible.sync="upload.open"
|
width="400px"
|
append-to-body
|
>
|
<el-upload
|
ref="upload"
|
:limit="1"
|
:headers="upload.headers"
|
:action="upload.url"
|
:data="uploadData"
|
:disabled="upload.isUploading"
|
:on-progress="handleFileUploadProgress"
|
:on-success="handleFileSuccess"
|
:auto-upload="false"
|
:before-upload="handleBeforeUpload"
|
drag
|
>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<div class="el-upload__tip text-center" slot="tip">
|
<!-- <div class="el-upload__tip" slot="tip">
|
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
|
</div> -->
|
<!-- <span>仅允许导入xls、xlsx格式文件。</span> -->
|
<el-link
|
type="primary"
|
:underline="false"
|
style="font-size: 12px; vertical-align: baseline"
|
@click="importTemplate"
|
>下载模板</el-link
|
>
|
</div>
|
</el-upload>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
<el-button @click="upload.open = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
dsTaskList,
|
getDsTask,
|
delDsTask,
|
addDsTask,
|
updateDsTask,
|
} from "@/api/manage/dsTask";
|
import { listAlldpShipTypeList } from "@/api/manage/shipType";
|
import Treeselect from "@riophae/vue-treeselect";
|
import { getToken } from "@/utils/auth";
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
export default {
|
name: "Harbor",
|
components: { Treeselect },
|
data() {
|
return {
|
// 遮罩层
|
loading: true,
|
// 选中数组
|
ids: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
selectShipType: "",
|
// 部门树选项
|
deptOptions: undefined,
|
// 显示搜索条件
|
showSearch: true,
|
// 总条数
|
total: 0,
|
// 保障需求表格数据
|
dsTaskList: [],
|
// 弹出层标题
|
title: "",
|
// 是否显示弹出层
|
open: false,
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
shipType: null,
|
},
|
// 表单参数
|
form: {},
|
// 表单校验
|
rules: {
|
shipNo: [{ required: true, message: "舷号不能为空", trigger: "blur" }],
|
shipType: [{ required: true, message: "舰型不能为空", trigger: "blur" }],
|
},
|
// 用户导入参数
|
upload: {
|
// 是否显示弹出层（用户导入）
|
open: false,
|
// 弹出层标题（用户导入）
|
title: "",
|
// 是否禁用上传
|
isUploading: false,
|
// 是否更新已经存在的用户数据
|
updateSupport: 0,
|
// 设置上传的请求头部
|
headers: { Authorization: "Bearer " + getToken() },
|
// 上传的地址
|
// url: process.env.VUE_APP_BASE_API + "/system/user/importData",
|
url: process.env.VUE_APP_BASE_API + "dp/sysFile/uploadFile",
|
},
|
};
|
},
|
created() {
|
this.getList();
|
this.getShipTypeList();
|
},
|
methods: {
|
|
/** 下载模板操作 */
|
importTemplate() {
|
this.download(
|
"system/user/importTemplate",
|
{},
|
`保障需求模板.xls`
|
);
|
// window.open("./template.xls");
|
},
|
|
// 文件上传成功处理
|
handleFileSuccess(response, file, fileList) {
|
// if (response.code === 200) {
|
// this.$modal.closeLoading();
|
// this.upload.open = false;
|
// this.upload.isUploading = false;
|
// this.$refs.upload.clearFiles();
|
// this.$modal.msgSuccess("上传成功！");
|
// // this.$alert(
|
// // "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
// // response.msg +
|
// // "</div>",
|
// // "导入结果",
|
// // { dangerouslyUseHTMLString: true }
|
// // );
|
// this.getList();
|
// } else {
|
// this.number--;
|
// this.$modal.closeLoading();
|
// this.$modal.msgError("上传失败，请重新上传！");
|
// }
|
},
|
// 提交上传文件
|
submitFileForm() {
|
this.upload.open = false;
|
// this.$refs.upload.submit();
|
},
|
|
// 文件上传中处理
|
handleFileUploadProgress(event, file, fileList) {
|
this.upload.isUploading = true;
|
},
|
/** 导入按钮操作 */
|
handleImport() {
|
this.upload.title = "需求导入";
|
this.upload.open = true;
|
},
|
/** 查询保障需求列表 */
|
getList() {
|
this.loading = true;
|
dsTaskList(this.queryParams).then((response) => {
|
this.dsTaskList = response.rows;
|
this.total = response.total;
|
this.loading = false;
|
});
|
},
|
/** 查询舰艇类型下拉数据 */
|
getShipTypeList() {
|
listAlldpShipTypeList().then((response) => {
|
console.log(response.data);
|
this.deptOptions = response.data;
|
});
|
},
|
// 取消按钮
|
cancel() {
|
this.open = false;
|
this.reset();
|
},
|
// 表单重置
|
reset() {
|
this.form = {
|
pkid: null,
|
shipNo: null,
|
shipType: null,
|
tonnage: null,
|
draft: null,
|
shipLen: null,
|
staff: null,
|
grpName: null,
|
posArea: null,
|
level: null,
|
oilA: null,
|
oilB: null,
|
oilG: null,
|
ammoD: null,
|
ammoP: null,
|
ammoS: null,
|
ammoO: null,
|
water: null,
|
waterP: null,
|
food: null,
|
foodW: null,
|
foodO: null,
|
delFlag: null,
|
createBy: null,
|
createTime: null,
|
updateBy: null,
|
updateTime: null,
|
remark: null,
|
};
|
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;
|
},
|
/** 新增按钮操作 */
|
handleAdd() {
|
this.reset();
|
this.open = true;
|
this.title = "添加待补给舰艇";
|
},
|
/** 修改按钮操作 */
|
handleUpdate(row) {
|
this.reset();
|
getDsTask(row.pkid).then((response) => {
|
this.form = response.data;
|
this.open = true;
|
this.title = "修改信息";
|
});
|
},
|
/** 提交按钮 */
|
submitForm() {
|
this.$refs["form"].validate((valid) => {
|
if (valid) {
|
if (this.form.pkid != null) {
|
updateDsTask(this.form).then((response) => {
|
this.$modal.msgSuccess("修改成功");
|
this.open = false;
|
this.getList();
|
});
|
} else {
|
addDsTask(this.form).then((response) => {
|
this.$modal.msgSuccess("新增成功");
|
this.open = false;
|
this.getList();
|
});
|
}
|
}
|
});
|
},
|
/** 删除按钮操作 */
|
handleDelete(row) {
|
this.$modal
|
.confirm('是否确认删除"' + row.shipNo + '"的数据项？')
|
.then(function () {
|
return delDsTask(row.pkid);
|
})
|
.then(() => {
|
this.getList();
|
this.$modal.msgSuccess("删除成功");
|
})
|
.catch(() => {});
|
},
|
},
|
};
|
</script>
|
