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

<template>
  <div class="service-edit">
    <div class="service-basic-wrapper">
      <Minheader
        is-journal
        is-statuser
        is-slot
        is-preser
        slot-permission="slot_edit_page"
        save-permission="service_save_button"
        log-permission="view_log_button"
        @add-journal-form="logDialogShow"
        @add-slot-form="slotDialogShow"
        @preser-form="serviceSubmitHandler"
      >
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">当前服务ID：{{ serviceID }}</div>
            <div class="service-state">{{ serviceState }}</div>
          </div>
        </template>
      </Minheader>
      <div class="form-wrapper">
        <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
                v-model="serviceForm.serviceName"
                placeholder="请输入服务名称"
                clearable
              />
            </el-form-item>
          </div>
          <div class="w20 pd30 flex">
            <el-form-item label="业务类型" prop="serviceType" size="default">
              <el-select v-model="serviceForm.serviceType" style="width: 100px">
                <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-form-item
              class="isAsynchronous"
              prop="isAsynchronous"
              size="default"
              label-width="0"
            >
              <el-select
                v-model="serviceForm.isAsynchronous"
                style="width: 80px"
              >
                <el-option :value="1" label="同步"></el-option>
                <el-option :value="0" label="异步"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="w20 pd30">
            <el-form-item label="启动时间" prop="hasStartTime" size="default">
              <el-date-picker
                v-model="serviceForm.hasStartTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                placeholder="请选择启动时间"
              />
            </el-form-item>
          </div>
          <div class="w20 pd30">
            <el-form-item label="停止时间" prop="hasEndTime" size="default">
              <el-date-picker
                v-model="serviceForm.hasEndTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                placeholder="请选择停止时间"
              />
            </el-form-item>
          </div>
          <div class="w20">
            <el-form-item
              label="前序输出编号"
              prop="serviceOutputID"
              size="default"
            >
              <el-input
                v-model="serviceForm.serviceOutputID"
                placeholder="请输入前序输出编号"
                clearable
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="service-config-wrapper">
      <Minheader is-statuser>
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">主动采集配置</div>
          </div>
        </template>
      </Minheader>
      <div class="form-wrapper">
        <el-form
          :model="serviceForm"
          class="w100 flex-wrap"
          label-width="100px"
        >
          <div class="w20 pd30">
            <el-form-item
              v-if="selectOptionMap[queryTemplateIDMap.dataSourceID]"
              label="数据源"
              prop="dataSourceID"
              size="default"
            >
              <el-select v-model="serviceForm.dataSourceID" clearable>
                <el-option
                  v-for="option in selectOptionMap[
                    queryTemplateIDMap.dataSourceID
                  ]"
                  :key="option[option.setvalue]"
                  :value="option[option.setvalue]"
                  :label="option[option.setlabel]"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="w40">
            <el-form-item
              label="详细位置"
              prop="sourceObjectName"
              size="default"
            >
              <el-input
                v-model="serviceForm.sourceObjectName"
                placeholder="请输入详细位置"
                clearable
              />
            </el-form-item>
          </div>
          <div class="w40">
            <el-form-item
              label="服务描述"
              prop="serviceDescribe"
              size="default"
            >
              <el-input
                v-model="serviceForm.serviceDescribe"
                placeholder="请输入服务描述"
                clearable
              />
            </el-form-item>
          </div>
          <div class="w20 pd30">
            <el-form-item label="计划启动时间" prop="startTime" size="default">
              <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>
          </div>
          <div class="w20 pd30">
            <el-form-item label="计划停止时间" prop="stopTime" size="default">
              <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>
          </div>
          <div class="w20 pd30">
            <el-form-item label="错误重试" prop="retryCount" size="default">
              <el-input
                v-model="serviceForm.retryCount"
                placeholder="请输入重试次数"
                clearable
              />
            </el-form-item>
          </div>
          <div class="w20 pd30">
            <el-form-item label="循环次数" prop="loopCount" size="default">
              <el-input
                v-model="serviceForm.loopCount"
                placeholder="请输入循环次数"
                clearable
              />
            </el-form-item>
          </div>
          <div class="w20">
            <el-form-item label="循环频率" prop="frequencyCount" size="default">
              <el-input
                v-model="serviceForm.frequencyCount"
                placeholder="请输入循环频率"
                clearable
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="service-receive-wrapper">
      <Minheader is-statuser>
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">统一接收</div>
          </div>
        </template>
      </Minheader>
      <div class="form-wrapper">
        <el-form
          :model="serviceForm"
          class="w100 flex-wrap"
          label-width="100px"
        >
          <div class="w50 pd30">
            <el-form-item
              label="生命周期编号"
              prop="lifeCycleCol"
              size="default"
            >
              <el-input
                v-model="serviceForm.lifeCycleCol"
                placeholder="请输入生命周期编号"
                clearable
              />
            </el-form-item>
          </div>
          <div class="w50 pd30"></div>
          <div class="w50 pd30">
            <el-form-item
              label="取值表达式"
              prop="computingMethod"
              size="default"
            >
              <el-input
                v-model="serviceForm.computingMethod"
                placeholder="请输入取值表达式"
                type="textarea"
                :autosize="{
                  minRows: 2,
                  maxRows: 2,
                }"
                resize="none"
                clearable
              />
            </el-form-item>
          </div>
          <div class="w50">
            <el-form-item
              label="检测表达式"
              prop="validationExpression"
              size="default"
            >
              <el-input
                v-model="serviceForm.validationExpression"
                placeholder="请输入检测表达式"
                type="textarea"
                :autosize="{
                  minRows: 2,
                  maxRows: 2,
                }"
                resize="none"
                clearable
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="service-output-wrapper">
      <el-row :gutter="24">
        <el-col :span="12">
          <Minheader
            :is-statuser="true"
            :is-auth="true"
            power-data="new_service_output_location_button"
            @addForm="outputDialogShow"
          >
            <template #header>
              <div class="status flex-wrap">
                <div class="manageTitle">输出</div>
              </div>
            </template>
          </Minheader>
          <div class="app-containers">
            <DataTable
              :table-header="outputTableColumns"
              :table-data="outputTableData"
              :table-btn-group="outputTableButtonGroup"
              @btnClick="outputTableButtonClickHandler"
            />
          </div>
        </el-col>
        <el-col :span="12">
          <Minheader :is-statuser="true">
            <template #header>
              <div class="status flex-wrap">
                <div class="manageTitle">日志记录</div>
              </div>
            </template>
          </Minheader>
          <div class="form-wrapper">
            <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="option in selectOptionMap[
                        queryTemplateIDMap.dataSourceID
                      ]"
                      :key="option[option.setvalue]"
                      :value="option[option.setvalue]"
                      :label="option[option.setlabel]"
                    />
                  </el-select>
                </el-form-item>
              </div>
              <div class="w50 pd30">
                <el-form-item
                  label="详细位置"
                  prop="logDataSourceName"
                  size="default"
                >
                  <el-input
                    v-model="serviceForm.logDataSourceName"
                    placeholder="请输入详细位置"
                    clearable
                  />
                </el-form-item>
              </div>
              <div class="w100 pd30">
                <el-form-item
                  label="日志输出条件"
                  prop="logList"
                  size="default"
                >
                  <el-input
                    v-model="serviceForm.logList"
                    placeholder="请输入日志输出条件"
                    type="textarea"
                    :autosize="{
                      minRows: 5,
                      maxRows: 5,
                    }"
                    resize="none"
                    clearable
                  />
                </el-form-item>
              </div>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
    <Dialog
      width="852px"
      :flag="logDialogVisible"
      :with-footer="false"
      msg-title="查看日志"
      @resetForm="logDialogHide"
    >
      <div class="logDialog">
        <div class="interfaceLog">
          <div class="interfaceLog_head flex">
            <div class="interfaceLog_head_time flex-wrap">
              <div class="interfaceLog_head_time_start r12">
                <el-date-picker
                  v-model="logStartTime"
                  size="default"
                  type="datetime"
                  placeholder="选择开始日期时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :clearable="false"
                  @change="logTimeChangeHandler"
                />
              </div>
              <div class="interfaceLog_head_time_end">
                <el-date-picker
                  v-model="logEndTime"
                  size="default"
                  type="datetime"
                  placeholder="选择结束日期时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :clearable="false"
                  @change="logTimeChangeHandler"
                />
              </div>
            </div>
            <div class="flex">
              <el-input
                v-model="logSearchText"
                size="default"
                placeholder="请输入搜索关键词"
                clearable
                style="width: 180px"
                @clear="logSearchClearHandler"
              />
              <el-button
                size="default"
                type="primary"
                style="margin-left: 16px"
                @click="logSearchHandler"
                >查询</el-button
              >
            </div>
          </div>
          <div
            v-loading="logTableLoading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            class="interfaceLog_content flex-wrap"
          >
            <el-table
              :data="logTableData"
              class="table"
              height="500px"
              stripe
              border
              style="width: 100%; margin-top: 20px"
            >
              <el-table-column prop="logTime" width="200" label="时间">
              </el-table-column>
              <el-table-column prop="logType" width="100" label="类型">
              </el-table-column>
              <el-table-column width="200" label="位置">
                <template #default="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="scope.row.logPositionID"
                    placement="top"
                  >
                    <div class="logPositionID">
                      {{ scope.row.logPositionID }}
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column width="100" prop="resultCode" label="成败">
              </el-table-column>
              <el-table-column label="详情">
                <template #default="scope">
                  <div class="flex-wrap">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="scope.row.resultDetails"
                      placement="top"
                    >
                      <span :id="'logId' + scope.$index" class="logDetails">{{
                        scope.row.resultDetails
                      }}</span>
                    </el-tooltip>
                    <el-button
                      @click="logCopy(scope.$index)"
                      style="margin-left: 10px"
                      type="text"
                      >复制</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </Dialog>
    <Dialog
      width="852px"
      :flag="slotDialogVisible"
      msg-title="插槽编辑"
      @submit-form="slotSubmitHandler"
      @reset-form="slotDialogHide"
    >
      <div class="logcont">
        <Minheader
          :is-auth="true"
          :is-statuser="true"
          @addForm="editSlotDialogShow"
        >
          <template #header>
            <div class="status flex-wrap">
              <div class="manageTitle">插槽列表</div>
            </div>
          </template>
        </Minheader>
      </div>
      <div style="padding: 0 24px 24px 24px" class="dialog-content">
        <DataTable
          :table-header="slotTableColumns"
          :table-data="slotTableData"
          :table-btn-group="slotTableButtonGroups"
          selection-enable
          :table-property="{ headerCellClassName: 'hide-header-check' }"
          class="slot-table"
          @select="slotSelectHandler"
          @btnClick="slotTableButtonClickHandler"
        />
      </div>
    </Dialog>
    <Dialog
      :flag="editSlotDialogVisible"
      :type="editSlotDialogType"
      :msg-title="editSlotDialogTitle"
      :del-name="deployNodeName"
      @submit-form="editSlotSubmitHandler"
      @reset-form="editSlotDialogHide"
      @del-remove="editSlotSubmitHandler"
      @del-rest="editSlotDialogHide"
    >
      <div class="form-wrapper">
        <AutoForm
          :model="slotForm"
          :items="slotTableColumns"
          :select-option-map="selectOptionMap"
          label-width="100px"
        />
      </div>
    </Dialog>
    <Dialog
      :flag="outputDialogVisible"
      :type="outputDialogType"
      :msg-title="outputDialogTitle"
      :del-name="'服务输出' + serviceOutputID"
      @submit-form="outputSubmitHandler"
      @reset-form="outputDialogHide"
      @del-remove="outputSubmitHandler"
      @del-rest="outputDialogHide"
    >
      <div class="form-wrapper">
        <AutoForm
          :model="outputForm"
          :items="outputTableColumns"
          :select-option-map="selectOptionMap"
        />
      </div>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import Minheader from '@/components/minheader/index.vue'
