business_tms_program 0.0.0

package/src/pages/installtion/addRecord.vue

@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { type addAcceptanceParams, addRecord, updateRecord } from '@/api/installtion';
+import { type ValidationRules } from '@/utils/form';
+import { acceptanceStatusEnum, installWorkNodeOptions, installWorkNodeEnum
+ } from '@/dict/installtion';
+import { useInstalltionStoreHook } from '@/stores/modules/installtion';
+import { isArray } from 'lodash-es';
+import { useForm } from '@/hooks/useForm';
+import SinglePick from '@/components/SinglePick.vue';
+import Upload from '@/components/Upload.vue';
+import RippleBtn from '@/components/RippleBtn.vue';
+import { FILE_UPLOAD_CONFIG, scrollIdPrefix } from '@/config/app';
+defineOptions({
+  name: "addRecord"
+});
+const InstalltionStore = useInstalltionStoreHook();
+const followInfo = computed(() => InstalltionStore.info);// 获取工单信息，响应式
+const workNodeOptions = installWorkNodeOptions.filter((item: any) => item.value !== installWorkNodeEnum.ACCEPT)
+// 定义校验规则
+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: ''
+  },
+  successSubmit: false,
+  showLocationTips: false,
+})
+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 submitForm = async () => {
+  if (state.successSubmit) {
+    uni.showToast({ title: '请勿重复提交', icon: 'error' })
+    return;
+  }
+  const validateResult = await validateForm();
+  if (!state.location.address) {
+    state.showLocationTips = true;
+    return;
+  }
+  let res;
+  const params = {
+    ...formData, planDeviceId: state.deviceId,
+    imageList: formData.imageList?.map((item: any) => item.id) || [],
+    deviceLocation: JSON.stringify(state.location),
+    workOrderCode: state.workOrderCode,
+    deviceCode: state.deviceCode,
+  }
+  if (!validateResult) {
+    return;
+  }
+  // 如果工单status为已完成，则编辑
+  if (followInfo.value.status >= formData.workNodeFlag) {
+    //查找编辑ID
+    const item = followInfo.value.recordList.find((item: any) => item.workNodeFlag === formData.workNodeFlag)
+    res = await updateRecord({
+      ...params,
+      id: item?.id
+    })
+  } else {
+    res = await addRecord(params, {
+      permActionName: formData.workNodeFlag === installWorkNodeEnum.READY ? 'installWorkReady' : 'installWorkComplete',
+    })
+  }
+  if (res) {
+    uni.showToast({ title: '提交成功', icon: 'success' })
+    state.successSubmit = true;
+    timer = setTimeout(() => {
+      uni.navigateBack()
+    }, 2000)
+    uni.$emit('installtionOrderDetail-updated');
+  }
+}
+onLoad(async (event: any) => {
+  const { deviceId, workOrderCode, deviceCode } = event
+  state.deviceId = deviceId;
+  state.workOrderCode = workOrderCode;
+  state.deviceCode = deviceCode
+  state.successSubmit = false;
+  setFormItem('workNodeFlag', parseInt(event.status))
+})
+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>
+        <SinglePick class="select-box"
+          :value="formData.workNodeFlag"
+          :range="workNodeOptions"
+          value-key="value" disabled
+          label-key="label" showRightIcon placeholder="请选择" @change="(v: any) => changeValue('workNodeFlag', { value: v })" />
+      </view>
+      <view class="uni-form-item flex-space">
+        <view class="l-label">
+          状态
+        </view>
+        <SinglePick class="select-box" :value="formData.status" disabled
+          :range="[{ label: '正常', value: acceptanceStatusEnum.YES }]" 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" :class="errState.imageList ? 'errorUpload': ''" :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>
+    <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;
+  }
+
+  .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;
+    min-width: 188rpx;
+    white-space: nowrap;
+    .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;
+    }
+  }
+  .errorUpload{
+    padding-bottom: 0;
+  }
+  .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 0 16rpx 0;
+    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>

