生产报工页面更改

zhangwencui

10 小时以前 70703e0fa04092997db53846d2cd2367f5997284

生产报工页面更改

 src/views/productionManagement/productionReporting/components/ReportingDialog.vue

@@ -5,8 +5,7 @@
             @close="handleClose">
    <!-- 步骤条 -->
    <el-steps :active="activeStep"
              finish-status="success"
              v-if="!props.data.id">
              finish-status="success">
      <el-step title="选择生产订单" />
      <el-step title="填写基础信息" />
      <el-step title="查看工序参数" />
@@ -98,42 +97,98 @@
                     :key="process.id"
                     :label="process.processName"
                     :name="process.id + ''">
          <el-form :model="form"
                   ref="formRef"
                   label-width="120px">
            <!-- 动态参数 -->
            <el-form-item v-for="param in params"
                          :key="param.id"
                          :label="param.paramName">
              <template v-if="param.paramType == '1'">
                <!-- 数字类型 -->
                <el-input v-model="form.params[param.id]" />
              </template>
              <template v-else-if="param.paramType == '2'">
                <!-- 文本类型 -->
                <el-input v-model="form.params[param.id]" />
              </template>
              <template v-else-if="param.paramType == '3'">
                <!-- 字典类型 -->
                <el-select v-model="form.params[param.id]"
                           placeholder="请选择"
                           style="width: 100%">
                  <el-option v-for="option in dictOptions[param.paramFormat] || []"
                             :key="option.dictValue"
                             :label="option.dictLabel"
                             :value="option.dictValue" />
                </el-select>
              </template>
              <template v-else-if="param.paramType == '4'">
                <!-- 日期类型 -->
                <el-date-picker v-model="form.params[param.id]" />
              </template>
              <template v-else>
                <!-- 其他类型 -->
                <el-input v-model="form.params[param.id]" />
              </template>
            </el-form-item>
          </el-form>
          <div>
            <!-- 参数组列表 -->
            <div v-for="(group, groupIndex) in form.paramGroups[process.id] || []"
                 :key="groupIndex"
                 class="param-group">
              <div class="group-header">
                <span>参数组 {{ groupIndex + 1 }}</span>
                <el-button type="danger"
                           size="small"
                           @click="removeParamGroup(process.id, groupIndex)"
                           v-if="(form.paramGroups[process.id] || []).length > 1">
                  删除
                </el-button>
              </div>
              <el-form :model="form"
                       ref="formRef"
                       label-width="120px">
                <!-- 动态参数 -->
                <el-form-item v-for="param in params"
                              :key="param.id"
                              :label="param.paramName">
                  <template v-if="param.paramType == '1'">
                    <!-- 数字类型 -->
                    <div style="display: flex; align-items: center; gap: 8px;">
                      <el-input-number v-model="group[param.id]"
                                       controls-position="right"
                                       :precision="getPrecision(param.paramFormat)"
                                       style="flex: 1" />
                      <span v-if="param.unit && param.unit != '/'">
                        {{ param.unit }}
                      </span>
                    </div>
                  </template>
                  <template v-else-if="param.paramType == '2'">
                    <!-- 文本类型 -->
                    <div style="display: flex; align-items: center; gap: 8px;">
                      <el-input v-model="group[param.id]"
                                style="flex: 1" />
                      <span v-if="param.unit && param.unit != '/'">
                        {{ param.unit }}
                      </span>
                    </div>
                  </template>
                  <template v-else-if="param.paramType == '3'">
                    <!-- 字典类型 -->
                    <div style="display: flex; align-items: center; gap: 8px;">
                      <el-select v-model="group[param.id]"
                                 placeholder="请选择"
                                 style="flex: 1;width: 150px">
                        <el-option v-for="option in dictOptions[param.paramFormat] || []"
                                   :key="option.dictValue"
                                   :label="option.dictLabel"
                                   :value="option.dictValue" />
                      </el-select>
                      <span v-if="param.unit && param.unit != '/'">
                        {{ param.unit }}
                      </span>
                    </div>
                  </template>
                  <template v-else-if="param.paramType == '4'">
                    <!-- 日期类型 -->
                    <div style="display: flex; align-items: center; gap: 8px;">
                      <el-date-picker :value-format="param.paramFormat"
                                      :format="param.paramFormat"
                                      :type="param.paramFormat=='YYYY-MM-DD'?'daterange':'datetimerange'"
                                      v-model="group[param.id]"
                                      style="flex: 1" />
                      <span v-if="param.unit && param.unit != '/'">
                        {{ param.unit }}
                      </span>
                    </div>
                  </template>
                  <template v-else>
                    <!-- 其他类型 -->
                    <div style="display: flex; align-items: center; gap: 8px;">
                      <el-input v-model="group[param.id]"
                                style="flex: 1" />
                      <span v-if="param.unit && param.unit != '/'">
                        {{ param.unit }}
                      </span>
                    </div>
                  </template>
                </el-form-item>
              </el-form>
            </div>
            <!-- 新增参数组按钮 -->
            <el-button type="primary"
                       size="small"
                       @click="addParamGroup(process.id)">
              新增参数组
            </el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
