修改表格

src/components/Table/index.vue

@@ -1,38 +1,75 @@
 <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 :style="{ 'min-height':minHeight + 'vh' }" 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">
+      <div v-if="isBtn" class="data-table-btn flex-end">
+        <el-button size="small" @click="handleAdd" plain type="primary">新增</el-button>
+      </div>
+      <template v-if="tableData.length">
+        <el-table :data="filteredTableData" :span-method="tableSpanMethod" show-summary border ref="table" :height="minHeight - 8 + 'vh'" class="table" style="width: 100%;overflow:auto;">
+          <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="colTips">
+                <el-tooltip :content="item.columnDescribe" placement="top">
+                  <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-column fixed="right" label="操作" width="100">
+            <template slot-scope="scope">
+              <el-button type="text" @click="handleEdit(scope.row)" size="small">编辑</el-button>
+              <el-button class="rmSc" type="text" @click="handleRemove(scope.row)" size="small">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+      <template v-else>
+        <NoData />
+      </template>
     </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="title">{{ tableTitle }}</div>
+          <div class="content">
+            <el-form ref="ruleForm" :model="tableForm" :label-width="labelWidth">
+              <el-row :gutter="20">
+                <el-col v-for="(item,index) in tableColsCopy" :key="index" :span="rows">
+                  <el-form-item :label="item.columnLabel">
+                    <template v-if="item.dataType == 'longtext' || item.dataType.includes('int')">
+                      <el-input size="small" v-model="tableForm[item.columnName]"></el-input>
+                    </template>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
           <div class="foot right t30">
-            <el-button size="medium" class="r24" type="primary">确定</el-button>
-            <el-button size="medium">取消</el-button>
+            <el-button size="medium" @click="handleOk" class="r24" type="primary">确定</el-button>
+            <el-button @click="flag = false" size="medium">取消</el-button>
+          </div>
+        </div>
+      </Dialog>
+      <Dialog :flag="rmFlag">
+        <div class="airportInfoDialog">
+          <div class="title del-title">删除</div>
+          <div class="content del-content"><span class="el-icon-error error r10"></span>您是否确认删除<span class="error l10">{{ rmTitle }}</span> ？</div>
+          <div class="foot right Delfoot t30">
+            <el-button size="medium" class="r24" @click="tableRemove" type="danger">删除</el-button>
+            <el-button size="medium" @click="rmFlag = false">取消</el-button>
           </div>
         </div>
       </Dialog>
@@ -43,7 +80,8 @@
 <script>
 import { setTableFilters } from '@/utils/table'
 import Dialog from '@/layout/components/Dialog/index.vue'
