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

一,模板部分

html 复制代码
<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逻辑部分

javascript 复制代码
<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>
相关推荐
Jedi Hongbin1 天前
Three.js shader内置矩阵注入
前端·javascript·three.js
超人不会飛1 天前
vue3 markdown组件|大模型应用专用
前端·vue.js·人工智能
VillenK1 天前
用插件的方式注入Vue组件
前端·vue.js
掘金安东尼1 天前
Node.js 如何在 2025 年挤压 I/O 性能
前端·javascript·github
得物技术1 天前
前端日志回捞系统的性能优化实践|得物技术
前端·javascript·性能优化
ZKshun1 天前
[ 前端JavaScript的事件流机制 ] - 事件捕获、冒泡及委托原理
javascript
等什么君!1 天前
如何 正确使用 nrm 工具 管理镜像源
vue.js
warder1 天前
字典状态管理:基于 Vue3 + Pinia 的工程化实践
vue.js
薛定谔的算法1 天前
JavaScript栈的实现与应用:从基础到实战
前端·javascript·算法
魔云连洲1 天前
React中的合成事件
前端·javascript·react.js