|
|
|
@ -1,158 +1,159 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<el-form |
|
|
|
ref="queryForm" |
|
|
|
:model="listQuery" |
|
|
|
:inline="true" |
|
|
|
label-width="68px" |
|
|
|
> |
|
|
|
<el-form-item label="专题" prop="special_id"> |
|
|
|
<el-select |
|
|
|
v-model="listQuery.special_id" |
|
|
|
placeholder="专题" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
style="width: 160px" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="dict in subject" |
|
|
|
:key="dict.special_id" |
|
|
|
:label="dict.title" |
|
|
|
:value="dict.special_id" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
icon="el-icon-search" |
|
|
|
size="mini" |
|
|
|
@click="getList" |
|
|
|
>搜索</el-button |
|
|
|
> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<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 |
|
|
|
<el-card class="box-card"> |
|
|
|
<el-form |
|
|
|
ref="queryForm" |
|
|
|
:model="listQuery" |
|
|
|
:inline="true" |
|
|
|
label-width="68px" |
|
|
|
> |
|
|
|
</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 |
|
|
|
</el-form> |
|
|
|
<el-row :gutter="24"> |
|
|
|
<el-col :span="3"> |
|
|
|
<el-tree |
|
|
|
style="width: 100%" |
|
|
|
:data="subject" |
|
|
|
highlight-current |
|
|
|
:props="defaultProps" |
|
|
|
@node-click="handleNodeClick" |
|
|
|
></el-tree> |
|
|
|
</el-col> |
|
|
|
<el-col :span="21"> |
|
|
|
<el-form> |
|
|
|
<el-form-item label="文章标题" prop="title"> |
|
|
|
<el-input |
|
|
|
v-model="article_title" |
|
|
|
placeholder="请输入文章标题" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
style="width: 160px" |
|
|
|
/> |
|
|
|
<el-button |
|
|
|
style="margin-left: 5px" |
|
|
|
class="filter-item el-button el-button--primary el-button--mini" |
|
|
|
type="primary" |
|
|
|
icon="el-icon-edit" |
|
|
|
>搜索</el-button |
|
|
|
> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<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%" |
|
|
|
> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<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> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<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" |
|
|
|
<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="专题" |
|
|
|
><div>{{ special_title }}</div></el-form-item |
|
|
|
> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
</el-drawer> |
|
|
|
</el-drawer> |
|
|
|
</el-card> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -183,7 +184,6 @@ export default { |
|
|
|
special_id: undefined, |
|
|
|
}, |
|
|
|
subject: [], |
|
|
|
uploadAction: process.env.VUE_APP_BASE_API + "/files/uploadFile", |
|
|
|
temp: { |
|
|
|
id: undefined, |
|
|
|
special_id: undefined, |
|
|
|
@ -195,15 +195,11 @@ export default { |
|
|
|
update: "编辑", |
|
|
|
create: "添加", |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
// title: [ |
|
|
|
// { required: true, message: "title is required", trigger: "blur" }, |
|
|
|
// ], |
|
|
|
}, |
|
|
|
downloadLoading: false, |
|
|
|
defaultProps: {}, |
|
|
|
searchArticleLoading: false, |
|
|
|
articles: [], |
|
|
|
validation: true, |
|
|
|
special_title: "", |
|
|
|
article_title: "", |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
@ -221,10 +217,26 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 点击树形结构 |
|
|
|
handleNodeClick(data) { |
|
|
|
this.listQuery.special_id = data.id; |
|
|
|
this.defaultProps = data; |
|
|
|
this.getList(); |
|
|
|
}, |
|
|
|
// 获取专题列表 |
|
|
|
getSubjectList() { |
|
|
|
this.listLoading = true; |
|
|
|
listSubject(this.listQuery).then((response) => { |
|
|
|
this.subject = response.data; |
|
|
|
response.data.forEach((i) => { |
|
|
|
this.subject.push({ |
|
|
|
label: i.title, |
|
|
|
id: i.special_id, |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.subject.unshift({ |
|
|
|
label: "全部", |
|
|
|
id: "", |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
getList() { |
|
|
|
@ -236,7 +248,7 @@ export default { |
|
|
|
// Just to simulate the time of the request |
|
|
|
setTimeout(() => { |
|
|
|
this.listLoading = false; |
|
|
|
}, 1.5 * 1000); |
|
|
|
}, 600); |
|
|
|
}); |
|
|
|
}, |
|
|
|
handleFilter() { |
|
|
|
@ -260,12 +272,19 @@ export default { |
|
|
|
submitForm() { |
|
|
|
if (this.dialogStatus == "create") { |
|
|
|
this.createData(); |
|
|
|
} else if (this.dialogStatus == "update") { |
|
|
|
this.updateData(); |
|
|
|
} |
|
|
|
}, |
|
|
|
handleCreate() { |
|
|
|
if (!this.defaultProps.id) { |
|
|
|
this.$message({ |
|
|
|
message: "请选择专题(全部除外)", |
|
|
|
type: "warning", |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
this.resetTemp(); |
|
|
|
this.temp.special_id = this.defaultProps.id; |
|
|
|
this.special_title = this.defaultProps.label; |
|
|
|
this.dialogStatus = "create"; |
|
|
|
this.dialogFormVisible = true; |
|
|
|
}, |
|
|
|
@ -285,7 +304,7 @@ export default { |
|
|
|
// }) |
|
|
|
}, |
|
|
|
async handleDelete({ article_title, article_id, special_id }) { |
|
|
|
let confirm = this.$confirm( |
|
|
|
let confirm = await this.$confirm( |
|
|
|
'是否确认删除名称为"' + article_title + '"的数据项?', |
|
|
|
"警告", |
|
|
|
{ |
|
|
|
@ -294,7 +313,6 @@ export default { |
|
|
|
type: "warning", |
|
|
|
} |
|
|
|
); |
|
|
|
console.log(1); |
|
|
|
let r = await delSubjectArticle({ article_id, special_id }); |
|
|
|
if (r.code === 200) { |
|
|
|
this.$message({ |
|
|
|
@ -341,6 +359,8 @@ export default { |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.app-container { |
|
|
|
width: 100%; |
|
|
|
padding: 20px; |
|
|
|
.filter-container { |
|
|
|
margin-left: 5px; |
|
|
|
margin-bottom: 6px; |
|
|
|
|
