363 lines
8.4 KiB
Vue
363 lines
8.4 KiB
Vue
<template>
|
||
<Mask :width="1200" :height="540" :is-show="isShow" :top="100" @close="exit" title="查看盘点" :show-footer="true">
|
||
<div class="body_wrapper">
|
||
<div class="top">
|
||
<el-form :model="form" style="width: 100%" label-width="auto" class="demo-ruleForm" label-position="top">
|
||
<el-form-item label="备注" style="width: 100%;margin-right: 0">
|
||
<el-input disabled v-model="form.remark"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="content">
|
||
<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 list">
|
||
<tr>
|
||
<td>{{ item.name }}</td>
|
||
<td v-if="item.childIdList.length=0">无</td>
|
||
<td v-else>
|
||
<el-select
|
||
v-model="item.childIdList"
|
||
multiple
|
||
:teleported="false"
|
||
style="width: 150px;"
|
||
collapse-tags
|
||
popper-class="table-select"
|
||
:collapse-tags-tooltip="true"
|
||
>
|
||
<div class="select-header">
|
||
<span>批次ID</span>
|
||
<span>生产批号</span>
|
||
<span>入库时间</span>
|
||
<span>有效期</span>
|
||
<span>进价</span>
|
||
</div>
|
||
<el-option
|
||
v-for="(subItem,subIndex) in item.selectList"
|
||
:key="subItem.id"
|
||
:label="subItem.id"
|
||
:value="subItem.id"
|
||
disabled
|
||
>
|
||
<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>{{ item.minPackagingNumber }}</td>
|
||
<td>
|
||
{{ item.before.wholeNumber }}{{ item.packagingUnit }}
|
||
<template v-if="item.trdnFlag ==1">
|
||
{{ item.before.fragmentNumber }}{{ item.minPackagingUnit }}
|
||
</template>
|
||
</td>
|
||
<td>
|
||
{{ item.after.wholeNumber }}{{ item.packagingUnit }}
|
||
<template v-if="item.trdnFlag ==1">
|
||
{{ item.after.fragmentNumber }}{{ item.minPackagingUnit }}
|
||
</template>
|
||
</td>
|
||
<td>
|
||
{{ item.change.wholeNumber }}{{ item.packagingUnit }}
|
||
<template v-if="item.trdnFlag ==1">
|
||
{{ item.change.fragmentNumber }}{{ item.minPackagingUnit }}
|
||
</template>
|
||
</td>
|
||
</tr>
|
||
<template v-for="(subItem,subIndex) in item.children">
|
||
<tr>
|
||
<td>-</td>
|
||
<td>-</td>
|
||
<td>-</td>
|
||
<td>
|
||
{{ subItem.before.wholeNumber }}{{ item.packagingUnit }}
|
||
<template v-if="item.trdnFlag ==1">
|
||
{{ subItem.before.fragmentNumber }}{{ item.minPackagingUnit }}
|
||
</template>
|
||
</td>
|
||
<td>
|
||
{{ subItem.after.wholeNumber }}{{ item.packagingUnit }}
|
||
<template v-if="item.trdnFlag ==1">
|
||
{{ subItem.after.fragmentNumber }}{{ item.minPackagingUnit }}
|
||
</template>
|
||
</td>
|
||
<td>
|
||
{{ subItem.change.wholeNumber }}{{ item.packagingUnit }}
|
||
<template v-if="item.trdnFlag ==1">
|
||
{{ item.change.fragmentNumber }}{{ item.minPackagingUnit }}
|
||
</template>
|
||
</td>
|
||
</tr>
|
||
</template>
|
||
</template>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<div class="bottom">
|
||
<div class="btn">
|
||
<el-button @click="exit" type="primary">关闭</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</Mask>
|
||
|
||
|
||
|
||
</template>
|
||
|
||
|
||
<script setup lang="ts">
|
||
import {onMounted,defineProps} from "vue";
|
||
import {post} from "@/utils/request.ts";
|
||
import {ref} from "vue";
|
||
import Mask from "@/components/common/Mask.vue";
|
||
const props = defineProps({
|
||
id: {
|
||
type: String,
|
||
default: null
|
||
}
|
||
})
|
||
const form=ref<any>({
|
||
remark: "",
|
||
})
|
||
interface Check {
|
||
id?: number,
|
||
goodsId: number,
|
||
name: string,
|
||
minPackagingUnit: string,
|
||
packagingUnit: string,
|
||
minPackagingNumber: number,
|
||
listSize: number,
|
||
trdnFlag: number,
|
||
childIdList: number[],
|
||
before: {
|
||
wholeNumber: number,
|
||
fragmentNumber: number,
|
||
},
|
||
after: {
|
||
wholeNumber: number,
|
||
fragmentNumber: number,
|
||
},
|
||
change: {
|
||
wholeNumber: number,
|
||
fragmentNumber: number,
|
||
}
|
||
children: childCheck[],
|
||
selectList: seletcType[],
|
||
}
|
||
|
||
interface seletcType {
|
||
id: number,
|
||
wholeNumber: number,
|
||
fragmentNumber: number,
|
||
productionBatchCode: string,
|
||
productionDate: string,
|
||
expiryDate: string,
|
||
purchaseUnitPrice: string
|
||
}
|
||
|
||
interface childCheck {
|
||
id?: number,
|
||
goodsId: number,
|
||
name: string,
|
||
minPackagingNumber: number,
|
||
before: {
|
||
wholeNumber: number,
|
||
fragmentNumber: number,
|
||
},
|
||
after: {
|
||
wholeNumber: number,
|
||
fragmentNumber: number,
|
||
},
|
||
change: {
|
||
wholeNumber: number,
|
||
fragmentNumber: number,
|
||
}
|
||
|
||
}
|
||
|
||
const list = ref<Check[]>([])
|
||
const emit = defineEmits(['close'])
|
||
let exit = () => {
|
||
form.value = {
|
||
remark: ""
|
||
}
|
||
list.value=[]
|
||
isShow.value = false
|
||
emit('close');
|
||
}
|
||
const detail = (id: any) => {
|
||
isShow.value = true
|
||
post("inventory/check/getCheckDetail",{id}).then((res: any) => {
|
||
list.value = JSON.parse(res);
|
||
})
|
||
}
|
||
const isShow = ref(false)
|
||
defineExpose({detail})
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.body_wrapper {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
min-height: 0;
|
||
flex-direction: column;
|
||
margin-top: 24px;
|
||
padding: 0 24px;
|
||
|
||
.top {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 60px;
|
||
}
|
||
|
||
.content {
|
||
display: block;
|
||
width: 100%;
|
||
flex: 1;
|
||
//min-height: 0;
|
||
|
||
table {
|
||
//border-collapse: collapse;
|
||
width: 100%;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
//border: 1px solid #ccc;
|
||
padding: 8px;
|
||
text-align: left;
|
||
|
||
}
|
||
|
||
th {
|
||
//background-color: #F9F9F9;
|
||
}
|
||
|
||
/* 可选：为可点击的行添加鼠标悬停效果 */
|
||
tr:hover {
|
||
//background-color: #f5f5f5;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
height: 60px;
|
||
position: absolute;
|
||
right: 10px;
|
||
bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
|
||
.text {
|
||
font-size: 16px;
|
||
width: 200px;
|
||
color: #6a6a6a;
|
||
}
|
||
}
|
||
|
||
/* 表格容器 */
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
padding: 0 24px;
|
||
}
|
||
</style> |