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>