@@ -169,135 +224,6 @@
        </el-form-item>
      </el-form>
    </div>
    <!-- 编辑模式：直接显示所有信息 -->
    <div v-if="props.data.id">
      <el-form :model="form"
               :rules="rules"
               ref="formRef"
               label-width="120px">
        <el-form-item label="生产订单号"
                      prop="npsNo"
                      disabled>
          <el-input v-model="form.npsNo" />
        </el-form-item>
        <el-form-item label="班组"
                      prop="teamName">
          <el-select v-model="form.teamName"
                     placeholder="请选择班组"
                     style="width: 100%">
            <el-option label="白班"
                       value="白班" />
            <el-option label="夜班"
                       value="夜班" />
          </el-select>
        </el-form-item>
        <el-form-item label="产品编码"
                      prop="materialCode"
                      disabled>
          <el-input v-model="form.materialCode" />
        </el-form-item>
        <el-form-item label="产品名称"
                      prop="productName"
                      disabled>
          <el-input v-model="form.productName" />
        </el-form-item>
        <el-form-item label="规格"
                      prop="specification"
                      disabled>
          <el-input v-model="form.specification" />
        </el-form-item>
        <el-form-item label="创建人"
                      prop="createBy">
          <el-input v-model="form.createBy"
                    placeholder="请输入创建人" />
        </el-form-item>
        <el-form-item label="创建时间"
                      prop="createTime"
                      disabled>
          <el-date-picker v-model="form.createTime"
                          type="datetime"
                          placeholder="请选择创建时间"
                          style="width: 100%" />
        </el-form-item>
        <el-form-item label="产出方量"
                      prop="outputVolume">
          <el-input-number v-model="form.outputVolume"
                           :min="0"
                           :precision="2"
                           style="width: 100%" />
        </el-form-item>
        <el-form-item label="不合格方量"
                      prop="unqualifiedVolume">
          <el-input-number v-model="form.unqualifiedVolume"
                           :min="0"
                           :precision="2"
                           style="width: 100%" />
        </el-form-item>
        <el-form-item label="完成方量"
                      prop="completedVolume">
          <el-input-number v-model="form.completedVolume"
                           :min="0"
                           :precision="2"
                           style="width: 100%" />
        </el-form-item>
      </el-form>
      <!-- 工序Tab页 -->
      <el-tabs v-model="activeProcessId"
               @tab-click="handleTabClick">
        <el-tab-pane v-for="process in processList"
                     :key="process.id"
                     :label="process.processName"
                     :name="process.id + ''">
          <el-form :model="form"
                   :rules="rules"
                   ref="formRef"
                   label-width="120px">
            <!-- 动态参数 -->
            <el-form-item v-for="param in params"
                          :key="param.id"
                          :label="param.paramName"
                          :prop="`params.${param.id}`"
                          :rules="param.isRequired ? [{ required: true, message: `请输入${param.paramName}`, trigger: 'blur' }] : []">
              <template v-if="param.paramType == '1'">
                <!-- 数字类型 -->
                <el-input-number v-model="form.params[param.id]"
                                 :min="0"
                                 :precision="getPrecision(param.paramFormat)"
                                 style="width: 100%" />
              </template>
              <template v-else-if="param.paramType == '2'">
                <!-- 文本类型 -->
                <el-input v-model="form.params[param.id]"
                          :placeholder="`请输入${param.paramName}`" />
              </template>
              <template v-else-if="param.paramType == '3'">
                <!-- 字典类型 -->
                <el-select v-model="form.params[param.id]"
                           placeholder="请选择"
                           style="width: 100%">
                  <el-option v-for="option in dictOptions[param.paramFormat] || []"
                             :key="option.dictValue"
                             :label="option.dictLabel"
                             :value="option.dictValue" />
                </el-select>
              </template>
              <template v-else-if="param.paramType == '4'">
                <!-- 日期类型 -->
                <el-date-picker v-model="form.params[param.id]"
                                type="datetime"
                                placeholder="请选择日期时间"
                                style="width: 100%" />
              </template>
              <template v-else>
                <!-- 其他类型 -->
                <el-input v-model="form.params[param.id]"
                          :placeholder="`请输入${param.paramName}`" />
              </template>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
