君歌 1.端口修改

gaoluyang

2026-06-16 e65bfa1d46d255f307eaa057665f01c8bde0e122

 src/views/productionManagement/processRoute/New.vue

@@ -1,65 +1,43 @@
<template>
  <div>
    <el-dialog
        v-model="isShow"
        title="新增工艺路线"
        width="400"
        @close="closeModal"
    >
      <el-form label-width="140px" :model="formState" label-position="top" ref="formRef">
        <el-form-item
            label="产品大类："
            prop="productId"
            :rules="[
    <el-dialog v-model="isShow"
               title="新增工艺路线"
               width="400"
               @close="closeModal">
      <el-form label-width="140px"
               :model="formState"
               label-position="top"
               ref="formRef">
        <el-form-item label="产品名称"
                      prop="productModelId"
                      :rules="[
                {
                required: true,
                message: '请选择产品大类',
                message: '请选择产品',
                trigger: 'change',
              }
            ]"
        >
          <el-tree-select
              v-model="formState.productId"
              placeholder="请选择"
              clearable
              check-strictly
              @change="getModels"
              :data="productOptions"
              :render-after-expand="false"
              style="width: 100%"
          />
            ]">
          <el-button type="primary"
                     @click="showProductSelectDialog = true">
            {{ formState.productName && formState.productModelName 
              ? `${formState.productName} - ${formState.productModelName}` 
              : '选择产品' }}
          </el-button>
        </el-form-item>

        <el-form-item
            label="规格型号："
            prop="productModelId"
            :rules="[
                {
                required: true,
                message: '请选择规格型号',
              }
            ]"
        >
          <el-select
              v-model="formState.productModelId"
              placeholder="请选择"
              clearable
          >
            <el-option
                v-for="item in productModelsOptions"
                :key="item.id"
                :label="item.model"
                :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="description">
          <el-input v-model="formState.description" type="textarea" />
        <el-form-item label="备注"
                      prop="description">
          <el-input v-model="formState.description"
                    type="textarea" />
        </el-form-item>
      </el-form>
      <!-- 产品选择弹窗 -->
      <ProductSelectDialog v-model="showProductSelectDialog"
                           @confirm="handleProductSelect"
                           single />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确认</el-button>
          <el-button type="primary"
                     @click="handleSubmit">确认</el-button>
          <el-button @click="closeModal">取消</el-button>
        </div>
      </template>
@@ -68,114 +46,88 @@
</template>

<script setup>
import {ref, computed, getCurrentInstance, onMounted} from "vue";
import {add} from "@/api/productionManagement/processRoute.js";
import {modelList, productTreeList} from "@/api/basicData/product.js";
  import { ref, computed, getCurrentInstance } from "vue";
  import { add } from "@/api/productionManagement/processRoute.js";
  import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
});

const emit = defineEmits(['update:visible', 'completed']);

// 响应式数据（替代选项式的 data）
const formState = ref({
  productId: undefined,
  productModelId: undefined,
  description: '',
});

const isShow = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit('update:visible', val);
  },
});

const productModelsOptions = ref([])
const productOptions = ref([])

let { proxy } = getCurrentInstance()

const closeModal = () => {
  isShow.value = false;
};

const getProductOptions = () => {
  productTreeList().then((res) => {
    productOptions.value = convertIdToValue(res);
  const props = defineProps({
    visible: {
      type: Boolean,
      required: true,
    },
  });
};
const getModels = (value) => {
  formState.value.productId = undefined;
  formState.value.productModelId = undefined;
  productModelsOptions.value = [];

  if (value) {
    formState.value.productId = findNodeById(productOptions.value, value) || undefined;
    modelList({ id: value }).then((res) => {
      productModelsOptions.value = res;
    });
  }
};
  const emit = defineEmits(["update:visible", "completed"]);

const findNodeById = (nodes, productId) => {
  for (let i = 0; i < nodes.length; i++) {
    if (nodes[i].value === productId) {
      return nodes[i].label; // 找到节点，返回该节点的label
    }
    if (nodes[i].children && nodes[i].children.length > 0) {
      const foundNode = findNodeById(nodes[i].children, productId);
      if (foundNode) {
        return foundNode; // 在子节点中找到，直接返回（已经是label字符串）
      }
    }
  }
  return null; // 没有找到节点，返回null
};
  // 响应式数据（替代选项式的 data）
  const formState = ref({
    productId: undefined,
    productModelId: undefined,
    productName: "",
    productModelName: "",
    description: "",
  });

function convertIdToValue(data) {
  return data.map((item) => {
    const { id, children, ...rest } = item;
    const newItem = {
      ...rest,
      value: id, // 将 id 改为 value
  const isShow = computed({
    get() {
      return props.visible;
    },
    set(val) {
      emit("update:visible", val);
    },
  });

  const showProductSelectDialog = ref(false);

  let { proxy } = getCurrentInstance();

  const closeModal = () => {
    // 重置表单数据
    formState.value = {
      productId: undefined,
      productModelId: undefined,
      productName: "",
      productModelName: "",
      description: "",
    };
    if (children && children.length > 0) {
      newItem.children = convertIdToValue(children);
    }
    isShow.value = false;
  };

    return newItem;
  // 产品选择处理
  const handleProductSelect = products => {
    if (products && products.length > 0) {
      const product = products[0];
      formState.value.productModelId = product.id;
      formState.value.productName = product.productName;
      formState.value.productModelName = product.model;
      showProductSelectDialog.value = false;
      proxy.$refs["formRef"]?.validateField("productModelId");
    }
  };

  const handleSubmit = () => {
    proxy.$refs["formRef"].validate(valid => {
      if (valid) {
        if (!formState.value.productModelId) {
          proxy.$modal.msgError("请选择产品");
          return;
        }
        console.log(formState.value, "formState.value====");

        add(formState.value).then(res => {
          // 关闭模态框
          isShow.value = false;
          // 告知父组件已完成
          emit("completed");
          proxy.$modal.msgSuccess("提交成功");
        });
      }
    });
  };

  defineExpose({
    closeModal,
    handleSubmit,
    isShow,
  });
}

const handleSubmit = () => {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      add(formState.value).then(res => {
        // 关闭模态框
        isShow.value = false;
        // 告知父组件已完成
        emit('completed');
        proxy.$modal.msgSuccess("提交成功");
      })
    }
  })
};


defineExpose({
  closeModal,
  handleSubmit,
  isShow,
});

onMounted(() => {
  getProductOptions()
})
</script>