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

<template>
  <div>
    <el-dialog
      v-dialog-drag
      class="create_floor_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: "机房",
        },
        {
          value: "4",
          label: "会议区",
        },
        {
          value: "5",
          label: "党建园地",
        },
        {
          value: "6",
          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() {},
  },
};
</script>

 
<style lang="less" scoped>
.create_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;
  }
}
</style>