rescueResourcesEdit.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <div class="app-container p-2">
  3. <!-- 新增/修改弹窗 -->
  4. <div class="common-dialog">
  5. <div class="common-dialog-content">
  6. <div class="common-dialog-title-box">
  7. <i class="common-dialog-title-icon" />
  8. <div>修改任务</div>
  9. </div>
  10. <div class="common-dialog-box">
  11. <el-form ref="demoFormRef" :model="form" label-width="100px" :rules="rules">
  12. <el-form-item label="采集类型:" prop="type">
  13. <el-select v-model="form.type" placeholder="请选择救援要素采集类型">
  14. <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
  15. </el-select>
  16. </el-form-item>
  17. <el-form-item label="排查时间范围:" prop="publish">
  18. <el-date-picker v-model="form.start_time" type="date" placeholder="选择开始日期" value-format="YYYY-MM-DD"></el-date-picker>
  19. <el-date-picker v-model="form.end_time" type="date" placeholder="选择结束日期" value-format="YYYY-MM-DD"></el-date-picker>
  20. </el-form-item>
  21. <el-form-item label="排查周期:" prop="cycle">
  22. <el-radio-group v-model="form.cycle">
  23. <el-radio value="0" size="large">每年</el-radio>
  24. <el-radio value="1" size="large">每月</el-radio>
  25. <el-radio value="2" size="large">每周</el-radio>
  26. <el-radio value="3" size="large">每天</el-radio>
  27. <el-radio value="4" size="large">一次</el-radio>
  28. </el-radio-group>
  29. </el-form-item>
  30. <el-form-item v-if="form.cycle === '0'" label="选择时间:" prop="corn_query">
  31. <el-date-picker v-model="form.corn_query" type="date" placeholder="选择日期时间" value-format="YYYY-MM-DD"> </el-date-picker>
  32. </el-form-item>
  33. <el-form-item v-if="form.cycle === '1'" label="选择时间:" prop="corn_query">
  34. <el-date-picker v-model="form.corn_query" type="date" placeholder="选择日期时间" value-format="YYYY-MM-DD"> </el-date-picker>
  35. </el-form-item>
  36. <el-form-item v-if="form.cycle === '2'" label="选择时间:" prop="corn_query">
  37. <div class="weekday-selector">
  38. <el-radio-group v-model="form.corn_query">
  39. <el-radio label="1">周一</el-radio>
  40. <el-radio label="2">周二</el-radio>
  41. <el-radio label="3">周三</el-radio>
  42. <el-radio label="4">周四</el-radio>
  43. <el-radio label="5">周五</el-radio>
  44. <el-radio label="6">周六</el-radio>
  45. <el-radio label="7">周日</el-radio>
  46. </el-radio-group>
  47. </div>
  48. </el-form-item>
  49. <el-form-item label="排查范围:" prop="inspection_range">
  50. <el-radio-group v-model="form.inspection_range">
  51. <el-radio value="0" size="large">市级</el-radio>
  52. <el-radio value="1" size="large">区县级</el-radio>
  53. <el-radio value="2" size="large">镇街级</el-radio>
  54. <el-radio value="3" size="large">村居级</el-radio>
  55. </el-radio-group>
  56. </el-form-item>
  57. </el-form>
  58. </div>
  59. <div class="common-dialog-footer" style="display: flex; justify-content: center">
  60. <el-button type="primary" @click="submitForm">确 定</el-button>
  61. <el-button @click="cancel">取 消</el-button>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. </template>
  67. <script setup lang="ts">
  68. import { workDetail, updatetask } from '@/api/inspectionWork/rescueResources';
  69. import { ref, watch } from 'vue';
  70. import { ElMessage } from 'element-plus';
  71. const demoFormRef = ref(null);
  72. const buttonLoading = ref(false);
  73. const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  74. const emit = defineEmits(['close']);
  75. const props = defineProps<{ eventId: string }>();
  76. let form = ref({
  77. id: '',
  78. type: '',
  79. start_time: '',
  80. end_time: '',
  81. cycle: '',
  82. corn_query: '',
  83. inspection_range: ''
  84. });
  85. // 巡查业务选项
  86. const typeOptions = [
  87. { value: '0', label: '庇护场所' },
  88. { value: '1', label: '救援队伍' },
  89. { value: '2', label: '救援设备' }
  90. ];
  91. const fetchDetail = async () => {
  92. const response = await workDetail(props.eventId);
  93. if (response.code === 200) {
  94. form.value = response.data;
  95. } else {
  96. ElMessage.error(response.msg);
  97. }
  98. };
  99. const rules = ref({
  100. // id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
  101. });
  102. watch(
  103. () => props.eventId,
  104. (newVal) => {
  105. if (newVal) {
  106. fetchDetail();
  107. }
  108. },
  109. { immediate: true }
  110. );
  111. const submitForm = async () => {
  112. // 假设表单已经通过验证
  113. const response = await updatetask(form.value);
  114. if (response.code === 200) {
  115. ElMessage.success('提交成功');
  116. emit('refresh'); // 提交成功后通知父组件刷新
  117. emit('refreshParent'); // 提交成功后通知子任务组件刷新
  118. cancel(); // 关闭弹窗
  119. } else {
  120. ElMessage.error(response.msg);
  121. }
  122. };
  123. const cancel = () => {
  124. emit('close');
  125. };
  126. </script>