Commit 3f9198d7 by huangqy
parents 9951adb3 07d8aa45
...@@ -63,80 +63,202 @@ ...@@ -63,80 +63,202 @@
</el-card> </el-card>
</el-tab-pane> </el-tab-pane>
<el-tab-pane> <el-tab-pane>
<template #label>
<span class="card-title">通道配置</span>
</template>
<el-card style="height: calc(100vh - 227.75px)"> <el-card style="height: calc(100vh - 227.75px)">
<div class="head-container"> <div class="head-container">
<el-button class="filter-item" type="primary" style="float: right" @click="add">新增</el-button> <el-button class="filter-item" type="primary" style="float: right" @click="add">新增</el-button>
</div> </div>
<el-table :header-cell-style="{backgroundColor: '#f5f7fa',color: '#000',fontSize: '18px',fontWeight: '600'}" :data="channelList" border style="width: 100%;">
<el-table-column prop="stationId" label="通道号" align="center" width="100"/>
<el-table-column label="通道模式" align="center"> <el-divider><span style="font-size: 20px">库房/ip配置</span></el-divider>
<template #default="scope"> <div class="head-container">
{{scope.row.type == 'IN' ? '入库' : '出库' }} <el-button
</template> class="filter-item"
</el-table-column> type="primary"
<el-table-column prop="readerIp" label="读写器" align="center"> style="float: right"
<template #default="scope"> @click="addConfig"
{{scope.row.readerIp + ':' + scope.row.readerPort }} >新增</el-button
</template> >
</el-table-column> </div>
<el-table-column prop="gpioIp" label="GPIO" align="center"> <el-table
<template #default="scope"> :header-cell-style="{
{{scope.row.gpioIp + ':' + scope.row.gpioPort }} backgroundColor: '#f5f7fa',
</template> color: '#000',
</el-table-column> fontSize: '18px',
<el-table-column label="1号显示屏" align="center"> fontWeight: '600',
<template #default="scope"> }"
{{scope.row.ledIp1 + ':' + scope.row.ledPort1 }} :data="configList"
</template> border
</el-table-column> style="width: 100%"
<el-table-column label="2号显示屏" align="center"> >
<template #default="scope"> <el-table-column
{{scope.row.ledIp2 + ':' + scope.row.ledPort2 }} type="index"
</template> label="序号"
</el-table-column> align="center"
<el-table-column label="操作" width="200" align="center"> width="70"
<template #default="scope"> />
<el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button> <el-table-column prop="storeCode" label="库房代码" align="center" />
<el-popconfirm title="你确定删除吗?" @confirm="removeDevice(scope.row)"> <el-table-column prop="serverIp" label="服务器IP" align="center" />
<template #reference> <el-table-column
<el-button type="danger" size="small">删除</el-button> prop="serverPort"
</template> label="服务器端口"
</el-popconfirm> align="center"
</template> />
</el-table-column> <el-table-column
</el-table> prop="masterIp"
</el-card> label="物理主机IP"
</el-tab-pane> align="center"
</el-tabs> />
<el-table-column label="操作" width="200" align="center">
<el-dialog v-model="visible" width="30%" :title="title" @close="closeConfig"> <template #default="scope">
<el-form label-position="right" size="large" label-width="90px" :model="configForm" :rules="rules" ref="storeIp"> <el-button
<el-form-item label="库房代码"> type="primary"
<el-input v-model="configForm.storeCode" placeholder="请输入库房代码"/> size="small"
</el-form-item> @click="editConfig(scope.row)"
<el-form-item label="服务器IP" prop="serverIp"> >编辑</el-button
<el-input v-model="configForm.serverIp" placeholder="请输入服务器IP"/> >
</el-form-item> <el-popconfirm
<el-form-item label="服务器端口" prop="serverPort"> title="你确定删除吗?"
<el-input v-model="configForm.serverPort" placeholder="请输入服务器端口"/> @confirm="removeConfig(scope.row)"
</el-form-item> >
<el-form-item label="物理主机IP" prop="masterIp"> <template #reference>
<el-input v-model="configForm.masterIp" placeholder="请输入物理主机IP"/> <el-button type="danger" size="small">删除</el-button>
</el-form-item> </template>
</el-form> </el-popconfirm>
<template #footer> </template>
<div class="dialog-footer"> </el-table-column>
<el-button @click="visible = false" size="large">关闭</el-button> </el-table>
<el-button type="primary" @click="submitConfig" size="large">提交</el-button> </el-card>
</div> </el-tab-pane>
</template> <el-tab-pane label="通道配置">
</el-dialog> <el-card style="height: calc(100vh - 227.75px)">
<div class="head-container">
<el-dialog v-model="innerVisible" width="38%" :title="title"> <el-button
<el-form label-position="right" size="large" label-width="120px" :model="formData"> class="filter-item"
type="primary"
style="float: right"
@click="add"
>新增</el-button
>
</div>
<el-table
:header-cell-style="{
backgroundColor: '#f5f7fa',
color: '#000',
fontSize: '18px',
fontWeight: '600',
}"
:data="channelList"
border
style="width: 100%"
>
<el-table-column
prop="stationId"
label="通道号"
align="center"
width="100"
/>
<el-table-column label="通道模式" align="center">
<template #default="scope">
{{ scope.row.type == "IN" ? "入库" : "出库" }}
</template>
</el-table-column>
<el-table-column prop="readerIp" label="读写器" align="center">
<template #default="scope">
{{ scope.row.readerIp + ":" + scope.row.readerPort }}
</template>
</el-table-column>
<el-table-column prop="gpioIp" label="GPIO" align="center">
<template #default="scope">
{{ scope.row.gpioIp + ":" + scope.row.gpioPort }}
</template>
</el-table-column>
<el-table-column label="1号显示屏" align="center">
<template #default="scope">
{{ scope.row.ledIp1 + ":" + scope.row.ledPort1 }}
</template>
</el-table-column>
<el-table-column label="2号显示屏" align="center">
<template #default="scope">
{{ scope.row.ledIp2 + ":" + scope.row.ledPort2 }}
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template #default="scope">
<el-button type="primary" size="small" @click="edit(scope.row)"
>编辑</el-button
>
<el-popconfirm
title="你确定删除吗?"
@confirm="removeDevice(scope.row)"
>
<template #reference>
<el-button type="danger" size="small">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</el-card>
</el-tab-pane>
</el-tabs>
<el-dialog
v-model="visible"
width="30%"
:title="title"
@close="closeConfig"
>
<el-form
label-position="right"
size="large"
label-width="90px"
:model="configForm"
:rules="rules"
ref="storeIp"
>
<el-form-item label="库房代码">
<el-input
v-model="configForm.storeCode"
placeholder="请输入库房代码"
/>
</el-form-item>
<el-form-item label="服务器IP" prop="serverIp">
<el-input
v-model="configForm.serverIp"
placeholder="请输入服务器IP"
/>
</el-form-item>
<el-form-item label="服务器端口" prop="serverPort">
<el-input
v-model="configForm.serverPort"
placeholder="请输入服务器端口"
/>
</el-form-item>
<el-form-item label="物理主机IP" prop="masterIp">
<el-input
v-model="configForm.masterIp"
placeholder="请输入物理主机IP"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="visible = false" size="large">关闭</el-button>
<el-button type="primary" @click="submitConfig" size="large"
>提交</el-button
>
</div>
</template>
</el-dialog>
<el-dialog v-model="innerVisible" width="38%" :title="title">
<el-form
label-position="right"
size="large"
label-width="120px"
:model="formData"
>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="通道号"> <el-form-item label="通道号">
...@@ -145,55 +267,58 @@ ...@@ -145,55 +267,58 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="通道模式"> <el-form-item label="通道模式">
<el-select v-model="formData.type" style="width: 100%;"> <el-select v-model="formData.type" style="width: 100%">
<el-option value="IN" label="入库模式"></el-option> <el-option value="IN" label="入库模式"></el-option>
<el-option value="OUT" label="出库模式"></el-option> <el-option value="OUT" label="出库模式"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="读写器IP"> <el-form-item label="读写器IP">
<el-input v-model="formData.readerIp"/> <el-input v-model="formData.readerIp" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="读写器端口"> <el-form-item label="读写器端口">
<el-input v-model="formData.readerPort"/> <el-input v-model="formData.readerPort" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-form-item label="读写器类型"> <el-form-item label="读写器类型">
<el-select v-model="formData.readerType" style="width: 100%;"> <el-select v-model="formData.readerType" style="width: 100%">
<el-option :value="4" label="四通道"></el-option> <el-option :value="4" label="四通道"></el-option>
<el-option :value="8" label="八通道"></el-option> <el-option :value="8" label="八通道"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="天线功率"> <el-form-item label="天线功率">
<el-input v-model="formData.readerPower" placeholder="四通道格式为10,10,10,10,范围为0-30之间。8通道同理"/> <el-input
v-model="formData.readerPower"
placeholder="四通道格式为10,10,10,10,范围为0-30之间。8通道同理"
/>
</el-form-item> </el-form-item>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="GPIO的IP"> <el-form-item label="GPIO的IP">
<el-input v-model="formData.gpioIp"/> <el-input v-model="formData.gpioIp" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="GPIO端口"> <el-form-item label="GPIO端口">
<el-input v-model="formData.gpioPort"/> <el-input v-model="formData.gpioPort" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="1号显示屏IP"> <el-form-item label="1号显示屏IP">
<el-input v-model="formData.ledIp1"/> <el-input v-model="formData.ledIp1" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="1号显示屏端口"> <el-form-item label="1号显示屏端口">
<el-input v-model="formData.ledPort1"/> <el-input v-model="formData.ledPort1" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -201,12 +326,12 @@ ...@@ -201,12 +326,12 @@
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="2号显示屏IP"> <el-form-item label="2号显示屏IP">
<el-input v-model="formData.ledIp2"/> <el-input v-model="formData.ledIp2" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="2号显示屏端口"> <el-form-item label="2号显示屏端口">
<el-input v-model="formData.ledPort2"/> <el-input v-model="formData.ledPort2" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -214,228 +339,253 @@ ...@@ -214,228 +339,253 @@
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="innerVisible = false" size="large">关闭</el-button> <el-button @click="innerVisible = false" size="large">关闭</el-button>
<el-button type="primary" @click="handleSubmit" size="large">提交</el-button> <el-button type="primary" @click="handleSubmit" size="large"
>提交</el-button
>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { defineComponent, ref, getCurrentInstance, toRefs, reactive } from 'vue' import {
import { postAction, getAction } from '@/api/manage' defineComponent,
import { ElMessage } from 'element-plus' ref,
getCurrentInstance,
toRefs,
reactive,
} from "vue";
import { postAction, getAction } from "@/api/manage";
import { ElMessage } from "element-plus";
export default defineComponent({ export default defineComponent({
setup() { setup() {
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance();
const configList = ref([]) const configList = ref([]);
const channelList = ref([]) const channelList = ref([]);
const title = ref('') const title = ref("");
const sysForm = ref({}) const sysForm = ref({});
const configForm = ref({}) const configForm = ref({});
const formData = ref({}) const formData = ref({});
const visible = ref(false) const visible = ref(false);
const innerVisible = ref(false) const innerVisible = ref(false);
// ip正则表达式 // ip正则表达式
function isIp(str) { function isIp(str) {
const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/ const reg =
return reg.test(str) /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
return reg.test(str);
} }
// ip校验 // ip校验
const validateIp = (rule, value, callback) => { const validateIp = (rule, value, callback) => {
if (!value) { if (!value) {
callback(new Error('请输入Ip')) callback(new Error("请输入Ip"));
} else if (!isIp(value)) { } else if (!isIp(value)) {
callback(new Error('ip格式不正确')) callback(new Error("ip格式不正确"));
} else { } else {
callback() callback();
} }
} };
// port校验 // port校验
const validatePort = (rule, value, callback) => { const validatePort = (rule, value, callback) => {
if (!value) { if (!value) {
callback(new Error('请输入端口')) callback(new Error("请输入端口"));
} else if (isNaN(value)) { } else if (isNaN(value)) {
callback(new Error('请输入数字值')); callback(new Error("请输入数字值"));
} else if(value < 0 || value > 65535 ) { } else if (value < 0 || value > 65535) {
callback(new Error('端口范围在(0-65535)')) callback(new Error("端口范围在(0-65535)"));
} else { } else {
callback() callback();
} }
} };
const rules = reactive({ const rules = reactive({
serverIp: [{ validator: validateIp, trigger: 'blur' }], serverIp: [{ validator: validateIp, trigger: "blur" }],
serverPort: [{ validator: validatePort, trigger: 'blur' }], serverPort: [{ validator: validatePort, trigger: "blur" }],
masterIp: [{ validator: validateIp, trigger: 'blur' }] masterIp: [{ validator: validateIp, trigger: "blur" }],
}) });
const state = reactive({ const state = reactive({
url: { url: {
getStoreCode: '/config/getStoreCode', getStoreCode: "/config/getStoreCode",
getConfig: '/config/getConfig', getConfig: "/config/getConfig",
getConfigPage: '/config/getConfigPage', getConfigPage: "/config/getConfigPage",
updateConfig: '/config/updateConfig', updateConfig: "/config/updateConfig",
saveConfig: '/config/saveConfig', saveConfig: "/config/saveConfig",
removeConfig: '/config/removeConfig', removeConfig: "/config/removeConfig",
getDevice: '/device/getDevice', getDevice: "/device/getDevice",
updateDevice: '/device/updateDevice', updateDevice: "/device/updateDevice",
removeDevice: '/device/removeDevice', removeDevice: "/device/removeDevice",
saveDevice: '/device/saveDevice', saveDevice: "/device/saveDevice",
syncGoods: "/platform/syncGoods",
syncGoods: '/platform/syncGoods'
}, },
}); });
const loadData = (arg) => { const loadData = (arg) => {
getConfigPage() getConfigPage();
getDevice() getDevice();
resetConfig() resetConfig();
} };
function getConfigPage() { function getConfigPage() {
postAction(state.url.getConfigPage, {}).then(res => { postAction(state.url.getConfigPage, {}).then((res) => {
if (res.code !== 99200) return ElMessage.error(res.message); if (res.code !== 99200) return ElMessage.error(res.message);
configList.value = res.data.records configList.value = res.data.records;
}) });
} }
function addConfig() { function addConfig() {
title.value = '新增' title.value = "新增";
visible.value = true visible.value = true;
} }
function editConfig(row) { function editConfig(row) {
title.value = '编辑' title.value = "编辑";
configForm.value = JSON.parse(JSON.stringify(row)) configForm.value = JSON.parse(JSON.stringify(row));
visible.value = true visible.value = true;
} }
function submitConfig() { function submitConfig() {
let url = configForm.value.id ? state.url.updateConfig : state.url.saveConfig let url = configForm.value.id
? state.url.updateConfig
: state.url.saveConfig;
proxy.$refs.storeIp.validate((valid) => { proxy.$refs.storeIp.validate((valid) => {
if (!valid) { if (!valid) {
ElMessage.warning('请正确填写信息') ElMessage.warning("请正确填写信息");
} else { } else {
postAction(url, configForm.value).then(res => { postAction(url, configForm.value).then((res) => {
if (res.code !== 99200) return ElMessage.error(res.message); if (res.code !== 99200) return ElMessage.error(res.message);
ElMessage.success(res.message) ElMessage.success(res.message);
configForm.value = {} configForm.value = {};
visible.value = false visible.value = false;
getConfigPage() getConfigPage();
}) });
} }
}) });
} }
function closeConfig() { function closeConfig() {
configForm.value = {} configForm.value = {};
} }
function removeConfig(row) { function removeConfig(row) {
postAction(state.url.removeConfig, { id: row.id}).then(res => { postAction(state.url.removeConfig, { id: row.id }).then((res) => {
if (res.code !== 99200) return ElMessage.error(res.message); if (res.code !== 99200) return ElMessage.error(res.message);
ElMessage.success(res.message) ElMessage.success(res.message);
getConfigPage() getConfigPage();
}) });
} }
function getDevice() { function getDevice() {
if (!sessionStorage.getItem('storeInfo')) return; if (!sessionStorage.getItem("storeInfo")) return;
postAction(state.url.getDevice, {storeCode: JSON.parse(sessionStorage.getItem('storeInfo')).storeCode}).then(res => { postAction(state.url.getDevice, {
storeCode: JSON.parse(sessionStorage.getItem("storeInfo")).storeCode,
}).then((res) => {
if (res.code !== 99200) return ElMessage.error(res.message); if (res.code !== 99200) return ElMessage.error(res.message);
channelList.value = res.data channelList.value = res.data;
}) });
} }
function resetConfig() { function resetConfig() {
getAction(state.url.getStoreCode).then(res => { getAction(state.url.getStoreCode).then((res) => {
if (res.code !== 99200) return ElMessage.error(res.message); if (res.code !== 99200) return ElMessage.error(res.message);
postAction(state.url.getConfig, {storeCode: res.data}).then(res => { postAction(state.url.getConfig, { storeCode: res.data }).then((res) => {
if (res.code !== 99200) return ElMessage.error(res.message); if (res.code !== 99200) return ElMessage.error(res.message);
if (res.data.length > 0) { if (res.data.length > 0) {
sysForm.value = JSON.parse(JSON.stringify(res.data[0])) sysForm.value = JSON.parse(JSON.stringify(res.data[0]));
sysForm.value.isHide = JSON.parse(sessionStorage.getItem('storeInfo')).isHide sysForm.value.isHide = JSON.parse(
sessionStorage.getItem("storeInfo")
).isHide;
} }
}) });
}) });
} }
function syncGoods() { function syncGoods() {
getAction(state.url.syncGoods).then(res => { getAction(state.url.syncGoods).then((res) => {
if (res.code !== 99200) return ElMessage.error(res.message); if (res.code !== 99200) return ElMessage.error(res.message);
ElMessage.success(res.message) ElMessage.success(res.message);
}) });
} }
function saveConfig() { function saveConfig() {
let url = sysForm.value.id ? state.url.updateConfig : state.url.saveConfig let url = sysForm.value.id
? state.url.updateConfig
: state.url.saveConfig;
if (!sysForm.value.storeCode) { if (!sysForm.value.storeCode) {
return ElMessage.warning('库房编号不能为空') return ElMessage.warning("库房编号不能为空");
} }
if (!sysForm.value.serverIp) { if (!sysForm.value.serverIp) {
return ElMessage.warning('服务器IP不能为空') return ElMessage.warning("服务器IP不能为空");
} }
if (!sysForm.value.serverPort) { if (!sysForm.value.serverPort) {
return ElMessage.warning('端口不能为空') return ElMessage.warning("端口不能为空");
} }
postAction(url, sysForm.value).then(res => { postAction(url, sysForm.value).then((res) => {
if (res.code !== 99200) return ElMessage.error(res.message); if (res.code !== 99200) return ElMessage.error(res.message);
ElMessage.success(res.message) ElMessage.success(res.message);
sessionStorage.setItem('storeInfo', JSON.stringify(sysForm.value)) sessionStorage.setItem("storeInfo", JSON.stringify(sysForm.value));
}) });
} }
function edit(row) { function edit(row) {
title.value = '编辑通道' title.value = "编辑通道";
formData.value = JSON.parse(JSON.stringify(row)) formData.value = JSON.parse(JSON.stringify(row));
innerVisible.value = true innerVisible.value = true;
} }
function add() { function add() {
title.value = '新增通道' title.value = "新增通道";
innerVisible.value = true innerVisible.value = true;
} }
function handleSubmit() { function handleSubmit() {
let url = formData.value.id ? state.url.updateDevice : state.url.saveDevice let url = formData.value.id
formData.value.storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode ? state.url.updateDevice
postAction(url, formData.value).then(res => { : state.url.saveDevice;
formData.value.storeCode = JSON.parse(
sessionStorage.getItem("storeInfo")
).storeCode;
postAction(url, formData.value).then((res) => {
if (res.code !== 99200) return ElMessage.error(res.message); if (res.code !== 99200) return ElMessage.error(res.message);
ElMessage.success(res.message) ElMessage.success(res.message);
formData.value = {} formData.value = {};
innerVisible.value = false innerVisible.value = false;
getDevice() getDevice();
}) });
} }
function removeDevice(row) { function removeDevice(row) {
postAction(state.url.removeDevice, {stationId: row.stationId, id: row.id}).then(res => { postAction(state.url.removeDevice, {
stationId: row.stationId,
id: row.id,
}).then((res) => {
if (res.code !== 99200) return ElMessage.error(res.message); if (res.code !== 99200) return ElMessage.error(res.message);
ElMessage.success(res.message) ElMessage.success(res.message);
getDevice() getDevice();
}) });
} }
function handleCommand(command) { function handleCommand(command) {
if (command === '#223170') { // 藏蓝 if (command === "#223170") {
sessionStorage.setItem('bgColor', '#223170') // 藏蓝
sessionStorage.setItem("bgColor", "#223170");
} }
if (command === '#025799') { // 蓝色 if (command === "#025799") {
sessionStorage.setItem('bgColor', '#025799') // 蓝色
sessionStorage.setItem("bgColor", "#025799");
} }
if (command === '#1f8a36') { // 军绿 if (command === "#1f8a36") {
sessionStorage.setItem('bgColor', '#1f8a36') // 军绿
sessionStorage.setItem("bgColor", "#1f8a36");
} }
window.location.reload() window.location.reload();
} }
return { return {
...toRefs(state), ...toRefs(state),
sysForm, sysForm,
...@@ -465,8 +615,8 @@ export default defineComponent({ ...@@ -465,8 +615,8 @@ export default defineComponent({
getDevice, getDevice,
syncGoods, syncGoods,
getConfigPage, getConfigPage,
handleCommand handleCommand,
} };
}, },
}) });
</script> </script>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论