根据药品编号,入库时间查询药品vue怎么写
时间: 2024-05-11 09:02:26 浏览: 22
首先,你需要定义一个 API 接口,接口需要传入药品编号和入库时间两个参数,然后后台根据这两个参数查询药品信息并返回给前端。
在 Vue 中,你可以使用 axios 库来发送请求并获取后台返回的数据。以下是一个基本的示例代码:
```html
<template>
<div>
<input v-model="drugId" placeholder="请输入药品编号" />
<input v-model="stockInTime" placeholder="请输入入库时间" />
<button @click="search">查询</button>
<div v-if="showResult">
<p>药品名称:{{ drug.name }}</p>
<p>药品编号:{{ drug.drugId }}</p>
<p>入库时间:{{ drug.stockInTime }}</p>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
drugId: '',
stockInTime: '',
drug: {},
showResult: false,
}
},
methods: {
search() {
axios.get('/api/drug', {
params: {
drugId: this.drugId,
stockInTime: this.stockInTime,
}
})
.then(response => {
this.drug = response.data;
this.showResult = true;
})
.catch(error => {
console.log(error);
});
}
}
}
</script>
```
在上面的代码中,我们定义了两个输入框和一个查询按钮,当用户点击查询按钮时,调用 `search` 方法发送 GET 请求到后台查询药品信息。后台返回数据后,我们将药品信息保存在 `drug` 变量中,并将 `showResult` 设置为 `true`,显示查询结果。
注意,以上代码仅供参考,具体实现需要根据你的后端接口来调整。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)