机器，服务，模板

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/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%;
           }
         }