|
|
@@ -0,0 +1,555 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label-width="100px" label="船名" prop="fVslid">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.fVslid"
|
|
|
+ placeholder="请选择船名"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in vesselOptions"
|
|
|
+ :key="item.fId"
|
|
|
+ :label="item.fName"
|
|
|
+ :value="item.fId"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label-width="100px" label="航次" prop="fVoyid">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.fVoyid"
|
|
|
+ placeholder="请选择航次"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in voyageOptions"
|
|
|
+ :key="item.fId"
|
|
|
+ :label="item.fNo"
|
|
|
+ :value="item.fId"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-row :gutter="10" style="padding-bottom: 10px">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" size="mini" :disabled="single" @click="departureShipment">离港出运</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-date-picker
|
|
|
+ type="datetime"
|
|
|
+ placeholder="选择离港时间"
|
|
|
+ format="yyyy-MM-dd HH:mm"
|
|
|
+ value-format="yyyy-MM-dd HH:mm"
|
|
|
+ size="mini"
|
|
|
+ v-model="departure"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" size="mini" :disabled="single" @click="unloading">到港卸船</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-date-picker
|
|
|
+ type="datetime"
|
|
|
+ placeholder="选择到港时间"
|
|
|
+ format="yyyy-MM-dd HH:mm"
|
|
|
+ value-format="yyyy-MM-dd HH:mm"
|
|
|
+ size="mini"
|
|
|
+ v-model="arrival"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" size="mini" @click="shipInventoryExport">导出装卸船清单</el-button>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col style="position: absolute;left:70%" :span="5" >
|
|
|
+ <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <div class="tabSetting">
|
|
|
+ <right-toolbar
|
|
|
+ :showSearch.sync="showSearch"
|
|
|
+ @queryTable="getList"
|
|
|
+ ></right-toolbar>
|
|
|
+ <div style="margin: 0 12px">
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-setting"
|
|
|
+ size="mini"
|
|
|
+ circle
|
|
|
+ @click="showSetting = !showSetting"
|
|
|
+ ></el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-dialog title="提示" :visible.sync="showSetting" width="700px" v-dialogDrag>
|
|
|
+ <template slot="title">
|
|
|
+ <div class="avue-crud__dialog__header">
|
|
|
+ <span class="el-dialog__title">
|
|
|
+ <span style="display:inline-block;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div>配置排序列数据（拖动调整顺序）</div>
|
|
|
+ <div style="margin-left: 17px">
|
|
|
+ <el-checkbox
|
|
|
+ v-model="allCheck"
|
|
|
+ label="全选"
|
|
|
+ @change="allChecked"
|
|
|
+ ></el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div style="padding: 4px; display: flex; justify-content: center">
|
|
|
+ <draggable
|
|
|
+ v-model="setRowList"
|
|
|
+ group="site"
|
|
|
+ animation="300"
|
|
|
+ @start="onStart"
|
|
|
+ @end="onEnd"
|
|
|
+ handle=".indraggable"
|
|
|
+ >
|
|
|
+ <transition-group>
|
|
|
+ <div
|
|
|
+ v-for="item in setRowList"
|
|
|
+ :key="item.surface"
|
|
|
+ class="listStyle"
|
|
|
+ >
|
|
|
+ <div style="width: 500px" class="indraggable">
|
|
|
+ <div class="progress" :style="{ width: item.width + 'px' }">
|
|
|
+ <el-checkbox
|
|
|
+ :label="item.name"
|
|
|
+ v-model="item.checked"
|
|
|
+ :true-label="0"
|
|
|
+ :false-label="1"
|
|
|
+ >{{ item.name }}
|
|
|
+ </el-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-input-number
|
|
|
+ v-model.number="item.width"
|
|
|
+ controls-position="right"
|
|
|
+ :min="1"
|
|
|
+ :max="500"
|
|
|
+ size="mini"
|
|
|
+ ></el-input-number>
|
|
|
+ </div>
|
|
|
+ </transition-group>
|
|
|
+ </draggable>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="showSetting = false">取 消</el-button>
|
|
|
+ <el-button @click="delRow" type="danger">重 置</el-button>
|
|
|
+ <el-button type="primary" @click="save()">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-table :data="singleShipList" style="width: 100%" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" fixed="left" align="center"></el-table-column>
|
|
|
+ <el-table-column type="expand" fixed="left">
|
|
|
+ <slot slot-scope="props">
|
|
|
+ <el-form label-position="left" inline id="demo-table-expand">
|
|
|
+ <el-form-item
|
|
|
+ v-for="(item, index) in props.row.children"
|
|
|
+ :key="index"
|
|
|
+ label="提单号"
|
|
|
+ >
|
|
|
+ <el-tooltip class="item" effect="dark" content="点击查看详情" placement="top">
|
|
|
+ <span class="blNo" v-text="item.fMblno" @click="$refs.blNo.openDialog(item)"></span>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+<!-- <el-form-item label="提单号"><span class="blNo" v-text="props.row.tidan" @click="$refs.blNo.openDialog(props.row.tidan)"></span></el-form-item>-->
|
|
|
+ </el-form>
|
|
|
+ </slot>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column type="index" fixed="left" align="center" label="行号"></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in getRowList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :width="item.width"
|
|
|
+ :prop="item.label"
|
|
|
+ align="center"
|
|
|
+ :fixed="item.fixed"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ sortable
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+<!-- <el-table-column-->
|
|
|
+<!-- prop="vslName"-->
|
|
|
+<!-- label="船名"-->
|
|
|
+<!-- align="center"-->
|
|
|
+<!-- ></el-table-column>-->
|
|
|
+<!-- <el-table-column-->
|
|
|
+<!-- prop="voyNo"-->
|
|
|
+<!-- label="航次"-->
|
|
|
+<!-- align="center"-->
|
|
|
+<!-- ></el-table-column>-->
|
|
|
+<!-- <el-table-column-->
|
|
|
+<!-- prop="fAtd"-->
|
|
|
+<!-- label="开始日期"-->
|
|
|
+<!-- align="center"-->
|
|
|
+<!-- ></el-table-column>-->
|
|
|
+<!-- <el-table-column-->
|
|
|
+<!-- prop="fAta"-->
|
|
|
+<!-- label="到港日期"-->
|
|
|
+<!-- align="center"-->
|
|
|
+<!-- ></el-table-column>-->
|
|
|
+<!-- <el-table-column-->
|
|
|
+<!-- prop="fName"-->
|
|
|
+<!-- label="航线"-->
|
|
|
+<!-- align="center"-->
|
|
|
+<!-- ></el-table-column>-->
|
|
|
+<!-- <el-table-column-->
|
|
|
+<!-- prop="loadportName"-->
|
|
|
+<!-- label="装港"-->
|
|
|
+<!-- align="center"-->
|
|
|
+<!-- ></el-table-column>-->
|
|
|
+<!-- <el-table-column-->
|
|
|
+<!-- prop="destportName"-->
|
|
|
+<!-- label="卸港"-->
|
|
|
+<!-- align="center"-->
|
|
|
+<!-- ></el-table-column>-->
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <blno ref="blNo"></blno>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import blno from "./BLNo";
|
|
|
+import { getVesselName } from '@/api/finance/applyForInvoice/chargeInvoice';
|
|
|
+import { getVoyageName } from '@/api/finance/applyForInvoice/feeDetail';
|
|
|
+import { download } from "../../../utils/ruoyi";
|
|
|
+import { listSingleVoyageByShip, listBLNo, cargoStatus, shipInventoryExport } from '@/api/kaihe/singleVoyageShip/index';
|
|
|
+import moment from "moment";
|
|
|
+import draggable from "vuedraggable";
|
|
|
+import { addSet, resetModule, select } from '@/api/system/set';
|
|
|
+import Cookies from 'js-cookie';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "index",
|
|
|
+ components: {
|
|
|
+ blno,
|
|
|
+ draggable,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ setRowList: [],
|
|
|
+ getRowList: [],
|
|
|
+ tableDate: [
|
|
|
+ {
|
|
|
+ surface: "1",
|
|
|
+ label: "vslName",
|
|
|
+ name: "船名",
|
|
|
+ checked: 0,
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ surface: "2",
|
|
|
+ label: "voyNo",
|
|
|
+ name: "航次",
|
|
|
+ checked: 0,
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ surface: "3",
|
|
|
+ label: "fAtd",
|
|
|
+ name: "开始日期",
|
|
|
+ checked: 0,
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ surface: "4",
|
|
|
+ label: "fAta",
|
|
|
+ name: "到港日期",
|
|
|
+ checked: 0,
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ surface: "5",
|
|
|
+ label: "fName",
|
|
|
+ name: "航线",
|
|
|
+ checked: 0,
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ surface: "6",
|
|
|
+ label: "loadportName",
|
|
|
+ name: "装港",
|
|
|
+ checked: 0,
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ surface: "7",
|
|
|
+ label: "destportName",
|
|
|
+ name: "卸港",
|
|
|
+ checked: 0,
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ singleShipList: [],
|
|
|
+ // 航次
|
|
|
+ voyageOptions:[],
|
|
|
+ // 船名
|
|
|
+ vesselOptions:[],
|
|
|
+ // 离港时间
|
|
|
+ departure: null,
|
|
|
+ // 到港时间
|
|
|
+ arrival: null,
|
|
|
+ // 离港到港船只数据
|
|
|
+ ship: [],
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ fVslid: null,
|
|
|
+ fVoyid: null,
|
|
|
+ fCargoPlanning: 0,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ //自定义列宽
|
|
|
+ allCheck: false,
|
|
|
+ showSetting:false,
|
|
|
+ drag: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ this.setRowList = this.tableDate;
|
|
|
+ this.getRowList = this.tableDate;
|
|
|
+ this.vessleRemthod();
|
|
|
+ this.voyageRemthods();
|
|
|
+
|
|
|
+ // const data = {
|
|
|
+ // fVsl: '凯和志诚1',
|
|
|
+ // fVoy: '02W1',
|
|
|
+ // fVslid: 3,
|
|
|
+ // fVoyid: 6,
|
|
|
+ // fUpdatetime: '2021-08-11 14:08:00',
|
|
|
+ // updateStatus: '1',
|
|
|
+ // }
|
|
|
+ // cargoStatus(data).then(response => {
|
|
|
+ // console.log(response)
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getList() {
|
|
|
+ this.loading = false;
|
|
|
+ await listSingleVoyageByShip(this.queryParams).then(response => {
|
|
|
+ this.singleShipList = response.rows;
|
|
|
+ console.log(this.singleShipList)
|
|
|
+ this.singleShipList.forEach((item, index) => {
|
|
|
+ let blNo = {
|
|
|
+ fCargoPlanning: 0,
|
|
|
+ fVslid: item.fVslid,
|
|
|
+ fVoyid: item.fVoyid,
|
|
|
+ }
|
|
|
+ listBLNo(blNo).then(res => {
|
|
|
+ this.singleShipList[index].children = res.rows
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.queryParams.pageSize = 10;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.departure = null;
|
|
|
+ this.arrival = null;
|
|
|
+ this.queryParams = {
|
|
|
+ vslName: null,
|
|
|
+ voyNo: null,
|
|
|
+ },
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ //获取船名
|
|
|
+ vessleRemthod() {
|
|
|
+ getVesselName().then(response => {
|
|
|
+ this.vesselOptions = response.rows
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取航次
|
|
|
+ voyageRemthods(){
|
|
|
+ getVoyageName().then(response=>{
|
|
|
+ this.voyageOptions = response.rows
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ship = selection
|
|
|
+ // this.ids = selection.map(item => item.fId)
|
|
|
+ this.single = selection.length!==1
|
|
|
+ // this.multiple = !selection.length
|
|
|
+ },
|
|
|
+ // 离港出运
|
|
|
+ departureShipment() {
|
|
|
+ if (this.departure === null) {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: '离港时间未选择',
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ const data = {
|
|
|
+ fVsl: this.ship[0].vslName,
|
|
|
+ fVoy: this.ship[0].voyNo,
|
|
|
+ fVslid: this.ship[0].fVslid,
|
|
|
+ fVoyid: this.ship[0].fVoyid,
|
|
|
+ fUpdatetime: this.departure,
|
|
|
+ updateStatus: '1',
|
|
|
+ }
|
|
|
+ cargoStatus(data).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: '出港操作成功',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: response.msg,
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 到港卸船
|
|
|
+ unloading() {
|
|
|
+ if (this.arrival === null) {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: '到港时间未选择',
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ const data = {
|
|
|
+ fVsl: this.ship[0].vslName,
|
|
|
+ fVoy: this.ship[0].voyNo,
|
|
|
+ fVslid: this.ship[0].fVslid,
|
|
|
+ fVoyid: this.ship[0].fVoyid,
|
|
|
+ fUpdatetime: this.arrival,
|
|
|
+ updateStatus: '2',
|
|
|
+ }
|
|
|
+ cargoStatus(data).then(response => {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: '到港操作成功',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 导出清单
|
|
|
+ shipInventoryExport() {
|
|
|
+ shipInventoryExport(this.queryParams).then(response => {
|
|
|
+ this.download(response.msg)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //列设置全选
|
|
|
+ allChecked() {
|
|
|
+ if (this.allCheck == true) {
|
|
|
+ this.setRowList.map((e) => {
|
|
|
+ return (e.checked = 0);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.setRowList.map((e) => {
|
|
|
+ return (e.checked = 1);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //开始拖拽事件
|
|
|
+ onStart() {
|
|
|
+ this.drag = true;
|
|
|
+ },
|
|
|
+ //拖拽结束事件
|
|
|
+ onEnd() {
|
|
|
+ this.drag = false;
|
|
|
+ },
|
|
|
+ //重置列表
|
|
|
+ delRow() {
|
|
|
+ this.data = {
|
|
|
+ tableName: "船舶信息",
|
|
|
+ userId: Cookies.get("userName"),
|
|
|
+ };
|
|
|
+ resetModule(this.data).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.showSetting = false;
|
|
|
+ this.setRowList = this.tableDate;
|
|
|
+ console.log(this.setRowList)
|
|
|
+ this.getRowList = this.tableDate;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //保存列设置
|
|
|
+ save() {
|
|
|
+ this.showSetting = false;
|
|
|
+ this.data = {
|
|
|
+ tableName: "船舶信息",
|
|
|
+ userId: Cookies.get("userName"),
|
|
|
+ sysTableSetList: this.setRowList,
|
|
|
+ };
|
|
|
+ addSet(this.data).then((res) => {
|
|
|
+ this.getRowList = this.setRowList.filter((e) => e.checked == 0);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.blNo {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+/deep/ #demo-table-expand {
|
|
|
+ font-size: 0;
|
|
|
+}
|
|
|
+/deep/ #demo-table-expand label {
|
|
|
+ width: 90px;
|
|
|
+ color: #99a9bf;
|
|
|
+}
|
|
|
+/deep/ #demo-table-expand .el-form-item {
|
|
|
+ margin-right: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+ width: 50%;
|
|
|
+}
|
|
|
+</style>
|
buck