21.新增管理员页面制作

news2024/12/23 10:50:31

新增管理员页面制作

1.修改AdminUser.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

 .mymain{
        background-color: rgb(244, 244, 244);
        padding: 0px;
    }

有个组件名写错了,重构,SysDialog.vue

3. 效果图

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2106441.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

9. GIS技术支持工程师岗位职责、技术要求和常见面试题

本系列文章目录&#xff1a; 1. GIS开发工程师岗位职责、技术要求和常见面试题 2. GIS数据工程师岗位职责、技术要求和常见面试题 3. GIS后端工程师岗位职责、技术要求和常见面试题 4. GIS前端工程师岗位职责、技术要求和常见面试题 5. GIS工程师岗位职责、技术要求和常见面试…

STM32(九):定时器——TIM编码器接口

Encoder Interface 编码器接口 编码器接口可接收增量&#xff08;正交&#xff09;编码器的信号&#xff0c;根据编码器旋转产生的正交信号脉冲&#xff0c;自动控制CNT自增或自减&#xff0c;从而指示编码器的位置、旋转方向和旋转速度。 每个高级定时器和通用定时器都拥有1个…

深度学习(七)-计算机视觉基础

计算机视觉 计算机视觉在广义上是和图像相关的技术总称。包括图像的采集获取&#xff0c;图 像的压缩编码&#xff0c;图像的存储和传输&#xff0c;图像的合成&#xff0c;三维图像重建&#xff0c;图像增强&#xff0c;图像修复&#xff0c;图像的分类和识别&#xff0c;目…

探索中国星坤:构建全球合作网络,服务全球客户!

在全球化的浪潮中&#xff0c;中国星坤以其卓越的产品和服务&#xff0c;成为全球通信、计算机、医疗电子等多个行业的领军企业。通过构建广泛的全球代理商合作伙伴网络&#xff0c;星坤不仅提升了自身的品牌影响力&#xff0c;更确保了其产品和服务的全球覆盖。本文将探讨星坤…

windows 如何使用免安装版 node?

由于工作需要&#xff0c;本机无法自主安装软件&#xff0c;于是产生了这样一个需求。苦寻全网良久才实现&#xff0c;所以必须把这个过程记录下来&#xff0c;以防后期再次遇到同样的问题。 &#xff08;1&#xff09;首先免安装版 node 下载 node 下载地址 根据自己的需要…

calibre:如何find object

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 往期文章:

最新热门火爆小程序项目 在线敲木鱼小程序源码系统 功能强大 带完整的安装代码包以及搭建教程

系统概述 本系统采用微信小程序框架开发&#xff0c;充分利用了微信平台庞大的用户基础及丰富的生态资源。技术架构上&#xff0c;主要包括前端界面设计、后端逻辑处理、数据库管理以及云服务等部分。前端采用微信小程序提供的WXML、WXSS等语言进行页面布局与样式设计&#xf…

大白话说什么是“MLLM”多模态大语言模型

1. 什么是MLLM多模态大语言模型 1.1 先来思考一个问题 如果上传了一张图片&#xff0c;并向大模型提问。“图片中绿色框框中的人是谁&#xff1f;” 大模型回答&#xff1a;“那是波多野吉衣老师” 请问&#xff0c;大模型是怎么做到的&#xff1f; 我们用常规的思路来想一…

构建全景式智慧文旅生态:EasyCVR视频汇聚平台与AR/VR技术的深度融合实践

在科技日新月异的今天&#xff0c;AR&#xff08;增强现实&#xff09;和VR&#xff08;虚拟现实&#xff09;技术正以前所未有的速度改变着我们的生活方式和工作模式。而EasyCVR视频汇聚平台&#xff0c;作为一款基于云-边-端一体化架构的视频融合AI智能分析平台&#xff0c;可…

黑神话悟空大头怪怎么打 黑神话悟空大头怪攻打攻略

《黑神话悟空》中的大头娃娃作为新手村的敌人&#xff0c;让不少自信满满的玩家受挫&#xff0c;即便是花费近三百元成为“天命人”的玩家也难以轻易通过&#xff0c;甚至有的玩家连续奋战多日都无法顺利离开新手村。为此&#xff0c;小编特地整理了一份《黑神话悟空》大头娃娃…

