business_tms_program 0.0.0

package/src/hooks/useForm.ts

@@ -0,0 +1,222 @@
+import { reactive } from 'vue'
+import { throttle } from 'lodash-es'
+import { scrollToFirstError } from '@/utils/form'
+// 定义校验规则类型
+export interface ValidationRule<T = any> {
+  required?: boolean;
+  pattern?: RegExp;
+  message?: string;
+  validatFunc?: (
+    value: T
+  ) => boolean | string | Promise<boolean> | Promise<string>;
+}
+
+// 定义校验规则对象类型
+export type ValidationRules<T = any> = {
+  [K in keyof T]?: ValidationRule<T[K]>
+}
+/**
+ * 表单钩子函数，提供表单数据管理、验证和重置功能
+ * @template T 表单数据类型
+ * @param initialData 表单初始数据
+ * @param rules 表单验证规则
+ * @param validateScroll 是否在验证失败时滚动到第一个错误字段
+ * @returns 返回表单相关方法和状态
+ */
+export function useForm<T extends Record<string, any>>(
+  initialData: T,
+  rules: ValidationRules<T>,
+  validateScroll: boolean = false
+) {
+  // 表单数据
+  const formData = reactive<T>({ ...initialData }) as T
+  
+  // 错误状态类型定义
+  const errState: any = reactive(
+    Object.keys(initialData).reduce((acc, key) => {
+      acc[key as keyof T] = ''
+      return acc
+    }, {} as Record<keyof T, string>)
+  )
+  
+  /**
+   * 验证整个表单
+   * @returns 表单是否验证通过
+   */
+  const validateForm = async() => {
+    if (!rules) return true
+    const [isValid, firstErrorKey] = await formValidateFunc()
+    if (validateScroll && firstErrorKey) {
+      scrollToFirstError(firstErrorKey)
+    }
+    return isValid
+  }
+  
+  /**
+   * 重置表单到初始状态
+   */
+  const resetForm = () => {
+    Object.keys(initialData).forEach(key => {
+      formData[key as keyof T] = initialData[key as keyof T]
+      errState[key as keyof T] = ''
+    })
+  }
+
+  /**
+   * 设置表单字段值
+   * @param key 字段键名
+   * @param value 字段值
+   */
+  const setFormItem = (key: keyof T, value: T[keyof T]) => {
+    formData[key] = value
+    const validateField = throttle(() => {
+      if (!rules || !rules[key]) return
+      validateOneField(key)
+    }, 300)
+    validateField()
+  }
+
+  /**
+   * 初始化表单数据
+   * @param data 初始数据
+   */
+  const initialForm = (data: Partial<T>) => {
+    Object.keys(data).forEach(key => {
+      formData[key as keyof T] = data[key as keyof T] || initialData[key as keyof T]
+    })
+  }
+  /**
+   * 异步验证单个字段
+   * @param key 字段键名
+   * @returns 字段是否验证通过
+   */
+  const validateOneField = async (
+    key: keyof T,
+    ): Promise<boolean> => {
+    let isValid = true;
+    const value = formData[key];
+    const rule = rules[key];
+    if (!rule) {
+        return isValid;
+    }
+    
+    // 处理数组类型
+    if (Array.isArray(value)) {
+        if (rule.required && value.length === 0) {
+        errState[key] = rule.message;
+        isValid = false;
+        } else if (rule.validatFunc) {
+            try {
+              const result = await Promise.resolve(rule.validatFunc(value));
+              if (!result) {
+                errState[key] = rule.message;
+                isValid = false;
+              } else {
+                errState[key] = '';
+                isValid = true;
+              }
+            } catch (error) {
+              // 捕获reject的错误信息
+              errState[key] = typeof error === 'string' ? error : rule.message;
+              isValid = false;
+            }
+        } else {
+          // 数组类型，没有validatFunc且必填校验通过，清空错误状态
+          errState[key] = '';
+          isValid = true;
+        }
+    } else {
+        // 处理字符串类型
+        const stringValue = value || '';
+        let hasError = false;
+        let errorMessage = '';
+    
+        // 必填校验
+        if (rule.required && !stringValue) {
+        errorMessage = rule.message || '';
+        isValid = false;
+        hasError = true;
+        }
+    
+        // 正则校验（只有在有值且必填校验通过时才检查）
+        if (!hasError && rule.pattern && stringValue && !rule.pattern.test(stringValue)) {
+        errorMessage = rule.message || '';
+        isValid = false;
+        hasError = true;
+        }
+    
+        // 自定义校验函数（只有在必填和正则校验都通过时才检查）
+        if (!hasError && rule.validatFunc) {
+           try {
+              const result = await Promise.resolve(rule.validatFunc(value));
+              if (!result) {
+                errorMessage = typeof result === 'string' ? result : (rule.message || '');
+                isValid = false;
+                hasError = true;
+              }
+            } catch (error) {
+              // 捕获reject的错误信息
+              errorMessage = typeof error === 'string' ? error : (rule.message || '');
+              isValid = false;
+              hasError = true;
+            }
+        }
+        
+        // 根据是否有错误来设置或清空错误状态
+        if (hasError) {
+          errState[key] = errorMessage;
+        } else {
+          // 所有校验都通过，清空错误状态
+          errState[key] = '';
+        }
+    }
+
+    return isValid;
+    };
+
+  /**
+   * 表单校验函数
+   * @param key 可选参数，用于指定校验单个字段
+   * @returns 校验结果和第一个错误字段的键名
+   */
+  const formValidateFunc = async (
+    key?: keyof T
+  ): Promise<[boolean, keyof T | undefined]> => {
+    let isValid = true;
+    let firstErrorKey: keyof T | undefined;
+    
+    if (key) {
+      // 校验单个字段
+      const rule = rules[key];
+      if (rule) {
+        isValid = await validateOneField(key);
+      }
+    } else {
+      // 校验整个表单
+      for (const vKey of Object.keys(rules) as Array<keyof T>) {
+        const rule = rules[vKey];
+        if (rule) {
+          const fieldValid = await validateOneField(vKey);
+          if (!fieldValid) {
+            isValid = false;
+            if (!firstErrorKey) {
+              firstErrorKey = vKey;
+            }
+          }
+        }
+      }
+    }
+
+    return [isValid, firstErrorKey];
+  };
+
+  return {
+    formData,
+    errState,
+    validateForm,
+    setFormItem,
+    resetForm,
+    initialForm,
+    validateOneField
+  }
+}

