wyh
/
gan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

邮箱服务

main
王宇航 2024-05-29 09:53:42 +08:00
parent 421e8fab9d
commit 4f6fdff2fb
13 changed files with 689 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
gan-common/ruoyi-common-core/pom.xml
View File

@ -113,6 +113,19 @@
<artifactId>swagger-annotations</artifactId>
</dependency>
<!-- JavaMail API -->
<dependency>
<groupId>javax.mail</groupId>
<artifactId>javax.mail-api</artifactId>
<version>1.6.2</version>
</dependency>
<!-- JavaMail implementation (e.g., for SMTP) -->
<dependency>
<groupId>com.sun.mail</groupId>
<artifactId>javax.mail</artifactId>
<version>1.6.2</version>
</dependency>
</dependencies>
</project>

2
gan-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/utils/mail/AliMailUtil.java
View File

@ -25,7 +25,7 @@ public class AliMailUtil {
private static final String SEND_ADDRESS = "mail@gbgobig.com";
private static final String SEND_PASSWORD = "ganbeigobig@2024";
private static final String HOST = "smtp.qiye.aliyun.com";
private static final String HOST = "smtp.mxhichina.com";
private static final String PORT = "25"; // 或80
private static final String SUBJECT = "Email verification code";
private static final String FILE_PATH = null;

15
gan-modules/ruoyi-file/pom.xml
View File

@ -65,6 +65,21 @@
<groupId>com.ruoyi</groupId>
<artifactId>ruoyi-common-swagger</artifactId>
</dependency>
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.10.2</version>
</dependency>
<dependency>
<groupId>com.github.xiaoymin</groupId>
<artifactId>knife4j-spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>4.1.1</version>
</dependency>
</dependencies>

8
gan-modules/ruoyi-file/src/main/java/com/ruoyi/file/controller/SysFileController.java
View File

@ -1,5 +1,6 @@
package com.ruoyi.file.controller;
import com.ruoyi.file.service.OssService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
@ -24,6 +25,9 @@ public class SysFileController
@Autowired
private ISysFileService sysFileService;
@Autowired
private OssService ossService;
/**
* 文件上传请求
*/
@ -33,7 +37,9 @@ public class SysFileController
try
{
// 上传并返回访问地址
String url = sysFileService.uploadFile(file);
// String url = sysFileService.uploadFile(file);
R r = ossService.uploadFile(file);
String url = r.getData().toString();
SysFile sysFile = new SysFile();
sysFile.setName(FileUtils.getName(url));
sysFile.setUrl(url);

13
gan-modules/ruoyi-file/src/main/java/com/ruoyi/file/service/OssService.java Normal file
View File

@ -0,0 +1,13 @@
package com.ruoyi.file.service;
import com.ruoyi.common.core.domain.R;
import org.springframework.web.multipart.MultipartFile;
public interface OssService {
R uploadFile(MultipartFile file);
R uploadFileList(MultipartFile[] files);
R deleteFile(String path);
}

86
gan-modules/ruoyi-file/src/main/java/com/ruoyi/file/service/OssServiceImpl.java Normal file
View File

@ -0,0 +1,86 @@
package com.ruoyi.file.service;
import cn.hutool.core.date.DateTime;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.ruoyi.common.core.domain.R;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
@Service("ossService")
public class OssServiceImpl implements OssService {
private static final String schema= "https://";
private static final String endpoint= "oss-cn-shanghai.aliyuncs.com";
private static final String accessKeyId= "LTAI5tM1LeE2pkiS3qEFQkfb";
private static final String accessKeySecret= "fEZZyFvWkETS8Clm73f7qmY9ohcTpc";
private static final String bucketName= "gan-app-test";
@Override
public R uploadFile(MultipartFile file) {
try {
//4、 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(schema + endpoint, accessKeyId, accessKeySecret);
String fileName = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));//获取上传文件的名称
InputStream inputStream = file.getInputStream();
// 通过ossClient上传文件： 参数1：桶名， 参数2：上传后的文件路径+文件名 ,参数3：要上传的文件流
String objectName = new DateTime().toString("yyyy/MM/dd/") +
UUID.randomUUID().toString().replace("-", "").substring(0, 16) + fileName;//使用UUID+源文件名称后缀拼接生成objectName
ossClient.putObject(bucketName, objectName, inputStream);
// 关闭OSSClient。
ossClient.shutdown();
String path = schema + bucketName + "." + endpoint + "/" + objectName;//手动拼接上传成功的图片地址
// System.out.println("path ======================================" + path);
return R.ok(path);
} catch (IOException e) {
throw new RuntimeException("图片上传失败");
}
}
@Override
public R uploadFileList(MultipartFile[] files) {
List<String> list = new ArrayList<>();
try {
//4、 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(schema + endpoint, accessKeyId, accessKeySecret);
for (MultipartFile file : files) {
String fileName = file.getOriginalFilename();//获取上传文件的名称
InputStream inputStream = file.getInputStream();
// 通过ossClient上传文件： 参数1：桶名， 参数2：上传后的文件路径+文件名 ,参数3：要上传的文件流
String objectName = new DateTime().toString("yyyy/MM/dd/") +
UUID.randomUUID().toString().replace("-", "").substring(0, 8) +
"_" + fileName;//使用UUID+源文件名称后缀拼接生成objectName
ossClient.putObject(bucketName, objectName, inputStream);
// 关闭OSSClient。
ossClient.shutdown();
String path = schema + bucketName + "." + endpoint + "/" + objectName;//手动拼接上传成功的图片地址
list.add(path);
}
} catch (IOException e) {
throw new RuntimeException("图片上传失败");
}
return R.ok(list);
}
@Override
public R deleteFile(String path) {
String host = schema + bucketName + "." + endpoint +"/";
String objectName = path.replace(host,"");
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
ossClient.deleteObject(bucketName, objectName.trim());
ossClient.shutdown();
return R.ok("删除成功");
}
}

