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

<template>
  <div>
    <EditRowTableVue
      v-if="refreshParent"
      ref="ParentRef"
      :columns="warningColumns"
      :list="list"
      :params="{ deviceid: deviceId }"
      @save-or-update="saveOrUpdateParent"
      @delete-by-id="parentDeleteById"
      @row-change="changeParentRow"
      :isAdd="true"
      :isRadio="true"
      :scroll="{ y: 200 }"
    >
      <template #filterCell="{ column, record }">
        <template v-if="column.dataIndex === 'monitorcode'">
          <div v-if="record.editable" style="position: relative">
            <Select
              :options="options"
              v-model:value="record['monitorcode']"
              :fieldNames="{ label: 'valuename', value: 'valuecode' }"
              size="small"
              style="min-width: 100px"
            />
          </div>
          <div v-else>{{ getLabel(record['monitorcode']) }}</div>
        </template>
      </template>
    </EditRowTableVue>
    <div style="color: #efefef; margin-top: 8px">注: 请先选中监测参数才能添加报警等级</div>
    <EditRowTableVue
      v-if="refresh && warningProId !== ''"
      ref="RefChildComponent"
      :columns="levelColumns"
      :list="limitList"
      :params="{ limitid: warningProId }"
      @save-or-update="saveOrUpdateChild"
      @delete-by-id="childDeleteById"
      :isAdd="true"
      style="margin-top: 10px"
      :scroll="{ y: 200 }"
    />
    <a-table v-else :dataSource="[]" :columns="levelColumns" style="margin-top: 10px" />
  </div>
</template>

<script lang="ts" setup>
  import { Select } from 'ant-design-vue';
  import EditRowTableVue from '../../../comment/EditRowTable.vue';
  import { warningColumns, levelColumns } from './warning.data';
  import { list, limitList, edit, save, limitSave, limitEdit, deleteById, limitDeleteById } from './warning.api';
  import { list as pointList } from '../pointTabel/point.api';
  import { defineProps, ref, nextTick, inject, onMounted, onBeforeMount } from 'vue';

  const props = defineProps({
    deviceId: { type: String },
    pointType: {
      type: String,
      requried: true,
    },
  });
  const ParentRef = ref();
  const options = ref([]);
  const RefChildComponent = ref();
  const warningProId = ref('');
  const currentParent = ref({});
  const refresh = ref(true);
  const refreshParent = ref(true);

  async function saveOrUpdateParent(record) {
    try {
      if (record.id) {
        currentParent.value = record;
        await edit({ ...record });
      } else {
        await save({ ...record, deviceid: props.deviceId, devicetype: props.pointType });
      }
      // refreshParent.value = false;
      if (ParentRef.value) {
        await ParentRef.value.reload();
        nextTick(() => {
          const parentList = ParentRef.value.getDataSource();
          if (record.id) {
            ParentRef.value.setSelectedRowKeys([record.id]);
          } else {
            ParentRef.value.setSelectedRowKeys([parentList[0]['id']]);
          }
        });
      }
    } catch (error) {}
  }
  async function saveOrUpdateChild(record) {
    if (record.id) {
      await limitEdit({ ...record });
    } else {
      await limitSave({
        ...record.editValueRefs,
        limitid: warningProId.value,
        code: currentParent.value['monitorcode'],
        devicetype: props.pointType,
        deviceid: props.deviceId,
      });
    }
    // refresh.value = false;
    if (RefChildComponent.value) {
      await RefChildComponent.value.reload();
      nextTick(() => {
        const childList = RefChildComponent.value.getDataSource();
        RefChildComponent.value.setSelectedRowKeys([childList[0]['id']]);
      });
    }
  }
  function parentDeleteById(id, reload) {
    deleteById({ id: id }, reload);
  }
  function childDeleteById(id, reload) {
    limitDeleteById({ id: id }, reload);
  }
  function changeParentRow(id, rowData) {
    warningProId.value = id;
    currentParent.value = rowData;
    refresh.value = false;
    nextTick(() => {
      refresh.value = true;
    });
  }
  function getLabel(code) {
    const obj = options.value.find((item) => item['valuecode'] === code);
    if (obj) {
      return obj['valuename'];
    }
    return code;
  }
  onBeforeMount(async () => {
    const res = await pointList({ devicetype: props.pointType, valuetype_begin: 2 });
    options.value = res && res['records'] ? res['records'] : [];
  });
  onMounted(async () => {
    if (ParentRef.value) {
      await ParentRef.value.reload();
      nextTick(() => {
        const parentList = ParentRef.value.getDataSource();
        ParentRef.value.setSelectedRowKeys([parentList[0]['id']]);
      });
    }
  });
</script>

<style scoped></style>