sl-sfy-safety/src/views/cameras/overview/components/CameraEditPopover.vue

<template>
  <el-card v-if="props.modelValue" class="pop-card">
    <template #header>
      <div class="flex justify-between items-center pop-head">
        <span class="pop-head-name">编辑相机</span>
        <el-icon :size="16" class="mr-3" @click="updateValue(false)"><Close /></el-icon>
      </div>
    </template>
    <div class="pop-content flex justify-center items-center">
      <IPAddCamera
        :form-data="props.editData"
        @cancel-execute="updateValue(false)"
        @confirm-execute="onEditCamera"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
  import { Close } from '@element-plus/icons-vue';
  import IPAddCamera from './AddCameraByIP.vue';
  import { CameraIPItem } from '../type';
  import useCameraOverview from '../stores/useCameraOverview';
  import { ElMessage } from 'element-plus';

  const props = defineProps<{
    modelValue: boolean;
    editData?: CameraIPItem | null;
    confirmEvent?: (data) => any;
  }>();

  const emits = defineEmits(['update:modelValue']);

  const cameraOverview = useCameraOverview();
  const { editCamera, getCameraItems } = cameraOverview;

  const updateValue = (value) => {
    emits('update:modelValue', value);
  };

  const onEditCamera = (data) => {
    // const temp = cloneDeep(data) as any;
    // delete temp.workshopName;
    // delete temp.workspaceName;
    // delete temp.principal;
    const temp = {
      id: data.id,
      name: data.name,
      cameraIp: data.cameraIp,
      cameraPort: data.cameraPort,
      cameraType: data.cameraType,
      username: data.username,
      password: data.password,
      workspaceId: data.workspaceId,
      code: data.code,
      remark: data.remark,
      videoServiceType: data.videoServiceType,
      videoStandard: data.videoStandard,
    };
    // editCamera(temp);
    // props.confirmEvent && props.confirmEvent(data);
    // updateValue(false);
    editCamera(temp)
      .then((res) => {
        if (res.code === 200) {
          updateValue(false);
          ElMessage({
            message: '修改成功',
            type: 'success',
          });
          getCameraItems();
        } else {
          return Promise.reject(res.msg);
        }
      })
      .catch((error) => {
        ElMessage.error(error);
      });
  };
</script>

<style scoped lang="scss">
  .pop-card {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .pop-head {
    height: 56px;

    &-name {
      margin-left: 24px;
      font-size: 16px;
      font-weight: 500;
      color: #252525;
    }
  }

  .pop-content {
    height: 566px;
  }

  :deep(.el-card__header) {
    padding: 0;
  }
  :deep(.el-card__body) {
    padding: 0;
  }
</style>