将模式时长换成时间组件下拉

flossom-modules/flossom-mini-program/src/main/java/com/flossom/miniProgram/service/impl/WxInstrumentServiceImpl.java

@@ -457,7 +457,9 @@ public class WxInstrumentServiceImpl implements IWxInstrumentService {
             BeanUtils.copyProperties(wxMode, wxModeRet);
             if (wxMode.getInstrumentType() == 2) {
                 // IOT仪器才可以设置模式时长
-                wxModeRet.setModeTime(LocalTime.of(0, wxMode.getModeTime()));
+                if(wxMode.getModeTime() != null) {
+                    wxModeRet.setModeTime(LocalTime.ofSecondOfDay(wxMode.getModeTime()));
+                }
             }
             Boolean isLock = false;
             if (wxModeTagList != null && wxModeTagList.size() > 0) {

flossom-ui/src/views/system/mode/index.vue

@@ -38,7 +38,11 @@
         </template>
       </el-table-column>
       <el-table-column label="模式名称" align="center" prop="modeName" />
-      <el-table-column label="模式时长(分钟)" align="center" prop="modeTime" width="180" />
+      <el-table-column label="模式时长" align="center" prop="modeTime" width="180" >
+        <template slot-scope="scope">
+          {{ convertToHMS(scope.row.modeTime) }}
+        </template>
+      </el-table-column>
       <el-table-column label="模式封面图片" align="center" prop="modeBanner" >
         <template slot-scope="scope">
           <el-image :src="scope.row.modeBanner" style="width: 60px;height: 80px" :preview-src-list="[scope.row.modeBanner]">
@@ -215,7 +219,14 @@
           <el-input v-model="form.modeDesc" placeholder="请输入模式描述" maxlength="10"/>
         </el-form-item>
         <el-form-item label="模式时长" prop="modeTime" v-if="form.instrumentType == 2">
-          <el-input type="number" v-model="form.modeTime" placeholder="请输入模式时间" maxlength="5" oninput ="value=value.replace(/[^\d]/g,'')"/>
+          <el-time-picker
+            v-model="form.modeTimeStr"
+            value-format="HH:mm:ss"
+            placeholder="请选择模式时长"
+            default-value="00:00:00"
+            @input="pickedTimeComponentChange"
+          >
+          </el-time-picker>
         </el-form-item>
         <el-form-item label="模式封面" prop="modeBanner">
           <el-upload
@@ -733,7 +744,7 @@ export default {
         modeVideo: [
           { required: true, message: "模式视频不能为空", trigger: "blur" }
         ],
-        modeTime: [
+        modeTimeStr: [
           { required: true, message: "模式时长不能为空", trigger: "blur" }
         ],
         stepOneVideo: [
@@ -814,7 +825,8 @@ export default {
         modeType: null,
         modeClass: null,
         isCabinMode: null,
-        modeTime: 0,
+        modeTime: null,
+        modeTimeStr: '00:00:00',
         preparationVideo: null,
         beganVideo: null,
         pauseVideo: null,
@@ -929,6 +941,12 @@ export default {
             url: this.form.stepThreeVideo
           })
         }
+        if(this.form.modeTime == null||this.form.modeTime == 0) {
+          this.form.modeTimeStr = '00:00:00';
+          this.form.modeTime = 0;
+        } else {
+          this.form.modeTimeStr = this.convertToHMS(this.form.modeTime);
+        }
       });
     },
     handleFileInfo(url) {
@@ -1033,13 +1051,6 @@ export default {
         this.$message.error("模式功效不能为空");
         return;
       }
-      if (this.form.modeTime) {
-        const regex = /[^0-9]/g;
-        if (regex.test(this.form.modeTime)) {
-          this.$modal.msgError("时长仅支持输入正整数");
-          return;
-        }
-      }
       // 使用技术
       if(this.form.technologyArrayMode!=null &&this.form.technologyArrayMode.length > 0) {
         this.form.technologyInfo = this.form.technologyArrayMode.join(",");
@@ -1419,7 +1430,35 @@ export default {
         this.combineData = this.combineData.filter(x => x.id != row.id);
       }
     },
-  }
+    // 处理时间组件
+    pickedTimeComponentChange() {
+      console.log(this.form.modeTimeStr)
+      if(this.form.modeTimeStr == null) {
+        this.form.modeTimeStr = '00:00:00'
+        this.form.modeTime = 0;
+      } else {
+        this.form.modeTime = this.convertToSeconds(this.form.modeTimeStr);
+        this.$forceUpdate();
+      }
+    },
+    convertToSeconds(timeStr) {
+      let hms = timeStr.split(':'); // split it at the colons
+      return (+hms[0]) * 60 * 60 + (+hms[1]) * 60 + (+hms[2]);
+    },
+    convertToHMS(seconds) {
+      var hours = Math.floor(seconds / 3600);
+      seconds %= 3600;
+      var minutes = Math.floor(seconds / 60);
+      var seconds = seconds % 60;
+      // Pad the time values if they are less than 10
+      hours = hours < 10 ? '0' + hours : hours;
+      minutes = minutes < 10 ? '0' + minutes : minutes;
+      seconds = seconds < 10 ? '0' + seconds : seconds;
+      return hours + ':' + minutes + ':' + seconds;
+    }
+
+
+}
 };
 </script>