emis-frontend/src/views/emis/emisWarehouseInBatch/WarehouseInBatchPanel.vue

<template>
   <div style="font-size: 12px;" v-if="whsInInfo">

    <div style="margin-bottom:20px" >
      <el-descriptions  title=""  size="mini"  :column="4">
        <el-descriptions-item label="进仓单号">{{ whsInInfo.inNo }}</el-descriptions-item>
        <el-descriptions-item label="运单号">
          <span @click="handleShowOrderInfo" style="cursor: pointer;">  {{ whsInInfo.billCode }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="订单号">
            <span @click="handleShowOrderInfo" style="cursor: pointer;">{{ whsInInfo.orderSn }}</span>

           <!-- -->
        </el-descriptions-item>
        <el-descriptions-item label="客户名称">{{ whsInInfo.customerName }}</el-descriptions-item>
        <el-descriptions-item label="预约进仓日期" :span="4"><span style="font-weight: bold;color: red;">{{ whsInInfo.waybillDetail.pickStartDate }}</span></el-descriptions-item>

        <el-descriptions-item label="仓库信息"  :span="4">
            <div>
              仓库名：<span>{{ whsInInfo.waybillDetail.intoWarehouseName }}</span>
            </div>
            <div>
              联系人: <span>{{ whsInInfo.waybillDetail.intoWarehouseContact }} {{ whsInInfo.waybillDetail.intoWarehousePhone }} </span>
            </div>
            <div>
              地址:{{ whsInInfo.waybillDetail.intoWarehouseAddress }}
            </div>
        </el-descriptions-item>
        <el-descriptions-item label="进仓状态">
          <el-tag v-if="whsInInfo.stockInFlag=='0'" type="info">未入仓</el-tag>
                <el-tag v-if="whsInInfo.stockInFlag=='1'" type="success">已入仓</el-tag>
                <el-tag v-if="whsInInfo.stockInFlag=='2'" type="warning">部分入仓</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="入仓总件数">{{ whsInInfo.totalParcelQty }}</el-descriptions-item>
        <el-descriptions-item label="入仓总重量">{{ whsInInfo.totalWeight }}kg</el-descriptions-item>
        <el-descriptions-item label="入仓总体积">{{ whsInInfo.totalVolume }}m³</el-descriptions-item>

        <el-descriptions-item label="确认状态">
          <el-tag v-if="whsInInfo.confirmStatus=='0'" type="info">未确认</el-tag>
                <el-tag v-if="whsInInfo.confirmStatus=='1'" type="success">已确认</el-tag>
                <el-tag v-if="whsInInfo.confirmStatus=='2'" type="warning">部分确认</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="确认时间">{{ whsInInfo.confirmDate }}</el-descriptions-item>
      </el-descriptions>
      <el-button
                  type="primary"
                  plain
                  size="mini"
                  @click="handleShowOrderInfo"
                >查看订单详情</el-button>

    </div>

  <div style="margin-bottom:20px">
      <div>
        <WsInBatchList :inNo="inNo"> </WsInBatchList>
      </div>
  </div>


    <el-dialog title="订单详情" :visible.sync="openTraceInfo" width="70%" :close-on-click-modal="false"  v-dialogDrag append-to-body>
      <OrderDetailReadOnly  :key="currentTraceBillCode" :billCode="currentTraceBillCode"></OrderDetailReadOnly>
    </el-dialog>

</div>
</template>

<script>
import { getWarehouseInInfo} from "@/api/emis/emisWarehouseIn";

import { listEmisWarehouseInBatch, getEmisWarehouseInBatch, delEmisWarehouseInBatch, addEmisWarehouseInBatch, updateEmisWarehouseInBatch } from "@/api/emis/emisWarehouseInBatch";
import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
import OrderDetailReadOnly from '@/views/emis/emisWaybill/OrderDetailReadOnly.vue';
import WsInBatchList from '@/views/emis/emisWarehouseInBatch/WsInBatchList.vue';

export default {
  name: "emisWarehouseInBatch",
  components: { elDateSimplePicker,OrderDetailReadOnly,WsInBatchList },
  props:{
    inNo:{
        type:String
    }
  },
  dicts: [
  ],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 创建时间搜索
      dateTimeRange:[],
      // 总条数
      total: 0,

      whsInInfo:null,
      // 进仓单批次表格数据
      emisWarehouseInBatchList: [],

      currentId:null,
      openForm: false,
      titleForm: "",

      openTraceInfo:false,
      currentTraceBillCode:null,

      // 弹出展示层
      id:null,
      titleView:"",
      openView: false,
      // 更新站点时间范围
      daterangeEntryDate: [],
      // 更新站点时间范围
      daterangeConfirmDate: [],
      // 更新站点时间范围
      daterangeCreateTime: [],
      // 更新站点时间范围
      daterangeUpdateTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        serialNo: null,
        inNo: null,
        inBatchNo: null,
        customerCode: null,
        customerName: null,
        orderSn: null,
        billCode: null,
        transCarNo: null,
        entryDate: null,
        confirmStatus: null,
        confirmDate: null,
        status: null,
        totalParcelQty: null,
        totalVolume: null,
        totalWeight: null,
        remark: null,
        delFlag: null,
      },
    };
  },
  created() {
    this.initData();
  },
  methods: {

    handleShowOrderInfo(){
      this.currentTraceBillCode=this.whsInInfo.billCode;
      this.openTraceInfo=true;
    },
    initData(){
      this.loading = true;
      getWarehouseInInfo(this.inNo).then(response => {
        this.whsInInfo = response.data;
        this.loading = false;
      });
    },

    /** 查询进仓单批次列表 */
    getList() {
      this.loading = true;
      listEmisWarehouseInBatch(this.addDateRange(this.queryParams, this.dateTimeRange)).then(response => {
        this.emisWarehouseInBatchList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    // 排序 查询字段是表格中字段名字 动态取值排序顺序
    handleSortChange(column) {
      this.queryParams.orderByColumn = column.prop;
      this.queryParams.isAsc = column.order;
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.currentId=null;
      this.openForm= true;
      this.titleForm = "新增";
    },
    handleShowMoreInput(){
      this.moreInputVisible = !this.moreInputVisible;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
       this.currentId= row.id;
       this.openForm = true;
       this.titleForm = "修改";
    },
    handleView(row) {
       this.id=row.id;
       this.titleView="查看";
       this.openView=true;
    //   this.router.push({ path: '/emis/emisWarehouseInBatch/viewDetail', query: { id: row.id }})
    },
    handleFormChanged(){
        this.openForm = false;
        this.getList();
    },
    cancelForm(){
      this.openForm = false;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除').then(function() {
        return delEmisWarehouseInBatch(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
    //   this.download('emis/emisWarehouseInBatch/export', {
    //     ...this.queryParams
    //   }, `emisWarehouseInBatch_${new Date().getTime()}.xlsx`)
     const loadingInstance = this.$loading({
            text: '正在导出...'
        })
       var qParam = {...this.queryParams};
       qParam.pageNum=1;
       qParam.pageSize=5000;

       listEmisWarehouseInBatch(this.addDateRange(qParam, this.dateTimeRange)).then(response => {
        this.downloadLoading = false
        if (response.code === 200) {
                const curList = response.rows
                import('@/vendor/Export2Excel').then(excel => {
                  const tHeader = ['id','进仓序列号','进仓单号','进仓子批次单号in_no+001','客户编号','客户名称','订单号','运单号','运输工具编号','进仓日期','客户确认状态','确认时间','状态','总件数','总体积','总重量','备注','租户ID','删除标志（0代表存在','创建者','创建时间','更新者','更新时间','创建站点','更新站点',];
                  const filterVal = ['id','serialNo','inNo','inBatchNo','customerCode','customerName','orderSn','billCode','transCarNo','entryDate','confirmStatus','confirmDate','status','totalParcelQty','totalVolume','totalWeight','remark','tenantId','delFlag','createBy','createTime','updateBy','updateTime','createSite','updateSite',];
                  const data = this.formatJson(filterVal, curList, response.rows)
                  excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: '进仓单批次',
                    autoWidth: true
                  })
                  loadingInstance.close()
                })
        }
      });
    },
    formatJson(filterVal, jsonData, resData) {
      let index = 0
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'index') {
          return ++index
        }
        if (j === 'status') {
          var statusStr='xxx'
          if(v[j] == 10){
              statusStr='xxx'
          }
          return statusStr;
        }
        return v[j]
      }))
    },
    /** 列索引函数  */
    getIndex($index) {
          return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
    },
    /** 时间搜索响应函数 */
    dateTimeChange(value){
        this.dateTimeRange=value;
    },
  }
};
</script>


