工单管理--新增工单优化

刘淇
1 parent 5822009a
Showing 1 changed file with 96 additions and 89 deletions
pages-sub/problem/work-order-manage/add-order.vue
@@ -31,7 +31,7 @@
             prop="roadName"
             border-bottom
             required
-            @click="workOrderForm.workLocation ? (showRoadName = true, hideKeyboard()) : uni.showToast({title: '请先选择工单位置', icon: 'none'})"
+            @click="handleActionSheetOpen('roadName'); hideKeyboard()"
         >
           <up-input
               v-model="workOrderForm.roadName"
@@ -52,7 +52,7 @@
             prop="orderName"
             border-bottom
             required
-            @click="showOrderName = true; hideKeyboard()"
+            @click="handleActionSheetOpen('orderName'); hideKeyboard()"
         >
           <up-input
               v-model="workOrderForm.orderName"
@@ -72,7 +72,7 @@
             prop="pressingType"
             border-bottom
             required
-            @click="showPressingType = true; hideKeyboard()"
+            @click="handleActionSheetOpen('pressingType'); hideKeyboard()"
         >
           <up-input
               v-model="workOrderForm.pressingTypeName"
@@ -86,7 +86,6 @@
           </template>
         </up-form-item>
-
         <!-- 4. 情况描述（文本域） -->
         <up-form-item
             label="情况描述"
@@ -115,8 +114,6 @@
           ></up-upload>
         </up-form-item>
-
-
         <!-- 完成时间 -->
         <up-form-item
             label="完成时间"
@@ -128,15 +125,11 @@
               border="none"
               readonly
               placeholder="点击选择时间"
-          >
-
-          </up-input>
+          ></up-input>
           <template #right>
             <up-icon name="arrow-right" size="16"></up-icon>
           </template>
         </up-form-item>
-
-
       </up-form>
     </view>
@@ -149,44 +142,24 @@
       ></up-button>
     </view>
-    <!-- 道路名称下拉弹窗 -->
+    <!-- 合并后的通用下拉弹窗 -->
     <up-action-sheet
-        :show="showRoadName"
-        :actions="roadNameList"
-        title="请选择道路名称"
-        @close="showRoadName = false"
-        @select="handleRoadNameSelect"
+        :show="showActionSheet"
+        :actions="currentActionSheetData.list"
+        :title="currentActionSheetData.title"
+        @close="handleActionSheetClose"
+        @select="handleActionSheetSelect"
     ></up-action-sheet>
-    <!-- 工单名称下拉弹窗 -->
-    <up-action-sheet
-        :show="showOrderName"
-        :actions="orderNameList"
-        title="请选择工单名称"
-        @close="showOrderName = false"
-        @select="handleOrderNameSelect"
-    ></up-action-sheet>
-
-    <!-- 紧急程度下拉弹窗 -->
-    <up-action-sheet
-        :show="showPressingType"
-        :actions="pressingTypeList"
-        title="请选择紧急程度"
-        @close="showPressingType = false"
-        @select="handlePressingTypeSelect"
-    ></up-action-sheet>
     <!-- 完成时间选择器 -->
     <up-datetime-picker
         :show="show"
         v-model="finishTime"
         mode="datetime"
         :min-date="new Date()"
-
         @cancel="show = false"
         @confirm="finishTimeConfirm"
     ></up-datetime-picker>
-
-
   </view>
 </template>
