bonus-material-app/src/pages/repair/details.vue

<template>
    <!-- 领料出库详情 -->
    <view class="page-container">
        <uni-row :gutter="24" class="search-form">
            <uni-col :span="12">
                <view>
                    <uni-easyinput placeholder="请输入内容" />
                </view>
            </uni-col>
            <uni-col :span="4">
                <view class="search">查询</view>
            </uni-col>
            <uni-col :span="4">
                <view class="search" style="background-color: #19be6b" @tap="onQualified"
                    >合格</view
                >
            </uni-col>
        </uni-row>

        <view class="table-list-item">
            <checkbox-group @change="onChangeAllChecked">
                <label>
                    全选
                    <checkbox
                        color="#409eff"
                        borderColor="#409eff"
                        activeBorderColor="#409eff"
                        :checked="allChecked"
                        value="all"
                        style="transform: scale(0.7)"
                    />
                </label>
            </checkbox-group>
        </view>

        <scroll-view scroll-y class="scroll-container">
            <view
                v-for="(item, index) in detailsList"
                :key="index"
                class="table-list-item"
                @tap="onRepairItem(item)"
            >
                <view class="line"></view>
                <uni-row :gutter="24">
                    <uni-col :span="2">
                        <checkbox-group @change="onChangeChecked(item)">
                            <label>
                                <checkbox
                                    color="#409eff"
                                    borderColor="#409eff"
                                    activeBorderColor="#409eff"
                                    :checked="item.isChecked"
                                    style="transform: scale(0.7)"
                                />
                            </label>
                        </checkbox-group>
                    </uni-col>
                    <uni-col :span="6">物资名称：</uni-col>
                    <uni-col :span="16">
                        <view class="cont">{{ item.typeName }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">规格型号：</uni-col>
                    <uni-col :span="16">
                        <view class="cont">{{ item.type }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">已退数量：</uni-col>
                    <uni-col :span="16">
                        <view class="cont">{{ item.repairNum }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">单位：</uni-col>
                    <uni-col :span="16">
                        <view class="cont">{{ item.unitName }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">管理模式：</uni-col>
                    <uni-col :span="16">
                        <uni-tag
                            text="编码"
                            type="warning"
                            v-if="item.manageType === 0"
                            size="small"
                        />
                        <uni-tag
                            text="数量"
                            type="success"
                            v-if="item.manageType === 1"
                            size="small"
                        />
                    </uni-col>
                </uni-row>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref, onUnmounted, computed } from 'vue'
import { getRepairDetailsAPI, setQualifiedAPI } from '@/services/repair/repair.js'
import { onLoad } from '@dcloudio/uni-app'
const detailsList = ref([])
const query = defineProps() // 获取上级页面传递的路由参数

// 获取列表详情
const getOutboundDetailsData = async () => {
    const res = await getRepairDetailsAPI({ taskId: query.taskId })
    detailsList.value = res.data
    detailsList.value = detailsList.value.map((e) => {
        return { ...e, isChecked: false }
    })
}

// 复选框全选
const onChangeAllChecked = (e) => {
    detailsList.value.forEach((item) => {
        if (e.detail.value.length > 0) {
            item.isChecked = true
        } else {
            item.isChecked = false
        }
    })
}
// 复选框每一项
const onChangeChecked = (val) => {
    val.isChecked = !val.isChecked
}

// 计算全选按钮是否选中
const allChecked = computed(() => {
    return detailsList.value.every((e) => e.isChecked == true)
})

// 点击合格按钮
const onQualified = async () => {
    const isSelect = detailsList.value.some((e) => e.isChecked == true)

    if (!isSelect) {
        uni.showToast({
            title: '请勾选需要需要合格的数据！',
            icon: 'none',
        })
        return
    }

    // 组装参数
    const ids = []
    detailsList.value.forEach((e) => {
        if (e.isChecked) {
            ids.push(e.id)
        }
    })
    const res = await setQualifiedAPI(ids)
    if (res.code === 200) {
        uni.showToast({
            title: '操作成功！',
            icon: 'none',
        })
        getOutboundDetailsData()
    }
}

// 点击跳转维修页面
const onRepairItem = (item) => {
    // 解构所需要的数据
    const { manageType, repairNum, typeName, type } = item
    let queryParams = null
    let codingUrl = ''
    if (manageType === 0) {
        codingUrl = '/pages/repair/code-view' // 编码维修
    }
    if (manageType == 1) {
        codingUrl = '/pages/repair/num-operate' // 数量维修
    }
    queryParams = {
        repairNum,
        typeName,
        type,
    }
    uni.navigateTo({ url: `${codingUrl}?queryParams=${JSON.stringify(queryParams)}` })
}

// 页面加载完毕
onLoad(() => {
    getOutboundDetailsData()

    // 监听出库完成事件 刷新列表
    uni.$on('onUpdate', () => {
        // console.log('监听事件')
        // 刷新列表
        getOutboundDetailsData()
    })
})

// 页面销毁时移除事件监听
onUnmounted(() => {
    uni.$off('onUpdate') // 移除事件监听
})
</script>

<style lang="scss" scoped>
.page-container {
    display: flex;
    height: 100%;
    padding: 0 15rpx;
    flex-direction: column;
    background-color: #e8f5fb;

    .search-form {
        margin: 10rpx 0;
        display: flex;
        align-items: center;
        box-sizing: content-box;
    }

    .search {
        height: 60rpx;
        background-color: #3784fb;
        text-align: center;
        line-height: 60rpx;
        color: #fff;
        border-radius: 10rpx;
    }

    .table-list-item {
        margin-bottom: 20rpx;
        padding: 20rpx;
        background-color: #fff;
        // min-height: 300rpx;
        border-radius: 10rpx;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .line {
            margin: 20rpx 0;
            height: 1px;
            background-color: #e8e8e8;
        }
    }
}
// 加载提示文字
.loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0;
}
</style>