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

<template>
  <BasicModal @register="register" :title="title" :width="800" :min-height="600" v-bind="$attrs" @ok="onSubmit">
    <BasicForm @register="registerForm">
      <template #monitor="{ model, field }">
        <div class="vent-flex-row-between">
          <Select ref="selectRef" disabled v-model:value="pointData" :options="option" style="width: calc(100% - 65px)" />
          <a-button class="vent-margin-b-5" type="primary" @click="selectPoint(model['strtype'])" style="position: absolute; right: 0; top: 1px"
            >选择</a-button
          >
        </div>
      </template>
    </BasicForm>
  </BasicModal>
  <DevicePointTable @register="registerModal" :data-source="devicePointList" :selection-row-keys="pointData" @reload="setPoint" />
</template>
<script lang="ts" setup>
  import { onMounted, ref, defineEmits, unref, nextTick } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
  import type { FormSchema } from '/@/components/Form/src/types/form';
  import { Select, message } from 'ant-design-vue';
  import DevicePointTable from './DevicePointTable.vue';
  import { workFacePointList } from './warning.api';

  const props = defineProps({
    formSchemas: {
      type: Array as PropType<FormSchema[]>,
      default: () => [],
    },
    deviceId: { type: String },
    monitorType: {
      type: String,
      default: '2',
    },
  });
  const emit = defineEmits(['add', 'update', 'register']);
  const option = ref<any[]>([]);
  const devicePointList = ref<any[]>([]);
  const pointData = ref<String[]>([]);
  const title = ref('');
  const isUpdate = ref(false);
  // 注册 form
  const [registerForm, { resetFields, setFieldsValue, validate, getFieldsValue }] = useForm({
    schemas: props.formSchemas,
    showActionButtonGroup: false,
  });

  // 注册 modal
  const [register, { setModalProps }] = useModalInner(async (data) => {
    isUpdate.value = unref(data.isUpdate);
    title.value = unref(data.title);
    await resetFields();
    if (data.isUpdate) {
      await setFieldsValue({ ...data.record });
      pointData.value = [data.record['monitorId']];

      await getDevicePointList(data.record['deviceId']);
      devicePointList.value.forEach((item) => {
        if (item['id'] == pointData.value) {
          setPoint([item]);
        }
      });
      // 初始打开有数据时候要查点表
    } else if (data.record) {
      await setFieldsValue({ relId: data.record['relId'] || data.record['id'], monitorId: '' });
    }
  });

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

  async function getDevicePointList(strtype) {
    try {
      const result = await workFacePointList({ deviceType: strtype, valueType: props.monitorType });
      devicePointList.value = result;
    } catch (error) {
      devicePointList.value = [];
    }
  }

  async function onSubmit() {
    try {
      const data = await getFieldsValue();
      await setFieldsValue({ ...data, monitorId: pointData.value[0] });
      const values = await validate();
      setModalProps({ confirmLoading: true });

      // 提交表单
      if (!isUpdate.value) {
        emit('add', 'add', values);
      } else {
        emit('update', 'update', values);
      }
      // //关闭弹窗
      // closeModal();
      // //刷新列表
      // reload()
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }

  async function selectPoint(strtype) {
    if (strtype) {
      await getDevicePointList(strtype);
      openModal();
    } else {
      message.info('请先选择设备！');
    }
  }

  function setPoint(value) {
    const data = value[0];
    option.value = [
      {
        value: data.id,
        label: data.valuename,
      },
    ];
    nextTick(() => {
      pointData.value = [data.id];
    });
  }

  onMounted(async () => {});
</script>
<style scoped lang="less"></style>