表格筛选

This commit is contained in:
qiaopengfei 2024-07-26 00:36:07 +08:00
parent 74bc0df089
commit a266434c05
3 changed files with 177 additions and 97 deletions

View File

@ -446,7 +446,19 @@ export const initOss = (file) => {
} }
}); });
} }
//深拷贝
export function deepClone(obj, hash = new WeakMap()) {
if (obj == null || typeof obj !== "object") return obj
if (obj instanceof Date) return new Date(obj)
if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags)
if (hash.has(obj)) return hash.set(obj)
const deepArr = Array.isArray(obj) ? [] : {}
hash.set(obj, deepArr);
for (const key in obj) {
deepArr[key] = deepClone(obj[key], hash);
}
return deepArr
}
let commont = { let commont = {
maskData: maskData, maskData: maskData,
@ -467,7 +479,8 @@ let commont = {
compression: compression, compression: compression,
isObject: isObject, isObject: isObject,
isArray: isArray, isArray: isArray,
initOss: initOss initOss: initOss,
deepClone: deepClone
} }

View File

@ -209,6 +209,10 @@ const submit_specification = (formEl) => {
}); });
}; };
const submitForm = () => { const submitForm = () => {
if (!specification_list.value.length)
return ElMessage.warning("没有添加任何规格属性!");
if (!specification_list.value.every((item) => item.valueGrop.length))
return ElMessage.warning("添加规格后至少添加一个属性值!");
$emit("specificationSubmit", specification_list); $emit("specificationSubmit", specification_list);
specificationClose(); specificationClose();
}; };

View File

