君歌 1.端口修改

gaoluyang

2026-06-16 e65bfa1d46d255f307eaa057665f01c8bde0e122

 src/views/productionManagement/productionProcess/Edit.vue

@@ -0,0 +1,214 @@
<template>
  <FormDialog
    v-model="isShow"
    title="编辑工序"
    width="800px"
    @confirm="handleSubmit"
    @cancel="closeModal"
  >
    <el-form label-width="180px" :model="formState" label-position="top" ref="formRef">
      <el-form-item
          label="部件："
          prop="name"
          :rules="[
              {
              required: true,
              message: '请输入部件',
            },
            {
              max: 100,
              message: '最多100个字符',
            }
          ]">
        <el-input v-model="formState.name" />
      </el-form-item>
      <el-form-item label="工序编号" prop="no">
        <el-input v-model="formState.no"  />
      </el-form-item>
      <el-form-item
          label="工序类型"
          prop="processType"
          :rules="[
              {
              required: true,
              message: '请选择工序类型',
            }
          ]"
      >
        <el-select v-model="formState.processType" placeholder="请选择工序类型" style="width: 100%">
          <el-option v-for="item in processTypeOptions"
                     :key="item"
                     :label="item"
                     :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="计划工时(小时)" prop="salaryQuota">
        <el-input v-model="formState.salaryQuota" type="number" :step="0.5" />
      </el-form-item>
      <el-form-item label="计划人员" prop="planPerson">
        <el-select v-model="formState.planPerson"
                   placeholder="请选择计划人员"
                   clearable
                   filterable
                   style="width: 100%">
          <el-option v-for="item in employeeOptions"
                     :key="item.id"
                     :label="item.staffName"
                     :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="计划执行人员" prop="executor">
        <el-select v-model="formState.executor"
                   placeholder="请选择计划执行人员"
                   clearable
                   filterable
                   style="width: 100%">
          <el-option v-for="item in employeeOptions"
                     :key="item.id"
                     :label="item.staffName"
                     :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否质检" prop="isQuality">
        <el-switch v-model="formState.isQuality" :active-value="true" inactive-value="false"/>
      </el-form-item>
      <el-form-item label="是否入库" prop="inbound">
        <el-switch v-model="formState.inbound" :active-value="true" inactive-value="false"/>
      </el-form-item>
      <el-form-item label="是否报工" prop="reportWork">
        <el-switch v-model="formState.reportWork" :active-value="true" inactive-value="false"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formState.remark" type="textarea" />
      </el-form-item>
    </el-form>
  </FormDialog>
</template>

<script setup>
import { ref, computed, getCurrentInstance, watch, onMounted } from "vue";
import { update } from "@/api/productionManagement/productionProcess.js";
import { staffOnJobListPage } from "@/api/personnelManagement/staffOnJob.js";
import FormDialog from "@/components/Dialog/FormDialog.vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },

  record: {
    type: Object,
    required: true,
  }
});

const emit = defineEmits(['update:visible', 'completed']);

const processTypeOptions = [
  "机加工",
  "刮板冷芯制作",
  "管路组对",
  "罐体连接及调试",
  "测试打压",
  "其他",
];

const employeeOptions = ref([]);

const formState = ref({
  id: props.record.id,
  name: props.record.name,
  no: props.record.no,
  processType: props.record.processType || '',
  remark: props.record.remark,
  salaryQuota: props.record.salaryQuota,
  planPerson: props.record.planPerson || null,
  executor: props.record.executor || null,
  isQuality: props.record.isQuality,
  inbound: props.record.inbound,
  reportWork: props.record.reportWork,
});

const isShow = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit('update:visible', val);
  },
});

watch(() => props.record, (newRecord) => {
  if (newRecord && isShow.value) {
    formState.value = {
      id: newRecord.id,
      name: newRecord.name || '',
      no: newRecord.no || '',
      processType: newRecord.processType || '',
      remark: newRecord.remark || '',
      salaryQuota: newRecord.salaryQuota || '',
      planPerson: newRecord.planPerson || null,
      executor: newRecord.executor || null,
      isQuality: props.record.isQuality,
      inbound: newRecord.inbound,
      reportWork: newRecord.reportWork,
    };
  }
}, { immediate: true, deep: true });

watch(() => props.visible, (visible) => {
  if (visible && props.record) {
    formState.value = {
      id: props.record.id,
      name: props.record.name || '',
      no: props.record.no || '',
      processType: props.record.processType || '',
      remark: props.record.remark || '',
      salaryQuota: props.record.salaryQuota || '',
      planPerson: props.record.planPerson || null,
      executor: props.record.executor || null,
      isQuality: props.record.isQuality,
      inbound: props.record.inbound,
      reportWork: props.record.reportWork,
    };
  }
});

let { proxy } = getCurrentInstance()

const closeModal = () => {
  isShow.value = false;
};

const handleSubmit = () => {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      update(formState.value).then(res => {
        isShow.value = false;
        emit('completed');
        proxy.$modal.msgSuccess("提交成功");
      })
    }
  })
};

const loadEmployees = async () => {
  try {
    const res = await staffOnJobListPage({ current: -1, size: -1, staffState: 1 });
    employeeOptions.value = res.data?.records || [];
  } catch (error) {
    console.error("加载员工列表失败", error);
  }
};

onMounted(() => {
  loadEmployees();
});

defineExpose({
  closeModal,
  handleSubmit,
  isShow,
});
</script>