addBloc.vue

<template>
  <div>
    <el-dialog
      :title="$t('dialog.addBloc')"
      class="manage-dialog"
      :visible.sync="addDialogVisible"
      :close-on-click-modal="false"
      @close="addDialogClose()"
    >
      <el-form :model="addForm" status-icon :rules="rules" ref="addForm" label-width="formLabelWidth">
        <el-form-item :label="$t('dialog.blocName')" prop="name" required>
          <el-input v-model="addForm.name"></el-input>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item :label="$t('dialog.admin')" prop="username" required>
          <el-input v-model="addForm.username"></el-input>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item :label="$t('table.ExpireTime')" prop="expireDate">
          <el-date-picker
            v-model="addForm.expireDate"
            type="date"
            size="small"
            align="center"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%;"
            :placeholder="$t('pholder.select')"
          />
        </el-form-item>
        <el-form-item :label="$t('dialog.mapVisible')" prop="mapDisplay">
          <el-switch
            :active-text="$t('dialog.close')"
            :inactive-text="$t('dialog.open')"
            active-color="#ff4949"
            inactive-color="#13ce66"
            v-model="addForm.mapDisplay"
            :active-value="0"
            :inactive-value="1"
            style="top:5px"
          />
        </el-form-item>
        <template v-if="addForm.mapDisplay">
          <el-form-item :label="$t('dialog.mapVisibleCenter')">
            <!-- <el-input v-model="addForm.mapCenter" :placeholder="`${$t('table.countries')}/${$t('table.area')}`" /> -->
            <el-col :span="8">
              <el-form-item prop="mapLongitude" class="spe-form-item">
                <el-input v-model="addForm.mapLongitude" readonly />
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center;">-</el-col>
            <el-col :span="8">
              <el-form-item prop="mapLatitude" class="spe-form-item">
                <el-input v-model="addForm.mapLatitude" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button
                class="bdmap-btn"
                icon="el-icon-location"
                @click="getCoordinates"
              >{{$t('dialog.Lal')}}</el-button>
            </el-col>
            <!-- <el-tooltip class="item" effect="dark" content="输入国家/地区" placement="top">
              <i class="error-tip el-icon-info map-enter-tip"></i>
            </el-tooltip> -->
          </el-form-item>
        </template>
        <el-form-item
          :label="$t('dialog.logo')"
          prop="logoPath"
          v-if="isIe <= 9 && typeof(isIe) === 'number'"
        >
          <img v-if="addForm.logoPath" :src="logoPlanFormatter(addForm.logoPath)" class="avatar" />
          <form id="fileForm" enctype="multipart/form-data" methods="post">
            <input type="file" id="fileInput" name="file" @change="update" />
          </form>
        </el-form-item>
        <el-form-item :label="$t('dialog.logo')" prop="logoPath" v-else>
          <el-upload
            class="avatar-uploader"
            :action="logoUploadUrl"
            :headers="uploadHeader"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
            :on-error="handleAvatarError"
          >
            <img v-if="addForm.logoPath" :src="addForm.logoPath" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item :label="$t('dialog.description')">
          <el-input type="textarea" v-model="addForm.intro"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
        <el-button
          type="primary"
          @click="addSubmit('addForm')"
          class="dialog-btn dialog-confirm-btn"
        >{{$t('dialog.confirm')}}</el-button>
      </div>
    </el-dialog>
    <city-coordinate-dialog ref="coordinateRef" @addLatLng="dialogLatLng" />
  </div>
</template>
<script>
import CityCoordinateDialog from './MapCoordinate'

