yanfeng-bom-excel-mindmap/src/pages/excel/ConfigDrawerProduction.vue

<template>
  <el-drawer
    v-model="visible"
    title="制造BOM详情配置"
    size="600"
    v-loading="loading"
  >
    <el-form
      ref="form"
      label-position="top"
      :model="formData"
      :disabled="nodeData?.is_disable || readonly"
      scroll-to-error
    >
      <el-row :gutter="12">
        <!-- 层级号 -->
        <el-col :span="12">
          <el-form-item label="级号" prop="lever_number">
            <el-input
              placeholder="请输入"
              disabled
              v-model="formData.lever_number"
            />
          </el-form-item>
        </el-col>

        <!-- 序号 -->
        <el-col :span="12">
          <el-form-item label="序号" prop="gridorders">
            <el-input
              disabled
              placeholder="请输入"
              v-model="formData.gridorders"
            />
          </el-form-item>
        </el-col>

        <!-- NK零件号 -->
        <el-col :span="12">
          <el-form-item label="NK零件号" name="erp_code">
            <div class="flex gap-8px">
              <el-input
                placeholder="推荐或生成..."
                v-model="formData.erp_code"
                :disabled="true"
              />
              <el-button
                type="text"
                :icon="CirclePlus"
                :disabled="!isEmpty || erpCodeDisabled"
                @click="openRecomendModal"
              >
                推荐
              </el-button>
              <el-button
                type="text"
                :disabled="!isEmpty || erpCodeDisabled"
                @click="handleGenratorErpCode"
              >
                生成
              </el-button>
              <el-button
                type="text"
                :disabled="isEmpty || erpCodeDisabled"
                @click="handleEmptyErpCode"
              >
                置空
              </el-button>
            </div>
          </el-form-item>
        </el-col>

        <!-- NK零件名称 -->
        <el-col :span="12">
          <el-form-item label="NK零件名称" prop="part_name">
            <el-input
              placeholder="请输入"
              :disabled="!isEmpty"
              v-model="formData.part_name"
            />
          </el-form-item>
        </el-col>

        <!-- 产品类别 -->
        <el-col :span="12">
          <el-form-item label="产品类别" name="product_category">
            <!-- 非空值，或者为制造bom时 -->
            <el-select
              disabled
              v-model="formData.product_category"
              placeholder="请选择"
            >
              <el-option
                v-for="item in procuctTypeOptions.map((item) => ({
                  label: item,
                  value: item,
                }))"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 制造工艺 -->
        <el-col :span="12">
          <el-form-item label="制造工艺" name="process">
            <el-select v-model="formData.process" disabled placeholder="请选择">
              <el-option
                v-for="item in processOptions.map((item) => ({
                  label: item,
                  value: item,
                }))"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 长宽高 -->
        <el-row :gutter="8">
          <el-col :span="8"
            ><el-form-item label="长" name="length">
              <el-input-number
                disabled
                class="inline-block w-full!"
                placeholder="请输入"
                v-model="formData.length"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="宽" name="width">
              <el-input-number
                disabled
                class="inline-block w-full!"
                placeholder="请输入"
                v-model="formData.width"
              /> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="高" name="height">
              <el-input-number
                disabled
                class="inline-block w-full!"
                placeholder="请输入"
                v-model="formData.height"
              /> </el-form-item
          ></el-col>
        </el-row>

        <!-- 颜色 -->
        <el-col :span="12">
          <el-form-item label="颜色" name="color">
            <el-input disabled placeholder="请输入" v-model="formData.color" />
          </el-form-item>
        </el-col>

        <!-- 光泽度 -->
        <el-col :span="12">
          <el-form-item label="光泽度" name="color_config">
            <el-input
              disabled
              placeholder="请输入"
              v-model="formData.color_config"
            />
          </el-form-item>
        </el-col>

        <!-- 自制/外购/支给（M/P/C） -->
        <el-col :span="12">
          <el-form-item label="自制/外购/支给（M/P/C）" prop="part_type">
            <el-select
              disabled
              v-model="formData.part_type"
              placeholder="请选择"
              @change="handlePartTypeChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 零件属性 -->
        <el-col :span="12">
          <el-form-item label="零件属性" name="part_attribute">
            <el-select disabled placeholder="" v-model="formData.part_attribute">
              <el-option
                v-for="item in partAttributeOptions.map((item) => ({
                  label: item,
                  value: item,
                }))"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 材料牌号 -->
        <el-col :span="12">
          <el-form-item label="材料牌号" name="material_grade">
            <el-input
              disabled
              placeholder="请输入"
              v-model="formData.material_grade"
            />
          </el-form-item>
        </el-col>

        <!-- 材料供应商 -->
        <el-col :span="12">
          <el-form-item label="材料供应商" name="supplier">
            <el-input
              disabled
              placeholder="请输入"
              v-model="formData.supplier"
            />
          </el-form-item>
        </el-col>

        <!-- 计量单位 -->
        <el-col :span="12"
          ><el-form-item label="计量单位" name="unit">
            <el-input disabled placeholder="请输入" v-model="formData.unit" />
          </el-form-item>
        </el-col>

        <!-- 标准用量 -->
        <el-col :span="12"
          ><el-form-item label="标准用量" name="qty">
            <el-input-number
              disabled
              style="width: 100%"
              placeholder="请输入"
              v-model="formData.qty"
            />
          </el-form-item>
        </el-col>

        <!-- 工艺消耗 -->
        <el-col :span="12">
          <el-form-item label="工艺消耗" name="technology_consume">
            <el-input-number
              style="width: 100%"
              placeholder="请输入"
              v-model="formData.technology_consume"
            />
          </el-form-item>
        </el-col>

        <!-- 不良率% -->
        <el-col :span="12">
          <el-form-item label="不良率%" name="nonperform_rate">
            <el-input-number
              style="width: 100%"
              placeholder="请输入"
              v-model="formData.nonperform_rate"
            >
              <template #suffix>
                <span>%</span>
              </template>
            </el-input-number>
          </el-form-item>
        </el-col>

        <!-- 制造区域 -->
        <el-col :span="12">
          <el-form-item label="制造区域" prop="manufacture_area">
            <el-select
              :disabled="!isEmpty"
              v-model="formData.manufacture_area"
              placeholder="请选择"
            >
              <el-option
                v-for="item in manufatureAreaOptions.map((item) => ({
                  label: item,
                  value: item,
                }))"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 制造单元 -->
        <el-col :span="12">
          <el-form-item label="制造单元" prop="manufacture_report">
            <el-select
              :disabled="!isEmpty"
              v-model="formData.manufacture_report"
              placeholder="请选择"
            >
              <el-option
                v-for="item in manufatureUnitOptions.map((item) => ({
                  label: item,
                  value: item,
                }))"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 制造设备类(组) -->
        <el-col :span="12">
          <el-form-item label="制造设备类(组)" prop="manufature_equip">
            <el-input
              placeholder="请输入"
              v-model="formData.manufature_equip"
            />
          </el-form-item>
        </el-col>

        <!-- 模具/工装治具 -->
        <el-col :span="12">
          <el-form-item label="模具/工装治具" prop="moldtooling_fixture">
            <el-input
              placeholder="请输入"
              v-model="formData.moldtooling_fixture"
            />
          </el-form-item>
        </el-col>

        <!-- 模腔数/取数（pcs） -->
        <el-col :span="12">
          <el-form-item label="模腔数/取数（pcs）" prop="cavities">
            <el-input-number
              :step="1"
              :precision="0"
              placeholder="请输入"
              v-model="formData.cavities"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>

        <!-- 制造周期（S） -->
        <el-col :span="12">
          <el-form-item label="制造周期（S）" prop="production_cycle">
            <el-input-number placeholder="请输入" v-model="formData.production_cycle" style="width: 100%" />
          </el-form-item>
        </el-col>

        <!-- 持台人数 -->
        <el-col :span="12">
          <el-form-item label="持台人数" prop="holding_number">
            <el-input-number
              :step="1"
              :precision="0"
              placeholder="请输入"
              v-model="formData.holding_number"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>

        <!-- 单件节拍(S) -->
        <el-col :span="12">
          <el-form-item label="单件节拍(S)" prop="single_piece">
            <el-input-number
              placeholder="请输入"
              v-model="formData.single_piece"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>

        <!-- 外包类型 -->
        <el-col :span="12">
          <el-form-item label="外包类型" prop="package_type">
            <el-input placeholder="请输入" v-model="formData.package_type" />
          </el-form-item>
        </el-col>

        <!-- 内包类型 -->
        <el-col :span="12">
          <el-form-item label="内包类型" prop="innerpackage_type">
            <el-input
              placeholder="请输入"
              v-model="formData.innerpackage_type"
            />
          </el-form-item>
        </el-col>

        <!-- snp -->
        <el-col :span="12">
          <el-form-item label="SNP" prop="snp">
            <el-input-number
              :step="1"
              :precision="0"
              placeholder="请输入"
              v-model="formData.snp"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>

        <!-- 循环次数(次) -->
        <el-col :span="12">
          <el-form-item label="循环次数(次)" name="cycle_number">
            <el-input-number
              :step="1"
              :precision="0"
              style="width: 100%"
              placeholder="请输入"
              v-model="formData.cycle_number"
            />
          </el-form-item>
        </el-col>

        <!-- 供货地信息 -->
        <el-col :span="12">
          <el-form-item label="供货地信息" prop="supply_local">
            <el-input placeholder="请输入" v-model="formData.supply_local" />
          </el-form-item>
        </el-col>

        <!-- 供货距离(KM) -->
        <el-col :span="12">
          <el-form-item label="供货距离(KM)" prop="supplier_distance">
            <el-input-number
              placeholder="请输入"
              v-model="formData.supplier_distance"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>

        <!-- 供应商编码 -->
        <el-col :span="12">
          <el-form-item label="供应商编码" prop="supply_code">
            <el-input placeholder="请输入" v-model="formData.supply_code" />
          </el-form-item>
        </el-col>

        <!-- 最小起订量 -->
        <el-col :span="12">
          <el-form-item label="最小起订量" name="min_order">
            <el-input-number
              :step="1"
              :precision="0"
              placeholder="请输入"
              v-model="formData.min_order"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>

        <!-- 备注 -->
        <el-col :span="12">
          <el-form-item label="备注" name="note">
            <el-input
              placeholder="请输入"
              type="textarea"
              :rows="4"
              v-model="formData.note"
            />
          </el-form-item>
        </el-col>

        <!-- 备用字段1 -->
        <el-col :span="12">
          <el-form-item label="工程BOM备用字段1" name="engin_var1">
            <el-input
              disabled
              placeholder="请输入"
              v-model="formData.engin_var1"
            />
          </el-form-item>
        </el-col>
        <!-- 备用字段2 -->
        <el-col :span="12">
          <el-form-item label="工程BOM备用字段2" name="engin_var2">
            <el-input
              disabled
              placeholder="请输入"
              v-model="formData.engin_var2"
            />
          </el-form-item>
        </el-col>
        <!-- 备用字段3 -->
        <el-col :span="12">
          <el-form-item label="工程BOM备用字段3" name="engin_var3">
            <el-input
              disabled
              placeholder="请输入"
              v-model="formData.engin_var3"
            />
          </el-form-item>
        </el-col>
        <!-- 备用字段4 -->
        <el-col :span="12">
          <el-form-item label="工程BOM备用字段4" name="engin_var4">
            <el-input
              disabled
              placeholder="请输入"
              v-model="formData.engin_var4"
            />
          </el-form-item>
        </el-col>
        <!-- 备用字段5 -->
        <el-col :span="12">
          <el-form-item label="工程BOM备用字段5" name="engin_var5">
            <el-input
              disabled
              placeholder="请输入"
              v-model="formData.engin_var5"
            />
          </el-form-item>
        </el-col>

        <!-- 备用字段1 -->
        <el-col :span="12">
          <el-form-item label="制造BOM备用字段1" name="manufacture_var1">
            <el-input
              placeholder="请输入"
              v-model="formData.manufacture_var1"
            />
          </el-form-item>
        </el-col>
        <!-- 备用字段2 -->
        <el-col :span="12">
          <el-form-item label="制造BOM备用字段2" name="manufacture_var2">
            <el-input
              placeholder="请输入"
              v-model="formData.manufacture_var2"
            />
          </el-form-item>
        </el-col>
        <!-- 备用字段3 -->
        <el-col :span="12">
          <el-form-item label="制造BOM备用字段3" name="manufacture_var3">
            <el-input
              placeholder="请输入"
              v-model="formData.manufacture_var3"
            />
          </el-form-item>
        </el-col>
        <!-- 备用字段4 -->
        <el-col :span="12">
          <el-form-item label="制造BOM备用字段4" name="manufacture_var4">
            <el-input
              placeholder="请输入"
              v-model="formData.manufacture_var4"
            />
          </el-form-item>
        </el-col>
        <!-- 备用字段5 -->
        <el-col :span="12">
          <el-form-item label="制造BOM备用字段5" name="manufacture_var5">
            <el-input
              placeholder="请输入"
              v-model="formData.manufacture_var5"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button v-if="!readonly" type="primary" @click="handleSubmit"
        >确定</el-button
      >
    </template>
  </el-drawer>
  <TableModal ref="recomendRef" @ok="handleRecomend" />