<style lang="scss" scoped>

  .el-descriptions-item__content{
    font-weight:bold;
    color: #000;
  }

  .el-form-item__label {
      color: #000;
  }

  .el-input-group__append {
      padding: 0 4px;
  }

  .el-row{
        display:flex;
        flex-wrap: wrap;
        // padding-right: 10px;
  }

  .el-form-item__label {
    font-size: 12px!important;
  }


  .platform-auto-complete {
    .el-autocomplete-suggestion__wrap {
      padding: 5px 0;
      ul li {
        pointer-events: none; // 阻止可点击事件
        .default {
          text-align: center;
          color: #999;
        }
        &:hover {
          background-color: #fff;
        }
      }
    }
  }

  .el-collapse {
      border-top: none!important;
      border-bottom: none!important;
  }

  .el-table .el-table__cell:first-child .cell {
    padding: 0px;
  }

  .el-table .cell {
      padding: 0px;
  }

  .cargoList{
    .el-input__inner {
        height: 28px;
        line-height: 28px;
        border: none;
        background: #ffffcd;
        font-size: 10px;
        padding: 0px;
        text-align: center;
    }
  }

  .el-descriptions__title{
    font-size: 12px;
  }

  .el-collapse-item__content {
      padding-bottom: 0px;
  }
  .el-collapse-item__header{
    pointer-events: none;
  }

  .el-collapse-item__arrow {
    pointer-events: auto;
  }

</style>