gva
/
web-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改文章审核流程 

增加文章和栏目的预览链接
修改权限管理的报错
This commit is contained in:
jacky 2024-04-18 23:23:54 +08:00
parent 41e5d73c9b
commit 80d18f2b83
11 changed files with 168 additions and 381 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/article.js
View File

@ -91,9 +91,9 @@ export const submitArticle = (data) => {
// @Produce application/json
// @Param menu Object
// @Router /cms/article/review [put]
export const reviewArticle = (data) => {
export const reviewBackArticle = (data) => {
return service({
url: '/cms/article/review',
url: '/cms/article/reviewBack',
method: 'put',
data
})

8
src/api/fetcher.js
View File

@ -11,12 +11,12 @@ export const getFetcherArticleList = (data) => {
})
}
// @Summary 根据id获取文章
// @Summary 根据id导入文章
// @accept application/json
// @Router /cms/fetcher/getArticle [get]
export const getFetcherArticleById = (params) => {
// @Router /cms/fetcher/importArticle [get]
export const importFetcherArticleById = (params) => {
return service({
url: '/cms/fetcher/getArticle',
url: '/cms/fetcher/importArticle',
method: 'get',
params
})

62
src/view/content/article/index.vue
View File

@ -41,17 +41,19 @@
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button type="primary" icon="plus" @click="handleAdd('0')">新增文章</el-button>
<el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length"
@click="handleMultiDelete">删除</el-button>
<el-button v-auth="btnAuth.delete" icon="delete" style="margin-left: 10px;"
:disabled="!multipleSelection.length" @click="handleMultiDelete">删除</el-button>
</div>
<!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
<el-table ref="multipleTable" :data="tableData" row-key="ID" @selection-change="handleSelectionChange">
<el-table-column fixed type="selection" width="40" align="center" />
<el-table-column align="left" label="ID" min-width="60" prop="ID" />
<el-table-column align="left" label="标题/副标题" min-width="270" prop="title">
<el-table-column align="left" label="标题/副标题" min-width="350" prop="title">
<template #default="scope">
{{ scope.row.title }}
<el-link type="primary" :href="'http://w1.zkzk.org.cn/article/' + scope.row.ID + '.html'" target="_blank">
{{ scope.row.title }}
</el-link>
<div><small>{{ scope.row.subtitle }}</small></div>
</template>
</el-table-column>
@ -102,21 +104,30 @@
<el-table-column align="left" fixed="right" label="操作" width="140">
<template #default="scope">
<div class="flex md-2">
<el-button type="primary" link icon="memo" @click="handleRowPreview(scope.row)">预览</el-button>
<el-button v-if="scope.row.status === 1" type="success" link icon="check"
<el-button v-if="scope.row.status === 1" v-auth="btnAuth.submit" type="success" link icon="check"
@click="handleRowChange(scope.row, 2)">提审</el-button>
<el-button v-if="scope.row.status === 2" type="primary" link icon="WindPower"
</div>
<div class="flex md-2">
<el-button v-if="scope.row.status === 2" v-auth="btnAuth.review" type="primary" link icon="WindPower"
@click="handleRowReview(scope.row)">审核</el-button>
<el-button v-if="scope.row.status === 3" type="success" link icon="top"
</div>
<div class="flex md-2">
<el-button v-if="scope.row.status === 3" v-auth="btnAuth.release" type="success" link icon="top"
@click="handleRowChange(scope.row, 4)">发布</el-button>
<el-button v-if="scope.row.status === 4" type="warning" link icon="bottom"
</div>
<div class="flex md-2">
<el-button v-if="scope.row.status === 4" v-auth="btnAuth.cancel" type="warning" link icon="bottom"
@click="handleRowChange(scope.row, 5)">撤销</el-button>
</div>
<div class="flex">
<el-button :type="scope.row.status === 1 || scope.row.status === 5 ? 'primary' : 'info'" link icon="edit"
<div class="flex md-2">
<el-button v-auth="btnAuth.edit"
:type="scope.row.status === 1 || scope.row.status === 5 ? 'primary' : 'info'" link icon="edit"
:disabled="scope.row.status === 4 || scope.row.status === 2"
@click="handleRowEdit(scope.row.ID)">编辑</el-button>
<el-button type="danger" link icon="delete" @click="handleRowDelete(scope.row.ID)">删除</el-button>
</div>
<div class="flex md-2">
<el-button v-auth="btnAuth.delete" type="danger" link icon="delete"
@click="handleRowDelete(scope.row.ID)">删除</el-button>
</div>
</template>
</el-table-column>
@ -148,12 +159,13 @@ import {
setArticleChannels,
setArticleCategories,
submitArticle,
reviewArticle,
reviewBackArticle,
releaseArticle,
cancelArticle
} from '@/api/article'
import ArticleEdit from '@/view/content/components/articleEdit.vue'
import { useBtnAuth } from '@/utils/btnAuth'
const btnAuth = useBtnAuth()
const articleEditTitle = ref('')
const articleEditRef = ref(false)
const page = ref(1)
@ -359,23 +371,23 @@ const handleRowReview = row => {
cancelButtonText: '否',
type: 'warning'
}).then(async valid => {
// 确认通过，状态为待发布
const res = await reviewArticle({ ID: row.ID, status: 3 })
// 确认通过，发布文章
const res = await releaseArticle({ ID: row.ID })
if (res.code === 0) {
ElMessage({
type: 'success',
message: '审核确认通过!'
message: '审核通过!'
})
row.status = 3
row.status = 4
}
}).catch(async (action) => {
// 确认不通过，状态为待提审
// 确认不通过，状态为草稿
if (action === 'cancel') {
const res = await reviewArticle({ ID: row.ID, status: 1 })
const res = await reviewBackArticle({ ID: row.ID })
if (res.code === 0) {
ElMessage({
type: 'warning',
message: '审核确认不通过!'
message: '审核不通过!'
})
row.status = 1
}
@ -383,14 +395,6 @@ const handleRowReview = row => {
})
}
// 预览
const handleRowPreview = (row) => {
ElMessage({
type: 'warning',
message: '开发中。。。'
})
}
// ----- 列表更新栏目相关 -----
const handleChangeChannels = async row => {
await nextTick()

10
src/view/content/channel/index.vue
View File

@ -10,6 +10,12 @@
<el-table-column align="left" label="ID" min-width="80" prop="ID" />
<el-table-column align="left" label="名称" min-width="100" prop="name" />
<el-table-column align="left" label="标题" min-width="120" prop="title" />
<el-table-column align="left" label="预览" min-width="120" prop="preview">
<template #default="scope">
<el-link type="primary" :href="'http://w1.zkzk.org.cn/channel/' + scope.row.ID + '.htm'"
target="_blank">预览</el-link>
</template>
</el-table-column>
<el-table-column align="left" label="摘要" min-width="260" prop="description" />
<el-table-column align="left" label="关键词" min-width="260" prop="keyword" />
<el-table-column align="left" label="介绍" min-width="260" prop="introduce" />
@ -96,12 +102,12 @@
</div>
<el-form-item label="栏目模板" prop="channelTplId" style="width: 88%">
<el-select v-model="form.channelTplId" placeholder="请选择" style="width: 240px">
<el-option v-for="item in channelTplOptions" :key="item.ID" :label="item.title" :value="item.ID" />
<el-option v-for="item in channelTplOptions" :key="item.ID" :label="item.name" :value="item.ID" />
</el-select>
</el-form-item>
<el-form-item label="文章页模板" prop="articleTplId" style="width: 88%">
<el-select v-model="form.articleTplId" placeholder="请选择" style="width: 240px">
<el-option v-for="item in articleTplOptions" :key="item.ID" :label="item.title" :value="item.ID" />
<el-option v-for="item in articleTplOptions" :key="item.ID" :label="item.name" :value="item.ID" />
</el-select>
</el-form-item>
</el-form>

8
src/view/content/components/articleEdit.vue
View File

@ -55,7 +55,9 @@
</el-col>
</el-row>
<el-form-item label="文章内容" prop="content">
<RichEdit v-model="editForm.content" style="height: 50rem;" />
<div v-if="showDrawer">
<RichEdit v-model="editForm.content" style="height: 50rem;" />
</div>
</el-form-item>
</el-col>
<el-col :span="1" align="center">
@ -151,7 +153,7 @@ import {
updateArticle,
getArticleById,
} from '@/api/article'
import { getFetcherArticleById } from '@/api/fetcher'
import { importFetcherArticleById } from '@/api/fetcher'
// 组件定义
defineOptions({
@ -348,7 +350,7 @@ const initFormByArticle = async (id) => {
// 从爬虫数据中获取内容并填充至文章内容中
const initFormByFetcher = async (id) => {
const res = await getFetcherArticleById({ ID: id })
const res = await importFetcherArticleById({ ID: id })
if (res.code === 0 && res.data && res.data.article) {
fetcherArticleId.value = id
const { title, author, source, content, publicTime } = res.data.article

4
src/view/content/fetcher/article.vue
View File

@ -121,6 +121,7 @@ const initSearchInfo = () => {
formatTimeToStr(startDate, 'yyyy-MM-dd'),
formatTimeToStr(endDate, 'yyyy-MM-dd'),
],
state: 0,
}
}
@ -162,8 +163,7 @@ const handleRowEdit = (ID) => {
// ----- 查询 -----
const getTableData = async () => {
const state = 0
const res = await getFetcherArticleList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value, state })
const res = await getFetcherArticleList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
if (res.code === 0) {
tableData.value = res.data.list
total.value = res.data.total

1
src/view/layout/aside/index.vue
View File

@ -105,7 +105,6 @@ const selectMenuItem = (index, _, ele, aaa) => {
if (index.indexOf('http://') > -1 || index.indexOf('https://') > -1) {
window.open(index)
} else {
console.log(index, query, params)
router.push({ name: index, query, params })
}
}

242
src/view/superAdmin/api/api.vue
View File

@ -1,121 +1,45 @@
<template>
<div>
<div class="gva-search-box">
<el-form
ref="searchForm"
:inline="true"
:model="searchInfo"
>
<el-form ref="searchForm" :inline="true" :model="searchInfo" label-width="auto">
<el-form-item label="路径">
<el-input
v-model="searchInfo.path"
placeholder="路径"
/>
<el-input v-model="searchInfo.path" placeholder="路径" />
</el-form-item>
<el-form-item label="描述">
<el-input
v-model="searchInfo.description"
placeholder="描述"
/>
<el-input v-model="searchInfo.description" placeholder="描述" />
</el-form-item>
<el-form-item label="API组">
<el-input
v-model="searchInfo.apiGroup"
placeholder="api组"
/>
<el-input v-model="searchInfo.apiGroup" placeholder="api组" />
</el-form-item>
<el-form-item label="请求">
<el-select
v-model="searchInfo.method"
clearable
placeholder="请选择"
>
<el-option
v-for="item in methodOptions"
:key="item.value"
:label="`${item.label}(${item.value})`"
:value="item.value"
/>
<el-select v-model="searchInfo.method" clearable placeholder="请选择">
<el-option v-for="item in methodOptions" :key="item.value" :label="`${item.label}(${item.value})`"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="search"
@click="onSubmit"
>查询</el-button>
<el-button
icon="refresh"
@click="onReset"
>重置</el-button>
<el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
<el-button icon="refresh" @click="onReset">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button
type="primary"
icon="plus"
@click="openDialog('addApi')"
>新增</el-button>
<el-icon
class="cursor-pointer"
@click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=7&vd_source=f2640257c21e3b547a790461ed94875e')"
><VideoCameraFilled /></el-icon>
<el-button
icon="delete"
:disabled="!apis.length"
@click="onDelete"
>删除</el-button>
<el-button
icon="Refresh"
@click="onFresh"
>刷新缓存</el-button>
<el-button type="primary" icon="plus" @click="openDialog('addApi')">新增</el-button>
<el-icon class="cursor-pointer"
@click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=7&vd_source=f2640257c21e3b547a790461ed94875e')">
<VideoCameraFilled />
</el-icon>
<el-button icon="delete" :disabled="!apis.length" @click="onDelete">删除</el-button>
<el-button icon="Refresh" @click="onFresh">刷新缓存</el-button>
</div>
<el-table
:data="tableData"
@sort-change="sortChange"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
/>
<el-table-column
align="left"
label="id"
min-width="60"
prop="ID"
sortable="custom"
/>
<el-table-column
align="left"
label="API路径"
min-width="150"
prop="path"
sortable="custom"
/>
<el-table-column
align="left"
label="API分组"
min-width="150"
prop="apiGroup"
sortable="custom"
/>
<el-table-column
align="left"
label="API简介"
min-width="150"
prop="description"
sortable="custom"
/>
<el-table-column
align="left"
label="请求"
min-width="150"
prop="method"
sortable="custom"
>
<el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column align="left" label="id" min-width="60" prop="ID" sortable="custom" />
<el-table-column align="left" label="API路径" min-width="200" prop="path" sortable="custom" />
<el-table-column align="left" label="API分组" min-width="150" prop="apiGroup" sortable="custom" />
<el-table-column align="left" label="API简介" min-width="150" prop="description" sortable="custom" />
<el-table-column align="left" label="请求" min-width="150" prop="method" sortable="custom">
<template #default="scope">
<div>
{{ scope.row.method }} / {{ methodFilter(scope.row.method) }}
@ -123,108 +47,44 @@
</template>
</el-table-column>
<el-table-column
align="left"
fixed="right"
label="操作"
width="200"
>
<el-table-column align="left" fixed="right" label="操作" width="200">
<template #default="scope">
<el-button
icon="edit"
type="primary"
link
@click="editApiFunc(scope.row)"
>编辑</el-button>
<el-button
icon="delete"
type="primary"
link
@click="deleteApiFunc(scope.row)"
>删除</el-button>
<el-button icon="edit" type="primary" link @click="editApiFunc(scope.row)">编辑</el-button>
<el-button icon="delete" type="primary" link @click="deleteApiFunc(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="gva-pagination">
<el-pagination
:current-page="page"
:page-size="pageSize"
:page-sizes="[10, 30, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
<el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :total="total"
layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
@size-change="handleSizeChange" />
</div>
</div>
<el-dialog
v-model="dialogFormVisible"
:before-close="closeDialog"
:title="dialogTitle"
>
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
<warning-bar title="新增API，需要在角色管理内配置权限才可使用" />
<el-form
ref="apiForm"
:model="form"
:rules="rules"
label-width="80px"
>
<el-form-item
label="路径"
prop="path"
>
<el-input
v-model="form.path"
autocomplete="off"
/>
<el-form ref="apiForm" :model="form" :rules="rules" label-width="80px">
<el-form-item label="路径" prop="path">
<el-input v-model="form.path" autocomplete="off" />
</el-form-item>
<el-form-item
label="请求"
prop="method"
>
<el-select
v-model="form.method"
placeholder="请选择"
style="width:100%"
>
<el-option
v-for="item in methodOptions"
:key="item.value"
:label="`${item.label}(${item.value})`"
:value="item.value"
/>
<el-form-item label="请求" prop="method">
<el-select v-model="form.method" placeholder="请选择" style="width:100%">
<el-option v-for="item in methodOptions" :key="item.value" :label="`${item.label}(${item.value})`"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item
label="api分组"
prop="apiGroup"
>
<el-input
v-model="form.apiGroup"
autocomplete="off"
/>
<el-form-item label="api分组" prop="apiGroup">
<el-input v-model="form.apiGroup" autocomplete="off" />
</el-form-item>
<el-form-item
label="api简介"
prop="description"
>
<el-input
v-model="form.description"
autocomplete="off"
/>
<el-form-item label="api简介" prop="description">
<el-input v-model="form.description" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button
type="primary"
@click="enterDialog"
>确 定</el-button>
<el-button type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
</el-dialog>
@ -342,7 +202,7 @@ const sortChange = ({ prop, order }) => {
}
// 查询
const getTableData = async() => {
const getTableData = async () => {
const table = await getApiList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
if (table.code === 0) {
tableData.value = table.data.list
@ -359,12 +219,12 @@ const handleSelectionChange = (val) => {
apis.value = val
}
const onDelete = async() => {
const onDelete = async () => {
ElMessageBox.confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
}).then(async () => {
const ids = apis.value.map(item => item.ID)
const res = await deleteApisByIds({ ids })
if (res.code === 0) {
@ -379,12 +239,12 @@ const onDelete = async() => {
}
})
}
const onFresh = async() => {
const onFresh = async () => {
ElMessageBox.confirm('确定要刷新缓存吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
}).then(async () => {
const res = await freshCasbin()
if (res.code === 0) {
ElMessage({
@ -428,13 +288,13 @@ const closeDialog = () => {
dialogFormVisible.value = false
}
const editApiFunc = async(row) => {
const editApiFunc = async (row) => {
const res = await getApiById({ id: row.ID })
form.value = res.data.api
openDialog('edit')
}
const enterDialog = async() => {
const enterDialog = async () => {
apiForm.value.validate(async valid => {
if (valid) {
switch (type.value) {
@ -482,13 +342,13 @@ const enterDialog = async() => {
})
}
const deleteApiFunc = async(row) => {
const deleteApiFunc = async (row) => {
ElMessageBox.confirm('此操作将永久删除所有角色下该api, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async() => {
.then(async () => {
const res = await deleteApi(row)
if (res.code === 0) {
ElMessage({

50
src/view/superAdmin/authority/components/apis.vue
View File

@ -1,31 +1,14 @@
<template>
<div>
<div class="sticky top-0.5 z-10 bg-white">
<el-input
v-model="filterText"
class="w-3/5"
placeholder="筛选"
/>
<el-button
class="float-right"
type="primary"
@click="authApiEnter"
>确 定</el-button>
<el-input v-model="filterText" class="w-3/5" placeholder="筛选" />
<el-button class="float-right" type="primary" @click="authApiEnter">确 定</el-button>
</div>
<div class="tree-content">
<el-scrollbar>
<el-tree
ref="apiTree"
:data="apiTreeData"
:default-checked-keys="apiTreeIds"
:props="apiDefaultProps"
default-expand-all
highlight-current
node-key="onlyId"
show-checkbox
:filter-node-method="filterNode"
@check="nodeChange"
/>
<el-tree ref="apiTree" :data="apiTreeData" :default-checked-keys="apiTreeIds" :props="apiDefaultProps"
default-expand-all highlight-current node-key="onlyId" show-checkbox :filter-node-method="filterNode"
@check="nodeChange" />
</el-scrollbar>
</div>
</div>
@ -43,7 +26,7 @@ defineOptions({
const props = defineProps({
row: {
default: function() {
default: function () {
return {}
},
type: Object
@ -60,7 +43,7 @@ const filterText = ref('')
const apiTreeData = ref([])
const apiTreeIds = ref([])
const activeUserId = ref('')
const init = async() => {
const init = async () => {
const res2 = await getAllApis()
const apis = res2.data.apis
@ -90,14 +73,14 @@ const enterAndNext = () => {
const buildApiTree = (apis) => {
const apiObj = {}
apis &&
apis.forEach(item => {
item.onlyId = 'p:' + item.path + 'm:' + item.method
if (Object.prototype.hasOwnProperty.call(apiObj, item.apiGroup)) {
apiObj[item.apiGroup].push(item)
} else {
Object.assign(apiObj, { [item.apiGroup]: [item] })
}
})
apis.forEach(item => {
item.onlyId = 'p:' + item.path + 'm:' + item.method
if (Object.prototype.hasOwnProperty.call(apiObj, item.apiGroup)) {
apiObj[item.apiGroup].push(item)
} else {
Object.assign(apiObj, { [item.apiGroup]: [item] })
}
})
const apiTree = []
for (const key in apiObj) {
const treeNode = {
@ -112,7 +95,7 @@ const buildApiTree = (apis) => {
// 关联关系确定
const apiTree = ref(null)
const authApiEnter = async() => {
const authApiEnter = async () => {
const checkArr = apiTree.value.getCheckedNodes(true)
var casbinInfos = []
checkArr && checkArr.forEach(item => {
@ -145,4 +128,3 @@ watch(filterText, (val) => {
})
</script>

44
src/view/superAdmin/authority/components/datas.vue
View File

@ -1,40 +1,16 @@
<template>
<div>
<warning-bar
title="此功能仅用于创建角色和角色的many2many关系表，具体使用还须自己结合表实现业务，详情参考示例代码（客户示例）。此功能不建议使用，建议使用插件市场【组织管理功能（点击前往）】来管理资源权限。"
/>
title="此功能仅用于创建角色和角色的many2many关系表，具体使用还须自己结合表实现业务，详情参考示例代码（客户示例）。此功能不建议使用，建议使用插件市场【组织管理功能（点击前往）】来管理资源权限。" />
<div class="sticky top-0.5 z-10 bg-white my-4">
<el-button
class="float-left"
type="primary"
@click="all"
>全选</el-button>
<el-button
class="float-left"
type="primary"
@click="self"
>本角色</el-button>
<el-button
class="float-left"
type="primary"
@click="selfAndChildren"
>本角色及子角色</el-button>
<el-button
class="float-right"
type="primary"
@click="authDataEnter"
>确 定</el-button>
<el-button class="float-left" type="primary" @click="all">全选</el-button>
<el-button class="float-left" type="primary" @click="self">本角色</el-button>
<el-button class="float-left" type="primary" @click="selfAndChildren">本角色及子角色</el-button>
<el-button class="float-right" type="primary" @click="authDataEnter">确 定</el-button>
</div>
<div class="clear-both pt-4">
<el-checkbox-group
v-model="dataAuthorityId"
@change="selectAuthority"
>
<el-checkbox
v-for="(item,key) in authoritys"
:key="key"
:label="item"
>{{ item.authorityName }}</el-checkbox>
<el-checkbox-group v-model="dataAuthorityId" @change="selectAuthority">
<el-checkbox v-for="(item, key) in authoritys" :key="key" :value="item">{{ item.authorityName }}</el-checkbox>
</el-checkbox-group>
</div>
</div>
@ -52,13 +28,13 @@ defineOptions({
const props = defineProps({
row: {
default: function() {
default: function () {
return {}
},
type: Object
},
authority: {
default: function() {
default: function () {
return []
},
type: Array
@ -121,7 +97,7 @@ const getChildrenId = (row, arrBox) => {
})
}
// 提交
const authDataEnter = async() => {
const authDataEnter = async () => {
const res = await setDataAuthority(props.row)
if (res.code === 0) {
ElMessage({ type: 'success', message: '资源设置成功' })

116
src/view/superAdmin/authority/components/menus.vue
View File

@ -1,53 +1,26 @@
<template>
<div>
<div class="sticky top-0.5 z-10 bg-white">
<el-input
v-model="filterText"
class="w-3/5"
placeholder="筛选"
/>
<el-button
class="float-right"
type="primary"
@click="relation"
>确 定</el-button>
<el-input v-model="filterText" class="w-3/5" placeholder="筛选" />
<el-button class="float-right" type="primary" @click="relation">确 定</el-button>
</div>
<div class="tree-content clear-both">
<el-scrollbar>
<el-tree
ref="menuTree"
:data="menuTreeData"
:default-checked-keys="menuTreeIds"
:props="menuDefaultProps"
default-expand-all
highlight-current
node-key="ID"
show-checkbox
:filter-node-method="filterNode"
@check="nodeChange"
>
<template #default="{ node , data }">
<el-tree ref="menuTree" :data="menuTreeData" :default-checked-keys="menuTreeIds" :props="menuDefaultProps"
default-expand-all highlight-current node-key="ID" show-checkbox :filter-node-method="filterNode"
@check="nodeChange">
<template #default="{ node, data }">
<span class="custom-tree-node">
<span>{{ node.label }}</span>
<span>
<el-button
type="primary"
link
:style="{color:row.defaultRouter === data.name?'#E6A23C':'#85ce61'}"
:disabled="!node.checked"
@click="() => setDefault(data)"
>
{{ row.defaultRouter === data.name?"首页":"设为首页" }}
<el-button type="primary" link
:style="{ color: row.defaultRouter === data.name ? '#E6A23C' : '#85ce61' }" :disabled="!node.checked"
@click="() => setDefault(data)">
{{ row.defaultRouter === data.name ? "首页" : "设为首页" }}
</el-button>
</span>
<span v-if="data.menuBtn.length">
<el-button
type="primary"
link
@click="() => OpenBtn(data)"
>
<el-button type="primary" link @click="() => OpenBtn(data)">
分配按钮
</el-button>
</span>
@ -56,37 +29,16 @@
</el-tree>
</el-scrollbar>
</div>
<el-dialog
v-model="btnVisible"
title="分配按钮"
destroy-on-close
>
<el-table
ref="btnTableRef"
:data="btnData"
row-key="ID"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
/>
<el-table-column
label="按钮名称"
prop="name"
/>
<el-table-column
label="按钮备注"
prop="desc"
/>
<el-dialog v-model="btnVisible" title="分配按钮" destroy-on-close>
<el-table ref="btnTableRef" :data="btnData" row-key="ID" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column label="按钮名称" prop="name" />
<el-table-column label="按钮备注" prop="desc" />
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button
type="primary"
@click="enterDialog"
>确 定</el-button>
<el-button type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
</el-dialog>
@ -95,9 +47,7 @@
<script setup>
import { getBaseMenuTree, getMenuAuthority, addMenuAuthority } from '@/api/menu'
import {
updateAuthority
} from '@/api/authority'
import { updateAuthority } from '@/api/authority'
import { getAuthorityBtnApi, setAuthorityBtnApi } from '@/api/authorityBtn'
import { nextTick, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
@ -108,7 +58,7 @@ defineOptions({
const props = defineProps({
row: {
default: function() {
default: function () {
return {}
},
type: Object
@ -122,12 +72,12 @@ const menuTreeIds = ref([])
const needConfirm = ref(false)
const menuDefaultProps = ref({
children: 'children',
label: function(data) {
label: function (data) {
return data.meta.title
}
})
const init = async() => {
const init = async () => {
// 获取所有菜单树
const res = await getBaseMenuTree()
menuTreeData.value = res.data.menus
@ -145,8 +95,13 @@ const init = async() => {
init()
const setDefault = async(data) => {
const res = await updateAuthority({ authorityId: props.row.authorityId, AuthorityName: props.row.authorityName, parentId: props.row.parentId, defaultRouter: data.name })
const setDefault = async (data) => {
const res = await updateAuthority({
authorityId: props.row.authorityId,
AuthorityName: props.row.authorityName,
parentId: props.row.parentId,
defaultRouter: data.name
})
if (res.code === 0) {
ElMessage({ type: 'success', message: '设置成功' })
emit('changeRow', 'defaultRouter', res.data.authority.defaultRouter)
@ -161,7 +116,7 @@ const enterAndNext = () => {
}
// 关联树 确认方法
const menuTree = ref(null)
const relation = async() => {
const relation = async () => {
const checkArr = menuTree.value.getCheckedNodes(false, true)
const res = await addMenuAuthority({
menus: checkArr,
@ -183,9 +138,12 @@ const btnData = ref([])
const multipleSelection = ref([])
const btnTableRef = ref()
let menuID = ''
const OpenBtn = async(data) => {
const OpenBtn = async (data) => {
menuID = data.ID
const res = await getAuthorityBtnApi({ menuID: menuID, authorityId: props.row.authorityId })
const res = await getAuthorityBtnApi({
menuID: menuID,
authorityId: props.row.authorityId
})
if (res.code === 0) {
openDialog(data)
await nextTick()
@ -213,7 +171,7 @@ const openDialog = (data) => {
const closeDialog = () => {
btnVisible.value = false
}
const enterDialog = async() => {
const enterDialog = async () => {
const selected = multipleSelection.value.map(item => item.ID)
const res = await setAuthorityBtnApi({
menuID,
@ -239,8 +197,8 @@ watch(filterText, (val) => {
</script>
<style lang="scss" scoped>
.custom-tree-node{
span+span{
.custom-tree-node {
span+span {
@apply ml-3;
}
}