hazardousWaste_app/pages/uniqueCode/issueUniqueCode/index.vue

<!-- 唯一码发放页面 -->
<template>
    <view class="content">
        <view class="remarkLine">
            <span>备注：</span>
            <uni-easyinput type="text" v-model="formData.remark" :inputBorder="false" placeholder="请输入备注" />
        </view>

        <!-- 物料列表 - 添加物料 -->
        <view class="remarkLine">
            <p>物料列表</p>
            <uv-button type="primary" :plain="true" size="small" text="添加物料" @click="toMaterial"></uv-button>

        </view>
        <view>
            <uni-forms ref="materialFormRef" :modelValue="formData.material" class="form">
                <view v-for="(item, idx) in materialList" :key="item.id" class="material-card"
                    style="padding: 24rpx; margin-bottom: 16rpx;">
                    <view style="display: flex; flex-direction: column; width: 100%;">
                        <!-- 标题行 -->
                        <view class="title">{{ item.materialName }} ({{ item.materialCode }})</view>

                        <!--小标题行  简称/型号/规格/类型 -->
                        <view 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>
                        </view>

                        <!-- 数量行 -->
                        <view class="tag">
                            <uni-tag :text="getTypeParentNames(item.typeParentNames)" type="error" />
                            <p class="tag-form">
                                <uni-forms-item :name="`material.${idx}.quantity`">
                                    <uni-easyinput v-model="formData.material[idx].quantity" type="number"
                                        :clearable="false" />
                                </uni-forms-item>
                                <span style=" margin-left: 8rpx; width: 16px;">{{ item.unitName }}</span>
                            </p>
                        </view>

                        <!-- 备注行 -->
                        <view class="remark">
                            <uni-forms-item :name="`material.${idx}.remark`" label="备注：">
                                <uni-easyinput type="text" v-model="formData.material[idx].remark" :clearable="false"
                                    :inputBorder="false" placeholder="请填写备注信息" />
                            </uni-forms-item>
                        </view>
                    </view>
                </view>
            </uni-forms>
        </view>

        <button class="bottom-btn" type="primary" @click="handleSubmit">提交</button>
    </view>
</template>
<script setup>
import { ref } from 'vue';
import { getTypeParentNames } from '../until';
import { addUniqueCode, editUniqueCode } from '@/api/uniqueCode'
import { onLoad, onShow } from '@dcloudio/uni-app';

const formData = ref({
    remark: '',
    material: []
})
// 物料列表
const materialList = ref([])
const materialFormRef = ref([])

// 路径参数
const pathParams = ref('')

// 选择物料列表
const toMaterial = () => {
    uni.navigateTo({
        url: '/pages/uniqueCode/issueUniqueCode/materialSelection'
    });

}
// 接收路径参数 - 修改标题
onLoad((options) => {
    pathParams.value = options
})
onShow(() => {
    if (pathParams.value.code) {
        uni.setNavigationBarTitle({ title: pathParams.value.code })
    }
})

// 创建/编辑 唯一码
const handleSubmit = () => {
    materialFormRef.value.validate().then(res => {
        let params = {
            ...formData.value,
            material: {
                materialId: formData.value.material[0].id,
                remark: formData.value.material[0].remark,
                quantity: formData.value.material[0].quantity,
                unitId: formData.value.material[0].unitId,
            }
        }
        if (pathParams.value.id) {
            params.id = pathParams.value.id;
            params.material.id = pathParams.value.materialId;
            params.material.materialId = formData.value.material[0].materialId;
            editUniqueCode(params).then((response) => {
                if (response.code == 200) {
                    uni.showToast({
                        title: '唯一码编辑成功',
                        mask: true,
                        icon: 'success',
                    })
                    uni.navigateTo({
                        url: `/pages/uniqueCode/myUniqueCode/detail?id=${pathParams.value.id}&code=${pathParams.value.code}`,
                    });
                }

            })
        } else {
            addUniqueCode(params).then((response) => {
                if (response.code == 200) {
                    uni.showToast({
                        title: '唯一码创建成功',
                        mask: true,
                        icon: 'success',
                    })
                    uni.switchTab({
                        url: "/pages/warehousing/index"
                    })
                }

            })
        }

    })
}

// 获取缓存内的物料列表
const getMaterialList = () => {
    uni.getStorage({
        key: 'app_material',
        success: ({ data }) => {
            materialList.value = data
            formData.value.material = data
            formData.value.remark = data?.[0]?.uniqueCodeRemark
            console.log(formData);
        },
        fail: (error) => { }
    })
}
getMaterialList();
</script>
<style scoped lang="scss">
.remarkLine {
    display: flex;
    align-items: center;
    background-color: #fff;
    justify-content: space-between;
    padding: 8rpx 24rpx;
    margin-bottom: 8rpx;
    min-height: 40rpx;

    span {
        font-size: 14px;
    }

    p {
        font-weight: 700;
        font-size: 14px;

    }

}

::v-deep .uv-button {
    height: 20px;
}

::v-deep .form {
    .title {
        color: #424242;
    }

    .tag {
        .uni-tag {
            display: flex;
            align-items: center;
            height: calc(25px - 6px);

        }

        .tag-form {
            display: flex;
            align-items: center;
        }

        .uni-forms-item {
            margin-bottom: 0;
            align-items: center;

            .uni-easyinput__content,
            .uni-easyinput__content-input {
                height: 25px;
                width: 80px;
            }
        }

    }

    .remark {
        .uni-forms-item {
            margin-bottom: 0;
            margin-top: 16rpx;
            display: flex;
            align-items: center;

            .uni-forms-item__label {
                color: #212121;
                height: 40rpx;
            }

            .uni-easyinput__content-input {
                height: 40rpx;

                .uni-input-wrapper {
                    text-align: right;
                }
            }

            .uni-input-placeholder {
                text-align: right;
                font-size: 13px;

            }
        }
    }


}
</style>