文章编写和导航

This commit is contained in:
clay
2022-01-06 00:20:08 +08:00
parent 0d5055c064
commit b397c87098
5 changed files with 829 additions and 207 deletions

View File

@@ -0,0 +1,54 @@
import request from '@/utils/request'
// 查询导航列表
export function listNavigation(data) {
return request({
url: '/sist/navigation/list',
method: 'post',
data: data
})
}
// 导出导航
export function exportNavigation(data) {
return request({
url: '/sist/navigation/export',
method: 'post',
data: data
})
}
// 查询导航详细
export function getNavigation(id) {
return request({
url: '/sist/navigation/' + id,
method: 'get'
})
}
// 新增导航
export function addNavigation(data) {
return request({
url: '/sist/navigation',
method: 'post',
data: data
})
}
// 修改导航
export function updateNavigation(data) {
return request({
url: '/sist/navigation',
method: 'put',
data: data
})
}
// 删除导航
export function delNavigation(id) {
return request({
url: '/sist/navigation/' + id,
method: 'delete'
})
}

View File

@@ -105,6 +105,25 @@ export const constantRoutes = [
} }
] ]
}, },
{
path: '/article',
component: Layout,
hidden: true,
children: [
{
path: 'add',
component: (resolve) => require(['@/views/sist/article/components/article'], resolve),
name: 'addarticle',
meta: { title: '添加文章' }
},
{
path: 'edit/:articleId',
component: (resolve) => require(['@/views/sist/article/components/article'], resolve),
name: 'editarticle',
meta: { title: '修改文章' }
},
]
},
{ {
path: '/module', path: '/module',
component: Layout, component: Layout,
@@ -132,24 +151,6 @@ export const constantRoutes = [
} }
] ]
}, },
// {
// path: '/top/edit/:topId(\\d+)',
// component: (resolve) => require(['@/views/tool/top/topology'], resolve),
// hidden: true,
// },
// {
// path: '/top',
// component: Layout,
// hidden: true,
// children: [
// {
// path: 'edit/:topId(\\d+)',
// component: (resolve) => require(['@/views/tool/top/topology'], resolve),
// name: 'top',
// meta: { title: 'top查询配置' }
// }
// ]
// },
{ {
path: '/job', path: '/job',
component: Layout, component: Layout,

View File

@@ -0,0 +1,263 @@
<template>
<div class="article">
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="文章标题" prop="title">
<el-input v-model="formData.title" placeholder="请输入文章标题" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发布人" prop="publishUserName">
<el-input v-model="formData.publishUserName" placeholder="请输入发布人" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="文章类型" prop="type">
<el-select v-model="formData.type" placeholder="请选择文章类型" clearable :style="{width: '100%'}">
<el-option
v-for="dict in typeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否顶置" prop="isTop">
<el-select v-model="formData.isTop" placeholder="请选择是否顶置" clearable :style="{width: '100%'}">
<el-option
v-for="dict in isTopOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否显示" prop="isView">
<el-select v-model="formData.isView" placeholder="请选择是否英语" clearable :style="{width: '100%'}">
<el-option
v-for="dict in isViewOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否英语" prop="isEnglish">
<el-select v-model="formData.isEnglish" placeholder="请选择是否英语" clearable :style="{width: '100%'}">
<el-option
v-for="dict in isEnglishOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="发布网站" prop="sitetype">
<el-radio-group v-model="formData.sitetype">
<el-radio-button v-for="(item, index) in sitetypeOptions" :key="index"
:label="item.dictValue">{{ item.dictLabel }}</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发布时间" prop="publishTime">
<el-date-picker
v-model="formData.publishTime"
type="datetime"
placeholder="选择日期时间"
align="right"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :offset="1" :span="22">
<Editor v-model="formData.content" :min-height="500"/>
</el-col>
</el-row>
<el-row>
<el-col :span="24" class="submitForm">
<el-form-item size="large">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import Editor from '@/components/Editor';
import {updateArticle, getArticle, addArticle} from "@/api/sist/article";
export default {
components: {
Editor,
},
props: [],
data() {
return {
formData: {
id: null,
title: null,
publishUserName: null,
type: null,
isTop: null,
isEnglish: null,
sitetype: "",
content: "",
},
rules: {
title: [{
required: true,
message: '请输入文章标题',
trigger: 'blur'
}],
publishUserName: [{
required: true,
message: '请输入发布人',
trigger: 'blur'
}],
type: [{
required: true,
message: '请选择文章类型',
trigger: 'change'
}],
isTop: [{
required: true,
message: '请选择是否顶置',
trigger: 'change'
}],
isEnglish: [{
required: true,
message: '请选择是否英语',
trigger: 'change'
}],
isView: [{
required: true,
message: '请选择是否显示',
trigger: 'change'
}],
sitetype: [{
required: true,
message: '单选框组不能为空',
trigger: 'change'
}],
publishTime: [{
required: true,
message: '请选择发布日期',
trigger: 'change'
}],
},
typeOptions: [],
isTopOptions: [],
isViewOptions: [],
isEnglishOptions: [],
sitetypeOptions: [],
pickerOptions: {
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
}
},
computed: {},
watch: {},
created() {
this.formData.id = this.$route.params && this.$route.params.articleId;
if (this.formData.id === undefined) {
this.formData.id = null;
this.formData.sitetype
} else {
getArticle(this.formData.id).then(response => {
this.formData = response.data
})
}
this.getDicts("article_site_type").then(response => {
this.sitetypeOptions = response.data;
});
this.getDicts("type").then(response => {
this.typeOptions = response.data;
});
this.getDicts("is_top").then(response => {
this.isTopOptions = response.data;
});
this.getDicts("is_view").then(response => {
this.isViewOptions = response.data;
});
this.getDicts("is_english").then(response => {
this.isEnglishOptions = response.data;
});
this.getDicts("article_status").then(response => {
this.statusOptions = response.data;
});
},
mounted() {
},
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (valid) {
if (this.formData.id != null) {
updateArticle(this.formData).then(response => {
this.msgSuccess("修改成功");
this.$router.push("/sist/article");
});
} else {
addArticle(this.formData).then(response => {
this.msgSuccess("新增成功");
this.$router.push("/sist/article");
});
}
}
// TODO 提交表单
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
}
}
</script>
<style scoped lang="scss">
.article {
margin-top: 20px;
}
.submitForm{
margin-top: 20px;
}
</style>

View File

@@ -11,24 +11,44 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="1: 2: 3: 根据导航" prop="type"> <el-form-item label="文章类型" prop="type">
<el-select v-model="queryParams.type" placeholder="请选择" clearable size="small"> <el-select v-model="queryParams.type" placeholder="请选择文章类型" clearable size="small">
<el-option label="请选择字典生成" value="" /> <el-option
v-for="dict in typeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="是否置顶" prop="isTop"> <el-form-item label="是否置顶" prop="isTop">
<el-select v-model="queryParams.isTop" placeholder="请选择是否置顶" clearable size="small"> <el-select v-model="queryParams.isTop" placeholder="请选择是否置顶" clearable size="small">
<el-option label="请选择字典生成" value="" /> <el-option
v-for="dict in isTopOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="是否显示" prop="isView"> <el-form-item label="是否显示" prop="isView">
<el-select v-model="queryParams.isView" placeholder="请选择是否显示" clearable size="small"> <el-select v-model="queryParams.isView" placeholder="请选择是否显示" clearable size="small">
<el-option label="请选择字典生成" value="" /> <el-option
v-for="dict in isViewOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small"> <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
<el-option label="请选择字典生成" value="" /> <el-option
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@@ -39,14 +59,15 @@
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="primary" type="primary"
plain plain
icon="el-icon-plus" icon="el-icon-plus"
size="mini" size="mini"
@click="handleAdd" v-hasPermi="['sist:article:add']"
v-hasPermi="['sist:article:add']" @click="handleAdd"
>新增</el-button> >新增
</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
@@ -57,7 +78,8 @@
:disabled="single" :disabled="single"
@click="handleUpdate" @click="handleUpdate"
v-hasPermi="['sist:article:edit']" v-hasPermi="['sist:article:edit']"
>修改</el-button> >修改
</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
@@ -68,7 +90,8 @@
:disabled="multiple" :disabled="multiple"
@click="handleDelete" @click="handleDelete"
v-hasPermi="['sist:article:remove']" v-hasPermi="['sist:article:remove']"
>删除</el-button> >删除
</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
@@ -78,51 +101,52 @@
size="mini" size="mini"
@click="handleExport" @click="handleExport"
v-hasPermi="['sist:article:export']" v-hasPermi="['sist:article:export']"
>导出</el-button> >导出
</el-button>
</el-col> </el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table v-loading="loading" :data="articleList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="articleList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center"/>
<el-table-column label="序号" type="index" align="center"> <el-table-column label="序号" type="index" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ ((queryParams.pageInfo.pageNum - 1) * queryParams.pageInfo.pageSize + scope.$index + 1)}}</span> <span>{{ ((queryParams.pageInfo.pageNum - 1) * queryParams.pageInfo.pageSize + scope.$index + 1) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="站点类型" align="center" prop="sitetype" :formatter="sitetypeFormat" /> <el-table-column label="文章标题" align="center" prop="title"/>
<!-- <el-table-column label="站点类型" align="center" prop="sitetype" />--> <el-table-column label="站点类型" align="center" prop="sitetype" :formatter="sitetypeFormat"/>
<el-table-column label="1: 2: 3: 根据导航" align="center" prop="type" /> <el-table-column label="文章类型" align="center" prop="type" :formatter="typeFormat"/>
<el-table-column label="文章标题" align="center" prop="title" /> <el-table-column label="发布人姓名" align="center" prop="publishUserName"/>
<el-table-column label="发布时间" align="center" prop="publishTime" width="180"> <el-table-column label="是否置顶" align="center" prop="isTop" :formatter="isTopFormat"/>
<el-table-column label="是否显示" align="center" prop="isView" :formatter="isViewFormat"/>
<el-table-column label="查看次数" align="center" prop="viewCount"/>
<el-table-column label="缩略图" align="center" prop="imgurl"/>
<el-table-column label="是否英文" align="center" prop="isEnglish" :formatter="isEnglishFormat"/>
<el-table-column label="状态" align="center" prop="status" :formatter="statusFormat"/>
<el-table-column label="发布时间 " align="center" prop="publishTime" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.publishTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span> <span>{{ parseTime(scope.row.publishTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="发布人id" align="center" prop="publishUserId" />
<el-table-column label="发布人姓名" align="center" prop="publishUserName" />
<el-table-column label="是否置顶" align="center" prop="isTop" />
<el-table-column label="是否显示" align="center" prop="isView" />
<el-table-column label="查看次数" align="center" prop="viewCount" />
<el-table-column label="缩略图" align="center" prop="imgurl" />
<el-table-column label="是否英文" align="center" prop="isEnglish" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
icon="el-icon-edit" icon="el-icon-edit"
@click="handleUpdate(scope.row)" v-hasPermi="['sist:article:edit']"
v-hasPermi="['sist:article:edit']" @click="handleUpdate(scope.row)"
>修改</el-button> >修改
</el-button>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
icon="el-icon-delete" icon="el-icon-delete"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
v-hasPermi="['sist:article:remove']" v-hasPermi="['sist:article:remove']"
>删除</el-button> >删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@@ -134,80 +158,11 @@
:limit.sync="queryParams.pageInfo.pageSize" :limit.sync="queryParams.pageInfo.pageSize"
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改系统文章对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="站点类型 1 sist 2: lab 3: 双边都发" prop="sitetype">
<el-select v-model="form.sitetype" placeholder="请选择站点类型">
<el-option
v-for="dict in sitetypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="parseInt(dict.dictValue)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="1: 2: 3: 根据导航" prop="type">
<el-select v-model="form.type" placeholder="请选择1: 2: 3: 根据导航">
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
<el-form-item label="文章内容">
<editor v-model="form.content" :min-height="192"/>
</el-form-item>
<el-form-item label="文章标题" prop="title">
<el-input v-model="form.title" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="发布时间" prop="publishTime">
<el-date-picker clearable size="small"
v-model="form.publishTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择发布时间 ,发布人自定义后端SQL过滤">
</el-date-picker>
</el-form-item>
<el-form-item label="发布人id" prop="publishUserId">
<el-input v-model="form.publishUserId" placeholder="请输入发布人id" />
</el-form-item>
<el-form-item label="发布人姓名" prop="publishUserName">
<el-input v-model="form.publishUserName" placeholder="请输入发布人姓名" />
</el-form-item>
<el-form-item label="是否置顶" prop="isTop">
<el-select v-model="form.isTop" placeholder="请选择是否置顶">
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
<el-form-item label="是否显示" prop="isView">
<el-select v-model="form.isView" placeholder="请选择是否显示">
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
<el-form-item label="查看次数" prop="viewCount">
<el-input v-model="form.viewCount" placeholder="请输入查看次数" />
</el-form-item>
<el-form-item label="缩略图地址,根据类型判断是否显示" prop="imgurl">
<el-input v-model="form.imgurl" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="是否英文" prop="isEnglish">
<el-input v-model="form.isEnglish" placeholder="请输入是否英文" />
</el-form-item>
<el-form-item label="状态: 1编辑中 2待审核 3: 审核完成">
<el-radio-group v-model="form.status">
<el-radio label="1">请选择字典生成</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { listArticle, getArticle, delArticle, addArticle, updateArticle, exportArticle } from "@/api/sist/article"; import {listArticle, delArticle, exportArticle} from "@/api/sist/article";
import Editor from '@/components/Editor'; import Editor from '@/components/Editor';
export default { export default {
@@ -237,14 +192,24 @@ export default {
open: false, open: false,
// 站点类型 1 sist 2: lab 3: 双边都发字典 // 站点类型 1 sist 2: lab 3: 双边都发字典
sitetypeOptions: [], sitetypeOptions: [],
// 1: 2: 3: 根据导航字典
typeOptions: [],
// 是否置顶字典
isTopOptions: [],
// 是否显示字典
isViewOptions: [],
// 是否英文字典
isEnglishOptions: [],
// 状态: 1编辑中 2待审核 3: 审核完成字典
statusOptions: [],
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageInfo:{ pageInfo: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
}, },
params:{}, params: {},
sitetype: null, sitetype: null,
type: null, type: null,
title: null, title: null,
@@ -253,10 +218,35 @@ export default {
status: null status: null
}, },
// 表单参数
form: {},
// 表单校验 // 表单校验
rules: { rules: {
sitetype: [
{required: true, message: "站点类型 1 sist 2: lab 3: 双边都发不能为空}", trigger: "change"},
],
type: [
{required: true, message: "1: 2: 3: 根据导航不能为空}", trigger: "change"},
],
content: [
{required: true, message: "文章内容不能为空}", trigger: "blur"},
],
title: [
{required: true, message: "文章标题不能为空}", trigger: "blur"},
],
publishTime: [
{required: true, message: "发布时间", trigger: "blur"},
],
publishUserName: [
{required: true, message: "发布人姓名不能为空}", trigger: "blur"},
],
isTop: [
{required: true, message: "是否置顶不能为空}", trigger: "change"},
],
isView: [
{required: true, message: "是否显示不能为空}", trigger: "change"},
],
isEnglish: [
{required: true, message: "是否英文不能为空}", trigger: "blur"},
],
} }
}; };
}, },
@@ -265,45 +255,61 @@ export default {
this.getDicts("article_site_type").then(response => { this.getDicts("article_site_type").then(response => {
this.sitetypeOptions = response.data; this.sitetypeOptions = response.data;
}); });
this.getDicts("type").then(response => {
this.typeOptions = response.data;
});
this.getDicts("is_top").then(response => {
this.isTopOptions = response.data;
});
this.getDicts("is_view").then(response => {
this.isViewOptions = response.data;
});
this.getDicts("is_english").then(response => {
this.isEnglishOptions = response.data;
});
this.getDicts("article_status").then(response => {
this.statusOptions = response.data;
});
}, },
methods: { methods: {
/** 查询系统文章列表 */ /** 查询系统文章列表 */
getList() { getList() {
this.loading = true; this.loading = true;
listArticle(this.queryParams).then(response => { listArticle(this.queryParams).then(response => {
this.articleList = response.rows; this.articleList = response.rows;
this.total = response.total; this.total = response.total;
this.loading = false; this.loading = false;
}); });
}, },
// 站点类型 1 sist 2: lab 3: 双边都发字典翻译 // 站点类型 1 sist 2: lab 3: 双边都发字典翻译
sitetypeFormat(row, column) { sitetypeFormat(row, column) {
return this.selectDictLabel(this.sitetypeOptions, row.sitetype); return this.selectDictLabel(this.sitetypeOptions, row.sitetype);
}, },
// 1: 2: 3: 根据导航字典翻译
typeFormat(row, column) {
return this.selectDictLabel(this.typeOptions, row.type);
},
// 是否置顶字典翻译
isTopFormat(row, column) {
return this.selectDictLabel(this.isTopOptions, row.isTop);
},
// 是否显示字典翻译
isViewFormat(row, column) {
return this.selectDictLabel(this.isViewOptions, row.isView);
},
// 是否英文字典翻译
isEnglishFormat(row, column) {
return this.selectDictLabel(this.isEnglishOptions, row.isEnglish);
},
// 状态: 1编辑中 2待审核 3: 审核完成字典翻译
statusFormat(row, column) {
return this.selectDictLabel(this.statusOptions, row.status);
},
// 取消按钮 // 取消按钮
cancel() { cancel() {
this.open = false; this.open = false;
this.reset(); this.reset();
}, },
// 表单重置
reset() {
this.form = {
id: null,
sitetype: null,
type: null,
content: null,
title: null,
publishUserId: null,
publishUserName: null,
isTop: null,
isView: null,
viewCount: null,
imgurl: null,
isEnglish: null,
status: 0
};
this.resetForm("form");
},
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1;
@@ -317,71 +323,43 @@ export default {
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.ids = selection.map(item => item.id) this.ids = selection.map(item => item.id)
this.single = selection.length!==1 this.single = selection.length !== 1
this.multiple = !selection.length this.multiple = !selection.length
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.reset(); this.$router.push("/article/add");
this.open = true;
this.title = "添加系统文章";
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.$router.push("/article/edit/" + row.id);
const id = row.id || this.ids
getArticle(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改系统文章";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateArticle(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addArticle(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const ids = row.id || this.ids; const ids = row.id || this.ids;
this.$confirm('是否确认删除系统文章编号为"' + ids + '"的数据项?', "警告", { this.$confirm('是否确认删除系统文章编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning"
}).then(function() { }).then(function () {
return delArticle(ids); return delArticle(ids);
}).then(() => { }).then(() => {
this.getList(); this.getList();
this.msgSuccess("删除成功"); this.msgSuccess("删除成功");
}) })
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
const queryParams = this.queryParams; const queryParams = this.queryParams;
this.$confirm('是否确认导出所有系统文章数据项?', "警告", { this.$confirm('是否确认导出所有系统文章数据项?', "警告", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning"
}).then(function() { }).then(function () {
return exportArticle(queryParams); return exportArticle(queryParams);
}).then(response => { }).then(response => {
this.download(response.msg); this.download(response.msg);
}) })
} }
} }
}; };

