hsq-pro/src/views/vent/monitorManager/hsqHome/components/deviceModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="title"
    width="1000px"
    :showCancelBtn="false"
    :showOkBtn="false"
    :footer="null"
    :destroyOnClose="true"
    :mask-closable="false"
    @cancel="closeModalFn"
  >
    <a-tabs v-if="props.showTab" v-model:activeKey="activeKey">
      <a-tab-pane key="5" tab="配置预警设备" force-render>
        <template v-if="activeKey == '5'">
          <BackWindDeviceTable :deviceId="selectSysId" />
        </template>
      </a-tab-pane>

      <a-tab-pane key="6" tab="配置控制设备" force-render>
        <template v-if="activeKey == '6'">
          <ManagerWarningTable :deviceId="selectSysId" />
        </template>
      </a-tab-pane>
    </a-tabs>
  </BasicModal>
</template>
<script lang="ts" setup>
import { computed, unref, inject, reactive, ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import FormModal from '../../../deviceManager/comment/FormModal.vue';
import BackWindDeviceTable from '../../../deviceManager/comment/warningTabel/index3.vue';
import ManagerWarningTable from '../../../deviceManager/comment/warningTabel/index1.vue';

const props = defineProps({
  showTab: { type: Boolean, required: true },
  deviceType: { type: String, default: '' },
  selectSysId: { type: String, default: '' },
  selectSysAlarmId: { type: String, default: '' },
});

const emit = defineEmits(['saveOrUpdate', 'register', 'closeModal']);
const isUpdate = inject('isUpdate');
const deviceData = inject('formData') as any;
const deviceType = inject('deviceType') as any;
const record = reactive({});
const activeKey = ref('5');

const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  setModalProps({ confirmLoading: false });
  for (const key in deviceData) delete deviceData[key];
  Object.assign(deviceData, data.record);
  activeKey.value = '5';
});

// 标题
const title = '编辑';

const closeModalFn = () => {
  activeKey.value = '5';
  closeModal();
  emit('closeModal');
};
</script>
<style scoped lang="less">
::v-deep .suffix {
  height: 32px;
  line-height: 32px;
  margin-left: 5px;
  color: #fff;
}
::v-deep .j-box-bottom-button-float {
  background: none !important;
}
</style>