gas-injection/src/views/vent/deviceManager/comment/warningTabel/BaseModal.vue

<template>
  <BasicModal @register="register" :title="title" :width="800" 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 } 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']]

      // 初始打开有数据时候要查点表

    }else if(data.record){
      await setFieldsValue({ relId: data.record['id'] });
    }
  });

  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) {
        emit('add', 'add', values)
      } else {
        emit('update', 'update',values)
      }
      // //关闭弹窗
      // closeModal();
      // //刷新列表
      // reload()
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }

  async function selectPoint(strtype) {
    await getDevicePointList(strtype)
    openModal()
  }

  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>