mky-vent-base/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" > </BaseModal>
  
</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';
 
  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([])

  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
    //合并数据
    const resetRowOrColSpanMap = (i) => {
      
      let j = i - flag
      const value0 = [
        {
          code: 'key',
          rowSpan: flag + 1,
          colSpan: 1
        },
        {
          code: 'alarmName',
          rowSpan: flag + 1,
          colSpan: 1
        },
        {
          code: 'operation1',
          rowSpan: flag + 1,
          colSpan: 1
        },
      ]
      const value1 = [
        {
          code: 'key',
          rowSpan: 0,
          colSpan: 1
        },
        {
          code: 'alarmName',
          rowSpan: 0,
          colSpan: 1
        },
        {
          code: 'operation1',
          rowSpan: 0,
          colSpan: 1
        },
      ]
      if(i == result.records.length - 1){
        rowOrColSpanMap.set(result.records[j]['id'], value0)
        j += 1
        while (j <= i) {
          rowOrColSpanMap.set(result.records[j]['id'], value1)
          ++j
        }
      }else{
        rowOrColSpanMap.set(result.records[j - 1]['id'], value0)
        while (j < i) {
          rowOrColSpanMap.set(result.records[j]['id'], value1)
          ++j
        }
      }
    }

    for(let i=0; i< result.records.length; i++){
      const item = result.records[i]
      item['key'] = `${groupNum}`
      if(item.relId){
        
        ++flag
        if(i == result.records.length - 1){
          resetRowOrColSpanMap(i)
        }
      }else{
        groupNum++
        if(flag){
          resetRowOrColSpanMap(i)
        }
        flag = 0
      }
    }
    console.log(rowOrColSpanMap)
    show.value = true
    dataSource.value = result.records
  }

  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 {
        // 新增并关系数据
        openModal(true, {
          isUpdate: false,
          record
        });
      }
      
    }else{
      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>