服务管理、查询模板

public/config.js

@@ -4,6 +4,9 @@ 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://106.14.243.117:8093";
+PLATFROM_CONFIG.baseURLCA = "http://cssc.free.idcfengye.com";
 // PLATFROM_CONFIG.baseURLCA = "http://192.168.3.17:8080";
-PLATFROM_CONFIG.baseURLCA = "http://192.168.3.243:8093";
+// PLATFROM_CONFIG.baseURLCA = "http://192.168.3.243:8093";
 // PLATFROM_CONFIG.baseURLCA = "http://ts.free.idcfengye.com";
+

src/components/Table/index.vue

@@ -5,46 +5,55 @@
         <el-button size="small" @click="handleAdd" plain type="primary">新增</el-button>
       </div>
       <template v-if="tableData.length">
-        <el-table :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" 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="150">
-            <template slot-scope="scope">
-              <div class="hd-td">
-                <div class="hd-tr">
-                  <!-- <el-button class="hrefBtn" type="text" @click="handleHerf(scope.row)" size="small">跳转</el-button> -->
-                  <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>
+        <div>
+          <el-table :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border ref="table" :height="minHeight - 8 + 'vh'" class="table" style="width: 100%; overflow: auto" @select="selectHandler">
+            <el-table-column
+              v-if="selectionEnable"
+              type="selection"
+              width="35"
+            />
+            <el-table-column v-for="(item, index) in tableColsCopy" :sortable="item.needSort ? true : false" :key="index" :prop="item.columnName" :label="item.columnLabel" :show-overflow-tooltip="showOverflowTooltip">
+              <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="150">
+              <template slot-scope="scope">
+                <div class="hd-td">
+                  <div class="hd-tr">
+                    <!-- <el-button class="hrefBtn" type="text" @click="handleHerf(scope.row)" size="small">跳转</el-button> -->
+                    <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>
+                    <el-button class="rmScs" v-if="withColumnSet" type="text" size="small" @click="handleColumnSet(scope.row)">列设置</el-button>
+                  </div>
                 </div>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
+              </template>
+            </el-table-column>
+          </el-table>
+          <!-- <p v-if="noMore" style="text-align: center">没有更多了</p> -->
+        </div>
       </template>
       <template v-else>
         <NoData />