</template>

<script setup lang="ts">
import { ref, defineExpose, defineEmits, computed, defineProps } from "vue";
import { ElMessage, type FormInstance } from "element-plus";
import { cloneDeep } from "lodash-es";
import { CirclePlus } from "@element-plus/icons-vue";
import TableModal from "./TableModal.vue";
import type { IRecomend } from "./TableModal.vue";

defineProps<{
  readonly: boolean;
}>();
// erp_code是否为空
const isEmpty = computed(() => !formData.value.erp_code);

// 置空操作
const handleEmptyErpCode = () => {
  formData.value.erp_code = "";
};

const keyMap = {
  gridorders: "序号",
  customer_part_code: "客户零件号",
  customer_part_name: "客户零件名称",
  customer_part_vesion: "客户图纸号",
  erp_code: "NK零件号",
  part_name: "NK零件名称",
  unit_config: "辆份配置",
  config_ratio: "配置比",
  product_category: "产品类别",
  process: "制造工艺",
  length: "长",
  width: "宽",
  height: "高",
  color: "颜色",
  color_config: "光泽度",
  part_type: "自制/外购/支给（M/P/C）",
  part_attribute: "零件属性",
  material_grade: "材料牌号",
  supplier: "材料供应商",
  unit: "计量单位",
  qty: "标准用量",
  technology_consume: "工艺消耗",
  nonperform_rate: "不良率%",
  manufacture_area: "制造区域",
  manufacture_report: "制造单元",
  manufature_equip: "制造设备类(组)",
  moldtooling_fixture: "模具/工装治具",
  cavities: "模腔数/取数（pcs）",
  production_cycle: "制造周期（S）",
  holding_number: "持台人数",
  single_piece: "单件节拍(S)",
  package_type: "外包类型",
  innerpackage_type: "内包类型",
  snp: "SNP",
  cycle_number: "循环次数(次)",
  supply_local: "供货地信息",
  supplier_distance: "供货距离(KM)",
  supply_code: "供应商编码",
  min_order: "最小起订量",
  note: "备注",
  picture: "简图",
  engin_var1: "备用字段1",
  engin_var2: "备用字段2",
  engin_var3: "备用字段3",
  engin_var4: "备用字段4",
  engin_var5: "备用字段5",
  manufacture_var1: "备用字段1",
  manufacture_var2: "备用字段2",
  manufacture_var3: "备用字段3",
  manufacture_var4: "备用字段4",
  manufacture_var5: "备用字段5",
};

