|
|
@ -33,7 +33,7 @@ |
|
|
|
<div class="elect-cont-right"> |
|
|
|
<div class="head-container"> |
|
|
|
<div class="head-search"> |
|
|
|
<el-input v-model="query.blurry" clearable size="small" placeholder="输入内容标题搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
|
|
|
<el-input v-model="query.searchTitle" clearable size="small" placeholder="输入内容标题搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @clear="crud.toQuery" @keyup.enter.native="crud.toQuery" /> |
|
|
|
<el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button> |
|
|
|
<el-button v-if="crud.optShow.reset" class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button> |
|
|
|
</div> |
|
|
@ -57,12 +57,12 @@ |
|
|
|
</div> |
|
|
|
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px"> |
|
|
|
<el-row> |
|
|
|
<el-form-item label="标题" prop="title"> |
|
|
|
<el-input v-model="form.title" :style="containerStyle" /> |
|
|
|
<el-form-item label="标题" prop="overTitle"> |
|
|
|
<el-input v-model="form.overTitle" :style="containerStyle" /> |
|
|
|
</el-form-item> |
|
|
|
</el-row> |
|
|
|
<el-form-item v-if="currentKeyColumn.type !== 4" label="来源" prop="original"> |
|
|
|
<el-input v-model="form.original" /> |
|
|
|
<el-form-item v-if="currentKeyColumn.type !== 4" label="来源" prop="source"> |
|
|
|
<el-input v-model="form.source" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-if="currentKeyColumn.type !== 4" label="作者" prop="author"> |
|
|
|
<el-input v-model="form.author" /> |
|
|
@ -70,19 +70,24 @@ |
|
|
|
<el-form-item v-if="currentKeyColumn.type !== 4" label="责编" prop="editor"> |
|
|
|
<el-input v-model="form.editor" /> |
|
|
|
</el-form-item> |
|
|
|
<!-- @imgAdd="imgAdd" --> |
|
|
|
<!-- https://blog.csdn.net/ws6afa88/article/details/108765569?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-108765569-blog-131412288.235^v43^pc_blog_bottom_relevance_base6&spm=1001.2101.3001.4242.1&utm_relevant_index=4 --> |
|
|
|
<mavon-editor |
|
|
|
v-if="currentKeyColumn.type !== 4" |
|
|
|
:value="form.content" |
|
|
|
ref="md" |
|
|
|
:value="form.introHtml" |
|
|
|
:subfield="true" |
|
|
|
:default-open="'edit,preview'" |
|
|
|
:editable="true" |
|
|
|
:ishljs="true" |
|
|
|
@imgAdd="imgAdd" |
|
|
|
@change="handleEditorChange" |
|
|
|
/> |
|
|
|
<el-form-item v-if="currentKeyColumn.type === 4" label="链接" prop="link"> |
|
|
|
<el-input v-model="form.link" :style="containerStyle" /> |
|
|
|
<el-form-item v-if="currentKeyColumn.type === 4" label="链接" prop="linkUrl"> |
|
|
|
<el-input v-model="form.linkUrl" :style="containerStyle" /> |
|
|
|
</el-form-item> |
|
|
|
<UploadCover v-if="currentKeyColumn.type === 4" ref="uploadCoverRefs" :label-name="labelName" :form="form" upload-type="book" @childCover="handleCover" /> |
|
|
|
<img v-if="currentKeyColumn.type === 4 && bookCover" style="display: block; height: 200px; margin-left: 90px;" :src="bookCover || require('@/assets/images/cover-bg.png')" alt="图书封面"> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
|
|
@ -98,24 +103,27 @@ |
|
|
|
ref="table" |
|
|
|
v-loading="crud.loading" |
|
|
|
height="calc(100vh - 330px)" |
|
|
|
:data="crud.data" |
|
|
|
:data="tableData" |
|
|
|
@selection-change="crud.selectionChangeHandler" |
|
|
|
@row-click="clickRowHandler" |
|
|
|
> |
|
|
|
<el-table-column type="selection" align="center" width="55" /> |
|
|
|
<el-table-column label="标题" prop="deptsName" /> |
|
|
|
<el-table-column label="所属栏目" prop="deptsCode" /> |
|
|
|
<el-table-column label="栏目类型" prop="deptsTotalPeoNum" /> |
|
|
|
<el-table-column label="内容类型" prop="type" /> |
|
|
|
<el-table-column label="创建者" prop="create" /> |
|
|
|
<el-table-column prop="createTime" label="创建日期"> |
|
|
|
<el-table-column label="标题" prop="overTitle" /> |
|
|
|
<el-table-column label="所属栏目" prop="topicTitle" /> |
|
|
|
<el-table-column label="栏目类型" prop="topicType"> |
|
|
|
<template> |
|
|
|
{{ columnTypeText }} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="创建者" prop="create_by" /> |
|
|
|
<el-table-column prop="create_time" label="创建日期"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div>{{ scope.row.createTime | parseTime }}</div> |
|
|
|
<div>{{ scope.row.create_time | parseTime }}</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<!--分页组件--> |
|
|
|
<pagination v-if="crud.data.length!==0" /> |
|
|
|
<pagination v-if="tableData && tableData.length!==0" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -123,20 +131,22 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import crudContent, { FetchQueryTopicTree } from '@/api/inquiryMachine/content' |
|
|
|
import crudContent from '@/api/inquiryMachine/content' |
|
|
|
import { FetchQueryTopicTree } from '@/api/inquiryMachine/column' |
|
|
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|
|
|
import crudOperation from '@crud/CRUD.operation' |
|
|
|
import pagination from '@crud/Pagination' |
|
|
|
import Vue from 'vue' |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import UploadCover from '@/views/components/upload.vue' |
|
|
|
import { upload } from '@/utils/upload' |
|
|
|
|
|
|
|
const defaultForm = { id: null, title: null, original: '', author: '', editor: '', content: '', link: '', linkImg: '' } |
|
|
|
const defaultForm = { id: null, overTitle: null, source: '', author: '', editor: '', introHtml: '', linkUrl: '', imgUrl: '' } |
|
|
|
export default { |
|
|
|
name: 'Content', |
|
|
|
components: { crudOperation, pagination, UploadCover }, |
|
|
|
cruds() { |
|
|
|
return CRUD({ title: '内容', url: '', crudMethod: { ...crudContent }, optShow: { |
|
|
|
return CRUD({ title: '内容', url: 'api/queryMachine/initQueryTopicContext', crudMethod: { ...crudContent }, optShow: { |
|
|
|
add: false, |
|
|
|
edit: true, |
|
|
|
del: false, |
|
|
@ -153,7 +163,7 @@ export default { |
|
|
|
labelName: '内容图片', |
|
|
|
currentKeyColumn: {}, |
|
|
|
rules: { |
|
|
|
title: [ |
|
|
|
overTitle: [ |
|
|
|
{ required: true, message: '标题不可为空', trigger: 'blur' } |
|
|
|
] |
|
|
|
}, |
|
|
@ -165,7 +175,9 @@ export default { |
|
|
|
add: ['admin', 'content:add'], |
|
|
|
edit: ['admin', 'content:edit'], |
|
|
|
del: ['admin', 'content:del'] |
|
|
|
} |
|
|
|
}, |
|
|
|
tableData: [], |
|
|
|
bookCover: null |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
@ -173,9 +185,16 @@ export default { |
|
|
|
'baseApi', |
|
|
|
'user' |
|
|
|
]), |
|
|
|
|
|
|
|
activeAddBtn() { |
|
|
|
return this.currentKeyColumn.id !== 0 |
|
|
|
// 条件1:id为0时,按钮不可用 |
|
|
|
const condition1 = this.currentKeyColumn.id === 0 |
|
|
|
|
|
|
|
// 条件2:id不为0且type为1且tableData长度为1时,按钮不可用 |
|
|
|
const condition2 = this.currentKeyColumn.id !== 0 && |
|
|
|
this.currentKeyColumn.type === 1 && |
|
|
|
this.tableData.length === 1 |
|
|
|
|
|
|
|
return !(condition1 || condition2) |
|
|
|
}, |
|
|
|
containerStyle() { |
|
|
|
return { |
|
|
@ -204,10 +223,10 @@ export default { |
|
|
|
handleCover(value) { |
|
|
|
console.log(value) |
|
|
|
if (value) { |
|
|
|
this.form.imgPath = value |
|
|
|
this.form.imgUrl = value |
|
|
|
this.bookCover = this.baseApi + '/api/fileRelevant/getImg?imgType=2&imgId=' + value |
|
|
|
} else { |
|
|
|
this.form.imgPath = null |
|
|
|
this.form.imgUrl = null |
|
|
|
this.bookCover = null |
|
|
|
} |
|
|
|
}, |
|
|
@ -215,27 +234,77 @@ export default { |
|
|
|
return row.id |
|
|
|
}, |
|
|
|
resetQuery() { |
|
|
|
this.crud.query.blurry = '' |
|
|
|
this.crud.query.searchTitle = null |
|
|
|
this.crud.toQuery() |
|
|
|
}, |
|
|
|
[CRUD.HOOK.beforeRefresh]() { |
|
|
|
this.tableData = [] |
|
|
|
}, |
|
|
|
[CRUD.HOOK.afterRefresh](crud) { |
|
|
|
crud.data.forEach(item => { |
|
|
|
item.topicTitle = this.currentKeyColumn.title |
|
|
|
item.topicType = this.currentKeyColumn.type |
|
|
|
}) |
|
|
|
this.tableData = this.crud.data |
|
|
|
}, |
|
|
|
// 新增与编辑前做的操作 |
|
|
|
[CRUD.HOOK.afterToCU](crud, form) { |
|
|
|
if (this.$refs.uploadCoverRefs) { |
|
|
|
this.$refs.uploadCoverRefs.fileNames = null |
|
|
|
} |
|
|
|
}, |
|
|
|
// 新增前 |
|
|
|
[CRUD.HOOK.beforeToAdd](crud, form) { |
|
|
|
this.bookCover = null |
|
|
|
this.form.imgUrl = null |
|
|
|
}, |
|
|
|
// 编辑前 |
|
|
|
[CRUD.HOOK.beforeToEdit](crud, form) { |
|
|
|
this.bookCover = this.baseApi + '/api/fileRelevant/getImg?imgType=2&imgId=' + form.imgUrl |
|
|
|
}, |
|
|
|
// 提交前的验证 |
|
|
|
[CRUD.HOOK.afterValidateCU](crud) { |
|
|
|
console.log(crud.form) |
|
|
|
return false |
|
|
|
crud.form.libcode = this.user.fonds.fondsNo |
|
|
|
crud.form.topicId = this.currentKeyColumn.id |
|
|
|
return true |
|
|
|
}, |
|
|
|
imgAdd(pos, $file) { |
|
|
|
const _this = this |
|
|
|
var formdata = new FormData() |
|
|
|
formdata.append('image', $file) |
|
|
|
|
|
|
|
// 打印文件信息,确认文件正确 |
|
|
|
console.log('上传的文件:', $file) |
|
|
|
|
|
|
|
upload(this.baseApi + '/api/fileRelevant/uploadOtherImg', $file) |
|
|
|
.then(res => { |
|
|
|
console.log('上传接口返回:', res) |
|
|
|
|
|
|
|
if (res.data && res.data.code === 200 && res.data.data) { |
|
|
|
const url = `${this.baseApi}/api/fileRelevant/getImg?imgType=1&imgId=${res.data.data}` |
|
|
|
|
|
|
|
const testImg = new Image() |
|
|
|
testImg.onload = () => { |
|
|
|
console.log('图片URL有效,插入编辑器') |
|
|
|
_this.$refs.md.$img2Url(pos, url) |
|
|
|
} |
|
|
|
testImg.onerror = () => { |
|
|
|
console.error('图片URL无效:', url) |
|
|
|
this.$message({ message: '图片URL无效,无法显示', type: 'error', offset: 8 }) |
|
|
|
} |
|
|
|
testImg.src = url |
|
|
|
} else { |
|
|
|
this.$message({ message: res.data?.message || '上传失败,请重试', type: 'error', offset: 8 }) |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch(error => { |
|
|
|
console.error('上传请求失败:', error) |
|
|
|
this.$message({ message: '上传请求失败,请重试', type: 'error', offset: 8 }) |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleEditorChange(value) { |
|
|
|
this.form.content = value |
|
|
|
this.form.introHtml = value |
|
|
|
}, |
|
|
|
getQueryTopicTree() { |
|
|
|
const parent = {} |
|
|
@ -257,7 +326,11 @@ export default { |
|
|
|
}, |
|
|
|
handleNodeClick(val) { |
|
|
|
this.currentKeyColumn = val |
|
|
|
console.log(val) |
|
|
|
if (val && val.id !== 0) { |
|
|
|
this.crud.query.libcode = this.user.fonds.fondsNo |
|
|
|
this.crud.query.topicId = val.id |
|
|
|
this.crud.query.topicType = val.type |
|
|
|
this.crud.toQuery() |
|
|
|
} |
|
|
|
}, |
|
|
@ -271,16 +344,16 @@ export default { |
|
|
|
this.crud.delAllLoading = true |
|
|
|
const ids = [] |
|
|
|
datas.forEach(val => { |
|
|
|
ids.push(val.deptsId) |
|
|
|
ids.push(val.id) |
|
|
|
}) |
|
|
|
crudContent.del(ids).then(() => { |
|
|
|
this.$message({ message: '删除成功', type: 'success', offset: 8 }) |
|
|
|
this.crud.delAllLoading = false |
|
|
|
this.crud.refresh() |
|
|
|
}).catch(err => { |
|
|
|
this.crud.delAllLoading = false |
|
|
|
console.log(err) |
|
|
|
}) |
|
|
|
// crudContent.del(ids).then(() => { |
|
|
|
// this.$message({ message: '删除成功', type: 'success', offset: 8 }) |
|
|
|
// this.crud.delAllLoading = false |
|
|
|
// this.crud.refresh() |
|
|
|
// }).catch(err => { |
|
|
|
// this.crud.delAllLoading = false |
|
|
|
// console.log(err) |
|
|
|
// }) |
|
|
|
}).catch(() => { |
|
|
|
}) |
|
|
|
}, |
|
|
|