服务管理修改

components.d.ts

@@ -17,6 +17,7 @@ declare module '@vue/runtime-core' {
     Table: typeof import('./src/components/table/index.vue')['default']
     Table2: typeof import('./src/components/table2/index.vue')['default']
     TableColumnSet: typeof import('./src/components/tableColumnSet/index.vue')['default']
+    TableHeaderCell: typeof import('./src/components/TableHeaderCell/index.vue')['default']
     TableTemp: typeof import('./src/components/tableTemp/index.vue')['default']
     TBtnGroup: typeof import('./src/components/TBtnGroup/index.vue')['default']
   }

src/components/TableHeaderCell/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="table-header-cell el-table-v2__header-cell-text">
+    <template v-if="!filterable || filterStyle === 'arrow'">
+      <span>{{ label }}</span>
+    </template>
+    <template v-if="filterable">
+      <el-popover
+        class="table-header-cell-popover"
+        placement="bottom"
+        trigger="click"
+        @show="expand = true"
+        @hide="expand = false"
+      >
+        <span
+          v-if="filterStyle === 'underline'"
+          slot="reference"
+          :class="['btn-filter', { 'btn-filter-active': active }]"
+          >{{ label }}</span
+        >
+        <i
+          v-if="filterStyle === 'arrow'"
+          slot="reference"
+          :class="[
+            'filter-arrow',
+            'el-icon-arrow-down',
+            { 'arrow-active': active, 'arrow-expand': expand },
+          ]"
+        />
+        <el-form>
+          <el-form-item :label="label">
+            <el-select
+              v-model="selections"
+              size="small"
+              placeholder="筛选"
+              multiple
+              filterable
+              default-first-option
+              collapse-tags
+              clearable
+              @change="
+                newVal => {
+                  $emit('update:filter-values', newVal)
+                }
+              "
+            >
+              <el-option
+                v-for="(option, index) in filterOptions"
+                :key="option.value + index"
+                :value="option.value"
+                :label="option.label"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </el-popover>
+    </template>
+    <template v-if="sortable">
+      <span class="caret-wrapper" @click="sortChange">
+        <i class="sort-caret ascending" />
+        <i class="sort-caret descending" />
+      </span>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  filterStyle: {
+    type: String as PropType<'arrow' | 'underline'>,
+    default: 'arrow',
+  },
+  filterOptions: {
+    type: Array as PropType<{ label: string, value: string }[]>,
+  },
+  filterValues: {
+    type: Array<string>,
+  },
+  sortable: {
+    type: Boolean,
+    default: false,
+  },
+  sortRule: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['update:sortRule'])
+
+const selections = ref<string[]>([])
+const expand = ref(false)
+const active = computed(() => !!props.filterValues?.length)
+const filterable = computed(() => !!props.filterOptions)
+watchEffect(() => {
+  if (props.filterValues) {
+    selections.value = props.filterValues
+  }
+})
+const sortChange = () => {
+  const sortRule =
+    props.sortRule === ''
+      ? 'ascending'
+      : props.sortRule === 'ascending'
+        ? 'descending'
+        : ''
+  emit('update:sortRule', sortRule)
+}
+</script>
+
+<style lang="scss" scoped>
+.filter-arrow {
+  cursor: pointer;
+  transition: 0.3s transform;
+
+  &.arrow-expand {
+    transform: rotate(-180deg);
+  }
+
+  &.arrow-active {
+    color: #2d7cff;
+    font-weight: bold;
+  }
+}
+
+.btn-filter {
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    color: #2d7cff;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    width: calc(100% + 4px);
+    position: absolute;
+    bottom: -4px;
+    left: -2px;
+    border-bottom: 1px solid #101116;
+  }
+
+  &.btn-filter-active,
+  &:hover {
+    &::after {
+      border-bottom: 2px solid #2d7cff;
+    }
+  }
+}
+
+.el-select-dropdown__item.hover {
+  background: #d2d6df;
+}
+</style>

src/components/tableTemp/index.vue

@@ -10,7 +10,7 @@
     :stripe="tableProps.stripe"
     :border="tableProps.border"
     :highlight-current-row="tableProps.highlightCurrentRow"
-    :header-cell-class-name="tableProps.headerRowClassName"
+    :header-cell-class-name="tableProps.headerCellClassName"
     :tooltip-effect="tableProps.tooltipEffect"
     :show-summary="tableProps.showSummary"
     :row-class-name="tableRowClassName"
@@ -19,11 +19,7 @@
     @cell-click="cellClickHandler"
     @select="selectHandler"
   >
