hazardousWaste_app/pages/warehousing/uniqueCode/issueUniqueCode/materialSelection.vue

<!-- 物料选择 -->
<template>
    <view class="contentBox">
        <view class="topSearch" v-if="!isInbound">
            <uni-easyinput type="text" v-model="queryParams.keyword" prefixIcon="search" :inputBorder="false"
                @iconClick="getMaterialList" placeholder="请输入搜索内容" />
        </view>

        <!-- 物料列表  -->
        <z-paging ref="pagingRef" class="containerBox" v-model="materialList" @query="getMaterialList"
            v-if="!isInbound">
            <uni-list>
                <uni-list-item v-for="item in materialList" :key="item.id" clickable class="material-card"
                    @click="onMaterial(item)">
                    <template v-slot:body>
                        <p style="display: flex; flex-direction: column; width: 100%;">
                        <p class="title">{{ item.materialName }} ({{ item.materialCode }})</p>
                        <p class="subTitle">
                            <!-- 简称/型号/规格/类型 -->
                            <span v-if="item.materialShortName">{{ item.materialShortName }} / </span>
                            <span v-if="item.model">{{ item.model }} / </span>
                            <span v-if="item.specification">{{ item.specification }} / </span>
                            <span v-if="item.typeName">{{ item.typeName }} </span>
                        </p>
                        <p class="tag">
                            <uni-tag :text="getTypeParentNames(item.typeParentNames)" type="error" />
                        <p>单位：{{ item.unitName }}</p>
                        </p>
                        </p>

                    </template>
                </uni-list-item>
            </uni-list>
        </z-paging>

        <view v-if="isInbound">
            <uni-list>
                <uni-list-item v-for="item in materialList" :key="item.id" clickable class="material-card"
                    @click="onMaterial(item)">
                    <template v-slot:body>
                        <p style="display: flex; flex-direction: column; width: 100%;">
                        <p class="title">{{ item.materialName }} ({{ item.materialCode }})</p>
                        <p class="subTitle">
                            <!-- 简称/型号/规格/类型 -->
                            <span v-if="item.materialShortName">{{ item.materialShortName }} / </span>
                            <span v-if="item.model">{{ item.model }} / </span>
                            <span v-if="item.specification">{{ item.specification }} / </span>
                            <span v-if="item.typeName">{{ item.typeName }} </span>
                        </p>
                        <p class="tag">
                            <uni-tag :text="getTypeParentNames(item.typeParentNames)" type="error" />
                        <p>单位：{{ item.unitName }}</p>
                        </p>
                        </p>

                    </template>
                </uni-list-item>
            </uni-list>
        </view>
    </view>
</template>
<script setup>
import _ from 'lodash';
import { computed, ref } from 'vue';
import { getTypeParentNames, } from '../until';
import { objectToQuery } from '../../../until';
import { getMaterial } from '@/api/uniqueCode'
import { onShow, onLoad } from "@dcloudio/uni-app";
const OPERATE_CONFIG = {
    // 唯一码创建 
    issueUniqueCode: {
        back: '/pages/warehousing/uniqueCode/issueUniqueCode/index'
    },
    //唯一码编辑
    issueUniqueCode_edit: {
        back: '/pages/warehousing/uniqueCode/issueUniqueCode/index'
    },
    //入库单开单
    stockIn: {
        back: '/pages/warehousing/stockIn/create'
    },
    //入库单入库
    stockIn_inbound: {
        back: '/pages/warehousing/uniqueCode/issueUniqueCode/index'
    },
    //入库单编辑
    stockIn_detail: {
        back: '/pages/warehousing/stockIn/create'
    },
}
// ref:下拉加载
const pagingRef = ref(null)
// 数据：查询参数
const queryParams = ref({
    keyword: ''
})
// 数据：物料
const materialList = ref([])
// 数据：路径参数
const pathParams = ref('')
// 数据：返回路径标识
const keyType = computed(() => pathParams?.value?.type)
const isInbound = computed(() => _.includes(pathParams?.value?.type, 'inbound'))
// 方法：获取列表
const getMaterialList = () => {
    getMaterial(queryParams.value).then(res => {
        res.rows.forEach(e => {
            e.showMore = false;
        });
        pagingRef.value.complete(res.rows)
    }).catch(res => {
        pagingRef.value.complete(false)
    })
}
// 方法：获取列表 - 入库生成唯一码
const getMaterialListInbound = () => {
    const list = uni.getStorageSync('app_material_select_list')
    materialList.value = list
}

onShow(() => {
    pagingRef.value?.reload?.()
})
onLoad((options) => {
    pathParams.value = options
    getMaterialListInbound()
})
// 方法：获取缓存物料信息
const getStorageMaterial = (val) => {
    // 唯一码编辑进入  数量默认1\唯一码物料表id\物料id
    if (pathParams.value.id) {
        const value = uni.getStorageSync('app_material');
        if (value && value?.length > 0) {
            return [{ ...val, quantity: 1, uniqueCodeMaterialId: value?.[0]?.id, uniqueCodeRemark: value?.[0]?.uniqueCodeRemark, materialId: val.id, isDelete: '0' }]
        }
    }
    return [{ ...val, quantity: 1 }]
}
// 方法：选择物料
const onMaterial = (val) => {
    let materialChecked = uni.getStorageSync('app_material');
    const path = objectToQuery(pathParams.value)
    if (!Array.isArray(materialChecked)) {
        materialChecked = [];
    }
    const item = _.find(materialChecked, (i) => i.materialId ? i.materialId === val.id : i.id === val.id)
    const idx = _.findIndex(materialChecked, (i) => i.materialId ? i.materialId === val.id : i.id === val.id)

    if (idx != -1 && item?.isDelete == '0') {    // isDelete为0表示未删除  1为已删除数据不在对比范围内
        if (keyType.value === 'stockIn') {
            uni.showToast({
                title: '该物料已添加，请勿重复添加！',
                mask: true,
                icon: 'none',
            })
        }

    } else {
        if (val) {
            if (keyType.value == 'stockIn') {
                materialChecked = [...materialChecked, { ...val, quantity: 1, isDelete: '0' }];
            } else {
                materialChecked = getStorageMaterial(val)
            }
            uni.setStorageSync('app_material', materialChecked);
        }

    }
    uni.navigateTo({
        url: OPERATE_CONFIG?.[keyType.value].back + path
    })
}

</script>
<style scoped lang="scss">
.topSearch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

.containerBox {
    // padding: 0 12rpx;
    padding-top: 60px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .zp-l-text-rpx {
        font-size: 12px;
    }
}
</style>