boying-vue/src/views/modules/boxManage/com_saleBoxManage_boxing.vue

<template>
  <div class="customer-css">
    <el-form label-position="top" style="margin-top: 1px; margin-left: 0px;">
        <el-form-item >
          <el-button type="primary" @click="searchTable()">查询</el-button>
          <el-button v-if="searchData.orderStatus === '待包装'" type="primary" @click="newBox()">新增箱</el-button>
        </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      :height=searchData.height
      border
      v-loading="dataListLoading"
      style="width: 100%; ">
      <el-table-column
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <a type="text" size="small" v-if="scope.row.status!=='未封箱'" @click="boxModelOpen(scope.row)">查看</a>
          <template v-if="searchData.orderStatus === '待包装'">
            <a type="text" size="small" v-if="scope.row.status!=='已封箱'"@click="boxModelOpen(scope.row)">装箱</a>
            <a type="text" size="small" v-if="scope.row.status==='未封箱'" @click="fengxiang(scope.row)">封箱</a>
            <a type="text" size="small" v-if="scope.row.status==='已封箱'" @click="chaixiang(scope.row)">拆箱</a>
            <a type="text" size="small" v-if="scope.row.status!=='已封箱'" @click="deleteBox(scope.row)">删除</a>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="卷清单"  :visible.sync="boxModelFlag" width="700px" @close="searchTable" style="margin-top: 7px"  v-drag :close-on-click-modal="false">
      <el-form class="sl" inline="inline" label-position="top"  style="margin-left: 7px;margin-top: -5px;">
        <el-row>
          <el-form-item label="销售发货单号">
            <el-input v-model="boxData.orderNo" disabled style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item label="箱号">
            <el-input v-model="boxData.boxNo" disabled style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item label="所在仓库">
            <el-input v-model="boxData.wareHouseID" disabled style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item label="标准装箱数量">
            <el-input v-model="boxData.stdPackingQty" disabled style="width: 130px" class="std-packing-qty-input"></el-input>
          </el-form-item>
        </el-row>
        <el-row v-if="!scanDisabled">
          <el-form-item label="扫描装箱">
            <el-input v-model="scanRollNo" ref="scanRollNo" :disabled="scanDisabled" @keyup.enter.native="handleBoxAction" style="width: 200px"></el-input>
          </el-form-item>
<!--          <el-form-item label="操作类型">-->
<!--            <el-radio-group v-model="boxActionType" size="small">-->
<!--              <el-radio-button  label="add">添加</el-radio-button>-->
<!--              <el-radio-button  label="delete">删除</el-radio-button>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
          <el-form-item label="操作类型" >
            <el-radio-group v-model="boxActionType" >
              <el-radio label="add" border>添加</el-radio>
              <el-radio label="delete" border>删除</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
      </el-form>
        <el-table
          :height="300"
          :data="modelList"
          stripe
          border
          style="width: 100%;">
          <el-table-column
            prop="orderId"
            header-align="center"
            align="center"
            min-width="60"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="finalRollNo"
            header-align="center"
            align="center"
            min-width="100"
            label="卷号">
          </el-table-column>
          <el-table-column
            prop="partNo"
            header-align="center"
            align="left"
            min-width="100"
            label="物料编码">
          </el-table-column>
          <el-table-column
            prop="rollQty"
            header-align="center"
            align="right"
            min-width="100"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="receivedDate"
            header-align="center"
            align="center"
            min-width="100"
            label="装箱日期">
          </el-table-column>
          <el-table-column
            prop="receivedBy"
            header-align="center"
            align="left"
            min-width="100"
            label="装箱人">
          </el-table-column>

        </el-table>
      <el-footer style="height:40px;margin-top: 25px;text-align:center">
        <el-button @click="boxModelFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>
  </div>
</template>

<script>

import {
  deleteBoxRoll,
  deleteSoReceiveBoxesData,
  newSoReceiveBoxesData, scanBoxRoll,
  searchBoxDetail,
  searchSoReceiveBoxesData, updateBoxStatus
} from '../../../api/boxManage/boxManage'