package/src/pages/installtion/orderDetail.vue

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Record from './Record.vue'
+import { installWorkNodeMap, acceptanceStatusEnum,
+  acceptanceStatusMap, deviceStatusEnum } from '@/dict/installtion'
+import { getInstalltionDeviceDetail } from '@/api/installtion'
+import { useInstalltionStoreHook } from '@/stores/modules/installtion';
+import RippleBtn from '@/components/RippleBtn.vue';
+import Timeline  from '@/components/Timeline.vue';
+import { UPLOAD_HOST } from '@/config/app'
+import { formatDateTime } from '@/utils/index'
+import { useUserStore } from '@/stores/modules/user';
+
+type deviceRecord = { deviceCode: string; deviceName: string; address: string; status: number; }
+defineOptions({
+  name: "orderDetail"
+});
+const InstalltionStore = useInstalltionStoreHook();
+const useStore = useUserStore();
+const state = reactive({
+  info: {
+    recordList: [] as any,
+    deviceList: [] as Array<deviceRecord>,
+    status: deviceStatusEnum.ORDER_BEGIN,
+    id: '',
+    workOrderCode: '',
+    deviceCode: '',
+  } as any, 
+  deviceId: '',
+  type: '',
+})
+const toAddRecord = () => {
+  if(!hasSubmitPerms()) {
+    uni.showToast({ title: '暂无新增工作记录权限，请向管理员申请', icon: 'none'})
+    return
+  }
+  const { id, status, workOrderCode, deviceCode } = state.info;
+  const params = `deviceId=${id}&status=${Number(status) + 1}&workOrderCode=${workOrderCode}&deviceCode=${deviceCode}`
+  // 前往验收
+  if (Number(status) === deviceStatusEnum.ORDER_COMPLETE) {
+    uni.redirectTo({ url: `/pages/installtion/addAcceptance?${params}` })
+    return;
+  }
+  uni.redirectTo({ 
+    url: `/pages/installtion/addRecord?${params}`
+  }) 
+}
+const fetchData = async (id: number | string) => {
+  const res = await getInstalltionDeviceDetail({ id });
+  const { deviceCode, deviceName, address, status,...other } = res;
+    state.info = {
+    ...other,
+    status,
+    deviceCode,
+    deviceList: [{
+      deviceCode,
+      deviceName,
+      address,
+      status,
+    }],
+  };
+  InstalltionStore.setSystemInfo(res);
+}
+onLoad( async(event: any) => {
+  fetchData(event.deviceId);
+  state.deviceId = event.deviceId;
+  state.type = event.type;
+})
+onMounted(async () => {
+  uni.$on('installtionOrderDetail-updated', () => {
+    fetchData(state.deviceId); // 刷新数据
+    uni.$emit('installtionList-updated');
+  });
+})
+const hasSubmitPerms = () => {
+  const { status } = state.info;
+  if (status === deviceStatusEnum.BEGIN) {
+    return useStore.hasPerms('installWorkReady');
+  }
+  if (status === deviceStatusEnum.READY) {
+    return useStore.hasPerms('installWorkComplete');
+  }
+  if (status === deviceStatusEnum.ORDER_COMPLETE) {
+    return useStore.hasPerms('installWorkAcceptance');
+  }
+  return false
+}
+const submitText = computed(() => {
+  const { status } = state.info;
+  if (status === deviceStatusEnum.COMPLETE) {
+    return '新增验收记录';
+  }
+  return '新增工作记录';
+})
+const showSubmitBtn = computed(() => {
+  const { status } = state.info;
+  if (state.type === 'toAcceptance' && status === deviceStatusEnum.COMPLETE) {
+    return true;
+  }
+  if (status === deviceStatusEnum.COMPLETE) {
+    return false;
+  }
+   if (status === deviceStatusEnum.ACCEPT) {
+    return false;
+  }
+  return true;
+})
+const handlePreview = (list: [], index: number) => {
+  const urls = list.map(file =>  UPLOAD_HOST + file.attachmentUrl)
+  uni.previewImage({
+    current: index, // 当前显示图片的索引
+    urls: urls, // 需要预览的图片链接列表
+    indicator: 'number', // 显示页码指示器
+    loop: false // 不循环预览
+  })
+}
+</script>
+
+<template>
+  <view class="content">
+    <view class="record-box">
+      <Record :data="state.info" type="positioning" />
+    </view>
+    <view class="timeline-box" v-if="state.info.recordList.length > 0">
+      <Timeline :items="state.info.recordList">
+        <template #content="{ item }">
+          <view class="title">{{ installWorkNodeMap[item.workNodeFlag]?.label }}
+            <view class="status">{{ acceptanceStatusMap[1]}}</view>
+          </view>
+          <view class="desc">{{item.userName && `${item.userName}: `}}{{ item.description }}</view>
+          <img v-for="(imgItem, index) in item?.imageList" :key="imgItem.attachmentId"
+            class="img" :src="UPLOAD_HOST + imgItem.attachmentUrl"
+            @click="handlePreview(item.imageList, index)"
+          />
+          <view class="time">{{ formatDateTime(item.createTime) }}</view>
+        </template>
+      </Timeline>
+    </view>
+    <view class="footer">
+      <RippleBtn :customStyle="'padding-bottom: 10rpx'" 
+        v-if="showSubmitBtn">
+        <view class="submit-btn" @click="toAddRecord">{{ submitText }}</view>
+      </RippleBtn>
+    </view>
+  </view>
+</template>
+<style scoped lang="less">
+.content {
+  padding-bottom: 120rpx;
+  background-color: #F5F5F5;
+  min-height: 100vh;
+
+  .footer {
+    display: flex;
+    justify-content: center;
+    margin-top: 334rpx;
+  }
+
+  .record-box {
+    margin-bottom: 32rpx;
+    padding: 12rpx;
+    background-color: #fff;
+  }
+  .timeline-box {
+    padding: 48rpx;
+    background-color: #fff;
+    .title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 16rpx;
+      font-size: 28rpx;
+      color: #000000;
+      line-height: 40rpx;
+      .status{
+        display: block;
+        margin-left: 16rpx;
+        padding: 4rpx 16rpx 6rpx 16rpx;
+        line-height: 30rpx;
+        font-size: 20rpx;
+        background: #337DEB;
+        border-radius: 8rpx;
+        color: #fff;
+      }
+    }
+    .desc{
+      margin-bottom: 16rpx;
+      font-size: 28rpx;
+      color: #000000;
+      line-height: 40rpx;
+    }
+    .img{
+      margin-bottom: 16rpx;
+      margin-right: 16rpx;
+      width: 176rpx;
+      height: 176rpx;
+      border-radius: 8rpx;
+    }
+    .time{
+      padding-bottom: 36rpx;
+      font-size: 28rpx;
+      color: rgba(0, 0, 0, 0.4);
+      line-height: 34rpx;
+    }
+  }
+  .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: 600;
+    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;
+  }
+}
+    
+</style>

