You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
349 lines
12 KiB
349 lines
12 KiB
<template> |
|
<!-- banner --> |
|
<div> |
|
<el-dialog title="模块管理" :visible.sync="visible" width="700px" custom-class="module" :close-on-click-modal="false" :before-close="close"> |
|
<template v-if="data.type === 'banner' || data.type === 'introduce'"> |
|
<el-table class="module-table" :data="data.list" header-align="center" row-key="id"> |
|
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
|
<el-table-column label="图片" min-width="140" align="center"> |
|
<template slot-scope="scope"> |
|
<el-upload |
|
v-if="data.type === 'banner'" |
|
class="uploader" |
|
accept=".jpg,.png,.jpeg" |
|
:on-success="res => uploadSuccess(res, scope.row)" |
|
:show-file-list="false" |
|
:action="api.upload"> |
|
<img v-if="scope.row.pic" :src="scope.row.pic" class="avatar"> |
|
<div class="uploader-default" v-else> |
|
<i class="el-icon-plus"></i> |
|
<p>上传图片</p> |
|
</div> |
|
<div slot="tip" class="el-upload__tip"> |
|
<p>只支持.jpg,.png格式</p> |
|
</div> |
|
</el-upload> |
|
<template v-else> |
|
<img v-if="scope.row.pic" :src="scope.row.pic" class="upload-pic"> |
|
<div class="upload-none" v-else> |
|
<i class="el-icon-picture-outline"></i> |
|
</div> |
|
</template> |
|
</template> |
|
</el-table-column> |
|
<el-table-column v-if="data.type === 'introduce'" prop="title" label="标题" min-width="140" align="center"></el-table-column> |
|
<el-table-column label="链接" min-width="140" align="center"> |
|
<template slot-scope="scope"> |
|
<div class="link-wrap"> |
|
<span>{{ scope.row.link.linkName }}</span> |
|
<el-button v-if="data.type === 'banner'" class="set-link" type="primary" size="mini" @click="toLink(scope.row, scope.$index)">设置链接</el-button> |
|
<el-button v-else class="set-link" type="primary" size="mini" @click="editIntro(scope.row, scope.$index)">编辑</el-button> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作" width="100" align="center"> |
|
<template slot-scope="scope"> |
|
<div class="flex a-center"> |
|
<el-switch |
|
v-model="scope.row.isEnable" |
|
:active-value="1" |
|
:inactive-value="0"> |
|
</el-switch> |
|
<i class="el-icon-delete del" @click="delRow(data.list, scope.$index)"></i> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="plus"> |
|
<i class="el-icon-circle-plus-outline" @click="addRow"></i> |
|
</div> |
|
</template> |
|
<el-form v-else-if="data.type === 'form'" ref="form" :model="data.form" :rules="rules" label-width="60px"> |
|
<el-form-item v-for="(item, i) in data.forms" :key="i" :prop="item.prop" :label="item.label"> |
|
<el-input v-if="item.type === 'input'" v-model="data.form[item.prop]" placeholder="请输入" maxlength="30"></el-input> |
|
<el-input v-if="item.type === 'textarea'" v-model="data.form[item.prop]" type="textarea" placeholder="请输入" maxlength="300"></el-input> |
|
<el-upload |
|
v-if="item.type === 'upload'" |
|
class="uploader" |
|
accept=".jpg,.png,.jpeg" |
|
:on-success="res => uploadSuccess(res, data.form)" |
|
:show-file-list="false" |
|
:action="api.upload"> |
|
<img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar"> |
|
<div class="uploader-default" v-else> |
|
<i class="el-icon-plus"></i> |
|
<p>上传图片</p> |
|
</div> |
|
<div slot="tip" class="el-upload__tip"> |
|
<p>只支持.jpg,.png格式</p> |
|
</div> |
|
</el-upload> |
|
<div v-if="item.type === 'link'" class="flex"> |
|
<el-input class="m-r-10" v-model="data.form.link.linkName"></el-input> |
|
<el-button @click="toLink(data.form)">设置链接</el-button> |
|
</div> |
|
<Editor v-if="item.type === 'editor'" api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="data.form[item.prop]" :init="editorConfig" /> |
|
</el-form-item> |
|
</el-form> |
|
<el-form v-else-if="data.type === 'column' || data.type === 'columns'" ref="form" :model="data.form" :rules="columnRules" label-width="100px"> |
|
<el-form-item prop="site" label="站点选择"> |
|
<el-select v-model="data.form.site" @change="siteChange"> |
|
<el-option |
|
v-for="item in $refs.link.sites" |
|
:key="item.id" |
|
:label="item.siteName" |
|
:value="item.id"> |
|
</el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item prop="column" label="关联栏目"> |
|
<el-cascader |
|
ref="links" |
|
v-model="data.form.column" |
|
:options="columns" |
|
:props="columnProps" |
|
clearable |
|
@change="columnChange"></el-cascader> |
|
</el-form-item> |
|
<el-form-item label="文章展示数量"> |
|
<el-select v-model="data.form.articleNum"> |
|
<el-option |
|
v-for="item in articleNums" |
|
:key="item.id" |
|
:label="item.name" |
|
:value="item.id"> |
|
</el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="栏目标题"> |
|
<el-radio v-model="data.form.columnTitle" :label="1" @change="columnTitleChange">默认读取关联栏目</el-radio> |
|
<div class="radio-wrap"> |
|
<el-radio v-model="data.form.columnTitle" :label="2" @change="columnTitleChange"></el-radio> |
|
<el-input v-model="data.form.columnTitleCustom" :disabled="data.form.columnTitle == 1" size="small" maxlength="10"></el-input> |
|
</div> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="$emit('update:visible', false)">取消</el-button> |
|
<el-button type="primary" @click="moduleSubmit">确定</el-button> |
|
</span> |
|
</el-dialog> |
|
<Link ref="link" :data.sync="linkForm" :visible.sync="linkVisible" @linkSubmit="linkSubmit" /> |
|
<Content :data.sync="data" :visible.sync="contentVisible" @contentSubmit="contentSubmit" /> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Link from '@/components/modules/link' |
|
import Content from '@/components/modules/content' |
|
import Editor from '@tinymce/tinymce-vue' |
|
import Util from '@/libs/util' |
|
import editorConfig from '@/components/editor' |
|
export default { |
|
name: 'module', |
|
props: ['data', 'visible'], |
|
components: { |
|
Link, |
|
Content, |
|
Editor |
|
}, |
|
data() { |
|
return { |
|
rules: {}, |
|
linkVisible: false, |
|
linkForm: {}, |
|
curIndex: 0, |
|
editorConfig, |
|
|
|
columnRules: { |
|
site: [ |
|
{ required: true, message: '请选择站点', trigger: 'change' } |
|
], |
|
column: [ |
|
{ required: true, message: '请选择关联栏目', trigger: 'change' } |
|
], |
|
}, |
|
columns: [], |
|
articleNums: [ |
|
{ |
|
id: '', |
|
name: '默认' |
|
}, |
|
{ |
|
id: 4, |
|
name: '4' |
|
}, |
|
{ |
|
id: 3, |
|
name: '3' |
|
}, |
|
{ |
|
id: 2, |
|
name: '2' |
|
}, |
|
], |
|
columnProps: { |
|
checkStrictly: true, |
|
value: 'id', |
|
label: 'columnName' |
|
}, |
|
|
|
contentVisible: false, |
|
curModule: 0, |
|
curData: {}, |
|
}; |
|
}, |
|
watch: { |
|
visible(open) { |
|
// 每次打开的时候处理参数 |
|
open && this.handleForm() |
|
} |
|
}, |
|
mounted() { |
|
this.handleForm() |
|
}, |
|
methods: { |
|
// 处理form表单参数 |
|
handleForm() { |
|
const { type, forms, form } = this.data |
|
console.log("🚀 ~ file: module.vue ~ line 209 ~ handleForm ~ type", this.data, form) |
|
if (type === 'form') { |
|
forms.map(e => { |
|
// 加必填 |
|
if (e.required) { |
|
this.rules[e.prop] = [ |
|
{ |
|
required: true, |
|
message: `请${e.type === 'input' ? '输入' : '选择'}${e.label}`, |
|
trigger: e.type === 'input' ? 'blur' : 'change' |
|
} |
|
] |
|
} |
|
}) |
|
} |
|
|
|
form && form.site && this.siteChange(form.site) |
|
}, |
|
// 站点切换回调 |
|
siteChange(siteId) { |
|
this.$post(this.api.listWithTree, { |
|
siteId, |
|
columnName: '', |
|
templateId: '', |
|
typeId : '', |
|
isSort: 0 |
|
}).then(({ data }) => { |
|
this.columns = data |
|
}).catch(err => {}) |
|
}, |
|
// 栏目切换回调 |
|
columnChange(val) { |
|
this.data.form.columnName = this.$refs.links.getCheckedNodes()[0].label |
|
}, |
|
// 栏目标题切换回调 |
|
columnTitleChange(val) { |
|
const { form } = this.data |
|
const checked = this.$refs.links.getCheckedNodes() |
|
form.columnName = val === 2 ? form.columnTitleCustom : (checked.length ? checked[0].label : '') |
|
}, |
|
// 添加行 |
|
addRow() { |
|
if (this.data.type === 'banner') { |
|
this.data.list.push(JSON.parse(JSON.stringify(this.data.originForm))) |
|
} else { |
|
this.editIntro(this.data.originForm, -1) |
|
} |
|
}, |
|
close() { |
|
this.$emit('update:visible', false) |
|
}, |
|
// 上传成功 |
|
uploadSuccess(res, row) { |
|
console.log("🚀 ~ file: index.vue ~ line 238 ~ uploadSuccess ~ res, row", res, row) |
|
// let url = this.form.columnBanner |
|
// url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {}) |
|
this.$set(row, 'pic', res.url) |
|
// row.pic = res.url |
|
}, |
|
// 删除行（通用） |
|
delRow(list, i) { |
|
this.$confirm('确定要删除吗？', '提示', { |
|
type: 'warning' |
|
}).then(() => { |
|
list.splice(i, 1) |
|
}).catch(() => {}) |
|
}, |
|
// 展示链接设置 |
|
toLink(row, i = 0) { |
|
this.curIndex = i |
|
this.linkForm = row.link |
|
this.linkVisible = true |
|
}, |
|
// 编辑内容 |
|
editIntro(row, i = 0) { |
|
this.data.form = JSON.parse(JSON.stringify(row)) |
|
this.curModule = i |
|
this.contentVisible = true |
|
}, |
|
// content设置提交 |
|
contentSubmit() { |
|
this.contentVisible = false |
|
const { form } = this.data |
|
if (this.curModule === -1) { |
|
this.data.list.push(JSON.parse(JSON.stringify(this.data.form))) |
|
} else { |
|
const list = this.data.list[this.curModule] |
|
for (const i in form) { |
|
this.$set(list, i, form[i]) |
|
} |
|
} |
|
this.data.form = JSON.parse(JSON.stringify(this.data.originForm)) |
|
}, |
|
// 链接设置提交 |
|
linkSubmit() { |
|
const el = this.$refs.link |
|
const data = this.data.form ? this.data.form.link : this.data.list[this.curIndex].link |
|
let name |
|
// 站内链接 |
|
if (data.connectionType === 1) { |
|
if (!data.columnId.length) return Util.errorMsg('请选择站内链接') |
|
// 如果选择了文章，则取文章标题作为链接名称，否则取栏目标题 |
|
if (data.articleId) { |
|
const item = el.articles.find(e => e.id == data.articleId) |
|
name = item ? item.title : '' |
|
} else { |
|
name = el.$refs.column.getCheckedNodes()[0].pathLabels.join('/') |
|
} |
|
} else if (data.connectionType === 3) { // 其他站点链接 |
|
if (!data.otherColumnId.length) return Util.errorMsg('请选择栏目') |
|
// 如果选择了文章，则取文章标题作为链接名称，否则取栏目标题 |
|
if (data.otherArticleId) { |
|
const item = el.articles.find(e => e.id == data.otherArticleId) |
|
name = item ? item.title : '' |
|
} else { |
|
name = el.$refs.otherColumn.getCheckedNodes()[0].pathLabels.join('/') |
|
} |
|
} else { // 站外链接 |
|
if (!data.linkAddress) return Util.errorMsg('请输入站外链接') |
|
name = data.linkAddress |
|
} |
|
data.linkName = name |
|
this.linkVisible = false |
|
}, |
|
// 模块设置提交 |
|
moduleSubmit() { |
|
this.$emit('moduleSubmit') |
|
}, |
|
} |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.radio-wrap { |
|
display: flex; |
|
align-items: center; |
|
.el-input { |
|
width: 200px; |
|
margin-left: -40px; |
|
} |
|
} |
|
</style> |