养护。动态表单

刘淇
1 parent b055b398
Showing 7 changed files with 302 additions and 151 deletions
api/common.js
common/config/env.js
pages-sub/daily/maintain-manage/add-record.vue
pages-sub/daily/maintain-manage/index.vue
pages-sub/daily/maintain-manage/pending-plan-detail.vue
pages-sub/daily/maintain-manage/road-detail-list.vue
蓝信H5改造工作量评估.xlsx
@@ -47,6 +47,35 @@ export const getAllCompanyList = (params) =&gt; {
 };
+/**
+ *  拉取字段配置
+ * @param {Object} params {`businessType`、`bizType`、`workTypeId`}
+ * @returns {Promise}
+ */
+export const getByType = (params) => {
+  return get('/app-api/app/garden/work-field-config/get-by-type', params);
+};
+
+/**
+ *  拉取枚举选项 用于 `fieldType=3`（枚举）且 `options` 为空（即非静态来源）时获取可选项。
+ * @param {Object} params {}
+ * @returns {Promise}
+ */
+export const getOptionsByCode = (params) => {
+  return get('/app-api/app/garden/work-field-config/options', params);
+};
+
+/**
+ *  拉取拉取物料列表 用于`fieldType=6`（物料）字段，列出可领物料及库存。
+ * @param {Object} params {}
+ * @returns {Promise}
+ */
+export const getMaterialsByCode = (params) => {
+  return get('/app-api/app/garden/work-field-config/materials', params);
+};
+
+
+
@@ -2,10 +2,10 @@
 const env = {
   // 开发环境
   development: {
-    // baseUrl: 'https://test.jichengshanshui.com.cn:28302',
+    baseUrl: 'https://test.jichengshanshui.com.cn:28302',
     // https://test.jichengshanshui.com.cn:28302
-    baseUrl: 'http://192.168.1.111:48081',
+    // baseUrl: 'http://192.168.1.111:48081',
     uploadUrl: 'https://test.jichengshanshui.com.cn:28302',
     // baseApi:'admin-api',
@@ -23,7 +23,7 @@ const env = {
 // 获取当前环境
 const getEnv = () => {
-  const currentEnv = 'production';
+  const currentEnv = 'development';
   return currentEnv;
 };
 <template>
   <view class="page-container">
     <view class="inspect-form-content commonPageLRpadding">
-      <up-form
-          label-position="left"
-          :model="inspectForm"
-          ref="inspectFormRef"
-          labelWidth="140rpx"
-      >
+      <up-form label-position="left" :model="inspectForm" ref="inspectFormRef" label-width="140rpx">
+        <!-- ========== 动态表单区域 ========== -->
+        <template v-for="item in dynamicFields" :key="item.fieldCode">
+          <up-form-item :label="item.fieldName" :prop="item.fieldCode" :required="item.required === 1" class="form-item"
+            @click="(item.fieldType === 3 || item.fieldType === 6) && item.multiple === 0 && openActionSheet(item)">
+            <!-- type 1 数值：u-number-box，最多2位小数，min=0，max取item.length -->
+            <view v-if="item.fieldType === 1" class="number-box-wrap">
+              <u-number-box v-model="inspectForm[item.fieldCode]" min="1" :step="1"
+                :max="item.length ? 10 ** Number(item.length) - 1 : null"
+                :placeholder="`请输入${item.fieldName}${item.unit} `" @change="valChange(item)" class="large-number-box">
+              </u-number-box>
+              <text class="unit-text" v-if="item.unit">{{ item.unit }}</text>
+            </view>
+            <!-- type 2 文本 -->
+            <up-input v-else-if="item.fieldType === 2" v-model="inspectForm[item.fieldCode]"
+              :maxlength="item.length || 50" :placeholder="`请输入${item.fieldName}`"></up-input>
+            <!-- type3 枚举：多选 multiple=1 使用复选框组 -->
+            <u-checkbox-group v-else-if="item.fieldType === 3 && item.multiple === 1"
+              v-model="inspectForm[item.fieldCode]">
+              <u-checkbox v-for="opt in item.selectOptions" :key="opt.value" :label="opt.label" :name="opt.label">
+               
+              </u-checkbox>
+            </u-checkbox-group>
+            <!-- type3 枚举：单选 用up-action-sheet 底部选择 -->
+            <up-input v-else-if="item.fieldType === 3" v-model="labelMap[item.fieldCode]" readonly
+              disabled-color="#ffffff" :placeholder="`请选择${item.fieldName}`" border="none">
+              <template #right>
+                <up-icon name="arrow-right" size="16"></up-icon>
+              </template>
+            </up-input>
+            <!-- type4 日期时间 -->
+            <view v-else-if="item.fieldType === 4" @click.stop="openDatePicker(item)" class="date-input-wrap">
+              <up-input v-model="inspectForm[item.fieldCode]" disabled placeholder="点击选择时间"></up-input>
+            </view>
+            <!-- type5 布尔单选 是/否 【重点修复】增加空label=""占位项 -->
+            <up-radio-group v-else-if="item.fieldType === 5" v-model="inspectForm[item.fieldCode]">
+              <up-radio label="是" name="是"></up-radio>
+              <up-radio label="否" name="否"></up-radio>
+            </up-radio-group>
+            <!-- type6 物料选择：up-action-sheet 底部选择 -->
+            <up-input v-else-if="item.fieldType === 6" v-model="labelMap[item.fieldCode]" readonly
+              disabled-color="#ffffff" :placeholder="`请选择${item.fieldName}`" border="none">
+              <template #right>
+                <up-icon name="arrow-right" size="16"></up-icon>
+              </template>
+            </up-input>
+          </up-form-item>
+        </template>
+        <!-- ========== 动态表单结束 ========== -->
         <!-- 1. 养护描述（文本域） -->
-        <up-form-item
-            prop="remark"
-            class="form-item"
-        >
-          <up-textarea
-              v-model.trim="inspectForm.remark"
-              placeholder="请输入养护描述"
-              maxlength="200"
-              count
-          ></up-textarea>
+        <up-form-item prop="remark" class="form-item">
+          <up-textarea v-model.trim="inspectForm.remark" placeholder="请输入养护描述" maxlength="200" count></up-textarea>
         </up-form-item>
-
         <!-- 2. 上传图片 -->
-        <up-form-item
-            label="上传图片"
-            prop="images"
-            required
-
-            class="form-item"
-        >
-          <up-upload
-              :file-list="imagesList"
-              @after-read="(event) => uploadImgs(event)"
-              @delete="(event) => deleteImg(event)"
-              @on-exceed="handleExceed"
-              multiple
-              :max-count="3"
-              upload-text="选择图片"
-              del-color="#ff4d4f"
-              class="upload-wrap"
-          ></up-upload>
+        <up-form-item label="上传图片" prop="images" required class="form-item">
+          <up-upload :file-list="imagesList" @after-read="(event) => uploadImgs(event)"
+            @delete="(event) => deleteImg(event)" @on-exceed="handleExceed" multiple :max-count="3" upload-text="选择图片"
+            del-color="#ff4d4f" class="upload-wrap"></up-upload>
         </up-form-item>
-
-<!--        &lt;!&ndash; 3. 完成进度（滑块） &ndash;&gt;-->
-<!--        <up-form-item-->
-<!--            label="完成进度"-->
-<!--            prop="progress"-->
-
-<!--            class="form-item"-->
-<!--        >-->
-<!--          <view class="progress-wrap">-->
-<!--            <up-slider-->
-<!--                v-model="inspectForm.progress"-->
-<!--                :min="initProgress"-->
-<!--                :max="100"-->
-<!--                active-color="#1989fa"-->
-<!--                inactive-color="#e5e5e5"-->
-<!--                block-size="24"-->
-<!--                :showValue="true"-->
-<!--                class="progress-slider"-->
-<!--                @changing="handleProgressChange"-->
-<!--            ></up-slider>-->
-<!--          </view>-->
-<!--        </up-form-item>-->
       </up-form>
     </view>
-
     <!-- 底部提交按钮 -->
     <view class="fixed-bottom-btn-wrap">
-      <up-button
-          type="primary"
-          text="提交"
-          @click="submitInspect"
-          :style="{ width: '100%', height: '88rpx', fontSize: '32rpx', borderRadius: 0 }"
-      ></up-button>
+      <up-button type="primary" text="提交" @click="submitInspect"
+        style="width: 100%; height: 88rpx; font-size:32rpx; border-radius: 0;"></up-button>
     </view>
+    <!-- uview-plus 日期时间选择器（全局复用） -->
+    <up-datetime-picker :show="datePickerShow" v-model="datePickerValue" mode="datetime" close-on-click-overlay
+      @confirm="onDateConfirm" @cancel="onDateClose" @close="onDateClose"></up-datetime-picker>
+    <!-- ActionSheet 底部选择弹窗 -->
+    <up-action-sheet :show="actionSheet.show" :actions="actionSheet.options" @select="onActionSheetSelect"
+      @close="actionSheet.show = false" cancel-text="取消"></up-action-sheet>
   </view>
 </template>
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { UniFormRef } from '@/uni_modules/uview-plus/types'
-const inspectFormRef = ref<UniFormRef>(null)
-</script>
-
 <script lang="ts">
 import { uploadImages } from '@/common/utils/upload'
 import { maintainCreate } from "@/api/maintain-manage/maintain-manage"
-
+import { getByType, getOptionsByCode, getMaterialsByCode } from "@/api/common"
 export default {
   data() {
     return {
@@ -94,8 +87,9 @@ export default {
       initProgress: 0,
       inspectForm: {
         remark: '',
-        // progress: 0
       },
+      // ========== 新增：用来存放展示文本label的映射对象 ==========
+      labelMap: {},
       paramsOptins: {},
       inspectFormRules: {
         images: [
@@ -116,78 +110,200 @@ export default {
             }
           }
         ],
-
+      },
+      // 动态字段列表
+      dynamicFields: [] as any[],
+      // 日期时间选择器
+      datePickerShow: false,
+      datePickerValue: Number(new Date()),
+      currentDateFieldCode: '',
+      // actionSheet配置
+      actionSheet: {
+        show: false,
+        fieldCode: '', // 当前操作的字段
+        options: [] as any[],
+        fieldItem: null // 保存当前点击的field对象，用于后面查找label
       }
     }
   },
   onLoad(option) {
     console.log('页面参数：', option)
     this.paramsOptins = option
-
-
+    const { businessType, planTypeId } = option
+    this.loadDynamicFields(businessType, planTypeId)
   },
   onReady() {
     this.$refs.inspectFormRef.setRules(this.inspectFormRules)
     console.log('巡查表单规则初始化完成')
   },
   methods: {
+    // number-box数值变更回调
+    valChange(item) {
+      // 数值修改后触发表单校验
+      this.$refs.inspectFormRef.validateField(item.fieldCode)
+    },
+    // ========== 日期时间相关方法 ==========
+    openDatePicker(field) {
+      console.log('打开日期选择器', field)
+      this.currentDateFieldCode = field.fieldCode
+      const val = this.inspectForm[field.fieldCode]
+      this.datePickerValue = val ? new Date(val).getTime() : Number(new Date())
+      this.datePickerShow = true
+      uni.hideKeyboard()
+    },
+    onDateConfirm(e) {
+      const ts = e.value
+      const d = new Date(ts)
+      const y = d.getFullYear()
+      const m = String(d.getMonth() + 1).padStart(2, '0')
+      const day = String(d.getDate()).padStart(2, '0')
+      const h = String(d.getHours()).padStart(2, '0')
+      const mi = String(d.getMinutes()).padStart(2, '0')
+      const s = String(d.getSeconds()).padStart(2, '0')
+      this.inspectForm[this.currentDateFieldCode] = `${y}-${m}-${day} ${h}:${mi}:${s}`
+      this.datePickerShow = false
+      this.$refs.inspectFormRef.validateField(this.currentDateFieldCode)
+    },
+    onDateClose() {
+      this.datePickerShow = false
+    },
     /**
-     * 进度滑块变化处理 - 核心优化：实时触发校验 + 状态更新
+     * 打开底部选择弹窗 actionSheet
      */
+    openActionSheet(item: any) {
+      console.log('12312');
+      this.actionSheet.fieldCode = item.fieldCode
+      this.actionSheet.fieldItem = item
+      // 把selectOptions / materialOptions 转为 actionSheet 需要格式 {name, value}
+      let sourceOptions = item.fieldType === 3 ? item.selectOptions : item.materialOptions
+      this.actionSheet.options = (sourceOptions || []).map(opt => {
+        return {
+          name: opt.label,
+          value: opt.value
+        }
+      })
+      this.actionSheet.show = true
+    },
+    /**
+     * actionSheet选中回调
+     */
+    onActionSheetSelect(selectedItem: any) {
+      const fieldItem = this.actionSheet.fieldItem
+      const fieldCode = this.actionSheet.fieldCode
+      // 1. 表单保存value，提交后端
+      this.inspectForm[fieldCode] = selectedItem.value
+      // 2. labelMap保存label，给input展示
+      this.labelMap[fieldCode] = selectedItem.name
+      this.actionSheet.show = false
+      // 选中后触发表单校验
+      this.$refs.inspectFormRef.validateField(fieldCode)
+    },
+    /**
+     * 加载动态字段
+     */
+    async loadDynamicFields(businessType: string, workTypeId: string) {
+      if (!businessType || !workTypeId) {
+        uni.showToast({ title: '缺少业务参数', icon: 'none' })
+        return
+      }
+      const bizType = 3
+      try {
+        const res = await getByType({
+          businessType,
+          workTypeId,
+          bizType
+        })
+        let fields = res.fields || []
+        fields.sort((a, b) => a.sort - b.sort)
+        if (fields.length === 0) {
+          uni.showToast({ title: '暂无需填报项', icon: 'none' })
+          this.dynamicFields = []
+          return
+        }
+        for (const field of fields) {
+          // type3多选checkbox，初始值为空数组，其余字段空字符串
+          if (field.fieldType === 3 && field.multiple === 1) {
+            this.$set(this.inspectForm, field.fieldCode, [])
+          } else {
+            this.$set(this.inspectForm, field.fieldCode, '')
+          }
+          // 初始化展示label为空
+          this.$set(this.labelMap, field.fieldCode, '')
-
+          if (field.required === 1) {
+            const msg = field.fieldType === 5 ? `请选择${field.fieldName}` : `请填写${field.fieldName}`
+            this.inspectFormRules[field.fieldCode] = [
+              { required: true, message: msg, trigger: 'change' }
+            ]
+          }
+          // type3 枚举：优先使用field.options，有则不请求getOptionsByCode
+          if (field.fieldType === 3) {
+            if (field.options && Array.isArray(field.options) && field.options.length > 0) {
+              field.selectOptions = field.options
+            } else {
+              console.log('12312')
+              const dictRes = await getOptionsByCode({
+                businessType,
+                bizType,
+                workTypeId,
+                fieldCode: field.fieldCode
+              })
+              field.selectOptions = dictRes.map(item => ({ label: item.label, value: item.value }))
+            }
+          }
+          // type6 物料选项
+          if (field.fieldType === 6) {
+            const matRes = await getMaterialsByCode({
+              businessType,
+              bizType,
+              workTypeId,
+              fieldCode: field.fieldCode
+            })
+            field.materialOptions = matRes.map(item => ({ label: item.materialName, value: item.materialId }))
+          }
+        }
+        this.dynamicFields = fields
+        this.$nextTick(() => {
+          this.$refs.inspectFormRef.setRules(this.inspectFormRules)
+        })
+      } catch (err) {
+        console.error('获取动态表单字段失败：', err)
+        uni.showToast({ title: '加载表单配置失败', icon: 'none' })
+      }
+    },
     /**
      * 删除图片
      */
     deleteImg(event) {
-      console.log('删除图片事件：', event)
       this.imagesList.splice(event.index, 1)
       this.$refs.inspectFormRef.validateField('images')
       uni.showToast({ title: '图片删除成功', icon: 'success' })
     },
-
     /**
      * 上传图片
      */
     async uploadImgs(event) {
-      console.log('上传图片事件：', event)
       const fileList = Array.isArray(event.file) ? event.file : [event.file]
       const targetImgList = this.imagesList
       const filePaths = fileList.map(item => item.url)
-      const tempItems = fileList.map(item => ({
-        ...item,
-        status: 'uploading',
-        message: '上传中'
-      }))
+      const tempItems = fileList.map(item => ({ ...item, status: 'uploading', message: '上传中' }))
       const startIndex = targetImgList.length
       targetImgList.push(...tempItems)
-
       try {
-        const uploadResultUrls = await uploadImages({
-          filePaths: filePaths,
-          ignoreError: true
-        })
-        console.log('上传成功的URL列表：', uploadResultUrls)
-
+        const uploadResultUrls = await uploadImages({ filePaths, ignoreError: true })
         uploadResultUrls.forEach((url, index) => {
           if (targetImgList[startIndex + index]) {
             targetImgList.splice(startIndex + index, 1, {
-              ...fileList[index],
-              status: 'success',
-              message: '',
-              url: url
+              ...fileList[index], status: 'success', message: '', url
             })
           }
         })
-
         if (uploadResultUrls.length < fileList.length) {
           const failCount = fileList.length - uploadResultUrls.length
           for (let i = uploadResultUrls.length; i < fileList.length; i++) {
             if (targetImgList[startIndex + i]) {
               targetImgList.splice(startIndex + i, 1, {
-                ...fileList[i],
-                status: 'failed',
-                message: '上传失败'
+                ...fileList[i], status: 'failed', message: '上传失败'
               })
             }
           }
@@ -195,16 +311,13 @@ export default {
         } else {
           uni.showToast({ title: `成功上传${fileList.length}张图片`, icon: 'success' })
         }
-
         this.$refs.inspectFormRef.validateField('images')
       } catch (err) {
         console.error('图片上传失败：', err)
         for (let i = 0; i < fileList.length; i++) {
           if (targetImgList[startIndex + i]) {
             targetImgList.splice(startIndex + i, 1, {
-              ...fileList[i],
-              status: 'failed',
-              message: '上传失败'
+              ...fileList[i], status: 'failed', message: '上传失败'
             })
           }
         }
@@ -212,63 +325,38 @@ export default {
         this.$refs.inspectFormRef.validateField('images')
       }
     },
-
-    /**
-     * 处理图片超出数量限制
-     */
     handleExceed() {
       uni.showToast({ title: '最多只能上传3张图片', icon: 'none' })
     },
-
-    /**
-     * 提取图片URL数组
-     */
     getImgUrlList(imgList) {
       return imgList.filter(item => item.status === 'success').map(item => item.url)
     },
-
     /**
      * 提交巡查表单
      */
     async submitInspect() {
-      // console.log('当前完成进度：', this.inspectForm.progress)
       try {
         await this.$refs.inspectFormRef.validate()
-        console.log('图片列表：', this.imagesList)
-
         const submitData = {
-          "planNo": this.paramsOptins.planNo,
-          "imgHost": "1",
-          "beginImg": this.getImgUrlList(this.imagesList),
-          "commonUserList": [],
-          "remark": this.inspectForm.remark.trim()
+          planNo: this.paramsOptins.planNo,
+          imgHost: "1",
+          beginImg: this.getImgUrlList(this.imagesList),
+          commonUserList: [],
+          remark: this.inspectForm.remark.trim(),
+          ...this.inspectForm
         }
-
         uni.showLoading({ title: '提交中...' })
         await maintainCreate(submitData)
         uni.hideLoading()
-
-        uni.showToast({
-          title: '提交成功',
-          icon: 'success',
-          duration: 1000
-        })
-
+        uni.showToast({ title: '提交成功', icon: 'success', duration: 1000 })
         setTimeout(() => {
-          uni.reLaunch({
-            url: '/pages-sub/daily/maintain-manage/index'
-          })
+          uni.reLaunch({ url: '/pages-sub/daily/maintain-manage/index' })
         }, 1000)
-
       } catch (error) {
         uni.hideLoading()
         if (!Array.isArray(error)) {
           console.error('巡查表单提交失败：', error)
-          uni.showToast({
-            title: '提交失败，请重试',
-            icon: 'none',
-            duration: 2000
-          })
+          uni.showToast({ title: '提交失败，请重试', icon: 'none', duration: 2000 })
         }
       }
     }
@@ -277,14 +365,45 @@ export default {
 </script>
 <style lang="scss" scoped>
+.page-container {
+  padding-bottom: 120rpx;
+}
 .inspect-form-content {
   background: #fff;
   padding: 20rpx;
   margin-bottom: 20rpx;
 }
-
-.progress-wrap {
-  width: 83%;
+.date-input-wrap {
+  width: 100%;
+}
+.fixed-bottom-btn-wrap {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 20rpx;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+// 放大u-number-box输入框
+.large-number-box {
+  :deep(.u-number-box__input) {
+    width: 264rpx !important;
+    height: 72rpx;
+    font-size: 32rpx;
+  }
+  :deep(.u-number-box__btn) {
+    width: 64rpx;
+    height: 72rpx;
+  }
+}
+.number-box-wrap {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  .unit-text {
+    font-size: 28rpx;
+    color: #333;
+  }
 }
 </style>
-
@@ -309,7 +309,7 @@ const fetchData = async (pageNo, pageSize) =&gt; {
 // 跳转到计划明细页面
 const goToDetail = (item) => {
   uni.navigateTo({
-    url: `/pages-sub/daily/maintain-manage/road-detail-list?roadId=${item.roadId}&finish_state=${item.finishState || ''}`
+    url: `/pages-sub/daily/maintain-manage/road-detail-list?roadId=${item.roadId}&finish_state=${item.finishState || ''} &businessType=${item.busiLine}`
   })
 }
@@ -318,11 +318,11 @@ const submitRecord = (item) =&gt; {
   console.log('提交记录：', item)
   if (item.planFinishNum == 0) { // 去新增
     uni.navigateTo({
-      url: `/pages-sub/daily/maintain-manage/add-record?finishState=${item.finishState}&planNo=${item.planNo}`
+      url: `/pages-sub/daily/maintain-manage/add-record?finishState=${item.finishState}&planNo=${item.planNo} &businessType=${item.busiLine}`
     })
   } else {
     uni.navigateTo({
-      url: `/pages-sub/daily/maintain-manage/pending-plan-detail?finishState=${item.finishState}&planNo=${item.planNo}&planTypeId=${item.planTypeId}`
+      url: `/pages-sub/daily/maintain-manage/pending-plan-detail?finishState=${item.finishState}&planNo=${item.planNo}&planTypeId=${item.planTypeId} &businessType=${item.busiLine}`
     })
   }
@@ -97,12 +97,15 @@ const batchNo = ref(&#39;&#39;)
 const planNo = ref('')
 const finishState = ref('')
 const planTypeId = ref('')
+const businessType = ref('')
+
 // 页面加载接收参数（逻辑完全保留）
 onLoad((options) => {
   planNo.value = options.planNo;
   finishState.value = options.finishState
   planTypeId.value = options.planTypeId
+  businessType.value = options.businessType
 });
 // 页面显示时请求数据（逻辑完全保留）
@@ -140,7 +143,7 @@ const gotoFinishPlanDetail = (i) =&gt; {
 // 新增记录（逻辑完全保留）
 const addNewRecord = () => {
   uni.navigateTo({
-    url: `/pages-sub/daily/maintain-manage/add-record?planNo=${planNo.value}`,
+    url: `/pages-sub/daily/maintain-manage/add-record?planNo=${planNo.value}&planTypeId=${planTypeId.value}&businessType=${businessType.value}`,
   });
 };
 </script>
@@ -179,11 +179,11 @@ const submitRecord = (item) =&gt; {
   console.log('提交记录：', item.planFinishNum)
   if (item.planFinishNum == 0) {
     uni.navigateTo({
-      url: `/pages-sub/daily/maintain-manage/add-record?finishState=${item.finishState}&planNo=${item.planNo}`
+      url: `/pages-sub/daily/maintain-manage/add-record?finishState=${item.finishState}&planNo=${item.planNo}&businessType=${item.busiLine}`
     })
   } else {
     uni.navigateTo({
-      url: `/pages-sub/daily/maintain-manage/pending-plan-detail?finishState=${item.finishState}&planNo=${item.planNo}&planTypeId=${item.planTypeId}`
+      url: `/pages-sub/daily/maintain-manage/pending-plan-detail?finishState=${item.finishState}&planNo=${item.planNo}&planTypeId=${item.planTypeId}&businessType=${item.busiLine}`
     })
   }
 }