init resource code

pull/269/head
volleyball26 2021-05-05 12:46:39 +08:00
parent 710768a4ec
commit 9374a899fb
8 changed files with 227 additions and 249 deletions

View File

@ -2,7 +2,7 @@ import request from '../utils/request';
export const gettagsData = query => { export const gettagsData = query => {
return request({ return request({
url: 'http://120.53.100.137:8000/tags', url: 'http://127.0.0.1:8000/tags',
method: 'get', method: 'get',
params: query params: query
}); });
@ -11,7 +11,7 @@ export const gettagsData = query => {
export const uptagsData = query => { export const uptagsData = query => {
return request({ return request({
url: 'http://120.53.100.137:8000/tags', url: 'http://127.0.0.1:8000/tags',
method: 'put', method: 'put',
params: query params: query
}); });
@ -19,7 +19,7 @@ export const uptagsData = query => {
export const addTagrData = query => { export const addTagrData = query => {
return request({ return request({
url: 'http://120.53.100.137:8000/tags', url: 'http://127.0.0.1:8000/tags',
method: 'post', method: 'post',
params: query params: query
}); });
@ -28,7 +28,7 @@ export const addTagrData = query => {
export const deletetagsData = query => { export const deletetagsData = query => {
return request({ return request({
url: 'http://120.53.100.137:8000/tags', url: 'http://127.0.0.1:8000/tags',
method: 'delete', method: 'delete',
params: query params: query
}); });

View File

@ -2,7 +2,7 @@ import request from '../utils/request';
export const fetchData = query => { export const fetchData = query => {
return request({ return request({
url: 'http://120.53.100.137:8000/userlist', url: 'http://127.0.0.1:8000/userlist',
method: 'get', method: 'get',
params: query params: query
}); });
@ -10,7 +10,7 @@ export const fetchData = query => {
export const upUserData = query => { export const upUserData = query => {
return request({ return request({
url: 'http://120.53.100.137:8000/userlist', url: 'http://127.0.0.1:8000/userlist',
method: 'put', method: 'put',
params: query params: query
}); });
@ -18,7 +18,7 @@ export const upUserData = query => {
export const deleteuserData = query => { export const deleteuserData = query => {
return request({ return request({
url: 'http://120.53.100.137:8000/userlist', url: 'http://127.0.0.1:8000/userlist',
method: 'delete', method: 'delete',
params: query params: query
}); });
@ -26,7 +26,7 @@ export const deleteuserData = query => {
export const departmentData = query => { export const departmentData = query => {
return request({ return request({
url: 'http://120.53.100.137:8000/department', url: 'http://127.0.0.1:8000/department',
method: 'delete', method: 'delete',
params: query params: query
}); });

View File

@ -39,7 +39,7 @@
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank"> <a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
<el-dropdown-item>项目仓库</el-dropdown-item> <el-dropdown-item>修改资料</el-dropdown-item>
</a> </a>
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item> <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>

View File

@ -1,56 +0,0 @@
<template>
<div class="error-page">
<div class="error-code">4<span>0</span>3</div>
<div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
<div class="error-handle">
<router-link to="/">
<el-button type="primary" size="large">返回首页</el-button>
</router-link>
<el-button class="error-btn" type="primary" size="large" @click="goBack"></el-button>
</div>
</div>
</template>
<script>
export default {
methods: {
goBack(){
this.$router.go(-1);
}
}
}
</script>
<style scoped>
.error-page{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
background: #f3f3f3;
box-sizing: border-box;
}
.error-code{
line-height: 1;
font-size: 250px;
font-weight: bolder;
color: #f02d2d;
}
.error-code span{
color: #00a854;
}
.error-desc{
font-size: 30px;
color: #777;
}
.error-handle{
margin-top: 30px;
padding-bottom: 200px;
}
.error-btn{
margin-left: 100px;
}
</style>

View File

@ -1,56 +0,0 @@
<template>
<div class="error-page">
<div class="error-code">4<span>0</span>4</div>
<div class="error-desc">啊哦~ 你所访问的页面不存在</div>
<div class="error-handle">
<router-link to="/">
<el-button type="primary" size="large">返回首页</el-button>
</router-link>
<el-button class="error-btn" type="primary" size="large" @click="goBack"></el-button>
</div>
</div>
</template>
<script>
export default {
methods: {
goBack(){
this.$router.go(-1);
}
}
}
</script>
<style scoped>
.error-page{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
background: #f3f3f3;
box-sizing: border-box;
}
.error-code{
line-height: 1;
font-size: 250px;
font-weight: bolder;
color: #2d8cf0;
}
.error-code span{
color: #00a854;
}
.error-desc{
font-size: 30px;
color: #777;
}
.error-handle{
margin-top: 30px;
padding-bottom: 200px;
}
.error-btn{
margin-left: 100px;
}
</style>

View File

@ -57,6 +57,7 @@ export default {
}) })
this.$refs.login.validate(valid => { this.$refs.login.validate(valid => {
console.log(data) console.log(data)
this.$router.push('/');
if (valid) { if (valid) {
this.$message.success('登录成功'); this.$message.success('登录成功');
localStorage.setItem('ms_username', this.param.username); localStorage.setItem('ms_username', this.param.username);
@ -64,9 +65,12 @@ export default {
} else { } else {
this.$message.error('请输入账号和密码'); this.$message.error('请输入账号和密码');
console.log('error submit!!'); console.log('error submit!!');
return false; this.$router.push('/');
// return false;
} }
this.$router.push('/');
}); });
}, },
}, },
}; };

View File

@ -2,140 +2,235 @@
<div> <div>
<div class="crumbs"> <div class="crumbs">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item> <el-breadcrumb-item>
<el-breadcrumb-item>图片上传</el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 用户列表
</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="container"> <div class="container">
<div class="content-title">支持拖拽</div> <div class="handle-box">
<div class="plugins-tips"> <el-select v-model="query.department" placeholder="部门" class="handle-select mr10">
Element UI自带上传组件 <el-option key="0" label="全部" value=""></el-option>
访问地址<a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a> <el-option key="1" label="网络工程" value="网络工程"></el-option>
<el-option key="2" label="物联网" value="物联网"></el-option>
<el-option key="3" label="计算机科学与技术" value="计算机科学与技术"></el-option>
<el-option key="4" label="空间信息" value="空间信息"></el-option>
<el-option key="5" label="软件工程" value="软件工程"></el-option>
</el-select>
<el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
<el-button type="primary" icon="el-icon-search" @click="handleSearch"></el-button>
</div> </div>
<el-upload <el-table
class="upload-demo" :data="tableData"
drag border
action="http://jsonplaceholder.typicode.com/api/posts/" class="table"
multiple> ref="multipleTable"
<i class="el-icon-upload"></i> header-cell-class-name="table-header"
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div> @selection-change="handleSelectionChange"
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件且不超过500kb</div> >
</el-upload> <el-table-column type="selection" width="55" align="center"></el-table-column>
<div class="content-title">支持裁剪</div> <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
<div class="plugins-tips"> <el-table-column prop="uuid" label="用户uuid"></el-table-column>
vue-cropperjs一个封装了 cropperjs Vue 组件 <el-table-column label="用户名">
访问地址<a href="https://github.com/Agontuk/vue-cropperjs" target="_blank">vue-cropperjs</a> <template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<el-table-column label="头像(查看大图)" align="center">
<template slot-scope="scope">
<el-image
class="table-td-thumb"
:src="scope.row.avatar"
:preview-src-list="[scope.row.avatar]"
></el-image>
</template>
</el-table-column>
<el-table-column prop="department" label="部门"></el-table-column>
<el-table-column prop="build_time" label="注册时间"></el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.$index, scope.row)"
>编辑</el-button>
<el-button
type="text"
icon="el-icon-delete"
class="red"
@click="handleDelete(scope.row.uuid)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
layout="total, prev, pager, next"
:current-page="query.pageIndex"
:page-size="query.pageSize"
:total="pageTotal"
@current-change="handlePageChange"
></el-pagination>
</div> </div>
<div class="crop-demo">
<img :src="cropImg" class="pre-img">
<div class="crop-demo-btn">选择图片
<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage"/>
</div>
</div>
<el-dialog title="裁剪图片" :visible.sync="dialogVisible" width="30%">
<vue-cropper ref='cropper' :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage" style="width:100%;height:300px;"></vue-cropper>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelCrop"> </el-button>
<el-button type="primary" @click="dialogVisible = false"> </el-button>
</span>
</el-dialog>
</div> </div>
<!-- 编辑弹出框 -->
<el-dialog title="编辑" :visible.sync="editVisible" width="30%">
<el-form ref="form" :model="form" label-width="70px">
<el-form-item label="用户名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="部门">
<el-input v-model="form.department"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editVisible = false"> </el-button>
<el-button type="primary" @click="saveEdit(form.uuid, form.name, form.department)"> </el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import VueCropper from 'vue-cropperjs'; import { departmentData, deleteuserData, fetchData, upUserData } from '../../api/userlist';
export default {
name: 'upload', export default {
data: function(){ name: 'basetable',
return { data() {
defaultSrc: require('../../assets/img/img.jpg'), return {
fileList: [], query: {
imgSrc: '', department: '',
cropImg: '', name: '',
dialogVisible: false, pageIndex: 1,
pageSize: 10
},
tableData: [],
multipleSelection: [],
delList: [],
editVisible: false,
pageTotal: 0,
form: {},
idx: -1,
id: -1
};
},
created() {
this.getData();
},
methods: {
//
getData() {
fetchData(this.query).then(res => {
console.log(res);
this.tableData = res.msg.user_list;
this.pageTotal = res.msg.pageTotal;
});
},
//
handleSearch() {
this.$set(this.query, 'pageIndex', 1);
this.getData();
},
getdepatment() {
departmentData(this.query).then(res => {
console.log(res);
this.departmentlist = res.msg;
});
},
//
handleDelete(uuid) {
//
this.uuid = uuid;
let data ={
uuid : this.uuid,
} }
this.$confirm('确定要删除吗?', '提示', {
type: 'warning'
})
.then(() => {
deleteuserData(data).then((res)=>{
console.log(res)
})
this.$message.success('删除成功');
this.getData();
})
.catch(() => {});
}, },
components: { //
VueCropper handleSelectionChange(val) {
this.multipleSelection = val;
}, },
methods:{ delAllSelection() {
setImage(e){ const length = this.multipleSelection.length;
const file = e.target.files[0]; let str = '';
if (!file.type.includes('image/')) { this.delList = this.delList.concat(this.multipleSelection);
return; for (let i = 0; i < length; i++) {
} str += this.multipleSelection[i].name + ' ';
const reader = new FileReader(); }
reader.onload = (event) => { this.$message.error(`删除了${str}`);
this.dialogVisible = true; this.multipleSelection = [];
this.imgSrc = event.target.result; },
this.$refs.cropper && this.$refs.cropper.replace(event.target.result); //
}; handleEdit(index, row) {
reader.readAsDataURL(file); this.idx = index,
}, this.form = row,
cropImage () { this.editVisible = true;
this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
}, },
cancelCrop(){ //
this.dialogVisible = false; saveEdit(uuid, name, department) {
this.cropImg = this.defaultSrc; this.editVisible = false;
}, this.$message.success(`修改成功`);
imageuploaded(res) { this.uuid = uuid;
this.department = department;
this.name = name;
let data = {
department : this.department,
name : this.name,
uuid : this.uuid,
}
upUserData(data).then((res)=>{
console.log(res) console.log(res)
}, })
handleError(){
this.$notify.error({
title: '上传失败',
message: '图片上传接口上传失败,可更改为自己的服务器接口'
});
}
}, },
created(){ //
this.cropImg = this.defaultSrc; handlePageChange(val) {
this.$set(this.query, 'pageIndex', val);
this.getData();
} }
} }
};
</script> </script>
<style scoped> <style scoped>
.content-title{ .handle-box {
font-weight: 400; margin-bottom: 20px;
line-height: 50px; }
margin: 10px 0;
font-size: 22px; .handle-select {
color: #1f2f3d; width: 120px;
} }
.pre-img{
width: 100px; .handle-input {
height: 100px; width: 300px;
background: #f8f8f8; display: inline-block;
border: 1px solid #eee; }
border-radius: 5px; .table {
} width: 100%;
.crop-demo{ font-size: 14px;
display: flex; }
align-items: flex-end; .red {
} color: #ff0000;
.crop-demo-btn{ }
position: relative; .mr10 {
width: 100px; margin-right: 10px;
height: 40px; }
line-height: 40px; .table-td-thumb {
padding: 0 20px; display: block;
margin-left: 30px; margin: auto;
background-color: #409eff; width: 40px;
color: #fff; height: 40px;
font-size: 14px; }
border-radius: 4px; </style>
box-sizing: border-box;
}
.crop-input{
position: absolute;
width: 100px;
height: 40px;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
</style>

View File

@ -87,16 +87,7 @@ export default new Router({
component: () => import(/* webpackChunkName: "permission" */ '../components/page/Permission.vue'), component: () => import(/* webpackChunkName: "permission" */ '../components/page/Permission.vue'),
meta: { title: '权限测试', permission: true } meta: { title: '权限测试', permission: true }
}, },
{
path: '/404',
component: () => import(/* webpackChunkName: "404" */ '../components/page/404.vue'),
meta: { title: '404' }
},
{
path: '/403',
component: () => import(/* webpackChunkName: "403" */ '../components/page/403.vue'),
meta: { title: '403' }
},
] ]
}, },
{ {