批量新增

src/views/big-screen/model-components/detailList.vue

@@ -39,13 +39,13 @@
                     show-overflow-tooltip
                 >
                     <template #default="{ row }">
-                        <span v-if="item.prop === 'upTotal'">{{ row.upTotal }} 天</span>
+                        <span v-if="item.prop === 'upTotal'">{{ row.upTotal || 0 }} 天</span>
-                        <span v-else-if="item.prop === 'leaseTotal'">{{ row.leaseTotal }} 天</span>
+                        <span v-else-if="item.prop === 'leaseTotal'">{{ row.leaseTotal || 0 }} 天</span>
-                        <span v-else-if="item.prop === 'rate'">{{ row.rate }}%</span>
+                        <span v-else-if="item.prop === 'rate'">{{ row.rate || 0 }}%</span>
                         <span v-else-if="item.prop === 'estimateDays'"
-                            >{{ row.estimateDays }} 天</span
+                            >{{ row.estimateDays || 0 }} 天</span
                         >
-                        <span v-else-if="item.prop === 'answerRate'">{{ row.answerRate }}%</span>
+                        <span v-else-if="item.prop === 'answerRate'">{{ row.answerRate || 0 }}%</span>
                         <span v-else>{{ row[item.prop] }}</span>
                     </template>
                 </el-table-column>

src/views/big-screen/model-components/right-three-model.vue

@@ -35,7 +35,7 @@ const initCharts = () => {
         legend: {
             icon: 'circle',
             itemHeight: 6,
-            itemWidth: 6,
+            itemWidth: 16,
             borderRadius: 3,
             // icon: 'rect',
             orient: 'vertical',
@@ -50,8 +50,8 @@ const initCharts = () => {
                         width: 80,
                         fontSize: 13,
                     },
-                    value: { width: 6, align: 'right', fontFamily: 'Medium', fontSize: 13 },
+                    value: { width: 16, align: 'right', fontFamily: 'Medium', fontSize: 13 },
-                    rate: { width: 6, align: 'right', fontSize: 13 },
+                    rate: { width: 16, align: 'right', fontSize: 13 },
                 },
             },
             data: pieData.value,
@@ -61,7 +61,7 @@ const initCharts = () => {
                     if (name.length > 6) {
                         name = name.slice(0, 6) + '..'
                     }
-                    return `{name|${name}}{value|       ${item.value}}       {rate| 台}`
+                    return `{name|${name}}{value|${item.value}}{rate| 台}`
                 }
             },
         },
