Skip to content

polysoft-nafmii / polysoft-web-element

Go to a project
Commit 3a25409e by lixin
Options

门户管理相关

1 parent a0c51663
Inline Side-by-side
Showing 10 changed files with 1001 additions and 21 deletions
src/router/modules/portal.js
......@@ -7,33 +7,87 @@ const portalRouter = {
icon: 'profile',
title: '门户管理'
},
children: [
{
path: '/portal/carouselManage',
children: [{
path: '/portal/carousel',
name: 'carouselManage',
exact: true,
meta: {
title: '轮播图管理'
title: '轮播图'
},
component: () => import( /* webpackChunkName: "carousel" */ '@/views/portalManage/carousel/index.vue'), // 轮播图
},
{
path: '/portal/carouselInsert',
name: 'CarouselInsert',
exact: false,
meta: {
title: '轮播图新增'
},
component: () => import(/* webpackChunkName: "carouselManage" */ '@/views/portalManage/carouselManage/index.vue'), // 轮播图管理
component: () => import( /* webpackChunkName: "carouselInsert" */ '@/views/portalManage/carousel/operation.vue'), // 轮播图新增
},
{
path: '/portal/scrollBarManage',
name: 'scrollBarManage',
path: '/portal/carouselEdit',
name: 'CarouselEdit',
exact: true,
meta: {
title: '滚动条管理'
title: '轮播图编辑'
},
component: () => import( /* webpackChunkName: "carouselEdit" */ '@/views/portalManage/carousel/operation.vue'), // 轮播图编辑
},
{
path: '/portal/openScreen',
name: 'OpenScreen',
exact: true,
meta: {
title: '开屏图'
},
component: () => import( /* webpackChunkName: "openScreen" */ '@/views/portalManage/openscreen/index.vue'), // 开屏图
},
{
path: '/portal/openScreenInsert',
name: 'OpenScreenInsert',
exact: false,
meta: {
title: '开屏图新增'
},
component: () => import( /* webpackChunkName: "openScreenInsert" */ '@/views/portalManage/openscreen/operation.vue'), // 开屏图新增
},
{
path: '/portal/openScreenEdit',
name: 'OpenScreenEdit',
exact: true,
meta: {
title: '开屏图编辑'
},
component: () => import( /* webpackChunkName: "openScreenEdit" */ '@/views/portalManage/openscreen/operation.vue'), // 开屏图编辑
},
{
path: '/portal/iconManage',
name: 'IconManage',
exact: true,
meta: {
title: 'ICON'
},
component: () => import( /* webpackChunkName: "iconManage" */ '@/views/portalManage/icon/index.vue'), // ICON
},
{
path: '/portal/iconInsert',
name: 'IconInsert',
exact: false,
meta: {
title: 'ICON新增'
},
component: () => import(/* webpackChunkName: "scrollBarManage" */ '@/views/portalManage/scrollBarManage/index.vue'), // 滚动条管理
component: () => import( /* webpackChunkName: "iconInsert" */ '@/views/portalManage/icon/operation.vue'), // 开屏图新增
},
{
path: '/portal/pdf',
name: 'pdf',
path: '/portal/iconEdit',
name: 'iconEdit',
exact: true,
meta: {
title: '滚动条管理'
title: 'ICON编辑'
},
component: () => import(/* webpackChunkName: "pdf" */ '@/views/portalManage/pdf/index.vue'), // 滚动条管理
component: () => import( /* webpackChunkName: "iconEdit" */ '@/views/portalManage/icon/operation.vue'), // 开屏图编辑
},
]
}
......
src/views/portalManage/carousel/index.vue 0 → 100644
<template>
<main class="list_container">
<section class="search_bar">
<el-form :inline="true" :model="queryForm" size="small" class="demo-form-inline">
<el-form-item label="标题">
<el-input v-model="queryForm.title" placeholder="请输入标题"></el-input>
</el-form-item>
<el-form-item label="发布日期">
<el-date-picker v-model="queryForm.pushlishTime" type="daterange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchController">查 询</el-button>
<el-button @click="searchController">重 置</el-button>
</el-form-item>
</el-form>
<div class="operation_bar">
<el-button type="primary" size="small" icon="el-icon-plus">新建</el-button>
<div v-if="isEditSwitch">
<span class="switch_time">
切换时间
<el-input size="small" v-model="editSwitchTime"></el-input>
秒
</span>
<el-button type="primary" size="small" @click="switchTimeConfirm">确定</el-button>
<el-button size="small" @click="isEditSwitch = false">取消</el-button>
</div>
<div v-else>
<span class="switch_time">切换时间{{swichTime}}秒</span>
<el-button type="primary" size="small" @click="switchTimeEdit">编辑</el-button>
</div>
</div>
</section>
<section class="list_content">
<div class="table_wrap">
<el-table :data="tableData" size="small" style="width: 100%" :header-cell-style="headerStyle" :cell-style="cellStyle">
<el-table-column prop="date" label="序号" width="80">
</el-table-column>
<el-table-column prop="name" label="标题" width="165">
</el-table-column>
<el-table-column prop="address" label="缩略图" width="165">
</el-table-column>
<el-table-column prop="address" label="排序" width="165">
</el-table-column>
<el-table-column prop="address" label="发布" width="165">
</el-table-column>
<el-table-column prop="address" label="启用">
<template slot-scope="scope">
<el-switch v-model="scope.status" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
<el-table-column prop="address" label="操作">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
编辑
</el-button>
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination_wrap">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1, 2, 3, 4]" :page-size="pageSize" layout="slot, prev, pager, next" :total="totalItems">
<span class="total_items">共{{totalItems}}条记录</span>
<span class="current_page">{{currentPage}}/{{totalPages}}页</span>
</el-pagination>
</div>
</section>
</main>
</template>
<script>
export default {
name: 'CarouseManage',
computed: {
totalPages() {
return Math.ceil(this.totalItems/this.pageSize)
}
},
data() {
return {
isEditSwitch: false,
swichTime: 3,
editSwitchTime: 0,
queryForm: {},
tableData: [],
currentPage: 1,
pageSize: 10,
totalItems: 2,
headerStyle: {
background: '#FAFAFA',
color: '#101010',
textAlign: 'center',
fontSize: '14px'
},
cellStyle: {
textAlign: 'center',
fontSize: '14px'
}
}
},
methods: {
searchController() {
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
switchTimeEdit() {
this.editSwitchTime = this.swichTime
this.isEditSwitch = true
},
switchTimeConfirm() {
this.swichTime = this.editSwitchTime
this.isEditSwitch = false
}
}
}
</script>
<style lang="scss" scoped>
.list_container {
width: 100%;
height: 100%;
background: #ffffff;
padding: 30px;
.el-button--small {
border-radius: 5px;
// font-size: 14px;
// padding: 0px 15px;
// line-height: 30px;
}
.operation_bar {
margin: 10px 0;
display: flex;
.switch_time {
margin: 0 15px;
.el-input {
display: inline-block;
width: 50px;
}
}
}
.el-table {
border: 1px solid #dfe6ec;
border-bottom: none;
}
.pagination_wrap {
text-align: right;
margin-top: 15px;
.el-pagination {
padding: 0;
span {
font-size: 14px;
margin-right: 10px;
// &.current_page {
// margin-right: 20px;
// }
}
::v-deep .el-pager {
li {
border: 1px solid #d8d8d8;
border-radius: 5px;
margin-right: 8px;
&.active {
background-color: #177ec6;
border-color: #177ec6;
color: #ffffff;
}
}
}
::v-deep.btn-prev,
::v-deep.btn-next {
border: 1px solid #d8d8d8;
border-radius: 5px;
padding: 0 10px;
&.btn-prev {
margin-right: 8px;
}
}
}
}
}
</style>
src/views/portalManage/carousel/operation.vue 0 → 100644
<template>
<main class="operation_container">
<section class="operation_content">
<el-form :model="operForm" :rules="rules" ref="operForm" label-width="100px" size="small">
<el-form-item label="标题" prop="title">
<el-input v-model="operForm.title" placeholder="给目标起个名字"></el-input>
</el-form-item>
<el-form-item label="图片" prop="idialogImageUrl">
<el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1">
<div slot="default">
<span>
上传图片
</span>
</div>
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-view"></i>
</span>
<span v-if="!operForm.disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<span>
支持扩展名：.jpg .jpeg .png 大小1M以内
<br>
建议尺寸：384px*145px
</span>
<el-dialog :visible.sync="operForm.dialogVisible">
<img width="100%" :src="operForm.dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
<el-form-item label="顺序" prop="order">
<el-select v-model="operForm.order" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="operForm.type" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="链接" prop="link">
<el-input v-model="operForm.link" placeholder="给目标起个名字"></el-input>
</el-form-item>
<el-form-item label="启用" prop="status">
<el-switch v-model="operForm.status">
</el-switch>
</el-form-item>
<el-form-item style="text-align: right;">
<el-button type="primary" @click="submitForm('operForm')">提交</el-button>
</el-form-item>
</el-form>
</section>
</main>
</template>
<script>
export default {
name: 'CarouselOperation',
data() {
return {
operForm: {
title: '',
idialogImageUrl: '',
order: 1,
type: '',
link: '',
status: 0,
dialogVisible: false,
disabled: false
},
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
rules: {
title: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
idialogImageUrl: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
order: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
type: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
link: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
status: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
]
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
handleRemove(file) {
console.log(file);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}
}
</script>
<style lang="scss" scoped>
.operation_container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.operation_content {
width: 520px;
}
}
</style>
src/views/portalManage/carouselManage/index.vue deleted 100644 → 0
<template>
<div>11</div>
</template>
<script>
export default {
name: 'CarouseManage',
}
</script>
\ No newline at end of file
src/views/portalManage/icon/index.vue 0 → 100644
<template>
<main class="list_container">
<section class="search_bar">
<el-form :inline="true" :model="queryForm" size="small" class="demo-form-inline">
<el-form-item label="名称">
<el-input v-model="queryForm.title" placeholder="请输入标题"></el-input>
</el-form-item>
<el-form-item label="发布日期">
<el-date-picker v-model="queryForm.pushlishTime" type="daterange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchController">查 询</el-button>
<el-button @click="searchController">重 置</el-button>
</el-form-item>
</el-form>
<div class="operation_bar">
<el-button type="primary" size="small" icon="el-icon-plus">新建</el-button>
</div>
</section>
<section class="list_content">
<div class="table_wrap">
<el-table :data="tableData" size="small" style="width: 100%" :header-cell-style="headerStyle" :cell-style="cellStyle">
<el-table-column prop="date" label="序号" width="80">
</el-table-column>
<el-table-column prop="name" label="标题">
</el-table-column>
<el-table-column prop="address" label="缩略图">
</el-table-column>
<el-table-column prop="address" label="排序">
</el-table-column>
<el-table-column prop="address" label="发布日期">
</el-table-column>
<el-table-column prop="address" label="启用">
<template slot-scope="scope">
<el-switch v-model="scope.status" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
<el-table-column prop="address" label="操作">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
编辑
</el-button>
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination_wrap">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1, 2, 3, 4]" :page-size="pageSize" layout="slot, prev, pager, next" :total="totalItems">
<span class="total_items">共{{totalItems}}条记录</span>
<span class="current_page">{{currentPage}}/{{totalPages}}页</span>
</el-pagination>
</div>
</section>
</main>
</template>
<script>
export default {
name: 'CarouseManage',
computed: {
totalPages() {
return Math.ceil(this.totalItems/this.pageSize)
}
},
data() {
return {
swichTime: 3,
queryForm: {},
tableData: [],
currentPage: 1,
pageSize: 10,
totalItems: 2,
headerStyle: {
background: '#FAFAFA',
color: '#101010',
textAlign: 'center',
fontSize: '14px'
},
cellStyle: {
textAlign: 'center',
fontSize: '14px'
}
}
},
methods: {
searchController() {
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
}
}
</script>
<style lang="scss" scoped>
.list_container {
width: 100%;
height: 100%;
background: #ffffff;
padding: 30px;
.el-button--small {
border-radius: 5px;
// font-size: 14px;
// padding: 0px 15px;
// line-height: 30px;
}
.operation_bar {
margin: 10px 0;
}
.el-table {
border: 1px solid #dfe6ec;
border-bottom: none;
}
.pagination_wrap {
text-align: right;
margin-top: 15px;
.el-pagination {
padding: 0;
span {
font-size: 14px;
margin-right: 10px;
// &.current_page {
// margin-right: 20px;
// }
}
::v-deep .el-pager {
li {
border: 1px solid #d8d8d8;
border-radius: 5px;
margin-right: 8px;
&.active {
background-color: #177ec6;
border-color: #177ec6;
color: #ffffff;
}
}
}
::v-deep.btn-prev,
::v-deep.btn-next {
border: 1px solid #d8d8d8;
border-radius: 5px;
padding: 0 10px;
&.btn-prev {
margin-right: 8px;
}
}
}
}
}
</style>
src/views/portalManage/icon/operation.vue 0 → 100644
<template>
<main class="operation_container">
<section class="operation_content">
<el-form :model="operForm" :rules="rules" ref="operForm" label-width="100px" size="small">
<el-form-item label="名称" prop="title">
<el-input v-model="operForm.title" placeholder="给目标起个名字"></el-input>
</el-form-item>
<el-form-item label="英文">
<el-input v-model="operForm.title" placeholder="给目标起个名字"></el-input>
</el-form-item>
<el-form-item label="图片" prop="idialogImageUrl">
<el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1">
<div slot="default">
<span>
上传图片
</span>
</div>
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-view"></i>
</span>
<span v-if="!operForm.disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<span>
支持扩展名：.jpg .jpeg .png 大小1M以内
<br>
建议尺寸：50px*50px
</span>
<el-dialog :visible.sync="operForm.dialogVisible">
<img width="100%" :src="operForm.dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
<el-form-item label="顺序" prop="order">
<el-select v-model="operForm.order" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="operForm.type" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="链接" prop="link">
<el-input v-model="operForm.link" placeholder="给目标起个名字"></el-input>
</el-form-item>
<el-form-item label="启用" prop="status">
<el-switch v-model="operForm.status">
</el-switch>
</el-form-item>
<el-form-item style="text-align: right;">
<el-button type="primary" @click="submitForm('operForm')">提交</el-button>
</el-form-item>
</el-form>
</section>
</main>
</template>
<script>
export default {
name: 'CarouselOperation',
data() {
return {
operForm: {
title: '',
idialogImageUrl: '',
order: 1,
type: '',
link: '',
status: 0,
dialogVisible: false,
disabled: false
},
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
rules: {
title: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
idialogImageUrl: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
order: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
type: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
link: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
status: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
]
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
handleRemove(file) {
console.log(file);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}
}
</script>
<style lang="scss" scoped>
.operation_container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.operation_content {
width: 520px;
}
}
</style>
src/views/portalManage/openscreen/index.vue 0 → 100644
<template>
<main class="list_container">
<section class="search_bar">
<el-form :inline="true" :model="queryForm" size="small" class="demo-form-inline">
<el-form-item label="标题">
<el-input v-model="queryForm.title" placeholder="请输入标题"></el-input>
</el-form-item>
<el-form-item label="发布日期">
<el-date-picker v-model="queryForm.pushlishTime" type="daterange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchController">查 询</el-button>
<el-button @click="searchController">重 置</el-button>
</el-form-item>
</el-form>
<div class="operation_bar">
<el-button type="primary" size="small" icon="el-icon-plus">新建</el-button>
</div>
</section>
<section class="list_content">
<div class="table_wrap">
<el-table :data="tableData" size="small" style="width: 100%" :header-cell-style="headerStyle" :cell-style="cellStyle">
<el-table-column prop="date" label="序号" width="80">
</el-table-column>
<el-table-column prop="name" label="标题">
</el-table-column>
<el-table-column prop="address" label="缩略图">
</el-table-column>
<el-table-column prop="address" label="发布日期">
</el-table-column>
<el-table-column prop="address" label="启用">
<template slot-scope="scope">
<el-switch v-model="scope.status" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
<el-table-column prop="address" label="操作">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
编辑
</el-button>
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination_wrap">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1, 2, 3, 4]" :page-size="pageSize" layout="slot, prev, pager, next" :total="totalItems">
<span class="total_items">共{{totalItems}}条记录</span>
<span class="current_page">{{currentPage}}/{{totalPages}}页</span>
</el-pagination>
</div>
</section>
</main>
</template>
<script>
export default {
name: 'CarouseManage',
computed: {
totalPages() {
return Math.ceil(this.totalItems/this.pageSize)
}
},
data() {
return {
swichTime: 3,
queryForm: {},
tableData: [],
currentPage: 1,
pageSize: 10,
totalItems: 2,
headerStyle: {
background: '#FAFAFA',
color: '#101010',
textAlign: 'center',
fontSize: '14px'
},
cellStyle: {
textAlign: 'center',
fontSize: '14px'
}
}
},
methods: {
searchController() {
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
}
}
</script>
<style lang="scss" scoped>
.list_container {
width: 100%;
height: 100%;
background: #ffffff;
padding: 30px;
.el-button--small {
border-radius: 5px;
// font-size: 14px;
// padding: 0px 15px;
// line-height: 30px;
}
.operation_bar {
margin: 10px 0;
}
.el-table {
border: 1px solid #dfe6ec;
border-bottom: none;
}
.pagination_wrap {
text-align: right;
margin-top: 15px;
.el-pagination {
padding: 0;
span {
font-size: 14px;
margin-right: 10px;
// &.current_page {
// margin-right: 20px;
// }
}
::v-deep .el-pager {
li {
border: 1px solid #d8d8d8;
border-radius: 5px;
margin-right: 8px;
&.active {
background-color: #177ec6;
border-color: #177ec6;
color: #ffffff;
}
}
}
::v-deep.btn-prev,
::v-deep.btn-next {
border: 1px solid #d8d8d8;
border-radius: 5px;
padding: 0 10px;
&.btn-prev {
margin-right: 8px;
}
}
}
}
}
</style>
src/views/portalManage/openscreen/operation.vue 0 → 100644
<template>
<main class="operation_container">
<section class="operation_content">
<el-form :model="operForm" :rules="rules" ref="operForm" label-width="100px" size="small">
<el-form-item label="标题" prop="title">
<el-input v-model="operForm.title" placeholder="给目标起个名字"></el-input>
</el-form-item>
<el-form-item label="Banner" prop="idialogImageUrl">
<el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1">
<div slot="default">
<span>
上传图片
</span>
</div>
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-view"></i>
</span>
<span v-if="!operForm.disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<span>
支持扩展名：.jpg .jpeg .png .gif大小1M以内
<br>
建议尺寸：414px*890px
</span>
<el-dialog :visible.sync="operForm.dialogVisible">
<img width="100%" :src="operForm.dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="operForm.type" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="链接" prop="link">
<el-input v-model="operForm.link" placeholder="给目标起个名字"></el-input>
</el-form-item>
<el-form-item label="启用" prop="status">
<el-switch v-model="operForm.status">
</el-switch>
</el-form-item>
<el-form-item style="text-align: right;">
<el-button type="primary" @click="submitForm('operForm')">提交</el-button>
</el-form-item>
</el-form>
</section>
</main>
</template>
<script>
export default {
name: 'CarouselOperation',
data() {
return {
operForm: {
title: '',
idialogImageUrl: '',
type: '',
link: '',
status: 0,
dialogVisible: false,
disabled: false
},
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
rules: {
title: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
idialogImageUrl: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
type: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
link: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
status: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
]
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
handleRemove(file) {
console.log(file);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}
}
</script>
<style lang="scss" scoped>
.operation_container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.operation_content {
width: 520px;
}
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!