const options = [
  { label: "自制", value: "M" },
  { label: "外购", value: "P" },
  { label: "支给", value: "C" },
];

// 零件属性
const partAttributeOptions = computed(() => {
  if (formData.value.part_type == "M") {
    return ["完成品", "半成品"];
  }
  if (formData.value.part_type == "P") {
    return ["树脂", "膜片", "碳纤维片", "木皮", "铝片", "涂料", "油墨", "部件"];
  }
  if (formData.value.part_type == "C") {
    return ["树脂", "膜片", "碳纤维片", "木皮", "铝片", "涂料", "油墨", "部件"];
  }
  return [];
});

// 制造单元
const manufatureUnitOptions = [
  "丝网印刷",
  "连续机吸塑",
  "单片机吸塑",
  "成型",
  "机器人产线喷涂",
  "往复机产线喷涂",
  "手工喷涂",
  "热压",
  "CNC",
  "PUR",
  "打磨",
  "产线装配",
  "手工装配",
  "焊接",
  "镭雕",
  "移印",
];

// 产品类别
const procuctTypeOptions = [
  "成型产品",
  "涂装产品",
  "INS产品",
  "真木产品",
  "碳纤维产品",
  "真铝产品",
  "模具产品",
];

// 制造区域
const manufatureAreaOptions = ["大连工厂", "孝感工厂"];

