修改显示逻辑

v1.0.0
于肖磊 2024-09-14 15:32:37 +08:00
parent ed35ed11e3
commit 9adeac21a3
4 changed files with 31 additions and 20 deletions

View File

@ -2,11 +2,18 @@
<VueDraggable v-model="from" :animation="500" target=".sort-target" handle=".icon-drag" :scroll="true" :on-sort="on_sort">
<TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col gap-x-20">
<li v-for="(item, index) in from" :key="item.id" :class="className" class="flex gap-y-16 re" @click="on_click(item, index)">
<el-icon class="iconfont icon-drag size-16 cursor-move" />
<template v-if="!props.isNotCloseIndex.includes(index)">
<el-icon class="iconfont icon-drag size-16 cursor-move" />
</template>
<template v-else>
<el-icon class="iconfont icon-drag size-16 cursor-move" />
</template>
<slot :row="item" :index="index" />
<el-icon v-if="isShowEdit" class="iconfont icon-commodity-edit size-16 cr-primary do-not-trigger two-click" @click="edit(index)" />
<el-icon v-if="type == 'line'" class="iconfont icon-del-o size-16 do-not-trigger" @click="remove(index)" />
<el-icon v-if="type == 'card'" class="iconfont icon-close-o size-16 abs cr-c top-de-5 right-de-5" @click="remove(index)" />
<template v-if="!props.isNotCloseIndex.includes(index)">
<el-icon v-if="type == 'line'" class="iconfont icon-del-o size-16 do-not-trigger" @click="remove(index)" />
<el-icon v-if="type == 'card'" class="iconfont icon-close-o size-16 abs cr-c top-de-5 right-de-5" @click="remove(index)" />
</template>
</li>
</TransitionGroup>
</VueDraggable>
@ -22,11 +29,13 @@ interface Props {
spaceCol?: number; //
iconPosition?: string; // top/bottom/center
isShowEdit?: boolean;
isNotCloseIndex?: number[];
}
const props = withDefaults(defineProps<Props>(), {
type: () => 'line',
isShowEdit: false,
spaceCol: () => 5,
isNotCloseIndex: () => [],
iconPosition: 'center',
});
const className = ref('');

View File

@ -17,26 +17,28 @@
<div class="divider-line"></div>
<card-container>
<div class="mb-12">选项卡设置</div>
<drag :data="form.tabs_list" type="card" :space-col="25" @remove="remove" @on-sort="on_sort">
<drag :data="form.tabs_list" type="card" :space-col="25" :is-not-close-index="[0]" @remove="remove" @on-sort="on_sort">
<template #default="scoped">
<div class="flex-col align-c jc-s gap-20 flex-1 w">
<el-form-item label="显示文字" class="w mb-0">
<el-input v-model="scoped.row.title" placeholder="请输入标题文字" clearable />
</el-form-item>
<el-form-item label="数据类型" class="w mb-0">
<el-radio-group v-model="scoped.row.data_type">
<el-radio value="0">微页面</el-radio>
<el-radio value="1">选择分类</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="scoped.row.data_type == '0' ? '微页面' : '商品分类'" class="w mb-0">
<template v-if="scoped.row.data_type == '0'">
<url-value v-model="scoped.row.micro_page_list"></url-value>
</template>
<template v-else>
<url-value v-model="scoped.row.classify" :type="['goods-category']"></url-value>
</template>
</el-form-item>
<template v-if="scoped.index != 0">
<el-form-item label="数据类型" class="w mb-0">
<el-radio-group v-model="scoped.row.data_type">
<el-radio value="0">微页面</el-radio>
<el-radio value="1">选择分类</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="scoped.row.data_type == '0' ? '微页面' : '商品分类'" class="w mb-0">
<template v-if="scoped.row.data_type == '0'">
<url-value v-model="scoped.row.micro_page_list"></url-value>
</template>
<template v-else>
<url-value v-model="scoped.row.classify" :type="['goods-category']"></url-value>
</template>
</el-form-item>
</template>
</div>
</template>
</drag>

View File

@ -34,7 +34,7 @@ const defaultTabs: defaultTabs = {
tabs_theme: '0',
tabs_top_up: '1',
tabs_list: [
{ id: get_math(), title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
],

View File

@ -206,7 +206,7 @@ const url_computer = (name: string) => {
const show_model_border = ref(true);
// tabs
const draggable_click = (item: componentsData) => {
if (item.key == 'tabs' && isEmpty(tabs_data.value.length)) {
if (item.key == 'tabs' && isEmpty(tabs_data.value)) {
// tabs
tabs_data.value.push({
name: item.name,