feat: 延时监火列表页面完善

pages/eight_assignments/hot_work/delay_fire_monitoring/add.vue

@@ -5,9 +5,9 @@
       <u-form labelPosition="left" :model="form" :rules="rules" ref="formRef" labelWidth="140px">
         <u-form-item label="监火人" prop="PYROMANCER" borderBottom required>
           <u-input v-model="form.PYROMANCER" border="none" readonly />
-          <u-icon name="arrow-right"></u-icon>
         </u-form-item>
-        <u-form-item label="时间" prop="TIME" borderBottom required>
+        <u-form-item label="时间" prop="TIME" borderBottom required
+          @click="fnDateTimePickerClick('TIME')">
           <u-input v-model="form.TIME" border="none" readonly />
           <u-icon name="arrow-right"></u-icon>
         </u-form-item>
@@ -28,21 +28,23 @@
 </template>
 
 <script>
+import { formatDate } from '@/utils/tools';
+
 export default {
   data() {
     return {
       form:{
         /** 监火人 */
-        PYROMANCER: '',
+        PYROMANCER: this.$store.getters.getUserInfo.NAME,
         /** 时间 */
-        TIME: '',
+        TIME: formatDate(new Date(), 'yyyy-MM-dd hh:mm'),
         /** 照片 */
         imgList: []
       },
       rules: {
         PYROMANCER: [{ type: 'string', required: true, message: '请输入监火人', trigger: ['blur', 'change'] }],
         TIME: [{ type: 'string', required: true, message: '请选择时间', trigger: ['blur', 'change'] }],
-        imgList: [{ type: 'string', required: true, message: '请上传照片', trigger: ['blur', 'change'] }],
+        imgList: [{ type: 'array', required: true, message: '请上传照片', trigger: ['blur', 'change'] }],
       },
       dateTimePicker: {
         show: false,
@@ -59,19 +61,46 @@ export default {
         await this.$refs.formRef.validate()
         try {
           console.log('this.form :>> ', this.form);
+          // TODO: 这里对接网络接口来保存表单数据到后台
           // await setSubmitForm({
           //   form: this.form,
           //   formItems: this.formItems,
           //   TYPE: this.type,
           //   CORP_ID: this.form.CORP_ID
           // })
-          uni.navigateBack(); // 返回到上一级
+          // uni.navigateBack(); // 返回到上一级
         } catch {
         }
       } catch {
         uni.$u.toast('请补全必填项')
       }
+    },
+    fnDateTimePickerClick(event) {
+      this.dateTimePicker.type = event
+      this.dateTimePicker.value = Number(new Date(this.form[event])) || Number(new Date())
+      this.dateTimePicker.show = true
+    },
+    fnDateTimePickerConfirm(event) {
+      this.form[this.dateTimePicker.type] = uni.$u.timeFormat(event.value, 'yyyy-mm-dd hh:MM')
+      this.fnDateTimePickerCancel()
+    },
+    fnDateTimePickerCancel() {
+      this.dateTimePicker.show = false
+    },
+    fnAfterRead(event, key) {
+      this.form[key].push(...event.file)
+    },
+    fnDeletePic(event, key) {
+      uni.showModal({
+        title: '提示',
+        content: '确定删除该图片吗？',
+        success: (res) => {
+          if (res.confirm) {
+            this.form[key].splice(event.index, 1)
           }
         }
+      })
+    },
+  }
 }
 </script>

pages/eight_assignments/hot_work/delay_fire_monitoring/delay.vue

@@ -2,11 +2,29 @@
   <view class="content">
     <view class="flex-end padding">
       <u-button type="primary" text="添加" size="mini" class="bth-mini" @click="goToAdd" />
-      <u-button type="primary" text="任务转发" size="mini" class="bth-mini ml-10"
+      <u-button type="primary" text="任务转发" size="mini" class="bth-mini ml-10" @click="goToTaskForword" />
-        @click="goToTaskForword" />
     </view>
     <view>
-      <view v-if="list.length > 0">有数据</view>
+      <view class="form" v-if="list.length > 0">
+        <view class="wui-form-list" v-for="(item, index) in list" :key="index">
+          <view class="cu-form-group">
+            <view class="title">监火人：</view>
+            {{ item.userName }}
+          </view>
+          <view class="cu-form-group">
+            <view class="title">时间：</view>
+            {{ item.TIME }}
+          </view>
+          <view class="cu-form-group">
+            <view class="title">照片：</view>
+            <view><u-button size="mini" type="primary" text="查看图片" @click="ViewImage1(item.FILEPATH)" /></view>
+          </view>
+        </view>
+        <view style="margin-top: 30upx;" v-show="list.length !== 0">
+          <u-button class="bg-green" style="max-width: 50%;" v-if="STATE !== '11'"
+            @click="$u.debounce(goSubmit, 1000, true)">完成延时监火</u-button>
+        </view>
+      </view>
       <empty v-else></empty>
     </view>
   </view>
@@ -16,22 +34,67 @@
 export default {
   data() {
     return {
-      list: []
+      list: [
+        {
+          ISDELETE: 0,
+          HOTWORKAPPLICATION_ID: "f71420d5f2d74b60aabebe8429d5bf34",
+          HOTWORKAPPLICATIONDELAYED_ID: "50d8f530ee544aaa833b48471702ed0e",
+          CREATOR: "2c797704caaf48efa62ea1c6d2c967e1",
+          USER_ID: "2c797704caaf48efa62ea1c6d2c967e1",
+          FILEPATH: "/uploadFiles/yhtp/13cf0f4ec77e4d98ae8cdd9c3386ae0c/20240830/bb9685a4099c46c99c795ea7417f8f71.png",
+          TIME: "2024-08-30 18:14",
+          userName: "孙海官",
+          CREATTIME: "2024-08-30 18:14:13"
+        },
+        {
+          ISDELETE: 0,
+          HOTWORKAPPLICATION_ID: "f71420d512d74b60aabebe8429d5bf34",
+          HOTWORKAPPLICATIONDELAYED_ID: "50d8f530ee544aaa233b48471702ed0e",
+          CREATOR: "2c797704caaf48efa62ea1c6d2c96751",
+          USER_ID: "2c797704caaf48efa62ea1c6d2c967e1",
+          FILEPATH: "/uploadFiles/yhtp/13cf0f4ec77e4d98ae8cdd9c3386ae0c/20240830/bb9685a4099c46c99c795ea7417f8f71.png",
+          TIME: "2024-09-03 18:11",
+          userName: "孙去来",
+          CREATTIME: "2024-08-30 18:14:13"
+        }
+      ],
+      STATE: '',
     }
   },
+  onLoad(event) {
+    this.STATE = event.state;
+  },
   methods: {
-    /** 跳转到延时监火的添加页面 */
+    /** 
+     * 跳转到延时监火的添加页面
+     */
     goToAdd() {
       uni.$u.route({
         url: '/pages/eight_assignments/hot_work/delay_fire_monitoring/add'
       });
     },
-    /** 跳转到延时监火的任务转发页面 */
+    /** 
+     * 跳转到延时监火的任务转发页面 
+     */
     goToTaskForword() {
       uni.$u.route({
         url: '/pages/eight_assignments/hot_work/delay_fire_monitoring/task_forward'
       });
-    }
+    },
+    /**
+     * 图片预览
+     */
+    ViewImage1(urls) {
+      uni.previewImage({
+        urls: [this.$filePath + urls]
+      });
+    },
+    /** 
+     * 完成延时监火的确认按钮事件
+     */
+    goSubmit() {
+      alert('等待开发接入中...')
+     },
   }
 }
 </script>