// 制造工艺
const processOptions = [
  "普通注塑",
  "嵌件注塑",
  "加饰注塑",
  "机器人喷涂",
  "往复机喷涂",
  "手工喷涂",
  "丝网印刷",
  "吸塑",
  "PUR",
  "产线装配",
  "焊接",
  "镭雕",
  "移印",
  "冲切",
  "热压",
  "CNC",
  "手工装配",
  "整理",
  "打磨",
];

const visible = ref(false);
const layerIndex = ref(0);
const formData = ref<Record<string, any>>({
  part_name: "",
  part_type: "",
  bom_code: "",
  qty: undefined,
  is_change: false,
  change_content: "",
  is_disable: false,
  bom_det: undefined,
});
const form = ref<FormInstance>();
const loading = ref(false);

// 表单数据
const originFormData = ref<any>();
const emit = defineEmits(["ok"]);
// 节点数据
const nodeData = ref<any>(null);
// 推荐弹窗
const recomendRef = ref<{
  open: (
    partName: string,
    partType: string,
    partAttribute: string,
    productCategory: string
  ) => void;
}>();

// 2.制造BOM只有M件，这两个按钮才可以操作
const erpCodeDisabled = computed(() => {
  return formData.value.part_type !== "M" || !formData.value.part_type;
});

