sws
parent
8f95739901
commit
c5e1f40fd2
|
|
@ -2,20 +2,14 @@
|
|||
<!-- 商品分类 -->
|
||||
<div class="container">
|
||||
<div class="flex-row jc-e gap-20 mb-20">
|
||||
<el-select v-model="type" class="search-w" placeholder="请选择">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-select v-model="brand" class="search-w" placeholder="品牌">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-input v-model="search_value" placeholder="请输入搜索内容" class="search-w" @change="handle_search">
|
||||
<template #suffix>
|
||||
<icon name="search" size="16" color="9"></icon>
|
||||
<icon name="search" size="16" color="9" class="c-pointer" @click="handle_search"></icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-table :data="tableData" class="w" :header-cell-style="{ background: '#f7f7f7' }" row-key="id" height="438" fixed @row-click="row_click">
|
||||
<el-table :data="new_table_data" class="w" :header-cell-style="{ background: '#f7f7f7' }" :tree-props="{ children: 'items' }" row-key="id" height="460" fixed @row-click="row_click">
|
||||
<el-table-column label="#" width="120" type="">
|
||||
<template #default="scope">
|
||||
<el-radio v-model="template_selection" :label="scope.$index + ''"> </el-radio>
|
||||
|
|
@ -25,17 +19,22 @@
|
|||
<el-table-column prop="name" label="分类名称" />
|
||||
<el-table-column prop="icon" label="分类图标">
|
||||
<template #default="scope">
|
||||
<el-image :src="scope.row.icon" class="img" />
|
||||
<el-image :src="scope.row.icon" class="img">
|
||||
<template #error>
|
||||
<div class="img">
|
||||
<img :src="error_image" class="w" />
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="mt-10 flex-row jc-e">
|
||||
<el-pagination :current-page="page" :page-size="21" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="get_list" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { urlValueStore, urlValue, pageLinkList } from '@/store';
|
||||
const url_value_store = urlValueStore();
|
||||
const props = defineProps({
|
||||
// 重置
|
||||
reset: {
|
||||
|
|
@ -47,91 +46,86 @@ watch(
|
|||
() => props.reset,
|
||||
() => {
|
||||
template_selection.value = '';
|
||||
init();
|
||||
}
|
||||
);
|
||||
const modelValue = defineModel({ type: Object, default: {} });
|
||||
const tableData: linkData[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: '一级分类',
|
||||
icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
link: 'a',
|
||||
children: [
|
||||
{
|
||||
id: 2,
|
||||
name: '二级分类',
|
||||
icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
link: 'b',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '一级分类',
|
||||
icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
link: 'c',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '一级分类',
|
||||
icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
link: 'd',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '一级分类',
|
||||
icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
link: 'e',
|
||||
},
|
||||
];
|
||||
const table_data = ref<pageLinkList[]>([]);
|
||||
const new_table_data = ref<pageLinkList[]>([]);
|
||||
const search_value = ref('');
|
||||
const handle_search = () => {
|
||||
console.log(search_value.value);
|
||||
const error_image = ref(new URL(`../../../assets/images/empty.png`, import.meta.url).href);
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
const init = () => {
|
||||
search_value.value = '';
|
||||
table_data.value = url_value_store.url_value.goods_category;
|
||||
new_table_data.value = url_value_store.url_value.goods_category;
|
||||
};
|
||||
const type = ref('');
|
||||
const brand = ref('');
|
||||
const options = ref([
|
||||
{ value: '1', label: '一级分类' },
|
||||
{ value: '2', label: '二级分类' },
|
||||
{ value: '3', label: '三级分类' },
|
||||
]);
|
||||
// 筛选
|
||||
const handle_search = () => {
|
||||
// 根据关键词过滤new_table_data数据,如果==父级 显示父级和父级下的所有子级数据，
|
||||
if (search_value.value) {
|
||||
new_table_data.value = filterData(search_value.value, table_data.value || []);
|
||||
} else {
|
||||
new_table_data.value = table_data.value || [];
|
||||
}
|
||||
};
|
||||
|
||||
const filterData = (input: string, data: pageLinkList[]) => {
|
||||
let result = [];
|
||||
// 遍历数组
|
||||
for (let item of data) {
|
||||
// 检查当前项的name是否匹配
|
||||
if (item.name.includes(input)) {
|
||||
result.push(item);
|
||||
} else {
|
||||
if (item.items) {
|
||||
// 否则，检查当前项的data属性中的子项
|
||||
let subResult = item.items.filter((subItem) => subItem.name.includes(input));
|
||||
// 如果找到匹配的子项，将当前项（父级）添加到结果中
|
||||
if (subResult.length > 0) {
|
||||
result.push({ ...item, items: subResult });
|
||||
} else {
|
||||
// 如果二级还没有查到则查询三级
|
||||
let result_child: pageLinkList[] = [];
|
||||
item.items.forEach((child: pageLinkList) => {
|
||||
if (child.items) {
|
||||
let subResult = child.items.filter((subItem) => subItem.name.includes(input));
|
||||
if (subResult.length > 0) {
|
||||
result_child.push({ ...child, items: subResult });
|
||||
}
|
||||
}
|
||||
});
|
||||
if (result_child.length > 0) {
|
||||
result.push({ ...item, items: result_child });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const template_selection = ref('');
|
||||
|
||||
const row_click = (row: any) => {
|
||||
let new_data: linkData[] = [];
|
||||
let new_data: pageLinkList[] = [];
|
||||
// 多级数组转换一级数组
|
||||
const array_conversion = (item: linkData[]) => {
|
||||
const array_conversion = (item: pageLinkList[]) => {
|
||||
item.forEach((item) => {
|
||||
new_data.push(item);
|
||||
if (item.children) {
|
||||
array_conversion(item.children);
|
||||
if (item.items) {
|
||||
array_conversion(item.items);
|
||||
}
|
||||
});
|
||||
return new_data;
|
||||
};
|
||||
const new_table_data = array_conversion(JSON.parse(JSON.stringify(tableData)));
|
||||
template_selection.value = new_table_data.findIndex((item: linkData) => item.id == row.id).toString();
|
||||
const new_table_datas = array_conversion(JSON.parse(JSON.stringify(new_table_data.value)));
|
||||
template_selection.value = new_table_datas.findIndex((item: pageLinkList) => item.id == row.id).toString();
|
||||
modelValue.value = row;
|
||||
};
|
||||
//#region 分页 -----------------------------------------------start
|
||||
// 总页数
|
||||
// const page_total = ref(0);
|
||||
// 当前页
|
||||
const page = ref(1);
|
||||
// 总数量
|
||||
const data_total = ref(0);
|
||||
|
||||
// 查询文件
|
||||
const search_data = ref({
|
||||
page: page.value,
|
||||
type: '',
|
||||
name: search_value.value,
|
||||
});
|
||||
// 查询文件
|
||||
const get_list = () => {
|
||||
console.log('查询接口', search_data);
|
||||
};
|
||||
//#region 分页 -----------------------------------------------end
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<el-scrollbar height="420px">
|
||||
<div v-for="(item, index) in goods_category_data" :key="item.id" class="item flex-row jc-c align-c gap-10 pa-10" :class="one_item_index === index + 1 ? 'active' : ''" @click="goods_item_click(item, 1, index)">
|
||||
<text class="flex-1 flex-width text-line-1">{{ item.name }}</text>
|
||||
<icon v-if="item?.children" name="arrow-right"></icon>
|
||||
<icon v-if="item?.items" name="arrow-right"></icon>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<el-scrollbar height="420px">
|
||||
<div v-for="(item, index) in two_item_data" :key="item.id" class="item flex-row jc-c align-c gap-10 pa-10" :class="two_item_index === index + 1 ? 'active' : ''" @click="goods_item_click(item, 2, index)">
|
||||
<text class="flex-1 flex-width text-line-1">{{ item.name }}</text>
|
||||
<icon v-if="item?.children" name="arrow-right"></icon>
|
||||
<icon v-if="item?.items" name="arrow-right"></icon>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
|
@ -62,6 +62,8 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance, FormRules } from 'element-plus';
|
||||
import { urlValueStore, urlValue, pageLinkList } from '@/store';
|
||||
const url_value_store = urlValueStore();
|
||||
const props = defineProps({
|
||||
status: {
|
||||
type: Boolean,
|
||||
|
|
@ -82,64 +84,49 @@ watch(
|
|||
watch(
|
||||
() => props.reset,
|
||||
() => {
|
||||
reset_data();
|
||||
custom_type_active.value = 0;
|
||||
init();
|
||||
}
|
||||
);
|
||||
const emit = defineEmits(['update:link', 'required', 'type']);
|
||||
interface customType {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
const custom_type = ref<customType[]>([
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
const reset_data = () => {
|
||||
one_item_index.value = 0;
|
||||
one_item_text.value = '';
|
||||
two_item_index.value = 0;
|
||||
two_item_text.value = '';
|
||||
three_item_index.value = 0;
|
||||
three_item_text.value = '';
|
||||
two_item_data.value = [];
|
||||
brand_item_index.value = 0;
|
||||
form.key = '';
|
||||
};
|
||||
|
||||
const brand_data = ref<pageLinkList[]>([]);
|
||||
const init = () => {
|
||||
reset_data();
|
||||
custom_type_active.value = 0;
|
||||
goods_category_data.value = url_value_store.url_value.goods_category;
|
||||
brand_data.value = url_value_store.url_value.brand_list;
|
||||
};
|
||||
const custom_type = [
|
||||
{ id: 0, name: '商品分类' },
|
||||
{ id: 1, name: '品牌' },
|
||||
{ id: 2, name: '关键字' },
|
||||
]);
|
||||
interface baseData {
|
||||
id: number;
|
||||
name: string;
|
||||
children?: baseData[];
|
||||
}
|
||||
const goods_category_data = reactive<baseData[]>([
|
||||
{
|
||||
id: 0,
|
||||
name: '服饰鞋包',
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
name: '服饰',
|
||||
children: [
|
||||
{ id: 1, name: '上衣' },
|
||||
{ id: 2, name: '裤子' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '鞋包',
|
||||
children: [
|
||||
{ id: 1, name: '休闲鞋' },
|
||||
{ id: 2, name: '商务休闲鞋' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{ id: 1, name: '家居生活', children: [{ id: 1, name: '生活用品' }] },
|
||||
{ id: 2, name: '母婴' },
|
||||
]);
|
||||
const brand_data = reactive<baseData[]>([
|
||||
{ id: 1, name: '品牌1' },
|
||||
{ id: 2, name: '品牌2' },
|
||||
]);
|
||||
];
|
||||
const custom_type_active = ref(0);
|
||||
const custom_type_event = (item: any) => {
|
||||
custom_type_active.value = item.id;
|
||||
emit('type', item.id);
|
||||
};
|
||||
//#region 商品分类 -----------------------------------------------start
|
||||
// 商品分类
|
||||
const goods_category_data = ref<pageLinkList[]>([]);
|
||||
const check_data = ref({});
|
||||
const two_item_data = ref<baseData[]>([]);
|
||||
const three_item_data = ref<baseData[]>([]);
|
||||
const two_item_data = ref<pageLinkList[]>([]);
|
||||
const three_item_data = ref<pageLinkList[]>([]);
|
||||
const one_item_index = ref(0);
|
||||
const two_item_index = ref(0);
|
||||
const three_item_index = ref(0);
|
||||
|
|
@ -147,7 +134,7 @@ const one_item_text = ref('');
|
|||
const two_item_text = ref('');
|
||||
const three_item_text = ref('');
|
||||
// 商品项点击事件
|
||||
const goods_item_click = (item: baseData, level: number, index: number) => {
|
||||
const goods_item_click = (item: pageLinkList, level: number, index: number) => {
|
||||
if (level === 1) {
|
||||
one_item_index.value = index + 1;
|
||||
one_item_text.value = item.name;
|
||||
|
|
@ -167,11 +154,11 @@ const goods_item_click = (item: baseData, level: number, index: number) => {
|
|||
three_item_index.value = index + 1;
|
||||
three_item_text.value = item.name;
|
||||
}
|
||||
if (item.children && item.children.length > 0) {
|
||||
if (item.items && item.items.length > 0) {
|
||||
if (level === 1) {
|
||||
two_item_data.value = item.children;
|
||||
two_item_data.value = item.items;
|
||||
} else if (level === 2) {
|
||||
three_item_data.value = item.children;
|
||||
three_item_data.value = item.items;
|
||||
}
|
||||
} else {
|
||||
check_data.value = item;
|
||||
|
|
@ -212,17 +199,6 @@ const on_submit = () => {
|
|||
});
|
||||
};
|
||||
//#endregion 关键字 -----------------------------------------------end
|
||||
const reset_data = () => {
|
||||
one_item_index.value = 0;
|
||||
one_item_text.value = '';
|
||||
two_item_index.value = 0;
|
||||
two_item_text.value = '';
|
||||
three_item_index.value = 0;
|
||||
three_item_text.value = '';
|
||||
two_item_data.value = [];
|
||||
brand_item_index.value = 0;
|
||||
form.key = '';
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { urlValueStore, urlValue, pageLinkList } from '@/store';
|
||||
const url_value_store = urlValueStore();
|
||||
const props = defineProps({
|
||||
// 重置
|
||||
reset: {
|
||||
|
|
@ -46,37 +48,21 @@ const props = defineProps({
|
|||
watch(
|
||||
() => props.reset,
|
||||
() => {
|
||||
template_selection.value = '';
|
||||
init();
|
||||
}
|
||||
);
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
const modelValue = defineModel({ type: Object, default: {} });
|
||||
const tableData: linkData[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: '一级分类',
|
||||
icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
link: 'a',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '一级分类',
|
||||
icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
link: 'c',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '一级分类',
|
||||
icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
link: 'd',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '一级分类',
|
||||
icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
link: 'e',
|
||||
},
|
||||
];
|
||||
const tableData = ref<pageLinkList[]>([]);
|
||||
const search_value = ref('');
|
||||
const init = () => {
|
||||
template_selection.value = '';
|
||||
type.value = '';
|
||||
brand.value = '';
|
||||
get_list();
|
||||
};
|
||||
const handle_search = () => {
|
||||
console.log(search_value.value);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -33,6 +33,11 @@
|
|||
import { urlValueStore, urlValue, pageLinkList } from '@/store';
|
||||
const url_value_store = urlValueStore();
|
||||
const props = defineProps({
|
||||
// 类型
|
||||
type: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
// 重置
|
||||
reset: {
|
||||
type: Boolean,
|
||||
|
|
@ -57,19 +62,19 @@ const init = () => {
|
|||
search_value.value = '';
|
||||
// 过滤url_value_store.url_value.page_link_list中的type为shop的data的数据，只保留data数组
|
||||
base_data.value = url_value_store.url_value.page_link_list.filter((item: any) => {
|
||||
if (item.type == 'shop') {
|
||||
if (item.type == props.type) {
|
||||
return item.data;
|
||||
}
|
||||
});
|
||||
new_base_data.value = base_data.value[0].data;
|
||||
new_base_data.value = base_data.value[0].data || [];
|
||||
};
|
||||
|
||||
const handle_search = () => {
|
||||
// 根据关键词过滤new_base_data数据,如果==父级 显示父级和父级下的所有子级数据，
|
||||
if (search_value.value) {
|
||||
new_base_data.value = filterData(search_value.value, base_data.value[0].data);
|
||||
new_base_data.value = filterData(search_value.value, base_data.value[0].data || []);
|
||||
} else {
|
||||
new_base_data.value = base_data.value[0].data;
|
||||
new_base_data.value = base_data.value[0].data || [];
|
||||
}
|
||||
};
|
||||
const filterData = (input: string, data: pageLinkList[]) => {
|
||||
|
|
@ -80,11 +85,13 @@ const filterData = (input: string, data: pageLinkList[]) => {
|
|||
if (item.name.includes(input)) {
|
||||
result.push(item);
|
||||
} else {
|
||||
// 否则，检查当前项的data属性中的子项
|
||||
let subResult = item.data.filter((subItem) => subItem.name.includes(input));
|
||||
// 如果找到匹配的子项，将当前项（父级）添加到结果中
|
||||
if (subResult.length > 0) {
|
||||
result.push({ ...item, data: subResult });
|
||||
if (item.data) {
|
||||
// 否则，检查当前项的data属性中的子项
|
||||
let subResult = item.data.filter((subItem) => subItem.name.includes(input));
|
||||
// 如果找到匹配的子项，将当前项（父级）添加到结果中
|
||||
if (subResult.length > 0) {
|
||||
result.push({ ...item, data: subResult });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</div>
|
||||
<div class="right-content flex-1">
|
||||
<template v-if="link_select == 'shop' || link_select == 'plugins'">
|
||||
<link-list v-model="link_value" :reset="reset_compontent"></link-list>
|
||||
<link-list :key="link_select" v-model="link_value" :type="link_select" :reset="reset_compontent"></link-list>
|
||||
</template>
|
||||
<template v-else-if="link_select == 'goods-category'">
|
||||
<link-goods-category v-model="link_value" :reset="reset_compontent"></link-goods-category>
|
||||
|
|
@ -30,10 +30,10 @@
|
|||
<link-articles v-model="link_value" :reset="reset_compontent"></link-articles>
|
||||
</template>
|
||||
<template v-else-if="link_select == 'diy' || link_select == 'design' || link_select == 'custom-view'">
|
||||
<link-table v-model="link_value" :reset="reset_compontent"></link-table>
|
||||
<link-table v-model="link_value" :type="link_select" :reset="reset_compontent"></link-table>
|
||||
</template>
|
||||
<template v-else-if="link_select == 'custom'">
|
||||
<link-custom :reset="reset_compontent" :status="component_status" @update:link="custom_link" @required="required_tips"></link-custom>
|
||||
<link-custom :key="link_select" :reset="reset_compontent" :status="component_status" @update:link="custom_link" @required="required_tips"></link-custom>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -74,13 +74,6 @@ const reset_compontent = ref(false);
|
|||
const custom_link_type = ref(props.type);
|
||||
const base_data = ref<any[]>([]);
|
||||
const init_data = ref({});
|
||||
watch(
|
||||
() => dialogVisible.value,
|
||||
(val) => {
|
||||
if (val) {
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => dialogVisible.value,
|
||||
(val) => {
|
||||
|
|
@ -111,7 +104,7 @@ const init = () => {
|
|||
init_data.value = url_value_store.url_value;
|
||||
base_data.value = url_value_store.url_value.page_link_list;
|
||||
if (url_value_store.url_value.page_link_list.length > 0) {
|
||||
link_select.value = url_value_store.url_value.page_link_list[0].type;
|
||||
link_select.value = url_value_store.url_value.page_link_list[0].type || '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -29,10 +29,18 @@ export const urlValueStore = defineStore('urlValue', () => {
|
|||
});
|
||||
|
||||
export interface pageLinkList {
|
||||
id?: string;
|
||||
name: string;
|
||||
type: string;
|
||||
data: pageLinkList[];
|
||||
type?: string;
|
||||
page?: string;
|
||||
data?: pageLinkList[];
|
||||
items?: pageLinkList[];
|
||||
icon?: string;
|
||||
link?: string;
|
||||
lng?: number;
|
||||
lat?: number;
|
||||
hasChildren?: boolean;
|
||||
children?: pageLinkList[];
|
||||
}
|
||||
|
||||
// 分类树结构
|
||||
|
|
|
|||
|
|
@ -174,3 +174,11 @@ div:focus {
|
|||
.el-popover.el-popper {
|
||||
min-width: 5rem;
|
||||
}
|
||||
// 表格表头字体颜色调整
|
||||
// 链接弹窗表格用到 ------ start
|
||||
.el-table {
|
||||
thead {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
// 链接弹窗表格用到 ------ end
|
||||
|
|
|
|||
Loading…
Reference in New Issue