View File

@@ -0,0 +1,326 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="站点类型" prop="sitetype">
<el-select v-model="queryParams.sitetype" placeholder="请选择站点类型 1 sist 2: lab" clearable size="small">
<el-option
v-for="dict in sitetypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="导航名称" prop="title">
<el-input
v-model="queryParams.title"
placeholder="请输入导航名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="delflag">
<el-select v-model="queryParams.delflag" placeholder="请选择站点状态" clearable size="small">
<el-option
v-for="dict in delflagOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['sist:navigation:add']"
>新增
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="navigationList"
row-key="id"
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column label="导航名称" align="center" prop="title"/>
<el-table-column label="英语名称" align="center" prop="englishTitle"/>
<el-table-column label="站点类型" align="center" prop="sitetype" :formatter="sitetypeFormat"/>
<el-table-column label="导航链接" align="center" prop="link"/>
<el-table-column label="状态" align="center" prop="delflag" :formatter="delflagFormat"/>
<el-table-column label="排序" align="center" prop="sort"/>
<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)"
v-hasPermi="['sist:navigation:edit']"
>修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['sist:navigation:remove']"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加或修改导航对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="父ID" prop="pid">
<treeselect v-model="form.pid" :options="navigationOptions" :normalizer="normalizer" placeholder="请选择父ID"/>
</el-form-item>
<el-form-item label="站点类型" prop="sitetype">
<el-select v-model="form.sitetype" placeholder="请选择站点类型">
<el-option
v-for="dict in sitetypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="导航名称" prop="title">
<el-input v-model="form.title" placeholder="请输入导航名称"/>
</el-form-item>
<el-form-item label="英语名称" prop="englishTitle">
<el-input v-model="form.englishTitle" placeholder="英语名称"/>
</el-form-item>
<el-form-item label="导航链接" prop="link">
<el-input v-model="form.link" placeholder="请输入导航链接"/>
</el-form-item>
<el-form-item label="状态" prop="delflag">
<el-radio-group v-model="form.delflag">
<el-radio-button v-for="(item, index) in delflagOptions" :key="index"
:label="item.dictValue">{{ item.dictLabel }}
</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input v-model="form.sort" type="number" value="0" placeholder="请输入排序"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listNavigation,
getNavigation,
delNavigation,
addNavigation,
updateNavigation,
exportNavigation
} from "@/api/sist/navigation";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "Navigation",
components: {
Treeselect
},
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 导航表格数据
navigationList: [],
// 导航树选项
navigationOptions: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 站点类型 1 sist 2: lab字典
sitetypeOptions: [],
// 1: 正常 0软删除字典
delflagOptions: [],
// 查询参数
queryParams: {
sitetype: null,
title: null,
englishTitle: null,
delflag: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
pid: [
{required: true, message: "父ID不能为空", trigger: "blur"}
],
sitetype: [
{required: true, message: "站点类型 ", trigger: "change"}
],
title: [
{required: true, message: "导航名称不能为空", trigger: "blur"}
],
englishTitle: [
{required: true, message: "英语名称不能为空", trigger: "blur"}
],
link: [
{required: true, message: "导航链接不能为空", trigger: "blur"}
],
}
};
},
created() {
this.getList();
this.getDicts("site_type").then(response => {
this.sitetypeOptions = response.data;
});
this.getDicts("delflag").then(response => {
this.delflagOptions = response.data;
});
},
methods: {
/** 查询导航列表 */
getList() {
this.loading = true;
listNavigation(this.queryParams).then(response => {
this.navigationList = this.handleTree(response.data, "id", "pid");
console.log(this.navigationList)
this.loading = false;
});
},
/** 转换导航数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.title,
children: node.children
};
},
/** 查询部门下拉树结构 */
getTreeselect() {
listNavigation(this.queryParams).then(response => {
this.navigationOptions = [];
const data = {id: 0, title: '顶级节点', children: []};
data.children = this.handleTree(response.data, "id", "pid");
this.navigationOptions.push(data);
});
},
// 站点类型 1 sist 2: lab字典翻译
sitetypeFormat(row, column) {
return this.selectDictLabel(this.sitetypeOptions, row.sitetype);
},
// 1: 正常 0软删除字典翻译
delflagFormat(row, column) {
return this.selectDictLabel(this.delflagOptions, row.delflag);
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
pid: null,
sitetype: null,
title: null,
link: null,
delflag: null,
sort: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.getTreeselect();
this.open = true;
this.title = "添加导航";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.getTreeselect();
if (row != null) {
this.form.pid = row.id;
}
getNavigation(row.id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改导航";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateNavigation(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addNavigation(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
this.$confirm('是否确认删除导航编号为"' + row.id + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return delNavigation(row.id);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
}
}
};
</script>