pages-sub/daily/patrol-manage/add-patrol-record.vue

<template>
  <view class="u-page">
<!-- 原有模板内容不变，仅调整表单校验相关配置 -->
<view class="inspect-form-content commonPageLRpadding">
<up-form label-position="left" :model="inspectForm" ref="inspectFormRef" labelWidth="200rpx">
<!-- 1. 巡查描述 -->
<up-form-item label="巡查描述" prop="content" class="form-item" required>
<up-textarea v-model.trim="inspectForm.content" placeholder="请输入巡查描述" maxlength="200" count></up-textarea>
</up-form-item>
<!-- 2. 上传图片 -->
<up-form-item label="上传图片" prop="images" required border-bottom 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" width="70" height="70"></up-upload>
</up-form-item>
<!-- 3. 转为工单 -->
<up-form-item label="转为工单" prop="isWorkOrder" required class="form-item">
<up-radio-group v-model="inspectForm.isWorkOrder" active-color="#1989fa" direction="row" class="radio-group"
            @change="handleWorkOrderChange">
<up-radio :custom-style="{ marginRight: '40rpx' }" v-for="(item, index) in radioList" :key="index"
              :label="item.label" :name="item.value">
              {{ item.label }}
</up-radio>
</up-radio-group>
</up-form-item>
<!-- ========== 【新增】业务线（单选框，对齐参考页面） ========== -->
<up-form-item v-if="inspectForm.isWorkOrder === '2'" label="业务线" prop="busiLineCn" border-bottom required
class="form-item">
<up-radio-group v-model="inspectForm.busiLineCn" placement="row" @change="handleBusiLineChange">
<up-radio v-for="item in busiLineOptions" :key="item.name" :label="item.name" :name="item.name"></up-radio>
</up-radio-group>
</up-form-item>
<!-- ========== 【新增】问题类型（级联选择器，对齐参考页面） ========== -->
<up-form-item v-if="inspectForm.isWorkOrder === '2'" label="问题类型" prop="orderName" border-bottom required
class="form-item" @click="openCascader(); uni.hideKeyboard()">
<up-input v-model="inspectForm.orderName" disabled disabled-color="#ffffff" placeholder="请选择问题类型"
border="none"></up-input>
<template #right>
<up-icon name="arrow-right" size="16"></up-icon>
</template>
</up-form-item>
<!-- 紧急程度（仍为必填） -->
<up-form-item v-if="inspectForm.isWorkOrder === '2'" label="紧急程度" prop="pressingTypeName" border-bottom required
class="form-item" @click="handleActionSheetOpen('pressingType')">
<up-input v-model="inspectForm.pressingTypeName" disabled disabled-color="#ffffff" placeholder="请选择紧急程度"
border="none"></up-input>
<template #right>
<up-icon name="arrow-right" size="16"></up-icon>
</template>
</up-form-item>
<!-- 希望完成时间（移除 required 属性，改为非必填） -->
<up-form-item v-if="inspectForm.isWorkOrder === '2'" label="希望完成时间" prop="expectedFinishDate" class="form-item"
          @click="show = true; uni.hideKeyboard()">
<up-input v-model="inspectForm.expectedFinishDate" border="none" readonly placeholder="点击选择时间">
</up-input>
<template #right>
<!-- 核心修复：用view包裹图标，添加双重@click.stop -->
<view v-if="inspectForm.expectedFinishDate" @click.stop>
<up-icon name="close" size="16" @click.stop="clearExpectedFinishDate"></up-icon>
</view>
<up-icon name="arrow-right" size="16" v-else></up-icon>
</template>
</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>
</view>
<!-- 紧急程度下拉弹窗 -->
<up-action-sheet :show="showActionSheet" :actions="pressingTypeList" title="请选择紧急程度" @close="handleActionSheetClose"
      @select="handlePressingTypeSelect"></up-action-sheet>
<!-- ========== 新增级联选择器组件 ========== -->
<up-cascader v-model:show="showCascader" v-model="cascaderValue" :data="cascaderOptions" title="选择问题类型"
      :auto-close="false" @confirm="cascaderConfirm"></up-cascader>
