RenWuGengXin.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <template>
  2. <Dialog v-model="visible" type="sm" title="任务反馈" class="box1" height="650px" hide-footer>
  3. <div class="dialog-content">
  4. <div class="dialog-body">
  5. <el-form ref="taskForm" :model="newTask">
  6. <el-row :gutter="20">
  7. <el-col :span="24">
  8. <el-form-item label="任务描述:">
  9. <div class="display-field">{{ newTask.task_description }}</div>
  10. </el-form-item>
  11. </el-col>
  12. <el-col :span="24">
  13. <el-form-item label="任务类型:">
  14. <div class="display-field">{{ get_task_type_text(newTask.task_type) }}</div>
  15. </el-form-item>
  16. </el-col>
  17. <el-col :span="24">
  18. <el-form-item label="执行人:">
  19. <div class="display-field">{{ newTask.registrar }}</div>
  20. </el-form-item>
  21. </el-col>
  22. <el-col :span="24">
  23. <el-form-item label="执行单位:">
  24. <div class="display-field">{{ newTask.unit_name }}</div>
  25. </el-form-item>
  26. </el-col>
  27. <el-col :span="24">
  28. <el-form-item label="预估完成时间:">
  29. <div class="display-field">{{ newTask.complete_time }}</div>
  30. </el-form-item>
  31. </el-col>
  32. <el-col :span="24">
  33. <el-form-item label="图片:">
  34. <div class="display-field">{{ newTask.complete_time }}</div>
  35. </el-form-item>
  36. </el-col>
  37. <el-col :span="24">
  38. <el-form-item label="文件:">
  39. <div class="display-field">{{ newTask.complete_time }}</div>
  40. </el-form-item>
  41. </el-col>
  42. <el-col :span="24">
  43. <el-form-item label="反馈人:">
  44. <div class="display-field">{{ newTask.registrar }}</div>
  45. </el-form-item>
  46. </el-col>
  47. <el-col :span="24">
  48. <el-form-item label="反馈内容:">
  49. <el-input v-model="newTask.feedback_content" class="custom-input2" clearable placeholder="请输入反馈内容"></el-input>
  50. </el-form-item>
  51. </el-col>
  52. <el-col :span="24">
  53. <el-form-item label="完成进度:">
  54. <el-select
  55. v-model="newTask.processing_status"
  56. class="custom-select"
  57. size="large"
  58. :teleported="false"
  59. popper-class="custom-select-popper"
  60. >
  61. <el-option v-for="unit in units" :key="unit" :label="unit" :value="unit"></el-option>
  62. </el-select>
  63. </el-form-item>
  64. </el-col>
  65. <el-col :span="24">
  66. <el-form-item label="上传图片:">
  67. <!-- <el-upload-->
  68. <!-- v-model="newTask.attachments"-->
  69. <!-- action="/uploadAttachments"-->
  70. <!-- list-type="picture-card"-->
  71. <!-- :teleported="false"-->
  72. <!-- auto-upload="true"-->
  73. <!-- limit="9"-->
  74. <!-- :teleported="false"-->
  75. <!-- popper-class="custom-uploadper"-->
  76. <!-- class="custom-upload"-->
  77. <!-- :teleported="false"-->
  78. <!-- clearable-->
  79. <!-- filterable-->
  80. <!-- >-->
  81. <!-- <el-upload-list-item v-for="file in newTask.attachments" :key="file.name">-->
  82. <!-- <el-icon name="el-icon-upload" class="upload-icon"></el-icon>-->
  83. <!-- <el-button type="danger" size="mini" @click="removeAttachment(file)">移除</el-button>-->
  84. <!-- </el-upload-list-item>-->
  85. <!-- </el-upload>-->
  86. </el-form-item>
  87. </el-col>
  88. </el-row>
  89. </el-form>
  90. </div>
  91. <div class="footer">
  92. <div class="flex">
  93. <div class="common-btn-primary" :disabled="!isFormValid" @click="confirmRegister">确定</div>
  94. <div class="common-btn" @click="closeDialog">取消</div>
  95. </div>
  96. </div>
  97. </div>
  98. </Dialog>
  99. </template>
  100. <script lang="ts" setup>
  101. import { ref, reactive, defineEmits, computed, watch } from 'vue';
  102. import { updateTaskRegistration } from '@/api/emergencyCommandMap/JointDuty.ts';
  103. const props = defineProps({
  104. modelValue: { type: Boolean, required: true },
  105. task: { type: Object, default: () => ({ task_id: '', task_description: '', unit_name: '', registrar: '', processing_status: '' }) },
  106. eventId: { type: String, required: true }
  107. });
  108. const emit = defineEmits(['update:modelValue', 'update-success']);
  109. const newTask = reactive({ ...props.task });
  110. const units = ref(['待处理', '已完成']);
  111. const opt_task_type = [
  112. { text: "全部", value: "" },
  113. { text: "事件处置", value: "0" },
  114. { text: "防范措施", value: "1" },
  115. { text: "险情处理", value: "2" },
  116. { text: "督办任务", value: "3" }
  117. ];
  118. const get_task_type_text = (val) => {
  119. return opt_task_type.find(item => item.value == val).text
  120. }
  121. const visible = computed({
  122. get: () => props.modelValue,
  123. set: (val) => {
  124. emit('update:modelValue', val);
  125. if (!val) resetForm();
  126. }
  127. });
  128. const isFormValid = computed(() => newTask.registrar !== '');
  129. const resetForm = () => {
  130. newTask.task_description = '';
  131. newTask.unit_name = '';
  132. newTask.registrar = '';
  133. newTask.processing_status = '';
  134. };
  135. // 任务进度更新
  136. const confirmRegister = async () => {
  137. console.log('任务进度更新:', newTask);
  138. try {
  139. const response = await updateTaskRegistration({
  140. task_id: newTask.task_id,
  141. processing_status: newTask.processing_status,
  142. event_code: props.eventId
  143. });
  144. if (response.code === 200) {
  145. emit('update-success', newTask);
  146. closeDialog();
  147. } else {
  148. console.error('任务进度更新失败:', response.msg);
  149. }
  150. } catch (error) {
  151. console.error('请求任务进度更新失败:', error);
  152. }
  153. };
  154. const closeDialog = () => {
  155. visible.value = false;
  156. };
  157. watch(
  158. () => props.task,
  159. (newTaskData) => {
  160. Object.assign(newTask, newTaskData);
  161. },
  162. { immediate: true }
  163. );
  164. </script>
  165. <style lang="scss" scoped>
  166. .custom-select {
  167. //width: 500px !important; // 使用 !important 强制覆盖默认样式
  168. }
  169. .dialog-body {
  170. padding: 20px;
  171. :deep(.el-form-item__label) {
  172. font-size: 16px !important;
  173. color: #ffffff !important;
  174. }
  175. }
  176. /* 新增样式,用于显示字段 */
  177. .display-field {
  178. padding: 0 12px;
  179. //border: 1px solid #dcdfe6; /* 确保边框颜色与输入框一致 */
  180. border-radius: 4px;
  181. //background-color: #f5f7fa;
  182. // 背景颜色透明
  183. background-color: transparent;
  184. min-height: 32px;
  185. line-height: 32px;
  186. font-size: 16px; /* 确保字体大小与输入框一致 */
  187. color: #ffffff; /* 确保字体颜色与输入框一致 */
  188. //字体加粗
  189. //font-weight: bold;
  190. }
  191. .footer {
  192. display: flex;
  193. justify-content: flex-end;
  194. margin-top: 20px;
  195. .flex {
  196. display: flex;
  197. align-items: center;
  198. .common-btn-primary,
  199. .common-btn {
  200. margin-left: 10px;
  201. cursor: pointer;
  202. }
  203. }
  204. }
  205. </style>