This commit is contained in:
许允枞 2025-02-28 14:16:47 +08:00
parent 4fdb6b8d2e
commit 21f00e3702
2 changed files with 177 additions and 129 deletions

View File

@ -3,7 +3,7 @@ import request from "@/utils/request";
export function getLeavesCategoryList() { export function getLeavesCategoryList() {
return request({ return request({
url: '/ueditor/leavesCategoryList', url: '/ueditor/getLeavesCategoryTree',
method: 'get' method: 'get'
}) })
} }

View File

@ -16,21 +16,21 @@
<el-tabs v-model="activeName"> <el-tabs v-model="activeName">
<el-tab-pane label="内容属性" name="basic"> <el-tab-pane label="内容属性" name="basic">
<el-form-item label="所属栏目" prop="categoryId"> <el-form-item label="所属栏目" prop="categoryId">
<el-select v-model="form.categoryId" placeholder="所属栏目"> <el-cascader v-model="form.selectCategoryId"
<el-option :options="categoryList"
v-for="item in categoryList" :props="{ checkStrictly: true }"
:key="item.id" @change="handleCategorySelectChange"
:label="item.categoryName" placeholder="所属栏目"
:value="item.id"> >
</el-option> </el-cascader>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="标题" prop="contentTitle"> <el-form-item label="标题" prop="contentTitle">
<el-input <el-input
type="textarea" type="textarea"
v-model="form.contentTitle" v-model="form.contentTitle"
maxlength="360" maxlength="360"
show-word-limit> show-word-limit
>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="是否置顶" prop="contentTitle"> <el-form-item label="是否置顶" prop="contentTitle">
@ -38,31 +38,32 @@
v-model="form.sortNum" v-model="form.sortNum"
:active-value="1" :active-value="1"
:inactive-value="0" :inactive-value="0"
> >
</el-switch> </el-switch>
</el-form-item> </el-form-item>
<el-form-item label="封面图" prop="contentImg"> <el-form-item label="封面图" prop="contentImg">
<image-upload :limit="1" v-model="form.contentImg"></image-upload> <image-upload :limit="1" v-model="form.contentImg"></image-upload>
</el-form-item> </el-form-item>
<!-- <el-form-item label="作者" prop="author">--> <!-- <el-form-item label="作者" prop="author">-->
<!-- <el-input v-model="form.author"/>--> <!-- <el-input v-model="form.author"/>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <el-form-item label="编辑" prop="editor">--> <!-- <el-form-item label="编辑" prop="editor">-->
<!-- <el-input v-model="form.editor"/>--> <!-- <el-input v-model="form.editor"/>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <el-form-item label="来源" prop="source">--> <!-- <el-form-item label="来源" prop="source">-->
<!-- <el-input v-model="form.source"/>--> <!-- <el-input v-model="form.source"/>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <el-form-item label="来源地址" prop="sourceUrl">--> <!-- <el-form-item label="来源地址" prop="sourceUrl">-->
<!-- <el-input v-model="form.sourceUrl" placeholder="http(s)://"/>--> <!-- <el-input v-model="form.sourceUrl" placeholder="http(s)://"/>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<div class="art-title bg-purple-white"> <div class="art-title bg-purple-white">
<el-form-item label="标签" prop="tagName"> <el-form-item label="标签" prop="tagName">
<el-input <el-input
v-model="form.tagName" v-model="form.tagName"
maxlength="8" maxlength="8"
show-word-limit> show-word-limit
>
</el-input> </el-input>
</el-form-item> </el-form-item>
</div> </div>
@ -72,13 +73,14 @@
type="textarea" type="textarea"
v-model="form.summary" v-model="form.summary"
maxlength="360" maxlength="360"
show-word-limit> show-word-limit
>
</el-input> </el-input>
</el-form-item> </el-form-item>
</div> </div>
<!-- <el-form-item label="附件" prop="accessoryUrl">--> <!-- <el-form-item label="附件" prop="accessoryUrl">-->
<!-- <file-upload v-model="form.accessoryUrl"/>--> <!-- <file-upload v-model="form.accessoryUrl"/>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<div class="art-title bg-purple-white"> <div class="art-title bg-purple-white">
<el-form-item label="内容类型" prop="linkType"> <el-form-item label="内容类型" prop="linkType">
<el-radio-group v-model="form.linkType" @change="handleChangeLinkType"> <el-radio-group v-model="form.linkType" @change="handleChangeLinkType">
@ -97,32 +99,34 @@
<el-cascader <el-cascader
v-model="chooseValue" v-model="chooseValue"
:options="linkList" :options="linkList"
@change="handleChange"></el-cascader> @change="handleChange"
></el-cascader>
</el-form-item> </el-form-item>
</div> </div>
<div v-if="linkType === '1'" class="art-title bg-purple-white"> <div v-if="linkType === '1'" class="art-title bg-purple-white">
<el-form-item label="链接地址" prop="link"> <el-form-item label="链接地址" prop="link">
<el-input <el-input
v-model="form.link" v-model="form.link"
maxlength="360" maxlength="360"
placeholder="http(s)://" placeholder="http(s)://"
show-word-limit> show-word-limit
>
</el-input> </el-input>
</el-form-item> </el-form-item>
</div> </div>
<!-- <div class="art-title bg-purple-white">--> <!-- <div class="art-title bg-purple-white">-->
<!-- <el-form-item label="内容类型" prop="contentType">--> <!-- <el-form-item label="内容类型" prop="contentType">-->
<!-- <el-radio-group v-model="form.contentType" @change="handleChangeType">--> <!-- <el-radio-group v-model="form.contentType" @change="handleChangeType">-->
<!-- <el-radio-button--> <!-- <el-radio-button-->
<!-- v-for="dict in dict.type.cms_content_type"--> <!-- v-for="dict in dict.type.cms_content_type"-->
<!-- :key="dict.value"--> <!-- :key="dict.value"-->
<!-- :label="dict.value"--> <!-- :label="dict.value"-->
<!-- >--> <!-- >-->
<!-- {{ dict.label }}--> <!-- {{ dict.label }}-->
<!-- </el-radio-button>--> <!-- </el-radio-button>-->
<!-- </el-radio-group>--> <!-- </el-radio-group>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- </div>--> <!-- </div>-->
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-card> </el-card>
@ -132,19 +136,19 @@
<el-row> <el-row>
<el-col class="pr10"> <el-col class="pr10">
<el-card shadow="always" v-show="linkType === '2'" class="card-editor"> <el-card shadow="always" v-show="linkType === '2'" class="card-editor">
<div class="content bg-purple-white"> <div class="content bg-purple-white">
<vue-ueditor-wrap v-model="form.contentDetail" <vue-ueditor-wrap v-model="form.contentDetail"
editor-id="editor" editor-id="editor"
:config="editorConfig" :config="editorConfig"
:editorDependencies="['ueditor.config.js','ueditor.all.js']" :editorDependencies="['ueditor.config.js','ueditor.all.js']"
/> />
</div> </div>
<!-- <div v-show="isType === '1'" class="content bg-purple-white btn-add-image">--> <!-- <div v-show="isType === '1'" class="content bg-purple-white btn-add-image">-->
<!-- <image-upload v-model="form.imageUrl"/>--> <!-- <image-upload v-model="form.imageUrl"/>-->
<!-- </div>--> <!-- </div>-->
<!-- <div v-show="isType === '2'" class="content bg-purple-white btn-add-image">--> <!-- <div v-show="isType === '2'" class="content bg-purple-white btn-add-image">-->
<!-- <video-upload v-model="form.videoUrl"></video-upload>--> <!-- <video-upload v-model="form.videoUrl"></video-upload>-->
<!-- </div>--> <!-- </div>-->
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
@ -156,13 +160,13 @@
</template> </template>
<script> <script>
import VueUeditorWrap from "vue-ueditor-wrap"; import VueUeditorWrap from 'vue-ueditor-wrap'
import {getLeavesCategoryList} from "@/api/cms/editor" import { getLeavesCategoryList } from '@/api/cms/editor'
import { getLeavesCategory, getLeavesContent } from '@/api/cms/category' import { getLeavesCategory, getLeavesContent } from '@/api/cms/category'
import {addContent, getContent, updateContent} from "@/api/cms/content"; import { addContent, getContent, updateContent } from '@/api/cms/content'
export default { export default {
name: "Content", name: 'Content',
dicts: ['cms_content_type', 'cms_link_type'], dicts: ['cms_content_type', 'cms_link_type'],
components: { components: {
VueUeditorWrap VueUeditorWrap
@ -173,14 +177,14 @@ export default {
}, },
watch: { watch: {
// categoryId // categoryId
"$route.query.categoryId": { '$route.query.categoryId': {
immediate: true, immediate: true,
handler() { handler() {
this.reset() this.reset()
this.getCategoryList() this.getCategoryList()
}, }
}, },
"$route.query.contentId": { '$route.query.contentId': {
immediate: true, immediate: true,
handler(val) { handler(val) {
if (val !== undefined) { if (val !== undefined) {
@ -188,19 +192,19 @@ export default {
this.getCategoryList() this.getCategoryList()
this.getContentById(val) this.getContentById(val)
} }
}, }
}, }
}, },
data() { data() {
return { return {
chooseValue: [], chooseValue: [],
openResourceDialog: false, openResourceDialog: false,
isType: "0", isType: '0',
activeName: "basic", activeName: 'basic',
// //
form: { form: {
contentType: "0", contentType: '0',
original: "0", original: '0',
categoryId: '', categoryId: '',
imageUrl: [], imageUrl: [],
videoUrl: [], videoUrl: [],
@ -215,25 +219,26 @@ export default {
status: '0', status: '0',
isAccessory: '0', isAccessory: '0',
accessoryUrl: [], accessoryUrl: [],
linkType: "2", linkType: '2',
link: '' link: '',
selectCategoryId:[]
}, },
rules: { rules: {
contentTitle: [{required: true, message: "内容标题不能为空", trigger: "blur"}], contentTitle: [{ required: true, message: '内容标题不能为空', trigger: 'blur' }],
categoryId: [{required: true, message: "所属栏目不能为空", trigger: "blur"}] categoryId: [{ required: true, message: '所属栏目不能为空', trigger: 'blur' }]
}, },
editorConfig: { editorConfig: {
initialFrameHeight: 1000, // initialFrameHeight: 1000, //
//serverUrl: process.env.VUE_APP_BASE_API + "/config"', //serverUrl: process.env.VUE_APP_BASE_API + "/config"',
//**231109** //**231109**
serverUrl: process.env.VUE_APP_BASE_API + "/ueditor/config", serverUrl: process.env.VUE_APP_BASE_API + '/ueditor/config',
// //
UEDITOR_HOME_URL: '/static/UEditorPlus/', UEDITOR_HOME_URL: '/static/UEditorPlus/',
UEDITOR_CORS_URL: '/static/UEditorPlus/', UEDITOR_CORS_URL: '/static/UEditorPlus/'
}, },
categoryList: "", categoryList: '',
linkType: "2", linkType: '2',
linkList: [], linkList: []
} }
}, },
methods: { methods: {
@ -241,8 +246,8 @@ export default {
reset() { reset() {
this.form = { this.form = {
contentType: this.isType, contentType: this.isType,
original: "0", original: '0',
categoryId: this.$route.query.categoryId === "0" ? this.form.categoryId : this.$route.query.categoryId, categoryId: this.$route.query.categoryId === '0' ? this.form.categoryId : this.$route.query.categoryId,
imageUrl: [], imageUrl: [],
videoUrl: [], videoUrl: [],
contentTitle: '', contentTitle: '',
@ -256,34 +261,77 @@ export default {
status: '0', status: '0',
isAccessory: '0', isAccessory: '0',
accessoryUrl: [], accessoryUrl: [],
id: "", id: '',
linkType: "2", linkType: '2',
link: '' link: ''
} }
}, },
getCategoryList() { getCategoryList() {
getLeavesCategoryList().then(response => { getLeavesCategoryList().then(response => {
this.categoryList = response.data this.categoryList = response.data
console.log(this.temp)
console.log('category', this.categoryList)
this.form.categoryId = this.$route.query.categoryId + '' this.form.categoryId = this.$route.query.categoryId + ''
console.log('categoryId', this.form.categoryId) if (!!this.$route.query.categoryId) {
if (!!this.$route.query.categoryId){ // let flag = this.isIdInTree(this.$route.query.categoryId, this.categoryList)
console.log('执行') // if (!flag) {
let flag = false; // this.form.categoryId = ''
this.categoryList.forEach(item => { // }
if (item.id == this.$route.query.categoryId) { this.form.selectCategoryId = this.getParentsById(this.categoryList,this.$route.query.categoryId)
this.form.categoryId = this.$route.query.categoryId.toString() this.form.categoryId = this.form.selectCategoryId[this.form.selectCategoryId.length - 1]
flag = true; console.log('最终的categoryId', this.form.selectCategoryId)
}
if (!flag){
this.form.categoryId = ""
}
})
console.log('最终的categoryId', this.form.categoryId)
} }
}) })
}, },
/**
* @param list 数据列表
* @param id 后端返回的id
**/
getParentsById(list, id) {
for (let i in list) {
if (list[i].value == id) {
//value
return [list[i].value]
}
if (list[i].children) {
let node = this.getParentsById(list[i].children, id)
if (node !== undefined) {
//
node.unshift(list[i].value)
return node
}
}
}
},
/**
* @Description: 判断一个id是否存在于树形结构中
* @Author: 86187
* @Date: 2025/02/28 11:16
* @Version: 1.0
*/
isIdInTree(id, tree) {
console.log('id', id)
console.log('tree', tree)
//
for (let node of tree) {
// valueidtrue
if (node.value == id.toString()) {
return true
}
//
if (node.children && node.children.length > 0) {
if (this.isIdInTree(id, node.children)) {
return true
}
}
}
// false
return false
},
handleCategorySelectChange(e) {
this.form.categoryId = e[e.length - 1]
// console.log('categoryId', this.form.categoryId)
},
handleChangeType() { handleChangeType() {
this.isType = this.form.contentType this.isType = this.form.contentType
}, },
@ -291,44 +339,44 @@ export default {
this.linkType = this.form.linkType this.linkType = this.form.linkType
}, },
handleEdit() { handleEdit() {
this.openResourceDialog = true; this.openResourceDialog = true
}, },
// //
handlePublish() { handlePublish() {
this.form.status = "1" this.form.status = '1'
this.form.publishDate = this.formatTimer(new Date()) this.form.publishDate = this.formatTimer(new Date())
this.handleSave(); this.handleSave()
}, },
// //
handlerSaveBefore(){ handlerSaveBefore() {
this.form.status = this.form.id === "" ? "0" : "3" this.form.status = this.form.id === '' ? '0' : '3'
this.handleSave(); this.handleSave()
}, },
// //
handleSave() { handleSave() {
this.$refs["form"].validate(valid => { this.$refs['form'].validate(valid => {
if (valid) { if (valid) {
this.$modal.loading("正在" + (this.form.status !== "1" ? "保存" : "发布") + "内容,请稍候..."); this.$modal.loading('正在' + (this.form.status !== '1' ? '保存' : '发布') + '内容,请稍候...')
// ifelse // ifelse
if (this.form.id !== "") { if (this.form.id !== '') {
this.changeUrl() this.changeUrl()
updateContent(this.form).then(res => { updateContent(this.form).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.$modal.msgSuccess(this.form.status !== "1" ? "保存成功" : "发布成功"); this.$modal.msgSuccess(this.form.status !== '1' ? '保存成功' : '发布成功')
} }
}) })
} else { } else {
this.changeUrl() this.changeUrl()
addContent(this.form).then(res => { addContent(this.form).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.$modal.msgSuccess(this.form.status !== "1" ? "保存成功" : "发布成功"); this.$modal.msgSuccess(this.form.status !== '1' ? '保存成功' : '发布成功')
} }
}) })
} }
this.reset(); this.reset()
this.$router.go(-1); this.$router.go(-1)
// this.$router.replace('/content/content') // this.$router.replace('/content/content')
this.$modal.closeLoading(); this.$modal.closeLoading()
} }
}) })
}, },
@ -342,28 +390,28 @@ export default {
}) })
}, },
StrToArr(value) { StrToArr(value) {
return value.toString().split(",") return value.toString().split(',')
}, },
changeUrl() { changeUrl() {
if (this.form.accessoryUrl !== null && this.form.accessoryUrl.length !== 0) { if (this.form.accessoryUrl !== null && this.form.accessoryUrl.length !== 0) {
this.form.isAccessory = "1" this.form.isAccessory = '1'
this.form.accessoryUrl = this.StrToArr(this.form.accessoryUrl) this.form.accessoryUrl = this.StrToArr(this.form.accessoryUrl)
}else { } else {
this.form.isAccessory = "0"; this.form.isAccessory = '0'
this.form.accessoryUrl = []; this.form.accessoryUrl = []
} }
if (this.form.imageUrl !== null && this.form.imageUrl.length !== 0) { if (this.form.imageUrl !== null && this.form.imageUrl.length !== 0) {
this.form.imageUrl = this.StrToArr(this.form.imageUrl) this.form.imageUrl = this.StrToArr(this.form.imageUrl)
}else { } else {
this.form.imageUrl = [] this.form.imageUrl = []
} }
if (this.form.videoUrl !== null && this.form.videoUrl.length !== 0) { if (this.form.videoUrl !== null && this.form.videoUrl.length !== 0) {
this.form.videoUrl = this.StrToArr(this.form.videoUrl) this.form.videoUrl = this.StrToArr(this.form.videoUrl)
}else { } else {
this.form.videoUrl = [] this.form.videoUrl = []
} }
}, },
listLeavesCategory(id){ listLeavesCategory(id) {
getLeavesCategory(id).then(res => { getLeavesCategory(id).then(res => {
res.data.forEach(item => { res.data.forEach(item => {
const x = { const x = {
@ -375,7 +423,7 @@ export default {
}) })
}) })
}, },
createLink(contents){ createLink(contents) {
let list = [] let list = []
contents.forEach(item => { contents.forEach(item => {
const x = { const x = {
@ -390,19 +438,19 @@ export default {
this.form.link = value[1] this.form.link = value[1]
}, },
formatTimer: function(value) { formatTimer: function(value) {
let date = new Date(value); let date = new Date(value)
let y = date.getFullYear(); let y = date.getFullYear()
let MM = date.getMonth() + 1; let MM = date.getMonth() + 1
MM = MM < 10 ? "0" + MM : MM; MM = MM < 10 ? '0' + MM : MM
let d = date.getDate(); let d = date.getDate()
d = d < 10 ? "0" + d : d; d = d < 10 ? '0' + d : d
let h = date.getHours(); let h = date.getHours()
h = h < 10 ? "0" + h : h; h = h < 10 ? '0' + h : h
let m = date.getMinutes(); let m = date.getMinutes()
m = m < 10 ? "0" + m : m; m = m < 10 ? '0' + m : m
let s = date.getSeconds(); let s = date.getSeconds()
s = s < 10 ? "0" + s : s; s = s < 10 ? '0' + s : s
return y + "-" + MM + "-" + d + " " + h + ":" + m; return y + '-' + MM + '-' + d + ' ' + h + ':' + m
} }
} }
} }