zhangwencui
3 天以前 de4e098a962e8403d9b32590f0acba025b8072f6
src/views/basicData/product/ProductSelectDialog.vue
@@ -1,28 +1,39 @@
<template>
  <el-dialog v-model="visible"
             title="选择产品"
             width="900px"
             width="1000px"
             destroy-on-close
             :close-on-click-modal="false">
    <el-form :inline="true"
             :model="query"
             class="mb-2">
             class="mb-2 search-form">
      <el-form-item label="产品名称">
        <el-input v-model="query.productName"
                  size="small"
                  placeholder="输入产品名称"
                  clearable
                  @keyup.enter="onSearch" />
      </el-form-item>
      <el-form-item label="规格">
        <el-input v-model="query.specification"
        <el-input v-model="query.model"
                  size="small"
                  placeholder="输入规格"
                  clearable
                  @keyup.enter="onSearch" />
      </el-form-item>
      <el-form-item label="物料编码">
        <el-input v-model="query.materialCode"
                  size="small"
                  placeholder="输入物料编码"
                  clearable
                  @keyup.enter="onSearch" />
      </el-form-item>
      <el-form-item>
      <el-form-item style="200px">
        <el-button type="primary"
                   size="small"
                   @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
        <el-button size="small"
                   @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
@@ -31,7 +42,7 @@
              :data="tableData"
              height="420"
              highlight-current-row
              row-key="skuId"
              row-key="id"
              @selection-change="handleSelectionChange"
              @select="handleSelect">
      <el-table-column type="selection"
@@ -39,16 +50,16 @@
      <el-table-column type="index"
                       label="序号"
                       width="60" />
      <el-table-column prop="materialName"
      <el-table-column prop="productName"
                       label="产品名称"
                       min-width="160" />
      <el-table-column prop="materialCode"
                       label="物料编码"
                       min-width="200" />
      <el-table-column prop="specification"
      <el-table-column prop="model"
                       label="规格"
                       min-width="200" />
      <el-table-column prop="baseUnit"
      <el-table-column prop="unit"
                       label="单位"
                       min-width="160" />
    </el-table>
@@ -79,11 +90,11 @@
  import { modelListPage } from "@/api/basicData/newProduct";
  export type ProductRow = {
    skuId: number;
    specification: string;
    id: number;
    model: string;
    materialCode: string;
    baseUnit?: string;
    materialName?: string;
    unit?: string;
    productName?: string;
  };
  const props = defineProps<{
@@ -99,8 +110,9 @@
  });
  const query = reactive({
    specification: "",
    model: "",
    materialCode: "",
    productName: "",
  });
  const page = reactive({
@@ -145,7 +157,7 @@
        nextTick(() => {
          if (tableRef.value) {
            tableData.value.forEach(item => {
              if (item.skuId !== row.skuId) {
              if (item.id !== row.id) {
                tableRef.value.toggleRowSelection(item, false);
              }
            });
@@ -161,8 +173,9 @@
  }
  function onReset() {
    query.specification = "";
    query.model = "";
    query.materialCode = "";
    query.productName = "";
    page.pageNum = 1;
    loadData();
  }
@@ -192,8 +205,10 @@
    try {
      multipleSelection.value = []; // 翻页/搜索后清空选择更符合预期
      const res: any = await modelListPage({
        specification: query.specification.trim(),
        model: query.model.trim(),
        materialCode: query.materialCode.trim(),
        productName: query.productName.trim(),
        type: 1,
        current: page.pageNum,
        size: page.pageSize,
      });
@@ -218,3 +233,26 @@
    loadData();
  });
</script>
<style scoped>
  .search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .search-form .el-form-item {
    margin-bottom: 0;
  }
  .search-form .el-input {
    width: 180px;
  }
  .el-form--inline .el-form-item {
    margin-right: 5px;
  }
  .justify-end {
    margin-top: 10px;
  }
</style>