bxztApp/packages/screen/src/views/WarningManagement/law/addDialog.vue

<template>
  <div class="detail-container">
    <el-form ref="formRef" :model="form" label-position="right" label-width="auto"
      style="max-height: 60vh; overflow-y: auto; padding-right: 50px" :rules="rules">
      <div class="form-part">
        <el-row>
          <h4 style="margin: 0 0 20px 0;">气象信息</h4>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="预警标题" prop="预警标题">
              <el-input v-model="form.headline" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="预警时间" prop="预警时间">
              <el-col :span="11">
                <el-date-picker v-model="form.onset" type="date" placeholder="开始时间" style="width: 100%" />
              </el-col>
              <el-col :span="2" class="text-center">
                <span class="text-gray-500">-</span>
              </el-col>
              <el-col :span="11">
                <el-date-picker v-model="form.expires" type="date" placeholder="过期时间" style="width: 100%" />
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="气象类型" prop="气象类型">
              <el-select v-model="form.eventType" clearable placeholder="请选择">
                <el-option v-for="(item, index) in [
                  { label: '道路结冰', value: '道路结冰' },
                  { label: '暴雪', value: '暴雪' },
                  { label: '暴雨', value: '暴雨' },
                ]" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="气象来源" prop="气象来源">
              <el-select v-model="form.weatherSource" clearable placeholder="请选择">
                <el-option v-for="(item, index) in [
                  { label: '市级', value: '1' },
                  { label: '部级', value: '2' },
                  { label: '区县', value: '3' },
                ]" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="预警等级" prop="预警等级">
              <el-select v-model="form.urgency" clearable placeholder="请选择">
                <el-option v-for="(item, index) in [
                  { label: '1级（红色预警）', value: '1' },
                  { label: '2级（橙色预警）', value: '2' },
                  { label: '3级（黄色预警）', value: '3' },
                  { label: '4级（蓝色预警）', value: '4' },
                ]" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="风险区县" prop="风险区县">
              <el-select v-model="form.areaCodes" clearable placeholder="请选择" multiple>
                <el-option v-for="(item, index) in areaList" :key="index" :label="item.qxmc" :value="item.xzdm" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { request } from "@/utils/request";
import FileUpload from '@/component/FileUpload/FileUpload.vue'
const formRef = ref(null);
defineExpose({ formRef });

const props = defineProps({
  form: {
    type: Object,
    default: () => ({}),
  },
});

const areaList = ref([])

// 获取区县列表
const getAreaList = async () => {
  try {
    const res = await request({
      url: '/snow-ops-platform/infrastructure-asset/counties',
      method: 'get',
    })
    if (res.code === '00000') {
      areaList.value = res.data
    } else {
      throw new Error(res.message)
    }
  } catch (error) {
    ElMessage.error(error.message)
    console.log(error)
  }
}

onMounted(() => {
  getAreaList()
})

const rules = computed(() => {
  return {
    // mc: [
    //   {
    //     required: true,
    //     validator: (rule, value, callback) => {
    //       if (props.form.mc) {
    //         callback();
    //       } else {
    //         callback(new Error("请输入服务站名称"));
    //       }
    //     },
    //     trigger: "blur",
    //   },
    // ],
  };
});
</script>

<style scoped>
.form-part {
  padding: 20px;
}

.text-center {
  text-align: center;
}
</style>