物资类型新增，编辑中时间设置相关修改

src/views/mes/material/typeofmaterial/index.vue

@@ -79,17 +79,17 @@
       </el-table-column>
       <el-table-column label="出借时长" align="center" prop="loanDuration">
         <template slot-scope="scope">
-          <span>{{ scope.row.loanDuration }}秒</span>
+          <span>{{ formattedTime(scope.row.loanDuration) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="提醒时间" align="center" prop="reminderTime">
         <template slot-scope="scope">
-          <span>{{ scope.row.reminderTime }}秒</span>
+          <span>{{ formattedTime(scope.row.reminderTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="报警时间" align="center" prop="timeoutAlarm">
         <template slot-scope="scope">
-          <span>{{ scope.row.timeoutAlarm }}秒</span>
+          <span>{{ formattedTime(scope.row.timeoutAlarm) }}</span>
         </template>
       </el-table-column>
       <el-table-column
@@ -171,7 +171,6 @@
             </el-form-item>
           </el-col>
         </el-row>
-
         <el-form-item label="物资类型名称" prop="materialsTypeName">
           <el-input
             v-model="form.materialsTypeName"
@@ -179,48 +178,75 @@
             style="width: 318px"
           />
         </el-form-item>
-        <el-row>
-          <el-col :span="17">
-            <el-form-item label="借用时长" prop="loanDuration">
-              <el-input
-                style="width: 318px"
-                v-model="form.loanDuration"
-                placeholder="请输入借用时长（秒）"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <b style="line-height: 35px">1小时=3600秒</b>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="17">
-            <el-form-item label="提前几秒提醒" prop="reminderTime">
-              <el-input
-                style="width: 318px"
-                v-model="form.reminderTime"
-                placeholder="请输入提醒时间（秒）"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <b style="line-height: 35px">1小时=3600秒</b>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="17">
-            <el-form-item label="超时报警" prop="timeoutAlarm">
-              <el-input
-                style="width: 318px"
-                v-model="form.timeoutAlarm"
-                placeholder="请输入超时报警时间（秒）"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <b style="line-height: 35px">1小时=3600秒</b>
-          </el-col>
-        </el-row>
+        <el-form-item label="借用时长" prop="loanDuration">
+          <div class="time-picker">
+            <div
+              class="time-unit"
+              v-for="(unit, index) in timeUnits"
+              :key="index"
+            >
+              <select
+                v-model="timeValues.loanDuration[unit.name]"
+                :id="unit.name"
+              >
+                <option
+                  v-for="option in unit.options"
+                  :key="option"
+                  :value="option"
+                >
+                  {{ option }}
+                </option>
+              </select>
+              <label :for="unit.name">{{ unit.label }}</label>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="提醒设置" prop="reminderTime">
+          <div class="time-picker">
+            <div
+              class="time-unit"
+              v-for="(unit, index) in timeUnits"
+              :key="index"
+            >
+              <select
+                v-model="timeValues.reminderTime[unit.name]"
+                :id="unit.name"
+              >
+                <option
+                  v-for="option in unit.options"
+                  :key="option"
+                  :value="option"
+                >
+                  {{ option }}
+                </option>
+              </select>
+              <label :for="unit.name">{{ unit.label }}</label>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="超时报警" prop="timeoutAlarm">
+          <div class="time-picker">
+            <div
+              class="time-unit"
+              v-for="(unit, index) in timeUnits"
+              :key="index"
+            >
+              <select
+                v-model="timeValues.timeoutAlarm[unit.name]"
+                :id="unit.name"
+              >
+                <option
+                  v-for="option in unit.options"
+                  :key="option"
+                  :value="option"
+                >
+                  {{ option }}
+                </option>
+              </select>
+              <label :for="unit.name">{{ unit.label }}</label>
+            </div>
+          </div>
+        </el-form-item>
         <el-form-item label="是否需要归还" prop="restitutionRequired">
           <el-radio v-model="form.restitutionRequired" :label="1"
             >需要归还</el-radio
@@ -298,6 +324,49 @@ export default {
         parentTypeId: 0,
       },
       EditId: null, //编辑传递id
+      // 借用时长
+      timeValues: {
+        reminderTime: {
+          days: 0,
+          hours: 0,
+          minutes: 0,
+          seconds: 0,
+        },
+        loanDuration: {
+          days: 0,
+          hours: 0,
+          minutes: 0,
+          seconds: 0,
+        },
+        timeoutAlarm: {
+          days: 0,
+          hours: 0,
+          minutes: 0,
+          seconds: 0,
+        },
+      },
+      timeUnits: [
+        {
+          name: "days",
+          label: "天",
+          options: Array.from({ length: 31 }, (_, i) => i),
+        },
+        {
+          name: "hours",
+          label: "时",
+          options: Array.from({ length: 24 }, (_, i) => i),
+        },
+        {
+          name: "minutes",
+          label: "分",
+          options: Array.from({ length: 60 }, (_, i) => i),
+        },
+        {
+          name: "seconds",
+          label: "秒",
+          options: Array.from({ length: 60 }, (_, i) => i),
+        },
+      ],
       // 表单校验
       rules: {
         materialsTypeCode: [
@@ -374,6 +443,17 @@ export default {
         materialsTypeName: "",
       };
       this.resetForm("form");
+      // 重置所有时间值
+      const resetTimeValues = (timeObj) => {
+        timeObj.days = 0;
+        timeObj.hours = 0;
+        timeObj.minutes = 0;
+        timeObj.seconds = 0;
+      };
+
+      resetTimeValues(this.timeValues.reminderTime);
+      resetTimeValues(this.timeValues.loanDuration);
+      resetTimeValues(this.timeValues.timeoutAlarm);
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -411,12 +491,52 @@ export default {
       }
       selectMaterialsTypeById(row.materialsTypeId).then((response) => {
         this.form = response.data;
+        console.log(response.data.reminderTime, "修改");
+
+        const convertTime = (time) => ({
+          days: Math.floor(time / (24 * 60 * 60)),
+          hours: Math.floor((time % (24 * 60 * 60)) / (60 * 60)),
+          minutes: Math.floor((time % (60 * 60)) / 60),
+          seconds: time % 60,
+        });
+
+        this.timeValues.reminderTime = convertTime(response.data.reminderTime);
+        this.timeValues.loanDuration = convertTime(response.data.loanDuration);
+        this.timeValues.timeoutAlarm = convertTime(response.data.timeoutAlarm);
         this.open = true;
         this.title = "编辑物资类型";
       });
     },
+    // 时间转换
+    formattedTime(totalSeconds) {
+      const days = Math.floor(totalSeconds / (24 * 60 * 60));
+      const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / (60 * 60));
+      const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
+      const seconds = totalSeconds % 60;
+
+      const parts = [];
+      if (days > 0) parts.push(`${days}天`);
+      if (hours > 0) parts.push(`${hours}小时`);
+      if (minutes > 0) parts.push(`${minutes}分钟`);
+      if (seconds > 0) parts.push(`${seconds}秒`);
+
+      return parts.join(" ");
+    },
     /** 提交按钮 */
     submitForm() {
+      const calculateTotalSeconds = ({ days, hours, minutes, seconds }) =>
+        ((days * 24 + hours) * 60 + minutes) * 60 + seconds;
+
+      this.form.reminderTime = calculateTotalSeconds(
+        this.timeValues.reminderTime
+      );
+      this.form.loanDuration = calculateTotalSeconds(
+        this.timeValues.loanDuration
+      );
+      this.form.timeoutAlarm = calculateTotalSeconds(
+        this.timeValues.timeoutAlarm
+      );
+
       this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.materialsTypeId != null) {
@@ -463,3 +583,40 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.time-picker {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  padding: 0 10px;
+  border-radius: 8px;
+}
+
+.time-unit {
+  /* width: 100%; */
+  /* background: #000; */
+  display: flex;
+  /* flex-direction: column; */
+}
+
+label {
+  font-size: 14px;
+  color: #333;
+  margin-left: 10px;
+}
+
+select {
+  padding: 8px;
+  margin-left: -10px;
+  font-size: 14px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  transition: border-color 0.3s ease;
+}
+
+select:focus {
+  border-color: #007bff;
+  outline: none;
+}
+</style>