图片上传

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

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,

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>
@ -43,7 +62,7 @@
size="mini" size="mini"
@click="handleAdd" @click="handleAdd"
v-hasPermi="['custom:WxAccount:add']" v-hasPermi="['custom:WxAccount:add']"
>新增 >新增
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
@ -54,7 +73,7 @@
:disabled="single" :disabled="single"
@click="handleUpdate" @click="handleUpdate"
v-hasPermi="['custom:WxAccount:edit']" v-hasPermi="['custom:WxAccount:edit']"
>修改 >修改
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
@ -65,7 +84,7 @@
:disabled="multiple" :disabled="multiple"
@click="handleDelete" @click="handleDelete"
v-hasPermi="['custom:WxAccount:remove']" v-hasPermi="['custom:WxAccount:remove']"
>删除 >删除
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
@ -75,24 +94,40 @@
size="mini" size="mini"
@click="handleExport" @click="handleExport"
v-hasPermi="['custom:WxAccount:export']" v-hasPermi="['custom:WxAccount:export']"
>导出 >导出
</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"
@ -100,7 +135,7 @@
icon="el-icon-edit" icon="el-icon-edit"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
v-hasPermi="['custom:WxAccount:edit']" v-hasPermi="['custom:WxAccount:edit']"
>修改 >修改
</el-button> </el-button>
<el-button <el-button
size="mini" size="mini"
@ -108,14 +143,14 @@
icon="el-icon-delete" icon="el-icon-delete"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
v-hasPermi="['custom:WxAccount:remove']" v-hasPermi="['custom:WxAccount:remove']"
>删除 >删除
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
</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,244 +230,267 @@
</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";
name: "WxAccount",
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
WxAccountList: [],
//
title: "",
//
open: false,
// id
accountIdOptions: [],
//
queryParams: {
pageNum: 1,
pageSize: 10,
nickName: null,
accountId: null,
phone: null,
},
upload: {
//
isUploading: false,
//
url: process.env.VUE_APP_BASE_API + "/custom/WxAccount/upload",
//
headers: {
}, export default {
// name: "WxAccount",
data: {}, data() {
// return {
fileList: [], //
// loading: true,
limit: 1, //
// ids: [],
fileSize: 1024 * 500, //
// single: true,
multiple: false //
multiple: true,
//
showSearch: true,
//
total: 0,
//
WxAccountList: [],
//
title: "",
//
open: false,
// id
accountIdOptions: [],
//
queryParams: {
pageNum: 1,
pageSize: 10,
nickName: null,
accountId: null,
phone: null,
},
upload: {
//
isUploading: false,
//
url: process.env.VUE_APP_BASE_API + "/custom/WxAccount/upload",
//
headers: {
Authorization: "Bearer " + getToken(),
}, },
// //
form: {}, data: {},
// //
rules: {} fileList: [],
}; //
}, limit: 1,
created() { //
this.getList(); fileSize: 1024 * 500,
this.getDicts("cus_account").then(response => { //
this.accountIdOptions = response.data; multiple: false,
},
//
form: {},
//
rules: {},
};
},
created() {
this.getList();
this.getDicts("cus_account").then((response) => {
this.accountIdOptions = response.data;
});
},
methods: {
/** 查询微信销售账号列表 */
getList() {
this.loading = true;
listWxAccount(this.queryParams).then((response) => {
this.WxAccountList = response.rows;
this.total = response.total;
this.loading = false;
}); });
}, },
methods: { // id
/** 查询微信销售账号列表 */ accountIdFormat(row, column) {
getList() { return this.selectDictLabel(this.accountIdOptions, row.accountId);
this.loading = true; },
listWxAccount(this.queryParams).then(response => { //
this.WxAccountList = response.rows; cancel() {
this.total = response.total; this.open = false;
this.loading = false; this.reset();
}); },
}, //
// id reset() {
accountIdFormat(row, column) { this.form = {
return this.selectDictLabel(this.accountIdOptions, row.accountId); id: null,
}, nickName: null,
// accountId: null,
cancel() { wxId: null,
this.open = false; phone: null,
this.reset(); remark: null,
}, imgUrl: null,
// count: null,
reset() { mediaId: null,
this.form = { };
id: null, this.resetForm("form");
nickName: null, },
accountId: null, /** 搜索按钮操作 */
wxId: null, handleQuery() {
phone: null, this.queryParams.pageNum = 1;
remark: null, this.getList();
imgUrl: null, },
count: null, /** 重置按钮操作 */
mediaId: null resetQuery() {
}; this.resetForm("queryForm");
this.resetForm("form"); this.handleQuery();
}, },
/** 搜索按钮操作 */ //
handleQuery() { handleSelectionChange(selection) {
this.queryParams.pageNum = 1; this.ids = selection.map((item) => item.id);
this.getList(); this.single = selection.length !== 1;
}, this.multiple = !selection.length;
/** 重置按钮操作 */ },
resetQuery() { /** 新增按钮操作 */
this.resetForm("queryForm"); handleAdd() {
this.handleQuery(); this.reset();
}, this.open = true;
// this.title = "添加微信销售账号";
handleSelectionChange(selection) { },
this.ids = selection.map(item => item.id) /** 修改按钮操作 */
this.single = selection.length !== 1 handleUpdate(row) {
this.multiple = !selection.length this.reset();
}, const id = row.id || this.ids;
/** 新增按钮操作 */ getWxAccount(id).then((response) => {
handleAdd() { this.form = response.data;
this.reset();
this.open = true; this.open = true;
this.title = "添加微信销售账号"; this.title = "修改微信销售账号";
}, });
/** 修改按钮操作 */ },
handleUpdate(row) { /** 提交按钮 */
this.reset(); submitForm() {
const id = row.id || this.ids this.$refs["form"].validate((valid) => {
getWxAccount(id).then(response => { if (valid) {
this.form = response.data; if (this.form.id != null) {
this.open = true; updateWxAccount(this.form).then((response) => {
this.title = "修改微信销售账号"; if (response.code === 200) {
}); this.msgSuccess("修改成功");
}, this.open = false;
/** 提交按钮 */ this.getList();
submitForm() { }
this.$refs["form"].validate(valid => { });
if (valid) { } else {
if (this.form.id != null) { addWxAccount(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; this.getList();
this.getList(); }
} });
});
} else {
addWxAccount(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
}
});
}
} }
}); }
}, });
/** 删除按钮操作 */ },
handleDelete(row) { /** 删除按钮操作 */
const ids = row.id || this.ids; handleDelete(row) {
this.$confirm('是否确认删除微信销售账号编号为"' + ids + '"的数据项?', "警告", { const ids = row.id || this.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) {
let sizeFlag = file.size > this.upload.fileSize; let sizeFlag = file.size > this.upload.fileSize;
if (sizeFlag) { if (sizeFlag) {
this.$message({
message: "当前文件过大",
type: "warning",
});
fileList.pop();
}
this.upload.fileList = fileList;
},
//
handleFileexceed(file, fileList) {
//console.log(this.upload.fileList.length);
this.$message({ this.$message({
message: "最多可上传" + this.upload.limit + "份文件", message: "当前文件过大",
type: "warning", type: "warning",
}); });
}, fileList.pop();
// }
handleFileUploadProgress(event, file, fileList) { this.upload.fileList = fileList;
this.upload.isUploading = true; },
}, handleFileRemove(file, fileList) {
// this.upload.fileList = fileList;
handleFileSuccess(response, file, fileList) { },
if (response != null && response.code === 200) { //
this.form.imgUrl = response.fileName; handleFileexceed(file, fileList) {
console.log(response) //console.log(this.upload.fileList.length);
} else { this.$message({
this.fail(); message: "最多可上传" + this.upload.limit + "份文件",
this.$message.error(response.msg); type: "warning",
} });
}, },
// //
handleFileFail(err, file, fileList) { handleFileUploadProgress(event, file, fileList) {
if (err) { this.upload.isUploading = true;
this.$message.error('文件上传失败,请检查文件格式'); },
this.fail(); //
} handleFileSuccess(response, file, fileList) {
}, if (response != null && response.code === 200) {
fail() { this.form.imgUrl = response.fileName;
this.submitFlag = false; console.log(response);
this.upload.isUploading = false; } else {
}, this.fail();
} this.$message.error(response.msg);
}; }
},
//
handleFileFail(err, file, fileList) {
if (err) {
this.$message.error("文件上传失败,请检查文件格式");
this.fail();
}
},
fail() {
this.submitFlag = false;
this.upload.isUploading = false;
},
},
};
</script> </script>
<style>
.has-file .el-upload--picture {
display: none;
}
.has-file .el-upload__tip {
display: none;
}
</style>