odjbin/sist_adminui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文章编写和导航

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

54
ebts-ui/src/api/sist/navigation.js Normal file
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'
})
}

37
ebts-ui/src/router/index.js
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',
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',
component: Layout,

263
ebts-ui/src/views/sist/article/components/article.vue Normal file
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>

356
ebts-ui/src/views/sist/article/index.vue
View File

@@ -11,24 +11,44 @@
/>
</el-select>
</el-form-item>
<el-form-item label="1: 2: 3: 根据导航" prop="type">
<el-select v-model="queryParams.type" placeholder="请选择" clearable size="small">
<el-option label="请选择字典生成" value="" />
<el-form-item label="文章类型" prop="type">
<el-select v-model="queryParams.type" placeholder="请选择文章类型" clearable size="small">
<el-option
v-for="dict in typeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="是否置顶" prop="isTop">
<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-form-item>
<el-form-item label="是否显示" prop="isView">
<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-form-item>
<el-form-item label="状态" prop="status">
<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-form-item>
<el-form-item>
@@ -39,14 +59,15 @@
<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:article:add']"
>新增</el-button>
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
v-hasPermi="['sist:article:add']"
@click="handleAdd"
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@@ -57,7 +78,8 @@
:disabled="single"
@click="handleUpdate"
v-hasPermi="['sist:article:edit']"
>修改</el-button>
>修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@@ -68,7 +90,8 @@
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['sist:article:remove']"
>删除</el-button>
>删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@@ -78,51 +101,52 @@
size="mini"
@click="handleExport"
v-hasPermi="['sist:article:export']"
>导出</el-button>
>导出
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<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">
<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>
</el-table-column>
<el-table-column label="站点类型" align="center" prop="sitetype" :formatter="sitetypeFormat" />
<!-- <el-table-column label="站点类型" align="center" prop="sitetype" />-->
<el-table-column label="1: 2: 3: 根据导航" align="center" prop="type" />
<el-table-column label="文章标题" align="center" prop="title" />
<el-table-column label="发布时间" align="center" prop="publishTime" width="180">
<el-table-column label="文章标题" align="center" prop="title"/>
<el-table-column label="站点类型" align="center" prop="sitetype" :formatter="sitetypeFormat"/>
<el-table-column label="文章类型" align="center" prop="type" :formatter="typeFormat"/>
<el-table-column label="发布人姓名" align="center" prop="publishUserName"/>
<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">
<span>{{ parseTime(scope.row.publishTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
</template>
</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">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['sist:article:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
v-hasPermi="['sist:article:edit']"
@click="handleUpdate(scope.row)"
>修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['sist:article:remove']"
>删除</el-button>
>删除
</el-button>
</template>
</el-table-column>
</el-table>
@@ -134,80 +158,11 @@
:limit.sync="queryParams.pageInfo.pageSize"
@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>
</template>
<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';
export default {
@@ -237,14 +192,24 @@ export default {
open: false,
// 站点类型 1： sist 2: lab 3: 双边都发字典
sitetypeOptions: [],
// 1: 2: 3: 根据导航字典
typeOptions: [],
// 是否置顶字典
isTopOptions: [],
// 是否显示字典
isViewOptions: [],
// 是否英文字典
isEnglishOptions: [],
// 状态： 1：编辑中 2：待审核 ，3: 审核完成字典
statusOptions: [],
// 查询参数
queryParams: {
pageInfo:{
pageNum: 1,
pageSize: 10,
},
params:{},
pageInfo: {
pageNum: 1,
pageSize: 10,
},
params: {},
sitetype: null,
type: null,
title: null,
@@ -253,10 +218,35 @@ export default {
status: null
},
// 表单参数
form: {},
// 表单校验
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.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: {
/** 查询系统文章列表 */
getList() {
this.loading = true;
listArticle(this.queryParams).then(response => {
this.articleList = response.rows;
this.total = response.total;
this.loading = false;
this.loading = true;
listArticle(this.queryParams).then(response => {
this.articleList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 站点类型 1： sist 2: lab 3: 双边都发字典翻译
sitetypeFormat(row, column) {
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() {
this.open = false;
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() {
this.queryParams.pageNum = 1;
@@ -317,71 +323,43 @@ export default {
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加系统文章";
this.$router.push("/article/add");
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
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();
});
}
}
});
this.$router.push("/article/edit/" + row.id);
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$confirm('是否确认删除系统文章编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delArticle(ids);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return delArticle(ids);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有系统文章数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return exportArticle(queryParams);
}).then(response => {
this.download(response.msg);
})
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return exportArticle(queryParams);
}).then(response => {
this.download(response.msg);
})
}
}
};

326
ebts-ui/src/views/sist/navigation/index.vue Normal file
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>