SPDM/src/components/taskDetail/taskPerformance.vue

<template>
  <div class="task-performance-page">
    <BaseTable
      tableName="TASK_RUN_PERFORMANCE"
      ref="baseTableRef"
      :export-file-name="'指标列表'"
      :export-api="exportPerformanceApi"
      showCheckbox
      hidePagination
      :actionList="actionList"
      :export-params="excelParams"
      :full-height="fullHeight"
    >
      <template #leftOptions>
        <div class="operate-box">
          <!-- <el-upload
            class="mr12"
            :limit="1"
            accept=".xls,.xlsx"
            :auto-upload="true"
            :show-file-list="false"
            :on-change="handleLocalChangeExcelFun"
            :before-upload="(File: any) => uploadLocalFileFun(File)"
          >
            <el-button icon="">导入Excel</el-button>
          </el-upload> -->
          <!-- <el-button icon="" @click="exportFileFun">导出Excel</el-button> -->
          <el-button type="primary" @click="openAddPerformanceWindFun">新增</el-button>
          <el-button v-if="showSaveButton" type="primary" @click="saveFun">保存</el-button>
        </div>
      </template>

      <template #completeStatus="{row}"></template>

      <template #operate="{ row }">
        <el-button type="danger" link @click="delPerformance(row)">删除</el-button>
      </template>
    </BaseTable>

    <addTaskPerformance
      v-if="performanceVisible"
      :tableName="'TASK_RUN_PERFORMANCE'"
      @cancel="performanceVisible = false"
      @submit="addPerformanceFun"
    >
    </addTaskPerformance>
    <editPerformancePage
      v-if="editPerformanceVisible"
      @cancel="editPerformanceVisible = false"
      :performance-info="currentPerformance"
      @submit="updatePerformanceFun"
    ></editPerformancePage>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { ElMessage } from 'element-plus';
import {
  getTaskPerformanceApi,
  batchAddTaskPerformanceApi,
  batchDeleteTaskPerformanceApi,
  getRunPerformanceApi,
} from '@/api/task/taskpool';
import { FileUtil } from '@/utils/file';
import addTaskPerformance from './addTaskPerformance.vue';
import { editPerformanceApi, exportPerformanceApi } from '@/api/task/taskPerformance';
import { getFormConfigureApi } from '@/api/system/systemData';
import editPerformancePage from './editPerformancePage.vue';

const props = defineProps({
  taskId: {
    type: String,
    default: '',
  },
  runInfo: {
    type: Object,
    default: () => {},
  },
  taskInfo: {
    type: Object,
    default: () => {},
  },
  showSaveButton: {
    type: Boolean,
    default: false,
  },
  paramType: {
    type: String,
    default: 'task',
  },
  fullHeight: {
    type: Boolean,
    default: false,
  },
});
const baseTableRef = ref();
const performanceVisible = ref(false);
const editPerformanceVisible = ref(false);

const performanceData = ref<any>([]);
const getTaskPerformanceDataFun = async () => {
  console.log(props.taskId);
  console.log(props.runInfo);
  const res: any =
    props.paramType === 'task'
      ? await getTaskPerformanceApi({ taskId: props.taskInfo?.id })
      : await getRunPerformanceApi({ runId: props.runInfo?.uuid });
  if (res && res.code === 200) {
    performanceData.value = res.data;

    console.log(performanceData.value);
    if (baseTableRef.value) {
      baseTableRef.value.setDataFun(performanceData.value);
    }
  }
  // ElMessage.success('获取任务性能指标数据' + props.taskId);
};

const openAddPerformanceWindFun = () => {
  performanceVisible.value = true;
};

const addPerformanceFun = async (data: any) => {
  console.log(data, 'data');
  data.flag = 'add';
  const { fullData, visibleData, tableData, footerData } =
    baseTableRef.value.tableRef.getTableData();

  const existPerformance =
    fullData.find((item: any) => {
      return item.nodeName === data.nodeName;
    }) || null;

  if (existPerformance) {
    ElMessage.warning('已存在该指标，无法新增！');
  } else {
    baseTableRef.value.tableRef.insertAt(data, -1);
  }

  console.log(fullData, 'fullData');
  console.log(visibleData, 'visibleData');
  console.log(tableData, 'tableData');
  console.log(footerData, 'footerData');

  performanceVisible.value = false;
};

