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

<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" 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, 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 { workFacePointList } from './warning.api';
import DevicePointTable from './DeviceCtrlPointTable.vue';

const props = defineProps({
  formSchemas: {
    type: Array as PropType<FormSchema[]>,
    default: () => [],
  },
  deviceId: { type: String },
  monitorType: {
    type: String,
    default: '2',
  },
  deviceType: { type: String },
});
const emit = defineEmits(['add', 'update', 'register']);
const option = ref<any[]>([]);
const devicePointList = ref<any[]>([]);
const pointData = ref<String[]>([]);
const selectedPoint = ref<any>(null);
const selectedDevice = ref<any>(null);
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();
  pointData.value = [];
  selectedPoint.value = null;
  selectedDevice.value = null;
  option.value = [];
  await resetFields();
  if (data.isUpdate) {
    await setFieldsValue({ ...data.record });
    pointData.value = [data.record['linkMonitorCode']];

    await getDevicePointList(data.record['deviceId'] || data.record['linkDeviceId']);
    const matchItem = devicePointList.value.find((item) => item['id'] == pointData.value[0] || item['valuecode'] == pointData.value[0]);
    if (matchItem) {
      setPoint([matchItem]);
    }
  } else if (data.record) {
    await getDevicePointList(data.record['linkDeviceType']);
    devicePointList.value.forEach((item) => {
      if (item['id'] == data.record['linkMonitorCode'] || item['valuecode'] == data.record['linkMonitorCode']) {
        setPoint([item]);
      }
    });
    pointData.value = [data.record['linkMonitorCode']];
    await setFieldsValue({ linkMonitorCode: '' });
  }
});

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

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

async function onSubmit() {
  try {
    const data = await getFieldsValue();
    await setFieldsValue({ ...data, linkMonitorCode: pointData.value[0] });
    const values = await validate();
    values.deviceId = props.deviceId;
    if (selectedPoint.value) {
      values.linkMonitorCode = selectedPoint.value.valuecode;
      values.linkMonitorId = String(selectedPoint.value.id);
      values.linkMonitorName = selectedPoint.value.valuename;
    }
    console.log(values, 'values');
    setModalProps({ confirmLoading: true });
    if (!isUpdate.value) {
      emit('add', 'add', values);
    } else {
      emit('update', 'update', values);
    }
  } finally {
    setModalProps({ confirmLoading: false });
  }
}

async function selectPoint() {
  const values = await getFieldsValue();
  const strtype = values.linkDeviceType || props.deviceType;
  if (!strtype) {
    message.info('请先选择设备类型！');
    return;
  }
  if (!values.linkDeviceId) {
    message.info('请先选择关联设备！');
    return;
  }
  await getDevicePointList(strtype);
  openModal();
}

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

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