import DataTable from '@/components/tableTemp/index.vue'
import Dialog from '@/components/dialog/index.vue'
import AutoForm from '../components/AutoForm.vue'
import {
  CommonTableColumn,
  SelectOptionQueryResult,
  SelectOption,
  CommonData,
} from '~/common'
import { ElMessage } from 'element-plus'
import { Query, GeneralDataReception } from '@/api/webApi'

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 {
    const {
      code,
      returnData,
      message,
    }: SelectOptionQueryResult = await Query({
      id,
      dataContent: [],
    })
    if (Number(code) !== 0) {
      throw new Error(message ?? '失败')
    }
    const listValues = returnData.listValues || returnData
    const options = listValues.map(({ k, v, setlabel, setvalue }) => ({
      k,
      v,
      setlabel,
      setvalue,
      [setlabel]: k,
      [setvalue]: v,
    }))
    return options
  } catch (error) {
    console.error(error)
    return []
  }
}

const route = useRoute()
const serviceID = Number(route.query.serviceID)
const serviceState = computed(() =>
  route.query.runState === '运行' ? '进行中' : '停止'
) //状态
const serviceForm = reactive({
  serviceName: '',
  serviceOutputID: null,
  serviceType: null,
  sourceObjectName: '',
  lifeCycleCol: '',
  serviceDescribe: '',
  threads: null,
  isAsynchronous: 1,
  datatype: null,
  dataSourceID: null,
  computingMethod: '',
  validationExpression: '',
  startTime: null,
  stopTime: null,
  retryCount: null,
  loopCount: null,
  frequencyCount: null,
  frequencyUnit: null,
  logDataSourceID: null,
  logList: '',
  logDataSourceName: null,
  dataSourceName: null,
  hasStartTime: null,
  hasEndTime: null,
})
const getServiceDetail = async () => {
  try {
    const {
      code,
      returnData: { listValues },
      message,
    } = await Query({
      id: DATACONTENT_ID.sysServiceDetail,
      dataContent: [serviceID],
    })
    if (Number(code) !== 0) {
      throw new Error(message ?? '失败')
    }
    if (!listValues.length) {
      throw new Error('未查询到服务信息')
    }
    Object.entries(listValues[0]).forEach(([key, value]) => {
      serviceForm[key] = value
    })
  } catch (error) {
    console.error(error)
  }
}
onMounted(() => {
  getServiceDetail()
})
const serviceSubmitHandler = async () => {
  try {
    const dataContent = {
      serviceID,
      ...serviceForm,
      event: 2,
    }
    Object.keys(dataContent).forEach(key => {
      if (
        ![
          'serviceName',
          'sourceObjectName',
          'lifeCycleCol',
          'serviceDescribe',
          'computingMethod',
          'validationExpression',
          'logList',
        ].includes(key) &&
        dataContent[key] === ''
      ) {
        dataContent[key] = null
      }
    })
    const { code, message } = await GeneralDataReception({
      serviceId: SERVICE_ID.sysServiceEdit,
      dataContent: JSON.stringify(dataContent),
      btnAuth: 'service_editor_button',
    })
    if (Number(code) === 0) {
      ElMessage.success(message ?? '成功')
    } else {
      throw new Error(message ?? '失败')
    }
  } catch (error) {
    console.error(error)
  }
}