@@ -41,5 +104,38 @@ export default {
   .padding {
     padding: 20upx;
   }
+
+  .wui-form-list {
+    background-color: #FFFFFF;
+    border-radius: 10upx;
+    margin: 20upx;
+  }
+
+  .wui-form-list .cu-form-group {
+    color: #808080;
+    font-size: 28upx;
+    padding: 30upx;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .wui-form-list .cu-form-group .title {
+    min-width: 200upx;
+    width: max-content;
+    font-weight: bold;
+    color: #000000;
+    font-size: 28upx;
+    /* white-space: nowrap; */
+  }
+
+  .cu-form-group+.cu-form-group {
+    border-top: 1px solid #eee;
+  }
+
+  .bg-green {
+    background-color: #39b54a;
+    color: #fff;
+    border-radius: 16upx;
+  }
 }
 </style>

pages/eight_assignments/hot_work/delay_fire_monitoring/task_forward.vue

@@ -2,16 +2,12 @@
 <template>
   <view class="content">
     <view class="card">
-      延时监火的任务转发的页面等待开发中
+      <u-form labelPosition="left" :model="form" :rules="rules" ref="formRef" labelWidth="140px">
-      <!-- <u-form labelPosition="left" :model="form" :rules="rules" ref="formRef" labelWidth="140px">
+        <u-form-item label="接班监火人部门" prop="PYROMANCER" borderBottom required @click="fnSelect">
-        <u-form-item label="接班监火人部门" prop="PYROMANCER" borderBottom required>
           <u-input v-model="form.PYROMANCER" border="none" readonly />
           <u-icon name="arrow-right"></u-icon>
         </u-form-item>
       </u-form>
-      <view class="mt-10">
-        <u-button type="primary" text="提交" @click="$u.debounce(fnSubmit, 1000, true)" />
-      </view> -->
     </view>
   </view>
 </template>
@@ -19,8 +15,20 @@
 <script>
 export default {
   data() {
-    return {}
+    return {
+      form: {},
+      rules: {},
+      modelShow: true,
+      type: '',
+      CORP_ID: '',
+      treeData: [],
+      treeSelectData: []
+    }
   },
-  methods: {}
+  methods: {
+    fnSelect() {
+      console.log("接班监火人部门选择器能力待开发...");
+    },
+  }
 }
 </script>

utils/tools.js

@@ -0,0 +1,27 @@
+export function formatDate(date, fmt) {
+  if(null != JSON.stringify(date) && 'null' != JSON.stringify(date) && undefined != JSON.stringify(date) && 'undefined' != JSON.stringify(date) && JSON.stringify(date) != '' && JSON.stringify(date).length > 0){
+      if (/(y+)/.test(fmt)) {
+          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+      }
+      let o = {
+          'M+': date.getMonth() + 1,
+          'd+': date.getDate(),
+          'h+': date.getHours(),
+          'm+': date.getMinutes(),
+          's+': date.getSeconds()
+      }
+      for (let k in o) {
+          if (new RegExp(`(${k})`).test(fmt)) {
+              let str = o[k] + ''
+              fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
+          }
+      }
+      return fmt
+  } else {
+      return ''
+  }
+}
+
+function padLeftZero(str) {
+  return ('00' + str).substr(str.length)
+}