实现生产管理 - 部件详情中表格通过json数据动态注册功能

admin.ui.plus-master/src/api/admin/productionManagement/ComponentDetails.ts

@@ -106,32 +106,43 @@ export class ComponentDetails<SecurityDataType = unknown> extends HttpClient<Sec
     console.log(params)
     return new Promise((resolve) => {
       setTimeout(()=> {
-        resolve([
-          {
-            dateOfManufacture:"2023-07-05",
-            operator:"蒋工1",
-            workingProcedure:"团标密钥灌注1",
-            state:true,
-            productionPictures:"111",
-            remarks:"222"
-          },
-          {
-            dateOfManufacture:"2023-07-05",
-            operator:"蒋工2",
-            workingProcedure:"团标密钥灌注2",
-            state:true,
-            productionPictures:"111",
-            remarks:"222"
-          },
-          {
-            dateOfManufacture:"2023-07-05",
-            operator:"蒋工3",
-            workingProcedure:"团标密钥灌3",
-            state:true,
-            productionPictures:"2323",
-            remarks:"333"
-          }
-        ])
+        resolve({
+          tableData:[
+            {
+              dateOfManufacture:"2023-07-05",
+              operator:"蒋工1",
+              workingProcedure:"团标密钥灌注1",
+              state:true,
+              productionPictures:"111",
+              remarks:"222"
+            },
+            {
+              dateOfManufacture:"2023-07-05",
+              operator:"蒋工2",
+              workingProcedure:"团标密钥灌注2",
+              state:true,
+              productionPictures:"111",
+              remarks:"222"
+            },
+            {
+              dateOfManufacture:"2023-07-05",
+              operator:"蒋工3",
+              workingProcedure:"团标密钥灌3",
+              state:true,
+              productionPictures:"2323",
+              remarks:"333"
+            }
+          ],
+          dynamicColumns: [
+            { prop: 'dateOfManufacture', label: '生产时间' },
+            { prop: 'operator', label: '操作人' },
+            { prop: 'workingProcedure', label: '工序' },
+            { prop: 'state', label: '状态' },
+            { prop: 'productionPictures', label: '生产图片' },
+            // { prop: 'remarks', label: '备注' }
+            // You can generate and push more columns based on your data
+          ]
+        })
       },this.timer)
 
     })
@@ -151,26 +162,36 @@ export class ComponentDetails<SecurityDataType = unknown> extends HttpClient<Sec
     console.log(params)
     return new Promise((resolve) => {
       setTimeout(()=> {
-        resolve([
-          {
-            alarmDate:"23-07-06 09:14",
-            eventName:"通讯异常1",
-            remarks:"",
-            state:false
-          },
-          {
-            alarmDate:"23-07-06 09:14",
-            eventName:"通讯异常2",
-            remarks:"",
-            state:false
-          },
-          {
-            alarmDate:"23-07-06 09:14",
-            eventName:"通讯异常3",
-            remarks:"",
-            state:false
-          }
-        ])
+        resolve({
+          tableData:[
+            {
+              alarmDate:"23-07-06 09:14",
+              eventName:"通讯异常1",
+              remarks:"",
+              state:false
+            },
+            {
+              alarmDate:"23-07-06 09:14",
+              eventName:"通讯异常2",
+              remarks:"",
+              state:false
+            },
+            {
+              alarmDate:"23-07-06 09:14",
+              eventName:"通讯异常3",
+              remarks:"",
+              state:false
+            }
+          ],
+          dynamicColumns:[
+            { prop: 'alarmDate', label: '生产时间' },
+            { prop: 'eventName', label: '操作人' },
+            { prop: 'remarks', label: '工序' },
+            { prop: 'state', label: '状态' },
+            { prop: 'state', label: '状态' },
+            { prop: 'state', label: '状态' },
+          ]
+        })
       },this.timer)
     })
   }

admin.ui.plus-master/src/api/admin/productionManagement/ComponentDetailsDto.ts

@@ -41,9 +41,35 @@ export interface goodsInformationBasic {
   goodsImg: imageInter
 }
 
