ioc-admin-ui/src/views/systemManagement/infoConfiguration/dialog/createUpdateFloor.vue

<template>
  <el-dialog
    v-dialog-drag
    class="update_Floor_dialog"
    title="更新楼层配置"
    :visible.sync="dialogVisible"
    @before-close="close"
    width="500px"
    left
  >
    <el-dialog
      class="uploadImageDialog"
      width="600px"
      title="上传图片"
      :visible.sync="innerVisible"
      @before-close="beforeCloseUploadImage"
      append-to-body
    >
      <el-divider></el-divider>
      <div>
        <el-row>
          <el-col
            :span="4"
            class="label"
          >
            图片选择：
          </el-col>
          <el-col :span="12">
            <el-input
              v-model="imageName"
              disabled
            ></el-input>
          </el-col>
          <el-col
            :span="1"
            style="color:transparent"
          >
            1
          </el-col>
          <el-col :span="7">
            <el-upload
              :action="''"
              :accept="'.jpg, .jpeg, .png, .JPG, .JPEG, .PNG'"
              :before-upload="beforeUpload"
            >
              <el-button
                type="primary"
                style="background: #2ea8e6"
              >选择文件</el-button>
            </el-upload>
          </el-col>

        </el-row>
        <el-row>
          <el-col
            :span="4"
            class="label"
          >
            图片预览：
          </el-col>
          <el-col
            :span="18"
            class="label"
          >
            <el-image :src="uploadImageUrl"></el-image>
          </el-col>
        </el-row>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="beforeCloseUploadImage"
          type="primary"
        >取消</el-button>
        <el-button
          type="primary"
          @click="uploadImageFunc"
        >确认</el-button>
      </div>
    </el-dialog>
    <el-divider></el-divider>
    <el-form
      label-position="left"
      label-width="80px"
    >
      <el-form-item label="楼层位置：">
        <el-select
          v-model="form.floorIndex"
          placeholder="请选择"
        >
          <el-option
            v-for="item in floorTotal"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼层用途：">
        <el-select
          v-model="form.floorUseIndex"
          placeholder="请选择"
        >
          <el-option
            v-for="item in floorUseTotal"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注：">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="form.beizhu"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        label="附件："
        style="display:block"
      >
        <el-row>
          <div @click="uploadImage">
            <el-image></el-image>
          </div>
        </el-row>
        <el-row>
          <div>
            请上传大小不小于<span style="color:#ff0000;">5MB</span>格式为<span style="color:#ff0000;">png/jpg/jpeg</span>的文件
          </div>
        </el-row>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        @click="close"
        type="primary"
      >取消</el-button>
      <el-button
        type="primary"
        @click="sure"
      >确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    beforeForm: {
      type: Object,
    },
  },
  data() {
    let floorTotal = [];
    for (let i = 1; i < 31; i++) {
      floorTotal.push({
        value: i + "",
        label: i + "F",
      });
    }

    return {
      innerVisible: false,
      uploadImageUrl: "/static/image/floor/area_1F.png",
      imageName: "",

      value: "",
      dialogVisible: false,
      form: {
        floorIndex: "",
        floorUseIndex: "",
        beizhu: "",
        fujian: "",
      },

      floorTotal: floorTotal,

      floorUseTotal: [
        {
          value: "1",
          label: "办公",
        },
        {
          value: "2",
          label: "会议",
        },
        {
          value: "3",
          label: "文娱",
        },
      ],
    };
  },
  methods: {
    sure() {
      let that = this;
      const loading = this.$loading({
        lock: true,
        text: "更新中，请稍后！",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
        customClass: "systemConfigLoading",
      });
      setTimeout(() => {
        loading.close();
        if (parseInt(Math.random() * 10) % 2 == 0) {
          that.$notify({
            title: "成功",
            message: "更新成功！",
            type: "success",
          });
          that.dialogVisible = false;
        } else {
          that.$notify.error({
            title: "错误",
            message: "更新失败，请重试！",
          });
        }
      }, 2000);
    },
    uploadImage() {
      this.innerVisible = true;
    },
    beforeUpload(file) {
      // console.log(arguments);

      var that = this;
      this.imageName = file.name;

      // 创建文件读取对象
      var reader = new FileReader();

      //  将文件读取为DataURL
      reader.readAsDataURL(file);

      // 读取成功调用方法
      reader.onload = (e) => {
        // console.log("读取成功");

        // e.target.result 获取 读取成功后的  文件DataURL
        that.uploadImageUrl = e.target.result;

        // 如果要将图片上传服务器，就在这里调用后台方法
      };
    },
    beforeCloseUploadImage() {
      this.imageName = "";
      this.innerVisible = false;
    },
    uploadImageFunc() {
      let that = this;
      const loading = this.$loading({
        lock: true,
        text: "上传中，请稍后！",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
        customClass: "systemConfigLoading",
      });
      setTimeout(() => {
        loading.close();
        if (parseInt(Math.random() * 10) % 2 == 0) {
          that.$notify({
            title: "成功",
            message: "图片上传成功！",
            type: "success",
          });
          that.innerVisible = false;
        } else {
          that.$notify.error({
            title: "错误",
            message: "图片上传失败，请重试！",
          });
        }
      }, 2000);
    },
    close() {
      this.form = {
        floorIndex: "",
        floorUseIndex: "",
        beizhu: "",
        fujian: "",
      };
      this.dialogVisible = false;
    },
  },
  watch: {
    beforeForm(newVal) {
      this.form = newVal;
    },
  },
};
</script>
<style lang="less" scoped>
.update_Floor_dialog {
  .el-select {
    width: 280px;
  }

  .el-form {
    .el-form-item {
      margin-inline: 20px;
    }

    /deep/.el-form-item__label {
      padding: 0;
    }

    /deep/.el-form-item__content {
      // display: flex;
      text-align: left;
    }
  }

  /deep/.el-dialog__header {
    padding-bottom: 0;
    color: #333333;
  }

  /deep/.el-dialog__headerbtn {
    font-size: 25px;
  }

  /deep/.el-dialog__body {
    padding: 0;
  }

  /deep/.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    // margin: 0;
    margin-left: 2.5%;
  }

  // /deep/.el-dialog__footer {
  //   // margin-top: 60px;
  // }

  .el-button {
    width: 100px;
    height: 30px;
    text-align: center;
    padding: 5px;
  }
  .el-image {
    width: 380px;
    height: 120px;
    cursor: pointer;
  }
}

.uploadImageDialog {
  /deep/.el-dialog__header {
    padding-bottom: 0;
    color: #333333;
  }
  /deep/.el-dialog__body {
    padding: 0 10px 20px 10px;
  }
  .label {
    line-height: 40px;
  }
  .el-row {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0px;
    }
    :deep(.el-upload-list) {
      display: none;
    }
  }
  .el-image {
    width: 100%;
    max-height: 300px;
    :deep(.el-image__error) {
      height: 100%;
      max-height: 300px;
    }
  }
}
</style>