yjhtgl-web/src/views/inspectionWork/rescueResourcesAdd.vue

<template>
  <div class="app-container p-2">
    <!-- 新增/修改弹窗 -->
    <div class="common-dialog">
      <div class="common-dialog-content">
        <div class="common-dialog-title-box">
          <i class="common-dialog-title-icon" />
          <div>新建任务</div>
        </div>
        <div class="common-dialog-box">
          <el-form ref="demoFormRef" :model="form" label-width="100px" :rules="rules">
            <el-form-item label="采集类型：" prop="type">
              <el-select v-model="form.type" placeholder="请选择救援要素采集类型">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排查时间范围：" prop="publish">
              <el-date-picker v-model="form.start_time" type="date" placeholder="选择开始日期" value-format="YYYY-MM-DD"></el-date-picker>
              <el-date-picker v-model="form.end_time" type="date" placeholder="选择结束日期" value-format="YYYY-MM-DD"></el-date-picker>
            </el-form-item>
            <el-form-item label="排查周期：" prop="cycle">
              <el-radio-group v-model="form.cycle">
                <el-radio value="0" size="large">每年</el-radio>
                <el-radio value="1" size="large">每月</el-radio>
                <el-radio value="2" size="large">每周</el-radio>
                <el-radio value="3" size="large">每天</el-radio>
                <el-radio value="4" size="large">一次</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.cycle === '0'" label="选择时间：" prop="corn_query">
              <el-date-picker v-model="form.corn_query" type="date" placeholder="选择日期时间" format="MM-DD" value-format="MM-DD"> </el-date-picker>
            </el-form-item>
            <el-form-item v-if="form.cycle === '1'" label="选择时间：" prop="corn_query">
              <el-date-picker v-model="form.corn_query" type="date" placeholder="选择日期时间" format="DD" value-format="DD"> </el-date-picker>
            </el-form-item>
            <el-form-item v-if="form.cycle === '2'" label="选择时间：" prop="corn_query">
              <div class="weekday-selector">
                <el-radio-group v-model="form.corn_query">
                  <el-radio label="1">周一</el-radio>
                  <el-radio label="2">周二</el-radio>
                  <el-radio label="3">周三</el-radio>
                  <el-radio label="4">周四</el-radio>
                  <el-radio label="5">周五</el-radio>
                  <el-radio label="6">周六</el-radio>
                  <el-radio label="7">周日</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
            <el-form-item label="排查范围：" prop="task_range">
              <el-radio-group v-model="form.task_range">
                <el-radio value="0" size="large">市级</el-radio>
                <el-radio value="1" size="large">区县级</el-radio>
                <el-radio value="2" size="large">镇街级</el-radio>
                <el-radio value="3" size="large">村居级</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div class="common-dialog-footer" style="display: flex; justify-content: center">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { updatetask, addtask } from '@/api/inspectionWork/rescueResources';
import { ref } from 'vue';
const demoFormRef = ref(null);
const buttonLoading = ref(false);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emits = defineEmits(['close']);
let form = ref({
  id: '',
  type: '',
  start_time: '',
  end_time: '',
  cycle: '',
  corn_query: '',
  task_range: ''
});
// 巡查业务选项
const typeOptions = [
  { value: '0', label: '庇护场所' },
  { value: '1', label: '救援队伍' },
  { value: '2', label: '救援设备' }
];
// 表单验证规则
const rules = ref({
  type: [{ required: true, message: '请选择救援要素采集类型', trigger: 'blur' }],
  start_time: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
  end_time: [{ required: true, message: '请选择结束日期', trigger: 'change' }],
  cycle: [{ required: true, message: '请选择巡查周期', trigger: 'change' }],
  task_range: [{ required: true, message: '请选择巡查范围', trigger: 'change' }],
  corn_query: [],
  corn_query_month: [],
  corn_query_day: [],
  corn_query_weekday: [] // 添加用于每周的选择的验证
});
// 提交表单
const submitForm = () => {
  demoFormRef.value?.validate(async (valid) => {
    if (valid) {
      try {
        buttonLoading.value = true;
        form.value.task_number ? await updatetask(form.value) : await addtask(form.value); //根据 form.value.planId 是否存在，调用 updateReport 或 addReport 方法
        proxy?.$modal.msgSuccess(form.value.task_number ? '修改成功' : '新增成功');
        emits('refresh'); // 提交成功后通知父组件刷新
        emits('close'); // 关闭弹窗
      } finally {
        buttonLoading.value = false;
      }
    }
  });
};
// 重置表单数据和表单验证状态
const resetForm = () => {
  form.value = {
    type: '',
    start_time: '',
    end_time: '',
    cycle: '',
    corn_query: '',
    task_range: ''
  };
  demoFormRef.value?.resetFields(); // 重置表单的验证状态
};

const cancel = () => {
  resetForm();
  emits('close');
};
</script>