easydo-aibox/src/views/group/index.vue

<template>
	<el-container class="is-vertical">
        <sc-page-header @add="table_add"></sc-page-header>
        
        <scTable ref="xGridTable" :apiObj="$API.carwash.boxDev" framework="zeroLite" :toolbarConfig="toolbarConfig" :columns="columns" :pagerConfig="pagerConfig">
            <template #action="{ row }">
                <el-button type="primary" link @click="table_camera(row)">
                    <template #icon><sc-iconify icon="material-symbols:speed-camera-outline"></sc-iconify></template>摄像头
                </el-button>
                <el-button type="primary" link @click="table_snap(row)">
                    <template #icon><sc-iconify icon="mingcute:pic-line"></sc-iconify></template>设备抓拍
                </el-button>
                <el-button type="primary" link @click="table_edit(row)">
                    <template #icon><sc-iconify icon="ant-design:edit-outlined"></sc-iconify></template>修改
                </el-button>
                <el-button type="primary" link @click="table_del(row)">
                    <template #icon><sc-iconify icon="ant-design:delete-outlined"></sc-iconify></template>删除
                </el-button>
            </template>
        </scTable>
	</el-container>

    <device-detail v-if="dialog.detail" ref="deviceRef" @success="refreshTable" @closed="dialog.detail = false"></device-detail>
    <camera-detail v-if="dialog.camera" ref="cameraRef" @closed="dialog.camera = false"></camera-detail>
    <snap-detail v-if="dialog.snap" ref="snapRef" @closed="dialog.snap = false"></snap-detail>
</template>

<script setup>
import XEUtils from "xe-utils";
import API from "@/api";
import TOOL from "@/utils/tool";
import { nodeTypeDic } from "@/utils/basicDic";

import deviceDetail from "./detail";
import cameraDetail from "./camera";
import snapDetail from "./snap";

const toolbarConfig = reactive({
    enabled: true,
    print: false
});

const pagerConfig = reactive({
    queryType: "expands"
});

const columns = reactive([
    { type: "seq", width: 60 },
    { type: "html", field: "deviceCode", title: "设备编号", minWidth: 160, sortable: true },
    { type: "html", field: "features.name", title: "设备名称", minWidth: 160, sortable: true },
    { type: "html", field: "deviceType", title: "设备类型", minWidth: 160, sortable: true },
    { type: "html", field: "features.minStagnantTime", title: "冲洗时长", minWidth: 100, sortable: true },
    { type: "html", field: "features.minPictureSaveTime", title: "图片采集间隔", minWidth: 120, sortable: true },
    { type: "html", field: "features.maxWaitingTime", title: "超时等待时间", minWidth: 120, sortable: true },
    { type: "html", field: "CreateTime", title: "创建时间", minWidth: 160, sortable: true, formatter: ({ cellValue, row }) => cellValue || TOOL.dateFormat(row.createTime) },
    { type: "html", field: "UpdateTime", title: "更新时间", minWidth: 160, sortable: true, formatter: ({ cellValue, row }) => cellValue || TOOL.dateFormat(row.updateTime) },
    { title: "操作", fixed: "right", width: 300, align: "center", slots: { default: "action" } }
])

// 显示隐藏 筛选表单
const xGridTable = ref();
const refreshTable = (mode = "add") => {
    xGridTable.value.reloadColumn(columns);
    xGridTable.value.searchData(mode);
}

const deviceRef = ref();
const cameraRef = ref();
const snapRef = ref();
const dialog = reactive({
    detail: false,
    camera: false,
    snap: false
});

const table_add = () => {
    dialog.detail = true;
    nextTick(() => deviceRef.value?.open());
}

const table_edit = row => {
    dialog.detail = true;
    nextTick(() => deviceRef.value?.setData(row));
}

const table_camera = row => {
    dialog.camera = true;
    nextTick(() => cameraRef.value?.open(row));
}

const table_snap = row => {
    dialog.snap = true;
    nextTick(() => snapRef.value?.open(row));
}

const table_del = ({ id }) => {
    ElMessageBox.confirm("是否确认删除该设备?", "删除警告", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        API.carwash.boxDev.child({ expands: { masterId: id } }).then(res => {
            if (res.code == 200) {
                if (!(res.datas || []).length) {
                    API.carwash.boxDev.del([{ id }]).then(res => {
                        if (res.code == 200) {
                            ElMessage.success("操作成功");
                            refreshTable();
                        } else throw res.message;
                    }).catch(error => ElMessage.error(error));
                } else ElMessage.warning("当前设备存在摄像头，请移除后再试");
            } else throw res.message;
        }).catch(error => ElMessage.error(error));
    });
}
</script>