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

<template>
  <ProductCraft :data="defaultCraftData" @change="handleCraftChange" />
</template>

<script setup>
import { ref } from "vue";
import ProductCraft from "@/components/ProductCraft";

const defaultCraftData = ref([
  {
    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: true,
        disabled: false,
      },
    ],
  },
  {
    title: "刮刮膜",
    options: [
      {
        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 emits = defineEmits(["update:modelValue"]);

const handleCraftChange = (info) => {
  const { optionValue, itemIndex, data } = info;
  const currentItem = data[itemIndex];

  // 1. 处理当前工艺的单选：选中匹配的选项，取消同组其他选项
  currentItem.options.forEach((opt) => {
    if (opt.value === optionValue) {
    } else {
      if (itemIndex != 5) {
        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;
  handleDataInfo();
};

//处理工艺数据
const handleDataInfo = () => {
  let datainfo = [];
  defaultCraftData.value.forEach((craft) => {
    const selectedOption = craft.options.filter((opt) => {
      return opt.checked;
    });
    if (selectedOption && selectedOption.length > 0) {
      selectedOption.forEach((opt) => {
        let item = {};
        if (opt.checked) {
          item.type = opt.label;
          item.value = opt.value;
          if (opt.children) {
            let childItem = {};
            item.children = [];
            opt.children.forEach((child) => {
              if (child.id && child.value) {
                childItem[child.id] = child.value;
              } else {
                childItem.value = child.value;
              }
            });
            item.children.push(childItem);
          }
        }
        datainfo.push(item);
      });
    }
  });

  emits("update:modelValue", datainfo);
};

const verifyCraftData = () => {
  // 验证工艺数据的完整性和正确性

  return { valid: false, message: "工艺数据验证失败" };
};
handleDataInfo();

defineExpose({
  verifyCraftData,
});
</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>