business_tms_program 0.0.0

package/src/pages/afterSale/orderList.vue

@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { workStatus, workStatus as workStatusEnum } from '@/dict/afterSale'
+import { getOrderList } from '@/api/afterSale'
+import { throttle } from 'lodash-es';
+import DeviceInfo from './DeviceInfo.vue';
+import Skeleton from '@/components/Skeleton.vue';
+import LoadingView from '@/components/Loading.vue';
+import Empty from '@/components/Empty.vue';
+defineOptions({
+  name: "orderList"
+});
+const acticveTab = ref(workStatusEnum.uncomplete)
+const orderTabList = [
+  {
+    name: '工单未完结',
+    value: workStatusEnum.uncomplete,
+    num: 10
+  },
+  {
+    name: '工单已完结',
+    value: workStatusEnum.complete,
+    num: 100
+  }
+]
+const currentIndex = ref(0);
+const state = reactive({
+  itemDatas: [],
+  current: 1,
+  size: 5,
+  loadMore: false,
+  hasMore: true,
+  screenHeight: uni.getSystemInfoSync().windowHeight,
+  triggerRatio: 0.3, // 设置触发比例为屏幕高度的30%
+  total: 0,
+  hasSearch: false, // 是否有搜索过
+  scrollTop: 0, // 滚动距离
+  oldScrollTop: 0, // 上一次滚动距离
+});
+const completeState = reactive({
+  itemDatas: [],
+  current: 1,
+  size: 5,
+  loadMore: false,
+  screenHeight: uni.getSystemInfoSync().windowHeight,
+  triggerRatio: 0.3, // 设置触发比例为屏幕高度的30%
+  hasMore: true,
+  total: 0,
+  hasSearch: false, // 是否有搜索过
+  scrollTop: 0, // 滚动距离
+  oldScrollTop: 0, // 上一次滚动距离
+});
+const handleSwiperChange = (value: {
+  detail: {
+    current: number;
+    source: string;
+  }
+}) => {
+  const { detail } = value;
+  acticveTab.value = detail.current + 1;
+}
+const handleTabChange = (value: number) => {
+  acticveTab.value = value;
+  currentIndex.value = value - 1;
+}
+const loadData = async (page?: number) => {
+  if (state.loadMore) return;
+  state.loadMore = true;
+    const { records, current, total } = await getOrderList({
+      size: state.size,
+      current: page || state.current,
+      status: workStatusEnum.uncomplete,
+    });
+    state.loadMore = false;
+    if (!records) {
+      return
+    }
+    const newData = records.map((item) => {
+      return { ...item, show: true };
+    });
+    if (page === 1) {
+      state.itemDatas = newData;
+    } else {
+      state.itemDatas = [...state.itemDatas,...newData];
+    }
+    state.current = current;
+    state.hasMore = records.length > 0;
+    state.total = total;
+    if (!state.hasSearch) {
+      state.hasSearch = true;
+    }
+}
+const loadCompleteData = async (page?: number) => {
+  if (completeState.loadMore) return;
+  completeState.loadMore = true;
+  try {
+    const { records, current, total } = await getOrderList({
+      size: completeState.size,
+      current: page || completeState.current,
+      status: workStatusEnum.complete,
+    });
+    const newData = records.map((item) => {
+      return { ...item, show: true };
+    });
+    if (page === 1) {
+      completeState.itemDatas = newData;
+    } else {
+      completeState.itemDatas = [...completeState.itemDatas,...newData];
+    }
+    completeState.current = current;
+    completeState.hasMore = records.length > 0;
+    completeState.total = total;
+    if (!completeState.hasSearch) {
+      completeState.hasSearch = true;
+    }
+  } catch (error) {
+    console.error('获取数据失败', error);
+  }
+  completeState.loadMore = false;
+}
+// 滚动到底部加载更多
+const onScrollToLower = throttle(() => {
+  if (!state.loadMore && state.hasMore) {
+    state.current++;
+    nextTick(() => {
+      loadData(state.current);
+    })
+  }
+}, 500);
+const onCompleteScrollToLower = throttle(() => {
+  if (!completeState.loadMore && completeState.hasMore) {
+    completeState.current++;
+    nextTick(() => {
+      loadCompleteData(completeState.current);
+    })
+  }
+}, 500);
+const scroll = (e: any) => {
+  state.oldScrollTop = e.detail.scrollTop; // 更新滚动距离
+}
+onShow(() => {
+  loadData(1); // 刷新数据
+  loadCompleteData(1); // 刷新数据
+  state.scrollTop = state.oldScrollTop; // 恢复滚动距离
+  completeState.scrollTop = completeState.oldScrollTop; // 恢复滚动距离
+  nextTick(() => {
+    state.scrollTop = 0;
+    completeState.scrollTop = 0;
+  })
+})
+</script>
+
+<template>
+  <view class="content">
+    <view class="header">
+      <view class="tabList">
+        <view v-for="item in orderTabList" :key="item.value" class="tabItem" @click="handleTabChange(item.value)"
+          :class="{ 'active': item.value === acticveTab }">
+          {{ `${item.name}(${item.value === workStatusEnum.uncomplete ? state.total : completeState.total})` }}
+        </view>
+      </view>
+    </view>
+    <swiper 
+      :current="currentIndex"
+      @change="handleSwiperChange"
+      class="swiper"
+    >
+      <swiper-item v-for="(oitem) in orderTabList" :key="oitem.value">
+        <view class="container">
+          <scroll-view v-if="oitem.value === workStatusEnum.uncomplete" class="scroll-view"
+            scroll-y style="height: 100vh;"
+            :scroll-top="state.scrollTop" @scroll="scroll"
+            bounces show-scrollbar scroll-with-animation @scrolltolower="onScrollToLower"
+            :lower-threshold="`${state.screenHeight * state.triggerRatio}`">
+            <view class="scroll-box">
+              <view class="skeleton-box" v-if="!state.hasSearch">
+                <Skeleton class="skeleton-container"></Skeleton>
+                <Skeleton class="skeleton-container"></Skeleton>
+                <Skeleton class="skeleton-container"></Skeleton>
+              </view>
+              <view class="record-box" v-for="item in state.itemDatas" :key="item.id">
+                <DeviceInfo :data="item" />
+              </view>
+              <Empty v-if="state.itemDatas.length === 0 && state.hasSearch" />
+              <LoadingView v-if="state.loadMore" class="loading-indicator" :size="50"></LoadingView>
+              <view v-if="state.itemDatas.length > 0 && !state.hasMore" class="noMore">没有更多数据了</view>
+            </view>
+          </scroll-view>
+          <scroll-view v-else scroll-y style="height: 100vh;" bounces show-scrollbar scroll-with-animation
+            @scrolltolower="onCompleteScrollToLower" :scroll-top="completeState.scrollTop"
+            :lower-threshold="`${completeState.screenHeight * completeState.triggerRatio}`"
+            @scroll="(e) => completeState.oldScrollTop = e.detail.scrollTop"
+            >
+            <view class="scroll-box">
+            <view class="skeleton-box" v-if="!completeState.hasSearch">
+              <Skeleton class="skeleton-container"></Skeleton>
+              <Skeleton class="skeleton-container"></Skeleton>
+              <Skeleton class="skeleton-container"></Skeleton>
+            </view>
+            <view class="record-box" v-for="item in completeState.itemDatas" :key="item.id">
+              <DeviceInfo :data="item" />
+            </view>
+              <Empty v-if="completeState.itemDatas.length === 0 && completeState.hasSearch" />
+              <LoadingView v-if="completeState.loadMore" class="loading-indicator" :size="50"></LoadingView>
+              <view v-if="completeState.itemDatas.length > 0 && !completeState.hasMore" class="noMore">没有更多数据了</view>
+            </view>
+          </scroll-view>
+        </view>
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+<style scoped lang="less">
+.content {
+  background-color: #F5F5F5;
+  min-height: 100vh;
+}
+
+.header {
+  position: fixed;
+  width: 100%;
+  padding: 12rpx 32rpx;
+  background-color: #fff;
+  top: 0rpx;
+  left: 0;
+  z-index: 100;
+
+  .tabList {
+    display: flex;
+    border-radius: 16rpx;
+    border: 1rpx solid #1D6FE9; // 选中状态的边框颜色;
+    overflow: hidden;
+    font-size: 28rpx;
+    line-height: 40rpx;
+
+    .tabItem {
+      flex: 1; // 使两个tabItem平分宽度
+      text-align: center; // 文字居中
+      padding: 16rpx 0; // 添加一些内边距
+      border-bottom-color: #1D6FE9;
+      color: #1D6FE9; // 选中状态的文字颜色
+      padding: 12rpx 0;
+
+      &.active {
+        color: #fff;
+        background-color: #1D6FE9;
+      }
+    }
+  }
+}
+.swiper{
+  height: 100vh;
+}
+.scroll-box {
+  padding: 88rpx 32rpx 32rpx 32rpx;
+  box-sizing: border-box;
+}
+.skeleton-box{
+  padding-top: 32rpx;
+}
+.record-box {
+  margin-top: 32rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 32rpx;
+position: relative;
+  .device-box {
+    padding: 16rpx 16rpx 24rpx 16rpx;
+    background-color: rgba(0, 0, 0, 0.05);
+
+    .deviceName {
+      margin-bottom: 16rpx;
+      font-size: 28rpx;
+      color: #000000;
+      line-height: 40rpx;
+    }
+
+    .deviceCode {
+      font-size: 28rpx;
+      color: rgba(0, 0, 0, 0.4);
+      line-height: 34px;
+    }
+
+    .addressInfo {
+      display: flex;
+    }
+
+    .address {
+      flex: 1;
+      width: 380rpx;
+      font-size: 28rpx;
+      color: #000000;
+      line-height: 40rpx;
+    }
+
+    .address-icon {
+      width: 48rpx;
+      height: 48rpx;
+      image-rendering: -webkit-optimize-contrast; /* 优化图片渲染 */
+      image-rendering: pixelated; /* 像素化渲染 */
+      transform: translateZ(0); /* 开启GPU加速 */
+    }
+  }
+}
+</style>

