表格筛选

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 = {
maskData: maskData,
@ -467,7 +479,8 @@ let commont = {
compression: compression,
isObject: isObject,
isArray: isArray,
initOss: initOss
initOss: initOss,
deepClone: deepClone
}

View File

@ -209,6 +209,10 @@ const submit_specification = (formEl) => {
});
};
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);
specificationClose();
};

View File

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