数据管理 -- 编辑楼宇信息弹窗功能完善

src/api/data/basicInfo.js

@@ -51,7 +51,7 @@ const getBuildingList = () => {
 };
 
 /**
- * 添加楼宇接口 -- 经测试接口有问题
+ * 添加楼宇接口
  * @param {*} options
  * @returns
  */
@@ -77,9 +77,48 @@ const addBuilding = (options) => {
   options.building_introduction &&
     options.building_introduction !== "" &&
     params.append("building_introduction", options.building_introduction);
+  options.picture &&
+    options.picture !== "" &&
+    params.append("picture", options.picture);
   return post("/data/building", params);
 };
 
+/**
+ * 修改楼宇接口
+ * @param {*} options
+ * @returns
+ */
+const editBuilding = (options) => {
+  let params = new FormData();
+  options.building_id &&
+    options.building_id !== "" &&
+    params.append("building_id", options.building_id);
+  options.building_name &&
+    options.building_name !== "" &&
+    params.append("building_name", options.building_name);
+  options.building_area &&
+    options.building_area !== "" &&
+    params.append("building_area", options.building_area);
+  options.building_floor &&
+    options.building_floor !== "" &&
+    params.append("building_floor", options.building_floor);
+  options.trem && options.trem !== "" && params.append("trem", options.trem);
+  options.date && options.date !== "" && params.append("date", options.date);
+  options.contact_person &&
+    options.contact_person !== "" &&
+    params.append("contact_person", options.contact_person);
+  options.contact_information &&
+    options.contact_information !== "" &&
+    params.append("contact_information", options.contact_information);
+  options.building_introduction &&
+    options.building_introduction !== "" &&
+    params.append("building_introduction", options.building_introduction);
+  options.picture &&
+    options.picture !== "" &&
+    params.append("picture", options.picture);
+  return put("/data/building", params);
+};
+
 /**
  * 获取底层系统
  * @param {*} page
@@ -107,4 +146,5 @@ export {
   editCompanyBasicInfo,
   getBuildingList,
   getUnderlyingSystem,
+  editBuilding
 };

src/views/dataManagement/basicInfo/buildingInfo.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="basic-inner">
+  <div
+    class="basic-inner"
+    v-loading="loading"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+  >
     <el-table
       ref="multipleTable"
       :data="tableData"
@@ -11,8 +17,8 @@
     >
       <el-table-column type="index" width="70" label="序号"> </el-table-column>
       <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="contactPerson" label="联系人"> </el-table-column>
+      <el-table-column prop="contactInfo" 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="操作">
@@ -22,6 +28,7 @@
             size="mini"
             type="text"
             style="color: #2ea8e6"
+            @click="viewEvent(scope.row)"
             >查看</el-button
           >
           <el-button
@@ -29,6 +36,7 @@
             size="mini"
             type="text"
             style="color: #2ea8e6"
+            @click="editEvent(scope.row)"
             >编辑</el-button
           >
           <el-button
@@ -36,11 +44,149 @@
             size="mini"
             type="text"
             style="color: #2ea8e6"
+            @click="deleteEvent(scope.row)"
             >删除</el-button
           >
         </template>
       </el-table-column>
     </el-table>
+    <el-dialog
+      v-dialog-drag
+      style="margin-top: 0"
+      :title="popupTitle"
+      :visible.sync="dialogVisible"
+      width="600px"
+      :before-close="handleClose"
+      center
+    >
+      <div class="dialog-container">
+        <div class="dialog-container-item">
+          <div class="left-box">楼宇名称:</div>
+          <div class="right-box">
+            <el-input
+              :disabled="popupTitle === '查看楼宇信息' ? true : false"
+              style="width: 470px"
+              v-model="form.buildingName"
+            ></el-input>
+          </div>
+        </div>
+        <div class="dialog-container-item">
+          <div class="average-box">
+            <div class="left">建筑面积:</div>
+            <div class="right">
+              <el-input
+                :disabled="popupTitle === '查看楼宇信息' ? true : false"
+                style="width: 180px"
+                v-model="form.area"
+              ></el-input>
+            </div>
+          </div>
+          <div class="average-box">
+            <div class="left">建筑楼层:</div>
+            <div class="right">
+              <el-input
+                :disabled="popupTitle === '查看楼宇信息' ? true : false"
+                style="width: 180px"
+                v-model="form.floor"
+              ></el-input>
+            </div>
+          </div>
+        </div>
+        <div class="dialog-container-item">
+          <div class="average-box">
+            <div class="left">建筑年限:</div>
+            <div class="right">
+              <el-input
+                :disabled="popupTitle === '查看楼宇信息' ? true : false"
+                style="width: 180px"
+                v-model="form.trem"
+              ></el-input>
+            </div>
+          </div>
+          <div class="average-box">
+            <div class="left">建成日期:</div>
+            <div class="right">
+              <el-input
+                :disabled="popupTitle === '查看楼宇信息' ? true : false"
+                style="width: 180px"
+                v-model="form.finishDate"
+              ></el-input>
+            </div>
+          </div>
+        </div>
+        <div class="dialog-container-item">
+          <div class="left-box">联系人:</div>
+          <div class="right-box">
+            <el-input
+              :disabled="popupTitle === '查看楼宇信息' ? true : false"
+              style="width: 470px"
+              v-model="form.contactPerson"
+            ></el-input>
+          </div>
+        </div>
+        <div class="dialog-container-item">
+          <div class="left-box">联系方式:</div>
+          <div class="right-box">
+            <el-input
+              :disabled="popupTitle === '查看楼宇信息' ? true : false"
+              style="width: 470px"
+              v-model="form.contactInfo"
+            ></el-input>
+          </div>
+        </div>
+        <div class="dialog-container-info">
+          <div class="left-box">楼宇简介:</div>
+          <div class="right-box">
+            <el-input
+              :disabled="popupTitle === '查看楼宇信息' ? true : false"
+              style="width: 470px"
+              type="textarea"
+              v-model="form.buildingInfo"
+            ></el-input>
+          </div>
+        </div>
+        <div class="dialog-container-upload">
+          <div class="left-box">楼宇图片:</div>
+          <div class="right-box" style="display: flex">
+            <div
+              v-if="displayImg !== ''"
+              style="
+                width: 180px;
+                height: 100px;
+                border: 1px solid rgba(0, 0, 0, 0.5);
+                border-radius: 2px;
+                margin-right: 30px;
+              "
+            >
+              <img :src="displayImg" width="180" height="100" />
+            </div>
+            <el-upload
+              v-if="popupTitle === '编辑楼宇信息'"
+              class="upload-demo"
+              :limit="1"
+              action=""
+              :http-request="uploadSectionFile"
+              :on-preview="handlePreview"
+              :on-remove="handleRemove"
+              :file-list="fileList"
+              :before-upload="beforeAvatarUpload"
+            >
+              <el-button size="small" type="primary">点击上传</el-button>
+              <div slot="tip" class="el-upload__tip">
+                仅支持上传单张jpg或者png格式的图片，且不超过500kb
+              </div>
+            </el-upload>
+          </div>
+        </div>
+        <div
+          class="dialog-container-button"
+          v-if="popupTitle == '编辑楼宇信息'"
+        >
+          <el-button class="submit-btn" @click="resetEvent">重置</el-button>
+          <el-button class="submit-btn" @click="submitEvent">提交</el-button>
+        </div>
+      </div>
+    </el-dialog>
     <!-- <div class="bottom">
       <page :paginationData="paginationData"></page>
     </div> -->
@@ -49,11 +195,29 @@
 
 <script>
 import page from "@/components/pagination/index";
-import { getBuildingList } from "@/api/data/basicInfo";
+import { getBuildingList, editBuilding } from "@/api/data/basicInfo";
 export default {
   components: { page },
   data() {
     return {
+      loading: false,
+      fileList: [],
+      displayImg: "",
+      popupTitle: "",
+      form: {
+        id: "",
+        buildingName: "",
+        area: "",
+        floor: "",
+        finishDate: "",
+        contactPerson: "",
+        contactInfo: "",
+        buildingInfo: "",
+        picture: "",
+        // 建筑年限
+        trem: "",
+      },
+      dialogVisible: false,
       tableData: [
         {
           buildingName: "A",
@@ -90,32 +254,202 @@ export default {
     this.getBuildingData();
   },
   methods: {
+    resetEvent() {
+      this.form.buildingName = "";
+      this.form.area = "";
+      this.form.floor = "";
+      this.form.finishDate = "";
+      this.form.contactPerson = "";
+      this.form.contactInfo = "";
+      this.form.buildingInfo = "";
+      this.form.trem = "";
+      this.displayImg = "";
+    },
+    submitEvent() {
+      if ((this.popupTitle = "编辑楼宇信息")) {
+        let options = {
+          building_id: this.form.id,
+          building_name: this.form.buildingName,
+          building_area: this.form.area,
+          building_floor: this.form.floor,
+          trem: this.form.trem,
+          date: this.form.finishDate,
+          contact_person: this.form.contactPerson,
+          contact_information: this.form.contactInfo,
+          building_introduction: this.form.buildingInfo,
+          picture: this.form.picture,
+        };
+
+        editBuilding(options).then((res) => {
+          if (res.data.code === -1) {
+            this.$message.info("编辑失败，请重新编辑!");
+          }
+
+          if (res.data.code === 0) {
+            this.$message.success("修改成功");
+            this.dialogVisible = false;
+            this.fileList = [];
+            this.getBuildingData()
+          }
+        });
+      }
+    },
+    uploadSectionFile(params) {
+      this.form.picture = params.file;
+    },
+    handlePreview() {},
+    handleRemove() {},
+    beforeAvatarUpload(response, file, fileList) {
+      // console.log(response);
+      return true;
+    },
+    handleClose() {
+      this.fileList = [];
+      this.dialogVisible = false;
+    },
+    viewEvent(data) {
+      this.dialogVisible = true;
+      this.popupTitle = "查看楼宇信息";
+      this.form.buildingName = data.buildingName;
+      this.form.area = data.area;
+      this.form.floor = data.floor;
+      this.form.finishDate = data.date;
+      this.form.contactPerson = data.contactPerson;
+      this.form.contactInfo = data.contactInfo;
+      this.form.buildingInfo = data.buildingInfo;
+      this.form.trem = data.trem;
+      if (data.picture !== "") {
+        this.displayImg = data.picture;
+      }
+    },
+    editEvent(data) {
+      this.dialogVisible = true;
+      this.popupTitle = "编辑楼宇信息";
+      this.form.id = data.id;
+      this.form.buildingName = data.buildingName;
+      this.form.area = data.area;
+      this.form.floor = data.floor;
+      this.form.finishDate = data.date;
+      this.form.contactPerson = data.contactPerson;
+      this.form.contactInfo = data.contactInfo;
+      this.form.buildingInfo = data.buildingInfo;
+      this.form.trem = data.trem;
+      if (data.picture !== "") {
+        this.displayImg = data.picture;
+      }
+    },
+    deleteEvent(data) {
+      this.tableData = this.tableData.filter((v) => {
+        return v.id !== data.id;
+      });
+    },
     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,
-            };
-          });
-        }
-      });
+      this.loading = true;
+      getBuildingList()
+        .then((res) => {
+          if (res.data.code === 0) {
+            this.loading = false;
+            let data = res.data.data;
+            this.tableData = data.map((v) => {
+              return {
+                buildingName: v.name,
+                contactPerson: v.contact_person,
+                contactInfo: v.contact_information ? v.contact_information : "",
+                date: v.date,
+                floor: v.floor,
+                area: v.area,
+                trem: v.trem,
+                id: v.id,
+                buildingInfo: v.introduction,
+                picture: v.picture !== null ? JSON.parse(v.picture)[0] : "",
+              };
+            });
+          }
+        })
+        .catch((err) => {
+          this.loading = false;
+        });
     },
   },
 };
 </script>
 <style lang="less" scoped>
+/deep/.el-dialog__header {
+  text-align: left;
+}
+
+/deep/.el-dialog__body {
+  .dialog-container {
+    &-item,
+    &-upload,
+    &-info {
+      margin: 0 auto;
+      width: 98%;
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      .left-box {
+        height: 100%;
+        width: 12.5%;
+        font-size: 14px;
+        line-height: 32px;
+      }
+      .right-box {
+        height: 100%;
+        width: 87.5%;
+      }
+      .average-box {
+        height: 100%;
+        width: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        .left {
+          height: 100%;
+          width: 30%;
+          line-height: 32px;
+        }
+        .right {
+          height: 100%;
+          width: 70%;
+        }
+      }
+    }
+    &-item {
+      height: 40px;
+    }
+    &-info {
+      height: 60px;
+    }
+    &-upload {
+      height: 95px;
+    }
+    &-button {
+      margin: 0 auto;
+      width: 60%;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      .submit-btn {
+        color: #fff;
+        height: 30px;
+        width: 80px;
+        border-radius: 5px;
+        background: #2ea8e6;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+
 .basic-inner {
   width: 100%;
   height: 100%;