czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复商品分组选择商品未回显已选中商品问题以及重置问题

Browse Source
This commit is contained in:
YeMingfei666
2025-05-06 16:10:39 +08:00
parent 258704dea2
commit 2cde04720d
3 changed files with 242 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/CURD/PageContent.vue
View File

@@ -515,6 +515,7 @@ import {
import ExcelJS from "exceljs"; import ExcelJS from "exceljs";
import { reactive, ref } from "vue"; import { reactive, ref } from "vue";
import type { IContentConfig, IObject, IOperatData } from "./types"; import type { IContentConfig, IObject, IOperatData } from "./types";
import { el } from "element-plus/es/locale";
// 定义接收的属性 // 定义接收的属性
const props = defineProps<{ const props = defineProps<{
@@ -592,6 +593,45 @@ const selectionData = ref<IObject[]>([]);
// 删除ID集合 用于批量删除 // 删除ID集合 用于批量删除
const removeIds = ref<(number | string)[]>([]); const removeIds = ref<(number | string)[]>([]);
function handleSelectionChange(selection: any[]) { function handleSelectionChange(selection: any[]) {
console.log("selectionData.value", selectionData.value);
// if(selection.length==0){
// selectionData.value=selectionData.value.filter((item) => {
// return pageData.value.find(v=>v[pk]===item[pk])!=undefined
// });
// }else{
// selectionData.value=selectionData.value.filter((item) => {
// return pageData.value.find(v=>v[pk]===item[pk])==undefined
// });
// }
//之前有选中，现在置空
if (selection.length == 0 && selectionData.value.length > 0) {
defaultSelData.value = defaultSelData.value.filter((item) => {
return pageData.value.find((v) => v[pk] === item[pk]) != undefined;
});
}
//之前没有选中，现在有
if (selection.length > 0 && selectionData.value.length == 0) {
defaultSelData.value = selection;
}
//之前有选中，现在有
if (selection.length > 0 && selectionData.value.length > 0) {
defaultSelData.value = defaultSelData.value.filter((item) => {
const isNowPageData = pageData.value.find((v) => v[pk] === item[pk]);
if (isNowPageData) {
return selection.find((v) => v[pk] === item[pk]) != undefined;
} else {
return true;
}
});
for (let i of selection) {
if (defaultSelData.value.find((v) => v[pk] === i[pk]) == undefined) {
defaultSelData.value.push(i);
}
}
}
console.log("defaultSelData.value", defaultSelData.value);
selectionData.value = selection; selectionData.value = selection;
removeIds.value = selection.map((item) => item[pk]); removeIds.value = selection.map((item) => item[pk]);
} }
@@ -990,6 +1030,9 @@ function fetchPageData(formData: IObject = {}, isRestart = false) {
} else { } else {
pageData.value = data; pageData.value = data;
} }
nextTick(() => {
setSelectTable(defaultSelData.value);
});
}) })
.finally(() => { .finally(() => {
loading.value = false; loading.value = false;
@@ -1030,14 +1073,42 @@ function saveXlsx(fileData: BlobPart, fileName: string) {
document.body.removeChild(downloadLink); document.body.removeChild(downloadLink);
window.URL.revokeObjectURL(downloadUrl); window.URL.revokeObjectURL(downloadUrl);
} }
function test(rows: any[]) { function test(rows: any[]) {}
console.log(tableRef, "tioshi222222222222222222222");
// rows.forEach((row) => { const defaultSelData = ref<IObject[]>([]);
// tableRef.value!.toggleRowSelection(row, undefined) // 设置默认选择
// }) function setSelectTable(rows: any[]) {
selectionData.value = rows;
defaultSelData.value = rows;
pageData.value.forEach((element: IObject) => {
rows.forEach((row) => {
if (element.id == row.id) {
console.log("selected", element);
tableRef.value!.toggleRowSelection(element, true);
}
});
});
} }
//清除选中
function clearSelectTable() {
selectionData.value = [];
defaultSelData.value = [];
pageData.value.forEach((element: IObject) => {
tableRef.value!.toggleRowSelection(element, false);
});
}
// 暴露的属性和方法 // 暴露的属性和方法
defineExpose({ fetchPageData, exportPageData, getFilterParams, getselectTable, pagination, test }); defineExpose({
clearSelectTable,
fetchPageData,
exportPageData,
getFilterParams,
getselectTable,
pagination,
test,
setSelectTable,
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

35
src/components/mycomponents/myDialog.vue
View File

@@ -1,45 +1,44 @@
<template> <template>
<el-dialog v-model="dialogVisible" :title="props.title" :width="props.width"> <el-dialog v-model="dialogVisible" :title="props.title" :width="props.width" @close="close">
<slot></slot> <slot></slot>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button> <el-button @click="close">取消</el-button>
<el-button type="primary" @click="Confirm"> <el-button type="primary" @click="Confirm">确定</el-button>
确定
</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from "vue";
import { ElMessageBox } from 'element-plus' import { ElMessageBox } from "element-plus";
let props = defineProps({ let props = defineProps({
title: { title: {
type: String, type: String,
default: 'Dialog' default: "Dialog",
}, },
width: { width: {
type: String, type: String,
default: '30%' default: "30%",
} },
}) });
const emit = defineEmits(['confirm']) const emit = defineEmits(["confirm", "close"]);
const dialogVisible = ref(false) const dialogVisible = ref(false);
function open() { function open() {
dialogVisible.value = true dialogVisible.value = true;
} }
function Confirm() { function Confirm() {
emit('confirm') emit("confirm");
} }
function close() { function close() {
dialogVisible.value = false dialogVisible.value = false;
emit("close");
} }
defineExpose({ open, close }) defineExpose({ open, close });
</script> </script>
<style scoped> <style scoped>
.dialog-footer button:first-child { .dialog-footer button:first-child {

236
src/views/online-shop/goods-group.vue
View File

@@ -4,11 +4,18 @@
<template v-if="isA"> <template v-if="isA">
<!-- 搜索 --> <!-- 搜索 -->
<!-- 列表 --> <!-- 列表 -->
<page-content ref="contentRef" :content-config="contentConfig" @add-click="handleAddClick" <page-content
@edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick" ref="contentRef"
@toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange"> :content-config="contentConfig"
@add-click="handleAddClick"
@edit-click="handleEditClick"
@export-click="handleExportClick"
@search-click="handleSearchClick"
@toolbar-click="handleToolbarClick"
@operat-click="handleOperatClick"
@filter-change="handleFilterChange"
>
<template #status="scope"> <template #status="scope">
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'"> <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }} {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
@@ -22,7 +29,11 @@
</template> </template>
<template #mobile="scope"> <template #mobile="scope">
<el-text>{{ scope.row[scope.prop] }}</el-text> <el-text>{{ scope.row[scope.prop] }}</el-text>
<copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" /> <copy-button
v-if="scope.row[scope.prop]"
:text="scope.row[scope.prop]"
style="margin-left: 2px"
/>
</template> </template>
</page-content> </page-content>
@@ -51,7 +62,11 @@
</page-modal> --> </page-modal> -->
<!-- 编辑 --> <!-- 编辑 -->
<page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick"> <page-modal
ref="editModalRef"
:modal-config="editModalConfig"
@submit-click="handleSubmitClick"
>
<template #gender="scope"> <template #gender="scope">
<Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
</template> </template>
@@ -60,23 +75,37 @@
<el-button type="primary" @click="addgoods"> <el-button type="primary" @click="addgoods">
<el-icon> <el-icon>
<Plus /> <Plus />
</el-icon>添加商品 </el-icon>
添加商品
</el-button> </el-button>
<!-- 选责商品列表 --> <!-- 选责商品列表 -->
<selectGoodslist @deleteItememit="deleteItem($event)" :list="selectData"></selectGoodslist> <selectGoodslist
@deleteItememit="deleteItem($event)"
:list="selectData"
></selectGoodslist>
</div> </div>
</template> </template>
<template #addmanagementtime="scope"> <template #addmanagementtime="scope">
<template v-if="scope.formData.useTime == 1"> <template v-if="scope.formData.useTime == 1">
{{ scope.formData }} {{ scope.formData }}
<el-time-picker value-format="HH:mm:ss" v-model="scope.formData.saleTime" is-range range-separator="到" <el-time-picker
start-placeholder="开始时间" end-placeholder="结束时间" /> value-format="HH:mm:ss"
v-model="scope.formData.saleTime"
is-range
range-separator="到"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</template> </template>
</template> </template>
</page-modal> </page-modal>
</template> </template>
<template v-else> <template v-else>
<page-content ref="contentRef" :content-config="contentConfig2" @operat-click="handleOperatClick"> <page-content
ref="contentRef"
:content-config="contentConfig2"
@operat-click="handleOperatClick"
>
<template #status="scope"> <template #status="scope">
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'"> <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }} {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
@@ -85,12 +114,31 @@
</page-content> </page-content>
</template> </template>
<!-- 新增添加商品 --> <!-- 新增添加商品 -->
<myDialog title="选择商品" width="50%" ref="myDialogRef" @Confirm="subitgood"> <myDialog
<page-search ref="searchRefs" :search-config="searchConfig2" @query-click="searchs" title="选择商品"
@reset-click="handleResetClick" /> width="50%"
<page-content ref="contentRefs" v-if="switchref" :content-config="contentConfig2" @add-click="handleAddClick" ref="myDialogRef"
@edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick" @Confirm="subitgood"
@toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange"> @close="resetSelectData"
>
<page-search
ref="searchRefs"
:search-config="searchConfig2"
@query-click="searchs"
@reset-click="handleResetClick"
/>
<page-content
ref="contentRefs"
v-if="switchref"
:content-config="contentConfig2"
@add-click="handleAddClick"
@edit-click="handleEditClick"
@export-click="handleExportClick"
@search-click="handleSearchClick"
@toolbar-click="handleToolbarClick"
@operat-click="handleOperatClick"
@filter-change="handleFilterChange"
>
<template #status="scope"> <template #status="scope">
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'"> <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }} {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
@@ -104,13 +152,14 @@
</template> </template>
<template #mobile="scope"> <template #mobile="scope">
<el-text>{{ scope.row[scope.prop] }}</el-text> <el-text>{{ scope.row[scope.prop] }}</el-text>
<copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" /> <copy-button
v-if="scope.row[scope.prop]"
:text="scope.row[scope.prop]"
style="margin-left: 2px"
/>
</template> </template>
</page-content> </page-content>
<!-- <el-table :data="selectData" border style="width: 100%"> <!-- <el-table :data="selectData" border style="width: 100%">
<el-table-column prop="date" align="center" label="Date" /> <el-table-column prop="date" align="center" label="Date" />
<el-table-column prop="address" align="center" label="Address" /> <el-table-column prop="address" align="center" label="Address" />
@@ -127,7 +176,10 @@
</el-form-item> </el-form-item>
<el-form-item label="" v-if="selectData.length"> <el-form-item label="" v-if="selectData.length">
<!-- 选责商品列表 --> <!-- 选责商品列表 -->
<selectGoodslist @deleteItememit="deleteItem($event)" :list="selectData"></selectGoodslist> <selectGoodslist
@deleteItememit="deleteItem($event)"
:list="selectData"
></selectGoodslist>
</el-form-item> </el-form-item>
<el-form-item label="分组状态"> <el-form-item label="分组状态">
<el-radio-group v-model="forms.status"> <el-radio-group v-model="forms.status">
@@ -142,8 +194,14 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="时间选择" v-if="forms.useTime == 1"> <el-form-item label="时间选择" v-if="forms.useTime == 1">
<el-time-picker value-format="HH:mm:ss" v-model="forms.time" is-range range-separator="到" <el-time-picker
start-placeholder="开始时间" end-placeholder="结束时间" /> value-format="HH:mm:ss"
v-model="forms.time"
is-range
range-separator="到"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</el-form-item> </el-form-item>
<el-form-item label="排列方式"> <el-form-item label="排列方式">
<el-radio-group v-model="forms.sortMode"> <el-radio-group v-model="forms.sortMode">
@@ -174,8 +232,8 @@ import contentConfig2 from "./goodsGroupconfig/content2";
import editModalConfig from "./goodsGroupconfig/edit"; import editModalConfig from "./goodsGroupconfig/edit";
import searchConfig from "./goodsGroupconfig/search"; import searchConfig from "./goodsGroupconfig/search";
import searchConfig2 from "./goodsGroupconfig/search2"; import searchConfig2 from "./goodsGroupconfig/search2";
import myDialog from '@/components/mycomponents/myDialog.vue' import myDialog from "@/components/mycomponents/myDialog.vue";
import selectGoodslist from "./goodsGroupconfig/selectGoodslist.vue" import selectGoodslist from "./goodsGroupconfig/selectGoodslist.vue";
const { const {
searchRef, searchRef,
searchRefs, searchRefs,
@@ -194,46 +252,45 @@ const {
handleFilterChange, handleFilterChange,
} = usePage(); } = usePage();
let switchref = ref(false) let switchref = ref(false);
// 新增 // 新增
async function handleAddClick() { async function handleAddClick() {
addModalRef.value?.setModalVisible(); addModalRef.value?.setModalVisible();
selectData.value = [] selectData.value = [];
// 加载上级规格下拉数据源 // 加载上级规格下拉数据源
// addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" }); // addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
// 加载角色下拉数据源 // 加载角色下拉数据源
// addModalConfig.formItems[4]!.options = await RoleAPI.getOptions(); // addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
} }
const myDialogRef = ref(null) const myDialogRef = ref(null);
const myDialogRefAdd = ref(null) const myDialogRefAdd = ref(null);
const elFormref = ref(null) const elFormref = ref(null);
let title = ref("新增分组") let title = ref("新增分组");
// 选中的商品数据 // 选中的商品数据
let selectData = ref([]) let selectData = ref([]);
let forms = reactive({ let forms = reactive({
name: "", name: "",
status: 1, status: 1,
useTime: 0, useTime: 0,
sortMode: '0', sortMode: "0",
sort: 1, sort: 1,
time: "" time: "",
}) });
// 添加商品 // 添加商品
function addgoods() { async function addgoods() {
// console.log(selectData.value, '编辑时候有的数据') // console.log(selectData.value, '编辑时候有的数据')
switchref.value = true switchref.value = true;
myDialogRef.value.open() myDialogRef.value.open();
await nextTick();
contentRefs.value.setSelectTable(selectData.value);
} }
const rules = reactive<FormRules<RuleForm>>({ const rules = reactive<FormRules<RuleForm>>({
name: [ name: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
{ required: true, message: '请输入分组名称', trigger: 'blur' }, });
],
})
interface RuleForm { interface RuleForm {
name: string name: string;
} }
// 添加编辑商品分组 // 添加编辑商品分组
@@ -243,76 +300,71 @@ async function addConfirm() {
if (valid) { if (valid) {
let obj = { let obj = {
...forms, ...forms,
selectgoods: selectData.value selectgoods: selectData.value,
} };
// 商品选择的合集 // 商品选择的合集
if (selectData.value.length) { if (selectData.value.length) {
let arr = [] let arr = [];
selectData.value.forEach((item, index) => { selectData.value.forEach((item, index) => {
arr.push(item.id) arr.push(item.id);
}) });
obj.productIds = arr obj.productIds = arr;
} }
console.log(obj, '商品分组的参数') console.log(obj, "商品分组的参数");
if (obj.time && obj.time.length) { if (obj.time && obj.time.length) {
obj.saleStartTime = obj.time[0] obj.saleStartTime = obj.time[0];
obj.saleEndTime = obj.time[1] obj.saleEndTime = obj.time[1];
} }
if (title.value == "新增分组") { if (title.value == "新增分组") {
let res = await UserAPI.addunit(obj) let res = await UserAPI.addunit(obj);
if (res.code == 200) { if (res.code == 200) {
ElMessage.success("添加成功"); ElMessage.success("添加成功");
myDialogRefAdd.value.close() myDialogRefAdd.value.close();
} }
} else { } else {
if (obj.useTime == 0) { if (obj.useTime == 0) {
obj.saleStartTime = null obj.saleStartTime = null;
obj.saleEndTime = null obj.saleEndTime = null;
} }
let res = await UserAPI.update(obj) let res = await UserAPI.update(obj);
if (res.code == 200) { if (res.code == 200) {
ElMessage.success("编辑成功"); ElMessage.success("编辑成功");
myDialogRefAdd.value.close() myDialogRefAdd.value.close();
} }
} }
// contentConfig.indexAction() // contentConfig.indexAction()
handleQueryClick() handleQueryClick();
} else { } else {
console.log('error submit!', fields) console.log("error submit!", fields);
} }
}) });
} }
// 添加商品的回调 // 添加商品的回调
function subitgood() { function subitgood() {
if (title.value == "编辑分组") { if (title.value == "编辑分组") {
let arr = selectData.value let arr = selectData.value;
contentRefs.value.getselectTable().forEach((item: any) => { contentRefs.value.getselectTable().forEach((item: any) => {
let selectdata = selectData.value.find(ele => ele.id == item.id) let selectdata = selectData.value.find((ele) => ele.id == item.id);
if (!selectdata) { if (!selectdata) {
arr.push(item) arr.push(item);
} }
}) });
selectData.value = arr selectData.value = arr;
} else { } else {
selectData.value = contentRefs.value.getselectTable() selectData.value = contentRefs.value.getselectTable();
} }
switchref.value = false switchref.value = false;
myDialogRef.value.close() myDialogRef.value.close();
} }
// 删除商品 // 删除商品
function deleteItem(data: any) { function deleteItem(data: any) {
selectData.value = data selectData.value = data;
} }
// 编辑 // 编辑
async function handleEditClick(row: IObject) { async function handleEditClick(row: IObject) {
editModalRef.value?.handleDisabled(false); editModalRef.value?.handleDisabled(false);
title.value = "编辑分组" title.value = "编辑分组";
// 加载部门下拉数据源 // 加载部门下拉数据源
// editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" }); // editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
// editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions(); // editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
@@ -320,13 +372,13 @@ async function handleEditClick(row: IObject) {
// editModalConfig.formItems[4]!.options = await RoleAPI.getOptions(); // editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
// 根据id获取数据进行填充 // 根据id获取数据进行填充
const data = await UserAPI.getunitinfo(row.id); const data = await UserAPI.getunitinfo(row.id);
let obj = { ...data } let obj = { ...data };
selectData.value = data.productList selectData.value = data.productList;
obj.time = [obj.saleStartTime, obj.saleEndTime] obj.time = [obj.saleStartTime, obj.saleEndTime];
for (let key in obj) { for (let key in obj) {
forms[key] = obj[key] forms[key] = obj[key];
} }
myDialogRefAdd.value.open() myDialogRefAdd.value.open();
// editModalRef.value?.setFormData(obj); // editModalRef.value?.setFormData(obj);
// editModalRef.value?.setModalVisible(); // editModalRef.value?.setModalVisible();
} }
@@ -338,15 +390,15 @@ function handleToolbarClick(name: string) {
name: "", name: "",
status: 1, status: 1,
useTime: 0, useTime: 0,
sortMode: '0', sortMode: "0",
sort: 1, sort: 1,
time: "" time: "",
}) });
selectData.value = [] selectData.value = [];
title.value = "新增分组" title.value = "新增分组";
// 新增 // 新增
myDialogRefAdd.value.open() myDialogRefAdd.value.open();
} }
} }
// 其他操作列 // 其他操作列
@@ -384,6 +436,12 @@ async function handleOperatClick(data: IOperatData) {
} }
} }
//清除选择商品弹窗表单选中和
function resetSelectData() {
contentRefs.value?.clearSelectTable();
switchref.value = false;
}
// 切换示例 // 切换示例
const isA = ref(true); const isA = ref(true);
</script> </script>