el-dialog 组件 在<style lang=“scss“ scoped>标签

vue3 中使用element-plus的el-dialog 组件

<style>
.el-dialog.plan-text-pdf .el-dialog__body {
  height: 1485px; // 需要在 style 标签写。 建议新增个类名 .plan-text-pdf 防止重复样式
}
</style>


<style lang="scss" scoped>
:deep() .el-dialog .el-dialog__body{
  height: 1485px; // 这么写不生效
}
</style>

<template> <Dialog :title="dialogTitle" v-model="dialogVisible" width="70%" scroll> <el-form ref="formRef" :model="formData" label-width="120px" scroll-to-error v-loading="formLoading"> <el-row> <el-col :span="24"> <el-form-item label="客户:" prop="name"> <el-select v-model="formData.id" clearable placeholder="请选择" @change="getTalentInfo(formData.id)"> <el-option v-for="item in talentList" :key="item.id" :label="item.name" :value="item.id" /> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="手机号:" prop="phone"> <div>{{ formData.phone }}</div> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="成本价:" prop="cost"> <div> {{ formData.cost }}元 </div> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="成交价:" prop="cost"> <div> {{ formData.cost }}元 </div> </el-form-item> </el-col> </el-row> <div class="major" v-if="formData.majorPayloadList && formData?.majorPayloadList.length"> <div class="relative major-item" v-for="(item, i) of formData?.majorPayloadList || []" :key="i"> <el-row> <el-col :span="8"> <el-form-item label="级别:"> <div>{{ item.level }}</div> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="等级:"> <div>{{ item.subLevel }}</div> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="专业:"> <div>{{ item.major }}</div> </el-form-item> </el-col> </el-row> <el-col :span="8"> <el-form-item label="三类:"> <div>{{ item.category }}</div> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="社保:"> <div>{{ item.socialSecurityInformation }}(暂时未匹配)</div> <!-- <el-select v-model="item.socialSecurityInformation" clearable placeholder="请选择"> <el-option label="唯一社保" value="1" /> <el-option label="不买社保" value="2" /> <el-option label="不唯一社保" value="3" /> <el-option label="退休" value="4" /> </el-select> --> </el-form-item> </el-col> </div> </div> </el-form> <template #footer> <el-button type="success">转入待匹配</el-button> <el-button type="warning">暂存</el-button> <el-button type="danger">特殊状态</el-button> <el-button @click="submitForm" type="primary" :disabled="formLoading"> 确 定 </el-button> <el-button @click="dialogVisible = false">取 消</el-button> </template> </Dialog> </template> <style lang="scss" scoped> .major { border: 1px solid #8a8a8a; padding: 20px 0px; } .major-item { margin-bottom: 20px; border-bottom: 1px solid #eee; &:last-child { border-bottom: none; margin-bottom: 0; } } .validity-period { width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; } :deep(.validity-period .el-input) { width: calc(50% - 10px); } </style> 样式优化
07-12
<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"> <el-form-item label="菜单名称" prop="menuName"> <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="状态" prop="status"> <el-select v-model="queryParams.status" placeholder="菜单状态" clearable> <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:menu:add']" >新增</el-button> </el-col> <el-col :span="1.5"> <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll" >展开/折叠</el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="menuId" :default-expand-all="isExpandAll" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" > <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column> <el-table-column prop="icon" label="图标" align="center" width="100"> <template slot-scope="scope"> <svg-icon :icon-class="scope.row.icon" /> </template> </el-table-column> <el-table-column prop="orderNum" label="排序" width="60"></el-table-column> <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="status" label="状态" width="80"> <template slot-scope="scope"> <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/> </template> </el-table-column> <el-table-column label="创建时间" align="center" prop="createTime"> <template slot-scope="scope"> <span>{{ parseTime(scope.row.createTime) }}</span> </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']" >新增</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']" >删除</el-button> </template> </el-table-column> </el-table> <!-- 添加或修改菜单对话框 --> <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-row> <el-col :span="24"> <el-form-item label="上级菜单" prop="parentId"> <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true" placeholder="选择上级菜单" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="菜单类型" prop="menuType"> <el-radio-group v-model="form.menuType"> <el-radio label="M">目录</el-radio> <el-radio label="C">菜单</el-radio> <el-radio label="F">按钮</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="form.menuType != 'F'"> <el-form-item label="菜单图标" prop="icon"> <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()" > <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" /> <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly> <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" style="width: 25px;" /> <i v-else slot="prefix" class="el-icon-search el-input__icon" /> </el-input> </el-popover> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="显示排序" prop="orderNum"> <el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="菜单名称" prop="menuName"> <el-input v-model="form.menuName" placeholder="请输入菜单名称" /> </el-form-item> </el-col> <el-col :span="12" v-if="form.menuType == 'C'"> <el-form-item prop="routeName"> <el-input v-model="form.routeName" placeholder="请输入路由名称" /> <span slot="label"> <el-tooltip content="默认不填则和路由地址相同:如地址为:`user`,则名称为`User`(注意:为避免名字的冲突,特殊情况下请自定义,保证唯一性)" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 路由名称 </span> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="form.menuType != 'F'"> <el-form-item prop="isFrame"> <span slot="label"> <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 是否外链 </span> <el-radio-group v-model="form.isFrame"> <el-radio label="0">是</el-radio> <el-radio label="1">否</el-radio> </el-radio-group> </el-form-item> </el-col> <el-col :span="12" v-if="form.menuType != 'F'"> <el-form-item prop="path"> <span slot="label"> <el-tooltip content="访问的路由地址,如:`user`,如外网地址需内链访问则以`http(s)://`开头" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 路由地址 </span> <el-input v-model="form.path" placeholder="请输入路由地址" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="form.menuType == 'C'"> <el-form-item prop="component"> <span slot="label"> <el-tooltip content="访问的组件路径,如:`system/user/index`,默认在`views`目录下" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 组件路径 </span> <el-input v-model="form.component" placeholder="请输入组件路径" /> </el-form-item> </el-col> <el-col :span="12" v-if="form.menuType != 'M'"> <el-form-item prop="perms"> <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" /> <span slot="label"> <el-tooltip content="控制器中定义的权限字符,如:@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 权限字符 </span> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="form.menuType == 'C'"> <el-form-item prop="query"> <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" /> <span slot="label"> <el-tooltip content='访问路由的默认传递参数,如:`{"id": 1, "name": "ry"}`' placement="top"> <i class="el-icon-question"></i> </el-tooltip> 路由参数 </span> </el-form-item> </el-col> <el-col :span="12" v-if="form.menuType == 'C'"> <el-form-item prop="isCache"> <span slot="label"> <el-tooltip content="选择是则会被`keep-alive`缓存,需要匹配组件的`name`和地址保持一致" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 是否缓存 </span> <el-radio-group v-model="form.isCache"> <el-radio label="0">缓存</el-radio> <el-radio label="1">不缓存</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="form.menuType != 'F'"> <el-form-item prop="visible"> <span slot="label"> <el-tooltip content="选择隐藏则路由将不会出现在侧边栏,但仍然可以访问" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 显示状态 </span> <el-radio-group v-model="form.visible"> <el-radio v-for="dict in dict.type.sys_show_hide" :key="dict.value" :label="dict.value" >{{dict.label}}</el-radio> </el-radio-group> </el-form-item> </el-col> <el-col :span="12"> <el-form-item prop="status"> <span slot="label"> <el-tooltip content="选择停用则路由将不会出现在侧边栏,也不能被访问" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 菜单状态 </span> <el-radio-group v-model="form.status"> <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value" >{{dict.label}}</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </div> </template> <script> import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu" import Treeselect from "@riophae/vue-treeselect" import "@riophae/vue-treeselect/dist/vue-treeselect.css" import IconSelect from "@/components/IconSelect" export default { name: "Menu", dicts: ['sys_show_hide', 'sys_normal_disable'], components: { Treeselect, IconSelect }, data() { return { // 遮罩层 loading: true, // 显示搜索条件 showSearch: true, // 菜单表格树数据 menuList: [], // 菜单树选项 menuOptions: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 是否展开,默认全部折叠 isExpandAll: false, // 重新渲染表格状态 refreshTable: true, // 查询参数 queryParams: { menuName: undefined, visible: undefined }, // 表单参数 form: {}, // 表单校验 rules: { menuName: [ { required: true, message: "菜单名称不能为空", trigger: "blur" } ], orderNum: [ { required: true, message: "菜单顺序不能为空", trigger: "blur" } ], path: [ { required: true, message: "路由地址不能为空", trigger: "blur" } ] } } }, created() { this.getList() }, methods: { // 选择图标 selected(name) { this.form.icon = name }, /** 查询菜单列表 */ getList() { this.loading = true listMenu(this.queryParams).then(response => { this.menuList = this.handleTree(response.data, "menuId") this.loading = false }) }, /** 转换菜单数据结构 */ normalizer(node) { if (node.children && !node.children.length) { delete node.children } return { id: node.menuId, label: node.menuName, children: node.children } }, /** 查询菜单下拉树结构 */ getTreeselect() { listMenu().then(response => { this.menuOptions = [] const menu = { menuId: 0, menuName: '主类目', children: [] } menu.children = this.handleTree(response.data, "menuId") this.menuOptions.push(menu) }) }, // 取消按钮 cancel() { this.open = false this.reset() }, // 表单重置 reset() { this.form = { menuId: undefined, parentId: 0, menuName: undefined, icon: undefined, menuType: "M", orderNum: undefined, isFrame: "1", isCache: "0", visible: "0", status: "0" } this.resetForm("form") }, /** 搜索按钮操作 */ handleQuery() { this.getList() }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm") this.handleQuery() }, /** 新增按钮操作 */ handleAdd(row) { this.reset() this.getTreeselect() if (row != null && row.menuId) { this.form.parentId = row.menuId } else { this.form.parentId = 0 } this.open = true this.title = "添加菜单" }, /** 展开/折叠操作 */ toggleExpandAll() { this.refreshTable = false this.isExpandAll = !this.isExpandAll this.$nextTick(() => { this.refreshTable = true }) }, /** 修改按钮操作 */ handleUpdate(row) { this.reset() this.getTreeselect() getMenu(row.menuId).then(response => { this.form = response.data this.open = true this.title = "修改菜单" }) }, /** 提交按钮 */ submitForm: function() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.menuId != undefined) { updateMenu(this.form).then(response => { this.$modal.msgSuccess("修改成功") this.open = false this.getList() }) } else { addMenu(this.form).then(response => { this.$modal.msgSuccess("新增成功") this.open = false this.getList() }) } } }) }, /** 删除按钮操作 */ handleDelete(row) { this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function() { return delMenu(row.menuId) }).then(() => { this.getList() this.$modal.msgSuccess("删除成功") }).catch(() => {}) } } } </script> 美化
09-24
下面的代码是干什么用的,请生成说明注释,同时还有什么改进: <template> <div class="app-container"> <el-card class="box-table"> <el-form :inline="true" class="demo-form-inline" :model="searchForm"> <el-form-item label="账号"> <el-input placeholder="请输入账号" v-model="searchForm.username"></el-input> </el-form-item> <el-form-item label="姓名"> <el-input placeholder="请输入姓名" v-model="searchForm.name"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="handleSearch">查询</el-button> <el-button @click="handleAdd">新增</el-button> </el-form-item> </el-form> <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row size="small"> <el-table-column align="center" label="ID" prop="id"></el-table-column> <el-table-column align="center" label="账号" prop="username"></el-table-column> <el-table-column align="center" label="姓名" prop="name"></el-table-column> <el-table-column align="center" label="性别" prop="gender"> <template slot-scope="scope"> <el-tag type="success" v-if="scope.row.gender == 1">男</el-tag> <el-tag type="danger" v-else>女</el-tag> </template> </el-table-column> <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button> <el-popconfirm title="确定删除吗?" @confirm="deleteCofirm(scope.row)"> <el-button type="text" slot="reference" size="small">删除</el-button> </el-popconfirm> </template> </el-table-column> </el-table> <el-pagination class="page-box" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </el-card> <!-- 添加/修改的弹框 --> <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible"> <el-form label-position="left" :model="dialogForm" label-width="80px"> <el-form-item label="账号"> <el-input placeholder="请输入账号" v-model="dialogForm.username" autocomplete="off"></el-input> </el-form-item> <el-form-item label="密码"> <el-input type="password" placeholder="请输入密码" v-model="dialogForm.password" autocomplete="off"></el-input> </el-form-item> <el-form-item label="姓名"> <el-input placeholder="请输入姓名" v-model="dialogForm.name" autocomplete="off"></el-input> </el-form-item> <el-form-item label="性别"> <el-select v-model="dialogForm.gender" placeholder="请选择"> <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="dialogConfirm">确 定</el-button> </div> </el-dialog> </div> </template> <script> import { findAdminPageAPI, // 导入查询管理员信息的 API addAdminAPI, // 导入新增管理员的 API modifyAdminAPI, // 导入修改管理员信息的 API removeAdminAPI, // 导入删除管理员的 API } from "@/api/admin"; export default { data() { return { list: null, // 管理员列表数据 listLoading: true, // 列表加载状态 pageSize: 10, // 每页显示条数 pageNum: 1, // 当前页码 total: 0, // 总条数 searchForm: {}, // 搜索表单数据 dialogTitle: "添加", // 弹框标题,默认为添加 dialogFormVisible: false, // 弹框显示状态 dialogForm: {}, // 弹框表单数据 genderOptions: [ // 性别选项 { label: '男', value: 1 }, { label: '女', value: 2 } ], }; }, created() { this.fetchData(); }, methods: { handleSizeChange(val) {//每页显示条数改变 this.pageSize = val; this.fetchData(); }, handleCurrentChange(val) {//当前页码改变 this.pageNum = val; this.fetchData(); }, handleSearch() {//点击搜索按钮 this.fetchData(); }, async fetchData() {//查询数据 this.listLoading = true; let response = await findAdminPageAPI( this.pageNum, this.pageSize, this.searchForm ); this.list = response.data.records; this.total = response.data.total; this.listLoading = false; }, handleAdd() {//点击新增按钮-显示弹框 this.dialogTitle = "新增"; this.dialogFormVisible = true; this.dialogForm = {gender: 1}; }, handleEdit(row) {//点击修改按钮-显示弹框 this.dialogTitle = "修改"; this.dialogFormVisible = true; this.dialogForm = { ...row }; }, async dialogConfirm() {//点击弹框确定按钮 let res = null; if (this.dialogTitle == "新增") { res = await addAdminAPI(this.dialogForm); } else { res = await modifyAdminAPI(this.dialogForm); } if (res.flag) { this.dialogFormVisible = false; } this.$message({ message: res.message, type: res.flag ? "success" : "error", }); this.fetchData(); }, async deleteCofirm(row) {//点击确定删除按钮 this.pageNum = 1; const res = await removeAdminAPI(row.id); this.$message({ message: res.message, type: res.flag ? "success" : "error", }); this.fetchData(); }, }, }; </script> <style lang="less" scoped> .page-box { margin-top: 20px; } </style>
06-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值