169 lines
3.7 KiB
Vue
169 lines
3.7 KiB
Vue
<template>
|
|
<el-popover
|
|
title=""
|
|
placement="bottom-start"
|
|
trigger="click"
|
|
width="340px"
|
|
popper-class="traceability"
|
|
>
|
|
<template #reference>
|
|
<el-input
|
|
placeholder="追溯码"
|
|
clearable
|
|
v-model="inputTraceabilityCode"
|
|
style="width: 100%;"
|
|
@keydown.enter="addTraceabilityCodeDo(props.item)"
|
|
></el-input>
|
|
</template>
|
|
<template #default>
|
|
<table class="table" style="border-spacing: 0">
|
|
<thead>
|
|
<tr class="table-title">
|
|
<th>追溯码</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="table-body">
|
|
<tr v-for="(item,index) in item.traceAbilityCodeList" :key="index">
|
|
<td>{{ item }}</td>
|
|
<td>
|
|
<div @click="removeTraceAbility(item)">
|
|
<el-icon>
|
|
<Delete/>
|
|
</el-icon>
|
|
删除
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
</el-popover>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {ref} from "vue";
|
|
import {Delete} from "@element-plus/icons-vue"
|
|
|
|
interface TraceAbilityCode {
|
|
code: string;
|
|
number: number;
|
|
showNumberInput?: boolean;
|
|
}
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object as () => {
|
|
id?: number | undefined;
|
|
traceAbilityCodeList: TraceAbilityCode[];
|
|
retailNumber: number;
|
|
gatherNumber: number;
|
|
selectedUnit: string;
|
|
idCode: string[];
|
|
packagingUnit: string;
|
|
minPackagingUnit: string;
|
|
minPackagingNumber: number;
|
|
},
|
|
default: () => ({
|
|
traceAbilityCodeList: [],
|
|
retailNumber: 0,
|
|
gatherNumber: 0,
|
|
selectedUnit: "",
|
|
idCode: [],
|
|
packagingUnit: "",
|
|
minPackagingUnit: "",
|
|
minPackagingNumber: 0,
|
|
}),
|
|
},
|
|
})
|
|
const inputTraceabilityCode = ref("");
|
|
const emit = defineEmits(["addTraceabilityCode"]);
|
|
const addTraceabilityCodeDo = (item: any) => {
|
|
emit("addTraceabilityCode", item, inputTraceabilityCode.value)
|
|
inputTraceabilityCode.value = ""
|
|
}
|
|
|
|
const removeTraceAbility = (code: any) => {
|
|
const index = props.item.traceAbilityCodeList.findIndex(
|
|
(codeObj: any) => codeObj === code
|
|
);
|
|
|
|
if (index !== -1) {
|
|
props.item.traceAbilityCodeList.splice(index, 1); // 删除对应项
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.table {
|
|
width: 100%;
|
|
th {
|
|
background: none !important;
|
|
}
|
|
.table-title {
|
|
width: 100%;
|
|
height: 36px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #333333;
|
|
font-style: normal;
|
|
padding: 0 25px;
|
|
background: #F5FAFF;
|
|
th {
|
|
text-align: left;
|
|
&:first-child {
|
|
width: 270px;
|
|
padding-left: 24px;
|
|
overflow: hidden;
|
|
}
|
|
&:last-child {
|
|
text-align: center;
|
|
line-height: 36px;
|
|
}
|
|
}
|
|
}
|
|
.table-body {
|
|
height: 52px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #666666;
|
|
font-style: normal;
|
|
padding: 0 25px;
|
|
tr {
|
|
height: 36px;
|
|
font-size: 14px;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
td {
|
|
height: 36px;
|
|
|
|
&:first-child {
|
|
height: 100%;
|
|
width: 132px;
|
|
padding-left: 25px;
|
|
white-space: nowrap; /* 防止文本换行 */
|
|
overflow: hidden; /* 隐藏溢出的文本 */
|
|
text-overflow: ellipsis; /* 显示省略号 */
|
|
}
|
|
|
|
&:last-child {
|
|
height: 100%;
|
|
text-align: center;
|
|
color: #FF0000;
|
|
line-height: 36px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
table, tbody, td {
|
|
border-bottom: 1px solid #EAEAEC; /* 明确设置边框 */
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border: none;
|
|
}
|
|
</style> |