business_tms_program 0.0.0

package/src/pages/afterSale/searchDeviceList.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { queryDevicePageList } from '@/api/device'
+import { isCheckStatusEnum } from '@/dict/device'
+import Empty from '@/components/Empty.vue';
+const state = reactive({
+  keyword: '',
+  itemDatas: [] as any[]
+})
+const handleBack = () => {
+  uni.redirectTo({
+    url: '/pages/afterSale/faultReport'
+});
+}
+const toReport = (item: any) => {
+  uni.redirectTo({
+    url: `/pages/afterSale/faultReport?deviceCode=${item.deviceCode}`
+  })
+}
+const getCheckedList = async () => {
+  const res = await queryDevicePageList({
+    size: 1000,
+    page: 1,
+    deviceCode: state.keyword
+  })
+  if (res) {
+    state.itemDatas = res.records.filter((item: any) => item.isCheckStatus === isCheckStatusEnum.YES)
+  }
+}
+</script>
+<template>
+  <view class="content">
+    <view class="header">
+      <view class="input-wrapper">
+        <input class="search-input"
+            v-model="state.keyword" placeholder="请输入设备编号" @input="getCheckedList" />
+        <image class="uni-icon" src="/static/img/search.png" />
+      </view>
+        <view class="back-icon" @click="handleBack">
+        返回
+      </view>
+    </view>
+    <view class="scroll-view">
+      <scroll-view class="scroll-view" :scroll-y="true">
+        <view class="search-item" v-for="item in state.itemDatas" :key="item.id"  @click="toReport(item)">
+          <view class="img"></view>
+          <view class="info">
+            <view class="inlineBox">
+              <view class="code">设备编号：{{item.deviceCode}}</view>
+              <view class="contact">客户：{{item.customerName}}</view>
+            </view>
+            <view class="status" :class="{'unCheck': item.isCheckStatus === isCheckStatusEnum.NO}">
+                {{item.isCheckStatus === isCheckStatusEnum.YES ? '已验收' : '未验收'}}
+              </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <view v-if="!state.keyword" class="tips">请输入设备号模糊搜索</view>
+    <Empty v-else-if="state.itemDatas.length === 0" />
+  </view>
+</template>
+<style scoped lang="less">
+.content {
+  background-color: #F5F5F5;
+  min-height: 100vh;  
+}
+.tips{
+    font-size: 24rpx;
+    color: rgba(0,0,0,0.6);
+    padding: 24rpx 0 48rpx 36rpx;
+    background-color: #fff;
+}
+.header {
+  padding: 12rpx 18rpx; 
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  .input-wrapper{
+    flex: 1;
+    margin-left: 4rpx;
+    padding: 0 24rpx;
+    background: rgba(0,0,0,0.04);
+    border-radius: 8rpx;
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+    .back-icon{
+        padding-left: 12rpx;
+        font-size: 24rpx;
+        color: rgba(0,0,0,0.6);
+    }
+      .search-input {
+        flex: 1;
+        font-size: 24rpx;
+        padding: 12rpx 0;
+      }
+      .uni-icon {
+        position: absolute;
+        right: 16rpx;
+        top: 18rpx;
+        width: 28rpx;
+        height: 28rpx;
+      }
+}
+.scroll-box {
+  padding: 16rpx 64rpx;
+  box-sizing: border-box;
+}
+.searchist, .deviceBox{
+  margin-top: 24rpx;
+}
+.info{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.inlineBox{
+    font-size: 26rpx;
+    .code{
+        padding-bottom: 16rpx;
+    }
+}
+    .status{
+        color: rgba(0,0,0,0.6);
+        font-size: 24rpx;
+    }
+.contact {
+    font-size: 24rpx;
+    color: rgba(0,0,0,0.6);
+}
+.search-item{
+  display: flex;
+  align-items: flex-end;
+  background-color: #fff;
+  padding: 18rpx 42rpx;
+  font-size: 28rpx;
+  margin-bottom: 1rpx;
+  color: rgba(0,0,0,0.4);
+  .code{
+    font-size: 24rpx;
+    color: rgba(0,0,0,0.6);
+  }
+}
+</style>

package/src/pages/device/Search.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import DropMenu from '@/components/DropMenu.vue'
+import { isCheckStatusEnum } from '@/dict/device'
+import { debounce } from 'lodash-es';
+import Skeleton from '@/components/Skeleton.vue';
+import LoadingView from '@/components/Loading.vue';
+import Empty from '@/components/Empty.vue';
+import { queryCustomerCode, queryDevicePageList } from '@/api/device'
+
+defineOptions({
+  name: "searchList"
+});
+const selectedValue = ref('customerCode')
+const state = reactive({
+  customerCode: '',
+  searchList: [],
+  itemDatas: [],
+  searchLoading: false,
+  deviceLoading: false,
+  hasSearch: false, // 是否有搜索过
+  searchValue: ''
+});
+const options = [
+  { value: 'customerCode', name: '客户名称' },
+  { value: 'deviceCode', name: '设备编号' }
+]
+const toDeviceDetail = (item: any) => {
+  uni.navigateTo({ url: `/pages/device/detail?deviceCode=${item.deviceCode}` })
+}
+const searchCustomer = debounce(async (value: string) => { 
+  state.searchLoading = true;
+  state.searchList = [];
+  const res = await queryCustomerCode({
+    customerName: value, // 假设搜索字段为customerName
+  })
+  state.searchLoading = false;
+  if (!res) {
+    return; // 搜索失败时不更新数据
+  }
+  state.searchList = res;
+})
+const searchDevice = async (value: string) => {
+  if (!value) {
+    return; // 输入为空时不进行搜索
+  }
+  state.hasSearch = false;
+  state.deviceLoading = true;
+  const res = await queryDevicePageList({
+    size: 10,
+    current: 1,
+    customerCode: value, // 假设搜索字段为deviceCode
+  })
+  state.deviceLoading = false;
+  if (!res) {
+    return; // 搜索失败时不更新数据
+  }
+  state.itemDatas = res.records;
+}
+const handleSearchInput = (e: any) => {
+  const { value } = e.detail
+  if (value === state.searchValue) {
+    return; // 输入为空时不进行搜索 
+  }
+  state.searchValue = value; // 更新搜索框的值
+  searchCustomer(value); // 刷新数据 
+  if (!state.hasSearch) {
+    state.hasSearch = true; // 标记为已搜索
+  }
+}
+onMounted(async () => {
+})
+</script>
+
+<template>
+  <view class="content">
+    <view class="header">
+      <DropMenu v-model="selectedValue" :options="options" />
+      <view class="input-wrapper">
+        <input class="search-input" @change="handleSearchInput" />
+      </view>
+      <image class="uni-icon" src="/static/img/search.png" />
+    </view>
+    <view class="searchist" v-if="state.hasSearch">
+      <view class="skeleton-box" v-if="state.searchLoading">
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+      </view>
+      <view class="search-item"
+        v-else
+        v-for="item in state.searchList" :key="item.customerCode"
+        @click="searchDevice(item.customerCode)"
+      >
+        {{ item.customerName }}<view class="code">{{ item.customerCode }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+<style scoped lang="less">
+.content {
+  background-color: #F5F5F5;
+  min-height: 100vh;  
+}
+.header {
+  padding: 12rpx 18rpx; 
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  .input-wrapper{
+    flex: 1;
+    margin-left: 4rpx;
+    padding: 0 24rpx;
+    background: rgba(0,0,0,0.04);
+    border-radius: 8rpx;
+    display: flex;
+    align-items: center;
+  }
+      .search-input {
+        flex: 1;
+        font-size: 24rpx;
+        padding: 12rpx 0;
+      }
+      .uni-icon {
+        position: absolute;
+        right: 36rpx;
+        top: 28rpx;
+        width: 36rpx;
+        height: 36rpx;
+      }
+}
+.scroll-box {
+  padding: 16rpx 32rpx;
+  box-sizing: border-box;
+}
+.record-box{
+  display: flex;
+  margin-bottom: 16rpx;
+  padding: 36rpx;
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  .img{
+    margin-right: 16rpx;
+    width: 96rpx;
+    height: 96rpx;
+    background: #E8E8E8;
+    border-radius: 8rpx;
+  }
+  .inlineBox{
+    display: flex;
+    margin-bottom: 6rpx; 
+    .code{
+      margin-right: 16rpx;
+      font-weight: bold;
+      font-size: 32rpx;
+      color: #000000;
+      line-height: 38rpx;
+    }
+    .status{
+      padding: 6rpx 16rpx 8rpx 16rpx;
+      font-weight: 400;
+      font-size: 24rpx;
+      color: #1D6FE9;
+      line-height: 34rpx;
+      border-radius: 24rpx;
+      background: rgba(29,111,233,0.1);
+      border: 1rpx solid #1D6FE9;
+    }
+    .unCheck {
+      color: #F5894E;
+      border: 1rpx solid #F5894E;
+      background: rgba(245,137,78,0.1);
+    }
+  }
+  .contact{
+    font-size: 28rpx;
+    color: rgba(0,0,0, 0.6);
+    line-height: 40rpx;
+  }
+}
+.searchist, .deviceBox{
+  margin-top: 24rpx;
+}
+.search-item{
+  display: flex;
+  align-items: flex-end;
+  background-color: #fff;
+  padding: 18rpx 16rpx 18rpx 42rpx;
+  font-size: 28rpx;
+  margin-bottom: 1rpx;
+  color: rgba(0,0,0,0.6);
+  .code{
+    margin-left: 24rpx;
+    font-size: 24rpx;
+    color: rgba(0,0,0,0.4);
+  }
+}
+</style>

package/src/pages/device/acceptance.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useForm } from '@/hooks/useForm';
+import { queryDeviceDetail, type DeviceCheckParams, deviceCheck } from '@/api/device'
+import { FILE_UPLOAD_CONFIG, UPLOAD_HOST } from '@/config/app';
+import Skeleton from '@/components/Skeleton.vue';
+import { useUserStore } from '@/stores/modules/user';
+import { type ValidationRules } from '@/utils/form';
+import Upload from '@/components/Upload.vue';
+import RippleBtn from '@/components/RippleBtn.vue';
+import { isCheckStatusEnum } from '@/dict/device'
+
+defineOptions({
+  name: "deviceAcceptance"
+});
+
+const initialData = {
+  customerCheckDate: '',
+};
+
+const validationRules: ValidationRules<Partial<DeviceCheckParams>> = {
+  customerCheckDate: {
+    required: true,
+    message: '请选择验收时间',
+  },
+}
+
+const { formData, errState, setFormItem, validateForm, validateOneField, initialForm } = useForm<Omit<DeviceCheckParams, 'deviceCode'>>(
+  initialData as Omit<DeviceCheckParams, 'deviceCode'>,
+  validationRules,
+  false,
+)
+const useStore = useUserStore();
+const state = reactive({
+  info: {} as any,
+  loading: false,
+  lockCustomerCheckDate: false
+})
+const changeValue = (key: keyof Omit<DeviceCheckParams, 'deviceCode'>, detail: any) => {
+  setFormItem(key, detail.value);
+}
+const fetchDetail = async (code: string) => {
+  state.loading = true;
+  const res = await queryDeviceDetail({
+    deviceCode: code,
+  });
+  state.loading = false;
+  if (res) {
+    const { attachmentList, ...other } = res
+    // 是否验收，如果是已验收，禁止修改验收时间
+    state.lockCustomerCheckDate = !!other.customerCheckDate;
+    initialForm({
+      ...other,
+      customerCheckAttachments: attachmentList?.map((item: any) => ({ 
+        id: item.attachmentId,
+        attachmentUrl: UPLOAD_HOST + item.attachmentUrl,
+      })) || [],
+    })
+    state.info = res;
+  }
+}
+const submitForm= async () => {
+  const isValid = await validateForm();
+  if (!isValid) {
+    return;
+  }
+  const params = {
+    ...formData,
+    customerCheckAttachments: formData.customerCheckAttachments?.map((item: any) => item.id) || [],
+    deviceCode: state.info.deviceCode,
+    customerCheckBy: 1
+  }
+  const res = await deviceCheck(params);
+  if (res) {
+    uni.showToast({
+      title: '提交成功',
+      icon: 'success',
+      duration: 2000,
+      success: () => {
+        uni.$emit('deviceList-updated');
+        uni.$emit('deviceList-updated-success');
+        setTimeout(() => {
+          uni.navigateBack();
+        }, 2000);
+      }
+    });
+  }
+}
+onLoad((event: any) => {
+  const { deviceCode } = event;
+  fetchDetail(deviceCode);
+});
+</script>
+
+<template>
+  <view class="content" :style="{padding: '36rpx'}">
+    <view class="skeleton-box" v-if="state.loading">
+      <Skeleton class="skeleton-container"></Skeleton>
+      <Skeleton class="skeleton-container"></Skeleton>
+      <Skeleton class="skeleton-container"></Skeleton>
+      <Skeleton class="skeleton-container"></Skeleton>
+      <Skeleton class="skeleton-container"></Skeleton>
+    </view>
+    <view v-else class="form-box">
+        <view class="text">产品名称：{{ state.info.productName }}</view>
+        <view class="text">设备编码：{{ state.info.deviceCode }}</view>
+        <view class="text">所属用户：{{ state.info.customerName }}</view>
+        <view class="text">设备地址：{{ state.info.address || '--'}}</view>
+    </view>
+    <view class="form-content">
+        <view class="uni-form-item flex-space">
+        <view class="l-label">验收人</view>
+        <view class="text">{{ useStore.getUserInfo?.nickname }}</view>
+         </view>
+      <view class="uni-form-item flex-space">
+        <view class="l-label">
+          <view class="flag">*</view>客户验收时间
+        </view>
+        <view class="dateSelect-box">
+          <div v-if="state.lockCustomerCheckDate">{{ formData.customerCheckDate }}</div>
+          <image v-else class="right-icon" src="/static/img/turn_right.png" />
+          <uni-datetime-picker v-model="formData.customerCheckDate" v-if="!state.lockCustomerCheckDate"
+            @change="(v: string) => changeValue('customerCheckDate', { value: v })">
+            <view class="common-picker">{{ formData.customerCheckDate || '请选择' }}</view>
+          </uni-datetime-picker>
+        </view>
+      </view>
+      <view class="err-text" v-if="errState.customerCheckDate">{{errState.customerCheckDate}}</view>
+    </view>
+    <view class="form-content">
+      <view class="l-label">备注</view>
+      <textarea class="uni-textarea" placeholder="请填写" :value="formData.customerCheckMemo" maxlength="1000"
+        @input="(e: any) => changeValue('customerCheckMemo', e.detail)" placeholder-class="holderClass" />
+      <view class="annotation">{{ formData.customerCheckMemo?.length || 0 }}/1000</view>
+    </view>
+    <view class="form-content">
+    <view class="flex-space flex-col">
+        <view class="l-label">处理完结水印照片</view>
+        <upload class="upload-box" :files="formData.customerCheckAttachments" :maxCount="9" :showUpload="true" :size="176"
+          :moduleName="FILE_UPLOAD_CONFIG.after_order.moduleName"
+          @change="(files: any) => changeValue('customerCheckAttachments', { value: files })" />
+        <view class="err-text" v-if="errState.customerCheckAttachments">{{ errState.customerCheckAttachments }}</view>
+      </view>
+    </view>
+     <RippleBtn @click="submitForm" :customStyle="'margin-top: 50rpx;padding-bottom: 18rpx'">
+      <view class="submit-btn">保存验收</view>
+    </RippleBtn>
+  </view>
+</template>
+<style scoped lang="less">
+.content {
+    .form-box{
+        margin-bottom: 32rpx;
+    }
+    .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);
+        }
+    }
+    .flex-col{
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .form-content {
+        margin-bottom: 32rpx;
+        background-color: #fff;
+        border-radius: 16rpx;
+        padding: 0 32rpx;
+        position: relative;
+    }
+    .uni-form-item {
+        display: flex;
+    }
+    .dateSelect-box {
+        display: flex;
+        align-items: center;
+        flex-direction: row-reverse;
+        flex: 1;
+        min-width: 0;
+          .right-icon {
+            margin-left: 16rpx;
+            width: 32rpx;
+            height: 32rpx;
+            text-align: right;
+        }
+    }
+    .text {
+        margin-bottom: 22rpx;
+        font-weight: 400;
+        font-size: 28rpx;
+        color: #000000;
+        line-height: 40rpx;
+
+        &:last-child {
+        margin-bottom: 0;
+        }
+    }
+    .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;
+        }
+    }
+      .uni-textarea {
+    width: 100%;
+    line-height: 48rpx;
+    height: 288rpx;
+    font-size: 28rpx;
+    
+  }
+    .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;
+  }
+      .common-picker {
+    flex: 1;
+    text-align: right;
+    font-size: 32rpx;
+    color: rgba(0, 0, 0, 0.4);
+    line-height: 48rpx;
+  }
+    .upload-box {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20rpx;
+    padding-bottom: 32rpx;
+    .view-img {
+      width: 176rpx;
+      height: 176rpx;
+    }
+  }
+    .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;
+  }
+      .err-text{
+      padding: 8rpx 16rpx 16rpx 16rpx;
+      font-size: 24rpx;
+      color: rgb(245, 140, 140);
+    }
+}
+</style>