admin-ui/src/views/system/datahub/indicator/index.vue

<template>
  <div class="page">
    <el-card shadow="never">
      <el-form :model="params" inline ref="queryRef" @keyup.enter="getList">
        <el-form-item>
          <el-input v-model="params.keyword" placeholder="输入指标名称、编码或描述" style="width: 300px" clearable />
        </el-form-item>
        <el-form-item>
          <el-cascader :options="typeOptions" :props="{ checkStrictly: true, emitPath: false, value: 'code', label: 'name' }" placeholder="请选择指标类型" clearable class="w100" v-model="params.type">
            <template #default="{ node, data }">
              <span>{{ data.name }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-select v-model="params.status" placeholder="全部状态" clearable style="width: 160px">
            <el-option value="-1" label="全部状态" />
            <el-option value="0" label="未发布" />
            <el-option value="1" label="已发布" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="ml10" @click="getList">
            <el-icon><ele-Search /></el-icon>
            查询
          </el-button>
          <el-button type="primary" class="ml10" @click="addOrEdit()">
            <el-icon><ele-FolderAdd /></el-icon>
            新增指标
          </el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" style="width: 100%" row-key="code" v-loading="loading">
        <el-table-column label="指标编号" prop="code" align="left" width="120">
          <template #default="scope">
            <el-link type="primary" :underline="false">{{ scope.row.code }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="指标名称" prop="name" min-width="180" show-overflow-tooltip />
        <el-table-column label="指标类型" prop="type" width="120" align="center">
          <template #default="scope">
            <el-tag size="small">{{ scope.row.type || "-" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="单位" prop="unit" width="100" align="center" />
        <el-table-column label="维度数" align="center" width="100">
          <template #default="scope">
            <el-tag size="small" type="info">{{ (scope.row.dimensions && scope.row.dimensions.length) || scope.row.dimensionCount || 0 }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" width="100" align="center">
          <template #default="scope">
            <el-tag size="small" :type="scope.row.status == '1' ? 'success' : 'danger'">{{ scope.row.status == "1" ? "已发布" : "未发布" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" align="center" width="180" />
        <el-table-column label="操作" align="center" width="220" fixed="right">
          <template #default="scope">
            <el-button size="small" text type="primary" v-if="scope.row.status == '0'" @click="publish(scope.row)">发布</el-button>
            <el-button size="small" text type="warning" v-else @click="unpublish(scope.row)">取消发布</el-button>
            <el-button size="small" text type="primary" @click="openDetail(scope.row)">详情</el-button>
            <el-button size="small" text type="success" @click="openData(scope.row)">数据</el-button>
            <el-button size="small" text type="primary" @click="addOrEdit(scope.row)">编辑</el-button>
            <el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
    </el-card>

    <EditIndicator ref="editFormRef" :typeOptions="typeOptions" @update="getList" />
    <DetailDialog ref="detailRef" />
    <DataDialog ref="dataRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import api from "/@/api/datahub";
import { useSearch } from "/@/hooks/useCommon";
import EditIndicator from "./component/edit.vue";
import DetailDialog from "./component/detail.vue";
import DataDialog from "./component/data.vue";
import apiSystem from "/@/api/system";

const editFormRef = ref();
const detailRef = ref();
const dataRef = ref();
const queryRef = ref();

const typeOptions = ref([]);

apiSystem.getInfoByKey("sys.indicator.type.tagCode").then((res: any) => {
  const tagCode = res?.data?.configValue || "HARDWARE";
  api.tags.getTree({}).then((res: any) => {
    typeOptions.value = (res.data || []).find((item: any) => item.code === tagCode)?.children || [];
  });
});

const { params, tableData, getList, loading } = useSearch(api.indicator.getList, "data", {
  keyword: "",
  type: "",
  status: "-1",
});

getList();

const publish = (row?: any) => {
  api.indicator.publish(row.code).then(() => {
    ElMessage.success("发布成功");
    getList();
  });
};

const unpublish = (row?: any) => {
  api.indicator.unpublish(row.code).then(() => {
    ElMessage.success("取消发布成功");
    getList();
  });
};

const addOrEdit = (row?: any) => {
  editFormRef.value.openDialog(row);
};
const openDetail = (row: any) => {
  detailRef.value.open(row);
};
const openData = (row: any) => {
  dataRef.value.open(row);
};

const onRowDel = (row: any) => {
  ElMessageBox.confirm(`此操作将永久删除指标：${row.name}（${row.code}），是否继续?`, "提示", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    api.indicator.del(row.code).then(() => {
      ElMessage.success("删除成功");
      getList();
    });
  });
};

const formatStatus = (s: string) => {
  if (s === "enabled") return "启用";
  if (s === "draft") return "草稿";
  if (s === "disabled") return "停用";
  return s || "-";
};
const statusTagType = (s: string) => {
  if (s === "enabled") return "success";
  if (s === "draft") return "info";
  if (s === "disabled") return "warning";
  return "info";
};
</script>

<style lang="scss" scoped></style>