tjy-uniapp/src/pages/pendingVerification/list/BoilerItem.vue

<template>
  <wd-collapse v-model="collapseValue" accordion class="item-collapse">
    <wd-collapse-item :name="item.orderNo">
      <template #title="{ expanded }">
        <view class="item-box">
          <view class="item-top">
            <view class="item-top-left">
              <view class="row">
                <text class="item-top-text">
                  任务单号：{{ item.orderNo }}
                  <text>
                    （
                    <text :style="{ color: checkTypeColor }">{{ checkType }}</text>
                    ）
                  </text>
                </text>
                <text v-if="item.equipNum" class="item-top-num-box">{{ item.equipNum }}台</text>
              </view>
            </view>
          </view>

          <view class="item-center">
            <view class="row-center">
              <text class="title">
                检测时间：
                <text class="text">{{ checkDate }}</text>
              </text>
              <text class="title">
                设备注册代码：
                <text class="text">{{ item.equipCode }}</text>
              </text>
            </view>

            <text class="title">
              使用单位：
              <text class="text">{{ item.unitName }}</text>
            </text>
            <view class="row-center">
              <text class="title">
                项目负责人：
                <text class="text">{{ item?.manager?.nickname }}</text>
              </text>
              <text class="title">
                主检人：
                <text class="text">{{ item?.mainCheckerUser?.nickname }}</text>
              </text>
            </view>
            <text class="title">
              检验员：
              <text class="text">{{ checkUsersText }}</text>
            </text>
          </view>

          <view class="btn-group">
            <button v-show="item.recheckStatus == '100'" class="main-btn" @click.stop="handleOperation">
              <text class="main-btn-text">{{ operateText }}</text>
            </button>
          </view>

          <view class="collapse-arrow">
            <image class="arrow-icon" :src="iconMap.ArrowDown" :class="{ 'arrow-rotate': expanded }" />
          </view>
        </view>
      </template>

      <view class="recheck-list">
        <view v-if="item.recheckReportList?.length" v-for="report in item.recheckReportList" :key="report.reportId" class="recheck-item">
          <text class="recheck-report-name">{{ report.reportName }}</text>
          <view v-if="statusFilter === '100'" class="recheck-btn" @click.stop="handleOperation(item, report)">
            <text class="recheck-btn-text">校核</text>
          </view>
        </view>
        <view v-else class="recheck-empty">暂无校核项</view>
      </view>
    </wd-collapse-item>
  </wd-collapse>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import iconMap from '@/utils/imagesMap'
import { BoilerPressureCheckTypeMap } from '@/utils/dictMap'
import { PressureCheckerMyTaskStatusMap } from '@/utils/dictMap'

interface Props {
  item: any
  reportDOList: any[]
  operateText: string
  statusFilter: string
}

const props = defineProps<Props>()

const emit = defineEmits<{
  handleOperation: [item: any, reportDOList: any]
  handleRecheck: [item: any, report: any]
}>()

const collapseValue = ref<string>('')

const checkType = computed(() => {
  return BoilerPressureCheckTypeMap[props.item.checkType] || ''
})

const checkTypeColor = computed(() => {
  switch (props.item.checkType) {
    case 200:
      return 'rgb(251,127,55)'
    case 300:
      return '#ff4d4f'
    default:
      return '#2F8EFF'
  }
})

const checkDate = computed(() => {
  return props.item.checkDate ? props.item.checkDate.join('-') : ''
})

const checkUsersText = computed(() => {
  const checkUsers = props.item?.checkUsers?.map((check: any) => check.nickname)
  return checkUsers?.length > 0 ? checkUsers.join(',') : ''
})

const reportText = computed(() => {
  return props.reportDOList?.map((item) => item.reportName)?.join('、') || ''
})

const taskStatusText = computed(() => {
  return PressureCheckerMyTaskStatusMap[props.item.taskStatus] || ''
})

const handleOperation = (taskOrder, recheckItem) => {
  emit('handleOperation', taskOrder, recheckItem)
}

</script>

<style lang="scss" scoped>
.item-box {
  background-color: #fff;
  border-radius: 5px;
  position: relative;
}

.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.item-top {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid rgb(244, 244, 244);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.item-top-left {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.item-top-text {
  font-size: 17px;
  color: rgb(51, 51, 51);
  font-weight: bold;
}

.item-top-num-box {
  border-radius: 2px;
  background-color: rgb(255, 227, 210);
  padding: 3px;
  min-width: 46px;
  text-align: center;
  font-size: 12px;
  color: rgb(251, 127, 55);
}

.main-btn {
  width: 82px;
  height: 29px;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(47, 142, 255);
  margin: 0;
  border: none;
  padding: 0;
}

.main-btn-text {
  color: rgb(222, 238, 255);
  font-size: 15px;
}

.item-center {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  background-color: rgb(244, 244, 244);
  border-radius: 5px;
}

.row-center {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.title {
  color: rgb(108, 108, 108);
  font-size: 12px;
  line-height: 25px;
  margin-right: 5px;
}

.text {
  color: rgb(51, 51, 51);
  font-size: 12px;
  line-height: 25px;
}

.status-badge {
  height: 25px;
  padding: 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffe3d2;
  border-radius: 3px;
}

.status-text {
  color: rgb(251, 127, 55);
  font-size: 12px;
}

.btn-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
}

.collapse-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
}

.arrow-icon {
  width: 24px;
  height: 14px;
  transition: transform 0.3s;
}

.arrow-rotate {
  transform: rotate(180deg);
}

/* collapse 外层覆盖 */
.item-collapse {
  :deep(.wd-collapse-item__title) {
    padding: 0;
  }

  :deep(.wd-collapse-item__title-wrapper) {
    background-color: transparent;
  }

  :deep(.wd-collapse-item__arrow) {
    display: none;
  }

  :deep(.wd-collapse-item__content) {
    padding: 0 13px 13px;
  }
}

/* recheck 列表 */
.recheck-list {
  background-color: #fff;
  border-radius: 5px;
}

.recheck-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 13px;
  border-bottom: 1px solid rgb(244, 244, 244);

  &:last-child {
    border-bottom: none;
  }
}

.recheck-report-name {
  font-size: 14px;
  color: #333;
}

.recheck-btn {
  padding: 4px 12px;
  border-radius: 3px;
  background-color: #fff;
  border: 1px solid rgb(47, 142, 255);
}

.recheck-btn-text {
  font-size: 13px;
  color: rgb(47, 142, 255);
}

.recheck-empty {
  padding: 20px 0;
  text-align: center;
  font-size: 13px;
  color: #999;
}
</style>