business_tms_program 0.0.0

package/src/pages/installtion/addAcceptance.vue

@@ -0,0 +1,409 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { type addAcceptanceParams, addRecord } from '@/api/installtion';
+import { type ValidationRules } from '@/utils/form';
+import { acceptanceStatusEnum, installWorkNodeEnum, installWorkNodeMap } from '@/dict/installtion';
+import { useForm } from '@/hooks/useForm';
+import SinglePick from '@/components/SinglePick.vue';
+import Upload from '@/components/Upload.vue';
+import { isArray } from 'lodash-es';
+import RippleBtn from '@/components/RippleBtn.vue';
+import { FILE_UPLOAD_CONFIG, scrollIdPrefix } from '@/config/app';
+import { queryDeviceDetail } from '@/api/device';
+import { DeviceMesStatusEnum } from '@/dict/device';
+defineOptions({
+  name: "addAcceptance"
+});
+// 定义校验规则
+const validationRules: ValidationRules<Partial<addAcceptanceParams>> = {
+   description: {
+    required: true,
+    message: '请填写记录说明',
+  },
+  status: {
+    required: true,
+    message: '请选择状态',
+  },
+  imageList: { required: false, validatFunc: (d): any => {
+    return new Promise((resolve, reject) => {
+      if(isArray(d) && d.length > 0) {
+        resolve(true)
+      } else {
+        reject('请上传至少一张图片')
+      }
+    })
+  }, message: '请上传至少一张图片' },
+}
+
+const initialData = {
+  status: acceptanceStatusEnum.YES
+};
+let timer: number | null = null
+const focusState = reactive({
+  description: false,
+})
+const state = reactive({
+  deviceId: '',
+  workOrderCode: '',
+  deviceCode: '',
+  location: {
+    latitude: 0,
+    longitude: 0,
+    address: '',
+    name: ''
+  },
+  showLocationTips: false,
+  showSiloCodeTips: false, // 料塔编码错误提示
+  deviceInfo: {} as any, // 设备详情信息
+})
+const { formData, errState, setFormItem, validateForm } = useForm<Omit<addAcceptanceParams, 'id'>>(
+  initialData as Omit<addAcceptanceParams, 'id'>,
+  validationRules,
+  false,
+)
+const changeValue = (key: keyof Omit<addAcceptanceParams, 'id'>, detail: any) => {
+  setFormItem(key, detail.value);
+}
+const getLocation = () => {
+  uni.chooseLocation({
+    success: (res) => {
+      state.location = {
+        latitude: res.latitude,
+        longitude: res.longitude,
+        address: res.address,
+        name: res.name
+      }
+      state.showLocationTips = false;
+    },
+    fail: (err) => {
+      console.log(err);
+      uni.showToast({ title: '获取位置失败', icon: 'error' })
+    }
+  })
+}
+
+// 跳转到编辑料塔编码页面
+const toMaterialTowerCode = () => {
+  uni.navigateTo({ 
+    url: `/pages/device/materialTowerCode?deviceCode=${state.deviceCode}` 
+  })
+  // 清除错误提示
+  state.showSiloCodeTips = false;
+}
+
+// 获取设备详情
+const fetchDeviceDetail = async () => {
+  if (!state.deviceCode) return;
+  try {
+    const res = await queryDeviceDetail({ deviceCode: state.deviceCode });
+    if (res) {
+      state.deviceInfo = res;
+    }
+  } catch (error) {
+    console.error('获取设备详情失败', error);
+  }
+}
+
+const submitForm = async () => {
+  // 先清除所有错误提示
+  state.showLocationTips = false;
+  state.showSiloCodeTips = false;
+  
+  // 校验设备信息状态
+  if (state.deviceInfo?.deviceMesStatus === DeviceMesStatusEnum.PENDING) {
+    uni.showToast({ 
+      title: '设备信息未完善，请先完善设备信息后再提交', 
+      icon: 'none',
+      duration: 2000
+    })
+    return;
+  }
+  
+  // 校验表单字段
+  const validateResult = await validateForm();
+  
+  // 校验设备定位
+  if (!state.location.address) {
+    state.showLocationTips = true;
+  }
+  
+  // 校验料塔编码必填
+  if (!state.deviceInfo?.siloCode) {
+    state.showSiloCodeTips = true;
+  }
+  
+  // 如果有任何校验失败，直接返回
+  if (!validateResult || !state.location.address || !state.deviceInfo?.siloCode) {
+    return;
+  }
+  const res = await addRecord({
+    ...formData, planDeviceId: state.deviceId,
+    workNodeFlag: installWorkNodeEnum.ACCEPT,
+    imageList: formData.imageList?.map((item: any) => item.id) || [],
+    deviceLocation: JSON.stringify(state.location),
+    workOrderCode: state.workOrderCode,
+    deviceCode: state.deviceCode,
+  }, {
+    permActionName: 'installWorkAcceptance'
+  })
+  if (res) {
+    uni.showToast({ title: '提交成功', icon: 'success' })
+    timer = setTimeout(() => {
+      uni.navigateBack()
+    }, 2000)
+    uni.$emit('installtionOrderDetail-updated');
+    uni.$emit('orderList-updated');
+  }
+}
+onLoad(async (event: any) => {
+const { deviceId, workOrderCode, deviceCode } = event
+  state.deviceId = deviceId;
+  state.workOrderCode = workOrderCode;
+  state.deviceCode = deviceCode;
+  // 获取设备详情
+  await fetchDeviceDetail();
+})
+
+// 监听页面显示，刷新设备信息
+onShow(() => {
+  if (state.deviceCode) {
+    fetchDeviceDetail();
+    // 清除料塔编码错误提示
+    state.showSiloCodeTips = false;
+  }
+})
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+})
+</script>
+
+<template>
+  <view class="content">
+    <view class="form-content">
+      <view class="uni-form-item flex-space">
+        <view class="l-label">
+          工作节点
+        </view>
+        <view class="form-value">安装验收</view>
+      </view>
+      <view class="uni-form-item flex-space">
+        <view class="l-label">
+          状态
+        </view>
+        <SinglePick class="select-box" :value="formData.status" :range="[{ label: '正常', value: acceptanceStatusEnum.YES }]" 
+          disabled value-key="value"
+          label-key="label" showRightIcon placeholder="请选择" @change="(v: any) => changeValue('status', { value: v })" />
+      </view>
+      <view class="err-text" v-if="errState.status">{{ errState.status }}</view>
+    </view>
+    <view class="form-content" :id="`${scrollIdPrefix}description`">
+      <view class="l-label">
+        <view class="flag">*</view>记录说明
+      </view>
+      <textarea class="uni-textarea" placeholder="请填写" :value="formData.description" maxlength="1000"
+        @input="(e: any) => changeValue('description', e.detail)" @focus="focusState.description = true"
+        @blur="focusState.description = false" placeholder-class="holderClass" />
+      <view class="annotation">{{ formData.description?.length || 0 }}/1000</view>
+      <view class="err-text" v-if="errState.description">{{ errState.description }}</view>
+    </view>
+    <view class="form-content">
+      <view class="uni-form-item flex-space flex-col">
+        <view class="l-label"><view class="flag">*</view>照片上传</view>
+        <upload class="upload-box" :files="formData.imageList" :maxCount="6" :showUpload="true" :size="176"
+          :moduleName="FILE_UPLOAD_CONFIG.after_order.moduleName"
+          @change="(files: any) => changeValue('imageList', { value: files })" />
+        <view class="err-text" v-if="errState.imageList">{{ errState.imageList }}</view>
+      </view>
+    </view>
+    <view class="form-content">
+      <view class="uni-form-item flex-space">
+        <view class="l-label">
+          <view class="flag">*</view>设备定位
+        </view>
+        <view class="form-value" @click="getLocation">
+          {{ state.location.address ? `${state.location.address}${state.location.name}` : '点击上传设备位置'}}
+        </view>
+      </view>
+      <view class="err-text" v-if="state.showLocationTips">请定位设备位置</view>
+    </view>
+    <view class="form-content">
+      <view class="section-title">设备信息</view>
+      <view class="uni-form-item flex-space" @click="toMaterialTowerCode">
+        <view class="l-label">
+          <view class="flag">*</view>料塔编码
+        </view>
+        <view class="form-value-box">
+          <view class="form-value">{{ state.deviceInfo?.siloCode || '请选择' }}</view>
+          <image class="right-icon" src="/static/img/turn_right.png" />
+        </view>
+      </view>
+      <view class="err-text" v-if="state.showSiloCodeTips">请选择料塔编码</view>
+    </view>
+    <RippleBtn @click="submitForm" :customStyle="'margin-top: 48rpx;padding-bottom: 10rpx'">
+      <view class="submit-btn">保存</view>
+    </RippleBtn>
+  </view>
+</template>
+<style scoped>
+.content {
+  background-color: #F5F5F5;
+  min-height: 100vh;
+  padding: 32rpx;
+
+  .form-content {
+    margin-bottom: 32rpx;
+    background-color: #fff;
+    border-radius: 16rpx;
+    padding: 0 32rpx;
+    position: relative;
+  }
+
+  .form-value {
+    margin-right: 24rpx;
+    flex: 1;
+    text-align: right;
+    color: rgba(0, 0, 0, 0.4);
+  }
+
+  .form-value-box {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    justify-content: flex-end;
+  }
+
+  .section-title {
+    padding: 32rpx 0 24rpx 0;
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #000000;
+    line-height: 48rpx;
+  }
+
+  .device-info-link {
+    padding: 16rpx 0 32rpx 0;
+    font-size: 28rpx;
+    color: #1D6FE9;
+    line-height: 40rpx;
+    text-align: center;
+  }
+
+  .uni-form-item {
+    display: flex;
+  }
+
+  .flex-space {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: rgba(0, 0, 0, 0.6);
+
+    &:not(:last-child) {
+      border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  .l-label {
+    display: flex;
+    align-items: center;
+    padding: 32rpx 0;
+    font-size: 32rpx;
+    color: rgba(0, 0, 0, 0.6);
+    line-height: 48rpx;
+
+    .flag {
+      font-size: 32rpx;
+      color: #E34D59;
+      line-height: 38rpx;
+    }
+  }
+
+  .annotation {
+    position: absolute;
+    bottom: 32rpx;
+    right: 32rpx;
+    font-weight: 400;
+    font-size: 24rpx;
+    color: rgba(0, 0, 0, 0.26);
+    line-height: 28rpx;
+    text-align: right;
+  }
+
+  .flex-col {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .uni-textarea {
+    width: 100%;
+    line-height: 48rpx;
+    height: 288rpx;
+    font-size: 28rpx;
+  }
+
+  .select-box {
+    /* 确保SinglePick组件内的容器占满剩余空间 */
+    flex: 1;
+    min-width: 0;
+    /* 防止内容溢出 */
+  }
+
+  .upload-box {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20rpx;
+    padding-bottom: 32rpx;
+
+    .view-img {
+      width: 176rpx;
+      height: 176rpx;
+    }
+  }
+
+  .common-picker {
+    flex: 1;
+    text-align: right;
+  }
+
+  .dateSelect-box {
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+  }
+
+  .right-icon {
+    margin-left: 16rpx;
+    width: 32rpx;
+    height: 32rpx;
+    text-align: right;
+  }
+
+  .err-text {
+    padding: 16rpx;
+    font-size: 24rpx;
+    color: rgb(250, 100, 100);
+  }
+
+  .submit-btn {
+    box-sizing: border-box;
+    width: 686rpx;
+    padding: 24rpx 0 26rpx 0;
+    line-height: 58rpx;
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: 400;
+    font-size: 40rpx;
+    color: rgba(255, 255, 255, 0.9);
+    background: linear-gradient(270deg, #1D9DE9 0%, #1D6FE9 100%);
+    box-shadow: 0px 16rpx 16rpx 2rpx rgba(29, 157, 233, 0.1);
+    border-radius: 52rpx;
+  }
+}
+
+.holderClass {
+  font-size: 28rpx;
+  color: rgba(0, 0, 0, 0.25);
+}
+</style>