136 lines
3.1 KiB
Vue
136 lines
3.1 KiB
Vue
<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 align-[-2px]"></i>
|
|
{{ item.title }}
|
|
</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>
|