const editType = ref<"add" | "edit">("edit");
const open = (node: any, type?: "add" | "edit", layer?: number) => {
  layerIndex.value = node?._node?.layerIndex || layer;
  visible.value = true;
  nodeData.value = cloneDeep(node.data);
  editType.value = type || !node?.id ? "add" : "edit";
  form.value?.resetFields();
  console.log("add or eidt:", node, type, editType.value);
  try {
    // 新增
    if (type === "add" || !node?.id) {
      originFormData.value = cloneDeep(node.data);
      formData.value = {
        ...node.data?.bom_det,
        lever_number: layerIndex.value,
      };
    } else {
      // 编辑 通过接口获取详情
      loading.value = true;

      window.parent?.BpmTools?.program(
        {
          interfaceCode: "Common.getBOMInfo",
          bom_id: node.id,
        },
        (res: any) => {
          originFormData.value = res;
          formData.value = {
            ...node.data,
            ...(res || {}),
            ...(node.data?.bom_det || {}),
            bom_det: {},
            lever_number: layerIndex.value,
          };
          loading.value = false;
        }
      );
    }
  } finally {
    loading.value = false;
  }
};

// 零件类型改变
// 属性值不在选项中时，清空
const handlePartTypeChange = () => {
  if (!partAttributeOptions.value.includes(formData.value.part_attribute)) {
    formData.value.part_attribute = undefined;
  }
};

