<add>[important]添加堆垛机管理功能

src/axios/stacker.js

@@ -1,8 +1,16 @@
 import axios from '@/axios/base/base.axios';
 
 export default {
-    // 获取所有堆垛机数据
+    // 获取所有堆垛机状态
-    getStacker() {
+    getStackerStatus() {
         return axios.get('/api/wcs/stacker/getStackerStatus')
     },
+    // 获取所有堆垛机数据
+    getStackerData() {
+        return axios.get('/api/wcs/stacker/getStacker')
+    },
+    // 编辑/更新堆垛机信息
+    editStackerData(stackerDataItem) {
+        return axios.post('/api/wcs/stacker/editStacker', stackerDataItem)
+    },
 }

src/router/index.js

@@ -37,7 +37,7 @@ const routes = [
       { path: 'plcData', name: 'plcData', component:() => import('@/view/tab/development/PLCData.vue') }, // PLC管理
       { path: 'dbData', name: 'dbData', component:() => import('@/view/tab/development/DbData.vue') }, // PLC通讯管理（DB块）
       { path: 'configData', name: 'configData', component:() => import('@/view/tab/development/ConfigData.vue') }, // 系统配置
-      { path: 'socketData', name: 'socketData', component:() => import('../view/tab/equipmentManage/SocketData.vue') }, // Socket通讯管理
+      { path: 'socketData', name: 'socketData', component:() => import('../view/tab/development/SocketData.vue') }, // Socket通讯管理
       { path: 'menuData', name: 'menuData', component:() => import('@/view/tab/development/MenuData.vue') }, // 菜单管理
 
     ]

src/view/component/stackerData/EditStacker.vue

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <el-dialog
+        title="添加/修改 堆垛机数据"
+        :model-value="modelValue"
+        @close="() => $emit('update:modelValue', false)">
+      <el-form
+          label-position="left"
+          label-width="200px"
+          :model="stackerDataItem"
+      >
+        <el-form-item label="堆垛机编号（唯一）：" required>
+          <el-input v-model="stackerDataItem.stackerId" placeholder="不能相同与其他编号，不然视作更新那个编号的数据"/>
+        </el-form-item>
+        <el-form-item label="堆垛机名称：">
+          <el-input v-model="stackerDataItem.stackerName"/>
+        </el-form-item>
+        <el-form-item label="堆垛机状态：">
+          <el-switch
+              v-model="stackerDataItem.stackerStatus"
+              inline-prompt
+              active-text="启用"
+              inactive-text="停用"
+              active-value="1"
+              inactive-value="0"
+          />
+        </el-form-item>
+        <el-form-item label="货叉状态：">
+          <el-input v-model="stackerDataItem.forkStatus"/>
+        </el-form-item>
+        <el-form-item label="对应的PLC编号：">
+          <el-input v-model="stackerDataItem.actionPlc"/>
+        </el-form-item>
+        <el-form-item label="入库站台：">
+          <el-input v-model="stackerDataItem.inStand"/>
+        </el-form-item>
+        <el-form-item label="出库站台：">
+          <el-input v-model="stackerDataItem.outStand"/>
+        </el-form-item>
+        <el-form-item label="备注信息：">
+          <el-input v-model="stackerDataItem.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 stackerApi from "@/axios/stacker";
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default {
+  // import 引入的组件需要注入到对象中才能使用
+  components: {},
+  props: ['modelValue', 'stackerDataItem'],
+  emits: ['update:modelValue'],
+  data() {
+    // 这里存放数据
+    return {}
+  },
+  // 计算属性 类似于 data 概念
+  computed: {},
+  // 监控 data 中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    addOrUpdate() {
+      if(this.stackerDataItem.stackerId === '' || this.stackerDataItem.stackerId === undefined || this.stackerDataItem.stackerId === null){
+        ElMessage({
+          message: '请输入 堆垛机编号，此项是必填的',
+          type: 'warning',
+        })
+        return
+      }
+      ElMessageBox.confirm(
+        `您确定要执行添加/更新 堆垛机编号 为 ${this.stackerDataItem.stackerId} 的堆垛机信息?`,
+        '数据变更警告',
+        {
+          confirmButtonText: '添加/更新',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+        .then(() => {
+          stackerApi.editStackerData(this.stackerDataItem).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>

src/view/tab/equipmentManage/StackerData.vue

@@ -1,28 +1,134 @@
 <template>
 <!--  堆垛机管理-->
   <div>
+    <el-row>
+      <el-button type="primary" style="margin-left: 0.5rem" @click="refresh">查询/刷新</el-button>
+      <el-button type="success" style="margin-left: 0.5rem" @click="add">添加</el-button>
+    </el-row>
+    <el-row style="width: calc(100vw - 270px)">
+      <h5>堆垛机信息</h5>
+      <el-table :data="stackerInfo" border stripe style="width: 100%;" max-height="calc(100vh - 350px)">
+        <el-table-column fixed prop="stackerId" label="堆垛机编号" width="100px" align="center" show-overflow-tooltip/>
+        <el-table-column fixed prop="stackerName" label="堆垛机名称" width="250px" align="center" show-overflow-tooltip/>
+        <el-table-column prop="stackerStatus" label="堆垛机状态（系统）" align="center" width="180px">
+          <template #default="scope">
+            <el-tag class="ml-2" :type=formatterOnOrOffEnum(scope.row.stackerStatus).type>
+              {{formatterOnOrOffEnum(scope.row.stackerStatus).label}}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="forkStatus" label="货叉状态（系统）" align="center" width="150px"/>
+        <el-table-column prop="actionPlc" label="对应的PLC编号" align="center" width="150px"/>
+        <el-table-column prop="inStand" label="入库站台" align="center"/>
+        <el-table-column prop="outStand" label="出库站台" align="center"/>
+        <el-table-column prop="remark" label="备注" align="center"/>
+        <el-table-column fixed="right" label="操作" align="center" width="80">
+          <template #default="scope">
+            <el-button-group class="ml-4">
+              <el-tooltip content="编辑" placement="top" effect="light">
+                <el-button type="primary" size="small"  @click="edit(scope.row)">
+                  <el-icon><Edit/></el-icon>
+                </el-button>
+              </el-tooltip>
+            </el-button-group>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+<!--    添加或者编辑堆垛机窗口-->
+    <EditStacker v-model="showAddOrEdit" v-model:stacker-data-item="stackerDataItem"></EditStacker>
 
   </div>
 </template>
 
 <script>
 // import  《组件名称》  from '《组件路径》 ';
+import stackerApi from "@/axios/stacker";
+import {formatterOnOrOffEnum} from "@/enum/base/on.off.enum";
+import {Edit} from "@element-plus/icons-vue";
+import {ElLoading, ElMessage} from "element-plus";
+import EditStacker from "@/view/component/stackerData/EditStacker.vue";
 
 export default {
   // import 引入的组件需要注入到对象中才能使用
-  components: {},
+  components: {EditStacker, Edit},
   props: [],
   emits: [],
   data() {
     // 这里存放数据
-    return {}
+    return {
+      stackerInfo: [],
+      // 传入到添加/编辑框里面的参数
+      stackerDataItem: {},
+      // 是否展示添加或者编辑堆垛机窗口
+      showAddOrEdit: false
+    }
   },
   // 计算属性 类似于 data 概念
   computed: {},
   // 监控 data 中的数据变化
   watch: {},
   // 方法集合
-  methods: {},
+  methods: {
+    formatterOnOrOffEnum,
+    // 查询/刷新 堆垛机信息
+    refresh() {
+      const loading = ElLoading.service({
+        lock: true,
+        text: '加载中...',
+      })
+      this.stackerInfo = []
+      stackerApi.getStackerData().then(res=>{
+        const responseData = res.data
+        if(responseData.code === 0){
+          ElMessage({
+            message: '查询成功',
+            type: 'success',
+          })
+          this.stackerInfo = Object.freeze(responseData["returnData"])
+        }else{
+          ElMessage({
+            message: '服务器返回失败：' + responseData.msg,
+            type: 'warning',
+          })
+        }
+        loading.close()
+      }).catch(ex=>{
+        ElMessage({
+          message: '请求服务器失败：' + ex,
+          type: 'error',
+        })
+        loading.close()
+      })
+    },
+    // 打开编辑框
+    edit(row) {
+      this.stackerDataItem = {
+        stackerId: row.stackerId,
+        stackerName: row.stackerName,
+        stackerStatus: row.stackerStatus.toString(),
+        forkStatus: row.forkStatus,
+        actionPlc: row.actionPlc,
+        inStand: row.inStand,
+        outStand: row.outStand,
+        remark: row.remark
+      }
+      this.showAddOrEdit = true
+    },
+    // 添加
+    add() {
+      this.stackerDataItem = {
+        stackerId: '',
+        stackerName: '',
+        stackerStatus: '0',
+        forkStatus: '0',
+        actionPlc: '',
+        inStand: '',
+        outStand: '',
+        remark: ''
+      }
+      this.showAddOrEdit = true
+    }
+  },
   // 组合式 API
   setup() {
   },

src/view/tab/systemStatus/StackerStatus.vue

@@ -35,17 +35,17 @@
         <el-table-column prop="depth" label="深" align="center" width="60px"/>
         <el-table-column prop="code" label="料箱码" align="center"  width="150px"/>
         <el-table-column prop="errCode" label="报警编号" align="center" width="130px" show-overflow-tooltip/>
-        <el-table-column fixed="right" label="操作" align="center" width="80">
+<!--        <el-table-column fixed="right" label="操作" align="center" width="80">-->
-          <template #default="scope">
+<!--          <template #default="scope">-->
-            <el-button-group class="ml-4">
+<!--            <el-button-group class="ml-4">-->
-              <el-tooltip content="查询" placement="top" effect="light">
+<!--              <el-tooltip content="查询" placement="top" effect="light">-->
-                <el-button type="primary" size="small"  @click="search(scope.row)">
+<!--                <el-button type="primary" size="small"  @click="search(scope.row)">-->
-                  <el-icon><Search/></el-icon>
+<!--                  <el-icon><Search/></el-icon>-->
-                </el-button>
+<!--                </el-button>-->
-              </el-tooltip>
+<!--              </el-tooltip>-->
-            </el-button-group>
+<!--            </el-button-group>-->
-          </template>
+<!--          </template>-->
-        </el-table-column>
+<!--        </el-table-column>-->
       </el-table>
     </el-row>
   </div>
@@ -57,7 +57,7 @@ import stacker from "@/axios/stacker";
 import {ElLoading, ElMessage} from "element-plus";
 import {formatterOnOrOffEnum} from "@/enum/base/on.off.enum";
 import {formatterStackerControlModel} from "@/enum/stacker/stackerControlModelEnum";
-import {formatterStackerStatus} from "../../../enum/stacker/stackerStatusEnum";
+import {formatterStackerStatus} from "@/enum/stacker/stackerStatusEnum";
 
 export default {
   // import 引入的组件需要注入到对象中才能使用
@@ -87,7 +87,7 @@ export default {
         text: '加载中...',
       })
       this.stackerInfo = []
-      stacker.getStacker().then(res=>{
+      stacker.getStackerStatus().then(res=>{
         const responseData = res.data
         if(responseData.code === 0){
           ElMessage({
@@ -109,11 +109,6 @@ export default {
         })
         loading.close()
       })
-
-    },
-    // 查询堆垛机状态
-    search(row){
-
     }
   },
   // 组合式 API