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

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,13 +24,14 @@
    </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="unit" label="单位" min-width="160" />
      <el-table-column prop="thickness" label="厚度" min-width="160" :formatter="formatThicknessTo15" />
    </el-table>

    <div class="mt-3 flex justify-end">
@@ -32,10 +41,10 @@
    </div>

    <template #footer>
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" :disabled="multipleSelection.length === 0" @click="onConfirm">
        确定
      </el-button>
         <el-button @click="close()">取消</el-button>
    </template>
  </el-dialog>
</template>
@@ -43,13 +52,14 @@
<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { productModelList } from '@/api/basicData/productModel'
import { productModelList, getProductParentNames } from '@/api/basicData/productModel.js'

export type ProductRow = {
  id: number;
  productName: string;
  parentName?: string;
  model: string;
  unit?: string;
  thickness?: string;
};

const props = defineProps<{
@@ -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,
@@ -79,6 +112,16 @@
const total = ref(0);
const multipleSelection = ref<ProductRow[]>([]);
const tableRef = ref();

// 表格展示时统一保留 15 位小数
const formatThicknessTo15 = (_row: any, _column: any, cellValue: any) => {
  if (cellValue === null || cellValue === undefined) return "";
  const s = String(cellValue).trim();
  if (s === "") return "";
  const n = Number(s);
  if (Number.isNaN(n)) return s;
  return n.toFixed(15);
};

function close() {
  visible.value = false;
@@ -128,6 +171,7 @@

function onReset() {
  query.productName = "";
  query.parentName = "";
  query.model = "";
  page.pageNum = 1;
  loadData();
@@ -156,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,
@@ -174,7 +219,17 @@
  }
});

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

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