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

<template>
  <div>
    <el-dialog
      v-dialog-drag
      class="dialog"
      title="更新楼层配置"
      :visible.sync="dialogVisible"
      @before-close="close"
      width="500px"
      left
    >
      <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>
            <el-image @click="uploadImage"></el-image>
          </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="addType"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</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 {
      value: "",
      dialogVisible: false,
      form: {
        floorIndex: "",
        floorUseIndex: "",
        beizhu: "",
        fujian: "",
      },

      floorTotal: floorTotal,

      floorUseTotal: [
        {
          value: "1",
          label: "办公",
        },
        {
          value: "2",
          label: "会议",
        },
        {
          value: "3",
          label: "文娱",
        },
      ],
    };
  },
  methods: {
    addType() {
      let that = this;
      // api
      //   .addNewDeviceType({
      //     id: "",
      //     name: this.value,
      //   })
      //   .then((result) => {
      //     if (result.data.code == 0) {
      //       that.$message.success("类别添加成功!");
      //       that.dialogVisible = false;
      //       // 刷新列表
      //       that.getDeviceTypeList();
      //     } else {
      //       that.$message.error("类别添加失败!");
      //     }
      //   })
      //   .catch((err) => {
      //     that.$message.error("类别添加失败!");
      //   });
    },
    uploadImage() {},
    close() {
      this.form = {
        floorIndex: "",
        floorUseIndex: "",
        beizhu: "",
        fujian: "",
      };
      this.dialogVisible = false;
    },
  },
  watch: {
    beforeForm(newVal) {
      this.form = newVal;
    },
  },
};
</script>
<style lang="less" scoped>
.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: 95%;
  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;
}
// .el-image + div {
// }
</style>