<!-- 完成时间选择器 -->
<up-datetime-picker :show="show" v-model="datetimeValue" mode="datetime" :min-date="new Date()"
      @cancel="show = false" @confirm="expectedFinishDateConfirm"></up-datetime-picker>
</view>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import type { UniFormRef } from '@/uni_modules/uview-plus/types'
import { useUserStore } from '@/pinia/user';
import { getDictLabel, getDictValue } from '@/common/utils/dict';
import { getProblemListByType } from '@/api/common'
const { proxy } = getCurrentInstance()!
const inspectFormRef = ref<UniFormRef>(null)
const userStore = useUserStore();
const BUSI_LINE_DICT_TYPE = 'business_line';
const CJK_RE = /[一-龥]/;
// 级联选择器变量
const showCascader = ref(false);
const cascaderValue = ref([]);
const cascaderOptions = ref([]);
// 打开级联弹窗
const openCascader = () => {
const busiLineEn = getBusiLineEnByCn(proxy.$data.inspectForm.busiLineCn)
if (!busiLineEn) {
uni.showToast({ title: '请先选择业务线', icon: 'none' })
return
  }
if (!cascaderOptions.value || cascaderOptions.value.length === 0) {
uni.showToast({ title: '正在加载问题类型，请稍等', icon: 'none' });
loadProblemCascader(busiLineEn);
return;
  }
cascaderValue.value = [];
showCascader.value = true;
};
// 级联确认回调
const cascaderConfirm = (selectedArr) => {
const getLabelByValueList = (list, valList) => {
const labelArr = [];
let currentList = list;
for (const val of valList) {
const target = currentList.find(item => item.value === val);
if (!target) break;
labelArr.push(target.label);
currentList = target.children || [];
    }
return labelArr.join('/');
  };
const fullLabel = getLabelByValueList(cascaderOptions.value, selectedArr);
proxy.$data.inspectForm.orderName = fullLabel;
proxy.$data.inspectForm.orderCode = selectedArr.at(-1);
cascaderValue.value = selectedArr;
inspectFormRef.value?.validateField('orderName');
};
// 加载级联树形数据
const loadProblemCascader = async (parentCode) => {
if (!parentCode) {
cascaderOptions.value = []
return
  }
try {
uni.showLoading({ title: '加载类型中...' })
const res = await getProblemListByType({ parentCode })
uni.hideLoading()
cascaderOptions.value = res || []
  } catch (err) {
uni.hideLoading()
console.error('获取问题类型失败', err)
uni.showToast({ title: '获取问题类型失败', icon: 'none' })
cascaderOptions.value = []
  }
}
const getBusiLineCnByEn = (busiLineEn) => {
if (!busiLineEn) return '';
return getDictLabel(BUSI_LINE_DICT_TYPE, busiLineEn) || busiLineEn;
};
const getBusiLineEnByCn = (cnName) => {
if (!cnName) return '';
const code = getDictValue(BUSI_LINE_DICT_TYPE, cnName);
if (code) return code;
return CJK_RE.test(cnName) ? '' : cnName;
};
// 暴露给选项式访问
proxy.$setupCtx = {
  loadProblemCascader,
  getBusiLineEnByCn,
  cascaderOptions,
  cascaderValue
}
</script>
<script lang="ts">
import { uploadImages } from '@/common/utils/upload';
import { inspectionCreate } from "@/api/patrol-manage/patrol-plan";
import { timeFormat } from '@/uni_modules/uview-plus'
import { useUserStore } from '@/pinia/user';
import { getDictLabel } from '@/common/utils/dict';
export default {
data() {
return {
imagesList: [],
radioList: [
        { label: '否', value: '1' },
        { label: '是', value: '2' }
      ],
pressingTypeList: [],
busiLineOptions: [], // 业务线移到data，不再放在setup
inspectForm: {
content: '',
isWorkOrder: '1',
pressingTypeName: '',
pressingType: '',
busiLineCn: '',
orderName: '',
orderCode: '',
expectedFinishDate: '' // 非必填，可空
      },
paramsOptins: {},
showActionSheet: false,
show: false,
datetimeValue: Date.now(),
inspectFormRules: {
images: [
          {
required: true,
message: '请上传图片',
trigger: 'change',
validator: (rule, value, callback) => {
const hasSuccessImg = this.imagesList.some(item => item.status === 'success')
const imgCount = this.imagesList.filter(item => item.status === 'success').length
if (!hasSuccessImg || imgCount < 1) {
callback(new Error('最少需要上传1张图片'))
              } else if (imgCount > 3) {
callback(new Error('最多只能上传3张图片'))
              } else {
callback()
              }
            }
          }
        ],
content: [
          { type: 'string', required: true, message: '请输入巡查描述', trigger: ['change'] }
        ],
isWorkOrder: [
          { type: 'string', required: true, message: '请选择是否转为工单', trigger: ['change'] }
        ],
pressingTypeName: [
          {
required: true,
message: '请选择紧急程度',
trigger: 'change',
validator: (rule, value, callback) => {
if (this.inspectForm.isWorkOrder === '2' && !value) {
callback(new Error('请选择紧急程度'))
              } else {
callback()
              }
            }
          }
        ],
busiLineCn: [
          {
required: true,
message: '请选择业务线',
trigger: 'change',
validator: (rule, value, callback) => {
if (this.inspectForm.isWorkOrder === '2' && !value) {
callback(new Error('请选择业务线'))
              } else {
callback()
              }
            }
          }
        ],
orderName: [
          {
required: true,
message: '请选择问题类型',
trigger: 'change',
validator: (rule, value, callback) => {
if (this.inspectForm.isWorkOrder === '2' && !value) {
callback(new Error('请选择问题类型'))
              } else {
callback()
              }
            }
          }
        ],
expectedFinishDate: [
          {
message: '请选择有效的希望完成时间',
trigger: 'change',
validator: (rule, value, callback) => {
if (value && !/^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/.test(value)) {
callback(new Error('请选择有效的希望完成时间'))
              } else {
callback()
              }
            }
          }
        ]
      }
    }
  },
onLoad(option) {
this.paramsOptins = option
// 初始化业务线选项
const userStore = useUserStore();
if (userStore.userInfo?.user?.busiLine) {
const rawBusiLines = userStore.userInfo.user.busiLine.split(',');
this.busiLineOptions = rawBusiLines.map(item => ({
name: getDictLabel('business_line', item.trim()) || item.trim()
}));
}
  },
onReady() {
this.$refs.inspectFormRef.setRules(this.inspectFormRules)
  },
onShow() {
this.pressingTypeList = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('workorder_pressing_type'))
  },
