提交 0ee2605e authored 作者: lihuihui's avatar lihuihui

update

上级 637daba9
...@@ -95,3 +95,6 @@ textarea:focus { ...@@ -95,3 +95,6 @@ textarea:focus {
color: rgba(0,0,0,1); color: rgba(0,0,0,1);
line-height: 100%; line-height: 100%;
} }
.tox-notifications-container{
display: none !important;
}
...@@ -13,6 +13,10 @@ ...@@ -13,6 +13,10 @@
> >
</el-date-picker> </el-date-picker>
</template> </template>
<template v-slot:layout="{ row }">
<div>{{ row.layout_name }}</div>
<PageTemplate :type="row.layout"></PageTemplate>
</template>
</app-list> </app-list>
<el-button @click="confirmBanner" type="primary">确认</el-button> <el-button @click="confirmBanner" type="primary">确认</el-button>
</app-card> </app-card>
...@@ -21,8 +25,12 @@ ...@@ -21,8 +25,12 @@
<script> <script>
// 接口 // 接口
import { getPagesList } from '../api' import { getPagesList } from '../api'
import PageTemplate from '@/components/base/PageTemplate.vue'
export default { export default {
components: {
PageTemplate
},
props: { props: {
selectData: { selectData: {
type: Array type: Array
...@@ -78,11 +86,10 @@ export default { ...@@ -78,11 +86,10 @@ export default {
} }
], ],
columns: [ columns: [
{ label: 'id', prop: 'id', align: 'center' }, { label: '页面类型', prop: 'type_name' },
{ label: '页面类型', prop: 'type_name', align: 'center' }, { label: '页面模板', slots: 'layout', width: '350px' },
{ label: '页面模板', prop: 'layout_name', align: 'center' }, { label: '页面名称', prop: 'title' },
{ label: '标题', prop: 'title', align: 'center' }, { label: '创建时间', prop: 'created_time' }
{ label: '创建时间', prop: 'created_time', align: 'center' }
] ]
} }
} }
......
<template> <template>
<app-card class="register-box"> <app-card class="register-box">
<app-list @selection-change="selectionChange" v-bind="tableOptions" ref="list"> <app-list @selection-change="selectionChange" v-bind="tableOptions" ref="list">
<!-- <div class="line"></div> -->
<template v-slot:filter-time> <template v-slot:filter-time>
<el-date-picker <el-date-picker
v-model="filterDate" v-model="filterDate"
...@@ -107,7 +106,8 @@ export default { ...@@ -107,7 +106,8 @@ export default {
this.createdEnd = '' this.createdEnd = ''
} }
} }
} },
mounted() {}
} }
</script> </script>
......
...@@ -13,6 +13,10 @@ ...@@ -13,6 +13,10 @@
> >
</el-date-picker> </el-date-picker>
</template> </template>
<template v-slot:layout="{ row }">
<div>{{ row.layout_name }}</div>
<PageTemplate :type="row.layout"></PageTemplate>
</template>
</app-list> </app-list>
<el-button @click="confirmBanner" type="primary">确认</el-button> <el-button @click="confirmBanner" type="primary">确认</el-button>
</app-card> </app-card>
...@@ -21,8 +25,12 @@ ...@@ -21,8 +25,12 @@
<script> <script>
// 接口 // 接口
import { getPagesList } from '../api' import { getPagesList } from '../api'
import PageTemplate from '@/components/base/PageTemplate.vue'
export default { export default {
components: {
PageTemplate
},
props: { props: {
selectData: { selectData: {
type: Array type: Array
...@@ -79,11 +87,10 @@ export default { ...@@ -79,11 +87,10 @@ export default {
], ],
columns: [ columns: [
{ type: 'selection', prop: 'selection', align: 'center' }, { type: 'selection', prop: 'selection', align: 'center' },
{ label: 'id', prop: 'id', align: 'center' }, { label: '页面类型', prop: 'type_name' },
{ label: '页面类型', prop: 'type_name', align: 'center' }, { label: '页面模板', slots: 'layout', width: '350px' },
{ label: '页面模板', prop: 'layout_name', align: 'center' }, { label: '页面名称', prop: 'title' },
{ label: '标题', prop: 'title', align: 'center' }, { label: '创建时间', prop: 'created_time' }
{ label: '创建时间', prop: 'created_time', align: 'center' }
] ]
} }
} }
......
<template> <template>
<div>
<div class="breadcrumb">图文管理</div>
<app-card class="register-box"> <app-card class="register-box">
<app-list v-bind="tableOptions" ref="list"> <app-list v-bind="tableOptions" ref="list">
<div class="line"></div> <div class="line"></div>
...@@ -23,7 +25,7 @@ ...@@ -23,7 +25,7 @@
<el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch> <el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
</template> </template>
<template v-slot:sort-select="{ row }"> <template v-slot:sort-select="{ row }">
<el-select v-model="row.sort" placeholder="请选择" @change="updateStatus(row)"> <el-select style="width: 70px" v-model="row.sort" placeholder="请选择" @change="updateStatus(row)">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select> </el-select>
</template> </template>
...@@ -33,6 +35,7 @@ ...@@ -33,6 +35,7 @@
</template> </template>
</app-list> </app-list>
</app-card> </app-card>
</div>
</template> </template>
<script> <script>
...@@ -95,19 +98,19 @@ export default { ...@@ -95,19 +98,19 @@ export default {
} }
], ],
columns: [ columns: [
{ label: 'id', prop: 'id', align: 'center' }, { label: '封面图', slots: 'picture', width: '230px' },
{ label: '封面图', slots: 'picture', align: 'center', width: '170px' }, { label: '标题', prop: 'title' },
{ label: '标题', prop: 'title', align: 'center' }, { label: '摘要', prop: 'remark' },
{ label: '摘要', prop: 'remark', align: 'center' }, { label: '备注', prop: 'comment' },
{ label: '备注', prop: 'comment', align: 'center' }, { label: 'id', prop: 'id' },
{ label: '创建时间', prop: 'created_time' },
{ label: '展示顺序', slots: 'sort-select' },
{ {
label: '发布状态', label: '发布状态',
slots: 'release-status', slots: 'release-status',
align: 'center' align: 'center'
}, },
{ label: '创建时间', prop: 'created_time', align: 'center' }, { label: '操作', slots: 'table-x' }
{ label: '排序', slots: 'sort-select', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' }
] ]
} }
} }
......
<template> <template>
<div class="create-box"> <div class="create-box">
<app-card :title="!$route.query.id ? '新建菜单' : '编辑菜单'"> <div class="breadcrumb">
{{ !$route.query.id ? '新建菜单' : '编辑菜单' }}
</div>
<app-card>
<el-alert
style="width: 700px; margin-left: 30px; margin-bottom: 30px; background: rgba(158, 194, 246, 0.2)"
title="图文信息数据显示策略:跳转链接 > 正文 > 关联选择"
type="info"
show-icon
>
</el-alert>
<el-form <el-form
:model="ruleForm" :model="ruleForm"
:rules="rules" :rules="rules"
ref="ruleForm" ref="ruleForm"
label-width="100px" label-width="100px"
class="demo-ruleForm" class="demo-ruleForm"
style="width: 80%; margin: 0 auto" style="width: 700px"
> >
<el-form-item label="标题" prop="title">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="封面图" prop="picture"> <el-form-item label="封面图" prop="picture">
<div class="upload-img-box">
<upload-image v-model="ruleForm.picture"></upload-image> <upload-image v-model="ruleForm.picture"></upload-image>
<div class="upload-img-tips">
<div>只能上传jpg/png文件,且不超过500kb</div>
<div>建议竖图上传尺寸 96×120</div>
<div>建议横图上传尺寸 311×120</div>
</div>
</div>
</el-form-item> </el-form-item>
<el-form-item label="标题" prop="title"> <el-form-item label="摘要">
<el-input v-model="ruleForm.title"></el-input> <el-input v-model="ruleForm.remark"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="备注"> <el-form-item label="备注">
<el-input v-model="ruleForm.comment"></el-input> <el-input v-model="ruleForm.comment"></el-input>
...@@ -21,16 +41,50 @@ ...@@ -21,16 +41,50 @@
<el-form-item label="跳转链接"> <el-form-item label="跳转链接">
<el-input v-model="ruleForm.url"></el-input> <el-input v-model="ruleForm.url"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="摘要">
<el-input v-model="ruleForm.remark"></el-input>
</el-form-item>
<el-form-item label="正文" prop="content"> <el-form-item label="正文" prop="content">
<v-editor v-model="ruleForm.content"></v-editor> <v-editor v-model="ruleForm.content"></v-editor>
</el-form-item> </el-form-item>
<el-form-item label="是否启用" prop="status"> <el-form-item label="关联内容">
<el-switch v-model="status"></el-switch> <div class="select-btn" @click="drawer = true">
<i class="el-icon-plus"></i>
<div class="text">选择内容</div>
</div>
<div class="tabs-nav">
<div @click="active = 1" :class="active == 1 ? 'li active' : 'li'">
关联banner ({{ bannerList.length }})
</div>
<div @click="active = 3" :class="active == 3 ? 'li active' : 'li'">关联功能区 ({{ menuList.length }})</div>
<div @click="active = 2" :class="active == 2 ? 'li active' : 'li'">关联页面 ({{ pagesList.length }})</div>
</div>
<app-list v-bind="bannerTableOptions" ref="list" v-if="active == 1">
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleBannerDelete(row)">删除</el-button>
</template>
<template v-slot:picture="{ row }">
<div
:style="`background-image:url(${row.picture});background-size: cover;width:200px;height:100px;`"
></div>
</template>
</app-list>
<app-list v-bind="menuTableOptions" ref="list" v-if="active == 3">
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleMenuDelete(row)">删除</el-button>
</template>
<template v-slot:picture="{ row }">
<div :style="`background-image:url(${row.picture});background-size: cover;width:50px;height:40px;`"></div>
</template>
</app-list>
<app-list v-bind="pagesTableOptions" ref="list" v-if="active == 2">
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handlePagesDelete(row)">删除</el-button>
</template>
<template v-slot:layout="{ row }">
<div>{{ row.layout_name }}</div>
<PageTemplate :type="row.layout"></PageTemplate>
</template>
</app-list>
</el-form-item> </el-form-item>
<el-form-item label="关联选择"> <!-- <el-form-item label="关联选择">
<el-button type="primary" @click="drawer = true">点击选择</el-button> <el-button type="primary" @click="drawer = true">点击选择</el-button>
<el-card class="box-card" style="margin-top: 20px"> <el-card class="box-card" style="margin-top: 20px">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
...@@ -77,6 +131,9 @@ ...@@ -77,6 +131,9 @@
</template> </template>
</app-list> </app-list>
</el-card> </el-card>
</el-form-item> -->
<el-form-item label="是否启用" prop="status">
<el-switch v-model="status"></el-switch>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<div style="padding-top: 20px; width: 200px; margin: 0 auto"> <div style="padding-top: 20px; width: 200px; margin: 0 auto">
...@@ -108,17 +165,20 @@ import Pages from '../components/pages.vue' ...@@ -108,17 +165,20 @@ import Pages from '../components/pages.vue'
import VEditor from '@/components/tinymce/Index.vue' import VEditor from '@/components/tinymce/Index.vue'
import UploadImage from '@/components/upload/UploadImage.vue' import UploadImage from '@/components/upload/UploadImage.vue'
import { createEssay, getDetails, updateEssay } from '../api' import { createEssay, getDetails, updateEssay } from '../api'
import PageTemplate from '@/components/base/PageTemplate.vue'
export default { export default {
components: { components: {
UploadImage, UploadImage,
VEditor, VEditor,
Banner, Banner,
Menu, Menu,
Pages Pages,
PageTemplate
}, },
data() { data() {
return { return {
activeName: '0', active: 1,
activeName: '1',
status: true, status: true,
drawer: false, drawer: false,
direction: 'rtl', direction: 'rtl',
...@@ -153,11 +213,9 @@ export default { ...@@ -153,11 +213,9 @@ export default {
return { return {
hasPagination: false, hasPagination: false,
columns: [ columns: [
{ label: 'id', prop: 'id', align: 'center' }, { label: '图片', slots: 'picture', width: '250px' },
{ label: '标题', prop: 'title', align: 'center' }, { label: '标题', prop: 'title', width: '250px' },
{ label: '图片', slots: 'picture', align: 'center', width: '200px' }, { label: '操作', slots: 'table-x' }
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' }
], ],
data: this.bannerList data: this.bannerList
} }
...@@ -166,11 +224,9 @@ export default { ...@@ -166,11 +224,9 @@ export default {
return { return {
hasPagination: false, hasPagination: false,
columns: [ columns: [
{ label: 'id', prop: 'id', align: 'center' }, { label: '菜单图标', slots: 'picture', align: 'center' },
{ label: '菜单图标', slots: 'picture', align: 'center', width: '50px' },
{ label: '菜单名称', prop: 'title', align: 'center' }, { label: '菜单名称', prop: 'title', align: 'center' },
{ label: '备注', prop: 'comment', align: 'center' }, { label: '备注', prop: 'comment', align: 'center' },
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' } { label: '操作', slots: 'table-x', align: 'center' }
], ],
data: this.menuList data: this.menuList
...@@ -180,7 +236,6 @@ export default { ...@@ -180,7 +236,6 @@ export default {
return { return {
hasPagination: false, hasPagination: false,
columns: [ columns: [
{ label: 'id', prop: 'id', align: 'center' },
{ {
label: '页面类型', label: '页面类型',
prop: 'type_name', prop: 'type_name',
...@@ -193,9 +248,8 @@ export default { ...@@ -193,9 +248,8 @@ export default {
return data[scope.row.type] return data[scope.row.type]
} }
}, },
{ label: '页面模板', prop: 'layout_name', align: 'center' }, { label: '页面模板', slots: 'layout', width: '300px' },
{ label: '标题', prop: 'title', align: 'center' }, { label: '页面名称', prop: 'title', align: 'center' },
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' } { label: '操作', slots: 'table-x', align: 'center' }
], ],
data: this.pagesList data: this.pagesList
...@@ -227,17 +281,23 @@ export default { ...@@ -227,17 +281,23 @@ export default {
// banner关联 // banner关联
bannerSelectionConfirm(value) { bannerSelectionConfirm(value) {
this.drawer = false this.drawer = false
this.bannerList = value value.forEach(item => {
this.bannerList.push(item)
})
}, },
// 关联菜单 // 关联菜单
menuSelectionConfirm(value) { menuSelectionConfirm(value) {
this.drawer = false this.drawer = false
this.menuList = value value.forEach(item => {
this.menuList.push(item)
})
}, },
// 关联页面 // 关联页面
pagesSelectionConfirm(value) { pagesSelectionConfirm(value) {
this.drawer = false this.drawer = false
this.pagesList = value value.forEach(item => {
this.pagesList.push(item)
})
}, },
// 提交 // 提交
submitForm() { submitForm() {
...@@ -302,4 +362,52 @@ export default { ...@@ -302,4 +362,52 @@ export default {
} }
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.upload-img-box {
display: flex;
.upload-img-tips {
margin-left: 20px;
// padding-top: 10px;
div {
font-size: 12px;
line-height: 23px;
color: #606266;
}
}
}
.select-btn {
display: flex;
justify-content: space-between;
align-items: center;
height: 32px;
border: 1px solid rgba(0, 0, 0, 0.15);
padding: 0 17px;
width: fit-content;
cursor: pointer;
i {
color: #363636;
}
.text {
font-size: 14px;
color: #161616;
margin-left: 5px;
}
}
.tabs-nav {
display: flex;
padding: 10px 0;
.li {
line-height: 40px;
box-sizing: border-box;
font-size: 14px;
color: #161616;
margin-right: 50px;
cursor: pointer;
&.active {
font-weight: 600;
color: #1655b2;
border-bottom: 1px solid #1655b2;
}
}
}
</style>
...@@ -18,15 +18,15 @@ ...@@ -18,15 +18,15 @@
<el-radio-group v-model="ruleForm.layout"> <el-radio-group v-model="ruleForm.layout">
<div style="margin-top: 10px; padding-bottom: 10px"> <div style="margin-top: 10px; padding-bottom: 10px">
<el-radio label="1">左图右文</el-radio> <el-radio label="1">左图右文</el-radio>
<PageTemplate v-if="ruleForm.layout == '1'" type="1" style="margin-top: 10px;"></PageTemplate> <PageTemplate v-if="ruleForm.layout == '1'" type="1" style="margin-top: 10px"></PageTemplate>
</div> </div>
<div style="margin-top: 10px; padding-bottom: 10px"> <div style="margin-top: 10px; padding-bottom: 10px">
<el-radio label="2">上图下文</el-radio> <el-radio label="2">上图下文</el-radio>
<PageTemplate v-if="ruleForm.layout == '2'" type="2" style="margin-top: 10px;"></PageTemplate> <PageTemplate v-if="ruleForm.layout == '2'" type="2" style="margin-top: 10px"></PageTemplate>
</div> </div>
<div style="margin-top: 10px; padding-bottom: 10px"> <div style="margin-top: 10px; padding-bottom: 10px">
<el-radio label="3">文本</el-radio> <el-radio label="3">文本</el-radio>
<PageTemplate v-if="ruleForm.layout == '3'" type="3" style="margin-top: 10px;"></PageTemplate> <PageTemplate v-if="ruleForm.layout == '3'" type="3" style="margin-top: 10px"></PageTemplate>
</div> </div>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论