<template> 
 | 
  <div> 
 | 
    <vol-box 
 | 
      v-model="showDetialBox" 
 | 
      :lazy="true" 
 | 
      width="600px" 
 | 
      :padding="15" 
 | 
      title="打印" 
 | 
    > 
 | 
      <div> 
 | 
        <el-form> 
 | 
          <el-form-item required label="请选择仓库:"> 
 | 
            <el-select 
 | 
              v-model="warehouseId" 
 | 
              filterable 
 | 
              placeholder="请选择" 
 | 
              @change="getPalletType" 
 | 
            > 
 | 
              <el-option 
 | 
                v-for="item in warehouses" 
 | 
                :key="item.key" 
 | 
                :label="item.value" 
 | 
                :value="item.key" 
 | 
              > 
 | 
                <span style="float: left">{{ item.value }}</span> 
 | 
                <span style="float: right; color: #8492a6; font-size: 13px">{{ 
 | 
                  item.key 
 | 
                }}</span> 
 | 
              </el-option> 
 | 
            </el-select> 
 | 
          </el-form-item> 
 | 
          <el-form-item required label="请输入数量:" 
 | 
            ><el-input-number 
 | 
              v-model="num" 
 | 
              :min="1" 
 | 
              :max="100" 
 | 
              label="请输入数量" 
 | 
            ></el-input-number> 
 | 
          </el-form-item> 
 | 
          <el-form-item 
 | 
            required 
 | 
            label="请选择托盘类型:" 
 | 
            v-show="warehouseId != ''" 
 | 
          > 
 | 
            <el-radio-group v-model="palletType"> 
 | 
              <el-radio 
 | 
                v-for="item in palletTypes" 
 | 
                :key="item.key" 
 | 
                :label="item" 
 | 
                >{{ item.value }}</el-radio 
 | 
              > 
 | 
            </el-radio-group> 
 | 
          </el-form-item> 
 | 
        </el-form> 
 | 
      </div> 
 | 
      <template #footer> 
 | 
        <el-button type="primary" size="small" @click="submit">确认</el-button> 
 | 
        <el-button type="danger" size="small" @click="close">关闭</el-button> 
 | 
      </template> 
 | 
    </vol-box> 
 | 
  </div> 
 | 
</template> 
 | 
     
 | 
    <script> 
 | 
import VolBox from "@/components/basic/VolBox.vue"; 
 | 
export default { 
 | 
  components: { VolBox }, 
 | 
  data() { 
 | 
    return { 
 | 
      showDetialBox: false, 
 | 
      warehouses: [], 
 | 
      warehouseId: "", 
 | 
      palletType: "", 
 | 
      palletTypes: [], 
 | 
      num: 1, 
 | 
    }; 
 | 
  }, 
 | 
  methods: { 
 | 
    open() { 
 | 
      if (this.warehouses.length == 0) { 
 | 
        this.getWarehouseInfos(); 
 | 
      } 
 | 
      if (this.warehouses.length == 1) { 
 | 
            this.warehouseId = this.warehouses[0].key; 
 | 
          } 
 | 
      this.showDetialBox = true; 
 | 
    }, 
 | 
    getWarehouseInfos() { 
 | 
      this.http 
 | 
        .post("api/Warehouse/GetWarehouseDicByUser", null, "数据处理中") 
 | 
        .then((x) => { 
 | 
          if (!x.status) return this.$message.error(x.message); 
 | 
          this.warehouses = x.data; 
 | 
          if (this.warehouses.length == 1) { 
 | 
            this.warehouseId = this.warehouses[0].key; 
 | 
          } 
 | 
        }); 
 | 
    }, 
 | 
    getPalletType() { 
 | 
      this.palletTypes = this.warehouses.find( 
 | 
        (x) => x.key == this.warehouseId 
 | 
      ).extra; 
 | 
    }, 
 | 
    close() { 
 | 
      this.showDetialBox = false; 
 | 
      if (this.warehouses.length > 1) { 
 | 
        this.warehouseId = ""; 
 | 
      } 
 | 
      this.palletType = ""; 
 | 
    }, 
 | 
    submit() { 
 | 
      this.http 
 | 
        .post( 
 | 
          `api/PalletCodeInfo/AddPalletCodeData?count=${this.num}&warehouseId=${this.warehouseId}&palletTypeId=${this.palletType.key}`, 
 | 
          null, 
 | 
          "数据处理中" 
 | 
        ) 
 | 
        .then((x) => { 
 | 
          if (!x.status) return this.$message.error(x.message); 
 | 
          this.$message.success("操作成功"); 
 | 
          this.$parent.refresh(); 
 | 
          this.close(); 
 | 
        }); 
 | 
    }, 
 | 
  }, 
 | 
  created() {}, 
 | 
}; 
 | 
</script> 
 | 
     
 | 
    <style scoped> 
 | 
.el-col { 
 | 
  border-radius: 4px; 
 | 
} 
 | 
  
 | 
.grid-content { 
 | 
  border-radius: 4px; 
 | 
  min-height: 36px; 
 | 
} 
 | 
  
 | 
.content-text { 
 | 
  display: flex; 
 | 
  align-items: center; 
 | 
  justify-content: center; 
 | 
} 
 | 
  
 | 
.right-text { 
 | 
  display: flex; 
 | 
  align-items: center; 
 | 
  justify-content: flex-end; 
 | 
} 
 | 
</style> 
 | 
    <style> 
 | 
.el-table .warning-row { 
 | 
  background: #e6a23c; 
 | 
} 
 | 
  
 | 
.el-table .success-row { 
 | 
  background: #f0f9eb; 
 | 
} 
 | 
  
 | 
.el-table .error-row { 
 | 
  background: #f56c6c; 
 | 
} 
 | 
  
 | 
canvas { 
 | 
  display: block; 
 | 
  margin: auto; 
 | 
} 
 | 
</style> 
 |