business_tms_program 0.0.0

package/src/pages/device/detail.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { queryDeviceDetail } from '@/api/device'
+import Skeleton from '@/components/Skeleton.vue';
+import { isCheckStatusEnum, DeviceMesStatusEnum, deviceMesStatusMap } from '@/dict/device'
+defineOptions({
+  name: "deviceDetail"
+});
+const toDeviceAcceptance = () => {
+  uni.navigateTo({ url: `/pages/device/acceptance?deviceCode=${state.info.deviceCode}` })
+}
+
+const toDeviceInfo = () => {
+  uni.navigateTo({ url: `/pages/device/info?deviceCode=${state.info.deviceCode}` })
+}
+const state = reactive({
+  info: {} as any,
+  loading: false,
+})
+const fetchDetail = async (code: string) => {
+  state.loading = true;
+  const res = await queryDeviceDetail({
+    deviceCode: code,
+  });
+  state.loading = false;
+  if (res) {
+    state.info = res;
+  }
+}
+onLoad((event: any) => {
+  const { deviceCode } = event;
+  fetchDetail(deviceCode);
+  uni.$on('deviceList-updated-success', () => {
+    state.info.isCheckStatus = isCheckStatusEnum.YES;
+  });
+});
+
+// 监听页面显示，刷新设备信息
+onShow(() => {
+  if (state.info.deviceCode) {
+    fetchDetail(state.info.deviceCode);
+  }
+});
+</script>
+
+<template>
+  <view class="content">
+    <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>
+      <view 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>
+      <view class="uni-form-item" @click="toDeviceAcceptance">
+        <view class="l-label">
+          设备客户验收
+        </view>
+        <view class="statusBox">
+          <view class="status-text">
+            {{ state.info.isCheckStatus === isCheckStatusEnum.YES ? '已验收' : '未验收'}}
+          </view>
+          <image class="right-icon" src="/static/img/turn_right.png" />
+        </view>
+      </view>
+      <view class="uni-form-item" @click="toDeviceInfo">
+        <view class="l-label">
+          设备信息
+        </view>
+        <view class="statusBox">
+          <view class="status-text" :class="{ 'status-pending': state.info.deviceMesStatus === DeviceMesStatusEnum.PENDING }">
+            {{ state.info.deviceMesStatus ? deviceMesStatusMap[state.info.deviceMesStatus] : '待补充' }}
+          </view>
+          <image class="right-icon" src="/static/img/turn_right.png" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<style scoped lang="less">
+.content {
+  background-color: #F5F5F5;
+  min-height: 100vh;
+  padding: 32rpx;
+
+  .text {
+    margin-bottom: 22rpx;
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #000000;
+    line-height: 40rpx;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .uni-form-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #fff;
+    border-radius: 16rpx;
+    padding: 0 32rpx;
+    margin-top: 32rpx;
+    
+    &:first-of-type {
+      margin-top: 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;
+      }
+    }
+
+    .statusBox {
+      display: flex;
+      align-items: center;
+
+      .status-text {
+        font-size: 28rpx;
+        line-height: 40rpx;
+        color: rgba(0, 0, 0, 0.4);
+        
+        &.status-pending {
+          color: rgba(0, 0, 0, 0.4);
+        }
+      }
+    }
+    
+    // 设备客户验收的特殊样式
+    &:first-of-type .statusBox .status-text {
+      color: #F5894E;
+    }
+
+    .right-icon {
+      margin-left: 16rpx;
+      width: 32rpx;
+      height: 32rpx;
+      text-align: right;
+    }
+  }
+
+  .select-box {
+    flex: 1;
+    min-width: 0;
+  }
+}
+</style>

package/src/pages/device/index.vue

