轮播图片编辑，详情
This commit is contained in:
liuye
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>
|
||||
Reference in New Issue
Block a user