Vue 3 表单与后端数据交互之查询并回显数据步骤流程

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="70%" max-height="30%">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-row>
        <!-- 输入箱号 -->
        <el-col :span="4">
          <el-form-item label="集装箱箱号" prop="containerNumber">
            <el-input v-model="formData.containerNumber" placeholder="请输入箱号" clearable />
          </el-form-item>
        </el-col>
        <!-- 输入箱属 -->
        <el-col :span="4">
          <el-form-item label="箱属" prop="containerOwner">
            <el-input v-model="formData.containerOwner" placeholder="箱属" clearable />
          </el-form-item>
        </el-col>
        <!-- 查询按钮 -->
        <el-col :span="4">
          <el-button type="primary" @click="searchBoxData">查询箱号</el-button>
        </el-col>
      </el-row>
      <!-- 其他表单项 -->
    </el-form>
  </Dialog>
</template>
<script setup>
import { ref } from 'vue'
import GoodsLogApi from '@/api/GoodsLogApi'
const formData = ref({
  containerNumber: '',
  containerOwner: '',
  // 其他字段
})
const formRules = ref({
  // 表单验证规则
})
const formLoading = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('')
// 打开弹窗方法
const open = async (type, id = null) => {
  dialogVisible.value = true
  dialogTitle.value = type === 'create' ? '创建' : '编辑'
  resetForm()
  if (id) {
    formLoading.value = true
    try {
      formData.value = await GoodsLogApi.getGoodsLog(id)
    } finally {
      formLoading.value = false
    }
  }
}
// 重置表单数据
const resetForm = () => {
  formData.value = {
    containerNumber: '',
    containerOwner: '',
    // 其他字段
  }
}
// 查询箱号数据
const searchBoxData = async () => {
  if (!formData.value.containerNumber) {
    return this.$message.warning('请输入箱号')
  }
  formLoading.value = true
  try {
    // 向后端请求箱号数据
    const boxData = await GoodsLogApi.queryBoxData(formData.value.containerNumber)
    if (boxData) {
      // 将查询结果填充到表单
      formData.value.containerOwner = boxData.containerOwner || ''  // 例如填充箱属
      // 根据返回的其他字段继续填充表单数据
      formData.value.containerNumber = boxData.cntr || ''  // 例如填充箱号
    } else {
      this.$message.warning('未找到相关箱号数据')
    }
  } catch (error) {
    this.$message.error('查询失败')
  } finally {
    formLoading.value = false
  }
}
</script>

// api/GoodsLogApi.js
import request from '@/utils/request'
export default {
  // 根据箱号查询数据
  queryBoxData(containerNumber) {
    return request({
      url: `/api/goods-log/query-box`,
      method: 'get',
      params: { containerNumber }
    })
  }
}

@RestController
@RequestMapping("/api/goods-log")
public class GoodsLogController {
    @Autowired
    private GoodsLogService goodsLogService;
    // 查询箱号数据
    @GetMapping("/query-box")
    public ResponseEntity<Map<String, Object>> queryBoxData(@RequestParam String containerNumber) {
        Map<String, Object> boxData = goodsLogService.queryBoxData(containerNumber);
        if (boxData == null) {
            return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);  // 如果未找到数据
        }
        return ResponseEntity.ok(boxData);  // 返回查询结果
    }
}

@Service
public class GoodsLogService {
    @Autowired
    private JdbcTemplate jdbcTemplate;  // 使用 JdbcTemplate 执行 SQL 查询
    public Map<String, Object> queryBoxData(String containerNumber) {
        String sql = "SELECT * " +
                     "FROM xxx WHERE CNTR = ?";
        // 执行查询并返回结果
        List<Map<String, Object>> result = jdbcTemplate.queryForList(sql, containerNumber);
        // 如果找到数据，返回第一个结果
        if (result != null && !result.isEmpty()) {
            return result.get(0);
        }
        return null;  // 如果没有找到数据，返回 null
    }
}