@@ -0,0 +1,322 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { isCheckStatusEnum } from '@/dict/device'
+import { queryDevicePageList, queryCustomerCode } from '@/api/device'
+import { set, throttle } from 'lodash-es';
+import DropMenu from '@/components/DropMenu.vue'
+import Skeleton from '@/components/Skeleton.vue';
+import LoadingView from '@/components/Loading.vue';
+import Empty from '@/components/Empty.vue';
+import { debounce } from 'lodash-es';
+defineOptions({
+  name: "deviceList"
+});
+const selectedValue = ref('customerCode')
+const options = [
+  { value: 'customerCode', name: '客户名称' },
+  { value: 'deviceCode', name: '设备编号' },
+]
+const state = reactive({ 
+  itemDatas: [] as any,
+  current: 1,
+  size: 10,
+  loadMore: false,
+  hasMore: true,
+  screenHeight: uni.getSystemInfoSync().windowHeight,
+  triggerRatio: 0.3, // 设置触发比例为屏幕高度的30%
+  loadingTop: false, // 顶部下拉刷新
+  customerCode: '',
+  searchValue: '', // 搜索框的值
+  hasSearch: false, // 是否有搜索过
+  customerSearchList: [] as any,
+  hasSearchCustomer: false, // 是否有搜索过
+});
+const loadData = async (page?: number) => {
+  if (state.loadMore) return;
+    state.loadMore = true;
+    const params = {
+      size: state.size,
+      current: page || state.current,
+      [selectedValue.value]: state.searchValue, // 动态查询字段
+    }
+    if (selectedValue.value === 'customerCode') {
+      params.customerCode = state.customerCode;
+    } else {
+      params.deviceCode = state.searchValue;
+    }
+    const { records, current }  = await queryDevicePageList(params); 
+    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;
+    if (!state.hasSearch) {
+      state.hasSearch = true;
+    }
+    state.hasSearchCustomer = false;
+}
+const searchDevice = async (value: string) => {
+  if (!value) {
+    return; // 输入为空时不进行搜索
+  }
+  state.customerCode = value; // 更新搜索条件
+  state.hasSearchCustomer = false; // 重置搜索状态
+  loadData(1); // 刷新数据
+}
+const searchCustomer = debounce(async (value: string) => { 
+  state.itemDatas = [];
+  const res = await queryCustomerCode({
+    customerName: value, // 假设搜索字段为customerName
+  })
+  setTimeout(() => {
+    state.hasSearchCustomer = true;
+  }, 400);
+  if (!res) {
+    return; // 搜索失败时不更新数据
+  }
+  state.customerSearchList = res;
+})
+// 滚动到底部加载更多
+const onScrollToLower = throttle(() => {
+  if (!state.loadMore && state.hasMore) {
+    state.current++;
+    nextTick(() => {
+      loadData(state.current);
+    })
+  }
+}, 500);
+const handleSearchInput = (e: any) => {
+  const { value } = e.detail;
+  if (value === state.searchValue) {
+    return; // 输入值未改变，不进行搜索
+  }
+  state.searchValue = value; 
+  if (selectedValue.value === 'deviceCode') {
+    loadData(1);
+    return;
+  } else {
+    searchCustomer(state.searchValue);
+  }
+}
+const toSearch = () => {
+  if (selectedValue.value === 'customerCode') {
+    // nextTick(() => {
+    //   searchCustomer(state.searchValue);
+    // })
+  } else {
+    loadData(1);
+  }
+}
+const resetSearch = () => {
+  state.hasSearchCustomer = false;
+  state.searchValue = ''; // 清空搜索框的值
+  state.customerCode = ''; // 清空搜索条件
+  loadData(1);
+} 
+const toDeviceDetail = (item: any) => {
+  uni.navigateTo({ url: `/pages/device/detail?deviceCode=${item.deviceCode}` })
+}
+const changeSearchType = (value: string) => {
+  selectedValue.value = value; // 更新selectedValue的值
+  state.searchValue = ''; // 清空搜索框的值
+  state.hasSearch = false; // 重置搜索状态
+  state.hasMore = true; // 重置是否有更多数据
+  state.hasSearchCustomer = false; // 重置是否有搜索过
+  state.customerSearchList = []; // 清空搜索结果
+  state.customerCode = ''; // 清空搜索条件
+  nextTick(() => {
+    loadData(1); // 刷新数据
+  })
+}
+onMounted(async () => {
+  loadData(1);
+  uni.$on('deviceList-updated', () => {
+    state.searchValue = '';
+    state.hasSearch = false;
+    loadData(1); // 刷新数据
+  });
+})
+const showCustometList = computed(() => {
+  return state.hasSearchCustomer && selectedValue.value === 'customerCode';
+})
+</script>
+
+<template>
+  <view class="content">
+    <view class="header">
+      <DropMenu v-model="selectedValue" :options="options" @change="changeSearchType"/>
+      <view class="input-wrapper">
+        <input class="search-input" @change="handleSearchInput" :value="state.searchValue" />
+      </view>
+      <image v-if="!showCustometList" @click="toSearch" class="uni-icon" src="/static/img/search.png" />
+      <view v-else class="back-icon" @click="resetSearch">取消</view>
+    </view>
+      <view class="skeleton-box" v-if="!state.hasSearch">
+        <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="customer-box" v-if="showCustometList">
+        <Empty v-if="state.customerSearchList.length === 0" desc="暂未搜索到相关客户"/>
+        <view class="customer-item"
+          v-else
+          v-for="item in state.customerSearchList" :key="item.customerCode"
+          @click="searchDevice(item.customerCode)"
+        >
+          {{ item.customerName }}<view class="code">{{ item.customerCode }}</view>
+        </view>
+      </view>
+      <scroll-view
+        v-else
+        class="scroll-view"
+        scroll-y
+        bounces
+        show-scrollbar
+        scroll-with-animation
+        @scrolltolower="onScrollToLower"
+        :lower-threshold="`${state.screenHeight * state.triggerRatio}`"
+      >
+        <view class="scroll-box">
+          <view class="record-box"
+            v-for="item in state.itemDatas"
+            :key="item.deviceCode"
+            @click="toDeviceDetail(item)"
+            >
+            <view class="img"></view>
+            <view class="info">
+              <view class="inlineBox">
+                <view class="code">{{item.deviceCode}}</view>
+                <view class="status" :class="{'unCheck': item.isCheckStatus === isCheckStatusEnum.NO}">
+                  {{item.isCheckStatus === isCheckStatusEnum.YES ? '已验收' : '未验收'}}
+                </view>
+              </view>
+              <view class="contact">客户：{{item.customerName}}</view>
+            </view>
+          </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;  
+}
+.header {
+  padding: 8rpx 12rpx; 
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  width: 100vw;
+  height: 96rpx;
+  .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;
+        margin-right: 12rpx;
+        font-size: 24rpx;
+        padding: 12rpx 0 12rpx 0;
+        color: rgba(0,0,0,0.4);
+      }
+      .uni-icon {
+        padding: 0 12rpx 0 16rpx;
+        width: 36rpx;
+        height: 36rpx;
+      }
+  .back-icon {
+    padding: 0 12rpx;
+    font-size: 24rpx;
+    color: rgba(0,0,0,0.6);
+  }
+}
+.scroll-view{
+  height: calc(100vh - 96rpx);
+}
+.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;
+  }
+}
+.customer-box{
+  padding: 18rpx 0rpx;
+  .customer-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/info.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { queryDeviceDetail } from '@/api/device'
+import Skeleton from '@/components/Skeleton.vue';
+
+defineOptions({
+  name: "deviceInfo"
+});
+
+const toMaterialTowerCode = () => {
+  uni.navigateTo({ url: `/pages/device/materialTowerCode?deviceCode=${state.info.deviceCode}` })
+}
+
+const state = reactive({
+  info: {} as any,
+  loading: false,
+})
+
+const fetchDetail = async (code: string) => {
+  state.loading = true;
+  const res = await queryDeviceDetail({
+    deviceCode: code,
+  });
+  state.loading = false;
+  if (res) {
+    state.info = res;
+  }
+}
+
+onLoad((event: any) => {
+  const { deviceCode } = event;
+  fetchDetail(deviceCode);
+});
+
+// 监听页面显示，刷新设备信息
+onShow(() => {
+  if (state.info.deviceCode) {
+    fetchDetail(state.info.deviceCode);
+  }
+});
+</script>
+
+<template>
+  <view class="content">
+    <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>
+      <view 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>
+      <view class="uni-form-item" @click="toMaterialTowerCode">
+        <view class="l-label">
+          料塔编码
+        </view>
+        <view class="statusBox">
+          <view class="status-text">
+            {{ state.info.siloCode || '请选择' }}
+          </view>
+          <image class="right-icon" src="/static/img/turn_right.png" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="less">
+.content {
+  background-color: #F5F5F5;
+  min-height: 100vh;
+  padding: 32rpx;
+
+  .text {
+    margin-bottom: 22rpx;
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #000000;
+    line-height: 40rpx;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .uni-form-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #fff;
+    border-radius: 16rpx;
+    padding: 0 32rpx;
+    margin-top: 32rpx;
+
+    .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;
+      }
+    }
+
+    .statusBox {
+      display: flex;
+      align-items: center;
+
+      .status-text {
+        font-size: 28rpx;
+        line-height: 40rpx;
+        color: rgba(0, 0, 0, 0.4);
+      }
+    }
+
+    .right-icon {
+      margin-left: 16rpx;
+      width: 32rpx;
+      height: 32rpx;
+      text-align: right;
+    }
+  }
+
+  .select-box {
+    flex: 1;
+    min-width: 0;
+  }
+}
+</style>
+