feat 优化账号管理和店铺信息页面，添加图片上传组件，更新样式

fuintAdmin/src/components/ImageUpload/index.vue

@@ -15,16 +15,25 @@
       :headers="headers"
       :file-list="fileList"
       :on-preview="handlePictureCardPreview"
-      :class="{hide: this.fileList.length >= this.limit}"
+      :class="{ hide: this.fileList.length >= this.limit }"
     >
-      <i class="el-icon-plus"></i>
+      <slot>
+        <i class="el-icon-plus"></i>
+      </slot>
+      <div slot="tip" class="el-upload__tip">
+        <slot name="tip"> </slot>
+      </div>
     </el-upload>
 
     <!-- 上传提示 -->
     <div class="el-upload__tip" slot="tip" v-if="showTip">
       请上传
-      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+      <template v-if="fileSize">
+        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+      </template>
+      <template v-if="fileType">
+        格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
+      </template>
       的文件
     </div>
 
@@ -55,7 +64,7 @@ export default {
     },
     // 大小限制(MB)
     fileSize: {
-       type: Number,
+      type: Number,
       default: 5,
     },
     // 文件类型, 例如['png', 'jpg', 'jpeg']
@@ -66,8 +75,8 @@ export default {
     // 是否显示提示
     isShowTip: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   data() {
     return {
@@ -77,11 +86,11 @@ export default {
       dialogVisible: false,
       hideUpload: false,
       baseUrl: process.env.VUE_APP_BASE_API,
-      uploadImgUrl: process.env.VUE_APP_SERVER_URL + 'backendApi/file/upload', // 上传的图片服务器地址
+      uploadImgUrl: process.env.VUE_APP_SERVER_URL + "/backendApi/file/upload", // 上传的图片服务器地址
       headers: {
-        'Access-Token': getToken()
+        "Access-Token": getToken(),
       },
-      fileList: []
+      fileList: [],
     };
   },
   watch: {
@@ -89,14 +98,14 @@ export default {
       handler(val) {
         if (val) {
           // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(',');
+          const list = Array.isArray(val) ? val : this.value.split(",");
           // 然后将数组转为对象数组
-          this.fileList = list.map(item => {
+          this.fileList = list.map((item) => {
             if (typeof item === "string") {
               if (item.indexOf(this.baseUrl) === -1) {
-                  item = { name: this.baseUrl + item, url: this.baseUrl + item };
+                item = { name: this.baseUrl + item, url: this.baseUrl + item };
               } else {
-                  item = { name: item, url: item };
+                item = { name: item, url: item };
               }
             }
             return item;
@@ -107,8 +116,8 @@ export default {
         }
       },
       deep: true,
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   computed: {
     // 是否显示提示
@@ -119,15 +128,15 @@ export default {
   methods: {
     // 删除图片
     handleRemove(file, fileList) {
-      const findex = this.fileList.map(f => f.name).indexOf(file.name);
-      if(findex > -1) {
+      const findex = this.fileList.map((f) => f.name).indexOf(file.name);
+      if (findex > -1) {
         this.fileList.splice(findex, 1);
         this.$emit("input", this.listToString(this.fileList));
       }
     },
     // 上传成功回调
     handleUploadSuccess(res) {
-      this.uploadList.push({ name: res.fileName, url: res.fileName });
+      this.uploadList.push({ name: res.fileName, url: res.url });
       if (this.uploadList.length === this.number) {
         this.fileList = this.fileList.concat(this.uploadList);
         this.uploadList = [];
@@ -144,7 +153,7 @@ export default {
         if (file.name.lastIndexOf(".") > -1) {
           fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
         }
-        isImg = this.fileType.some(type => {
+        isImg = this.fileType.some((type) => {
           if (file.type.indexOf(type) > -1) return true;
           if (fileExtension && fileExtension.indexOf(type) > -1) return true;
           return false;
@@ -154,7 +163,9 @@ export default {
       }
 
       if (!isImg) {
-        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
+        this.$modal.msgError(
+          `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
+        );
         return false;
       }
       if (this.fileSize) {
@@ -186,27 +197,27 @@ export default {
       let strs = "";
       separator = separator || ",";
       for (let i in list) {
-        strs += list[i].url.replace(this.baseUrl, "") + separator;
+        strs += list[i].url?.replace(this.baseUrl, "") + separator;
       }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
-    }
-  }
+      return strs != "" ? strs.substr(0, strs.length - 1) : "";
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
 // .el-upload--picture-card 控制加号部分
 ::v-deep.hide .el-upload--picture-card {
-    display: none;
+  display: none;
 }
 // 去掉动画效果
 ::v-deep .el-list-enter-active,
 ::v-deep .el-list-leave-active {
-    transition: all 0s;
+  transition: all 0s;
 }
 
-::v-deep .el-list-enter, .el-list-leave-active {
-    opacity: 0;
-    transform: translateY(0);
+::v-deep .el-list-enter,
+.el-list-leave-active {
+  opacity: 0;
+  transform: translateY(0);
 }
 </style>
-

fuintAdmin/src/views/person/account.vue

@@ -1,8 +1,44 @@
 <template>
-  <div class="app-container">账号管理</div>
+  <div class="app-container main-panel">
+    <el-form ref="form" size="mini">
+      <el-descriptions title="基本信息" :column="1">
+        <template slot="extra">
+          <el-button type="primary" size="small" @click="handleSwitch"
+            >操作</el-button
+          >
+        </template>
+        <el-descriptions-item label="账号"> kooriookami </el-descriptions-item>
+        <el-descriptions-item label="密码"> 18100000000 </el-descriptions-item>
+        <el-descriptions-item label="头像">
+          <ImageUpload :isShowTip="false">
+            <template #tip>
+              支持格式:png、jpg、jpeg、bmp,单个文件不超过2mb,最多上传五个文件
+            </template>
+          </ImageUpload>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-form>
+  </div>
 </template>
 <script>
+import ImageUpload from "@/components/ImageUpload";
 export default {
   name: "Account",
+  components: { ImageUpload },
+  data() {
+    return {
+      isEdit: false,
+    };
+  },
+  methods: {
+    handleSwitch() {
+      this.isEdit = !this.isEdit;
+    },
+  },
 };
 </script>
+<style lang="scss" scoped>
+.main-panel {
+  border: none;
+}
+</style>

fuintAdmin/src/views/printer/index.vue

@@ -1,12 +1,20 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" class="main-search" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      class="main-search"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="设备名称" prop="name">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入打印机名称"
           clearable
-          style="width: 200px;"
+          style="width: 200px"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
@@ -15,7 +23,7 @@
           v-model="queryParams.sn"
           placeholder="请输入打印机编号"
           clearable
-          style="width: 200px;"
+          style="width: 200px"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
@@ -26,7 +34,12 @@
           clearable
           style="width: 180px"
         >
-          <el-option v-for="storeInfo in storeList" :key="storeInfo.id" :label="storeInfo.name" :value="storeInfo.id"/>
+          <el-option
+            v-for="storeInfo in storeList"
+            :key="storeInfo.id"
+            :label="storeInfo.name"
+            :value="storeInfo.id"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="状态" prop="status">
@@ -36,13 +49,21 @@
           clearable
           style="width: 100px"
         >
-          <el-option key="A" label="启用" value="A"/>
-          <el-option key="N" label="禁用" value="N"/>
+          <el-option key="A" label="启用" value="A" />
+          <el-option key="N" label="禁用" value="N" />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" 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="primary"
+          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="primary"
           plain
@@ -50,19 +71,26 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['printer:index']"
-        >新增云打印设备</el-button>
-        <el-button type="primary" icon="el-icon-setting" size="mini" v-hasPermi="['printer:setting']" @click="handleSetting">设置芯烨账号</el-button>
+          >新增云打印设备</el-button
+        >
       </el-form-item>
     </el-form>
 
-    <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
-      <el-table-column label="ID" prop="id" width="55"/>
+    <el-table
+      ref="tables"
+      v-loading="loading"
+      :data="list"
+      @selection-change="handleSelectionChange"
+      :default-sort="defaultSort"
+      @sort-change="handleSortChange"
+    >
+      <el-table-column label="ID" prop="id" width="55" />
       <el-table-column label="设备名称" align="center" prop="name" />
       <el-table-column label="设备编号" align="center" prop="sn" />
       <el-table-column label="所属店铺" align="center" prop="store">
         <template slot-scope="scope">
           <span v-if="scope.row.storeId && scope.row.storeId > 0">
-              <span>{{ getName(storeList, scope.row.storeId) }}</span>
+            <span>{{ getName(storeList, scope.row.storeId) }}</span>
           </span>
           <span v-else>公共所有</span>
         </template>
@@ -87,7 +115,11 @@
           ></el-switch>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -95,20 +127,22 @@
             icon="el-icon-edit"
             v-hasPermi="['printer:index']"
             @click="handleUpdate(scope.row)"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             v-hasPermi="['printer:index']"
             @click="handleDelete(scope.row)"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.page"
       :limit.sync="queryParams.pageSize"
@@ -116,19 +150,33 @@
     />
 
     <!-- 添加或修改对话框 start-->
-    <el-dialog :title="title" :visible.sync="open" class="common-dialog" width="700px" append-to-body>
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      class="common-dialog"
+      width="700px"
+      append-to-body
+    >
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
         <el-row>
           <el-col :span="24">
             <el-form-item label="设备名称" prop="name">
-              <el-input v-model="form.name" placeholder="请输入打印机名称" maxlength="200" />
+              <el-input
+                v-model="form.name"
+                placeholder="请输入打印机名称"
+                maxlength="200"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="24">
             <el-form-item label="设备编号" prop="sn">
-              <el-input v-model="form.sn" placeholder="请输入打印机编号" maxlength="200" />
+              <el-input
+                v-model="form.sn"
+                placeholder="请输入打印机编号"
+                maxlength="200"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -140,8 +188,18 @@
                 style="width: 260px"
                 placeholder="所属店铺，空则为公共所有"
               >
-                <el-option :key="0" label="公共所有" v-if="!this.$store.getters.storeId" :value="0"/>
-                <el-option v-for="storeInfo in storeList" :key="storeInfo.id" :label="storeInfo.name" :value="storeInfo.id"/>
+                <el-option
+                  :key="0"
+                  label="公共所有"
+                  v-if="!this.$store.getters.storeId"
+                  :value="0"
+                />
+                <el-option
+                  v-for="storeInfo in storeList"
+                  :key="storeInfo.id"
+                  :label="storeInfo.name"
+                  :value="storeInfo.id"
+                />
               </el-select>
             </el-form-item>
           </el-col>
@@ -179,7 +237,12 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="备注信息">
-              <el-input v-model="form.description" type="textarea" rows="5" placeholder="请输入备注信息"></el-input>
+              <el-input
+                v-model="form.description"
+                type="textarea"
+                rows="5"
+                placeholder="请输入备注信息"
+              ></el-input>
             </el-form-item>
           </el-col>
         </el-row>
@@ -202,19 +265,38 @@
     <!-- 添加或修改对话框 end-->
 
     <!-- 打印设置对话框 start-->
-    <el-dialog title="芯烨云打印设置" :visible.sync="openSetting" class="common-dialog" width="700px" append-to-body>
-      <el-form ref="settingForm" :model="settingForm" :rules="settingRules" label-width="120px">
+    <el-dialog
+      title="芯烨云打印设置"
+      :visible.sync="openSetting"
+      class="common-dialog"
+      width="700px"
+      append-to-body
+    >
+      <el-form
+        ref="settingForm"
+        :model="settingForm"
+        :rules="settingRules"
+        label-width="120px"
+      >
         <el-row>
           <el-col :span="24">
             <el-form-item label="开发者ID" prop="userName">
-              <el-input v-model="settingForm.userName" placeholder="请输入开发者ID" maxlength="200" />
+              <el-input
+                v-model="settingForm.userName"
+                placeholder="请输入开发者ID"
+                maxlength="200"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="24">
             <el-form-item label="开发者密钥" prop="userKey">
-              <el-input v-model="settingForm.userKey" placeholder="请输入开发者密钥" maxlength="200" />
+              <el-input
+                v-model="settingForm.userKey"
+                placeholder="请输入开发者密钥"
+                maxlength="200"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -239,7 +321,14 @@
 </template>
 
 <script>
-import { getPrinterList, updatePrinterStatus, getPrinterInfo, savePrinter, saveSetting, getSettingInfo } from "@/api/printer";
+import {
+  getPrinterList,
+  updatePrinterStatus,
+  getPrinterInfo,
+  savePrinter,
+  saveSetting,
+  getSettingInfo,
+} from "@/api/printer";
 export default {
   name: "PrinterList",
   data() {
@@ -261,45 +350,75 @@ export default {
       // 是否显示弹出层
       open: false,
       // 默认排序
-      defaultSort: {prop: 'sort', order: 'ascending'},
+      defaultSort: { prop: "sort", order: "ascending" },
       // 表单参数
-      form: { id: '', name: '', sn: '', beforePay: 'Y', afterPay: 'Y', autoPrint: 'Y', storeId: 0,  status: "A", sort: 0 },
+      form: {
+        id: "",
+        name: "",
+        sn: "",
+        beforePay: "Y",
+        afterPay: "Y",
+        autoPrint: "Y",
+        storeId: 0,
+        status: "A",
+        sort: 0,
+      },
       // 店铺列表
       storeList: [],
       // 查询参数
       queryParams: {
         page: 1,
         pageSize: 10,
-        name: '',
-        sn: '',
-        storeId: '',
-        status: ''
+        name: "",
+        sn: "",
+        storeId: "",
+        status: "",
       },
       // 表单校验
       rules: {
         name: [
           { required: true, message: "名称不能为空", trigger: "blur" },
-          { min: 2, max: 200, message: '名称长度必须介于2 和 50 之间', trigger: 'blur' }
+          {
+            min: 2,
+            max: 200,
+            message: "名称长度必须介于2 和 50 之间",
+            trigger: "blur",
+          },
         ],
         sn: [
           { required: true, message: "编号不能为空", trigger: "blur" },
-          { min: 2, max: 200, message: '编号长度必须介于2 和 64 之间', trigger: 'blur' }
+          {
+            min: 2,
+            max: 200,
+            message: "编号长度必须介于2 和 64 之间",
+            trigger: "blur",
+          },
         ],
       },
       // 打印设置
       openSetting: false,
-      settingForm: { userName: '', userKey: '', enable: 'Y' },
+      settingForm: { userName: "", userKey: "", enable: "Y" },
       // 表单校验
       settingRules: {
         userName: [
           { required: true, message: "名称不能为空", trigger: "blur" },
-          { min: 2, max: 200, message: '名称长度必须介于2 和 50 之间', trigger: 'blur' }
+          {
+            min: 2,
+            max: 200,
+            message: "名称长度必须介于2 和 50 之间",
+            trigger: "blur",
+          },
         ],
         userKey: [
           { required: true, message: "编号不能为空", trigger: "blur" },
-          { min: 2, max: 200, message: '编号长度必须介于2 和 64 之间', trigger: 'blur' }
+          {
+            min: 2,
+            max: 200,
+            message: "编号长度必须介于2 和 64 之间",
+            trigger: "blur",
+          },
         ],
-      }
+      },
     };
   },
   created() {
@@ -309,13 +428,12 @@ export default {
     // 查询列表
     getList() {
       this.loading = true;
-      getPrinterList(this.queryParams).then( response => {
-          this.list = response.data.paginationResponse.content;
-          this.total = response.data.paginationResponse.totalElements;
-          this.storeList = response.data.storeList;
-          this.loading = false;
-        }
-      );
+      getPrinterList(this.queryParams).then((response) => {
+        this.list = response.data.paginationResponse.content;
+        this.total = response.data.paginationResponse.totalElements;
+        this.storeList = response.data.storeList;
+        this.loading = false;
+      });
     },
     // 搜索按钮操作
     handleQuery() {
@@ -324,7 +442,7 @@ export default {
     },
     // 打印设置
     handleSetting() {
-      getSettingInfo().then(response => {
+      getSettingInfo().then((response) => {
         this.settingForm.userName = response.data.userName;
         this.settingForm.userKey = response.data.userKey;
         this.settingForm.enable = response.data.enable;
@@ -334,24 +452,28 @@ export default {
     // 重置按钮操作
     resetQuery() {
       this.resetForm("queryForm");
-      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
+      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order);
       this.handleQuery();
     },
     // 状态修改
     handleStatusChange(row) {
       let text = row.status == "A" ? "启用" : "禁用";
-      this.$modal.confirm('确认要' + text + '"' + row.title + '"吗？').then(function() {
-        return updatePrinterStatus(row.id, row.status);
-      }).then(() => {
-        this.$modal.msgSuccess(text + "成功");
-      }).catch(function() {
-        row.status = row.status === "N" ? "A" : "N";
-      });
+      this.$modal
+        .confirm("确认要" + text + '"' + row.title + '"吗？')
+        .then(function () {
+          return updatePrinterStatus(row.id, row.status);
+        })
+        .then(() => {
+          this.$modal.msgSuccess(text + "成功");
+        })
+        .catch(function () {
+          row.status = row.status === "N" ? "A" : "N";
+        });
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.id);
+      this.multiple = !selection.length;
     },
     // 排序触发事件
     handleSortChange(column, prop, order) {
@@ -373,8 +495,8 @@ export default {
         sn: "",
         storeId: "",
         autoPrint: "Y",
-        beforePay: 'Y',
-        afterPay: 'Y',
+        beforePay: "Y",
+        afterPay: "Y",
         description: "",
         status: "A",
       };
@@ -386,21 +508,21 @@ export default {
       this.reset();
     },
     // 提交按钮
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id) {
-              savePrinter(this.form).then(response => {
-                this.$modal.msgSuccess("修改成功");
-                this.open = false;
-                this.getList();
-              });
+            savePrinter(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
           } else {
-              savePrinter(this.form).then(response => {
-                this.$modal.msgSuccess("新增成功");
-                this.open = false;
-                this.getList();
-              });
+            savePrinter(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
           }
         }
       });
@@ -409,7 +531,7 @@ export default {
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids;
-      getPrinterInfo(id).then(response => {
+      getPrinterInfo(id).then((response) => {
         this.form = response.data.printerInfo;
         this.open = true;
         this.title = "编辑打印机";
@@ -417,24 +539,28 @@ export default {
     },
     // 删除按钮操作
     handleDelete(row) {
-      const name = row.name
-      this.$modal.confirm('是否确认删除"' + name + '"打印机？').then(function() {
-        return updatePrinterStatus(row.id, 'D');
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch((e) => {
+      const name = row.name;
+      this.$modal
+        .confirm('是否确认删除"' + name + '"打印机？')
+        .then(function () {
+          return updatePrinterStatus(row.id, "D");
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch((e) => {
           console.log(e.toString());
-      });
+        });
     },
     // 提交设置按钮
-    submitSettingForm: function() {
-      this.$refs["settingForm"].validate(valid => {
+    submitSettingForm: function () {
+      this.$refs["settingForm"].validate((valid) => {
         if (valid) {
-            saveSetting(this.settingForm).then(response => {
-              this.$modal.msgSuccess("保存设置成功");
-              this.openSetting = false;
-            });
+          saveSetting(this.settingForm).then((response) => {
+            this.$modal.msgSuccess("保存设置成功");
+            this.openSetting = false;
+          });
         }
       });
     },
@@ -442,6 +568,6 @@ export default {
     cancelSetting() {
       this.openSetting = false;
     },
-  }
+  },
 };
 </script>

fuintAdmin/src/views/store/info.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="app-container main-panel">
     <el-form ref="form" :model="form" :rules="rules" label-width="120px">
       <el-row>
         <el-col :span="12">
@@ -24,24 +24,9 @@
       <el-row>
         <el-col :span="12">
           <el-form-item label="商户logo" prop="logo">
-            <el-upload
-              :action="uploadAction"
-              list-type="picture-card"
-              :class="{ hide: hideUpload }"
-              :file-list="uploadFiles"
-              :auto-upload="true"
-              :show-file-list="false"
-              :headers="uploadHeader"
-              :on-success="handleUploadSuccess"
-            >
-              <img
-                v-if="form.logo"
-                :src="imagePath + form.logo"
-                class="list-img"
-              />
-              <i v-if="!form.logo" class="el-icon-plus"></i>
-            </el-upload>
-            <p class="form-tips">（提示：点击图片修改）</p>
+            <ImageUpload :isShowTip="false" :limit="1">
+              <template #tip> （提示：点击图片修改） </template>
+            </ImageUpload>
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -229,35 +214,11 @@
       <el-row>
         <el-col :span="9">
           <el-form-item label="营业执照" prop="license">
-            <el-upload
-              :action="uploadAction"
-              list-type="picture-card"
-              :class="{ hide: hideUpload }"
-              :file-list="uploadFiles"
-              :auto-upload="true"
-              :show-file-list="false"
-              :headers="uploadHeader"
-              :on-success="handleUploadLicenseSuccess"
-            >
-              <img
-                v-if="form.license"
-                :src="imagePath + form.license"
-                class="list-img"
-              />
-              <i v-if="!form.license" class="el-icon-plus"></i>
-            </el-upload>
+            <ImageUpload :isShowTip="false" :limit="1">
+              <template #tip> （提示：点击图片修改） </template>
+            </ImageUpload>
           </el-form-item>
         </el-col>
-        <p class="form-tips">（提示：点击图片修改）</p>
-        <p class="form-tips">
-          <a
-            v-if="form.license"
-            class="link"
-            target="_blank"
-            :href="imagePath + form.license"
-            >（查看大图）</a
-          >
-        </p>
       </el-row>
       <el-row>
         <el-col :span="12">
@@ -282,8 +243,13 @@
   </div>
 </template>
 <script>
+import ImageUpload from "@/components/ImageUpload";
+
 export default {
   name: "Info",
+  components: {
+    ImageUpload,
+  },
   data() {
     return {
       form: {},
@@ -292,6 +258,9 @@ export default {
 };
 </script>
 <style scoped>
+.main-panel {
+  border: none;
+}
 .common-dialog >>> .el-upload--picture-card {
   width: 60px;
   height: 50px;