320 lines
7.4 KiB
Vue
320 lines
7.4 KiB
Vue
<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>
|