rcs-submit/src/views/DeviceView.vue

<template>
    <PagingTable url="/device" :where="where" ref="table">
        <template #filter>
            <ElButton :icon="Refresh" @click="table.refresh()"></ElButton>
            <ElSelect v-model="online" placeholder="在线状态" clearable @change="updateWhereAndRefresh">
                <ElOption v-for="status in onlineStatus" :key="status.id" :label="status.label" :value="status.id" />
            </ElSelect>
            <ElSelect v-model="canSend" placeholder="发送状态" clearable @change="updateWhereAndRefresh">
                <ElOption v-for="status in canSendStatus" :key="status.id" :label="status.label" :value="status.id" />
            </ElSelect>
            <ElSelect v-model="busy" placeholder="忙碌状态" clearable @change="updateWhereAndRefresh">
                <ElOption v-for="status in busyStatus" :key="status.id" :label="status.label" :value="status.id" />
            </ElSelect>
        </template>
        <ElTableColumn prop="id" label="#" width="200" />
        <ElTableColumn prop="model" label="型号" />
        <ElTableColumn prop="name" label="编号" />
        <ElTableColumn prop="online" label="在线" align="center">
            <template #default="{ row }">
                <ElTag type="success" v-if="row.online">在线</ElTag>
                <ElTag type="info" v-else>离线</ElTag>
            </template>
        </ElTableColumn>
        <ElTableColumn prop="canSend" label="可以发送" align="center">
            <template #default="{ row }">
                <ElTag type="success" v-if="row.canSend">是</ElTag>
                <ElTag type="info" v-else>否</ElTag>
            </template>
        </ElTableColumn>
        <ElTableColumn prop="busy" label="忙碌" align="center">
            <template #default="{ row }">
                <ElTag type="success" v-if="row.busy">忙碌</ElTag>
                <ElTag type="info" v-else>空闲</ElTag>
            </template>
        </ElTableColumn>
        <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
        <ElTableColumn label="操作" align="center" width="100">
            <template #default="{ row }">
                <ElButton type="danger" size="small" @click="del(row)">删除</ElButton>
            </template>
        </ElTableColumn>
    </PagingTable>
</template>
<script setup>
import { ref } from 'vue'
import PagingTable from '@/components/PagingTable.vue'
import { useTimeFormatter } from '@/utils/formatter'
import { Refresh } from '@vicons/tabler'
import { setupEditDialog } from '@/utils/editDialog'
import { ElMessageBox, ElMessage } from 'element-plus'
import { http } from '@/plugins/http'

const where = ref({})
const timeFormatter = useTimeFormatter()
const table = ref(null)
const model = ref({})
const rules = {
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    listId: [{ required: true, message: '请选择料子列表', trigger: 'blur' }]
}
const { showEditDialog, onEdit } = setupEditDialog(model)
const online = ref('')
const onlineStatus = [
    {
        id: '1',
        label: '在线'
    },
    {
        id: '0',
        label: '离线'
    }
]
const canSend = ref('')
const canSendStatus = [
    {
        id: '1',
        label: '是'
    },
    {
        id: '0',
        label: '否'
    }
]
const busy = ref('')
const busyStatus = [
    {
        id: '1',
        label: '忙碌'
    },
    {
        id: '0',
        label: '空闲'
    }
]

function updateWhereAndRefresh() {
    where.value = {}
    if (online.value) {
        where.value.online = online.value
    }
    if (canSend.value) {
        where.value.canSend = canSend.value
    }
    if (busy.value) {
        where.value.busy = busy.value
    }
}

async function del(row) {
    await ElMessageBox.confirm('确定删除吗？', '提示', {
        type: 'warning'
    })
    try {
        await http.delete(`/device/${row.id}`)
        table.value.refresh()
    } catch (e) {
        console.error(e)
        ElMessage.error(e.message || '删除失败')
    }
}
</script>