Merge branch 'master' of http://120.26.64.82:3000/BFFE/CABaggageData2.0

src/components/Table/index.vue

@@ -1,38 +1,88 @@
 <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" stripe 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" class="rmScs">编辑</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-input size="small" v-model="tableForm[item.columnName]"></el-input>
+                  </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>
@@ -41,183 +91,267 @@
 </template>
 
 <script>
-import { setTableFilters } from '@/utils/table'
-import Dialog from '@/layout/components/Dialog/index.vue'
-import { Query } from '@/api/dataIntegration'
+import { setTableFilters } from "@/utils/table";
+import Dialog from "@/layout/components/Dialog/index.vue";
+import NoData from "@/components/nodata";
+import { Query, GeneralDataReception } from "@/api/dataIntegration";
 export default {
-  name: 'DataTable',
+  name: "DataTable",
   props: {
+    //接口ID
     dataId: {
-      type: String || Number
+      type: String || Number,
     },
+    //弹框宽度
     width: {
       type: String,
-      default: '560px'
-    }
+      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: {}, //表头-下拉-选中数据
       tableDataCopy: [], //缓存table数据
       tableGroups: [], //表格分组数据
-      colShowFilter: '', //表头-下拉-箭头
+      colShowFilter: "", //表头-下拉-箭头
       spanArr: [], //表格分组数据缓存
-      pos: 0 //表格分组计数
-    }
+      pos: 0, //表格分组计数
+      tableTitle: "新增", //弹框标题
+      tableType: "add", //弹框类型=新增/编辑
+      tableForm: {}, //弹框表单
+      rmTitle: "", //弹框-删除-标题
+      tableObj: {}, //增/删/改数据缓存
+    };
   },
   computed: {
     //设置表头-下拉-箭头样式
     arrowClass () {
       return function (prop) {
-        let classString = ''
+        let classString = "";
         if (this.colShowFilter === prop) {
-          return 'arrow-active'
+          return "arrow-active";
         }
-        if (Object.entries(this.tableDataFilters).find(([key, arr]) => this.filterValues[prop])) {
-          classString += 'arrow-blue'
+        if (
+          Object.entries(this.tableDataFilters).find(
+            ([key, arr]) => this.filterValues[prop]
+          )
+        ) {
+          classString += "arrow-blue";
         }
-        return classString
-      }
+        return classString;
+      };
     },
     //设置表头-下拉-选中数据
     filteredTableData () {
-      return this.tableData.filter(item => {
-        let flag = true
+      return this.tableData.filter((item) => {
+        let flag = true;
         Object.entries(this.filterValues).forEach(([key, value]) => {
-          if (value !== '' && item[key] !== value) {
-            flag = false
+          if (value !== "" && item[key] !== value) {
+            flag = false;
           }
-        })
-        return flag
-      })
-    }
+        });
+        return flag;
+      });
+    },
   },
   created () {
-    this.getQuery()
+    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)
-      const datas = _.cloneDeep(this.tableColsCopy)
-      datas.forEach(item => {
-        this.tableDataFilters[item.columnName] = []
+      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.tableGroups.push(item.columnName);
         }
         // this.filterValues[item.columnName] = ''
       });
-      setTableFilters(this.tableData, this.tableDataFilters)
-      this.tableGroup(this.tableData)
+      setTableFilters(this.tableData, this.tableDataFilters);
+      this.tableGroup(this.tableData);
     },
     //分组
     tableGroup (tableData) {
-      const spanArr = []
-      let pos = 0
-      let ifYj = this.tableGroups[0]
+      const spanArr = [];
+      let pos = 0;
+      let ifYj = this.tableGroups[0];
       for (let i = 0; i < tableData.length; i++) {
         if (i === 0) {
-          spanArr.push(1)
+          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)
+          if (tableData[i][ifYj] === tableData[i - 1][ifYj]) {
+            spanArr[pos] += 1;
+            spanArr.push(0);
           } else {
-            spanArr.push(1)
-            pos = i
+            spanArr.push(1);
+            pos = i;
           }
         }
       }
-      this.spanArr = spanArr
-      this.pos = pos
+      this.spanArr = spanArr;
+      this.pos = pos;
     },
     popoverShowHandler (prop) {
-      this.colShowFilter = prop
+      this.colShowFilter = prop;
     },
     popoverHideHandler () {
-      this.colShowFilter = ''
+      this.colShowFilter = "";
     },
+    //分组
     tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
