Skip to content

C
cms-admin
提交 9c0bf5c6 authored 作者: pengxiaohui's avatar pengxiaohui
浏览文件
操作

设置模块页面及交互开发

上级 e56580e5
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 953 行增加 和 77 行删除
src/pages/content-manage/ads/index.vue
浏览文件 @ 9c0bf5c6
<template>
<div class="ads">
<div class="ads page_container">
<table-list v-bind="tableOptions" ref="tableList">
<template #header-aside>
<el-button type="primary" size="mini" @click="handleCreate">新建广告</el-button>
......@@ -187,17 +187,4 @@ export default {
}
</script>
<style scoped>
.ads {
width: calc(100% - 20px);
height: calc(100% - 20px);
margin: 10px;
background: #fff;
border-radius: 5px;
}
.details-handle{
cursor:pointer;
}
.details-handle:hover{
color:#409EFF;
}
</style>
src/pages/content-manage/article/index.vue
浏览文件 @ 9c0bf5c6
<template>
<div class="article">
<div class="article page_container">
<table-list v-bind="tableOptions" ref="tableList">
<template #header-aside>
<el-button type="primary" size="mini" @click="handleCreate">新建文章</el-button>
......@@ -181,17 +181,4 @@ export default {
}
</script>
<style scoped>
.article {
width: calc(100% - 20px);
height: calc(100% - 20px);
margin: 10px;
background: #fff;
border-radius: 5px;
}
.details-handle{
cursor:pointer;
}
.details-handle:hover{
color:#409EFF;
}
</style>
\ No newline at end of file
src/pages/content-manage/image-text/index.vue
浏览文件 @ 9c0bf5c6
<template>
<div class="article">
<div class="image-text page_container">
<table-list v-bind="tableOptions" ref="tableList">
<template #header-aside>
<el-button type="primary" size="mini" @click="handleCreate">新建文章</el-button>
......@@ -73,8 +73,9 @@ export default {
},
computed: {
drawTitle() {
if (this.drawFormOptions.type === 'create') return '新建图文'
else if (this.drawFormOptions.type === 'edit') return '编辑图文'
const type = this.drawFormOptions.type
if (type === 'create') return '新建图文'
else if (type === 'edit') return '编辑图文'
else return this.drawItem.title || '图文详情'
},
tableOptions() {
......@@ -181,17 +182,4 @@ export default {
}
</script>
<style scoped>
.article {
width: calc(100% - 20px);
height: calc(100% - 20px);
margin: 10px;
background: #fff;
border-radius: 5px;
}
.details-handle{
cursor:pointer;
}
.details-handle:hover{
color:#409EFF;
}
</style>
\ No newline at end of file
src/pages/error-page/401.vue 0 → 100644
浏览文件 @ 9c0bf5c6
<template>
<div class="401 page_container">
<div class="img">
<img src="@/assets/images/401.gif">
</div>
<p>很抱歉，您没有权限去该页面，请获取权限后再访问...</p>
<div class="btn-bar">
<el-button type="primary" @click="back" size="small">返回上一页</el-button>
</div>
</div>
</template>
<script>
export default {
methods: {
back() {
this.$router.go(-1)
}
}
}
</script>
<style scoped>
.page_container{
text-align:center;
}
.img{
padding-top:10px;
text-align:center;
}
p{
font: 24px/100px Arial,Helvetica,Microsoft YaHei;
color: #3f3b3a;
text-align:center;
}
</style>
\ No newline at end of file
src/pages/error-page/404.vue 0 → 100644
浏览文件 @ 9c0bf5c6
<template>
<div class="404 page_container">
<div class="img">
<img src="@/assets/images/404.png">
</div>
<p>很抱歉，您访问的页面不存在...</p>
<div class="btn-bar">
<el-button type="primary" @click="back" size="small">返回上一页</el-button>
</div>
</div>
</template>
<script>
export default {
methods: {
back() {
this.$router.go(-1)
}
}
}
</script>
<style scoped>
.page_container{
text-align:center;
}
.img{
padding-top:50px;
text-align:center;
}
p{
font: 24px/100px Arial,Helvetica,Microsoft YaHei;
color: #3f3b3a;
text-align:center;
}
</style>
\ No newline at end of file
src/pages/settings/project/index.vue
浏览文件 @ 9c0bf5c6
<template>
<div class="ads">
<div class="project page_container">
<table-list v-bind="tableOptions" ref="tabList">
<template #header-aside>
<el-button type="primary" size="mini">新建项目</el-button>
<el-button type="primary" size="mini" @click="handleCreate">新建项目</el-button>
</template>
<!-- 项目Id -->
<template v-slot:project_id="scope"><span class="details-handle" @click="handleDetails(scope.row)">{{scope.row.id}}</span></template>
<!-- 状态 -->
<template v-slot:status="{ row }">
<el-switch v-model="row.review_status"></el-switch>
<el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用"></el-switch>
</template>
</table-list>
<el-drawer ref="drawer" :visible.sync="drawerVisible" size="490px" @close="handleDrawerClose">
<template slot="title">
<h5>
{{drawerTitle}}
<el-button v-if="drawerType !== 'create'" type="primary" @click="drawerType = 'edit'" size="mini" style="float:right;margin-right:30px;">编辑</el-button>
</h5>
</template>
<div class="drawer__content">
<el-form :model="form" :rules="rules" ref="drawerForm" label-width="80px" class="drawer-form" :disabled="isDetails">
<el-form-item label="项目名称" prop="name">
<el-input v-model="form.name" size="small"></el-input>
</el-form-item>
<el-form-item label="项目简称" prop="abbr">
<el-input v-model="form.abbr" size="small"></el-input>
</el-form-item>
<el-form-item label="项目类型" prop="type">
<el-select v-model="form.type" placeholder="请选择项目类型" size="small" style="width:100%;">
<el-option :label="item.label" :value="item.id" v-for="item in projectTypeList" :key="item.id" />
</el-select>
</el-form-item>
<el-form-item label="项目网址" prop="website">
<el-input v-model="form.website" size="small"></el-input>
</el-form-item>
<el-form-item label="广告类型" style="margin-bottom:0;">
<el-checkbox :indeterminate="adType.isIndeterminate" v-model="adType.checkAll" @change="val => handleCheckAllChange(val, 'adType')">全选</el-checkbox>
<div style="margin: 2px 0;"></div>
<el-checkbox-group v-model="form.adType" @change="val => handleCheckedChange(val, 'adType')">
<el-checkbox v-for="item in typeList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="文章类型" style="margin-bottom:0;">
<el-checkbox :indeterminate="articleType.isIndeterminate" v-model="articleType.checkAll" @change="val => handleCheckAllChange(val, 'articleType')">全选</el-checkbox>
<div style="margin: 2px 0;"></div>
<el-checkbox-group v-model="form.articleType" @change="val => handleCheckedChange(val, 'articleType')">
<el-checkbox v-for="item in typeList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="图文类型" style="margin-bottom:0;">
<el-checkbox :indeterminate="imageTextType.isIndeterminate" v-model="imageTextType.checkAll" @change="val => handleCheckAllChange(val, 'imageTextType')">全选</el-checkbox>
<div style="margin: 2px 0;"></div>
<el-checkbox-group v-model="form.imageTextType" @change="val => handleCheckedChange(val, 'imageTextType')">
<el-checkbox v-for="item in typeList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<div class="drawer__footer" v-if="drawerType !== 'details'">
<el-button @click="handleDrawerClose" size="mini">取 消</el-button>
<el-button type="primary" @click="handleDrawerSubmit" size="mini">提 交</el-button>
</div>
</div>
</el-drawer>
</div>
</template>
<script>
import TableList from '@/components/TableList'
const defaultForm = {
name: '',
abbr: '',
type: '',
website: '',
adType: [],
articleType: [],
imageTextType: []
}
export default {
components: { TableList },
data() {
......@@ -22,13 +84,54 @@ export default {
{ project_id: '111', project_name: '官网' },
{ project_id: '222', project_name: 'kellet' }
],
roleList: [
{ id: '111', name: '超级管理员' },
{ id: '222', name: '数据管理员' }
]
statusList: [
{ id: '111', name: '启用' },
{ id: '222', name: '停用' }
],
projectTypeList: [
{ id: '111', label: '学位教育' }
],
selectedItem: {},
drawerVisible: false,
drawerType: '',
form: Object.assign({}, defaultForm),
rules: {
name: { required: true, message: '请输入项目名称', trigger: 'blur' },
abbr: { required: true, message: '请输入项目简称', trigger: 'blur' },
type: { required: true, message: '请输入项目类型', trigger: 'blur' },
website: { required: true, message: '请输入项目网址', trigger: 'blur' }
},
typeList: [
{ id: '111', name: 'banner广告' },
{ id: '122', name: '正文区广告' },
{ id: '1331', name: '侧边栏广告' }
],
adType: {
isIndeterminate: false,
checkAll: false
},
articleType: {
isIndeterminate: false,
checkAll: false
},
imageTextType: {
isIndeterminate: false,
checkAll: false
}
}
},
computed: {
isDetails() {
return this.drawerType === 'details'
},
drawerTitle() {
const type = this.drawerType
let text = ''
if (type === 'create') text = '新建项目'
else if (type === 'edit') text = '编辑项目'
else text = this.selectedItem.title || '项目详情'
return text
},
tableOptions() {
return {
remote: {
......@@ -43,30 +146,85 @@ export default {
labelKey: 'project_name',
valueKey: 'project_id'
},
{ type: 'input', placeholder: '项目ID', prop: 'id' },
{ type: 'input', placeholder: '项目ID/项目名称', prop: 'id' },
{
type: 'select',
placeholder: '角色',
placeholder: '状态',
prop: 'type',
options: this.roleList,
options: this.statusList,
labelKey: 'name',
valueKey: 'id'
}
],
columns: [
{ prop: 'id', label: '项目ID' },
{ prop: 'id', label: '项目ID', slots: 'project_id' },
{ prop: 'title', label: '项目名称' },
{ prop: 'subtilte', label: '项目简称' },
{ prop: 'abbr_title', label: '项目简称' },
{ prop: 'type', label: '项目类型' },
{ prop: 'url', label: '项目网址' },
{ prop: 'author', label: '创建人' },
{ prop: 'create_time', label: '创建时间' },
{ prop: 'status', label: '状态', slots: 'status' }
],
data: [
{ id: '122', title: '索菲亚', abbr_title: 'sofia', type: '学前教育', url: 'www.baidu.com', author: '张三', create_time: '2021-04-23 09:00:31', status: 1 }
]
}
}
},
methods: {
handleCreate() {
this.drawerVisible = true
this.drawerType = 'create'
},
handleDetails(val) {
this.selectedItem = Object.assign({}, val)
this.drawerVisible = true
this.drawerType = 'details'
},
handleCheckAllChange(val, target) {
this.form[target] = val ? this.typeList.map(item => item.id) : [];
this[target].isIndeterminate = false;
},
handleCheckedChange(val, target) {
const checkedCount = val.length;
this[target].checkAll = checkedCount === this.typeList.length;
this[target].isIndeterminate = checkedCount > 0 && checkedCount < this.typeList.length;
},
handleDrawerClose() {
this.drawerVisible = false
this.form = Object.assign({}, defaultForm)
},
handleDrawerSubmit() {
this.$refs.drawerForm.validate(valid => {
if (valid) {
console.log('drawerForm')
} else {
return false
}
})
}
}
}
</script>
<style scoped>
.details-handle{
cursor:pointer;
}
.details-handle:hover{
color:#409EFF;
}
.drawer__content{
height:100%;
}
.drawer-form{
width:450px;
margin:0 20px;
padding:20px 0 10px;
min-height: calc(100% - 73px);
}
.drawer__footer{
text-align:center;
padding-bottom:15px;
}
</style>
src/pages/settings/role/index.vue
浏览文件 @ 9c0bf5c6
<template>
<div>高级设置</div>
<div class="role page_container">
<el-button class="btn-create" type="primary" @click="handleCreate" size="small">新建角色</el-button>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="角色权限" name="0" lazy>
<table-list v-bind="tableOptions" ref="tabList">
<template v-slot:table-role-name="{ row }"><span class="color-blue">{{row.role_name}}</span></template>
<!-- 操作 -->
<template v-slot:table-operate="{ row }">
<el-button type="text" @click="handleEdit(row)" size="mini">编辑名称</el-button>
<el-button type="text" @click="handleSetPermission(row)" size="mini">权限配置</el-button>
<el-button type="text" @click="handleDelete(row)" size="mini">删除</el-button>
</template>
</table-list>
</el-tab-pane>
</el-tabs>
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :width="dialogStyle.width" :top="dialogStyle.top" @close="handleDialogClose" :destroy-on-close="true">
<el-form :model="form" label-width="100px" ref="dialogForm" class="dialog-form">
<template v-if="dialogType === 'create' || dialogType === 'edit'">
<el-form-item label="角色名称" prop="role_name" :rules="{ required: true, message: '请输入角色名称', trigger: 'blur' }">
<el-input v-model="form.role_name" size="small"></el-input>
</el-form-item>
</template>
<template v-if="dialogType === 'permission'">
<el-form-item label="全选：">
<el-checkbox :indeterminate="indeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
</el-form-item>
<el-form-item :label="`${perm.name}：`" v-for="perm in permissionList" :key="perm.id">
<div v-for="item in perm.children" :key="item.id">
<span class="sub-title">{{item.name}}</span>
<el-checkbox-group v-model="form[item.v_model_key]" @change="handleCheckedChange">
<el-checkbox v-for="subItem in item.children" :label="subItem.tag" :key="subItem.id">{{subItem.name}}</el-checkbox>
</el-checkbox-group>
</div>
</el-form-item>
</template>
</el-form>
<span v-if="dialogType === 'delete'">此操作将删除这条数据，确认继续执行？</span>
<span slot="footer">
<el-button @click="handleDialogClose" size="mini">取 消</el-button>
<el-button type="primary" @click="handleDialogSubmit" size="mini">提 交</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import TableList from '@/components/TableList'
import { permissionList } from './permission'
function recursionData(arr) {
const leafArr = []
function recursion(target) {
let list = []
const isArr = Array.isArray(target)
if (isArr) {
list = target
} else if (Array.isArray(target.children)) {
list = target.children
}
list.filter(item => {
if (Array.isArray(item.children) && item.children.length > 0) {
const _prop = item.tag.replace(/-/g, '_')
item.v_model_key = _prop
recursion(item)
} else {
// 累计leaf节点
const key = isArr ? '' : target.v_model_key
item.parent_v_model_key = key || ''
leafArr.push(item)
}
})
}
recursion(arr)
return leafArr
}
const defaultForm = {
role_name: ''
}
const permissionForm = {}
export default {
components: { TableList },
data() {
return {}
return {
activeName: '0',
// 项目类型
tableOptions: {
remote: {
params: {}
},
columns: [
{ prop: 'role_name', label: '角色名称', slots: 'table-role-name' },
{ prop: 'role_owner', label: '角色拥有人' },
{ prop: 'operate', label: '操作', slots: 'table-operate' }
],
data: [
{ id: '123', role_name: '超级管理员', role_owner: '张三', permission: ['setting-function-type-delete', 'setting-menu-type-manage'] },
{ id: '133', role_name: '普通管理员', role_owner: '李四', permission: ['content-function-acticle-audit'] }
]
},
dialogVisible: false,
dialogType: '',
form: Object.assign({}, defaultForm),
selectedTableItem: '',
indeterminate: false,
checkAll: false,
permissionList: [],
permissionLeafList: 0
}
},
computed: {
dialogTitle() {
let text = '新建角色'
switch (this.dialogType) {
case 'edit':
text = '编辑名称'
break
case 'permission':
text = '编辑权限配置'
break
case 'delete':
text = '删除角色'
break
}
return text
},
dialogWidth() {
let width = 440
if (this.dialogType === 'permission') width = 640
return width + 'px'
},
dialogStyle() {
const style = {
width: '440px',
top: '15vh'
}
if (this.dialogType === 'permission') {
style.width = '640px'
style.top = '10px'
}
return style
},
checkedCount() {
let checkedCount = 0
const form = this.form
for (const key in form) {
if (Array.isArray(form[key])) {
checkedCount += form[key].length
}
}
return checkedCount
},
isCheckAll() {
const count = this.permissionLeafList.length
return this.checkedCount === count
},
isIndeterminate() {
const checkedCount = this.checkedCount
return checkedCount > 0 && !this.isCheckAll
}
},
created() {
this.fetchPermissionList()
this.fetchRoleList()
},
methods: {
assignForm() {
Object.keys(permissionForm).forEach(key => {
permissionForm[key] = []
})
this.form = Object.assign({}, defaultForm, permissionForm)
},
handleCreate() {
this.dialogVisible = true
this.dialogType = 'create'
},
handleEdit(val) {
this.selectedTableItem = val
this.dialogVisible = true
this.dialogType = 'edit'
this.form = {
role_name: val.role_name
}
},
handleDelete(val) {
this.selectedTableItem = val
this.dialogVisible = true
this.dialogType = 'delete'
},
handleSetPermission(val) {
this.selectedTableItem = val
this.dialogVisible = true
this.dialogType = 'permission'
this.reviewPermission(val.permission)
},
reviewPermission(permissions) {
// const permissionData = []
this.permissionLeafList.forEach(item => {
const targetArr = this.form[item.parent_v_model_key]
if (permissions.includes(item.tag) && !targetArr.includes(item.tag)) {
targetArr.push(item.tag)
}
})
},
handleCheckAllChange(val) {
if (val) {
this.setCheckAll()
} else {
this.assignForm()
}
this.indeterminate = false
},
setCheckAll() {
this.permissionLeafList.forEach(item => {
const targetArr = this.form[item.parent_v_model_key]
if (!targetArr.includes(item.tag)) {
targetArr.push(item.tag)
}
});
},
handleCheckedChange() {
// const checkedCount = value.length;
this.checkAll = this.isCheckAll
this.indeterminate = this.isIndeterminate
},
// isCheckedAll() {},
handleDialogClose() {
this.dialogVisible = false
this.assignForm()
},
handleDialogSubmit() {
this.$refs.dialogForm.validate(valid => {
if (valid) {
console.log('dialogForm')
} else {
return false
}
})
},
fetchRoleList() {},
fetchPermissionList() {
const result = permissionList
const leafNodeList = recursionData(result)
this.permissionLeafCount = leafNodeList.length
this.permissionLeafList = leafNodeList
console.log(leafNodeList)
result.forEach(item => {
item.children.forEach(subItem => {
const key = subItem.v_model_key
permissionForm[key] = []
})
})
this.permissionList = result
this.assignForm()
}
}
}
</script>
<style scoped>
.role{
box-sizing:border-box;
padding:15px;
position:relative;
}
.btn-create{
position:absolute;
right:20px;
top:16px;
z-index:1;
}
.color-blue{
color:#409EFF;
}
.el-form ::v-deep.el-form-item{
margin-bottom:6px;
}
.el-form ::v-deep.el-form-item__label{
font-weight: bold;
font-size:16px;
}
.sub-title{
font-size:16px;
}
</style>
\ No newline at end of file
src/pages/settings/role/permission.js 0 → 100644
浏览文件 @ 9c0bf5c6
const permissionList = [
{
id: '6797441957049139200',
tag: 'setting-manage',
name: '设置管理',
pid: '0',
created_at: '2021-05-10 16:48:15',
updated_at: '2021-05-10 16:48:15',
children: [
{
id: '6797442275195486208',
tag: 'setting-function',
name: '功能权限',
pid: '6797441957049139200',
created_at: '2021-05-10 16:49:31',
updated_at: '2021-05-10 16:50:35',
children: [
{
id: '6797443349415460864',
tag: 'setting-function-type-delete',
name: '删除类型',
pid: '6797442275195486208',
created_at: '2021-05-10 16:53:47',
updated_at: '2021-05-10 16:53:47',
children: []
},
{
id: '6797443312060989440',
tag: 'setting-function-type-create',
name: '新建类型',
pid: '6797442275195486208',
created_at: '2021-05-10 16:53:38',
updated_at: '2021-05-10 16:53:38',
children: []
},
{
id: '6797443228967632896',
tag: 'setting-function-project-delete',
name: '删除项目',
pid: '6797442275195486208',
created_at: '2021-05-10 16:53:18',
updated_at: '2021-05-10 16:53:18',
children: []
},
{
id: '6797443191105650688',
tag: 'setting-function-project-create',
name: '新建项目',
pid: '6797442275195486208',
created_at: '2021-05-10 16:53:09',
updated_at: '2021-05-10 16:53:09',
children: []
},
{
id: '6797443072541065216',
tag: 'setting-function-user-delete',
name: '删除员工',
pid: '6797442275195486208',
created_at: '2021-05-10 16:52:41',
updated_at: '2021-05-10 16:52:41',
children: []
},
{
id: '6797 443025007017984',
tag: 'setting-function-user-create',
name: '新建员工',
pid: '6797442275195486208',
created_at: '2021-05-10 16:52:29',
updated_at: '2021-05-10 16:52:29',
children: []
}
]
},
{
id: '6797442199513464832',
tag: 'setting-menu',
name: '菜单权限',
pid: '6797441957049139200',
created_at: '2021-05-10 16:49:13',
updated_at: '2021-05-10 16:51:20',
children: [
{
id: '6797444006209912832',
tag: 'setting-menu-advanced-setting',
name: '高级设置',
pid: '6797442199513464832',
created_at: '2021-05-10 16:56:23',
updated_at: '2021-05-10 16:56:23',
children: []
},
{
id: '6797443802412875776',
tag: 'setting-menu-type-manage',
name: '类型管理',
pid: '6797442199513464832',
created_at: '2021-05-10 16:55:35',
updated_at: '2021-05-10 16:55:35',
children: []
},
{
id: '6797443749543673856',
tag: 'setting-menu-project-manage',
name: '项目管理',
pid: '6797442199513464832',
created_at: '2021-05-10 16:55:22',
updated_at: '2021-05-10 16:55:22',
children: []
},
{
id: '6797443626344382464',
tag: 'setting-menu-user-manage',
name: '员工管理',
pid: '6797442199513464832',
created_at: '2021-05-10 16:54:53',
updated_at: '2021-05-10 16:54:53',
children: []
}
]
}
]
},
{
id: '6797439344895328256',
tag: 'content-manage',
name: '内容管理',
pid: '0',
created_at: '2021-05-10 16:37:52',
updated_at: '2021-05-10 16:37:52',
children: [
{
id: '6797439803370504192',
tag: 'content-function',
name: '功能权限',
pid: '6797439344895328256',
created_at: '2021-05-10 16:39:41',
updated_at: '2021-05-10 16:39:41',
children: [
{
id: '6797441185813102592',
tag: 'content-function-imgtext-delete',
name: '删除图文',
pid: '6797439803370504192',
created_at: '2021-05-10 16:45:11',
updated_at: '2021-05-10 16:45:11',
children: []
},
{
id: '6797441090992472064',
tag: 'content-function-imgtext-audit',
name: '审核图文',
pid: '6797439803370504192',
created_at: '2021-05-10 16:44:48',
updated_at: '2021-05-10 16:44:48',
children: []
},
{
id: '6797441022633705472',
tag: 'content-function-imgtext-create',
name: '新建图文',
pid: '6797439803370504192',
created_at: '2021-05-10 16:44:32',
updated_at: '2021-05-10 16:44:32',
children: []
},
{
id: '6797440895961530368',
tag: 'content-function-acticle-delete',
name: '删除文章',
pid: '6797439803370504192',
created_at: '2021-05-10 16:44:02',
updated_at: '2021-05-10 16:44:02',
children: []
},
{
id: '6797440818572427264',
tag: 'content-function-acticle-audit',
name: '审核文章',
pid: '6797439803370504192',
created_at: '2021-05-10 16:43:43',
updated_at: '2021-05-10 16:43:43',
children: []
},
{
id: '6797440705846312960',
tag: 'content-function-acticle-create',
name: '新建文章',
pid: '6797439803370504192',
created_at: '2021-05-10 16:43:16',
updated_at: '2021-05-10 16:43:16',
children: []
},
{
id: '6797440560652091392',
tag: 'content-function-advert-delete',
name: '删除广告',
pid: '6797439803370504192',
created_at: '2021-05-10 16:42:42',
updated_at: '2021-05-10 16:42:42',
children: []
},
{
id: '6797440431673049088',
tag: 'content-function-advert-audit',
name: '审核广告',
pid: '6797439803370504192',
created_at: '2021-05-10 16:42:11',
updated_at: '2021-05-10 16:42:11',
children: []
},
{
id: '6797440115229589504',
tag: 'content-function-advert-create',
name: '新建广告',
pid: '6797439803370504192',
created_at: '2021-05-10 16:40:56',
updated_at: '2021-05-10 16:40:56',
children: []
}
]
},
{
id: '6797439526802292736',
tag: 'content-menu',
name: '菜单权限',
pid: '6797439344895328256',
created_at: '2021-05-10 16:38:35',
updated_at: '2021-05-10 16:38:35',
children: [
{
id: '6797441694053695488',
tag: 'content-menu-imgtext-list',
name: '图文列表',
pid: '6797439526802292736',
created_at: '2021-05-10 16:47:12',
updated_at: '2021-05-10 16:47:12',
children: []
},
{
id: '6797441594774519808',
tag: 'content-menu-acticle-list',
name: '文章列表',
pid: '6797439526802292736',
created_at: '2021-05-10 16:46:48',
updated_at: '2021-05-10 16:46:48',
children: []
},
{
id: '6797441488927064064',
tag: 'content-menu-advert-list',
name: '广告列表',
pid: '6797439526802292736',
created_at: '2021-05-10 16:46:23',
updated_at: '2021-05-10 16:46:23',
children: []
}
]
}
]
}
]
export { permissionList }
src/pages/settings/type/index.vue
浏览文件 @ 9c0bf5c6
<template>
<div class="ads">
<div class="type page_container">
<el-button class="btn-create" type="primary" @click="handleCreate" size="small">新建类型</el-button>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="项目类型" name="0" lazy>
<table-list v-bind="projectTableOptions" ref="tabList"></table-list>
<table-list v-bind="projectTableOptions" ref="tabList">
<!-- 项目Id -->
<template v-slot:table-id="{ row }"><span class="details-handle" @click="handleDetails(row)">{{row.id}}</span></template>
<!-- 状态 -->
<template v-slot:table-status="{ row }">
<el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用"></el-switch>
</template>
</table-list>
</el-tab-pane>
<el-tab-pane label="内容类型" name="1" lazy>
<table-list v-bind="contentTableOptions" ref="tabList"></table-list>
<table-list v-bind="contentTableOptions" ref="tabList">
<!-- 项目Id -->
<template v-slot:table-id="{ row }"><span class="details-handle" @click="handleDetails(row)">{{row.id}}</span></template>
<!-- 状态 -->
<template v-slot:table-status="{ row }">
<el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用"></el-switch>
</template>
</table-list>
</el-tab-pane>
</el-tabs>
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="440px" @close="handleDialogClose" :destroy-on-close="true">
<el-form :model="form" label-width="110px" ref="dialogForm" class="dialog-form">
<template v-if="activeName === '0'">
<el-form-item label="项目类型名称" prop="project_type_name" :rules="{ required: true, message: '请输入项目类型名称', trigger: 'blur' }">
<el-input v-model="form.project_type_name" size="small"></el-input>
</el-form-item>
</template>
<template v-else>
<el-form-item label="内容类型为：" prop="content_type" :rules="[{ required: true, message: '请选择手机号', trigger: 'change' }]">
<el-select v-model="form.content_type" placeholder="请选择角色" size="small" style="width:100%;">
<el-option :label="item.name" :value="item.id" v-for="item in contentTypeList" :key="item.id" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="参数ID为：" prop="query_id" :rules="{ required: true, message: '请输入参数ID', trigger: 'blur' }">
<el-input v-model="form.query_id" size="small"></el-input>
</el-form-item>
<el-form-item label="类型名称为：" prop="content_type_name" :rules="{ required: true, message: '请输入类型名称', trigger: 'blur' }">
<el-input v-model="form.content_type_name" size="small"></el-input>
</el-form-item>
</template>
</el-form>
<span slot="footer">
<el-button @click="handleDialogClose" size="mini">取 消</el-button>
<el-button type="primary" @click="handleDialogSubmit" size="mini">提 交</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import TableList from '@/components/TableList'
const defaultForm = {
project_type_name: '',
content_type: '',
query_id: '',
content_type_name: ''
}
export default {
components: { TableList },
data() {
......@@ -23,11 +70,14 @@ export default {
params: {}
},
columns: [
{ prop: 'id', label: '项目类型ID' },
{ prop: 'id', label: '项目类型ID', slots: 'table-id' },
{ prop: 'type', label: '项目类型' },
{ prop: 'author', label: '创建人' },
{ prop: 'create_time', label: '创建时间' },
{ prop: 'status', label: '状态' }
{ prop: 'status', label: '状态', slots: 'table-status' }
],
data: [
{ id: '123', type: '学位教育', author: '张三', create_time: '2021-04-23 09:00:31', status: 1 }
]
},
// 内容类型
......@@ -36,19 +86,77 @@ export default {
params: {}
},
columns: [
{ prop: 'id', label: '内容ID' },
{ prop: 'id', label: '内容ID', slots: 'table-id' },
{ prop: 'type_name', label: '类型名称' },
{ prop: 'type', label: '内容类型' },
{ prop: 'author', label: '创建人' },
{ prop: 'create_time', label: '创建时间' },
{ prop: 'query_id', label: '参数ID' },
{ prop: 'status', label: '状态' }
{ prop: 'status', label: '状态', slots: 'table-status' }
],
data: [
{ id: '123', type_name: '最新动态', type: '文章', author: '张三', create_time: '2021-04-23 09:00:31', query_id: '33', status: 1 }
]
},
contentTypeList: [
{ id: 0, name: '广告' },
{ id: 1, name: '文章' },
{ id: 2, name: '图文' }
],
dialogVisible: false,
dialogType: '',
form: Object.assign({}, defaultForm)
}
},
computed: {
dialogTitle() {
let text = this.dialogType === 'create' ? '新建' : '修改'
text += this.activeName === '0' ? '项目' : '内容'
return text + '类型'
}
},
methods: {
handleCreate() {
this.dialogType = 'create'
this.dialogVisible = true
},
handleDetails(val) {
this.dialogType = 'details'
this.dialogVisible = true
const isProject = this.activeName === '0'
this.form = {
project_type_name: isProject ? val.type : '',
content_type: isProject ? '' : val.type,
query_id: isProject ? '' : val.query_id,
content_type_name: isProject ? '' : val.type_name
}
},
methods: {}
handleDialogClose() {
this.dialogVisible = false
this.form = Object.assign({}, defaultForm)
},
handleDialogSubmit() {
this.$refs.dialogForm.validate(valid => {
if (valid) {
console.log('dialogForm')
} else {
return false
}
})
}
}
}
</script>
<style scoped>
.type{
box-sizing:border-box;
padding:15px;
position:relative;
}
.btn-create{
position:absolute;
right:20px;
top:16px;
z-index:1;
}
</style>
src/router/routes.js
浏览文件 @ 9c0bf5c6
......@@ -17,19 +17,19 @@ export default [
path: 'ads',
name: 'Ads',
component: () => import('@/pages/content-manage/ads/index'),
meta: { title: '广告列表', icon: '' }
meta: { title: '广告列表', icon: '', roles: ['content-menu-advert-list'] }
},
{
path: 'article',
name: 'Article',
component: () => import('@/pages/content-manage/article/index'),
meta: { title: '文章列表', icon: '' }
meta: { title: '文章列表', icon: '', roles: ['content-menu-acticle-list'] }
},
{
path: 'image-text',
name: 'ImageText',
component: () => import('@/pages/content-manage/image-text/index'),
meta: { title: '图文列表', icon: '' }
meta: { title: '图文列表', icon: '', roles: ['content-menu-imgtext-list'] }
}
]
},
......@@ -44,26 +44,48 @@ export default [
path: 'staff',
name: 'Staff',
component: () => import('@/pages/settings/staff/index'),
meta: { title: '员工管理', icon: '' }
meta: { title: '员工管理', icon: '', roles: ['setting-menu-user-manage'] }
},
{
path: 'project',
name: 'Project',
component: () => import('@/pages/settings/project/index'),
meta: { title: '项目管理', icon: '' }
meta: { title: '项目管理', icon: '', roles: ['setting-menu-project-manage'] }
},
{
path: 'type',
name: 'Type',
component: () => import('@/pages/settings/type/index'),
meta: { title: '类型管理', icon: '' }
meta: { title: '类型管理', icon: '', roles: ['setting-menu-type-manage'] }
},
{
path: 'role',
name: 'Role',
component: () => import('@/pages/settings/role/index'),
meta: { title: '高级设置', icon: '' }
meta: { title: '高级设置', icon: '', roles: ['setting-menu-advanced-setting'] }
}
]
},
{
path: '/error-page',
component: Layout,
redirect: '/error-page/404',
name: 'ErrorPage',
meta: { title: '访问出错', icon: 'el-icon-setting' },
children: [
{
path: '404',
name: '404',
component: () => import('@/pages/error-page/404'),
meta: { title: '404', icon: '' }
},
{
path: '401',
name: '401',
component: () => import('@/pages/error-page/401'),
meta: { title: '401', icon: '' }
}
]
},
{ path: '*', redirect: '/error-page', hidden: true }
]
src/style.scss
浏览文件 @ 9c0bf5c6
......@@ -108,12 +108,12 @@ body {
opacity: 0;
transform: translateX(30px);
}
/* element input,textarea font-family reset */
/* element-ui input,textarea font-family reset */
.el-input__inner, .el-textarea__inner{
font-family: 'PingFang SC', 'PingFangSC-Regular', 'Source Han Sans CN', -apple-system, 'Microsoft YaHei', 'Helvetica', 'Arial', Verdana,
'Hiragino Sans GB', 'Wenquanyi Micro Hei', sans-serif;
}
/* element drawer reset */
/* element-ui drawer reset */
.el-drawer__header{
padding:14px 16px;
margin:0;
......@@ -128,7 +128,32 @@ body {
height:calc(100% - 82px);
overflow-y: auto;
}
/* element-ui dialog reset */
.el-dialog__header{
padding:20px 16px 10px;
}
.el-dialog__body{
padding:10px 20px;
}
.el-dialog__footer{
text-align: center;
}
/* tinymce picker/popover z-index reset */
.tox-tinymce-aux{
z-index:999999 !important;
}
/* page_container background */
.page_container{
width: calc(100% - 20px);
height: calc(100% - 20px);
margin: 10px;
background: #fff;
border-radius: 5px;
}
/* element-ui table item hover */
.details-handle{
cursor:pointer;
}
.details-handle:hover{
color:#409EFF;
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论