business_tms_program 0.0.0

package/src/pages/afterSale/faultReport.vue

@@ -0,0 +1,552 @@
+<script setup lang="ts">
+import { ref, getCurrentInstance } from 'vue'
+import { type ValidationRules } from '@/utils/form';
+import { addAfterOrder, type OrderListParams, queryDeviceDetail } from '@/api/order';
+import { useForm } from '@/hooks/useForm';
+import Upload from '@/components/Upload.vue';
+import { FILE_UPLOAD_CONFIG, scrollIdPrefix } from '@/config/app';
+import { getUserListApi } from '@/api/user';
+import  RippleBtn from '@/components/RippleBtn.vue';
+import SinglePick from '@/components/SinglePick.vue';
+import Loading from '@/components/Loading.vue';
+import { useUserStore } from '@/stores/modules/user';
+import { debounce } from 'lodash-es';
+defineOptions({
+    name: "faultReport"
+});
+type AccountType = {
+    userCode: string; 
+    nickname: string;
+    mobile: string;
+    checked?: boolean;
+}
+const initialData = {
+    customerName: '',
+    imageUploadList: [],
+    executionMemberList: [],
+    statusDescription: '',
+} as Partial<OrderListParams>;
+const { proxy } = getCurrentInstance() as any;
+const useStore = useUserStore();
+const focusState = reactive({
+    customerName: false,
+    deviceCode: false,
+})
+const state = reactive({
+    info: {
+        contactsName: '',
+        contactsMobile: '',
+        regionDictLabelName: '',
+        deviceCode: '',
+        customerName: '',
+        customerCode: ''
+    },
+    searchLoading: false,
+    hasSearch: false,
+    searchSuccess: false,
+    showPopup: false,
+})
+let timer: number | null = null
+const validateCode = (value: any): any => {
+	return new Promise(async(resolve, reject) => {
+        if (!value) reject('设备编码不能为空');
+        else if (value.length < 5) reject('设备编码长度不足');
+		else {
+            resolve(true);
+		}
+	})
+}
+const validationRules: ValidationRules<Partial<OrderListParams>> = {
+    deviceCode: { required: true, validatFunc: validateCode, message: '请输入设备编码'},
+    statusDescription: { required: true, message: '请填写现状描述' },
+    executionMemberList: { required: true, message: '请选择执行成员' },
+    responsiblePerson: { required: true, message: '请选择执行负责人' },
+}
+const { formData, errState, setFormItem, validateForm } = useForm<OrderListParams>(
+    initialData as OrderListParams,
+    validationRules,
+    true,
+)
+const accountList = ref<Array<AccountType>>([]);
+const executionMemberList = computed(() => {
+    if (!formData.executionMemberList || formData.executionMemberList?.length === 0) {
+        return '请选择'
+    }
+      return accountList.value
+        .filter((item: AccountType) => formData.executionMemberList.includes(item.userCode))
+        .map(item => item.nickname)
+        .join(', ');
+})
+const changeValue = (key: keyof OrderListParams, detail: any) => {
+    if (key === 'deviceCode') {
+        setFormItem(key, detail.value);
+        fetchDeviceDetail(detail.value);
+        return;
+    }
+    setFormItem(key, detail.value);
+}
+const toScan = () => {
+    uni.scanCode({
+        scanType: ['barCode', 'qrCode', 'wxCode'],
+        success: (res: UniApp.ScanCodeSuccessRes) => {
+          const { scanType, result } = res;
+          if (scanType === "QR_CODE" && result) {
+            // 截取url的deviceSn参数
+            const hash = result.split("?")[1] || "";
+            const deviceSn = hash.replaceAll("deviceSn=", '');
+            if (deviceSn) {
+              formData.deviceCode = deviceSn;
+              fetchDeviceDetail(deviceSn);
+              return;
+            }
+          }
+          if (!res.result) {
+            uni.showToast({
+              title: '未识别到设备',
+              icon: 'none'
+            });
+            return;
+          }
+          if (res.scanType === "CODE_128") {
+            fetchDeviceDetail(result);
+          }
+        },
+        fail: (err) => {
+            console.log('扫码失败', err);
+        }
+    });
+}
+const toSearchDevice = () => {
+    uni.navigateTo({ url: `/pages/afterSale/searchDeviceList`}) 
+}
+const fetchDeviceDetail = debounce(async (code: string | undefined) => {
+    state.searchLoading = true;
+    state.hasSearch = true;
+    const res = await queryDeviceDetail({
+        deviceCode: code
+    })
+    if (res) {
+        state.searchSuccess = true;
+        state.info = res || {};
+    } else {
+        state.info = {}
+        state.searchSuccess = false;
+    }
+    state.searchLoading = false;
+}, 300)
+const initAccountList = async() => {
+    const res = await getUserListApi({
+        size: 999,
+        current: 1,
+    }); 
+    if (res) {
+        accountList.value = res;
+        // 填充执行负责人
+        if (useStore.getUserInfo?.userCode) {
+            setFormItem('responsiblePerson', useStore.getUserInfo?.userCode);
+            setFormItem('executionMemberList', [useStore.getUserInfo?.userCode]);
+        }
+    }
+}
+const open = () => {
+	proxy.$refs.popup.open()	
+}
+const confirmSelect = () => {
+	proxy.$refs.popup.close()	
+}
+
+const changeGroup = (e: {detail: any}) => {
+    changeValue('executionMemberList', { value: e.detail.value });
+}
+const changePopup =() => {
+    state.showPopup = !state.showPopup;
+}
+const submitForm = async () => {
+    const validate = await validateForm()
+	if (!validate) {
+        return
+    }
+    const res = await addAfterOrder({
+         ...formData,
+         customerCode: state.info.customerCode,
+         customerName: state.info.customerName,
+         imageUploadList: formData.imageUploadList?.map(item => item.id),
+    });
+    if (res) {
+        uni.showToast({ title: '提交成功', icon:'success' })
+        timer = setTimeout(() => {
+            uni.switchTab({ url: '/pages/workspace/index' });
+        }, 2000)
+    }
+}
+onLoad((event: any) => {
+    if (event.deviceCode) {
+        setFormItem('deviceCode', event.deviceCode);
+        fetchDeviceDetail(event.deviceCode);
+    }
+})
+onMounted(() => {
+    initAccountList();
+})
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+})
+</script>
+
+<template>
+    <page-meta :page-style="'overflow:'+(state.showPopup ? 'hidden':'visible')"></page-meta>
+    <view class="content">
+        <view class="title">设备维修信息</view>
+        <view class="flex-box">
+            <form class="form-content">
+                <view class="uni-form-item flex-space" :id="`${scrollIdPrefix}deviceCode`">
+                    <view class="form-label">维修设备编码</view>
+                    <view class="search-box">
+                        <input class="uni-input"
+                            placeholder="请填写" :value="formData.deviceCode"
+                            @click="toSearchDevice"
+                            @focus="focusState.deviceCode = true"
+                            @blur="focusState.deviceCode = false"
+                            placeholder-class="holderClass"
+                        />
+                        <image class="search-icon"
+                            @click="toSearchDevice"
+                            src="/static/img/search.png" 
+                            ></image>
+                        <image class="scan-icon" 
+                            src="/static/img/scan.png" 
+                            @click="toScan()"></image>
+                    </view>
+                </view>
+                 <view class="err-text" v-if="errState.deviceCode">{{errState.deviceCode}}</view>
+                <view v-if="!state.searchSuccess && state.hasSearch" class="searchTips">
+                    <view v-if="state.searchLoading" class="flex loading-box">
+                        查找设备中<Loading :size="38" color="#ccc" :style="{ marginLeft: '12rpx' }"/>
+                    </view>
+                    <view v-else class="loading-box">系统查无此设备</view>
+                </view>
+                <view v-if="state.searchSuccess">
+                     <view class="uni-form-item">
+                        <view class="label">客户名称</view>
+                        <view class="uni-text">{{ state.info.customerName }}</view>
+                    </view>
+                    <view class="uni-form-item">
+                        <view class="label">联系人姓名</view>
+                        <view class="uni-text">{{ state.info.contactsName }}</view>
+                    </view>
+                    <view class="uni-form-item">
+                        <view class="label">联系人电话</view>
+                        <view class="uni-text">{{ state.info.contactsMobile }}</view>
+                    </view>
+                    <view class="uni-form-item">
+                        <view class="label">客户业务区域 </view>
+                        <view class="uni-text">{{ state.info.regionDictLabelName }}</view>
+                    </view>
+                </view>
+            </form>
+        </view>
+        <view class="title">故障现状</view>
+        <view class="grid-box" :id="`${scrollIdPrefix}statusDescription`">
+            <view class="textarea-title"><view class="flag">*</view><view class="label">现状描述</view></view>
+            <view class="showTotal">{{ formData.statusDescription?.length }}/1000</view>
+            <textarea class="textarea" @input="(e: any) => changeValue('statusDescription', e.detail)" :maxlength="1000" placeholder="请填写"/>
+            <view class="err-text" v-if="errState.statusDescription">{{errState.statusDescription}}</view>
+        </view>
+        <view class="grid-box">
+            <view class="textarea-title"><view class="label">图片上传</view></view>
+            <upload class="upload-box" :files="formData.imageUploadList"
+                :maxCount="6" :showUpload="true" :size="176"
+                :moduleName="FILE_UPLOAD_CONFIG.after_order.moduleName"
+                @change="(files: any) => changeValue('imageUploadList', { value: files })" />
+        </view>
+        <view class="title">执行人员</view>
+        <view class="flex-box">
+            <form class="form-content" :id="`${scrollIdPrefix}responsiblePerson`">
+                <view class="uni-form-item flex-space">
+                    <view class="l-label"><view class="flag">*</view>执行负责人</view>
+                    <SinglePick
+                        :value="formData.responsiblePerson"
+                        :range="accountList"
+                        value-key="userCode"
+                        label-key="nickname"
+                        placeholder="请选择"
+                        @change="(v) => changeValue('responsiblePerson', { value: v })"
+                    />
+                </view>
+                <view class="err-text" v-if="errState.responsiblePerson">{{errState.responsiblePerson}}</view>
+                <view class="uni-form-item flex-space" :id="`${scrollIdPrefix}executionMemberList`">
+                    <view class="l-label"><view class="flag">*</view>执行成员</view>
+                    <view class="flex align-center">
+                        <view class="menber" @click="open">{{ executionMemberList }}</view>
+                        <image class="right-icon" src="/static/img/turn_right.png" />
+                    </view>
+                </view>
+                <view class="err-text" v-if="errState.executionMemberList">{{errState.executionMemberList}}</view>
+            </form>
+        </view>
+        <RippleBtn @click="submitForm" :customStyle="'padding-bottom: 10rpx'">
+            <view class="submit-btn">提交</view>
+        </RippleBtn>
+        <uni-popup ref="popup" background-color="#fff" @change="changePopup">
+            <view class="popup-content">
+                <view class="title">请选择执行成员</view>
+                <checkbox-group class="checkbox" @change="changeGroup">
+                    <label class="flex" v-for="item in accountList" :key="item.userCode">
+                        <checkbox :value="item.userCode" color="#1D6FE9" :checked="item.checked" />
+                        <view class="nickname">{{item.nickname}}</view>
+                        <view class="mobile">{{item.mobile}}</view>
+                    </label>
+                </checkbox-group>
+                <view class="btn-box">
+                    <button size="mini" class="confirm-btn" @click="confirmSelect">确定</button>
+                </view>
+            </view>
+        </uni-popup>
+    </view>
+</template>
+<style lang="less" scoped>
+@import '@/styles/index.less';
+.page {
+	 background-color: #F5F5F5;
+}
+.content {
+    background-color: #F5F5F5;
+    min-height: 100vh;
+    padding: 32rpx;
+    .title {
+        margin-bottom: 16rpx;
+        font-size: 36rpx;
+        color: #000000;
+        line-height: 52rpx;
+    }
+    .searchTips{
+        padding: 32rpx 0;
+    }
+    .flex-box {
+        display: flex;
+        margin-bottom: 32rpx;
+        padding: 0 32rpx;
+        background-color: #fff;
+        border-radius: 16rpx;
+        .form-content {
+            width: 100%;
+        }
+        .uni-form-item {
+            width: 100%;
+            position: relative;
+            display: flex;
+            align-items: center;
+            &:not(:last-child) {
+                border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
+            }
+            .label {
+                padding: 32rpx 0;
+                font-size: 32rpx;
+                color: rgba(0, 0, 0, 0.6);
+                line-height: 48rpx;
+            }
+            .uni-text {
+                flex: 1;
+                padding: 32rpx 0;
+                font-weight: 400;
+                font-size: 32rpx;
+                color: black;
+                line-height: 48rpx;
+                text-align: right;
+                font-style: normal;
+            }
+            .uni-input {
+                flex: 1;
+                font-size: 32rpx;
+                color: black;
+                line-height: 46rpx;
+                text-align: right;
+                &.focus {
+                    border-bottom-color: #1D6FE9;
+                    /* 聚焦时改变下划线颜色 */
+                    outline: none;
+                    /* 移除默认的聚焦轮廓 */
+                }
+            }
+            .form-label {
+                font-size: 32rpx;
+                color: rgba(0, 0, 0, 0.6);
+                line-height: 48rpx;
+                padding: 32rpx 0;
+            }
+            .menber {
+                text-align: right;
+                width: 420rpx;
+                color: rgba(0, 0, 0, 0.6);
+                .text-ellipsis()
+            }
+        }
+    }
+   .grid-box {
+        margin-bottom: 32rpx;
+        padding: 32rpx;
+        background-color: #fff;
+        border-radius: 16rpx;
+        position: relative;
+        .textarea-title {
+            display: flex;
+            margin-bottom: 16rpx; 
+            font-size: 32rpx;
+            color: #E34D59;
+            line-height: 38rpx;
+            .flag{
+                margin-top: 12rpx;
+            }
+            .label {
+                font-size: 32rpx;
+                color: rgba(0,0,0,0.6);
+                line-height: 48rpx;
+            }
+        }
+       .textarea {
+          margin-left: 16rpx; 
+       }
+       .showTotal {
+            position: absolute;
+            bottom: 32rpx;
+            right: 32rpx; 
+            font-size: 24rpx;
+            color: rgba(0,0,0,0.2);
+            line-height: 28rpx;
+            z-index: 5;
+        }
+        .file-title {
+            font-size: 32rpx;
+            color: rgba(0,0,0,0.6);
+            line-height: 48rpx;
+        }
+   }
+   .flex-space {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        &: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;
+            }
+        }
+   }
+   .search-box {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        .search-icon {
+            margin-left: 16rpx;
+            margin-right: 32rpx;
+        	width: 36rpx;
+        	height: 36rpx;
+        }
+        .scan-icon {
+            width: 48rpx;
+            height: 48rpx;
+        }
+   }
+    .submit-btn{
+        margin-left: 8rpx;
+      margin-top: 160rpx;
+      margin-bottom: 120rpx;
+      padding: 24rpx 296rpx 26rpx 296rpx;
+      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;
+   }
+   .loading-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 28rpx;
+        color: rgba(0, 0, 0, 0.4);
+        line-height: 36rpx;
+    }
+    .right-icon {
+    margin-left: 16rpx;
+    width: 32rpx;
+    height: 32rpx;
+    text-align: right;
+    }
+    .err-text{
+      padding: 8rpx 16rpx 16rpx 16rpx;
+      font-size: 24rpx;
+      color: rgb(245, 140, 140);
+    }
+}
+.popup-content {
+    width: 610rpx;
+    padding: 32rpx;
+    background-color: #fdfdfd;
+    border-radius: 16rpx;
+    z-index: 100;
+    .title{
+        text-align: center;
+        margin-bottom: 18rpx;
+        color: rgba(0,0,0,0.7);
+    }
+    .checkbox {
+        background-color: #fff;
+        padding-left: 12rpx;
+    	height: 36vh;
+    	overflow-y: auto;
+        font-size: 28rpx;
+        color: rgba(0,0,0,0.7);	
+        &::-webkit-scrollbar-track {
+            background-color: #f1f1f1; /* 滚动条轨道颜色 */
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: #888; /* 滚动条滑块颜色 */       	
+        }
+        .flex {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 18rpx 0;
+            border-bottom: rgba(0, 0, 0, 0.1) 1rpx solid;
+        }
+        .nickname {
+            width: 120rpx;
+            margin-left: 16rpx;
+        }
+        .mobile{
+            padding-right: 18rpx;
+        }
+    }
+    .btn-box {
+        padding-top: 12rpx;
+        width: 100%;
+        overflow: hidden;
+        .confirm-btn{
+            float: right;
+            color: rgba(0, 0, 0, 0.6);
+            background-color: #f8f8f8;
+            border-color: rgba(0, 0, 0, 0.2);
+        }
+    }
+}
+.holderClass{
+    color: rgba(0, 0, 0, 0.2);
+}
+</style>