package/src/pages/installtion/orderList.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { getInstalltionOrderList } from '@/api/installtion'
+import Record from './Record.vue'
+import LoadingView from '@/components/Loading.vue';
+import Skeleton from '@/components/Skeleton.vue';
+import Empty from '@/components/Empty.vue';
+import { throttle } from 'lodash-es';
+defineOptions({
+  name: "installtionList"
+});
+const state = reactive({
+  itemDatas: [],
+  current: 1,
+  size: 5,
+  loadMore: false,
+  hasMore: true,
+  screenHeight: uni.getSystemInfoSync().windowHeight,
+  triggerRatio: 0.3, // 设置触发比例为屏幕高度的30%
+  loadingTop: false, // 顶部下拉刷新
+  customerCode: '',
+  hasSearch: false, // 是否有搜索过
+});
+const loadData = async (page?: number) => {
+  if (state.loadMore) return;
+  state.loadMore = true;
+    const { records, current } = await getInstalltionOrderList({
+      size: state.size,
+      current: page || state.current,
+    });
+    state.loadMore = false;
+    if (!records) {
+      return
+    }
+    if (page === 1) {
+      state.itemDatas = records;
+    } else {
+      state.itemDatas = [...state.itemDatas,...records];
+    }
+    state.current = current;
+    state.hasMore = records.length > 0;
+    if (!state.hasSearch) {
+      state.hasSearch = true;
+    }
+}
+// 滚动到底部加载更多
+const onScrollToLower = throttle(() => {
+  if (!state.loadMore && state.hasMore) {
+    state.current++;
+    nextTick(() => {
+      loadData(state.current);
+    })
+  }
+}, 500);
+const toDetail = (item: any) => {
+  uni.navigateTo({ url: `/pages/installtion/orderDetail?deviceId=${item.id}` }) 
+}
+onMounted(async () => {
+  loadData(1);
+  uni.$on('installtionList-updated', () => {
+    loadData(1); // 刷新数据
+  });
+})
+</script>
+
+<template>
+  <view class="content">
+    <scroll-view class="scroll-view" scroll-y style="height: 100vh;" bounces show-scrollbar scroll-with-animation
+      @scrolltolower="onScrollToLower" :lower-threshold="`${state.screenHeight * state.triggerRatio}`">
+      <view class="scroll-box">
+      <view v-for="item in state.itemDatas" :key="item.planId" class="record-box">
+        <Record :data="item" @clickDevice="toDetail" />
+      </view>
+      <view class="skeleton-box" v-if="!state.hasSearch">
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+      </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>
+  </view>
+</template>
+<style scoped lang="less">
+.content {
+  background-color: #F5F5F5;
+  min-height: 100vh;
+  box-sizing: border-box;
+  .scroll-box{
+    padding: 32rpx;
+  }
+  .record-box{
+   border-radius: 16rpx; 
+   overflow: hidden;
+   margin-bottom: 32rpx;
+  }
+}
+</style>