export default {
  components: {

  },
  data() {
    return {
      dataList: [],
      searchData: {
        site: '',
        username: '',
        buNo: '',
        orderNo: '',
        boxType: '',
        orderStatus: '',
        height:'300',
        page: 1,
        limit: 1000
      },
      scanDisabled: false,
      dataListLoading: false,
      currentRow:'',
      columnList: [
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table2BoxNo',
          tableId: "750001Table2",
          tableName: "装箱清单",
          columnProp: "boxNo",
          headerAlign: "center",
          align: "left",
          columnLabel: "外箱标签",
          columnWidth: '120',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table2Status',
          tableId: "750001Table2",
          tableName: "装箱清单",
          columnProp: "status",
          headerAlign: "center",
          align: "center",
          columnLabel: "状态",
          columnWidth: '80',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table2RollsQty',
          tableId: "750001Table2",
          tableName: "装箱清单",
          columnProp: "rollsQty",
          headerAlign: "center",
          align: "right",
          columnLabel: "卷数",
          columnWidth: '80',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table2WareHouseID',
          tableId: "750001Table2",
          tableName: "装箱清单",
          columnProp: "wareHouseID",
          headerAlign: "center",
          align: "left",
          columnLabel: "所在仓库",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table2WareHouseName',
          tableId: "750001Table2",
          tableName: "装箱清单",
          columnProp: "wareHouseName",
          headerAlign: "center",
          align: "left",
          columnLabel: "所在仓库名称",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table2CreatedBy',
          tableId: "750001Table2",
          tableName: "装箱清单",
          columnProp: "createdBy",
          headerAlign: "center",
          align: "left",
          columnLabel: "创建人",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table2CreatedDate',
          tableId: "750001Table2",
          tableName: "装箱清单",
          columnProp: "createdDate",
          headerAlign: "center",
          align: "left",
          columnLabel: "创建时间",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
      ],
      modelList:[],
      rollList:[],
      boxData:{
        site:'',
        orderNo:'',
        boxNo:'',
        buNo:'',
        wareHouseID:'',
        rollsQty: 0,
        stdPackingQty: 0, // 标准装箱数量
      },
      scanRollNo:'',
      boxModelFlag: false,
      boxActionType: 'add', // 新增：添加/删除模式
    }
  },
  methods: {
    //初始化组件的参数
    init(inData) {
      //初始化参数
      this.searchData = JSON.parse(JSON.stringify(inData));
      //刷新表格
      this.searchTable();
    },
    searchTable(){
      searchSoReceiveBoxesData(this.searchData).then(({data}) => {
        //区分请求成功和失败的状况
        if (data && data.code == 0) {
          this.dataList = data.rows
        } else {
          this.dataList = [];
        }
      });
    },
    newBox(){
      this.$confirm(`确定为此销售发货单新建箱?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let inData={
          site: this.searchData.site,
          createdBy: this.$store.state. user.name,
          buNo: this.searchData.buNo,
          orderNo: this.searchData.orderNo,
          boxType: this.searchData.boxType,
          status:'未封箱',
          rollsQty: 0,
        }
        newSoReceiveBoxesData(inData).then(({data}) => {
          if (data && data.code == 0) {
            this.$message.success( '操作成功')
            this.searchTable();
            let data2={
              site: this.searchData.site,
              boxNo: data.boxNo,
              buNo: this.searchData.buNo,
            }
            this.searchBox(data2)
            this.boxModelFlag = true
            this.boxActionType='add'
            this.$nextTick(() => {
              this.$refs.scanRollNo.focus();
            });
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      })
    },
    boxModelOpen(row){
      let inData={
        site: row.site,
        boxNo: row.boxNo,
        buNo: row.buNo,
      }
      this.searchBox(inData)
      if(row.status==='未封箱'){
        this.scanDisabled=false
      }else {
        this.scanDisabled = true
      }
      this.scanRollNo=''
      this.boxModelFlag = true
      this.boxActionType='add'
      this.$nextTick(() => {
        this.$refs.scanRollNo.focus();
      });
    },
    searchBox(inData){
      searchBoxDetail(inData).then(({data}) => {
        if (data && data.code == 0) {
          this.modelList=data.rows
          this.boxData=data.row
        }
      })
    },
    deleteBox(row){
      this.$confirm(`确定删除此箱?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteSoReceiveBoxesData(row).then(({data}) => {
          if (data && data.code == 0) {
            this.$message.success( '操作成功')
            this.searchTable();
          } else {
            this.$message.error( data.msg)
          }
        })
      })
    },
    fengxiang(row){
      this.$confirm(`确定封箱?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let inData={
          site: row.site,
          boxNo: row.boxNo,
          buNo: row.buNo,
          id: row.id,
          flag:0,
        }
        updateBoxStatus(inData).then(({data}) => {
          if (data && data.code == 0) {
            this.$message.success( '操作成功')
            this.searchTable();
          }else {
            this.$message.error( data.msg)
          }
        })
      })
    },
    chaixiang(row){
      this.$confirm(`确定封箱?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let inData={
          site: row.site,
          boxNo: row.boxNo,
          buNo: row.buNo,
          id: row.id,
          flag:1,
        }
        updateBoxStatus(inData).then(({data}) => {
          if (data && data.code == 0) {
            this.$message.success( '操作成功')
            this.searchTable();
          }else {
            this.$message.error( data.msg)
          }
        })
      })
    },

    handleBoxAction() {
      // const arr = this.scanRollNo.split(';');
      // if (arr.length < 3) {
      //   this.$message.error('扫描的标签格式不正确！');
      //   return;
      // }
      if(this.scanRollNo==null||this.scanRollNo===''){
        this.$message.error('请扫描标签！');
      }
      const inData = {
        site: this.boxData.site,
        buNo: this.boxData.buNo,
        finalRollNo: this.scanRollNo,
        boxNo: this.boxData.boxNo,
      };
      if(this.boxActionType==='add'){
        scanBoxRoll(inData).then(({data}) => {
          if (data && data.code === 0) {
            this.$message.success('扫描成功');
            this.searchBox({
              site: this.boxData.site,
              boxNo: this.boxData.boxNo,
              buNo: this.boxData.buNo,
            });
            this.scanRollNo = '';
            this.$nextTick(() => {
              this.$refs.scanRollNo.focus();
            });
          } else {
            this.$message.error(data.msg || '扫描失败');
            this.scanRollNo = '';
            this.$nextTick(() => {
              this.$refs.scanRollNo.focus();
            });
          }
        }).catch(() => {
          this.$message.error('网络异常，扫描失败');
          this.scanRollNo = '';
          this.$nextTick(() => {
            this.$refs.scanRollNo.focus();
          });
        });
      }else {

        deleteBoxRoll(inData).then(({data}) => {
          if (data && data.code === 0) {
            this.$message.success('扫描成功');
            this.searchBox({
              site: this.boxData.site,
              boxNo: this.boxData.boxNo,
              buNo: this.boxData.buNo,
            });
            this.scanRollNo = '';
            this.$nextTick(() => {
              this.$refs.scanRollNo.focus();
            });
          } else {
            this.$message.error(data.msg || '扫描失败');
            this.scanRollNo = '';
            this.$nextTick(() => {
              this.$refs.scanRollNo.focus();
            });
          }
        }).catch(() => {
          this.$message.error('网络异常，扫描失败');
          this.scanRollNo = '';
          this.$nextTick(() => {
            this.$refs.scanRollNo.focus();
          });
        });
      }

    }
  },
  watch: {
    boxActionType() {
      this.$nextTick(() => {
        if (this.$refs.scanRollNo) {
          this.$refs.scanRollNo.focus();
        }
      });
    }
  },
}
</script>

<style scoped lang="scss">

.rq .auto /deep/ .el-form-item__content{
  height: auto;
  line-height: 1.5;
}
/deep/ .el-table__fixed-right-patch {
  display: none !important;
}
.sl .el-radio--medium.is-bordered {
  padding: 2px 5px 0px 5px;
  border-radius: 4px;
  height: 20px;
}
/* 标准装箱数量输入框右对齐 */
.std-packing-qty-input /deep/ .el-input__inner {
  text-align: right;
}
</style>