sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

解决冲突

v1.0.0
于肖磊 2024-08-20 17:35:35 +08:00
parent 42b0def0c2 7c37edab3c
commit c907650d65
16 changed files with 428 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/api/url-value.ts
View File

@ -8,6 +8,47 @@ class UrlValueAPI {
method: 'post',
});
}
/** 获取商品列表 */
static getGoodsList(data: any) {
return request({
url: `diyapi/goodslist`,
method: 'post',
data,
});
}
/** 获取文章列表 */
static getArticleList(data: any) {
return request({
url: `diyapi/articlelist`,
method: 'post',
data,
});
}
/** 获取diy列表 */
static getDiyList(data: any) {
return request({
url: `diyapi/diylist`,
method: 'post',
data,
});
}
/** 获取页面设计列表 */
static getDesignList(data: any) {
return request({
url: `diyapi/designlist`,
method: 'post',
data,
});
}
/** 获取自定义列表 */
static getCustomList(data: any) {
return request({
url: `diyapi/customviewlist`,
method: 'post',
data,
});
}
}
export default UrlValueAPI;

8
src/components/base/image-empty/index.vue
View File

@ -1,5 +1,5 @@
<template>
<el-image :src="image?.url || ''" class="flex align-c jc-c w h" @load="on_load">
<el-image :src="is_obj(image) ? image?.url || '' : image" class="flex align-c jc-c w h" @load="on_load">
<template #error>
<div class="image-slot" :style="errorStyle">
<img :src="error_image" :style="errorImgStyle" />
@ -8,6 +8,7 @@
</el-image>
</template>
<script setup lang="ts">
import { is_obj } from '@/utils';
const props = defineProps({
errorImgStyle: {
type: String,
@ -18,7 +19,7 @@ const props = defineProps({
default: () => '',
},
});
const image = defineModel({ type: Object, default: () => {} });
const image = defineModel({ type: [Object, String], default: () => {} });
const error_image = ref(new URL(`../../../assets/images/empty.png`, import.meta.url).href);
const emit = defineEmits(['load']);
const on_load = (e: any) => {
@ -34,5 +35,8 @@ const on_load = (e: any) => {
align-items: center;
justify-content: center;
background-color: #f4fcff;
img {
width: 100%;
}
}
</style>

6
src/components/common/url-value/index.vue
View File

@ -1,8 +1,8 @@
<!-- 上传组件 -->
<!-- 链接组件 -->
<template>
<div class="flex-row align-c gap-10 br-d radius-sm plr-11 url-value-input" @click="dialogVisible = true">
<div class="flex-1 flex-width size-12 text-line-1">
<text v-if="!is_obj_empty(modelValue)">{{ modelValue.name }}</text>
<text v-if="!is_obj_empty(modelValue)">{{ modelValue.name || modelValue.title }}</text>
<text v-else class="cr-9">{{ placeholder }}</text>
</div>
<div class="value-input-icon">
@ -40,7 +40,7 @@ const props = defineProps({
},
});
const modelValue = defineModel({ type: Object, default: {} });
const dialogVisible = defineModel('visibleDialog', { type: Boolean, default: false });
const dialogVisible = defineModel('dialogVisible', { type: Boolean, default: false });
//#endregion 链接清空-------------------------------------------------start
const clear_model_value = () => {
modelValue.value = {};

115
src/components/common/url-value/link-articles.vue
View File

@ -2,43 +2,45 @@
<!-- 商品分类 -->
<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 v-model="category_ids" class="search-w" placeholder="请选择" clearable @change="handle_search">
<el-option v-for="item in article_category_list" :key="item.id" :label="item.name" :value="item.id" />
</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-column label="#" width="120" type="">
<el-table-column label="#" width="40" type="">
<template #default="scope">
<el-radio v-model="template_selection" :label="scope.$index + ''">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column prop="id" label="ID" width="180" type="" />
<el-table-column prop="icon" label="文章图片" width="130">
<el-table-column prop="id" label="ID" width="80" type="" />
<el-table-column prop="cover" label="文章">
<template #default="scope">
<el-image :src="scope.row.icon" class="img">
<template #error>
<div class="bg-f5 flex-row jc-c align-c radius h w">
<icon name="error-img" size="14" color="9"></icon>
</div>
</template>
</el-image>
<div class="flex-row align-c gap-10">
<image-empty v-model="scope.row.cover" class="img"></image-empty>
<div class="flex-1">{{ scope.row.title }}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="文章名称" />
<template #empty>
<no-data></no-data>
</template>
</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" />
<el-pagination :current-page="page" :page-size="page_size" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="get_list" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import UrlValueAPI from '@/api/url-value';
import { urlValueStore, urlValue, pageLinkList } from '@/store';
const url_value_store = urlValueStore();
const props = defineProps({
// 重置
reset: {
@ -49,70 +51,59 @@ 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 handle_search = () => {
console.log(search_value.value);
const init = () => {
template_selection.value = '';
category_ids.value = '';
search_value.value = '';
article_category_list.value = url_value_store.url_value.article_category_list;
get_list(1);
};
const type = ref('');
const options = ref([
{ value: '1', label: '一级分类' },
{ value: '2', label: '二级分类' },
{ value: '3', label: '三级分类' },
]);
const handle_search = () => {
get_list(1);
};
const category_ids = ref('');
interface articleCategory {
id: string;
name: string;
url: string;
}
const article_category_list = ref<articleCategory[]>([]);
const template_selection = ref('');
const row_click = (row: any) => {
const new_table_data = JSON.parse(JSON.stringify(tableData));
const new_table_data = JSON.parse(JSON.stringify(tableData.value));
template_selection.value = new_table_data.findIndex((item: linkData) => item.id == row.id).toString();
modelValue.value = row;
};
//#region 分页 -----------------------------------------------start
// 总页数
// const page_total = ref(0);
// 当前页
const page = ref(1);
// 每页数量
const page_size = ref(10);
// 总数量
const data_total = ref(0);
// 查询文件
const search_data = ref({
page: page.value,
type: '',
name: search_value.value,
});
// 查询文件
const get_list = () => {
console.log('查询接口', search_data);
const get_list = (new_page: number) => {
let new_data = {
page: new_page,
keywords: search_value.value,
category_ids: category_ids.value,
page_size: page_size.value,
};
UrlValueAPI.getArticleList(new_data).then((res: any) => {
tableData.value = res.data.data_list;
data_total.value = res.data.data_total;
page.value = res.data.page;
});
};
//#region 分页 -----------------------------------------------end
</script>

7
src/components/common/url-value/link-custom.vue
View File

@ -48,6 +48,7 @@
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus';
import { pageLinkList } from '@/store';
const props = defineProps({
status: {
type: Boolean,
@ -128,12 +129,12 @@ const address = computed(() => {
return { trigger: 'change', message: '详细地址不能为空', required: custom_type_active.value == 3 };
});
const ruleFormRef = ref<FormInstance>();
const emit = defineEmits(['update:link', 'required']);
const emit = defineEmits(['update:link']);
const on_submit = () => {
if (!ruleFormRef.value) return;
ruleFormRef.value.validate((valid: boolean) => {
if (valid) {
let new_value: linkData = {
let new_value: pageLinkList = {
name: '',
link: '',
};
@ -161,8 +162,6 @@ const on_submit = () => {
};
}
emit('update:link', new_value);
} else {
emit('required');
}
});
};

152
src/components/common/url-value/link-goods-category.vue
View File

@ -2,40 +2,36 @@
<!-- 商品分类 -->
<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 + ''">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column prop="id" label="ID" width="180" type="" />
<el-table-column prop="name" label="分类名称" />
<el-table-column prop="name" label="分类名称"></el-table-column>
<el-table-column prop="icon" label="分类图标">
<template #default="scope">
<el-image :src="scope.row.icon" class="img" />
<image-empty v-model="scope.row.icon" class="img"></image-empty>
</template>
</el-table-column>
<template #empty>
<no-data></no-data>
</template>
</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 +43,85 @@ 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);
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 {

104
src/components/common/url-value/link-goods-search.vue
View File

@ -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[]>([
const emit = defineEmits(['update:link', 'type']);
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;
@ -206,23 +193,10 @@ const on_submit = () => {
link: form.key,
};
emit('update:link', new_value, 2);
} else {
emit('required');
}
});
};
//#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 {

127
src/components/common/url-value/link-goods.vue
View File

@ -2,40 +2,48 @@
<!-- 商品 -->
<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-cascader v-model="category_ids" :options="category_list" :props="cascader_config" placeholder="请选择" :show-all-levels="false" clearable @change="cascader_change" />
<el-select v-model="brand_ids" class="search-w" placeholder="品牌" clearable @change="handle_search">
<el-option v-for="item in brand_list" :key="item.id" :label="item.name" :value="item.id" />
</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-column label="#" width="120" type="">
<el-table-column label="#" width="40" type="">
<template #default="scope">
<el-radio v-model="template_selection" :label="scope.$index + ''">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column prop="id" label="ID" width="180" type="" />
<el-table-column prop="icon" label="商品图片">
<el-table-column prop="id" label="ID" width="80" type="" />
<el-table-column prop="images" label="商品">
<template #default="scope">
<el-image :src="scope.row.icon" class="img" />
<div class="flex-row align-c gap-10">
<image-empty v-model="scope.row.images" class="img"></image-empty>
<div class="flex-1">{{ scope.row.title }}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="分类名称" />
<el-table-column prop="category_text" width="100" label="分类名称" />
<el-table-column prop="brand_name" width="100" label="品牌名称" />
<template #empty>
<no-data></no-data>
</template>
</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" />
<el-pagination :current-page="page" :page-size="page_size" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="get_list" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import UrlValueAPI from '@/api/url-value';
import { urlValueStore, urlValue, pageLinkList } from '@/store';
const url_value_store = urlValueStore();
const props = defineProps({
// 重置
reset: {
@ -46,72 +54,71 @@ 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 handle_search = () => {
console.log(search_value.value);
const cascader_config = {
value: 'id',
label: 'name',
children: 'items',
};
const type = ref('');
const brand = ref('');
const options = ref([
{ value: '1', label: '一级分类' },
{ value: '2', label: '二级分类' },
{ value: '3', label: '三级分类' },
]);
const init = () => {
template_selection.value = '';
category_ids.value = [];
brand_ids.value = '';
search_value.value = '';
category_list.value = url_value_store.url_value.goods_category;
brand_list.value = url_value_store.url_value.brand_list;
get_list(1);
};
const handle_search = () => {
get_list(1);
};
const cascader_change = (val: any) => {
// 根据获取的val从data中获取label
category_ids.value = val ? val : [];
get_list(1);
};
const category_ids = ref([]);
const brand_ids = ref('');
const category_list = ref<pageLinkList[]>([]);
const brand_list = ref<any[]>([]);
const emit = defineEmits(['update:link']);
const template_selection = ref('');
const row_click = (row: any) => {
const new_table_data = JSON.parse(JSON.stringify(tableData));
template_selection.value = new_table_data.findIndex((item: linkData) => item.id == row.id).toString();
const new_table_data = JSON.parse(JSON.stringify(tableData.value));
template_selection.value = new_table_data.findIndex((item: pageLinkList) => item.id == row.id).toString();
modelValue.value = row;
};
//#region 分页 -----------------------------------------------start
// 总页数
// const page_total = ref(0);
// 当前页
const page = ref(1);
// 每页数量
const page_size = ref(30);
// 总数量
const data_total = ref(0);
// 查询文件
const search_data = ref({
page: page.value,
type: '',
name: search_value.value,
});
// 查询文件
const get_list = () => {
console.log('查询接口', search_data);
const get_list = (new_page: number) => {
let new_data = {
page: new_page,
keywords: search_value.value,
brand_ids: brand_ids.value,
page_size: page_size.value,
category_ids: category_ids.value.length > 0 ? category_ids.value[category_ids.value.length - 1] : '',
};
UrlValueAPI.getGoodsList(new_data).then((res: any) => {
tableData.value = res.data.data_list;
data_total.value = res.data.data_total;
page.value = res.data.page;
});
};
//#region 分页 -----------------------------------------------end
</script>

25
src/components/common/url-value/link-list.vue
View File

@ -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 });
}
}
}
}

91
src/components/common/url-value/link-table.vue
View File

@ -4,7 +4,7 @@
<div class="flex-row jc-e gap-20 mb-20">
<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>
@ -18,15 +18,24 @@
<el-table-column prop="id" label="ID" width="180" type="" />
<el-table-column prop="name" label="页面名称" />
<el-table-column prop="link" label="页面链接" />
<template #empty>
<no-data></no-data>
</template>
</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" />
<el-pagination :current-page="page" :page-size="page_size" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="get_list" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import UrlValueAPI from '@/api/url-value';
import { pageLinkList } from '@/store';
const props = defineProps({
type: {
type: String,
default: () => '',
},
// 重置
reset: {
type: Boolean,
@ -36,61 +45,65 @@ const props = defineProps({
watch(
() => props.reset,
() => {
template_selection.value = '';
init();
}
);
onMounted(() => {
init();
});
const modelValue = defineModel({ type: Object, default: {} });
const tableData: linkData[] = [
{
id: 1,
name: '一级分类',
link: 'a',
},
{
id: 3,
name: '一级分类',
link: 'c',
},
{
id: 4,
name: '一级分类',
link: 'd',
},
{
id: 5,
name: '一级分类',
link: 'e',
},
];
const tableData = ref<pageLinkList[]>([]);
const search_value = ref('');
const init = () => {
template_selection.value = '';
search_value.value = '';
get_list(1);
};
const handle_search = () => {
console.log(search_value.value);
get_list(1);
};
const emit = defineEmits(['update:link']);
const template_selection = ref('');
const row_click = (row: any) => {
const new_table_data = JSON.parse(JSON.stringify(tableData));
template_selection.value = new_table_data.findIndex((item: linkData) => item.id == row.id).toString();
const new_table_data = JSON.parse(JSON.stringify(tableData.value));
template_selection.value = new_table_data.findIndex((item: pageLinkList) => item.id == row.id).toString();
modelValue.value = row;
};
//#region 分页 -----------------------------------------------start
// 总页数
// const page_total = ref(0);
// 当前页
const page = ref(1);
// 每页数量
const page_size = ref(30);
// 总数量
const data_total = ref(0);
// 查询文件
const search_data = ref({
page: page.value,
type: '',
name: search_value.value,
});
// 查询文件
const get_list = () => {
console.log('查询接口', search_data);
const get_list = (new_page: number) => {
const new_data = {
page: new_page,
page_size: page_size.value,
keywords: search_value.value,
};
if (props.type == 'diy') {
UrlValueAPI.getDiyList(new_data).then((res: any) => {
tableData.value = res.data.data_list;
data_total.value = res.data.data_total;
page.value = res.data.page;
});
} else if (props.type == 'design') {
UrlValueAPI.getDesignList(new_data).then((res: any) => {
tableData.value = res.data.data_list;
data_total.value = res.data.data_total;
page.value = res.data.page;
});
} else if (props.type == 'custom-view') {
UrlValueAPI.getCustomList(new_data).then((res: any) => {
tableData.value = res.data.data_list;
data_total.value = res.data.data_total;
page.value = res.data.page;
});
}
};
//#region 分页 -----------------------------------------------end
</script>

41
src/components/common/url-value/url-value-dialog.vue
View File

@ -15,25 +15,25 @@
</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>
</template>
<template v-else-if="link_select == 'goods-search'">
<link-goods-search :reset="reset_compontent" :status="component_status" @update:link="goods_category_link" @type="goods_category_type_change" @required="required_tips"></link-goods-search>
<link-goods-search :reset="reset_compontent" :status="component_status" @update:link="goods_category_link" @type="goods_category_type_change"></link-goods-search>
</template>
<template v-else-if="link_select == 'goods'">
<link-goods v-model="link_value" :reset="reset_compontent"></link-goods>
</template>
<template v-else-if="link_select == 'articles'">
<template v-else-if="link_select == 'article'">
<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 :key="link_select" 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>
<template v-else-if="link_select == 'custom-url'">
<link-custom :reset="reset_compontent" :status="component_status" @update:link="custom_link"></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) => {
@ -100,8 +93,13 @@ const init = () => {
init_data.value = res.data;
base_data.value = res.data.page_link_list;
if (res.data.page_link_list.length > 0) {
link_select.value = res.data.page_link_list[0].type;
if (props.type.length == 0) {
link_select.value = res.data.page_link_list[0].type;
} else {
link_select.value = props.type[0];
}
}
console.log(link_select.value);
url_value_store.set_url_value(res.data);
})
.catch(() => {
@ -111,7 +109,11 @@ 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;
if (props.type.length == 0) {
link_select.value = url_value_store.url_value.page_link_list[0].type || '';
} else {
link_select.value = props.type[0];
}
}
}
};
@ -144,13 +146,6 @@ const custom_link = (data: object) => {
modelValue.value = data;
close_event();
};
// 错误回调
const required_tips = () => {
ElMessage({
type: 'warning',
message: '必填项不能为空',
});
};
//#endregion 子组件回调 -----------------------------------------------end
//#region 链接确认回调 -----------------------------------------------start
@ -164,7 +159,7 @@ const close_event = () => {
// 确认回调
const confirm_event = () => {
// 判断是否是自定义页面和商品查询
if (link_select.value == 'custom' || (link_select.value == 'goods-search' && goods_category_type.value == 2)) {
if (link_select.value == 'custom-url' || (link_select.value == 'goods-search' && goods_category_type.value == 2)) {
component_status.value = !component_status.value;
} else {
if (is_obj_empty(link_value.value)) {

25
src/components/model-article-tabs/model-article-tabs-content.vue
View File

@ -40,16 +40,14 @@
<drag :data="row.article_list" :space-col="20" @remove="article_list_remove" @on-sort="article_list_sort">
<template #default="scoped">
<upload v-model="scoped.row.new_url" :limit="1" size="40" styles="2"></upload>
<el-image :src="scoped.row.url" fit="contain" class="img">
<el-image :src="scoped.row.link.cover" fit="contain" class="img">
<template #error>
<div class="bg-f5 flex-row jc-c align-c radius h w">
<icon name="error-img" size="16" color="9"></icon>
</div>
</template>
</el-image>
<div class="flex-1 flex-width">
<url-value v-model="scoped.row.link"></url-value>
</div>
<div class="flex-1 flex-width text-line-2 size-12 self-s">{{ scoped.row.link.title }}</div>
</template>
</drag>
<el-button class="mtb-20 w" @click="article_add(index)">+添加</el-button>
@ -62,7 +60,7 @@
</el-select>
</el-form-item>
<el-form-item label="显示数量">
<el-input v-model="row.number" placeholder="请输入显示数量" clearable />
<el-input v-model="row.number" type="number" placeholder="请输入显示数量" clearable />
</el-form-item>
<el-form-item label="排序类型">
<el-radio-group v-model="row.sort">
@ -94,6 +92,7 @@
</el-form-item>
</card-container>
</el-form>
<url-value-dialog v-model:dialog-visible="urlValueDialogVisible" :type="['article']" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</div>
</template>
<script setup lang="ts">
@ -141,6 +140,8 @@ const base_list = reactive({
{ name: '浏览量', value: '1' },
],
});
// 开启关闭链接
const urlValueDialogVisible = ref(false);
const active_index = ref(0);
const tabs_list_click = (item: any, index: number) => {
active_index.value = index;
@ -158,7 +159,7 @@ const tabs_add = () => {
id: get_math(),
title: '',
desc: '',
article_check: '1',
article_check: '0',
article_type: [],
number: 4,
sort: '0',
@ -176,13 +177,19 @@ const article_list_remove = (index: number) => {
const article_list_sort = (item: any) => {
// emit('update:value', item);
};
const article_index = ref(0);
const article_add = (index: number) => {
console.log(index);
form.tabs_list[index].article_list.push({
urlValueDialogVisible.value = true;
article_index.value = index;
};
const url_value_dialog_call_back = (item: any) => {
console.log(item);
form.tabs_list[article_index.value].article_list.push({
id: get_math(),
src: 'carousel',
new_url: [],
link: {},
link: item,
});
};
</script>

12
src/layout/components/main/default/article-tabs.ts
View File

@ -58,12 +58,12 @@ const defaultArticleTabs: DefaultArticleTabs = {
tabs_top_up: true,
article_style: '0',
tabs_list: [
{ id: '1', title: '热门推荐', desc: '简介', article_check: '1', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
{ id: '2', title: '测试一', desc: '简介', article_check: '1', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
{ id: '3', title: '测试二', desc: '简介', article_check: '1', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
{ id: '4', title: '测试三', desc: '简介', article_check: '1', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
{ id: '5', title: '测试四', desc: '简介', article_check: '1', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
{ id: '6', title: '测试五', desc: '简介', article_check: '1', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
{ id: '1', title: '热门推荐', desc: '简介', article_check: '0', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
{ id: '2', title: '测试一', desc: '简介', article_check: '0', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
{ id: '3', title: '测试二', desc: '简介', article_check: '0', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
{ id: '4', title: '测试三', desc: '简介', article_check: '0', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
{ id: '5', title: '测试四', desc: '简介', article_check: '0', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
{ id: '6', title: '测试五', desc: '简介', article_check: '0', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
],
is_show: ['0', '1'],
},

12
src/store/modules/url-value.ts
View File

@ -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[];
}
// 分类树结构

8
src/styles/index.scss
View File

@ -174,3 +174,11 @@ div:focus {
.el-popover.el-popper {
min-width: 5rem;
}
// 表格表头字体颜色调整
// 链接弹窗表格用到 ------ start
.el-table {
thead {
color: #333;
}
}
// 链接弹窗表格用到 ------ end

19
src/utils/index.ts
View File

@ -12,6 +12,25 @@ import { isEmpty } from 'lodash';
export function is_obj_empty(obj: object): boolean {
return Object.keys(obj).length === 0;
}
/**
* 检查给定的参数是否为对象
*
* 此函数用于精确地验证一个变量是否为对象类型它通过以下步骤实现：
* 1. 特殊处理 `null` 值，因为 `null` 在 JavaScript 中被当作对象处理，但实质上它不是
* 2. 使用 `typeof` 操作符初步判断变量是否为对象
* 3. 使用 `Object.prototype.toString.call(obj)` 方法精确判断变量是否为普通的对象
*
* @param obj 未知类型的参数，待检查是否为对象
* @returns 如果参数是对象，则返回 true；否则返回 false
*/
export function is_obj(obj: unknown): boolean {
// 特殊处理 null值，因为 typeof null 返回 "object"，但 null 并不是我们要检查的对象
if (obj === null) return false;
// 使用 typeof 排除非对象类型
if (typeof obj !== 'object') return false;
// 确认是普通对象
return Object.prototype.toString.call(obj) === '[object Object]';
}
/**
* 渐变色的方法