jy2024-ui/src/views/ms/mstpl/component/indicatorManger.vue

<template>
  <el-row :gutter="20">
    <el-col :span="24" class="mb8">
      <el-button type="primary" plain @click="handleAdd">新增</el-button>
    </el-col>
    <el-col :span="24">
      <el-table v-loading="loading" :data="listData" border size="small">
        <el-table-column label="指标ID" align="center" prop="metricsId" width="80"/>
<!--        <el-table-column label="指标分类" align="left" width="160">-->
<!--          <template #default="scope">-->
<!--            <span v-for="(item,i) in scope.row.metricsDef.metricsTypes" :key="`${scope.$index}_${item}`">-->
<!--              {{ item.typeName }}<span v-if="i!==scope.row.metricsTypes.length-1">、</span>-->
<!--            </span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="指标名称" align="left">
          <template #default="scope">
            {{ scope.row.metricsDef.metricsName }}
          </template>
        </el-table-column>
        <el-table-column label="指标编码" align="left" prop="metricsCode" width="160"/>
        <el-table-column label="告警-低" align="center" width="80">
          <template #default="scope">
            {{ scope.row.alarmLow }}
          </template>
        </el-table-column>
        <el-table-column label="告警-中" align="center" width="80">
          <template #default="scope">
            {{ scope.row.alarmMid }}
          </template>
        </el-table-column>
        <el-table-column label="告警-高" align="center" width="80">
          <template #default="scope">
            {{ scope.row.alarmHigh }}
          </template>
        </el-table-column>
        <el-table-column label="健康事件" align="center" width="80">
          <template #default="scope">
            {{ scope.row.event }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)">
              修改
            </el-button>
            <el-popconfirm title="确定要删除吗?删除后无法恢复！" @confirm="handleDelete(scope.row)" width="260">
              <template #reference>
                <el-button link type="primary" icon="Delete">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getSelectDetails(null)"
      />
    </el-col>
  </el-row>

  <!-- 添加或修改指标模板对话框 -->
  <el-dialog title="新增指标" v-model="open" width="1100" append-to-body>
    <div>
      <el-form :model="adParams" ref="queryRef" :inline="true" label-width="0" @submit.native.prevent>
        <el-form-item label="" prop="metricsName" style="margin-right:10px">
          <el-input
              v-model="adParams.metricsName"
              placeholder="请输入应用名称"
              clearable
              @keyup.enter="getSelectData"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getSelectData">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="addListData" border size="small" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="指标ID" align="center" prop="metricsId" width="80"/>
        <el-table-column label="指标分类" align="left" width="160">
          <template #default="scope">
            <span v-for="(item,i) in scope.row.metricsTypes" :key="`${scope.$index}_${item}`">
              {{ item.typeName }}<span v-if="i!==scope.row.metricsTypes.length-1">、</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="指标名称" align="left" prop="metricsName"/>
        <el-table-column label="指标编码" align="left" prop="metricsCode" width="160"/>
        <el-table-column label="告警-低" align="left" width="80" prop="alarmLow"/>
        <el-table-column label="告警-中" align="left" width="80" prop="alarmMid"/>
        <el-table-column label="告警-高" align="left" width="80" prop="alarmHigh"/>
      </el-table>
      <pagination
          v-show="adTotal>0"
          :total="adTotal"
          v-model:page="adParams.pageNum"
          v-model:limit="adParams.pageSize"
          @pagination="getSelectData"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleAddMetrics">添 加</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog title="指标修改" v-model="visible" width="600" append-to-body>
    <edit-indicator :rowsInfo="rowsInfo" ref="eiRef" @close="visible=false" @reload="getSelectData"/>
  </el-dialog>
</template>
<script setup lang="ts">
import {addDetailByTplId, delDetail, listDetail, selectDetails, updateDetail} from "@/api/metrics/detail";
import editIndicator from "./editIndicator.vue";
const {proxy, emit} = getCurrentInstance();

const listData = ref([]);
const loading = ref(false);
const editRow = ref([]);
const rowTplId = ref(null);
const open = ref(false);
const addListData = ref([]);
const ids = ref([]);
const total = ref(0);
const adTotal = ref(0);
const passValidate = ref(true)
const visible = ref(false);
const rowsInfo = ref({})



const adParams = reactive({
  pageNum: 1,
  pageSize: 10,
  metricsName: null
});

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  tplId: 0
});

// 选择指标
const getSelectDetails = (tplId: number) => {
  loading.value = true;
  editRow.value = [];
  if (tplId) {
    rowTplId.value = tplId;
    queryParams.tplId = tplId
  }
  listDetail(queryParams).then((response) => {
    listData.value = response.rows
    passValidate.value = true
    total.value = response.total
  });
  loading.value = false;
}

// 修改
const handleEdit = (row) => {
  visible.value = true
  rowsInfo.value = {...row}
  proxy.$nextTick(()=>{
    proxy.$refs.eiRef.editData(row)
  })
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.metricsId);
}

// 添加指标
function handleAddMetrics() {
  addDetailByTplId(rowTplId.value, {metricsIds: ids.value.join(",")}).then(res => {
    proxy.$modal.msgSuccess("添加成功");
    open.value = false
    getSelectDetails(rowTplId.value)
    emit("updateList")
  })
}


// 删除
const handleDelete = (row) => {
  delDetail(row.tplDetailId).then(res => {
    proxy.$modal.msgSuccess("删除成功");
    getSelectDetails(rowTplId.value)
    emit("updateList")
  })
}

// 更新
const handleUpdate = (row) => {
  if(!passValidate.value) return proxy.$message.error("区间无效,请检查")
  updateDetail({...row}).then(res => {
    proxy.$modal.msgSuccess("修改成功");
    editRow.value = editRow.value.filter(p => p !== row.metricsId)
  })
}

// 新增
const handleAdd = () => {
  addListData.value = []
  open.value = true
  adParams.pageNum = 1
  getSelectData()
}

const getSelectData = () => {
  visible.value = false
  selectDetails(rowTplId.value, adParams).then(res => {
    addListData.value = res.rows
    adTotal.value = res.total
  })
}

defineExpose({
  getSelectDetails
})

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