feat(部件类型): 实现更多功能

实现了列表展示，条件分页查询，编辑和添加功能，图片的上传功能

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

@@ -16,7 +16,7 @@ import {
   ResultOutputListFileEntity,
   ResultOutputPageComponentGetPageOutPut,
 } from '/@/api/admin/productionManagement/CommunalDto'
-import {   PageInputComponentGetPageDto } from '/@/api/admin/productionManagement/ComponentTypeDto'
+import {componentTypeDto, PageInputComponentGetPageDto} from '/@/api/admin/productionManagement/ComponentTypeDto'
 import { ContentType, HttpClient, RequestParams } from '../http-client'
 
 export class ComponentTypeApi<SecurityDataType = unknown> extends HttpClient<SecurityDataType> {
@@ -132,4 +132,31 @@ export class ComponentTypeApi<SecurityDataType = unknown> extends HttpClient<Sec
       format: 'json',
       ...params,
     })
+
+  /**
+   * @name:
+   * @description:
+   * @author wyoujia
+   * @date
+  */
+
+  addComponentType = (data:componentTypeDto) =>
+    this.request<AxiosResponse, any>({
+      path: `/api/app/compoent/component-type-add/ComponentType`,
+      method: 'POST',
+      body: data,
+      secure: true,
+      type: ContentType.Json,
+      format: 'json',
+    })
+
+  upDateComponentType = (data:componentTypeDto) =>
+    this.request<AxiosResponse, any>({
+      path: `/api/app/compoent/component-type-update/ComponentType`,
+      method: 'PUT',
+      body: data,
+      secure: true,
+      type: ContentType.Json,
+      format: 'json',
+    })
 }

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

@@ -43,3 +43,14 @@ export interface typeTable {
   status?: number | string
   type?:number | string
 }
+
+/**添加部件类型表单*/
+export interface componentTypeDto{
+  guid?: number | null,
+  bomName?: string,
+  bomNo?: string,
+  status?: number ,
+  img?: string,
+  remark?: string,
+  type?: number
+}

admin.ui.plus-master/src/api/admin/shareDto/shareDto.ts

@@ -8,9 +8,9 @@
  */
 export interface pageInput {
   /**当前页数 */
-  CurrentPage: 1,
+  CurrentPage: number | any
   /**展示页数 */
-  PageSize: 20
+  PageSize: number | any
 }
 
 /**

admin.ui.plus-master/src/components/my-upload-img/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-upload
+    class="avatar-uploader"
+    :headers="{ Authorization:  'Bearer ' + useUserInfoStores.getToken()}"
+    :action='baseUrl+"/api/admin/file/upload-file"'
+    :show-file-list="false"
+    :on-success="handleAvatarSuccess"
+    :before-upload="beforeAvatarUpload"
+  >
+    <img v-if="imageUrl" :src="baseUrl+'/'+imageUrl" class="avatar"  alt="图片"/>
+    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+  </el-upload>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch} from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+
+import type { UploadProps } from 'element-plus'
+import { useUserInfo } from '/@/stores/userInfo'
+
+const useUserInfoStores = useUserInfo()
+
+//接受父组件的传值
+const props = defineProps({
+  imgUrl:String
+})
+
+//出发父组件的更新方法
+const emits = defineEmits(['onUpload'])
+
+const imageUrl = ref(props.imgUrl)
+
+const baseUrl = import.meta.env.VITE_API_URL
+
+const handleAvatarSuccess: UploadProps['onSuccess'] = (
+  response,
+) => {
+  const res = response?.data
+  imageUrl.value = res.fileDirectory +'/'+ res.fileGuid + res.extension
+  emits('onUpload',imageUrl.value)
+}
+
+watch(() => props.imgUrl, (val)=> imageUrl.value = val)
+
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+   if (rawFile.size / 1024 / 1024 > 10) {
+    ElMessage.error('图片超过10MB!')
+    return false
+  }
+  return true
+}
+
+</script>
+
+<style scoped>
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+</style>

admin.ui.plus-master/src/views/admin/authorize/components/form-edit.vue

@@ -87,20 +87,20 @@ const formData = reactive({
   buttonText:'',
   isShowDialog: false,
   editData:{} as oilSdkTableModel,
-  /**动态表头 */
-  dynamicColumns: [
-    { prop: 'oilStation', label: '油站名称' },
-    { prop: 'projectName', label: '项目名称' },
-    { prop: 'sn', label: '设备SN号' },
-    { prop: 'key', label: '授权码' },
-    { prop: 'expiedTime', label: '过期时间' },
-    { prop: 'formData', label: '状态' },
-    { prop: 'remark', label: '备注' },
-  ],
-  options:[
-    {label:'正常',value:'正常'},
-    {label:'未授权',value:'未授权'},
-  ]
+  // /**动态表头 */
+  // dynamicColumns: [
+  //   { prop: 'oilStation', label: '油站名称' },
+  //   { prop: 'projectName', label: '项目名称' },
+  //   { prop: 'sn', label: '设备SN号' },
+  //   { prop: 'key', label: '授权码' },
+  //   { prop: 'expiedTime', label: '过期时间' },
+  //   { prop: 'formData', label: '状态' },
+  //   { prop: 'remark', label: '备注' },
+  // ],
+  // options:[
+  //   {label:'正常',value:'正常'},
+  //   {label:'未授权',value:'未授权'},
+  // ]
 })
 
 /**有效时间选择校验*/
