on-site-robots-screen/src/views/home/components/modal-content/inspection-task.vue

<template>
    <!-- 巡视任务 -->
    <DialogModal
        @onHandleCloseModal="onHandleCloseModal"
        :modalTitle="modalTitle"
        :height="`90vh`"
        :width="`90vw`"
    >
        <!-- 巡视任务-->
        <div class="inspection-task-container" ref="inspectionTaskContainer">
            <n-form
                inline
                ref="formRef"
                size="small"
                label-placement="left"
                style="margin-top: 10px"
            >
                <n-form-item>
                    <n-input placeholder="任务名称" clearable style="width: 240px" />
                </n-form-item>
                <n-button type="info"> 查询</n-button>
                <n-button color="#6E90A9" style="margin-left: 8px" @click="onHandleAdd">
                    新增
                </n-button>
            </n-form>

            <n-data-table :columns="columns" :data="data" />

            <div style="margin-top: 10px; display: flex; justify-content: flex-end">
                <n-pagination
                    :page-count="100"
                    show-size-picker
                    v-model:page="page"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                />
            </div>
        </div>
    </DialogModal>
</template>

<script setup>
import DialogModal from '@/components/DialogModal/index.vue'
import { AddCircleSharp } from '@vicons/ionicons5'
import { NIcon } from 'naive-ui'
import { NButton, NSwitch } from 'naive-ui'
import { ref } from 'vue'

const emits = defineEmits(['onHandleCloseModal', 'onHandleAddInspectionTask'])
const modalTitle = ref('巡视任务') // 弹框标题
const addOrEditVisible = ref(false) // 新增或编辑弹框
const addOrEditTitle = ref('新增巡视任务') // 新增或编辑弹框标题
const page = ref(1)
const pageSize = ref(10)

const btnList = [
    {
        label: '编辑',
        type: 'info',
        btnType: 1,
    },
    {
        label: '立即执行',
        type: 'info',
        btnType: 2,
    },
    {
        label: '下发',
        type: 'info',
        btnType: 3,
    },
    {
        label: '删除',
        type: 'info',
        btnType: 4,
    },
]

const columns = ref([
    {
        title: '任务ID',
        key: 'age',
        align: 'center',
    },
    {
        title: '任务名',
        key: 'tags',
        align: 'center',
    },
    {
        title: '设备名称',
        key: 'age',
        align: 'center',
    },
    {
        title: '地盘名称',
        key: 'age',
        align: 'center',
    },
    {
        title: '任务频次',
        key: 'age',
        align: 'center',
    },
    {
        title: '执行时间',
        key: 'age',
        align: 'center',
    },
    {
        title: '任务状态',
        key: 'age',
        align: 'center',
    },

    {
        title: '启用',
        key: 'age',
        align: 'center',
        render(row) {
            return h(NSwitch, {
                value: row.isEnable,
                onChange: (value) => onHandleSwitch(row, value),
            })
        },
    },
    {
        title: '操作',
        key: 'age',
        align: 'center',
        width: 260,
        render(row) {
            const buttonS = btnList.map((btn) => {
                return h(
                    NButton,
                    {
                        size: 'small',
                        onClick: () => onHandleBtn(row, btn.btnType),
                        type: btn.type,
                        style: {
                            marginRight: '4px',
                        },
                    },
                    { default: () => btn.label },
                )
            })
            return buttonS
        },
    },
])
const data = ref([
    {
        age: '2025-06-01 10:00:00',
        tags: ['nice'],
        isEnable: true,
    },
    {
        age: '2025-06-01 10:00:00',
        tags: ['nice'],
        isEnable: false,
    },
    {
        age: '2025-06-01 10:00:00',
        tags: ['nice'],
        isEnable: false,
    },
])

// 新增按钮
const onHandleAdd = () => {
    console.log('新增')
    // addOrEditVisible.value = true
    // addOrEditTitle.value = '新增巡视任务'
    emits('onHandleAddInspectionTask')
}

// 按钮操作组
const onHandleBtn = (row, type) => {
    console.log(row, type)
    // 1. 编辑 2. 立即执行 3. 下发 4. 删除
    switch (type) {
        case 1:
            onHandleEditTable(row)
            break
        case 2:
            onHandleImmediateExecution(row)
            break
        case 3:
            onHandleSend(row)
            break
        case 4:
            onHandleDelete(row)
            break
    }
}

// 编辑
const onHandleEditTable = (row) => {
    console.log(row)
    addOrEditVisible.value = true
    addOrEditTitle.value = '编辑巡视任务'
}

// 立即执行
const onHandleImmediateExecution = (row) => {
    console.log(row)
}

// 下发
const onHandleSend = (row) => {
    console.log(row)
}

// 删除
const onHandleDelete = (row) => {
    console.log(row)
}

// 关闭弹框外层
const onHandleCloseModal = () => {
    emits('onHandleCloseModal')
}

// 关闭弹框内层
const onHandleCloseModalInner = () => {
    addOrEditVisible.value = false
}

// 启用开关
const onHandleSwitch = (row, value) => {
    console.log(row, value)

    row.isEnable = value
}
</script>

<style lang="scss" scoped>
.plane-map-container {
    width: 100%;
    height: 100%;
}
</style>