admin-ui/src/views/system/datahub/indicator/component/detail.vue

<template>
  <el-dialog v-model="visible" :title="`指标详情 - ${detail.name || '-'} (${detail.code || code})`" width="720px" :close-on-click-modal="false">
    <div v-if="visible">
      <el-descriptions :column="1" border class="mt16">
        <el-descriptions-item label="指标名称">{{ detail.name || "-" }}</el-descriptions-item>
        <el-descriptions-item label="指标描述">{{ detail.description || "-" }}</el-descriptions-item>
        <el-descriptions-item label="指标类型">
          <el-tag size="small">{{ detail.type || "-" }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="单位">{{ detail.unit || "-" }}</el-descriptions-item>
        <el-descriptions-item label="计算公式">
          <span class="mono">{{ detail.formula || "-" }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="维度数">{{ (detail.dimensions && detail.dimensions.length) || detail.dimensionCount || 0 }} 个</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="detail.status == '1' ? 'success' : 'info'">{{ detail.status == "1" ? "已发布" : "未发布" }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="指标描述">{{ detail.description || "-" }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detail.createdAt || detail.createTime || "-" }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ detail.createdBy || "-" }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import api from "/@/api/datahub";

const visible = ref(false);
const code = ref("");
const detail = reactive<any>({});

function open(row: any) {
  code.value = row?.code || "";
  Object.keys(detail).forEach((k) => delete (detail as any)[k]);
  visible.value = true;
  if (!code.value) return;
  api.indicator.detail(code.value).then((res: any) => {
    const data = res?.data || res?.Info || res || {};
    Object.assign(detail, data);
  });
}

defineExpose({ open });
</script>

<style lang="scss" scoped>
.sub-title {
  color: var(--el-text-color-secondary);
}
.mt16 {
  margin-top: 16px;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
</style>