工艺框架
This commit is contained in:
@@ -1,78 +1,212 @@
|
||||
<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>
|
||||
<ProductCraft :data="defaultCraftData" @change="handleCraftChange" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineEmits, defineProps, watch } from "vue";
|
||||
import ChekcBoxOnly from "@/components/CheckBoxOnly";
|
||||
import { ref, watch, defineEmits, defineProps } from "vue";
|
||||
import ProductCraft from "@/components/ProductCraft";
|
||||
|
||||
const craftData = ref([
|
||||
const defaultCraftData = ref([
|
||||
{
|
||||
value: ["模切"],
|
||||
title: "裁切工艺",
|
||||
options: [
|
||||
{ value: "模切", label: "模切" },
|
||||
{ value: "裁切", label: "裁切" },
|
||||
{
|
||||
value: "模切",
|
||||
label: "模切",
|
||||
checked: true,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
value: "裁切",
|
||||
label: "裁切",
|
||||
checked: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: [],
|
||||
title: "覆膜工艺",
|
||||
options: [
|
||||
{ value: "覆哑膜", label: "覆哑膜" },
|
||||
{ value: "覆亮膜", label: "覆亮膜" },
|
||||
{
|
||||
value: "覆哑膜",
|
||||
label: "覆哑膜",
|
||||
checked: false,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
value: "覆亮膜",
|
||||
label: "覆亮膜",
|
||||
checked: true,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: [],
|
||||
process: [],
|
||||
size: "",
|
||||
title: "刮刮膜",
|
||||
options: [
|
||||
{ value: "配刮刮膜", label: "配刮刮膜" },
|
||||
{ value: "粘刮刮膜", label: "粘刮刮膜" },
|
||||
{
|
||||
value: "配刮刮膜",
|
||||
label: "配刮刮膜",
|
||||
checked: false,
|
||||
disabled: false,
|
||||
children: [
|
||||
{
|
||||
type: "select",
|
||||
value: "",
|
||||
id: "size",
|
||||
options: [
|
||||
{ value: "16*18", label: "16*18mm" },
|
||||
{ value: "20*30", label: "20*30mm" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "粘刮刮膜",
|
||||
label: "粘刮刮膜",
|
||||
checked: false,
|
||||
disabled: false,
|
||||
children: [
|
||||
{
|
||||
type: "select",
|
||||
value: "",
|
||||
id: "size",
|
||||
options: [{ value: "16*18", label: "16*18mm" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "排废工艺",
|
||||
options: [
|
||||
{
|
||||
value: "半排废",
|
||||
label: "半排废",
|
||||
checked: false,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
value: "全排废",
|
||||
label: "全排废",
|
||||
checked: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "烫金工艺",
|
||||
options: [
|
||||
{
|
||||
value: "纯烫金",
|
||||
label: "纯烫金",
|
||||
checked: false,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
value: "汤镭射银",
|
||||
label: "汤镭射银",
|
||||
checked: false,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
value: "彩色印刷+烫金/银",
|
||||
label: "彩色印刷+烫金/银",
|
||||
checked: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "特殊工艺",
|
||||
options: [
|
||||
{
|
||||
value: "内部模切",
|
||||
label: "内部模切",
|
||||
checked: false,
|
||||
disabled: false,
|
||||
children: [
|
||||
{
|
||||
type: "input",
|
||||
value: "",
|
||||
id: "count",
|
||||
placeholder: "个数",
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
value: "",
|
||||
id: "width",
|
||||
placeholder: "宽度",
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
value: "",
|
||||
id: "length",
|
||||
placeholder: "长度",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "划线",
|
||||
label: "划线",
|
||||
checked: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
const handleCraftChange = (info) => {
|
||||
const { optionValue, itemIndex, data } = info;
|
||||
const currentItem = data[itemIndex];
|
||||
|
||||
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 },
|
||||
);
|
||||
// 1. 处理当前工艺的单选：选中匹配的选项，取消同组其他选项
|
||||
currentItem.options.forEach((opt) => {
|
||||
if (opt.value === optionValue) {
|
||||
} else {
|
||||
opt.checked = false;
|
||||
}
|
||||
});
|
||||
|
||||
// 2. 互斥逻辑：排废工艺 与 烫金工艺 不能同时存在被选中的选项
|
||||
const wasteCraft = data.find((item) => item.title === "排废工艺");
|
||||
const foilCraft = data.find((item) => item.title === "烫金工艺");
|
||||
|
||||
if (wasteCraft && foilCraft) {
|
||||
const wasteHasChecked = wasteCraft.options.some((opt) => opt.checked);
|
||||
const foilHasChecked = foilCraft.options.some((opt) => opt.checked);
|
||||
|
||||
if (wasteHasChecked) {
|
||||
// 排废工艺有选中 → 禁用烫金工艺所有选项，并清空其选中状态
|
||||
foilCraft.options.forEach((opt) => {
|
||||
opt.disabled = true;
|
||||
opt.checked = false;
|
||||
});
|
||||
} else if (foilHasChecked) {
|
||||
// 烫金工艺有选中 → 禁⽤排废工艺所有选项，并清空其选中状态
|
||||
wasteCraft.options.forEach((opt) => {
|
||||
opt.disabled = true;
|
||||
opt.checked = false;
|
||||
});
|
||||
} else {
|
||||
// 两者都未选中 → 同时启用两个工艺的所有选项（不清空，原本就无选中）
|
||||
wasteCraft.options.forEach((opt) => (opt.disabled = false));
|
||||
foilCraft.options.forEach((opt) => (opt.disabled = false));
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 更新响应式数据
|
||||
defaultCraftData.value = data;
|
||||
};
|
||||
|
||||
const verifyCraftData = () => {
|
||||
// 验证工艺数据的完整性和正确性
|
||||
|
||||
return { valid: true };
|
||||
};
|
||||
defineExpose({
|
||||
verifyCraftData,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user