321 lines
8.4 KiB
Vue
321 lines
8.4 KiB
Vue
<template>
|
|
<Mask :width="1200" :height="600" :is-show="isShow" @close="exit" title="查看领用" :show-footer="true">
|
|
<div style="margin-top: 24px;padding: 0 24px">
|
|
<el-descriptions border label-width="100">
|
|
<el-descriptions-item label="领用人" width="200">
|
|
<el-input v-model="formData.name" disabled></el-input>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="备注">
|
|
<el-input v-model="formData.remark" disabled></el-input>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
<table class="simple-table" style="margin-top: 15px">
|
|
<thead>
|
|
<tr>
|
|
<th>名称</th>
|
|
<th>批次</th>
|
|
<th>生产批号</th>
|
|
<th>有效期</th>
|
|
<th>当前库存</th>
|
|
<th>出库数量</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template v-for="(item,index) in tableList" :key="index">
|
|
<tr>
|
|
<td>{{ item.name }}</td>
|
|
<td>
|
|
<el-select
|
|
v-model="item.selectList"
|
|
multiple
|
|
@change="addLine(item)"
|
|
:teleported="false"
|
|
style="width: 100px;"
|
|
collapse-tags
|
|
popper-class="table-select">
|
|
<div class="select-header">
|
|
<span>批次ID</span>
|
|
<span>生产批号</span>
|
|
<span>入库数据</span>
|
|
<span>有效期</span>
|
|
<span>进价</span>
|
|
</div>
|
|
<el-option
|
|
v-for="(subItem) in item.batchList"
|
|
:key="subItem.id"
|
|
:label="subItem.id"
|
|
:value="subItem.id"
|
|
:disabled="true"
|
|
>
|
|
<div class="option-row">
|
|
<span>{{ subItem.id }}</span>
|
|
<span>{{ subItem.productionBatchCode }}</span>
|
|
<span>{{ subItem.productionDate }}</span>
|
|
<span>{{ subItem.expiryDate }}</span>
|
|
<span>{{ subItem.purchaseUnitPrice }}</span>
|
|
</div>
|
|
</el-option>
|
|
</el-select>
|
|
</td>
|
|
<td></td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
{{ item.wholeNumber }}{{ item.packagingUnit }}
|
|
<template v-if="item.trdnFlag == 1">
|
|
{{ item.fragmentNumber }}{{ item.minPackagingUnit }}
|
|
</template>
|
|
</td>
|
|
<td>
|
|
{{ item.totalOutWholeNumber }}{{ item.packagingUnit }}
|
|
<template v-if="item.trdnFlag == 1">
|
|
{{ item.totalFragmentNumber }}{{ item.minPackagingUnit }}
|
|
</template>
|
|
</td>
|
|
</tr>
|
|
<template v-for="subItem in item.children">
|
|
<tr>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
<td>{{ subItem.productionBatchCode }}</td>
|
|
<td>{{ subItem.expiryDate }}</td>
|
|
<td>
|
|
{{ subItem.wholeNumber }}{{ subItem.packagingUnit }}
|
|
<template v-if="item.trdnFlag == 1">
|
|
{{ subItem.fragmentNumber }}{{ subItem.minPackagingUnit }}
|
|
</template>
|
|
</td>
|
|
<td>
|
|
{{ subItem.outWholeNumber }}{{ subItem.packagingUnit }}
|
|
<template v-if="item.trdnFlag == 1">
|
|
{{ subItem.outFragmentNumber }}{{ subItem.minPackagingUnit }}
|
|
</template>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<template #footer>
|
|
<div class="bottom">
|
|
<el-button type="primary" @click="exit">关闭</el-button>
|
|
</div>
|
|
</template>
|
|
</Mask>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {onMounted, ref, defineProps} from "vue";
|
|
import {post} from "@/utils/request.ts";
|
|
import CloseBtn from "@/components/CloseBtn.vue";
|
|
import Mask from "@/components/common/Mask.vue";
|
|
|
|
const props = defineProps({
|
|
id: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
})
|
|
const isShow = ref<any>(false)
|
|
const emit = defineEmits(['close'])
|
|
const exit = () => {
|
|
formData.value = {
|
|
useUserId: null,
|
|
name: '',
|
|
username: "",
|
|
remark: ''
|
|
}
|
|
isShow.value = false
|
|
emit('close')
|
|
}
|
|
|
|
const formData = ref({
|
|
useUserId: null,
|
|
name: '',
|
|
username: "",
|
|
remark: ''
|
|
})
|
|
|
|
interface Inventory {
|
|
goodId: string | number;
|
|
batchList?: any[];// 添加 batchList 属性
|
|
children: childCheck[];
|
|
packagingUnit?: string;
|
|
minPackagingUnit?: string;
|
|
totalOutWholeNumber: number;
|
|
totalFragmentNumber: number;
|
|
wholeNumber?: number;
|
|
fragmentNumber?: number;
|
|
selectList?: number[]; // 添加 selectList 属性并指定类型
|
|
name?: string;
|
|
trdnFlag?: number;
|
|
}
|
|
|
|
const tableList = ref<Inventory[]>([]);
|
|
|
|
interface childCheck {
|
|
id?: number,
|
|
goodsId: number,
|
|
name: string,
|
|
productionBatchCode: string,
|
|
minPackagingNumber: number,
|
|
productionDate: string
|
|
expiryDate: string,
|
|
purchaseUnitPrice: number,
|
|
wholeNumber: number,
|
|
packagingUnit: string,
|
|
fragmentNumber: number,
|
|
fragmentPrice: string,
|
|
minPackagingUnit: string;
|
|
outFragmentNumber: number;
|
|
outWholeNumber: number;
|
|
|
|
|
|
}
|
|
|
|
const addLine = (row: any) => {
|
|
post('inventory/goods/getListByIds', {idList: row.selectList}).then((list: any) => {
|
|
let children = [];
|
|
for (let i = 0; i < list.length; i++) {
|
|
let inventoryGoods = list[i];
|
|
let index = row.children ? row.children.findIndex((item: any) => item.id === inventoryGoods.id) : -1;
|
|
if (index > -1) {
|
|
children.push(row.children[index]);
|
|
} else {
|
|
let childCheck: childCheck = {
|
|
name: inventoryGoods.name,
|
|
id: inventoryGoods.id,
|
|
goodsId: inventoryGoods.goodId,
|
|
minPackagingNumber: row.minPackagingNumber,
|
|
productionBatchCode: inventoryGoods.productionBatchCode,
|
|
productionDate: inventoryGoods.productionDate,
|
|
expiryDate: inventoryGoods.expiryDate,
|
|
purchaseUnitPrice: inventoryGoods.purchaseUnitPrice,
|
|
wholeNumber: inventoryGoods.wholeNumber,
|
|
packagingUnit: inventoryGoods.packagingUnit,
|
|
fragmentNumber: inventoryGoods.fragmentNumber,
|
|
fragmentPrice: inventoryGoods.fragmentPrice,
|
|
minPackagingUnit: row.minPackagingUnit,
|
|
outFragmentNumber: inventoryGoods.outFragmentNumber,
|
|
outWholeNumber: inventoryGoods.outWholeNumber,
|
|
|
|
}
|
|
children.push(childCheck);
|
|
}
|
|
}
|
|
row.children = children;
|
|
})
|
|
}
|
|
const getUserInfo = () => {
|
|
post("manager/user/verify").then((res: any) => {
|
|
formData.value.useUserId = res.id;
|
|
formData.value.name = res.name;
|
|
formData.value.username = res.username;
|
|
})
|
|
}
|
|
const detail = (id: any) => {
|
|
isShow.value = true
|
|
post("inventory/apply/getApplyDetail", {id}).then((res: any) => {
|
|
tableList.value = JSON.parse(res);
|
|
})
|
|
}
|
|
onMounted(() => {
|
|
|
|
})
|
|
const init=(id: any) => {
|
|
getUserInfo()
|
|
detail(id)
|
|
}
|
|
defineExpose({init})
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.simple-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
border: none;
|
|
color: #606266;
|
|
|
|
thead {
|
|
background-color: #f5f7fa;
|
|
|
|
th {
|
|
padding: 12px 0;
|
|
text-align: left;
|
|
font-weight: bold; /* 表头加粗 */
|
|
font-size: 14px; /* 表头字号 */
|
|
border-bottom: 1px solid #ebeef5;
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
tr:hover {
|
|
background-color: #f5f7fa; /* 悬停效果 */
|
|
}
|
|
|
|
td {
|
|
padding: 12px 0;
|
|
text-align: left;
|
|
font-size: 14px; /* 单元格字号 */
|
|
border-bottom: 1px solid #ebeef5;
|
|
}
|
|
}
|
|
|
|
.table-select {
|
|
.el-select-dropdown__item {
|
|
padding: 0 !important;
|
|
height: auto;
|
|
}
|
|
|
|
// 表头样式
|
|
.select-header {
|
|
display: flex;
|
|
padding: 8px 16px;
|
|
background: #f5f7fa;
|
|
border-bottom: 1px solid #ebeef5;
|
|
|
|
span {
|
|
flex: 1;
|
|
min-width: 110px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
// 选项行样式
|
|
.option-row {
|
|
display: flex;
|
|
padding: 8px 16px;
|
|
|
|
span {
|
|
flex: 1;
|
|
min-width: 110px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.remark {
|
|
// 前置标签背景色
|
|
:deep(.el-input-group__prepend) {
|
|
background-color: #fffdec;
|
|
}
|
|
|
|
// 输入框主体背景色
|
|
:deep(.el-input__wrapper) {
|
|
background-color: #fffdec;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
|
|
.bottom {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 0 24px;
|
|
}
|
|
</style> |