jonhon-mes-web/src/views/productionManagement/components/batchesDialog.vue

<template>
  <el-dialog
    title="分批"
    append-to-body
    :modelValue="showBatches"
    @close="closeDialog"
    class="dialog"
    width="25%"
  >
    <el-form
      :model="batchesForm"
      :rules="batchesRules"
      label-width="100px"
      class="form"
      ref="batchesForm"
    >
      <el-form-item class="icon-right">
        <el-popover placement="right-start" :width="200" trigger="hover" append-to-body="false">
          <p>(1)返工：分批后剩余数量零件依据返工订单进行生产</p>
          <p>(2)关闭：分批后自动关闭剩余数量零件的生产</p>
          <p>(3)其他：分批后剩余数量零件排产后进行生产</p>
          <template #reference>
            <img src="@/assets/question_mark.png" alt="说明" class="img" />
          </template>
        </el-popover>
      </el-form-item>
      <el-form-item label="分批数量" prop="makeQty">
        <!-- <el-input
          placeholder="请输入分批数量"
          v-model="batchesForm.makeQty"
          type="number"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input> -->
        <el-input-number
          v-model="batchesForm.makeQty"
          controls-position="right"
          :min="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="分批原因" prop="batchReason">
        <el-select placeholder="请选择分批原因" v-model="batchesForm.batchReason">
          <el-option value="1" label="返工"></el-option>
          <el-option value="2" label="关闭"></el-option>
          <el-option value="3" label="其他"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit()" :loading="saveLoading">确 认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { inBatches } from '@/api/productionManagement/productionMonitoring';
export default {
  props: {
    showBatches: {
      type: Boolean,
      default: false,
    },
    itemData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      saveLoading: false,
      isOpen: false,
      batchesForm: {},
      batchesRules: {
        makeQty: [{ required: true, message: '请输入分批数量', trigger: 'blur' }],
        batchReason: [{ required: true, message: '请选择分批原因', trigger: 'blur' }],
      },
    };
  },
  mounted() {},
  methods: {
    // 关闭弹窗
    closeDialog() {
      this.$emit('closeDialog');
      this.$refs.batchesForm.resetFields();
    },
    submit() {
      this.$refs.batchesForm.validate(valid => {
        if (valid) {
          this.saveLoading = true;
          let query = {
            id: this.itemData[0].woId,
            batchNo: this.itemData[0].batchNo,
            cardNo: this.itemData[0].cardNo,
            woCode: this.itemData[0].woCode,
            makeQty: this.batchesForm.makeQty,
            batchReason: this.batchesForm.batchReason,
          };
          inBatches(query)
            .then(res => {
              this.$message.success('操作成功');
              this.saveLoading = false;
              this.closeDialog();
            })
            .catch(err => {
              this.saveLoading = false;
            });
        } else {
          this.saveLoading = false;
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.icon-right {
  position: relative !important;
  display: block !important;
  text-align: left !important;
  height: auto !important;
  overflow: visible !important;
}

.icon-right .img {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  cursor: pointer;
  display: inline-block !important;
  background: #fff;
}

.icon-right .el-form-item__content {
  margin-left: 0 !important;
  width: 100% !important;
  text-align: left !important;
}
</style>