新增产品定性下拉选项功能，优化产品选择对话框，调整字段布局和表格显示，提升用户交互体验

yyb

2 天以前 4aa106fc8ea7b8a0013a1a05094a4618dce00cd4

 src/views/basicData/product/ProductSelectDialog.vue

@@ -1,8 +1,16 @@
<template>
  <el-dialog v-model="visible" title="选择产品" width="900px" destroy-on-close :close-on-click-modal="false">
  <el-dialog v-model="visible" title="选择产品" width="60%" destroy-on-close :close-on-click-modal="false">
    <el-form :inline="true" :model="query" class="mb-2">
      <el-form-item label="产品大类">
        <el-input v-model="query.productName" placeholder="输入产品大类" clearable @keyup.enter="onSearch" />
      </el-form-item>

      <el-form-item label="产品定性">
        <el-select v-model="query.parentName" placeholder="请选择产品定性" clearable filterable style="width: 200px"
          @change="onSearch">
          <el-option v-for="item in parentNameOptions" :key="item.id" :label="item.productName"
            :value="item.productName" />
        </el-select>
      </el-form-item>

      <el-form-item label="型号名称">
@@ -16,11 +24,12 @@
    </el-form>

    <!-- 列表 -->
    <el-table ref="tableRef" v-loading="loading" :data="tableData" height="420" highlight-current-row row-key="id"
    <el-table ref="tableRef" v-loading="loading" :data="tableData" height="500px" highlight-current-row row-key="id"
      @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="parentName" label="产品定性" min-width="120" show-overflow-tooltip />
      <el-table-column prop="model" label="型号名称" min-width="200" />
      <el-table-column prop="thickness" label="厚度" min-width="160" :formatter="formatThicknessTo15" />
    </el-table>
@@ -43,11 +52,12 @@
<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { productModelList } from '@/api/basicData/productModel.js'
import { productModelList, getProductParentNames } from '@/api/basicData/productModel.js'

export type ProductRow = {
  id: number;
  productName: string;
  parentName?: string;
  model: string;
  thickness?: string;
};
@@ -66,8 +76,31 @@

const query = reactive({
  productName: "",
  parentName: "",
  model: "",
});

export type ParentNameOption = {
  id: number;
  parentId: number | null;
  productName: string;
  tenantId: number | null;
};

const parentNameOptions = ref<ParentNameOption[]>([]);

function normalizeParentNameList(res: any): ParentNameOption[] {
  const raw = res?.data;
  const arr = Array.isArray(raw) ? raw : [];
  return arr
    .map((x: any) => ({
      id: Number(x?.id),
      parentId: x?.parentId ?? null,
      productName: String(x?.productName ?? "").trim(),
      tenantId: x?.tenantId ?? null,
    }))
    .filter((x) => x.productName !== "" && !Number.isNaN(x.id));
}

const page = reactive({
  pageNum: 1,
@@ -138,6 +171,7 @@

function onReset() {
  query.productName = "";
  query.parentName = "";
  query.model = "";
  page.pageNum = 1;
  loadData();
@@ -166,6 +200,7 @@
    multipleSelection.value = []; // 翻页/搜索后清空选择更符合预期
    const res: any = await productModelList({
      productName: query.productName.trim(),
      parentName: typeof query.parentName === "string" ? query.parentName.trim() : "",
      model: query.model.trim(),
      current: page.pageNum,
      size: page.pageSize,
@@ -184,7 +219,17 @@
  }
});

async function loadParentNameOptions() {
  try {
    const res: any = await getProductParentNames();
    parentNameOptions.value = normalizeParentNameList(res);
  } catch {
    parentNameOptions.value = [];
  }
}

onMounted(() => {
  loadData()
  loadParentNameOptions();
  loadData();
})
</script>