@ -144,9 +144,9 @@
{{ el.xyName }}<span style="margin-left: 10px">187/500</span> {{ el.xyName }}<span style="margin-left: 10px">187/500</span>
</div> </div>
<div class="create_shop" @click="add_xyShop"> <div class="create_shop" @click="add_xyShop">
<span style="display: flex; align-items: center" <span style="display: flex; align-items: center">
><Plus style="width: 1em; height: 1em; margin-right: 5px" <Plus style="width: 1em; height: 1em; margin-right: 5px" />
/></span> </span>
新增闲鱼店铺 新增闲鱼店铺
</div> </div>
</div> </div>
@ -229,9 +229,9 @@
v-if="item.type === 'add'" v-if="item.type === 'add'"
@click="item.add" @click="item.add"
> >
<span style="display: flex; align-items: center" <span style="display: flex; align-items: center">
><Plus style="width: 1em; height: 1em; margin-right: 5px" <Plus style="width: 1em; height: 1em; margin-right: 5px" />
/></span> </span>
添加多规格深库存 添加多规格深库存
</div> </div>
<div <div
@ -288,39 +288,87 @@
{{ item.suffix }} {{ item.suffix }}
</template> </template>
</el-input> </el-input>
<!-- <el-table <el-table
class="Tabel" class="Tabel"
id="table" id="table"
v-if="item.type === 'el-table'" v-if="item.type === 'el-table'"
ref="tableRef" ref="tableRef"
row-key="date" row-key="date"
:data="" :data="item.tableData"
style="width: 100%" style="width: 100%"
border
> >
<el-table-column <el-table-column
v-for="(el, ind) in item.tabelList" v-for="(el, ind) in item.tabelList"
:prop="el.params" :prop="el.params"
:key="ind" :key="ind"
:label="el.label" :label="el.label"
:filters="el.filters"
:filter-method="el.filterMethod"
filter-placement="bottom-end"
align="center" align="center"
> >
<template #header> <template #header="scope">
<el-input <el-input
style="width: 80px" style="width: 80px"
v-if="el.label === '售价' || el.label === '库存'" v-if="el.label === '售价' || el.label === '库存'"
v-model="el.search" v-model="el.search"
:placeholder="el.label" :placeholder="el.label"
size="small" size="small"
@keydown="el.keydown($event, item, el.search)" @keydown="el.keydown($event, item, el)"
> >
<template #suffix> <template #suffix>
<el-icon class="el-input__icon"><Edit /></el-icon> <el-icon class="el-input__icon">
<Edit />
</el-icon>
</template> </template>
</el-input> </el-input>
<div
style="
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
"
v-else
>
<span>{{ el.label }}</span>
<el-popover :visible="el.visible" :width="160">
<div>
<el-checkbox-group v-model="el.property">
<el-checkbox
style="width: 100%"
v-for="e in el.filters"
:key="e.value"
:label="e.label"
:value="e.value"
>
{{ e.label }}
</el-checkbox>
</el-checkbox-group>
<div style="text-align: right; margin: 0">
<el-button
size="small"
type="primary"
@click="el.filterMethod(item, el)"
>
筛选
</el-button>
<el-button @click="el.reset(item, el)" size="small"
>重置</el-button
>
</div>
</div>
<template #reference>
<Filter
class="filter_icon"
style="width: 1em; height: 1em; margin-left: 5px"
@click="el.visible = !el.visible"
/>
</template>
</el-popover>
</div>
</template> </template>
<template #default="scope"> <template #default="scope">
<div v-if="el.label === '售价' || el.label === '库存'"> <div v-if="el.label === '售价' || el.label === '库存'">
<el-input <el-input
@ -332,37 +380,7 @@
<span v-else>{{ scope.row[el.params] }}</span> <span v-else>{{ scope.row[el.params] }}</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> --> </el-table>
<vxe-table
v-if="item.type === 'el-table'"
border
ref="xTable"
height="300"
:row-config="{ isHover: true }"
:data="item.tableData"
>
<vxe-column
v-for="(el, ind) in item.tabelList"
:key="ind"
:field="el.label"
:title="el.label"
:filters="el.filters"
:filter-method="el.filterMethod"
>
<template #default="{ row }">
<div v-if="el.label === '售价' || el.label === '库存'">
<el-input
style="width: 120px"
v-model="row[el.params]"
size="small"
/>
</div>
<span v-else>{{ row[el.params] }}</span>
</template>
</vxe-column>
</vxe-table>
<el-select <el-select
style="width: 240px" style="width: 240px"
v-model="ruleForm[item.params]" v-model="ruleForm[item.params]"
@ -429,16 +447,14 @@
</template> </template>
<script setup> <script setup>
import { Plus, Edit } from "@element-plus/icons-vue"; import { Plus, Edit, Filter } from "@element-plus/icons-vue";
import { router } from "@/router.js"; import { router } from "@/router.js";
import { ref, reactive, onMounted } from "vue"; import { ref, reactive, onMounted } from "vue";
import UploadImage from "@components/Upload/newfileupload.vue"; import UploadImage from "@components/Upload/newfileupload.vue";
import SpecificationDialog from "./components/specificationDialog.vue"; import SpecificationDialog from "./components/specificationDialog.vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
const ruleFormRef = ref(null); const ruleFormRef = ref(null);
const xTable = ref(null); const tableRef = ref(null);
import XEUtils from "xe-utils";
import VXETable from "vxe-table";
import { import {
getGoodsType, getGoodsType,
getGoodsInfo, getGoodsInfo,
@ -1007,94 +1023,106 @@ const specificationSubmit = (row) => {
{ {
type: "el-table", type: "el-table",
label: "销售规格", label: "销售规格",
tableData: [], tableData: generateCombinations(row._value),
new_tableData: generateCombinations(row._value),
tabelList: [ tabelList: [
{ {
label: "售价", label: "售价",
params: "price", params: "price",
keydown: (e, data, value) => { keydown: (e, data,el) => {
if (e.key !== "Enter") return; if (e.key !== "Enter") return;
const filterList = [];
data.tabelList
.filter((item) => item.property)
.forEach((item) => {
filterList.push(...item.property);
});
data.tableData.forEach((item) => { data.tableData.forEach((item) => {
if (!filterList.length) return (item.price = value); item.price = el.search;
if (
filterList.includes(item.params1) ||
filterList.includes(item.params2)
) {
item.price = value;
}
}); });
el.search = "";
}, },
}, },
{ {
label: "库存", label: "库存",
params: "inventory", params: "inventory",
keydown: (e, data, value) => { keydown: (e, data, el) => {
if (e.key !== "Enter") return; if (e.key !== "Enter") return;
const filterList = [];
data.tabelList
.filter((item) => item.property)
.forEach((item) => {
filterList.push(...item.property);
});
data.tableData.forEach((item) => { data.tableData.forEach((item) => {
if (!filterList.length) return (item.inventory = value); item.inventory = el.search;
if (
filterList.includes(item.params1) ||
filterList.includes(item.params2)
) {
item.inventory = value;
}
}); });
el.search = "";
}, },
}, },
], ],
filterVisibleEvent: ({ column, visible }) => {
console.log(`${column.field} ${visible ? "打开" : "关闭"}筛选面板`);
},
filterChangeEvent: ({ column }) => {
console.log(`${column.field} 筛选了数据`);
},
}, },
{ {
type: "el-input", type: "el-input",
label: "原价", label: "原价",
prop: "", prop: "originalPrice",
params: "", params: "originalPrice",
disabled: false, disabled: false,
}, },
{ {
type: "el-select", type: "el-select",
label: "成色", label: "成色",
prop: "", prop: "stuffStatus",
params: "", params: "stuffStatus",
disabled: true, disabled: true,
options: [{ label: "888", value: 6 }], options: [{ label: "888", value: 6 }],
}, },
]; ];
row._value.forEach((item) => { row._value.forEach((item) => {
console.log(item, "item");
specification_list.push({ key: item.label, value: item.valueGrop }); specification_list.push({ key: item.label, value: item.valueGrop });
tabelList.push({ tabelList.push({
label: item.label, label: item.label,
params: `params${item.index}`, params: `params${item.index}`,
filters: get_filters(item), filters: get_filters(item),
filterMethod: ({ option, row }) => { property: [],
return row.age === Number(option.data); visible: false,
reset: (item, el) => {
item.tabelList.forEach((oi) => {
if (oi.params == el.params) {
oi.property = [];
}
});
const filterlist = item.tabelList.filter(
(ul) =>
ul.property && Array.isArray(ul.property) && ul.property.length
);
const datalist = item.new_tableData.filter((li) => {
for (let condition of filterlist) {
let key = condition.params;
let values = condition.property;
if (!values.includes(li[key])) {
return false;
}
}
return true;
});
item.tableData = datalist;
el.visible = false;
},
filterMethod: (item, el) => {
const filterlist = item.tabelList.filter(
(ul) =>
ul.property && Array.isArray(ul.property) && ul.property.length
);
const datalist = item.new_tableData.filter((li) => {
for (let condition of filterlist) {
let key = condition.params;
let values = condition.property;
if (!values.includes(li[key])) {
return false;
}
}
return true;
});
item.tableData = datalist;
el.visible = false;
}, },
}); });
}); });
priceList.fixPrice.map((item) => { priceList.fixPrice.map((item) => {
console.log(item, "itemmm");
if (item.type === "edit") { if (item.type === "edit") {
item.specification_list = specification_list; item.specification_list =specification_list;
} else if (item.type === "el-table") { } else if (item.type === "el-table") {
item.tableData = generateCombinations(row._value);
item.tabelList = [...tabelList, ...item.tabelList]; item.tabelList = [...tabelList, ...item.tabelList];
} }
}); });
@ -1105,10 +1133,10 @@ const get_filters = (arr) => {
arr.valueGrop.map((e) => { arr.valueGrop.map((e) => {
filters.push({ label: e.label, value: e.label }); filters.push({ label: e.label, value: e.label });
}); });
console.log(filters, "fsdfsdfsd"); console.log(filters, "arr");
return filters; return filters;
}; };
//
const generateCombinations = (attributeGroups) => { const generateCombinations = (attributeGroups) => {
// //
const generate = (index, current) => { const generate = (index, current) => {
@ -1180,23 +1208,29 @@ onMounted(() => {
font-weight: bold; font-weight: bold;
margin-bottom: 10px; margin-bottom: 10px;
} }
:deep(.el-form-item__label) { :deep(.el-form-item__label) {
color: #000000d9; color: #000000d9;
} }
.loading { .loading {
width: 5px; width: 5px;
} }
:deep(.el-radio-button) { :deep(.el-radio-button) {
margin-right: 10px; margin-right: 10px;
border-radius: 50%; border-radius: 50%;
.el-radio-button__inner { .el-radio-button__inner {
border-radius: 15px; border-radius: 15px;
border: 1px solid #409eff; border: 1px solid #409eff;
} }
} }
.newly_built_goods { .newly_built_goods {
background: #f1f2f5; background: #f1f2f5;
overflow-y: auto; overflow-y: auto;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
@ -1206,26 +1240,33 @@ onMounted(() => {
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
background: #fff; background: #fff;
.goos_type { .goos_type {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
} }
:deep(.el-form-item) { :deep(.el-form-item) {
margin-bottom: 0; margin-bottom: 0;
} }
:deep(.circular) { :deep(.circular) {
display: none; display: none;
} }
} }
.main { .main {
padding: 20px 20px 80px; padding: 20px 20px 80px;
.main-box { .main-box {
padding: 20px; padding: 20px;
background: #fff; background: #fff;
margin-bottom: 20px; margin-bottom: 20px;
.goods_attribute { .goods_attribute {
display: flex; display: flex;
margin-bottom: 10px; margin-bottom: 10px;
.attribute_title { .attribute_title {
display: block; display: block;
min-width: 88px; min-width: 88px;
@ -1233,9 +1274,11 @@ onMounted(() => {
margin-right: 20px; margin-right: 20px;
} }
} }
.select_shops { .select_shops {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.shop, .shop,
.create_shop, .create_shop,
.shop_active { .shop_active {
@ -1247,6 +1290,7 @@ onMounted(() => {
border-radius: 8px; border-radius: 8px;
margin: 5px 10px 5px 0; margin: 5px 10px 5px 0;
cursor: pointer; cursor: pointer;
.hint { .hint {
position: absolute; position: absolute;
top: -10px; top: -10px;
@ -1259,16 +1303,19 @@ onMounted(() => {
box-sizing: border-box; box-sizing: border-box;
} }
} }
.create_shop { .create_shop {
width: 135px; width: 135px;
display: flex; display: flex;
border: 1px dashed #409eff; border: 1px dashed #409eff;
color: #409eff; color: #409eff;
} }
.shop_active { .shop_active {
border: 1px solid #409eff; border: 1px solid #409eff;
} }
} }
.primary_src { .primary_src {
&::after { &::after {
content: "主图"; content: "主图";
@ -1283,6 +1330,7 @@ onMounted(() => {
color: #fff; color: #fff;
} }
} }
.price_list { .price_list {
.create_shop { .create_shop {
width: 155px; width: 155px;
@ -1295,13 +1343,16 @@ onMounted(() => {
margin-right: 10px; margin-right: 10px;
cursor: pointer; cursor: pointer;
} }
:deep(.el-form-item__content) { :deep(.el-form-item__content) {
max-width: 45%; max-width: 45%;
display: block; display: block;
} }
:deep(.el-descriptions__cell) { :deep(.el-descriptions__cell) {
padding-bottom: 0; padding-bottom: 0;
} }
.Tabel { .Tabel {
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
box-shadow: none; box-shadow: none;
@ -1310,6 +1361,7 @@ onMounted(() => {
} }
} }
} }
.bottom { .bottom {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -1321,4 +1373,15 @@ onMounted(() => {
background-color: #fff; background-color: #fff;
} }
} }
.filter_icon {
&:hover {
color: #409efc;
}
&:focus {
outline: none;
}
&:focus-visible {
outline: none;
}
}
</style> </style>