vent-template/src/views/vent/deviceManager/comment/warningTabel/index3.vue

<template>
  <div class="vent-flex-row">
    <span style="color: #fff;">关联的控制设备：</span>
    <a-select v-model:value="sysDeviceId" style="width: 200px" placeholder="关联的控制设备" :options="sysDeviceOptions"
      @change="handleChange" :allowClear="true" />
    <a-button class="vent-margin-l-8" type="primary" @click="getDeviceWarningPointList"> 查询 </a-button>
    <a-button class="vent-margin-l-8" type="primary" @click="addPoint"> 新增 </a-button>
  </div>

  <EditRowTableVue v-if="refresh" ref="RefComponent" :columns="BackWindDevicePointColumns" :data-source="dataSource"
    @save-or-update="saveOrUpdate" @delete-by-id="handleDelete" :isAdd="false" style="margin-top: 10px">

  </EditRowTableVue>

  <DevicePointTable @register="registerModal" :data-source="devicePointList" :selection-row-keys="selectionRowKeys"
    @reload="reload" />
</template>

<script lang="ts" setup>
import { defineProps, ref, onMounted } from 'vue';
import { BackWindDevicePointColumns } from './warning.data';
import EditRowTableVue from '../../../comment/EditRowTable.vue';
import { backWindControlDevicePointList, backWindControlDevicePointEdit, backWindControlDevicePointDelete, workFaceDeviceList, workFacePointList, backWindControlDevicePointBatchAdd } from './warning.api';
import DevicePointTable from './DevicePointTable.vue';
import { useModal } from '/@/components/Modal';

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

const sysDeviceId = ref('') // 选中的关联设备的id
const sysDeviceType = ref('')
const devicePointList = ref<any[]>([])
const selectionRowKeys = ref<any[]>([])
const sysDeviceOptions = ref<any[]>([])
let sysDeviceList = <any[]>[]
const RefComponent = ref()
const dataSource = ref<any[]>([])

const refresh = ref(true)

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

const handleChange = async (value) => {
  sysDeviceId.value = value
  const obj = sysDeviceList.find((element) => {
    return element.id == value
  })
  sysDeviceType.value = obj['strtype']
  await getDeviceWarningPointList()
}

async function getDeviceWarningPointList() {

  const result = await backWindControlDevicePointList({ deviceId: sysDeviceId.value })
  if (result && result.records.length > 0) {
    dataSource.value = result.records
  } else {
    dataSource.value = []
  }
}

async function getDevicePointList() {
  try {
    const result = await workFacePointList({ deviceType: sysDeviceType.value, valueType: 1 });
    devicePointList.value = result
    const rowKeys = <any[]>[]
    dataSource.value.forEach((item) => {
      rowKeys.push(item['monitorId'])
    })
    selectionRowKeys.value = rowKeys
  } catch (error) {
    devicePointList.value = []
  }
};

async function getDeviceOptions() {
  const result = await workFaceDeviceList({ id: props.deviceId })
  const options = <any[]>[]
  if (result.length > 0) {
    result.forEach(element => {
      options.push({ value: element.id, label: element.strname })
    });
    sysDeviceOptions.value = options
    sysDeviceList = result
  }

}

async function saveOrUpdate(record) {
  try {
    if (record.id) {
      await backWindControlDevicePointEdit({ ...record });
    }
    RefComponent.value.reload()
  } catch (error) { }
}

function handleDelete(id) {
  backWindControlDevicePointDelete({ id }).then(() => {
    getDeviceWarningPointList()
  })
}

async function reload(list) {
  const monitorList = <any[]>[]
  list.forEach(item => {
    monitorList.push({ deviceId: sysDeviceId.value, monitorId: item['id'], monitorName: item['valuename'], sysId: props.deviceId })
  })
  await backWindControlDevicePointBatchAdd(monitorList)
  getDeviceWarningPointList()
}

function addPoint() {
  getDevicePointList().then(() => {
    openModal();
  })
}

onMounted(async () => {
  await getDeviceOptions()
  await getDeviceWarningPointList()
});
</script>

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