methods: {
handleWorkOrderChange() {
if (this.inspectForm.isWorkOrder === '1') {
this.inspectForm.pressingTypeName = ''
this.inspectForm.pressingType = ''
this.inspectForm.busiLineCn = ''
this.inspectForm.orderName = ''
this.inspectForm.orderCode = ''
this.$setupCtx.cascaderOptions.value = []
this.$setupCtx.cascaderValue.value = []
this.inspectForm.expectedFinishDate = ''
this.$refs.inspectFormRef.validateField(['pressingTypeName', 'busiLineCn', 'orderName', 'expectedFinishDate'])
      } else {
// 修复点：直接读取data中的 busiLineOptions，不再访问setup
const busiOpts = this.busiLineOptions
if (busiOpts.length > 0) {
this.inspectForm.busiLineCn = busiOpts[0].name
this.handleBusiLineChange()
        }
      }
    },
handleBusiLineChange() {
this.inspectForm.orderName = ''
this.inspectForm.orderCode = ''
this.$setupCtx.cascaderValue.value = []
this.$setupCtx.cascaderOptions.value = []
const busiLineEn = this.$setupCtx.getBusiLineEnByCn(this.inspectForm.busiLineCn)
this.$setupCtx.loadProblemCascader(busiLineEn)
this.$refs.inspectFormRef.validateField('busiLineCn')
    },
handleActionSheetOpen(type) {
uni.hideKeyboard()
if (type === 'pressingType') {
this.showActionSheet = true
      }
    },
handleActionSheetClose() {
this.showActionSheet = false
    },
handlePressingTypeSelect(e) {
this.inspectForm.pressingTypeName = e.name
this.inspectForm.pressingType = e.value
this.showActionSheet = false
this.$refs.inspectFormRef.validateField('pressingTypeName')
    },
expectedFinishDateConfirm(e) {
this.inspectForm.expectedFinishDate = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
this.show = false
this.$refs.inspectFormRef.validateField('expectedFinishDate')
    },
clearExpectedFinishDate() {
this.inspectForm.expectedFinishDate = ''
this.$refs.inspectFormRef.validateField('expectedFinishDate')
    },
deleteImg(event) {
this.imagesList.splice(event.index, 1)
this.$refs.inspectFormRef.validateField('images')
uni.showToast({ title: '图片删除成功', icon: 'success' })
    },
async uploadImgs(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 startIndex = targetImgList.length
targetImgList.push(...tempItems)
try {
const uploadResultUrls = await uploadImages({
filePaths: filePaths,
ignoreError: true
        })
uploadResultUrls.forEach((url, index) => {
if (targetImgList[startIndex + index]) {
targetImgList.splice(startIndex + index, 1, {
...fileList[index],
status: 'success',
message: '',
url: url
            })
          }
        })
if (uploadResultUrls.length < fileList.length) {
const failCount = fileList.length - uploadResultUrls.length
uni.showToast({ title: `成功上传${uploadResultUrls.length}张，失败${failCount}张`, icon: 'none' })
        } 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: '上传失败'
            })
          }
        }
