jonhon-mes-web/src/views/orderManagement/components/mold/moldAddOneDialog.vue

<template>
  <el-dialog
    title="模具申报"
    append-to-body
    :modelValue="openShow"
    width="40%"
    @close="closeDialog"
  >
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="零件编码:">{{ form.partCode }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="零件名称:">{{ form.partName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工装号:">{{ form.moCode }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工装名称:">{{ form.moName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数量:" prop="quaLevel">
            <el-input-number
              v-model="form.quaLevel"
              :min="1"
              controls-position="right"
              style="width: 80%"
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计划类型:" prop="moCodes">
            <el-select
              v-model="form.moCodes"
              :filterable="true"
              allow-create
              style="width: 80%"
            >
              <el-option label="计划类型一" value="1" />
              <el-option label="计划类型二" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="需求日期:" prop="needDate">
            <el-date-picker
              v-model="form.needDate"
              type="date"
              placeholder="请选择"
              style="width: 80%"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产标识:" prop="quaLevels">
            <el-input v-model="form.quaLevels" style="width: 80%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="保管员:" prop="keeper">
            <el-select
              v-model="form.keeper"
              :filterable="true"
              allow-create
              style="width: 80%"
            >
              <el-option label="人员一" value="1" />
              <el-option label="人员二" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注:">
            <el-input v-model="form.memo" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { getOrderMoldPlanCaDeatils,update } from '@/api/orderManagement/moldPlan';
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {
      openShow: false,
      form: {},
      tableData: [],
      rules: {
        quaLevel: [{ required: true, message: '请输入数量', trigger: 'blur' }],
        moCodes: [{ required: true, message: '请选择计划类型', trigger: 'change' }],
        needDate: [{ required: true, message: '请选择需求日期', trigger: 'change' }],
        keeper: [{ required: true, message: '请输入保管员', trigger: 'change' }],
      },
    };
  },
  mounted() {
    this.openShow = this.showDialog;
    getOrderMoldPlanCaDeatils({ id: this.id }).then(res => {
      if (res.code == 200) {
        this.form = { ...res.data };
      }
    });
  },
  methods: {
    closeDialog() {
      this.openShow = false;
      this.$emit('closeDialog');
    },
    submit() {
      // 先校验表单
      this.$refs.form.validate(valid => {
        if (!valid) {
          this.$message.error('表单校验未通过，请检查必填项');
          return;
        }
        // // 准备提交数据（若需过滤字段可在此处理）
        const submitData = { ...this.form ,...{id:this.id}};
        // 调用更新接口
        update(submitData)
          .then(res => {
            if (res && res.code === 200) {
              this.$message.success('保存成功');
              this.closeDialog();
              // 向父组件通知成功（可携带返回数据或提交的数据）
              this.$emit('updateSuccess', submitData);
            } else {
              this.$message.error( '保存失败');
            }
          })
          .catch(() => {
            this.$message.error('请求失败，请稍后重试');
          });
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>