任务登记样式优化

src/views/emergencyCommandMap/RightSection/RenWuDengJi.vue

@@ -1,13 +1,26 @@
 <template>
-  // type分别为sm、md、lg
-  <Dialog custom-show type="sm" title="任务登记" @confirm="confirmRegister" @close="closeDialog">
+  <Dialog custom-show type="sm" title="任务下达" height="500px" @confirm="confirmRegister" @close="closeDialog">
     <div class="dialog-content">
       <div class="dialog-body">
         <el-form ref="taskFormRef" :model="newTask">
-          <el-form-item label="任务内容" label-width="200px">
+          <el-form-item label="任务内容" label-width="60px">
             <el-input v-model="newTask.task_description" class="custom-input2" clearable placeholder="请输入相关任务描述" />
           </el-form-item>
-          <el-form-item label="执行单位" label-width="200px">
+          <el-form-item label="任务类型" label-width="60px">
+            <el-select
+              v-model="newTask.task_type"
+              placeholder="选择任务类型"
+              class="custom-select"
+              size="large"
+              popper-class="custom-select-popper"
+              :teleported="false"
+              clearable
+              filterable
+            >
+              <el-option v-for="type in taskTypes" :key="type.id" :label="type.name" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="执行单位" label-width="60px">
             <el-select
               v-model="newTask.unit_name"
               placeholder="全部"
@@ -16,13 +29,24 @@
               popper-class="custom-select-popper"
               :teleported="false"
               clearable
+              filterable
+              @input="fetchFilteredUnits"
             >
-              <el-option v-for="unit in units" :key="unit.id" :label="unit.unit_name" :value="unit.unit_name" />
+              <el-option v-for="unit in filteredUnits" :key="unit.id" :label="unit.unit_name" :value="unit.unit_name" />
             </el-select>
           </el-form-item>
-          <el-form-item label="登记人" label-width="200px">
+          <el-form-item label="执行人" label-width="60px">
             <el-input v-model="newTask.registrar" class="custom-input2" type="text" readonly />
           </el-form-item>
+          <el-form-item label="登记人" label-width="60px">
+            <el-input v-model="newTask.registrar" class="custom-input2" type="text" readonly />
+          </el-form-item>
+          <el-form-item label="联系电话" label-width="60px">
+            <el-input v-model="newTask.contact_phone" class="custom-input2" placeholder="发布人的联系电话" />
+          </el-form-item>
+          <el-form-item label="完成时限" label-width="60px">
+            <el-date-picker v-model="newTask.complete_time" type="date" class="common-date-picker" popper-class="common-date-popper" placeholder="选择完成时间" style="width: 100%" />
+          </el-form-item>
         </el-form>
       </div>
     </div>
@@ -33,11 +57,14 @@
 import { ref, reactive, onMounted } from 'vue';
 import { addTask, getUnits, getUser } from '@/api/emergencyCommandMap/JointDuty.ts';
 
-const showRegisterDialog = ref(true);
+const taskTypes = ref([{ name: '事件处置' }, { name: '防范措施' }, { name: '险情处理' }, { name: '督办任务' }]);
 const newTask = reactive({
   task_description: '',
+  task_type: '',
   unit_name: '',
-  registrar: ''
+  registrar: '',
+  contact_phone: '',
+  complete_time: ''
 });
 const units = ref([]);
 
@@ -52,6 +79,7 @@ const fetchUser = async () => {
     if (response.code === 200) {
       // 假设返回的用户信息中包含 username 字段
       newTask.registrar = response.data.user.userName;
+      newTask.contact_phone = response.data.user.contactPhone;
     } else {
       console.error('获取用户信息失败:', response.msg);
     }
@@ -101,65 +129,13 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.dialog-wrap {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 2000;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .overlay {
-    background-color: rgba(0, 0, 0, 0.5);
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    cursor: pointer;
-  }
-  .dialog {
-    width: 5000px;
-    height: 2000px;
-    margin: 0 auto;
-    background-color: #fff;
-    border-radius: 20px;
-  }
-}
-.dialog {
-  padding: 0 50px;
-  .dialog-header {
-    width: 100%;
-    height: 150px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .icon-close {
-      cursor: pointer;
+.dialog-content {
+  :deep(.el-form) {
+    .el-form-item__label {
+      color: #fff !important;
+      font-weight: bold !important;
+      margin-right: 5px !important;
     }
   }
 }
-.footer {
-  height: 64px;
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 30px;
-  .pagination-container {
-    height: 64px;
-    margin: 0;
-  }
-  height: 30px;
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 30px;
-}
-.flex {
-  display: flex;
-  align-items: flex-start;
-}
 </style>

src/views/emergencyCommandMap/RightSection/index.vue

@@ -23,7 +23,7 @@
         <div class="icon">
           <div class="icon4"></div>
         </div>
-        <div class="task-text gradient-text">任务登记</div>
+        <div class="task-text gradient-text">任务下达</div>
       </div>
       <div class="task-item">
         <div class="icon">