<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-input
|
v-model="query.productName"
|
placeholder="输入产品大类"
|
clearable
|
@keyup.enter="onSearch"
|
/>
|
</el-form-item>
|
|
<el-form-item label="型号名称">
|
<el-input
|
v-model="query.model"
|
placeholder="输入型号名称"
|
clearable
|
@keyup.enter="onSearch"
|
/>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button type="primary" @click="onSearch">搜索</el-button>
|
<el-button @click="onReset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!-- 列表 -->
|
<el-table
|
v-loading="loading"
|
:data="tableData"
|
height="420"
|
highlight-current-row
|
@current-change="onCurrentChange"
|
>
|
<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>
|
|
<div class="mt-3 flex justify-end">
|
<el-pagination
|
background
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
v-model:page-size="page.pageSize"
|
v-model:current-page="page.pageNum"
|
:page-sizes="[10, 20, 50, 100]"
|
@size-change="onPageChange"
|
@current-change="onPageChange"
|
/>
|
</div>
|
|
<template #footer>
|
<el-button @click="close()">取消</el-button>
|
<el-button type="primary" :disabled="!selectedRow" @click="onConfirm">
|
确定
|
</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import {computed, onMounted, reactive, ref, watch} from "vue";
|
import {ElMessage} from "element-plus";
|
import {list} from '@/api/basicData/productModel'
|
|
export type ProductRow = {
|
id: number;
|
productName: string;
|
model: string;
|
unit?: string;
|
};
|
|
const props = defineProps<{
|
modelValue: boolean;
|
}>();
|
|
const emit = defineEmits<{
|
(e: "update:modelValue", v: boolean): void;
|
(e: "confirm", row: ProductRow): void; // 把整行数据返给父组件
|
}>();
|
|
const visible = computed({
|
get: () => props.modelValue,
|
set: (v) => emit("update:modelValue", v),
|
});
|
|
const query = reactive({
|
productName: "",
|
model: "",
|
});
|
|
const page = reactive({
|
pageNum: 1,
|
pageSize: 10,
|
});
|
|
const loading = ref(false);
|
const tableData = ref<ProductRow[]>([]);
|
const total = ref(0);
|
const selectedRow = ref<ProductRow | null>(null);
|
|
function close() {
|
visible.value = false;
|
}
|
|
function onCurrentChange(row: ProductRow | null) {
|
selectedRow.value = row;
|
}
|
|
function onSearch() {
|
page.pageNum = 1;
|
loadData();
|
}
|
|
function onReset() {
|
query.productName = "";
|
query.model = "";
|
page.pageNum = 1;
|
loadData();
|
}
|
|
function onPageChange() {
|
loadData();
|
}
|
|
function onConfirm() {
|
if (!selectedRow.value) {
|
ElMessage.warning("请选择一条产品");
|
return;
|
}
|
emit("confirm", selectedRow.value);
|
close();
|
}
|
|
async function loadData() {
|
loading.value = true;
|
try {
|
selectedRow.value = null; // 翻页/搜索后清空选择更符合预期
|
const res = await list({
|
productName: query.productName.trim(),
|
model: query.model.trim(),
|
pageNum: page.pageNum,
|
pageSize: page.pageSize,
|
});
|
tableData.value = res.list;
|
total.value = res.total;
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
onMounted(() => {
|
loadData()
|
})
|
</script>
|
