图片上传

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/**",
"/wx/**",
"/investigate/**",
"/common/customerUploadFile",
"/custom/WxAccount/upload"
"/common/customerUploadFile"
).anonymous()
.antMatchers(
HttpMethod.GET,

View File

@ -1,6 +1,12 @@
<template>
<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-input
v-model="queryParams.nickName"
@ -11,7 +17,12 @@
/>
</el-form-item>
<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
v-for="dict in accountIdOptions"
:key="dict.dictValue"
@ -30,8 +41,16 @@
/>
</el-form-item>
<el-form-item>
<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-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>
@ -43,7 +62,7 @@
size="mini"
@click="handleAdd"
v-hasPermi="['custom:WxAccount:add']"
>新增
>新增
</el-button>
</el-col>
<el-col :span="1.5">
@ -54,7 +73,7 @@
:disabled="single"
@click="handleUpdate"
v-hasPermi="['custom:WxAccount:edit']"
>修改
>修改
</el-button>
</el-col>
<el-col :span="1.5">
@ -65,7 +84,7 @@
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['custom:WxAccount:remove']"
>删除
>删除
</el-button>
</el-col>
<el-col :span="1.5">
@ -75,24 +94,40 @@
size="mini"
@click="handleExport"
v-hasPermi="['custom:WxAccount:export']"
>导出
>导出
</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="WxAccountList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="手机号" align="center" prop="id"/>
<el-table-column label="账号名称" align="center" prop="nickName"/>
<el-table-column label="账号id" align="center" 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">
<el-table
v-loading="loading"
:data="WxAccountList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="手机号" align="center" prop="id" />
<el-table-column label="账号名称" align="center" prop="nickName" />
<el-table-column
label="账号id"
align="center"
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">
<el-button
size="mini"
@ -100,7 +135,7 @@
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['custom:WxAccount:edit']"
>修改
>修改
</el-button>
<el-button
size="mini"
@ -108,14 +143,14 @@
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['custom:WxAccount:remove']"
>删除
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
: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-item label="账号昵称" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入账号名称"/>
<el-input v-model="form.nickName" placeholder="请输入账号名称" />
</el-form-item>
<el-form-item label="账号id" prop="accountId">
<el-select v-model="form.accountId" placeholder="请选择账号id">
@ -139,35 +180,45 @@
</el-select>
</el-form-item>
<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 label="手机号" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号"/>
<el-input v-model="form.phone" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="二维码图片" prop="imgUrl">
<el-upload
class="upload-demo"
:class="`upload-demo ${
upload.fileList.length ? 'has-file' : ''
}`"
ref="upload"
drag
:action="upload.url"
:limit="upload.limit"
:headers="upload.headers"
:disabled="upload.isUploading"
:file-list="upload.fileList"
:multiple="upload.multiple"
:on-change="handleFileChange"
:on-remove="handleFileRemove"
:on-exceed="handleFileexceed"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:on-error="handleFileFail"
:data="upload.data"
:auto-upload="true">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件且不超过500kb</div>
:auto-upload="true"
list-type="picture"
>
<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-form-item>
<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>
<div slot="footer" class="dialog-footer">
@ -179,244 +230,267 @@
</template>
<script>
import {
addWxAccount,
delWxAccount,
exportWxAccount,
getWxAccount,
listWxAccount,
updateWxAccount
} from "@/api/custom/WxAccount";
import {
addWxAccount,
delWxAccount,
exportWxAccount,
getWxAccount,
listWxAccount,
updateWxAccount,
} from "@/api/custom/WxAccount";
export default {
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: {
import { getToken } from "@/utils/auth";
},
//
data: {},
//
fileList: [],
//
limit: 1,
//
fileSize: 1024 * 500,
//
multiple: false
export default {
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: {
Authorization: "Bearer " + getToken(),
},
//
form: {},
//
rules: {}
};
},
created() {
this.getList();
this.getDicts("cus_account").then(response => {
this.accountIdOptions = response.data;
//
data: {},
//
fileList: [],
//
limit: 1,
//
fileSize: 1024 * 500,
//
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: {
/** 查询微信销售账号列表 */
getList() {
this.loading = true;
listWxAccount(this.queryParams).then(response => {
this.WxAccountList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// id
accountIdFormat(row, column) {
return this.selectDictLabel(this.accountIdOptions, row.accountId);
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
id: null,
nickName: null,
accountId: null,
wxId: null,
phone: null,
remark: null,
imgUrl: null,
count: null,
mediaId: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
// id
accountIdFormat(row, column) {
return this.selectDictLabel(this.accountIdOptions, row.accountId);
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
id: null,
nickName: null,
accountId: null,
wxId: null,
phone: null,
remark: null,
imgUrl: null,
count: null,
mediaId: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加微信销售账号";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getWxAccount(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = "添加微信销售账号";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getWxAccount(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改微信销售账号";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateWxAccount(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
}
});
} else {
addWxAccount(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
}
});
}
this.title = "修改微信销售账号";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != null) {
updateWxAccount(this.form).then((response) => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.open = false;
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;
this.$confirm('是否确认删除微信销售账号编号为"' + ids + '"的数据项?', "警告", {
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$confirm(
'是否确认删除微信销售账号编号为"' + ids + '"的数据项?',
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
type: "warning",
}
)
.then(function () {
return delWxAccount(ids);
}).then(() => {
})
.then(() => {
this.getList();
this.msgSuccess("删除成功");
}).catch(function () {
});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有微信销售账号数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
})
.catch(function () {});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm("是否确认导出所有微信销售账号数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
return exportWxAccount(queryParams);
}).then(response => {
})
.then((response) => {
this.download(response.msg);
}).catch(function () {
});
},
//
handleFileChange(file, fileList) {
let sizeFlag = file.size > this.upload.fileSize;
if (sizeFlag) {
this.$message({
message: "当前文件过大",
type: "warning",
});
fileList.pop();
}
this.upload.fileList = fileList;
},
//
handleFileexceed(file, fileList) {
//console.log(this.upload.fileList.length);
})
.catch(function () {});
},
//
handleFileChange(file, fileList) {
let sizeFlag = file.size > this.upload.fileSize;
if (sizeFlag) {
this.$message({
message: "最多可上传" + this.upload.limit + "份文件",
message: "当前文件过大",
type: "warning",
});
},
//
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
//
handleFileSuccess(response, file, fileList) {
if (response != null && response.code === 200) {
this.form.imgUrl = response.fileName;
console.log(response)
} 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;
},
}
};
fileList.pop();
}
this.upload.fileList = fileList;
},
handleFileRemove(file, fileList) {
this.upload.fileList = fileList;
},
//
handleFileexceed(file, fileList) {
//console.log(this.upload.fileList.length);
this.$message({
message: "最多可上传" + this.upload.limit + "份文件",
type: "warning",
});
},
//
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
//
handleFileSuccess(response, file, fileList) {
if (response != null && response.code === 200) {
this.form.imgUrl = response.fileName;
console.log(response);
} 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>
<style>
.has-file .el-upload--picture {
display: none;
}
.has-file .el-upload__tip {
display: none;
}
</style>