Skip to content

P
pmk-channel-vue
Commit cf5dedb3 by huangqy
Options

瞎写了百分之80%

parent f15f0cb5
正在显示 包含 990 行增加 和 16 行删除
index.html
......@@ -9,7 +9,7 @@
<script>
window._CONFIG = {};
window._CONFIG['publicURL'] = 'http://192.168.3.130:10030';
window._CONFIG['socketURL'] = 'ws://192.168.3.130:10030/notice'
window._CONFIG['wsURL'] = 'ws://192.168.3.130:10030/notice/'
</script>
<body>
<div id="app"></div>
......
package.json
......@@ -18,6 +18,7 @@
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"@vue/test-utils": "^2.2.6",
"less": "^4.1.2",
"jsdom": "^20.0.3",
"vite": "^4.0.0",
"vitest": "^0.25.6"
......
src/App.vue
<script setup>
import { ElConfigProvider } from 'element-plus'
import { RouterView } from 'vue-router'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script>
<template>
<el-config-provider>
<el-config-provider :locale="zhCn">
<RouterView />
</el-config-provider>
</template>
src/api/manage.js
......@@ -4,7 +4,7 @@ import { axios } from '@/utils/request'
export function postAction(url,parameter) {
return axios({
url: url,
method:'post' ,
method:'post',
data: parameter
})
}
......
src/assets/main.css
......@@ -5,3 +5,4 @@
min-height: 100vh;
font-weight: normal;
}
src/main.js
......@@ -14,5 +14,4 @@ const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(ElementPlus).mount('#app')
src/utils/request.js
......@@ -2,7 +2,7 @@ import axios from 'axios'
import { VueAxios } from './axios'
let apiBaseUrl = window._CONFIG['domianURL'] || '/'
let apiBaseUrl = window._CONFIG['publicURL']
// 创建 axios 实例
const request = axios.create({
// API 请求的默认前缀
......
src/views/HomeView.vue
<template>
<el-tabs :tab-position="tabPosition" type="border-card" :stretch="true" class="menu-tabs">
<el-tabs :tab-position="tabPosition" type="card" :stretch="true" class="menu-tabs">
<el-tab-pane v-for="item in tabList" :key="item.title">
<template #label>
<span class="custom-tabs-label">
......@@ -7,24 +7,32 @@
<span>{{item.title}}</span>
</span>
</template>
<div>内容1</div>
<component :is="item.template"></component>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { defineComponent, ref } from 'vue'
import RFID from './RFID.vue'
import InTask from './InTask.vue'
import OutTask from './OutTask.vue'
import Query from './Query.vue'
import Setting from './Setting.vue'
export default defineComponent({
components: { RFID, InTask, OutTask, Query, Setting },
setup() {
const tabPosition = ref('bottom')
const template = ref('rfid')
return {
tabPosition,
template,
tabList: [
{title: '射频识别', icon: 'iconfont icon-tiaozhishibie'},
{title: '入库作业', icon: 'iconfont icon-rukuguanli-'},
{title: '出库作业', icon: 'iconfont icon-chukuguanli-'},
{title: '手动设置', icon: 'iconfont icon-shezhi'},
{title: '查询', icon: 'iconfont icon-chaxun'},
{title: '射频识别', icon: 'iconfont icon-tiaozhishibie', template: 'RFID'},
{title: '入库作业', icon: 'iconfont icon-rukuguanli-', template: 'InTask'},
{title: '出库作业', icon: 'iconfont icon-chukuguanli-', template: 'OutTask'},
{title: '手动设置', icon: 'iconfont icon-shezhi', template: 'Setting'},
{title: '查询', icon: 'iconfont icon-chaxun', template: 'Query'},
]
}
},
......@@ -33,10 +41,7 @@ export default defineComponent({
<style>
.menu-tabs > .el-tabs__content {
padding: 32px;
height: calc(100vh - 60px);
font-size: 32px;
font-weight: 600;
height: calc(100vh - 71px);
}
.el-tabs {
--el-tabs-header-height: 60px !important;
......
src/views/InTask.vue 0 → 100644
<template>
<el-row :gutter="20">
<el-col :span="16">
<el-card style="height: 45vh;">
<template #header>
<span>计划任务</span>
</template>
<el-table :data="billList" ref="bill" border style="width: 100%;height: 31vh;" highlight-current-row @row-click="billClick">
<el-table-column type="index" label="序号" width="60" align="center"/>
<el-table-column prop="bizBillNo" label="单据号" align="center"/>
<el-table-column prop="billName" label="凭证号" align="center"/>
<el-table-column prop="swOrgName" label="收物单位" align="center"/>
<el-table-column prop="percentage" label="进度" align="center">
<template #default="scope">
{{scope.row.percentage}}%
</template>
</el-table-column>
<el-table-column prop="activeState" label="状态" align="center">
<template #default="scope">
<el-tag size="small" type="success" v-if="scope.row.activeState == 0">空闲</el-tag>
<el-tag size="small" type="warning" v-if="scope.row.activeState == 1">激活中</el-tag>
<el-tag size="small" type="primary" v-if="scope.row.activeState == 2">待上报</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template #default="scope">
<el-button type="success" size="small" @click="activateBill(scope.row)">激活</el-button>
<el-button type="primary" size="small" @click="reportBill(scope.row)">上报</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
style="left: 40%;margin-top: 6px;"
background
@current-change="handleCurrentChange"
:current-page="searchData.pageNo"
:page-size="searchData.pageSize"
layout="total, prev, pager, next"
:total="total"
/>
</el-card>
<el-card style="height: 45vh;margin-top: 20px;">
<template #header>
<span>物资列表</span>
</template>
<el-table :data="goodsList" ref="goods" border style="width: 100%;height: 31vh;" highlight-current-row @row-click="goodsClick">
<el-table-column type="index" label="序号" width="60" align="center"/>
<el-table-column prop="goodsCode" label="品名代码" align="center"/>
<el-table-column prop="goodsName" label="品名" align="center"/>
<el-table-column prop="planAmount" label="计划数量" align="center"/>
<el-table-column prop="realAmount" label="实际数量" align="center"/>
</el-table>
<el-pagination
style="left: 40%;margin-top: 6px;"
background
@current-change="handleCurrentChange"
:current-page="searchData1.pageNo"
:page-size="searchData1.pageSize"
layout="total, prev, pager, next"
:total="total1"
/>
</el-card>
</el-col>
<el-col :span="8">
<el-card style="height: 92vh;">
<template #header>
<span>号型列表</span>
</template>
<el-table :data="modelList" border style="width: 100%;height: 78vh;">
<el-table-column type="index" label="序号" width="60" align="center"/>
<el-table-column prop="modelName" label="号型名称" align="center"/>
<el-table-column prop="planAmount" label="计划数量" align="center"/>
<el-table-column prop="realAmount" label="实际数量" align="center"/>
<el-table-column prop="writeAmount" label="手动修改数量" align="center"/>
</el-table>
<el-pagination
style="left: 36%;margin-top: 6px;"
background
@current-change="handleCurrentChange"
:current-page="searchData2.pageNo"
:page-size="searchData2.pageSize"
layout="total, prev, pager, next"
:total="total2"
/>
</el-card>
</el-col>
</el-row>
</template>
<script>
import { defineComponent, ref, reactive, toRefs, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import { postAction } from '@/api/manage'
export default defineComponent({
setup() {
const billList = ref([])
const goodsList = ref([])
const modelList = ref([])
const selectBill = ref({})
const selectGoods = ref({})
const { proxy } = getCurrentInstance()
const searchData = ref({
pageNo: 1,
pageSize: 10
})
const searchData1 = ref({
pageNo: 1,
pageSize: 10
})
const searchData2 = ref({
pageNo: 1,
pageSize: 10
})
const total = ref(0)
const total1 = ref(0)
const total2 = ref(0)
const state = reactive({
url: {
getBillPage: '/bill/getBillPage',
getGoodsPage: '/bill/getGoodsPage',
getModelPage: '/bill/getModelPage'
},
storeInfo: {},
storeCode: ''
});
function handleCurrentChange (val) {
searchData.value.pageNo = val
loadData()
}
function handleCurrentChange1 (val) {
searchData1.value.pageNo = val
loadGoods()
}
function handleCurrentChange2 (val) {
searchData2.value.pageNo = val
loadModel()
}
const loadData = () => {
if (sessionStorage.getItem('storeInfo')) {
searchData.value.storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode
searchData.value.type = 'IN'
postAction(state.url.getBillPage, searchData.value).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
billList.value = res.data.records
total.value = res.data.totalRows - 0
if (res.data.records.length > 0) {
proxy.$refs.bill.setCurrentRow(billList.value[0])
selectBill.value = res.data.records[0]
loadGoods()
}
})
}
}
function loadGoods() {
searchData1.value.storeCode = searchData.value.storeCode
searchData1.value.bizBillNo = selectBill.value.bizBillNo
postAction(state.url.getGoodsPage, searchData1.value).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
goodsList.value = res.data.records
total1.value = res.data.totalRows - 0
if (res.data.records.length > 0) {
proxy.$refs.goods.setCurrentRow(goodsList.value[0])
selectGoods.value = res.data.records[0]
loadModel()
}
})
}
function loadModel() {
searchData2.value.storeCode = searchData.value.storeCode
searchData2.value.bizBillNo = selectBill.value.bizBillNo
searchData2.value.goodsCode = selectGoods.value.goodsCode
postAction(state.url.getModelPage, searchData2.value).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
modelList.value = res.data.records
total2.value = res.data.totalRows - 0
})
}
function billClick(row) {
selectBill.value = row
loadGoods()
}
function goodsClick(row) {
selectGoods.value = row
loadModel()
}
loadData()
return {
...toRefs(state),
billList,
goodsList,
modelList,
selectBill,
selectGoods,
searchData,
searchData1,
searchData2,
total,
total1,
total2,
handleCurrentChange,
handleCurrentChange1,
handleCurrentChange2,
billClick,
goodsClick
}
},
})
</script>
\ No newline at end of file
src/views/OutTask.vue 0 → 100644
<template>
<el-row :gutter="20">
<el-col :span="16">
<el-card style="height: 45vh;">
<template #header>
<span>计划任务</span>
</template>
<el-table :data="billList" ref="bill" border style="width: 100%;height: 31vh;" highlight-current-row @row-click="billClick">
<el-table-column type="index" label="序号" width="60" align="center"/>
<el-table-column prop="bizBillNo" label="单据号" align="center"/>
<el-table-column prop="billName" label="凭证号" align="center"/>
<el-table-column prop="swOrgName" label="收物单位" align="center"/>
<el-table-column prop="percentage" label="进度" align="center">
<template #default="scope">
{{scope.row.percentage}}%
</template>
</el-table-column>
<el-table-column prop="activeState" label="状态" align="center">
<template #default="scope">
<el-tag size="small" type="success" v-if="scope.row.activeState == 0">空闲</el-tag>
<el-tag size="small" type="warning" v-if="scope.row.activeState == 1">激活中</el-tag>
<el-tag size="small" type="primary" v-if="scope.row.activeState == 2">待上报</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template #default="scope">
<el-button type="success" size="small" @click="activateBill(scope.row)">激活</el-button>
<el-button type="primary" size="small" @click="reportBill(scope.row)">上报</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
style="left: 40%;margin-top: 6px;"
background
@current-change="handleCurrentChange"
:current-page="searchData.pageNo"
:page-size="searchData.pageSize"
layout="total, prev, pager, next"
:total="total"
/>
</el-card>
<el-card style="height: 45vh;margin-top: 20px;">
<template #header>
<span>物资列表</span>
</template>
<el-table :data="goodsList" ref="goods" border style="width: 100%;height: 31vh;" highlight-current-row @row-click="goodsClick">
<el-table-column type="index" label="序号" width="60" align="center"/>
<el-table-column prop="goodsCode" label="品名代码" align="center"/>
<el-table-column prop="goodsName" label="品名" align="center"/>
<el-table-column prop="planAmount" label="计划数量" align="center"/>
<el-table-column prop="realAmount" label="实际数量" align="center"/>
</el-table>
<el-pagination
style="left: 40%;margin-top: 6px;"
background
@current-change="handleCurrentChange"
:current-page="searchData1.pageNo"
:page-size="searchData1.pageSize"
layout="total, prev, pager, next"
:total="total1"
/>
</el-card>
</el-col>
<el-col :span="8">
<el-card style="height: 92vh;">
<template #header>
<span>号型列表</span>
</template>
<el-table :data="modelList" border style="width: 100%;height: 78vh;">
<el-table-column type="index" label="序号" width="60" align="center"/>
<el-table-column prop="modelName" label="号型名称" align="center"/>
<el-table-column prop="planAmount" label="计划数量" align="center"/>
<el-table-column prop="realAmount" label="实际数量" align="center"/>
<el-table-column prop="writeAmount" label="手动修改数量" align="center"/>
</el-table>
<el-pagination
style="left: 36%;margin-top: 6px;"
background
@current-change="handleCurrentChange"
:current-page="searchData2.pageNo"
:page-size="searchData2.pageSize"
layout="total, prev, pager, next"
:total="total2"
/>
</el-card>
</el-col>
</el-row>
</template>
<script>
import { defineComponent, ref, reactive, toRefs, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import { postAction } from '@/api/manage'
export default defineComponent({
setup() {
const billList = ref([])
const goodsList = ref([])
const modelList = ref([])
const selectBill = ref({})
const selectGoods = ref({})
const { proxy } = getCurrentInstance()
const searchData = ref({
pageNo: 1,
pageSize: 10
})
const searchData1 = ref({
pageNo: 1,
pageSize: 10
})
const searchData2 = ref({
pageNo: 1,
pageSize: 10
})
const total = ref(0)
const total1 = ref(0)
const total2 = ref(0)
const state = reactive({
url: {
getBillPage: '/bill/getBillPage',
getGoodsPage: '/bill/getGoodsPage',
getModelPage: '/bill/getModelPage'
},
storeInfo: {},
storeCode: ''
});
function handleCurrentChange (val) {
searchData.value.pageNo = val
loadData()
}
function handleCurrentChange1 (val) {
searchData1.value.pageNo = val
loadGoods()
}
function handleCurrentChange2 (val) {
searchData2.value.pageNo = val
loadModel()
}
const loadData = () => {
if (sessionStorage.getItem('storeInfo')) {
searchData.value.storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode
searchData.value.type = 'OUT'
postAction(state.url.getBillPage, searchData.value).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
billList.value = res.data.records
total.value = res.data.totalRows - 0
if (res.data.records.length > 0) {
proxy.$refs.bill.setCurrentRow(billList.value[0])
selectBill.value = res.data.records[0]
loadGoods()
}
})
}
}
function loadGoods() {
searchData1.value.storeCode = searchData.value.storeCode
searchData1.value.bizBillNo = selectBill.value.bizBillNo
postAction(state.url.getGoodsPage, searchData1.value).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
goodsList.value = res.data.records
total1.value = res.data.totalRows - 0
if (res.data.records.length > 0) {
proxy.$refs.goods.setCurrentRow(goodsList.value[0])
selectGoods.value = res.data.records[0]
loadModel()
}
})
}
function loadModel() {
searchData2.value.storeCode = searchData.value.storeCode
searchData2.value.bizBillNo = selectBill.value.bizBillNo
searchData2.value.goodsCode = selectGoods.value.goodsCode
postAction(state.url.getModelPage, searchData2.value).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
modelList.value = res.data.records
total2.value = res.data.totalRows - 0
})
}
function billClick(row) {
selectBill.value = row
loadGoods()
}
function goodsClick(row) {
selectGoods.value = row
loadModel()
}
loadData()
return {
...toRefs(state),
billList,
goodsList,
modelList,
selectBill,
selectGoods,
searchData,
searchData1,
searchData2,
total,
total1,
total2,
handleCurrentChange,
handleCurrentChange1,
handleCurrentChange2,
billClick,
goodsClick
}
},
})
</script>
\ No newline at end of file
src/views/Query.vue 0 → 100644
<template>
<el-row :gutter="20">
<el-col :span="6">
<el-card>
<el-form label-position="right" size="large" label-width="100px" :model="formData" style="max-width: 460px;height: 88vh;">
<el-form-item label="开始时间">
<el-date-picker v-model="searchData.startTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;"/>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker v-model="searchData.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;"/>
</el-form-item>
<el-form-item label="出入库">
<el-select v-model="searchData.state" placeholder="请选择出入库" style="width: 100%;">
<el-option value="IN" label="入库"></el-option>
<el-option value="OUT" label="出库"></el-option>
</el-select>
</el-form-item>
<el-form-item label="品名">
<el-input v-model="searchData.goodsName" placeholder="请输入品名"/>
</el-form-item>
<el-form-item label="号型">
<el-input v-model="searchData.modelName" placeholder="请输入号型"/>
</el-form-item>
<el-button type="primary" style="width: 100%" @click="loadData">查询</el-button>
</el-form>
</el-card>
</el-col>
<el-col :span="18">
<el-card>
<el-table :data="logList" border style="width: 100%;height: 88vh;">
<el-table-column type="index" label="序号" width="60" align="center"/>
<el-table-column prop="inState" label="出入库" align="center">
<template #default="scope">
{{ scope.row.inState == 'IN' ? '入库' : '出库' }}
</template>
</el-table-column>
<el-table-column prop="inBillNo" label="单号" align="center">
<template #default="scope">
{{ scope.row.inBillNo || scope.row.outBillNo }}
</template>
</el-table-column>
<el-table-column prop="goodsName" label="品名" align="center"/>
<el-table-column prop="modelName" label="号型" align="center"/>
<el-table-column prop="qty" label="数量" align="center"/>
<el-table-column prop="inTime" label="出入库日期" align="center">
<template #default="scope">
{{ scope.row.inTime || scope.row.outTime }}
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</template>
<script>
import { defineComponent, ref, reactive, toRefs, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import { postAction } from '@/api/manage'
export default defineComponent({
setup() {
const logList = ref([])
const formData = ref({
amount: 1
})
const { proxy } = getCurrentInstance()
const searchData = ref({
pageNo: 1,
pageSize: 10,
startTime: parseTime(new Date(new Date().setHours(0, 0, 0, 0))),
endTime: parseTime(new Date())
})
const total = ref(0)
function parseTime(time) {
if (time) {
var date = new Date(time)
var year = date.getFullYear()
/* 在日期格式中，月份是从0开始的，因此要加0
* 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
* */
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
// 拼接
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
} else {
return ''
}
}
const state = reactive({
url: {
getGoodsRecord: '/channel/getGoodsRecord',
getBindPage: '/bind/getBindPage',
getBillPage: '/bill/getBillPage',
getGoodsPage: '/bill/getGoodsPage',
getModelPage: '/bill/getModelPage',
updateBind: '/bind/updateBind'
}
});
function handleCurrentChange (val) {
searchData.value.pageNo = val
loadData()
}
const loadData = () => {
if (sessionStorage.getItem('storeInfo')) {
let config = JSON.parse(sessionStorage.getItem('storeInfo'))
searchData.value.state = 'IN'
searchData.value.storeCode = config.storeCode
postAction('http://' + config.serverIp + ':' + config.serverPort + state.url.getGoodsRecord, searchData.value).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
logList.value = res.data
})
}
}
loadData()
return {
...toRefs(state),
logList,
formData,
searchData,
total,
loadData,
handleCurrentChange
}
},
})
</script>
\ No newline at end of file
src/views/RFID.vue 0 → 100644
<template>
<div>
<el-tabs type="border-card">
<el-tab-pane v-for="item in channelList" :key="item" :label="'通道' + item.stationId">
<el-card>
<template #header>
<div class="card-header">
<span>实时出入库数据</span>
</div>
</template>
<div class="head-container">
<el-button type="primary" class="filter-item" style="float: right" @click="channelSetting">通道配置</el-button>
</div>
<el-table :data="goodsData" border style="width: 100%;" max-height="850">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="name" label="品名" width="180" />
<el-table-column prop="sizename" label="Address" />
</el-table>
</el-card>
</el-tab-pane>
</el-tabs>
<el-dialog v-model="dialogVisible" title="射频识别系统">
<el-tabs type="card">
<el-tab-pane label="系统配置">
<el-card>
<el-form :model="sysForm" :inline="true">
<el-form-item label="仓库编号">
<el-input v-model="sysForm.storeCode" />
</el-form-item>
<el-form-item label="服务器">
<el-input v-model="sysForm.serverIp" />
</el-form-item>
<el-form-item label="端口">
<el-input v-model="sysForm.serverPort" />
</el-form-item>
<el-form-item label="是否隐藏">
<el-checkbox v-model="sysForm.isHide" />
</el-form-item>
<el-form-item>
<el-button type="success" @click="getConfig">读取</el-button>
<el-button type="primary" @click="saveConfig">保存</el-button>
</el-form-item>
</el-form>
</el-card>
</el-tab-pane>
<el-tab-pane label="通道配置">
</el-tab-pane>
</el-tabs>
</el-dialog>
</div>
</template>
<script>
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import { postAction } from '@/api/manage'
export default defineComponent({
setup() {
const channelList = ref([]);
const goodsData = ref([])
const sysForm = ref({})
const dialogVisible = ref(false)
const state = reactive({
url: {
getConfig: '/config/getConfig',
getDevice: '/device/getDevice',
updateConfig: '/config/updateConfig'
},
storeInfo: {},
storeCode: '',
lockReconnect: false
});
// websocket开始
let websock = null
function initWebSocket () {
websock = new WebSocket(window._CONFIG['wsURL'] + JSON.parse(sessionStorage.getItem('storeInfo')).storeCode);
websock.onopen = websocketOnopen;
websock.onerror = websocketOnerror;
websock.onmessage = websocketOnmessage;
websock.onclose = websocketClose;
}
// Websoket连接成功事件
const websocketOnopen = (res) => {
console.log("WebSocket连接成功");
};
// Websoket接收消息事件
const websocketOnmessage = (res) => {
console.log(res.data);
};
// Websoket连接错误事件
const websocketOnerror = (res) => {
console.log("WebSocket连接错误");
};
// Websoket断开事件
const websocketClose = (res) => {
console.log("WebSocket断开连接");
reconnect()
};
function reconnect() {
if(state.lockReconnect) return;
state.lockReconnect = true;
//没连接上会一直重连，设置延迟避免请求过多
setTimeout(function () {
console.log("尝试重连...");
initWebSocket();
state.lockReconnect = false;
}, 5000);
}
const loadData = () => {
if (sessionStorage.getItem('storeInfo')) {
postAction(state.url.getDevice, {storeCode: JSON.parse(sessionStorage.getItem('storeInfo')).storeCode}).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
channelList.value = res.data
initWebSocket()
})
} else {
postAction(state.url.getConfig, {}).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
state.storeInfo = res.data[0]
sessionStorage.setItem('storeInfo', JSON.stringify(state.storeInfo))
})
}
}
function getConfig() {
postAction(state.url.getConfig, {}).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
sysForm.value = {
id: res.data[0].id,
storeCode: res.data[0].storeCode,
serverIp: res.data[0].serverIp,
serverPort: res.data[0].serverPort
}
})
}
function saveConfig() {
postAction(state.url.updateConfig, sysForm.value).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
ElMessage.success(res.message)
sessionStorage.setItem('storeInfo', JSON.stringify(sysForm.value))
})
}
function channelSetting() {
dialogVisible.value = true
}
loadData()
return {
...toRefs(state),
channelList,
dialogVisible,
goodsData,
sysForm,
loadData,
channelSetting,
getConfig,
saveConfig
}
},
})
</script>
<style lang="less">
.el-tabs--border-card >.el-tabs__content {
padding: 0px !important;
}
.head-container {
padding-bottom: 10px;
.filter-item {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
margin-left: 6px;
}
}
</style>
\ No newline at end of file
src/views/Setting.vue 0 → 100644
<template>
<el-row :gutter="20">
<el-col :span="6">
<el-card>
<el-form label-position="right" size="large" label-width="100px" :model="formData" style="max-width: 460px;height: 88vh;">
<el-form-item label="通道">
<el-select v-model="formData.stationId" style="width: 100%;" filterable placeholder="请选择通道">
<el-option v-for="item in bindList" :key="item.stationId" :label="item.stationId" :value="item.stationId"/>
</el-select>
</el-form-item>
<el-form-item label="单号">
<el-select v-model="formData.billNo" style="width: 100%;" filterable clearable placeholder="请选择单号" @change="changeBill">
<el-option v-for="item in billList" :key="item.billNo" :label="item.billName" :value="item.billNo"/>
</el-select>
</el-form-item>
<el-form-item label="品名">
<el-select v-model="formData.goodsCode" style="width: 100%;" filterable clearable placeholder="请选择品名" @change="changeGoods">
<el-option v-for="item in goodsList" :key="item.goodsCode" :label="item.goodsName" :value="item.goodsCode"/>
</el-select>
</el-form-item>
<el-form-item label="号型">
<el-select v-model="formData.modelCode" style="width: 100%;" filterable clearable placeholder="请选择号型" @change="changeModel">
<el-option v-for="item in modelList" :key="item.modelCode" :label="item.modelName" :value="item.modelCode"/>
</el-select>
</el-form-item>
<el-form-item label="单包数量">
<el-input-number v-model="formData.amount" :min="0" :precision="0" style="width: 100%;"/>
</el-form-item>
<div style="text-align: center;">
<el-button type="success" @click="automatic">自动</el-button>
<el-button type="primary" @click="manual">手动</el-button>
</div>
</el-form>
</el-card>
</el-col>
<el-col :span="18">
<el-card>
<el-table :data="bindList" border style="width: 100%;height: 88vh;">
<el-table-column type="index" label="序号" width="60" align="center"/>
<el-table-column prop="stationId" label="通道号" align="center"/>
<el-table-column prop="state" label="状态" align="center">
<template #default="scope">
{{scope.row.state === 0 ? '自动' : scope.row.state === 1 ? '手动' : ''}}
</template>
</el-table-column>
<el-table-column prop="billName" label="单号" align="center"/>
<el-table-column prop="goodsName" label="品名" align="center"/>
<el-table-column prop="modelName" label="号型" align="center"/>
<el-table-column prop="amount" label="数量" align="center"/>
</el-table>
</el-card>
</el-col>
</el-row>
</template>
<script>
import { defineComponent, ref, reactive, toRefs, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import { postAction } from '@/api/manage'
export default defineComponent({
setup() {
const bindList = ref([])
const channelList = ref([])
const billList = ref([])
const goodsList = ref([])
const modelList = ref([])
const formData = ref({
amount: 1
})
const { proxy } = getCurrentInstance()
const searchData = ref({
pageNo: 1,
pageSize: 10
})
const total = ref(0)
const state = reactive({
url: {
getBindPage: '/bind/getBindPage',
getBillPage: '/bill/getBillPage',
getGoodsPage: '/bill/getGoodsPage',
getModelPage: '/bill/getModelPage',
updateBind: '/bind/updateBind'
}
});
function handleCurrentChange (val) {
searchData.value.pageNo = val
loadData()
}
const loadData = () => {
if (sessionStorage.getItem('storeInfo')) {
searchData.value.storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode
postAction(state.url.getBindPage, searchData.value).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
bindList.value = res.data.records
total.value = res.data.totalRows - 0
if (res.data.records.length > 0) {
formData.value.stationId = res.data.records[0].stationId
formData.value.id = res.data.records[0].id
}
})
}
}
const loadSelect = () => {
postAction(state.url.getBillPage, {pageNo: 1, pageSize: 50, type: 'IN', storeCode: JSON.parse(sessionStorage.getItem('storeInfo')).storeCode}).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
billList.value = res.data.records
})
}
function changeBill(value) {
goodsList.value = []
formData.value.goodsCode = ''
modelList.value = []
formData.value.modelCode = ''
if (value) {
formData.value.id = bindList.value.find(i => i.stationId == formData.value.stationId).id
formData.value.bizBillNo = billList.value.find(i => i.billNo == formData.value.billNo).bizBillNo
formData.value.billName = billList.value.find(i => i.billNo == formData.value.billNo).billName
postAction(state.url.getGoodsPage, {pageNo: 1, pageSize: 50, type: 'IN', storeCode: JSON.parse(sessionStorage.getItem('storeInfo')).storeCode, bizBillNo: formData.value.bizBillNo}).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
goodsList.value = res.data.records
})
}
}
function changeGoods(value) {
modelList.value = []
formData.value.modelCode = ''
if (value) {
formData.value.goodsName = goodsList.value.find(i => i.goodsCode == formData.value.goodsCode).goodsName
postAction(state.url.getModelPage, {pageNo: 1, pageSize: 50, type: 'IN', storeCode: JSON.parse(sessionStorage.getItem('storeInfo')).storeCode, bizBillNo: formData.value.bizBillNo, goodsCode: value}).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
modelList.value = res.data.records
})
}
}
function changeModel(value) {
if (value) {
formData.value.modelName = modelList.value.find(i => i.modelCode == formData.value.modelCode).modelName
}
}
function automatic() {
formData.value.billNo = ''
formData.value.goodsCode = ''
formData.value.modelCode = ''
formData.value.state = 0
postAction(state.url.updateBind, formData.value).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
ElMessage.success(res.message)
loadData()
})
}
function manual() {
if (!formData.value.billNo) {
return ElMessage.warning('请选择单号')
}
if (!formData.value.goodsCode) {
return ElMessage.warning('请选择品名')
}
if (!formData.value.modelCode) {
return ElMessage.warning('请选择号型')
}
formData.value.state = 1
postAction(state.url.updateBind, formData.value).then(res => {
if (res.code !== 99200) return ElMessage.error(res.message);
ElMessage.success(res.message)
loadData()
})
}
loadData()
loadSelect()
return {
...toRefs(state),
bindList,
channelList,
billList,
goodsList,
modelList,
formData,
searchData,
total,
handleCurrentChange,
changeBill,
changeGoods,
changeModel,
automatic,
manual
}
},
})
</script>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论