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 { ...@@ -86,5 +86,12 @@ textarea:focus {
} }
:root { :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 字体路径变量，必需 */ /* 改变 icon 字体路径变量，必需 */
$--font-path: 'element-ui/lib/theme-chalk/fonts'; $--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 { ...@@ -80,7 +80,6 @@ export default {
} }
], ],
columns: [ columns: [
{ label: 'id', prop: 'id', align: 'center' },
{ label: '封面图', slots: 'picture', align: 'center', width: '170px' }, { label: '封面图', slots: 'picture', align: 'center', width: '170px' },
{ label: '标题', prop: 'title', align: 'center' }, { label: '标题', prop: 'title', align: 'center' },
{ label: '摘要', prop: 'remark', align: 'center' }, { label: '摘要', prop: 'remark', align: 'center' },
......
src/modules/banner/views/List.vue
浏览文件 @ 637daba9
<template> <template>
<app-card class="register-box"> <div>
<app-list v-bind="tableOptions" ref="list"> <div class="breadcrumb">Banner管理</div>
<div class="line"></div> <app-card class="register-box">
<div class="btn-box"> <app-list v-bind="tableOptions" ref="list">
<el-button type="primary" @click="$router.push({ path: '/banner/update' })">新建Banner</el-button> <div class="line"></div>
</div> <div class="btn-box">
<template v-slot:filter-time> <el-button type="primary" @click="$router.push({ path: '/banner/update' })">新建Banner</el-button>
<el-date-picker </div>
v-model="filterDate" <template v-slot:filter-time>
@change="changeDate" <el-date-picker
type="datetimerange" v-model="filterDate"
range-separator="至" @change="changeDate"
start-placeholder="开始日期" type="datetimerange"
end-placeholder="结束日期" range-separator="至"
> start-placeholder="开始日期"
</el-date-picker> end-placeholder="结束日期"
</template> >
<template v-slot:picture="{ row }"> </el-date-picker>
<div :style="`background-image:url(${row.picture});background-size: cover;width:200px;height:100px;`"></div> </template>
</template> <template v-slot:picture="{ row }">
<template v-slot:release-status="{ row }"> <div :style="`background-image:url(${row.picture});background-size: cover;width:200px;height:100px;`"></div>
<el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch> </template>
</template> <template v-slot:release-status="{ row }">
<template v-slot:sort-select="{ row }"> <el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
<el-select v-model="row.sort" placeholder="请选择" @change="updateStatus(row)"> </template>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> <template v-slot:sort-select="{ row }">
</el-select> <el-select style="width: 70px;" v-model="row.sort" placeholder="请选择" @change="updateStatus(row)">
</template> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
<template v-slot:table-x="{ row }"> </el-select>
<el-button type="text" @click="handleEdit(row)">编辑</el-button> </template>
<el-button type="text" @click="handleDelete(row)">删除</el-button> <template v-slot:table-x="{ row }">
</template> <el-button type="text" @click="handleEdit(row)">编辑</el-button>
</app-list> <el-button type="text" @click="handleDelete(row)">删除</el-button>
</app-card> </template>
</app-list>
</app-card>
</div>
</template> </template>
<script> <script>
...@@ -95,17 +98,16 @@ export default { ...@@ -95,17 +98,16 @@ export default {
} }
], ],
columns: [ columns: [
{ label: 'id', prop: 'id', align: 'center' }, { label: '图片', slots: 'picture', width: '240px' },
{ label: '标题', prop: 'title', align: 'center' }, { label: '标题', prop: 'title' },
{ label: '图片', slots: 'picture', align: 'center', width: '200px' }, { label: 'id', prop: 'id' },
{ label: '创建时间', prop: 'created_time' },
{ label: '展示顺序', slots: 'sort-select' },
{ {
label: '发布状态', label: '发布状态',
slots: 'release-status', slots: 'release-status'
align: 'center'
}, },
{ label: '创建时间', prop: 'created_time', align: 'center' }, { label: '操作', slots: 'table-x' }
{ label: '排序', slots: 'sort-select', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' }
] ]
} }
} }
......
src/modules/banner/views/Update.vue
浏览文件 @ 637daba9
<template> <template>
<div class="create-box"> <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 <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: 500px"
> >
<el-form-item label="标题"> <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>
<el-form-item label="上传banner" prop="banner"> <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>
<el-form-item label="是否发布" prop="status"> <el-form-item label="关联内容">
<el-switch v-model="status"></el-switch> <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>
<el-form-item label="关联选择"> <el-form-item label="关联页面" v-if="ruleForm.type == '2'">
<el-button type="primary" @click="drawer = true">点击选择</el-button> <div class="select-btn" @click="drawer = true" v-if="pagesList.length === 0">
<el-card class="box-card" style="margin-top: 20px"> <i class="el-icon-plus"></i>
<div slot="header" class="clearfix"> <div class="text">选择页面</div>
<span>{{ ruleForm.type == '1' ? '关联图文' : ruleForm.type == '2' ? '关联页面' : '跳转链接' }}</span> </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> </div>
<app-list v-if="ruleForm.type == '1'" v-bind="essayTableOptions" ref="list"> <PageTemplate :type="pagesList[0].layout"></PageTemplate>
<template v-slot:table-x="{ row }"> </div>
<el-button type="text" @click="handleEssayDelete(row)">删除</el-button> </el-form-item>
</template> <el-form-item label="关联图文" v-if="ruleForm.type == '1'">
<template v-slot:picture="{ row }"> <div class="select-btn" @click="drawer = true" v-if="essayList.length === 0">
<div <i class="el-icon-plus"></i>
:style="`background-image:url(${row.picture});background-size: cover;width:200px;height:100px;`" <div class="text">选择图文</div>
></div> </div>
</template> <div class="essay-card" v-else>
</app-list> <img :src="essayList[0].picture" />
<app-list v-if="ruleForm.type == '2'" v-bind="pagesTableOptions" ref="list"> <div class="right-text">
<template v-slot:table-x="{ row }"> <div class="head">
<el-button type="text" @click="handlePagesDelete(row)">删除</el-button> <div class="title">{{ essayList[0].title }}</div>
</template> <div class="tool-btn">
<template v-slot:picture="{ row }"> <div @click="drawer = true">编辑</div>
<div <div @click="handleEssayDelete(essayList[0])">删除</div>
:style="`background-image:url(${row.picture});background-size: cover;width:200px;height:100px;`" </div>
></div> </div>
</template> <div class="text">{{ essayList[0].remark }}</div>
</app-list> </div>
<div v-if="ruleForm.type == '3'">{{ ruleForm.url }}</div> </div>
</el-card> </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>
<el-form-item> <el-form-item>
<div style="padding-top: 20px"> <div style="padding-top: 20px">
...@@ -55,14 +81,7 @@ ...@@ -55,14 +81,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</app-card> </app-card>
<el-drawer :destroy-on-close="true" size="60%" :visible.sync="drawer" :direction="direction"> <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> <essay v-if="ruleForm.type == '1'" @selectionConfirm="essaySelectionConfirm" :selectData="essayList"></essay>
<pages v-if="ruleForm.type == '2'" @selectionConfirm="pagesSelectionConfirm" :selectData="pagesList"></pages> <pages v-if="ruleForm.type == '2'" @selectionConfirm="pagesSelectionConfirm" :selectData="pagesList"></pages>
<div style="padding: 0 20px"> <div style="padding: 0 20px">
...@@ -79,12 +98,14 @@ ...@@ -79,12 +98,14 @@
import essay from '../components/essay.vue' import essay from '../components/essay.vue'
import pages from '../components/pages.vue' import pages from '../components/pages.vue'
import UploadImage from '@/components/upload/UploadImage.vue' import UploadImage from '@/components/upload/UploadImage.vue'
import PageTemplate from '@/components/base/PageTemplate.vue'
import { createBanner, getDetails, updateBanner } from '../api' import { createBanner, getDetails, updateBanner } from '../api'
export default { export default {
components: { components: {
UploadImage, UploadImage,
essay, essay,
pages pages,
PageTemplate
}, },
data() { data() {
return { return {
...@@ -103,65 +124,14 @@ export default { ...@@ -103,65 +124,14 @@ export default {
}, },
rules: { rules: {
banner: [{ required: true, message: '请上传banner', trigger: 'blur' }], 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: { computed: {
id() { id() {
return this.$route.query.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: { methods: {
...@@ -242,4 +212,154 @@ export default { ...@@ -242,4 +212,154 @@ 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;
}
}
.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 { ...@@ -118,7 +118,7 @@ export default {
}, },
data() { data() {
return { return {
activeName: '1', activeName: '0',
status: true, status: true,
drawer: false, drawer: false,
direction: 'rtl', direction: 'rtl',
...@@ -193,19 +193,7 @@ export default { ...@@ -193,19 +193,7 @@ export default {
return data[scope.row.type] return data[scope.row.type]
} }
}, },
{ { label: '页面模板', prop: 'layout_name', align: 'center' },
label: '页面模板',
prop: 'layout_name',
align: 'center',
computed: scope => {
const data = {
1: '左图又文字',
2: '上图下文',
3: '文本'
}
return data[scope.row.layout]
}
},
{ label: '标题', prop: 'title', align: 'center' }, { label: '标题', prop: 'title', align: 'center' },
{ label: '创建时间', prop: 'created_time', align: 'center' }, { label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' } { label: '操作', slots: 'table-x', align: 'center' }
......
src/modules/menu/views/List.vue
浏览文件 @ 637daba9
<template> <template>
<app-card class="register-box"> <div>
<app-list v-bind="tableOptions" ref="list"> <div class="breadcrumb">菜单管理</div>
<div class="line"></div> <app-card class="register-box">
<div class="btn-box"> <app-list v-bind="tableOptions" ref="list">
<el-button type="primary" @click="$router.push({ path: '/menu/update' })">新建菜单</el-button> <div class="line"></div>
</div> <div class="btn-box">
<template v-slot:filter-time> <el-button type="primary" @click="$router.push({ path: '/menu/update' })">新建菜单</el-button>
<el-date-picker </div>
v-model="filterDate" <template v-slot:filter-time>
@change="changeDate" <el-date-picker
type="datetimerange" v-model="filterDate"
range-separator="至" @change="changeDate"
start-placeholder="开始日期" type="datetimerange"
end-placeholder="结束日期" range-separator="至"
> start-placeholder="开始日期"
</el-date-picker> end-placeholder="结束日期"
</template> >
<template v-slot:picture="{ row }"> </el-date-picker>
<div :style="`background-image:url(${row.picture});background-size: cover;width:50px;height:40px;`"></div> </template>
</template> <template v-slot:picture="{ row }">
<template v-slot:release-status="{ row }"> <div :style="`background-image:url(${row.picture});background-size: cover;width:50px;height:40px;`"></div>
<el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch> </template>
</template> <template v-slot:release-status="{ row }">
<template v-slot:sort-select="{ row }"> <el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
<el-select v-model="row.sort" placeholder="请选择" @change="updateStatus(row)"> </template>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> <template v-slot:sort-select="{ row }">
</el-select> <el-select style="width: 70px;" v-model="row.sort" placeholder="请选择" @change="updateStatus(row)">
</template> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
<template v-slot:table-x="{ row }"> </el-select>
<el-button type="text" @click="handleEdit(row)">编辑</el-button> </template>
<el-button type="text" @click="handleDelete(row)">删除</el-button> <template v-slot:table-x="{ row }">
</template> <el-button type="text" @click="handleEdit(row)">编辑</el-button>
</app-list> <el-button type="text" @click="handleDelete(row)">删除</el-button>
</app-card> </template>
</app-list>
</app-card>
</div>
</template> </template>
<script> <script>
...@@ -95,18 +98,18 @@ export default { ...@@ -95,18 +98,18 @@ export default {
} }
], ],
columns: [ columns: [
{ label: 'id', prop: 'id', align: 'center' }, { label: '菜单图标', slots: 'picture' },
{ label: '菜单图标', slots: 'picture', align: 'center', width: '50px' }, { label: '菜单名称', prop: 'title' },
{ label: '菜单名称', prop: 'title', 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' }
] ]
} }
} }
......
src/modules/menu/views/Update.vue
浏览文件 @ 637daba9
<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-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: 500px"
> >
<el-form-item label="菜单名称" prop="title"> <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>
<el-form-item label="备注"> <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>
<el-form-item label="菜单图标" prop="picture"> <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>
<el-form-item label="是否启用" prop="status"> <el-form-item label="关联内容">
<el-switch v-model="status"></el-switch> <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>
<el-form-item label="关联选择"> <el-form-item label="关联页面" v-if="ruleForm.type == '2'">
<el-button type="primary" @click="drawer = true">点击选择</el-button> <div class="select-btn" @click="drawer = true" v-if="pagesList.length === 0">
<el-card class="box-card" style="margin-top: 20px"> <i class="el-icon-plus"></i>
<div slot="header" class="clearfix"> <div class="text">选择页面</div>
<span>{{ ruleForm.type == '1' ? '关联图文' : ruleForm.type == '2' ? '关联页面' : '跳转链接' }}</span> </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> </div>
<app-list v-if="ruleForm.type == '1'" v-bind="essayTableOptions" ref="list"> <PageTemplate :type="pagesList[0].layout"></PageTemplate>
<template v-slot:table-x="{ row }"> </div>
<el-button type="text" @click="handleEssayDelete(row)">删除</el-button> </el-form-item>
</template> <el-form-item label="关联图文" v-if="ruleForm.type == '1'">
<template v-slot:picture="{ row }"> <div class="select-btn" @click="drawer = true" v-if="essayList.length === 0">
<div <i class="el-icon-plus"></i>
:style="`background-image:url(${row.picture});background-size: cover;width:200px;height:100px;`" <div class="text">选择图文</div>
></div> </div>
</template> <div class="essay-card" v-else>
</app-list> <img :src="essayList[0].picture" />
<app-list v-if="ruleForm.type == '2'" v-bind="pagesTableOptions" ref="list"> <div class="right-text">
<template v-slot:table-x="{ row }"> <div class="head">
<el-button type="text" @click="handlePagesDelete(row)">删除</el-button> <div class="title">{{ essayList[0].title }}</div>
</template> <div class="tool-btn">
<template v-slot:picture="{ row }"> <div @click="drawer = true">编辑</div>
<div <div @click="handleEssayDelete(essayList[0])">删除</div>
:style="`background-image:url(${row.picture});background-size: cover;width:200px;height:100px;`" </div>
></div> </div>
</template> <div class="text">{{ essayList[0].remark }}</div>
</app-list> </div>
<div v-if="ruleForm.type == '3'">{{ ruleForm.url }}</div> </div>
</el-card> </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>
<el-form-item> <el-form-item>
<div style="padding-top: 20px"> <div style="padding-top: 20px">
...@@ -59,18 +84,13 @@ ...@@ -59,18 +84,13 @@
</el-form> </el-form>
</app-card> </app-card>
<el-drawer size="60%" :visible.sync="drawer" :direction="direction"> <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> <essay v-if="ruleForm.type == '1'" @selectionConfirm="essaySelectionConfirm" :selectData="essayList"></essay>
<pages v-if="ruleForm.type == '2'" @selectionConfirm="pagesSelectionConfirm" :selectData="pagesList"></pages> <pages v-if="ruleForm.type == '2'" @selectionConfirm="pagesSelectionConfirm" :selectData="pagesList"></pages>
<div style="padding: 0 20px"> <div style="padding: 0 20px">
<el-input v-if="ruleForm.type == '3'" v-model="ruleForm.url" placeholder="请输入链接"></el-input> <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> </div>
</el-drawer> </el-drawer>
</div> </div>
...@@ -81,11 +101,13 @@ import essay from '../components/essay.vue' ...@@ -81,11 +101,13 @@ import essay from '../components/essay.vue'
import pages from '../components/pages.vue' import pages from '../components/pages.vue'
import UploadImage from '@/components/upload/UploadImage.vue' import UploadImage from '@/components/upload/UploadImage.vue'
import { createMenu, getDetails, updateMenu } from '../api' import { createMenu, getDetails, updateMenu } from '../api'
import PageTemplate from '@/components/base/PageTemplate.vue'
export default { export default {
components: { components: {
UploadImage, UploadImage,
essay, essay,
pages pages,
PageTemplate
}, },
data() { data() {
return { return {
...@@ -113,58 +135,6 @@ export default { ...@@ -113,58 +135,6 @@ export default {
computed: { computed: {
id() { id() {
return this.$route.query.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: { methods: {
...@@ -245,4 +215,154 @@ export default { ...@@ -245,4 +215,154 @@ 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;
}
}
.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 @@ ...@@ -65,7 +65,12 @@
<el-input style="width: 20%" v-model="data.offline_info"></el-input> <el-input style="width: 20%" v-model="data.offline_info"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="线下支付信息：" prop="offline_more_info" v-if="data.pay_type.includes('3')"> <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>
<el-form-item label="单位优惠:"> <el-form-item label="单位优惠:">
<el-radio v-model="data.can_company" :label="1">开启</el-radio> <el-radio v-model="data.can_company" :label="1">开启</el-radio>
...@@ -266,7 +271,7 @@ export default { ...@@ -266,7 +271,7 @@ export default {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
border-left: 3px solid rgba(184, 1, 64, 1); border-left: 3px solid #1655b2;
padding-left: 7px; padding-left: 7px;
margin-bottom: 25px; margin-bottom: 25px;
} }
......
src/modules/pages/views/List.vue
浏览文件 @ 637daba9
<template> <template>
<app-card class="register-box"> <div>
<app-list v-bind="tableOptions" ref="list"> <div class="breadcrumb">页面管理</div>
<div class="line"></div> <app-card class="register-box">
<div class="btn-box"> <app-list v-bind="tableOptions" ref="list">
<el-button type="primary" @click="$router.push({ path: '/pages/update' })">新建页面</el-button> <div class="line"></div>
</div> <div class="btn-box">
<template v-slot:filter-time> <el-button type="primary" @click="$router.push({ path: '/pages/update' })">新建页面</el-button>
<el-date-picker </div>
v-model="filterDate" <template v-slot:filter-time>
@change="changeDate" <el-date-picker
type="datetimerange" v-model="filterDate"
range-separator="至" @change="changeDate"
start-placeholder="开始日期" type="datetimerange"
end-placeholder="结束日期" range-separator="至"
> start-placeholder="开始日期"
</el-date-picker> end-placeholder="结束日期"
</template> >
<template v-slot:release-status="{ row }"> </el-date-picker>
<el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch> </template>
</template> <template v-slot:release-status="{ row }">
<template v-slot:sort-select="{ row }"> <el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
<el-select v-model="row.sort" placeholder="请选择" @change="updateStatus(row)"> </template>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> <template v-slot:layout="{ row }">
</el-select> <div>{{ row.layout_name }}</div>
</template> <PageTemplate :type="row.layout"></PageTemplate>
<template v-slot:table-x="{ row }"> </template>
<el-button type="text" @click="handleEdit(row)">编辑</el-button> <template v-slot:sort-select="{ row }">
<el-button type="text" @click="handleDelete(row)">删除</el-button> <el-select style="width: 70px" v-model="row.sort" placeholder="请选择" @change="updateStatus(row)">
</template> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</app-list> </el-select>
</app-card> </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> </template>
<script> <script>
// 接口 // 接口
import { getAppList, updatePages, deletePages } from '../api' import { getAppList, updatePages, deletePages } from '../api'
import PageTemplate from '@/components/base/PageTemplate.vue'
export default { export default {
components: {
PageTemplate
},
data() { data() {
const count = [] const count = []
for (let i = 0; i < 100; i++) { for (let i = 0; i < 100; i++) {
...@@ -92,18 +103,16 @@ export default { ...@@ -92,18 +103,16 @@ 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: '展示顺序', slots: 'sort-select' },
{ {
label: '发布状态', label: '发布状态',
slots: 'release-status', slots: 'release-status'
align: 'center'
}, },
{ label: '创建时间', prop: 'created_time', align: 'center' }, { label: '操作', slots: 'table-x' }
{ label: '排序', slots: 'sort-select', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' }
] ]
} }
} }
......
src/modules/pages/views/Update.vue
浏览文件 @ 637daba9
<template> <template>
<div class="create-box"> <div class="create-box">
<app-card :title="!$route.query.id ? '新建页面' : '编辑页面'"> <div class="breadcrumb">
<el-form {{ !$route.query.id ? '新建页面' : '编辑页面' }}
:model="ruleForm" </div>
ref="ruleForm" <app-card>
label-width="100px" <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 500px">
class="demo-ruleForm" <el-form-item label="页面名称" prop="title">
style="width: 50%; margin: 0 auto" <el-input v-model="ruleForm.title" placeholder="请填写页面名称"></el-input>
> </el-form-item>
<el-form-item label="页面类型"> <el-form-item label="页面类型">
<el-radio-group v-model="ruleForm.type"> <el-radio-group v-model="ruleForm.type">
<el-radio label="1">首页展示区</el-radio> <el-radio label="1">首页展示区</el-radio>
...@@ -16,14 +16,20 @@ ...@@ -16,14 +16,20 @@
</el-form-item> </el-form-item>
<el-form-item label="页面模板"> <el-form-item label="页面模板">
<el-radio-group v-model="ruleForm.layout"> <el-radio-group v-model="ruleForm.layout">
<el-radio label="1">左图又文字</el-radio> <div style="margin-top: 10px; padding-bottom: 10px">
<el-radio label="2">上图下文</el-radio> <el-radio label="1">左图右文</el-radio>
<el-radio label="3">文本</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-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="页面名称" prop="title">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item> <el-form-item>
<div style="padding-top: 20px"> <div style="padding-top: 20px">
<el-button type="primary" @click="submitForm">确认</el-button> <el-button type="primary" @click="submitForm">确认</el-button>
...@@ -37,7 +43,11 @@ ...@@ -37,7 +43,11 @@
<script> <script>
import { createPages, getDetails, updatePages } from '../api' import { createPages, getDetails, updatePages } from '../api'
import PageTemplate from '@/components/base/PageTemplate.vue'
export default { export default {
components: {
PageTemplate
},
data() { data() {
return { return {
ruleForm: { ruleForm: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论