Merge remote-tracking branch 'origin/main'

baoshiwei

2025-04-24 89a5fedfe041ebacb2d81ecae1023b206cd3f353

 eims-ui-mobile/src/pages/inspect/insp-record.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,336 @@
<route lang="json5">
{
  needLogin: true,
  style: {
    navigationBarTitleText: '点检记录',
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#4D80F0',
  },
}
</route>
<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" show-refresher-update-time>
    <template #top>
      <wd-navbar
        title="点检记录"
        left-arrow
        @click-left="goBack"
        right-text="提交"
        @click-right="handleClickRight"
        custom-style="background: #4D80F0;"
        safeAreaInsetTop
      ></wd-navbar>

      <wd-card type="rectangle">
        <template #title>
          <view class="flex justify-between">
            <view class="flex items-center menu-title-box">
              <view class="menu-indicator"></view>
              <view class="ml-1 text-sm align-center">{{ inspSt.equName }}</view>
              <view class="text-color-gray ml-2 text-mini">{{ inspSt.assetNo }}</view>
            </view>

            <view class="flex items-center">
              <text class="text-color-gray text-mini">{{ inspSt.planTimeStr }}</text>
            </view>
          </view>
        </template>
        <view class="flex h-[100rpx]" items-center>
          <image class="slot-img text-center" src="/static/images/camera.png" />
          <view class="flex-1">
            <view class="text-color-gray text-xs mt-1 flex">
              <text class="mr-3">点检总数: {{ dataCount }}</text>
              |
              <text class="mx-3">已点检: {{ checkCount }}</text>
              |
              <text class="ml-3">未点检: {{ dataCount - checkCount }}</text>
            </view>
            <view class="text-color-gray text-xs mt-2 flex">
              <text class="mr-3">正常: {{ normalNum }}</text>
              |
              <text class="mx-3">异常: {{ abNormalNum }}</text>
            </view>
            <view class="text-color-gray text-xs mt-2 flex">
              <text>状态：</text>
              <template v-if="dataCount > 0 && dataCount === checkCount">
                <wd-icon class="icon-color-success" name="check-outline" size="34rpx"></wd-icon>
                <text class="ml-1">已完成</text>
              </template>
              <template v-else>
                <wd-icon class="icon-color-base" name="detection" size="40rpx"></wd-icon>
                <text class="ml-1">进行中</text>
              </template>
            </view>
          </view>
        </view>
      </wd-card>
    </template>

    <view class="bg-base">
      <view class="w-full h-[24rpx]"></view>
      <wd-cell>
        <template #title>
          <text class="text-color-gray">点检项</text>
        </template>
        <wd-button size="small" type="text" @click.stop="toggleCollapse">
          {{ isAllExpanded ? '全部折叠' : '全部展开' }}
        </wd-button>
      </wd-cell>
      <wd-collapse v-model="collSelects" title="点检项" ref="collapseRef">
        <wd-collapse-item :name="item.id" v-for="(item, index) in dataList">
          <template #title="{ expanded, disabled, isFirst }">
            <view class="flex justify-between">
              <view class="flex justify-center items-center">
                <text class="text-sm">{{ item.inspName }}</text>
              </view>

              <view class="flex items-center">
                <wd-radio-group
                  v-model="item.inspResult"
                  inline
                  shape="dot"
                  @change="inspResultClick(item)"
                >
                  <wd-radio value="1">正常</wd-radio>
                  <wd-radio value="2">异常</wd-radio>
                </wd-radio-group>
                <wd-icon
                  v-if="expanded"
                  name="arrow-up"
                  size="30rpx"
                  class="icon-color-gray"
                ></wd-icon>
                <wd-icon v-else name="arrow-down" size="30rpx" class="icon-color-gray"></wd-icon>
              </view>
            </view>
          </template>
          <view class="text-color-gray text-xs flex justify-between">
            <text class="mr-3">点检人: {{ item.inspUserName }}</text>
            <text class="mx-3">点检时间: {{ item.inspTime }}</text>
          </view>
        </wd-collapse-item>
      </wd-collapse>
      <view class="w-full h-[1rpx] bg-base"></view>
      <wd-textarea
        label="特记事项"
        label-width="200rpx"
        type="textarea"
        v-model="inspSt.specialNote"
        auto-height
        :maxlength="200"
        show-word-limit
        placeholder="请输入特记事项"
        clearable
      />
    </view>
  </z-paging>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore, useAccessStore, useSystemConfigStore } from '@/store'
import { getInspStRecordList, updateInspectSt, updateInspRecordBatch } from '@/service/inspect'
import { useToast, useMessage } from 'wot-design-uni'
import type { CollapseInstance } from 'wot-design-uni/components/wd-collapse/types'
const message = useMessage()
const toast = useToast()

const collapseRef = ref<CollapseInstance>()
const isAllExpanded = ref(false)

// å®šä¹‰æŽ¥å£
interface QueryParams {
  pageNum: number
  pageSize: number
  inspCode: string
  status?: string
}

