修改列表组件，支持属性子属性

shikeying

2023-04-25 0b67fd879ccd4fb6319dc016babd3bb8ea79dff0

修改列表组件，支持属性子属性

 src/api/tcp/equip.js

New file
@@ -0,0 +1,10 @@
import request from "@/utils/request";

// 添加设备
export function addEquip(data) {
  return request({
    url: '/tcp/equip/add',
    method: 'post',
    data: data
  })
}

 src/store/modules/user.js

@@ -41,8 +41,11 @@
    SET_CONNECTION: (state, data) => {
      // var webConnection = new WebConnection();
      // if(state.webConnection == null){
        state.webConnection = new WebConnection(data.uri, data.uid);
        state.webConnection.startConnect();
      if(data.uri == '-1'){
        return;
      }
      state.webConnection = new WebConnection(data.uri, data.uid);
      state.webConnection.startConnect();
      // }
    },
    SET_CONNECTION_CLEAR: (state, data) => {
@@ -56,6 +59,9 @@
      state.webSocketMsg = data;
    },
    SET_WS_INFO: (state, data)=>{
      if(data.uri == '-1'){
        return;
      }
      state.uri = data.uri;
      state.uid = data.uid;
    }

 src/views/components/myTableV3.vue

@@ -122,7 +122,8 @@
            <template v-else>
              <!--点击弹出单元格内容-->
              <el-popover placement="top-start" trigger="click" :content="getPopoverContent(scope.row, column)">
                <span slot="reference" class="content-text">{{ scope.row[column.field] }}</span>
<!--                <span slot="reference" class="content-text">{{ scope.row[column.field] }}</span>-->
                <span slot="reference" class="content-text">{{ splitField(scope.row, column.field) }}</span>
              </el-popover>
            </template>
          </template>
@@ -187,13 +188,14 @@
</template>

