admin-cms/src/layout/otheruser/otheruserForm.vue

<template>
  <div id="otheruserForm">
    <el-row>
      <el-col :span="24" class="form">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名称" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入用户名称"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="注册密码" prop="passwd">
            <el-input v-model="ruleForm.passwd" placeholder="请输入注册密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="用户类型" prop="type">
            <el-select v-model="ruleForm.type" placeholder="请选择用户类型">
              <el-option label="金控集团后台管理员" value="0"></el-option>
              <el-option label="金融机构用户" value="1"></el-option>
              <el-option label="政府用户" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="resetForm('ruleForm')">取消</el-button>
            <el-button type="primary" size="small" @click="submitForm('ruleForm')">提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'otheruserForm',
  props: {
    ruleForm: null,
  },
  components: {},
  data: () => ({
    rules: {
      phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
      passwd: [{ required: true, message: '请输入注册密码', trigger: 'blur' }],
      type: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
    },
  }),
  created() {},
  computed: {},
  methods: {
    submitForm() {
      this.$emit('submitForm', { data: this.ruleForm });
    },
    resetForm() {
      this.$emit('resetForm');
    },
  },
};
</script>

<style lang="less" scoped>
.form {
  padding: 0 200px 0 0;
}
</style>