公司信息上传图片功能完善

src/views/dataManagement/basicInfo/buildingInfo.vue

@@ -13,6 +13,8 @@
       <el-table-column prop="buildingName" label="楼宇名称"> </el-table-column>
       <el-table-column prop="contact_person" label="联系人"> </el-table-column>
       <el-table-column prop="contact_phone" label="联系方式"> </el-table-column>
+      <el-table-column prop="floor" label="楼层"> </el-table-column>
+      <el-table-column prop="date" label="日期"> </el-table-column>
       <el-table-column prop="operation" label="操作">
         <template slot-scope="scope">
           <el-button
@@ -39,14 +41,15 @@
         </template>
       </el-table-column>
     </el-table>
-    <div class="bottom">
+    <!-- <div class="bottom">
       <page :paginationData="paginationData"></page>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
 import page from "@/components/pagination/index";
+import { getBuildingList } from "@/api/data/basicInfo";
 export default {
   components: { page },
   data() {
@@ -83,10 +86,32 @@ export default {
       },
     };
   },
+  mounted() {
+    this.getBuildingData();
+  },
   methods: {
     getTableData(val) {},
     handleSizeChange(val) {},
     handleSelectionChange() {},
+    getBuildingData() {
+      this.tableData = [];
+      getBuildingList().then((res) => {
+        if (res.data.code === 0) {
+          let data = res.data.data;
+          this.tableData = data.map((v) => {
+            return {
+              buildingName: v.name,
+              contact_person: v.contact_person,
+              contact_phone: v.contact_information,
+              date: v.date,
+              floor: v.floor,
+              area: v.area,
+              trem: v.trem,
+            };
+          });
+        }
+      });
+    },
   },
 };
 </script>

src/views/dataManagement/basicInfo/corporationInfo.vue

@@ -52,7 +52,34 @@
         <el-input v-model="form.contact_num"></el-input>
       </el-form-item>
       <el-form-item style="width: 500px" label="上传图片：">
+        <div
+          style="
+            width: 200px;
+            height: 150px;
+            border: 1px solid rgba(0, 0, 0, 0.5);
+            border-radius: 4px;
+            margin-right: 30px;
+          "
+        >
+          <img :src="displayImg" width="200" height="150" />
+        </div>
         <el-upload
+          class="upload-demo"
+          :limit="1"
+          action=""
+          :http-request="uploadSectionFile"
+          :on-preview="handlePreview"
+          :on-remove="handleRemove"
+          :file-list="fileList"
+          :before-upload="beforeAvatarUpload"
+          list-type="picture"
+        >
+          <el-button size="small" type="primary">点击上传</el-button>
+          <div slot="tip" class="el-upload__tip">
+            仅支持上传单张jpg或者png格式的图片，且不超过500kb
+          </div>
+        </el-upload>
+        <!-- <el-upload
           action=""
           :http-request="uploadSectionFile"
           list-type="picture-card"
@@ -89,10 +116,10 @@
               </span>
             </span>
           </div>
-        </el-upload>
-        <el-dialog :visible.sync="dialogVisible">
-          <img width="100%" :src="dialogImageUrl" alt="" />
-        </el-dialog>
+        </el-upload> -->
+        <!-- <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt=""/>
+        </el-dialog> -->
       </el-form-item>
     </el-form>
     <div class="bottom">
@@ -113,6 +140,7 @@ export default {
     return {
       fileList: [],
       currentFile: "",
+      displayImg: "",
       dynamicTags: [
         {
           id: 1,
@@ -140,7 +168,7 @@ export default {
         profile: "",
         contact_person: "",
         contact_num: "",
-        pictureList: [],
+        picture: "",
       },
       action: "", //上传地址
       inputValue: "",
@@ -165,17 +193,20 @@ export default {
           this.form.profile = obj.introduction;
           this.form.contact_num = obj.contact_information;
           this.form.contact_person = obj.contact_person;
+          this.displayImg = obj.pictures[0];
         }
       });
     },
-    handleRemove(file) {
-      console.log(file);
-      console.log(this.fileList);
+    handleRemove(file, fileList) {
+      // console.log(file, fileList);
       // let removeUrl = file.respone.data.url;
       // this.allImageUrl = this.allImageUrl.filter((item) => item != removeUrl);
     },
+    handlePreview(file) {
+      // console.log(file);
+    },
     handleDownload(file) {
-      console.log(file);
+      // console.log(file);
     },
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
@@ -187,6 +218,7 @@ export default {
       });
     },
     handleInputConfirm() {
+      debugger;
       let inputValue = this.inputValue;
       if (inputValue) {
         this.dynamicTags.push({
@@ -199,20 +231,21 @@ export default {
     },
     showInput() {
       this.inputVisible = true;
-      this.$nextTick((_) => {
+      setTimeout(() => {
         this.$refs.saveTagInput.$refs.input.focus();
-      });
+      }, 500);
+      // this.$nextTick((_) => {
+      //   this.$refs.saveTagInput.$refs.input.focus();
+      // });
     },
     beforeAvatarUpload(response, file, fileList) {
-      console.log(response);
+      // console.log(response);
       return true;
     },
     uploadSectionFile(params) {
-      debugger;
-      console.log(params);
-      let picture = params.file;
+      // console.log(params);
       this.currentFile = params.file;
-      this.form.pictureList.push(picture);
+      this.form.picture = params.file;
     },
     resetEvent() {
       this.displayCompanyInfo();
@@ -224,13 +257,13 @@ export default {
         introduction: this.form.profile,
         contact_person: this.form.contact_person,
         contact_information: this.form.contact_num,
-        picture: this.form.pictureList,
+        picture: this.form.picture,
       };
-      debugger;
       editCompanyBasicInfo(options).then((res) => {
         if (res.data.code === 0) {
           setTimeout(() => {
             this.displayCompanyInfo();
+            this.fileList = [];
           }, 500);
         }
       });

src/views/dataManagement/basicInfo/index.vue

@@ -5,16 +5,16 @@
       <el-button @click="Show2()">楼宇基本信息</el-button>
       <el-button @click="Show3()">底层系统信息</el-button>
     </div>
-    <corporation-info v-if="show1" class="content"></corporation-info>
-    <building-info v-if="show2" class="content"></building-info>
+    <CorporationInfo v-if="show1" class="content"></CorporationInfo>
+    <buildingInfo v-if="show2" class="content"></buildingInfo>
     <accessedSystem v-if="show3" class="content"></accessedSystem>
   </div>
 </template>
 
 <script>
-import CorporationInfo from "./corporationInfo";
-import buildingInfo from "./buildingInfo";
-import accessedSystem from "./accessedSystem";
+import CorporationInfo from "@/views/dataManagement/basicInfo/corporationInfo.vue";
+import buildingInfo from "@/views/dataManagement/basicInfo/buildingInfo.vue";
+import accessedSystem from "@/views/dataManagement/basicInfo/accessedSystem.vue";
 export default {
   components: { CorporationInfo, buildingInfo, accessedSystem },
   data() {