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

<template>
  <div>
    <EditRowTableVue
      v-if="refreshParent"
      :columns="warningColumns"
      :list="list.bind(null, { 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="record.editable && column.dataIndex === 'monitorcode'">
          <div style="position: relative">
            <Select
              :options="options"
              v-model:value="record.editValueRefs['monitorcode']"
              :fieldNames="{ label: 'valuename', value: 'valuecode' }"
              size="small"
              style="min-width: 100px"
            />
            <!-- <a-popover placement="monitorcode" :visible="true">
              <template #content>
                <p>Content</p>
              </template>
            </a-popover> -->
          </div>
        </template>
      </template>
    </EditRowTableVue>
    <div style="color: #efefef; margin-top: 8px;">注: 请先选中监测参数才能添加报警等级</div>
    <EditRowTableVue
      v-if="refresh && warningProId !== ''"
      ref="RefChildComponent"
      :columns="levelColumns"
      :list="limitList.bind(null, { 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 } from 'vue';

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

  async function saveOrUpdateParent(record) {
    try {
      if (record.id) {
        await edit({ ...record });
      } else {
        await save({ ...record, deviceid: props.deviceId });
      }
      refreshParent.value = false;
      nextTick(() => {
        refreshParent.value = true;
      });
    } catch (error) {}
  }
  async function saveOrUpdateChild(record) {
    if (record.id) {
      await limitEdit({ ...record });
    } else {
      await limitSave({ ...record, limitid: warningProId.value, code: currentParent.value['monitorcode'] });
    }
    refresh.value = false;
    nextTick(() => {
      refresh.value = true;
    });
  }
  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;
    });
  }

  onMounted(async () => {
    const res = await pointList({ devicetype: props.pointType, valuetype_begin: 2 });
    options.value = res && res['records'] ? res['records'] : [];
  });
</script>

<style scoped></style>