feat: 添加素材分组
parent
a7164e0332
commit
6c196f9efb
2
.env
2
.env
|
|
@ -6,7 +6,7 @@ VITE_TITLE = 绝弹管理后台
|
||||||
# 网站副标题
|
# 网站副标题
|
||||||
VITE_SUBTITLE = 快速开发web应用的模板工具
|
VITE_SUBTITLE = 快速开发web应用的模板工具
|
||||||
# 接口前缀 说明：参见 axios 的 baseURL
|
# 接口前缀 说明：参见 axios 的 baseURL
|
||||||
VITE_API = https://nest.dev.juetan.cn/
|
VITE_API = http://127.0.0.1:3030/
|
||||||
|
|
||||||
# =====================================================================================
|
# =====================================================================================
|
||||||
# 开发设置
|
# 开发设置
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
<template>
|
||||||
|
<div class="w-[210px] h-full overflow-hidden grid grid-rows-[auto_1fr]">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<a-input-search allow-clear placeholder="分组名称..." class="mb-2"></a-input-search>
|
||||||
|
<a-button @click="onCreateRow">
|
||||||
|
<template #icon>
|
||||||
|
<i class="icon-park-outline-add"></i>
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
<form-modal></form-modal>
|
||||||
|
</div>
|
||||||
|
<a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-auto">
|
||||||
|
<ul class="pl-0 mt-0">
|
||||||
|
<li
|
||||||
|
v-for="item in list"
|
||||||
|
:key="item.id"
|
||||||
|
class="group flex items-center justify-between gap-1 h-8 rounded mb-2 pl-3 hover:bg-gray-100 cursor-pointer"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<i class="icon-park-outline-folder-close"></i>
|
||||||
|
{{ item.title }}
|
||||||
|
<span class="text-xs text-gray-500"> ({{ item.count }}) </span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a-dropdown>
|
||||||
|
<a-button size="small" type="text">
|
||||||
|
<template #icon>
|
||||||
|
<i class="icon-park-outline-more-one text-gray-400 hover:text-gray-700"></i>
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
<template #content>
|
||||||
|
<a-doption @click="onModifyRow(item)">
|
||||||
|
<template #icon>
|
||||||
|
<i class="icon-park-outline-edit"></i>
|
||||||
|
</template>
|
||||||
|
修改
|
||||||
|
</a-doption>
|
||||||
|
<a-doption class="!text-red-500" @click="onDeleteRow">
|
||||||
|
<template #icon>
|
||||||
|
<i class="icon-park-outline-delete"></i>
|
||||||
|
</template>
|
||||||
|
删除
|
||||||
|
</a-doption>
|
||||||
|
</template>
|
||||||
|
</a-dropdown>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</a-scrollbar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useAniFormModal } from "@/components";
|
||||||
|
import { delConfirm } from "@/utils";
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "生活笔记",
|
||||||
|
count: 23,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "微信头像",
|
||||||
|
count: 52,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "文章封面",
|
||||||
|
count: 19,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: "山水诗画",
|
||||||
|
count: 81,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: "虾米沙雕",
|
||||||
|
count: 12,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const list = ref(data);
|
||||||
|
|
||||||
|
const onModifyRow = (row: any) => {
|
||||||
|
formCtx.props.title = "修改分组";
|
||||||
|
formCtx.open(row);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onCreateRow = () => {
|
||||||
|
formCtx.props.title = "新建分组";
|
||||||
|
formCtx.open();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDeleteRow = async () => {
|
||||||
|
await delConfirm();
|
||||||
|
};
|
||||||
|
|
||||||
|
const [formModal, formCtx] = useAniFormModal({
|
||||||
|
title: "修改分组",
|
||||||
|
trigger: false,
|
||||||
|
modalProps: {
|
||||||
|
width: 432,
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
id: undefined,
|
||||||
|
},
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
field: "title",
|
||||||
|
label: "分组名称",
|
||||||
|
type: "input",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
submit: async ({ model }) => {
|
||||||
|
if (model.id) {
|
||||||
|
const item = list.value.find((i) => i.id === model.id);
|
||||||
|
if (item) {
|
||||||
|
item.title = model.title;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const ids = list.value.map((i) => i.id);
|
||||||
|
const maxId = Math.max.apply(null, ids);
|
||||||
|
list.value.push({
|
||||||
|
id: maxId,
|
||||||
|
title: model.title,
|
||||||
|
count: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
|
|
@ -1,54 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<BreadPage>
|
<BreadPage>
|
||||||
<div class="overflow-hidden grid grid-cols-[auto_auto_1fr]">
|
<div class="overflow-hidden grid grid-cols-[auto_auto_1fr]">
|
||||||
<div class="w-[210px] h-full overflow-hidden grid grid-rows-[auto_1fr]">
|
<ani-group></ani-group>
|
||||||
<div class="flex gap-2 pr-4">
|
|
||||||
<a-input-search allow-clear placeholder="分组名称..." class="mb-2"></a-input-search>
|
|
||||||
<a-button>
|
|
||||||
<template #icon>
|
|
||||||
<i class="icon-park-outline-add"></i>
|
|
||||||
</template>
|
|
||||||
</a-button>
|
|
||||||
</div>
|
|
||||||
<a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-auto">
|
|
||||||
<ul class="pr-4 pl-0 mt-0">
|
|
||||||
<li
|
|
||||||
v-for="i in 5"
|
|
||||||
class="group flex items-center justify-between gap-2 h-8 rounded mb-2 pl-3 hover:bg-gray-100 cursor-pointer"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<i class="icon-file-folder text-gray-600"></i>
|
|
||||||
日常素材
|
|
||||||
<span class="text-xs text-gray-400">(10)</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a-dropdown>
|
|
||||||
<a-button size="small" type="text">
|
|
||||||
<template #icon>
|
|
||||||
<i class="icon-park-outline-more-one text-gray-400 hover:text-gray-700"></i>
|
|
||||||
</template>
|
|
||||||
</a-button>
|
|
||||||
<template #content>
|
|
||||||
<a-doption @click="typeCtx.open()">
|
|
||||||
<template #icon>
|
|
||||||
<i class="icon-park-outline-edit"></i>
|
|
||||||
</template>
|
|
||||||
修改
|
|
||||||
</a-doption>
|
|
||||||
<a-doption class="!text-red-500">
|
|
||||||
<template #icon>
|
|
||||||
<i class="icon-park-outline-delete"></i>
|
|
||||||
</template>
|
|
||||||
删除
|
|
||||||
</a-doption>
|
|
||||||
</template>
|
|
||||||
</a-dropdown>
|
|
||||||
<type-modal></type-modal>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</a-scrollbar>
|
|
||||||
</div>
|
|
||||||
<a-divider direction="vertical" :margin="16"></a-divider>
|
<a-divider direction="vertical" :margin="16"></a-divider>
|
||||||
<div>
|
<div>
|
||||||
<Table v-bind="table">
|
<Table v-bind="table">
|
||||||
|
|
@ -72,6 +25,7 @@ import { api } from "@/api";
|
||||||
import { Table, useAniFormModal, useTable } from "@/components";
|
import { Table, useAniFormModal, useTable } from "@/components";
|
||||||
import { dayjs } from "@/libs/dayjs";
|
import { dayjs } from "@/libs/dayjs";
|
||||||
import numeral from "numeral";
|
import numeral from "numeral";
|
||||||
|
import AniGroup from './components/group.vue';
|
||||||
import AniUpload from "./components/upload.vue";
|
import AniUpload from "./components/upload.vue";
|
||||||
|
|
||||||
const [typeModal, typeCtx] = useAniFormModal({
|
const [typeModal, typeCtx] = useAniFormModal({
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue