修改波形

src/views/govern/manage/factory.vue

@@ -60,62 +60,7 @@
                 <el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增设备</el-button>
             </template>
         </TableHeader>
-        <Table ref="tableRef">
-            <template v-slot:columns>
-                <vxe-column field="name" title="设备名称"></vxe-column>
-                <vxe-column field="devType" title="设备类型">
-                    <template #default="{ row }">
-                        {{
-                            devTypeOptions.filter((item: any) => item.value == row.devType)[0] &&
-                            devTypeOptions.filter((item: any) => item.value == row.devType)[0].label
-                        }}
-                    </template>
-                </vxe-column>
-                <vxe-column field="devModel" title="设备型号">
-                    <template #default="{ row }">
-                        {{
-                            devModelOptions.filter((item: any) => item.value == row.devModel)[0] &&
-                            devModelOptions.filter((item: any) => item.value == row.devModel)[0].label
-                        }}
-                    </template>
-                </vxe-column>
-                <vxe-column field="devAccessMethod" title="通讯协议">
-                    <template #default="{ row }">
-                        {{
-                            row.devAccessMethod === 'MQTT'
-                                ? 'MQTT'
-                                : row.devAccessMethod === 'cloud'
-                                ? 'CLD'
-                                : row.devAccessMethod
-                        }}
-                    </template>
-                </vxe-column>
-                <vxe-column field="createTime" title="录入时间"></vxe-column>
-                <vxe-column field="ndid" title="网络设备ID"></vxe-column>
-                <vxe-column field="status" title="状态">
-                    <template #default="{ row }">
-                        {{ row.status == 1 ? '未注册' : row.status == 2 ? '注册' : '接入' }}
-                    </template>
-                </vxe-column>
-                <vxe-column title="操作" min-width="340">
-                    <template #default="{ row }">
-                        <!-- <div class="table-operation"> -->
-                        <el-button size="small" type="primary" @click="edit(row)" icon="el-icon-Edit">编辑</el-button>
-                        <el-button size="small" type="primary" @click="qrCode(row)" icon="el-icon-Grid">
-                            二维码
-                        </el-button>
-                        <el-button size="small" type="primary" @click="reset(row.ndid)" icon="el-icon-Setting">
-                            出厂恢复
-                        </el-button>
-                        <el-button size="small" type="danger" @click="deletes(row.id)" icon="el-icon-Delete">
-                            删除
-                        </el-button>
-
-                        <!-- </div> -->
-                    </template>
-                </vxe-column>
-            </template>
-        </Table>
+        <Table ref="tableRef"></Table>
 
         <el-dialog
             :title="dialogTitle"
@@ -186,7 +131,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, provide, computed, reactive } from 'vue'
+import { ref, onMounted, provide, computed, reactive, nextTick } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
@@ -227,6 +172,26 @@ const dialogFormVisible = ref(false)
 const dialogTitle = ref('新增设备')
 
 const devModelOptions: any = ref([])
