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逻辑部分 文章来源地址https://www.toymoban.com/news/detail-639629.html

<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>

到了这里，关于vue3组合式api单文件组件写法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！