+/**
+ * @name:
+ * @description: 生产管理 - 部件详情 - 动态表头
+ * @author wyoujia
+ * @date 2023-59-25 15:59:56
+*/
+export interface columnsProps {
+  /**表头标题 */
+  label: string | null,
+  /**表头值 */
+  prop: string | null
+}
+
+/**
+ * @name: 数据对象接口
+ * @description: 生产管理 - 部件详情 - 动态表格
+ * @author wyoujia
+ * @date 2023-56-25 15:56:40
+ */
+export interface dynamicTable {
+  /**表格数据 */
+  tableData: productionLog []| alarmLog [] | null,
+  /**动态表头 */
+  dynamicColumns: columnsProps [] | null
+}
+
 /**
  * @name: 数据对象接口
- * @description: 生产管理 - 部件详情 - 生产日志
+ * @description: 生产管理 - 部件详情 - 生产日志 - 表格数据
  * @author wyoujia
  * @date 2023-44-24 16:44:02
  */
@@ -64,7 +90,7 @@ export interface productionLog {
 
 /**
  * @name: 数据对象接口
- * @description: 生产管理 - 部件详情 - 报警日志
+ * @description: 生产管理 - 部件详情 - 报警日志 - 表格数据
  * @author wyoujia
  * @date 2023-48-24 16:48:49
  */
@@ -79,6 +105,8 @@ export interface alarmLog {
   state: number | null
 }
 
+
+
 /**
  * @name: 数据对象接口
  * @description: 生产管理 - 部件详情
@@ -95,7 +123,7 @@ export interface adminProductGoodsInfoDto {
   /**基础信息 */
   basicInformation: goodsInformationBasic,
   /**生产日志 */
-  productionLog: productionLog[] | null,
+  productionLog: dynamicTable,
   /**报警日志 */
-  alarmLog: alarmLog [] | null,
+  alarmLog: dynamicTable
 }

admin.ui.plus-master/src/views/admin/product/goodInfo.vue

@@ -38,17 +38,8 @@
       <el-col :xs="24" >
         <el-card shadow="hover" header="生产日志">
           <div class="productionLog">
-            <el-table v-loading="goods.loading" :data="goods.productionLog" row-key="id" style="width: 100%">
-              <el-table-column prop="dateOfManufacture" label="生产时间"  />
-              <el-table-column prop="operator" label="操作人"  />
-              <el-table-column prop="workingProcedure" label="工序"  />
-              <el-table-column prop="state" label="状态"  />
-              <el-table-column prop="productionPictures" label="生产图片">
-                <template #default="{ row }">
-                  <el-link @click="showBigPic(row.productionPictures)" :underline="false">点击查看</el-link>
-                </template>
-              </el-table-column>
-              <el-table-column prop="remarks" label="备注"  />
+            <el-table v-loading="goods.loading" :data="goods.productionLog.tableData" row-key="id" style="width: 100%">
+              <el-table-column v-for="column in goods.productionLog.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label"  />
             </el-table>
           </div>
         </el-card>
@@ -58,11 +49,8 @@
       <el-col :span="24" >
         <el-card shadow="hover" header="报警日志">
           <div class="alarmLog">
-            <el-table v-loading="goods.loading" :data="goods.alarmLog" row-key="id" style="width: 100%">
-              <el-table-column prop="alarmDate" label="报警日期"  />
-              <el-table-column prop="eventName" label="事件名称"  />
-              <el-table-column prop="remarks" label="备注"  />
-              <el-table-column prop="state" label="状态"  />
+            <el-table v-loading="goods.loading" :data="goods.alarmLog.tableData" row-key="id" style="width: 100%">
+              <el-table-column v-for="column in goods.alarmLog.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label"  />
             </el-table>
           </div>
         </el-card>
@@ -95,9 +83,9 @@ const goods:adminProductGoodsInfoDto = reactive({
   /**基础信息 */
   basicInformation: {},
   /**生产日志 */
-  productionLog: [],
+  productionLog: {},
   /**报警日志 */
-  alarmLog: [],
+  alarmLog: {},
 })
 
 //查看大图