91 lines
2.2 KiB
Vue
91 lines
2.2 KiB
Vue
<template>
|
||
<view>
|
||
<view class="line-container">
|
||
<view class="form-title">裁切工艺：</view>
|
||
<ChekcBoxOnly :data="craftData[0].options" v-model="craftData[0].value" />
|
||
</view>
|
||
<view class="line-container">
|
||
<view class="form-title">覆膜工艺：</view>
|
||
<ChekcBoxOnly :data="craftData[1].options" v-model="craftData[1].value" />
|
||
</view>
|
||
<view class="line-container">
|
||
<!-- 刮刮膜带有子选择 -->
|
||
<view class="form-title">刮刮膜：</view>
|
||
<ChekcBoxOnly :data="craftData[2].options" v-model="craftData[2].value" />
|
||
<el-select v-if="craftData[2].value.length > 0" v-model="craftData[2].size" placeholder="选择尺寸" style="width: 100px; margin-left: 20px">
|
||
<el-option label="6*18mm" value="6*18" />
|
||
</el-select>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, defineEmits, defineProps, watch } from "vue";
|
||
import ChekcBoxOnly from "@/components/CheckBoxOnly";
|
||
|
||
const craftData = ref([
|
||
{
|
||
value: ["模切"],
|
||
options: [
|
||
{ value: "模切", label: "模切" },
|
||
{ value: "裁切", label: "裁切" },
|
||
],
|
||
},
|
||
{
|
||
value: [],
|
||
options: [
|
||
{ value: "覆哑膜", label: "覆哑膜" },
|
||
{ value: "覆亮膜", label: "覆亮膜" },
|
||
],
|
||
},
|
||
{
|
||
value: [],
|
||
process: [],
|
||
size: "",
|
||
options: [
|
||
{ value: "配刮刮膜", label: "配刮刮膜" },
|
||
{ value: "粘刮刮膜", label: "粘刮刮膜" },
|
||
],
|
||
},
|
||
]);
|
||
|
||
const emit = defineEmits(["update:modelValue"]);
|
||
|
||
watch(
|
||
craftData,
|
||
(val) => {
|
||
let params = [];
|
||
val.forEach((item) => {
|
||
if (item.value.length > 0) {
|
||
item.value.forEach((i) => {
|
||
let info = {
|
||
name: i,
|
||
value: i,
|
||
};
|
||
if (i == "配刮刮膜" || i == "粘刮刮膜") {
|
||
info.size = item.size;
|
||
}
|
||
params.push(info);
|
||
});
|
||
}
|
||
});
|
||
emit("update:modelValue", params);
|
||
},
|
||
{ deep: true },
|
||
);
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.line-container {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
.form-title {
|
||
display: block;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
margin-right: 20px;
|
||
}
|
||
</style>
|