表格筛选
This commit is contained in:
qiaopengfei
parent
74bc0df089
commit
a266434c05
|
|
@ -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
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue