新增管理员页面制作
1.修改AdminUser.vue
vue
<template>
<el-main>
<!-- 搜索栏 -->
<el-form :model="searchParm" :inline="true" size="default">
<el-form-item>
<el-input v-model="searchParm.nickName" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item>
<!-- 搜索按钮 -->
<el-button icon="Search"></el-button>
<!-- danger 按钮 plain 纯按钮浅色 -->
<el-button type="danger" plain>重置</el-button>
<el-button type="primary" @click="addBtn">
新增
</el-button>
</el-form-item>
</el-form>
<!-- 新增、编辑弹框 -->
<SysDialog :title="dialog.title" :width="dialog.width" :height="dialog.height" :visible="dialog.visible"
@on-close="onClose" @on-confirm="commit">
<template v-slot:content>
<el-form :model="addModel" ref="addRef" :rules="rules" label-width="80px" :inline="false"
size="default">
<el-form-item prop="nickName" label="姓名:">
<el-input v-model="addModel.nickName"></el-input>
</el-form-item>
<el-form-item prop="sex" label="性别:">
<el-radio-group v-model="addModel.sex">
<el-radio :label="'0'">男</el-radio>
<el-radio :label="'1'">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item prop="phone" label="电话:">
<el-input v-model="addModel.phone"></el-input>
</el-form-item>
<el-form-item prop="username" label="账号:">
<el-input v-model="addModel.username"></el-input>
</el-form-item>
<el-form-item prop="password" label="密码:">
<el-input v-model="addModel.password"></el-input>
</el-form-item>
<el-form-item prop="status" label="状态:">
<el-radio-group v-model="addModel.status">
<el-radio :label="'0'">启用</el-radio>
<el-radio :label="'1'">停用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</template>
</SysDialog>
</el-main>
</template>
<script setup lang="ts">
import { reactive,ref } from "vue";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { FormInstance } from "element-plus";
//表单ref属性
const addRef = ref<FormInstance>();
//获取弹框属性
const { dialog, onClose } = useDialog();
//搜索绑定的对象
const searchParm = reactive({
userId: "",
username: "",
password: "",
nickName: "",
phone: "",
sex: "",
status: "",
});
//新增弹框
const addBtn = () => {
dialog.height = 300;
dialog.visible = true;
};
//新增表单绑定的对象
const addModel = reactive({
userId: "",
username: "",
password: "",
nickName: "",
phone: "",
sex: "",
status: "",
});
//表单验证规则
const rules = {
nickName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
username: [{ required: true, message: "请输入账户", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
status: [{ required: true, message: "请选择状态", trigger: "blur" }],
};
//新增、编辑提交
const commit = () => {
//表单验证
addRef.value?.validate(async (valid) => {
if (valid) {
console.log(addModel);
//提交表单数据
//关闭弹框
dialog.visible = false;
}
});
};
</script>
<style scoped lang="scss"></style>
2. 修改Index.vue
scss
.mymain{
background-color: rgb(244, 244, 244);
padding: 0px;
}
有个组件名写错了,重构,SysDialog.vue
3. 效果图