autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-06-28 11:08:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

修改新增运营商时上传logo功能

Browse Source
This commit is contained in:
JS-LM
2023-06-16 11:36:33 +08:00
parent 3f82905b11
commit 67dec00cf7
1 changed files with 535 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
jsowell-ui/src/views/pile/merchant/index.vue
View File

@@ -24,7 +24,10 @@
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置</el-button
>
</el-form-item>
@@ -90,10 +93,14 @@
>
<el-table-column type="selection" width="55" align="center" />
<!--<el-table-column label="" align="center" prop="id" />-->
<el-table-column label="运营商名称" align="center" prop="merchantName" >
<el-table-column
label="运营商名称"
align="center"
prop="merchantName"
>
<template slot-scope="scope">
<router-link
:to="'/merchant/detail/index/'+scope.row.id"
:to="'/merchant/detail/index/' + scope.row.id"
class="link-type"
>
<span>{{ scope.row.merchantName }}</span>
@@ -107,7 +114,11 @@
align="center"
prop="organizationCode"
/>
<el-table-column label="负责人姓名" align="center" prop="managerName" />
<el-table-column
label="负责人姓名"
align="center"
prop="managerName"
/>
<el-table-column
label="负责人电话号码"
align="center"
@@ -118,7 +129,13 @@
align="center"
prop="servicePhone"
/>
<el-table-column label="logo" align="center" prop="logoUrl" />
<el-table-column label="logo" align="center" prop="logoUrl" >
<template slot-scope="scope">
<el-image style="width: 100px; height: 100px"
:src="scope.row.logoUrl"></el-image>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
@@ -155,10 +172,21 @@
/>
<!-- 添加或修改充电桩运营商信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
<el-dialog
:title="title"
:visible.sync="open"
width="50%"
append-to-body
:before-close="closeBefore"
>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="200px"
>
<el-row>
<el-col span="12">
<el-col :span="12">
<el-form-item label="运营商名称" prop="merchantName">
<el-input
v-model="form.merchantName"
@@ -166,8 +194,11 @@
/>
</el-form-item>
</el-col>
<el-col span="12">
<el-form-item label="组织机构代码" prop="organizationCode">
<el-col :span="12">
<el-form-item
label="组织机构代码"
prop="organizationCode"
>
<el-input
v-model="form.organizationCode"
placeholder="请输入组织机构代码"
@@ -175,15 +206,19 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col span="24">
<el-form-item label="地址" prop="address">
<el-input v-model="form.address" placeholder="请输入地址" />
<el-input
v-model="form.address"
placeholder="请输入地址"
/>
</el-form-item>
<!-- <el-row>
<el-col span="24">
</el-col>
</el-row>
</el-row> -->
<el-row>
<el-col span="12">
<el-col :span="12">
<el-form-item label="负责人姓名" prop="managerName">
<el-input
v-model="form.managerName"
@@ -191,8 +226,11 @@
/>
</el-form-item>
</el-col>
<el-col span="12">
<el-form-item label="负责人电话号码" prop="managerPhone">
<el-col :span="12">
<el-form-item
label="负责人电话号码"
prop="managerPhone"
>
<el-input
v-model="form.managerPhone"
placeholder="请输入负责人电话号码"
@@ -201,7 +239,7 @@
</el-col>
</el-row>
<el-row>
<el-col span="12">
<el-col :span="12">
<el-form-item label="客服电话号码" prop="servicePhone">
<el-input
v-model="form.servicePhone"
@@ -209,15 +247,7 @@
/>
</el-form-item>
</el-col>
<el-col span="12">
<el-form-item label="logo" prop="logoUrl">
<el-input v-model="form.logoUrl" placeholder="请输入logo" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col span="12">
<el-col :span="12">
<el-form-item label="小程序APPID" prop="appId">
<el-input
v-model="form.appId"
@@ -226,13 +256,43 @@
</el-form-item>
</el-col>
</el-row>
<el-form-item label="logo" prop="logoUrl">
<el-upload
class="upload-demo"
:action="actionUrl"
:headers="headers"
:on-success="handleSuccess"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="picture"
:limit="1"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary"
>点击上传</el-button
>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件，且不超过500kb
</div>
</el-upload>
<!-- <el-input v-model="form.logoUrl" placeholder="" /> -->
</el-form-item>
<!-- <el-row>
<el-col span="12">
</el-col>
</el-row> -->
<!--<el-form-item label="删除标识" prop="delFlag">
<el-input v-model="form.delFlag" placeholder="请输入删除标识" />
</el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button type="primary" @click="submitForm" >确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
@@ -247,12 +307,19 @@ import {
addMerchant,
updateMerchant,
} from "@/api/pile/merchant";
import {checkPermi} from "@/utils/permission";
import { checkPermi } from "@/utils/permission";
import { getToken } from "@/utils/auth";
export default {
name: "Merchant",
data() {
return {
actionUrl: process.env.VUE_APP_BASE_API + "/common/uploadOSS",
dialogImageUrl: "",
headers: {
Authorization: "Bearer " + getToken(),
},
imageUrl: null,
fileList: [],
// 遮罩层
loading: true,
// 选中数组
@@ -289,22 +356,46 @@ export default {
// 表单校验
rules: {
merchantName: [
{ required: true, message: "请输入运营商名称", trigger: "blur" },
{
required: true,
message: "请输入运营商名称",
trigger: "blur",
},
],
organizationCode: [
{ required: true, message: "请输入组织机构代码", trigger: "blur" },
{
required: true,
message: "请输入组织机构代码",
trigger: "blur",
},
],
address: [
{ required: true, message: "请输入地址", trigger: "blur" },
],
address: [{ required: true, message: "请输入地址", trigger: "blur" }],
managerName: [
{ required: true, message: "请输入负责人姓名", trigger: "blur" },
{
required: true,
message: "请输入负责人姓名",
trigger: "blur",
},
],
managerPhone: [
{ required: true, message: "请输入负责人电话号码", trigger: "blur" },
{
required: true,
message: "请输入负责人电话号码",
trigger: "blur",
},
],
servicePhone: [
{ required: true, message: "请输入客服电话号码", trigger: "blur" },
{
required: true,
message: "请输入客服电话号码",
trigger: "blur",
},
],
logoUrl: [
{ required: true, message: "请输入logo", trigger: "blur" },
],
logoUrl: [{ required: true, message: "请输入logo", trigger: "blur" }],
},
};
},
@@ -313,11 +404,43 @@ export default {
},
methods: {
checkPermi,
closeBefore(){
this.open = false
this.fileList = []
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 1 个文件，本次选择了 ${
files.length
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
);
},
handleSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
console.log("图片上传成功 url：", this.imageUrl);
console.log("图片上传成功 res：", res);
this.fileList.push({ url: res.url });
this.form.logoUrl = res.url
},
handleRemove(file, fileList) {
console.log("移除图片", file, fileList);
// 从pics数组中，找到图片对应的索引值
const i = this.fileList.findIndex((x) => x.uid === file.uid);
// 调用splice方法，移除图片信息
this.fileList.splice(i, 1);
},
handlePreview(file) {
// console.log(file);
this.dialogImageUrl = file.url;
console.log(this.dialogImageUrl);
this.dialogVisible = true;
},
/** 查询充电桩运营商信息列表 */
getList() {
this.loading = true;
listMerchant(this.queryParams).then((response) => {
this.merchantList = response.rows;
console.log('this.merchantList',this.merchantList)
this.total = response.total;
this.loading = false;
});
@@ -325,6 +448,7 @@ export default {
// 取消按钮
cancel() {
this.open = false;
this.fileList = []
this.reset();
},
// 表单重置
@@ -371,6 +495,8 @@ export default {
},
/** 修改按钮操作 */
handleUpdate(row) {
this.fileList = []
this.fileList.push({"url": row.logoUrl});
this.reset();
const id = row.id || this.ids;
getMerchant(id).then((response) => {
@@ -381,6 +507,7 @@ export default {
},
/** 提交按钮 */
submitForm() {
console.log('this.form',this.form,this.form.logoUrl )
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != null) {
@@ -403,7 +530,9 @@ export default {
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal
.confirm('是否确认删除充电桩运营商信息编号为"' + ids + '"的数据项？')
.confirm(
'是否确认删除充电桩运营商信息编号为"' + ids + '"的数据项？'
)
.then(function () {
return delMerchant(ids);
})