5 changed files with 831 additions and 46 deletions
-
69src/api/subject.js
-
18src/router/routes.js
-
323src/views/article/subject/article.vue
-
372src/views/article/subject/index.vue
-
3src/views/article/subject/layout.vue
@ -0,0 +1,69 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
// 查询主题列表
|
|||
export function listSubject(query) { |
|||
return request({ |
|||
url: '/special/specialBackList', |
|||
method: 'get', |
|||
params: query |
|||
}) |
|||
} |
|||
|
|||
|
|||
// 新增主题
|
|||
export function addSubject(data) { |
|||
return request({ |
|||
url: '/special/addSpecial', |
|||
method: 'post', |
|||
data: data |
|||
}) |
|||
} |
|||
|
|||
// 修改主题
|
|||
export function updateSubject(data) { |
|||
return request({ |
|||
url: '/special/specialEdit', |
|||
method: 'post', |
|||
data: data |
|||
}) |
|||
} |
|||
|
|||
// 删除主题
|
|||
export function delSubject(data) { |
|||
return request({ |
|||
url: '/special/specialDel', |
|||
method: 'post', |
|||
data: data |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
// 查询主题文章列表
|
|||
export function listSubjectArticle(query) { |
|||
return request({ |
|||
url: '/special/specialBackListMore', |
|||
method: 'get', |
|||
params: query |
|||
}) |
|||
} |
|||
|
|||
|
|||
// 新增文章
|
|||
export function addSubjectArticle(data) { |
|||
return request({ |
|||
url: '/special/specialBind', |
|||
method: 'post', |
|||
data: data |
|||
}) |
|||
} |
|||
|
|||
// 删除主题
|
|||
export function delSubjectArticle(data) { |
|||
console.log(data) |
|||
return request({ |
|||
url: '/special/specialSolution', |
|||
method: 'post', |
|||
data: data |
|||
}) |
|||
} |
|||
@ -0,0 +1,323 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="filter-container"> |
|||
<el-button |
|||
class="filter-item el-button el-button--primary el-button--mini" |
|||
type="primary" |
|||
icon="el-icon-edit" |
|||
@click="handleCreate" |
|||
>添加文章</el-button> |
|||
</div> |
|||
<el-table |
|||
:key="tableKey" |
|||
v-loading="listLoading" |
|||
:data="list" |
|||
border |
|||
fit |
|||
highlight-current-row |
|||
style="width: 100%" |
|||
> |
|||
<el-table-column label="ID" prop="id" align="center"> |
|||
<template slot-scope="{ row }"> |
|||
<span>{{ row.id }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="专题" align="center"> |
|||
<template slot-scope="{ row }"> |
|||
<span>{{ row.special_id | getSubjectName(subject) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="标题" align="center"> |
|||
<template slot-scope="{ row }"> |
|||
<span>{{ row.article_title }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="封面图" align="center"> |
|||
<template slot-scope="{ row }"> |
|||
<img :src="row.img" height="100" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="创建时间" align="center"> |
|||
<template slot-scope="{ row }"> |
|||
<span>{{ row.create_time }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="操作" |
|||
align="center" |
|||
class-name="small-padding fixed-width" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
>删除</el-button |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<pagination |
|||
v-show="total > 0" |
|||
:total="total" |
|||
:page.sync="listQuery.page" |
|||
:limit.sync="listQuery.limit" |
|||
@pagination="getList" |
|||
/> |
|||
<!-- 添加或修改分类对话框 --> |
|||
<el-drawer |
|||
ref="drawer" |
|||
:title="textMap[dialogStatus]" |
|||
:visible.sync="dialogFormVisible" |
|||
direction="rtl" |
|||
custom-class="drawer" |
|||
size="950px" |
|||
> |
|||
<div class="drawer__content"> |
|||
<el-form |
|||
ref="dataForm" |
|||
:model="temp" |
|||
label-position="left" |
|||
label-width="70px" |
|||
style |
|||
> |
|||
<el-form-item label="专题"> |
|||
<el-select v-model="temp.special_id" placeholder="选择专题"> |
|||
<el-option |
|||
v-for="(item, index) in subject" |
|||
:key="index" |
|||
:label="item.title" |
|||
:value="item.special_id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="关联文章"> |
|||
<el-select |
|||
v-model="temp.article_id" |
|||
remote |
|||
:loading="searchArticleLoading" |
|||
:remote-method="remoteMethod" |
|||
reserve-keyword |
|||
placeholder="请输入关键字搜索" |
|||
filterable |
|||
:clearable="true" |
|||
@change="handleSelectBranch" |
|||
> |
|||
<el-option |
|||
v-for="(item, index) in articles" |
|||
:key="index" |
|||
:label="item.title" |
|||
:value="item.article_id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="drawer__footer"> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
<el-button @click="dialogFormVisible = false">取 消</el-button> |
|||
</div> |
|||
</div> |
|||
</el-drawer> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
listSubject, |
|||
listSubjectArticle, |
|||
addSubjectArticle, |
|||
delSubjectArticle, |
|||
} from "@/api/subject"; |
|||
|
|||
import { |
|||
searchArticle, |
|||
} from "@/api/ad"; |
|||
|
|||
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination |
|||
|
|||
export default { |
|||
name: "adIndex", |
|||
components: { Pagination }, |
|||
data() { |
|||
return { |
|||
tableKey: 0, |
|||
list: null, |
|||
total: 0, |
|||
listLoading: true, |
|||
listQuery: { |
|||
page: 1, |
|||
limit: 20, |
|||
special_id: undefined |
|||
}, |
|||
subject: [], |
|||
uploadAction: process.env.VUE_APP_BASE_API + "/files/uploadFile", |
|||
temp: { |
|||
id: undefined, |
|||
special_id: undefined, |
|||
article_id: undefined, |
|||
}, |
|||
dialogFormVisible: false, |
|||
dialogStatus: "", |
|||
textMap: { |
|||
update: "编辑", |
|||
create: "添加", |
|||
}, |
|||
rules: { |
|||
// title: [ |
|||
// { required: true, message: "title is required", trigger: "blur" }, |
|||
// ], |
|||
}, |
|||
downloadLoading: false, |
|||
searchArticleLoading: false, |
|||
articles: [], |
|||
validation: true, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getSubjectList() |
|||
this.getList(); |
|||
}, |
|||
filters: { |
|||
getSubjectName(id, subject) { |
|||
for (var i = 0; i < subject.length; i++) { |
|||
if (id == subject[i].special_id) { |
|||
return subject[i].title; |
|||
} |
|||
} |
|||
return ""; |
|||
}, |
|||
}, |
|||
methods: { |
|||
getSubjectList() { |
|||
this.listLoading = true; |
|||
listSubject(this.listQuery).then((response) => { |
|||
this.subject = response.data; |
|||
}); |
|||
}, |
|||
getList() { |
|||
this.listLoading = true; |
|||
listSubjectArticle(this.listQuery).then((response) => { |
|||
this.list = response.data.list; |
|||
this.total = response.data.count; |
|||
|
|||
// Just to simulate the time of the request |
|||
setTimeout(() => { |
|||
this.listLoading = false; |
|||
}, 1.5 * 1000); |
|||
}); |
|||
}, |
|||
handleFilter() { |
|||
this.listQuery.page = 1; |
|||
this.getList(); |
|||
}, |
|||
handleModifyStatus(row, status) { |
|||
this.$message({ |
|||
message: "操作Success", |
|||
type: "success", |
|||
}); |
|||
row.status = status; |
|||
}, |
|||
resetTemp() { |
|||
this.temp = { |
|||
id: undefined, |
|||
special_id: undefined, |
|||
article_id: undefined, |
|||
}; |
|||
}, |
|||
submitForm() { |
|||
if (this.dialogStatus == "create") { |
|||
this.createData(); |
|||
} else if (this.dialogStatus == "update") { |
|||
this.updateData(); |
|||
} |
|||
}, |
|||
handleCreate() { |
|||
this.resetTemp(); |
|||
this.dialogStatus = "create"; |
|||
this.dialogFormVisible = true; |
|||
}, |
|||
createData() { |
|||
// this.$refs['dataForm'].validate((valid) => { |
|||
// if (valid) { |
|||
addSubjectArticle(this.temp).then(() => { |
|||
this.dialogFormVisible = false; |
|||
this.$message({ |
|||
message: "添加成功", |
|||
type: "success", |
|||
duration: 2 * 1000, |
|||
}); |
|||
this.getList(); |
|||
}); |
|||
// } |
|||
// }) |
|||
}, |
|||
handleDelete({ article_title, article_id, special_id }) { |
|||
this.$confirm('是否确认删除名称为"' + article_title + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(function () { |
|||
console.log("del11"); |
|||
return delSubjectArticle({ article_id, special_id }); |
|||
}) |
|||
.then((response) => { |
|||
if (response.code === 200) { |
|||
this.$message({ |
|||
message: "删除成功", |
|||
type: "success", |
|||
duration: 2 * 1000, |
|||
}); |
|||
this.open = false; |
|||
this.getList(); |
|||
} else { |
|||
this.$message({ |
|||
message: "删除失败", |
|||
type: "error", |
|||
duration: 2 * 1000, |
|||
}); |
|||
} |
|||
}) |
|||
.catch(function () {}); |
|||
}, |
|||
|
|||
handleSelectBranch(item) { |
|||
console.log("远程搜索选中后返回的item：：：：：即value的值"); |
|||
console.log(item); |
|||
//如果要获取选择的 id或者名字 从item中取值 |
|||
this.$set(this.temp, "article_id", item); |
|||
}, |
|||
// 搜索模糊查询数据下拉框 |
|||
remoteMethod(query) { |
|||
var that = this; |
|||
searchArticle(query) |
|||
.then(function (res) { |
|||
//将取到的值进行遍历 |
|||
that.articles = res.data; |
|||
that.list = that.states.map((item) => { |
|||
// item.uid item.name根据接口里的关键字 |
|||
return { value: item.uid, label: item.name }; |
|||
}); |
|||
}) |
|||
.catch(function (err) { |
|||
console.log(err); |
|||
}); |
|||
return; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.app-container { |
|||
.filter-container { |
|||
margin-left: 5px; |
|||
margin-bottom: 6px; |
|||
} |
|||
::v-deep .el-drawer__body { |
|||
padding: 20px; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,372 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="filter-container"> |
|||
<el-button |
|||
class="filter-item el-button el-button--primary el-button--mini" |
|||
type="primary" |
|||
icon="el-icon-edit" |
|||
@click="handleCreate" |
|||
>添加专题</el-button |
|||
> |
|||
</div> |
|||
<el-table |
|||
:key="tableKey" |
|||
v-loading="listLoading" |
|||
:data="list" |
|||
border |
|||
fit |
|||
highlight-current-row |
|||
style="width: 100%" |
|||
> |
|||
<el-table-column label="ID" prop="id" align="center"> |
|||
<template slot-scope="{ row }"> |
|||
<span>{{ row.special_id }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="标题" align="center"> |
|||
<template slot-scope="{ row }"> |
|||
<span>{{ row.title }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="封面图" align="center"> |
|||
<template slot-scope="{ row }"> |
|||
<img :src="row.img" height="100" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="banner图" align="center"> |
|||
<template slot-scope="{ row }"> |
|||
<img :src="row.image" height="100" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="创建时间" align="center"> |
|||
<template slot-scope="{ row }"> |
|||
<span>{{ row.create_time }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="操作" |
|||
align="center" |
|||
class-name="small-padding fixed-width" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
>修改</el-button |
|||
> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
>删除</el-button |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 添加或修改分类对话框 --> |
|||
<el-drawer |
|||
ref="drawer" |
|||
:title="textMap[dialogStatus]" |
|||
:visible.sync="dialogFormVisible" |
|||
direction="rtl" |
|||
custom-class="drawer" |
|||
size="950px" |
|||
> |
|||
<div class="drawer__content"> |
|||
<el-form |
|||
ref="dataForm" |
|||
:model="temp" |
|||
label-position="left" |
|||
label-width="70px" |
|||
style |
|||
> |
|||
<el-form-item label="状态"> |
|||
<el-select v-model="temp.is_show" placeholder="选择状态"> |
|||
<el-option |
|||
v-for="(item, index) in statics" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="标题" prop="title"> |
|||
<el-input v-model="temp.title" /> |
|||
</el-form-item> |
|||
<el-form-item label="封面" prop="img" required> |
|||
<img |
|||
v-if="temp.img" |
|||
:src="temp.img" |
|||
class="el-upload el-upload--picture-card" |
|||
style="float: left; width: auto" |
|||
/> |
|||
<el-upload |
|||
ref="sys_app_logo" |
|||
:on-success="uploadImgSuccess" |
|||
:on-error="uploadError" |
|||
:action="uploadAction" |
|||
style="float: left" |
|||
list-type="picture-card" |
|||
:show-file-list="false" |
|||
:before-upload="validationImg" |
|||
> |
|||
<i class="el-icon-plus" /> |
|||
</el-upload> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="banner" prop="image" required> |
|||
<img |
|||
v-if="temp.image" |
|||
:src="temp.image" |
|||
class="el-upload el-upload--picture-card" |
|||
style="float: left; width: auto" |
|||
/> |
|||
<el-upload |
|||
ref="sys_app_logo" |
|||
:on-success="uploadSuccess" |
|||
:on-error="uploadError" |
|||
:action="uploadAction" |
|||
style="float: left" |
|||
list-type="picture-card" |
|||
:show-file-list="false" |
|||
:before-upload="validationImages" |
|||
> |
|||
<i class="el-icon-plus" /> |
|||
</el-upload> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
<div class="drawer__footer"> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
<el-button @click="dialogFormVisible = false">取 消</el-button> |
|||
</div> |
|||
</div> |
|||
</el-drawer> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
listSubject, |
|||
addSubject, |
|||
updateSubject, |
|||
delSubject, |
|||
} from "@/api/subject"; |
|||
|
|||
export default { |
|||
name: "SubjectIndex", |
|||
data() { |
|||
return { |
|||
tableKey: 0, |
|||
list: null, |
|||
total: 0, |
|||
listLoading: true, |
|||
listQuery: { |
|||
page: 1, |
|||
limit: 20, |
|||
}, |
|||
uploadAction: process.env.VUE_APP_BASE_API + "/files/uploadFile", |
|||
temp: { |
|||
id: undefined, |
|||
title: "", |
|||
is_show: 1, |
|||
title: "", |
|||
img: "", |
|||
image: "", |
|||
}, |
|||
statics: [ |
|||
{ name: "显示", value: 1 }, |
|||
{ name: "隐藏", value: 2 }, |
|||
], |
|||
dialogFormVisible: false, |
|||
dialogStatus: "", |
|||
textMap: { |
|||
update: "编辑", |
|||
create: "添加", |
|||
}, |
|||
rules: { |
|||
title: [ |
|||
{ required: true, message: "title is required", trigger: "blur" }, |
|||
], |
|||
}, |
|||
downloadLoading: false, |
|||
searchArticleLoading: false, |
|||
articles: [], |
|||
validation: true, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
// 验证图片宽高 |
|||
async validationImg(file) { |
|||
let res = await this.$getImgWidth(file, 'subjectCover'); |
|||
this.validation = res; |
|||
return res; |
|||
}, |
|||
async validationImages(file) { |
|||
let res = await this.$getImgWidth(file, 'subjectBanner'); |
|||
this.validation = res; |
|||
return res; |
|||
}, |
|||
getList() { |
|||
this.listLoading = true; |
|||
listSubject(this.listQuery).then((response) => { |
|||
this.list = response.data; |
|||
|
|||
// Just to simulate the time of the request |
|||
setTimeout(() => { |
|||
this.listLoading = false; |
|||
}, 1.5 * 1000); |
|||
}); |
|||
}, |
|||
handleFilter() { |
|||
this.listQuery.page = 1; |
|||
this.getList(); |
|||
}, |
|||
handleModifyStatus(row, status) { |
|||
this.$message({ |
|||
message: "操作Success", |
|||
type: "success", |
|||
}); |
|||
row.status = status; |
|||
}, |
|||
resetTemp() { |
|||
this.temp = { |
|||
id: undefined, |
|||
title: "", |
|||
is_show: 1, |
|||
title: "", |
|||
img: "", |
|||
image: "", |
|||
}; |
|||
}, |
|||
submitForm() { |
|||
if (this.dialogStatus == "create") { |
|||
this.createData(); |
|||
} else if (this.dialogStatus == "update") { |
|||
this.updateData(); |
|||
} |
|||
}, |
|||
handleCreate() { |
|||
this.resetTemp(); |
|||
this.dialogStatus = "create"; |
|||
this.dialogFormVisible = true; |
|||
// this.$nextTick(() => { |
|||
// this.$refs['dataForm'].clearValidate() |
|||
// }) |
|||
}, |
|||
createData() { |
|||
// this.$refs['dataForm'].validate((valid) => { |
|||
// if (valid) { |
|||
addSubject(this.temp).then(() => { |
|||
this.dialogFormVisible = false; |
|||
this.$message({ |
|||
message: "添加成功", |
|||
type: "success", |
|||
duration: 2 * 1000, |
|||
}); |
|||
this.getList(); |
|||
}); |
|||
// } |
|||
// }) |
|||
}, |
|||
handleUpdate(row) { |
|||
// let special_id = row.special_id |
|||
// fetchAdDetails({special_id}).then(res => { |
|||
|
|||
var that = this; |
|||
that.temp = row; |
|||
this.dialogStatus = "update"; |
|||
this.dialogFormVisible = true; |
|||
}, |
|||
updateData() { |
|||
// this.$refs['dataForm'].validate((valid) => { |
|||
// if (valid) { |
|||
updateSubject(this.temp).then(() => { |
|||
this.dialogFormVisible = false; |
|||
this.$message({ |
|||
message: "更新成功", |
|||
type: "success", |
|||
duration: 2 * 1000, |
|||
}); |
|||
|
|||
this.getList(); |
|||
}); |
|||
// } |
|||
// }) |
|||
}, |
|||
handleDelete({ title, special_id }) { |
|||
this.$confirm('是否确认删除名称为"' + title + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(function () { |
|||
console.log("del"); |
|||
return delSubject({ special_id }); |
|||
}) |
|||
.then((response) => { |
|||
if (response.code === 200) { |
|||
this.$message({ |
|||
message: "删除成功", |
|||
type: "success", |
|||
duration: 2 * 1000, |
|||
}); |
|||
this.open = false; |
|||
this.getList(); |
|||
} else { |
|||
this.$message({ |
|||
message: "删除失败", |
|||
type: "error", |
|||
duration: 2 * 1000, |
|||
}); |
|||
} |
|||
}) |
|||
.catch(function () {}); |
|||
}, |
|||
uploadImgSuccess(response, file) { |
|||
if (this.validation && response.state == "SUCCESS") { |
|||
this.temp.img = response.url; |
|||
} |
|||
}, |
|||
uploadSuccess(response, file) { |
|||
if (this.validation && response.state == "SUCCESS") { |
|||
this.temp.image = response.url; |
|||
} |
|||
}, |
|||
uploadRemove(file) { |
|||
const uid = file.uid; |
|||
const objKeyArr = Object.keys(this.listObj); |
|||
for (let i = 0, len = objKeyArr.length; i < len; i++) { |
|||
if (this.listObj[objKeyArr[i]].uid === uid) { |
|||
delete this.listObj[objKeyArr[i]]; |
|||
return; |
|||
}0 |
|||
} |
|||
}, |
|||
uploadError(err) { |
|||
this.$alert(err, "发生错误", { |
|||
confirmButtonText: "确定", |
|||
callback: (action) => {}, |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.app-container { |
|||
.filter-container { |
|||
margin-left: 5px; |
|||
margin-bottom: 6px; |
|||
} |
|||
::v-deep .el-drawer__body { |
|||
padding: 20px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,3 @@ |
|||
<template> |
|||
<router-view /> |
|||
</template> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue