hwmom-ui/src/views/ai/skill/aiForm/prodPlanFillTest.vue

<template>
  <div class="mes-report-container">
    <el-card class="report-card">
      <template #header>
        <div class="card-header">
          <span>报工</span>
        </div>
      </template>

      <el-form
        ref="reportForm"
        :model="formData"
        :rules="rules"
        label-width="120px"
        label-position="left"
      >
        <el-form-item label="工单号" prop="planCode">
          WO20250917001
        </el-form-item>
        <el-form-item label="产品名称" prop="materialName">
          淮阴零排放破碎机控制柜
        </el-form-item>
        <el-form-item label="产品规格" prop="materialSpec">
          淮阴零排放项目（尺寸：H500*W400*D250mm，材质：304不锈钢，本色）
        </el-form-item>
        <el-form-item label="计划数量" prop="planAmount">
          100
        </el-form-item>
        <el-form-item label="已完成数量" prop="completeAmount1">
          75
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          个
        </el-form-item>
        <el-form-item label="工序名称" prop="processName">
          装配
        </el-form-item>
        <el-form-item label="计划开始时间" prop="planBeginTime">
          2025-09-17 09:00:00
        </el-form-item>
        <el-form-item label="计划结束时间" prop="planEndTime">
          2025-12-17 18:00:00
        </el-form-item>

        <el-divider>报工信息</el-divider>
        <el-form-item label="报工数量" prop="completeAmount">
          <el-input-number
            v-model="formData.completeAmount"
            :min="1"
            :max="100000"
            controls-position="right"
          />
        </el-form-item>

        <el-form-item label="工时(分钟)" prop="productionTime">
          <el-input-number
            v-model="formData.productionTime"
            :min="1"
            :max="1000"
            controls-position="right"
          />
        </el-form-item>


        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="submitForm">提交报工</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 报工结果展示 -->
    <el-card v-if="resultData" class="result-card">
      <template #header>
        <div class="card-header">
          <span>报工结果</span>
        </div>
      </template>
      <pre>{{ JSON.stringify(resultData, null, 2) }}</pre>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

import { filterEmptyValues, copyNonEmptyValues } from '@/api/objectUtil';
import { useSharedDataStore } from '@/api/monitorData'
const sharedStore = useSharedDataStore()

interface FormData {
  completeAmount: number;
  productionTime: number;
  remark: string;
}

const props = defineProps<FormData>()

const formData = reactive<FormData>({
  completeAmount: undefined,
  productionTime:undefined,
  remark: '',
});

// 初始化赋值
// Object.keys(formData).forEach(key => {
//   if (props[key] !== undefined) {
//     formData[key] = props[key]
//   }
// })

// 监听数据变化
watch(
  () => sharedStore.dynamicValue,
  (newValue, oldValue) => {
    if (newValue!=null && newValue.message!=null && newValue !== oldValue) {
      ElMessage.info('收到新数据更新')
      // 这里可以执行数据更新后的业务逻辑
      // handleDataUpdate(newValue)
      copyNonEmptyValues(newValue.message,formData);
//如果字段有onchange方法，则需要判断执行

    }
  },
  { deep: true } // 深度监听对象变化
)

// 响应props变化
// watch(
//   () => ({ ...props }),
//   (newProps) => {
//     Object.keys(formData).forEach(key => {
//       if (newProps[key] !== undefined) {
//         formData[key] = newProps[key]
//       }
//     })
//   },
//   { immediate: true, deep: true }
// )

const processOptions = [
  { label: '工序A', value: 'processA' },
  { label: '工序B', value: 'processB' },
  { label: '工序C', value: 'processC' },
];

const rules = {
  completeAmount: [{ required: true, message: '请输入报工数量', trigger: 'blur' }],
  productionTime: [{ required: true, message: '请输入工时', trigger: 'blur' }],
};

const resultData = ref(null);
const reportForm = ref(null);

const submitForm = () => {
  reportForm.value.validate((valid) => {
    if (valid) {
      // 模拟提交
      resultData.value = {
        status: 'success',
        message: '报工成功',
        data: formData.value,
      };
      ElMessage.success('报工提交成功！');
    } else {
      ElMessage.error('请填写完整表单！');
    }
  });
};

const resetForm = () => {
  reportForm.value.resetFields();
  resultData.value = null;
};
</script>

<style scoped>
.mes-report-container {
  padding: 20px;
}
.report-card,
.result-card {
  margin-bottom: 20px;
}
.card-header {
  font-size: 18px;
  font-weight: bold;
}
</style>