@@ -268,7 +268,7 @@ onMounted(() => {
     .center-icon {
         position: absolute;
         top: 41%;
-        left: 20%;
+        left: 17.5%;
         width: 80px;
         height: 80px;
         z-index: 1;

src/views/user/goodsManagement/index.vue

@@ -35,18 +35,16 @@ import {
     updateUpDownApi, //上下架
     downLoadTemplate, //模班下载
 } from 'http/api/usercenter/goodsmang'
-import { downloadFile, download } from '@/utils/download.js'
 
 const batchAddVisible: any = ref(false) // 批量新增
 const batchAddData: any = ref([]) // 批量新增
 const batchAddColumn: any = ref([
-    { label: '文件名称', prop: 'fileName' },
-    { label: '上传位置', prop: 'position' },
-    { label: '装备唯一标识', prop: 'code' },
     { label: '装备名称', prop: 'deviceName' },
-    { label: '装备型号', prop: 'deviceType' },
+    { label: '装备型号', prop: 'typeName' },
 ])
 
+const uploadUrlTemp = window.location.origin + '/iws/mall-view/MaDevTemplate.xlsx'
+
 // 注册地址拼装
 const AssemblyRegisterAddress: any = reactive([])
 const deviceType: any = reactive([])
@@ -154,7 +152,7 @@ getList()
 
 //---列表按钮事件---
 // 装备新增按钮
-const equipmentDeployment = () => {
+const equipmentDeployment = (row: any) => {
     isAdd.value = true
     settleinTitle.value = '新增装备'
     isMaStatus.value = false
@@ -194,6 +192,26 @@ const equipmentDeployment = () => {
 
     //装备证书table
     equipTableList.value = []
+
+    if (row) {
+        console.log('🚀 ~ equipmentDeployment ~ row:', row)
+        getTypeTreeData()
+        // addAndEditForm.value = row
+        Object.assign(addAndEditForm, row)
+        // equipTableList.value = [...row.tableList]
+        if (row.tableList && row.tableList.length) {
+            equipTableList.value = row.tableList.map((item: any) => {
+                return {
+                    identifyCode: item.identifyCode,
+                    checkMan: item.checkMan,
+                    checkDate: item.checkDate,
+                    nextCheckData: item.nextCheckData,
+                }
+            })
+        }
+
+        addAndEditForm.deviceTypeList = getSelectId(deviceTypeTree.value, addAndEditForm.typeId)
+    }
     // 打开入驻弹框
     dialogFormVisibleSettlein.value = true
 }
@@ -763,6 +781,7 @@ const submitFun = (type: any) => {
             //     } catch (error) {}
             // }
             addAndEditForm.tableList = equipTableList.value
+            // console.log('🚀 ~ addAndEditFormRef.value.validate ~ addAndEditForm.tableList:', addAndEditForm.tableList)
             for (let i = 0; i < addAndEditForm.tableList.length; i++) {
                 const row = addAndEditForm.tableList[i]
                 for (const key in row) {
@@ -794,6 +813,12 @@ const submitFun = (type: any) => {
                                 type: 'error',
                                 message: `第 ${i + 1} 行的 ${'下次检修日期'} 字段不能为空`,
                             })
+                        } else {
+                            // ElMessage({
+                            //     type: 'error',
+                            //     message: `第 ${i + 1} 行的 ${key} 字段不能为空`,
+                            // })
+                            console.log(`第 ${i + 1} 行的 ${key} 字段不能为空`)
                         }
 
                         // } else if (key == 'insurancePdf') {
@@ -1044,32 +1069,6 @@ const picturePreview = (file: any) => {
     dialogVisible.value = true
 }
 
-const onTempDownLoad = () => {
-    ElMessageBox.confirm('是否确定下载', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-    })
-        .then(async () => {
-            // const res: any = await downLoadTemplate()
-            // const blob = res.blob()
-            // downloadFile({
-            //     fileData: res,
-            //     fileType: 'application/octet-stream',
-            //     fileName: `模版_${new Date().getTime()}.xlsx`,
-            // })
-            // downLoadTemplate().then(res => res.blob()).then(blob => {
-            //     console.log('🚀 ~ downLoadTemplate ~ blob:', blob)
-            //     downloadFile({
-            //         blob,
-            //         fileType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-            //         fileName: `模版_${new Date().getTime()}.xlsx`,
-            //     })
-            // })
-            download('/material-mall/dev/downLoadDev', {}, `模版_${new Date().getTime()}.xlsx`)
-        })
-        .catch(() => {})
-}
 const onBatchUpload = () => {
     console.log('下载')
 }
@@ -1118,6 +1117,7 @@ const addAndEditForm = reactive<any>({
 })
 // const addAndEditFormTemp = reactive<any>()
 const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
+const uploadUrl2 = import.meta.env.VITE_API_URL + '/material-mall/dev/importData'
 const addAndEditFormRef = ref()
 // 装备描述表单
 const descriptionFormList = ref<any>([
@@ -1434,6 +1434,59 @@ const getUpdateTimeBgColor = (row: any) => {
     }
     return '' // 返回空字符串，让背景色保持默认
 }
+
+const handleBatchAddVisible = () => {
+    batchAddData.value = []
+    batchAddVisible.value = true
+}
+
+const selectColumn = ref<any>([])
+const selectionChange = (val: any) => {
+    console.log('🚀 ~ selectionChange ~ val:', val)
+    selectColumn.value = val
+}
+
+const handleUpload = (file: any, fileList: any) => {
+    console.log('🚀 ~ handleUpload ~ file:', file)
+    console.log('🚀 ~ handleUpload ~ fileList:', fileList)
+    if (file.code == 200) {
+        batchAddData.value = file.data
+    } else {
+        ElMessage({
+            message: file.msg,
+            type: 'error',
+        })
+    }
+}
+
+const handleBatchDel = () => {
+    if (selectColumn.value.length == 0) {
+        ElMessage({
+            message: '请选择要删除的数据',
+            type: 'error',
+        })
+        return
+    }
+    ElMessageBox.confirm('是否确认删除所选数据', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    }).then(() => {
+        batchAddData.value = batchAddData.value.filter(
+            (item: any) => !selectColumn.value.includes(item),
+        )
+    })
+}
+
+const handleDel = (index: any) => {
+    ElMessageBox.confirm('是否确认删除所选数据', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    }).then(() => {
+        batchAddData.value.splice(index, 1)
+    })
+}
 </script>
 
 <template>
@@ -1548,7 +1601,7 @@ const getUpdateTimeBgColor = (row: any) => {
                         <el-button
                             class="primary-lease"
                             type="primary"
-                            @click="batchAddVisible = true"
+                            @click="handleBatchAddVisible"
                             >批量新增</el-button
                         >
                     </el-form-item>
@@ -2498,15 +2551,28 @@ const getUpdateTimeBgColor = (row: any) => {
             destroy-on-close
             :close-on-click-modal="false"
         >
-            <el-row :gutter="20" style="display: flex; align-items: center">
+            <el-row :gutter="20">
                 <el-col :span="1.5" :offset="0">
-                    <el-button type="primary" @click="onTempDownLoad">下载模版</el-button>
+                    <a :href="uploadUrlTemp" download="模板">
+                        <el-button class="primary-lease" type="primary" style="margin-left: 20px"
+                            >模板下载</el-button
+                        >
+                    </a>
                 </el-col>
                 <el-col :span="1.5" :offset="0">
-                    <el-button type="primary" @click="">上传文件</el-button>
+                    <el-upload
+                        class="upload-demo"
+                        :action="uploadUrl2"
+                        :headers="headerInfo"
+                        :show-file-list="false"
+                        accept=".xlsx"
+                        :on-success="handleUpload"
+                    >
+                        <el-button type="primary">上传文件</el-button>
+                    </el-upload>
                 </el-col>
                 <el-col :span="5" :offset="0">
-                    <div style="color: #ccc; font-size: small">
+                    <div style="color: #ccc; font-size: small; line-height: 30px">
                         备注: 一次上传装备数量不能超过50条
                     </div>
                 </el-col>
@@ -2517,20 +2583,21 @@ const getUpdateTimeBgColor = (row: any) => {
                 </el-col>
             </el-row>
 
-            <el-row :gutter="20">
+            <el-row :gutter="20" style="margin-bottom: 10px">
                 <el-col :span="1.5" :offset="0">
-                    <el-button type="primary" @click="">删除</el-button>
+                    <el-button type="primary" @click="handleBatchDel">删除</el-button>
                 </el-col>
             </el-row>
 
             <el-table
                 :data="batchAddData"
-                style="width: auto"
+                row-key="typeId"
-                row-key="maId"
                 show-overflow-tooltip
                 :header-cell-style="{ background: '#00a288', color: '#fff' }"
-                @selection-change=""
+                style="width: 100%"
+                @selection-change="selectionChange"
             >
+                <el-table-column type="selection" width="55" align="center" />
                 <el-table-column label="序号" align="center" width="80px">
                     <template #default="{ row, $index }">
                         {{ $index + 1 }}
@@ -2544,6 +2611,13 @@ const getUpdateTimeBgColor = (row: any) => {
                     :width="column.width"
                     align="center"
                 ></el-table-column>
+                <!-- 操作 -->
+                <el-table-column label="操作" align="center" width="180px">
+                    <template #default="{ row, $index }">
+                        <el-button type="primary" @click="handleDel($index)">删除</el-button>
+                        <el-button type="primary" @click="equipmentDeployment(row)">调整</el-button>
+                    </template>
+                </el-table-column>
             </el-table>
         </el-dialog>
     </div>