package/src/pages/afterSale/returnVisit.vue

@@ -0,0 +1,288 @@
+<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 { FILE_UPLOAD_CONFIG, scrollIdPrefix } from '@/config/app';
+import {
+  isReturnVisitEnum as isReturnVisit,
+  isSolveOptions,
+  isSolveEnum,
+  isSatisfiedEnum,
+  isOverdueEnum,
+  workNodeEnum,
+  isSatisfiedOptions,
+  isOverdueOptions
+} from "@/dict/afterSale";
+import { type addReturnRecordParams, addReturnRecord } from '@/api/afterSale';
+import { useSystemStoreHook } from "@/stores/modules/system";
+import SinglePick from '@/components/SinglePick.vue';
+
+defineOptions({
+  name: "returnVisit"
+});
+// 定义校验规则
+const validationRules: ValidationRules<Partial<addReturnRecordParams>> = {
+  // isResolve: {
+  //   required: true,
+  //   message: '请选择是否解决',
+  // },
+}
+
+const initialData = {
+  isResolve: isSolveEnum.SOLVE,
+  isSatisfied: isSatisfiedEnum.SATISFIED,
+  isOverdue:isOverdueEnum.NO
+};
+
+const focusState = reactive({
+  remark: false,
+})
+const { formData, errState, setFormItem, validateForm } = useForm<Omit<addReturnRecordParams, 'id'>>(
+  initialData as Omit<addReturnRecordParams, 'id'>,
+  validationRules,
+  true,
+)
+const dict = ref(useSystemStoreHook()?.dict);
+const state = reactive({
+  workNodeStatus: workNodeEnum.RETURN_VISIT,
+  id: '',
+})
+const changeValue = (key: keyof Omit<addReturnRecordParams, 'id'>, detail: any) => {
+  setFormItem(key, detail.value);
+}
+
+const submitForm = throttle(async () => {
+  const validate = await validateForm();
+  if (!validate) {
+    return
+  }
+  const { imageList, ...other } = formData;
+  const res = await addReturnRecord({
+    id: parseInt(state.id),
+    imageList: imageList?.map((item: any) => item.id),
+    ...other,
+  })
+  if (res) {
+    uni.showToast({ title: '提交成功', icon: 'success' })
+    setTimeout(() => {
+      uni.navigateBack()
+    }, 1000)
+    uni.$emit('orderDetail-updated');
+  }
+}, 1000)
+
+onLoad((event: any) => {
+  const { orderId, workNodeStatus } = event;
+  if (workNodeStatus) {
+    state.workNodeStatus = workNodeStatus;
+    state.id = orderId;
+  }
+});
+onMounted(() => {
+  
+})
+</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}isResolve`">
+        <view class="l-label">
+          <view class="flag">*</view>问题解决
+        </view>
+        <SinglePick class="select-box" :value="formData.isResolve" :range="isSolveOptions"
+          value-key="value" label-key="label" showRightIcon placeholder="请选择"
+          @change="(v) => changeValue('isResolve', { value: v })" />
+      </view>
+      <view class="uni-form-item flex-space">
+        <view class="l-label">
+          <view class="flag">*</view>客户满意
+        </view>
+        <SinglePick class="select-box" :value="formData.isSatisfied" :range="isSatisfiedOptions"
+          value-key="value" label-key="label" showRightIcon placeholder="请选择"
+          @change="(v) => changeValue('isSatisfied', { value: v })" />
+      </view>
+      <view class="uni-form-item flex-space">
+        <view class="l-label">
+          是否超期<view class="label-tips">(大于36小时)</view>
+        </view>
+        <SinglePick class="select-box" :value="formData.isOverdue" :range="isOverdueOptions"
+          value-key="value" label-key="label" showRightIcon placeholder="请选择"
+          @change="(v) => changeValue('isOverdue', { value: v })" />
+      </view>
+    </view>
+    <view class="form-content">
+      <view class="l-label">
+        备注
+      </view>
+      <textarea class="uni-textarea" placeholder="请填写" :value="formData.remark" maxlength="1000"
+        @input="(e: any) => changeValue('remark', e.detail)" @focus="focusState.remark = true"
+        @blur="focusState.remark = false" placeholder-class="holderClass" />
+      <view class="annotation">{{ formData.remark?.length || 0 }}/1000</view>
+      <view class="err-text" v-if="errState.remark">{{ errState.remark }}</view>
+    </view>
+    <view class="form-content">
+      <view class="uni-form-item flex-space flex-col">
+        <view class="l-label">附件图片</view>
+        <upload class="upload-box" :files="formData.imageList" :maxCount="9" :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>
+    <RippleBtn @click="submitForm" :customStyle="'margin-top: 50rpx;padding-bottom: 10rpx'">
+      <view class="submit-btn">提交</view>
+    </RippleBtn>
+  </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;
+  }
+
+  .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;
+    }
+    .label-tips {
+      margin-left: 4rpx;
+      font-size: 20rpx;
+      color: rgba(0, 0, 0, 0.5);
+      align-self: flex-end;
+    }
+  }
+
+  .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.2);
+  }
+</style>