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

feat: 分组编辑商品数据去重

This commit is contained in:
duan 2025-03-25 00:20:17 +08:00
parent ec7292cf4c
commit ccab0a33ee
3 changed files with 104 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,58 +8,37 @@
<template v-if="typeof item === 'string'"> <template v-if="typeof item === 'string'">
<!-- 新增 --> <!-- 新增 -->
<template v-if="item === 'add'"> <template v-if="item === 'add'">
<el-button <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="primary" icon="plus"
v-hasPerm="[`${contentConfig.pageName}:${item}`]" @click="handleToolbar(item)">
type="primary"
icon="plus"
@click="handleToolbar(item)"
>
新增 新增
</el-button> </el-button>
</template> </template>
<!-- 删除 --> <!-- 删除 -->
<template v-else-if="item === 'delete'"> <template v-else-if="item === 'delete'">
<el-button <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="danger" icon="delete"
v-hasPerm="[`${contentConfig.pageName}:${item}`]" :disabled="removeIds.length === 0" @click="handleToolbar(item)">
type="danger"
icon="delete"
:disabled="removeIds.length === 0"
@click="handleToolbar(item)"
>
删除 删除
</el-button> </el-button>
</template> </template>
<!-- 导入 --> <!-- 导入 -->
<template v-else-if="item === 'import'"> <template v-else-if="item === 'import'">
<el-button <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="default" icon="upload"
v-hasPerm="[`${contentConfig.pageName}:${item}`]" @click="handleToolbar(item)">
type="default"
icon="upload"
@click="handleToolbar(item)"
>
导入 导入
</el-button> </el-button>
</template> </template>
<!-- 导出 --> <!-- 导出 -->
<template v-else-if="item === 'export'"> <template v-else-if="item === 'export'">
<el-button <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="default" icon="download"
v-hasPerm="[`${contentConfig.pageName}:${item}`]" @click="handleToolbar(item)">
type="default"
icon="download"
@click="handleToolbar(item)"
>
导出 导出
</el-button> </el-button>
</template> </template>
</template> </template>
<!-- 其他 --> <!-- 其他 -->
<template v-else-if="typeof item === 'object'"> <template v-else-if="typeof item === 'object'">
<el-button <el-button v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon"
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :type="item.type ?? 'default'" @click="handleToolbar(item.name)">
:icon="item.icon"
:type="item.type ?? 'default'"
@click="handleToolbar(item.name)"
>
{{ item.text }} {{ item.text }}
</el-button> </el-button>
</template> </template>
@ -88,68 +67,36 @@
</template> </template>
<!-- 导出 --> <!-- 导出 -->
<template v-else-if="item === 'exports'"> <template v-else-if="item === 'exports'">
<el-button <el-button v-hasPerm="[`${contentConfig.pageName}:export`]" icon="download" circle title="导出"
v-hasPerm="[`${contentConfig.pageName}:export`]" @click="handleToolbar(item)" />
icon="download"
circle
title="导出"
@click="handleToolbar(item)"
/>
</template> </template>
<!-- 导入 --> <!-- 导入 -->
<template v-else-if="item === 'imports'"> <template v-else-if="item === 'imports'">
<el-button <el-button v-hasPerm="[`${contentConfig.pageName}:import`]" icon="upload" circle title="导入"
v-hasPerm="[`${contentConfig.pageName}:import`]" @click="handleToolbar(item)" />
icon="upload"
circle
title="导入"
@click="handleToolbar(item)"
/>
</template> </template>
<!-- 搜索 --> <!-- 搜索 -->
<template v-else-if="item === 'search'"> <template v-else-if="item === 'search'">
<el-button <el-button v-hasPerm="[`${contentConfig.pageName}:query`]" icon="search" circle title="搜索"
v-hasPerm="[`${contentConfig.pageName}:query`]" @click="handleToolbar(item)" />
icon="search"
circle
title="搜索"
@click="handleToolbar(item)"
/>
</template> </template>
</template> </template>
<!-- 其他 --> <!-- 其他 -->
<template v-else-if="typeof item === 'object'"> <template v-else-if="typeof item === 'object'">
<template v-if="item.auth"> <template v-if="item.auth">
<el-button <el-button v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon" circle
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :title="item.title" @click="handleToolbar(item.name)" />
:icon="item.icon"
circle
:title="item.title"
@click="handleToolbar(item.name)"
/>
</template> </template>
<template v-else> <template v-else>
<el-button <el-button :icon="item.icon" circle :title="item.title" @click="handleToolbar(item.name)" />
:icon="item.icon"
circle
:title="item.title"
@click="handleToolbar(item.name)"
/>
</template> </template>
</template> </template>
</template> </template>
</div> </div>
</div> </div>
<!-- 列表 --> <!-- 列表 -->
<el-table <el-table ref="tableRef" v-loading="loading" v-bind="contentConfig.table" :data="pageData" :row-key="pk"
ref="tableRef" @selection-change="handleSelectionChange" @filter-change="handleFilterChange">
v-loading="loading"
v-bind="contentConfig.table"
:data="pageData"
:row-key="pk"
@selection-change="handleSelectionChange"
@filter-change="handleFilterChange"
>
<template v-for="col in cols" :key="col"> <template v-for="col in cols" :key="col">
<el-table-column v-if="col.show" v-bind="col"> <el-table-column v-if="col.show" v-bind="col">
<template #default="scope"> <template #default="scope">
@ -158,24 +105,15 @@
<template v-if="col.prop"> <template v-if="col.prop">
<template v-if="Array.isArray(scope.row[col.prop])"> <template v-if="Array.isArray(scope.row[col.prop])">
<template v-for="(item, index) in scope.row[col.prop]" :key="item"> <template v-for="(item, index) in scope.row[col.prop]" :key="item">
<el-image <el-image :src="item" :preview-src-list="scope.row[col.prop]" :initial-index="index"
:src="item" :preview-teleported="true" :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40
:preview-src-list="scope.row[col.prop]" }px`" />
:initial-index="index"
:preview-teleported="true"
:style="`width: ${col.imageWidth ?? 40}px; height: ${
col.imageHeight ?? 40
}px`"
/>
</template> </template>
</template> </template>
<template v-else> <template v-else>
<el-image <el-image :src="scope.row[col.prop]" :preview-src-list="[scope.row[col.prop]]"
:src="scope.row[col.prop]"
:preview-src-list="[scope.row[col.prop]]"
:preview-teleported="true" :preview-teleported="true"
:style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`" :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`" />
/>
</template> </template>
</template> </template>
</template> </template>
@ -197,30 +135,20 @@
<template v-else-if="col.templet === 'switch'"> <template v-else-if="col.templet === 'switch'">
<template v-if="col.prop"> <template v-if="col.prop">
<!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 --> <!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 -->
<el-switch <el-switch v-model="scope.row[col.prop]" :active-value="col.activeValue ?? 1"
v-model="scope.row[col.prop]" :inactive-value="col.inactiveValue ?? 0" :inline-prompt="true" :active-text="col.activeText ?? ''"
:active-value="col.activeValue ?? 1" :inactive-text="col.inactiveText ?? ''" :validate-event="false"
:inactive-value="col.inactiveValue ?? 0" :disabled="!hasAuth(`${contentConfig.pageName}:modify`)" @change="
:inline-prompt="true"
:active-text="col.activeText ?? ''"
:inactive-text="col.inactiveText ?? ''"
:validate-event="false"
:disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
@change="
pageData.length > 0 && handleModify(col.prop, scope.row[col.prop], scope.row) pageData.length > 0 && handleModify(col.prop, scope.row[col.prop], scope.row)
" " />
/>
</template> </template>
</template> </template>
<!-- 生成输入框组件 --> <!-- 生成输入框组件 -->
<template v-else-if="col.templet === 'input'"> <template v-else-if="col.templet === 'input'">
<template v-if="col.prop"> <template v-if="col.prop">
<el-input <el-input v-model="scope.row[col.prop]" :type="col.inputType ?? 'text'"
v-model="scope.row[col.prop]"
:type="col.inputType ?? 'text'"
:disabled="!hasAuth(`${contentConfig.pageName}:modify`)" :disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
@blur="handleModify(col.prop, scope.row[col.prop], scope.row)" @blur="handleModify(col.prop, scope.row[col.prop], scope.row)" />
/>
</template> </template>
</template> </template>
<!-- 格式化为价格 --> <!-- 格式化为价格 -->
@ -252,7 +180,7 @@
{{ {{
scope.row[col.prop] scope.row[col.prop]
? useDateFormat(scope.row[col.prop], col.dateFormat ?? "YYYY-MM-DD HH:mm:ss") ? useDateFormat(scope.row[col.prop], col.dateFormat ?? "YYYY-MM-DD HH:mm:ss")
.value .value
: "" : ""
}} }}
</template> </template>
@ -263,82 +191,56 @@
<template v-if="typeof item === 'string'"> <template v-if="typeof item === 'string'">
<!-- 编辑/删除 --> <!-- 编辑/删除 -->
<template v-if="item === 'edit' || item === 'delete'"> <template v-if="item === 'edit' || item === 'delete'">
<el-button <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]"
v-hasPerm="[`${contentConfig.pageName}:${item}`]" :type="item === 'edit' ? 'primary' : 'danger'" :icon="item" size="small" link @click="
:type="item === 'edit' ? 'primary' : 'danger'"
:icon="item"
size="small"
link
@click="
handleOperat({ handleOperat({
name: item, name: item,
row: scope.row, row: scope.row,
column: scope.column, column: scope.column,
$index: scope.$index, $index: scope.$index,
}) })
" ">
>
{{ item === "edit" ? "编辑" : "删除" }} {{ item === "edit" ? "编辑" : "删除" }}
</el-button> </el-button>
</template> </template>
</template> </template>
<!-- 其他 --> <!-- 其他 -->
<template v-else-if="typeof item === 'object'"> <template v-else-if="typeof item === 'object'">
<el-button <el-button v-if="item.isBtn" v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon"
v-if="item.isBtn" :type="item.type ?? 'primary'" size="small" link @click="
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
:icon="item.icon"
:type="item.type ?? 'primary'"
size="small"
link
@click="
handleOperat({ handleOperat({
name: item.name, name: item.name,
row: scope.row, row: scope.row,
column: scope.column, column: scope.column,
$index: scope.$index, $index: scope.$index,
}) })
" ">
>
{{ item.text }} {{ item.text }}
</el-button> </el-button>
<el-dropdown style="margin-top: 4px" v-else> <el-dropdown style="margin-top: 4px" v-else>
<el-button <el-button v-if="item.render === undefined || item.render(scope.row)" v-bind="item.auth ? { 'v-hasPerm': [`${contentConfig.pageName}:${item.auth}`] } : {}
v-if="item.render === undefined || item.render(scope.row)" " :icon="item.icon" :type="item.type ?? 'primary'" size="small" link @click="
v-bind="
item.auth ? { 'v-hasPerm': [`${contentConfig.pageName}:${item.auth}`] } : {}
"
:icon="item.icon"
:type="item.type ?? 'primary'"
size="small"
link
@click="
handleOperat({ handleOperat({
name: item.name, name: item.name,
row: scope.row, row: scope.row,
column: scope.column, column: scope.column,
$index: scope.$index, $index: scope.$index,
}) })
" ">
>
{{ item.text }} {{ item.text }}
</el-button> </el-button>
<template #dropdown v-if="item.options && item.options.length > 0"> <template #dropdown v-if="item.options && item.options.length > 0">
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item <el-dropdown-item @click="
@click=" handleOperat({
handleOperat({ name: item.name,
name: item.name, row: scope.row,
row: scope.row, column: scope.column,
column: scope.column, $index: scope.$index,
$index: scope.$index, command: opt.command ? opt.command : '',
command: opt.command ? opt.command : '', })
}) " v-for="opt in item.options" :key="opt.value">
"
v-for="opt in item.options"
:key="opt.value"
>
{{ opt.label }} {{ opt.label }}
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
@ -359,33 +261,18 @@
<template v-if="showPagination"> <template v-if="showPagination">
<el-scrollbar> <el-scrollbar>
<div class="mt-[12px]"> <div class="mt-[12px]">
<el-pagination <el-pagination v-bind="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
v-bind="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div> </div>
</el-scrollbar> </el-scrollbar>
</template> </template>
<!-- 导出弹窗 --> <!-- 导出弹窗 -->
<el-dialog <el-dialog v-model="exportsModalVisible" :align-center="true" title="导出数据" width="600px" style="padding-right: 0"
v-model="exportsModalVisible" @close="handleCloseExportsModal">
:align-center="true"
title="导出数据"
width="600px"
style="padding-right: 0"
@close="handleCloseExportsModal"
>
<!-- 滚动 --> <!-- 滚动 -->
<el-scrollbar max-height="60vh"> <el-scrollbar max-height="60vh">
<!-- 表单 --> <!-- 表单 -->
<el-form <el-form ref="exportsFormRef" label-width="auto" style="padding-right: var(--el-dialog-padding-primary)"
ref="exportsFormRef" :model="exportsFormData" :rules="exportsFormRules">
label-width="auto"
style="padding-right: var(--el-dialog-padding-primary)"
:model="exportsFormData"
:rules="exportsFormRules"
>
<el-form-item label="文件名" prop="filename"> <el-form-item label="文件名" prop="filename">
<el-input v-model="exportsFormData.filename" clearable /> <el-input v-model="exportsFormData.filename" clearable />
</el-form-item> </el-form-item>
@ -395,16 +282,10 @@
<el-form-item label="数据源" prop="origin"> <el-form-item label="数据源" prop="origin">
<el-select v-model="exportsFormData.origin"> <el-select v-model="exportsFormData.origin">
<el-option label="当前数据 (当前页的数据)" :value="ExportsOriginEnum.CURRENT" /> <el-option label="当前数据 (当前页的数据)" :value="ExportsOriginEnum.CURRENT" />
<el-option <el-option label="选中数据 (所有选中的数据)" :value="ExportsOriginEnum.SELECTED"
label="选中数据 (所有选中的数据)" :disabled="selectionData.length <= 0" />
:value="ExportsOriginEnum.SELECTED" <el-option label="全量数据 (所有分页的数据)" :value="ExportsOriginEnum.REMOTE"
:disabled="selectionData.length <= 0" :disabled="contentConfig.exportsAction === undefined" />
/>
<el-option
label="全量数据 (所有分页的数据)"
:value="ExportsOriginEnum.REMOTE"
:disabled="contentConfig.exportsAction === undefined"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="字段" prop="fields"> <el-form-item label="字段" prop="fields">
@ -425,35 +306,17 @@
</template> </template>
</el-dialog> </el-dialog>
<!-- 导入弹窗 --> <!-- 导入弹窗 -->
<el-dialog <el-dialog v-model="importModalVisible" :align-center="true" title="导入数据" width="600px" style="padding-right: 0"
v-model="importModalVisible" @close="handleCloseImportModal">
:align-center="true"
title="导入数据"
width="600px"
style="padding-right: 0"
@close="handleCloseImportModal"
>
<!-- 滚动 --> <!-- 滚动 -->
<el-scrollbar max-height="60vh"> <el-scrollbar max-height="60vh">
<!-- 表单 --> <!-- 表单 -->
<el-form <el-form ref="importFormRef" label-width="auto" style="padding-right: var(--el-dialog-padding-primary)"
ref="importFormRef" :model="importFormData" :rules="importFormRules">
label-width="auto"
style="padding-right: var(--el-dialog-padding-primary)"
:model="importFormData"
:rules="importFormRules"
>
<el-form-item label="文件名" prop="files"> <el-form-item label="文件名" prop="files">
<el-upload <el-upload ref="uploadRef" v-model:file-list="importFormData.files" class="w-full"
ref="uploadRef"
v-model:file-list="importFormData.files"
class="w-full"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
:drag="true" :drag="true" :limit="1" :auto-upload="false" :on-exceed="handleFileExceed">
:limit="1"
:auto-upload="false"
:on-exceed="handleFileExceed"
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon> <el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text"> <div class="el-upload__text">
<span>将文件拖到此处，或</span> <span>将文件拖到此处，或</span>
@ -462,13 +325,8 @@
<template #tip> <template #tip>
<div class="el-upload__tip"> <div class="el-upload__tip">
*.xlsx / *.xls *.xlsx / *.xls
<el-link <el-link v-if="contentConfig.importTemplate" type="primary" icon="download" :underline="false"
v-if="contentConfig.importTemplate" @click="handleDownloadTemplate">
type="primary"
icon="download"
:underline="false"
@click="handleDownloadTemplate"
>
下载模板 下载模板
</el-link> </el-link>
</div> </div>
@ -480,11 +338,7 @@
<!-- 弹窗底部操作按钮 --> <!-- 弹窗底部操作按钮 -->
<template #footer> <template #footer>
<div style="padding-right: var(--el-dialog-padding-primary)"> <div style="padding-right: var(--el-dialog-padding-primary)">
<el-button <el-button type="primary" :disabled="importFormData.files.length === 0" @click="handleImportSubmit">
type="primary"
:disabled="importFormData.files.length === 0"
@click="handleImportSubmit"
>
确 定 确 定
</el-button> </el-button>
<el-button @click="handleCloseImportModal">取 消</el-button> <el-button @click="handleCloseImportModal">取 消</el-button>
@ -960,10 +814,10 @@ function fetchPageData(formData: IObject = {}, isRestart = false) {
.indexAction( .indexAction(
showPagination showPagination
? { ? {
[request.pageName]: pagination.currentPage, [request.pageName]: pagination.currentPage,
[request.limitName]: pagination.pageSize, [request.limitName]: pagination.pageSize,
...formData, ...formData,
} }
: formData : formData
) )
.then((data) => { .then((data) => {
@ -1025,9 +879,14 @@ 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[]) {
console.log(tableRef, 'tioshi222222222222222222222')
// rows.forEach((row) => {
// tableRef.value!.toggleRowSelection(row, undefined)
// })
}
// 暴露的属性和方法 // 暴露的属性和方法
defineExpose({ fetchPageData, exportPageData, getFilterParams, getselectTable, pagination }); defineExpose({ fetchPageData, exportPageData, getFilterParams, getselectTable, pagination, test });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@ -107,6 +107,14 @@
<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-column prop="date" align="center" label="Date" />
<el-table-column prop="address" align="center" label="Address" />
</el-table> -->
</myDialog> </myDialog>
<!-- 新增 --> <!-- 新增 -->
<myDialog :title="title" width="30%" ref="myDialogRefAdd" @Confirm="addConfirm()"> <myDialog :title="title" width="30%" ref="myDialogRefAdd" @Confirm="addConfirm()">
@ -212,8 +220,10 @@ let forms = reactive({
// 添加商品 // 添加商品
function addgoods() { function addgoods() {
// console.log(selectData.value, '编辑时候有的数据')
switchref.value = true switchref.value = true
myDialogRef.value.open() myDialogRef.value.open()
} }
const rules = reactive<FormRules<RuleForm>>({ const rules = reactive<FormRules<RuleForm>>({
name: [ name: [
@ -273,7 +283,12 @@ function subitgood() {
if (title.value == "编辑分组") { if (title.value == "编辑分组") {
let arr = selectData.value let arr = selectData.value
arr.push(...contentRefs.value.getselectTable()) contentRefs.value.getselectTable().forEach((item: any) => {
let selectdata = selectData.value.find(ele => ele.id == item.id)
if (!selectdata) {
arr.push(item)
}
})
selectData.value = arr selectData.value = arr
} else { } else {
selectData.value = contentRefs.value.getselectTable() selectData.value = contentRefs.value.getselectTable()

11
src/views/online-shop/goodsGroupconfig/content2.ts
View File

@ -13,14 +13,17 @@ const contentConfig: IContentConfig = {
pageSize: 10, pageSize: 10,
pageSizes: [10, 20, 30, 50], pageSizes: [10, 20, 30, 50],
}, },
indexAction: function (params) { indexAction: async function (params) {
return UserAPI.getPage(params); let res = await UserAPI.getPage(params);
console.log("indexAction:", res);
return res;
// return UserAPI.getPage(params);
}, },
modifyAction(data) { modifyAction(data) {
// 模拟发起网络请求修改字段 // 模拟发起网络请求修改字段
// console.log("modifyAction:", data); // console.log("modifyAction:", data);
ElMessage.success(JSON.stringify(data)); // ElMessage.success(JSON.stringify(data));
return Promise.resolve(null); // return Promise.resolve(null);
}, },
cols: [ cols: [