lemonBeans_ui/src/views/kaihe/singleVoyageShip/index.vue

<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>
        </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();
  },
  activated() {
    this.getList();
  },
  methods: {
    async getList() {
      this.loading = false;
      await listSingleVoyageByShip(this.queryParams).then(response => {
        console.log(response.rows)
        this.singleShipList = response.rows;
        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.ship[0].fArrivalStatus === 0) {
        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 => {
            this.getList();
            this.$message({
              showClose: true,
              message: '出港操作成功',
              type: 'success'
            });
          })
        }
      }else {
        this.$message({
          showClose: true,
          message: '该航次已离港或已到港',
          type: 'warning'
        });
      }
    },
    // 到港卸船
    unloading() {
      if (this.ship[0].fArrivalStatus === 1) {
        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.getList();
            this.$message({
              showClose: true,
              message: '到港操作成功',
              type: 'success'
            });
          })
        }
      } else {
        this.$message({
          showClose: true,
          message: '该航次未离港或已到港',
          type: 'warning'
        });
      }
    },
    // 导出清单
    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>