个人中心装备列表

auto-imports.d.ts

@@ -82,6 +82,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

components.d.ts

@@ -8,11 +8,17 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Breadcrumb: typeof import('./src/components/Breadcrumb/index.vue')['default']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
+    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
@@ -20,8 +26,17 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     EquipCard: typeof import('./src/components/equipCard.vue')['default']
     EquipCardHall: typeof import('./src/components/equipCardHall/index.vue')['default']
     EquipCardNew: typeof import('./src/components/equipCardNew/index.vue')['default']

src/views/user/goodsManagement/index.vue

@@ -9,6 +9,7 @@
     import { useStore } from 'store/user'
     const store = useStore() 
     import { mainStore } from 'store/main' 
+    const store2 = mainStore()
     import {
         getEquipmentListApi,getEquipmentTypeApi,getCompanyListApi
     } from 'http/api/usercenter/goodsmang'
@@ -156,8 +157,8 @@
     })  
     //编码类型禁止修改数目
     const countDisabled = ref(false)  
-    const dialogTypeCascader = ref()
     //装备类目-change
+    const dialogTypeCascader = ref()
     const dialogTypeChange = () => { 
             const deviceTypeList = dialogTypeCascader.value.getCheckedNodes()
             console.log(deviceTypeList)
@@ -171,7 +172,7 @@
                 countDisabled.value=true
             }  
     }
-    //获取下拉数据 
+    //获取所属公司下拉数据 
     const getCompanyList = async () => { 
         const res: any = await getCompanyListApi()
         console.log(res, '列表数据**--**') 
@@ -545,6 +546,125 @@
         })
     }
 