// 输出-表格
const outputTableColumns = ref<CommonTableColumn[]>([])
const outputTableData = ref<CommonData[]>([])
const getOutputTable = async () => {
  try {
    const {
      code,
      returnData: { columnSet, listValues },
      message,
    } = await Query({
      id: DATACONTENT_ID.sysServiceOutTable,
      dataContent: [serviceID],
    })
    if (Number(code) !== 0) {
      throw new Error(message ?? '失败')
    }
    getSelectOptionOfColumn(columnSet)
    outputTableColumns.value = columnSet
    outputTableData.value = listValues
  } catch (error) {
    console.error(error)
  }
}
onMounted(() => {
  getOutputTable()
})
const outputTableButtonGroup = [
  {
    name: '编辑',
    className: 'editBtn',
    param: 1,
    is: 'service_edit_output_location_button',
  },
  {
    name: '删除',
    className: 'delBtn',
    param: 2,
    is: 'service_delete_output_location_button',
  },
]
const outputTableButtonClickHandler = (
  rowIndex: number,
  row: CommonData,
  param: number
) => {
  switch (param) {
    case 1:
      outputDialogShow(2, row)
      break
    case 2:
      outputDialogShow(3, row)
      break
    default:
      break
  }
}

// 输出-新增/编辑
const outputDialogVisible = ref(false)
const outputDialogType = ref('')
const outputDialogTitle = ref('')
const serviceOutputID = ref<string | number>()
const outputDialogShow = (operate: number = 1, row: CommonData) => {
  switch (operate) {
    case 1:
      outputDialogType.value = 'add'
      outputDialogTitle.value = '新增输出'
      break
    case 2:
      outputDialogType.value = 'edit'
      outputDialogTitle.value = '编辑输出'
      Object.entries(row).forEach(([key, value]) => {
        outputForm[key] = value
        const column = outputTableColumns.value.find(
          column => column.columnName === key
        )
        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
          }
        }
      })
      break
    case 3:
      outputDialogType.value = 'del'
      outputDialogTitle.value = '删除输出'
      break
    default:
      break
  }
  serviceOutputID.value = (row && row['serviceOutputID']) ?? ''
  outputDialogVisible.value = true
}
const outputDialogHide = () => {
  outputDialogVisible.value = false
  Object.keys(outputForm).forEach(key => {
    outputForm[key] = null
  })
}
const outputForm = reactive<CommonData>({})
const outputSubmitHandler = async () => {
  try {
    const dataContent = {
      serviceID,
    }
    switch (outputDialogType.value) {
      case 'add':
        Object.assign(dataContent, {
          event: 1,
          ...outputForm,
        })
        break
      case 'edit':
        Object.assign(dataContent, {
          event: 2,
          serviceOutputID: serviceOutputID.value,
          ...outputForm,
        })
        break
      case 'delete':
        Object.assign(dataContent, {
          event: 3,
          serviceOutputID: serviceOutputID.value,
        })
        break
      default:
        break
    }
    const { code, message } = await GeneralDataReception({
      serviceId: SERVICE_ID.sysServiceOutputEdit,
      dataContent: JSON.stringify(dataContent),
    })
    if (Number(code) === 0) {
      ElMessage.success(message ?? '成功')
      outputDialogHide()
    } else {
      throw new Error(message ?? '失败')
    }
  } catch (error) {
    console.error(error)
  }
}