+queryByCode('Device_Type').then(res => {
+    queryCsDictTree(res.data.id).then(res => {
+        devTypeOptions.value = res.data.map((item: any) => {
+            return {
+                value: item.id,
+                label: item.name,
+                ...item
+            }
+        })
+    })
+    queryByid(res.data.id).then(res => {
+        devModelOptions.value = res.data.map((item: any) => {
+            return {
+                value: item.id,
+                label: item.name,
+                ...item
+            }
+        })
+    })
+})
 const devModelOptionsFilter = computed(() => {
     return devModelOptions.value.filter((item: any) => {
         if (tableStore.table.params.devType) {
@@ -249,7 +214,134 @@ const formDevModelOptionsFilter = computed(() => {
 const tableStore = new TableStore({
     url: '/cs-device-boot/EquipmentDelivery/list',
     method: 'POST',
-    column: [],
+    column: [
+        { title: '设备名称', field: 'name' },
+        {
+            title: '设备类型',
+            field: 'devType',
+            formatter: row => {
+                return (
+                    devTypeOptions.value.filter((item: any) => item.value == row.cellValue)[0] &&
+                    devTypeOptions.value.filter((item: any) => item.value == row.cellValue)[0].label
+                )
+            }
+        },
+        {
+            title: '设备型号',
+            field: 'devModel',
+            formatter: row => {
+                return (
+                    devModelOptions.value.filter((item: any) => item.value == row.cellValue)[0] &&
+                    devModelOptions.value.filter((item: any) => item.value == row.cellValue)[0].label
+                )
+            }
+        },
+        {
+            title: '通讯协议',
+            field: 'devAccessMethod',
+            formatter: row => {
+                return row.cellValue === 'MQTT' ? 'MQTT' : row.cellValue === 'cloud' ? 'CLD' : row.cellValue
+            }
+        },
+        { title: '录入时间', field: 'createTime' },
+        { title: '网络设备ID', field: 'ndid' },
+        {
+            title: '状态',
+            field: 'status',
+            formatter: row => {
+                return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
+            }
+        },
+        {
+            title: '操作',
+            align: 'center',
+            width: '340',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    text: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-Edit',
+                    render: 'basicButton',
+
+                    click: async row => {
+                        dialogFormVisible.value = true
+                        dialogTitle.value = '编辑设备'
+                        for (let key in form) {
+                            form[key] = row[key]
+                        }
+                        form.id = row.id
+                    }
+                },
+                {
+                    name: 'edit',
+                    text: '二维码',
+                    type: 'primary',
+                    icon: 'el-icon-Grid',
+                    render: 'basicButton',
+
+                    click: row => {
+                        deivce.value = row
+                        deivce.value.qrPath = localStorage.getItem('STATIC_URL') + deivce.value.qrPath
+                        setTimeout(() => {
+                            html2canvas(document.querySelector('.qrcode-label'), {
+                                useCORS: true
+                            }).then(canvas => {
+                                let url = canvas.toDataURL('image/png')
+                                // 下载图片
+                                let a = document.createElement('a')
+                                let event = new MouseEvent('click')
+                                a.href = url
+                                a.download = row.mac + '.png'
+                                a.dispatchEvent(event)
+                            })
+                        }, 0)
+                    }
+                },
+                {
+                    name: 'edit',
+                    text: '出厂恢复',
+                    type: 'primary',
+                    icon: 'el-icon-Setting',
+                    render: 'basicButton',
+
+                    click: row => {
+                        ElMessageBox.confirm('确定该设备恢复出厂吗?', '提示', {
+                            confirmButtonText: '确认',
+                            cancelButtonText: '取消',
+                            type: 'warning'
+                        }).then(() => {
+                            resetEquipmentDelivery(row.ndid).then(res => {
+                                ElMessage.success('恢复成功!')
+                                tableStore.onTableAction('search', {})
+                            })
+                        })
+                    }
+                },
+                {
+                    name: 'del',
+                    text: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'basicButton',
+
+                    click: row => {
+                        ElMessageBox.confirm('确定删除该设备吗?', '提示', {
+                            confirmButtonText: '确认',
+                            cancelButtonText: '取消',
+                            type: 'warning'
+                        }).then(() => {
+                            deleteEquipmentDelivery(row.id).then(res => {
+                                ElMessage.success('删除成功!')
+                                tableStore.onTableAction('search', {})
+                            })
+                        })
+                    }
+                }
+            ]
+        }
+    ],
     beforeSearchFun: () => {
         for (let key in tableStore.table.params) {
             if (tableStore.table.params[key] === '') {
@@ -259,26 +351,7 @@ const tableStore = new TableStore({
     }
 })
 tableStore.table.params.orderBy = 'desc'
-queryByCode('Device_Type').then(res => {
-    queryCsDictTree(res.data.id).then(res => {
-        devTypeOptions.value = res.data.map((item: any) => {
-            return {
-                value: item.id,
-                label: item.name,
-                ...item
-            }
-        })
-    })
-    queryByid(res.data.id).then(res => {
-        devModelOptions.value = res.data.map((item: any) => {
-            return {
-                value: item.id,
-                label: item.name,
-                ...item
-            }
-        })
-    })
-})
+
 // 设备类型
 const devTypeChange = (e: any) => {
     if (!e) {
@@ -299,7 +372,6 @@ const bulkImport = (e: any) => {
             reader.readAsText(res)
             reader.onload = (e: any) => {
                 let data = JSON.parse(e.target.result)
-                console.log('🚀 ~ batchImportDevice ~ data:', data)
                 if (data.code === 'A0000') {
                     ElMessage.success(data.message)
                     tableStore.onTableAction('search', {})
@@ -325,15 +397,7 @@ const add = () => {
     dialogFormVisible.value = true
     dialogTitle.value = '新增设备'
 }
-// 编辑
-const edit = (row: any) => {
-    dialogFormVisible.value = true
-    dialogTitle.value = '编辑设备'
-    for (let key in form) {
-        form[key] = row[key]
-    }
-    form.id = row.id
-}
+
 // 确认
 const onSubmit = () => {
     ruleFormRef.value.validate((valid: any) => {
@@ -358,54 +422,21 @@ const onSubmit = () => {
 const resetForm = () => {
     ruleFormRef.value.resetFields()
     dialogFormVisible.value = false
-}
-// 二维码
-const qrCode = (item: any) => {
-    deivce.value = item
-    deivce.value.qrPath = localStorage.getItem('STATIC_URL') + deivce.value.qrPath
-    setTimeout(() => {
-        html2canvas(document.querySelector('.qrcode-label'), {
-            useCORS: true
-        }).then(canvas => {
-            let url = canvas.toDataURL('image/png')
-            // 下载图片
-            let a = document.createElement('a')
-            let event = new MouseEvent('click')
-            a.href = url
-            a.download = item.mac + '.png'
-            a.dispatchEvent(event)
-        })
-    }, 0)
-}
-// 出厂设置
-const reset = (id: string) => {
-    ElMessageBox.confirm('确定该设备恢复出厂吗?', '提示', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning'
-    }).then(() => {
-        resetEquipmentDelivery(id).then(res => {
-            ElMessage.success('恢复成功!')
-            tableStore.onTableAction('search', {})
-        })
-    })
-}
-// 删除
-const deletes = (id: string) => {
-    ElMessageBox.confirm('确定删除该设备吗?', '提示', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning'
-    }).then(() => {
-        deleteEquipmentDelivery(id).then(res => {
-            ElMessage.success('删除成功!')
-            tableStore.onTableAction('search', {})
-        })
+    nextTick(() => {
+        // 模拟待编辑数据
+        let user = {
+            cntractNo: '',
+            devAccessMethod: 'mqtt',
+            devModel: '',
+            devType: '',
+            name: '',
+            ndid: ''
+        }
+        Object.assign(form, user)
     })
 }
 
 const formDevTypeChange = (e: any) => {
-    console.log(e)
     if (!e) {
         return
     }
@@ -414,7 +445,9 @@ const formDevTypeChange = (e: any) => {
 provide('tableStore', tableStore)
 
 onMounted(() => {
-    tableStore.index()
+    setTimeout(() => {
+        tableStore.index()
+    }, 100)
 })
 
 const addMenu = () => {}