package/src/hooks/useUpload.ts

@@ -0,0 +1,80 @@
+import { ref } from 'vue'; 
+import { uploadWxFile } from '@/api';
+
+/**
+ * @description: 文件路径数组
+ * @param {string} url 文件路径
+ * @param {string} uid 文件唯一标识
+ * @param {string} id 文件id
+ */
+type filePaths = {
+  url: string;
+  uid: string;
+  id?: string;
+}
+
+/**
+ * @description: 上传文件
+ * @param {filePaths} files 文件路径数组
+ * @param {any} formData 表单数据
+ * @return {Promise} Promise对象
+ */
+export function useUpload() {
+  const progress = ref(0);
+  const fileProgress = reactive<Record<string, number>>({});
+  const uploading = ref(false);
+  
+  const upload = async (files: filePaths[], formData?: any) => {
+    const filePaths = files.map(file => file.url);
+    const paths = Array.isArray(filePaths) ? filePaths : [filePaths];
+    uploading.value = true;
+    
+    // 初始化进度
+    files.forEach(fItem => {
+      fileProgress[fItem.uid] = 0;
+    });
+    
+    try {
+      return Promise.all(
+        files.map(fitem => 
+          uploadWxFile(fitem, formData, (p) => {
+            fileProgress[fitem.uid] = p;
+            updateTotalProgress();
+          })
+        )
+      );
+    } finally {
+      uploading.value = false;
+    }
+  };
+  
+  /**
+   * @description: 更新总进度
+   * @return {void} void
+   */
+  const updateTotalProgress = () => {
+    const progresses = Object.values(fileProgress);
+    if (progresses.length === 0) {
+      progress.value = 0;
+      return;
+    }
+    progress.value = Math.round(
+      progresses.reduce((sum, p) => sum + p, 0) / progresses.length
+    );
+  };
+  
+  return { 
+    upload, 
+    progress, 
+    fileProgress: readonly(fileProgress),
+    uploading 
+  };
+}
+
+export const formatFileRes = (res: any) => {
+  if (Array.isArray(res)) {
+    return res.map(item => {
+      return item.data?.data?.fileUrl;
+    }) 
+  } 
+}

package/src/main.ts

@@ -0,0 +1,8 @@
+import App from './App.vue'
+import { setupStore } from './stores'
+import { createApp } from 'vue'
+
+
+const app = createApp(App)
+setupStore(app) // 注册pinia
+app.mount('#app')

package/src/manifest.json

