sl-sfy-safety/src/views/emergency/emergency-procedure/components/AssociateLossReport.vue

<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="500"
      align-center
      @close="handleCancel"
      class="associate-loss-report-dialog"
    >
      <template #header>
        <div class="dialog-header">
          <span>关联损失上报记录</span>
        </div>
      </template>
      <el-select v-model="taskId" clearable placeholder="请选择需关联的损失上报记录" style="width: 400px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { ElDialog, ElSelect, ElOption, ElButton } from 'element-plus';
  import { QueryAllDisasterHandleTaskRes, getDisasterHandleTaskList } from '@/api/emergency-procedure';

  const emits = defineEmits(['submit', 'cancel']);

  const dialogVisible = ref(true);

  const taskId = ref<number>();
  const options = ref<Array<{ label: string; value: number }>>([]);

  const handleSubmit = () => {
    emits('submit', taskId.value);
  };

  const handleCancel = () => {
    emits('cancel');
  };

  onMounted(async () => {
    const response = await getDisasterHandleTaskList();
    options.value = response.map((item: QueryAllDisasterHandleTaskRes) => ({
      label: item.taskName,
      value: item.id,
    }));
  });
</script>

<style scoped lang="scss">
  :deep(.associate-loss-report-dialog) {
    min-height: 200px;
    padding: 20px 30px;

    .el-dialog__header {
      padding-right: 0;
      padding-bottom: 40px;
    }
    .dialog-header {
      font-size: 20px;
      font-weight: bold;
      display: flex;
      justify-content: center;
    }

    .el-dialog__headerbtn {
      font-size: 30px;
      width: 60px;
      height: 60px;
      top: 8px;
      right: 8px;
    }

    .el-dialog__body {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .el-dialog__footer {
      padding-top: 40px;
    }
  }
</style>