Commit b2c7c247 authored by lixy's avatar lixy

通用设置

parent 9adbe1a9
import fetch from 'utils/fetch';
export function page(query) {
return fetch({
url: '/api/app/admin/config/page',
method: 'get',
params: query
});
}
/**
* 编辑通用设置
* @param query
*/
export function editGeneral(param) {
return fetch({
url: '/api/app/admin/config/' + param.id,
method: 'put',
data: param
});
}
/**
* 创建通用设置
*/
export function addGeneral(param) {
return fetch({
url: '/api/app/admin/config',
method: 'post',
data: param
});
}
/**
* 删除通用设置
*/
export function delGeneral(id) {
return fetch({
url: '/api/app/admin/config/' + id,
method: 'delete'
});
}
...@@ -242,9 +242,37 @@ export const asyncRouterMap = [{ ...@@ -242,9 +242,37 @@ export const asyncRouterMap = [{
component: _import('vehicle/vehicleUpkeepItem/index'), component: _import('vehicle/vehicleUpkeepItem/index'),
name: '车辆保养项目管理', name: '车辆保养项目管理',
authority: 'vehicleUpkeepItem' authority: 'vehicleUpkeepItem'
},
{
path: 'generalSetting',
component: _import('baseInfo/generalSetting'),
name: '通用设置',
authority: 'generalSetting'
} }
] ]
}, { },
{
path: '/vehicleType',
component: Layout,
name: '车型管理',
icon: 'setting',
authority: 'vehicleType',
children: [
{
path: 'vehicleTypeList',
component: _import('vehicleType/index'),
name: '车型列表',
authority: 'vehicleTypeList'
},
{
path: 'vehicleTypeLabel',
component: _import('vehicleType/vehicleTypeLabel'),
name: '车型标签设置',
authority: 'vehicleTypeLabel'
}
]
},
{
path: '/vehicle', path: '/vehicle',
component: Layout, component: Layout,
name: '车辆管理', name: '车辆管理',
...@@ -282,5 +310,32 @@ export const asyncRouterMap = [{ ...@@ -282,5 +310,32 @@ export const asyncRouterMap = [{
authority: 'vehicleUpkeepLog' authority: 'vehicleUpkeepLog'
} }
] ]
},
{
path: '/tourManage',
component: Layout,
name: '旅行管理',
icon: 'setting',
authority: 'tourManage',
children: [
{
path: 'tourList',
component: _import('tourManage/index'),
name: '旅行列表',
authority: 'tourList'
},
{
path: 'tourLabel',
component: _import('tourManage/tourLabel'),
name: '旅行标签设置',
authority: 'tourLabel'
},
{
path: 'bannerSetting',
component: _import('tourManage/bannerSetting'),
name: 'banner设置',
authority: 'bannerSetting'
}
]
} }
]; ];
<template>
<div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
<div class="filter-container" ref="filter-container">
<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate"
type="primary" icon="edit">添加
</el-button>
</div>
<el-table :key='tableKey' :data="list" border fit highlight-current-row
style="width: 600px">
<el-table-column
type="index"
align="center" label="序号" width="98">
</el-table-column>
<el-table-column width="200" align="center" label="标题">
<template scope="scope">
<span>{{scope.row.title}}</span>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="标识">
<template scope="scope">
<span>{{scope.row.type}}</span>
</template>
</el-table-column>
<el-table-column align="center" width="200" label="操作">
<template scope="scope">
<el-button size="small" type="success" @click="handleUpdate(scope.row)">编辑
</el-button>
<el-popover
ref="popover5"
placement="top"
width="160"
v-model="scope.row.visible2">
<p>确定删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="scope.row.visible2 = false">取消</el-button>
<el-button type="primary" size="mini" @click="deleteHandler(scope.row)">确定</el-button>
</div>
</el-popover>
<el-button type="danger" size="small" v-popover:popover5>删除</el-button>
<!--<el-button size="small" type="danger" @click="deleteHandler(scope.row)">删除-->
<!--</el-button>-->
</template>
</el-table-column>
</el-table>
<div v-show="!listLoading" class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</div>
<!-- banner modal弹窗 -->
<el-dialog :title="modalTitle" :visible.sync="dialogVisible">
<el-form :model="dialogFrom" :rules="rules" ref="dialogFrom" label-width="90px">
<el-form-item label="标题" prop="title">
<el-input v-model="dialogFrom.title" placeholder="请输入标题"></el-input>
</el-form-item>
<el-form-item label="标识" prop="type">
<el-input type="number" v-model.number="dialogFrom.type" placeholder="1,2,3……"></el-input>
</el-form-item>
<el-form-item label="详情">
<Editor @input="handelIncrease" :value="dialogFrom.value"></Editor>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelHandel">取 消</el-button>
<el-button v-if="modalTitle=='创建'" type="primary" @click="create('dialogFrom')">确 定</el-button>
<el-button v-else type="primary" @click="update('dialogFrom')">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<style>
.el-table__header{
width: 100% !important;
}
</style>
<script>
import 'static/css/uploadImg.css';// 引入图片上传组件对话框
import Editor from "../modal/editorTool";//富文本
import {
formatDate
} from 'utils/dateFormattor';
import {
toEast8Date,
deepCopyDate,
newEast8Date,
convertDate2Str
} from 'utils/dateUtils';
import {
page,
addGeneral,
editGeneral,
delGeneral
} from 'api/base_info/general';
import rsCode from '../../utils/rsCode';
import {mapGetters} from 'vuex';
import {
getToken
} from '../../utils/auth';
import Element1 from "../admin/menu/components/element";
import ElRow from "element-ui/packages/row/src/row";
import ElCol from "element-ui/packages/col/src/col";
export default {
name: 'tourManage',
components: {
ElCol,
ElRow,
Element1,
Editor
},
data() {
return {
listQuery: {
page: 1,
limit: 20
},
tableKey:0,
modalTitle: "创建",
BASE_API: process.env.BASE_API,
dialogVisible: false,//添加、编辑弹框
showLoadingBody: false,
dialogFrom:{
title: "",
type: undefined,
value:""
},
rules: {
title: {
type: 'string',
required: true,
message: '请输入标题',
trigger: 'blur'
},
type: {
required: true,
message: '请输入数字标识',
},
},
list: null,
total: null,
listLoading: true,
inline: true,
}
},
created() {
this.getList();
},
computed: {
...mapGetters([
'elements',
'belong2Type'
])
},
methods: {
/**
* 添加
* */
handleCreate() {
this.cleanDialogFrom();
this.modalTitle = '创建';
this.dialogVisible = true;
},
/**
* 操作-删除
* */
deleteHandler(row) {
delGeneral(row.id).then(response => {
if (response.status === 200) {
this.$notify({
title: '成功',
message: '删除成功',
type: 'success',
duration: 2000
});
this.getList();
} else {
this.$notify({
title: '删除失败',
message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败!',
type: 'error',
duration: 2000
});
}
});
},
/**
* 操作-编辑
* */
handleUpdate(row) {
this.modalTitle = '编辑';
this.dialogVisible = true;
this.cleanDialogFrom();
this.dialogFrom = row;
},
/**
* 弹框-取消
* */
cancelHandel(){
this.cleanDialogFrom();
this.dialogVisible = false;
},
/**
* 新建、编辑清空表单
* */
cleanDialogFrom(){
this.dialogFrom = {
title: "",
type: undefined,
value:""
}
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getList();
},
/**
* 获取通用设置列表数据
* */
getList() {
this.listLoading = true;
page(this.listQuery).then(response => {
let totalCountRs = undefined;
let listRs = undefined;
if (!this.$utils.isEmpty(response.data.rows) && this.$utils.isInteger(response.data.total)) {
response.data.rows.map(function(item){
item.visible2 = false;
});
listRs = response.data.rows;
totalCountRs = response.data.total;
}
this.listLoading = false;
this.list = listRs;
this.total = totalCountRs;
});
},
/**
* 创建
* */
create(formName) {
this.$refs.dialogFrom.validate(valid => {
if (valid) {
let params = {
title: this.dialogFrom.title,
type: this.dialogFrom.type,
value: this.dialogFrom.value
};
addGeneral(params).then(response => {
if (response.status === 200) {
this.cleanDialogFrom();
this.dialogVisible = false;
this.$notify({
title: '成功',
message: '添加成功',
type: 'success',
duration: 2000
});
this.getList();
} else {
this.$notify({
title: '添加失败',
message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败!',
type: 'error',
duration: 2000
});
}
});
} else {
return false;
}
});
},
/**
* 编辑-更新
* */
update(formName) {
this.$refs.dialogFrom.validate(valid => {
if (valid) {
let params = {
id: this.dialogFrom.id,
title: this.dialogFrom.title,
type: this.dialogFrom.type,
value: this.dialogFrom.value
};
editGeneral(params).then(response => {
if (response.code === rsCode.RS_CODE_SUC) {
this.cleanDialogFrom();
this.dialogVisible = false;
this.$notify({
title: '成功',
message: '编辑成功',
type: 'success',
duration: 2000
});
this.getList();
} else {
this.$notify({
title: '编辑失败',
message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败!',
type: 'error',
duration: 2000
});
}
});
} else {
return false;
}
});
},
/**
* 富文本内容
* @param step
*/
handelIncrease(step) {
this.dialogFrom.value = step;
}
}
}
</script>
<template>
<div>
<!-- 图片上传组件辅助-->
<el-upload
class="avatar-uploader"
:action="serverUrl"
name="img"
:headers="header"
:show-file-list="false"
:on-success="uploadSuccess"
:on-error="uploadError"
:before-upload="beforeUpload">
</el-upload>
<quill-editor
class="editor"
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</div>
</template>
<script>
// 工具栏配置
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ header: 1 }, { header: 2 }], // 1、2 级标题
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ script: "sub" }, { script: "super" }], // 上标/下标
[{ indent: "-1" }, { indent: "+1" }], // 缩进
// [{'direction': 'rtl'}], // 文本方向
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ font: [] }], // 字体种类
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
//["link", "image","video"] // 链接、图片、视频
// ["link", "image"] // 链接、图片
];
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
props: {
/*编辑器的内容*/
value: {
type: String
},
/*图片大小*/
maxSize: {
type: Number,
default: 4000 //kb
}
},
components: {
quillEditor
},
data() {
return {
content: this.value,
quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画,刚开始是false,不显示
editorOption: {
placeholder: "",
theme: "snow", // or 'bubble'
placeholder: "您想说点什么?",
modules: {
toolbar: {
container: toolbarOptions,
// container: "#toolbar",
handlers: {
image: function(value) {
if (value) {
// 触发input框选择图片文件
document.querySelector(".avatar-uploader input").click();
} else {
this.quill.format("image", false);
}
},
// link: function(value) {
// if (value) {
// var href = prompt('请输入url');
// this.quill.format("link", href);
// } else {
// this.quill.format("link", false);
// }
// },
}
}
}
},
serverUrl: this.baseServerUrl+"/fileUpload/uploadPic?filepath=artwork", // 这里写你要上传的图片服务器地址
header: {
// token: sessionStorage.token
} // 有的图片服务器要求请求头需要有token
};
},
watch: {
value(value) {
this.content = value;
}
},
methods: {
onEditorBlur() {
//失去焦点事件
},
onEditorFocus() {
//获得焦点事件
},
onEditorChange() {
//内容改变事件
this.$emit("input", this.content);
},
// 富文本图片上传前
beforeUpload() {
// 显示loading动画
this.quillUpdateImg = true;
},
uploadSuccess(res, file) {
console.log(res);
console.log(file)
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill;
// 如果上传成功
if (res.code == 1) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.url为服务器返回的图片地址
quill.insertEmbed(length, "image", res.url);
// 调整光标到最后
quill.setSelection(length + 1);
} else {
this.$message.error("图片插入失败");
}
// loading动画消失
this.quillUpdateImg = false;
},
// 富文本图片上传失败
uploadError() {
// loading动画消失
this.quillUpdateImg = false;
this.$message.error("图片插入失败");
}
}
};
</script>
<style>
.editor {
line-height: normal !important;
width: 100%;
}
.ql-container {
height: 400px !important;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: '保存';
padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=video]::before {
content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
content: '32px';
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: '标题6';
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
content: '等宽字体';
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment