曾晨曦_branch
parent
5ee869116b
commit
7993782b9b
@ -1,47 +1,51 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-button @click="add">Add Item</el-button>
|
<div class="orders-container">
|
||||||
<el-button @click="onDelete">Delete Item</el-button>
|
<div v-if="orders.length > 0">
|
||||||
<el-scrollbar max-height="800px">
|
<div class="order" v-for="order in orders" :key="order.id">
|
||||||
<p v-for="item in count" :key="item" class="scrollbar-demo-item">
|
<div>Order ID: {{ order.id }}</div>
|
||||||
{{ item }}
|
<div>Customer Name: {{ order.customerName }}</div>
|
||||||
</p>
|
<div>Total Amount: {{ order.totalAmount }}</div>
|
||||||
<p v-for="review in reviews" :key="review.id" class="scrollbar-demo-item">
|
</div>
|
||||||
{{ review.content }}
|
</div>
|
||||||
</p>
|
<div v-else>
|
||||||
</el-scrollbar>
|
<div>No orders available</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script>
|
||||||
import { ref } from 'vue'
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
const count = ref(3)
|
orders: []
|
||||||
const reviews = ref([
|
};
|
||||||
{ id: 1, content: 'Great product!' },
|
},
|
||||||
{ id: 2, content: 'Fast shipping!' },
|
// Fetch orders data from backend when the component is created
|
||||||
{ id: 3, content: 'Excellent customer service!' }
|
created() {
|
||||||
])
|
this.fetchOrders();
|
||||||
|
},
|
||||||
const add = () => {
|
methods: {
|
||||||
count.value++
|
async fetchOrders() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('http://106.52.218.118:8081');
|
||||||
|
this.orders = await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
}
|
}
|
||||||
const onDelete = () => {
|
|
||||||
if (count.value > 0) {
|
|
||||||
count.value--
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style>
|
||||||
.scrollbar-demo-item {
|
.orders-container {
|
||||||
display: flex;
|
height: 400px; /* Set height for scrolling */
|
||||||
align-items: center;
|
overflow-y: auto; /* Enable vertical scrolling */
|
||||||
justify-content: center;
|
}
|
||||||
height: 50px;
|
|
||||||
|
.order {
|
||||||
|
border: 1px solid #003f3f;
|
||||||
|
padding: 10px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
text-align: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: var(--el-color-primary-light-9);
|
|
||||||
color: var(--el-color-primary);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,7 +1,49 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<el-transfer
|
||||||
|
v-model="value"
|
||||||
|
filterable
|
||||||
|
:filter-method="filterMethod"
|
||||||
|
filter-placeholder="State Abbreviations"
|
||||||
|
:data="data"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
<script>
|
interface Option {
|
||||||
|
key: number
|
||||||
|
label: string
|
||||||
|
initial: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const generateData = () => {
|
||||||
|
const data: Option[] = []
|
||||||
|
const states = [
|
||||||
|
'California',
|
||||||
|
'Illinois',
|
||||||
|
'Maryland',
|
||||||
|
'Texas',
|
||||||
|
'Florida',
|
||||||
|
'Colorado',
|
||||||
|
'Connecticut ',
|
||||||
|
]
|
||||||
|
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
|
||||||
|
states.forEach((city, index) => {
|
||||||
|
data.push({
|
||||||
|
label: city,
|
||||||
|
key: index,
|
||||||
|
initial: initials[index],
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = ref<Option[]>(generateData())
|
||||||
|
const value = ref([])
|
||||||
|
|
||||||
|
const filterMethod = (query, item) => {
|
||||||
|
return item.initial.toLowerCase().includes(query.toLowerCase())
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
Loading…
Reference in new issue