-      if (this.tableGroups.includes(column['property'])) {
-        const _row = this.spanArr[rowIndex]
-        const _col = _row > 0 ? 1 : 0
+      if (this.tableGroups.includes(column["property"])) {
+        const _row = this.spanArr[rowIndex];
+        const _col = _row > 0 ? 1 : 0;
         return {
           rowspan: _row,
-          colspan: _col
-        }
+          colspan: _col,
+        };
       }
     },
-  }
-}
+    //弹框-确定
+    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>
 
 <style lang="scss" scoped>
 .data-table {
   width: 100%;
+  background-color: #fff;
+  padding: 20px;
+  margin-top: 20px;
   ::v-deep .table {
     width: 100%;
     .cell {
@@ -267,6 +401,44 @@ export default {
         }
       }
     }
+    .rmScs {
+      width: 48px;
+      height: 24px;
+      border-color: #9ebbf7;
+      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      float: left;
+      margin-right: 2px;
+      span {
+        color: #2d67e3;
+      }
+    }
+    .rmSc {
+      width: 48px;
+      height: 24px;
+      background: #eb2f3b;
+      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span {
+        color: #ffffff;
+      }
+    }
+    .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/machineManagement/machineHome.vue

@@ -10,7 +10,14 @@
 <template>
   <div class="protocol-home">
     <div class="wrap">
-      <div class="protocol-header flex">
+      <DataTable
+        data-id="3"
+        :rows="12"
+        labelWidth="100px"
+        :minHeight="70"
+        width="800px"
+      />
+      <!-- <div class="protocol-header flex">
         <div class="status flex-wrap">
           <div class="manageTitle">机器维护</div>
           <div class="status1"><span class="icon"></span>物理机</div>
@@ -22,8 +29,8 @@
             >新增</el-button
           >
         </div>
-      </div>
-      <div class="protocol-content">
+      </div> -->
+      <!-- <div class="protocol-content">
         <el-row :gutter="24">
           <el-col v-for="item in dataList" :key="item.deployNodeID" :span="4">
             <div class="grid-content">
@@ -51,7 +58,7 @@
             </div>
           </el-col>
         </el-row>
-      </div>
+      </div> -->
       <!--新增/编辑-->
       <Dialog :flag="editDialogVisible" width="508px" :show-flag="true">
         <div class="airportInfoDialog dialog-public-background">
@@ -144,12 +151,13 @@
 
 <script>
 import Dialog from "@/layout/components/Dialog/index.vue";
-import { GeneralDataReception,Query } from "@/api/dataIntegration";
+import { GeneralDataReception, Query } from "@/api/dataIntegration";
 import { validateIP } from "@/utils/validate";
+import DataTable from "@/components/Table";
 
 export default {
   name: "ProtocolHome",
-  components: { Dialog },
+  components: { Dialog, DataTable },
   data() {
     return {
       dataList: [],
@@ -184,17 +192,17 @@ export default {
     };
   },
   created() {
-    this.getList()
+    // this.getList();
   },
   methods: {
     async getList() {
       try {
         const res = await Query({
           id: 2,
-          dataContent: []
+          dataContent: [],
         });
         if (res.code === "0") {
-            this.dataList = res.returnData
+          this.dataList = res.returnData;
         } else {
           this.$message.error(res.message ?? "失败");
         }
@@ -228,7 +236,7 @@ export default {
     },
     // 重置
     resetForm(formName) {
-      this.ruleForm = {}
+      this.ruleForm = {};
       this.$refs[formName].resetFields();
       this.editDialogVisible = false;
     },
@@ -243,12 +251,12 @@ export default {
       try {
         const res = await GeneralDataReception({
           serviceId: "2",
-          dataContent:  JSON.stringify(this.rmObj),
+          dataContent: JSON.stringify(this.rmObj),
         });
         if (res.code === "0") {
           this.removeDialogVisible = false;
           this.$message.success("删除成功");
-          this.getList()
+          this.getList();
         } else {
           this.$message.error(res.message ?? "失败");
         }
@@ -265,7 +273,7 @@ export default {
         });
         if (res.code === "0") {
           this.$message.success(res.message ?? "成功");
-          this.getList()
+          this.getList();
         } else {
           this.$message.error(res.message ?? "失败");
         }
@@ -282,7 +290,7 @@ export default {
         });
         if (res.code === "0") {
           this.$message.success(res.message ?? "成功");
-          this.getList()
+          this.getList();
         } else {
           this.$message.error(res.message ?? "失败");
         }

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">

src/views/systemSettings/views/queryTemplate/queryTemplate.vue

@@ -8,14 +8,21 @@
 -->
 <template>
   <div class="airportInfo">
+    <DataTable
+      data-id="4"
+      :rows="12"
+      labelWidth="100px"
+      :minHeight="70"
+      width="800px"
+    />
     <!--搜索-->
-    <div class="airportInfo-search">
+    <!-- <div class="airportInfo-search">
       <Search title="查询模板" @getSearchData="getSearchData" :isSearch="false">
         <button @click="handleAdd" class="btnAdd">新增</button>
       </Search>
-    </div>
+    </div> -->
     <!--内容区域-->
-    <div class="airportInfo-content">
+    <!-- <div class="airportInfo-content">
       <el-row :gutter="24">
         <el-col
           v-for="(item, index) in arr"
@@ -35,7 +42,6 @@
                 >
                   <div class="title">{{ item.queryTemplateName }}</div>
                 </el-tooltip>
-                <!-- <div class="title">{{ item.typeName }}</div> -->
                 <div @click="airEdit(item)" class="edit_log"></div>
               </div>
               <div class="close">
@@ -49,8 +55,7 @@
           </div>
         </el-col>
       </el-row>
-      <!-- <img v-if="!arr.length" src="../../../assets/logo/nodata.png" /> -->
-    </div>
+    </div> -->
     <!--删除弹框-->
     <Dialog :flag="flag">
       <div class="airportInfoDialog">
@@ -86,9 +91,10 @@ import { findarrays } from "@/utils/validate";
 import { AirlinesInquiry } from "@/api/SystemSettings";
 import { exceptiontype, exceptionadd, exceptiondel } from "@/api/acquisition";
 import { GeneralDataReception, Query } from "@/api/dataIntegration";
+import DataTable from "@/components/Table";
 export default {
   name: "AirportInfo",
-  components: { Search, Dialog },
+  components: { Search, Dialog, DataTable },
   data() {
     return {
       arr: [
@@ -132,7 +138,7 @@ export default {
     };
   },
   created() {
-    this.getAirlines();
+    // this.getAirlines();
     // this.exceptionlist();
   },
   computed: {

src/views/systemSettings/views/serviceManagement/serviceHome.vue

@@ -9,23 +9,24 @@
 <template>
   <div class="service-home">
     <div class="wrap">
-      <div class="service-header flex">
+      <DataTable
+        data-id="2"
+        :rows="12"
+        labelWidth="110px"
+        :minHeight="70"
+        width="800px"
+      />
+      <!-- <div class="service-header flex">
         <div class="manageTitle">服务管理</div>
         <div class="btn-create">
-          <el-button
-            class="btn-white"
-            size="small"
-            @click="showCreateDialog"
-          >新增</el-button>
+          <el-button class="btn-white" size="small" @click="showCreateDialog"
+            >新增</el-button
+          >
         </div>
       </div>
       <div class="service-content">
         <el-row :gutter="24">
-          <el-col
-            v-for="item in serviceList"
-            :key="item.serviceID"
-            :span="4"
-          >
+          <el-col v-for="item in serviceList" :key="item.serviceID" :span="4">
             <div class="grid-content">
               <div class="grid-content-hand flex">
                 <div class="title flex-wrap">
@@ -37,29 +38,20 @@
                   >
                     <div class="name">{{ item.serviceName }}</div>
                   </el-tooltip>
-                  <!-- <div class="name">{{ item.serviceName }}</div> -->
-                  <i
-                    class="loger"
-                    @click="btnEditClickHandler(item)"
-                  />
+                  <i class="loger" @click="btnEditClickHandler(item)" />
                 </div>
-                <i
-                  class="el-icon-close icon"
-                  @click="showDeleteDialog(item)"
-                />
+                <i class="el-icon-close icon" @click="showDeleteDialog(item)" />
               </div>
             </div>
           </el-col>
         </el-row>
-      </div>
+      </div> -->
       <!--删除弹框-->
-      <Dialog :flag="deleteDialogVisible">
+      <!-- <Dialog :flag="deleteDialogVisible">
         <div class="dialog-delete">
           <div class="del-title">删除服务</div>
           <div class="content er">
-            <div class="log">
-              你是否确认删除{{ delObj.serviceName }}？
-            </div>
+            <div class="log">你是否确认删除{{ delObj.serviceName }}？</div>
           </div>
           <div class="del-foot right t30">
             <el-button
@@ -67,19 +59,15 @@
               class="r25 r26"
               type="danger"
               @click="deleteSubmitHandler"
-            >删除</el-button>
-            <el-button
-              size="medium"
-              class="r26"
-              @click="hideDeleteDialog"
-            >取消</el-button>
+              >删除</el-button
+            >
+            <el-button size="medium" class="r26" @click="hideDeleteDialog"
+              >取消</el-button
+            >
           </div>
         </div>
       </Dialog>
-      <Dialog
-        :flag="createDialogVisible"
-        width="600px"
-      >
+      <Dialog :flag="createDialogVisible" width="600px">
         <div class="dialog-create">
           <div class="title">新增服务</div>
           <main class="content">
@@ -92,20 +80,14 @@
               label-width="82px"
               size="mini"
             >
-              <el-form-item
-                label="服务名称"
-                prop="serviceName"
-              >
+              <el-form-item label="服务名称" prop="serviceName">
                 <el-input
                   v-model="createForm.serviceName"
                   placeholder="请输入服务名称"
                   clearable
                 />
               </el-form-item>
-              <el-form-item
-                label="描述"
-                prop="serviceDescribe"
-              >
+              <el-form-item label="描述" prop="serviceDescribe">
                 <el-input
                   v-model="createForm.serviceDescribe"
                   placeholder="请输入描述"
@@ -121,10 +103,7 @@
                   <el-radio :label="1">否</el-radio>
                 </el-radio-group>
               </el-form-item>
-              <el-form-item
-                label="来源"
-                prop="protocolID"
-              >
+              <el-form-item label="来源" prop="protocolID">
                 <el-select
                   v-model="createForm.protocolID"
                   placeholder="请选择来源"
@@ -148,10 +127,7 @@
                   clearable
                 />
               </el-form-item>
-              <el-form-item
-                label="来源配置"
-                prop="connectConfig"
-              >
+              <el-form-item label="来源配置" prop="connectConfig">
                 <el-input
                   v-model="createForm.connectConfig"
                   placeholder="请输入来源配置"
@@ -169,159 +145,169 @@
               type="primary"
               class="r25 r26"
               @click="createSubmitHandler"
-            >提交</el-button>
-            <el-button
-              size="medium"
-              class="r26"
-              @click="hideCreateDialog"
-            >取消</el-button>
+              >提交</el-button
+            >
+            <el-button size="medium" class="r26" @click="hideCreateDialog"
+              >取消</el-button
+            >
           </div>
         </div>
-      </Dialog>
+      </Dialog> -->
     </div>
   </div>
 </template>
 
 <script>
-import Dialog from '@/layout/components/Dialog/index.vue'
-import { GeneralDataReception, Query } from '@/api/dataIntegration'
-import { regular } from '@/utils/validate'
-
+import Dialog from "@/layout/components/Dialog/index.vue";
+import { GeneralDataReception, Query } from "@/api/dataIntegration";
+import { regular } from "@/utils/validate";
+import DataTable from "@/components/Table";
 export default {
-  name: 'ProtocolHome',
-  components: { Dialog },
+  name: "ProtocolHome",
+  components: { Dialog, DataTable },
   data() {
     return {
       serviceList: [],
       createDialogVisible: false,
       createForm: {
-        serviceName: '',
-        serviceDescribe: '',
+        serviceName: "",
+        serviceDescribe: "",
         isAsynchronous: 0,
-        protocolID: '',
-        threads: '',
-        connectConfig: ''
+        protocolID: "",
+        threads: "",
+        connectConfig: "",
       },
       createFormRules: {
-        serviceName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
-        protocolID: [{ required: true, message: '请选择来源', trigger: 'blur' }],
+        serviceName: [
+          { required: true, message: "请输入服务名称", trigger: "blur" },
+        ],
+        protocolID: [
+          { required: true, message: "请选择来源", trigger: "blur" },
+        ],
         threads: [
-          { required: true, message: '请输入并发线程数', trigger: 'blur' },
-          { pattern: regular.positiveInteger, message: '请输入正整数', trigger: ['blur', 'change'] }
-        ]
+          { required: true, message: "请输入并发线程数", trigger: "blur" },
+          {
+            pattern: regular.positiveInteger,
+            message: "请输入正整数",
+            trigger: ["blur", "change"],
+          },
+        ],
       },
       protocolList: [],
       deleteDialogVisible: false,
-      delObj: {}
-    }
+      delObj: {},
+    };
   },
   mounted() {
-    this.getServiceList()
+    // this.getServiceList();
   },
   methods: {
     // 新增-弹框
     showCreateDialog() {
-      this.getProtocolList()
-      this.createDialogVisible = true
+      this.getProtocolList();
+      this.createDialogVisible = true;
     },
     // 新增-提交
     createSubmitHandler() {
-      this.$refs['createForm'].validate(valid => {
+      this.$refs["createForm"].validate((valid) => {
         if (valid) {
-          this.createService()
+          this.createService();
         }
-      })
+      });
     },
     // 新增-关闭
     hideCreateDialog() {
-      this.$refs['createForm'].resetFields()
-      this.createDialogVisible = false
+      this.$refs["createForm"].resetFields();
+      this.createDialogVisible = false;
     },
     // 编辑-跳转
     btnEditClickHandler(item) {
-      this.$router.push({ path: '/systemSettings/serviceEdit', query: { serviceID: item.serviceID } })
+      this.$router.push({
+        path: "/systemSettings/serviceEdit",
+        query: { serviceID: item.serviceID },
+      });
     },
     // 删除-弹框
     showDeleteDialog(item) {
-      this.delObj = item
-      this.deleteDialogVisible = true
+      this.delObj = item;
+      this.deleteDialogVisible = true;
     },
     // 删除-提交
     deleteSubmitHandler() {
-      this.deleteService()
+      this.deleteService();
     },
     // 删除-关闭
     hideDeleteDialog() {
-      this.deleteDialogVisible = false
+      this.deleteDialogVisible = false;
     },
     async getServiceList() {
       try {
         const res = await Query({
           id: 3,
-          dataContent: []
-        })
+          dataContent: [],
+        });
         if (Number(res.code) === 0) {
-          this.serviceList = res.returnData
+          this.serviceList = res.returnData;
         } else {
-          this.$message.error(res.message ?? '失败')
+          this.$message.error(res.message ?? "失败");
         }
       } catch (error) {
-        console.log('错误', error)
+        console.log("错误", error);
       }
     },
     async getProtocolList() {
       try {
         const res = await Query({
           id: 1,
-          dataContent: []
-        })
+          dataContent: [],
+        });
         if (Number(res.code) === 0) {
-          this.protocolList = res.returnData
+          this.protocolList = res.returnData;
         } else {
-          this.$message.error(res.message ?? '失败')
+          this.$message.error(res.message ?? "失败");
         }
       } catch (error) {
-        console.log('错误', error)
+        console.log("错误", error);
       }
     },
     async createService() {
       try {
-        this.createForm['operate'] = 1
+        this.createForm["operate"] = 1;
         const res = await GeneralDataReception({
           serviceId: 3,
-          dataContent: JSON.stringify(this.createForm)
-        })
+          dataContent: JSON.stringify(this.createForm),
+        });
         if (Number(res.code) === 0) {
-          this.$message.success(res.message ?? '成功')
-          this.hideCreateDialog()
-          this.getServiceList()
+          this.$message.success(res.message ?? "成功");
+          this.hideCreateDialog();
+          this.getServiceList();
         } else {
-          this.$message.error(res.message ?? '失败')
+          this.$message.error(res.message ?? "失败");
         }
       } catch (error) {
-        console.log('错误', error)
+        console.log("错误", error);
       }
     },
     async deleteService() {
       try {
-        this.delObj['operate'] = 3
+        this.delObj["operate"] = 3;
         const res = await GeneralDataReception({
           serviceId: 3,
-          dataContent: JSON.stringify(this.delObj)
-        })
+          dataContent: JSON.stringify(this.delObj),
+        });
         if (Number(res.code) === 0) {
-          this.$message.success(res.message ?? '成功')
-          this.hideDeleteDialog()
-          this.getServiceList()
+          this.$message.success(res.message ?? "成功");
+          this.hideDeleteDialog();
+          this.getServiceList();
         } else {
-          this.$message.error(res.message ?? '失败')
+          this.$message.error(res.message ?? "失败");
         }
       } catch (error) {
-        console.log('错误', error)
+        console.log("错误", error);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -370,14 +356,16 @@ export default {
             width: 14px;
             height: 14px;
             margin-left: 24px;
-            background: url('../../../../assets/status/ic_edit_default.png') no-repeat;
+            background: url("../../../../assets/status/ic_edit_default.png")
+              no-repeat;
             background-size: 100% 100%;
             cursor: pointer;
             position: relative;
             top: 2px;
           }
           .loger:hover {
-            background: url('../../../../assets/status/ic_edit_hovar.png') no-repeat;
+            background: url("../../../../assets/status/ic_edit_hovar.png")
+              no-repeat;
             background-size: 100% 100%;
           }
         }