入库流程对接完毕

pages/components/MaterialList.vue

@@ -0,0 +1,281 @@
+<template>
+    <!-- 物料列表 - 添加物料 -->
+    <view class="materialList">
+
+        <view class="remarkLine">
+            <text>物料列表</text>
+            <uv-button type="primary" v-if="isEdit == 1" :plain="true" size="small" text="添加物料"
+                @click="toMaterial"></uv-button>
+            <view v-if="isEdit == 5" class="flex align-center justify-between">
+                <span class="f-12 mr-16 grey" style="font-size: 12px;" v-if="num > 0">
+                    剩余<span style="color: red;">
+                        {{ num }}
+                    </span>种物料未生成唯一码
+                </span>
+                <uv-button type="primary" :plain="true" size="small" text="快速生成唯一码"
+                    @click="toGenerateUniqueCodeQuickly"></uv-button>
+            </view>
+            <!-- <p class="btn-link" v-if="isEdit == 2" @click="toEdit">修改</p> -->
+        </view>
+
+        <!-- 物料列表-->
+        <view class="material-list-container">
+            <uni-forms ref="materialFormRef" :modelValue="formData">
+                <view v-for="(item, idx) in formData.material" :key="item.id || idx" class="material-box"
+                    @longpress="() => handleItemLongPress(item, index)">
+                    <view class="material-item" v-if="`${item?.isDelete}` === '0'">
+                        <!-- 标题 -->
+                        <view class="title mb-2">
+                            {{ item.materialName }} ({{ item.materialCode }})
+                        </view>
+                        <!-- 副标题：简称/型号/规格/类型 -->
+                        <view class="subTitle mb-2">
+                            <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>
+                        <!-- uniqueCode -->
+                        <view class="uniqueCode mb-2">
+                            <span class="f-12 " v-if="item.uniqueCode">唯一码：{{ item?.uniqueCode }}</span>
+                        </view>
+                        <!-- 数量 + 单位 -->
+                        <view class="tag-row mb-2">
+                            <span class="tag-error">{{ getTypeParentNames(item.typeParentNames) }}</span>
+                            <view class="quantity-form">
+                                <uni-forms-item :name="`material[${idx}].quantity`" label-width="0">
+                                    <uni-easyinput :disabled="!edit || isEdit == '5'"
+                                        v-model="formData.material[idx].quantity" type="number" :clearable="false"
+                                        placeholder="数量" />
+                                </uni-forms-item>
+                                <text class="unit">{{ item.unitName }}</text>
+                            </view>
+                        </view>
+                        <!-- 库存状态 -->
+                        <view class="flex justify-between mb-2 " v-if="isEdit == 3">
+                            <p style="font-size: 13px;">
+                                已入库：
+                                <span style="color:green">{{ getStockQuantity(item, 'complete') }}</span>
+                            </p>
+                            <p style="font-size: 13px;">
+                                剩余：
+                                <span style="color:red">{{ getStockQuantity(item, 'remaining') }}</span>
+                            </p>
+                        </view>
+                        <!-- 备注 -->
+                        <view class="remark-row">
+                            <uni-forms-item :name="`material[${idx}].remark`" label="备注：">
+                                <uni-easyinput :disabled="!edit" v-model="formData.material[idx].remark" type="text"
+                                    :clearable="false" :inputBorder="false" placeholder="请填写备注信息" />
+                            </uni-forms-item>
+                        </view>
+                    </view>
+                </view>
+
+                <!-- 空数据提示 -->
+                <view class="empty" v-if="!formData.material?.length">
+                    暂无物料，请添加物料
+                </view>
+            </uni-forms>
+        </view>
+
+        <!-- 选择物料 -->
+        <uv-modal ref="modalRef" class="chooseModal" :title="none" :showConfirmButton="false" :showCancelButton="false">
+            <p class="title">请选择称重来源</p>
+            <p class="link" @click="toMaterialSelection('0')">无线液位计</p>
+            <p class="link" @click="toMaterialSelection('1')">手动输入</p>
+
+        </uv-modal>
+
+        <!-- 删除弹窗 -->
+        <view>
+            <uni-popup ref="alertDialog" type="center">
+                <uni-popup-dialog type="error" v-if="isDialog" cancelText="取消" confirmText="确认" title="是否需要删除该唯一码？"
+                    @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
+            </uni-popup>
+        </view>
+    </view>
+
+</template>
+<script setup>
+import { computed, onMounted, ref, toRefs } from 'vue';
+import { assign, findIndex } from 'lodash';
+import { getStockQuantity, objectToQuery } from '../until';
+import { getTypeParentNames } from '../warehousing/uniqueCode/until';
+import { onLoad, onShow } from "@dcloudio/uni-app";
+
+const props = defineProps({
+    formData: { type: Object, default: () => ({ material: [], remark: '' }), required: true },//物料信息
+    isEdit: { type: Boolean, default: true, required: true },           //编辑1 / 物料只读2 / 入库单只读3 /入库生成唯一码编辑4 /5数量不可编辑 备注可编辑
+    backStr: { type: String, default: '' },                             //选择物料返回页面的标识
+    pathParams: { type: Object, default: {} },                          //只读时传入对应的code、id
+    extendData: { type: Object, default: {} },                          //其他额外参数
+})
+
+const { formData, isEdit, backStr, pathParams, extendData } = toRefs(props)
+console.log(extendData, 'extendData==>');
+
+//是否为编辑状态
+const edit = computed(() => {
+    if (`${isEdit.value}` === '1') return '1';
+    else if (`${isEdit.value}` === '4') return '4';
+    else return false;
+})
+
+// 删除：数据
+const delItem = ref(null)
+// 删除：开关
+const alertDialog = ref(null)
+// 删除：开关
+const isDialog = ref(false)
+const selectMaterialList = computed(() => extendData.value?.selectMaterialList)
+const num = computed(() => selectMaterialList.value?.length || 0)
+// 弹窗开关：入库单开单
+const modalRef = ref()
+
+// 按钮：添加物料
+const toMaterial = () => {
+    if (backStr.value == 'stockIn') {     // 入库单开单 - 添加物料可选择手输入/无线液位计
+        modalRef.value.open()
+    } else {
+        const path = objectToQuery({ ...pathParams.value, back: backStr?.value })
+        // 唯一码 - 编辑/新增
+        let url = '/pages/warehousing/uniqueCode/issueUniqueCode/materialSelection';
+        const value = uni.getStorageSync('app_material');
+        uni.setStorageSync('app_material', [{ ...value[0], uniqueCodeRemark: formData.value?.remark }]);  // 将最新的唯一码备注写入缓存
+        uni.navigateTo({
+            url: `${url}${path}`
+        })
+    }
+}
+// 添加物料弹窗： 入库单入库 时可选择手动/无线液
+const toMaterialSelection = (type) => {
+    // 0无线液 1手动输入  
+    let url = ''
+    const path = objectToQuery({ ...pathParams.value, back: backStr.value })
+    if (type === '1') {
+        url = '/pages/warehousing/uniqueCode/issueUniqueCode/materialSelection'
+    }
+    uni.navigateTo({
+        url: `${url}${path}`
+    })
+}
+// 快速生成唯一码 - 
+const toGenerateUniqueCodeQuickly = () => {
+    const path = objectToQuery({ ...pathParams.value, back: 'inbound' })
+    uni.navigateTo({
+        url: `/pages/warehousing/uniqueCode/issueUniqueCode/index${path}`
+    })
+
+}
+// 删除弹窗：显示 长按事件
+const handleItemLongPress = (val) => {
+    alertDialog.value.open()
+    isDialog.value = true
+    delItem.value = val
+}
+// 删除弹窗：关闭
+const dialogClose = () => {
+    alertDialog.value.close()
+    isDialog.value = false
+}
+// 删除弹窗：确认
+const dialogConfirm = () => {
+    const idx = findIndex(formData.value.material, (i) => `${i.id}` === `${delItem.value.id}`)
+    assign(formData.value.material[idx], { isDelete: '1' });
+    uni.setStorageSync('app_material', formData.value.material)
+
+}
+
+
+const getMaterialList = () => {
+    const params = formData.value?.material?.map((i) => ({
+        ...i,
+        material: {
+            //? 这里的判断是为了区分 =详情带出的物料以及新增的物料 详情带出的物料有id以及materialId  新增物料id为物料id materialId无值
+            materialId: i.materialId ? i.materialId : i.id,
+            id: i.materialId ? i.id : null,
+            remark: i.remark,
+            quantity: i.quantity,
+            unitId: i.unitId,
+            isDelete: i?.isDelete,
+            uniqueCode: i?.uniqueCode
+        },
+    }))
+    return params
+}
+
+defineExpose({
+    getMaterialList
+})
+</script>
+
+<style scoped lang="scss">
+.remarkLine {
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    justify-content: space-between;
+    padding: 12px 15px;
+    margin-bottom: 2rpx;
+
+    text {
+        font-weight: 700;
+        font-size: 13px;
+    }
+
+    .btn-link {
+        font-weight: 500;
+        color: #3c9cff;
+
+    }
+
+    span {
+        font-size: 14px;
+    }
+
+    p {
+        font-weight: 700;
+        font-size: 14px;
+
+    }
+}
+
+::v-deep .uv-button {
+    height: 30px;
+    // line-height: 60rpx;
+    font-size: 24rpx;
+}
+
+.material-item {
+    padding: 12px 15px;
+}
+
+.empty {
+    text-align: center;
+    padding: 60rpx 0;
+    color: #999;
+    font-size: 26rpx;
+}
+
+::v-deep.chooseModal {
+    .uv-modal__content {
+        display: block;
+        padding-top: 24rpx !important;
+        padding: 48rpx;
+
+        .title {
+            font-size: 16px;
+            margin: 16rpx 0;
+
+        }
+
+        .link {
+            color: #999;
+            margin-top: 24rpx;
+            font-size: 14px;
+
+        }
+    }
+}
+</style>