轮播图片编辑，详情
This commit is contained in:
liuye
@@ -1,304 +1,70 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="appcarousel">
|
<div class="AppCarousel">
|
||||||
<ai-list>
|
<keep-alive :include="['List']">
|
||||||
<template slot="title">
|
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||||
<ai-title title="轮播图片" :isShowBottomBorder="false" :isShowArea="false"></ai-title>
|
</keep-alive>
|
||||||
</template>
|
|
||||||
|
|
||||||
<template slot="content">
|
|
||||||
<ai-search-bar>
|
|
||||||
<template slot="left">
|
|
||||||
<el-button type="primary" icon="iconfont iconAdd" size="small" @click="add">添加</el-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template slot="right">
|
|
||||||
<el-input v-model="search.title" size="small" placeholder="搜索标题" clearable
|
|
||||||
v-throttle="() => {page.current = 1, getList()}"
|
|
||||||
@clear=";(page.current = 1), (search.title = ''), getList()" suffix-icon="iconfont iconSearch"/>
|
|
||||||
</template>
|
|
||||||
</ai-search-bar>
|
|
||||||
|
|
||||||
<ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
|
|
||||||
:size.sync="page.size" @getList="getList" class="ai-table">
|
|
||||||
<!-- 首页封面 -->
|
|
||||||
<el-table-column label="首页封面" align="left" width="150" slot="imgUrl">
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
<img :src="row.imgUrl" alt="" class="banner-img" v-if="row.imgUrl"/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<!-- 操作 -->
|
|
||||||
<el-table-column label="操作" align="center" width="300" slot="option">
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
<el-button type="text" @click="release(row)" v-if="row.status == 1">取消发布</el-button>
|
|
||||||
<el-button type="text" @click="release(row)" v-else>发布</el-button>
|
|
||||||
|
|
||||||
<el-button type="text" @click="detail(row)">详情</el-button>
|
|
||||||
<el-button type="text" @click="edit(row)">编辑</el-button>
|
|
||||||
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</ai-table>
|
|
||||||
</template>
|
|
||||||
</ai-list>
|
|
||||||
|
|
||||||
<!-- 添加的模态框 -->
|
|
||||||
<ai-dialog :title="dialog.title" :visible.sync="visible" @onCancel="visible = false" @onConfirm="addConfirm"
|
|
||||||
width="800px">
|
|
||||||
<el-form ref="ruleForm" :model="dialogInfo" :rules="formRules" size="small" label-width="100px">
|
|
||||||
<!-- 首页封面 -->
|
|
||||||
<el-form-item label="首页封面" prop="imgUrl">
|
|
||||||
<ai-uploader v-model="dialogInfo.imgUrl" @change="change" :instance="instance" :limit="1"></ai-uploader>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 活动名称 -->
|
|
||||||
<el-form-item label="标题" prop="title">
|
|
||||||
<el-input placeholder="请输入标题" :maxlength="30" show-word-limit v-model="dialogInfo.title"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 连接类型 -->
|
|
||||||
<el-form-item label="链接类型" prop="type">
|
|
||||||
<ai-select v-model="dialogInfo.type" placeholder="请选择链接类型"
|
|
||||||
:selectList="$dict.getDict('bannerType')"></ai-select>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 链接 -->
|
|
||||||
<el-form-item label="链接" prop="linkUrl">
|
|
||||||
<el-input placeholder="请输入链接" v-model="dialogInfo.linkUrl"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</ai-dialog>
|
|
||||||
|
|
||||||
<!-- 详情的模态框 -->
|
|
||||||
<ai-dialog title="详情" :visible.sync="detailDialog" customFooter width="800px">
|
|
||||||
<!-- -->
|
|
||||||
<el-form ref="ruleForm" :model="dialogInfo" :rules="formRules" size="small" label-width="100px">
|
|
||||||
<ai-wrapper label-width="80px" :columnsNumber="1">
|
|
||||||
<ai-info-item label="首页封面">
|
|
||||||
<span><img :src="dialogInfo.imgUrl" alt="" style="width:100px;height:100px;"/></span>
|
|
||||||
</ai-info-item>
|
|
||||||
<ai-info-item label="标题">
|
|
||||||
<span>{{ dialogInfo.title }}</span>
|
|
||||||
</ai-info-item>
|
|
||||||
<ai-info-item label="链接类型">
|
|
||||||
<span>{{ this.dict.getLabel('bannerType', dialogInfo.type) }}</span>
|
|
||||||
</ai-info-item>
|
|
||||||
<ai-info-item label="链接">
|
|
||||||
<span>{{ dialogInfo.linkUrl }}</span>
|
|
||||||
</ai-info-item>
|
|
||||||
</ai-wrapper>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<div class="dialog-footer" slot="footer">
|
|
||||||
<el-button @click="detailDialog=false">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</ai-dialog>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {mapState} from 'vuex'
|
import List from './components/List'
|
||||||
|
import Detail from './components/Detail'
|
||||||
|
import Add from './components/Add'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
label: '轮播图片',
|
name: 'AppCarousel',
|
||||||
name: 'AppCarousel',
|
label: '轮播图片',
|
||||||
// 组件
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
instance: Function,
|
|
||||||
dict: Object,
|
|
||||||
permissions: Function,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
visible: false,
|
|
||||||
detailDialog: false,
|
|
||||||
// status: 0,
|
|
||||||
// id:'',
|
|
||||||
search: {
|
|
||||||
title: '',
|
|
||||||
},
|
|
||||||
tableData: [],
|
|
||||||
page: {
|
|
||||||
size: 10,
|
|
||||||
current: 1,
|
|
||||||
total: 0,
|
|
||||||
},
|
|
||||||
dialog: {
|
|
||||||
// title: '',
|
|
||||||
visible: false,
|
|
||||||
},
|
|
||||||
dialogInfo: {
|
|
||||||
id: '',
|
|
||||||
title: '',
|
|
||||||
imgUrl: [],
|
|
||||||
type: '',
|
|
||||||
linkUrl: '',
|
|
||||||
},
|
|
||||||
// fileList: '',
|
|
||||||
formRules: {
|
|
||||||
imgUrl: [{required: true, message: '请添加图片', trigger: 'blur'}],
|
|
||||||
title: [{required: true, message: '请输入标题', trigger: 'blur'}],
|
|
||||||
type: [{required: true, trigger: 'change', message: '请选择链接类型'}],
|
|
||||||
// linkUrl: [{ required: true, message: '请输入链接', trigger: 'blur' }]
|
|
||||||
},
|
|
||||||
colConfigs: [
|
|
||||||
{prop: 'imgUrl', label: '首页封面', slot: 'imgUrl'},
|
|
||||||
{
|
|
||||||
prop: 'title',
|
|
||||||
label: '标题',
|
|
||||||
|
|
||||||
'show-overflow-tooltip': true,
|
props: {
|
||||||
},
|
instance: Function,
|
||||||
{
|
dict: Object
|
||||||
prop: 'type',
|
},
|
||||||
label: '链接类型',
|
|
||||||
render: (h, {row}) => {
|
|
||||||
return h('span', null, this.dict.getLabel('bannerType', row.type))
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'status',
|
|
||||||
label: '发布状态',
|
|
||||||
width: 400,
|
|
||||||
render: (h, {row}) => {
|
|
||||||
return h('span', null, this.dict.getLabel('bannerSstatus', row.status))
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{slot: 'option', label: '操作', width: 280},
|
data () {
|
||||||
],
|
return {
|
||||||
}
|
component: 'List',
|
||||||
},
|
params: {},
|
||||||
// 计算
|
include: []
|
||||||
computed: {
|
}
|
||||||
...mapState(['user']),
|
},
|
||||||
},
|
|
||||||
// 监听
|
|
||||||
watch: {},
|
|
||||||
// 实例创建后
|
|
||||||
created() {
|
|
||||||
this.dict.load('bannerType', 'bannerSstatus').then(() => {
|
|
||||||
this.getList()
|
|
||||||
})
|
|
||||||
// this.getList()
|
|
||||||
this.getShopList()
|
|
||||||
},
|
|
||||||
// 实例渲染后
|
|
||||||
mounted() {
|
|
||||||
},
|
|
||||||
// 方法
|
|
||||||
methods: {
|
|
||||||
getList() {
|
|
||||||
this.instance
|
|
||||||
.post(`/app/appbanner/list`, null, {
|
|
||||||
params: {
|
|
||||||
...this.search,
|
|
||||||
...this.page,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
if (res.code == 0) {
|
|
||||||
// console.log(res.data.records)
|
|
||||||
this.tableData = res.data.records
|
|
||||||
|
|
||||||
this.page.total = res.data.total
|
components: {
|
||||||
|
Detail,
|
||||||
|
List,
|
||||||
|
Add
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onChange (data) {
|
||||||
|
if (data.type === 'Detail') {
|
||||||
|
this.component = 'Detail'
|
||||||
|
this.params = data.params
|
||||||
}
|
}
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getShopList() {
|
|
||||||
},
|
|
||||||
add() {
|
|
||||||
this.dialog.title = '添加'
|
|
||||||
this.dialogInfo = {}
|
|
||||||
this.getList()
|
|
||||||
this.visible = true
|
|
||||||
},
|
|
||||||
|
|
||||||
data(e) {
|
if (data.type === 'Add') {
|
||||||
this.files.push(e)
|
this.component = 'Add'
|
||||||
},
|
this.params = data.params
|
||||||
change(e) {
|
}
|
||||||
this.files = e
|
|
||||||
},
|
if (data.type === 'List') {
|
||||||
// 确定新增
|
this.component = 'List'
|
||||||
addConfirm() {
|
this.params = data.params
|
||||||
// console.log('确定')
|
|
||||||
this.$refs.ruleForm.validate((valid) => {
|
this.$nextTick(() => {
|
||||||
if (valid) {
|
if (data.isRefresh) {
|
||||||
this.instance.post(`/app/appbanner/addOrUpdate`, {
|
this.$refs.component.getList()
|
||||||
imgUrl: this.dialogInfo.imgUrl[0].url,
|
|
||||||
linkUrl: this.dialogInfo.linkUrl,
|
|
||||||
status: this.status,
|
|
||||||
title: this.dialogInfo.title,
|
|
||||||
type: this.dialogInfo.type,
|
|
||||||
id: this.dialogInfo.id,
|
|
||||||
}).then(res => {
|
|
||||||
if (res?.code == 0) {
|
|
||||||
this.$message.success('新增成功')
|
|
||||||
this.visible = false
|
|
||||||
this.getList()
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
},
|
}
|
||||||
// 发布/取消发布
|
}
|
||||||
release(row) {
|
|
||||||
this.$confirm('确定此操作？').then(() => {
|
|
||||||
var status = row.status == 1 ? '0' : '1'
|
|
||||||
this.instance.post(`/app/appbanner/setStatus?id=${row.id}&status=${status}`)
|
|
||||||
.then((res) => {
|
|
||||||
if (res?.code == 0) {
|
|
||||||
this.getList()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 详情
|
|
||||||
detail(row) {
|
|
||||||
this.detailDialog = true
|
|
||||||
this.instance.post(`/app/appbanner/detail?id=${row.id}`, {
|
|
||||||
// imgUrl: this.dialogInfo.imgUrl[0].url
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
if (res?.data) {
|
|
||||||
this.dialogInfo = {...row}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 编辑
|
|
||||||
edit(row) {
|
|
||||||
this.dialog.title = '编辑'
|
|
||||||
this.visible = true
|
|
||||||
this.dialogInfo = {...row}
|
|
||||||
this.dialogInfo.imgUrl = [{url: ''}]
|
|
||||||
this.dialogInfo.imgUrl[0].url = row.imgUrl
|
|
||||||
// console.log(this.dialogInfo)
|
|
||||||
},
|
|
||||||
// 删除
|
|
||||||
remove(id) {
|
|
||||||
this.$confirm('删除后不可恢复，是否要删除该事项？', {
|
|
||||||
type: 'error',
|
|
||||||
}).then(() => {
|
|
||||||
this.instance.post(`/app/appbanner/delete?ids=${id}`).then((res) => {
|
|
||||||
if (res.code == 0) {
|
|
||||||
this.$message.success('删除成功！')
|
|
||||||
this.getList()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.appcarousel {
|
.AppCarousel {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// padding: 15px 10px;
|
background: #F3F6F9;
|
||||||
.banner-img {
|
overflow: auto;
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
326
project/tianfuxing/AppCarousel/components/Add.vue
Normal file
326
project/tianfuxing/AppCarousel/components/Add.vue
Normal file
@@ -0,0 +1,326 @@
|
|||||||
|
<template>
|
||||||
|
<ai-detail class="Add">
|
||||||
|
<template slot="title">
|
||||||
|
<ai-title :title="params.id ? '编辑轮播图片' : '添加轮播图片'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
||||||
|
</ai-title>
|
||||||
|
</template>
|
||||||
|
<template slot="content">
|
||||||
|
<el-form ref="ruleForm" :model="dialogInfo" :rules="formRules" size="small" label-width="100px">
|
||||||
|
<ai-card title="基本信息">
|
||||||
|
<template #content>
|
||||||
|
<!-- 首页封面 -->
|
||||||
|
<el-form-item label="首页封面" prop="imgUrl">
|
||||||
|
<ai-uploader v-model="dialogInfo.imgUrl" :instance="instance" :limit="1"></ai-uploader>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- 活动名称 -->
|
||||||
|
<el-form-item label="标题" prop="title">
|
||||||
|
<el-input placeholder="请输入标题" :maxlength="30" show-word-limit v-model="dialogInfo.title"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- 连接类型 -->
|
||||||
|
<el-form-item label="链接类型" prop="type">
|
||||||
|
<ai-select v-model="dialogInfo.type" placeholder="请选择链接类型"
|
||||||
|
:selectList="$dict.getDict('bannerType')"></ai-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="内容" prop="rtf" v-if="dialogInfo.type == 3">
|
||||||
|
<ai-editor v-model="dialogInfo.rtf" :instance="instance" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<!-- 链接 -->
|
||||||
|
<el-form-item label="链接" prop="linkUrl" v-else>
|
||||||
|
<el-input placeholder="请输入链接" v-model="dialogInfo.linkUrl"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="cancel">取消</el-button>
|
||||||
|
<el-button type="primary" @click="confirm()">确认</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Add',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
params: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialogInfo: {
|
||||||
|
id: '',
|
||||||
|
title: '',
|
||||||
|
imgUrl: [],
|
||||||
|
type: '',
|
||||||
|
linkUrl: '',
|
||||||
|
},
|
||||||
|
formRules: {
|
||||||
|
imgUrl: [{required: true, message: '请添加图片', trigger: 'change'}],
|
||||||
|
title: [{required: true, message: '请输入标题', trigger: 'blur'}],
|
||||||
|
type: [{required: true, trigger: 'change', message: '请选择链接类型'}],
|
||||||
|
rtf: [{ required: true, trigger: 'blur', message: '请输入内容' }]
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
if (this.params && this.params.id) {
|
||||||
|
this.getInfo()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getInfo() {
|
||||||
|
this.instance.post(`/app/appbanner/detail?id=${this.params.id}`).then((res) => {
|
||||||
|
if (res.data) {
|
||||||
|
this.dialogInfo = res.data
|
||||||
|
this.dialogInfo.imgUrl = [{url: res.data.imgUrl}]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
confirm() {
|
||||||
|
this.$refs.ruleForm.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.instance.post(`/app/appbanner/addOrUpdate`, {
|
||||||
|
...this.dialogInfo,
|
||||||
|
imgUrl: this.dialogInfo.imgUrl[0].url,
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.code == 0) {
|
||||||
|
this.$message.success(this.params.id ? '编辑成功' : '新增成功')
|
||||||
|
this.cancel(true)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel(isRefresh) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'List',
|
||||||
|
isRefresh: !!isRefresh
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// .el-tooltip__popper.is-dark {
|
||||||
|
// max-width: 240px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .AppAnnounceAdd {
|
||||||
|
// .ai-detail__content {
|
||||||
|
// .ai-detail__content--wrapper {
|
||||||
|
// position: relative;
|
||||||
|
// max-width: 100%;
|
||||||
|
// margin: 0;
|
||||||
|
// height: 100%;
|
||||||
|
// overflow: hidden;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .ai-form {
|
||||||
|
// textarea {
|
||||||
|
// border-radius: 4px 4px 0 0!important;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// * {
|
||||||
|
// box-sizing: border-box;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .add {
|
||||||
|
// display: flex;
|
||||||
|
// flex-direction: column;
|
||||||
|
// padding: 14px 16px;
|
||||||
|
// background: #F9F9F9;
|
||||||
|
// border-radius: 0px 0px 4px 4px;
|
||||||
|
// border: 1px solid #D0D4DC;
|
||||||
|
// border-top: none;
|
||||||
|
|
||||||
|
// .add-item {
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// line-height: 1;
|
||||||
|
// cursor: pointer;
|
||||||
|
|
||||||
|
// &:hover {
|
||||||
|
// opacity: 0.6;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// img {
|
||||||
|
// width: 20px;
|
||||||
|
// height: 20px;
|
||||||
|
// margin-right: 2px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// span {
|
||||||
|
// color: #222;
|
||||||
|
// font-size: 14px;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .fileList {
|
||||||
|
// margin-bottom: 12px;
|
||||||
|
|
||||||
|
// .add-item {
|
||||||
|
// justify-content: space-between;
|
||||||
|
// margin-bottom: 8px;
|
||||||
|
|
||||||
|
// .left {
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// i {
|
||||||
|
// font-size: 14px;
|
||||||
|
// cursor: pointer;
|
||||||
|
// font-style: normal;
|
||||||
|
// color: red;
|
||||||
|
|
||||||
|
// &:hover {
|
||||||
|
// opacity: 0.6;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// &:last-child {
|
||||||
|
// margin-bottom: 0;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .AppAnnounceDetail-container {
|
||||||
|
// display: flex;
|
||||||
|
// position: relative;
|
||||||
|
// height: 100%;
|
||||||
|
// padding: 0 20px;
|
||||||
|
// overflow: auto;
|
||||||
|
// overflow: overlay;
|
||||||
|
|
||||||
|
// .left {
|
||||||
|
// flex: 1;
|
||||||
|
// margin-right: 20px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .right {
|
||||||
|
// position: sticky;
|
||||||
|
// top: 0;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .AppAnnounceDetail-select {
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// min-height: 32px;
|
||||||
|
// line-height: 1;
|
||||||
|
// background: #F5F5F5;
|
||||||
|
// border-radius: 4px;
|
||||||
|
// border: 1px solid #D0D4DC;
|
||||||
|
// cursor: pointer;
|
||||||
|
// overflow: hidden;
|
||||||
|
// transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
|
||||||
|
// &:hover {
|
||||||
|
// border-color: #26f;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// & > i {
|
||||||
|
// flex: 1;
|
||||||
|
// height: 100%;
|
||||||
|
// line-height: 32px;
|
||||||
|
// padding: 0 12px;
|
||||||
|
// color: #888888;
|
||||||
|
// font-size: 14px;
|
||||||
|
// font-style: normal;
|
||||||
|
// border-right: 1px solid #D0D4DC;
|
||||||
|
// background: #fff;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .AppAnnounceDetail-select__input {
|
||||||
|
// position: absolute;
|
||||||
|
// left: 0;
|
||||||
|
// top: 0;
|
||||||
|
// z-index: -1;
|
||||||
|
// opacity: 0;
|
||||||
|
// height: 100%;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .select-right {
|
||||||
|
// height: 100%;
|
||||||
|
// padding: 0 12px;
|
||||||
|
// color: #222222;
|
||||||
|
// font-size: 12px;
|
||||||
|
// cursor: pointer;
|
||||||
|
// transition: all ease 0.3s;
|
||||||
|
|
||||||
|
// &:hover {
|
||||||
|
// opacity: 0.5;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .select-left {
|
||||||
|
// display: flex;
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
// flex: 1;
|
||||||
|
// padding: 5px 0 0px 12px;
|
||||||
|
// border-right: 1px solid #D0D4DC;
|
||||||
|
// border-radius: 4px 0 0 4px;
|
||||||
|
// background: #fff;
|
||||||
|
|
||||||
|
// em {
|
||||||
|
// height: 22px;
|
||||||
|
// line-height: 22px;
|
||||||
|
// margin: 0 4px 5px 0;
|
||||||
|
// color: #222222;
|
||||||
|
// font-size: 12px;
|
||||||
|
// font-style: normal;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// span {
|
||||||
|
// height: 22px;
|
||||||
|
// line-height: 22px;
|
||||||
|
// margin: 0 4px 5px 0;
|
||||||
|
// padding: 0 8px;
|
||||||
|
// font-size: 12px;
|
||||||
|
// color: #222222;
|
||||||
|
// background: #F3F4F7;
|
||||||
|
// border-radius: 2px;
|
||||||
|
// border: 1px solid #D0D4DC;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .tips {
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// font-size: 14px;
|
||||||
|
// color: #222222;
|
||||||
|
|
||||||
|
// span {
|
||||||
|
// margin: 0 3px;
|
||||||
|
// color: #2266FF;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// i {
|
||||||
|
// color: #8899bb;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// em {
|
||||||
|
// line-height: 20px;
|
||||||
|
// margin-top: 8px;
|
||||||
|
// color: #888888;
|
||||||
|
// font-size: 12px;
|
||||||
|
// font-style: normal;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
</style>
|
||||||
76
project/tianfuxing/AppCarousel/components/Detail.vue
Normal file
76
project/tianfuxing/AppCarousel/components/Detail.vue
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
<template>
|
||||||
|
<section class="detail">
|
||||||
|
<ai-title slot="title" title="轮播图详情" isShowBottomBorder :isShowBack="true" @onBackClick="cancel(false)"/>
|
||||||
|
<ai-card>
|
||||||
|
<ai-title slot="title" title="基本信息"/>
|
||||||
|
<template #content>
|
||||||
|
<ai-wrapper label-width="80px" :columnsNumber="1">
|
||||||
|
<ai-info-item label="首页封面">
|
||||||
|
<span><img :src="dialogInfo.imgUrl" alt="" style="width:100px;height:100px;"/></span>
|
||||||
|
</ai-info-item>
|
||||||
|
<ai-info-item label="标题">
|
||||||
|
<span>{{ dialogInfo.title }}</span>
|
||||||
|
</ai-info-item>
|
||||||
|
<ai-info-item label="链接类型">
|
||||||
|
<span>{{ dict.getLabel('bannerType', dialogInfo.type) }}</span>
|
||||||
|
</ai-info-item>
|
||||||
|
<ai-info-item label="内容" isLine v-if="dialogInfo.type == 3">
|
||||||
|
<div v-html="dialogInfo.rtf"></div>
|
||||||
|
</ai-info-item>
|
||||||
|
<ai-info-item label="链接" v-else>
|
||||||
|
<span>{{ dialogInfo.linkUrl }}</span>
|
||||||
|
</ai-info-item>
|
||||||
|
|
||||||
|
</ai-wrapper>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "detail",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialogInfo: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
permissions: Function,
|
||||||
|
params: Object,
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getDetail()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getDetail() {
|
||||||
|
this.instance.post(`/app/appbanner/detail?id=${this.params.id}`).then((res) => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.dialogInfo = {...res.data}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel(isRefresh) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'List',
|
||||||
|
isRefresh: !!isRefresh
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.detail {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
165
project/tianfuxing/AppCarousel/components/List.vue
Normal file
165
project/tianfuxing/AppCarousel/components/List.vue
Normal file
@@ -0,0 +1,165 @@
|
|||||||
|
<template>
|
||||||
|
<div class="List">
|
||||||
|
<ai-list>
|
||||||
|
<template slot="title">
|
||||||
|
<ai-title title="轮播图片" :isShowBottomBorder="false" :isShowArea="false"></ai-title>
|
||||||
|
</template>
|
||||||
|
<template slot="content">
|
||||||
|
<ai-search-bar>
|
||||||
|
<template slot="left">
|
||||||
|
<el-button type="primary" icon="iconfont iconAdd" size="small" @click="add">添加</el-button>
|
||||||
|
</template>
|
||||||
|
<template slot="right">
|
||||||
|
<el-input v-model="search.title" size="small" placeholder="搜索标题" clearable v-throttle="() => {page.current = 1, getList()}"
|
||||||
|
@clear=";(page.current = 1), (search.title = ''), getList()" suffix-icon="iconfont iconSearch"/>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
|
||||||
|
:size.sync="page.size" @getList="getList" class="ai-table">
|
||||||
|
<!-- 首页封面 -->
|
||||||
|
<el-table-column label="首页封面" align="left" width="150" slot="imgUrl">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<img :src="row.imgUrl" alt="" class="banner-img" v-if="row.imgUrl"/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<!-- 操作 -->
|
||||||
|
<el-table-column label="操作" align="center" width="300" slot="option">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-button type="text" @click="release(row)" v-if="row.status == 1">取消发布</el-button>
|
||||||
|
<el-button type="text" @click="release(row)" v-else>发布</el-button>
|
||||||
|
<el-button type="text" @click="detail(row.id)">详情</el-button>
|
||||||
|
<el-button type="text" @click="edit(row.id)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'List',
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
permissions: Function,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
search: {
|
||||||
|
title: '',
|
||||||
|
},
|
||||||
|
tableData: [],
|
||||||
|
page: {
|
||||||
|
size: 10,
|
||||||
|
current: 1,
|
||||||
|
total: 0,
|
||||||
|
},
|
||||||
|
colConfigs: [
|
||||||
|
{prop: 'imgUrl', label: '首页封面', slot: 'imgUrl'},
|
||||||
|
{prop: 'title', label: '标题', 'show-overflow-tooltip': true,},
|
||||||
|
{prop: 'type', label: '链接类型',
|
||||||
|
render: (h, {row}) => {return h('span', null, this.dict.getLabel('bannerType', row.type))},
|
||||||
|
},
|
||||||
|
{prop: 'status', label: '发布状态', width: 400,
|
||||||
|
render: (h, {row}) => {return h('span', null, this.dict.getLabel('bannerSstatus', row.status))},
|
||||||
|
},
|
||||||
|
{slot: 'option', label: '操作', width: 280},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 计算
|
||||||
|
computed: {
|
||||||
|
...mapState(['user']),
|
||||||
|
},
|
||||||
|
// 监听
|
||||||
|
watch: {},
|
||||||
|
// 实例创建后
|
||||||
|
created() {
|
||||||
|
this.dict.load('bannerType', 'bannerSstatus').then(() => {
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 实例渲染后
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
// 方法
|
||||||
|
methods: {
|
||||||
|
getList() {
|
||||||
|
this.instance.post(`/app/appbanner/list`, null, {
|
||||||
|
params: {
|
||||||
|
...this.search,
|
||||||
|
...this.page,
|
||||||
|
},
|
||||||
|
}).then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.page.total = res.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
add() {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'Add',
|
||||||
|
params: {id: ''}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 发布/取消发布
|
||||||
|
release(row) {
|
||||||
|
this.$confirm('确定此操作？').then(() => {
|
||||||
|
var status = row.status == 1 ? '0' : '1'
|
||||||
|
this.instance.post(`/app/appbanner/setStatus?id=${row.id}&status=${status}`)
|
||||||
|
.then((res) => {
|
||||||
|
if (res?.code == 0) {
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
detail(id) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'Detail',
|
||||||
|
params: {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
edit(id) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'Add',
|
||||||
|
params: {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 删除
|
||||||
|
remove(id) {
|
||||||
|
this.$confirm('删除后不可恢复，是否要删除该事项？', {
|
||||||
|
type: 'error',
|
||||||
|
}).then(() => {
|
||||||
|
this.instance.post(`/app/appbanner/delete?ids=${id}`).then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('删除成功！')
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.List {
|
||||||
|
height: 100%;
|
||||||
|
// padding: 15px 10px;
|
||||||
|
.banner-img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user