// 日志弹框
const logDialogVisible = ref(false)
const logDialogShow = () => {
  logDialogVisible.value = true
  getToday()
  getLogTableData()
}
const logDialogHide = () => {
  logDialogVisible.value = false
}
const logStartTime = ref('')
const logEndTime = 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()
  const today = `${year}-${numberFormat(month)}-${numberFormat(date)}`
  logStartTime.value = `${today} 00:00:00`
  logEndTime.value = `${today} 23:59:59`
}
const logTimeChangeHandler = () => {
  if (!logStartTime.value || !logEndTime.value) {
    return
  }
  const startTime = new Date(logStartTime.value).getTime()
  const endTime = new Date(logEndTime.value).getTime()
  if (startTime > endTime) {
    ElMessage.error('开始时间不能大于结束时间')
    logEndTime.value = ''
    return
  }
  if (startTime < endTime - (3 * 24 * 60 * 60 - 1) * 1000) {
    ElMessage.error('间隔时间不能大于三天')
    logEndTime.value = ''
    return
  }
  resetLogTable()
  getLogTableData()
}
const logSearchText = ref('')
const logSearchHandler = () => {
  getLogTableData()
}
const logSearchClearHandler = () => {
  getLogTableData()
}

const logTableData = ref<CommonData[]>([])
const logTableLoading = ref(false)
const resetLogTable = () => {
  logTableData.value = []
}
const getLogTableData = async () => {
  try {
    logTableLoading.value = true
    const {
      code,
      returnData: { listValues },
    } = await Query({
      id: DATACONTENT_ID.sysServiceTopologyTable,
      dataContent: [serviceID, logStartTime.value, logEndTime.value],
    })
    if (Number(code) !== 0) {
      throw new Error('获取数据失败')
    }
    logTableData.value = listValues
    logTableLoading.value = false
  } catch (error) {
    console.error(error)
    logTableLoading.value = false
  }
}

