bigdatascreen/src/views/index/adduser.vue

<template>
    <ItemWrap class="adduser-items" title="添加用户">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="tableData" status-icon
            label-width="auto" class="demo-ruleForm">
            <el-form-item label="用户名" prop="account">
                <el-input v-model="tableData.account" type="text" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="tableData.password" type="text" autocomplete="off" />
            </el-form-item>
            <el-form-item label="菜单权限" prop="menu">
                <el-input v-model.number="tableData.menu" disabled />
            </el-form-item>
            <el-form-item class="button-group">
                <el-button type="primary" @click="AddUsers" class="btn">
                    提交
                </el-button>
                <el-button @click="resetForm(ruleFormRef)" class="btn">重置</el-button>
            </el-form-item>
        </el-form>
    </ItemWrap>
</template>

<script lang="ts" setup>
import { reactive, ref,onMounted,defineComponent,defineProps,watch  } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { Userlist, UpdateUser, DeleteUser,GetUserByID,AddUser} from "@/api/modules/user";
const props =defineProps({
    editUserId:Number,
});
const ruleFormRef = ref<FormInstance>()
let tableData = ref({
  id: "",
  CreatedAt: "",
  account: "",
  password: "",
  state: "",
  menu: [],
});

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!')
        }
    })
}
function AddUsers(){
    AddUser({
        account:tableData.value.account,
        password:tableData.value.password,
    }).then((res)=>{
        if (res.code == 200){
            ElMessage.success("添加成功")
            tableData.value.account = ""
            tableData.value.password = ""
        }else{
            ElMessage.error("添加失败")
        }
    })
}
// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>
<style scoped>
::v-deep .el-form * {
    background-color: transparent !important;
}

.demo-ruleForm {
    margin: auto;
    text-align: center;
    font-size: 20px;
    margin-top: 120px;
}

.adduser-items {
    font-size: 25px;
    width: 100%;
    height: 500px;
}

.button-group {
    position: absolute;
    bottom: 0;
    right: 10px;
    display: flex;
    justify-content: flex-end;
}

.btn {
    margin-top: 100px;
}

::v-deep .el-input{
    font-size: 30px;
    width: 100%;
    height: 50px;
    color: rgb(255, 255, 255);
    border-color: rgb(0, 0, 0);
}
::v-deep .el-form-item__label {
    font-size: 20px; /* 修改字体大小 */
    color: #765ff8; /* 修改字体颜色 */
}
::v-deep .el-button {
    font-size: 16px;
    color: #ffffff;
}
</style>