You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
3.1 KiB
Vue
133 lines
3.1 KiB
Vue
<template>
|
|
<view class="charts-box bg-white content">
|
|
<view v-show="true" class="flex overflow-auto flex-wrap">
|
|
<div class="grid grid-cols-3 gap-4 p-4 w-full">
|
|
|
|
<wd-button @click="utils.toUrl('/mall/cat/edit?edit=' + JSON.stringify({}))" style="width: 100%;"
|
|
class="bg-[#f0f0f0] w-full flex-1" :round="false">
|
|
新增
|
|
</wd-button>
|
|
<template v-if="classifyList.length">
|
|
<wd-button @click="showActions(cat)" style="width: 100%;" v-for="cat of classifyList"
|
|
class="bg-[#f0f0f0] w-full flex-1" type="info" :round="false">
|
|
{{ cat.name }}
|
|
</wd-button>
|
|
</template>
|
|
|
|
|
|
</div>
|
|
</view>
|
|
|
|
<wd-action-sheet v-model="show" :actions="actions" @close="close" @select="select" />
|
|
<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import utils from '@/utils/utils.js'
|
|
import goods from '@/api/mall/goods.js'
|
|
import kevyloading from "@/components/kevy-loading/kevy-loading";
|
|
/** @type {Ref<boolean>} */
|
|
const loading = ref(false);
|
|
|
|
import {
|
|
onShow,
|
|
} from "@dcloudio/uni-app";
|
|
|
|
const model = ref({})
|
|
const baseForm = ref({})
|
|
|
|
const show = ref(false)
|
|
const actions = ref([
|
|
{
|
|
name: '编辑分类'
|
|
},
|
|
{
|
|
name: '新增子项'
|
|
}
|
|
])
|
|
|
|
const opt = ref("编辑分类")
|
|
|
|
function showActions(row) {
|
|
show.value = true
|
|
model.value = row
|
|
console.log(row);
|
|
}
|
|
|
|
function close() {
|
|
show.value = false
|
|
}
|
|
|
|
function select({ item, index }) {
|
|
opt.value = item.name
|
|
|
|
if (opt.value == '编辑分类') {
|
|
// message.alert({
|
|
// title: "编辑分类"
|
|
// })
|
|
|
|
baseForm.value = model.value
|
|
utils.toUrl('/mall/cat/edit?edit=' + JSON.stringify(baseForm.value))
|
|
}
|
|
|
|
if (opt.value == '新增子项') {
|
|
|
|
console.log(model.value);
|
|
|
|
if (model.value.parentIds.length == 3) {
|
|
return uni.showToast({
|
|
title: '三级分类不可新增子级',
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
baseForm.value = model.value
|
|
utils.toUrl('/mall/cat/edit?edit=' + JSON.stringify({}) + "&parent=" + JSON.stringify(baseForm.value))
|
|
}
|
|
|
|
// baseForm.value = model.value
|
|
// utils.toUrl('/mall/cat/edit?edit=' + JSON.stringify(baseForm.value))
|
|
}
|
|
|
|
}
|
|
|
|
const classifyList = ref([])
|
|
const getClassify = () => {
|
|
loading.value = true
|
|
function flattenCategories(categories, parentIds = []) {
|
|
let flatCategories = [];
|
|
|
|
for (const category of categories) {
|
|
const categoryWithParents = {
|
|
...category,
|
|
parentIds: [...parentIds, category.id],
|
|
};
|
|
|
|
flatCategories.push(categoryWithParents);
|
|
|
|
if (category.children && category.children.length > 0) {
|
|
flatCategories = flatCategories.concat(flattenCategories(category.children, [...parentIds, category.id]));
|
|
}
|
|
}
|
|
|
|
return flatCategories;
|
|
}
|
|
goods.classify.list().then(res => {
|
|
classifyList.value = flattenCategories(res.data)
|
|
loading.value = false
|
|
})
|
|
}
|
|
|
|
onShow(() => {
|
|
getClassify()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
|
.charts-box {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
</style> |