chenke
/
hl-web-admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

专题修改

master
pzy 3 years ago
parent
dc3f7788e6
commit
5597e72eff
1 changed files with 182 additions and 162 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 344
      src/views/article/subject/article.vue

344
src/views/article/subject/article.vue
View File

@ -1,158 +1,159 @@
<template> <template>
<div class="app-container"> <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>
</div>
</el-drawer>
</el-drawer>
</el-card>
</div> </div>
</template> </template>
@ -183,7 +184,6 @@ export default {
special_id: undefined, special_id: undefined,
}, },
subject: [], subject: [],
uploadAction: process.env.VUE_APP_BASE_API + "/files/uploadFile",
temp: { temp: {
id: undefined, id: undefined,
special_id: undefined, special_id: undefined,
@ -195,15 +195,11 @@ export default {
update: "编辑", update: "编辑",
create: "添加", create: "添加",
}, },
rules: {
// title: [
// { required: true, message: "title is required", trigger: "blur" },
// ],
},
downloadLoading: false,
defaultProps: {},
searchArticleLoading: false, searchArticleLoading: false,
articles: [], articles: [],
validation: true,
special_title: "",
article_title: "",
}; };
}, },
created() { created() {
@ -221,10 +217,26 @@ export default {
}, },
}, },
methods: { methods: {
// 点击树形结构
handleNodeClick(data) {
this.listQuery.special_id = data.id;
this.defaultProps = data;
this.getList();
},
// 获取专题列表
getSubjectList() { getSubjectList() {
this.listLoading = true; this.listLoading = true;
listSubject(this.listQuery).then((response) => { 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() { getList() {
@ -236,7 +248,7 @@ export default {
// Just to simulate the time of the request // Just to simulate the time of the request
setTimeout(() => { setTimeout(() => {
this.listLoading = false; this.listLoading = false;
}, 1.5 * 1000);
}, 600);
}); });
}, },
handleFilter() { handleFilter() {
@ -260,12 +272,19 @@ export default {
submitForm() { submitForm() {
if (this.dialogStatus == "create") { if (this.dialogStatus == "create") {
this.createData(); this.createData();
} else if (this.dialogStatus == "update") {
this.updateData();
} }
}, },
handleCreate() { handleCreate() {
if (!this.defaultProps.id) {
this.$message({
message: "请选择专题(全部除外)",
type: "warning",
});
return;
}
this.resetTemp(); this.resetTemp();
this.temp.special_id = this.defaultProps.id;
this.special_title = this.defaultProps.label;
this.dialogStatus = "create"; this.dialogStatus = "create";
this.dialogFormVisible = true; this.dialogFormVisible = true;
}, },
@ -285,7 +304,7 @@ export default {
// }) // })
}, },
async handleDelete({ article_title, article_id, special_id }) { async handleDelete({ article_title, article_id, special_id }) {
let confirm = this.$confirm(
let confirm = await this.$confirm(
'是否确认删除名称为"' + article_title + '"的数据项?', '是否确认删除名称为"' + article_title + '"的数据项?',
"警告", "警告",
{ {
@ -294,7 +313,6 @@ export default {
type: "warning", type: "warning",
} }
); );
console.log(1);
let r = await delSubjectArticle({ article_id, special_id }); let r = await delSubjectArticle({ article_id, special_id });
if (r.code === 200) { if (r.code === 200) {
this.$message({ this.$message({
@ -341,6 +359,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-container { .app-container {
width: 100%;
padding: 20px;
.filter-container { .filter-container {
margin-left: 5px; margin-left: 5px;
margin-bottom: 6px; margin-bottom: 6px;

Write Preview
Loading…
Cancel
Save