loser/lckt-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 优化文章和分类模块&新增banner

Browse Source
This commit is contained in:
loser
2025-06-23 17:05:42 +08:00
parent 0ed234639c
commit 7b9a4f5dc1
10 changed files with 420 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/view/category/category/category.vue
View File

@@ -1,4 +1,3 @@
<template>
<div>
<div class="gva-search-box">
@@ -16,7 +15,7 @@
—
<el-date-picker v-model="searchInfo.endCreatedAt" type="datetime" placeholder="结束日期" :disabled-date="time=> searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"></el-date-picker>
</el-form-item>
<template v-if="showAllQuery">
<!-- 将需要控制显示状态的查询条件添加到此范围内 -->
@@ -34,7 +33,7 @@
<div class="gva-btn-list">
<el-button type="primary" icon="plus" @click="openDialog()">新增</el-button>
<el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="onDelete">删除</el-button>
</div>
<el-table
ref="multipleTable"
@@ -46,20 +45,37 @@
@sort-change="sortChange"
>
<el-table-column type="selection" width="55" />
<el-table-column align="left" label="日期" prop="createdAt"width="180">
<template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
</el-table-column>
<el-table-column sortable align="left" label="名称" prop="name" width="120" />
<el-table-column align="left" label="图标" width="120">
<template #default="scope">
<el-image
v-if="scope.row.icon"
style="width: 80px; height: 80px"
:src="scope.row.icon"
:preview-src-list="[scope.row.icon]"
fit="cover"
/>
<span v-else>无</span>
</template>
</el-table-column>
<el-table-column sortable align="left" label="排序" prop="order" width="120" />
<el-table-column align="left" label="状态" prop="active" width="120">
<el-table-column align="left" label="是否启用" prop="active" width="120">
<template #default="scope">{{ formatBoolean(scope.row.active) }}</template>
</el-table-column>
<el-table-column align="left" label="首页展示" prop="active" width="120">
<template #default="scope">{{ formatBoolean(scope.row.index) }}</template>
</el-table-column>
<el-table-column align="left" label="父ID" prop="parentId" width="120" />
<el-table-column align="left" label="操作" fixed="right" :min-width="appStore.operateMinWith">
<template #default="scope">
<el-button type="primary" link class="table-button" @click="getDetails(scope.row)"><el-icon style="margin-right: 5px"><InfoFilled /></el-icon>查看</el-button>
<el-button type="primary" link class="table-button" @click="getDetails(scope.row)">
<el-icon style="margin-right: 5px"><InfoFilled /></el-icon>查看
</el-button>
<el-button type="primary" link icon="edit" class="table-button" @click="updateCategoryFunc(scope.row)">编辑</el-button>
<el-button type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button>
</template>
@@ -92,12 +108,18 @@
<el-form-item label="名称:" prop="name" >
<el-input v-model="formData.name" :clearable="false" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="图标:" prop="icon">
<selectImage v-model="formData.icon" />
</el-form-item>
<el-form-item label="排序:" prop="order" >
<el-input v-model.number="formData.order" :clearable="false" placeholder="请输入排序" />
</el-form-item>
<el-form-item label="状态:" prop="active" >
<el-switch v-model="formData.active" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
</el-form-item>
<el-form-item label="是否首页展示:" prop="index" >
<el-switch v-model="formData.index" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
</el-form-item>
<el-form-item label="父ID:" prop="parentId" >
<el-input v-model.number="formData.parentId" :clearable="false" placeholder="请输入父ID" />
</el-form-item>
@@ -109,12 +131,25 @@
<el-descriptions-item label="名称">
{{ detailFrom.name }}
</el-descriptions-item>
<el-descriptions-item label="图标">
<el-image
v-if="detailFrom.icon"
style="width: 100px; height: 100px"
:src="detailFrom.icon"
:preview-src-list="[detailFrom.icon]"
fit="cover"
/>
<span v-else>无</span>
</el-descriptions-item>
<el-descriptions-item label="排序">
{{ detailFrom.order }}
</el-descriptions-item>
<el-descriptions-item label="状态">
{{ detailFrom.active }}
</el-descriptions-item>
<el-descriptions-item label="首页展示">
{{ detailFrom.index }}
</el-descriptions-item>
<el-descriptions-item label="父ID">
{{ detailFrom.parentId }}
</el-descriptions-item>
@@ -139,6 +174,7 @@ import { getDictFunc, formatDate, formatBoolean, filterDict ,filterDataSource, r
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
import { useAppStore } from "@/pinia"
import selectImage from '@/components/selectImage/selectImage.vue'
@@ -160,6 +196,8 @@ const formData = ref({
order: 0,
active: false,
parentId: 0,
index: 0,
icon: ''
})
@@ -370,6 +408,8 @@ const closeDialog = () => {
order: 0,
active: false,
parentId: 0,
index: 0,
icon: ''
}
}
// 弹窗确定

4
src/view/category/category/categoryForm.vue
View File

@@ -12,6 +12,9 @@
<el-form-item label="状态:" prop="active">
<el-switch v-model="formData.active" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
</el-form-item>
<el-form-item label="是否首页展示:" prop="index">
<el-switch v-model="formData.index" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
</el-form-item>
<el-form-item label="父ID:" prop="parentId">
<el-input v-model.number="formData.parentId" :clearable="false" placeholder="请输入" />
</el-form-item>
@@ -54,6 +57,7 @@ const formData = ref({
order: 0,
active: false,
parentId: 0,
index:0,
})
// 验证规则
const rule = reactive({