index.vue

<template>
  <div>
    <el-row type="flex" style="margin-top: 15px; margin-bottom: 15px" justify="center">
      <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="22">
        <el-card>
          <el-descriptions :column="4" border>
            <el-descriptions-item :label="$t('自编号')">
              {{ shipmentObj.selfNo }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('运输方式')">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="shipmentObj.transportType" />
            </el-descriptions-item>
            <el-descriptions-item :label="$t('始发地')">
              {{ getCityName(shipmentObj.startWarehouseId) }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('目的地')">
              {{ getCityName(shipmentObj.destWarehouseId) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-row style="margin-top: 15px">
          <el-row>
            <el-button
              size="small"
              type="primary"
              :disabled="shipmentObj.approvaling"
              @click="
                addMergedialogVisible = true
                isMergeEdit = false
                addMergeForm = {}
                mergeTitle = $t('新建合包箱号')
              "
              >{{ $t('新建合包箱号') }}</el-button
            >
            <el-button class="ml-10" @click="pack">{{$t('补单')}}</el-button>
            <span style="margin:0 20px">{{$t('状态')}}</span>
            <el-select v-model="pkgStatus"  :placeholder="$t('状态')"  @change="changeStatus" >
              <el-option :label="$t('全部')" value="0"></el-option>
               <el-option :label="$t('未装箱')" value="1"></el-option>
                <el-option :label="$t('装箱中')" value="2"></el-option>
                <el-option :label="$t('已装箱')" value="3"></el-option>
            </el-select>
          </el-row>
          <el-row style="margin-top: 5px">
            <el-table border :data="pagList" max-height="600px">
              <el-table-column align="center" :label="$t('序号')" width="50" type="index" />
              <el-table-column :label="$t('箱号')" align="center" prop="pkgNum">
                <template slot-scope="scope">
                  <el-button type="text" @click="showPageOrder(scope.row)">{{scope.row.pkgNum}}</el-button>
                </template>
              </el-table-column>
              <el-table-column :label="$t('尺寸')" align="center">
                <template slot-scope="scope"> {{ scope.row.pkgLength }}*{{ scope.row.pkgWidth }}*{{ scope.row.pkgHight }} </template>
              </el-table-column>
              <el-table-column :label="$t('订单数')" align="center" prop="orderCount" />
              <el-table-column :label="$t('箱数')" align="center" prop="sumNum" />
              <el-table-column :label="$t('体积')" align="center" prop="sumVolume" />
              <el-table-column :label="$t('重量')" align="center" prop="sumWeight" />
              <el-table-column :label="$t('数量（个）')" align="center" prop="sumQuantity" />
              <el-table-column :label="$t('状态')" align="center" prop="tallyStatus">
                <template slot-scope="scope">
                  {{ statusData[scope.row.status] }}
                </template>
              </el-table-column>
              <el-table-column :label="$t('创建时间')" align="center" width="200px">
                <template slot-scope="scope">
                  {{ formatDate(scope.row.createTime, 'YYYY-MM-DD HH:mm:ss') }}
                </template>
              </el-table-column>
              <el-table-column :label="$t('操作')" align="center" width="260" class-name="small-padding fixed-width" fixed="right">
                <template slot-scope="scope">
                  <el-button :disabled="shipmentObj.approvaling" v-if="scope.row.status == 1" type="text" size="small" @click="editMerge(scope.row)">{{ $t('编辑') }}</el-button>
                  <el-button :disabled="shipmentObj.approvaling" type="text" size="small" @click="pkgPage(scope.row)">{{ $t('装箱') }}</el-button>
                  <el-button v-if="scope.row.status != 2" type="text" size="small" @click="deleteMerge(scope.row.id)">{{ $t('删除') }}</el-button>
                  <el-button type="text" size="small" @click="printTag(scope.row.id)">{{ $t('打印标签') }}</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows" @pagination="getList" />
          </el-row>
        </el-row>
        <!-- 新增合包箱 -->
        <el-dialog :title="mergeTitle" :visible.sync="addMergedialogVisible" width="700px" :modal-append-to-body="false" append-to-body>
          <el-form ref="addMergeForm" :model="addMergeForm" label-width="100px">
            <el-form-item :label="$t('箱号')" prop="pkgNum">
              {{ !isMergeEdit ? '自动生成' : addMergeForm.pkgNum }}
            </el-form-item>
            <el-form-item v-if="!isMergeEdit" :label="$t('数量')" prop="num" :rules="[{ required: true, message: this.$t('数量不能为空'), trigger: 'blur' }]">
              <el-input-number v-model="addMergeForm.num" :controls="false" :min="1" :precision="0" />
            </el-form-item>
            <el-row>
              <el-col :span="8">
                <el-form-item :label="$t('长')" prop="pkgLength" :rules="[{ validator: validatorPositiveNumber, message: $t('格式错误'), trigger: 'blur'}]">
                  <el-input v-model="addMergeForm.pkgLength" style="width: 100px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('宽')" prop="pkgWidth" :rules="[{ validator: validatorPositiveNumber, message: $t('格式错误'), trigger: 'blur'}]">
                  <el-input v-model="addMergeForm.pkgWidth" style="width: 100px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('高')" prop="pkgHight" :rules="[{ validator: validatorPositiveNumber, message: $t('格式错误'), trigger: 'blur'}]">
                  <el-input v-model="addMergeForm.pkgHight" style="width: 100px" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div style="text-align: center">
            <el-button size="small" type="primary" @click="addMerge">{{ $t('确定') }}</el-button>
            <el-button size="small" type="primary" @click="addMergedialogVisible = false">{{ $t('取消') }}</el-button>
          </div>
        </el-dialog>
        <!-- 装箱 -->
        <el-dialog :title="pkgPageTitle" :visible.sync="pkgPagedialogVisible" :fullscreen="true" :modal-append-to-body="false" append-to-body @close="pkgPageType=0">
          <div class="flex">
            <el-radio-group v-model="pkgPageType">
              <el-radio-button :label="1">{{ $t('未装箱列表') }}</el-radio-button>
              <el-radio-button :label="2">{{ $t('已装箱列表') }}</el-radio-button>
            </el-radio-group>
          </div>
          <un-pkg-page v-if="pkgPageType == 1" :pkgData="pkgData" :shipmentObj="shipmentObj" @reload="getList" />
          <pkg-page v-if="pkgPageType == 2" :pkgData="pkgData" :shipmentObj="shipmentObj" @closeDialog="closeDialog" @reload="getList" />
        </el-dialog>
        <!-- 打印标签 -->
        <el-dialog :title="$t('封箱标签')" :visible.sync="printdialogVisible" width="350px" :modal-append-to-body="false" append-to-body>
          <print-tag v-if="printdialogVisible" :tagData="tagData" />
        </el-dialog>

        <!-- 查看已装箱订单 -->
        <el-dialog :title="showPageTitle" :visible.sync="showPagedialogVisible" :fullscreen="true" :modal-append-to-body="false" append-to-body @close="pkgPageType=0">
          <div class="flex">
            <el-radio-group v-model="pkgPageType">
              <el-radio-button :label="2">{{ $t('已装箱列表') }}</el-radio-button>
            </el-radio-group>
          </div>
          <pkg-page v-if="showPagedialogVisible" :pkgData="showPkgData" :shipmentObj="shipmentObj" flag="show" @closeDialog="closeDialog" @reload="getList" />
        </el-dialog>

        <el-row style="margin-top: 15px" class="operate-button">
          <el-button :disabled="shipmentObj.approvaling" size="small" type="primary" @click="finish">{{ $t('完成') }}</el-button>
          <el-button size="small" @click="$emit('closeDialog')">{{ $t('取消') }}</el-button>
        </el-row>
      </el-col>
    </el-row>

    <supplement-order
      v-if="showPackDialog"
      :shipmentObj="shipmentObj"
      :warehouseList="$attrs.warehouseList"
      @close="showPackDialog=false"
      @supplementFinish="onSupplementFinish"
    ></supplement-order>
  </div>
</template>

<script>
import { getMergePkgList, createMergePkg, updateMergePkg, deleteMergePkg, getMergeTagById, finishMergePkg } from '@/api/ecw/boxAir'
import { formatDate, serviceMsg } from '../../utils'
import unPkgPage from './unPkgPage.vue'
import PkgPage from './pkgPage.vue'
import printTag from './printTag.vue'
import SupplementOrder from "./supplementOrder.vue";
export default {
  components: {
    SupplementOrder,
    unPkgPage,
    PkgPage,
    printTag
  },
  data() {
    let validatorPositiveNumber = (rule, value, callback) => {
        if(!value || value == '')return callback();
        if (!value) return callback(new Error('请输入数字'))
        if (!Number(value)) return callback(new Error('请输入有效数字'))
        let reg = /((^[1-9]\d*)|^0)(\.\d*){0,1}$/;
        if (!reg.test(value)) return callback(new Error('请输入有效数字'));
        callback();
    }
    return {
      validatorPositiveNumber,
      pagList: [],
      statusData: ['', '未装箱', '装箱中', '已封箱'],
      // 查询参数
      queryParams: {
        page: 1,
        rows: 10,
        shipmentId: this.$attrs.shipmentObj.id
      },
      total: 0,
      // 出货信息
      shipmentObj: this.$attrs.shipmentObj,
      addMergedialogVisible: false,
      addMergeForm: {
        pkgLength: null,
        pkgWidth: null,
        pkgHight: null,
      },
      mergeTitle: '',
      isMergeEdit: false,
      pkgPageType: 1,
      pkgPageTitle: '',
      pkgPagedialogVisible: false,
      pkgData: {},
      printdialogVisible: false,
      tagData: {},
      // 是否显示补单弹层
      showPackDialog: false,
      showPagedialogVisible: false,
      showPageTitle: '',
      showPkgData: {},
      pkgStatus:"0" //装箱状态
    }
  },
  created() {
    this.getList()
  },
  computed: {
    /* 获取仓库 */
    getCityName() {
      return (id) => {
        let arr = this.$attrs.warehouseList.filter((item) => item.id == id)
        return arr.length > 0 ? this.$l(arr[0], 'title') : this.$t('无')
      }
    }
  },
  methods: {
    formatDate,
    getList() {
      if(this.pkgStatus>0){
        this.queryParams.status = this.pkgStatus
      }else{
        delete this.queryParams.status
      }
      getMergePkgList(this.queryParams).then((res) => {
        this.pagList = res.data.list
        this.total = res.data.total
      })
    },
    editMerge(row) {
      this.mergeTitle = this.$t('编辑合包箱号')
      this.isMergeEdit = true
      this.addMergedialogVisible = true
      this.addMergeForm.pkgNum = row.pkgNum
      this.addMergeForm.pkgLength = +row.pkgLength
      this.addMergeForm.pkgWidth = +row.pkgWidth
      this.addMergeForm.pkgHight = +row.pkgHight
      this.addMergeForm.id = row.id
    },
    addMerge() {
      this.$refs['addMergeForm'].validate((valid) => {
        if (!valid) {
          return
        }
        this.addMergeForm.shipmentId = this.$attrs.shipmentObj.id
        if (!this.addMergeForm.id) {
          createMergePkg(this.addMergeForm).then((res) => {
            serviceMsg(res, this).then(() => {
              this.addMergedialogVisible = false
              this.getList()
            })
          })
        } else {
          updateMergePkg(this.addMergeForm).then((res) => {
            serviceMsg(res, this).then(() => {
              this.addMergedialogVisible = false
              this.getList()
            })
          })
        }
      })
    },
    deleteMerge(id) {
      this.$modal
        .confirm(this.$t('是否确认删除?'))
        .then(function () {
          return deleteMergePkg(id)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess(this.$t('删除成功'))
        })
        .catch(() => {})
    },
    pkgPage(row) {
      this.pkgPagedialogVisible = true
      this.pkgPageType=1
      this.pkgPageTitle = this.$t('合包箱号: ') + row.pkgNum
      this.pkgData = row
    },
    showPageOrder(row) {
      this.showPagedialogVisible = true
      this.showPageTitle = this.$t('合包箱号: ') + row.pkgNum
      this.showPkgData = row
    },
    printTag(id) {
      getMergeTagById(id).then(res=>{
        this.tagData = res.data
        this.printdialogVisible = true
      })
    },
    closeDialog() {
      this.getList()
      this.pkgPagedialogVisible = false
    },
    finish() {
      finishMergePkg(this.$attrs.shipmentObj.id).then((res) => {
        serviceMsg(res, this).then(() => {
          this.$emit("closeDialog", "submit");
        });
      });
    },
    // 补单
    pack(){
      this.showPackDialog=true
    },
    // 提交补单
    onSupplementFinish(){
      this.showPackDialog = false
      this.$emit('getBoxInfo')
    },
    changeStatus(){
      this.getList()
    }
  }
}
</script>

<style>
</style>