@@ -162,7 +162,7 @@ const onCancel = () => {
   formData.isShowDialog = false
 }
 
-/***监听弹窗关闭表单验证*/
+/***监听弹窗关   闭表单验证*/
 watch(() => formData.isShowDialog,(newVal) => {
   if(newVal) formRef.value?.resetFields()
 })
@@ -187,10 +187,14 @@ const onSubmit =  () => {
       formData.loading = false
       return
     }
+
     if(res?.success){
+      console.log('2')
       eventBus.emit('refreshView')
       formData.isShowDialog = false
+      formData.editData = {} as oilSdkTableModel
     }
+
     formData.loading = false
   })
 }

admin.ui.plus-master/src/views/admin/product/components/form-edit.vue

@@ -10,32 +10,36 @@
         <el-row :gutter="35">
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="部件类型" prop="type">
-              <el-input v-model="formData.editData.type" placeholder="格式：message.router.xxx" clearable></el-input>
+              <el-select v-model="formData.editData.type" placeholder="请选择部件类型" >
+                <el-option v-for="(value, key) in mapType" :key="key" :label="value[1]"  :value="value[0]" />
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="部件名称" prop="bomName">
-              <el-input v-model="formData.editData.bomName" placeholder="格式：message.router.xxx" clearable></el-input>
+              <el-input v-model="formData.editData.bomName" placeholder="请输入部件名称" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="物料号" prop="bomNo">
-              <el-input v-model="formData.editData.bomNo" placeholder="格式：message.router.xxx" clearable></el-input>
+              <el-input v-model="formData.editData.bomNo" placeholder="请输入物料号" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="状态" prop="status">
-              <el-input v-model="formData.editData.status" placeholder="格式：message.router.xxx" clearable></el-input>
+              <el-select v-model="formData.editData.status" placeholder="请选择部件状态" >
+                <el-option v-for="(value, key) in mapState" :key="key" :label="value[1]"  :value="value[0]" />
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="图片" prop="img">
-              <el-input v-model="formData.editData.img" placeholder="格式：message.router.xxx" clearable></el-input>
+              <MyUploadImg :imgUrl="formData.editData.img" @onUpload="onUpload" />
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="备注" prop="remark">
-              <el-input v-model="formData.editData.remark" placeholder="格式：message.router.xxx" clearable type="textarea"></el-input>
+              <el-input v-model="formData.editData.remark" placeholder="备注" clearable :rows="8" type="textarea"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
@@ -51,12 +55,20 @@
 </template>
 
 <script setup lang="ts">
