Skip to content

P
project-road-admin
提交 637daba9 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update

上级 7c897c13
隐藏空白字符变更
内嵌 并排
正在显示 包含 689 行增加 和 348 行删除
src/assets/css/base.css
浏览文件 @ 637daba9
......@@ -86,5 +86,12 @@ textarea:focus {
}
:root {
--main-color: rgba(184, 1, 64, 1);
--main-color: #1655B2;
}
.breadcrumb{
padding-bottom: 20px;
font-size: 16px;
font-weight: bold;
color: rgba(0,0,0,1);
line-height: 100%;
}
src/assets/theme/style.scss
浏览文件 @ 637daba9
$--color-primary: rgba(184, 1, 64, 1);
$--color-primary: #1655B2;
/* 改变 icon 字体路径变量，必需 */
$--font-path: 'element-ui/lib/theme-chalk/fonts';
......
src/components/base/PageTemplate.vue 0 → 100644
浏览文件 @ 637daba9
<template>
<div class="create-box">
<template v-if="type == 1">
<div class="l-img-r-text-box">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/ztyw.png" />
<div class="text">文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位</div>
</div>
</template>
<template v-if="type == '2'">
<div class="t-img-b-text">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/stxw.png" />
<div class="text">文字占位文字占位文字占位 文字占位文字占位文字占位 文字占位文字占位</div>
</div>
</template>
<template v-if="type == '3'">
<div class="c-text">文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位</div>
</template>
</div>
</template>
<script>
export default {
props: {
type: {
type: String
}
},
data() {
return {}
},
computed: {},
methods: {}
}
</script>
<style lang="scss" scoped>
.l-img-r-text-box {
width: 280px;
padding: 14px 22px 14px 12px;
border: 1px solid #f0f0f0;
display: flex;
border-radius: 6px;
img {
width: 90px;
margin-right: 12px;
}
.text {
font-size: 12px;
color: #363636;
line-height: 17px;
}
}
.t-img-b-text {
width: 280px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 12px 14px 13px;
img {
width: 252px;
display: block;
}
.text {
font-size: 12px;
color: #363636;
line-height: 17px;
margin-top: 18px;
}
}
.c-text {
width: 280px;
font-size: 12px;
color: #363636;
line-height: 17px;
border-radius: 6px;
border: 1px solid #f0f0f0;
padding: 20px;
}
</style>
src/modules/banner/components/essay.vue
浏览文件 @ 637daba9
......@@ -80,7 +80,6 @@ export default {
}
],
columns: [
{ label: 'id', prop: 'id', align: 'center' },
{ label: '封面图', slots: 'picture', align: 'center', width: '170px' },
{ label: '标题', prop: 'title', align: 'center' },
{ label: '摘要', prop: 'remark', align: 'center' },
......
src/modules/banner/views/List.vue
浏览文件 @ 637daba9
<template>
<app-card class="register-box">
<app-list v-bind="tableOptions" ref="list">
<div class="line"></div>
<div class="btn-box">
<el-button type="primary" @click="$router.push({ path: '/banner/update' })">新建Banner</el-button>
</div>
<template v-slot:filter-time>
<el-date-picker
v-model="filterDate"
@change="changeDate"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</template>
<template v-slot:picture="{ row }">
<div :style="`background-image:url(${row.picture});background-size: cover;width:200px;height:100px;`"></div>
</template>
<template v-slot:release-status="{ row }">
<el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
</template>
<template v-slot:sort-select="{ row }">
<el-select 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-select>
</template>
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
</app-list>
</app-card>
<div>
<div class="breadcrumb">Banner管理</div>
<app-card class="register-box">
<app-list v-bind="tableOptions" ref="list">
<div class="line"></div>
<div class="btn-box">
<el-button type="primary" @click="$router.push({ path: '/banner/update' })">新建Banner</el-button>
</div>
<template v-slot:filter-time>
<el-date-picker
v-model="filterDate"
@change="changeDate"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</template>
<template v-slot:picture="{ row }">
<div :style="`background-image:url(${row.picture});background-size: cover;width:200px;height:100px;`"></div>
</template>
<template v-slot:release-status="{ row }">
<el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
</template>
<template v-slot:sort-select="{ 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-select>
</template>
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
</app-list>
</app-card>
</div>
</template>
<script>
......@@ -95,17 +98,16 @@ export default {
}
],
columns: [
{ label: 'id', prop: 'id', align: 'center' },
{ label: '标题', prop: 'title', align: 'center' },
{ label: '图片', slots: 'picture', align: 'center', width: '200px' },
{ label: '图片', slots: 'picture', width: '240px' },
{ label: '标题', prop: 'title' },
{ label: 'id', prop: 'id' },
{ label: '创建时间', prop: 'created_time' },
{ label: '展示顺序', slots: 'sort-select' },
{
label: '发布状态',
slots: 'release-status',
align: 'center'
slots: 'release-status'
},
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '排序', slots: 'sort-select', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' }
{ label: '操作', slots: 'table-x' }
]
}
}
......
src/modules/banner/views/Update.vue
浏览文件 @ 637daba9
<template>
<div class="create-box">
<app-card :title="!$route.query.id ? '新建Banner' : '编辑Banner'">
<div class="breadcrumb">
{{ !$route.query.id ? '添加Banner' : '编辑Banner' }}
</div>
<app-card>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
style="width: 80%; margin: 0 auto"
style="width: 500px"
>
<el-form-item label="标题">
<el-input v-model="ruleForm.title"></el-input>
<el-input v-model="ruleForm.title" placeholder="请输入banner标题"></el-input>
</el-form-item>
<el-form-item label="上传banner" prop="banner">
<upload-image v-model="ruleForm.picture"></upload-image>
<div class="upload-img-box">
<upload-image v-model="ruleForm.picture"></upload-image>
<div class="upload-img-tips">
<div>只能上传jpg/png文件，且不超过500kb</div>
<div>建议banner图片上传尺寸 750×592</div>
<div>建议banner内容区尺寸 750×320</div>
</div>
</div>
</el-form-item>
<el-form-item label="是否发布" prop="status">
<el-switch v-model="status"></el-switch>
<el-form-item label="关联内容">
<el-radio-group v-model="ruleForm.type">
<el-radio label="2">关联页面</el-radio>
<el-radio label="1">关联图文</el-radio>
<el-radio label="3">跳转链接</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="关联选择">
<el-button type="primary" @click="drawer = true">点击选择</el-button>
<el-card class="box-card" style="margin-top: 20px">
<div slot="header" class="clearfix">
<span>{{ ruleForm.type == '1' ? '关联图文' : ruleForm.type == '2' ? '关联页面' : '跳转链接' }}</span>
<el-form-item label="关联页面" v-if="ruleForm.type == '2'">
<div class="select-btn" @click="drawer = true" v-if="pagesList.length === 0">
<i class="el-icon-plus"></i>
<div class="text">选择页面</div>
</div>
<div class="tw-template" v-else>
<div class="head">
<div class="title">{{ pagesList[0].title }}</div>
<div class="tool-btn">
<div class="btn" @click="drawer = true">编辑</div>
<div class="btn" @click="handlePagesDelete(pagesList[0])">删除</div>
</div>
</div>
<app-list v-if="ruleForm.type == '1'" v-bind="essayTableOptions" ref="list">
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleEssayDelete(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-if="ruleForm.type == '2'" v-bind="pagesTableOptions" ref="list">
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handlePagesDelete(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>
<div v-if="ruleForm.type == '3'">{{ ruleForm.url }}</div>
</el-card>
<PageTemplate :type="pagesList[0].layout"></PageTemplate>
</div>
</el-form-item>
<el-form-item label="关联图文" v-if="ruleForm.type == '1'">
<div class="select-btn" @click="drawer = true" v-if="essayList.length === 0">
<i class="el-icon-plus"></i>
<div class="text">选择图文</div>
</div>
<div class="essay-card" v-else>
<img :src="essayList[0].picture" />
<div class="right-text">
<div class="head">
<div class="title">{{ essayList[0].title }}</div>
<div class="tool-btn">
<div @click="drawer = true">编辑</div>
<div @click="handleEssayDelete(essayList[0])">删除</div>
</div>
</div>
<div class="text">{{ essayList[0].remark }}</div>
</div>
</div>
</el-form-item>
<el-form-item label="跳转链接" v-if="ruleForm.type == '3'" prop="url">
<el-input v-model="ruleForm.url" placeholder="请填写跳转链接"></el-input>
</el-form-item>
<el-form-item label="是否发布" prop="status">
<el-switch v-model="status"></el-switch>
</el-form-item>
<el-form-item>
<div style="padding-top: 20px">
......@@ -55,14 +81,7 @@
</el-form-item>
</el-form>
</app-card>
<el-drawer :destroy-on-close="true" size="60%" :visible.sync="drawer" :direction="direction">
<div style="padding: 0 20px">
<el-tabs v-model="ruleForm.type">
<el-tab-pane label="关联图文" name="1"></el-tab-pane>
<el-tab-pane label="关联页面" name="2"></el-tab-pane>
<el-tab-pane label="跳转链接" name="3"></el-tab-pane>
</el-tabs>
</div>
<el-drawer size="60%" :visible.sync="drawer" :direction="direction">
<essay v-if="ruleForm.type == '1'" @selectionConfirm="essaySelectionConfirm" :selectData="essayList"></essay>
<pages v-if="ruleForm.type == '2'" @selectionConfirm="pagesSelectionConfirm" :selectData="pagesList"></pages>
<div style="padding: 0 20px">
......@@ -79,12 +98,14 @@
import essay from '../components/essay.vue'
import pages from '../components/pages.vue'
import UploadImage from '@/components/upload/UploadImage.vue'
import PageTemplate from '@/components/base/PageTemplate.vue'
import { createBanner, getDetails, updateBanner } from '../api'
export default {
components: {
UploadImage,
essay,
pages
pages,
PageTemplate
},
data() {
return {
......@@ -103,65 +124,14 @@ export default {
},
rules: {
banner: [{ required: true, message: '请上传banner', trigger: 'blur' }],
status: [{ required: true, message: '', trigger: 'blur' }]
status: [{ required: true, message: '', trigger: 'blur' }],
url: [{ required: true, message: '请填写跳转链接', trigger: 'blur' }]
}
}
},
computed: {
id() {
return this.$route.query.id
},
essayTableOptions() {
return {
hasPagination: false,
columns: [
{ label: 'id', prop: 'id', align: 'center' },
{ label: '封面图', slots: 'picture', align: 'center', width: '170px' },
{ label: '标题', prop: 'title', align: 'center' },
{ label: '摘要', prop: 'remark', align: 'center' },
{ label: '备注', prop: 'comment', align: 'center' },
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' }
],
data: this.essayList
}
},
pagesTableOptions() {
return {
hasPagination: false,
columns: [
{ label: 'id', prop: 'id', align: 'center' },
{
label: '页面类型',
prop: 'type',
align: 'center',
computed: scope => {
const data = {
1: '首页展示区',
2: '二级列表页'
}
return data[scope.row.type]
}
},
{
label: '页面模板',
prop: 'layout',
align: 'center',
computed: scope => {
const data = {
1: '左图又文字',
2: '上图下文',
3: '文本'
}
return data[scope.row.layout]
}
},
{ label: '标题', prop: 'title', align: 'center' },
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' }
],
data: this.pagesList
}
}
},
methods: {
......@@ -242,4 +212,154 @@ export default {
}
</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;
}
}
.select-page-box {
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 20px;
.head {
display: flex;
justify-content: space-between;
.title {
font-size: 14px;
color: #000000;
line-height: 100%;
}
.tool-btn {
display: flex;
.btn {
cursor: pointer;
margin-left: 10px;
font-size: 14px;
color: #1655b2;
line-height: 100%;
}
}
}
.card1 {
padding: 14px 22px 14px 12px;
border: 1px solid #f0f0f0;
display: flex;
border-radius: 6px;
margin-top: 10px;
img {
width: 90px;
margin-right: 12px;
}
.text {
font-size: 12px;
color: #363636;
line-height: 17px;
}
}
}
.tw-template {
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 20px;
.head {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.title {
font-size: 14px;
color: #000000;
line-height: 100%;
}
.tool-btn {
display: flex;
.btn {
cursor: pointer;
margin-left: 10px;
font-size: 14px;
color: #1655b2;
line-height: 100%;
}
}
}
}
::v-deep {
.el-drawer__header {
margin-bottom: 0 !important;
}
}
.drawer-btn {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 70px;
background: #ffffff;
box-shadow: 0px 0px 14px 0px rgba(211, 211, 211, 0.5);
}
.essay-card {
border-radius: 4px;
border: 1px solid #dcdfe6;
display: flex;
padding: 20px;
width: 480px;
img {
width: 158px;
height: 79px;
min-width: 158px;
}
.right-text {
width: 250px;
margin-left: 25px;
.text {
font-size: 14px;
color: #909399;
line-height: 24px;
margin-top: 10px;
}
.head {
display: flex;
justify-content: space-between;
line-height: 100%;
.title {
font-size: 16px;
color: #000000;
}
.tool-btn {
display: flex;
div {
font-size: 14px;
color: #1655b2;
margin-left: 15px;
cursor: pointer;
}
}
}
}
}
</style>
src/modules/essay/views/Update.vue
浏览文件 @ 637daba9
......@@ -118,7 +118,7 @@ export default {
},
data() {
return {
activeName: '1',
activeName: '0',
status: true,
drawer: false,
direction: 'rtl',
......@@ -193,19 +193,7 @@ export default {
return data[scope.row.type]
}
},
{
label: '页面模板',
prop: 'layout_name',
align: 'center',
computed: scope => {
const data = {
1: '左图又文字',
2: '上图下文',
3: '文本'
}
return data[scope.row.layout]
}
},
{ label: '页面模板', prop: 'layout_name', align: 'center' },
{ label: '标题', prop: 'title', align: 'center' },
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' }
......
src/modules/menu/views/List.vue
浏览文件 @ 637daba9
<template>
<app-card class="register-box">
<app-list v-bind="tableOptions" ref="list">
<div class="line"></div>
<div class="btn-box">
<el-button type="primary" @click="$router.push({ path: '/menu/update' })">新建菜单</el-button>
</div>
<template v-slot:filter-time>
<el-date-picker
v-model="filterDate"
@change="changeDate"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</template>
<template v-slot:picture="{ row }">
<div :style="`background-image:url(${row.picture});background-size: cover;width:50px;height:40px;`"></div>
</template>
<template v-slot:release-status="{ row }">
<el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
</template>
<template v-slot:sort-select="{ row }">
<el-select 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-select>
</template>
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
</app-list>
</app-card>
<div>
<div class="breadcrumb">菜单管理</div>
<app-card class="register-box">
<app-list v-bind="tableOptions" ref="list">
<div class="line"></div>
<div class="btn-box">
<el-button type="primary" @click="$router.push({ path: '/menu/update' })">新建菜单</el-button>
</div>
<template v-slot:filter-time>
<el-date-picker
v-model="filterDate"
@change="changeDate"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</template>
<template v-slot:picture="{ row }">
<div :style="`background-image:url(${row.picture});background-size: cover;width:50px;height:40px;`"></div>
</template>
<template v-slot:release-status="{ row }">
<el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
</template>
<template v-slot:sort-select="{ 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-select>
</template>
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
</app-list>
</app-card>
</div>
</template>
<script>
......@@ -95,18 +98,18 @@ export default {
}
],
columns: [
{ label: 'id', prop: 'id', align: 'center' },
{ label: '菜单图标', slots: 'picture', align: 'center', width: '50px' },
{ label: '菜单名称', prop: 'title', align: 'center' },
{ label: '备注', prop: 'comment', align: 'center' },
{ label: '菜单图标', slots: 'picture' },
{ label: '菜单名称', prop: 'title' },
{ label: '备注', prop: 'comment' },
{ label: 'id', prop: 'id' },
{ label: '创建时间', prop: 'created_time' },
{ label: '展示顺序', slots: 'sort-select' },
{
label: '发布状态',
slots: 'release-status',
align: 'center'
},
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '排序', slots: 'sort-select', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' }
{ label: '操作', slots: 'table-x' }
]
}
}
......
src/modules/menu/views/Update.vue
浏览文件 @ 637daba9
<template>
<div class="create-box">
<app-card :title="!$route.query.id ? '新建菜单' : '编辑菜单'">
<div class="breadcrumb">
{{ !$route.query.id ? '新建菜单' : '编辑菜单' }}
</div>
<app-card>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
style="width: 80%; margin: 0 auto"
style="width: 500px"
>
<el-form-item label="菜单名称" prop="title">
<el-input v-model="ruleForm.title"></el-input>
<el-input v-model="ruleForm.title" placeholder="请填写菜单名称"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="ruleForm.comment"></el-input>
<el-input type="textarea" v-model="ruleForm.comment" placeholder="请填写备注"></el-input>
</el-form-item>
<el-form-item label="菜单图标" prop="picture">
<upload-image v-model="ruleForm.picture"></upload-image>
<div class="upload-img-box">
<upload-image v-model="ruleForm.picture"></upload-image>
<div class="upload-img-tips">
<div>只能上传jpg/png文件，且不超过500kb</div>
<div>建议菜单图片上传尺寸 40×40</div>
</div>
</div>
</el-form-item>
<el-form-item label="是否启用" prop="status">
<el-switch v-model="status"></el-switch>
<el-form-item label="关联内容">
<el-radio-group v-model="ruleForm.type">
<el-radio label="2">关联页面</el-radio>
<el-radio label="1">关联图文</el-radio>
<el-radio label="3">跳转链接</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="关联选择">
<el-button type="primary" @click="drawer = true">点击选择</el-button>
<el-card class="box-card" style="margin-top: 20px">
<div slot="header" class="clearfix">
<span>{{ ruleForm.type == '1' ? '关联图文' : ruleForm.type == '2' ? '关联页面' : '跳转链接' }}</span>
<el-form-item label="关联页面" v-if="ruleForm.type == '2'">
<div class="select-btn" @click="drawer = true" v-if="pagesList.length === 0">
<i class="el-icon-plus"></i>
<div class="text">选择页面</div>
</div>
<div class="tw-template" v-else>
<div class="head">
<div class="title">{{ pagesList[0].title }}</div>
<div class="tool-btn">
<div class="btn" @click="drawer = true">编辑</div>
<div class="btn" @click="handlePagesDelete(pagesList[0])">删除</div>
</div>
</div>
<app-list v-if="ruleForm.type == '1'" v-bind="essayTableOptions" ref="list">
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleEssayDelete(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-if="ruleForm.type == '2'" v-bind="pagesTableOptions" ref="list">
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handlePagesDelete(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>
<div v-if="ruleForm.type == '3'">{{ ruleForm.url }}</div>
</el-card>
<PageTemplate :type="pagesList[0].layout"></PageTemplate>
</div>
</el-form-item>
<el-form-item label="关联图文" v-if="ruleForm.type == '1'">
<div class="select-btn" @click="drawer = true" v-if="essayList.length === 0">
<i class="el-icon-plus"></i>
<div class="text">选择图文</div>
</div>
<div class="essay-card" v-else>
<img :src="essayList[0].picture" />
<div class="right-text">
<div class="head">
<div class="title">{{ essayList[0].title }}</div>
<div class="tool-btn">
<div @click="drawer = true">编辑</div>
<div @click="handleEssayDelete(essayList[0])">删除</div>
</div>
</div>
<div class="text">{{ essayList[0].remark }}</div>
</div>
</div>
</el-form-item>
<el-form-item label="跳转链接" v-if="ruleForm.type == '3'" prop="url">
<el-input v-model="ruleForm.url" placeholder="请填写跳转链接"></el-input>
</el-form-item>
<el-form-item label="是否启用" prop="status">
<el-switch v-model="status"></el-switch>
</el-form-item>
<el-form-item>
<div style="padding-top: 20px">
......@@ -59,18 +84,13 @@
</el-form>
</app-card>
<el-drawer size="60%" :visible.sync="drawer" :direction="direction">
<div style="padding: 0 20px">
<el-tabs v-model="ruleForm.type">
<el-tab-pane label="关联图文" name="1"></el-tab-pane>
<el-tab-pane label="关联页面" name="2"></el-tab-pane>
<el-tab-pane label="跳转链接" name="3"></el-tab-pane>
</el-tabs>
</div>
<essay v-if="ruleForm.type == '1'" @selectionConfirm="essaySelectionConfirm" :selectData="essayList"></essay>
<pages v-if="ruleForm.type == '2'" @selectionConfirm="pagesSelectionConfirm" :selectData="pagesList"></pages>
<div style="padding: 0 20px">
<el-input v-if="ruleForm.type == '3'" v-model="ruleForm.url" placeholder="请输入链接"></el-input>
<el-button v-if="ruleForm.type == '3'" style="margin-top: 20px;" @click="drawer = false" type="primary">确认</el-button>
<el-button v-if="ruleForm.type == '3'" style="margin-top: 20px" @click="drawer = false" type="primary"
>确认</el-button
>
</div>
</el-drawer>
</div>
......@@ -81,11 +101,13 @@ import essay from '../components/essay.vue'
import pages from '../components/pages.vue'
import UploadImage from '@/components/upload/UploadImage.vue'
import { createMenu, getDetails, updateMenu } from '../api'
import PageTemplate from '@/components/base/PageTemplate.vue'
export default {
components: {
UploadImage,
essay,
pages
pages,
PageTemplate
},
data() {
return {
......@@ -113,58 +135,6 @@ export default {
computed: {
id() {
return this.$route.query.id
},
essayTableOptions() {
return {
hasPagination: false,
columns: [
{ label: 'id', prop: 'id', align: 'center' },
{ label: '封面图', slots: 'picture', align: 'center', width: '170px' },
{ label: '标题', prop: 'title', align: 'center' },
{ label: '摘要', prop: 'remark', align: 'center' },
{ label: '备注', prop: 'comment', align: 'center' },
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' }
],
data: this.essayList
}
},
pagesTableOptions() {
return {
hasPagination: false,
columns: [
{ label: 'id', prop: 'id', align: 'center' },
{
label: '页面类型',
prop: 'type',
align: 'center',
computed: scope => {
const data = {
1: '首页展示区',
2: '二级列表页'
}
return data[scope.row.type]
}
},
{
label: '页面模板',
prop: 'layout',
align: 'center',
computed: scope => {
const data = {
1: '左图又文字',
2: '上图下文',
3: '文本'
}
return data[scope.row.layout]
}
},
{ label: '标题', prop: 'title', align: 'center' },
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' }
],
data: this.pagesList
}
}
},
methods: {
......@@ -245,4 +215,154 @@ export default {
}
</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;
}
}
.select-page-box {
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 20px;
.head {
display: flex;
justify-content: space-between;
.title {
font-size: 14px;
color: #000000;
line-height: 100%;
}
.tool-btn {
display: flex;
.btn {
cursor: pointer;
margin-left: 10px;
font-size: 14px;
color: #1655b2;
line-height: 100%;
}
}
}
.card1 {
padding: 14px 22px 14px 12px;
border: 1px solid #f0f0f0;
display: flex;
border-radius: 6px;
margin-top: 10px;
img {
width: 90px;
margin-right: 12px;
}
.text {
font-size: 12px;
color: #363636;
line-height: 17px;
}
}
}
.tw-template {
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 20px;
.head {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.title {
font-size: 14px;
color: #000000;
line-height: 100%;
}
.tool-btn {
display: flex;
.btn {
cursor: pointer;
margin-left: 10px;
font-size: 14px;
color: #1655b2;
line-height: 100%;
}
}
}
}
::v-deep {
.el-drawer__header {
margin-bottom: 0 !important;
}
}
.drawer-btn {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 70px;
background: #ffffff;
box-shadow: 0px 0px 14px 0px rgba(211, 211, 211, 0.5);
}
.essay-card {
border-radius: 4px;
border: 1px solid #dcdfe6;
display: flex;
padding: 20px;
width: 480px;
img {
width: 158px;
height: 79px;
min-width: 158px;
}
.right-text {
width: 250px;
margin-left: 25px;
.text {
font-size: 14px;
color: #909399;
line-height: 24px;
margin-top: 10px;
}
.head {
display: flex;
justify-content: space-between;
line-height: 100%;
.title {
font-size: 16px;
color: #000000;
}
.tool-btn {
display: flex;
div {
font-size: 14px;
color: #1655b2;
margin-left: 15px;
cursor: pointer;
}
}
}
}
}
</style>
src/modules/pages/components/FormType.vue
浏览文件 @ 637daba9
......@@ -65,7 +65,12 @@
<el-input style="width: 20%" v-model="data.offline_info"></el-input>
</el-form-item>
<el-form-item label="线下支付信息：" prop="offline_more_info" v-if="data.pay_type.includes('3')">
<v-editor style="width: 500px" :maxHeight="200" :disabled="!!$route.query.type" v-model="data.offline_more_info"></v-editor>
<v-editor
style="width: 500px"
:maxHeight="200"
:disabled="!!$route.query.type"
v-model="data.offline_more_info"
></v-editor>
</el-form-item>
<el-form-item label="单位优惠:">
<el-radio v-model="data.can_company" :label="1">开启</el-radio>
......@@ -266,7 +271,7 @@ export default {
font-size: 16px;
font-weight: bold;
color: #333333;
border-left: 3px solid rgba(184, 1, 64, 1);
border-left: 3px solid #1655b2;
padding-left: 7px;
margin-bottom: 25px;
}
......
src/modules/pages/views/List.vue
浏览文件 @ 637daba9
<template>
<app-card class="register-box">
<app-list v-bind="tableOptions" ref="list">
<div class="line"></div>
<div class="btn-box">
<el-button type="primary" @click="$router.push({ path: '/pages/update' })">新建页面</el-button>
</div>
<template v-slot:filter-time>
<el-date-picker
v-model="filterDate"
@change="changeDate"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</template>
<template v-slot:release-status="{ row }">
<el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
</template>
<template v-slot:sort-select="{ row }">
<el-select 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-select>
</template>
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
</app-list>
</app-card>
<div>
<div class="breadcrumb">页面管理</div>
<app-card class="register-box">
<app-list v-bind="tableOptions" ref="list">
<div class="line"></div>
<div class="btn-box">
<el-button type="primary" @click="$router.push({ path: '/pages/update' })">新建页面</el-button>
</div>
<template v-slot:filter-time>
<el-date-picker
v-model="filterDate"
@change="changeDate"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</template>
<template v-slot:release-status="{ row }">
<el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
</template>
<template v-slot:layout="{ row }">
<div>{{ row.layout_name }}</div>
<PageTemplate :type="row.layout"></PageTemplate>
</template>
<template v-slot:sort-select="{ 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-select>
</template>
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
</app-list>
</app-card>
</div>
</template>
<script>
// 接口
import { getAppList, updatePages, deletePages } from '../api'
import PageTemplate from '@/components/base/PageTemplate.vue'
export default {
components: {
PageTemplate
},
data() {
const count = []
for (let i = 0; i < 100; i++) {
......@@ -92,18 +103,16 @@ export default {
}
],
columns: [
{ label: 'id', prop: 'id', align: 'center' },
{ label: '页面类型', prop: 'type_name', align: 'center' },
{ label: '页面模板', prop: 'layout_name', align: 'center' },
{ label: '标题', prop: 'title', align: 'center' },
{ label: '页面类型', prop: 'type_name' },
{ label: '页面模板', slots: 'layout', width: '350px' },
{ label: '页面名称', prop: 'title' },
{ label: '创建时间', prop: 'created_time' },
{ label: '展示顺序', slots: 'sort-select' },
{
label: '发布状态',
slots: 'release-status',
align: 'center'
slots: 'release-status'
},
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '排序', slots: 'sort-select', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' }
{ label: '操作', slots: 'table-x' }
]
}
}
......
src/modules/pages/views/Update.vue
浏览文件 @ 637daba9
<template>
<div class="create-box">
<app-card :title="!$route.query.id ? '新建页面' : '编辑页面'">
<el-form
:model="ruleForm"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
style="width: 50%; margin: 0 auto"
>
<div class="breadcrumb">
{{ !$route.query.id ? '新建页面' : '编辑页面' }}
</div>
<app-card>
<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 500px">
<el-form-item label="页面名称" prop="title">
<el-input v-model="ruleForm.title" placeholder="请填写页面名称"></el-input>
</el-form-item>
<el-form-item label="页面类型">
<el-radio-group v-model="ruleForm.type">
<el-radio label="1">首页展示区</el-radio>
......@@ -16,14 +16,20 @@
</el-form-item>
<el-form-item label="页面模板">
<el-radio-group v-model="ruleForm.layout">
<el-radio label="1">左图又文字</el-radio>
<el-radio label="2">上图下文</el-radio>
<el-radio label="3">文本</el-radio>
<div style="margin-top: 10px; padding-bottom: 10px">
<el-radio label="1">左图右文</el-radio>
<PageTemplate v-if="ruleForm.layout == '1'" type="1" style="margin-top: 10px;"></PageTemplate>
</div>
<div style="margin-top: 10px; padding-bottom: 10px">
<el-radio label="2">上图下文</el-radio>
<PageTemplate v-if="ruleForm.layout == '2'" type="2" style="margin-top: 10px;"></PageTemplate>
</div>
<div style="margin-top: 10px; padding-bottom: 10px">
<el-radio label="3">文本</el-radio>
<PageTemplate v-if="ruleForm.layout == '3'" type="3" style="margin-top: 10px;"></PageTemplate>
</div>
</el-radio-group>
</el-form-item>
<el-form-item label="页面名称" prop="title">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item>
<div style="padding-top: 20px">
<el-button type="primary" @click="submitForm">确认</el-button>
......@@ -37,7 +43,11 @@
<script>
import { createPages, getDetails, updatePages } from '../api'
import PageTemplate from '@/components/base/PageTemplate.vue'
export default {
components: {
PageTemplate
},
data() {
return {
ruleForm: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论