wangbing
5 years ago
parent
fc445a8f33
commit
93a4d99f25
@ -1,135 +0,0 @@
|
|||||||
import axios from 'axios'
|
|
||||||
// 创建axios实例
|
|
||||||
const service = axios.create({
|
|
||||||
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
|
|
||||||
withCredentials: true, // send cookies when cross-domain requests
|
|
||||||
method: 'post', // request method
|
|
||||||
timeout: 5000 // request timeout
|
|
||||||
})
|
|
||||||
|
|
||||||
// 添加请求拦截器
|
|
||||||
service.interceptors.request.use(config => {
|
|
||||||
// 在发送请求之前做些什么
|
|
||||||
if (config.url === '/upload') {
|
|
||||||
console.log()
|
|
||||||
} else {
|
|
||||||
console.log()
|
|
||||||
}
|
|
||||||
return config
|
|
||||||
}, error => {
|
|
||||||
// 对请求错误做些什么
|
|
||||||
return Promise.reject(error)
|
|
||||||
})
|
|
||||||
|
|
||||||
// 添加响应拦截器
|
|
||||||
service.interceptors.response.use(response => {
|
|
||||||
// 对响应数据做点什么
|
|
||||||
return response
|
|
||||||
}, error => {
|
|
||||||
// 对响应错误做点什么
|
|
||||||
const rsp = { errors: [] }
|
|
||||||
if (!error.response) {
|
|
||||||
rsp.errors.push({ message: error.message })
|
|
||||||
} else {
|
|
||||||
switch (error.response.status) {
|
|
||||||
case 401:
|
|
||||||
rsp.errors.push({ message: '未授权，请登录(401)' })
|
|
||||||
break
|
|
||||||
case 403:
|
|
||||||
rsp.errors.push({ message: '拒绝访问(403)' })
|
|
||||||
break
|
|
||||||
case 404:
|
|
||||||
rsp.errors.push({ message: '请求地址错误(404)' })
|
|
||||||
break
|
|
||||||
case 408:
|
|
||||||
rsp.errors.push({ message: '请求超时(408)' })
|
|
||||||
break
|
|
||||||
case 500:
|
|
||||||
rsp.errors.push({ message: '服务器内部错误(500)' })
|
|
||||||
break
|
|
||||||
case 501:
|
|
||||||
rsp.errors.push({ message: '服务未实现(501)' })
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
rsp.errors.push({ message: '请求错误(' + error.response.status + ')' })
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return Promise.reject(rsp)
|
|
||||||
})
|
|
||||||
export function jsonRequest(config) {
|
|
||||||
return service.request({
|
|
||||||
params: {
|
|
||||||
method: config.method
|
|
||||||
},
|
|
||||||
url: '/ajax',
|
|
||||||
headers: { 'Content-Type': 'text/plain' },
|
|
||||||
data: config.data
|
|
||||||
}).then(response => {
|
|
||||||
return Promise.resolve(response.data)
|
|
||||||
}, response => {
|
|
||||||
return Promise.resolve(response)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
export function fileRequest(config) {
|
|
||||||
return service.request({
|
|
||||||
url: '/upload',
|
|
||||||
data: config.data,
|
|
||||||
headers: { 'Content-Type': 'multipart/form-data' },
|
|
||||||
onUploadProgress: progressEvent => {
|
|
||||||
console.log((progressEvent.loaded / progressEvent.total * 100 | 0) + '%')
|
|
||||||
}
|
|
||||||
}).then(response => {
|
|
||||||
return Promise.resolve(response.data)
|
|
||||||
}, response => {
|
|
||||||
return Promise.resolve(response)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const ajax = {
|
|
||||||
example: data => {
|
|
||||||
return jsonRequest({
|
|
||||||
method: 'ajax.example.example',
|
|
||||||
data: data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
fileUpload: file => {
|
|
||||||
const fd = new FormData()
|
|
||||||
fd.append('file', file)
|
|
||||||
return fileRequest({
|
|
||||||
data: fd
|
|
||||||
})
|
|
||||||
},
|
|
||||||
mappingCreate: data => {
|
|
||||||
return jsonRequest({
|
|
||||||
method:'ajax.admin.mapping.create',
|
|
||||||
data: JSON.stringify(data),
|
|
||||||
})
|
|
||||||
},
|
|
||||||
mappingDelete: data => {
|
|
||||||
return jsonRequest({
|
|
||||||
method:'ajax.admin.mapping.delete',
|
|
||||||
data: JSON.stringify(data),
|
|
||||||
})
|
|
||||||
},
|
|
||||||
mappingUpdate: data => {
|
|
||||||
return jsonRequest({
|
|
||||||
method:'ajax.admin.mapping.update',
|
|
||||||
data: JSON.stringify(data),
|
|
||||||
})
|
|
||||||
},
|
|
||||||
mappingFind: data => {
|
|
||||||
return jsonRequest({
|
|
||||||
method:'ajax.admin.mapping.find',
|
|
||||||
data: JSON.stringify(data),
|
|
||||||
})
|
|
||||||
},
|
|
||||||
mappingGet: data => {
|
|
||||||
return jsonRequest({
|
|
||||||
method:'ajax.admin.mapping.get',
|
|
||||||
data: JSON.stringify(data),
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ajax
|
|
||||||
@ -0,0 +1,248 @@
|
|||||||
|
<div id="app" v-cloak>
|
||||||
|
<el-card class="box-card">
|
||||||
|
<el-form :inline="true" :model="vm" ref="vm" label-width="90px">
|
||||||
|
<el-form-item label="角色名称" prop="roleName">
|
||||||
|
<el-input v-model="vm.roleName" clearable size="small" placeholder=""></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="角色代码" prop="roleCode">
|
||||||
|
<el-input v-model="vm.roleCode" clearable size="small" placeholder=""></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" size="small" icon="el-icon-search" @click="onSearch">搜索</el-button>
|
||||||
|
<el-button type="warning" size="small" icon="el-icon-refresh-left" @click="onReset('vm')">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-card class="box-card">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-button type="success" size="small" icon="el-icon-plus" @click="onAction(['create',''])">新增
|
||||||
|
</el-button>
|
||||||
|
<el-button type="warning" size="small" icon="el-icon-download">导出</el-button>
|
||||||
|
|
||||||
|
<el-dialog :title="form.title" :visible.sync="form.dialog">
|
||||||
|
<el-form :model="form" :rules="formRules" ref="form" label-width="90px"
|
||||||
|
style="width: 290px;">
|
||||||
|
<el-form-item label="角色名称" prop="roleName">
|
||||||
|
<el-input v-model="form.roleName" clearable size="small" placeholder=""></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="角色代码" prop="roleCode">
|
||||||
|
<el-input v-model="form.roleCode" clearable size="small" placeholder=""></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button size="small" @click="form.dialog = false">取 消</el-button>
|
||||||
|
<el-button size="small" type="primary" @click="onAction(['save',''])">保存</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-button-group style="float: right;">
|
||||||
|
<el-button size="small" icon="el-icon-refresh" @click="onFind"></el-button>
|
||||||
|
</el-button-group>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
@selection-change="onSelectionChange"
|
||||||
|
empty-text="无数据"
|
||||||
|
:data="result"
|
||||||
|
size="small"
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
type="selection"
|
||||||
|
width="50">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
prop="id"
|
||||||
|
label="主键"
|
||||||
|
width="140">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
prop="roleName"
|
||||||
|
label="角色名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
prop="roleCode"
|
||||||
|
label="角色代码">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
prop="createTime"
|
||||||
|
label="创建时间">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-dropdown size="mini" split-button type="primary" @click="onAction(['roleRes',scope.row])"
|
||||||
|
@command="onAction">
|
||||||
|
<i class="el-icon-edit"></i>编辑资源
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item :command="['edit',scope.row]" icon="el-icon-edit">编辑</el-dropdown-item>
|
||||||
|
<el-dropdown-item :command="['delete',scope.row]" icon="el-icon-delete">删除</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-pagination
|
||||||
|
v-if="vm.totalCount > vm.pageSize"
|
||||||
|
@current-change="onPage"
|
||||||
|
:current-page="vm.pageNumber"
|
||||||
|
:page-size="vm.pageSize"
|
||||||
|
layout="total, prev, pager, next, jumper"
|
||||||
|
:total="vm.totalCount">
|
||||||
|
</el-pagination>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
#app {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-card {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
var app = new Vue({
|
||||||
|
el: "#app",
|
||||||
|
data: {
|
||||||
|
vm: {
|
||||||
|
roleName: '',
|
||||||
|
roleCode: '',
|
||||||
|
pageNumber: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
totalCount: 0
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
title: "",
|
||||||
|
dialog: false,
|
||||||
|
id: '',
|
||||||
|
roleName: '',
|
||||||
|
roleCode: '',
|
||||||
|
rowVersion: ''
|
||||||
|
},
|
||||||
|
formRules: {
|
||||||
|
roleName: [
|
||||||
|
{required: true, message: '不能为空', trigger: 'blur'},
|
||||||
|
{min: 1, max: 50, message: '长度在 1 到 50 字符', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
roleCode: [
|
||||||
|
{required: true, message: '不能为空', trigger: 'blur'},
|
||||||
|
{min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
select: [],
|
||||||
|
result: [],
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSearch: function () {
|
||||||
|
this.vm.pageNumber = 1;
|
||||||
|
this.onFind();
|
||||||
|
},
|
||||||
|
onReset: function (form) {
|
||||||
|
this.$refs[form].resetFields();
|
||||||
|
nav.w('重置成功');
|
||||||
|
},
|
||||||
|
onFind: function () {
|
||||||
|
ajax.mappingFind(this.vm).then(function (response) {
|
||||||
|
if (response.errors.length > 0) {
|
||||||
|
nav.e(response.errors[0].message);
|
||||||
|
} else {
|
||||||
|
this.result = response.result;
|
||||||
|
this.totalCount = Number(response.totalCount);
|
||||||
|
}
|
||||||
|
}.bind(this))
|
||||||
|
},
|
||||||
|
onPage: function (pageNumber) {
|
||||||
|
this.vm.pageNumber = pageNumber;
|
||||||
|
this.onFind();
|
||||||
|
},
|
||||||
|
onSelectionChange: function (select) {
|
||||||
|
this.select = select;
|
||||||
|
},
|
||||||
|
onAction: function (arg) {
|
||||||
|
const action = arg[0];
|
||||||
|
const item = arg[1];
|
||||||
|
switch (action) {
|
||||||
|
case "create":
|
||||||
|
this.form.title = '新增角色';
|
||||||
|
this.form.id = '';
|
||||||
|
this.form.roleName = '';
|
||||||
|
this.form.roleCode = '';
|
||||||
|
this.form.dialog = true;
|
||||||
|
break;
|
||||||
|
case "save":
|
||||||
|
if (this.form.id) {
|
||||||
|
ajax.roleUpdate(this.form).then(function (response) {
|
||||||
|
if (response.errors.length > 0) {
|
||||||
|
nav.e(response.errors[0].message);
|
||||||
|
} else {
|
||||||
|
this.onFind();
|
||||||
|
this.form.dialog = false;
|
||||||
|
}
|
||||||
|
}.bind(this))
|
||||||
|
} else {
|
||||||
|
ajax.roleCreate(this.form).then(function (response) {
|
||||||
|
if (response.errors.length > 0) {
|
||||||
|
nav.e(response.errors[0].message);
|
||||||
|
} else {
|
||||||
|
this.onFind();
|
||||||
|
this.form.dialog = false;
|
||||||
|
}
|
||||||
|
}.bind(this))
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "edit":
|
||||||
|
this.form.title = '编辑角色';
|
||||||
|
this.form.id = item.id;
|
||||||
|
this.form.roleName = item.roleName;
|
||||||
|
this.form.roleCode = item.roleCode;
|
||||||
|
this.form.rowVersion = item.rowVersion;
|
||||||
|
this.form.dialog = true;
|
||||||
|
break;
|
||||||
|
case "roleRes":
|
||||||
|
parent.index.addTab({
|
||||||
|
title: "编辑角色资源",
|
||||||
|
name: "roleRes" + item.id,
|
||||||
|
url: "${Uri.getUrl("/sys/role/roleRes.htm?roleId=")}" + item.id
|
||||||
|
});
|
||||||
|
break
|
||||||
|
case "delete":
|
||||||
|
this.$confirm('将删除该项, 是否继续?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(function () {
|
||||||
|
ajax.roleDelete({id: item.id}).then(function (response) {
|
||||||
|
if (response.errors.length > 0) {
|
||||||
|
nav.e(response.errors[0].message);
|
||||||
|
} else {
|
||||||
|
nav.s("删除成功")
|
||||||
|
this.onFind();
|
||||||
|
}
|
||||||
|
}.bind(this))
|
||||||
|
}.bind(this)).catch(function (action) {
|
||||||
|
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created: function () {
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.onFind();
|
||||||
|
},
|
||||||
|
watch: {}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue