gasInjection-project/src/views/vent/deviceManager/comment/warningTabel/index3.vue

<template>
  <div class="warning-device-box">
    <div class="warning-box">
      <div v-for="item in warningList" class="link-item" :class="{ 'active-device-title': item.id == activeID }" :key="item.id">
        <span class="" @click="selectWarning(item.id)">{{ item.alarmName }}</span>
      </div>
    </div>
    <div class="device-box">
      <a-button class="vent-margin-b-5" type="primary" @click="handleOpen"> 新增 </a-button>
      <a-table v-if="show" :columns="MonitorColumns" :data-source="dataSource" bordered :scroll="{ y: 500 }" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a class="action-link" @click="handleOpen('update', record)">编辑</a>
            <a class="action-link vent-margin-l-10" @click="handleDelete(record)">删除</a>
          </template>
          <template v-if="column.dataIndex === 'operation1'">
            <a class="action-link" @click="handleOpen('add', record)">新增</a>
          </template>
        </template>
      </a-table>
    </div>
  </div>
  <BaseModal @register="register" @add="onSubmit" @update="onSubmit" :form-schemas="formSchemas" />
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { rowOrColSpanMap, MonitorColumns, monitorWarningFormSchemas } from './warning.data';
  import { warningLogList, workFaceWarningList, workFaceWarningAdd, workFaceWarningEdit, workFaceWarningDelete } from './warning.api';
  import BaseModal from './BaseModal.vue';
  import { useModal } from '/@/components/Modal';
  import { message } from 'ant-design-vue';

  const emit = defineEmits(['register']);

  const props = defineProps({
    deviceId: { type: String },
  });

  const show = ref(false);
  const formSchemas = monitorWarningFormSchemas({ id: props.deviceId });
  const activeID = ref('');
  const warningList = ref<{ id: string; alarmName: string }[]>([]);
  const dataSource = ref<any[]>([]);

  function selectWarning(id) {
    activeID.value = id;
  }

  async function getWarningList() {
    const result = await warningLogList({ sysId: props.deviceId, pageSize: 100000 }); //id: props.deviceId
    warningList.value = result.records;

    activeID.value = warningList.value[0]['id'];
  }

  async function getDataSource() {
    show.value = false;
    rowOrColSpanMap.clear();
    const result = await workFaceWarningList({ sysId: props.deviceId, monitorType: 2, alarmId: activeID.value, pageSize: 100000 });
    let flag = 0;
    let groupNum = 0;
    let resultDataSource: any[] = [];
    const value1 = [
      {
        code: 'key',
        rowSpan: 0,
        colSpan: 1,
      },
      {
        code: 'alarmName',
        rowSpan: 0,
        colSpan: 1,
      },
      {
        code: 'operation1',
        rowSpan: 0,
        colSpan: 1,
      },
    ];
    // 根据relId 排序

    for (let i = 0; i < result.records.length; i++) {
      const item = result.records[i];
      if (!item.relId) {
        groupNum++;
        resultDataSource.push(item);
        let itemChildArr: any[] = [];
        for (let j = 0; j < result.records.length; j++) {
          const itemChild = result.records[j];
          if (itemChild.relId == item.id) {
            resultDataSource.push(itemChild);
            itemChildArr.push(itemChild);
          }
        }
        const value0 = [
          {
            code: 'key',
            rowSpan: itemChildArr.length + 1,
            colSpan: 1,
          },
          {
            code: 'alarmName',
            rowSpan: itemChildArr.length + 1,
            colSpan: 1,
          },
          {
            code: 'operation1',
            rowSpan: itemChildArr.length + 1,
            colSpan: 1,
          },
        ];
        rowOrColSpanMap.set(item['id'], value0);
        item['key'] = `${groupNum}`;
        for (let m = 0; m < itemChildArr.length; m++) {
          rowOrColSpanMap.set(itemChildArr[m]['id'], value1);
        }
      }
    }
    show.value = true;
    dataSource.value = resultDataSource;
  }

  async function handleDelete(record) {
    await workFaceWarningDelete({ id: record.id });
    getDataSource();
  }

  const [register, { openModal, closeModal }] = useModal();

  function handleOpen(flag?, record?) {
    if (record) {
      if (flag == 'update') {
        openModal(true, {
          isUpdate: true,
          record,
        });
      } else {
        if (!activeID.value) {
          message.warning('请先选择预警条目！');
          return;
        }
        // 新增并关系数据
        openModal(true, {
          isUpdate: false,
          record,
        });
      }
    } else {
      if (!activeID.value) {
        message.warning('请先选择预警条目！');
        return;
      }
      openModal(true, {
        isUpdate: false,
      });
    }
  }

  async function onSubmit(flag, values) {
    if (activeID.value) {
      // 提交数据弹窗
      if (flag == 'update') {
        await workFaceWarningEdit({ ...values });
      } else {
        await workFaceWarningAdd({ ...values, monitorType: 2, sysId: props.deviceId, alarmId: activeID.value });
      }
      getDataSource();
    }
    closeModal();
  }

  onMounted(async () => {
    await getWarningList();
    await getDataSource();
  });
</script>

<style lang="less" scoped>
  @ventSpace: zxm;

  .warning-device-box {
    width: 100%;
    height: 600px;
    overflow-y: auto;
    display: flex;
    .warning-box {
      width: 200px;
      height: 100%;
      overflow-y: auto;
      background: #ffffff11;
      padding: 5px;
      border-radius: 5px;

      .link-item {
        position: relative;
        cursor: pointer;
        line-height: 30px;
        padding-left: 30px;
        color: #fff;
        span:hover {
          color: #89ffff;
        }
        &::after {
          content: '';
          position: absolute;
          display: block;
          width: 8px;
          height: 8px;
          top: 12px;
          left: 10px;
          transform: rotateZ(45deg) skew(10deg, 10deg);
          background: #45d3fd;
        }
      }
      .active-device-title {
        color: aqua;
      }
    }
    .device-box {
      flex: 1;
      margin-left: 10px;
    }

    .action-link {
      color: #00e7ff;
    }
  }
</style>