wcs_client_kate_suzhou/src/view/tab/development/PLCData.vue

<template>
  <div>
    <el-row>
      <el-button type="primary" style="margin-left: 0.5rem" @click="loadData">加载PLC数据</el-button>
      <el-button type="success" style="margin-left: 0.5rem" @click="addPlcData">添加PLC数据</el-button>
    </el-row>
    <el-row style="width: calc(100vw - 270px)">
      <h5>PLC信息表格</h5>
      <el-table :data="plcData" border stripe style="width: 100%;" max-height="calc(100vh - 350px)">
        <el-table-column fixed prop="plcId" label="PLC 编号" width="100px" align="center" show-overflow-tooltip/>
        <el-table-column fixed prop="plcName" label="PLC 名称" align="center" show-overflow-tooltip/>
        <el-table-column fixed prop="plcIp" label="PLC IP地址" width="250px" align="center" show-overflow-tooltip/>
        <el-table-column prop="plcStatus" label="PLC 状态" align="center" width="180px">
          <template #default="scope">
            <el-tag class="ml-2" :type=formatterOnOrOffEnum(scope.row.plcStatus).type>
              {{formatterOnOrOffEnum(scope.row.plcStatus).label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="plcKind" label="PLC 系列" align="center" width="150px"/>
        <el-table-column prop="rack" label="插槽" align="center"  width="150px" show-overflow-tooltip/>
        <el-table-column prop="slot" label="机架" width="150px" align="center" show-overflow-tooltip/>
        <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip/>
        <el-table-column fixed="right" label="操作" align="center" width="150">
          <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>
<!--    添加PLC的窗口-->
    <AddPLCData v-model="showAddForm" v-model:plc-data-item="plcDataItem"></AddPLCData>
  </div>
</template>

<script>
// import  《组件名称》  from '《组件路径》 ';
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";

export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {AddPLCData, Delete, Edit},
  props: [],
  emits: [],
  data() {
    // 这里存放数据
    return {
      plcData:[],
      plcDataItem:{},
      showAddForm: false,
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    formatterOnOrOffEnum,
    // 加载PLC数据
    loadData() {
      const loading = ElLoading.service({
        lock: true,
        text: '加载中...',
      })
      this.plcData = []
      plcApi.getPlc().then(res=>{
        const responseData = res.data
        if(responseData.code === 0){
          ElMessage({
            message: '查询成功',
            type: 'success',
          })
          this.plcData = Object.freeze(responseData["returnData"])
        }else{
          ElMessage({
            message: '服务器返回失败：' + responseData.msg,
            type: 'warning',
          })
        }
        loading.close()
      }).catch(ex=>{
        ElMessage({
          message: '请求服务器失败：' + ex,
          type: 'error',
        })
        loading.close()
      })
    },
    // 编辑 PLC
    editData(row) {
      this.plcDataItem = {
        plcId: row.plcId,
        plcName: row.plcName,
        plcIp: row.plcIp,
        plcStatus: row.plcStatus,
        plcKind: row.plcKind,
        rack: row.rack,
        slot: row.slot,
        remark: row.remark
      }
      this.showAddForm = true;
    },
    // 删除 PLC 数据
    deleteData(row) {
      if(row.plcId === undefined || row.plcId === ''){
        ElMessage({
          message: 'plc 编号不能为空',
          type: 'warning',
        })
        return
      }
      ElMessageBox.confirm(
          `您确定要删除 plcId 为 ${this.plcDataItem.plcId} 的PLC信息? 删除后不可恢复！`,
          '数据删除警告',
          {
            confirmButtonText: '确定删除',
            cancelButtonText: '取消',
            type: 'error',
          })
          .then(() => {
            const loading = ElLoading.service({
              lock: true,
              text: '请稍后...',
            })
            this.plcData = []
            plcApi.deletePlc(row.plcId).then(res=>{
              const responseData = res.data
              if(responseData.code === 0){
                ElMessage({
                  message: '删除成功',
                  type: 'success',
                })
              }else{
                ElMessage({
                  message: '服务器返回失败：' + responseData.msg,
                  type: 'warning',
                })
              }
              loading.close()
            }).catch(ex=>{
              ElMessage({
                message: '请求服务器失败：' + ex,
                type: 'error',
              })
              loading.close()
            })
          })
          .catch(() => {
          })
    },
    // 添加 PLC 数据
    addPlcData() {
      this.plcDataItem = {
        plcId: '',
        plcName: '',
        plcIp: '',
        plcStatus: '',
        plcKind: '',
        rack: '0',
        slot: '1',
        remark: ''
      }
      this.showAddForm = true;
    }
  },
  // 组合式 API
  setup() {
  },
  // 创建之前
  beforeCreate() {
  },
  // 创建完成(可以访问 this 实例)
  created() {
  },
  // 生命周期 - 挂载之前
  beforeMount() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },
  // 更新之前
  beforeUpdate() {
  },
  // 更新之后
  updated() {
  },
  // 销毁之前
  beforeUnmount() {
  },
  // 销毁完成
  unmounted() {
  }
}
</script>

<style scoped>

</style>