jy2024-ui/src/views/risk/r6/components/indexMapping.vue

<template>
  <el-button type="primary" size="small" @click="addIndex">新增指标</el-button>
  <el-table :data="configData" border stripe style="width: 100%;margin-top:10px;" size="small">
    <el-table-column label="显示名称">
      <template #default="scope">
        {{ scope.row.viewName }}
      </template>
    </el-table-column>
    <el-table-column label="指标映射">
      <template #default="scope">
        <el-select v-model="scope.row.metricsName" size="small" style="width: 100%" @change="changeMetrics(scope.row)">
          <el-option v-for="item in mappingData" :key="item.id" :label="item.metricsName" :value="item.metricsName"/>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="80" align="center">
      <template #default="{row}">
        <el-popconfirm title="确认要删除该条信息吗?" @confirm="handleDelete(row)" width="200">
          <template #reference>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="visible" title="新增指标" width="400" append-to-body>
    <el-form ref="objRef" :model="form" :rules="rules" label-width="100px" label-suffix=":" size="small">
      <el-form-item label="显示名称" prop="viewName">
        <el-input v-model="form.viewName" placeholder="请输入显示名称"/>
      </el-form-item>
      <el-form-item label="指标映射" prop="metricsName">
        <el-select v-model="form.metricsName" style="width: 100%">
          <el-option v-for="item in mappingData" :key="item.id" :label="item.metricsName" :value="item.metricsName"/>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="btn-row">
      <el-button type="primary" @click="handleSubmit" size="small">确定</el-button>
      <el-button @click="visible=false" size="small">取消</el-button>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import {listConfig} from "@/api/risk/r5"
import {delConfig, updateConfig,addConfig} from "@/api/risk/config"

const {proxy} = getCurrentInstance()
const props = defineProps(['configData'])
const mappingData = ref([])
const visible = ref(false)

const defaultForm = {
  viewName: '',
  metricsId: '',
  metricsName: ''
}
const rules = {
  viewName: [
    {required: true, message: '请输入显示名称', trigger: 'blur'}
  ],
  metricsName: [
    {required: true, message: '请选择指标映射', trigger: 'change'}
  ]
}

const form = ref({
  ...defaultForm
})

onMounted(async () => {
  const res = await listConfig({configType: "host", pageNum: 1, pageSize: 20})
  mappingData.value = res.rows
})

function addIndex() {
  visible.value = true
  form.value = {...defaultForm}
  proxy.resetForm("objRef");
}

async function changeMetrics(row) {
  const data = {...row}
  data.metricsId = mappingData.value.find(item => item.metricsName === row.metricsName).metricsId
  const res = await updateConfig(data)
  handleSuccess(res)
}

async function handleDelete(row) {
  const res = await delConfig(row.hcId)
  handleSuccess(res)
}

function handleSuccess(res) {
  proxy.$message.success(res.msg)
  proxy.$emit('refresh')
}

function handleSubmit() {
  proxy.$refs.objRef.validate(async valid => {
    if (valid) {
      const data = {...form.value}
      data.metricsId = mappingData.value.find(item => item.metricsName === form.value.metricsName).metricsId
      const res = await addConfig(data)
      handleSuccess(res)
    }
  })
}
</script>
<style lang="scss" scoped>
.btn-row{
  display: flex;
  justify-content: center;
  margin-top:30px;
}
</style>