yjhtgl-web/src/views/duty/eventing/StartEventDialog.vue

<template>
  <el-dialog ref="formDialogRef" :model-value="visible" title="开始指挥" width="550px" append-to-body @close="closeDialog">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="事件等级" prop="event_level">
            <el-select v-model="form.event_level" placeholder="请选择事件等级" clearable style="width:calc(100% - 30px)">
              <el-option v-for="item in mm_event_level" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-icon @click="eventLevelInfoDialogVisible = true" size="large" style="margin-left:8px"><WarningFilled /></el-icon>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-show="false">
          <el-form-item label="伤亡情况">
            <el-row>
              <el-col :span="8">
                <el-form-item label="死亡" prop="deaths">
                  <el-input v-model="form.deaths">
                    <template #append>人</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="受伤" prop="injuries">
                  <el-input v-model="form.injuries">
                    <template #append>人</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="失联" prop="missing">
                  <el-input v-model="form.missing">
                    <template #append>人</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>

  <EventLevelInfoDialog v-model="eventLevelInfoDialogVisible" @closeDialog="closeEventLevelInfoDialog" />
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs } from 'vue';
import { startEvent } from '@/api/duty/eventing';
import EventLevelInfoDialog from './EventLevelInfoDialog.vue';

const proxy = getCurrentInstance()?.proxy;
const { mm_event_level } = toRefs<any>(proxy?.useDict('mm_event_level'));

interface Form {
  eventId: string;
  event_level: string;
  deaths: string;
  injuries: string;
  missing: string;
}
interface Props {
  modelValue: boolean;
  eventId: string;
  data: Form;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false
});

const emits = defineEmits(['update:modelValue']);
watch(
  () => props.modelValue,
  () => {
    if (props.modelValue) {
      form.value = props.data;
    }
    visible.value = props.modelValue;
  }
);
const router = useRouter();
const visible = ref(false);
const form = ref<Form>({
  eventId: '',
  event_level: '',
  deaths: '',
  injuries: '',
  missing: ''
});
const rules = reactive({
  event_level: [{ required: true, message: '事件等级不能为空', trigger: 'blur' }],
  deaths: [{ required: true, message: '死亡人数不能为空', trigger: 'blur' }],
  injuries: [{ required: true, message: '受伤人数不能为空', trigger: 'blur' }],
  missing: [{ required: true, message: '失踪人数不能为空', trigger: 'blur' }]
});
const formRef = ref();
const buttonLoading = ref(false);

// 关闭事件
const submitForm = () => {
  console.log('submitForm');
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      startEvent({ eventId: props.eventId, ...form.value }).then(() => {
        proxy?.$modal.msgSuccess('开始指挥');
        closeDialog()
      });
    }
    else {
    }
  });
};

const closeDialog = () => {
  emits('update:modelValue', false);
};

const eventLevelInfoDialogVisible = ref(false);

const closeEventLevelInfoDialog = () => {
  eventLevelInfoDialogVisible.value = false;
};
</script>

<style lang="scss" scoped></style>