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

jsowell-ui/src/views/pile/merchant/index.vue

@@ -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,7 +93,11 @@
         >
             <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"
@@ -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-dialog
-      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+            :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-col :span="12">
-            <el-form-item label="组织机构代码" prop="organizationCode">
+                        <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-col :span="12">
-            <el-form-item label="负责人电话号码" prop="managerPhone">
+                        <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-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-form-item label="小程序APPID" prop="appId">
                             <el-input
                                 v-model="form.appId"
@@ -226,6 +256,36 @@
                         </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="请输入删除标识" />
@@ -248,11 +308,18 @@ import {
     updateMerchant,
 } from "@/api/pile/merchant";
 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);
                 })