wms-web-mule/src/components/handOut.vue

<!--  -->
<template>
    <div style="margin-left: 10px">
        <el-dialog :model-value="modelValue" :show-close="false" title="下发出库任务"
            @close="() => $emit('update:modelValue', false)">
            <div>
                <el-form
                    label-width="150px"
                    :model="bindingData"
                    require-asterisk-position="right"
                    inline
                >
                    <el-form-item label="零件号：" required>
                    <el-input class="form-input" v-model="bindingData.goodsId" clearable/>
                    </el-form-item>
                    <el-form-item label="数量：" required>
                    <el-input class="form-input" v-model="bindingData.goodsNum" clearable/>
                    </el-form-item>
                    <div style="margin-top: 50px">
                        <el-button type="warning" @click="resetInput">
                          <el-icon class="el-icon--left"><RefreshRight/></el-icon>
                          重置输入
                        </el-button>
                        <el-button type="primary" @click="addOrder()">
                          <el-icon class="el-icon--left"><Search /></el-icon>
                          下发任务
                        </el-button>
                        <el-button type="danger" @click="$emit('update:modelValue', false)">
                          <el-icon class="el-icon--left"><CircleCloseFilled/></el-icon>
                          关闭窗口
                        </el-button>
                      </div>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import  《组件名称》  from '《组件路径》 ';
import {CircleCloseFilled, Close, RefreshRight} from "@element-plus/icons-vue";
import {formatterOrderInEnum} from "@/enum/order.in.enum";
import {formatCellValueTime} from "@/utils/formatter";
import {ElMessage, ElMessageBox} from "element-plus";
//import apiOrderIn from '@/api/order.in';
import apiOrderOut from '@/api/order.out'

export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {Close, CircleCloseFilled, RefreshRight},
  props: ['modelValue'],
  emits: ['update:modelValue'],
  data() {
    // 这里存放数据
    return {
      // 绑定表单数据
      bindingData: {
        goodsId: '',
        goodsNum: '',
      },
      bindOrderInList: []
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    formatCellValueTime,
    formatterOrderInEnum,

    addOrder() {
      if(this.bindingData.goodsId === '' || this.bindingData.goodsNum === '') {
        ElMessage({
          message: '数量和物料号不能为空',
          type: 'error',
        });
        return;
      }
        this.bindOrderInList = []
        ElMessageBox.confirm(`是否执行手动出库?`, '提示')
          .then(() => {
            apiOrderOut.addOrder(this.bindingData).then(res => {
              const responseData = res.data;
              if (responseData.code === 0) {
                // 正确请求
                ElMessage({
                  message: '执行成功',
                  type: 'success',
                });
                this.bindOrderInList = responseData['returnData'];
              } else {
                // 服务报错
                ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '执行失败', {
                  type: 'warning',
                  confirmButtonText: '确定',
                  showClose: false
                })
              }
            }).catch(err => {
              // 通讯报错
              ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
                type: 'warning',
                confirmButtonText: '确定'
              })
            })
          })
          .catch(() => {
          })
      },

    test() {
      console.log(this.bindingData);
    },
    // 查看载具的绑定
    queryBinding() {
      if(this.bindingData.vehicleNo === '') {
        ElMessage({
          message: '载具号不能为空',
          type: 'error',
        });
        return;
      }
      this.bindOrderInList = [];
      apiOrderIn.getOrderInWithVehicleNo(this.bindingData.vehicleNo).then(res => {
        const responseData = res.data
        if (responseData.code === 0) {
          // 正确请求
          ElMessage({
            message: '查询成功',
            type: 'success',
          });
          this.bindOrderInList = responseData['returnData'];
        } else {
          // 服务报错
          ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '查询失败', {
            type: 'warning',
            confirmButtonText: '确定',
            showClose: false
          })
        }
      }).catch(err => {
        // 通讯报错
        ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
          type: 'warning',
          confirmButtonText: '确定'
        })
      })
    },
    // 重置输入框
    resetInput() {
      this.bindingData.goodsId = '';
      this.bindingData.goodsNum = '';
    },
    // 绑定物料
    bindingGoods() {
      if(this.bindingData.vehicleNo === '' || this.bindingData.code === '') {
        ElMessage({
          message: '载具号和物料号不能为空',
          type: 'error',
        });
        return;
      }
      apiOrderIn.bindingVehicle({vehicleNo: this.bindingData.vehicleNo, code: this.bindingData.code}).then(res => {
        const responseData = res.data
        if (responseData.code === 0) {
          // 正确请求
          ElMessage({
            message: '绑定成功',
            type: 'success',
          });
          this.queryBinding();
          this.bindingData.code = '';
        } else {
          // 服务报错
          ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '绑定失败', {
            type: 'warning',
            confirmButtonText: '确定',
            showClose: false
          })
        }
      }).catch(err => {
        // 通讯报错
        ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
          type: 'warning',
          confirmButtonText: '确定'
        })
      })
    },
  },
  
  // 组合式 API
  setup() {
  },
  // 创建之前
  beforeCreate() {
  },
  // 创建完成(可以访问 this 实例)
  created() {
  },
  // 生命周期 - 挂载之前
  beforeMount() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },
  // 更新之前
  beforeUpdate() {
  },
  // 更新之后
  updated() {
  },
  // 销毁之前
  beforeUnmount() {
  },
  // 销毁完成
  unmounted() {
  }
}
</script>

<style lang="scss" scoped>
$input-width: 500px;

.form-input {
  width: $input-width;
}

</style>