75 lines
1.7 KiB
Vue
75 lines
1.7 KiB
Vue
<script setup>
|
|
import { ref, inject, onMounted, defineProps, watch, watchEffect } from "vue";
|
|
import dayjs from "dayjs";
|
|
import useActiveBtn from "@/hooks/useActiveBtn";
|
|
|
|
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
|
|
|
|
const formState = ref({
|
|
pot: 0,
|
|
"130g": 0,
|
|
"150g": 0,
|
|
"1kg": 0,
|
|
"2kg": 0,
|
|
});
|
|
|
|
const date = ref([
|
|
{
|
|
key: "date",
|
|
value: dayjs(),
|
|
dateFormat: "yyyy-MM-dd",
|
|
placeholder: "日期設定",
|
|
},
|
|
]);
|
|
|
|
onMounted(() => {
|
|
setItems([
|
|
{ title: "產品 A", key: 1, active: true },
|
|
{ title: "產品 B", key: 2, active: false },
|
|
{ title: "產品 C", key: 3, active: false },
|
|
]);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<DateGroup :isBottomLabelExist="false" :items="date" :withLine="false">
|
|
<template #topLeft>日期</template>
|
|
</DateGroup>
|
|
<ButtonConnectedGroup
|
|
:items="items"
|
|
:className="`w-full mt-8 mb-4`"
|
|
size="md"
|
|
color="info"
|
|
:onclick="
|
|
(e, item) => {
|
|
changeActiveBtn(item);
|
|
}
|
|
"
|
|
/>
|
|
<div class="flex flex-col items-start">
|
|
<div class="flex justify-between">
|
|
<InputNumber :value="formState" width="150" class="mr-4" name="pot">
|
|
<template #topLeft>總數</template>
|
|
</InputNumber>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-start">
|
|
<p class="text-base">包裝類型</p>
|
|
<div class="flex justify-between">
|
|
<InputNumber
|
|
v-for="size in ['130g', '150g', '1kg', '2kg']"
|
|
:key="size"
|
|
:value="formState"
|
|
width="150"
|
|
class="mr-4"
|
|
:name="size"
|
|
>
|
|
<template #topLeft>{{ size }}</template>
|
|
</InputNumber>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|