| | |
| | | :data="tableData" |
| | | height="420" |
| | | highlight-current-row |
| | | @current-change="onCurrentChange" |
| | | row-key="id" |
| | | @selection-change="handleSelectionChange" |
| | | > |
| | | <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"/> |
| | |
| | | |
| | | <template #footer> |
| | | <el-button @click="close()">取消</el-button> |
| | | <el-button type="primary" :disabled="!selectedRow" @click="onConfirm"> |
| | | <el-button type="primary" :disabled="multipleSelection.length === 0" @click="onConfirm"> |
| | | 确定 |
| | | </el-button> |
| | | </template> |
| | |
| | | <script setup lang="ts"> |
| | | import {computed, onMounted, reactive, ref, watch} from "vue"; |
| | | import {ElMessage} from "element-plus"; |
| | | import {list} from '@/api/basicData/productModel' |
| | | import {productModelList} from '@/api/basicData/productModel' |
| | | |
| | | export type ProductRow = { |
| | | id: number; |
| | |
| | | modelValue: boolean; |
| | | }>(); |
| | | |
| | | const emit = defineEmits<{ |
| | | (e: "update:modelValue", v: boolean): void; |
| | | (e: "confirm", row: ProductRow): void; // 把整行数据返给父组件 |
| | | }>(); |
| | | const emit = defineEmits(['update:modelValue', 'confirm']); |
| | | |
| | | const visible = computed({ |
| | | get: () => props.modelValue, |
| | |
| | | const loading = ref(false); |
| | | const tableData = ref<ProductRow[]>([]); |
| | | const total = ref(0); |
| | | const selectedRow = ref<ProductRow | null>(null); |
| | | const multipleSelection = ref<ProductRow[]>([]) |
| | | |
| | | function close() { |
| | | visible.value = false; |
| | | } |
| | | |
| | | function onCurrentChange(row: ProductRow | null) { |
| | | selectedRow.value = row; |
| | | const handleSelectionChange = (val: ProductRow[]) => { |
| | | multipleSelection.value = val |
| | | } |
| | | |
| | | function onSearch() { |
| | |
| | | } |
| | | |
| | | function onConfirm() { |
| | | if (!selectedRow.value) { |
| | | if (multipleSelection.value.length === 0) { |
| | | ElMessage.warning("请选择一条产品"); |
| | | return; |
| | | } |
| | | emit("confirm", selectedRow.value); |
| | | emit("confirm", multipleSelection.value); |
| | | close(); |
| | | } |
| | | |
| | | async function loadData() { |
| | | loading.value = true; |
| | | try { |
| | | selectedRow.value = null; // 翻页/搜索后清空选择更符合预期 |
| | | const res = await list({ |
| | | multipleSelection.value = []; // 翻页/搜索后清空选择更符合预期 |
| | | const res = await productModelList({ |
| | | productName: query.productName.trim(), |
| | | model: query.model.trim(), |
| | | pageNum: page.pageNum, |
| | | pageSize: page.pageSize, |
| | | }); |
| | | tableData.value = res.list; |
| | | tableData.value = res.records; |
| | | total.value = res.total; |
| | | } finally { |
| | | loading.value = false; |