const deletePerformanceList = ref<any>([]);
const delPerformance = (row: any) => {
  baseTableRef.value.tableRef.remove(row);
  if (row.flag != 'add') {
    deletePerformanceList.value.push(row);
  }
};

const batchAddTaskPerformanceFun = async () => {
  const list = baseTableRef.value.tableRef.getInsertRecords();

  console.log(list, 'list');
  console.log(props.paramType, 'paramType');

  const performanceList: any = [];

  for (let i = 0; i < list.length; i++) {
    const obj: any = {
      uuid: '',
      nodeId: '',
      performanceName: list[i].performanceName,
      nodeName: list[i].nodeName,
      englishName: list[i].englishName,
      nodeCode: list[i].nodeCode,
      poolName: list[i].poolName,
      performanceType: list[i].performanceType,
      unit: list[i].unit,
      targetValue: list[i].targetValue,
      lowValue: list[i].lowValue,
      highValue: list[i].highValue,
      method: list[i].method,
      description: list[i].description,
      taskName: list[i].taskName,
      standard: list[i].standard,
      tenantId: list[i].tenantId,
      createTime: list[i].createTime,
      pid: 0,
    };

    if (props.paramType === 'task') {
      obj.taskId = props.taskInfo?.uuid;
    }

    if (props.paramType === 'run') {
      obj.runId = props.runInfo.uuid;
      obj.taskId = props.runInfo.taskId;
    }

    console.log(obj, 'objobjobj');

    performanceList.push(obj);
  }

  if (!list.length) {
    return;
  }

  const param: any = {
    performanceList: performanceList,
  };

  if (props.paramType === 'task') {
    param.taskId = props.taskInfo?.uuid;
  }

  if (props.paramType === 'run') {
    param.taskId = props.runInfo.taskId;
    param.runId = props.runInfo.uuid;
  }
  const res: any = await batchAddTaskPerformanceApi(param);
  if (res && res.code === 200) {
    // ElMessage.success('新增成功！');
  } else {
  }
};

const batchDeleteTaskPerformanceFun = async () => {
  const ids = deletePerformanceList.value.map((item: any) => {
    return item.id;
  });

  if (!ids.length) {
    return;
  }
  const res: any = await batchDeleteTaskPerformanceApi(ids);
  if (res && res.code === 200) {
  } else {
  }
};

const saveFun = async () => {
  await batchAddTaskPerformanceFun();
  await batchDeleteTaskPerformanceFun();
};

const uploadLocalFileFun = async (File: any) => {
  console.log(File);

  ElMessage.success('正在导入列表，请勿重复导入！');
  return false;
};

const performanceInfoList = [
  {
    chineseName: '指标名称',
    englishName: 'nodeName',
  },
  {
    chineseName: '英文名',
    englishName: 'englishName',
  },
  {
    chineseName: '指标类型',
    englishName: 'performanceType',
  },
  {
    chineseName: '达标方式',
    englishName: 'method',
  },
  {
    chineseName: '目标值',
    englishName: 'highValue',
  },
  {
    chineseName: '分析值',
    englishName: 'value',
  },
  {
    chineseName: '单位',
    englishName: 'unit',
  },
  {
    chineseName: '描述',
    englishName: 'description',
  },
  {
    chineseName: '低性能',
    englishName: 'lowValue',
  },
  {
    chineseName: '节点编号',
    englishName: 'nodeCode',
  },
  {
    chineseName: '节点id',
    englishName: 'nodeId',
  },
  {
    chineseName: '节点名称',
    englishName: 'nodeName',
  },
  {
    chineseName: 'pid',
    englishName: 'pid',
  },
  {
    chineseName: '库名称',
    englishName: 'poolName',
  },
  {
    chineseName: '标准',
    englishName: 'standard',
  },
  {
    chineseName: 'targetValue',
    englishName: 'targetValue',
  },
  {
    chineseName: '任务名称',
    englishName: 'taskName',
  },
  {
    chineseName: 'tenantId',
    englishName: 'tenantId',
  },
  {
    chineseName: 'uuid',
    englishName: 'uuid',
  },
];

