yjhtgl-web/src/views/inspectionWork/patrolTaskEdit.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="business">
              <el-select v-model="form.business" placeholder="请选择巡查业务">
                <el-option v-for="item in businessOptions" :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="选择日期时间" value-format="YYYY-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="选择日期时间" value-format="YYYY-MM-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="inspection_range">
              <el-radio-group v-model="form.inspection_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 { workDetail, updatetask } from '@/api/inspectionWork/inspector';
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
const demoFormRef = ref(null);
const buttonLoading = ref(false);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(['close']);
const props = defineProps<{ eventId: string }>();
let form = ref({
  id: '',
  business: '',
  start_time: '',
  end_time: '',
  cycle: '',
  corn_query: '',
  inspection_range: ''
});
// 巡查业务选项
const businessOptions = [
  { value: '0', label: '城市隐患巡查' },
  { value: '1', label: '森林防火巡查' },
  { value: '2', label: '重点危化企业巡查' },
  { value: '3', label: '重点水库水位巡查' }
];
const fetchDetail = async () => {
  const response = await workDetail(props.eventId);
  if (response.code === 200) {
    form.value = response.data;
  } else {
    ElMessage.error(response.msg);
  }
};
watch(
  () => props.eventId,
  (newVal) => {
    if (newVal) {
      fetchDetail();
    }
  },
  { immediate: true }
);
const submitForm = async () => {
  // 假设表单已经通过验证
  const response = await updatetask(form.value);
  if (response.code === 200) {
    ElMessage.success('提交成功');
    emit('refresh'); // 提交成功后通知父组件刷新
    emit('refreshParent'); // 提交成功后通知子任务组件刷新
    cancel(); // 关闭弹窗
  } else {
    ElMessage.error(response.msg);
  }
};

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