From 4be9b07e00bea78ae394aec67062b4db9895b565 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期六, 14 三月 2026 15:46:21 +0800
Subject: [PATCH] BOM产品选择弹窗改接口
---
src/views/basicData/product/ProductSelectDialog.vue | 322 ++++++++++++++++++++++++++++++-----------------------
1 files changed, 181 insertions(+), 141 deletions(-)
diff --git a/src/views/basicData/product/ProductSelectDialog.vue b/src/views/basicData/product/ProductSelectDialog.vue
index 70dbb16..3c826a5 100644
--- a/src/views/basicData/product/ProductSelectDialog.vue
+++ b/src/views/basicData/product/ProductSelectDialog.vue
@@ -1,39 +1,72 @@
<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-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.specification"
+ 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 label="鐗╂枡缂栫爜">
+ <el-input v-model="query.materialCode"
+ placeholder="杈撳叆鐗╂枡缂栫爜"
+ clearable
+ @keyup.enter="onSearch" />
</el-form-item>
-
<el-form-item>
- <el-button type="primary" @click="onSearch">鎼滅储</el-button>
+ <el-button type="primary"
+ @click="onSearch">鎼滅储</el-button>
<el-button @click="onReset">閲嶇疆</el-button>
</el-form-item>
</el-form>
-
<!-- 鍒楄〃 -->
- <el-table ref="tableRef" v-loading="loading" :data="tableData" height="420" 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="model" label="鍨嬪彿鍚嶇О" min-width="200" />
- <el-table-column prop="unit" label="鍗曚綅" min-width="160" />
+ <el-table ref="tableRef"
+ v-loading="loading"
+ :data="tableData"
+ height="420"
+ highlight-current-row
+ row-key="skuId"
+ @selection-change="handleSelectionChange"
+ @select="handleSelect">
+ <el-table-column type="selection"
+ width="55" />
+ <el-table-column type="index"
+ label="搴忓彿"
+ width="60" />
+ <el-table-column prop="materialName"
+ label="浜у搧鍚嶇О"
+ min-width="160" />
+ <el-table-column prop="materialCode"
+ label="鐗╂枡缂栫爜"
+ min-width="200" />
+ <el-table-column prop="specification"
+ label="瑙勬牸"
+ min-width="200" />
+ <el-table-column prop="baseUnit"
+ 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" />
+ <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="multipleSelection.length === 0" @click="onConfirm">
+ <el-button type="primary"
+ :disabled="multipleSelection.length === 0"
+ @click="onConfirm">
纭畾
</el-button>
</template>
@@ -41,140 +74,147 @@
</template>
<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 { computed, onMounted, reactive, ref, watch, nextTick } from "vue";
+ import { ElMessage } from "element-plus";
+ import { modelListPage } from "@/api/basicData/newProduct";
-export type ProductRow = {
- id: number;
- productName: string;
- model: string;
- unit?: string;
-};
+ export type ProductRow = {
+ skuId: number;
+ specification: string;
+ materialCode: string;
+ baseUnit?: string;
+ materialName?: string;
+ };
-const props = defineProps<{
- modelValue: boolean;
- single?: boolean; // 鏄惁鍙兘閫夋嫨涓�涓紝榛樿false锛堝彲閫夋嫨澶氫釜锛�
-}>();
+ const props = defineProps<{
+ modelValue: boolean;
+ single?: boolean; // 鏄惁鍙兘閫夋嫨涓�涓紝榛樿false锛堝彲閫夋嫨澶氫釜锛�
+ }>();
-const emit = defineEmits(['update:modelValue', 'confirm']);
+ const emit = defineEmits(["update:modelValue", "confirm"]);
-const visible = computed({
- get: () => props.modelValue,
- set: (v) => emit("update:modelValue", v),
-});
+ const visible = computed({
+ get: () => props.modelValue,
+ set: v => emit("update:modelValue", v),
+ });
-const query = reactive({
- productName: "",
- model: "",
-});
+ const query = reactive({
+ specification: "",
+ materialCode: "",
+ });
-const page = reactive({
- pageNum: 1,
- pageSize: 10,
-});
+ const page = reactive({
+ pageNum: 1,
+ pageSize: 10,
+ });
-const loading = ref(false);
-const tableData = ref<ProductRow[]>([]);
-const total = ref(0);
-const multipleSelection = ref<ProductRow[]>([]);
-const tableRef = ref();
+ const loading = ref(false);
+ const tableData = ref<ProductRow[]>([]);
+ const total = ref(0);
+ const multipleSelection = ref<ProductRow[]>([]);
+ const tableRef = ref();
-function close() {
- visible.value = false;
-}
-
-const handleSelectionChange = (val: ProductRow[]) => {
- if (props.single && val.length > 1) {
- // 濡傛灉闄愬埗涓哄崟涓�夋嫨锛屽彧淇濈暀鏈�鍚庝竴涓�変腑鐨�
- const lastSelected = val[val.length - 1];
- multipleSelection.value = [lastSelected];
- // 娓呯┖琛ㄦ牸閫変腑鐘舵�侊紝鐒跺悗閲嶆柊閫変腑鏈�鍚庝竴涓�
- nextTick(() => {
- if (tableRef.value) {
- tableRef.value.clearSelection();
- tableRef.value.toggleRowSelection(lastSelected, true);
- }
- });
- } else {
- multipleSelection.value = val;
+ function close() {
+ visible.value = false;
}
-}
-// 澶勭悊鍗曚釜閫夋嫨
-const handleSelect = (selection: ProductRow[], row: ProductRow) => {
- if (props.single) {
- // 濡傛灉闄愬埗涓哄崟涓紝娓呯┖鍏朵粬閫夋嫨锛屽彧淇濈暀褰撳墠琛�
- if (selection.includes(row)) {
- // 閫変腑褰撳墠琛屾椂锛屾竻绌哄叾浠栭�変腑
- multipleSelection.value = [row];
+ const handleSelectionChange = (val: ProductRow[]) => {
+ if (props.single && val.length > 1) {
+ // 濡傛灉闄愬埗涓哄崟涓�夋嫨锛屽彧淇濈暀鏈�鍚庝竴涓�変腑鐨�
+ const lastSelected = val[val.length - 1];
+ multipleSelection.value = [lastSelected];
+ // 娓呯┖琛ㄦ牸閫変腑鐘舵�侊紝鐒跺悗閲嶆柊閫変腑鏈�鍚庝竴涓�
nextTick(() => {
if (tableRef.value) {
- tableData.value.forEach((item) => {
- if (item.id !== row.id) {
- tableRef.value.toggleRowSelection(item, false);
- }
- });
+ tableRef.value.clearSelection();
+ tableRef.value.toggleRowSelection(lastSelected, true);
}
});
+ } else {
+ multipleSelection.value = val;
+ }
+ };
+
+ // 澶勭悊鍗曚釜閫夋嫨
+ const handleSelect = (selection: ProductRow[], row: ProductRow) => {
+ if (props.single) {
+ // 濡傛灉闄愬埗涓哄崟涓紝娓呯┖鍏朵粬閫夋嫨锛屽彧淇濈暀褰撳墠琛�
+ if (selection.includes(row)) {
+ // 閫変腑褰撳墠琛屾椂锛屾竻绌哄叾浠栭�変腑
+ multipleSelection.value = [row];
+ nextTick(() => {
+ if (tableRef.value) {
+ tableData.value.forEach(item => {
+ if (item.skuId !== row.skuId) {
+ tableRef.value.toggleRowSelection(item, false);
+ }
+ });
+ }
+ });
+ }
+ }
+ };
+
+ function onSearch() {
+ page.pageNum = 1;
+ loadData();
+ }
+
+ function onReset() {
+ query.specification = "";
+ query.materialCode = "";
+ page.pageNum = 1;
+ loadData();
+ }
+
+ function onPageChange() {
+ loadData();
+ }
+
+ function onConfirm() {
+ if (multipleSelection.value.length === 0) {
+ ElMessage.warning("璇烽�夋嫨涓�鏉′骇鍝�");
+ return;
+ }
+ if (props.single && multipleSelection.value.length > 1) {
+ ElMessage.warning("鍙兘閫夋嫨涓�涓骇鍝�");
+ return;
+ }
+ emit(
+ "confirm",
+ props.single ? [multipleSelection.value[0]] : multipleSelection.value
+ );
+ close();
+ }
+
+ async function loadData() {
+ loading.value = true;
+ try {
+ multipleSelection.value = []; // 缈婚〉/鎼滅储鍚庢竻绌洪�夋嫨鏇寸鍚堥鏈�
+ const res: any = await modelListPage({
+ specification: query.specification.trim(),
+ materialCode: query.materialCode.trim(),
+ current: page.pageNum,
+ size: page.pageSize,
+ });
+ tableData.value = res.data.records;
+ total.value = res.data.total;
+ } finally {
+ loading.value = false;
}
}
-}
-function onSearch() {
- page.pageNum = 1;
- loadData();
-}
+ // 鐩戝惉寮圭獥鎵撳紑锛岄噸缃�夋嫨
+ watch(
+ () => props.modelValue,
+ visible => {
+ if (visible) {
+ multipleSelection.value = [];
+ }
+ }
+ );
-function onReset() {
- query.productName = "";
- query.model = "";
- page.pageNum = 1;
- loadData();
-}
-
-function onPageChange() {
- loadData();
-}
-
-function onConfirm() {
- if (multipleSelection.value.length === 0) {
- ElMessage.warning("璇烽�夋嫨涓�鏉′骇鍝�");
- return;
- }
- if (props.single && multipleSelection.value.length > 1) {
- ElMessage.warning("鍙兘閫夋嫨涓�涓骇鍝�");
- return;
- }
- emit("confirm", props.single ? [multipleSelection.value[0]] : multipleSelection.value);
- close();
-}
-
-async function loadData() {
- loading.value = true;
- try {
- multipleSelection.value = []; // 缈婚〉/鎼滅储鍚庢竻绌洪�夋嫨鏇寸鍚堥鏈�
- const res: any = await productModelList({
- productName: query.productName.trim(),
- model: query.model.trim(),
- current: page.pageNum,
- size: page.pageSize,
- });
- tableData.value = res.records;
- total.value = res.total;
- } finally {
- loading.value = false;
- }
-}
-
-// 鐩戝惉寮圭獥鎵撳紑锛岄噸缃�夋嫨
-watch(() => props.modelValue, (visible) => {
- if (visible) {
- multipleSelection.value = [];
- }
-});
-
-onMounted(() => {
- loadData()
-})
+ onMounted(() => {
+ loadData();
+ });
</script>
--
Gitblit v1.9.3