281 lines
10 KiB
Vue
281 lines
10 KiB
Vue
|
<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>
|