-import { Query } from '@/api/dataIntegration'
+import NoData from '@/components/nodata'
+import { Query, GeneralDataReception } from '@/api/dataIntegration'
 export default {
   name: 'DataTable',
   props: {
@@ -53,52 +91,33 @@ export default {
     width: {
       type: String,
       default: '560px'
+    },
+    rows: {
+      type: Number,
+      default: 3
+    },
+    labelWidth: {
+      type: String,
+      default: '80px'
+    },
+    minHeight: {
+      type: Number,
+      default: 65
+    },
+    isBtn: {
+      type: Boolean,
+      default: true
     }
   },
-  components: { Dialog },
+  components: { Dialog, NoData },
   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" },
-      ], //表格数据
+      serviceId: null,
+      rmFlag: false,
+      tableCols: [], //表头数据
+      tableData: [], //表格数据
       tableColsCopy: [], //表头数据缓存
       tableDataFilters: {}, //表头-下拉数据
       filterValues: {}, //表头-下拉-选中数据
@@ -106,7 +125,12 @@ export default {
       tableGroups: [], //表格分组数据
       colShowFilter: '', //表头-下拉-箭头
       spanArr: [], //表格分组数据缓存
-      pos: 0 //表格分组计数
+      pos: 0, //表格分组计数
+      tableTitle: '新增', //弹框标题
+      tableType: 'add', //弹框类型=新增/编辑
+      tableForm: {}, //弹框表单
+      rmTitle: '', //弹框-删除-标题
+      tableObj: {} //增/删/改数据缓存
     }
   },
   computed: {
@@ -140,21 +164,61 @@ export default {
     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('获取表格数据失败')
+      try {
+        this.loading = true
+        const { code, returnData } = await Query({
+          id: this.dataId,
+          dataContent: []
+        })
+        if (code == 0) {
+          this.tableData = returnData.listValues
+          this.tableCols = returnData.columnSet
+          this.serviceId = returnData.submitID
+          setTimeout(() => {
+            this.initTableData()
+            this.loading = false
+          }, 100);
+        } else {
+          this.loading = false
+          this.$message.error('获取表格数据失败')
+        }
+      } catch (error) {
+        this.loading = false
+        console.log(error)
+      }
+    },
+    //表格-增/删/改
+    async generalDataReception (data) {
+      try {
+        const { code, message } = await GeneralDataReception({
+          serviceId: this.serviceId,
+          dataContent: JSON.stringify(data),
+        })
+        if (code == 0) {
+          this.$message.success(message)
+          this.getQuery()
+          this.flag = false
+          this.rmFlag = false
+          this.tableObj = {}
+          this.tableForm = {}
+        } else {
+          this.$message.error(message)
+          this.flag = false
+          this.rmFlag = false
+          this.tableObj = {}
+          this.tableForm = {}
+        }
+      } catch (error) {
+        console.log(error)
+        this.flag = false
+        this.rmFlag = false
+        this.tableObj = {}
+        this.tableForm = {}
       }
     },
+    //初始化表格
     initTableData () {
       this.tableColsCopy = this.tableCols.filter(item => item.needShow)
       this.tableDataCopy = _.cloneDeep(this.tableData)
@@ -178,9 +242,6 @@ export default {
         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]
           ) {
@@ -201,6 +262,7 @@ export default {
     popoverHideHandler () {
       this.colShowFilter = ''
     },
+    //分组
     tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
       if (this.tableGroups.includes(column['property'])) {
         const _row = this.spanArr[rowIndex]
@@ -211,6 +273,54 @@ export default {
         }
       }
     },
+    //弹框-确定
+    handleOk () {
+      this.submitClickHandler()
+    },
+    //滚动
+    tableLoad () {
+      console.log('d')
+    },
+    //表格-新增
+    handleAdd () {
+      this.flag = true
+      this.tableType = 'add'
+      this.tableTitle = '新增'
+      this.tableForm = {}
+    },
+    //表格-编辑
+    handleEdit (row) {
+      this.flag = true
+      this.tableType = 'edit'
+      this.tableTitle = '编辑'
+      this.tableForm = row
+    },
+    // 新增/编辑-确认
+    submitClickHandler () {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          if (this.tableType == 'add') {
+            this.tableForm.event = 1
+          } else {
+            this.tableForm.event = 2
+          }
+          this.generalDataReception(this.tableForm)
+        } else {
+          return false
+        }
+      });
+    },
+    //表格-删除
+    handleRemove (row) {
+      this.rmFlag = true
+      this.rmTitle = row.className
+      this.tableObj = row
+    },
+    //表格-删除-确认
+    tableRemove () {
+      this.tableObj.event = 3
+      this.generalDataReception(this.tableObj)
+    }
   }
 }
 </script>
@@ -218,6 +328,9 @@ export default {
 <style lang="scss" scoped>
 .data-table {
   width: 100%;
+  background-color: #fff;
+  padding: 20px;
+  margin-top: 20px;
   ::v-deep .table {
     width: 100%;
     .cell {
@@ -267,6 +380,21 @@ export default {
         }
       }
     }
+    .rmSc {
+      span {
+        color: #f56c6c;
+      }
+    }
+    .el-table__fixed-right {
+      thead {
+        div {
+          color: #101116;
+        }
+      }
+    }
+  }
+  .data-table-btn {
+    margin-bottom: 20px;
   }
 }
 .filter-arrow {

src/styles/index.scss

@@ -100,6 +100,11 @@ li {
   justify-content: space-between;
 }
 
+.flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .flex-wrap {
   display: flex;
 }

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

@@ -10,7 +10,7 @@
 <template>
   <div class="protocol-home">
     <div class="wrap">
-      <div class="protocol-header flex">
+      <!-- <div class="protocol-header flex">
         <div class="status flex-wrap">
           <div class="manageTitle">协议管理</div>
           <div class="status1"><span class="icon"></span>内置</div>
@@ -19,9 +19,9 @@
         <div class="addBtn">
           <el-button class="button-white" size="small" @click="showAddDialog()">新增</el-button>
         </div>
-      </div>
+      </div> -->
       <div class="protocol-content">
-        <DataTable data-id="1" width="800px" />
+        <DataTable data-id="1" :rows="12" labelWidth="100px" :minHeight="70" width="800px" />
         <!-- <el-row :gutter="24">
           <el-col v-for="item in dataList" :key="item.protocolId" :span="4">
             <div class="grid-content">