吉安感知网项目-前端
罗广辉
2026-01-07 4818e3c2297adce040b7c22e774d8fa5a9fdb5dd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<template>
    <basic-container>
        <el-form ref="queryParamsRef" :inline="true" :model="searchParams">
            <el-form-item label="名称" prop="deviceName">
                <el-input v-model="searchParams.deviceName" />
            </el-form-item>
            <el-form-item label="类型" prop="deviceType">
                <el-input v-model="searchParams.deviceType" />
            </el-form-item>
            <el-form-item>
                <el-button @click="resetForm">重置</el-button>
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
        </el-form>
        <div>
            <el-button type="primary" @click="handleAdd">新增</el-button>
        </div>
        <el-table :data="list">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="deviceName" label="名称" />
            <el-table-column prop="deviceType" label="类型" />
            <el-table-column prop="deviceModel" label="设备型号" />
            <el-table-column prop="deviceSpecification" label="规格" />
            <el-table-column label="操作">
                <template v-slot="{ row }">
                    <el-link @click="handleView(row)" type="primary">查看</el-link>
                    <el-link @click="handleEdit(row)" type="warning">编辑</el-link>
                    <el-link @click="handleDelete(row)" type="danger">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
 
        <div>
            <el-pagination
                v-model:current-page="searchParams.current"
                v-model:page-size="searchParams.size"
                :total="total"
                @change="getList"
            />
        </div>
 
        <DeviceStockFormDialog ref="dialogRef" @success="getList" />
    </basic-container>
</template>
 
<script setup>
import { onMounted, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { fwDeviceListApi, fwDeviceRemoveApi } from '@/api/fwDevice'
import DeviceStockFormDialog from './DeviceStockFormDialog.vue'
 
const initSearchParams = () => ({
    deviceName: '',
    deviceType: '',
    current: 1,
    size: 10,
})
const searchParams = ref(initSearchParams())
const total = ref(0)
const list = ref([])
const queryParamsRef = ref(null)
 
const dialogRef = ref(null)
 
// 获取列表
async function getList() {
    const res = await fwDeviceListApi(searchParams.value)
    list.value = res?.data?.data?.records ?? []
    total.value = res?.data?.data?.total ?? 0
}
 
// 查询
function handleSearch() {
    searchParams.value.current = 1
    getList()
}
 
// 重置查询
function resetForm() {
    queryParamsRef.value?.resetFields()
    searchParams.value.current = 1
    getList()
}
 
// 查看
function handleView(row) {
    dialogRef.value?.open({ mode: 'view', row: { ...row } })
}
 
// 编辑
function handleEdit(row) {
    dialogRef.value?.open({ mode: 'edit', row: { ...row } })
}
 
// 删除
async function handleDelete(row) {
    await ElMessageBox.confirm('确认删除该设备吗?', '提示', { type: 'warning' })
    await fwDeviceRemoveApi({ ids: [row.id] })
    getList()
}
 
// 新增
function handleAdd() {
    dialogRef.value?.open({ mode: 'add' })
}
 
onMounted(() => {
    getList()
})
</script>
<style scoped lang="scss"></style>