358 lines
9.2 KiB
Vue
358 lines
9.2 KiB
Vue
<template>
|
||
<n-scrollbar class="h-full">
|
||
<div class="mb-8 mt-8 relative">
|
||
<h1 class="text-center text-lg">导航管理</h1>
|
||
<div class="absolute top-0 right-[5%]">
|
||
<!-- <n-button class="mr-4" type="primary" @click="addClass">增加分类</n-button> -->
|
||
<n-button type="primary" @click="addMenu">增加导航</n-button>
|
||
</div>
|
||
</div>
|
||
<div class="table w-[95%] mx-auto mb-8">
|
||
<n-data-table :columns="columns" striped :single-line="false" :paginate-single-page="false"
|
||
:pagination="pagination" :data="menuList">
|
||
<template #empty>
|
||
<div>
|
||
<span>尚无导航，</span><span class="text-pp-200 hover:underline" @click="add">去增加导航 ></span>
|
||
</div>
|
||
</template>
|
||
</n-data-table>
|
||
</div>
|
||
|
||
<n-drawer v-model:show="mshow" :width="702" :mask-closable="false">
|
||
<n-drawer-content title="新增导航" closable>
|
||
<n-form class="mb-20 px-4" ref="menuForm" :model="menuValue" :rules="menuRules" label-placement="left"
|
||
label-width="100">
|
||
<n-form-item-row label="导航名称" path="menuName">
|
||
<n-input v-model:value="menuValue.menuName" placeholder="请输入导航名称" />
|
||
</n-form-item-row>
|
||
<n-form-item-row label="导航类别" path="">
|
||
<n-select v-model:value="menuValue.menuClassId" placeholder="请选择导航类别" :options="classList"
|
||
@update:value="changeClass" />
|
||
</n-form-item-row>
|
||
<n-form-item-row label="导航链接" path="menuLink">
|
||
<n-input v-model:value="menuValue.menuLink" placeholder="请输入导航链接" />
|
||
</n-form-item-row>
|
||
<n-form-item-row label="导航图标" path="menuIcon">
|
||
<n-input v-model:value="menuValue.menuIcon" placeholder="请输入导航图标" />
|
||
</n-form-item-row>
|
||
<n-form-item-row label="导航描述" path="menuDesc">
|
||
<n-input type="textarea" v-model:value="menuValue.menuDesc" placeholder="请输入导航描述" />
|
||
</n-form-item-row>
|
||
<div class="px-[10%] ">
|
||
<n-button type="primary" block secondary strong @click="submitAddMenu">
|
||
增加导航
|
||
</n-button>
|
||
</div>
|
||
|
||
</n-form>
|
||
|
||
<n-divider class="mt-4" title-placement="left">
|
||
<n-icon size="20" color="#8A2BE2">
|
||
<icon-sciss></icon-sciss>
|
||
</n-icon>
|
||
<span class="ml-2 text-[20px]">增加类别</span>
|
||
</n-divider>
|
||
|
||
|
||
<n-form class="px-4" :model="classValue" ref="classForm" :rules="classRules" label-placement="left"
|
||
label-width="100">
|
||
<n-form-item label="分类名称" path="menuClass">
|
||
<n-input v-model:value="classValue.menuClass" placeholder="请输入分类名称" />
|
||
</n-form-item>
|
||
<n-form-item label="分类id" path="">
|
||
<n-input-number v-model:value="classValue.menuClassId" placeholder="请输入分类id" />
|
||
</n-form-item>
|
||
<div class="px-[10%]">
|
||
<n-button type="primary" block secondary strong @click="submitAddClass">创建分类</n-button>
|
||
</div>
|
||
</n-form>
|
||
|
||
|
||
</n-drawer-content>
|
||
</n-drawer>
|
||
|
||
<n-modal v-model:show="showModal" preset="dialog" title="删除" content="是否永久删除该文章？" positive-text="确认"
|
||
negative-text="取消" @positive-click="submitCallback" @negative-click="cancelCallback" />
|
||
|
||
</n-scrollbar>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { resetObject } from '@/util/index.js';
|
||
import { onMounted, reactive, ref } from 'vue';
|
||
|
||
const menuValue = reactive({
|
||
menuName: null,
|
||
menuClassId: null,
|
||
menuLink: null,
|
||
menuIcon: null,
|
||
menuClass: null,
|
||
menuDesc: null,
|
||
})
|
||
|
||
const classValue = reactive({
|
||
menuClass: null,
|
||
menuClassId: null,
|
||
})
|
||
|
||
const mshow = ref(false)
|
||
const showModal = ref(false)
|
||
const menuList = ref([])
|
||
const classList = ref([])
|
||
const pagination = ref({
|
||
pageSize: 12,
|
||
})
|
||
|
||
const menuForm = ref(null)
|
||
const classForm = ref(null)
|
||
|
||
const dtitle = ref('');
|
||
const opId = ref(-1);
|
||
const curId = ref(-1);
|
||
const delId = ref(-1);
|
||
const show = ref('')
|
||
const columns = createColumns({
|
||
view: (row) => {
|
||
dshow.value = true
|
||
dtitle.value = '文章预览'
|
||
opId.value = row.id
|
||
show.value = 'view'
|
||
},
|
||
edit: (row) => {
|
||
dshow.value = true
|
||
dtitle.value = '编辑文章'
|
||
curId.value = row.id
|
||
show.value = 'edit'
|
||
},
|
||
remove: (row) => {
|
||
// showModal.value = true
|
||
// delId.value = row.id
|
||
}
|
||
})
|
||
|
||
const menuRules = {
|
||
menuName: {
|
||
required: true,
|
||
message: '请输入导航名称',
|
||
trigger: 'blur',
|
||
},
|
||
menuClassId: {
|
||
required: true,
|
||
message: '请选择导航类别',
|
||
trigger: 'change',
|
||
},
|
||
menuLink: {
|
||
required: true,
|
||
message: '请输入导航链接',
|
||
trigger: 'blur',
|
||
},
|
||
menuIcon: {
|
||
required: true,
|
||
message: '请输入导航图标',
|
||
trigger: 'blur',
|
||
},
|
||
}
|
||
|
||
const classRules = {
|
||
menuClass: {
|
||
required: true,
|
||
message: '请输入分类名称',
|
||
trigger: 'blur',
|
||
},
|
||
menuClassId: {
|
||
required: true,
|
||
message: '请输入分类id',
|
||
trigger: 'blur',
|
||
},
|
||
}
|
||
|
||
|
||
|
||
function createColumns({ edit, remove, view }) {
|
||
return [
|
||
{
|
||
title: '序号',
|
||
key: 'key',
|
||
align: 'center',
|
||
width: "80",
|
||
render: (_, index) => {
|
||
return `${index + 1}`
|
||
}
|
||
},
|
||
{
|
||
title: "导航名称",
|
||
align: 'center',
|
||
width: "300",
|
||
key: "menuName"
|
||
},
|
||
{
|
||
title: "导航分类",
|
||
align: 'center',
|
||
width: "200",
|
||
key: "menuClass"
|
||
},
|
||
{
|
||
title: "导航简介",
|
||
align: 'center',
|
||
key: "menuDesc",
|
||
ellipsis: {
|
||
tooltip: {
|
||
scorllable: true,
|
||
contentStyle: {
|
||
maxWidth: '45vw',
|
||
maxHeight: '70vh',
|
||
},
|
||
},
|
||
}
|
||
},
|
||
{
|
||
title: "操作",
|
||
align: 'center',
|
||
key: "actions",
|
||
width: "200",
|
||
render(row) {
|
||
return h(
|
||
'div',
|
||
[
|
||
h(NButton,
|
||
{
|
||
type: "primary",
|
||
text: true,
|
||
size: "small",
|
||
onClick: () => view(row)
|
||
},
|
||
{ default: () => "预览" }
|
||
),
|
||
h(NButton,
|
||
{
|
||
type: "primary",
|
||
text: true,
|
||
size: "small",
|
||
style: "margin-left: 10px",
|
||
onClick: () => edit(row)
|
||
},
|
||
{ default: () => "编辑" }
|
||
),
|
||
h(NButton,
|
||
{
|
||
type: "primary",
|
||
text: true,
|
||
style: "margin-left: 10px",
|
||
size: "small",
|
||
onClick: () => remove(row)
|
||
},
|
||
{ default: () => "删除" }
|
||
),
|
||
]
|
||
);
|
||
}
|
||
}
|
||
];
|
||
};
|
||
function addMenu() {
|
||
mshow.value = true
|
||
}
|
||
onMounted(async () => {
|
||
getClass()
|
||
getList()
|
||
|
||
})
|
||
async function getList() {
|
||
// 获取文章列表
|
||
const res = await $http.nav.listNav()
|
||
|
||
menuList.value = res.data
|
||
}
|
||
|
||
async function getClass() {
|
||
const res = await $http.nav.listClass()
|
||
if (res.code == 1) {
|
||
res.data.forEach(i => {
|
||
i.value = i.menuClassId
|
||
i.label = i.menuClass
|
||
});
|
||
classList.value = res.data
|
||
}
|
||
}
|
||
|
||
|
||
async function submitCallback() {
|
||
const res = await $http.art.deleteArti(delId.value)
|
||
if (res.code == 1) $msg.success(res.msg)
|
||
else $msg.error(res.msg)
|
||
showModal.value = false
|
||
delId.value = -1
|
||
getList()
|
||
}
|
||
|
||
function cancelCallback() {
|
||
showModal.value = false
|
||
delId.value = -1
|
||
}
|
||
|
||
async function submitAddMenu() {
|
||
if (menuValue.menuClassId == null || !menuValue.menuClassId) {
|
||
$msg.error('请选择导航类别')
|
||
return
|
||
}
|
||
menuForm.value?.validate(async errors => {
|
||
if (!errors) {
|
||
const res = await $http.nav.addMenu(menuValue)
|
||
if (res.code == 1) {
|
||
$msg.success(res.msg);
|
||
resetObject(menuValue)
|
||
getList()
|
||
} else {
|
||
$msg.error(res.msg);
|
||
}
|
||
|
||
} else {
|
||
$msg.error(errors[0][0].message)
|
||
|
||
}
|
||
});
|
||
}
|
||
|
||
function submitAddClass() {
|
||
console.log(classValue);
|
||
if (!classValue.menuClassId) {
|
||
$msg.error('请输入分类id')
|
||
return
|
||
}
|
||
classForm.value.validate(async errors => {
|
||
if (!errors) {
|
||
const res = await $http.nav.addClass(classValue)
|
||
if (res.code == 1) {
|
||
$msg.success(res.msg);
|
||
resetObject(classValue)
|
||
getClass()
|
||
} else {
|
||
$msg.error(res.msg);
|
||
}
|
||
} else {
|
||
$msg.error(errors[0][0].message)
|
||
}
|
||
|
||
});
|
||
}
|
||
|
||
function changeClass() {
|
||
menuValue.menuClass = classList.value.find(item => item.menuClassId == menuValue.menuClassId).menuClass
|
||
console.log(menuValue);
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
:deep(.n-divider__line) {
|
||
background-color: @purple !important;
|
||
height: 2px !important;
|
||
}
|
||
|
||
:deep(.n-input-number) {
|
||
width: 100%;
|
||
}
|
||
:deep(.n-data-table__pagination) {
|
||
justify-content: center !important;
|
||
}
|
||
</style>
|