<script>
import myButtonV2 from '@/views/components/myButtonV2'
import myButton from '@/views/components/myButton'
import mySwitch from './mySwitch'
import request from '@/utils/request'
import * as valid from '@/utils/validate'
import previewPicture from '@/views/components/previewPicture'
export default {
  import myButtonV2 from '@/views/components/myButtonV2'
  import myButton from '@/views/components/myButton'
  import mySwitch from './mySwitch'
  import request from '@/utils/request'
  import * as valid from '@/utils/validate'
  import previewPicture from '@/views/components/previewPicture'

  export default {
  components: { myButtonV2, myButton, mySwitch, previewPicture },
  props: {
    table: {
@@ -348,6 +350,28 @@
    this.initTable()
  },
  methods: {
    /**
     * 解决：field中属性套属性的情况。2023-04-25
     * @param row
     * @param field
     */
    splitField(row, field){
      if(field.indexOf('.') > -1){
        const arr = field.split('.');
        let fieldStr = '';
        for(let i=0, len=arr.length; i<len; i++){
          if(i == len - 1){
            fieldStr += arr[i];
          } else {
            fieldStr += arr[i] + '.';
          }
        }
        return eval('row.' + fieldStr);
      } else {
        return row[field];
      }
    },

    initTable() {
      if (this.table !== null) {
        Object.assign(this.myTable, this.table)

 src/views/tcp/connection/index.vue

New file
@@ -0,0 +1,115 @@
<template>
  <div class="app-main">
    <div class="base-container">
      <my-table-v3 ref="myTable" :filter="filterForm" :table="table" />
    </div>
  </div>
</template>

<script>
  import myTableV3 from '@/views/components/myTableV3';
  // import myButtonV2 from "@/views/components/myButtonV2";
  // import edit from "@/views/system/config/edit";

  export default {
    name: "Connection",
    components: {myTableV3},
    data(){
      return {

        /** 搜索条件*/
        filterForm: {

        },

        table: {
          showIndex: false, // 是否显示序号
          expand: false, // 是否显示详情数据
          checkBox: false, // 是否显示复选框
          url: globalConf.baseUrl + '/tcp/connection/list', // 请求地址
          // 工具条
          tools: {
            columnsCtrl: {// 列控制按钮
              show: false
            },
            generalExport: {// 通用导出按钮
              show: false
            }
          },
          columns: [
            { title: '通道ID', field: 'id', align: 'left', width: 260 },
            { title: '绑定终端', field: 'name', align: 'left', width: 200 },
            { title: '连接创建', field: 'createTimeMills', align: 'left', width: 170 },
            { title: '最后活跃', field: 'lastTime', align: 'left', width: 170},
            { title: '所属引擎', field: 'engineId', align: 'left', width: 130, formatter: row => {
                let title = '';
                switch (row.engineId) {
                  case 1:
                    title = 'TCP'
                    break
                  case 2:
                    title = 'WEBSOCKET'
                    break
                }
                return { value: title, type: 'primary' }
              }
            }
          ],
          // 操作信息
          operation: {
            show: true, // 显示操作列
            width: '200', // 列宽
            attr: [
              {
                title: '强制断开',
                checkPermission: 'tcp:connection:broken',
                events: row => {
                  this.broken(row)
                }
              }
            ]
          },
          paging: {
            show: true, // 显示分页
            // 分页信息
            page: {
              small: false,
              pageNum: 1,
              pageSize: 256,
              total: 0
            }
          }
        }

      }
    },

    methods: {
      // 查询table列表
      search(pageNum) {
        if (pageNum != undefined) {
          this.$refs.myTable.search({ pageNum: pageNum })
        } else {
          this.$refs.myTable.search()
        }
      },
      // 表单重置
      reset() {
        this.filterForm = {
          // configName: null,
          // configKey: null,
          // configType: null
        }
        this.search(1)
      },

      broken(row) {

      }
    }
  }
</script>

<style scoped>

</style>

 src/views/tcp/equip/index.vue

New file
@@ -0,0 +1,126 @@
<template>
  <div class="app-main">
    <div class="base-container">
      <my-table-v3 ref="myTable" :filter="filterForm" :table="table" />
    </div>
  </div>
</template>

<script>
  import myTableV3 from '@/views/components/myTableV3';
  // import {addEquip} from '@/api/tcp/equip'
  // import myButtonV2 from "@/views/components/myButtonV2";
  // import edit from "@/views/system/config/edit";

  export default {
    name: "Connection",
    components: {myTableV3},
    data(){
      return {

        /** 搜索条件*/
        filterForm: {
          name: null
        },

        table: {
          showIndex: false, // 是否显示序号
          expand: false, // 是否显示详情数据
          checkBox: false, // 是否显示复选框
          url: globalConf.baseUrl + '/tcp/equip/list', // 请求地址
          // 工具条
          tools: {
            columnsCtrl: {// 列控制按钮
              show: false
            },
            generalExport: {// 通用导出按钮
              show: false
            }
          },
          columns: [
            { title: '设备编号', field: 'num', align: 'left', width: 220 },
            { title: '创建时间', field: 'createTime', align: 'left', width: 170 },
            { title: '名称', field: 'name', align: 'left', width: 220 },
            { title: '数据协议', field: 'parameter.protocolResolverName', align: 'left', width: 120},
            { title: '所属机构', field: 'parameter.deptName', align: 'left', width: 170},
            { title: '备注', field: 'summary', align: 'left', width: 120},
            { title: '状态', field: 'status', align: 'left', width: 120, formatter: row => {
                let title = '';
                switch (row.status) {
                  case 1:
                    title = '在用'
                    break
                  case 0:
                    title = '禁用'
                    break
                  default:
                    title = '已删除'
                }
                return { value: title, type: 'primary' }
              }
            }
          ],
          // 操作信息
          operation: {
            show: true, // 显示操作列
            width: '120', // 列宽
            attr: [
              {
                title: '绑定用户',
                checkPermission: 'tcp:connection:broken',
                events: row => {
                  this.broken(row)
                }
              },
              {
                title: '删除设备',
                checkPermission: 'tcp:connection:broken',
                events: row => {
                  this.broken(row)
                }
              }
            ]
          },
          paging: {
            show: true, // 显示分页
            // 分页信息
            page: {
              small: false,
              pageNum: 1,
              pageSize: platformPageSize,
              total: 0
            }
          }
        }

      }
    },

    methods: {
      // 查询table列表
      search(pageNum) {
        if (pageNum != undefined) {
          this.$refs.myTable.search({ pageNum: pageNum })
        } else {
          this.$refs.myTable.search()
        }
      },
      // 表单重置
      reset() {
        this.filterForm = {
          name: null
        }
        this.search(1)
      },

      broken(row) {

      },

    }
  }
</script>

<style scoped>

</style>