前端ui样式优化

This commit is contained in:
piexlmax
2021-09-14 19:49:06 +08:00
parent 108959c84c
commit 3706937d4a
21 changed files with 149 additions and 157 deletions
+15 -15
View File
@@ -1,7 +1,7 @@
<template>
<div>
<div class="search-term">
<el-form :inline="true" :model="searchInfo" class="demo-form-inline">
<el-form :inline="true" :model="searchInfo">
<el-form-item label="路径">
<el-input v-model="searchInfo.path" placeholder="路径" />
</el-form-item>
@@ -21,21 +21,21 @@
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('addApi')">新增</el-button>
<el-popover v-model:visible="deleteVisible" placement="top" width="160">
<p>确定要删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button>
<el-button size="mini" type="primary" @click="onDelete">确定</el-button>
</div>
<template #reference>
<el-button icon="el-icon-delete" size="mini" type="danger" style="margin-left: 10px;">批量删除</el-button>
</template>
</el-popover>
</el-form-item>
</el-form>
<div class="gva-btn-list">
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('addApi')">新增</el-button>
<el-popover v-model:visible="deleteVisible" placement="top" width="160">
<p>确定要删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button>
<el-button size="mini" type="primary" @click="onDelete">确定</el-button>
</div>
<template #reference>
<el-button icon="el-icon-delete" size="mini" type="danger" style="margin-left: 10px;">批量删除</el-button>
</template>
</el-popover>
</div>
</div>
<el-table :data="tableData" border stripe @sort-change="sortChange" @selection-change="handleSelectionChange">
<el-table-column
@@ -1,6 +1,6 @@
<template>
<div class="authority">
<div class="button-box clearflex">
<div class="gva-btn-list">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="addAuthority('0')">新增角色</el-button>
</div>
<el-table
@@ -13,7 +13,7 @@
>
<el-table-column label="角色id" min-width="180" prop="authorityId" />
<el-table-column label="角色名称" min-width="180" prop="authorityName" />
<el-table-column fixed="right" label="操作" width="460">
<el-table-column label="操作" width="460">
<template #default="scope">
<el-button size="mini" type="primary" @click="opdendrawer(scope.row)">设置权限</el-button>
<el-button
@@ -369,16 +369,10 @@ export default {
display: none;
}
}
.button-box {
padding: 10px 20px;
.el-button {
float: right;
}
}
}
.role-box {
.el-tabs__content {
height: calc(100vh - 150px);
height: calc(100vh - 72px);
overflow: auto;
}
}
@@ -1,7 +1,7 @@
<template>
<div>
<div class="clearflex">
<el-button class="fl-right" size="small" type="primary" @click="authApiEnter">确 定</el-button>
<el-button class="fl-right" size="mini" type="primary" @click="authApiEnter">确 定</el-button>
</div>
<el-tree
ref="apiTree"
@@ -1,14 +1,17 @@
<template>
<div>
<div class="clearflex" style="margin:18px">
<el-button class="fl-right" size="small" type="primary" @click="authDataEnter">确 定</el-button>
<el-button class="fl-left" size="small" type="primary" @click="all">全选</el-button>
<el-button class="fl-left" size="small" type="primary" @click="self">本角色</el-button>
<el-button class="fl-left" size="small" type="primary" @click="selfAndChildren">本角色及子角色</el-button>
<el-button class="fl-right" size="mini" type="primary" @click="authDataEnter">确 定</el-button>
<el-button class="fl-left" size="mini" type="primary" @click="all">全选</el-button>
<el-button class="fl-left" size="mini" type="primary" @click="self">本角色</el-button>
<el-button class="fl-left" size="mini" type="primary" @click="selfAndChildren">本角色及子角色</el-button>
</div>
<el-checkbox-group v-model="dataAuthorityId" @change="selectAuthority">
<el-checkbox v-for="(item,key) in authoritys" :key="key" :label="item">{{ item.authorityName }}</el-checkbox>
</el-checkbox-group>
<span>
此功能仅用于创建角色和角色的many2many关系表,具体使用还须自己结合表实现业务,详情参考示例代码(客户示例)
</span>
</div>
</template>
@@ -1,7 +1,7 @@
<template>
<div>
<div class="clearflex">
<el-button class="fl-right" size="small" type="primary" @click="relation">确 定</el-button>
<el-button class="fl-right" size="mini" type="primary" @click="relation">确 定</el-button>
</div>
<el-tree
ref="menuTree"
@@ -1,7 +1,7 @@
<template>
<div>
<div class="search-term">
<el-form :inline="true" :model="searchInfo" class="demo-form-inline">
<el-form :inline="true" :model="searchInfo">
<el-form-item label="字典名(中)">
<el-input v-model="searchInfo.name" placeholder="搜索条件" />
</el-form-item>
@@ -17,11 +17,11 @@
<el-form-item label="描述">
<el-input v-model="searchInfo.desc" placeholder="搜索条件" />
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增</el-button>
</el-form-item>
</el-form>
<div class="gva-btn-list">
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增</el-button>
</div>
</div>
<el-table
ref="multipleTable"
@@ -1,7 +1,7 @@
<template>
<div>
<div class="search-term">
<el-form :inline="true" :model="searchInfo" class="demo-form-inline">
<el-form :inline="true" :model="searchInfo">
<el-form-item label="展示值">
<el-input v-model="searchInfo.label" placeholder="搜索条件" />
</el-form-item>
@@ -14,13 +14,11 @@
<el-option key="false" label="否" value="false" />
</el-select>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增字典项</el-button>
</el-form-item>
</el-form>
<div class="gva-btn-list">
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增字典项</el-button>
</div>
</div>
<el-table
ref="multipleTable"
+1 -7
View File
@@ -1,6 +1,6 @@
<template>
<div>
<div class="button-box clearflex">
<div class="gva-btn-list">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="addMenu('0')">新增根菜单</el-button>
</div>
@@ -413,12 +413,6 @@ export default {
</script>
<style scoped lang="scss">
.button-box {
padding: 10px 20px;
.el-button {
float: right;
}
}
.warning {
color: #dc143c;
}
@@ -1,7 +1,7 @@
<template>
<div>
<div class="search-term">
<el-form :inline="true" :model="searchInfo" class="demo-form-inline">
<el-form :inline="true" :model="searchInfo">
<el-form-item label="请求方法">
<el-input v-model="searchInfo.method" placeholder="搜索条件" />
</el-form-item>
@@ -11,20 +11,20 @@
<el-form-item label="结果状态码">
<el-input v-model="searchInfo.status" placeholder="搜索条件" />
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
<el-popover v-model:visible="deleteVisible" placement="top" width="160">
<p>确定要删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button>
<el-button size="mini" type="primary" @click="onDelete">确定</el-button>
</div>
<template #reference>
<el-button icon="el-icon-delete" size="mini" type="danger" style="margin-left: 10px;">批量删除</el-button>
</template>
</el-popover>
</el-form-item>
</el-form>
<div class="gva-btn-list">
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
<el-popover v-model:visible="deleteVisible" placement="top" width="160">
<p>确定要删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button>
<el-button size="mini" type="primary" @click="onDelete">确定</el-button>
</div>
<template #reference>
<el-button icon="el-icon-delete" size="mini" type="danger" style="margin-left: 10px;">批量删除</el-button>
</template>
</el-popover>
</div>
</div>
<el-table
ref="multipleTable"
+1 -8
View File
@@ -1,6 +1,6 @@
<template>
<div>
<div class="button-box clearflex">
<div class="gva-btn-list">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="addUser">新增用户</el-button>
</div>
<el-table :data="tableData" border stripe>
@@ -242,13 +242,6 @@ export default {
</script>
<style lang="scss">
.button-box {
padding: 10px 20px;
.el-button {
float: right;
}
}
.user-dialog {
.header-img-box {
width: 200px;