const performanceFile = ref<any>({});
const handleLocalChangeExcelFun = async (uploadFile: any, uploadFiles: any) => {
  performanceFile.value = uploadFile.raw;
  console.log(uploadFiles);

  let fileInfo: any = [];
  await FileUtil.parsingExcelFile(performanceFile.value).then((result: any) => {
    fileInfo = result;
  });

  conversionName(fileInfo, performanceInfoList, 'chineseName', 'englishName');
  const newList = arraysConvertedToObjects(fileInfo);

  const newData = baseTableRef.value.tableRef.getTableData().visibleData;
  const commonNameList: any = [];
  for (let i = 0; i < newData.length; i++) {
    for (let j = 0; j < newList.length; j++) {
      if (newData[i].code === newList[j].code) {
        commonNameList.push(newList[j].code);
        for (const key in newData[i]) {
          if (key != 'change_flag' && key != 'id' && key != 'value') {
            newData[i][key] = newList[j][key];
          }

          if (key === 'value') {
            if (newData[i][key] != newList[j][key]) {
              if (newData[i].flag != 'add') {
                newData[i].flag = 'edit';
              }
              newData[i][key] = newList[j][key];
            }
          }

          // if (newData[i].change_flag != 'add') {
          //   newData[i].change_flag = 'edit';
          // }
        }
      }
    }
  }
  for (let i = 0; i < newList.length; i++) {
    if (!commonNameList.includes(newList[i].performanceName)) {
      baseTableRef.value.tableRef.insertAt(newList[i]);
    }
  }

  const allData = baseTableRef.value.tableRef.getTableData().visibleData;

  console.log(allData, 'allData.allData');
};

// 性能指标数组中英名称转换
const conversionName = (data: any, names: any, before: string, after: string) => {
  for (let i = 0; i < data[0].length; i++) {
    for (let j = 0; j < names.length; j++) {
      if (data[0][i] === names[j][before]) {
        data[0][i] = names[j][after];
      }
    }
  }
};

// 数据转化成第一行为属性的对象
const arraysConvertedToObjects = (arr: any) => {
  const herder = arr[0];
  const body = arr.slice(1);

  const newArr: any = [];
  for (let i = 0; i < body.length; i++) {
    const obj: any = {};
    for (let j = 0; j < herder.length; j++) {
      obj[herder[j]] = body[i][j];
    }
    obj.change_flag = 'add';
    newArr.push(obj);
  }

  return newArr;
};

const excelHeaders = ref<any>({});
const excelParams = ref<any>({});
const getFormConfigureFun = async () => {
  const res: any = await getFormConfigureApi({
    formName: 'PERFORMANCE_POOL',
  });

  if (res && res.code === 200) {
    const cloumn: any = JSON.parse(res.data.formConfig) || [];
    excelHeaders.value = cloumn.map((item: any) => {
      return {
        key: item.key,
        title: item.title,
      };
    });

    if (props.paramType === 'run') {
      excelParams.value = {
        runId: props.runInfo.uuid,
      };
    } else {
      excelParams.value = {
        taskId: props.taskInfo.id,
      };
    }
  }
};

defineExpose({
  saveFun,
  baseTableRef,
});

const actionList = ref([
  {
    title: '编辑',
    type: 'primary',
    click: (row: any) => {
      editPerformanceFun(row);
    },
  },
  {
    title: '删除',
    type: 'danger',
    needConfirm: true,
    confirmTip: '确认删除吗？',
    click: (row: any) => {
      delPerformance(row);
    },
  },
]);

const currentPerformance = ref<any>({});
const editPerformanceFun = (row: any) => {
  currentPerformance.value = row;
  editPerformanceVisible.value = true;
};

const updatePerformanceFun = async (data: any) => {
  editPerformanceVisible.value = false;
  const res: any = await editPerformanceApi(data);
  if (res && res.code === 200) {
    ElMessage.success('操作成功');
    baseTableRef.value.resetFun();
  }
};

onMounted(async () => {
  await getTaskPerformanceDataFun();

  await getFormConfigureFun();
});
</script>

<style lang="scss" scoped>
.task-performance-page {
  width: 100%;
  height: 100%;

  .operate-box {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .mr12 {
    margin-right: 12px;
  }
}
</style>