新增table

public/config.js

@@ -4,5 +4,6 @@ PLATFROM_CONFIG.baseUrl = "http://106.14.243.117:9111"; // http请求地址
 PLATFROM_CONFIG.appSecret = "9inu7zpllz1folzsljm498dcpi0lsog1"; //appSecret
 PLATFROM_CONFIG.appId = "q7kdjmmaf0kerwpf"; //appid
 // PLATFROM_CONFIG.baseURLCA = "http://106.14.243.117:9114";
-PLATFROM_CONFIG.baseURLCA = "http://192.168.3.17:8080";
+// PLATFROM_CONFIG.baseURLCA = "http://192.168.3.17:8080";
+PLATFROM_CONFIG.baseURLCA = "http://192.168.3.243:8093";
 // PLATFROM_CONFIG.baseURLCA = "http://ts.free.idcfengye.com";

src/components/Table/index.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="data-table">
+    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="data-table-content">
+      <el-table :data="filteredTableData" :span-method="tableSpanMethod" show-summary border ref="table" class="table" style="width: 100%">
+        <el-table-column v-for="(item,index) in tableColsCopy" :sortable="item.needSort ? true : false" :key="index" :prop="item.columnName" :label="item.columnLabel">
+          <template #header>
+            <span class="ddd">
+              <el-tooltip :content="item.columnLabel" placement="top"><span>{{ item.columnLabel }}</span>
+                <span>{{ item.columnLabel }}</span>
+              </el-tooltip>
+            </span>
+            <span v-if="item.needFilters">
+              <el-popover placement="bottom" trigger="click" @show="popoverShowHandler(item.columnName)" @hide="popoverHideHandler">
+                <i slot="reference" :class="['filter-arrow', 'el-icon-arrow-down', arrowClass(item.columnName)]" />
+                <el-form>
+                  <el-form-item :label="item.columnLabel">
+                    <el-select v-model="filterValues[item.columnName]" size="small" placeholder="筛选" default-first-option filterable clearable>
+                      <el-option v-for="(option, optionIndex) in tableDataFilters[item.columnName]" :key="option.value + optionIndex" :value="option.value" :label="option.text" />
+                    </el-select>
+                  </el-form-item>
+                </el-form>
+              </el-popover>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="data-table-dialog">
+      <Dialog :width="width" :flag="flag">
+        <div class="dialog-content">
+          <div class="title">列设置</div>
+          <div class="content">ddd</div>
+          <div class="foot right t30">
+            <el-button size="medium" class="r24" type="primary">确定</el-button>
+            <el-button size="medium">取消</el-button>
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { setTableFilters } from '@/utils/table'
+import Dialog from '@/layout/components/Dialog/index.vue'
+import { Query } from '@/api/dataIntegration'
+export default {
+  name: 'DataTable',
+  props: {
+    dataId: {
+      type: String || Number
+    },
+    width: {
+      type: String,
+      default: '560px'
+    }
+  },
+  components: { Dialog },
+  data () {
+    return {
+      loading: false,
+      flag: false,
+      tableCols: [
+        {
+          "columnName": "structureName1",//查询项名称-取值字段名
+          "columnLabel": "名称1",//表头名
+          "columnDescribe": null,//表头浮窗提示内容
+          "needShow": 1,//是否需要显示
+          "needGroup": 0,//是否需要分组合并
+          "needSort": 1,//是否需要排序
+          "needFilters": 1,//是否需要过滤'
+          "listqueryTemplateID": "下拉查询模板",
+          "dataType": "string",//数据类型
+        },
+        {
+          "columnName": "structureName2",//查询项名称-取值字段名
+          "columnLabel": "名称2",//表头名
+          "columnDescribe": null,//表头浮窗提示内容
+          "needShow": 1,//是否需要显示
+          "needGroup": 0,//是否需要分组合并
+          "needSort": 0,//是否需要排序
+          "needFilters": 1,//是否需要过滤'
+          "listqueryTemplateID": "下拉查询模板",
+          "dataType": "string",//数据类型
+        },
+        {
+          "columnName": "structureName3",//查询项名称-取值字段名
+          "columnLabel": "名称3",//表头名
+          "columnDescribe": null,//表头浮窗提示内容
+          "needShow": 1,//是否需要显示
+          "needGroup": 1,//是否需要分组合并
+          "needSort": 0,//是否需要排序
+          "needFilters": 0,//是否需要过滤'
+          "listqueryTemplateID": "下拉查询模板",
+          "dataType": "string",//数据类型
+        }
+      ], //表头数据
+      tableData: [
+        { "dataStructureID": 1, "structureName1": "机器维护数据1-aa", "structureName2": "机器维护数据2-bb", "structureName3": "机器维护数据3-cc" },
+        { "dataStructureID": 2, "structureName1": "机器维护数据1-aa", "structureName2": "机器维护数据2-bb", "structureName3": "机器维护数据3-cc" },
+      ], //表格数据
+      tableColsCopy: [], //表头数据缓存
+      tableDataFilters: {}, //表头-下拉数据
+      filterValues: {}, //表头-下拉-选中数据
+      tableDataCopy: [], //缓存table数据
+      tableGroups: [], //表格分组数据
+      colShowFilter: '', //表头-下拉-箭头
+      spanArr: [], //表格分组数据缓存
+      pos: 0 //表格分组计数
+    }
+  },
+  computed: {
+    //设置表头-下拉-箭头样式
+    arrowClass () {
+      return function (prop) {
+        let classString = ''
+        if (this.colShowFilter === prop) {
+          return 'arrow-active'
+        }
+        if (Object.entries(this.tableDataFilters).find(([key, arr]) => this.filterValues[prop])) {
+          classString += 'arrow-blue'
+        }
+        return classString
+      }
+    },
+    //设置表头-下拉-选中数据
+    filteredTableData () {
+      return this.tableData.filter(item => {
+        let flag = true
+        Object.entries(this.filterValues).forEach(([key, value]) => {
+          if (value !== '' && item[key] !== value) {
+            flag = false
+          }
+        })
+        return flag
+      })
+    }
+  },
+  created () {
+    this.getQuery()
+  },
+  methods: {
+    async getQuery () {
+      const { code, returnData, columnSet } = await Query({
+        id: this.dataId,
+        dataContent: []
+      })
+      if (code == 0) {
+        this.tableData = returnData
+        this.tableCols = columnSet
+        setTimeout(() => {
+          this.initTableData()
+        }, 100);
+      } else {
+        this.$message.error('获取表格数据失败')
+      }
+    },
+    initTableData () {
+      this.tableColsCopy = this.tableCols.filter(item => item.needShow)
+      this.tableDataCopy = _.cloneDeep(this.tableData)
+      const datas = _.cloneDeep(this.tableColsCopy)
+      datas.forEach(item => {
+        this.tableDataFilters[item.columnName] = []
+        if (item.needGroup) {
+          this.tableGroups.push(item.columnName)
+        }
+        // this.filterValues[item.columnName] = ''
+      });
+      setTableFilters(this.tableData, this.tableDataFilters)
+      this.tableGroup(this.tableData)
+    },
+    //分组
+    tableGroup (tableData) {
+      const spanArr = []
+      let pos = 0
+      let ifYj = this.tableGroups[0]
+      for (let i = 0; i < tableData.length; i++) {
+        if (i === 0) {
+          spanArr.push(1)
+        } else {
+          // this.tableGroups.forEach((item, index) => {
+          //   ifYj += tableData[i][item] === tableData[i - 1][item]
+          // })
+          if (
+            tableData[i][ifYj] === tableData[i - 1][ifYj]
+          ) {
+            spanArr[pos] += 1
+            spanArr.push(0)
+          } else {
+            spanArr.push(1)
+            pos = i
+          }
+        }
+      }
+      this.spanArr = spanArr
+      this.pos = pos
+    },
+    popoverShowHandler (prop) {
+      this.colShowFilter = prop
+    },
+    popoverHideHandler () {
+      this.colShowFilter = ''
+    },
+    tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
+      if (this.tableGroups.includes(column['property'])) {
+        const _row = this.spanArr[rowIndex]
+        const _col = _row > 0 ? 1 : 0
+        return {
+          rowspan: _row,
+          colspan: _col
+        }
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.data-table {
+  width: 100%;
+  ::v-deep .table {
+    width: 100%;
+    .cell {
+      padding: 0;
+      text-align: center;
+      font-size: 14px;
+      font-family: Helvetica, "Microsoft YaHei";
+      letter-spacing: 0;
+    }
+    .cell-click {
+      cursor: pointer;
+      color: #2d7cff;
+      &.cell-clicked {
+        color: purple;
+      }
+    }
+    .el-table__header-wrapper {
+      .cell {
+        font-weight: bold;
+        color: #101116;
+      }
+      .has-gutter {
+        tr {
+          .bgl-huang {
+            background: #fcf0b1;
+          }
+        }
+      }
+    }
+    .el-table__body-wrapper {
+      tr.bgl-hui {
+        background: #d2d6df;
+        td {
+          background: #d2d6df;
+        }
+        &.redBorder {
+          position: relative;
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 2px;
+            background: #e83f82;
+          }
+        }
+      }
+    }
+  }
+}
+.filter-arrow {
+  cursor: pointer;
+  transition: 0.3s transform;
+  &.arrow-active {
+    transform: rotate(-180deg);
+  }
+  &.arrow-blue {
+    color: #2d7cff;
+    font-weight: bold;
+  }
+}
+.el-select-dropdown__item.hover {
+  background: #d2d6df;
+}
+</style>

src/utils/request.js

@@ -54,7 +54,7 @@ service.interceptors.response.use(
     const res = response.data
 
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== '0') {
+    if (res.code != '0') {
       Message({
         message: res.message || 'Error',
         type: 'error',

src/views/systemSettings/views/protocolManagement/protocolHome.vue

@@ -21,7 +21,8 @@
         </div>
       </div>
       <div class="protocol-content">
-        <el-row :gutter="24">
+        <DataTable data-id="1" width="800px" />
+        <!-- <el-row :gutter="24">
           <el-col v-for="item in dataList" :key="item.protocolId" :span="4">
             <div class="grid-content">
               <div :class="item.protocolStatus=='1' ? 'success' : 'error'" class="grid-content-bg"></div>
@@ -30,14 +31,13 @@
                   <el-tooltip class="item" effect="dark" :content="item.protocolName" placement="bottom">
                     <div class="name">{{ item.protocolName }}</div>
                   </el-tooltip>
-                  <!-- <div class="name">{{ item.protocolName }}</div> -->
                   <i class="loger" @click="showEditDialog(item)" />
                 </div>
                 <i class="el-icon-close icon" @click="showRemoveDialog(item)" />
               </div>
             </div>
           </el-col>
-        </el-row>
+        </el-row> -->
       </div>
       <!--新增/编辑-->
       <Dialog :flag="editDialogVisible" width="508px" :show-flag="true">
@@ -49,11 +49,7 @@
                 <el-input v-model="ruleForm.protocolName" size="medium" placeholder="请输入协议名称（必填）" />
               </el-form-item>
               <el-form-item label="协议类型" prop="nodeType">
-                <el-select
-                  v-model="ruleForm.nodeType"
-                  size="small"
-                  placeholder="请选择协议类型"
-                >
+                <el-select v-model="ruleForm.nodeType" size="small" placeholder="请选择协议类型">
                   <el-option label="内置" value="1"></el-option>
                   <el-option label="扩展" value="2"></el-option>
                 </el-select>
@@ -99,11 +95,11 @@
 
 <script>
 import Dialog from '@/layout/components/Dialog/index.vue'
-import { GeneralDataReception,Query  } from '@/api/dataIntegration'
-
+import { GeneralDataReception, Query } from '@/api/dataIntegration'
+import DataTable from '@/components/Table'
 export default {
   name: 'ProtocolHome',
-  components: { Dialog },
+  components: { Dialog, DataTable },
   data () {
     return {
       dataList: [],
@@ -129,17 +125,17 @@ export default {
     }
   },
   created () {
-    this.getList()
+    //this.getList()
   },
   methods: {
-    async getList() {
+    async getList () {
       try {
         const res = await Query({
           id: 1,
           dataContent: []
         });
         if (res.code === "0") {
-            this.dataList = res.returnData;
+          this.dataList = res.returnData;
         } else {
           this.$message.error(res.message ?? "失败");
         }
@@ -173,7 +169,7 @@ export default {
     },
     // 重置
     resetForm (formName) {
-      this.ruleForm={};
+      this.ruleForm = {};
       this.$refs[formName].resetFields()
       this.editDialogVisible = false
     },
@@ -349,7 +345,7 @@ export default {
         }
       }
     }
-    .r25{
+    .r25 {
       color: #ffffff;
     }
   }