@@ -305,10 +231,10 @@
                   v-if="activeStep > 0"
                   @click="activeStep--">上一步</el-button>
        <el-button type="primary"
                   v-if="activeStep < 3 && !props.data.id"
                   v-if="activeStep < 3"
                   @click="handleNextStep">下一步</el-button>
        <el-button type="primary"
                   v-if="activeStep === 3 || props.data.id"
                   v-if="activeStep === 3"
                   :loading="submitLoading"
                   @click="handleSubmit">确 认</el-button>
      </span>
@@ -369,7 +295,7 @@
    completedVolume: props.data.completedVolume || 0,
    createBy: props.data.createBy || "当前登录人",
    createTime: props.data.createTime || new Date(),
    params: props.data.params || {},
    paramGroups: props.data.paramGroups || {}, // 存储每个工序的参数组
  });

  const rules = {
@@ -478,15 +404,21 @@
    findProcessParamListOrder({ orderId, routeItemId: processId }).then(
      async res => {
        params.value = res.data || [];
        // 初始化参数值并获取字典数据
        for (const param of params.value) {
          if (!form.params[param.id]) {
            form.params[param.id] = param.standardValue || "";
        // 初始化参数组
        if (!form.paramGroups[processId]) {
          form.paramGroups[processId] = [];
        }
        // 如果没有参数组，添加一个默认参数组
        if (form.paramGroups[processId].length === 0) {
          const defaultGroup = {};
          for (const param of params.value) {
            defaultGroup[param.id] = param.standardValue || "";
            // 如果是字典类型参数，获取字典数据
            if (param.paramType == "3" && param.paramFormat) {
              await getDictOptions(param.paramFormat);
            }
          }
          // 如果是字典类型参数，获取字典数据
          if (param.paramType == "3" && param.paramFormat) {
            await getDictOptions(param.paramFormat);
          }
          form.paramGroups[processId].push(defaultGroup);
        }
      }
    );
@@ -564,29 +496,50 @@
    localVisible.value = false;
  };

  // 新增参数组
  const addParamGroup = processId => {
    if (!form.paramGroups[processId]) {
      form.paramGroups[processId] = [];
    }
    // 创建一个新的参数组，使用默认值
    const newGroup = {};
    params.value.forEach(param => {
      newGroup[param.id] = param.standardValue || "";
    });
    form.paramGroups[processId].push(newGroup);
  };

  // 删除参数组
  const removeParamGroup = (processId, index) => {
    if (form.paramGroups[processId] && form.paramGroups[processId].length > 1) {
      form.paramGroups[processId].splice(index, 1);
    }
  };

  // 初始化
  const init = () => {
    if (!props.data.id) {
      // 新增时加载订单列表
      loadOrders();
      // 设置默认创建人和创建时间
    // 无论新增还是编辑，都加载订单列表
    loadOrders();

    if (props.data.id) {
      // 编辑时设置表单数据
      Object.assign(form, props.data);
      // 设置orderId
      orderId.value = props.data.orderId || "";
      // 如果有订单ID，加载工序和参数
      if (props.data.orderId) {
        // 模拟选择订单的操作，触发数据加载
        setTimeout(() => {
          handleOrderChange(props.data.orderId);
        }, 100);
      }
    } else {
      // 新增时设置默认值
      form.createBy = "当前登录人";
      form.createTime = new Date();
    } else {
      // 编辑时加载相关数据
      if (props.data.orderId) {
        orderId.value = props.data.orderId;
        if (props.data.processId) {
          processId.value = props.data.processId;
          activeProcessId.value = props.data.processId + "";
          loadParams(props.data.processId, props.data.orderId);
        } else {
          loadProcesses(props.data.orderId);
        }
      } else {
        loadOrders();
      }
    }
    // 始终从第一步开始
    activeStep.value = 0;
  };

  // 监听props.visible变化
@@ -610,4 +563,26 @@
  .dialog-footer {
    text-align: right;
  }

  .param-group {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 16px;
    background-color: #f9f9f9;
  }

  .group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e4e7ed;
  }

  .group-header span {
    font-weight: bold;
    font-size: 14px;
  }
</style>