-import {reactive, ref, watch} from "vue";
-import {oilSdkTableModel} from "/@/api/admin/deviceAuthorization/oilSdkAuthorDto";
-import {OilSdkAuthorAPI} from "/@/api/admin/deviceAuthorization/oilSdkAuthor";
-import eventBus from "/@/utils/mitt";
+import {defineAsyncComponent, reactive, ref, watch} from "vue";
 import {FormRules} from "element-plus";
-import {typeTable} from "/@/api/admin/productionManagement/ComponentTypeDto";
+import {componentTypeDto, typeTable} from "/@/api/admin/productionManagement/ComponentTypeDto";
+import {ComponentTypeApi} from "/@/api/admin/productionManagement/ComponentType";
+import eventBus from "/@/utils/mitt";
+const MyUploadImg = defineAsyncComponent(() => import('/src/components/my-upload-img/index.vue'))
+
+const formProps = defineProps({
+  mapType:Map,
+  mapState:Map
+})
+
+const mapType = ref(formProps.mapType)
+const mapState = ref(formProps.mapState)
 
 enum Form {
   ADD,
@@ -102,6 +114,10 @@ const rules = reactive<FormRules>({
 
 const formRef = ref()
 
+const onUpload = (val) => {
+  formData.editData.img = val
+}
+
 const openDialog = (val) => {
   if(val){
     formData.editData = JSON.parse(JSON.stringify(val))
@@ -134,13 +150,37 @@ watch(() => formData.isShowDialog,(newVal) => {
 const onSubmit =  () => {
   formRef.value.validate(async (valid: boolean) =>{
     if(!valid) return
-    console.log(formData)
+
+    formData.loading = true
+    let res = {} as any
+    if(formData.formType === Form.UPDATE){
+      res = await new ComponentTypeApi().upDateComponentType(formData.editData as componentTypeDto).catch(() => {
+        formData.loading = false
+      })
+    }else if(formData.formType === Form.ADD){
+      res = await new ComponentTypeApi().addComponentType(formData.editData as componentTypeDto).catch(() => {
+        formData.loading = false
+      })
+    }else {
+      formData.loading = false
+      return
+    }
+
+    if(res?.success){
+      eventBus.emit('refreshView')
+      formData.isShowDialog = false
+      formData.editData = {}
+    }
+
+    formData.loading = false
   })
 }
 
+
 defineExpose({
   openDialog,
 })
+
 </script>
 <style scoped lang="scss">
 

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

@@ -154,17 +154,18 @@
               </div>
             </div>
             <div class="basicInformation-right" >
-                <div @click="showBigPic(goods.basicInformation.img)" v-if="goods.basicInformation.img">
+                <div @click="showBigPic(goods.basicInformation.img)">
                   <el-image loading="lazy"
                             alt="fgg"
                             class="img"
                             fit="fill"
-                            :src="goods.basicInformation.img" />
-                </div>
-                <div @click="showBigPic(goods.basicInformation.img)" v-else>
-                  <div >
-                    暂无图片
-                  </div>
+                            :src="goods.basicInformation.img" >
+                    <template #error>
+                      <div class="image-slot">
+                        <el-icon><icon-picture /></el-icon>
+                      </div>
+                    </template>
+                  </el-image>
                 </div>
               </div>
           </div>
@@ -173,7 +174,7 @@
 
       <!-- 生产日志 -->
       <el-col :xs="24" >
-        <el-card style="height: 35vh" class="my-fill mt8"  shadow="hover" header="生产日志">
+        <el-card style="height: 40vh" class="my-fill mt8"  shadow="hover" header="生产日志">
           <el-table v-loading="goods.loadingProduct" :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>
@@ -181,8 +182,9 @@
             <el-pagination
               v-model:currentPage="goods.productionLog.pageInput.CurrentPage"
               v-model:page-size="goods.productionLog.pageInput.PageSize"
+              :default-page-size="5"
               :total="goods.productionLog.total"
-              :page-sizes="[ 10, 20, 50, 100]"
+              :page-sizes="[5, 10, 20, 50, 100]"
               small
               background
               @size-change="onProductionLogSizeChange"
@@ -195,7 +197,7 @@
 
       <!-- 报警日志 -->
       <el-col :span="24" >
-        <el-card style="height: 35vh" class="my-fill mt8" shadow="hover" header="报警日志">
+        <el-card style="height: 40vh" class="my-fill mt8" shadow="hover" header="报警日志">
           <el-table v-loading="goods.loadingAlarm" :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>
@@ -204,7 +206,8 @@
               v-model:currentPage="goods.alarmLog.pageInput.CurrentPage"
               v-model:page-size="goods.alarmLog.pageInput.PageSize"
               :total="goods.alarmLog.total"
-              :page-sizes="[ 10, 20, 50, 100]"
+              :page-sizes="[5, 10, 20, 50, 100]"
+              :default-page-size="5"
               small
               background
               @size-change="onAlarmLogSizeChange"
@@ -222,7 +225,10 @@
       :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>
@@ -238,7 +244,7 @@ import type {
 } from "/@/api/admin/productionManagement/ComponentDetailsDto";
 import {adminProductGoodsInfoDto, filterData} from "/@/api/admin/productionManagement/ComponentDetailsDto";
 import type {columnsProps, pageInput} from "/@/api/admin/shareDto/shareDto";
-
+import { Picture as IconPicture } from '@element-plus/icons-vue'
 //组件的页面对象
 const goods = reactive({
   /**部件id */
@@ -264,8 +270,8 @@ const goods = reactive({
     dynamicColumns: [] as Array<columnsProps>,
     /**页面分页 */
     pageInput: {
-      currentPage: 1,
-      pageSize: 10
+      CurrentPage: 1,
+      PageSize: 5
     } as pageInput,
     /**总数 */
     total: 0
@@ -279,7 +285,7 @@ const goods = reactive({
     /**页面分页 */
     pageInput: {
       CurrentPage: 1,
-      PageSize: 10
+      PageSize: 5
     } as pageInput,
     /**总数 */
     total: 0
@@ -349,6 +355,7 @@ const initAlarmLog = async () => {
 
 onMounted(() => {
   goods.id = router.currentRoute.value.params.guid
+  console.log(goods.productionLog.pageInput.PageSize)
   /**初始化 */
   initBasicInformation()
   initProductionLog()
@@ -400,19 +407,19 @@ onMounted(() => {
         width: 220px;
         height: 140px;
         cursor: pointer;
-        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 8px;
       }
-      .img:hover {
-        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-      }
-      div{
-        width: 220px;
-        height: 140px;
-        cursor: pointer;
-        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 8px;
+      .image-slot {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        background: var(--el-fill-color-light);
+        color: var(--el-text-color-secondary);
+        font-size: 30px;
       }
-      div:hover{
-        ox-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+      .image-slot .el-icon {
+        font-size: 30px;
       }
     }
   }

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

@@ -73,11 +73,11 @@
               </template> -->
             </el-table-column>
 
-            <el-table-column prop="createdTime" label="更新时间" >
-              <template #default="{ row }">
-                {{ formatterTime(row.modifiedTime || row.createdTime || '') }}
-              </template>
-            </el-table-column>
+<!--            <el-table-column prop="createdTime" label="更新时间" >-->
+<!--              <template #default="{ row }">-->
+<!--                {{ formatterTime(row.modifiedTime || row.createdTime || '') }}-->
+<!--              </template>-->
+<!--            </el-table-column>-->
             <el-table-column label="操作"  fixed="right" header-align="center" align="center">
               <template #default="{ row }">
                 <!-- <el-popover :width="220">
@@ -219,25 +219,18 @@ const init = async () => {
     map.set(Number(obj.value), obj.name);
     return map;
   },new Map());
-
 }
 
 onMounted(() => {
   init()
   onQuery()
-  eventBus.off('refreshFile')
-  eventBus.on('refreshFile', async () => {
-    await onQuery()
-  })
 })
 
-onBeforeMount(() => {
-  eventBus.off('refreshFile')
-})
 
-const formatterTime = (cellValue: any) => {
-  return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
-}
+
+// const formatterTime = (cellValue: any) => {
+//   return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
+// }
 
 //const getInitialIndex = (imgUrl: string) => {
 //return previewImglist.value.indexOf(imgUrl)

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

@@ -19,23 +19,25 @@
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                 <el-form-item label="部件类型">
-                  <MySelectRequest :textPla="props.textPla" :select="props.select" :code="props.code" @search="search"/>
+                  <MySelectRequest :textPla="propsType.textPla" :select="propsType.select" :code="propsType.code" @search="search"/>
                 </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                 <el-form-item>
                   <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
                   <el-button type="primary" icon="ele-Delete" @click="onReset"> 重置 </el-button>
-                  <el-button type="primary" icon="ele-Plus" @click="onAdd"> 添加 </el-button>
-<!--                  <el-button v-auth="'api:admin:file:upload-file'" type="primary" icon="ele-Upload" @click="onUpload"> 上传 </el-button>-->
                 </el-form-item>
               </el-col>
+
             </el-form-item>
           </el-form>
-          <div class="my-flex my-flex-end" style="margin: 30px 30px 0 0">
-            <el-button type="primary" icon="ele-UploadFilled" @click="uploadFiles"> 批量导入 </el-button>
-            <el-button type="primary" icon="ele-Document" @click="exportTable"> 导出表格 </el-button>
-          </div>
+            <div class="my-flex my-flex-start">
+              <el-button  type="primary" icon="ele-Plus" @click="onAdd"> 添加 </el-button>
+            </div>
+            <div class="my-flex my-flex-end">
+              <el-button type="primary" icon="ele-UploadFilled" @click="uploadFiles"> 批量导入 </el-button>
+              <el-button type="primary" icon="ele-Document" @click="exportTable"> 导出表格 </el-button>
+            </div>
         </el-card>
       </el-col>
       <!--表格-->
@@ -43,38 +45,50 @@
         <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
           <el-table v-loading="state.loading" :data="state.bomListData" row-key="id" style="width: 100%">
             <el-table-column prop="guid" label="序号"  />
-            <el-table-column prop="type" label="部件类型"  />
+            <el-table-column prop="type" label="部件类型"  >
+              <template #default="{ row }">
+                {{getComponentType(row.type)}}
+              </template>
+            </el-table-column>
             <el-table-column prop="bomName" label="部件名称"  />
             <el-table-column prop="bomNo" label="物料号"  />
-            <el-table-column prop="status" label="状态"  />
+            <el-table-column prop="status" label="状态"  >
+              <template #default="{ row }">
+                {{getComponentState(row.status)}}
+              </template>
+            </el-table-column>
             <el-table-column prop="remark" label="备注" />
             <el-table-column prop="bom_Image" label="部件图片"  >
-
               <template #default="{ row }">
-                <div class="my-flex">
+                <div class="my-flex" @click="showBigPic(row.img)">
                   <el-image
-                    v-if="isImage(row.extension)"
-                    :src="row.linkUrl"
+                    :src="getImg(row.img)"
                     :preview-src-list="previewImglist"
                     :initial-index="getInitialIndex(row.linkUrl)"
                     :lazy="true"
+                    class="img"
                     :hide-on-click-modal="true"
                     fit="scale-down"
                     preview-teleported
-                    style="width: 80px; height: 80px"
-                  />
-                  <div class="ml10 my-flex-fill my-flex-y-center">
-                    <div>{{ (row.fileName || '') + (row.extension || '') }}</div>
-                  </div>
+                  >
+                    <template #error>
+                      <div class="image-slot">
+                        <el-icon><icon-picture /></el-icon>
+                      </div>
+                    </template>
+                  </el-image>
+<!--                  <div class="ml10 my-flex-fill my-flex-y-center">-->
+<!--                    <div>{{ (row.fileName || '') + (row.extension || '') }}</div>-->
+<!--                  </div>-->
                 </div>
               </template>
             </el-table-column>
 
-            <el-table-column prop="createdTime" label="更新时间" >
-              <template #default="{ row }">
-                {{ formatterTime(row.modifiedTime || row.createdTime || '') }}
-              </template>
-            </el-table-column>
+<!--            <el-table-column prop="createdTime" label="更新时间" >-->
+<!--              <template #default="{ row }">-->
+<!--                {{ formatterTime(row.modifiedTime || row.createdTime || '') }}-->
+<!--              </template>-->
+<!--            </el-table-column>-->
             <el-table-column label="操作"  fixed="right" header-align="center" align="center">
               <template #default="{ row }">
                 <!-- <el-popover :width="220">
@@ -125,19 +139,33 @@
         </el-card>
       </el-col>
     </el-row>
-    <EditDialog ref="editDialogRef" />
+    <el-dialog
+      v-model="state.showBig"
+      :close-on-click-modal="true"
+      :show-close="false"
+      width="80%"
+    >
+      <img
+        :src="getImg(state.imageUrl)"
+        class="fullscreen-image"
+        alt="放大的图片"/>
+    </el-dialog>
+    <EditDialog :mapType="mapType" :mapState="mapState" ref="editDialogRef" />
   </div>
 </template>
 
 <script lang="ts" setup name="admin/product/bom">
-import {ref, reactive, onMounted, onBeforeMount, computed, defineAsyncComponent, watch} from 'vue'
+import {ref, reactive, onMounted, onBeforeMount, computed, defineAsyncComponent} from 'vue'
 import { ComponentTypeApi } from '/@/api/admin/productionManagement/ComponentType'
-import dayjs from 'dayjs'
+// import dayjs from 'dayjs'
 import eventBus from '/@/utils/mitt'
 import { isImage } from '/@/utils/test'
 import {FileGetPageOutput} from "/@/api/admin/data-contracts";
 import {PageInputFileGetPageDto} from "/@/api/admin/productionManagement/ComopnentDto";
 import {ComponentGetPageDto} from "/@/api/admin/productionManagement/ComponentTypeDto";
+import { Picture as IconPicture } from '@element-plus/icons-vue'
+import {localStorageSet} from "/@/utils/localStorageSet";
+import {DictApi} from "/@/api/admin/Dict";
 //import commonFunction from '/@/utils/commonFunction'
 
 // const { proxy } = getCurrentInstance() as any
@@ -150,25 +178,50 @@ const MySelectRequest = defineAsyncComponent(() => import('/@/components/my-sele
  * code 字段编码
  * select 默认值
  */
-const props = reactive({
+const propsType = reactive({
   code:'componentType',
   select:'',
   textPla:'请选择部件类型'
 })
+
+/**
+ *
+ * @param val
+ */
+const propsState = reactive({
+  code:'componentTypeListStatus',
+  select:'',
+  textPla:'请选择状态'
+})
+
 const search = (val) => {
   state.filterModel.bomType = val.value
-  props.select = val.value
+  propsType.select = val.value
 }
 
+const baseUrl = import.meta.env.VITE_API_URL
+
+const getImg = (url) => {
+  return baseUrl +'/' +url
+}
 
 const editDialogRef = ref()
 
-const fileUploadRef = ref()
+/**部件类型map*/
+const mapType = ref(new Map)
+
+/**部件状态*/
+const mapState = ref(new Map)
+
+// const fileUploadRef = ref()
 
 //部件的页面对象
 const state = reactive({
   loading: false,
   fileFormTitle: '',
+  showBig: false,
+  /**放大图片的url */
+  imageUrl: "",
   filterModel: {
     // fileName: '',
     bomType: '',
@@ -197,21 +250,80 @@ const previewImglist = computed(() => {
   return imgList
 })
 
+/**查看大图*/
+const showBigPic = (val) => {
+  // eslint-disable-next-line no-console
+  console.log(val)
+  state.imageUrl = val
+  state.showBig = true
+}
+
+/**返回部件类型*/
+const getComponentType = (type) =>{
+  if(mapType.value?.has(type)){
+    return mapType.value.get(type)
+  }else {
+    return type
+  }
+}
+
+const getComponentState = (state) => {
+  if(mapState.value.has(state)){
+    return mapState.value.get(state)
+  }else {
+    return state
+  }
+}
+
+//获取部件类型map
+const initLocalType = async () => {
+  let localType = localStorageSet.getItemWithExpiration(propsType.code)
+
+  if(!localType){
+    const res = await new DictApi().getList([propsType.code] as string[])
+    /**存一天的缓存*/
+    localStorageSet.setItemWithExpiration(propsType.code as string, res?.data,1)
+    localType = localStorageSet.getItemWithExpiration(propsType.code as string)
+  }
+
+  mapType.value  = localType?.reduce((map, obj) => {
+    map.set(Number(obj.value), obj.name);
+    return map;
+  },new Map());
+}
+
+//获取部件状态map
+const initLocalState = async () => {
+  let localState = localStorageSet.getItemWithExpiration(propsState.code)
+
+  if(!localState){
+    const res = await new DictApi().getList([propsState.code] as string[])
+    /**存一天的缓存*/
+    localStorageSet.setItemWithExpiration(propsState.code as string, res?.data,1)
+    localState = localStorageSet.getItemWithExpiration(propsState.code as string)
+  }
+
+  mapState.value = localState?.reduce((map, obj) => {
+    map.set(Number(obj.value), obj.name);
+    return map;
+  },new Map());
+}
+
 onMounted(() => {
   onQuery()
-  eventBus.off('refreshFile')
-  eventBus.on('refreshFile', async () => {
+  eventBus.off('refreshView')
+  eventBus.on('refreshView', async () => {
     await onQuery()
   })
 })
 
 onBeforeMount(() => {
-  eventBus.off('refreshFile')
+  eventBus.off('refreshView')
 })
 
-const formatterTime = (cellValue: any) => {
-  return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
-}
+// const formatterTime = (cellValue: any) => {
+//   return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
+// }
 
 const getInitialIndex = (imgUrl: string) => {
   return previewImglist.value.indexOf(imgUrl)
@@ -219,6 +331,8 @@ const getInitialIndex = (imgUrl: string) => {
 
 /**查询*/
 const onQuery = async () => {
+  await initLocalType()
+  await initLocalState()
   state.loading = true
   const res = await new ComponentTypeApi().getPage({ ...state.pageInput, filter: state.filterModel }).catch(() => {
     state.loading = false
@@ -241,7 +355,7 @@ const resetSearchForm = () => {
   state.filterModel.bomName = ''
   state.filterModel.bomProNo = ''
   state.filterModel.bomMateNo = ''
-  props.select = ''
+  propsType.select = ''
 }
 
 /**添加*/
@@ -286,4 +400,27 @@ const onCurrentChange = (val: number) => {
 .el-form .el-col.mb20 {
   margin: 0 !important;
 }
+.img {
+  width: 100px;
+  height: 80px;
+  cursor: pointer;
+}
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-secondary);
+  font-size: 30px;
+}
+.image-slot .el-icon {
+  font-size: 30px;
+}
+.fullscreen-image {
+  width: 100%;
+  max-height: 80vh;
+  object-fit: contain;
+}
 </style>