+
+    const mainFileList: any = ref([])//主展示
+    const detailsFileList: any = ref([])//详情展示
+    const insurancePdf: any = ref([])//合格证
+    const examinationPdf: any = ref([])//检测证明
+  
+    //图片查看弹窗
+    const dialogVisible: any = ref(false) 
+    const dialogImageUrl = ref('')
+    //上传
+    const upload: any = ref({
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + store2.token },
+        // 上传的地址
+        url: import.meta.env.VITE_API_URL + "/file/upload",
+    })
+    // 文件上传前处理-上传大小
+    const beforeUpload = (file: any) => {
+        if (file.size / 1024 / 1024 > 2) {
+            ElMessage({
+                type: 'error',
+                message: '上传文件大小不能超过2M!'
+            })
+            // this.$message.error({ message: `上传文件大小不能超过2M!`,});
+            return false;
+        }
+    }
+    // 文件上传失败
+    const uploadError = () => {
+        ElMessage({
+            type: 'error',
+            message: '上传文件失败!'
+        })
+        // this.$message.error({message: `上传文件失败!`}); 
+    }
+    // 文件上传成功处理
+    const handleFileSuccess = (response: any) => {
+        if (response.code == 200) {
+            let obj = {
+                // modelId:this.maId,
+                fileName: response.data.name.split("/")[4],
+                fileUrl: response.data.url
+            };
+            console.log(obj); 
+            mainFileList.value.push(obj)
+            ElMessage({
+                type: 'success',
+                message: '上传成功！'
+            })
+            console.log(mainFileList.value)
+        }
+    } 
+    // 文件上传成功处理
+    const handleFileSuccess2 = (response: any) => {
+        if (response.code == 200) {
+            let obj = {
+                // modelId:this.maId,
+                fileName: response.data.name.split("/")[4],
+                fileUrl: response.data.url
+            };
+            console.log(obj); 
+            detailsFileList.value.push(obj)
+            ElMessage({
+                type: 'success',
+                message: '上传成功！'
+            })
+            console.log(detailsFileList.value)
+        }
+    } 
+    // 文件上传成功处理
+    const handleFileSuccess3 = (response: any) => {
+        if (response.code == 200) {
+            let obj = {
+                // modelId:this.maId,
+                fileName: response.data.name.split("/")[4],
+                fileUrl: response.data.url
+            };
+            console.log(obj); 
+            insurancePdf.value.push(obj)
+            ElMessage({
+                type: 'success',
+                message: '上传成功！'
+            })
+            console.log(insurancePdf.value) 
+        }
+    }
+    // 文件上传成功处理
+    const handleFileSuccess4 = (response: any) => {
+        if (response.code == 200) {
+            let obj = {
+                // modelId:this.maId,
+                fileName: response.data.name.split("/")[4],
+                fileUrl: response.data.url
+            };
+            console.log(obj); 
+            examinationPdf.value.push(obj)
+            ElMessage({
+                type: 'success',
+                message: '上传成功！'
+            })
+            console.log(examinationPdf.value)
+        }
+    }
+    //文件下载
+    const handleDownload = (file: any) => {
+        const windowName = file.name;
+        window.open(file.fileUrl, windowName);
+    } 
+    //文件查看
+    const picturePreview = (file: any) => {
+        dialogImageUrl.value = file.fileUrl;
+        dialogVisible.value = true;
+    }
+    //文件查看
+    const handleRemove = (list: any,index: Number) => {
+        list.splice(index,1)
+    } 
+
+
     /* 关闭对话框 */
     const handleClose = (done: () => void) => {
         ruleFormRef.value.resetFields()
@@ -702,14 +822,14 @@
                 <el-form-item label="装备单位：" prop="unitName">
                     <el-input
                         autocomplete="off"
-                        style="width: 350px"
+                        style="width: 350px" maxlength="20"
                         v-model="equipmentDeploymentParams.unitName"
                         clearable />
                 </el-form-item>
                 <el-form-item label="装备品牌" prop="brand">
                     <el-input
                         v-model="equipmentDeploymentParams.brand"
-                        autocomplete="off"
+                        autocomplete="off" maxlength="20"
                         style="width: 350px"
                         clearable />
                 </el-form-item>
@@ -718,7 +838,7 @@
                 <el-form-item label="装备编号" prop="code">
                     <el-input
                         autocomplete="off"
-                        style="width: 350px"
+                        style="width: 350px" maxlength="40"
                         v-model="equipmentDeploymentParams.code"
                         clearable />
                 </el-form-item>
@@ -870,6 +990,105 @@
                 </template> 
             </el-form-item> -->
         </el-form>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">装备图片</span>
+        </div> 
+        <div class="uploadBox">
+            <div class="labelBox">
+                <div style="margin-left: 20px;">
+                    <span style="color: red;">*</span>
+                    <span style="font-size: 14px;color: #606266;font-weight: 600;">主展示图: </span>
+                </div>  
+                <div style="margin-left: 20px;">
+                    <el-upload ref="upload" :limit="6" :headers="upload.headers"
+                        :action="upload.url" :show-file-list="false" accept=".png, .jpg, .jpeg"
+                        :on-success="handleFileSuccess" :auto-upload="true"
+                        :before-upload="beforeUpload" :on-error="uploadError"
+                    >
+                    <el-button icon="el-icon-folder-add">上传文件</el-button>
+                    </el-upload> 
+                </div>
+                <div style="color: #999;font-size: 12px;margin-left: 20px;">支持格式：.jpg .png，单个文件大小不能超过2M</div>
+            </div>
+            <div class="imgsBox"> 
+                <!-- <div class="imgItem" v-if="mainFileList.length==0">
+                    <div class="icon-list" style="left: 60px;">
+                        <span class="imgItem__icon" >
+                            <i class="el-icon-plus"/>
+                        </span> 
+                    </div> 
+                </div> -->
+                <div class="imgItem" v-for="(item,index) in mainFileList" :key="index">
+                    <img class="picture-card" :src="item.fileUrl" alt="">
+                    <div class="icon-list">
+                        <span class="imgItem__icon hide" @click="handleDownload(item)">
+                            <i class="el-icon-download"/>
+                        </span>
+                        <span class="imgItem__icon hide" @click="picturePreview(item)">
+                            <i class="el-icon-zoom-in"/>
+                        </span>
+                        <span class="imgItem__icon hide" @click="handleRemove(mainFileList,index)">
+                            <i class="el-icon-delete"/>
+                        </span>
+                    </div> 
+                    <p class="file-name">{{ item.fileName }}</p>
+                </div>
+            </div>
+            <div class="tipBox">
+                *注:图片排序为平台展示顺序，不得少于1张，不得多于6张
+            </div>
+        </div> 
+        <div class="uploadBox">
+            <div class="labelBox">
+                <div style="margin-left: 20px;">
+                    <span style="color: red;">*</span>
+                    <span style="font-size: 14px;color: #606266;font-weight: 600;">详情页展示图: </span>
+                </div>  
+                <div style="margin-left: 20px;">
+                    <el-upload ref="upload" :limit="6" :headers="upload.headers"
+                        :action="upload.url" :show-file-list="false" accept=".png, .jpg, .jpeg"
+                        :on-success="handleFileSuccess2" :auto-upload="true"
+                        :before-upload="beforeUpload" :on-error="uploadError"
+                    >
+                    <el-button icon="el-icon-folder-add">上传文件</el-button>
+                    </el-upload> 
+                </div>
+                <div style="color: #999;font-size: 12px;margin-left: 20px;">支持格式：.jpg .png，单个文件大小不能超过2M</div>
+            </div>
+            <div class="imgsBox"> 
+                <!-- <div class="imgItem" v-if="detailsFileList.length==0">
+                    <div class="icon-list" style="left: 60px;">
+                        <span class="imgItem__icon" >
+                            <i class="el-icon-plus"/>
+                        </span> 
+                    </div> 
+                </div> -->
+                <div class="imgItem" v-for="(item,index) in detailsFileList" :key="index">
+                    <img class="picture-card" :src="item.fileUrl" alt="">
+                    <div class="icon-list">
+                        <span class="imgItem__icon hide" @click="handleDownload(item)">
+                            <i class="el-icon-download"/>
+                        </span>
+                        <span class="imgItem__icon hide" @click="picturePreview(item)">
+                            <i class="el-icon-zoom-in"/>
+                        </span>
+                        <span class="imgItem__icon hide" @click="handleRemove(detailsFileList,index)">
+                            <i class="el-icon-delete"/>
+                        </span>
+                    </div> 
+                    <p class="file-name">{{ item.fileName }}</p>
+                </div>
+            </div>
+            <div class="tipBox">
+                *注:图片排序为平台展示顺序，不得少于1张，不得多于6张
+            </div>
+        </div>
+
+
+
+
+
         <template #footer>
             <span class="dialog-footer">
                 <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
@@ -879,6 +1098,15 @@
             </span>
         </template>
     </el-dialog>
+
+    <!-- 图片查看弹窗 -->
+    <el-dialog v-model="dialogVisible" width="500px" height="500px">
+        <img width="100%" height="500px" :src="dialogImageUrl" />
+    </el-dialog>
+
+
+
+
 </template>
 
 <style lang="scss" scoped>