<add>[important]添加db地址界面
This commit is contained in:
parent
4df5ecccb5
commit
2e7c71a8bd
16
src/axios/db.js
Normal file
16
src/axios/db.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import axios from '@/axios/base/base.axios';
|
||||
|
||||
export default {
|
||||
// 查询Db数据，顺便返回PLC名称
|
||||
getDbWithName(req) {
|
||||
return axios.post('/api/wcs/db/getDBWithPlcName', req)
|
||||
},
|
||||
// 添加或者变更DB信息
|
||||
addOrUpdate(req) {
|
||||
return axios.post('/api/wcs/db/addOrUpdate', req)
|
||||
},
|
||||
// 删除一个DB信息
|
||||
deleteData(dbName) {
|
||||
return axios.delete('/api/wcs/db/deleteDB', { params: { dbName: dbName }})
|
||||
}
|
||||
}
|
||||
151
src/view/component/dbData/AddDBData.vue
Normal file
151
src/view/component/dbData/AddDBData.vue
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="添加DB数据"
|
||||
:model-value="modelValue"
|
||||
@close="() => $emit('update:modelValue', false)">
|
||||
<el-form
|
||||
label-position="left"
|
||||
label-width="160px"
|
||||
:model="plcDbItem"
|
||||
>
|
||||
<el-form-item label="DB 名称（唯一）：" required>
|
||||
<el-input v-model="plcDbItem.dbName" placeholder="不能相同与其他编号，不然视作更新那个编号的数据"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="对应的PLC编号：">
|
||||
<el-select v-model="plcDbItem.plcId" placeholder="请选择PLC" style="width: calc(100% - 50px)" clearable>
|
||||
<el-option
|
||||
v-for="item in plcList"
|
||||
:key="item.plcId"
|
||||
:label="item.plcName"
|
||||
:value="item.plcId"
|
||||
>
|
||||
<span style="float: left">{{ item.plcId }}</span>
|
||||
<span style=" float: right; color: var(--el-text-color-secondary); font-size: 13px;">
|
||||
{{ item.plcName }}
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button type="info" @click="loadPlcData"><el-icon><Refresh/></el-icon></el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="DB地址：">
|
||||
<el-input v-model="plcDbItem.dbAddress"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否系统级别：">
|
||||
<el-input v-model="plcDbItem.isSystem" placeholder="0：否； 1：是"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注信息：">
|
||||
<el-input v-model="plcDbItem.remark"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button type="primary" @click="addOrUpdate">添加/更新</el-button>
|
||||
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import dbApi from "@/axios/db"
|
||||
import {Refresh} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {Refresh},
|
||||
props: ['modelValue', 'plcList', 'plcDbItem'],
|
||||
emits: ['loadPlcData', 'update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
loadPlcData() {
|
||||
this.$emit('loadPlcData');
|
||||
},
|
||||
addOrUpdate() {
|
||||
if(this.plcDbItem.dbName === '' || this.plcDbItem.dbName === undefined || this.plcDbItem.dbName === null){
|
||||
ElMessage({
|
||||
message: '请输入 DB名称，此项是必填的',
|
||||
type: 'warning',
|
||||
})
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(
|
||||
`您确定要执行添加/编辑 dbName 为 ${this.plcDbItem.dbName} 的DB信息?`,
|
||||
'数据变更警告',
|
||||
{
|
||||
confirmButtonText: '变更',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
dbApi.addOrUpdate(this.plcDbItem).then(response=>{
|
||||
const responseData = response.data
|
||||
if(responseData.code === 0){
|
||||
ElMessage({
|
||||
message: '添加/编辑成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.$emit('update:modelValue', false)
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '服务器返回失败：' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(ex=>{
|
||||
ElMessage({
|
||||
message: '请求服务器失败：' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
135
src/view/component/dbData/DbList.vue
Normal file
135
src/view/component/dbData/DbList.vue
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row style="width: calc(100vw - 270px)">
|
||||
<el-row style="width: 100%">
|
||||
<h5>DB地址列表</h5>
|
||||
</el-row>
|
||||
<el-table :data="modelValue" border stripe max-height="calc(100vh - 410px)">
|
||||
<el-table-column fixed prop="plcId" label="PLC 编号" width="150px" align="center"/>
|
||||
<el-table-column prop="plcName" label="PLC 名称" width="250px" align="center"/>
|
||||
<el-table-column prop="dbName" label="DB 名称" width="250px" show-overflow-tooltip align="center"/>
|
||||
<el-table-column prop="dbAddress" label="DB 地址" width="250px" align="center"/>
|
||||
<el-table-column prop="isSystem" label="是否系统级别" width="120px" align="center"/>
|
||||
<el-table-column prop="remark" label="备注信息" min-width="100px"/>
|
||||
<el-table-column fixed="right" label="操作" align="center" width="120">
|
||||
<template #default="scope">
|
||||
<el-button-group class="ml-4">
|
||||
<el-tooltip content="编辑" placement="top" effect="light">
|
||||
<el-button type="primary" size="small" @click="editData(scope.row)">
|
||||
<el-icon><Edit/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top" effect="light">
|
||||
<el-button type="danger" size="small" @click="deleteData(scope.row)">
|
||||
<el-icon><Delete/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import {Delete, Edit} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import dbApi from "@/axios/db";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {Delete, Edit},
|
||||
props: ['modelValue', 'plcDbItem'],
|
||||
emits: ['update:modelValue', 'update:plcDbItem', 'addDBForm', 'showAddForm'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
// 打开编辑框
|
||||
editData(row) {
|
||||
this.$emit('update:plcDbItem', {
|
||||
dbName: row.dbName,
|
||||
plcId: row.plcId,
|
||||
dbAddress: row.dbAddress,
|
||||
isSystem: row.isSystem,
|
||||
remark: row.remark
|
||||
})
|
||||
this.$emit('showAddForm', true)
|
||||
},
|
||||
// 删除数据
|
||||
deleteData(row) {
|
||||
ElMessageBox.confirm(
|
||||
`您确定要删除 dbName 为 ${row.dbName} 的DB信息? 该操作不可恢复！`,
|
||||
'数据删除警告',
|
||||
{
|
||||
confirmButtonClass: 'el-button--danger',
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'error',
|
||||
}).then(() => {
|
||||
dbApi.deleteData(row.dbName).then(response=>{
|
||||
const responseData = response.data
|
||||
if(responseData.code === 0){
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
})
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '服务器返回失败：' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
}).catch(ex=>{
|
||||
ElMessage({
|
||||
message: '请求服务器失败：' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
138
src/view/component/dbData/SearchForm.vue
Normal file
138
src/view/component/dbData/SearchForm.vue
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
<template>
|
||||
<div>
|
||||
<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="所属 PLC：">
|
||||
<el-select v-model="searchParams.plcId" placeholder="请选择PLC" style="width: 400px" clearable>
|
||||
<el-option
|
||||
v-for="item in plcList"
|
||||
:key="item.plcId"
|
||||
:label="item.plcName"
|
||||
:value="item.plcId"
|
||||
>
|
||||
<span style="float: left">{{ item.plcId }}</span>
|
||||
<span style=" float: right; color: var(--el-text-color-secondary); font-size: 13px;">
|
||||
{{ item.plcName }}
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button type="info" @click="loadPlcData"><el-icon><Refresh/></el-icon></el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="查询关键字：">
|
||||
<el-input placeholder="输入 DB地址名称 查询..." v-model="searchParams.dbName" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button type="primary" @click="searchBtn">查询/刷新</el-button>
|
||||
<el-button type="success" @click="addDBForm">添加DB地址</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import dbApi from "@/axios/db"
|
||||
import {Refresh} from "@element-plus/icons-vue";
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {Refresh},
|
||||
props: ['plcDbList', 'plcList'],
|
||||
emits: ['update:plcDbList', 'loadPlcData', 'addDBForm'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
searchParams: {
|
||||
dbName: '',
|
||||
plcId: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {
|
||||
},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
// 加载PLC数据
|
||||
loadPlcData() {
|
||||
this.$emit('loadPlcData');
|
||||
},
|
||||
// 打开添加DB窗口
|
||||
addDBForm() {
|
||||
this.$emit('addDBForm')
|
||||
},
|
||||
// 查询按钮
|
||||
searchBtn() {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
this.$emit('update:plcDbList', [])
|
||||
if(this.searchParams.plcId === '' || this.searchParams.plcId === undefined || this.searchParams.plcId === null) {
|
||||
this.searchParams.plcId = null
|
||||
}
|
||||
dbApi.getDbWithName(this.searchParams).then(res=>{
|
||||
const responseData = res.data
|
||||
if(responseData.code === 0){
|
||||
ElMessage({
|
||||
message: '查询成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.$emit('update:plcDbList', Object.freeze(responseData["returnData"]))
|
||||
}else{
|
||||
ElMessage({
|
||||
message: '服务器返回失败：' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch(ex=>{
|
||||
ElMessage({
|
||||
message: '请求服务器失败：' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
this.loadPlcData()
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,27 +1,96 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
<el-row>
|
||||
<SearchForm
|
||||
v-model:plc-db-list="plcDbList" v-model:plc-list="plcList"
|
||||
@loadPlcData="loadPlcData" @addDBForm="addDBData"
|
||||
style="width: 100%" ref="searchForm"></SearchForm>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<DbList v-model="plcDbList" v-model:plc-db-item="plcDbItem"
|
||||
style="width: 100%"
|
||||
@addDBForm="addDBData" @showAddForm="showAddFormMethod"></DbList>
|
||||
</el-row>
|
||||
<!-- 添加或者更新PLC DB数据-->
|
||||
<AddDBData v-model="showAddForm" v-model:plc-list="plcList" v-model:plc-db-item="plcDbItem"
|
||||
@loadPlcData="loadPlcData">
|
||||
</AddDBData>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import SearchForm from "@/view/component/dbData/SearchForm.vue";
|
||||
import DbList from "@/view/component/dbData/DbList.vue";
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
import plcApi from "@/axios/plc";
|
||||
import AddDBData from "@/view/component/dbData/AddDBData.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
components: {AddDBData, DbList, SearchForm},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
return {
|
||||
plcList:[],
|
||||
plcDbList:[],
|
||||
showAddForm: false,
|
||||
plcDbItem: {}
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
methods: {
|
||||
// 加载plc数据
|
||||
loadPlcData() {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
this.plcList = []
|
||||
plcApi.getPlc().then(res=>{
|
||||
const responseData = res.data
|
||||
if(responseData.code === 0){
|
||||
ElMessage({
|
||||
message: '查询成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.plcList = Object.freeze(responseData["returnData"])
|
||||
}else{
|
||||
ElMessage({
|
||||
message: '服务器返回失败：' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch(ex=>{
|
||||
ElMessage({
|
||||
message: '请求服务器失败：' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
// 添加PLC DB数据
|
||||
addDBData() {
|
||||
this.plcDbItem = {
|
||||
dbName: '',
|
||||
plcId: '',
|
||||
dbAddress: '',
|
||||
isSystem: '',
|
||||
remark: ''
|
||||
}
|
||||
this.showAddForm = true
|
||||
},
|
||||
showAddFormMethod(isShow) {
|
||||
this.showAddForm = isShow;
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ import plcApi from "@/axios/plc";
|
|||
import {formatterOnOrOffEnum} from "@/enum/base/on.off.enum";
|
||||
import {Delete, Edit} from "@element-plus/icons-vue";
|
||||
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
|
||||
import AddPLCData from "@/view/component/PLCData/AddPLCData.vue";
|
||||
import AddPLCData from "@/view/component/plcData/AddPLCData.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
|
|
@ -128,7 +128,8 @@ export default {
|
|||
`您确定要删除 plcId 为 ${this.plcDataItem.plcId} 的PLC信息? 删除后不可恢复！`,
|
||||
'数据删除警告',
|
||||
{
|
||||
confirmButtonText: '确定删除',
|
||||
confirmButtonClass: 'el-button--danger',
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'error',
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user