mky-vent-base/src/views/vent/deviceManager/comment/warningTabel/ctrlTable.vue

<template>
  <!-- 配置预警设备 -->
  <div class="warning-device-box">
    <div class="warning-box">
      <div v-for="item in ctrlList" class="link-item" :class="{ 'active-device-title': item.id == activeID }" :key="item.id">
        <span class="" @click="selectWarning(item.id)">{{ item.valuename }}</span>
      </div>
    </div>
    <div class="device-box">
      <a-button class="vent-margin-b-5" type="primary" @click="handleOpen(true, {})"> 新增 </a-button>
      <a-table :columns="ctrlColumns" :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-popconfirm title="确定删除?" @confirm="handleDelete(record)">
              <a class="table-action-link">删除</a>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </div>
  </div>
  <BaseModal
    @register="register"
    @add="onSubmit"
    @update="onSubmit"
    :device-type="props.deviceType"
    :device-id="props.deviceId"
    :form-schemas="formSchemas"
    :monitor-type="''"
  />
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { ctrlColumns, ctrlFormSchemas } from './warning.data';
import { getCtrlDevicePointList, addCtrlDevicePoint, editCtrlDevicePoint, getCtrlDevicePointPage, deleteDevicePonit } from './warning.api';
import BaseModal from './BaseModalCtrl.vue';
import { useModal } from '/@/components/Modal';

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

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

const formSchemas = ctrlFormSchemas;
const activeID = ref('');
const dataSource = ref<any[]>([]);
const ctrlList = ref<any[]>([]);
const deviceType = ref('');
const editRecord = ref<any>(null);
function selectWarning(id) {
  activeID.value = id;
  getTableData(id);
}
async function getControlDevicePointList() {
  const param = {
    pageNo: 1,
    pageSize: 1000,
    devicetype: props.deviceType,
    valuetype: 10,
  };
  const res = await getCtrlDevicePointList(param);
  ctrlList.value = res.records || [];
}
const [register, { openModal, closeModal }] = useModal();

function handleOpen(flag?, record?) {
  console.log(record, 'record');
  deviceType.value = props.deviceType;
  editRecord.value = flag == 'update' ? record : null;
  if (record) {
    if (flag == 'update') {
      openModal(true, {
        isUpdate: true,
        record,
      });
    } else {
      openModal(true, {
        isUpdate: false,
        record,
      });
    }
  } else {
    openModal(true, {
      isUpdate: false,
      record,
    });
  }
}

async function onSubmit(flag, values) {
  const currentItem = ctrlList.value.find((item) => item.id == activeID.value);
  if (currentItem) {
    values.monitorCode = currentItem.valuecode;
    values.monitorId = currentItem.id;
    values.monitorName = currentItem.valuename;
  }
  if (flag == 'update') {
    await editCtrlDevicePoint({ id: editRecord.value?.id, ...editRecord.value, ...values });
  } else {
    await addCtrlDevicePoint({ ...values });
  }
  editRecord.value = null;
  closeModal();
  await getTableData(activeID.value);
}

async function handleDelete(record) {
  await deleteDevicePonit({ id: record.id });
  getTableData(activeID.value);
}

async function getTableData(id?: string) {
  const param = {
    pageNo: 1,
    pageSize: 1000,
    monitorId: id,
    deviceId: props.deviceId,
  };
  const res = await getCtrlDevicePointPage(param);
  dataSource.value = res.records || [];
}

onMounted(async () => {
  await getControlDevicePointList();
  if (ctrlList.value.length > 0) {
    activeID.value = ctrlList.value[0].id;
  }
  await getTableData(activeID.value);
});
</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>