|
|
|
|
@ -3,40 +3,22 @@ |
|
|
|
|
<!-- |
|
|
|
|
模块type: introduce | form | forms | column | columns | history |
|
|
|
|
--> |
|
|
|
|
<el-dialog title="模块管理" |
|
|
|
|
:visible.sync="visible" |
|
|
|
|
:width="dialogWidth" |
|
|
|
|
custom-class="module" |
|
|
|
|
:close-on-click-modal="false" |
|
|
|
|
:before-close="close"> |
|
|
|
|
<el-dialog title="模块管理" :visible.sync="visible" :width="dialogWidth" custom-class="module" |
|
|
|
|
:close-on-click-modal="false" :before-close="close"> |
|
|
|
|
<template v-if="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 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 v-for="(item, i) in data.forms" |
|
|
|
|
:key="i" |
|
|
|
|
:prop="item.prop" |
|
|
|
|
:label="item.label" |
|
|
|
|
min-width="130" |
|
|
|
|
align="center"> |
|
|
|
|
<el-table-column v-for="(item, i) in data.forms" :key="i" :prop="item.prop" :label="item.label" |
|
|
|
|
min-width="130" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<div v-if="item.type === 'link' && scope.row.link" |
|
|
|
|
class="link-wrap"> |
|
|
|
|
<div v-if="item.type === 'link' && scope.row.link" class="link-wrap"> |
|
|
|
|
<span>{{ scope.row.link.linkName }}</span> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<template v-else-if="item.type === 'upload'"> |
|
|
|
|
<img v-if="scope.row.pic" |
|
|
|
|
:src="scope.row.pic" |
|
|
|
|
class="upload-pic"> |
|
|
|
|
<div class="upload-none" |
|
|
|
|
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> |
|
|
|
|
@ -44,241 +26,137 @@ |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
<el-table-column label="操作" |
|
|
|
|
:width="data.sort ? 150 : 100" |
|
|
|
|
align="center"> |
|
|
|
|
<el-table-column label="操作" :width="data.sort ? 150 : 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 v-model="scope.row.isEnable" :active-value="1" :inactive-value="0"> |
|
|
|
|
</el-switch> |
|
|
|
|
<i class="el-icon-edit-outline del" |
|
|
|
|
@click="editIntro(scope.row, scope.$index)"></i> |
|
|
|
|
<i class="el-icon-edit-outline del" @click="editIntro(scope.row, scope.$index)"></i> |
|
|
|
|
<template v-if="data.sort"> |
|
|
|
|
<i v-if="scope.$index != data.list.length - 1" |
|
|
|
|
class="el-icon-bottom del" |
|
|
|
|
<i v-if="scope.$index != data.list.length - 1" class="el-icon-bottom del" |
|
|
|
|
@click="sort(1, scope.$index)"></i> |
|
|
|
|
<i v-if="scope.$index" |
|
|
|
|
class="el-icon-top del" |
|
|
|
|
@click="sort(0, scope.$index)"></i> |
|
|
|
|
<i v-if="scope.$index" class="el-icon-top del" @click="sort(0, scope.$index)"></i> |
|
|
|
|
</template> |
|
|
|
|
<i class="el-icon-delete del" |
|
|
|
|
@click="delRow(data.list, scope.$index)"></i> |
|
|
|
|
<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> |
|
|
|
|
<i class="el-icon-circle-plus-outline" @click="addRow"></i> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<el-form v-else-if="data.type === 'form' || data.type === 'forms'" |
|
|
|
|
ref="form" |
|
|
|
|
:model="data.form" |
|
|
|
|
:rules="rules" |
|
|
|
|
<el-form v-else-if="data.type === 'form' || data.type === 'forms'" ref="form" :model="data.form" :rules="rules" |
|
|
|
|
label-width="70px"> |
|
|
|
|
<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="请输入" |
|
|
|
|
<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="100"></el-input> |
|
|
|
|
<el-input v-if="item.type === 'textarea'" |
|
|
|
|
v-model="data.form[item.prop]" |
|
|
|
|
type="textarea" |
|
|
|
|
placeholder="请输入" |
|
|
|
|
<el-input v-if="item.type === 'textarea'" v-model="data.form[item.prop]" type="textarea" placeholder="请输入" |
|
|
|
|
maxlength="300"></el-input> |
|
|
|
|
<div v-if="item.type === 'upload' || item.type === 'video' || item.type === 'media'" |
|
|
|
|
class="uploader-wrap"> |
|
|
|
|
<el-upload v-if="item.type === 'upload'" |
|
|
|
|
class="uploader" |
|
|
|
|
accept=".jpg,.png,.jpeg,.gif" |
|
|
|
|
:on-change="res => changeFile(res, data.form)" |
|
|
|
|
:show-file-list="false" |
|
|
|
|
:headers="headers" |
|
|
|
|
<div v-if="item.type === 'upload' || item.type === 'video' || item.type === 'media'" class="uploader-wrap"> |
|
|
|
|
<el-upload v-if="item.type === 'upload'" class="uploader" accept=".jpg,.png,.jpeg,.gif" |
|
|
|
|
:on-change="res => changeFile(res, data.form)" :show-file-list="false" :headers="headers" |
|
|
|
|
:action="api.upload"> |
|
|
|
|
<img v-if="data.form.pic && !isVideo(data.form.mediaType)" |
|
|
|
|
:src="data.form.pic" |
|
|
|
|
class="avatar"> |
|
|
|
|
<div class="uploader-default" |
|
|
|
|
v-else> |
|
|
|
|
<img v-if="data.form.pic && !isVideo(data.form.mediaType)" :src="data.form.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"> |
|
|
|
|
<div slot="tip" class="el-upload__tip"> |
|
|
|
|
<p>只支持.jpg,.png格式</p> |
|
|
|
|
</div> |
|
|
|
|
</el-upload> |
|
|
|
|
<el-upload v-if="item.type === 'video'" |
|
|
|
|
accept=".mp4,.mov,.avi" |
|
|
|
|
:on-success="res => uploadSuccess(res, data.form, item)" |
|
|
|
|
:before-remove="beforeRemove" |
|
|
|
|
:on-remove="(file, fileList) => handleRemove(file, fileList, data.form, item.prop)" |
|
|
|
|
:file-list="fileList" |
|
|
|
|
:headers="headers" |
|
|
|
|
:action="api.upload"> |
|
|
|
|
<el-upload v-if="item.type === 'video'" accept=".mp4,.mov,.avi" |
|
|
|
|
:on-success="res => uploadSuccess(res, data.form, item)" :before-remove="beforeRemove" |
|
|
|
|
:on-remove="(file, fileList) => handleRemove(file, fileList, data.form, item.prop)" :file-list="fileList" |
|
|
|
|
:headers="headers" :action="api.upload"> |
|
|
|
|
|
|
|
|
|
<el-button>上传视频</el-button> |
|
|
|
|
<div slot="tip" |
|
|
|
|
class="el-upload__tip"> |
|
|
|
|
<div slot="tip" class="el-upload__tip"> |
|
|
|
|
<p>请上传大小1G以内的视频</p> |
|
|
|
|
</div> |
|
|
|
|
</el-upload> |
|
|
|
|
<!-- 图片视频都可上传 --> |
|
|
|
|
<el-upload v-if="item.type === 'media'" |
|
|
|
|
:on-success="res => uploadSuccess(res, data.form, item)" |
|
|
|
|
<el-upload v-if="item.type === 'media'" :on-success="res => uploadSuccess(res, data.form, item)" |
|
|
|
|
:before-remove="beforeRemove" |
|
|
|
|
:on-remove="(file, fileList) => handleRemove(file, fileList, data.form, item.prop)" |
|
|
|
|
:file-list="fileList" |
|
|
|
|
:headers="headers" |
|
|
|
|
:action="api.upload"> |
|
|
|
|
:on-remove="(file, fileList) => handleRemove(file, fileList, data.form, item.prop)" :file-list="fileList" |
|
|
|
|
:headers="headers" :action="api.upload"> |
|
|
|
|
<el-button>上传资源</el-button> |
|
|
|
|
</el-upload> |
|
|
|
|
<i v-if="!item.required" |
|
|
|
|
class="el-icon-delete del" |
|
|
|
|
@click="data.form[item.prop] = ''"></i> |
|
|
|
|
<i v-if="!item.required" class="el-icon-delete del" @click="data.form[item.prop] = ''"></i> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="item.type === 'link'" |
|
|
|
|
class="flex"> |
|
|
|
|
<el-input class="m-r-10" |
|
|
|
|
v-model="data.form.link.linkName"></el-input> |
|
|
|
|
<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" /> |
|
|
|
|
<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-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 |
|
|
|
|
<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 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> |
|
|
|
|
<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" |
|
|
|
|
<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="100"></el-input> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<template v-else-if="data.type === 'history'"> |
|
|
|
|
<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 prop="title" |
|
|
|
|
label="标题" |
|
|
|
|
min-width="140" |
|
|
|
|
align="center"> |
|
|
|
|
<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 prop="title" label="标题" min-width="140" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-input v-model="scope.row.title" |
|
|
|
|
placeholder="请输入" |
|
|
|
|
maxlength="100"></el-input> |
|
|
|
|
<el-input v-model="scope.row.title" placeholder="请输入" maxlength="100"></el-input> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="操作" |
|
|
|
|
width="100" |
|
|
|
|
align="center"> |
|
|
|
|
<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 v-model="scope.row.isEnable" :active-value="1" :inactive-value="0"> |
|
|
|
|
</el-switch> |
|
|
|
|
<i class="el-icon-edit-outline del" |
|
|
|
|
@click="editHistory(scope.row, scope.$index)"></i> |
|
|
|
|
<i class="el-icon-delete del" |
|
|
|
|
@click="delRow(data.list, scope.$index)"></i> |
|
|
|
|
<i class="el-icon-edit-outline del" @click="editHistory(scope.row, scope.$index)"></i> |
|
|
|
|
<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> |
|
|
|
|
<i class="el-icon-circle-plus-outline" @click="addRow"></i> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<span slot="footer" |
|
|
|
|
class="dialog-footer"> |
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button @click="$emit('update:visible', false)">取消</el-button> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="moduleSubmit">确定</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" /> |
|
|
|
|
<History :data.sync="data" |
|
|
|
|
:list.sync="historyData" |
|
|
|
|
:form.sync="data.form" |
|
|
|
|
:visible.sync="historyVisible" |
|
|
|
|
<Link ref="link" :data.sync="linkForm" :visible.sync="linkVisible" @linkSubmit="linkSubmit" /> |
|
|
|
|
<Content :data.sync="data" :visible.sync="contentVisible" @contentSubmit="contentSubmit" /> |
|
|
|
|
<History :data.sync="data" :list.sync="historyData" :form.sync="data.form" :visible.sync="historyVisible" |
|
|
|
|
@historySubmit="historySubmit" /> |
|
|
|
|
|
|
|
|
|
<!-- 剪裁组件弹窗 --> |
|
|
|
|
<el-dialog title="图片裁剪" |
|
|
|
|
append-to-body |
|
|
|
|
:visible.sync="cropperModel" |
|
|
|
|
width="1100px" |
|
|
|
|
:close-on-click-modal="false"> |
|
|
|
|
<Cropper ref="cropper" |
|
|
|
|
:img-file.sync="file" |
|
|
|
|
:is-upload="isUpload" |
|
|
|
|
:fixed="fixed" |
|
|
|
|
:fixedNumber.sync="fixedNumber" |
|
|
|
|
:autoCropWidth="autoCropWidth" |
|
|
|
|
:autoCropHeight="autoCropHeight" |
|
|
|
|
@upload="customUpload" /> |
|
|
|
|
<el-dialog title="图片裁剪" append-to-body :visible.sync="cropperModel" width="1100px" :close-on-click-modal="false"> |
|
|
|
|
<Cropper ref="cropper" :img-file.sync="file" :is-upload="isUpload" :fixed="fixed" :fixedNumber.sync="fixedNumber" |
|
|
|
|
:autoCropWidth="autoCropWidth" :autoCropHeight="autoCropHeight" :dataType="data.type" @upload="customUpload" /> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
@ -652,6 +530,7 @@ export default { |
|
|
|
|
.radio-wrap { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.el-input { |
|
|
|
|
width: 200px; |
|
|
|
|
margin-left: -40px; |
|
|
|
|
|
