![cover](https://img-blog.csdnimg.cn/img_convert/a7b426f027554ddcbce196b962043da2.png)
vue3组合式api单文件组件写法
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" background
prev-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.data
total.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.data
total.value = res.totalElements
}
}
const getDeta = async (vin) => {
detaDialogVisible.value = true
const res = await getCommand(vin)
deta.value = res.data
status.value = deta.value.execList[0].status
detaTable.value = deta.value.execList[0].execLogs
detaParam.value = deta.value.param.vins[0]
targetOrgName.value = deta.value.execList[0].targetOrgName
}
</script>
更多推荐
所有评论(0)