kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

轮播图片编辑，详情

Browse Source
This commit is contained in:
liuye
2023-01-05 16:06:20 +08:00
parent b69b0e878a
commit 2d62200297
4 changed files with 618 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

336
project/tianfuxing/AppCarousel/AppCarousel.vue
View File

@@ -1,304 +1,70 @@
<template>
<div class="appcarousel">
<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)">详情</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 class="AppCarousel">
<keep-alive :include="['List']">
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
</keep-alive>
</div>
</template>
<script>
import {mapState} from 'vuex'
import List from './components/List'
import Detail from './components/Detail'
import Add from './components/Add'
export default {
label: '轮播图片',
name: 'AppCarousel',
// 组件
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: '标题',
export default {
name: 'AppCarousel',
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))
},
},
props: {
instance: Function,
dict: Object
},
{slot: 'option', label: '操作', width: 280},
],
}
},
// 计算
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
data () {
return {
component: 'List',
params: {},
include: []
}
},
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) {
this.files.push(e)
},
change(e) {
this.files = e
},
// 确定新增
addConfirm() {
// console.log('确定')
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.instance.post(`/app/appbanner/addOrUpdate`, {
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()
if (data.type === 'Add') {
this.component = 'Add'
this.params = data.params
}
if (data.type === 'List') {
this.component = 'List'
this.params = data.params
this.$nextTick(() => {
if (data.isRefresh) {
this.$refs.component.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>
<style lang="scss">
.appcarousel {
height: 100%;
// padding: 15px 10px;
.banner-img {
width: 50px;
height: 50px;
.AppCarousel {
height: 100%;
background: #F3F6F9;
overflow: auto;
}
}
</style>

326
project/tianfuxing/AppCarousel/components/Add.vue Normal file
View 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
View 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
View 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>