@ -3,283 +3,161 @@
<!-- <!--
模块type : introduce | form | forms | column | columns | history 模块type : introduce | form | forms | column | columns | history
-- > -- >
< el -dialog title = "模块管理" < el -dialog title = "模块管理" :visible.sync ="visible" :width ="dialogWidth" custom -class = " module "
: visible . sync = "visible" : close - on - click - modal = "false" : before - close = "close" >
: width = "dialogWidth"
custom - class = "module"
: close - on - click - modal = "false"
: before - close = "close" >
< template v-if ="data.type === 'introduce'" > < template v-if ="data.type === 'introduce'" >
< el -table class = "module-table" < el -table class = "module-table" :data ="data.list" header -align = " center " row -key = " id " >
: data = "data.list" < el -table -column type = "index" width = "60" label = "序号" align = "center" > < / e l - t a b l e - c o l u m n >
header - align = "center"
row - key = "id" >
< el -table -column type = "index"
width = "60"
label = "序号"
align = "center" > < / e l - t a b l e - c o l u m n >
< el -table -column v -for = " ( item , i ) in data.forms " < el -table -column v -for = " ( item , i ) in data.forms " :key ="i" :prop ="item.prop" :label ="item.label"
: key = "i" min - width = "130" align = "center" >
: prop = "item.prop"
: label = "item.label"
min - width = "130"
align = "center" >
< template slot -scope = " scope " > < template slot -scope = " scope " >
< div v -if = " item.type = = = ' link ' & & scope.row.link " < div v-if ="item.type === 'link' && scope.row.link" class="link-wrap" >
class = "link-wrap" >
< span > { { scope . row . link . linkName } } < / span > < span > { { scope . row . link . linkName } } < / span >
< / div > < / div >
< template v -else -if = " item.type = = = ' upload ' " > < template v -else -if = " item.type = = = ' upload ' " >
< img v -if = " scope.row.pic " < img v-if ="scope.row.pic" :src="scope.row.pic" class="upload-pic" >
: src = "scope.row.pic" < div class = "upload-none" v-else >
class = "upload-pic" >
< div class = "upload-none"
v - else >
< i class = "el-icon-picture-outline" > < / i > < i class = "el-icon-picture-outline" > < / i >
< / div > < / div >
< / template > < / template >
< div v -else -if = " item.type = = = ' editor ' " v-html ="scope.row[item.prop]" > < / div > < div v -else -if = " item.type = = = ' editor ' " v-html ="scope.row[item.prop]" > < / div >
< p v-else > {{ scope.row [ item.prop ] }} < / p > < p v-else > {{ scope.row [ item.prop ] }} < / p >
< / template > < / template >
< / e l - t a b l e - c o l u m n > < / e l - t a b l e - c o l u m n >
< el -table -column label = "操作" < el -table -column label = "操作" : width = "data.sort ? 150 : 100" align = "center" >
: width = "data.sort ? 150 : 100"
align = "center" >
< template slot -scope = " scope " > < template slot -scope = " scope " >
< div class = "flex a-center" > < div class = "flex a-center" >
< el -switch v -model = " scope.row.isEnable " < el -switch v-model ="scope.row.isEnable" :active-value="1" :inactive-value="0" >
: active - value = "1"
: inactive - value = "0" >
< / e l - s w i t c h > < / e l - s w i t c h >
< i class = "el-icon-edit-outline del" < i class = "el-icon-edit-outline del" @ click = "editIntro(scope.row, scope.$index)" > < / i >
@ click = "editIntro(scope.row, scope.$index)" > < / i >
< template v-if ="data.sort" > < template v-if ="data.sort" >
< i v -if = " scope. $ index ! = data.list.length - 1 " < i v -if = " scope. $ index ! = data.list.length - 1 " class = "el-icon-bottom del"
class = "el-icon-bottom del" @ click = "sort(1, scope.$index)" > < / i >
@ 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 > < / template >
< i class = "el-icon-delete del" < i class = "el-icon-delete del" @ click = "delRow(data.list, scope.$index)" > < / i >
@ click = "delRow(data.list, scope.$index)" > < / i >
< / div > < / div >
< / template > < / template >
< / e l - t a b l e - c o l u m n > < / e l - t a b l e - c o l u m n >
< / e l - t a b l e > < / e l - t a b l e >
< div class = "plus" > < div class = "plus" >
< i class = "el-icon-circle-plus-outline" < i class = "el-icon-circle-plus-outline" @click ="addRow" > < / i >
@ click = "addRow" > < / i >
< / div > < / div >
< / template > < / template >
< el -form v -else -if = " data.type = = = ' form ' | | data.type = = = ' forms ' " < el -form v -else -if = " data.type = = = ' form ' | | data.type = = = ' forms ' " ref = "form" :model ="data.form" :rules ="rules"
ref = "form" : label - width = "data.labelWidth" >
: model = "data.form" < el -form -item v-for ="(item, i) in data.forms" :key="i" :prop="item.prop" :label="item.label" >
: rules = "rules" < el -input v -if = " item.type = = = ' input ' " v -model = " data.form [ item.prop ] " placeholder = "请输入"
: label - width = "data.labelWidth" > maxlength = "100" > < / e l - i n p u t >
< el -form -item v -for = " ( item , i ) in data.forms " < el -input v -if = " item.type = = = ' textarea ' " v -model = " data.form [ item.prop ] " type = "textarea" placeholder = "请输入"
: key = "i" maxlength = "300" > < / e l - i n p u t >
: prop = "item.prop" < div v-if ="item.type === 'upload' || item.type === 'video' || item.type === 'media'" class="uploader-wrap" >
: label = "item.label" > < el -upload v -if = " item.type = = = ' upload ' " class = "uploader" accept = ".jpg,.png,.jpeg,.gif"
< el -input v -if = " item.type = = = ' input ' " : on - change = "res => changeFile(res, data.form)" : show - file - list = "false" : headers = "headers"
v - model = "data.form[item.prop]" : action = "api.upload" >
placeholder = "请输入" < img v-if ="data.form.pic && !isVideo(data.form.mediaType)" :src="data.form.pic" class="avatar" >
maxlength = "100" > < / e l - i n p u t > < div class = "uploader-default" v-else >
< el -input v -if = " item.type = = = ' textarea ' "
v - model = "data.form[item.prop]"
type = "textarea"
placeholder = "请输入"
maxlength = "300" > < / e l - i n p u t >
< 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 >
< i class = "el-icon-plus" > < / i > < i class = "el-icon-plus" > < / i >
< p > 上传图片 < / p > < p > 上传图片 < / p >
< / div > < / div >
< div slot = "tip" < div slot = "tip" class = "el-upload__tip" >
class = "el-upload__tip" >
< p > 只支持 . jpg , . png格式 < / p > < p > 只支持 . jpg , . png格式 < / p >
< / div > < / div >
< / e l - u p l o a d > < / e l - u p l o a d >
< el -upload v -if = " item.type = = = ' video ' " < el -upload v -if = " item.type = = = ' video ' " accept = ".mp4,.mov,.avi"
accept = ".mp4,.mov,.avi" : on - success = "res => uploadSuccess(res, data.form, item)" : before - remove = "beforeRemove"
: on - success = "res => uploadSuccess(res, data.form, item)" : on - remove = "(file, fileList) => handleRemove(file, fileList, data.form, item.prop)" : file - list = "fileList"
: before - remove = "beforeRemove" : 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 > 上传视频 < / e l - b u t t o n > < el -button > 上传视频 < / e l - b u t t o n >
< div slot = "tip" < div slot = "tip" class = "el-upload__tip" >
class = "el-upload__tip" >
< p > 请上传大小1G以内的视频 < / p > < p > 请上传大小1G以内的视频 < / p >
< / div > < / div >
< / e l - u p l o a d > < / e l - u p l o a d >
<!-- 图片视频都可上传 -- > <!-- 图片视频都可上传 -- >
< el -upload v -if = " item.type = = = ' media ' " < el -upload v -if = " item.type = = = ' media ' " : on -success = " res = > uploadSuccess ( res , data . form , item ) "
: on - success = "res => uploadSuccess(res, data.form, item)" : before - remove = "beforeRemove"
: before - remove = "beforeRemove" : on - remove = "(file, fileList) => handleRemove(file, fileList, data.form, item.prop)" : file - list = "fileList"
: on - remove = "(file, fileList) => handleRemove(file, fileList, data.form, item.prop)" : headers = "headers" : action = "api.upload" >
: file - list = "fileList"
: headers = "headers"
: action = "api.upload" >
< el -button > 上传资源 < / e l - b u t t o n > < el -button > 上传资源 < / e l - b u t t o n >
< / e l - u p l o a d > < / e l - u p l o a d >
< i v -if = " ! item.required " < i v-if ="!item.required" class="el-icon-delete del" @click="data.form[item.prop] = ''" > < / i >
class = "el-icon-delete del"
@ click = "data.form[item.prop] = ''" > < / i >
< / div > < / div >
< div v -if = " item.type = = = ' link ' " < div v-if ="item.type === 'link'" class="flex" >
class = "flex" > < el -input class = "m-r-10" v-model ="data.form.link.linkName" > < / el -input >
< el -input class = "m-r-10"
v - model = "data.form.link.linkName" > < / e l - i n p u t >
< el -button @click ="toLink(data.form)" > 设置链接 < / el -button > < el -button @click ="toLink(data.form)" > 设置链接 < / el -button >
< / div > < / div >
< Editor v -if = " item.type = = = ' editor ' " < Editor v -if = " item.type = = = ' editor ' " api -key = ' rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda '
api - key = 'rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v - model = "data.form[item.prop]" : init = "editorConfig" / >
v - model = "data.form[item.prop]"
: init = "editorConfig" / >
< / e l - f o r m - i t e m > < / e l - f o r m - i t e m >
< / e l - f o r m > < / e l - f o r m >
< el -form v -else -if = " data.type = = = ' column ' | | data.type = = = ' columns ' " < el -form v -else -if = " data.type = = = ' column ' | | data.type = = = ' columns ' " ref = "form" :model ="data.form"
ref = "form" : rules = "columnRules" label - width = "100px" >
: model = "data.form" < el -form -item prop = "site" label = "站点选择" >
: rules = "columnRules" < el -select v-model ="data.form.site" @change="siteChange" >
label - width = "100px" > < el -option v-for ="item in $refs.link.sites" :key="item.id" :label="item.siteName" :value="item.id" >
< 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" >
< / e l - o p t i o n > < / e l - o p t i o n >
< / e l - s e l e c t > < / e l - s e l e c t >
< / e l - f o r m - i t e m > < / e l - f o r m - i t e m >
< el -form -item prop = "column" < el -form -item prop = "column" label = "关联栏目" >
label = "关联栏目" > < el -cascader ref = "links" v -model = " data.form.column " :options ="columns" :props ="columnProps" clearable
< el -cascader ref = "links" @ change = "columnChange" > < / e l - c a s c a d e r >
v - model = "data.form.column"
: options = "columns"
: props = "columnProps"
clearable
@ change = "columnChange" > < / e l - c a s c a d e r >
< / e l - f o r m - i t e m > < / e l - f o r m - i t e m >
< el -form -item label = "文章展示数量" > < el -form -item label = "文章展示数量" >
< el -select v-model ="data.form.articleNum" > < el -select v-model ="data.form.articleNum" >
< el -option v -for = " item in articleNums " < el -option v-for ="item in articleNums" :key="item.id" :label="item.name" :value="item.id" >
: key = "item.id"
: label = "item.name"
: value = "item.id" >
< / e l - o p t i o n > < / e l - o p t i o n >
< / e l - s e l e c t > < / e l - s e l e c t >
< / e l - f o r m - i t e m > < / e l - f o r m - i t e m >
< el -form -item label = "栏目标题" > < el -form -item label = "栏目标题" >
< el -radio v -model = " data.form.columnTitle " < el -radio v-model ="data.form.columnTitle" :label="1" @change="columnTitleChange" > 默认读取关联栏目 < / el -radio >
: label = "1"
@ change = "columnTitleChange" > 默认读取关联栏目 < / e l - r a d i o >
< div class = "radio-wrap" > < div class = "radio-wrap" >
< el -radio v -model = " data.form.columnTitle " < el -radio v-model ="data.form.columnTitle" :label="2" @change="columnTitleChange" > < / el -radio >
: label = "2" < el -input v -model = " data.form.columnTitleCustom " : disabled = "data.form.columnTitle == 1" size = "small"
@ change = "columnTitleChange" > < / e l - r a d i o > maxlength = "100" > < / e l - i n p u t >
< el -input v -model = " data.form.columnTitleCustom "
: disabled = "data.form.columnTitle == 1"
size = "small"
maxlength = "100" > < / e l - i n p u t >
< / div > < / div >
< / e l - f o r m - i t e m > < / e l - f o r m - i t e m >
< / e l - f o r m > < / e l - f o r m >
< template v -else -if = " data.type = = = ' history ' " > < template v -else -if = " data.type = = = ' history ' " >
< el -table class = "module-table" < el -table class = "module-table" :data ="data.list" header -align = " center " row -key = " id " >
: data = "data.list" < el -table -column type = "index" width = "60" label = "序号" align = "center" > < / e l - t a b l e - c o l u m n >
header - align = "center" < el -table -column prop = "title" label = "标题" min -width = " 140 " align = "center" >
row - key = "id" >
< el -table -column type = "index"
width = "60"
label = "序号"
align = "center" > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "title"
label = "标题"
min - width = "140"
align = "center" >
< template slot -scope = " scope " > < template slot -scope = " scope " >
< el -input v -model = " scope.row.title " < el -input v-model ="scope.row.title" placeholder="请输入" maxlength="100" > < / el -input >
placeholder = "请输入"
maxlength = "100" > < / e l - i n p u t >
< / template > < / template >
< / e l - t a b l e - c o l u m n > < / e l - t a b l e - c o l u m n >
< el -table -column label = "操作" < el -table -column label = "操作" width = "100" align = "center" >
width = "100"
align = "center" >
< template slot -scope = " scope " > < template slot -scope = " scope " >
< div class = "flex a-center" > < div class = "flex a-center" >
< el -switch v -model = " scope.row.isEnable " < el -switch v-model ="scope.row.isEnable" :active-value="1" :inactive-value="0" >
: active - value = "1"
: inactive - value = "0" >
< / e l - s w i t c h > < / e l - s w i t c h >
< i class = "el-icon-edit-outline del" < i class = "el-icon-edit-outline del" @ click = "editHistory(scope.row, scope.$index)" > < / i >
@ click = "editHistory(scope.row, scope.$index)" > < / i > < 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 > < / div >
< / template > < / template >
< / e l - t a b l e - c o l u m n > < / e l - t a b l e - c o l u m n >
< / e l - t a b l e > < / e l - t a b l e >
< div class = "plus" > < div class = "plus" >
< i class = "el-icon-circle-plus-outline" < i class = "el-icon-circle-plus-outline" @click ="addRow" > < / i >
@ click = "addRow" > < / i >
< / div > < / div >
< / template > < / template >
< span slot = "footer" < span slot = "footer" class = "dialog-footer" >
class = "dialog-footer" >
< el -button @ click = "$emit('update:visible', false)" > 取消 < / e l - b u t t o n > < el -button @ click = "$emit('update:visible', false)" > 取消 < / e l - b u t t o n >
< el -button type = "primary" < el -button type = "primary" @click ="moduleSubmit" > 确定 < / el -button >
@ click = "moduleSubmit" > 确定 < / e l - b u t t o n >
< / span > < / span >
< / e l - d i a l o g > < / e l - d i a l o g >
< Link ref = "link" < Link ref = "link" :data.sync ="linkForm" :visible.sync ="linkVisible" @linkSubmit ="linkSubmit" / >
: data . sync = "linkForm" < Content :data.sync ="data" :visible.sync ="contentVisible" @contentSubmit ="contentSubmit" / >
: visible . sync = "linkVisible" < History :data.sync ="data" :list.sync ="historyData" :form.sync ="data.form" :visible.sync ="historyVisible"
@ linkSubmit = "linkSubmit" / > @ historySubmit = "historySubmit" / >
< 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 = "图片裁剪" < el -dialog title = "图片裁剪" append -to -body :visible.sync ="cropperModel" width = "1100px" :close-on-click-modal ="false" >
append - to - body < Cropper ref = "cropper" :img-file.sync ="file" :is-upload ="isUpload" :fixed ="fixed" :fixedNumber.sync ="fixedNumber"
: visible . sync = "cropperModel" : autoCropWidth = "autoCropWidth" : autoCropHeight = "autoCropHeight" : dataType = "data.type" @ upload = "customUpload" / >
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" / >
< / e l - d i a l o g > < / e l - d i a l o g >
< / div > < / div >
< / template > < / template >
@ -432,7 +310,7 @@ export default {
this . articleNums = nums this . articleNums = nums
} }
form && form . site && this . siteChange ( form . site ) form && form . site && this . siteChange ( form . site )
this . dialogWidth = dialogWidth || '8 00px' this . dialogWidth = dialogWidth || '10 00px'
} , } ,
/ / 站 点 切 换 回 调 / / 站 点 切 换 回 调
siteChange ( siteId ) { siteChange ( siteId ) {
@ -651,11 +529,12 @@ export default {
< / script > < / script >
< style lang = "scss" scoped > < style lang = "scss" scoped >
. radio - wrap { . radio - wrap {
display : flex ; display : flex ;
align - items : center ; align - items : center ;
. el - input {
width : 200 px ; . el - input {
margin - left : - 40 px ; width : 200 px ;
} margin - left : - 40 px ;
}
} }
< / style > < / style >
