business_tms_program 0.0.0

package/src/pages/afterSale/orderFinish.vue

@@ -0,0 +1,517 @@
+<script setup lang="ts">
+import { useForm } from '@/hooks/useForm';
+import { reactive } from 'vue';
+import { type ValidationRules } from '@/utils/form';
+import { throttle } from 'lodash-es';
+import RippleBtn from '@/components/RippleBtn.vue';
+import Upload from '@/components/Upload.vue';
+import DrawerSelect from '@/components/DrawerSelect.vue';
+import SinglePick from '@/components/SinglePick.vue';
+import { FILE_UPLOAD_CONFIG, scrollIdPrefix } from '@/config/app';
+import {
+  SERVICETYPE,
+  WORKORDER_PROBLEM_CLASSIFICATION,
+  workFormOptions,
+  workNodeEnum,
+  workFormEnum,
+  isSolveOnce,
+  isSolveOnceOptions
+} from "@/dict/afterSale";
+import { type addFinishRecordParams, addFinishRecord } from '@/api/afterSale';
+import { useSystemStoreHook } from "@/stores/modules/system";
+
+defineOptions({
+  name: "follow"
+});
+// 定义校验规则
+const validationRules: ValidationRules<Partial<addFinishRecordParams>> = {
+  serviceType: {
+    required: true,
+    message: '请选择服务类型',
+  },
+  workForm: {
+    required: true,
+    message: '请选择工作形式',
+  },
+  arrivalTime:  {
+    required: false, validatFunc: (d): any => {
+      return new Promise((resolve, reject) => {
+        if(formData.workForm === workFormEnum.OFFLINE){
+          if(!d){
+            reject('请选择到场时间')
+          } else {
+            resolve(true)
+          }
+        }
+        resolve(true)
+      })
+  }, message: '请选择到场时间' },
+  problemsAnalysis: {
+    required: true,
+    message: '请填写故障问题分析',
+  },
+  processingResult: {
+    required: true,
+    message: '请填写处理结果描述',
+  },
+  completionTime: {
+    required: true,
+    message: '请选择处理完结时间',
+    validatFunc: (d): any => {
+      return new Promise((resolve, reject) => {
+        if(!d){
+          reject('请选择处理完结时间')
+        } else {
+          const selectedTime = new Date(d).getTime();
+          const currentTime = new Date().getTime();
+          if(selectedTime > currentTime){
+            reject('处理完结时间应小于当前时间')
+          } else {
+            resolve(true)
+          }
+        }
+      })
+    }
+  },
+  isSolveOnce: {
+    required: false,
+    message: '',
+    validatFunc: (d): any => {
+      return new Promise((resolve, reject) => {
+        console.log(d)
+        if(!d && d !== isSolveOnce.no){
+          reject('请选择')
+        } else {
+          resolve(true)
+        }
+      })
+    }
+  },
+  materialImageUrl:{
+    required: false,
+    message: '',
+    validatFunc: (d): any => {
+      return new Promise((resolve, reject) => {
+        if(d && d.length > 3){
+          reject('上传不超过3张图片')
+        }
+        resolve(true)
+      })
+    }
+  },
+  completionWatermarkPhoto:{
+    required: false, 
+    validatFunc: (d): any => {
+      return new Promise((resolve, reject) => {
+        if(d && d.length > 6){
+          reject('上传不超过6张图片')
+        }
+        resolve(true)
+      })
+    }
+  },
+  arrivalWatermarkPhoto: {
+    required: false, 
+    validatFunc: (d): any => {
+      return new Promise((resolve, reject) => {
+        if(d && d.length > 6){
+          reject('上传不超过6张图片')
+        }
+        resolve(true)
+      })
+    }
+  },
+}
+let timer: number | null = null
+const initialData = {
+  serviceType: '',
+  workForm: '',
+  isSolveOnce: '',
+};
+
+const focusState = reactive({
+  problemsAnalysis: false,
+  processingResult: false,
+  solution: false,
+  solutionDescription: false,
+  isSolveOnce: false,
+  isReturnVisit: false,
+  returnVisitDescription: false
+})
+const { formData, errState, setFormItem, validateForm, initialForm } = useForm<Omit<addFinishRecordParams, 'id'>>(
+  initialData as any,
+  validationRules,
+  true,
+)
+const dict = ref(useSystemStoreHook()?.dict);
+const state = reactive({
+  workNodeStatus: workNodeEnum.FINISH,
+  id: '',
+  showDrawer: false,
+})
+
+const changeValue = (key: keyof Omit<addFinishRecordParams, 'id'>, detail: any) => {
+  setFormItem(key, detail.value);
+}
+
+const submitForm = throttle(async () => {
+  const validate = await validateForm()
+  if (!validate) {
+    return
+  }
+  const { materialImageUrl, arrivalWatermarkPhoto, completionWatermarkPhoto, ...other } = formData;
+  uni.showLoading()
+  const res = await addFinishRecord({
+    id: parseInt(state.id),
+    materialImageUrl: materialImageUrl?.map((item: any) => item.id),
+    arrivalWatermarkPhoto: arrivalWatermarkPhoto?.map((item: any) => item.id),
+    completionWatermarkPhoto: completionWatermarkPhoto?.map((item: any) => item.id),
+    ...other,
+    workNode: parseInt(state.workNodeStatus),
+  })
+  uni.hideLoading()
+  if (res) {
+    uni.showToast({ title: '保存成功', icon: 'success' })
+    timer = setTimeout(() => {
+      uni.redirectTo({ url: `/pages/afterSale/orderDetail?orderId=${state.id}`})
+    }, 2000)
+    uni.$emit('orderDetail-updated');
+  }
+}, 1000)
+const initFormData = () => {
+  const storageData = uni.getStorageSync('afterSaleOrderFinishData' + state.id) || {};
+  initialForm(storageData)
+}
+onLoad((event: any) => {
+  const { orderId, workNodeStatus } = event;
+  if (workNodeStatus) {
+    state.workNodeStatus = workNodeStatus;
+    state.id = orderId;
+  }
+});
+onMounted(() => {
+  useSystemStoreHook().getDictList(SERVICETYPE);
+  useSystemStoreHook().getDictList(WORKORDER_PROBLEM_CLASSIFICATION);
+  initFormData()
+})
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+})
+const saveData = () => {
+  uni.setStorage({
+    key: 'afterSaleOrderFinishData' + state.id,
+    data: {
+      ...formData
+    }
+  })
+  uni.showToast({ title: '保存成功', icon: 'success' })
+}
+const confirmSelect = (v: any[]) => {
+  state.showDrawer = false;
+  changeValue('workOrderProblemClassification', { value: v })
+}
+const formatDict = (list: any = [], key: string) => {
+  let target = ''
+  list?.map((value: string) => {
+    const item = dict.value?.[key]?.find((item: any) => item.dictLabelValue === value)
+    target = item?.dictLabelName + '; '+ target
+  })
+  return target
+}
+</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" :id="`${scrollIdPrefix}serviceType`">
+        <view class="l-label">
+          <view class="flag">*</view>服务类型
+        </view>
+        <SinglePick class="select-box" :value="formData.serviceType" :range="dict?.[SERVICETYPE] || []"
+          value-key="dictLabelValue" label-key="dictLabelName" showRightIcon placeholder="请选择"
+          @change="(v) => changeValue('serviceType', { value: v })" />
+      </view>
+      <view class="err-text" v-if="errState.serviceType">{{ errState.serviceType }}</view>
+      <view class="uni-form-item flex-space"  :id="`${scrollIdPrefix}workForm`">
+        <view class="l-label">
+          <view class="flag">*</view>工作形式
+        </view>
+        <SinglePick class="select-box" :value="formData.workForm" :range="workFormOptions" value-key="value"
+          label-key="label" showRightIcon placeholder="请选择" @change="(v) => changeValue('workForm', { value: v })" />
+      </view>
+      <view class="err-text" v-if="errState.workForm">{{ errState.workForm }}</view>
+      <view class="uni-form-item flex-space" :id="`${scrollIdPrefix}arrivalTime`">
+        <view class="l-label">到场时间</view>
+        <view class="dateSelect-box select-box">
+          <image class="right-icon" src="/static/img/turn_right.png" />
+          <uni-datetime-picker v-model="formData.arrivalTime"
+            @change="(v: string) => changeValue('arrivalTime', { value: v })">
+            <view class="common-picker">{{ formData.arrivalTime || '请选择' }}</view>
+          </uni-datetime-picker>
+        </view>
+      </view>
+      <view class="err-text" v-if="errState.arrivalTime">{{ errState.arrivalTime }}</view>
+    </view>
+    <view class="form-content">
+      <view class="l-label">
+        <view class="flag">*</view>故障问题分析
+      </view>
+      <textarea class="uni-textarea" placeholder="请填写" :value="formData.problemsAnalysis" maxlength="1000"
+        @input="(e: any) => changeValue('problemsAnalysis', e.detail)" @focus="focusState.problemsAnalysis = true"
+        @blur="focusState.problemsAnalysis = false" placeholder-class="holderClass" />
+      <view class="annotation">{{ formData.problemsAnalysis?.length || 0 }}/1000</view>
+      <view class="err-text" v-if="errState.problemsAnalysis">{{ errState.problemsAnalysis }}</view>
+    </view>
+    <view class="form-content">
+      <view class="l-label">
+        <view class="flag">*</view>处理结果描述
+      </view>
+      <textarea class="uni-textarea" placeholder="请填写" :value="formData.processingResult" maxlength="1000"
+        @input="(e: any) => changeValue('processingResult', e.detail)" @focus="focusState.processingResult = true"
+        @blur="focusState.processingResult = false" placeholder-class="holderClass" />
+      <view class="annotation">{{ formData.processingResult?.length || 0 }}/1000</view>
+      <view class="err-text" v-if="errState.processingResult">{{ errState.processingResult }}</view>
+    </view>
+    <view class="form-content">
+      <view class="uni-form-item flex-space">
+        <view class="l-label">
+          <view class="flag">*</view>工单问题归类
+        </view>
+        <view class="select-item" @click="state.showDrawer = true">
+          <view v-if="formData.workOrderProblemClassification?.length > 0">
+            {{ formatDict(formData.workOrderProblemClassification, WORKORDER_PROBLEM_CLASSIFICATION) }}
+          </view>
+          <view v-else>请选择</view>
+          <image class="right-icon" src="/static/img/turn_right.png" />
+        </view>
+        <view class="err-text" v-if="errState.workOrderProblemClassification">
+          {{ errState.workOrderProblemClassification }}</view>
+      </view>
+      <view class="uni-form-item flex-space flex-col">
+        <view class="l-label">领用物料</view>
+        <upload class="upload-box" :files="formData.materialImageUrl" :maxCount="3" :showUpload="true" :size="176"
+          :moduleName="FILE_UPLOAD_CONFIG.after_order.moduleName"
+          @change="(files: any) => changeValue('materialImageUrl', { value: files })" />
+        <view class="err-text" v-if="errState.materialImageUrl">{{ errState.materialImageUrl }}</view>
+      </view>
+      <view class="uni-form-item flex-space flex-col">
+        <view class="l-label">领用物料描述</view>
+        <textarea class="uni-textarea" placeholder="请填写" 
+          :value="formData.materialsReceived" maxlength="100"
+          @input="(e: any) => changeValue('materialsReceived', e.detail)"
+        />
+        <view class="annotation">{{ formData.materialsReceived?.length || 0 }}/100</view>
+        <view class="err-text" v-if="errState.materialsReceived">{{ errState.materialsReceived }}</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="dateSelect-box select-box">
+          <image class="right-icon" src="/static/img/turn_right.png" />
+          <uni-datetime-picker v-model="formData.completionTime"
+            @change="(v: string) => changeValue('completionTime', { value: v })">
+            <view class="common-picker">{{ formData.completionTime || '请选择' }}</view>
+          </uni-datetime-picker>
+        </view>
+      </view>
+      <view class="err-text" v-if="errState.completionTime">{{ errState.completionTime }}</view>
+      <view class="uni-form-item flex-space">
+        <view class="l-label">
+          <view class="flag">*</view>一次性解决
+        </view>
+        <SinglePick class="select-box" :value="formData.isSolveOnce" :range="isSolveOnceOptions" value-key="value"
+          label-key="label" showRightIcon placeholder="请选择" @change="(v) => changeValue('isSolveOnce', { value: v })" />
+      </view>
+      <view class="err-text" v-if="errState.isSolveOnce">{{ errState.isSolveOnce }}</view>
+      <view class="uni-form-item flex-space flex-col">
+        <view class="l-label">到场水印照片</view>
+        <upload class="upload-box" :files="formData.arrivalWatermarkPhoto" :maxCount="6" :showUpload="true" :size="176"
+          :moduleName="FILE_UPLOAD_CONFIG.after_order.moduleName"
+          @change="(files: any) => changeValue('arrivalWatermarkPhoto', { value: files })" />
+        <view class="err-text" v-if="errState.arrivalWatermarkPhoto">{{ errState.arrivalWatermarkPhoto }}</view>
+      </view>
+      <view class="uni-form-item flex-space flex-col">
+        <view class="l-label">处理完结水印照片</view>
+        <upload class="upload-box" :files="formData.completionWatermarkPhoto" :maxCount="6" :showUpload="true" :size="176"
+          :moduleName="FILE_UPLOAD_CONFIG.after_order.moduleName"
+          @change="(files: any) => changeValue('completionWatermarkPhoto', { value: files })" />
+        <view class="err-text" v-if="errState.completionWatermarkPhoto">{{ errState.completionWatermarkPhoto }}</view>
+      </view>
+    </view>
+      <RippleBtn @click="saveData" :customStyle="'margin-top: 50rpx;padding-bottom: 10rpx'">
+      <view class="submit-btn">保存</view>
+    </RippleBtn>
+    <RippleBtn @click="submitForm" :customStyle="'margin-top: 18rpx;padding-bottom: 10rpx'">
+      <view class="submit-btn">提交</view>
+    </RippleBtn>
+    <DrawerSelect
+      title="工单问题归类"
+      v-model:visible="state.showDrawer"
+      value-key="dictLabelValue" label-key="dictLabelName"
+      :options="dict?.[WORKORDER_PROBLEM_CLASSIFICATION]"
+      @change="(v) => confirmSelect(v)"
+    />
+  </view>
+  </img>
+</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;
+  }
+
+  .uni-form-item {
+    display: flex;
+  }
+
+  .select-item {
+    display: flex;
+    align-items: center;
+    padding: 32rpx 0;
+    font-size: 32rpx;
+    color: rgba(0, 0, 0, 0.6);
+    line-height: 48rpx;
+    .right-icon {
+      margin-left: 16rpx;
+      width: 32rpx;
+      height: 32rpx;
+      text-align: right;
+    }
+  }
+  .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 {
+    margin-top: 8rpx;
+    padding-left: 16rpx;
+    padding-bottom: 12rpx;
+    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>