export default {
  components: { CityCoordinateDialog },
  data() {
    var validatorName = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入阅读空间名称"));
      } else if (value.length < 2 || value.length > 10) {
        return callback(new Error("长度在 2到 10 个字符"));
      }
      this.$api.base
        .account({
          name: value
          // _t: Date.parse(new Date()) / 1000
        })
        .then(data => {
          if (data.data.data.length != 0) {
            return callback(new Error("阅读空间名称重复,请重新输入"));
          } else {
            callback();
          }
        })
        .catch(error => {});
    };
    var validatorUserName = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入管理员名称"));
      } else if (value.length < 2 || value.length > 10) {
        return callback(new Error("长度在 2到 10 个字符"));
      }
      this.$api.management
        .userList({
          loginName: value
          // _t: Date.parse(new Date()) / 1000
        })
        .then(data => {
          if (data.data.data.length != 0) {
            return callback(new Error("管理员名称重复,请重新输入"));
          } else {
            callback();
          }
        })
        .catch(error => {});
    };
    return {
      addDialogVisible: false,
      addForm: {
        name: "",
        username: "",
				expireDate: "",
				mapDisplay: 1,
        mapCenter: "",
        mapLongitude: null,
        mapLatitude: null,
        mapZoom: 0,
        logoPath: "",
        intro: ""
      },
      logoUploadUrl: window._vionConfig.apiUrl + "/accounts/upload",
      logoPathUrl: window._vionConfig.apiUrl + "/images/", // floors/img/
      addFileName: "",
      uploadHeader: {},
      rules: {
        username: [{ validator: validatorUserName, trigger: "blur" }],
        // logoPath: [
        // 	{ required: true, message: '请选择图片', trigger: 'blur' }
        // ],
        name: [{ validator: validatorName, trigger: "blur" }]
      },
      isIe: null
    };
  },
  mounted() {
    this.uploadHeader = {
      Authorization: this.$cookie.get("atoken")
    };
    this.isIe = document.documentMode ? document.documentMode : false;
  },
  inject: ["reload"],
  methods: {
    update() {
      var _this = this;
      $("#fileForm").ajaxSubmit({
        url: _this.logoUploadUrl, //url地址
        type: "post",
        enctype: "multipart/form-data",
        ContentType: "application/x-www-form-urlencoded;charset=utf-8",
        headers: {
          Authorization: _this.$cookie.get("atoken")
        },
        success: function(res) {
          $("#fileForm").clearForm(); //重置表单
          if (res.code == 200) {
            _this.addForm.logoPath = res.msg;
            // console.log(_this.addForm.logoPath)
          }
        }
      });
    },
    dialogInit() {
      this.addDialogVisible = true;
    },
    //图片上传限制
    beforeAvatarUpload(file) {
      let isJPG = file.type === "image/jpeg";
      let isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error(
          this.$t("message.uploadImg") + " JPG " + this.$t("message.imgFormat")
        );
      }
      if (!isLt2M) {
        this.$message.error(this.$t("message.imgSize") + " 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.addFileName = res.msg;
        this.addForm.logoPath = URL.createObjectURL(file.raw);
      } else {
        this.addFileName = "";
        this.addForm.logoPath = "";
        this.$message({
          showClose: true,
          message: this.$t("message.upload") + res.enote,
          type: "warning"
        });
      }
    },
    handleAvatarError(res, file) {
      this.$message({
        showClose: true,
        message: this.$t("message.uploadFailed"),
        type: "warning"
      });
    },
    getCoordinates() {
      this.$refs.coordinateRef.dialogInit()
    },
    dialogLatLng({ lng, lat, zoom }) {
      this.addForm.mapLongitude = lng;
      this.addForm.mapLatitude = lat;
      this.addForm.mapZoom = zoom
    },
    addSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addForm.createUser = this.$cookie.get("userId");
          this.addForm.modifyUser = this.$cookie.get("userId");
          this.addForm.logoPath = this.addFileName;
          this.addForm.manager = this.addForm.username;
          let loginName = this.addForm.username;
          // this.addForm.manager = window.localStorage.getItem('loginName');
          this.$api.management
            .addAccount(this.addForm)
            .then(m => {
              let accountId = m.data.data.id;
              this.$api.management
                .addUser({
                  accountId: accountId,
                  loginName: loginName,
                  realName: "xxx",
                  password: "123456"
                })
                .then(data => {})
                .catch(error => {});
              this.addDialogVisible = false;
              this.$cookie.set("accountId", accountId);
              setTimeout(() => {
                this.reload();
              }, 0);
              // this.$parent.getTableData();
            })
            .catch(error => {});
        } else {
          return false;
        }
      });
    },
    addDialogClose() {
      this.$refs.addForm.resetFields();
    },
    logoPlanFormatter(logoPath) {
      if (logoPath) {
        if (logoPath.indexOf("blob:") != -1) {
          return logoPath;
        } else {
          var logoPlan = this.logoPathUrl + logoPath;
          return logoPlan;
        }
      } else {
        return defaultImg;
      }
    }
  }
};
</script>

<style>
.el-form-item__content .el-date-editor.el-input {
  width: 100%;
}
</style>

<style scoped>
.map-enter-tip {
  color: #333;
  cursor: pointer;
  right: -4px;
}
#mapContainer {
  width: 100%;
  height: 300px;
}
</style>

<style scoped>
.bdmap-btn {
  margin-left: 5px;
  padding: 0 8px;
  height: 30px;
  border-radius: 2px;
  font-size: 13px;
}
@media only screen and (max-width: 1680px) {
  .bdmap-btn {
    padding: 0 10px;
    height: 30px;
    font-size: 13px;
  }
}
@media only screen and (max-width: 1440px) {
  .bdmap-btn {
    padding: 0 9px;
    height: 20px;
    font-size: 13px;
  }
}
@media only screen and (max-width: 1366px) {
  .bdmap-btn {
    padding: 0 9px;
    height: 20px;
    font-size: 13px;
  }
}
@media only screen and (max-width: 1280px) {
  .bdmap-btn {
    padding: 0 9px;
    height: 20px;
    font-size: 13px;
  }
}
</style>