vue3组合式api单文件组件写法

一，模板部分 

<template><div class="device container"><breadcrumb :list="['首页', '应急处置']" /><div class="search_box"><div class="left"><span style="margin-right: 15px" @click="searchDevice">查询</span><el-date-picker v-model="time" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" /><el-button size="large" type="primary" class="searchButton" style="margin-top: -4px" @click="searchDevice">查询</el-button></div></div><!-- 表格 --><el-table :data="deviceList"><el-table-column prop="userName" label="处置人" align="center" /><el-table-column prop="commandTime" label="处置时间" align="center" /><el-table-column prop="method" label="处置指令" align="center" :formatter="methodFormatter" /><el-table-column prop="execList[0].status" label="指令状态" align="center" :formatter="exceFormatter" /><!-- 原因 --><el-table-column prop="reason" label="原因" align="center" /><el-table-column prop="param.vins[0]" label="车架号" align="center" width="180" /><el-table-column prop="execList[0].targetOrgName" label="所属企业" align="center" /><!-- 操作列 --><el-table-column label="操作" align="center"><template #default="scope"><el-button type="primary" @click="getDeta(scope.row.id)">查看</el-button></template></el-table-column></el-table><!-- 分页 --><div class="page"><el-pagination :current-page="queryInfo.pageNo" :page-size="queryInfo.pageSize" :total="total" backgroundprev-text="上一页" next-text="下一页" layout="sizes,prev, pager, next, jumper" :page-sizes="[10, 20, 50]"@current-change="handleCurrentChange" @size-change="handleSizeChange" /></div><!-- 详情信息对话框 --><el-dialog v-model="detaDialogVisible" title="应急处置详情" width="70%" :destroy-on-close="true" @close="detaClose"><el-form :model="deta"><el-row><el-col :span="12"><el-form-item label="处置人"><el-input v-model="deta.userName" /></el-form-item></el-col><el-col :span="12"><el-form-item label="处置时间"><el-input v-model="deta.commandTime" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="处置指令"><el-input v-model="deta.method" /></el-form-item></el-col><el-col :span="12"><el-form-item label="指令状态"><el-input v-model="status" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="原因"><el-input v-model="deta.reason" type="textarea" :row="2" /></el-form-item></el-col><el-col :span="12"><el-form-item label="内容"><el-input v-model="deta.content" type="textarea" :row="2" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="车架号"><el-select v-model="detaParam"><el-option v-for="item in deta.param.vins" :key="item" :label="item" :value="item" /></el-select></el-form-item></el-col><el-col :span="12"><el-form-item label="所属机构"><el-input v-model="targetOrgName" /></el-form-item></el-col></el-row></el-form><el-table :data="detaTable"><el-table-column prop="reqTime" label="请求时间" align="center" /><el-table-column prop="respTime" label="响应时间" align="center" /><el-table-column prop="status" label="状态" align="center" width="80" /><el-table-column prop="message" label="消息" align="center" /><el-table-column prop="data" label="数据" align="center" /></el-table><template #footer><span class="dialog-footer"><el-button @click="detaDialogVisible = false">取 消</el-button><el-button type="primary" @click="detaDialogVisible = false">确定</el-button></span></template></el-dialog></div>
</template>

二，js逻辑部分 

<script setup>
import { ref, reactive } from "vue";
import { queryCommand, getCommand } from "@/api/emergencyResponse";
const detaDialogVisible = ref(false)
const deviceList = ref([])
const total = ref(0)
const status = ref(null)
const detaParam = ref(null)
const targetOrgName = ref(null)
const time = ref([])
const detaTable = ref([])
const deta = ref({param: {}
})
const queryInfo = reactive({pageNo: 1,pageSize: 10,startTime: '',endTime: '',kind: 'Emergency',
})
const queryDevice = async () => {const res = await queryCommand(queryInfo)if (res.code == 0) {deviceList.value = res.datatotal.value = res.totalElements}
}
queryDevice()
const searchDevice = async () => {queryInfo.startTime = ""queryInfo.endTime = ""if (time.value != null) {queryInfo.startTime = time.value[0]queryInfo.endTime = time.value[1]}const res = await queryCommand(queryInfo)if (res.code == 0) {deviceList.value = res.datatotal.value = res.totalElements}
}
const getDeta = async (vin) => {detaDialogVisible.value = trueconst res = await getCommand(vin)deta.value = res.datastatus.value = deta.value.execList[0].statusdetaTable.value = deta.value.execList[0].execLogsdetaParam.value = deta.value.param.vins[0]targetOrgName.value = deta.value.execList[0].targetOrgName
}
</script>