点表关联组件

src/views/vent/deviceManager/comment/warningTabel/BaseModal1.vue

@@ -0,0 +1,131 @@
+<template>
+  <BasicModal @register="register" :title="title" :width="800" :min-height="400" 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']]
+
+      // debugger
+      // 初始打开有数据时候要查点表
+      // 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 });
+      debugger
+      // 提交表单
+      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>