@@ -208,17 +181,21 @@ export default {
     return {
       // 问题照片列表
       problemImgsList: [],
-      // 弹窗显隐控制
-      showRoadName: false,
-      showOrderName: false,
-      showPressingType: false,
+      // 通用弹窗控制
+      showActionSheet: false,
+      // 当前弹窗配置（类型 + 数据 + 标题）
+      currentActionSheetData: {
+        type: '', // roadName / orderName / pressingType
+        list: [], // 对应类型的选项列表
+        title: '' // 弹窗标题
+      },
+      // 完成时间选择器控制
       show: false,
-      showBirthday: false, // 生日弹窗控制
+      finishTime: Date.now(),
       // 下拉列表数据
       roadNameList: [],
       orderNameList: [],
       pressingTypeList: [],
-      finishTime:Date.now(),
       // 工单表单数据
       workOrderForm: {
         roadId: 0,                     // 道路ID
@@ -247,9 +224,6 @@ export default {
         pressingType: [
           {type: 'number', required: true, message: '请选择紧急程度', trigger: ['change']}
         ],
-        birthday: [ // 新增：生日校验规则
-          {type: 'string', required: true, message: '请选择生日', trigger: ['change']}
-        ],
         problemDesc: [
           {type: 'string', required: true, message: '请输入情况描述', trigger: ['change', 'blur']},
           {type: 'string', min: 3, max: 200, message: '情况描述需3-200字', trigger: ['change', 'blur']}
@@ -290,6 +264,77 @@ export default {
   methods: {
     /**
+     * 打开通用下拉弹窗
+     * @param type 弹窗类型：roadName / orderName / pressingType
+     */
+    handleActionSheetOpen(type) {
+      // 道路名称需先校验工单位置是否选择
+      if (type === 'roadName' && !this.workOrderForm.workLocation) {
+        uni.showToast({title: '请先选择工单位置', icon: 'none'})
+        return
+      }
+
+      // 配置当前弹窗参数
+      const configMap = {
+        roadName: {
+          title: '请选择道路名称',
+          list: this.roadNameList
+        },
+        orderName: {
+          title: '请选择工单名称',
+          list: this.orderNameList
+        },
+        pressingType: {
+          title: '请选择紧急程度',
+          list: this.pressingTypeList
+        }
+      }
+
+      this.currentActionSheetData = {
+        type,
+        title: configMap[type].title,
+        list: configMap[type].list
+      }
+      this.showActionSheet = true
+    },
+
+    /**
+     * 关闭通用下拉弹窗
+     */
+    handleActionSheetClose() {
+      this.showActionSheet = false
+      // 重置当前弹窗配置（可选，防止数据残留）
+      this.currentActionSheetData = { type: '', list: [], title: '' }
+    },
+
+    /**
+     * 通用下拉弹窗选择事件
+     * @param e 选择的项
+     */
+    handleActionSheetSelect(e) {
+      const { type } = this.currentActionSheetData
+      // 根据类型处理不同的选择逻辑
+      switch (type) {
+        case 'roadName':
+          this.workOrderForm.roadName = e.name
+          this.workOrderForm.roadId = e.code
+          this.$refs.workOrderFormRef.validateField('roadName')
+          break
+        case 'orderName':
+          this.workOrderForm.orderName = e.name
+          this.$refs.workOrderFormRef.validateField('orderName')
+          break
+        case 'pressingType':
+          this.workOrderForm.pressingType = Number(e.value)
+          this.workOrderForm.pressingTypeName = e.name
+          this.$refs.workOrderFormRef.validateField('pressingType')
+          break
+      }
+      // 关闭弹窗
+      this.showActionSheet = false
+    },
+
+    /**
      * 返回上一页
      */
     navigateBack() {
@@ -430,47 +475,14 @@ export default {
     },
     /**
-     * 选择道路名称
-     */
-    handleRoadNameSelect(e) {
-      console.log('选择道路名称：', e)
-      this.workOrderForm.roadName = e.name
-      this.workOrderForm.roadId = e.code
-      this.showRoadName = false
-      this.$refs.workOrderFormRef.validateField('roadName')
-    },
-
-    /**
-     * 选择工单名称
-     */
-    handleOrderNameSelect(e) {
-      console.log('选择工单名称：', e)
-      this.workOrderForm.orderName = e.name
-      this.showOrderName = false
-      this.$refs.workOrderFormRef.validateField('orderName')
-    },
-
-    /**
-     * 选择紧急程度
-     */
-    handlePressingTypeSelect(e) {
-      console.log('选择紧急程度：', e)
-      this.workOrderForm.pressingType = Number(e.value)
-      this.workOrderForm.pressingTypeName = e.name
-      this.showPressingType = false
-      this.$refs.workOrderFormRef.validateField('pressingType')
-    },
-
-    /**
      * 完成时间确认
      */
     finishTimeConfirm(e) {
       console.log('选择的完成时间：', e)
-      this.workOrderForm.finishTime =  timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
-      this.show = false;
+      this.workOrderForm.finishTime = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
+      this.show = false
     },
-
     /**
      * 隐藏键盘
      */
@@ -504,12 +516,11 @@ export default {
           lonLatAddress: this.workOrderForm.workLocation,
           pressingType: this.workOrderForm.pressingType,
           orderName: this.workOrderForm.orderName,
-          birthday: this.workOrderForm.birthday, // 新增：生日字段提交
-          finishTime: this.workOrderForm.finishTime, // 新增：完成时间提交
+          finishTime: this.workOrderForm.finishTime,
           sourceId: 1,
           sourceName: '园林',
           thirdWorkNo: '',
-          busiLine:'yl'
+          busiLine: 'yl'
         }
         // 显示加载中
@@ -564,9 +575,5 @@ export default {
   background: #fff;
 }
-// 底部按钮样式
-.fixed-bottom-btn-wrap {
-  padding: 20rpx;
-  background: #fff;
-}
+
 </style>
 \ No newline at end of file