测试基础|记一次CPU冲高的排查过程!

背景 需求需要计算大容量环境下多个数据库数据的负载&#xff0c;并把分库关系迁移&#xff0c;以实现多个数据库节点负载均衡。 现象 执行分库迁移脚本后&#xff0c;脚本执行进度始终保持 10%&#xff0c;组件 CPU 使用率冲到 95% 以上&#xff0c;且后台没有打印出有用的…

【安当产品应用案例100集】015-企业内部CA管理体系的构建与实践

CA证书&#xff0c;想必大家都不陌生。在身份验证、加密通信、数据完整性、法律合规及企业内部信任等多个场景中&#xff0c;都扮演着至关重要的角色。它是保障在线交易、通信安全、身份验证和法律合规等方面不可或缺的技术工具。通过CA证书&#xff0c;企业和个人可以构建一个…

ACP绿光激光模组在工业领域发挥的重要作用

在当今这个高度自动化与精密制造并行的时代&#xff0c;激光技术作为现代工业的核心驱动力之一&#xff0c;正以前所未有的速度改变着我们的生产方式。其中&#xff0c;ACP绿光激光模组以其独特的优势&#xff0c;在工业领域中发挥着不可替代的重要作用&#xff0c;成为推动产业…

PPT分享:华为数据、应用、技术架构设计方法(干货)

PPT下载链接见文末~ 华为作为一家全球领先的信息与通信技术&#xff08;ICT&#xff09;解决方案供应商&#xff0c;其企业架构的设计涉及业务架构、数据架构、应用架构及技术架构等多个层面&#xff0c;这些架构共同构成了华为数字化转型和持续创新的基础。以下结合PPT内容&a…

cesium 加载模型动画最详细版

加载模型有俩种方法 primitives和entities。新版的目前 "cesium": "^1.119.0",又有更新&#xff0c;以下以次距离。 新版的primitive async addAnimatedPrimityModel(lngLatHeight, option) {const position Cesium.Cartesian3.fromDegrees(lngLatHeight…

GatewayWorker框架的详解和应用

一、介绍 1. 简介 GatewayWorker基于Workerman开发的一个项目框架&#xff0c;用于快速开发TCP长连接应用&#xff0c;例如app推送服务端、即时IM服务端、游戏服务端、物联网、智能家居等等 GatewayWorker使用经典的Gateway和Worker进程模型。Gateway进程负责维持客户端连接…

代码随想录——柱状图中最大的矩形(Leetcode 84)

题目链接 我的解法&#xff08;暴力&#xff09; 果不其然&#xff0c;超时是暴力解法的宿命… 双层for循环真的很好懂&#xff0c;每次解题都感觉我应该是一个单细胞生物… class Solution {public int largestRectangleArea(int[] heights) {int max 0;for(int i 0; i …

Java高效透明可靠 同城搬家系统小程序源码

高效透明可靠 —— 同城搬家系统 &#x1f69a;【开篇&#xff1a;告别繁琐&#xff0c;迎接高效搬家新时代】&#x1f69a; 搬家&#xff0c;对于很多人来说&#xff0c;都是一件既期待又头疼的事情。期待新家的温馨与美好&#xff0c;却又头疼于搬家的繁琐与复杂。但今天&a…

西湖大学卢培龙团队突破:精确从头设计异手性蛋白复合物,开启镜像蛋白研究新篇章

在生物科学的浩瀚星空中&#xff0c;蛋白质作为生命活动的基本承担者&#xff0c;其设计与合成一直是科学家们不懈探索的领域。近日&#xff0c;西湖大学卢培龙团队携手清华大学刘磊团队&#xff0c;在《Cell Research》期刊上发表了一项革命性的研究成果——首次实现了异手性蛋…

自组网融合通信方案技术详解

自组网&#xff08;Ad Hoc Network&#xff09;&#xff0c;又称无中心网络或多跳网络&#xff0c;是一种无需固定基础设施支持&#xff0c;由多个动态节点自组织形成的临时性通信网络。它具备高度的灵活性和鲁棒性&#xff0c;能够在复杂多变的环境中快速部署和自适应调整。自…