2
gan-modules/ruoyi-gan/src/main/java/com/ruoyi/app/domain/AppInform.java
View File

@ -1,5 +1,6 @@
package com.ruoyi.app.domain;
import lombok.Data;
import org.apache.commons.lang3.builder.ToStringBuilder;
import org.apache.commons.lang3.builder.ToStringStyle;
import com.ruoyi.common.core.annotation.Excel;
@ -11,6 +12,7 @@ import com.ruoyi.common.core.web.domain.BaseEntity;
* @author wyh
* @date 2024-05-15
*/
@Data
public class AppInform extends BaseEntity
{
private static final long serialVersionUID = 1L;

136
gan-ui/src/views/app/dynamic/detail.vue
View File

@ -1,23 +1,87 @@
<template>
<el-descriptions title="动态详情">
<el-descriptions-item label="姓名">kooriookami</el-descriptions-item>
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
<el-descriptions-item label="备注">
<el-tag size="small">学校</el-tag>
</el-descriptions-item>
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>
<div class="page">
<el-card >
<div slot="header" class="clearfix">
<span> {{ "用户编号：" + form.id }} </span>
</div>
<el-form>
<el-row :gutter="20">
<el-col :span="24">
<el-image
style="width: 100px; height: 100px"
:src="form.avatarUrl"
:fit="fit"
></el-image>
</el-col>
<el-col :span="6">
<el-form-item label="姓名">{{ form.username }}</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="省份">{{ form.provinceName }}</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="内容">{{ form.content }}</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="城市名">{{ form.cityName }}</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="创建时间">{{ form.createTime }}</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="镇名">{{ form.townName }}</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="居住地">{{ form.cityName }}</el-form-item>
</el-col>
</el-row>
</el-form>
<el-divider content-position="left"><h4>评论列表</h4></el-divider>
<el-row :gutter="20">
<el-col
:span="6"
v-for="item in form.appDynamicComments"
:key="item.id"
>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span> {{ "评论编号：" + item.id }} </span>
</div>
<div class="card_content">
<el-image
style="width: 100px; height: 100px"
:src="item.avatarUrl"
:fit="fit"
></el-image>
<div>
<div class="card_item">
{{ "用户账号：" + item.userId }}
</div>
<div class="card_item">
{{ "姓名：" + item.username }}
</div>
<div class="card_item">
{{ "内容：" + item.content }}
</div>
<div class="card_item">
{{ "创建时间：" + item.createTime }}
</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
import { listDynamic, getDynamic, treeDynamic } from "@/api/app/dynamic";
export default {
data() {
return {
id: '',
id: "",
// 遮罩层
loading: true,
// 选中数组
@ -36,21 +100,18 @@ export default {
title: "",
// 是否显示弹出层
open: false,
form: {},
};
},
created() {
this.id = this.$route.query.id;
this.getList();
this.getDynamic(this.id);
},
mounted: function () {
this.id = this.$route().params.id;
},
methods: {
getList() {
this.loading = true;
listDynamic(this.queryParams).then(response => {
listDynamic(this.queryParams).then((response) => {
this.registerList = response.rows;
this.total = response.total;
this.loading = false;
@ -60,24 +121,35 @@ export default {
const id = row.id || row.ids;
this.queryParams.dynamicId = id;
treeDynamic(this.queryParams).then(response => {
treeDynamic(this.queryParams).then((response) => {
this.form = response.data;
this.open = true;
this.title = "App用户动态详情";
// Access the data here
console.log(this.form); // Or use the data in any way you need
});
},
getDynamic(id) {
getDynamic(id).then(response => {
console.log(response.data);
})
}
}
}
}
}
getDynamic(id).then((response) => {
this.form = response.data;
});
},
},
};
</script>
<style scoped>
.page {
padding: 20px;
}
.card_content {
display: flex;
}
.box-card{
background-color: #c7c7c7;
}
.card_item {
font-size: 12px;
margin: 5px;
}
</style>

129
gan-ui/src/views/app/dynamic/index.vue
View File

@ -1,6 +1,13 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="用户" prop="userId">
<el-select
v-model="queryParams.userId"
@ -21,8 +28,16 @@
</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-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>
@ -35,7 +50,8 @@
size="mini"
@click="handleAdd"
v-hasPermi="['app:dynamic:add']"
>新增</el-button>
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
@ -46,7 +62,8 @@
:disabled="single"
@click="handleUpdate"
v-hasPermi="['app:dynamic:edit']"
>修改</el-button>
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
@ -57,7 +74,8 @@
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['app:dynamic:remove']"
>删除</el-button>
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
@ -67,12 +85,20 @@
size="mini"
@click="handleExport"
v-hasPermi="['app:dynamic:export']"
>导出</el-button>
>导出</el-button
>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="dynamicList" @selection-change="handleSelectionChange">
<el-table
v-loading="loading"
:data="dynamicList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="用户名" align="center" prop="username" />
<el-table-column label="关联话题" align="center">
@ -94,28 +120,36 @@
></el-switch>
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
<el-table-column
label="操作"
align="center"
fixed="right"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
>详情</el-button>
>详情</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['app:dynamic:edit']"
>修改</el-button>
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['app:dynamic:remove']"
>删除</el-button>
>删除</el-button
>
</template>
</el-table-column>
</el-table>
@ -141,7 +175,10 @@
<el-input v-model="form.videoUrl" placeholder="请输入视频地址" />
</el-form-item>
<el-form-item label="关联话题id，多个话题逗号隔开" prop="topicId">
<el-input v-model="form.topicId" placeholder="请输入关联话题id，多个话题逗号隔开" />
<el-input
v-model="form.topicId"
placeholder="请输入关联话题id，多个话题逗号隔开"
/>
</el-form-item>
<el-form-item label="地区" prop="address">
<el-input v-model="form.address" placeholder="请输入地区" />
@ -162,7 +199,13 @@
</template>
<script>
import { listDynamic, getDynamic, delDynamic, addDynamic, updateDynamic } from "@/api/app/dynamic";
import {
listDynamic,
getDynamic,
delDynamic,
addDynamic,
updateDynamic,
} from "@/api/app/dynamic";
export default {
name: "Dynamic",
@ -197,13 +240,12 @@ export default {
address: null,
privacyStatus: null,
updateBy: null,
isTop: null
isTop: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
rules: {},
};
},
created() {
@ -213,7 +255,7 @@ export default {
/** 查询App用户动态列表 */
getList() {
this.loading = true;
listDynamic(this.queryParams).then(response => {
listDynamic(this.queryParams).then((response) => {
this.dynamicList = response.rows;
this.total = response.total;
this.loading = false;
@ -239,7 +281,7 @@ export default {
updateTime: null,
createBy: null,
updateBy: null,
isTop: null
isTop: null,
};
this.resetForm("form");
},
@ -255,14 +297,19 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 详情按钮操作 跳转到新页面*/
handleDetail(row) {
const id = row.id || 0;
this.$router.push({path: '/app/content/dynamic_detail?id='+ id})
this.$router.push({
path: "/app/content/dynamic_detail",
query: {
id,
},
});
},
/** 新增按钮操作 */
handleAdd() {
@ -273,8 +320,8 @@ export default {
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getDynamic(id).then(response => {
const id = row.id || this.ids;
getDynamic(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改App用户动态";
@ -282,16 +329,16 @@ export default {
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != null) {
updateDynamic(this.form).then(response => {
updateDynamic(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addDynamic(this.form).then(response => {
addDynamic(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
@ -303,19 +350,27 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除App用户动态编号为"' + ids + '"的数据项？').then(function() {
this.$modal
.confirm('是否确认删除App用户动态编号为"' + ids + '"的数据项？')
.then(function () {
return delDynamic(ids);
}).then(() => {
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('app/dynamic/export', {
...this.queryParams
}, `dynamic_${new Date().getTime()}.xlsx`)
}
}
this.download(
"app/dynamic/export",
{
...this.queryParams,
},
`dynamic_${new Date().getTime()}.xlsx`
);
},
},
};
</script>

112
gan-ui/src/views/app/inform/index.vue
View File

@ -1,9 +1,33 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="内容" prop="phone">
<el-input
v-model="queryParams.content"
placeholder="请输入内容"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="举报人" prop="phone">
<el-input
v-model="queryParams.username"
placeholder="请输入举报人"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="被举报人" prop="phone">
<el-input
v-model="queryParams.byUsername"
placeholder="请输入被举报人"
clearable
@keyup.enter.native="handleQuery"
/>
</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-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>
@ -29,35 +53,71 @@
<!-- v-hasPermi="['app:inform:edit']"-->
<!-- >修改</el-button>-->
<!-- </el-col>-->
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['app:inform:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['app:inform:export']"
>导出</el-button>
</el-col>
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="danger"-->
<!-- plain-->
<!-- icon="el-icon-delete"-->
<!-- size="mini"-->
<!-- :disabled="multiple"-->
<!-- @click="handleDelete"-->
<!-- v-hasPermi="['app:inform:remove']"-->
<!-- >删除</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="el-icon-download"-->
<!-- size="mini"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['app:inform:export']"-->
<!-- >导出</el-button>-->
<!-- </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="informList" @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="id" align="center" prop="id" />-->
<el-table-column label="举报时间" align="center" prop="createTime" />
<el-table-column label="举报内容" align="center" prop="content" />
<el-table-column label="举报内容" height="100px" align="center" prop="content" />
<el-table-column label="举报人" align="center" prop="username"/>
<el-table-column
prop="avatarUrl"
header-align="center"
align="center"
label="举报人头像"
>
<template slot-scope="scope" class="demo-image__preview">
<img
:src="scope.row.avatarUrl"
width="40"
height="40"
class="head_pic"
/>
</template>
</el-table-column>
<el-table-column label="被举报人" align="center" prop="byUsername" />
<el-table-column
prop="byAvatarUrl"
header-align="center"
align="center"
label="被举报人头像"
>
<template slot-scope="scope" class="demo-image__preview">
<img
:src="scope.row.byAvatarUrl"
width="40"
height="40"
class="head_pic"
/>
</template>
</el-table-column>
<!-- <el-table-column label="备注" align="center" prop="remark" />-->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
@ -135,6 +195,8 @@ export default {
pageNum: 1,
pageSize: 10,
content: null,
username: null,
byUsername: null,
},
// 表单参数
form: {},

10
gan-ui/src/views/app/school/index.vue
View File

@ -17,6 +17,7 @@
@keyup.enter.native="handleQuery"
style="width: 200px"
/></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>
@ -31,7 +32,6 @@
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['app:school:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
@ -112,6 +112,11 @@
<el-form-item label="邮箱域名" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱域名" />
</el-form-item>
<el-form-item label="学校头像" prop="schoolImg">
<div class="text-center">
<schoolAvatar />
</div>
</el-form-item>
<!-- <el-form-item label="学校头像">-->
<!-- <el-upload-->
<!-- class="avatar-uploader"-->
@ -164,9 +169,12 @@
<script>
import { listSchool, getSchool, delSchool, addSchool, updateSchool , uploadAvatar } from "@/api/app/school";
import {getToken} from "@/utils/auth";
import userAvatar from "@/views/system/user/profile/userAvatar.vue";
import SchoolAvatar from "@/views/app/school/schoolAvatar.vue";
export default {
name: "School",
components: {SchoolAvatar, userAvatar},
data() {
return {
// 遮罩层

185
gan-ui/src/views/app/school/schoolAvatar.vue Normal file
View File

@ -0,0 +1,185 @@
<template>
<div>
<div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
<el-row>
<el-col :xs="24" :md="12" :style="{height: '350px'}">
<vue-cropper
ref="cropper"
:img="options.img"
:info="true"
:autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:fixedBox="options.fixedBox"
:outputType="options.outputType"
@realTime="realTime"
v-if="visible"
/>
</el-col>
<el-col :xs="24" :md="12" :style="{height: '350px'}">
<div class="avatar-upload-preview">
<img :src="previews.url" :style="previews.img" />
</div>
</el-col>
</el-row>
<br />
<el-row>
<el-col :lg="2" :sm="3" :xs="3">
<el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
<el-button size="small">
选择
<i class="el-icon-upload el-icon--right"></i>
</el-button>
</el-upload>
</el-col>
<el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
<el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
</el-col>
<el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
<el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
import store from "@/store";
import { VueCropper } from "vue-cropper";
import { uploadAvatar } from "@/api/system/user";
import{ getSchool } from "@/api/app/school";
import { debounce } from '@/utils'
export default {
components: { VueCropper },
data() {
return {
// 是否显示弹出层
open: false,
// 是否显示cropper
visible: false,
// 弹出层标题
title: "修改头像",
options: {
img: store.getters.avatar, //裁剪图片的地址
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 200, // 默认生成截图框宽度
autoCropHeight: 200, // 默认生成截图框高度
fixedBox: true, // 固定截图框大小 不允许改变
outputType:"png", // 默认生成截图为PNG格式
filename: 'schoolImg' // 文件名称
},
previews: {},
resizeHandler: null
};
},
methods: {
// 编辑头像
editCropper() {
this.open = true;
},
// 打开弹出层结束时的回调
modalOpened() {
this.visible = true;
if (!this.resizeHandler) {
this.resizeHandler = debounce(() => {
this.refresh()
}, 100)
}
window.addEventListener("resize", this.resizeHandler)
},
// 刷新组件
refresh() {
this.$refs.cropper.refresh();
},
// 覆盖默认的上传行为
requestUpload() {
},
// 向左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft();
},
// 向右旋转
rotateRight() {
this.$refs.cropper.rotateRight();
},
// 图片缩放
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
// 上传预处理
beforeUpload(file) {
if (file.type.indexOf("image/") == -1) {
this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
} else {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.options.img = reader.result;
this.options.filename = file.name;
};
}
},
// 上传图片
uploadImg() {
this.$refs.cropper.getCropBlob(data => {
let formData = new FormData();
formData.append("avatarfile", data, this.options.filename);
uploadAvatar(formData).then(response => {
this.open = false;
this.options.img = response.imgUrl;
store.commit('SET_AVATAR', this.options.img);
this.$modal.msgSuccess("修改成功");
this.visible = false;
});
});
},
// 实时预览
realTime(data) {
this.previews = data;
},
// 关闭窗口
closeDialog() {
this.options.img = getSchool().schoolImg;
this.visible = false;
window.removeEventListener("resize", this.resizeHandler)
}
}
};
</script>
<style scoped lang="scss">
.user-info-head {
position: relative;
display: inline-block;
height: 120px;
}
.user-info-head:hover:after {
content: '+';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
color: #eee;
background: rgba(0, 0, 0, 0.5);
font-size: 24px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
cursor: pointer;
line-height: 110px;
border-radius: 50%;
}
</style>

84
gan-ui/src/views/app/user/index.vue
View File

@ -40,48 +40,48 @@
</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="['app:user:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['app:user:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['app:user:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['app:user:export']"
>导出</el-button>
</el-col>
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="el-icon-plus"-->
<!-- size="mini"-->
<!-- @click="handleAdd"-->
<!-- v-hasPermi="['app:user:add']"-->
<!-- >新增</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="success"-->
<!-- plain-->
<!-- icon="el-icon-edit"-->
<!-- size="mini"-->
<!-- :disabled="single"-->
<!-- @click="handleUpdate"-->
<!-- v-hasPermi="['app:user:edit']"-->
<!-- >修改</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="danger"-->
<!-- plain-->
<!-- icon="el-icon-delete"-->
<!-- size="mini"-->
<!-- :disabled="multiple"-->
<!-- @click="handleDelete"-->
<!-- v-hasPermi="['app:user:remove']"-->
<!-- >删除</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="el-icon-download"-->
<!-- size="mini"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['app:user:export']"-->
<!-- >导出</el-button>-->
<!-- </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>