服务管理修改ing

public/demo.js

@@ -63,7 +63,6 @@ const DATACONTENT_ID = {
 
   /***-----系统设置------***/
   sysProtoTabId: 1, //系统设置-协议管理-表格-id
-  sysServiceTabId: 2, //系统设置-服务管理-表格-id
   structureTabId: 5, //系统设置-数据结构管理-表格-id
   sourceDataTabId: 6, //系统设置-源数据管理-表格-id
   dataitemTabId: 9, //系统设置-数据项-表格-id
@@ -71,12 +70,26 @@ const DATACONTENT_ID = {
   sysServiceWarningId: 18029, //查询预警报警场景列表
   sysServiceWarnId: 18030, //预警报警场景(按照ID)
   sysServiceStrategyId: 18033, //预警报警策略(按照ID)
-  sysSourceId: 13, //系统设置-数据源-id
   sysQueryEditId: 24, //系统设置-查询模板-编辑-根据id获取服务
   sysQueryChildTabId: 25, //系统设置-查询模板-列设置-表格-id
   sysQueryChildEditTabId: 26, //系统设置-查询模板-列设置-表格-编辑-id
-  sysServiceTopTable: 31, //系统设置-服务管理-服务拓扑-查看日志
   messageQueryTabId: 1803442, //系统设置-消息查询-表格-id
+  
+  dataSourceOptions: 13, //系统设置-数据源下拉
+  serviceOptions: 14, //系统设置-服务下拉
+  protocolOptions: 15, //系统设置-协议下拉
+  machineOptions: 17, //系统设置-机器下拉
+  dataStructOptions: 18, //系统设置-数据结构下拉
+  templateOptions: 19, //系统设置-查询模板下拉
+  booleanOptions: 20, //系统设置-布尔值下拉
+  filteredTemplateOptions: 21, //系统设置-下拉选项下拉
+
+  sysServiceTable: 2, //系统设置-服务管理-表格
+  sysServiceMachineTable: 3, //系统设置-服务管理-编辑-部署机器-表格
+  sysServiceOutTable: 7, //系统设置-服务管理-编辑-输出-表格
+  sysServiceDetail: 23, //系统设置-服务管理-编辑服务-根据id获取服务详情
+  sysServiceTopologyTable: 31, //系统设置-服务管理-服务拓扑-查看日志
+  sysServiceTopology: 32, //系统设置-服务管理-服务拓扑-根据id获取拓扑图
 
   /***-----数据查询------***/
   flightTabId: 1803439, //数据查询-航班-表格-id
@@ -99,4 +112,8 @@ const SERVICE_ID = {
   roleMsgAuthId: 20, //角色管理-权限树规则-增删改
   /***-----账号组管理------***/
   accountGroupScId: 8015, //账号管理-增删改
+
+  /***-----系统设置------***/
+  sysServiceEdit: 3, //系统设置-服务管理-新增服务-提交/编辑服务-保存
+  sysServiceAddXyId: 10, //系统设置-服务管理-新增服务-新增数据源-提交
 };

src/router/routes/routes-file-four.ts

@@ -3,8 +3,8 @@ import Layout from '@/layout'
 const HomeRoutes = {
   path: '/systemSettings',
   component: Layout,
-  name: "systemSettings",
-  redirect: "/systemSettings/warningSet",
+  name: 'systemSettings',
+  redirect: '/systemSettings/warningSet',
   //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
   meta: { title: '系统配置', elSvgIcon: 'Fold', breadcrumb: false },
   children: [
@@ -24,28 +24,28 @@ const HomeRoutes = {
         import('@/views/systemSettings/securityPolicy/securityPolicyedit.vue'),
     },
     {
-      path: "/systemSettings/warningSet",
-      name: "WarningSet",
-      meta: { title: "预警告警策略", elSvgIcon: "Fold", icon: "table" },
-      redirect: "/systemSettings/warningSet",
+      path: '/systemSettings/warningSet',
+      name: 'WarningSet',
+      meta: { title: '预警告警策略', elSvgIcon: 'Fold', icon: 'table' },
+      redirect: '/systemSettings/warningSet',
       component: {
-        render: () => h(resolveComponent("router-view")),
+        render: () => h(resolveComponent('router-view')),
       },
       children: [
         {
-          path: "/systemSettings/warningSet",
-          name: "WarningSet",
+          path: '/systemSettings/warningSet',
+          name: 'WarningSet',
           hidden: true,
           component: () =>
-            import("@/views/systemSettings/warningSet/index.vue"),
+            import('@/views/systemSettings/warningSet/index.vue'),
         },
         {
-          path: "/systemSettings/warningEdit",
-          name: "WarningEdit",
+          path: '/systemSettings/warningEdit',
+          name: 'WarningEdit',
           hidden: true,
-          meta: { title: "预警告警策略编辑", elSvgIcon: "Fold", icon: "table" },
+          meta: { title: '预警告警策略编辑', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/systemSettings/warningEdit/index.vue"),
+            import('@/views/systemSettings/warningEdit/index.vue'),
         },
       ],
     },
@@ -98,47 +98,47 @@ const HomeRoutes = {
       ],
     },
     {
-      path: "/systemSettings/queryTemplate",
-      name: "QueryTemplate",
-      meta: { title: "查询模板", elSvgIcon: "Fold", icon: "table" },
-      redirect: "/systemSettings/queryTemplate",
+      path: '/systemSettings/queryTemplate',
+      name: 'QueryTemplate',
+      meta: { title: '查询模板', elSvgIcon: 'Fold', icon: 'table' },
+      redirect: '/systemSettings/queryTemplate',
       component: {
-        render: () => h(resolveComponent("router-view")),
+        render: () => h(resolveComponent('router-view')),
       },
       children: [
         {
-          path: "/systemSettings/queryTemplate",
-          name: "QueryTemplate",
+          path: '/systemSettings/queryTemplate',
+          name: 'QueryTemplate',
           hidden: true,
           component: () =>
-            import("@/views/systemSettings/queryTemplate/index.vue"),
+            import('@/views/systemSettings/queryTemplate/index.vue'),
         },
         {
-          path: "/systemSettings/queryTemplateAdd",
-          name: "QueryTemplateAdd",
+          path: '/systemSettings/queryTemplateAdd',
+          name: 'QueryTemplateAdd',
           hidden: true,
-          meta: { title: "新增查询模板", elSvgIcon: "Fold", icon: "table" },
+          meta: { title: '新增查询模板', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/systemSettings/queryTemplate/queryTemplateAdd.vue"),
+            import('@/views/systemSettings/queryTemplate/queryTemplateAdd.vue'),
         },
         {
-          path: "/systemSettings/queryTemplateEdit",
-          name: "QueryTemplateEdit",
+          path: '/systemSettings/queryTemplateEdit',
+          name: 'QueryTemplateEdit',
           hidden: true,
-          meta: { title: "编辑查询模板", elSvgIcon: "Fold", icon: "table" },
+          meta: { title: '编辑查询模板', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
             import(
-              "@/views/systemSettings/queryTemplate/queryTemplateEdit.vue"
+              '@/views/systemSettings/queryTemplate/queryTemplateEdit.vue'
             ),
         },
         {
-          path: "/systemSettings/queryTemplateColumn",
-          name: "QueryTemplateColumn",
+          path: '/systemSettings/queryTemplateColumn',
+          name: 'QueryTemplateColumn',
           hidden: true,
-          meta: { title: "查询模板设置", elSvgIcon: "Fold", icon: "table" },
+          meta: { title: '查询模板设置', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
             import(
-              "@/views/systemSettings/queryTemplate/queryTemplateColumn.vue"
+              '@/views/systemSettings/queryTemplate/queryTemplateColumn.vue'
             ),
         },
       ],
@@ -171,29 +171,29 @@ const HomeRoutes = {
         import('@/views/systemSettings/protocolManagement/index.vue'),
     },
     {
-      path: "/systemSettings/datastructure",
-      name: "Datastructure",
-      meta: { title: "数据结构管理", elSvgIcon: "Fold", icon: "table" },
-      redirect: "/systemSettings/datastructure",
+      path: '/systemSettings/datastructure',
+      name: 'Datastructure',
+      meta: { title: '数据结构管理', elSvgIcon: 'Fold', icon: 'table' },
+      redirect: '/systemSettings/datastructure',
       component: {
-        render: () => h(resolveComponent("router-view")),
+        render: () => h(resolveComponent('router-view')),
       },
       children: [
         {
-          path: "/systemSettings/datastructure",
+          path: '/systemSettings/datastructure',
           hidden: true,
-          name: "Datastructure",
+          name: 'Datastructure',
           component: () =>
-            import("@/views/systemSettings/datastructure/index.vue"),
+            import('@/views/systemSettings/datastructure/index.vue'),
         },
         {
-          path: "/systemSettings/datastructureTerm",
-          name: "DatastructureTerm",
+          path: '/systemSettings/datastructureTerm',
+          name: 'DatastructureTerm',
           hidden: true,
-          meta: { title: "数据项", elSvgIcon: "Fold", icon: "table" },
+          meta: { title: '数据项', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
             import(
-              "@/views/systemSettings/datastructure/datastructureTerm.vue"
+              '@/views/systemSettings/datastructure/datastructureTerm.vue'
             ),
         },
       ],

src/utils/axiosReq.ts

@@ -115,6 +115,7 @@ export function axiosReq({
   url,
   data,
   method,
+  headers,
   isParams,
   bfLoading,
   afHLoading,
@@ -128,6 +129,7 @@ export function axiosReq({
     url: url,
     method: method ?? 'get',
     data: data ?? {},
+    headers: headers ?? {},
     isParams: isParams ?? false,
     bfLoading: bfLoading ?? false,
     afHLoading: afHLoading ?? true,

src/views/realTime/type.d.ts

@@ -1,6 +1,5 @@
-import { Ref } from 'vue'
-import type { TableInstance, Column } from 'element-plus'
-import type { CSSProperties } from 'vue'
+import type { Ref, CSSProperties } from 'vue'
+import { TableInstance, Column } from 'element-plus'
 
 export type StationFormData = {
   startDate: string

src/views/systemSettings/queryTemplate/index.vue

@@ -10,7 +10,7 @@
       >
       <div class="app-containers">
         <DataTable
-          BtnGroupWidth=" 300px"
+          btnGroupWidth=" 300px"
           :tableHeader="tableCols"
           :tableData="tableData"
           :tableBtnGroup="tableBtnGroup"

src/views/systemSettings/serviceManagement/index.vue

@@ -4,7 +4,7 @@
       <MinHeader
         :is-auth="true"
         :is-statuser="true"
-        @addForm="addServiceHandler"
+        @addForm="addServiceDialogShow"
       >
         <template #header>
           <div class="status flex-wrap">
@@ -23,24 +23,27 @@
           :table-btn-group="tableBtnGroup"
           btn-group-width="310px"
           :table-property="{ rowKey: 'ID' }"
-          @btn-click="btnClickHandler"
+          @btn-click="tableButtonClickHandler"
         />
       </div>
       <Dialog
         :width="serviceDialogWidth"
         :flag="serviceDialogVisible"
-        :type="type"
+        :type="serviceDialogType"
         :del-name="delName"
         :msg-title="msgTitle"
-        @delRest="delCancelHandler"
+        @del-remove="delSubmitHandler"
+        @del-rest="delDialogHide"
+        @submit-form="serviceSubmitHandler"
+        @reset-form="serviceDialogHide"
       >
         <el-form
-          ref="serviceForm"
+          ref="serviceFormRef"
           class="service-form"
           :model="serviceForm"
           :rules="serviceFormRules"
           label-position="right"
-          label-width="82px"
+          label-width="90px"
           size="mini"
         >
           <el-row :gutter="36" type="flex">
@@ -56,7 +59,7 @@
             <el-col :span="12">
               <el-form-item
                 label="前序输出编号"
-                label-width="114px"
+                label-width="120px"
                 prop="serviceOutputID"
               >
                 <el-input
@@ -100,7 +103,7 @@
                   type="primary"
                   size="small"
                   style="height: 28px; line-height: 0px"
-                  @click="addDataSourceHandler"
+                  @click="addDataSourceDialogShow"
                   >新增</el-button
                 >
               </div>
@@ -108,7 +111,7 @@
             <el-col :span="12">
               <el-form-item
                 label="数据来源对象"
-                label-width="114px"
+                label-width="120px"
                 prop="sourceObjectName"
               >
                 <el-input
@@ -131,7 +134,7 @@
               <el-form-item
                 label="生命周期ID键名"
                 prop="lifeCycleCol"
-                label-width="114px"
+                label-width="120px"
               >
                 <el-input
                   v-model="serviceForm.lifeCycleCol"
@@ -269,11 +272,41 @@
       </Dialog>
       <Dialog
         type="add"
-        width="600px"
+        width="500px"
         :flag="dataSourceDialogVisible"
         msg-title="新增数据来源"
-        @delRest="delCancelHandler"
-      ></Dialog>
+        @submit-form="dataSourceSubmitHandler"
+        @reset-form="dataSourceDialogHide"
+      >
+        <el-form ref="sourceFormRef" label-width="100px" :model="sourceForm">
+          <el-form-item label="数据源名称">
+            <el-input v-model="sourceForm.dataSourceName" size="small" />
+          </el-form-item>
+          <el-form-item label="协议名称">
+            <el-select
+              size="small"
+              style="width: 100%"
+              v-model="sourceForm.protocolName"
+              placeholder="请选择活动区域"
+            >
+              <el-option
+                v-for="protocol in protocolList"
+                :key="protocol.protocolID"
+                :label="protocol.protocolName"
+                :value="protocol.protocolID"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="连接参数">
+            <el-input
+              size="small"
+              type="textarea"
+              rows="3"
+              v-model="sourceForm.connectConfig"
+            />
+          </el-form-item>
+        </el-form>
+      </Dialog>
     </div>
   </div>
 </template>
@@ -281,15 +314,65 @@
 import DataTable from '@/components/tableTemp/index.vue'
 import MinHeader from '@/components/minheader/index.vue'
 import Dialog from '@/components/dialog/index.vue'
+import { ElMessage, FormInstance } from 'element-plus'
+import { Query } from '@/api/dataIntegration'
+import {
+  CommonTableColumn,
+  CommonQueryResult,
+  SelectOptionQueryResult,
+} from '~/common'
 
 interface DataSource {
-  dataSourceID: string
+  dataSourceID: string | number
   dataSourceName: string
 }
+interface Protocol {
+  protocolID: string | number
+  protocolName: string
+}
 
 // 表格
-const tableColumns = ref([])
+const tableColumns = ref<CommonTableColumn[]>([])
 const tableData = ref<any[]>([])
+const page = ref(0)
+const noMore = ref(false)
+const rowTitle = ref('')
+onMounted(() => {
+  getTableData()
+})
+const getTableData = async () => {
+  try {
+    const {
+      code,
+      returnData: { columnSet, listValues },
+      message,
+    }: CommonQueryResult = await Query({
+      id: DATACONTENT_ID.sysServiceTable,
+      dataContent: [],
+      needPage: ++page.value,
+    })
+    if (Number(code) !== 0) {
+      throw new Error(message || '失败')
+    }
+    if (listValues.length === 0) {
+      page.value--
+      noMore.value = false
+    }
+    const titleColumn = columnSet.find(column => column.needShow === 1)
+    if (titleColumn) {
+      rowTitle.value = titleColumn.columnName
+    }
+    tableColumns.value = columnSet.map(column => ({
+      key: column.columnName,
+      label: column.columnLabel,
+      ...column,
+    }))
+    tableData.value.push(...listValues)
+  } catch (error: any) {
+    page.value--
+    ElMessage.error(error.message)
+  }
+}
 const tableBtnGroup = [
   {
     name: '查看',
@@ -312,23 +395,46 @@ const tableBtnGroup = [
     param: 4,
   },
 ]
-const btnClickHandler = (rowIndex: number, row: Object, param: number) => {}
+const tableButtonClickHandler = (
+  rowIndex: number,
+  row: object,
+  param: number
+) => {
+  switch (param) {
+    case 1:
+      break
+    case 2:
+      break
+    case 3:
+      break
+    case 4:
+      break
+    default:
+      break
+  }
+}
 
-// 新增/删除-弹窗
+// 新增/删除服务-弹窗
 const serviceDialogVisible = ref(false) // 弹窗开关
-const type = ref('del') // 弹窗类型是否删除
+const serviceDialogType = ref('del') // 弹窗类型是否删除
 const serviceDialogWidth = computed(() =>
-  type.value === 'del' ? '600px' : '878px'
+  serviceDialogType.value === 'del' ? '600px' : '878px'
 )
 const delName = ref('') // 删除对象名
 const msgTitle = '新增服务管理' // 新增弹窗-标题
-const addServiceHandler = () => {
-  type.value = 'add'
+const addServiceDialogShow = () => {
+  getSelectOptions(DATACONTENT_ID.dataSourceOptions)
+  serviceDialogType.value = 'add'
   serviceDialogVisible.value = true
 }
-const delCancelHandler = () => {}
-
+const delSubmitHandler = () => {}
+const delDialogHide = () => {}
+const serviceDialogHide = () => {
+  serviceFormRef.value?.resetFields()
+  serviceDialogVisible.value = false
+}
 // 新增服务-表单
+const serviceFormRef = ref<FormInstance | null>(null)
 const serviceForm = reactive({
   serviceName: '',
   serviceOutputID: null,
@@ -361,11 +467,63 @@ const serviceFormRules = {
   ],
 }
 const dataSourceList = ref<DataSource[]>([])
+const serviceSubmitHandler = () => {
+  serviceDialogHide()
+}
 
 // 新增数据来源-弹窗
 const dataSourceDialogVisible = ref(false)
-const addDataSourceHandler = () => {}
+const addDataSourceDialogShow = () => {
+  getSelectOptions(DATACONTENT_ID.protocolOptions)
+  dataSourceDialogVisible.value = true
+}
+const dataSourceDialogHide = () => {
+  sourceFormRef.value?.resetFields()
+  dataSourceDialogVisible.value = false
+}
 // 新增数据来源-表单
+const sourceFormRef = ref<FormInstance | null>(null)
+const sourceForm = reactive({
+  dataSourceName: '',
+  protocolName: '',
+  connectConfig: '',
+})
+const protocolList = ref<Protocol[]>([])
+const dataSourceSubmitHandler = () => {
+  dataSourceDialogHide()
+}
+
+const getSelectOptions = async (id: number) => {
+  try {
+    const {
+      code,
+      returnData: { listValues },
+      message,
+    }: SelectOptionQueryResult = await Query({
+      id,
+      dataContent: [],
+    })
+    if (Number(code) !== 0) {
+      throw new Error(message || '失败')
+    }
+    const options = listValues.map(item => ({
+      [item.setlabel]: item.k,
+      [item.setvalue]: item.v,
+    }))
+    switch (id) {
+      case DATACONTENT_ID.dataSourceOptions:
+        dataSourceList.value = options as DataSource[]
+        break
+      case DATACONTENT_ID.protocolOptions:
+        protocolList.value = options as Protocol[]
+        break
+      default:
+        break
+    }
+  } catch (error: any) {
+    ElMessage.error(error.message)
+  }
+}
 </script>
 <style lang="scss" scoped>
 .app-containers {
@@ -405,6 +563,7 @@ const addDataSourceHandler = () => {}
 .service-form:deep {
   display: flex;
   flex-wrap: wrap;
+  padding-left: 20px;
   > .el-row {
     flex-wrap: wrap;
     > .el-col .el-form-item {
@@ -455,8 +614,10 @@ const addDataSourceHandler = () => {}
     color: #101116;
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
+      appearance: none;
       -webkit-appearance: none !important;
       &[type='number'] {
+        appearance: textfield;
         -moz-appearance: textfield !important;
       }
     }

typings/common.d.ts

@@ -23,6 +23,7 @@ interface AxiosConfigTy {
   url?: string
   method?: string
   data?: ObjTy
+  headers?: any
   isParams?: boolean
   bfLoading?: boolean
   afHLoading?: boolean
@@ -71,3 +72,24 @@ interface CommonTableColumn {
   queryTemplateID: number
   [propName: string]: any
 }
+
+interface SelectOptionObj {
+  k: string
+  setlabel: string
+  setvalue: string
+  v: any
+}
+
+interface CommonQueryResult<T = any> {
+  code?: string | number
+  returnData: {
+    columnSet: CommonTableColumn[]
+    listValues: Array<T>
+  }
+  message?: string
+  needPage?: number
+  submitiD?: number
+  [propName: string]: any
+}
+
+type SelectOptionQueryResult = CommonQueryResult<SelectOptionObj>