@@ -108,11 +117,22 @@ import { Query, GeneralDataReception } from "@/api/dataIntegration";
 export default {
   name: "DataTable",
   props: {
-    isDialog:true,
+    isDialog: {
+      type: Boolean,
+      default: true
+    },
     //接口ID
     dataId: {
       type: String || Number,
     },
+    editId: {
+      type: String || Number,
+      default: ''
+    },
+    dataContent: {
+      type: Object,
+      default: () => ({})
+    },
     //弹框宽度
     width: {
       type: String,
@@ -146,6 +166,26 @@ export default {
     marginTop: {
       type: String,
       default: '20px'
+    },
+    // 是否可选中行
+    selectionEnable: {
+      type: Boolean,
+      default: false
+    },
+    // 懒加载
+    withLazyLoad: {
+      type: Boolean,
+      default: false
+    },
+    // 不换行，溢出隐藏
+    showOverflowTooltip: {
+      type: Boolean,
+      default: false
+    },
+    // 表格-操作-列设置按钮显示
+    withColumnSet: {
+      type: Boolean,
+      default: false
     }
   },
   components: { Dialog, NoData },
@@ -155,6 +195,7 @@ export default {
       flag: false,
       serviceId: null,
       rmFlag: false,
+      rowTitle: '',
       tableCols: [], //表头数据
       tableData: [], //表格数据
       tableColsCopy: [], //表头数据缓存
@@ -218,16 +259,16 @@ export default {
   //     deep: true
   //   }
   // },
-  created () {
+  mounted () {
     this.getQuery();
   },
   updated() {
-    this.$refs['table'].doLayout()
+    this.$refs['table']?.doLayout()
   },
   methods: {
     changeSelect(data){
-      this.tableForm[this.tableOptions[data][0].setvalue] = this.tableForm[data];
-      console.log(this.tableForm)
+      // this.tableForm[this.tableOptions[data][0].setvalue] = this.tableForm[data];
+      // console.log(this.tableForm)
     },
     //获取表格数据
     async getQuery () {
@@ -235,9 +276,13 @@ export default {
         this.loading = true;
         const { code, returnData } = await Query({
           id: this.dataId,
-          dataContent: [],
+          dataContent: Object.values(this.dataContent),
         });
         if (code == 0) {
+          const titleColumn = returnData.columnSet.find(item => item.needShow === 1)
+          if (titleColumn) {
+            this.rowTitle = titleColumn.columnName
+          }
           this.tableData = returnData.listValues;
           this.tableCols = returnData.columnSet;
           this.serviceId = returnData.submitID;
@@ -257,6 +302,10 @@ export default {
     //表格-增/删/改
     async generalDataReception (data) {
       try {
+        data = {
+          ...data,
+          ...this.dataContent
+        }
         const { code, message } = await GeneralDataReception({
           serviceId: this.serviceId,
           dataContent: JSON.stringify(data),
@@ -283,6 +332,16 @@ export default {
         this.tableForm = {};
       }
     },
+    // 表格勾选
+    toggleRowSelection(row, isSelected) {
+      this.$refs['table'].toggleRowSelection(row, isSelected)
+    },
+    // 表格初始勾选
+    selectTableRows(tableData, selectFlagName) {
+      tableData.forEach(row => {
+        this.$refs['table'].toggleRowSelection(row, !!row[selectFlagName])
+      })
+    },
     //初始化表格
     initTableData () {
       this.tableColsCopy = this.tableCols.filter((item) => item.needShow);
@@ -304,6 +363,7 @@ export default {
       });
       setTableFilters(this.tableData, this.tableDataFilters);
       this.tableGroup(this.tableData);
+      this.selectTableRows(this.tableData, 'DeployID')
       // this.getSelectDataAll(reqUts)
     },
     //获取所有获取弹框-下拉数据-请求状态
@@ -417,34 +477,55 @@ export default {
     },
     //表格-新增
     handleAdd () {
-      this.flag = true;
-        this.tableType = "add";
-        this.tableTitle = "新增";
-        this.tableForm = {};
-      // if(this.isDialog ){
-      //   this.flag = true;
+      // this.flag = true;
       //   this.tableType = "add";
       //   this.tableTitle = "新增";
       //   this.tableForm = {};
-      // }
-      // else{
-      //   this.$emit("handleAdd");
-      // }
+      if(this.isDialog ){
+        this.flag = true;
+        this.tableType = "add";
+        this.tableTitle = "新增";
+        this.tableForm = {};
+      }
+      else{
+        this.$emit("handleAdd");
+      }
 
-      console.log(this.tableOptions);
+      // console.log(this.tableOptions);
     },
     //表格-编辑
-    handleEdit (row) {
-      if(this.isDialog == true){
+    async handleEdit (row) {
+      if(this.isDialog) {
+        if (this.editId) {
+          this.tableForm = await this.queryOriginRow(this.editId, row.queryTemplateColumnSetID)
+          // Object.entries(tableForm).forEach(([key, value]) => {
+          //   this.tableForm[key] = value
+          // })
+        } else {
+          this.tableForm = row;
+        }
         this.flag = true;
         this.tableType = "edit";
         this.tableTitle = "编辑";
-        this.tableForm = row;
-      }
-      else{
+      } else{
         this.$emit("handleEdit",row);
       }
     },
+    async queryOriginRow(editId, queryTemplateColumnSetID) {
+      try {
+        const { code, returnData } = await Query({
+          id: editId,
+          dataContent: [queryTemplateColumnSetID]
+        })
+        if (Number(code) === 0) {
+          return returnData.listValues[0]
+        } else {
+          this.$message.error("失败")
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
     //表格-跳转
     handleHerf(row){
       alert('跳转')
@@ -467,7 +548,8 @@ export default {
     //表格-删除
     handleRemove (row) {
       this.rmFlag = true;
-      this.rmTitle = row.className || row.username || row.serviceName;
+      // this.rmTitle = row.className || row.username || row.serviceName || row.queryTemplateName;
+      this.rmTitle = row[this.rowTitle]
       this.tableObj = row;
     },
     //表格-删除-确认
@@ -475,6 +557,19 @@ export default {
       this.tableObj.event = 3;
       this.generalDataReception(this.tableObj);
     },
+    // 表格-跳转列设置页
+    handleColumnSet(row) {
+      this.$router.push({
+        path: '/systemSettings/queryTemplateChild',
+        query: {
+          queryTemplateID: row.queryTemplateID
+        }
+      })
+    },
+    // 表格-选中行
+    selectHandler(selection, row) {
+      this.$emit('selection-change', selection, row)
+    }
   },
 };
 </script>
@@ -512,6 +607,9 @@ export default {
           }
         }
       }
+      .table-column--selection .cell .el-checkbox {
+        display: none;
+      }
     }
     .el-table__body-wrapper {
       tr.bgl-hui {

src/main.js

@@ -24,6 +24,22 @@ import 'vue2-org-tree/dist/style.css'
 Vue.use(Vue2OrgTree)
 Vue.use(ElementUI)
 
+Vue.directive('loadmore', {
+  bind(el, binding) {
+    if (!binding.value) {
+      return
+    }
+    const selectWrap = el.querySelector('.el-table__body-wrapper')
+    selectWrap.addEventListener('scroll', function () {
+      const sign = 0
+      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+      if (scrollDistance <= sign) {
+        binding.value()
+      }
+    })
+  }
+})
+
 Vue.prototype.$echarts = echarts
 Vue.config.productionTip = false
 new Vue({

src/router/routes/routes-file-two.js

@@ -84,6 +84,15 @@ const systemSettingsRoutes = {
             isAlone: true,
             src: require('@/assets/nav/ic_setting_top@2x.png')
           },
+          {
+            path: '/systemSettings/queryTemplateChild',
+            name: 'queryTemplateChild',
+            component: () => import('@/views/systemSettings/views/queryTemplate/queryTemplateChild'),
+            meta: { title: '查询项设置' },
+            hidden: false,
+            isAlone: true,
+            src: require('@/assets/nav/ic_setting_top@2x.png')
+          }
           ]
         },
         {

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

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-17 13:43:58
- * @LastEditTime: 2021-11-17 13:43:59
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-06-12 00:04:05
+ * @LastEditors: your name
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \CABaggageData\src\views\dashboard\views\info.vue
 -->
@@ -11,9 +11,13 @@
     <DataTable
       data-id="4"
       :rows="12"
-      labelWidth="100px"
-      :minHeight="70"
+      label-width="100px"
+      :min-height="70"
       width="800px"
+      :show-overflow-tooltip="true"
+      :with-column-set="true"
+      @handleAdd="handleAdd"
+      @handleEdit="handleEdit"
     />
     <!--搜索-->
     <!-- <div class="airportInfo-search">
@@ -61,7 +65,7 @@
       <div class="airportInfoDialog">
         <div class="del-title">删除分类信息</div>
         <div class="content er">
-          <div class="log"></div>
+          <div class="log" />
           是否确认删除
           <p style="color: #eb2f3b; margin-top: 0px; margin-bottom: 0px">
             {{ rmObj.name }}
@@ -71,218 +75,216 @@
         <div class="DelFoot right t30">
           <el-button
             size="medium"
-            @click="remove()"
             class="r25 buwitch"
             type="danger"
-            >删除</el-button
-          >
-          <el-button size="medium" class="r26" @click="flag = false"
-            >取消</el-button
-          >
+            @click="remove()"
+          >删除</el-button>
+          <el-button
+            size="medium"
+            class="r26"
+            @click="flag = false"
+          >取消</el-button>
         </div>
       </div>
     </Dialog>
   </div>
 </template>
 <script>
-import Search from "@/layout/components/Search/index.vue";
-import Dialog from "@/layout/components/Dialog/index.vue";
-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";
+// import Search from '@/layout/components/Search/index.vue'
+import Dialog from '@/layout/components/Dialog/index.vue'
+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, DataTable },
+  name: 'AirportInfo',
+  components: {
+    // Search,
+    Dialog,
+    DataTable
+  },
   data() {
     return {
       arr: [
         {
-          typeName: "名称",
-          typeCode: "测试",
-        },
-      ], //内容数据
-      flag: false, //删除弹框开关
-      addFlag: false, //新增机场信息弹框开关
+          typeName: '名称',
+          typeCode: '测试'
+        }
+      ], // 内容数据
+      flag: false, // 删除弹框开关
+      addFlag: false, // 新增机场信息弹框开关
       EditFlag: false,
       ids: null,
       idss: null,
       listDate: {},
       rmObj: {
-        //删除内容
-        name: "",
+        // 删除内容
+        name: ''
       },
       ruleForm: {
-        //新增机场信息表单
-        name: "",
-        fullName: "",
-        code: "",
+        // 新增机场信息表单
+        name: '',
+        fullName: '',
+        code: ''
       },
       EditForm: {
-        name: "",
-        fullName: "",
-        code: "",
+        name: '',
+        fullName: '',
+        code: ''
       },
       rules: {
-        //新增机场信息表单验证
-        name: [{ required: true, message: "请输入航司简称", trigger: "blur" }],
-        fullName: [
-          { required: true, message: "请输入航司全称", trigger: "blur" },
-        ],
-        code: [
-          { required: true, message: "请输入航司二字码", trigger: "blur" },
-        ],
+        // 新增机场信息表单验证
+        name: [{ required: true, message: '请输入航司简称', trigger: 'blur' }],
+        fullName: [{ required: true, message: '请输入航司全称', trigger: 'blur' }],
+        code: [{ required: true, message: '请输入航司二字码', trigger: 'blur' }]
       },
-      modid: "",
-    };
-  },
-  created() {
-    // this.getAirlines();
-    // this.exceptionlist();
+      modid: ''
+    }
   },
   computed: {
     serachBox() {
       if (this.searchInfo) {
-        return this.arr.filter((data) => {
-          return Object.keys(data).some((key) => {
-            return (
-              String(data[key]).toLowerCase().indexOf(this.searchInfo) > -1
-            );
-          });
-        });
+        return this.arr.filter(data => {
+          return Object.keys(data).some(key => {
+            return String(data[key]).toLowerCase().indexOf(this.searchInfo) > -1
+          })
+        })
       }
-      return this.arr;
-    },
+      return this.arr
+    }
+  },
+  created() {
+    // this.getAirlines();
+    // this.exceptionlist();
   },
   methods: {
-    //异常列表查询
+    // 异常列表查询
     async exceptionlist() {
-      let params = {
-        id: "",
-      };
-      const result = await exceptiontype(params);
-      if (result.code == 0) {
-        this.arr = result.returnData;
+      const params = {
+        id: ''
+      }
+      const result = await exceptiontype(params)
+      if (Number(result.code) === 0) {
+        this.arr = result.returnData
       }
     },
-    //搜索
+    // 搜索
     getSearchData(val) {
-      let that = this;
+      const that = this
       that.exceptionlist().then(function (data) {
         if (val) {
-          that.arr = findarrays(that.arr, "typeName", val);
+          that.arr = findarrays(that.arr, 'typeName', val)
         } else {
-          that.exceptionlist();
+          that.exceptionlist()
         }
-      });
+      })
       // console.log(this.searchInfo);
     },
-    //删除信息
+    // 删除信息
     handleMove(item) {
-      this.listDate = item;
-      this.flag = true;
+      this.listDate = item
+      this.flag = true
       this.rmObj = {
-        name: item.queryTemplateName,
-      };
-    },
-    airEdit(item) {
-      // this.modid = item;
-      // this.EditForm.name = item.typeName;
-      // this.EditForm.fullName = item.typeCode;
-      this.$router.push({
-        path: "/systemSettings/queryTemplateedit",
-        query: {
-          queryTemplateName: item.queryTemplateName,
-          protocolID: item.protocolID,
-          queryTemplateDescribe: item.queryTemplateDescribe,
-          queryTemplatetConfig: item.queryTemplatetConfig,
-          queryTemplate: item.queryTemplate,
-        },
-      });
-      // this.EditForm.code = item.code2;
-      // this.EditFlag = true;
+        name: item.queryTemplateName
+      }
     },
     async EditSubmit() {
-      let arr = 0;
-      this.$refs["ruleFormall"].validate((valid) => {
+      let arr = 0
+      this.$refs['ruleFormall'].validate(valid => {
         if (valid) {
-          arr = 1;
+          arr = 1
         } else {
-          arr = 0;
-          return false;
+          arr = 0
+          return false
         }
-      });
-      if (arr == 1) {
-        let params = {
+      })
+      if (arr === 1) {
+        const params = {
           id: this.modid.id,
           typeName: this.EditForm.name,
-          typeCode: this.EditForm.fullName,
-        };
-        const result = await exceptionadd(params);
-        if (result.code == 0) {
-          this.$message.success("成功");
-          this.exceptionlist();
-          this.$refs.ruleFormall.resetFields();
+          typeCode: this.EditForm.fullName
+        }
+        const result = await exceptionadd(params)
+        if (Number(result.code) === 0) {
+          this.$message.success('成功')
+          this.exceptionlist()
+          this.$refs.ruleFormall.resetFields()
         }
-        this.EditFlag = false;
+        this.EditFlag = false
       }
     },
     closeForm() {
-      this.$refs.ruleForm.resetFields();
+      this.$refs.ruleForm.resetFields()
     },
-    //获取模板列表
+    // 获取模板列表
     async getAirlines() {
       try {
         const res = await Query({
           id: 77,
-          dataContent: [],
-        });
-        if (res.code === "0") {
-          this.arr = res.returnData;
+          dataContent: []
+        })
+        if (res.code === '0') {
+          this.arr = res.returnData
         } else {
-          this.$message.error(res.message ?? "失败");
+          this.$message.error(res.message ?? '失败')
         }
       } catch (error) {
-        console.log("错误", error);
+        console.log('错误', error)
       }
     },
 
-    //新增机场信息-弹框
+    // 新增机场信息-弹框
     handleAdd() {
-      this.$router.push("/systemSettings/queryTemplateadd");
+      this.$router.push('/systemSettings/queryTemplateadd')
     },
-    //新增机场信息-弹框-取消
+    // 新增机场信息-弹框
+    handleEdit(item) {
+      // this.modid = item;
+      // this.EditForm.name = item.typeName;
+      // this.EditForm.fullName = item.typeCode;
+      this.$router.push({
+        path: '/systemSettings/queryTemplateedit',
+        query: { queryTemplateID: item.queryTemplateID }
+      })
+      // this.EditForm.code = item.code2;
+      // this.EditFlag = true;
+    },
+    // 新增机场信息-弹框-取消
     resetForm() {
-      this.addFlag = false;
-      this.EditFlag = false;
-      this.ruleForm.name = "";
-      this.ruleForm.fullName = "";
-      this.$refs.ruleForms.resetFields();
-      this.$refs.ruleFormall.resetFields();
+      this.addFlag = false
+      this.EditFlag = false
+      this.ruleForm.name = ''
+      this.ruleForm.fullName = ''
+      this.$refs.ruleForms.resetFields()
+      this.$refs.ruleFormall.resetFields()
     },
-    //删除
+    // 删除
     async remove(data) {
-      this.listDate.operate = "3";
+      this.listDate.operate = '3'
       try {
         const res = await GeneralDataReception({
-          serviceId: "20",
-          dataContent: JSON.stringify(this.listDate),
-        });
-        if (res.code === "0") {
-          this.$message.success(res.message ?? "成功");
-          this.flag = false;
-          this.listDate = {};
-          this.getAirlines();
+          serviceId: 5,
+          dataContent: JSON.stringify(this.listDate)
+        })
+        if (res.code === '0') {
+          this.$message.success(res.message ?? '成功')
+          this.flag = false
+          this.listDate = {}
+          this.getAirlines()
         } else {
-          this.$message.error(res.message ?? "失败");
+          this.$message.error(res.message ?? '失败')
         }
       } catch (error) {
-        console.log("错误", error);
+        console.log('错误', error)
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -293,7 +295,7 @@ export default {
     background: #eb2f3b;
     border-radius: 50%;
     margin-right: 15px;
-    background: url("../../../../assets/index/ic_close_hint.png") no-repeat;
+    background: url('../../../../assets/index/ic_close_hint.png') no-repeat;
     background-size: 100% 100%;
   }
   .er {

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="queryItemSettings_home">
+    <div class="wrap">
+      <DataTable
+        data-id="44"
+        edit-id="45"
+        :data-content="{ queryTemplateID }"
+        :rows="12"
+        label-width="140px"
+        :min-height="70"
+        width="800px"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import DataTable from '@/components/Table'
+export default {
+  components: { DataTable },
+  data() {
+    return {
+      queryTemplateID: null
+    }
+  },
+  created() {
+    if (!this.$route.query.queryTemplateID) {
+      this.$router.push('/systemSettings/queryTemplate')
+      return
+    }
+    this.queryTemplateID = Number(this.$route.query.queryTemplateID)
+  }
+}
+</script>
+<style lang="scss" scoped>
+.queryItemSettings-home {
+  .wrap {
+    padding: 16px 0;
+    .service-header {
+      line-height: 32px;
+      font-size: 14px;
+      .btn-white {
+        border: 1px solid #9ebbf7;
+        background: #f5f7fa;
+        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        border-radius: 4px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #2d67e3;
+      }
+      margin-bottom: 30px;
+    }
+  }
+}
+</style>

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

@@ -1,55 +1,109 @@
 <template>
   <div class="queryTemplate">
-    <Search title="新增查询模板" :isSearch="false">
+    <Search
+      title="新增查询模板"
+      :is-search="false"
+    >
       <button class="btnAner">测试</button>
-      <button class="btnAn" @click="addSubmit">保存</button>
+      <button
+        class="btnAn"
+        @click="addSubmit"
+      >保存</button>
     </Search>
     <el-form
+      ref="ruleForm"
       style="margin-top: 10px"
       :inline="true"
       :model="ruleForm"
       label-width="auto"
-      ref="ruleForm"
       class="demo-ruleForm"
     >
-      <el-row :gutter="24" class="b24">
-        <el-col :span="5">
-          <el-form-item label="查询模板名称">
+      <el-row
+        :gutter="24"
+        class="b24"
+      >
+        <el-col :span="6">
+          <el-form-item
+            label="查询模板名称"
+            prop="queryTemplateName"
+          >
             <el-input
-              size="medium"
-              placeholder="暂无数据"
               v-model="ruleForm.queryTemplateName"
-            ></el-input>
+              size="medium"
+              placeholder="请输入查询模板名称"
+              clearable
+            />
           </el-form-item>
         </el-col>
-        <el-col :span="5">
-          <el-form-item label="查询协议">
+        <el-col :span="6">
+          <el-form-item
+            label="数据源"
+            prop="dataSourceID"
+          >
             <el-select
-              v-model="ruleForm.protocolID"
-              placeholder="暂无数据"
-              :disabled="true"
+              v-model="ruleForm.dataSourceID"
+              placeholder="请选择"
+              clearable
             >
               <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
+                v-for="item in dataSourceList"
+                :key="item.dataSourceID"
+                :label="item.dataSourceName"
+                :value="item.dataSourceID"
+              />
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="14">
-          <el-form-item label="查询模板描述">
+        <el-col :span="6">
+          <el-form-item
+            label="服务名称"
+            prop="submitID"
+          >
+            <el-select
+              v-model="ruleForm.submitID"
+              placeholder="请选择"
+              clearable
+            >
+              <el-option
+                v-for="item in serviceList"
+                :key="item.submitID"
+                :label="item.serviceName"
+                :value="item.submitID"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item
+            label="每页显示"
+            prop="pageRows"
+          >
             <el-input
+              v-model="ruleForm.pageRows"
               size="medium"
-              placeholder="暂无数据"
+              placeholder="请输入每页显示行数"
+              type="number"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item
+            label="查询模板描述"
+            prop="queryTemplateDescribe"
+          >
+            <el-input
               v-model="ruleForm.queryTemplateDescribe"
-            ></el-input>
+              size="medium"
+              placeholder="请输入查询模板描述"
+              clearable
+            />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-form-item label="查询配置" style="margin-bottom: 24px">
+        <!-- <el-form-item
+        label="查询配置"
+        style="margin-bottom: 24px"
+      >
         <el-input
           v-model="ruleForm.queryTemplatetConfig"
           class="desc"
@@ -59,81 +113,106 @@
           placeholder="描述内容···"
           size="small"
         />
-      </el-form-item>
-      <el-form-item label="查询语句">
-        <el-input
-          v-model="ruleForm.queryTemplate"
-          class="desc"
-          type="textarea"
-          resize="none"
-          :autosize="{ minRows: 26, maxRows: 26 }"
-          placeholder="描述内容···"
-          size="small"
-        />
-      </el-form-item>
+      </el-form-item> -->
+        <el-col :span="24">
+          <el-form-item label="查询语句">
+            <el-input
+              v-model="ruleForm.queryTemplate"
+              class="desc"
+              type="textarea"
+              resize="none"
+              :autosize="{ minRows: 26, maxRows: 26 }"
+              placeholder="描述内容···"
+              size="small"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
   </div>
 </template>
 <script>
-import Search from "@/layout/components/Search/index.vue";
-import { GeneralDataReception, Query } from "@/api/dataIntegration";
+import Search from '@/layout/components/Search/index.vue'
+import { GeneralDataReception, myQuery } from '@/api/dataIntegration'
 export default {
+  components: {
+    Search
+  },
   data() {
     return {
       ruleForm: {
-        queryTemplateName: "",
-        protocolID: 1,
-        queryTemplateDescribe: "",
-        queryTemplatetConfig: "",
-        queryTemplate: "",
+        queryTemplateName: '',
+        queryTemplateDescribe: '',
+        submitID: null,
+        queryTemplate: '',
+        pageRows: null
       },
-      options: [
-        {
-          value: 1,
-          label: 1,
-        },
-      ],
+      dataSourceList: [],
+      serviceList: [],
       rules: {
-        queryTemplateName: [
-          { required: true, message: "请输入查询模板名称", trigger: "blur" },
-        ],
-        protocolID: [
-          { required: true, message: "请输入查询协议", trigger: "blur" },
-        ],
-        queryTemplateDescribe: [
-          { required: true, message: "请输入查询模板描述", trigger: "blur" },
-        ],
-        queryTemplatetConfig: [
-          { required: true, message: "请选查询配置", trigger: "change" },
-        ],
-        queryTemplate: [
-          { required: true, message: "请选择查询语句", trigger: "change" },
-        ],
-      },
-    };
+        queryTemplateName: [{ required: true, message: '请输入查询模板名称', trigger: 'blur' }],
+        // protocolID: [{ required: true, message: '请输入查询协议', trigger: 'blur' }],
+        queryTemplateDescribe: [{ required: true, message: '请输入查询模板描述', trigger: 'blur' }],
+        queryTemplatetConfig: [{ required: true, message: '请选查询配置', trigger: 'change' }],
+        queryTemplate: [{ required: true, message: '请选择查询语句', trigger: 'change' }]
+      }
+    }
+  },
+  created() {
+    this.ruleForm.event = 1
+    this.getDataSourceList()
+    this.queryServiceList()
   },
   methods: {
     async addSubmit() {
+      const params = {
+        ...this.ruleForm,
+        submitID: this.ruleForm.serviceID
+      }
+      delete params.serviceID
       try {
         const res = await GeneralDataReception({
-          serviceId: "20",
-          dataContent: JSON.stringify(this.ruleForm),
-        });
-        if (res.code === "0") {
-          this.$message.success(res.message ?? "成功");
-          this.$router.push("/systemSettings/queryTemplate");
+          serviceId: 5,
+          dataContent: JSON.stringify(params)
+        })
+        if (Number(res.code) === 0) {
+          this.$message.success(res.message ?? '成功')
+          this.$router.push('/systemSettings/queryTemplate')
         } else {
-          this.$message.error(res.message ?? "失败");
+          this.$message.error(res.message ?? '失败')
         }
       } catch (error) {
-        console.log("错误", error);
+        console.log('错误', error)
       }
     },
-  },
-  components: {
-    Search,
-  },
-};
+    async getDataSourceList() {
+      const dataSourceList = await this.getSelectOption(21)
+      this.dataSourceList = dataSourceList.map(item => {
+        item[item.setlabel] = item.k
+        item[item.setvalue] = item.v
+        return item
+      })
+    },
+    async queryServiceList() {
+      const serviceList = await this.getSelectOption(2)
+      this.serviceList = serviceList.map(item => {
+        item[item.setlabel] = item.k
+        item[item.setvalue] = item.v
+        return item
+      })
+    },
+    async getSelectOption(ID) {
+      try {
+        const { listValues } = await myQuery(ID)
+        return listValues
+      } catch (error) {
+        this.$message.error(error)
+        return []
+      }
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .queryTemplate {
@@ -153,9 +232,27 @@ export default {
     color: #2d67e3;
     margin-right: 16px;
   }
-  ::v-deep .el-form-item {
-    margin-bottom: 0px;
-    margin-right: 0px;
+  ::v-deep .demo-ruleForm {
+    > .el-row > .el-col {
+      .el-form-item {
+        margin-bottom: 24px;
+        // margin-right: 0px;
+        .el-input,
+        .el-select {
+          width: 100%;
+          // color: #101116;
+        }
+        input {
+          &::-webkit-outer-spin-button,
+          &::-webkit-inner-spin-button {
+            -webkit-appearance: none !important;
+          }
+          &[type='‘number’'] {
+            -moz-appearance: textfield !important;
+          }
+        }
+      }
+    }
   }
   .b24 {
     ::v-deep .el-input__inner {
@@ -174,4 +271,4 @@ export default {
   //   }
   // }
 }
-</style>
+</style>

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

@@ -1,55 +1,109 @@
 <template>
   <div class="queryTemplate">
-    <Search title="编辑查询模板" :isSearch="false">
+    <Search
+      title="编辑查询模板"
+      :is-search="false"
+    >
       <button class="btnAner">测试</button>
-      <button class="btnAn" @click="addSubmit">保存</button>
+      <button
+        class="btnAn"
+        @click="editSubmit"
+      >保存</button>
     </Search>
     <el-form
+      ref="ruleForm"
       style="margin-top: 10px"
       :inline="true"
       :model="ruleForm"
       label-width="auto"
-      ref="ruleForm"
       class="demo-ruleForm"
     >
-      <el-row :gutter="24" class="b24">
-        <el-col :span="5">
-          <el-form-item label="查询模板名称">
+      <el-row
+        :gutter="24"
+        class="b24"
+      >
+        <el-col :span="6">
+          <el-form-item
+            label="查询模板名称"
+            prop="queryTemplateName"
+          >
             <el-input
-              size="medium"
-              placeholder="暂无数据"
               v-model="ruleForm.queryTemplateName"
-            ></el-input>
+              size="medium"
+              placeholder="请输入查询模板名称"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item
+            label="数据源"
+            prop="dataSourceID"
+          >
+            <el-select
+              v-model="ruleForm.dataSourceID"
+              placeholder="请选择"
+              clearable
+            >
+              <el-option
+                v-for="item in dataSourceList"
+                :key="item.dataSourceID"
+                :label="item.dataSourceName"
+                :value="item.dataSourceID"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="5">
-          <el-form-item label="查询协议">
+        <el-col :span="6">
+          <el-form-item
+            label="服务名称"
+            prop="serviceID"
+          >
             <el-select
-              v-model="ruleForm.protocolID"
-              placeholder="暂无数据"
-              :disabled="true"
+              v-model="ruleForm.serviceID"
+              placeholder="请选择"
+              clearable
             >
               <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
+                v-for="item in serviceList"
+                :key="item.serviceID"
+                :label="item.serviceName"
+                :value="item.serviceID"
+              />
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="14">
-          <el-form-item label="查询模板描述">
+        <el-col :span="6">
+          <el-form-item
+            label="每页显示"
+            prop="pageRows"
+          >
             <el-input
+              v-model="ruleForm.pageRows"
               size="medium"
-              placeholder="暂无数据"
+              placeholder="请输入每页显示行数"
+              type="number"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item
+            label="查询模板描述"
+            prop="queryTemplateDescribe"
+          >
+            <el-input
               v-model="ruleForm.queryTemplateDescribe"
-            ></el-input>
+              size="medium"
+              placeholder="请输入查询模板描述"
+              clearable
+            />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-form-item label="查询配置" style="margin-bottom: 24px">
+        <!-- <el-form-item
+        label="查询配置"
+        style="margin-bottom: 24px"
+      >
         <el-input
           v-model="ruleForm.queryTemplatetConfig"
           class="desc"
@@ -59,81 +113,125 @@
           placeholder="描述内容···"
           size="small"
         />
-      </el-form-item>
-      <el-form-item label="查询语句">
-        <el-input
-          v-model="ruleForm.queryTemplate"
-          class="desc"
-          type="textarea"
-          resize="none"
-          :autosize="{ minRows: 26, maxRows: 26 }"
-          placeholder="描述内容···"
-          size="small"
-        />
-      </el-form-item>
+      </el-form-item> -->
+        <el-col :span="24">
+          <el-form-item label="查询语句">
+            <el-input
+              v-model="ruleForm.queryTemplate"
+              class="desc"
+              type="textarea"
+              resize="none"
+              :autosize="{ minRows: 26, maxRows: 26 }"
+              placeholder="描述内容···"
+              size="small"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
   </div>
 </template>
 <script>
-import Search from "@/layout/components/Search/index.vue";
-import { GeneralDataReception } from "@/api/dataIntegration";
+import Search from '@/layout/components/Search/index.vue'
+import { GeneralDataReception, myQuery } from '@/api/dataIntegration'
 export default {
+  components: {
+    Search
+  },
   data() {
     return {
+      queryTemplateID: null,
       ruleForm: {
-        queryTemplateName: "",
-        protocolID: 1,
-        queryTemplateDescribe: "",
-        queryTemplatetConfig: "",
-        queryTemplate: "",
-        operate: "",
+        queryTemplateName: '',
+        queryTemplateDescribe: '',
+        serviceID: null,
+        queryTemplate: '',
+        pageRows: null
       },
-      options: [],
+      dataSourceList: [],
+      serviceList: [],
       rules: {
-        queryTemplateName: [
-          { required: true, message: "请输入查询模板名称", trigger: "blur" },
-        ],
-        protocolID: [
-          { required: true, message: "请输入查询协议", trigger: "blur" },
-        ],
-        queryTemplateDescribe: [
-          { required: true, message: "请输入查询模板描述", trigger: "blur" },
-        ],
-        queryTemplatetConfig: [
-          { required: true, message: "请选查询配置", trigger: "change" },
-        ],
-        queryTemplate: [
-          { required: true, message: "请选择查询语句", trigger: "change" },
-        ],
-      },
-    };
+        queryTemplateName: [{ required: true, message: '请输入查询模板名称', trigger: 'blur' }],
+        // protocolID: [{ required: true, message: '请输入查询协议', trigger: 'blur' }],
+        queryTemplateDescribe: [{ required: true, message: '请输入查询模板描述', trigger: 'blur' }],
+        queryTemplatetConfig: [{ required: true, message: '请选查询配置', trigger: 'change' }],
+        queryTemplate: [{ required: true, message: '请选择查询语句', trigger: 'change' }]
+      }
+    }
   },
   created() {
-    this.ruleForm = this.$route.query;
-    this.ruleForm.operate = "2";
+    // this.ruleForm = this.$route.query
+    if (this.$route.query.queryTemplateID == null) {
+      this.$router.push('/systemSettings/queryTemplate')
+      return
+    }
+    this.queryTemplateID = Number(this.$route.query.queryTemplateID)
+    this.ruleForm.queryTemplateID = this.queryTemplateID
+    this.ruleForm.event = 2
+    this.queryQueryTemplateByID(this.queryTemplateID)
+    this.getDataSourceList()
+    this.queryServiceList()
   },
   methods: {
-    async addSubmit() {
+    async editSubmit() {
+      const params = {
+        ...this.ruleForm,
+        submitID: this.ruleForm.serviceID
+      }
+      delete params.serviceID
       try {
         const res = await GeneralDataReception({
-          serviceId: "20",
-          dataContent: JSON.stringify(this.ruleForm),
-        });
-        if (res.code === "0") {
-          this.$message.success(res.message ?? "成功");
-          this.$router.push("/systemSettings/queryTemplate");
+          serviceId: 5,
+          dataContent: JSON.stringify(params)
+        })
+        if (Number(res.code) === 0) {
+          this.$message.success(res.message ?? '成功')
+          this.$router.push('/systemSettings/queryTemplate')
         } else {
-          this.$message.error(res.message ?? "失败");
+          this.$message.error(res.message ?? '失败')
         }
       } catch (error) {
-        console.log("错误", error);
+        console.log('错误', error)
       }
     },
-  },
-  components: {
-    Search,
-  },
-};
+    async queryQueryTemplateByID(queryTemplateID) {
+      try {
+        const templateInfo = await myQuery(43, queryTemplateID)
+        Object.entries(templateInfo.listValues[0]).forEach(([key, value]) => {
+          this.ruleForm[key] = value
+        })
+      } catch (error) {
+        this.$message.error(error)
+      }
+    },
+    async getDataSourceList() {
+      const dataSourceList = await this.getSelectOption(21)
+      this.dataSourceList = dataSourceList.map(item => {
+        item[item.setlabel] = item.k
+        item[item.setvalue] = item.v
+        return item
+      })
+    },
+    async queryServiceList() {
+      const serviceList = await this.getSelectOption(2)
+      this.serviceList = serviceList.map(item => {
+        item[item.setlabel] = item.k
+        item[item.setvalue] = item.v
+        return item
+      })
+    },
+    async getSelectOption(ID) {
+      try {
+        const { listValues } = await myQuery(ID)
+        return listValues
+      } catch (error) {
+        this.$message.error(error)
+        return []
+      }
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .queryTemplate {
@@ -153,9 +251,27 @@ export default {
     color: #2d67e3;
     margin-right: 16px;
   }
-  ::v-deep .el-form-item {
-    margin-bottom: 0px;
-    margin-right: 0px;
+  ::v-deep .demo-ruleForm {
+    > .el-row > .el-col {
+      .el-form-item {
+        margin-bottom: 24px;
+        // margin-right: 0px;
+        .el-input,
+        .el-select {
+          width: 100%;
+          // color: #101116;
+        }
+        input {
+          &::-webkit-outer-spin-button,
+          &::-webkit-inner-spin-button {
+            -webkit-appearance: none !important;
+          }
+          &[type='‘number’'] {
+            -moz-appearance: textfield !important;
+          }
+        }
+      }
+    }
   }
   .b24 {
     ::v-deep .el-input__inner {
@@ -174,4 +290,4 @@ export default {
   //   }
   // }
 }
-</style>
+</style>

src/views/systemSettings/views/serviceManagement/mixins/operate.js

@@ -1,7 +1,7 @@
 /*
  * @Author: Badguy
  * @Date: 2022-04-29 09:17:55
- * @LastEditTime: 2022-05-12 16:46:54
+ * @LastEditTime: 2022-06-11 20:56:26
  * @LastEditors: your name
  * @Description: 服务相关操作
  * have a nice day!
@@ -21,15 +21,14 @@ export default {
       const params = {
         serviceID: this.serviceID,
         ...this.serviceForm,
-        ...this.inputForm,
-        operate: 2
+        event: 2
       }
       try {
         const result = await GeneralDataReception({
           serviceId: 3,
           dataContent: JSON.stringify(params)
         })
-        if (Number(result.code === 0)) {
+        if (Number(result.code) === 0) {
           this.$message.success(result.message ?? '成功')
         } else {
           this.$message.error(result.message ?? '失败')
@@ -38,22 +37,23 @@ export default {
         console.log('错误', error)
       }
     },
-    async updateServiceNode(operate, deployNodeID) {
+    async updateServiceNode(event, deployObject) {
       const params = {
-        operate: operateMap[operate],
+        event,
         serviceID: this.serviceID
       }
-      if (operate === 'create') {
-        params.deployNodeID = deployNodeID
+      if (event === 1) {
+        Object.assign(params, {
+          deployNodeID: deployObject.deployNodeID
+        })
       } else {
-        const { DeployID } = this.serviceAndNodeList.find(
-          element => element.serviceID === this.serviceID && element.deployNodeID === deployNodeID
-        )
-        params.DeployID = DeployID
+        Object.assign(params, {
+          DeployID: deployObject.servicedeploynodeID
+        })
       }
       try {
         const result = await GeneralDataReception({
-          serviceId: 10,
+          serviceId: 4,
           dataContent: JSON.stringify(params)
         })
         if (Number(result.code) === 0) {

src/views/systemSettings/views/serviceManagement/serviceEdit.vue

@@ -1,6 +1,6 @@
 <!--
  * @Date: 2022-03-24 09:55:13
- * @LastEditTime: 2022-06-10 18:01:59
+ * @LastEditTime: 2022-06-11 22:26:55
  * @LastEditors: your name
  * @Description: 服务管理-编辑服务
  * have a nice day!
@@ -16,6 +16,7 @@
             size="small"
             type="primary"
             class="btn-save"
+            @click="editSubmitHandler"
           >保存</el-button>
         </header>
         <main class="content">
@@ -98,12 +99,12 @@
                 >
                   <el-input
                     v-model="serviceForm.lifeCycleCol"
-                    placeholder="请输入服务名称"
+                    placeholder="请输入生命周期ID键名"
                     clearable
                   />
                 </el-form-item>
               </el-col>
-              <el-col :span="12">
+              <el-col :span="8">
                 <el-form-item
                   label="服务描述"
                   prop="serviceDescribe"
@@ -111,21 +112,58 @@
                   <el-input
                     v-model="serviceForm.serviceDescribe"
                     placeholder="请输入描述"
-                    type="textarea"
-                    :autosize="{ minRows: 4, maxRows: 4 }"
-                    resize="none"
                     clearable
                   />
                 </el-form-item>
               </el-col>
-              <el-col :span="12">
-                <el-form-item label="是否同步">
+              <el-col :span="4">
+                <el-form-item
+                  label="采集线程"
+                  prop="threads"
+                >
+                  <el-input
+                    v-model="serviceForm.threads"
+                    type="number"
+                    placeholder="请输入采集线程数"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item
+                  label="是否同步"
+                  prop="isAsynchronous"
+                >
                   <el-radio-group v-model="serviceForm.isAsynchronous">
                     <el-radio :label="0">是</el-radio>
                     <el-radio :label="1">否</el-radio>
                   </el-radio-group>
                 </el-form-item>
               </el-col>
+              <el-col :span="6">
+                <el-form-item
+                  label="数据类型"
+                  prop="datatype"
+                >
+                  <el-select
+                    v-model="serviceForm.datatype"
+                    clearable
+                  >
+                    <el-option
+                      label="JSON"
+                      :value="1"
+                    />
+                    <el-option
+                      label="XML"
+                      :value="2"
+                    />
+                    <el-option
+                      label="自定义"
+                      :value="3"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
               <el-col :span="12">
                 <el-form-item
                   label="取值规则"
@@ -234,16 +272,24 @@
                     v-model="serviceForm.frequencyUnit"
                     clearable
                   >
+                    <el-option
+                      label="天"
+                      :value="24 * 60 * 60 * 1000"
+                    />
                     <el-option
                       label="小时"
-                      :value="3600"
+                      :value="60 * 60 * 1000"
                     />
                     <el-option
                       label="分钟"
-                      :value="60"
+                      :value="60 * 1000"
                     />
                     <el-option
                       label="秒"
+                      :value="1000"
+                    />
+                    <el-option
+                      label="毫秒"
                       :value="1"
                     />
                   </el-select>
@@ -268,11 +314,12 @@
             <DataTable
               ref="serviceOutputTable"
               data-id="7"
+              :data-content="{ serviceID: serviceID }"
               :rows="12"
               :min-height="70"
               margin-top="0"
               :is-btn="false"
-              :is-dialog="false"
+              :is-dialog="true"
             />
           </main>
         </div>
@@ -290,11 +337,14 @@
             <DataTable
               ref="serviceMachineTable"
               data-id="3"
+              :data-content="{ serviceID: serviceID }"
               :rows="12"
               :min-height="70"
               margin-top="0"
               :is-btn="false"
-              :is-dialog="false"
+              :is-dialog="true"
+              :selection-enable="true"
+              @selection-change="machineSelectionChangeHandler"
             />
           </main>
         </div>
@@ -307,8 +357,10 @@
 // import NoData from '@/components/nodata'
 // import Dialog from '@/layout/components/Dialog'
 import DataTable from '@/components/Table'
+import { myQuery } from '@/api/dataIntegration'
+
 // import query from './mixins/query'
-// import operate from './mixins/operate'
+import operate from './mixins/operate'
 
 export default {
   components: {
@@ -316,7 +368,10 @@ export default {
     // Dialog,
     DataTable
   },
-  // mixins: [query, operate],
+  mixins: [
+    // query,
+    operate
+  ],
   data() {
     return {
       serviceID: Number(this.$route.query.serviceID),
@@ -330,7 +385,9 @@ export default {
         dataSourceID: null,
         lifeCycleCol: '',
         serviceDescribe: '',
+        threads: null,
         isAsynchronous: 1,
+        datatype: null,
         computingMethod: '',
         validationExpression: '',
         startTime: null,
@@ -353,7 +410,18 @@ export default {
       outputList: []
     }
   },
+  mounted() {
+    this.queryServiceByID(this.serviceID)
+    this.getDataSourceList()
+  },
   methods: {
+    editSubmitHandler() {
+      this.$refs['serviceForm'].validate(valid => {
+        if (valid) {
+          this.updateService()
+        }
+      })
+    },
     btnAddClickHandler(flag) {
       switch (flag) {
         case 1:
@@ -365,6 +433,40 @@ export default {
         default:
           break
       }
+    },
+    async machineSelectionChangeHandler(selection, row) {
+      const isSelected = selection.findIndex(item => item.deployNodeID === row.deployNodeID) > -1
+      const event = isSelected ? 1 : 3
+      try {
+        const message = await this.updateServiceNode(event, row)
+        this.$message.success(message ?? '操作成功')
+      } catch (error) {
+        this.$message.error(error)
+        this.$refs['serviceMachineTable'].toggleRowSelection(row, !isSelected)
+      }
+    },
+    async getDataSourceList() {
+      const dataSourceList = await this.getSelectOption(21)
+      this.dataSourceList = dataSourceList.map(item => {
+        item[item.setlabel] = item.k
+        item[item.setvalue] = item.v
+        return item
+      })
+    },
+    async getSelectOption(ID) {
+      try {
+        const { listValues } = await myQuery(ID)
+        return listValues
+      } catch (error) {
+        this.$message.error(error)
+        return []
+      }
+    },
+    async queryServiceByID(serviceID) {
+      const serviceInfo = await myQuery(39, serviceID)
+      Object.entries(serviceInfo.listValues[0]).forEach(([key, value]) => {
+        this.serviceForm[key] = value
+      })
     }
   }
 }
@@ -425,8 +527,10 @@ export default {
               .el-form-item__label {
                 padding-right: 16px;
               }
-              .el-input {
+              .el-input,
+              .el-select {
                 width: 100%;
+                height: 32px;
               }
             }
           }
@@ -462,6 +566,7 @@ export default {
     }
     .service-tables {
       width: 100%;
+      // height: ;
       display: flex;
       margin: 0 -12px;
       .service-table-wrapper {

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

@@ -1,6 +1,6 @@
 <!--
  * @Date: 2022-04-12 17:49:47
- * @LastEditTime: 2022-06-10 11:30:00
+ * @LastEditTime: 2022-06-11 17:30:55
  * @LastEditors: your name
  * @Description: 服务管理-首页
  * have a nice day!
@@ -10,6 +10,7 @@
   <div class="service-home">
     <div class="wrap">
       <DataTable
+        ref="serviceTable"
         data-id="2"
         :rows="12"
         width="800px"
@@ -22,89 +23,290 @@
       <!--新增弹框-->
       <Dialog
         :flag="createDialogVisible"
-        width="600px"
+        width="878px"
       >
         <div class="dialog-create">
           <div class="title">新增服务</div>
           <main class="content">
             <el-form
-              ref="createForm"
-              class="create-form"
-              :model="createForm"
-              :rules="createFormRules"
+              ref="serviceForm"
+              class="service-form"
+              :model="serviceForm"
+              :rules="serviceFormRules"
               label-position="right"
               label-width="82px"
               size="mini"
             >
-              <el-form-item
-                label="服务名称"
-                prop="serviceName"
+              <el-row
+                :gutter="36"
+                type="flex"
               >
-                <el-input
-                  v-model="createForm.serviceName"
-                  placeholder="请输入服务名称"
-                  clearable
-                />
-              </el-form-item>
-              <el-form-item
-                label="描述"
-                prop="serviceDescribe"
-              >
-                <el-input
-                  v-model="createForm.serviceDescribe"
-                  placeholder="请输入描述"
-                  type="textarea"
-                  :autosize="{ minRows: 4, maxRows: 4 }"
-                  resize="none"
-                  clearable
-                />
-              </el-form-item>
-              <el-form-item label="是否同步">
-                <el-radio-group v-model="createForm.isAsynchronous">
-                  <el-radio :label="0">是</el-radio>
-                  <el-radio :label="1">否</el-radio>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item
-                label="来源"
-                prop="protocolID"
-              >
-                <el-select
-                  v-model="createForm.protocolID"
-                  placeholder="请选择来源"
-                >
-                  <el-option
-                    v-for="item in protocolList"
-                    :key="item.protocolID"
-                    :value="item.protocolID"
-                    :label="item.protocolName"
-                  />
-                </el-select>
-              </el-form-item>
-              <el-form-item
-                label="并发线程数"
-                prop="threads"
-                label-width="96px"
-              >
-                <el-input
-                  v-model="createForm.threads"
-                  placeholder="请输入并发线程数"
-                  clearable
-                />
-              </el-form-item>
-              <el-form-item
-                label="来源配置"
-                prop="connectConfig"
-              >
-                <el-input
-                  v-model="createForm.connectConfig"
-                  placeholder="请输入来源配置"
-                  type="textarea"
-                  :autosize="{ minRows: 4, maxRows: 4 }"
-                  resize="none"
-                  clearable
-                />
-              </el-form-item>
+                <el-col :span="24">
+                  <el-form-item
+                    label="服务名称"
+                    prop="serviceName"
+                  >
+                    <el-input
+                      v-model="serviceForm.serviceName"
+                      placeholder="请输入服务名称"
+                      clearable
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item
+                    label="类型"
+                    prop="serviceType"
+                  >
+                    <el-select
+                      v-model="serviceForm.serviceType"
+                      clearable
+                    >
+                      <el-option
+                        :value="1"
+                        label="管理前端"
+                      />
+                      <el-option
+                        :value="2"
+                        label="管理后端"
+                      />
+                      <el-option
+                        :value="3"
+                        label="业务前端"
+                      />
+                      <el-option
+                        :value="4"
+                        label="业务后端"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item
+                    label="是否同步"
+                    label-width="114px"
+                  >
+                    <el-radio-group v-model="serviceForm.isAsynchronous">
+                      <el-radio :label="0">是</el-radio>
+                      <el-radio :label="1">否</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item
+                    label="数据来源"
+                    prop="dataSourceID"
+                  >
+                    <el-select
+                      v-model="serviceForm.dataSourceID"
+                      clearable
+                    >
+                      <el-option
+                        v-for="dataSource in dataSourceList"
+                        :key="dataSource.dataSourceID"
+                        :value="dataSource.dataSourceID"
+                        :label="dataSource.dataSourceName"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item
+                    label="生命周期ID键名"
+                    prop="lifeCycleCol"
+                    label-width="114px"
+                  >
+                    <el-input
+                      v-model="serviceForm.lifeCycleCol"
+                      placeholder="请输入生命周期ID键名"
+                      clearable
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item
+                    label="采集线程"
+                    prop="threads"
+                  >
+                    <el-input
+                      v-model="serviceForm.threads"
+                      type="number"
+                      placeholder="请输入采集线程数"
+                      clearable
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item
+                    label="数据类型"
+                    prop="datatype"
+                  >
+                    <el-select
+                      v-model="serviceForm.datatype"
+                      clearable
+                    >
+                      <el-option
+                        label="JSON"
+                        :value="1"
+                      />
+                      <el-option
+                        label="XML"
+                        :value="2"
+                      />
+                      <el-option
+                        label="自定义"
+                        :value="3"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item
+                    label="取值规则"
+                    prop="computingMethod"
+                  >
+                    <el-input
+                      v-model="serviceForm.computingMethod"
+                      placeholder="请输入取值规则"
+                      type="textarea"
+                      :autosize="{ minRows: 4, maxRows: 4 }"
+                      resize="none"
+                      clearable
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item
+                    label="检测规则"
+                    prop="validationExpression"
+                  >
+                    <el-input
+                      v-model="serviceForm.validationExpression"
+                      placeholder="请输入检测规则"
+                      type="textarea"
+                      :autosize="{ minRows: 4, maxRows: 4 }"
+                      resize="none"
+                      clearable
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item
+                    label="启动时间"
+                    prop="startTime"
+                  >
+                    <el-date-picker
+                      v-model="serviceForm.startTime"
+                      type="datetime"
+                      format="yyyy-MM-dd HH:mm"
+                      value-format="yyyy-MM-dd HH:mm"
+                      placeholder="请选择启动时间"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item
+                    label="停止时间"
+                    prop="stopTime"
+                  >
+                    <el-date-picker
+                      v-model="serviceForm.stopTime"
+                      type="datetime"
+                      format="yyyy-MM-dd HH:mm"
+                      value-format="yyyy-MM-dd HH:mm"
+                      placeholder="请选择停止时间"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item
+                    label="失败重试次数"
+                    prop="retryCount"
+                    label-width="100px"
+                  >
+                    <el-input
+                      v-model="serviceForm.retryCount"
+                      type="number"
+                      placeholder="请输入重试次数"
+                      clearable
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item
+                    label="循环次数"
+                    prop="loopCount"
+                  >
+                    <el-input
+                      v-model="serviceForm.loopCount"
+                      type="number"
+                      placeholder="请输入循环次数"
+                      clearable
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item
+                    label="循环频率"
+                    prop="frequencyCount"
+                  >
+                    <el-input
+                      v-model="serviceForm.frequencyCount"
+                      type="number"
+                      placeholder="请输入循环频率"
+                      clearable
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item
+                    label="循环频率单位"
+                    prop="frequencyUnit"
+                    label-width="100px"
+                  >
+                    <el-select
+                      v-model="serviceForm.frequencyUnit"
+                      clearable
+                    >
+                      <el-option
+                        label="天"
+                        :value="24 * 60 * 60 * 1000"
+                      />
+                      <el-option
+                        label="小时"
+                        :value="60 * 60 * 1000"
+                      />
+                      <el-option
+                        label="分钟"
+                        :value="60 * 1000"
+                      />
+                      <el-option
+                        label="秒"
+                        :value="1000"
+                      />
+                      <el-option
+                        label="毫秒"
+                        :value="1"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item
+                    label="服务描述"
+                    prop="serviceDescribe"
+                  >
+                    <el-input
+                      v-model="serviceForm.serviceDescribe"
+                      placeholder="请输入描述"
+                      type="textarea"
+                      :autosize="{ minRows: 4, maxRows: 4 }"
+                      resize="none"
+                      clearable
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
             </el-form>
           </main>
           <div class="foot">
@@ -129,7 +331,7 @@
 <script>
 import Dialog from '@/layout/components/Dialog/index.vue'
 import { GeneralDataReception, Query } from '@/api/dataIntegration'
-import { regular } from '@/utils/validate'
+// import { regular } from '@/utils/validate'
 import DataTable from '@/components/Table'
 export default {
   name: 'ProtocolHome',
@@ -141,43 +343,41 @@ export default {
     return {
       serviceList: [],
       createDialogVisible: false,
-      createForm: {
+      serviceForm: {
         serviceName: '',
-        serviceDescribe: '',
-        isAsynchronous: 0,
-        protocolID: '',
-        threads: '',
-        connectConfig: ''
+        serviceType: null,
+        dataSourceID: null,
+        lifeCycleCol: '',
+        isAsynchronous: 1,
+        threads: null,
+        datatype: null,
+        computingMethod: '',
+        validationExpression: '',
+        startTime: null,
+        stopTime: null,
+        retryCount: null,
+        loopCount: null,
+        frequencyCount: null,
+        frequencyUnit: null,
+        serviceDescribe: ''
       },
-      createFormRules: {
-        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']
-          }
-        ]
+      serviceFormRules: {
+        serviceName: [{ required: true, message: '请输入服务名称', trigger: ['change', 'blur'] }]
       },
-      protocolList: [],
+      dataSourceList: [],
       deleteDialogVisible: false,
       delObj: {}
     }
   },
-  mounted() {
-    // this.getServiceList();
-  },
   methods: {
     // 新增-弹框
     showCreateDialog() {
-      this.getProtocolList()
+      this.getDataSourceList()
       this.createDialogVisible = true
     },
     // 新增-提交
     createSubmitHandler() {
-      this.$refs['createForm'].validate(valid => {
+      this.$refs['serviceForm'].validate(valid => {
         if (valid) {
           this.createService()
         }
@@ -185,7 +385,7 @@ export default {
     },
     // 新增-关闭
     hideCreateDialog() {
-      this.$refs['createForm'].resetFields()
+      this.$refs['serviceForm'].resetFields()
       this.createDialogVisible = false
     },
     // 编辑-跳转
@@ -195,31 +395,28 @@ export default {
         query: { serviceID: item.serviceID }
       })
     },
-    async getServiceList() {
-      try {
-        const res = await Query({
-          id: 3,
-          dataContent: []
-        })
-        if (Number(res.code) === 0) {
-          this.serviceList = res.returnData
-        } else {
-          this.$message.error(res.message ?? '失败')
-        }
-      } catch (error) {
-        console.log('错误', error)
-      }
+    getServiceList() {
+      this.$refs['serviceTable'].getQuery()
     },
-    async getProtocolList() {
+    async getDataSourceList() {
+      const dataSourceList = await this.getSelectOption(21)
+      this.dataSourceList = dataSourceList.map(item => {
+        item[item.setlabel] = item.k
+        item[item.setvalue] = item.v
+        return item
+      })
+    },
+    async getSelectOption(id) {
       try {
-        const res = await Query({
-          id: 1,
+        const { code, returnData, message } = await Query({
+          id,
           dataContent: []
         })
-        if (Number(res.code) === 0) {
-          this.protocolList = res.returnData
+        if (Number(code) === 0) {
+          return returnData.listValues
         } else {
-          this.$message.error(res.message ?? '失败')
+          this.$message.error(message ?? '失败')
+          return []
         }
       } catch (error) {
         console.log('错误', error)
@@ -227,10 +424,10 @@ export default {
     },
     async createService() {
       try {
-        this.createForm['operate'] = 1
+        this.serviceForm['event'] = 1
         const res = await GeneralDataReception({
           serviceId: 3,
-          dataContent: JSON.stringify(this.createForm)
+          dataContent: JSON.stringify(this.serviceForm)
         })
         if (Number(res.code) === 0) {
           this.$message.success(res.message ?? '成功')
@@ -243,24 +440,6 @@ export default {
         console.log('错误', error)
       }
     }
-    // async deleteService() {
-    //   try {
-    //     this.delObj['operate'] = 3
-    //     const res = await GeneralDataReception({
-    //       serviceId: 3,
-    //       dataContent: JSON.stringify(this.delObj)
-    //     })
-    //     if (Number(res.code) === 0) {
-    //       this.$message.success(res.message ?? '成功')
-    //       this.hideDeleteDialog()
-    //       this.getServiceList()
-    //     } else {
-    //       this.$message.error(res.message ?? '失败')
-    //     }
-    //   } catch (error) {
-    //     console.log('错误', error)
-    //   }
-    // }
   }
 }
 </script>
@@ -330,18 +509,49 @@ export default {
       }
     }
     .dialog-create {
-      ::v-deep .create-form {
+      ::v-deep .service-form {
         display: flex;
         flex-wrap: wrap;
-        > .el-form-item {
-          &:not(:nth-child(4), :nth-child(5)) {
-            width: 100%;
+        > .el-row {
+          flex-wrap: wrap;
+          > .el-col > .el-form-item {
+            margin-bottom: 20px;
+            .el-form-item__label {
+              padding-right: 16px;
+            }
+            .el-input,
+            .el-select {
+              width: 100%;
+            }
           }
-          &:nth-child(5) {
-            margin-left: 34px;
-            flex: 1;
+        }
+        label,
+        span,
+        button,
+        input,
+        optgroup,
+        select,
+        textarea {
+          font-family: Helvetica, Microsoft YaHei;
+          font-size: 14px;
+          font-weight: 400;
+        }
+        label {
+          color: #303133;
+        }
+        input {
+          color: #101116;
+          &::-webkit-outer-spin-button,
+          &::-webkit-inner-spin-button {
+            -webkit-appearance: none !important;
+          }
+          &[type='‘number’'] {
+            -moz-appearance: textfield !important;
           }
         }
+        .el-radio {
+          font-weight: 400;
+        }
       }
     }
   }