<add>[important]添加扫码查询的功能
This commit is contained in:
parent
34a35fab8c
commit
ab961f2e08
8
src/axios/scan.js
Normal file
8
src/axios/scan.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import axios from '@/axios/base/base.axios';
|
||||
|
||||
export default {
|
||||
// 分页查询扫码记录
|
||||
queryScanListWithPage(params) {
|
||||
return axios.post('/api/wcs/scan/queryScanRecordWithPage', params);
|
||||
},
|
||||
}
|
||||
|
|
@ -29,6 +29,7 @@ const routes = [
|
|||
{ path: 'apiRequest', name: 'apiRequest', component:() => import('../view/tab/dataQuery/ApiRequest.vue') }, // 接口请求记录
|
||||
{ path: 'errMsg', name: 'errMsg', component:() => import('../view/tab/dataQuery/ErrMsg.vue') }, // 设备异常信息
|
||||
{ path: 'errMsgBase', name: 'errMsgBase', component:() => import('../view/tab/dataQuery/ErrMsgBase.vue') }, // 设备异常信息基础资料
|
||||
{ path: 'scanRecord', name: 'scanRecord', component:() => import('../view/tab/dataQuery/ScanRecord.vue') }, // 扫描码查询
|
||||
// 系统管理
|
||||
{ path: 'settingsData', name: 'settingsData', component:() => import('../view/tab/systemManage/SettingData.vue') }, // 系统设置
|
||||
// 工具箱
|
||||
|
|
|
|||
96
src/view/component/scanRecord/RecordList.vue
Normal file
96
src/view/component/scanRecord/RecordList.vue
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
<el-row style="width: calc(100vw - 270px)">
|
||||
<el-row style="width: 100%">
|
||||
<h5>扫码记录表</h5>
|
||||
</el-row>
|
||||
<el-table :data="modelValue" border stripe max-height="calc(100vh - 450px)">
|
||||
<el-table-column fixed prop="recordId" label="记录号" width="200px" align="center"/>
|
||||
<el-table-column prop="scanId" label="扫码器编号" width="200px" align="center"/>
|
||||
<el-table-column prop="area" label="区域" width="150px" show-overflow-tooltip align="center"/>
|
||||
<el-table-column prop="code" label="条码" align="center"/>
|
||||
<el-table-column prop="tag" label="标记" width="100px" align="center"/>
|
||||
<el-table-column prop="scanTime" label="扫码时间" :formatter="formatterTime" width="200px" align="center"/>
|
||||
<el-table-column prop="remark" label="备注信息" min-width="100px"/>
|
||||
</el-table>
|
||||
<el-row style="margin-top: 15px">
|
||||
<el-pagination
|
||||
small
|
||||
v-if="searchParams.page.totalRow > 0"
|
||||
background
|
||||
v-model:page-size="searchParams.page.pageSize"
|
||||
v-model:current-page="searchParams.page.pageIndex"
|
||||
:page-sizes="[20, 50, 100, 200, 300, 500]"
|
||||
layout="prev, pager, next, jumper, sizes, total"
|
||||
:total="searchParams.page.totalRow"
|
||||
@size-change="searchData"
|
||||
@current-change="searchData"
|
||||
/>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
|
||||
import formatterTime from "@/plugins/formatter/formatter.time";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['searchParams', 'modelValue'],
|
||||
emits: ['update:searchParams', 'update:modelValue', 'pageChange'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
formatterTime: formatterTime.formatCellValueTime
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {
|
||||
},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
searchData(){
|
||||
this.$emit('pageChange', this.searchParams)
|
||||
},
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
</style>
|
||||
121
src/view/component/scanRecord/SearchForm.vue
Normal file
121
src/view/component/scanRecord/SearchForm.vue
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<!-- -->
|
||||
<template>
|
||||
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
|
||||
<el-row>
|
||||
<el-form :model="searchParams" label-width="120" label-position="left">
|
||||
<el-form-item label="查询关键字：">
|
||||
<el-input style="min-width: 300px" placeholder="输入 扫码器编号/区域/条码/标记 查询..." v-model="searchParams.searchStr" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="扫码时间：">
|
||||
<el-date-picker
|
||||
v-model="searchParams.timeRange"
|
||||
type="datetimerange"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="截止时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button type="primary" @click="searchBtn">查询/搜索</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import scanApi from "@/axios/scan"
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['searchParams', 'modelValue'],
|
||||
emits: ['update:searchParams', 'update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
searchBtn() {
|
||||
this.searchParams.page.pageIndex = 1;
|
||||
this.searchParams.page.pageSize = 50;
|
||||
this.$emit('update:searchParams', this.searchParams);
|
||||
this.searchData(this.searchParams)
|
||||
},
|
||||
searchData(searchParams) {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
this.$emit('update:modelValue', []);
|
||||
scanApi.queryScanListWithPage(searchParams).then((response) => {
|
||||
const responseData = response.data;
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '查询成功',
|
||||
type: 'success',
|
||||
})
|
||||
// 正确请求，展示数据
|
||||
this.searchParams.page.totalRow = parseInt(responseData["tag"]);
|
||||
this.$emit('update:searchParams', this.searchParams);
|
||||
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]));
|
||||
} else {
|
||||
ElMessage({
|
||||
message:'服务器返回失败：' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
}).catch((ex) => {
|
||||
ElMessage({
|
||||
message: '请求服务器失败：' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
}).finally(() => {
|
||||
loading.close();
|
||||
})
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
</style>
|
||||
87
src/view/tab/dataQuery/ScanRecord.vue
Normal file
87
src/view/tab/dataQuery/ScanRecord.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<SearchForm style="width: 100%" ref="searchForm" v-model:search-params="searchParams" v-model="recordList"/>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<RecordList v-model:search-params="searchParams" v-model="recordList" @page-change="pageChange"/>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import SearchForm from "@/view/component/scanRecord/SearchForm.vue";
|
||||
import RecordList from "@/view/component/scanRecord/RecordList.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {RecordList, SearchForm},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
searchParams: {
|
||||
// 查询关键字
|
||||
searchStr: '',
|
||||
// 起止时间
|
||||
timeRange: [],
|
||||
// 分页控件信息
|
||||
page: {
|
||||
// 每页显示的行数
|
||||
pageSize: 20,
|
||||
// 当前页码
|
||||
pageIndex: 1,
|
||||
// 总行数
|
||||
totalRow: 0
|
||||
},
|
||||
},
|
||||
recordList: []
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
pageChange() {
|
||||
this.$refs.searchForm.searchData(this.searchParams)
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user