Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

图片上传

Browse Source
This commit is contained in:
huangdeliang
2021-02-01 11:38:02 +08:00
parent a034d70636
commit c0a4778088
2 changed files with 332 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
stdiet-framework/src/main/java/com/stdiet/framework/config/SecurityConfig.java
View File

@ -103,8 +103,7 @@ public class SecurityConfig extends WebSecurityConfigurerAdapter {
"/custom/wxUserLog/wx/**", "/custom/wxUserLog/wx/**",
"/wx/**", "/wx/**",
"/investigate/**", "/investigate/**",
"/common/customerUploadFile", "/common/customerUploadFile"
"/custom/WxAccount/upload"
).anonymous() ).anonymous()
.antMatchers( .antMatchers(
HttpMethod.GET, HttpMethod.GET,

200
stdiet-ui/src/views/custom/WxAccount/index.vue
View File

@ -1,6 +1,12 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> <el-form
:model="queryParams"
ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="账号名称" prop="nickName"> <el-form-item label="账号名称" prop="nickName">
<el-input <el-input
v-model="queryParams.nickName" v-model="queryParams.nickName"
@ -11,7 +17,12 @@
/> />
</el-form-item> </el-form-item>
<el-form-item label="账号id" prop="accountId"> <el-form-item label="账号id" prop="accountId">
<el-select v-model="queryParams.accountId" placeholder="请选择账号id" clearable size="small"> <el-select
v-model="queryParams.accountId"
placeholder="请选择账号id"
clearable
size="small"
>
<el-option <el-option
v-for="dict in accountIdOptions" v-for="dict in accountIdOptions"
:key="dict.dictValue" :key="dict.dictValue"
@ -30,8 +41,16 @@
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> type="cyan"
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-item>
</el-form> </el-form>
@ -78,21 +97,37 @@
>导出 >导出
</el-button> </el-button>
</el-col> </el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row> </el-row>
<el-table v-loading="loading" :data="WxAccountList" @selection-change="handleSelectionChange"> <el-table
<el-table-column type="selection" width="55" align="center"/> v-loading="loading"
<el-table-column label="手机号" align="center" prop="id"/> :data="WxAccountList"
<el-table-column label="账号名称" align="center" prop="nickName"/> @selection-change="handleSelectionChange"
<el-table-column label="账号id" align="center" prop="accountId" :formatter="accountIdFormat"/> >
<el-table-column label="微信号" align="center" prop="wxId"/> <el-table-column type="selection" width="55" align="center" />
<el-table-column label="手机号" align="center" prop="phone"/> <el-table-column label="手机号" align="center" prop="id" />
<el-table-column label="手机号" align="center" prop="remark"/> <el-table-column label="账号名称" align="center" prop="nickName" />
<el-table-column label="二维码图片" align="center" prop="imgUrl"/> <el-table-column
<el-table-column label="使用次数" align="center" prop="count"/> label="账号id"
<el-table-column label="微信资源id" align="center" prop="mediaId"/> align="center"
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> prop="accountId"
:formatter="accountIdFormat"
/>
<el-table-column label="微信号" align="center" prop="wxId" />
<el-table-column label="手机号" align="center" prop="phone" />
<el-table-column label="手机号" align="center" prop="remark" />
<el-table-column label="二维码图片" align="center" prop="imgUrl" />
<el-table-column label="使用次数" align="center" prop="count" />
<el-table-column label="微信资源id" align="center" prop="mediaId" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
size="mini" size="mini"
@ -115,7 +150,7 @@
</el-table> </el-table>
<pagination <pagination
v-show="total>0" v-show="total > 0"
:total="total" :total="total"
:page.sync="queryParams.pageNum" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.pageSize"
@ -123,10 +158,16 @@
/> />
<!-- 添加或修改微信销售账号对话框 --> <!-- 添加或修改微信销售账号对话框 -->
<el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="500px" append-to-body> <el-dialog
:title="title"
:visible.sync="open"
:close-on-click-modal="false"
width="500px"
append-to-body
>
<el-form ref="form" :model="form" :rules="rules" label-width="90px"> <el-form ref="form" :model="form" :rules="rules" label-width="90px">
<el-form-item label="账号昵称" prop="nickName"> <el-form-item label="账号昵称" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入账号名称"/> <el-input v-model="form.nickName" placeholder="请输入账号名称" />
</el-form-item> </el-form-item>
<el-form-item label="账号id" prop="accountId"> <el-form-item label="账号id" prop="accountId">
<el-select v-model="form.accountId" placeholder="请选择账号id"> <el-select v-model="form.accountId" placeholder="请选择账号id">
@ -139,35 +180,45 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="微信号" prop="wxId"> <el-form-item label="微信号" prop="wxId">
<el-input v-model="form.wxId" placeholder="请输入微信号"/> <el-input v-model="form.wxId" placeholder="请输入微信号" />
</el-form-item> </el-form-item>
<el-form-item label="手机号" prop="phone"> <el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号"/> <el-input v-model="form.phone" placeholder="请输入手机号" />
</el-form-item> </el-form-item>
<el-form-item label="二维码图片" prop="imgUrl"> <el-form-item label="二维码图片" prop="imgUrl">
<el-upload <el-upload
class="upload-demo" :class="`upload-demo ${
upload.fileList.length ? 'has-file' : ''
}`"
ref="upload" ref="upload"
drag drag
:action="upload.url" :action="upload.url"
:limit="upload.limit" :limit="upload.limit"
:headers="upload.headers"
:disabled="upload.isUploading" :disabled="upload.isUploading"
:file-list="upload.fileList" :file-list="upload.fileList"
:multiple="upload.multiple" :multiple="upload.multiple"
:on-change="handleFileChange" :on-change="handleFileChange"
:on-remove="handleFileRemove"
:on-exceed="handleFileexceed" :on-exceed="handleFileexceed"
:on-progress="handleFileUploadProgress" :on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess" :on-success="handleFileSuccess"
:on-error="handleFileFail" :on-error="handleFileFail"
:data="upload.data" :data="upload.data"
:auto-upload="true"> :auto-upload="true"
<i class="el-icon-upload"></i> list-type="picture"
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> >
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> <i class="el-icon-upload" />
<div class="el-upload__text">
将文件拖到此处，或<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
只能上传jpg/png文件，且不超过500kb
</div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注"/> <el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -179,16 +230,18 @@
</template> </template>
<script> <script>
import { import {
addWxAccount, addWxAccount,
delWxAccount, delWxAccount,
exportWxAccount, exportWxAccount,
getWxAccount, getWxAccount,
listWxAccount, listWxAccount,
updateWxAccount updateWxAccount,
} from "@/api/custom/WxAccount"; } from "@/api/custom/WxAccount";
export default { import { getToken } from "@/utils/auth";
export default {
name: "WxAccount", name: "WxAccount",
data() { data() {
return { return {
@ -227,7 +280,7 @@
url: process.env.VUE_APP_BASE_API + "/custom/WxAccount/upload", url: process.env.VUE_APP_BASE_API + "/custom/WxAccount/upload",
// 设置上传的请求头部 // 设置上传的请求头部
headers: { headers: {
Authorization: "Bearer " + getToken(),
}, },
// 其他需要携带的数据 // 其他需要携带的数据
data: {}, data: {},
@ -238,17 +291,17 @@
//每个文件大小 //每个文件大小
fileSize: 1024 * 500, fileSize: 1024 * 500,
//是否支持同时选择多张 //是否支持同时选择多张
multiple: false multiple: false,
}, },
// 表单参数 // 表单参数
form: {}, form: {},
// 表单校验 // 表单校验
rules: {} rules: {},
}; };
}, },
created() { created() {
this.getList(); this.getList();
this.getDicts("cus_account").then(response => { this.getDicts("cus_account").then((response) => {
this.accountIdOptions = response.data; this.accountIdOptions = response.data;
}); });
}, },
@ -256,7 +309,7 @@
/** 查询微信销售账号列表 */ /** 查询微信销售账号列表 */
getList() { getList() {
this.loading = true; this.loading = true;
listWxAccount(this.queryParams).then(response => { listWxAccount(this.queryParams).then((response) => {
this.WxAccountList = response.rows; this.WxAccountList = response.rows;
this.total = response.total; this.total = response.total;
this.loading = false; this.loading = false;
@ -282,7 +335,7 @@
remark: null, remark: null,
imgUrl: null, imgUrl: null,
count: null, count: null,
mediaId: null mediaId: null,
}; };
this.resetForm("form"); this.resetForm("form");
}, },
@ -298,9 +351,9 @@
}, },
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.ids = selection.map(item => item.id) this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1 this.single = selection.length !== 1;
this.multiple = !selection.length this.multiple = !selection.length;
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
@ -311,8 +364,8 @@
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
const id = row.id || this.ids const id = row.id || this.ids;
getWxAccount(id).then(response => { getWxAccount(id).then((response) => {
this.form = response.data; this.form = response.data;
this.open = true; this.open = true;
this.title = "修改微信销售账号"; this.title = "修改微信销售账号";
@ -320,10 +373,10 @@
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
this.$refs["form"].validate(valid => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
if (this.form.id != null) { if (this.form.id != null) {
updateWxAccount(this.form).then(response => { updateWxAccount(this.form).then((response) => {
if (response.code === 200) { if (response.code === 200) {
this.msgSuccess("修改成功"); this.msgSuccess("修改成功");
this.open = false; this.open = false;
@ -331,7 +384,7 @@
} }
}); });
} else { } else {
addWxAccount(this.form).then(response => { addWxAccount(this.form).then((response) => {
if (response.code === 200) { if (response.code === 200) {
this.msgSuccess("新增成功"); this.msgSuccess("新增成功");
this.open = false; this.open = false;
@ -345,31 +398,39 @@
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const ids = row.id || this.ids; const ids = row.id || this.ids;
this.$confirm('是否确认删除微信销售账号编号为"' + ids + '"的数据项?', "警告", { this.$confirm(
'是否确认删除微信销售账号编号为"' + ids + '"的数据项?',
"警告",
{
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning",
}).then(function () { }
)
.then(function () {
return delWxAccount(ids); return delWxAccount(ids);
}).then(() => { })
.then(() => {
this.getList(); this.getList();
this.msgSuccess("删除成功"); this.msgSuccess("删除成功");
}).catch(function () { })
}); .catch(function () {});
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
const queryParams = this.queryParams; const queryParams = this.queryParams;
this.$confirm('是否确认导出所有微信销售账号数据项?', "警告", { this.$confirm("是否确认导出所有微信销售账号数据项?", "警告", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning",
}).then(function () { })
.then(function () {
return exportWxAccount(queryParams); return exportWxAccount(queryParams);
}).then(response => { })
.then((response) => {
this.download(response.msg); this.download(response.msg);
}).catch(function () { })
}); .catch(function () {});
}, },
//监控上传文件列表 //监控上传文件列表
handleFileChange(file, fileList) { handleFileChange(file, fileList) {
@ -382,7 +443,9 @@
fileList.pop(); fileList.pop();
} }
this.upload.fileList = fileList; this.upload.fileList = fileList;
},
handleFileRemove(file, fileList) {
this.upload.fileList = fileList;
}, },
// 文件数量超过限度 // 文件数量超过限度
handleFileexceed(file, fileList) { handleFileexceed(file, fileList) {
@ -400,7 +463,7 @@
handleFileSuccess(response, file, fileList) { handleFileSuccess(response, file, fileList) {
if (response != null && response.code === 200) { if (response != null && response.code === 200) {
this.form.imgUrl = response.fileName; this.form.imgUrl = response.fileName;
console.log(response) console.log(response);
} else { } else {
this.fail(); this.fail();
this.$message.error(response.msg); this.$message.error(response.msg);
@ -409,7 +472,7 @@
// 文件上传失败处理 // 文件上传失败处理
handleFileFail(err, file, fileList) { handleFileFail(err, file, fileList) {
if (err) { if (err) {
this.$message.error('文件上传失败，请检查文件格式'); this.$message.error("文件上传失败，请检查文件格式");
this.fail(); this.fail();
} }
}, },
@ -417,6 +480,17 @@
this.submitFlag = false; this.submitFlag = false;
this.upload.isUploading = false; this.upload.isUploading = false;
}, },
} },
}; };
</script> </script>
<style>
.has-file .el-upload--picture {
display: none;
}
.has-file .el-upload__tip {
display: none;
}
</style>