<template>
|
<el-card class="location-item">
|
<div class="location-item__main">
|
<div class="location-item__title text-overflow-1">
|
<div>{{ info.code }}</div>
|
<div v-if="info.used && info.orderDTO" class="h-130 py-10">
|
<div class="text-12 text-primary">
|
{{ info.orderDTO.orderNo }}
|
</div>
|
<div
|
v-if="info.items && info.items.length > 0"
|
class="flex items-center mt-10"
|
>
|
<div class="text-subTitle text-12 flex-1 text-overflow-1">
|
{{ info.items[0].flowerName
|
}}<span class="ml-8">{{ info.items[0].flowerLevelStr }}</span
|
><span class="ml-8">{{ info.items[0].flowerColor }}</span
|
><span class="ml-8">{{ info.items[0].flowerUnit }}</span
|
>×{{ info.items[0].num }}
|
</div>
|
<el-popover placement="bottom" trigger="hover">
|
<el-table :data="info.items">
|
<el-table-column
|
prop="flowerName"
|
label="商品名称"
|
></el-table-column>
|
<el-table-column
|
prop="flowerLevelStr"
|
label="级别"
|
></el-table-column>
|
<el-table-column
|
prop="flowerColor"
|
label="颜色"
|
></el-table-column>
|
<el-table-column
|
property="flowerUnit"
|
label="规格"
|
></el-table-column>
|
<el-table-column
|
property="supplierName"
|
label="供应商名称"
|
></el-table-column>
|
</el-table>
|
<el-button slot="reference" type="text" class="p-0 ml-4"
|
>查看更多</el-button
|
>
|
</el-popover>
|
</div>
|
<div class="text-subTitle text-12 mt-10 text-overflow-1">
|
{{ info.orderDTO.customer
|
}}<span class="ml-8">{{ info.orderDTO.customerTel }}</span>
|
</div>
|
<el-tooltip
|
v-if="info.orderDTO.customerAddress"
|
class="item"
|
effect="dark"
|
:content="`${info.orderDTO.customerProvince || ''}${
|
info.orderDTO.customerCity || ''
|
}${info.orderDTO.customerRegion || ''}${
|
info.orderDTO.customerAddress || ''
|
}`"
|
placement="top-start"
|
>
|
<div class="text-subTitle text-12 mt-10 text-overflow-1">
|
{{ info.orderDTO.customerProvince }}{{ info.orderDTO.customerCity
|
}}{{ info.orderDTO.customerRegion
|
}}{{ info.orderDTO.customerAddress }}
|
</div>
|
</el-tooltip>
|
</div>
|
<div
|
v-else
|
class="h-130 flex items-center justify-center text-primary cursor-pointer"
|
@click="onAddOrder"
|
>
|
<i class="el-icon-circle-plus-outline mr-6"></i>
|
添加订单
|
</div>
|
</div>
|
</div>
|
<div class="location-item__bottom">
|
<div class="location-item__area">
|
{{ info.warehouseName }}
|
</div>
|
<div>
|
<el-tooltip class="item" effect="dark" content="编辑">
|
<i class="el-icon-edit" @click="editItem"></i>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="删除">
|
<i class="el-icon-delete is-delete" @click="deleteItem"></i>
|
</el-tooltip>
|
</div>
|
</div>
|
</el-card>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
info: {
|
type: Object,
|
default: () => ({}),
|
},
|
},
|
methods: {
|
editItem() {
|
this.$emit('edit')
|
},
|
deleteItem() {
|
this.$emit('delete')
|
},
|
onAddOrder() {
|
this.$emit('addOrder')
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.location-item {
|
position: relative;
|
margin-bottom: 20px;
|
&__main {
|
padding-top: 20px;
|
}
|
&__title {
|
font-size: 16px;
|
color: $main-title-color;
|
font-weight: bold;
|
}
|
&__bottom {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-top: 1px solid #eee;
|
height: 50px;
|
i {
|
font-size: 18px;
|
font-weight: normal;
|
padding: 0 6px;
|
cursor: pointer;
|
margin-left: 8px;
|
&.is-delete {
|
color: $danger-color;
|
}
|
}
|
}
|
&__area {
|
font-size: 14px;
|
color: $main-title-color;
|
}
|
}
|
::v-deep {
|
.el-card {
|
&__body {
|
padding-top: 0;
|
padding-bottom: 0;
|
}
|
}
|
}
|
</style>
|