// 选择插槽
const slotDialogVisible = ref(false)
const slotDialogShow = () => {
  getSlotTable()
  slotDialogVisible.value = true
}
const slotDialogHide = () => {
  slotDialogVisible.value = false
}
const slotTableColumns = ref<CommonTableColumn[]>([])
const slotTableData = ref<CommonData[]>([])
const getSlotTable = async () => {
  try {
    const {
      code,
      returnData: { columnSet, listValues },
      message,
    } = await Query({
      id: DATACONTENT_ID.sysServiceNodeList,
      dataContent: [serviceID],
    })
    if (Number(code) !== 0) {
      throw new Error(message ?? '失败')
    }
    getSelectOptionOfColumn(columnSet)
    slotTableColumns.value = columnSet
    slotTableData.value = listValues
  } catch (error) {
    console.error(error)
  }
}
const slotTableButtonGroups = [
  {
    name: '编辑',
    className: 'editBtn',
    param: 1,
    is: 'machine_editing_button'
  },
  {
    name: '删除',
    className: 'delBtn',
    param: 2,
    is: 'machine_deletion_button'
  },
]
const slotTableButtonClickHandler = (
  rowIndex: number,
  row: CommonData,
  param: number
) => {
  switch (param) {
    case 1:
      editSlotDialogShow(2, row)
      break
    case 2:
      editSlotDialogShow(3, row)
      break
    default:
      break
  }
}
const slotSelectHandler = (selection, row) => {
  console.log(selection, row)
}
const slotSubmitHandler = () => {
  slotDialogHide()
}

