sl-sfy-safety/src/views/cameras/preview/components/AddPresetModal/AddPresetModal.vue

<template>
  <ElDialog title="添加预置位" :model-value="true" @close="emits('close')" width="500px">
    <template #footer>
      <el-button @click="emits('close')">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
    </template>
    <ElInput type="textarea" autosize v-model="presetName" />
  </ElDialog>
</template>
<script lang="ts" setup>
  import { createPresetApi } from '@/api/camera/camera-preview';
  import { ElDialog, ElInput, ElMessage } from 'element-plus';
  import { ref } from 'vue';
  import usePresetListStore from '../../store/usePresetListStore';
  import useCameraDetailStore from '../../store/useCameraDetailStore';
  const presetName = ref('');
  const loading = ref(false);
  const emits = defineEmits<{ (e: 'close'): unknown; (e: 'ok'): unknown }>();
  const presetStore = usePresetListStore();

  const cameraDetailStore = useCameraDetailStore();

  const handleSubmit = () => {
    if (presetStore.isPresetNameExist(presetName.value)) {
      ElMessage.error('预置位名称已存在');
      return;
    }
    loading.value = true;
    createPresetApi({ presetName: presetName.value, cameraId: cameraDetailStore.cameraId })
      .then((val) => {
        if (val) {
          ElMessage.success('预置位创建成功');
          presetStore.currentPresetToken = val;
          emits('ok');
        } else {
          ElMessage.error('创建失败：已有预置位数量可能超限，请删除后再添加');
        }
      })
      .finally(() => {
        loading.value = false;
      });
  };
</script>
<style scoped></style>