工艺框架

quoted-ui/src/components/ProductCraft/index.vue

@@ -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>

quoted-ui/src/views/product/sticker/crafts/copperplate.vue

@@ -1,78 +1,212 @@
 <template>
-  <view>
+  <ProductCraft :data="defaultCraftData" @change="handleCraftChange" />
-    <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 { ref, watch, defineEmits, defineProps } from "vue";
-import ChekcBoxOnly from "@/components/CheckBoxOnly";
+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: [],
+    title: "刮刮膜",
-    process: [],
-    size: "",
     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(
+  // 1. 处理当前工艺的单选：选中匹配的选项，取消同组其他选项
-  craftData,
+  currentItem.options.forEach((opt) => {
-  (val) => {
+    if (opt.value === optionValue) {
-    let params = [];
+    } else {
-    val.forEach((item) => {
+      opt.checked = false;
-      if (item.value.length > 0) {
+    }
-        item.value.forEach((i) => {
+  });
-          let info = {
+
-            name: i,
+  // 2. 互斥逻辑：排废工艺 与 烫金工艺 不能同时存在被选中的选项
-            value: i,
+  const wasteCraft = data.find((item) => item.title === "排废工艺");
-          };
+  const foilCraft = data.find((item) => item.title === "烫金工艺");
-          if (i == "配刮刮膜" || i == "粘刮刮膜") {
+
-            info.size = item.size;
+  if (wasteCraft && foilCraft) {
-          }
+    const wasteHasChecked = wasteCraft.options.some((opt) => opt.checked);
-          params.push(info);
+    const foilHasChecked = foilCraft.options.some((opt) => opt.checked);
-        });
+
-      }
+    if (wasteHasChecked) {
-    });
+      // 排废工艺有选中 → 禁用烫金工艺所有选项，并清空其选中状态
-    emit("update:modelValue", params);
+      foilCraft.options.forEach((opt) => {
-  },
+        opt.disabled = true;
-  { deep: 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>

quoted-ui/src/views/product/sticker/crafts/pvc.vue

@@ -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>

quoted-ui/src/views/product/sticker/crafts/transparent.vue

@@ -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>

quoted-ui/src/views/product/sticker/index.vue

@@ -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;