uni.showToast({ title: '图片上传失败，请重试', icon: 'none' })
this.$refs.inspectFormRef.validateField('images')
      }
    },
handleExceed() {
uni.showToast({ title: '最多只能上传3张图片', icon: 'none' })
    },
getImgUrlList(imgList) {
return imgList.filter(item => item.status === 'success').map(item => item.url)
    },
async submitInspect() {
console.log('当前选择是否转为工单：', this.inspectForm.isWorkOrder)
try {
await this.$refs.inspectFormRef.validate()
console.log(this.imagesList)
const baseSubmitData = {
"batchNo": this.paramsOptins.batchNo,
"planNo": this.paramsOptins.planNo,
"imgHost": "1",
"imgList": this.getImgUrlList(this.imagesList),
"inspectionState": this.inspectForm.isWorkOrder,
"transState": this.inspectForm.isWorkOrder === '1' ? '1' : '2',
"transWorkNo": "default'",
"remark": this.inspectForm.content.trim()
        }
let submitData = { ...baseSubmitData }
if (this.inspectForm.isWorkOrder === '2') {
submitData.pressingType = this.inspectForm.pressingType
const busiLineEn = this.$setupCtx.getBusiLineEnByCn(this.inspectForm.busiLineCn)
submitData.busiLine = busiLineEn
submitData.orderName = this.inspectForm.orderName
submitData.orderCode = this.inspectForm.orderCode
if (this.inspectForm.expectedFinishDate) {
submitData.expectedFinishDate = new Date(this.inspectForm.expectedFinishDate).getTime()
          }
        }
uni.showLoading({ title: '提交中...' })
await inspectionCreate(submitData)
uni.hideLoading()
uni.showToast({
title: '提交成功',
icon: 'success',
duration: 1000
        })
setTimeout(() => {
uni.reLaunch({
url: '/pages-sub/daily/patrol-manage/index'
          })
        }, 1000)
      } catch (error) {
uni.hideLoading()
if (!Array.isArray(error)) {
console.error('巡查表单提交失败：', error)
uni.showToast({
title: '提交失败，请重试',
icon: 'none',
duration: 2000
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.u-page {
min-height: 100vh;
}
.inspect-form-content {
background: #fff;
padding: 20rpx;
}
.form-item {
margin-bottom: 20rpx;
}
</style>