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

<template>
  <div class="airportInfo scroll-y">
    <div class="wrap">
      <MinHeader
        :is-auth="true"
        :is-statuser="true"
        @addForm="addServiceHandler"
      >
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">服务管理</div>
            <div class="status0"><span class="icon"></span>启动</div>
            <div class="status2"><span class="icon"></span>异常</div>
            <div class="status1"><span class="icon"></span>停止</div>
          </div>
        </template>
      </MinHeader>
      <div class="app-containers">
        <DataTable
          :is-Status="true"
          :table-header="tableColumns"
          :table-data="tableData"
          :table-btn-group="tableBtnGroup"
          btn-group-width="310px"
          :table-property="{ rowKey: 'ID' }"
          @btn-click="btnClickHandler"
        />
      </div>
      <Dialog
        :width="serviceDialogWidth"
        :flag="serviceDialogVisible"
        :type="type"
        :del-name="delName"
        :msg-title="msgTitle"
        @delRest="delCancelHandler"
      >
        <el-form
          ref="serviceForm"
          class="service-form"
          :model="serviceForm"
          :rules="serviceFormRules"
          label-position="right"
          label-width="82px"
          size="mini"
        >
          <el-row :gutter="36" type="flex">
            <el-col :span="12">
              <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="前序输出编号"
                label-width="114px"
                prop="serviceOutputID"
              >
                <el-input
                  v-model="serviceForm.serviceOutputID"
                  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-width="14px">
                <el-radio-group v-model="serviceForm.isAsynchronous">
                  <el-radio :label="1">同步</el-radio>
                  <el-radio :label="0">异步</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <div class="flex">
                <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-button
                  type="primary"
                  size="small"
                  style="height: 28px; line-height: 0px"
                  @click="addDataSourceHandler"
                  >新增</el-button
                >
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="数据来源对象"
                label-width="114px"
                prop="sourceObjectName"
              >
                <el-input
                  v-model="serviceForm.sourceObjectName"
                  placeholder="请输入数据来源对象名称"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务描述" prop="serviceDescribe">
                <el-input
                  v-model="serviceForm.serviceDescribe"
                  placeholder="请输入描述"
                  clearable
                />
              </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="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="12">
              <el-form-item
                label="日志存储位置"
                label-width="100px"
                prop="logDataSourceID"
              >
                <el-select v-model="serviceForm.logDataSourceID">
                  <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="日志过滤条件"
                label-width="100px"
                prop="logList"
              >
                <el-input
                  v-model="serviceForm.logList"
                  placeholder="请输入日志过滤条件"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </Dialog>
      <Dialog
        type="add"
        width="600px"
        :flag="dataSourceDialogVisible"
        msg-title="新增数据来源"
        @delRest="delCancelHandler"
      ></Dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import DataTable from '@/components/tableTemp/index.vue'
import MinHeader from '@/components/minheader/index.vue'
import Dialog from '@/components/dialog/index.vue'

interface DataSource {
  dataSourceID: string
  dataSourceName: string
}

// 表格
const tableColumns = ref([])
const tableData = ref<any[]>([])
const tableBtnGroup = [
  {
    name: '查看',
    className: 'editBtn',
    param: 1,
  },
  {
    name: '编辑',
    className: 'editBtn',
    param: 2,
  },
  {
    name: '停止',
    className: 'editBtn',
    param: 3,
  },
  {
    name: '删除',
    className: 'delBtn',
    param: 4,
  },
]
const btnClickHandler = (rowIndex: number, row: Object, param: number) => {}

// 新增/删除-弹窗
const serviceDialogVisible = ref(false) // 弹窗开关
const type = ref('del') // 弹窗类型是否删除
const serviceDialogWidth = computed(() =>
  type.value === 'del' ? '600px' : '878px'
)
const delName = ref('') // 删除对象名
const msgTitle = '新增服务管理' // 新增弹窗-标题
const addServiceHandler = () => {
  type.value = 'add'
  serviceDialogVisible.value = true
}
const delCancelHandler = () => {}

// 新增服务-表单
const serviceForm = reactive({
  serviceName: '',
  serviceOutputID: null,
  serviceType: null,
  dataSourceID: null,
  sourceObjectName: '',
  lifeCycleCol: '',
  isAsynchronous: 1,
  threads: null,
  datatype: null,
  computingMethod: '',
  validationExpression: '',
  startTime: null,
  stopTime: null,
  retryCount: null,
  loopCount: null,
  frequencyCount: null,
  frequencyUnit: null,
  serviceDescribe: '',
  logDataSourceID: null,
  logList: '',
})
const serviceFormRules = {
  serviceName: [
    {
      required: true,
      message: '请输入服务名称',
      trigger: ['change', 'blur'],
    },
  ],
}
const dataSourceList = ref<DataSource[]>([])

// 新增数据来源-弹窗
const dataSourceDialogVisible = ref(false)
const addDataSourceHandler = () => {}
// 新增数据来源-表单
</script>
<style lang="scss" scoped>
.app-containers {
  height: calc(100vh - 180px);
}

.icon {
  width: 14px;
  height: 14px;
  background: #2d67e3;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  position: relative;
  top: -2px;
}
.status0,
.status2 {
  margin-right: 28px;
  position: relative;
  top: 5px;
}
.status1 {
  position: relative;
  top: 5px;
  .icon {
    background-color: #afb4bf;
  }
}
.status2 {
  .icon {
    background-color: #eb2f3b;
  }
}

.service-form:deep {
  display: flex;
  flex-wrap: wrap;
  > .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%;
      }
      .el-input__inner,
      .el-textarea__inner {
        padding-left: 8px;
      }
      .el-date-editor {
        .el-input__prefix,
        .el-input__suffix {
          right: 5px;
          left: unset;
          font-size: 16px;
          color: #101116;
          .el-input__suffix-inner {
            font-size: 16px;
          }
        }
        &.value-not-null:hover .el-input__prefix {
          display: none;
        }
      }
    }
  }
  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;
    }
  }
}
</style>