Browse Source

Merge branch 'master' of ssh://193.200.130.186:26488/chenke/hl-web-admin

master
pzy 3 years ago
parent
commit
f4ad8fbe5f
  1. 69
      src/api/subject.js
  2. 110
      src/router/routes.js
  3. 8
      src/utils/get-img-width.js
  4. 5
      src/views/article/index.vue
  5. 354
      src/views/article/subject/article.vue
  6. 398
      src/views/article/subject/index.vue
  7. 3
      src/views/article/subject/layout.vue

69
src/api/subject.js

@ -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
})
}

110
src/router/routes.js

@ -40,37 +40,55 @@ const routes = [
path: '/dashboard',
component: () => import('@/views/dashboard'),
}],
meta: { title: '欢迎页', icon: 'form', noCache: true}
meta: { title: '欢迎页', icon: 'form', noCache: true }
},
{
path: '/menuManage',
component: Layout,
children: [{
path: 'index',
name: 'MenuManage',
component: () => import('@/views/menu'),
meta: { title: '菜单管理', icon: 'tree-table', noCache: true}
path: 'index',
name: 'MenuManage',
component: () => import('@/views/menu'),
meta: { title: '菜单管理', icon: 'tree-table', noCache: true }
}]
},
{ path: '*', component: Notfound, hidden: true },
{
path: '/article',
component: Layout,
name: 'article',
meta: { title: '内容中心', icon: 'form' },
path: '/article',
component: Layout,
name: 'article',
meta: { title: '内容中心', icon: 'form' },
children: [{
path: 'index',
name: 'articleIndex',
component: () => import('@/views/article/index'),
meta: { title: '文章列表', icon: 'form', noCache: true }
}, {
path: 'category',
name: 'articleCategory',
component: () => import('@/views/article/category'),
meta: { title: '文章类别', icon: 'form', noCache: true }
},
{
path: 'subject',
component: () => import('@/views/article/subject/layout'),
name: 'subject',
meta: { title: '专题管理', icon: 'form' },
children: [{
path: 'index',
name: 'articleIndex',
component: () => import('@/views/article/index'),
meta: { title: '文章列表', icon: 'form', noCache: true}
},{
path: 'category',
name: 'articleCategory',
component: () => import('@/views/article/category'),
meta: { title: '文章类别', icon: 'form', noCache: true}
path: 'list',
name: 'subjectIndex',
component: () => import('@/views/article/subject/index'),
meta: { title: '专题列表', icon: 'form', noCache: true }
}, {
path: 'article',
name: 'subjectArticle',
component: () => import('@/views/article/subject/article'),
meta: { title: '专题文章', icon: 'form', noCache: true }
},
]
},
]
},
{
@ -79,40 +97,40 @@ const routes = [
name: 'AD',
meta: { title: '广告中心', icon: 'form' },
children: [{
path: 'index',
name: 'adIndex',
component: () => import('@/views/ad/index'),
meta: { title: '首页管理', icon: 'form', noCache: true}
}
path: 'index',
name: 'adIndex',
component: () => import('@/views/ad/index'),
meta: { title: '首页管理', icon: 'form', noCache: true }
}
]
},
},
{
path: '/admin',
component: Layout,
name: 'Admin',
meta: { title: '用户', icon: 'form' },
children: [{
{
path: '/admin',
component: Layout,
name: 'Admin',
meta: { title: '用户', icon: 'form' },
children: [{
path: 'index',
name: 'AdminIndex',
component: () => import('@/views/admin/index'),
meta: { title: '管理员管理', icon: 'form', noCache: true}
meta: { title: '管理员管理', icon: 'form', noCache: true }
}
]
},
{
path: '/role',
component: Layout,
name: 'Role',
meta: { title: '角色', icon: 'form' },
children: [{
]
},
{
path: '/role',
component: Layout,
name: 'Role',
meta: { title: '角色', icon: 'form' },
children: [{
path: 'index',
name: 'RoleIndex',
component: () => import('@/views/role/index'),
meta: { title: '角色管理', icon: 'form', noCache: true}
meta: { title: '角色管理', icon: 'form', noCache: true }
}
]
},
]
},
...warning,
@ -121,10 +139,10 @@ const routes = [
path: '/updateVersion',
component: Layout,
children: [{
path: 'index',
name: 'UpdateVersion',
component: () => import('@/views/updateVersion/updateVersion'),
meta: { title: '版本更新', icon: 'form', noCache: true}
path: 'index',
name: 'UpdateVersion',
component: () => import('@/views/updateVersion/updateVersion'),
meta: { title: '版本更新', icon: 'form', noCache: true }
}]
},
...playground,

8
src/utils/get-img-width.js

@ -31,6 +31,14 @@ export default function (file, id) {
width = 722;
height = 406;
break;
case 'subjectCover': //专题封面
width = 650;
height = 350;
break;
case 'subjectBanner': //专题封面
width = 1585;
height = 224;
break;
};
return new Promise(resolve => {
let reader = new FileReader();

5
src/views/article/index.vue

@ -208,6 +208,7 @@
:options="categoryOptions"
:normalizer="normalizer"
:show-count="true"
:disabled="dialogStatus=='create'"
placeholder="选择分类"
/>
</el-form-item>
@ -394,8 +395,8 @@ export default {
dialogFormVisible: false,
dialogStatus: "",
textMap: {
update: "Edit",
create: "Create",
update: "编辑",
create: "添加",
},
rules: {
title: [

354
src/views/article/subject/article.vue

@ -0,0 +1,354 @@
<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>
</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 () {
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>

398
src/views/article/subject/index.vue

@ -0,0 +1,398 @@
<template>
<div class="app-container">
<el-form
ref="queryForm"
:model="listQuery"
:inline="true"
label-width="68px"
>
<el-form-item label="专题名称" prop="title">
<el-input
v-model="listQuery.title"
placeholder="请输入专题名称"
clearable
size="small"
style="width: 160px"
@keyup.enter.native="getList"
/>
</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
>
</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>

3
src/views/article/subject/layout.vue

@ -0,0 +1,3 @@
<template>
<router-view />
</template>
Loading…
Cancel
Save