gas-injection/src/views/vent/deviceManager/comment/DeviceModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="title"
    width="900px"
    :showCancelBtn="false"
    :showOkBtn="false"
    :footer="null"
    destroyOnClose
  >
    <a-tabs v-if="props.showTab">
      <a-tab-pane key="1" tab="基本信息" force-render>
        <FormModal :record="record" @saveOrUpdate="(values) => emit('saveOrUpdate', values)" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="点表设备关联">
        <template v-if="deviceType == 'managesys'">
          <WorkFacePointTable :columns="pointColumns" :deviceId="deviceData.id" @save="savePointData" @delete="deletePointById" />
        </template>
        <template v-else>
          <PointTable :columns="pointColumns" :deviceId="deviceData.id" @save="savePointData" @delete="deletePointById" />
        </template>
      </a-tab-pane>
      <a-tab-pane key="3" tab="摄像头配置"
        ><EditRowTable
          :columns="cameraColumns"
          :list="cameraList.bind(null, { deviceId: deviceData.id })"
          @saveOrUpdate="saveCameraData"
          @deleteById="deleteCameraById"
          :isAdd="true"
      /></a-tab-pane>
    </a-tabs>
    <FormModal v-else :record="record" @saveOrUpdate="(values) => emit('saveOrUpdate', values)" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { computed, unref, inject, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import EditRowTable from '../../comment/EditRowTable.vue';
  import PointTable from './pointTabel/PointTable.vue';
  import WorkFacePointTable from './pointTabel/WorkFacePointTable.vue';
  import FormModal from './FormModal.vue';
  import { cloneDeep } from 'lodash-es';
  import { columns as pointColumns } from './pointTabel/point.data';
  import { saveOrUpdate as pointSaveOrUpdate, deleteById as pointDeleteById } from './pointTabel/point.api';
  import { columns as cameraColumns } from './cameraTabel/camera.data';
  import { list as cameraList, saveOrUpdate as cameraSaveOrUpdate, deleteById as cameraDeleteById } from './cameraTabel/camera.api';

  const props = defineProps({
    showTab: { type: Boolean, required: true },
    deviceType: { type: String },
  });
  // 声明Emits
  const emit = defineEmits(['saveOrUpdate', 'register']);
  const isUpdate = inject('isUpdate');
  const deviceData = inject('formData') as any;
  const record = reactive({});

  //表单赋值
  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    //重置表单
    setModalProps({ confirmLoading: false });
    Object.assign(record, data.record);
  });

  //设置标题
  const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));

  const savePointData = (data) => {
    debugger;
    const record = cloneDeep(data.editValueRefs);
    pointSaveOrUpdate(Object.assign(record, { id: data.id, deviceId: deviceData.id }), data.id);
  };
  const saveCameraData = (data: any) => {
    const record = cloneDeep(data.editValueRefs);
    cameraSaveOrUpdate(Object.assign(record, { id: data.id, deviceId: deviceData.id }), data.id);
  };
  const deletePointById = (id, reload) => {
    pointDeleteById({ id: id }, reload);
  };
  const deleteCameraById = (id, reload) => {
    cameraDeleteById({ id: id }, reload);
  };
</script>
<style scoped lang="less"></style>