// 打开推荐
const openRecomendModal = () => {
  // M件并且属性为"完成品"传产品分类
  const product_category =
    formData.value.part_type == "M" &&
    formData.value?.part_attribute === "完成品"
      ? formData.value.product_category
      : "";
  recomendRef.value?.open(
    formData.value?.part_name,
    formData.value?.part_type,
    formData.value?.part_attribute,
    product_category
  );
};

// 添加推荐
const handleRecomend = (record: IRecomend) => {
  formData.value.erp_code = record.erp_code;
  formData.value.part_type = record.part_type;
  formData.value.part_name = record.part_name;
  formData.value.part_attribute = record.part_attribute;
  formData.value.product_category = record.product_category;
  formData.value.manufacture_report = record.manufacture_report;
  formData.value.manufacture_area = record.manufacture_area;
  formData.value.material_grade = record.material_grade;
  formData.value.process = record.process;
  formData.value.unit = record.unit;
};

// 生成code
const handleGenratorErpCode = async () => {
  const valid = await form.value?.validate();
  if (!valid) return;

  window.parent?.BpmTools?.program(
    {
      interfaceCode: "Partmanagement.generatePart",
      model: formData.value,
    },
    (res: any) => {
      formData.value.erp_code = res;
      ElMessage.success("生成成功");
    }
  );
};

// 关闭
const close = () => {
  visible.value = false;
  originFormData.value = null;
  nodeData.value = null;
  form.value?.resetFields();
};

// 提交表单
const handleSubmit = async () => {
  const valid = await form.value?.validate();
  if (!valid) return;
  // 获取变更之前的数据
  if (!originFormData.value) return;

  let str = "";
  Object.entries(formData.value).forEach(([key, value]) => {
    if (
      [
        "is_change",
        "change_content",
        "changecontent",
        "bom_det",
        "isActive",
        "is_disable",
        "expand",
        "uid",
        "name",
        "type",
      ].includes(key)
    ) {
      return;
    }
    // 值发生变化
    if (value !== originFormData.value[key]) {
      if (key in keyMap)
        str += `${str ? "," : ""}${keyMap[key as keyof typeof keyMap]}: ${
          originFormData.value[key] ?? "空"
        }->${value ?? ""}`;
      // 更新内部数据
      if (Object.hasOwnProperty.call(nodeData.value || {}, key)) {
        nodeData.value[key] = value;
      }
      if (formData.value?.bom_det) {
        formData.value.bom_det[key] = value;
      } else {
        formData.value.bom_det = { [key]: value };
      }
    }
  });

  if (editType.value === "edit") {
    formData.value.change_content = str;
    formData.value.is_change = !!str;
  } else {
    formData.value.change_content = "";
    formData.value.is_change = false;
  }

  // 最终编辑结果数据
  const result = {
    ...(nodeData.value || {}),
    type: formData.value.part_type,
    name: formData.value.part_name,
    qty: formData.value.qty,
    is_change: formData.value.is_change,
    change_content: formData.value.change_content,
    manufacture_area: formData.value.manufacture_area,
    manufacture_report: formData.value.manufacture_report,
    material_grade: formData.value.material_grade,
    part_attribute: formData.value.part_attribute,
    process: formData.value.process,
    product_category: formData.value.product_category,
    supplier: formData.value.supplier,
    erp_code: formData.value.erp_code,
    // 编辑数据
    bom_det: formData.value.bom_det,
  };
  // 不需要这两个字段
  delete result.part_name;
  delete result.part_type;

  emit("ok", result);
  close();
};

defineExpose({
  open,
  close,
});
</script>

<style scoped></style>