工艺框架

This commit is contained in:
2026-04-30 14:04:28 +08:00
parent 71eae187f2
commit ed0d1aaacf
5 changed files with 629 additions and 59 deletions
@@ -0,0 +1,64 @@
<template>
<template v-if="localData && localData.length > 0">
<template v-for="(item, index) in localData" :key="index">
<view style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px">
<text style="font-weight: bold">{{ item.title }}</text>
<view style="display: flex; gap: 5px 10px; align-items: center">
<template v-for="option in item.options" :key="option.value">
<el-checkbox :label="option.label" :value="option.value" :disabled="option.disabled" v-model="option.checked" @change="emitChange('option', { itemIndex: index, optionValue: option.value })" border> </el-checkbox>
<template v-if="option.checked && option.children?.length > 0">
<template v-for="(child, key) in option.children" :key="key">
<el-select v-if="child.type === 'select'" v-model="child.value" @change="emitChange('child', { itemIndex: index, optionValue: option.value, childKey: key, value: $event })" style="width: 150px">
<el-option v-for="opt in child.options" :key="opt.value" :value="opt.value" :label="opt.label"></el-option>
</el-select>
<el-input v-else-if="child.type === 'input'" :placeholder="child.placeholder" v-model="child.value" @change="emitChange('child', { itemIndex: index, optionValue: option.value, childKey: key, value: $event })" style="width: 100px"></el-input>
</template>
</template>
</template>
</view>
</view>
</template>
</template>
</template>
<script setup>
import { ref, watch, onMounted, defineEmits, defineProps } from "vue";
const props = defineProps({
data: {
type: Array,
required: true,
default: () => [],
},
});
const emit = defineEmits(["update:modelValue", "change"]);
const localData = ref(JSON.parse(JSON.stringify(props.data)));
onMounted(() => {
console.log("CheckBoxOnly mounted");
});
watch(
() => props.data,
(val) => {
if (val && val.length > 0) {
localData.value = JSON.parse(JSON.stringify(val));
}
},
{ deep: true, immediate: true },
);
const emitChange = (changeType, details) => {
emit("change", {
type: changeType,
...details,
data: JSON.parse(JSON.stringify(localData.value)),
});
};
</script>
<style scoped>
.el-checkbox {
margin-right: 0;
}
</style>
@@ -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,
// 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;
};
if (i == "配刮刮膜" || i == "粘刮刮膜") {
info.size = item.size;
}
params.push(info);
const verifyCraftData = () => {
// 验证工艺数据的完整性和正确性
return { valid: true };
};
defineExpose({
verifyCraftData,
});
}
});
emit("update:modelValue", params);
},
{ deep: true },
);
</script>
<style lang="scss" scoped>
@@ -0,0 +1,174 @@
<template>
<ProductCraft :data="defaultCraftData" @change="handleCraftChange" />
</template>
<script setup>
import { ref, watch, defineEmits, defineProps } from "vue";
import ProductCraft from "@/components/ProductCraft";
const defaultCraftData = ref([
{
title: "裁切工艺",
options: [
{
value: "模切",
label: "模切",
checked: true,
disabled: false,
},
],
},
{
title: "覆膜工艺",
options: [
{
value: "覆哑膜",
label: "覆哑膜",
checked: false,
disabled: false,
},
{
value: "覆亮膜",
label: "覆亮膜",
checked: true,
disabled: false,
},
],
},
{
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 handleCraftChange = (info) => {
const { optionValue, itemIndex, data } = info;
const currentItem = data[itemIndex];
// 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;
};
</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>
@@ -0,0 +1,184 @@
<template>
<ProductCraft :data="defaultCraftData" @change="handleCraftChange" />
</template>
<script setup>
import { ref, watch, defineEmits, defineProps } from "vue";
import ProductCraft from "@/components/ProductCraft";
const defaultCraftData = ref([
{
title: "裁切工艺",
options: [
{
value: "模切",
label: "模切",
checked: true,
disabled: false,
},
],
},
{
title: "覆膜工艺",
options: [
{
value: "覆哑膜",
label: "覆哑膜",
checked: false,
disabled: false,
},
{
value: "覆亮膜",
label: "覆亮膜",
checked: true,
disabled: false,
},
],
},
{
title: "印白工艺",
options: [
{
value: "不印白",
label: "不印白",
checked: true,
disabled: false,
},
{
value: "印白墨",
label: "印白墨",
checked: false,
disabled: false,
},
],
},
{
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: "长度",
},
],
},
],
},
]);
const handleCraftChange = (info) => {
const { optionValue, itemIndex, data } = info;
const currentItem = data[itemIndex];
// 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;
};
</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>
+18 -4
View File
@@ -36,16 +36,18 @@
</el-form-item>
<view class="form-title">客户旺旺</view>
<el-form-item>
<el-input style="width: 300px" v-model="data.number" placeholder="请输入客户旺旺" size="large"></el-input>
<el-input style="width: 300px" v-model="data.customerWw" placeholder="请输入客户旺旺" size="large"></el-input>
</el-form-item>
<component v-if="currentCraftComponent" :is="currentCraftComponent" v-model="data.craft" />
<component v-if="currentCraftComponent" :is="currentCraftComponent" ref="componentRef" />
<el-button type="primary" @click="handlesave">保存</el-button>
</el-form>
</view>
</template>
<script setup>
import { reactive, watch, shallowRef } from "vue";
import { ref, watch, shallowRef } from "vue";
import copperplate from "./crafts/copperplate.vue";
import pvc from "./crafts/pvc.vue";
import transparent from "./crafts/transparent.vue";
const materials = [
{ name: "铜板纸不干胶", images: "" },
@@ -74,11 +76,21 @@ const materials = [
const craftMap = {
铜板纸不干胶: copperplate,
pvc不干胶: pvc,
透明不干胶: transparent,
};
const currentCraftComponent = shallowRef(null);
const componentRef = ref(null);
const handlesave = () => {
console.log(data.value);
if (typeof componentRef.value?.verifyCraftData === "function") {
let { valid, message } = componentRef.value.verifyCraftData();
if (!valid) {
console.error("工艺数据验证失败:", message);
return;
}
}
};
const data = ref({
types: "常用种类",
@@ -86,6 +98,7 @@ const data = ref({
size: [],
count: null,
number: 1,
customerWw: "",
craft: [],
});
@@ -93,7 +106,7 @@ watch(
() => data.value.material,
(mat) => {
currentCraftComponent.value = craftMap[mat] || null;
data.value.craft = {}; // 重置
data.value.craft = [];
},
);
@@ -104,6 +117,7 @@ const handleChange = (val) => {
size: [],
count: null,
number: 1,
customerWw: "",
craft: [],
};
data.value = initData;