feat(machineparam): 新增详情页面并优化表单功能

jnpf-java-boot/jnpf-web/src/views/example/machineparam/detail.vue

@@ -0,0 +1,229 @@
+<template>
+  <el-dialog
+    :title="'详情'"
+    :visible.sync="dialogVisible"
+    width="1200px"
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <el-form :model="dataForm" size="small" label-width="100px" label-position="right">
+      <template v-if="!loading">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="工序">
+              <el-input :value="dataForm.procName"  disabled style="width: 100%;"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="机台">
+              <el-input :value="getMachineName(dataForm.machineCd)" disabled style="width: 100%;"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="启用状态">
+              <el-input :value="getEnabledStatusName(dataForm.enabledStatus)" disabled style="width: 100%;"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="产品名称">
+              <el-input :value="getMaterialName(dataForm.matCode)" disabled style="width: 100%;"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="规格型号">
+              <el-input :value="dataForm.spec" disabled style="width: 100%;"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="16">
+            <el-form-item label="备注">
+              <el-input :value="dataForm.remark" disabled style="width: 100%;"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div style="margin-bottom: 10px; display: flex; align-items: center;">
+              <span style="font-weight: bold;">工艺参数信息</span>
+            </div>
+            <el-table :data="paramList" border style="width: 100%;" size="small">
+              <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
+              <el-table-column label="工艺参数名称" prop="procParamName" align="center"></el-table-column>
+              <el-table-column label="标准值" prop="standardValue" align="center"></el-table-column>
+              <el-table-column label="下限值" prop="lowerLimit" align="center"></el-table-column>
+              <el-table-column label="上限值" prop="upperLimit" align="center"></el-table-column>
+              <el-table-column label="偏差" prop="dev" align="center"></el-table-column>
+              <el-table-column label="单位" prop="procParamUnit" align="center"></el-table-column>
+              <el-table-column label="是否预警" prop="isAlert" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.isAlert === '0' ? '是' : '否' }}
+                </template>
+              </el-table-column>
+              <el-table-column label="备注" prop="remark" align="center"></el-table-column>
+            </el-table>
+          </el-col>
+        </el-row>
+      </template>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">关 闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import request from '@/utils/request'
+import { enabledStatusOptions } from '../common/dict'
+
+export default {
+  components: {},
+  props: [],
+  data() {
+    return {
+      dialogVisible: false,
+      loading: false,
+      dataForm: {
+        id: '',
+        procCd: undefined,
+        procName: undefined,
+        matCode: undefined,
+        matName: undefined,
+        spec: undefined,
+        machineCd: undefined,
+        machineName: undefined,
+        enabledStatus: '1',
+        remark: undefined,
+      },
+      enabledStatusOptions,
+      procOptions: [],
+      materialOptions: [],
+      machineOptions: [],
+      paramList: [],
+      paramNameOptions: [],
+    }
+  },
+  created() {
+    this.loadBaseData()
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.dialogVisible = true
+      this.loading = true
+      this.$nextTick(() => {
+        if (this.dataForm.id) {
+          request({
+            url: `/api/example/machineparam/${this.dataForm.id}`,
+            method: 'get'
+          }).then(res => {
+            const data = res.data
+            this.dataForm = {
+              ...data,
+              procCd: String(data.procCd || ''),
+              machineCd: String(data.machineCd || ''),
+              matCode: String(data.matCode || ''),
+              enabledStatus: String(data.enabledStatus || '1'),
+            }
+            // 回显工艺参数列表
+            if (data.detailList && Array.isArray(data.detailList)) {
+              this.paramList = data.detailList.map(item => ({
+                procParamName: item.procParamName || item.paramName,
+                standardValue: item.standardValue,
+                lowerLimit: item.lowerLimit || item.minValue,
+                upperLimit: item.upperLimit || item.maxValue,
+                dev: item.dev || item.deviation,
+                procParamUnit: item.procParamUnit || item.unit,
+                isAlert: String(item.isAlert || item.isWarning || '0'),
+                remark: item.remark,
+              }))
+            } else {
+              this.paramList = []
+            }
+            this.loading = false
+          }).catch(() => {
+            this.loading = false
+          })
+        } else {
+          this.loading = false
+        }
+      })
+    },
+    loadBaseData() {
+      this.loadProcList()
+      this.loadMaterialList()
+      this.loadMachineList()
+      this.loadParamNameOptions()
+    },
+    loadProcList() {
+      request({
+        url: `/api/example/proc/getProcList`,
+        method: 'get'
+      }).then(res => {
+        this.procOptions = res.data.map(item => ({
+          label: item.name,
+          value: String(item.id),
+        }))
+      })
+    },
+    loadMaterialList() {
+      request({
+        url: `/api/example/material/getMaterialList`,
+        method: 'get',
+        params: { keyWord: '' }
+      }).then(res => {
+        this.materialOptions = res.data.map(item => ({
+          label: item.matName,
+          value: String(item.id),
+        }))
+      })
+    },
+    loadMachineList() {
+      request({
+        url: `/api/example/machine/getMachineList`,
+        method: 'get',
+        params: { keyWord: '' }
+      }).then(res => {
+        this.machineOptions = res.data.map(item => ({
+          label: item.name,
+          value: String(item.id),
+        }))
+      })
+    },
+    loadParamNameOptions() {
+      request({
+        url: `/api/example/procparam/getSelect`,
+        method: 'get'
+      }).then(res => {
+        const list = res.data || []
+        this.paramNameOptions = list.map(item => ({
+          label: item.name || '',
+          value: String(item.id || ''),
+        }))
+      })
+    },
+    getProcName(procCd) {
+      const item = this.procOptions.find(opt => opt.value === procCd)
+      return item ? item.label : ''
+    },
+    getMachineName(machineCd) {
+      const item = this.machineOptions.find(opt => opt.value === machineCd)
+      return item ? item.label : ''
+    },
+    getMaterialName(matCode) {
+      const item = this.materialOptions.find(opt => opt.value === matCode)
+      return item ? item.label : ''
+    },
+    getEnabledStatusName(status) {
+      const item = this.enabledStatusOptions.find(opt => opt.id === status)
+      return item ? item.fullName : ''
+    },
+    handleClose() {
+      this.dialogVisible = false
+      this.$emit('refresh', true)
+    },
+  }
+}
+</script>