interface InspSt {
  id: string
  inspCode: string
  equName: string
  assetNo: string
  planTimeStr?: string
  status: string
  inspUser: number | string
  specialNote: string
}

const dataChange = ref(false)

const userStore = useUserStore()

const collSelects = ref<string[]>([])

// ç‚¹æ£€æ±‡æ€»æ•°æ®(上个页面传值)
const inspSt = reactive<InspSt>({
  id: '',
  inspCode: '',
  equName: '',
  assetNo: '',
  planTimeStr: '',
  status: '',
  inspUser: '',
  specialNote: '',
})

const paging = ref(null)
const dataList = ref([])

const queryList = (pageNum?: number, pageSize?: number) => {
  // è¿™é‡Œçš„pageNo和pageSize会自动计算好，直接传给服务器即可
  // è¿™é‡Œçš„请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过paging.value.complete(请求回来的数组)将请求结果传给z-paging
  const params: QueryParams = {
    pageNum,
    pageSize,
    inspCode: inspSt.inspCode,
  }

  getInspStRecordList(params)
    .then((res: any) => {
      // è¯·å‹¿åœ¨ç½‘络请求回调中给dataList赋值！！只需要调用complete就可以了
      paging.value.complete(res.rows)
    })
    .catch((res) => {
      // å¦‚果请求失败写paging.value.complete(false)，会自动展示错误页面
      // æ³¨æ„ï¼Œæ¯æ¬¡éƒ½éœ€è¦åœ¨catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
      // åœ¨åº•å±‚的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
      paging.value.complete(false)
    })
}

function inspResultClick(item: any) {
  // userStore?.userInfo?.userId
}

const goBack = () => {
  uni.navigateBack()
}
function handleClickRight() {
  handleConfirm()
}

const toggleCollapse = () => {
  isAllExpanded.value = !isAllExpanded.value
  collapseRef.value.toggleAll(isAllExpanded.value)
}

function handleConfirm() {
  if (!dataChange.value) {
    message.alert('请操作后提交!')
    return false
  }
  message
    .confirm({
      msg: '确定提交？',
      title: '提示',
      beforeConfirm: ({ resolve }) => {
        updateData(resolve)
      },
    })
    .then(() => {})
    .catch((error) => {
      console.log(error)
    })
}

function updateData(resolve: any) {
  const params = {
    inspRecordList: dataList.value,
  }
  // æ›´æ–°ç‚¹æ£€è®°å½•
  updateInspRecordBatch(params)
    .then((res: any) => {
      updateInspSt(resolve)
    })
    .catch((res) => {
      console.error(res)
    })
}
function updateInspSt(resolve: any) {
  // æ›´æ–°ç‚¹æ£€æ±‡æ€»
  inspSt.status = '1'
  updateInspectSt(inspSt)
    .then((res: any) => {
      paging.value.reload()
      uni.$emit('insp-st-refresh')
      resolve(true)
    })
    .catch((res) => {
      console.error(res)
    })
}

/**
 * ç‚¹æ£€è®°å½•æ¡ç›®ç‚¹å‡»äº‹ä»¶
 * @param item
 */
function itemClick(item: any) {}

watch(
  () => [...dataList.value], // ä½¿ç”¨æ‰©å±•è¿ç®—符创建新数组以触发监听
  (newVal, oldVal) => {
    if (oldVal.length > 0) {
      dataChange.value = true
    }
  },
  { deep: true },
)
onLoad((options) => {
  inspSt.id = options.id
  inspSt.inspCode = options.inspCode
  inspSt.equName = options.equName
  inspSt.assetNo = options.assetNo
  inspSt.planTimeStr = options.planTimeStr
  inspSt.specialNote = options?.specialNote
  inspSt.inspUser = userStore?.userInfo?.userId
})

const dataCount = computed(() => dataList.value.length)
const checkCount = computed(() => dataList.value.filter((item) => item.status === '1').length)
const normalNum = computed(() => dataList.value.filter((item) => item.inspResult === '1').length)
const abNormalNum = computed(() => dataList.value.filter((item) => item.inspResult === '2').length)
</script>

<style scoped lang="scss">
.menu-title-box {
  height: 30rpx;
  line-height: 30rpx;
}

.slot-img {
  width: 72rpx;
  height: 72rpx;
  margin-right: 24rpx;
}
.text-mini {
  font-size: 22rpx;
}

.menu-indicator {
  width: 6rpx;
  height: 22rpx;
  border-radius: 10rpx;
  background-color: $uni-color-primary;
}
:deep(.wd-card__footer) {
  padding: 10rpx !important;
}

.col-title-box {
}
.bg-primary {
  background: $uni-color-primary;
}
:deep(.wd-navbar__text) {
  font-size: 26rpx;
  color: white;
}
:deep(.wd-icon-arrow-left:before),
:deep(.wd-navbar__title) {
  color: white;
  font-weight: 0;
  font-size: 32rpx;
}
</style>