ams-backend/front/admin-front/src/views/address/SaveOrUpdate.vue

<template>
  <div>
    <el-drawer
      :wrapperClosable="false"
      size="700px"
      :visible.sync="addressModal"
      :withHeader="false"
      :modal-append-to-body="false"
    >
      <el-row style="padding-top: 20px; border-bottom: 1px solid #f0f0f0">
        <el-col :span="13" class="mb-18">
          <span
            class="block-title"
            style="line-height: 2.5;margin:20px"
            >生成地址</span
          >
        </el-col>
        <el-col :span="10">
          <el-button
            type="danger"
            plain
            class="float-right mg-l-r-10 close-btn"
            @click="close"
            >关闭
          </el-button>
          <el-button
            class="float-right mg-l-r-10 confirm-btn pd-2"
            @click="generateAddress"
            >确认</el-button
          >
        </el-col>
      </el-row>

      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        style="margin: 40px 0;width: 600px"
      >
        <el-form-item label="地址组名称" prop="groupName">
          <el-input v-model="ruleForm.groupName" autocomplete="off"  ></el-input>
        </el-form-item>
        <el-form-item label="生成数量" prop="numWallet">
          <el-input v-model="ruleForm.numWallet" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="generateAddress('ruleForm')">提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<style scope>
.upload__text {
  font-size: 12px;
  font-family: MiSans, MiSans-Normal;
  font-weight: Normal;
  text-align: LEFT;
  color: #888888;
  line-height: 12px;
  position: absolute;
  bottom: 30px;
  left: 23px;
}

.avatar-uploader .el-upload {
  background: #f7f7f7;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 156px;
  height: 156px;
  line-height: 156px;
  text-align: center;
}

.el-upload-dragger {
  width: 156px;
  height: 156px;
}
.avatar {
  width: 156px;
  height: 156px;
}
</style>

<script>
import { pageAddress, batchAddress } from "@/api/adress";
export const baseUrl = process.env.VUE_APP_BASEURL;
export default {
  data() {
    return {
      url: process.env.VUE_APP_BASEURL,
      addressModal: false,
      isSave: false,
      ruleForm: {
        password: undefined,
        groupName: undefined,
        numWallet: undefined,
      },
      rules: {},
    };
  },
  methods: {
    resetForm() {
      this.ruleForm.groupName = undefined;
      this.ruleForm.password = undefined;
      this.ruleForm.numWallet = undefined;
    },
    resetField() {
      this.$refs["ruleForm"].clearValidate();
    },
    close() {
      this.addressModal = false;
      this.resetForm();
    },
    generateAddress() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          batchAddress(JSON.stringify(this.ruleForm), {
            headers: {
              "content-type": "application/json",
            },
          }).then((res) => {
            this.$message.success("生成成功");
            this.addressModal = false;
            this.resetForm();
            this.$parent.getAddresses();
          });
        } else {
          this.$message.error("请填写必填字段!");
        }
      });
    },
  },
  created() {},
};
</script>