@@ -0,0 +1,39 @@
+{
+	"name": "chengyi",
+	"appid": "",
+	"description": "chengyi-app",
+	"versionName": "1.0.0",
+	"versionCode": "100",
+	"transformPx": false,
+	"mp-weixin": {
+		"appid": "",
+		"setting": {
+			"urlCheck": false
+		},
+		"usingComponents": true
+	},
+	"uniStatistics": {
+		"enable": false
+	},
+	"vueVersion": "3",
+	"permission": {
+		"scope.writePhotosAlbum": {
+			"desc": "需要访问您的相册"
+		},
+		"scope.userLocation": {
+			"desc": "你的位置信息将用于小程序位置接口的效果展示"
+		},
+		"scope.systemAlbum": {
+			"desc": "需要访问您的系统相册"
+		},
+		"scope.userLocationBackground": {
+			"desc": "需要在后台获取您的位置信息"
+		},
+		 "scope.camera": {
+			"desc": "需要摄像头权限进行扫码"
+		},
+		 "scope.chooseLocation": {
+			"desc": "需要从地图选择位置"
+		}
+	}
+}

package/src/pages/acceptance/DeviceInfo.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { PLACEHOLDER } from '@/config/app'
+import { installWorkNodeEnum, installWorkNodeMap } from '@/dict/installtion'
+const props = defineProps({
+    data: {
+        type: Object,
+        default: {}
+    },
+})
+const emit = defineEmits(['clickDevice']);
+const handleClickDevice = (item: any) => {
+    emit('clickDevice', {
+        ...item,
+        planId: props.data.planId
+    });
+}
+</script>
+<template>
+    <view class="urgency" v-if="data.isUrgency">紧急</view>
+     <view class="customerName">{{ data.customerName || PLACEHOLDER }}</view>
+        <view class="orderCode">{{ data.workOrderCode || PLACEHOLDER }}</view>
+        <view class="contact">
+          <view class="name">联系人姓名：{{ data.contactsName || PLACEHOLDER }}</view>
+          <view class="mobile">联系电话：{{ data.contactsMobile || PLACEHOLDER }}</view>
+        </view>
+    <view class="device-box" v-for="item in data.deviceList" 
+        :key="item.id" @click="handleClickDevice(item)">
+        <view class="deviceName">{{ item.deviceName || PLACEHOLDER }}</view>
+        <view class="deviceStatus" v-if="installWorkNodeMap[item.status]">
+            {{ installWorkNodeMap[item.status]?.label }}-正常</view>
+        <view class="deviceCode">{{ item.deviceCode || PLACEHOLDER }}</view>
+        <view class="addressInfo">
+            设备地址：
+            <view class="address">{{ `${item.provinceName || PLACEHOLDER}
+            ${item.cityName || PLACEHOLDER}
+            ${item.areaName || PLACEHOLDER}
+            ${item.address || PLACEHOLDER}` }}</view>
+        </view>
+    </view>
+</template>
+
+<style scoped>
+    .urgency {
+        position: absolute;
+        right: 32rpx;
+        top: 32rpx;
+        display: block;
+        padding: 6rpx 16rpx 8rpx 16rpx;
+        font-size: 24rpx;
+        color: #E34D59;
+        line-height: 34rpx;
+        background: rgba(227,77,89,0.1);
+        border-radius: 8rpx;
+        border: 1rpx solid #E34D59;
+    }
+  .customerName {
+    font-size: 32rpx;
+    color: #000000;
+    line-height: 48rpx;
+    margin-bottom: 16rpx;
+    font-weight: 600;
+  }
+
+  .orderCode {
+    font-size: 28rpx;
+    color: rgba(0, 0, 0, 0.4);
+    line-height: 34rpx;
+    margin-bottom: 16rpx;
+  }
+
+  .contact {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 32rpx;
+    font-size: 28rpx;
+    color: #000000;
+    line-height: 40rpx;
+  }
+.device-box {
+    margin-bottom: 16rpx;
+    padding: 16rpx 16rpx 24rpx 16rpx;
+    background-color: #F3F8FE;
+    border-radius: 8rpx;
+    position: relative;
+    .deviceName {
+        font-size: 28rpx;
+        color: #000000;
+        line-height: 40rpx;
+        font-weight: 500;
+    }
+
+    .deviceCode {
+        font-size: 28rpx;
+        color: rgba(0, 0, 0, 0.4);
+        line-height: 34px;
+    }
+
+    .addressInfo {
+        display: flex;
+        font-size: 28rpx;
+    }
+
+    .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加速 */
+    }
+
+    .deviceStatus {
+        display: block;
+        position: absolute;
+        top: 16rpx;
+        right: 16rpx;
+        padding: 4rpx 16rpx 6rpx 16rpx;
+        font-size: 20rpx;
+        color: #1D6FE9;
+        line-height: 30rpx;
+        border-radius: 8rpx;
+        border: 1rpx solid #1D6FE9;
+    }
+}
+</style>