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-col :span="24">
            <el-form-item label="用户名称" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入用户名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <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-col>
          <el-col :span="24">
            <el-form-item label="用户角色" prop="characterid">
              <el-select v-model="ruleForm.characterid" placeholder="请选择用户角色">
                <el-option v-for="(item, index) in charList" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="clickBtn">
            <el-form-item>
              <el-button type="primary" size="small" @click="submitForm('ruleForm')">提交</el-button>
              <el-button size="small" @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'otheruserForm',
  props: {
    ruleForm: null,
    charList: null,
  },
  components: {},
  data: () => ({
    rules: {
      phone: [{ 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>
p {
  padding: 0;
  margin: 0;
}
.top .shu {
  float: left;
  width: 4px;
  height: 20px;
  background: rgba(233, 2, 29, 1);
}
.top .title {
  float: left;
  padding: 0 10px;
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: rgba(40, 40, 40, 1);
}
/deep/.el-textarea__inner {
  min-height: 100px !important;
}
/deep/.select {
  width: 632px;
}
.selects {
  width: 473px;
  margin: 0 15px 0 0;
}
/deep/.el-radio__input.is-checked + .el-radio__label {
  color: #e9021d;
}
/deep/.el-radio__input.is-checked .el-radio__inner {
  border-color: #e9021d;
  background: #e9021d;
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #e9021d;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #e9021d;
  border-color: #e9021d;
}
/deep/.el-checkbox-button,
.el-checkbox-button__inner {
  margin: 0 15px 0 0;
}
/deep/.el-checkbox-button__inner {
  padding: 7px 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
/deep/.el-checkbox-button__inner:hover {
  color: #e9021d;
}
/deep/.el-checkbox-button:first-child .el-checkbox-button__inner {
  border-left: 1px solid #ccc;
  border-radius: 5px;
}
/deep/.el-checkbox-button:last-child .el-checkbox-button__inner {
  border-radius: 5px;
}
/deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
  color: #e9021d;
  background-color: #ffffff;
  border-color: #e9021d;
}
/deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
  box-shadow: none;
}
/deep/.el-switch.is-checked .el-switch__core {
  border-color: #e9021d;
  background-color: #e9021d;
}
.clickBtn .el-button {
  width: 100px;
  height: 40px;
  padding: 0;
  color: #ffffff;
  background: #b9b9b9;
  border-radius: 4px;
  margin: 40px;
}
.clickBtn {
  text-align: center;
  margin: 40px 0;
  border-top: 1px solid #ccc;
}
.clickBtn .el-button:first-child {
  background-color: #e9021d;
}
</style>