jnpf-java-boot/jnpf-web/src/views/example/machineparam/form.vue

@@ -56,12 +56,13 @@
               <span style="font-weight: bold;">工艺参数信息</span>
               <el-button type="primary" size="small" @click="addParamItem" style="margin-left: 10px;">新 增</el-button>
             </div>
-            <el-table :data="paramList" border style="width: 100%;" size="small">
+            <el-table :key="paramTableKey" :data="paramList" border style="width: 100%;" size="small">
               <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
               <el-table-column label="工艺参数名称(*)" prop="procParamId">
                 <template slot-scope="scope">
-                  <JnpfSelect v-model="scope.row.procParamId" placeholder="请选择" :options="paramNameOptions" :props="{ label: 'label', value: 'value' }" filterable clearable @change="(val) => handleProcParamNameChange(val, scope.row)">
+                  <el-select v-model="scope.row.procParamId" placeholder="请选择" filterable clearable @change="(val) => handleProcParamNameChange(val, scope.row)" style="width: 100%">
-                  </JnpfSelect>
+                    <el-option v-for="item in paramNameOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                  </el-select>
                 </template>
               </el-table-column>
               <el-table-column label="标准值(*)" prop="standardValue">
@@ -190,6 +191,7 @@ export default {
       machineProps: { label: "label", value: "value" },
       paramList: [],
       paramNameOptions: [],
+      paramTableKey: 0,
       isAlertOptions: [
         { label: '是', value: '0' },
         { label: '否', value: '1' },
@@ -291,15 +293,21 @@ export default {
       this.loadParamNameOptions();
     },
     loadParamNameOptions() {
-      request({
+      return new Promise((resolve) => {
-        url: `/api/example/procparam/getSelect`,
+        request({
-        method: 'get'
+          url: `/api/example/procparam/getSelect`,
-      }).then(res => {
+          method: 'get'
-        const list = res.data || [];
+        }).then(res => {
-        this.paramNameOptions = list.map(item => ({
+          const list = res.data || [];
-          label: item.name || '',
+          this.paramNameOptions = list.map(item => ({
-          value: String(item.id || ''),
+            label: item.name || '',
-        }));
+            value: String(item.id || ''),
+            unit: item.unit || '',
+          }));
+          resolve();
+        }).catch(() => {
+          resolve();
+        });
       });
     },
     addParamItem() {
@@ -319,11 +327,34 @@ export default {
       this.paramList.splice(index, 1);
     },
     handleProcParamNameChange(val, row) {
-      const item = this.paramNameOptions.find(opt => opt.value === val);
+      if (!val) {
-      if (item) {
+        row.procParamName = undefined;
-        row.procParamName = item.label;
+        row.procParamUnit = undefined;
+        return;
+      }
+      
+      const isDuplicate = this.paramList.some(item => 
+        item !== row && item.procParamId === val
+      );
+      
+      if (isDuplicate) {
+          this.$message.error('工艺参数名称不能重复');
+          const index = this.paramList.indexOf(row);
+          if (index !== -1) {
+            this.$set(this.paramList[index], 'procParamId', null);
+            this.$set(this.paramList[index], 'procParamName', undefined);
+            this.$set(this.paramList[index], 'procParamUnit', undefined);
+          }
+          return;
+        }
+      
+      const paramItem = this.paramNameOptions.find(opt => opt.value === val);
+      if (paramItem) {
+        row.procParamName = paramItem.label;
+        row.procParamUnit = paramItem.unit || '';
       } else {
         row.procParamName = undefined;
+        row.procParamUnit = undefined;
       }
     },
     loadProcList() {
@@ -381,31 +412,39 @@ export default {
         this.dataForm.spec = '';
       }
     },
+    isEmpty(value) {
+      return value === null || value === undefined || value === '' || value === 'undefined';
+    },
     dataFormSubmit() {
-      // 验证表格必填字段
+      if (this.paramList.length === 0) {
+        this.$message.error('请至少添加一条工艺参数');
+        return;
+      }
+      
+      // 验证表格必填字段（所有行都需要验证）
       for (let i = 0; i < this.paramList.length; i++) {
         const item = this.paramList[i];
-        if (!item.procParamName) {
+        if (this.isEmpty(item.procParamName)) {
           this.$message.error(`第 ${i + 1} 行工艺参数名称不能为空`);
           return;
         }
-        if (!item.standardValue) {
+        if (this.isEmpty(item.standardValue)) {
           this.$message.error(`第 ${i + 1} 行标准值不能为空`);
           return;
         }
-        if (!item.lowerLimit) {
+        if (this.isEmpty(item.lowerLimit)) {
           this.$message.error(`第 ${i + 1} 行下限值不能为空`);
           return;
         }
-        if (!item.upperLimit) {
+        if (this.isEmpty(item.upperLimit)) {
           this.$message.error(`第 ${i + 1} 行上限值不能为空`);
           return;
         }
-        if (!item.procParamUnit) {
+        if (this.isEmpty(item.procParamUnit)) {
           this.$message.error(`第 ${i + 1} 行单位不能为空`);
           return;
         }
-        if (!item.isAlert) {
+        if (this.isEmpty(item.isAlert)) {
           this.$message.error(`第 ${i + 1} 行是否预警不能为空`);
           return;
         }
@@ -421,6 +460,12 @@ export default {
           const material = this.materialOptions.find(item => item.value === this.dataForm.matCode);
           const machine = this.machineOptions.find(item => item.value === this.dataForm.machineCd);
 
+          // 过滤掉空行
+          const validParamList = this.paramList.filter(item => 
+            item.procParamId || item.procParamName || item.standardValue || 
+            item.lowerLimit || item.upperLimit || item.procParamUnit
+          );
+
           const submitData = {
             ...this.dataForm,
             procName: proc ? proc.procName : undefined,
@@ -429,7 +474,7 @@ export default {
             mateId: material ? material.id : undefined,
             machineName: machine ? machine.machineName : undefined,
             machineId: machine ? machine.id : undefined,
-            detailList: this.paramList,
+            detailList: validParamList,
           };
 
           request({