编写了/product/goodInfo.vue 页面对象的Dto数据类型

admin.ui.plus-master/src/api/admin/data-contracts.ts

@@ -4567,7 +4567,7 @@ export interface PageOutputPageComponentGetPage{
 export interface ComponentGetPageOutPut{
   /**序号 */
    guid: number
-   
+
    /**部件名称 */
    bomName:string | null
 
@@ -4612,4 +4612,101 @@ export interface ComponentGetPageDto{
    bomType: number
    status: number
 
-}
+}
+
+/**
+ * @name: 数据对象接口
+ * @description: 生产管理 - 部件详情 - 基本信息item
+ * @author wyoujia
+ * @date 2023-29-24 16:29:22
+*/
+export interface goodsInformationBasicItem{
+  /**基本信息-标题 */
+  goodsTitle: string | null
+  /**基本信息-值 */
+  goodsValue: string | null
+}
+
+/**
+ * @name: 数据对象接口
+ * @description: 图片对象 title - imgUrl
+ * @author wyoujia
+ * @date 2023-21-24 17:21:21
+*/
+export interface imageInter {
+  /**图片url */
+  imgUrl: string| null
+  /**图片title */
+  title: string | null
+}
+/**
+ * @name: 数据对象接口
+ * @description: 生产管理 - 部件详情 - 基本信息
+ * @author wyoujia
+ * @date 2023-23-24 16:23:48
+*/
+export interface goodsInformationBasic {
+  /**基本信息item */
+  basicInfo: goodsInformationBasicItem [] | null
+  /**基本信息图片 */
+  goodsImg: imageInter
+}
+
+/**
+ * @name: 数据对象接口
+ * @description: 生产管理 - 部件详情 - 生产日志
+ * @author wyoujia
+ * @date 2023-44-24 16:44:02
+*/
+export interface productionLog {
+  /**生产时间 */
+  dateOfManufacture: Date | null,
+  /**操作人 */
+  operator: string | null,
+  /**工序 */
+  workingProcedure: string | null,
+  /**状态 */
+  state: number | null,
+  /**生产图片 */
+  productionPictures: string | null,
+  /**备注 */
+  remarks: string | null
+}
+
+/**
+ * @name: 数据对象接口
+ * @description: 生产管理 - 部件详情 - 报警日志
+ * @author wyoujia
+ * @date 2023-48-24 16:48:49
+*/
+export interface alarmLog {
+  /**报警日期 */
+  alarmDate: Date | null,
+  /**事件名称 */
+  eventName: string | null,
+  /**备注 */
+  remarks: string | null,
+  /**状态 */
+  state: number | null
+}
+
+/**
+ * @name: 数据对象接口
+ * @description: 生产管理 - 部件详情
+ * @author wyoujia
+ * @date 2023-53-24 16:53:14
+*/
+export interface adminProductGoodsInfoDto {
+  /**显示加载效果 */
+  loading: false,
+  /**图片是否方法显示 */
+  showBig:false
+  /**放大图片的url */
+  imageUrl: string | null
+  /**基础信息 */
+  basicInformation: goodsInformationBasic,
+  /**生产日志 */
+  productionLog: productionLog[] | null,
+  /**报警日志 */
+  alarmLog: alarmLog [] | null,
+}

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

@@ -74,168 +74,45 @@
       :show-close="false"
       width="80%"
     >
-      <img :src="goods.imageurl" class="fullscreen-image"  alt="放大的图片"/>
+      <img :src="goods.imageUrl" class="fullscreen-image"  alt="放大的图片"/>
     </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts" name="goodInfo">
-//定义变量内容
 import {onMounted, reactive} from "vue";
-const goods = reactive({
+import {adminProductGoodsInfoDto} from "/@/api/admin/data-contracts";
+
+//组件的页面对象
+const goods:adminProductGoodsInfoDto = reactive({
+  /**显示加载效果 */
   loading: false,
-  basicInformation: [],
+  /**图片是否方法显示 */
+  showBig:false,
+  /**放大图片的url */
+  imageUrl:"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+  /**基础信息 */
+  basicInformation: {},
+  /**生产日志 */
   productionLog: [],
+  /**报警日志 */
   alarmLog: [],
-  imageurl:"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
-  showBig:false
-  // token: storesUserInfo.getToken(),
 })
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const init = async () =>{
-  goods.loading = true
-  setTimeout(() =>{
-    goods.basicInformation =
-      [
-        {
-          "title": "部件名称",
-          "value": "TQC+主板12321312312311231231231231232312312312123"
-        },
-        {
-          "title": "部件类型",
-          "value": "计控主板12312312311231231231231232323123112312312312312323231231231123123123123123232"
-        },
-        {
-          "title": "物料号",
-          "value": "TOK-20021203"
-        },
-        {
-          "title": "生产料号",
-          "value": "SC202307051"
-        },
-        {
-          "title": "序列号",
-          "value": "20121221"
-        },
-        {
-          "title": "软件版本",
-          "value": ""
-        },
-        {
-          "title": "厂商名称",
-          "value": "托肯恒山"
-        },
-        {
-          "title": "中化密钥状态",
-          "value": "已绑定"
-        },
-        {
-          "title": "团标密钥状态",
-          "value": "已备案"
-        },
-        {
-          "title": "状态",
-          "value": "正常"
-        },
-        {
-          "title": "创建时间",
-          "value": "2023-07-05"
-        },
-        {
-          "title": "生产时间",
-          "value": "2023-07-05"
-        },
-        {
-          "title": "备注",
-          "value": ""
-        },
-        {
-          "title": "检测时间",
-          "value": "2023-07-06"
-        },
-        {
-          "title": "检测员",
-          "value": "生产员"
-        }
-      ]
-    goods.productionLog =  [
-      {
-        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"
-      }
-    ]
-    goods.alarmLog = [
-      {
-        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
-      }
-    ]
-    goods.loading = false
-  },1000)
-}
 
 //点击查看详细
 const showPic = (val: string) => {
   showBigPic(val)
 }
-// const showFullText = (val: any) => {
-//   const e = val.target
-//   // e.style.
-//   // eslint-disable-next-line no-console
-//   console.log(e)
-// }
+
 
 //查看大图
 const showBigPic = (val : string) => {
   // eslint-disable-next-line no-console
   console.log(val)
-  // goods.imageurl = val
-  goods.showBig = true
 }
 
-// const hideFullText = (val :any) => {
-//   // eslint-disable-next-line no-console
-//   console.log(val)
-// }
-
 onMounted(() => {
-  // Number($route.params) |
-  init()
 })
 
 </script>