-    <el-table-column
-      v-if="selectionEnable"
-      type="selection"
-      width="35"
-    />
+    <el-table-column v-if="selectionEnable" type="selection" width="35" />
     <el-table-column v-if="isStatus" width="55">
       <template #default="scope">
         <div class="tableStatus">
@@ -91,10 +87,15 @@
           v-for="(btn, index) in tableBtnGroup"
           :key="index"
           size="small"
-          @click="handleClick(scope.$index, scope.row, btn.param)"
           :class="btn.className"
-          >{{ btn.name }}</el-button
+          @click="handleClick(scope.$index, scope.row, btn.param)"
         >
+          {{
+            btn.name === '停止' && scope.row.runState === '停止'
+              ? '启动'
+              : btn.name
+          }}
+        </el-button>
       </template>
     </el-table-column>
   </el-table>
@@ -160,7 +161,7 @@ const props = defineProps({
   selectionEnable: {
     type: Boolean,
     default: false,
-  }
+  },
 })
 
 //表格参数
@@ -171,7 +172,7 @@ const tableProps = reactive({
   border: true,
   highlightCurrentRow: false,
   rowClassName: 'rowClass',
-  headerRowClassName: 'headerRowClass',
+  headerCellClassName: 'headerCell',
   tooltipEffect: 'light',
   showSummary: false,
   rowKey: '',
@@ -202,7 +203,7 @@ const emit = defineEmits([
   'cellClass',
   'rowClick',
   'cellClick',
-  'select'
+  'select',
 ])
 
 //按钮点击index为当前行序号 row 为当前行 param按钮类型判断参数由父组件传过来
@@ -253,8 +254,13 @@ const cellClickHandler = (row, column, cell, event) => {
   emit('cellClick', row, column, cell, event)
 }
 
+// 这里的参数是proxy代理对象，用toRaw获取原始对象
 const selectHandler = (selection, row) => {
-  emit('select', selection, row)
+  emit(
+    'select',
+    selection.map(row => toRaw(row)),
+    toRaw(row)
+  )
 }
 
 const table = ref<InstanceType<typeof ElTable> | null>(null)
@@ -290,7 +296,7 @@ defineExpose({
     font-size: 14px;
     color: #101116;
   }
-  .headerRowClass {
+  .el-table__header .el-table__cell {
     height: 40px;
     background: #ffffff;
     font-size: 14px;
@@ -321,11 +327,16 @@ defineExpose({
     font-weight: 400;
     color: #101116;
   }
-  .el-table__body .el-table__cell.cell-click {
+  .el-table__body .el-table__cell {
+    &.el-table-column--selection > .cell {
+      display: block;
+      text-align: center;
+    }
+    &.cell-click {
       color: #2d67e3;
       cursor: pointer;
     }
-  
+  }
 }
 :deep.el-table--striped
   .el-table__body

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

@@ -79,14 +79,6 @@ const HomeRoutes = {
               '@/views/systemSettings/serviceManagement/serviceTopology.vue'
             ),
         },
-        {
-          path: '/systemSettings/serviceAdd',
-          name: 'ServiceAdd',
-          hidden: true,
-          meta: { title: '服务编辑' },
-          component: () =>
-            import('@/views/systemSettings/serviceManagement/serviceEdit.vue'),
-        },
         {
           path: '/systemSettings/serviceEdit',
           name: 'ServiceEdit',

src/views/realTime/components/StationView/index.vue

@@ -37,6 +37,15 @@
             :row-class="rowClass"
             fixed
           >
+            <template #header-cell="slot: HeaderCellSlotProps">
+              <TableHeaderCell
+                :label="slot.column.title"
+                :filter-options="filterOptionMap[slot.column.columnName]"
+                :filter-values="filterValueMap[slot.column.columnName]"
+                :sortable="slot.column.needSort"
+                :sort-rule.sync="tableDataSortRuleMap[slot.column.columnName]"
+              />
+            </template>
             <template #cell="slot: CellSlotProps">
               <div :class="cellClass(slot)" @click="cellClickHandler(slot)">
                 <span class="cell-text">
@@ -74,10 +83,14 @@ import StationForm from '../../components/StationForm/index.vue'
 import ColumnSet from '../../components/ColumnSet/index.vue'
 import CountBox from '../../components/CountBox/index.vue'
 import TableSwitch from '../../components/TableSwitch/index.vue'
+import TableHeaderCell from '@/components/TableHeaderCell/index.vue'
 import useTableColumnSet from '../../hooks/useTableColumnSet'
 import useTableData from '../../hooks/useTableData'
 import useTableStyle from '../../hooks/useTableStyle'
 import useTableCellClick from '../../hooks/useTableCellClick'
+import useTableFilter from '../../hooks/useTableFilter'
+import { HeaderCellSlotProps } from 'element-plus'
+import { Query } from '@/api/dataIntegration'
 
 type StationViewName =
   | 'departure'
@@ -138,6 +151,12 @@ watch(tableData, records => {
 })
 
 const { cellClickHandler } = useTableCellClick()
+
+const {
+  filterOptionMap,
+  filterValueMap,
+  tableDataSortRuleMap,
+} = useTableFilter(tableColumns, tableData)
 </script>
 <style lang="scss" scoped>
 @import '../../style/station.scss';

src/views/realTime/hooks/useTableFilter.ts

@@ -0,0 +1,41 @@
+import { Ref } from 'vue'
+import _ from 'lodash'
+import type { TableColumn, TableColumnInGroup } from '../type'
+
+export default function useTableFilter(
+  tableColumns: Ref<TableColumnInGroup[] | TableColumn[]>,
+  tableData: Ref<any[]>
+) {
+  watch([tableColumns, tableData], ([columns, records]) => {
+    const tempSets = {}
+    columns.forEach(column => {
+      if (column.needFilters) {
+        tempSets[column.columnName] = new Set()
+      }
+    })
+    records.forEach(item => {
+      Object.keys(tempSets).forEach(key => {
+        '' !== (item[key] ?? '') && tempSets[key].add(String(item[key]))
+      })
+    })
+    Object.keys(tempSets).forEach(key => {
+      filterOptionMap[key] = _.orderBy(
+        [...tempSets[key]].map(value => ({
+          text: value,
+          value,
+        })),
+        o => o.value
+      )
+    })
+  })
+
+  const filterOptionMap = {}
+  const filterValueMap = {}
+  const tableDataSortRuleMap = {}
+
+  return {
+    filterOptionMap,
+    filterValueMap,
+    tableDataSortRuleMap,
+  }
+}

src/views/realTime/type.d.ts

@@ -1,30 +1,30 @@
 import type { Ref, CSSProperties } from 'vue'
 import { TableInstance, Column } from 'element-plus'
 
-export type StationFormData = {
+type StationFormData = {
   startDate: string
   endDate: string
   flightStatus: string
   flightWarning: string
   waybillType: string
 }
-export type selectOptions = {
+type selectOptions = {
   label: string | number
   value: string | number | boolean | object
 }[]
-export type KeyType = string | number | symbol
-export interface TableColumn<T = any> extends Column<T> {
+type KeyType = string | number | symbol
+interface TableColumn<T = any> extends Column<T> {
   dataKey: KeyType
   title: string
 }
-export interface TableColumnInGroup<T = any> extends TableColumn<T> {
+interface TableColumnInGroup<T = any> extends TableColumn<T> {
   groupTitle: string
 }
-export interface tableColumnGroup {
+interface tableColumnGroup {
   title: string
   columns: TableColumnInGroup[]
 }
-export type CellSlotProps = {
+type CellSlotProps = {
   column: TableColumn | TableColumnInGroup
   columns: TableColumn[] | TableColumnInGroup[]
   columnIndex: number
@@ -47,4 +47,4 @@ interface ExportOptions {
   fileName?: string
   headerRowNumber?: number
 }
-export type ExportHandler = (option: ExportOptions) => void
+type ExportHandler = (option: ExportOptions) => void

src/views/systemSettings/components/AutoForm.vue

@@ -0,0 +1,135 @@
+<template>
+  <el-form :model="model" :label-width="labelWidth">
+    <el-row :gutter="20">
+      <el-col
+        v-for="(item, index) in filteredFormItems"
+        :key="index"
+        :span="24 / columnNumber"
+      >
+        <el-form-item :label="item.columnLabel" size="default">
+          <template v-if="typeof item.listqueryTemplateID === 'number'">
+            <el-select
+              v-model="model[correctKey(item)]"
+              size="small"
+              filterable
+              default-first-option
+              style="width: 100%"
+              placeholder="请选择"
+              clearable
+              @change="
+                val => {
+                  selectChangeHandler(val, model[correctKey(item)])
+                }
+              "
+            >
+              <el-option
+                v-for="option in selectOptionMap[item.listqueryTemplateID]"
+                :key="option[option.setvalue]"
+                :label="option[option.setlabel]"
+                :value="option[option.setvalue]"
+              />
+            </el-select>
+          </template>
+          <template v-else-if="item.dataType == 'longtext'">
+            <el-input
+              v-model="model[item.columnName]"
+              type="textarea"
+              size="small"
+              :rows="1"
+              @change="inputChangeHandler"
+            />
+          </template>
+          <template v-else-if="item.dataType == 'datetime'">
+            <el-date-picker
+              v-model="model[item.columnName]"
+              type="datetime"
+              format="yyyy-MM-dd HH:mm:ss"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              :rows="1"
+              placeholder="选择日期时间"
+              @change="inputChangeHandler"
+            />
+          </template>
+          <template v-else-if="item.dataType == 'number'">
+            <el-input
+              v-model.number="model[item.columnName]"
+              size="small"
+              onkeyup="value=value.replace(/[^1-9]/g,'')"
+              @change="inputChangeHandler"
+            />
+          </template>
+          <template v-else>
+            <el-input
+              v-model="model[item.columnName]"
+              size="small"
+              @change="inputChangeHandler"
+            />
+          </template>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CommonTableColumn, SelectOption, FormData } from '~/common'
+
+const props = defineProps({
+  model: {
+    type: Object as PropType<FormData>,
+    required: true,
+  },
+  items: {
+    type: Array as PropType<CommonTableColumn[]>,
+    required: true,
+  },
+  columnNumber: {
+    type: Number as PropType<1 | 2>,
+    default: 1,
+  },
+  selectOptionMap: {
+    type: Object as PropType<{ [id: number]: SelectOption[] }>,
+    required: true,
+  },
+  labelWidth: {
+    type: [String, Number],
+    default: 80,
+  },
+})
+
+const filteredFormItems = computed(() =>
+  props.items.filter(item => item.needShow)
+)
+
+const correctKey = (item: CommonTableColumn) => {
+  if (typeof item.listqueryTemplateID === 'number') {
+    return props.selectOptionMap[item.listqueryTemplateID][0].setvalue
+  } else {
+    return item.columnName
+  }
+}
+
+watchEffect(() => {
+  filteredFormItems.value.forEach(item => {
+    if (!props.model[correctKey(item)]) {
+      props.model[correctKey(item)] = null
+    }
+  })
+})
+
+
+const selectChangeHandler = (val, key) => {
+  if (val === '') {
+    props.model[key] = null
+  }
+}
+
+const inputChangeHandler = (val, key) => {
+  if (val === '') {
+    props.model[key] = null
+  }
+}
+</script>
+
+<style scoped lang="scss"></style>

src/views/systemSettings/log/index.vue

@@ -74,6 +74,7 @@
 import DataTable from '@/components/tableTemp/index.vue'
 import { ElMessage } from 'element-plus'
 import { Query } from '@/api/webApi'
+import { CommonTableColumn } from '~/common';
 
 type TableColumn = {
   label: string
@@ -96,7 +97,7 @@ const loading = ref(false)
 const noMore = ref(false)
 const loadDisabled = computed(() => loading.value || noMore.value)
 //表头
-const tableColumns = ref<TableColumn[]>([])
+const tableColumns = ref<CommonTableColumn[]>([])
 //列表
 const tableData = ref<any[]>([])
 const resetTable = () => {
@@ -106,6 +107,7 @@ const resetTable = () => {
   tableData.value = []
 }
 onMounted(() => {
+  getToday()
   getTableData()
 })
 const getTableData = async () => {
@@ -147,16 +149,21 @@ const load = () => {
   getTableData()
 }
 
+const timeStart = ref('')
+const timeEnd = ref('')
 const getToday = () => {
+  function numberFormat(number) {
+    const string = '0' + number
+    return string.slice(-2)
+  }
   const now = new Date()
   const year = now.getFullYear()
   const month = now.getMonth() + 1
   const date = now.getDate()
-  return `${year}-${month}-${date}`
+  const today = `${year}-${numberFormat(month)}-${numberFormat(date)}`
+  timeStart.value = `${today} 00:00:00`
+  timeEnd.value = `${today} 23:59:59`
 }
-const today = getToday()
-const timeStart = ref(`${today} 00:00:00`)
-const timeEnd = ref(`${today} 23:59:59`)
 const timeSelectHandler = () => {
   const startTime = new Date(timeStart.value).getTime()
   const endTime = new Date(timeEnd.value).getTime()
@@ -175,13 +182,13 @@ const timeSelectHandler = () => {
 }
 
 const progressList = ref<progressItem[]>([])
-progressList.value.push(
-  ...Array.from({ length: 3 }).map(() => ({
-    logType: '更新 Github 模板',
-    resultCode: '989665554',
-    logTime: '2022-4-26 15:48:55',
-  }))
-)
+// progressList.value.push(
+//   ...Array.from({ length: 3 }).map(() => ({
+//     logType: '更新 Github 模板',
+//     resultCode: '989665554',
+//     logTime: '2022-4-26 15:48:55',
+//   }))
+// )
 const rowClickHandler = (row, column, event) => {
   progressList.value = []
   if (row.logObject) {

src/views/systemSettings/serviceManagement/serviceEdit.vue

@@ -18,7 +18,11 @@
         </template>
       </Minheader>
       <div class="form-wrapper">
-        <el-form :model="serviceForm" class="w100 flex-wrap">
+        <el-form
+          :model="serviceForm"
+          class="w100 flex-wrap"
+          label-width="100px"
+        >
           <div class="w20 pd30">
             <el-form-item label="名称" prop="serviceName" size="default">
               <el-input
@@ -37,7 +41,7 @@
                 <el-option :value="4" label="业务后端" />
               </el-select>
             </el-form-item>
-            <el-form-item class="isAsynchronous" size="default">
+            <el-form-item class="isAsynchronous" prop="isAsynchronous" size="default" label-width="0">
               <el-select
                 v-model="serviceForm.isAsynchronous"
                 style="width: 80px"
@@ -94,15 +98,26 @@
         </template>
       </Minheader>
       <div class="form-wrapper">
-        <el-form :model="serviceForm" class="w100 flex-wrap">
+        <el-form
+          :model="serviceForm"
+          class="w100 flex-wrap"
+          label-width="100px"
+        >
           <div class="w20 pd30">
-            <el-form-item label="数据源" prop="dataSourceID" size="default">
+            <el-form-item
+              v-if="selectOptionMap[queryTemplateIDMap.dataSourceID]"
+              label="数据源"
+              prop="dataSourceID"
+              size="default"
+            >
               <el-select v-model="serviceForm.dataSourceID" clearable>
                 <el-option
-                  v-for="dataSource in dataSourceList"
-                  :key="dataSource.dataSourceID"
-                  :value="dataSource.dataSourceID"
-                  :label="dataSource.dataSourceName"
+                  v-for="option in selectOptionMap[
+                    queryTemplateIDMap.dataSourceID
+                  ]"
+                  :key="option[option.setvalue]"
+                  :value="option[option.setvalue]"
+                  :label="option[option.setlabel]"
                 />
               </el-select>
             </el-form-item>
@@ -194,7 +209,11 @@
         </template>
       </Minheader>
       <div class="form-wrapper">
-        <el-form :model="serviceForm" class="w100 flex-wrap">
+        <el-form
+          :model="serviceForm"
+          class="w100 flex-wrap"
+          label-width="100px"
+        >
           <div class="w50 pd30">
             <el-form-item
               label="生命周期编号"
@@ -282,19 +301,26 @@
             </template>
           </Minheader>
           <div class="form-wrapper">
-            <el-form :model="serviceForm" class="w100 flex-wrap">
+            <el-form
+              :model="serviceForm"
+              class="w100 flex-wrap"
+              label-width="110px"
+            >
               <div class="w50 pd30">
                 <el-form-item
+                  v-if="selectOptionMap[queryTemplateIDMap.dataSourceID]"
                   label="日志存储数据源"
                   prop="logDataSourceID"
                   size="default"
                 >
                   <el-select v-model="serviceForm.logDataSourceID">
                     <el-option
-                      v-for="dataSource in dataSourceList"
-                      :key="dataSource.dataSourceID"
-                      :value="dataSource.dataSourceID"
-                      :label="dataSource.dataSourceName"
+                      v-for="option in selectOptionMap[
+                        queryTemplateIDMap.dataSourceID
+                      ]"
+                      :key="option[option.setvalue]"
+                      :value="option[option.setvalue]"
+                      :label="option[option.setlabel]"
                     />
                   </el-select>
                 </el-form-item>
@@ -478,6 +504,8 @@
           :table-data="slotTableData"
           :table-btn-group="slotTableButtonGroups"
           selection-enable
+          :table-property="{ headerCellClassName: 'hide-header-check' }"
+          class="slot-table"
           @select="slotSelectHandler"
           @btnClick="slotTableButtonClickHandler"
         />
@@ -490,20 +518,12 @@
       @reset-form="editSlotDialogHide"
     >
       <div class="form-wrapper">
-        <el-form :model="soltForm">
-          <el-form-item label="插槽名称" prop="deployNodeName" size="default">
-            <el-input
-              v-model="soltForm.deployNodeName"
-              placeholder="请输入插槽名称"
-            />
-          </el-form-item>
-          <el-form-item label="插槽地址" prop="serviceURL" size="default">
-            <el-input
-              v-model="soltForm.serviceURL"
-              placeholder="请输入插槽地址"
-            />
-          </el-form-item>
-        </el-form>
+        <AutoForm
+          :model="slotForm"
+          :items="slotTableColumns"
+          :select-option-map="selectOptionMap"
+          label-width="100px"
+        />
       </div>
     </Dialog>
     <Dialog
@@ -517,68 +537,11 @@
       @del-rest="outputDialogHide"
     >
       <div class="form-wrapper">
-        <el-form :model="outputForm">
-          <el-row :gutter="24">
-            <el-col>
-              <el-form-item
-                label="输出数据源"
-                prop="dataSourceID"
-                size="default"
-              >
-                <el-select v-model="outputForm.dataSourceID" class="w100">
-                  <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>
-              <el-form-item
-                label="详细位置"
-                prop="sourceObjectName"
-                size="default"
-              >
-                <el-input
-                  v-model="outputForm.sourceObjectName"
-                  placeholder="请输入详细位置"
-                  clearable
-                />
-              </el-form-item>
-            </el-col>
-            <el-col>
-              <el-form-item
-                label="数据结构"
-                prop="dataStructureID"
-                size="default"
-              >
-                <el-select v-model="outputForm.dataStructureID" class="w100">
-                  <el-option
-                    v-for="dataStructure in dataStructureList"
-                    :key="dataStructure.dataStructureID"
-                    :value="dataStructure.dataStructureID"
-                    :label="dataStructure.structureName"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col>
-              <el-form-item
-                label="输出条件"
-                prop="outputCondition"
-                size="default"
-              >
-                <el-input
-                  v-model="outputForm.outputCondition"
-                  placeholder="请输入输出条件"
-                  clearable
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
+        <AutoForm
+          :model="outputForm"
+          :items="outputTableColumns"
+          :select-option-map="selectOptionMap"
+        />
       </div>
     </Dialog>
   </div>
@@ -588,32 +551,34 @@
 import Minheader from '@/components/minheader/index.vue'
 import DataTable from '@/components/tableTemp/index.vue'
 import Dialog from '@/components/dialog/index.vue'
-import { CommonTableColumn, SelectOptionQueryResult } from '~/common'
+import AutoForm from '../components/AutoForm.vue'
+import {
+  CommonTableColumn,
+  SelectOptionQueryResult,
+  SelectOption,
+  FormData,
+} from '~/common'
 import { ElMessage } from 'element-plus'
 import { Query, GeneralDataReception } from '@/api/webApi'
 
-interface DataSource {
-  dataSourceID: string | number
-  dataSourceName: string
-}
-interface DataStructure {
-  dataStructureID: string | number
-  structureName: string
-}
-
-// 数据源列表
-const dataSourceList = ref<DataSource[]>([])
-const getDataSourceList = async () => {
-  dataSourceList.value = (await getSelectOptions(
-    DATACONTENT_ID.dataSourceOptions
-  )) as DataSource[]
-}
-// 数据结构列表
-const dataStructureList = ref<DataStructure[]>([])
-const getDataStructureList = async () => {
-  dataStructureList.value = (await getSelectOptions(
-    DATACONTENT_ID.dataStructOptions
-  )) as DataStructure[]
+const queryTemplateIDMap = reactive<{
+  [x: string]: number
+}>({})
+const selectOptionMap = reactive<{
+  [id: number]: SelectOption[]
+}>({})
+const getSelectOptionOfColumn = (columns: CommonTableColumn[]) => {
+  columns.forEach(async ({ columnName, listqueryTemplateID }) => {
+    if (listqueryTemplateID !== null && !queryTemplateIDMap[columnName]) {
+      queryTemplateIDMap[columnName] = listqueryTemplateID
+      if (!selectOptionMap[listqueryTemplateID]) {
+        selectOptionMap[listqueryTemplateID] = []
+        selectOptionMap[listqueryTemplateID] = await getSelectOptions(
+          listqueryTemplateID
+        )
+      }
+    }
+  })
 }
 const getSelectOptions = async (id: number) => {
   try {
@@ -628,9 +593,13 @@ const getSelectOptions = async (id: number) => {
     if (Number(code) !== 0) {
       throw new Error(message ?? '失败')
     }
-    const options = listValues.map(item => ({
-      [item.setlabel]: item.k,
-      [item.setvalue]: item.v,
+    const options = listValues.map(({ k, v, setlabel, setvalue }) => ({
+      k,
+      v,
+      setlabel,
+      setvalue,
+      [setlabel]: k,
+      [setvalue]: v,
     }))
     return options
   } catch (error) {
@@ -638,10 +607,6 @@ const getSelectOptions = async (id: number) => {
     return []
   }
 }
-onMounted(() => {
-  getDataSourceList()
-  getDataStructureList()
-})
 
 const route = useRoute()
 const serviceID = Number(route.query.serviceID)
@@ -753,6 +718,7 @@ const getOutputTable = async () => {
     if (Number(code) !== 0) {
       throw new Error(message ?? '失败')
     }
+    getSelectOptionOfColumn(columnSet)
     outputTableColumns.value = columnSet
     outputTableData.value = listValues
   } catch (error) {
@@ -794,7 +760,10 @@ const outputDialogVisible = ref(false)
 const outputDialogType = ref('')
 const outputDialogTitle = ref('')
 const serviceOutputID = ref<string | number>()
-const outputDialogShow = (operate: number = 1, row: any) => {
+const outputDialogShow = (
+  operate: number = 1,
+  row: { [x: string]: string | number | null }
+) => {
   switch (operate) {
     case 1:
       outputDialogType.value = 'add'
@@ -803,29 +772,17 @@ const outputDialogShow = (operate: number = 1, row: any) => {
     case 2:
       outputDialogType.value = 'edit'
       outputDialogTitle.value = '编辑输出'
-      Object.keys(outputForm).forEach(key => {
-        switch (key) {
-          case 'dataSourceID': {
-            const dataSource = dataSourceList.value.find(
-              dataSource => dataSource.dataSourceName === row.dataSourceName
-            )
-            if (dataSource) {
-              outputForm[key] = dataSource[key]
-            }
-            break
-          }
-          case 'dataStructureID': {
-            const dataStructure = dataStructureList.value.find(
-              dataStructure => dataStructure.structureName === row.structureName
-            )
-            if (dataStructure) {
-              outputForm[key] = dataStructure[key]
-            }
-            break
+      Object.entries(row).forEach(([key, value]) => {
+        const column = outputTableColumns.value.find(
+          column => column.columnName === key
+        )
+        outputForm[key] = value
+        if (typeof column?.listqueryTemplateID === 'number') {
+          const selectOptions = selectOptionMap[column.listqueryTemplateID]
+          const option = selectOptions.find(option => option.k === value)
+          if (option) {
+            outputForm[option.setvalue] = option.v
           }
-          default:
-            outputForm[key] = row[key]
-            break
         }
       })
       break
@@ -841,18 +798,11 @@ const outputDialogShow = (operate: number = 1, row: any) => {
 }
 const outputDialogHide = () => {
   outputDialogVisible.value = false
+  Object.keys(outputForm).forEach(key => {
+    outputForm[key] = null
+  })
 }
-const outputForm = reactive<{
-  dataSourceID: string | number | null
-  sourceObjectName: string
-  dataStructureID: string | number | null
-  outputCondition: string
-}>({
-  dataSourceID: null,
-  sourceObjectName: '',
-  dataStructureID: null,
-  outputCondition: '',
-})
+const outputForm = reactive<FormData>({})
 const outputSubmitHandler = async () => {
   try {
     const dataContent = {}
@@ -879,12 +829,15 @@ const outputSubmitHandler = async () => {
       default:
         break
     }
+    console.log(dataContent)
+    return
     const { code, message } = await GeneralDataReception({
-      serviceID: SERVICE_ID.sysServiceOutTable,
+      serviceID: DATACONTENT_ID.sysServiceOutTable,
       dataContent: JSON.stringify(dataContent),
     })
     if (Number(code) === 0) {
       ElMessage.success(message ?? '成功')
+      outputDialogHide()
     } else {
       throw new Error(message ?? '失败')
     }
@@ -995,6 +948,7 @@ const getSlotTable = async () => {
     if (Number(code) !== 0) {
       throw new Error(message ?? '失败')
     }
+    getSelectOptionOfColumn(columnSet)
     slotTableColumns.value = columnSet
     slotTableData.value = listValues
   } catch (error) {
@@ -1033,10 +987,7 @@ const editSlotDialogShow = () => {
 const editSlotDialogHide = () => {
   editSlotDialogVisible.value = false
 }
-const soltForm = reactive({
-  deployNodeName: '',
-  serviceURL: '',
-})
+const slotForm = reactive<FormData>({})
 const editSlotSubmitHandler = () => {
   editSlotDialogHide()
 }
@@ -1097,9 +1048,6 @@ const logCopy = index => {
     box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
     border-radius: 4px;
     padding: 24px;
-    :deep .el-form-item__label {
-      width: 110px;
-    }
   }
 
   .form-wrapper {
@@ -1131,13 +1079,17 @@ const logCopy = index => {
   height: 170px;
 }
 
-:deep .el-form-item__label {
-  width: 100px;
-}
 .interfaceLog {
   padding: 0 24px 24px 24px;
 }
 .logcont {
   padding: 0 24px 0px 24px;
 }
+:deep
+  .slot-table
+  .el-table__header
+  .el-table__cell.hide-header-check:first-child
+  .el-checkbox {
+  display: none;
+}
 </style>

src/views/systemSettings/serviceManagement/serviceTopology.vue

@@ -3,7 +3,7 @@
     <Minheader
       :is-statuser="true"
       :is-Journal="true"
-      @addJournalForm="addJournalForm"
+      @addJournalForm="logDialogShow"
     >
       <template #header>
         <div class="status flex-wrap">
@@ -26,8 +26,8 @@
       width="1200px"
       :flag="flag"
       :type="type"
-      :msgTitle="msgTitle"
-      @resetForm="resetForm"
+      :msg-title="msgTitle"
+      @resetForm="logDialogHide"
     >
       <div class="diacont">
         <div class="interfaceLog_head flex">
@@ -70,9 +70,9 @@
           <el-row :gutter="24">
             <el-col :span="19">
               <DataTable
-                :tableHeader="tableColumns"
-                :tableData="tableData"
-                :tableProperty="{ rowKey: 'ID' }"
+                :table-header="tableColumns"
+                :table-data="tableData"
+                :table-property="{ rowKey: 'ID' }"
                 @load="load"
                 @row-click="rowClickHandler"
               />
@@ -110,6 +110,7 @@ import * as echarts from 'echarts'
 import _ from 'lodash'
 import { ElMessage } from 'element-plus'
 import { Query } from '@/api/webApi'
+import { CommonTableColumn } from "~/common";
 import img1 from '@/assets/integr/jiekou_blue.png'
 import img2 from '@/assets/integr/jiekou_red.png'
 import img3 from '@/assets/integr/pull_blue.png'
@@ -547,12 +548,14 @@ onMounted(() => {
 // });
 
 //新增
-const addJournalForm = () => {
+const logDialogShow = () => {
   msgTitle.value = '查看日志'
   flag.value = true
+  getToday()
+  getTableData()
 }
 //取消
-const resetForm = () => {
+const logDialogHide = () => {
   flag.value = false
 }
 
@@ -561,16 +564,12 @@ const getSearchData = (text: string) => {
 }
 const clearSearchData = () => {}
 
-type TableColumn = {
-  label: string
-  key: string
-}
 let page = 0
 const loading = ref(false)
 const noMore = ref(false)
 const loadDisabled = computed(() => loading.value || noMore.value)
 //表头
-const tableColumns = ref<TableColumn[]>([])
+const tableColumns = ref<CommonTableColumn[]>([])
 //列表
 const tableData = ref<any[]>([])
 const resetTable = () => {
@@ -618,16 +617,21 @@ const load = () => {
   getTableData()
 }
 
+const timeStart = ref('')
+const timeEnd = ref('')
 const getToday = () => {
+  function numberFormat(number) {
+    const string = '0' + number
+    return string.slice(-2)
+  }
   const now = new Date()
   const year = now.getFullYear()
   const month = now.getMonth() + 1
   const date = now.getDate()
-  return `${year}-${month}-${date}`
+  const today = `${year}-${numberFormat(month)}-${numberFormat(date)}`
+  timeStart.value = `${today} 00:00:00`
+  timeEnd.value = `${today} 23:59:59`
 }
-const today = getToday()
-const timeStart = ref(`${today} 00:00:00`)
-const timeEnd = ref(`${today} 23:59:59`)
 const timeSelectHandler = () => {
   const startTime = new Date(timeStart.value).getTime()
   const endTime = new Date(timeEnd.value).getTime()

typings/common.d.ts

@@ -60,7 +60,7 @@ interface CommonTableColumn {
   columnLabel: string
   columnName: string
   dataType: string
-  listqueryTemplateID: number
+  listqueryTemplateID: number | null
   needCount: number
   needFilters: number
   needGroup: number
@@ -73,11 +73,16 @@ interface CommonTableColumn {
   [propName: string]: any
 }
 
-interface SelectOptionObj {
+interface FormData {
+  [x: string]: string | number | null
+}
+
+interface SelectOption {
   k: string
   setlabel: string
   setvalue: string
-  v: any
+  v: string
+  [x: string]: string
 }
 
 interface CommonQueryResult<T = any> {
@@ -92,4 +97,4 @@ interface CommonQueryResult<T = any> {
   [propName: string]: any
 }
 
-type SelectOptionQueryResult = CommonQueryResult<SelectOptionObj>
+type SelectOptionQueryResult = CommonQueryResult<SelectOption>