// 插槽-新增/编辑
const editSlotDialogType = ref('')
const editSlotDialogTitle = ref('')
const deployNodeName = ref('')
const editSlotDialogVisible = ref(false)
const editSlotDialogShow = (operate: number = 1, row: CommonData) => {
  switch (operate) {
    case 1:
      editSlotDialogType.value = 'add'
      editSlotDialogTitle.value = '新增插槽'
      break
    case 2:
      editSlotDialogType.value = 'edit'
      editSlotDialogTitle.value = '编辑插槽'
      Object.entries(row).forEach(([key, value]) => {
        slotForm[key] = value
        const column = slotTableColumns.value.find(
          column => column.columnName === key
        )
        if (typeof column?.listqueryTemplateID === 'number') {
          const selectOptions = selectOptionMap[column.listqueryTemplateID]
          const option = selectOptions.find(option => option.k === value)
          if (option) {
            slotForm[option.setvalue] = option.v
          }
        }
      })
      break
    case 3:
      editSlotDialogType.value = 'del'
      editSlotDialogTitle.value = '删除插槽'
      break
    default:
      break
  }
  deployNodeName.value = (row && (row['deployNodeName'] as string)) ?? ''
  editSlotDialogVisible.value = true
}
const editSlotDialogHide = () => {
  editSlotDialogVisible.value = false
  Object.keys(slotForm).forEach(key => {
    slotForm[key] = null
  })
}
const slotForm = reactive<CommonData>({})
const editSlotSubmitHandler = () => {
  editSlotDialogHide()
}

//复制
const logCopy = index => {
  const ele = document.getElementById('logId' + index)
  const val = ele!.innerText
  try {
    const input = document.createElement('input')
    //将input的值设置为需要复制的内容
    input.value = val
    //添加input标签
    document.body.appendChild(input)
    //选中input标签
    input.select()
    //执行复制
    document.execCommand('copy')
    //移除input标签
    document.body.removeChild(input)
    // this.$message.success("复制成功");
  } catch (e) {
    // this.$message.error("复制失败");
  }
}
</script>

<style lang="scss" scoped>
.service-edit {
  height: 100%;
  .service-basic-wrapper {
    height: 140px;
    background: #ffffff;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 24px;
  }
  .service-config-wrapper {
    height: 196px;
    background: #ffffff;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 24px;
  }
  .service-receive-wrapper {
    height: 192px;
    background: #ffffff;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 24px;
  }
  .service-output-wrapper {
    height: 250px;
    background: #ffffff;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 24px;
  }

  .form-wrapper {
    width: 100%;
    .w100 {
      width: 100%;
    }
    .w50 {
      width: 50%;
    }
    .w40 {
      width: 40%;
    }
    .w20 {
      width: 20%;
    }
    .pd30 {
      padding: 0 30px 0 0;
    }
  }
}
.service-state {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #53b074;
}
.app-containers {
  height: 170px;
}

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