feat: 选择产品添加产品大类选择

gongchunyi

11 小时以前 d57994cbc653a15548f61e4696905eb01ce4fdb9

 src/views/basicData/product/ProductSelectDialog.vue

@@ -1,12 +1,18 @@
<template>
  <el-dialog v-model="visible" title="选择产品" width="900px" destroy-on-close :close-on-click-modal="false">
    <el-form :inline="true" :model="query" class="mb-2">
      <el-form-item label="产品大类">
        <el-select v-model="query.topProductParentId" placeholder="选择产品大类" clearable @change="onSearch" style="width: 150px">
          <el-option v-for="item in categoryList" :key="item.id" :label="item.label || item.productName" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="产品名称">
        <el-input v-model="query.productName" placeholder="输入产品名称" clearable @keyup.enter="onSearch" />
        <el-input v-model="query.productName" placeholder="输入产品名称" clearable @keyup.enter="onSearch" style="width: 150px" />
      </el-form-item>

      <el-form-item label="产品型号">
        <el-input v-model="query.model" placeholder="输入产品型号" clearable @keyup.enter="onSearch" />
        <el-input v-model="query.model" placeholder="输入产品型号" clearable @keyup.enter="onSearch" style="width: 150px" />
      </el-form-item>

      <el-form-item>
@@ -20,9 +26,10 @@
      @selection-change="handleSelectionChange" @select="handleSelect">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="productName" label="产品名称" min-width="160" />
      <el-table-column prop="model" label="产品型号" min-width="200" />
      <el-table-column prop="unit" label="单位" min-width="160" />
      <el-table-column prop="topProductName" label="产品大类" min-width="120" />
      <el-table-column prop="productName" label="产品名称" min-width="140" />
      <el-table-column prop="model" label="产品型号" min-width="180" />
      <el-table-column prop="unit" label="单位" min-width="100" />
    </el-table>

    <div class="mt-3 flex justify-end">
@@ -44,6 +51,7 @@
import { computed, onMounted, reactive, ref, watch, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { productModelList, productModelListByUrl } from '@/api/basicData/productModel'
import { productTreeList } from '@/api/basicData/product'

export type ProductRow = {
  id: number;
@@ -69,7 +77,19 @@
const query = reactive({
  productName: "",
  model: "",
  topProductParentId: undefined as number | undefined,
});

const categoryList = ref<any[]>([]);

async function loadCategory() {
  try {
    const res = await productTreeList();
    categoryList.value = res || [];
  } catch (e) {
    console.error("Failed to load product categories", e);
  }
}

const page = reactive({
  pageNum: 1,
@@ -131,6 +151,7 @@
function onReset() {
  query.productName = "";
  query.model = "";
  query.topProductParentId = props.topProductParentId;
  page.pageNum = 1;
  loadData();
}
@@ -161,7 +182,7 @@
      model: query.model.trim(),
      current: page.pageNum,
      size: page.pageSize,
      topProductParentId: props.topProductParentId,
      topProductParentId: query.topProductParentId ?? props.topProductParentId,
    };
    const res: any = props.requestUrl
      ? await productModelListByUrl(props.requestUrl, params)
@@ -178,10 +199,13 @@
watch(() => props.modelValue, (visible) => {
  if (visible) {
    multipleSelection.value = [];
    query.topProductParentId = props.topProductParentId;
  }
});

onMounted(() => {
  loadData()
  query.topProductParentId = props.topProductParentId;
  loadCategory();
  loadData();
})
</script>