导航组新增分类导入
于肖磊
parent
c4eeec910d
commit
2838ee89d9
|
|
@ -0,0 +1,109 @@
|
|||
<template>
|
||||
<el-dialog v-model="dialogVisible" class="radius-lg" width="1168" draggable append-to-body :close-on-click-modal="false" @close="close_event">
|
||||
<template #header>
|
||||
<div class="title center re">
|
||||
<div class="tc size-16 fw">商品分类</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="container">
|
||||
<div class="flex-row jc-e gap-20 mb-20">
|
||||
<el-input v-model="search_value" placeholder="请输入搜索内容" class="search-w" @input="handle_search">
|
||||
<template #suffix>
|
||||
<icon name="search" size="16" color="9" class="c-pointer" @click="handle_search"></icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-table ref="multipleTableRef" v-loading="loading" :data="table_data" class="w" :header-cell-style="{ background: '#f7f7f7' }" row-key="id" height="438" fixed @selection-change="selection_change">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="id" label="ID" type="" />
|
||||
<el-table-column prop="name" label="分类名称"></el-table-column>
|
||||
<el-table-column prop="image" label="分类图标">
|
||||
<template #default="scope">
|
||||
<image-empty v-if="scope.row.image" v-model="scope.row.image" class="img"></image-empty>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<no-data></no-data>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button class="plr-28 ptb-10" @click="close_event">取消</el-button>
|
||||
<el-button class="plr-28 ptb-10" type="primary" :disabled="select_all.length <= 0" @click="confirm_event">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { isEmpty } from 'lodash';
|
||||
import { commonStore } from '@/store';
|
||||
import { ElTable } from 'element-plus';
|
||||
const common_store = commonStore();
|
||||
const dialogVisible = defineModel('dialogVisible', { type: Boolean, default: false });
|
||||
const search_value = ref('');
|
||||
interface categoryList extends pageLinkList {
|
||||
image: string;
|
||||
}
|
||||
const table_data = ref<categoryList[]>([]);
|
||||
const loading = ref(false);
|
||||
// 使用 map 方法来遍历数组并返回新的数组
|
||||
const goods_category_list: categoryList[] = common_store.common.goods_category.map(item => {
|
||||
if (!isEmpty(item.realistic_images)) {
|
||||
return { ...item, image: item.realistic_images };
|
||||
} else {
|
||||
return { ...item, image: item.icon };
|
||||
}
|
||||
});
|
||||
onMounted(() => {
|
||||
search_value.value = '';
|
||||
table_data.value = goods_category_list;
|
||||
});
|
||||
const handle_search = () => {
|
||||
loading.value = true;
|
||||
// 从分类中取出对应的数据
|
||||
const list = goods_category_list.filter(item => item.name?.includes(search_value.value));
|
||||
// 赋值给列表数据
|
||||
table_data.value = list;
|
||||
loading.value = false;
|
||||
};
|
||||
const select_all = ref<categoryList[]>([])
|
||||
const selection_change = (list: categoryList[]) => {
|
||||
select_all.value = list;
|
||||
}
|
||||
const close_event = () => {
|
||||
clear_search();
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
const emit = defineEmits(['confirm_event']);
|
||||
const confirm_event = () => {
|
||||
const data_list = select_all.value;
|
||||
if (!isEmpty(data_list)) {
|
||||
emit('confirm_event', data_list);
|
||||
clear_search();
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
};
|
||||
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
|
||||
const clear_search = () => {
|
||||
select_all.value = [];
|
||||
multipleTableRef.value!.clearSelection();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 2rem;
|
||||
.search-w {
|
||||
width: 22.2rem;
|
||||
}
|
||||
}
|
||||
.img {
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<div class="mb-12 flex-row gap-10 jc-sb">
|
||||
<div>导航内容</div>
|
||||
<div class="flex-row gap-20 align-c">
|
||||
<div v-if="config.sync_bool" class="cr-primary c-pointer" @click="sync_sys_event">同步到系统</div>
|
||||
<div v-if="!config.sync_bool" class="cr-primary c-pointer" @click="sync_sys_event">同步到系统</div>
|
||||
<div class="cr-primary c-pointer" @click="reset_event">恢复默认</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
<card-container>
|
||||
<div class="mb-12">内容设置</div>
|
||||
<div class="mb-12 flex-row align-c jc-sb">内容设置<span class="classify-style" @click="classify_add">从分类添加</span></div>
|
||||
<div class="tips mt-10 mb-20 size-12">最多添加{{ form.nav_content_list.length }}张图片，建议尺寸90*90px</div>
|
||||
<drag :data="form.nav_content_list" type="card" :space-col="27" @remove="remove" @on-sort="on_sort">
|
||||
<template #default="scoped">
|
||||
|
|
@ -54,10 +54,12 @@
|
|||
<el-button class="mt-20 mb-20 w" @click="add">+添加</el-button>
|
||||
</card-container>
|
||||
</el-form>
|
||||
<category-dialog v-model:dialog-visible="dialogVisible" @confirm_event="confirm_event"></category-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { get_math } from "@/utils";
|
||||
import { isEmpty } from "lodash";
|
||||
|
||||
interface Props {
|
||||
value: nav_group_content;
|
||||
|
|
@ -116,6 +118,31 @@ const remove = (index: number) => {
|
|||
const on_sort = (new_list: nav_group[]) => {
|
||||
form.value.nav_content_list = new_list;
|
||||
}
|
||||
//#region 弹窗相关
|
||||
const dialogVisible = ref(false);
|
||||
const classify_add = () => {
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
interface categoryList extends pageLinkList {
|
||||
image: string;
|
||||
}
|
||||
const confirm_event = (list: categoryList[]) => {
|
||||
list.forEach(item => {
|
||||
// 如果图片为空，则为空数组
|
||||
const img = !isEmpty(item.image) ? [{ id: Number(item.id), url: item.image, original: item.name, title: item.name, ext: '.png', type: 'img' }] : [];
|
||||
form.value.nav_content_list.push({
|
||||
id: get_math(),
|
||||
img: img,
|
||||
title: item?.name || '',
|
||||
link: {
|
||||
id: Number(item.id),
|
||||
name: item.name,
|
||||
page: `/pages/goods-search/goods-search?category_id=${ item.id }`
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
//#endregion
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.size-12.cr-9.mt-10) {
|
||||
|
|
@ -124,4 +151,8 @@ const on_sort = (new_list: nav_group[]) => {
|
|||
.tips {
|
||||
color: $cr-info-dark;
|
||||
}
|
||||
.classify-style {
|
||||
cursor: pointer;
|
||||
color: $cr-main;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const props = defineProps({
|
|||
const radio = ref('1'); // 创建一个响应式的数字变量，初始值为0
|
||||
const footer_config = {
|
||||
// 是否开启同步
|
||||
sync_bool: false,
|
||||
sync_bool: true,
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue