样式美化

This commit is contained in:
piexlmax
2021-09-18 12:40:31 +08:00
parent 5e3df6c742
commit a5b989d278
21 changed files with 391 additions and 305 deletions
+9 -5
View File
@@ -84,12 +84,13 @@
</div>
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
<el-form ref="apiForm" :inline="true" :model="form" :rules="rules" label-width="80px">
<warning-bar title="新增API,需要在角色管理内篇日志权限才可使用" />
<el-form ref="apiForm" :model="form" :rules="rules" label-width="80px">
<el-form-item label="路径" prop="path">
<el-input v-model="form.path" autocomplete="off" />
</el-form-item>
<el-form-item label="请求" prop="method">
<el-select v-model="form.method" placeholder="请选择">
<el-select v-model="form.method" placeholder="请选择" style="width:100%">
<el-option
v-for="item in methodOptions"
:key="item.value"
@@ -105,11 +106,10 @@
<el-input v-model="form.description" autocomplete="off" />
</el-form-item>
</el-form>
<div class="warning">新增Api需要在角色管理内配置权限才可使用</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="enterDialog">确 定</el-button>
<el-button size="small" @click="closeDialog">取 消</el-button>
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
</el-dialog>
@@ -129,6 +129,7 @@ import {
} from '@/api/api'
import infoList from '@/mixins/infoList'
import { toSQLLine } from '@/utils/stringFun'
import warningBar from '@/components/warningBar/warningBar.vue'
const methodOptions = [
{
value: 'POST',
@@ -154,6 +155,9 @@ const methodOptions = [
export default {
name: 'Api',
components: {
warningBar
},
mixins: [infoList],
data() {
return {
@@ -43,13 +43,14 @@
</el-table-column>
</el-table>
</div>
<span style="color: red;font-size: 12px">注:右上角头像下拉可切换角色</span>
<warning-bar title="注:右上角头像下拉可切换角色" style="margin-top:12px;" />
<!-- 新增角色弹窗 -->
<el-dialog v-model="dialogFormVisible" :title="dialogTitle">
<el-form ref="authorityForm" :model="form" :rules="rules">
<el-form ref="authorityForm" :model="form" :rules="rules" label-width="80px">
<el-form-item label="父级角色" prop="parentId">
<el-cascader
v-model="form.parentId"
style="width:100%"
:disabled="dialogType=='add'"
:options="AuthorityOption"
:props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
@@ -66,8 +67,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="enterDialog">确 定</el-button>
<el-button size="small" @click="closeDialog">取 消</el-button>
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
</el-dialog>
@@ -102,6 +103,7 @@ import {
import Menus from '@/view/superAdmin/authority/components/menus.vue'
import Apis from '@/view/superAdmin/authority/components/apis.vue'
import Datas from '@/view/superAdmin/authority/components/datas.vue'
import warningBar from '@/components/warningBar/warningBar.vue'
import infoList from '@/mixins/infoList'
export default {
@@ -109,7 +111,8 @@ export default {
components: {
Menus,
Apis,
Datas
Datas,
warningBar
},
mixins: [infoList],
data() {
@@ -104,8 +104,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="enterDialog">确 定</el-button>
<el-button size="small" @click="closeDialog">取 消</el-button>
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
@@ -103,8 +103,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="enterDialog">确 定</el-button>
<el-button size="small" @click="closeDialog">取 消</el-button>
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
</el-dialog>
+11 -20
View File
@@ -1,25 +1,16 @@
<template>
<div>
<el-form
ref="menuForm"
:inline="true"
label-width="85px"
label-position="top"
>
<el-form-item prop="icon" style="width:100%">
<i
class="icon"
:class="'el-icon-'+ metaData.icon"
style="position: absolute; z-index: 9999; padding: 5px 10px; "
/>
<el-select v-model="metaData.icon" clearable filterable class="gva-select" placeholder="请选择">
<el-option v-for="item in options" :key="item.key" :label="item.key" :value="item.key">
<span class="icon" :class="item.label" />
<span style="float: left">{{ item.key }}</span>
</el-option>
</el-select>
</el-form-item>
</el-form>
<i
class="icon"
:class="'el-icon-'+ metaData.icon"
style="position: absolute; z-index: 9999; padding: 5px 10px; "
/>
<el-select v-model="metaData.icon" clearable filterable class="gva-select" placeholder="请选择">
<el-option v-for="item in options" :key="item.key" :label="item.key" :value="item.key">
<span class="icon" :class="item.label" />
<span style="float: left">{{ item.key }}</span>
</el-option>
</el-select>
</div>
</template>
+6 -4
View File
@@ -54,6 +54,7 @@
</el-table>
</div>
<el-dialog v-model="dialogFormVisible" :before-close="handleClose" :title="dialogTitle">
<warning-bar title="新增菜单,需要在角色管理内篇日志权限才可使用" />
<el-form
v-if="dialogFormVisible"
ref="menuForm"
@@ -128,7 +129,6 @@
</el-select>
</el-form-item>
</el-form>
<div class="warning">新增菜单需要在角色管理内配置权限才可使用</div>
<div>
<el-button
size="small"
@@ -175,8 +175,8 @@
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="enterDialog">确 定</el-button>
<el-button size="small" @click="closeDialog">取 消</el-button>
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
</el-dialog>
@@ -195,10 +195,12 @@ import {
} from '@/api/menu'
import infoList from '@/mixins/infoList'
import icon from '@/view/superAdmin/menu/icon.vue'
import warningBar from '@/components/warningBar/warningBar.vue'
export default {
name: 'Menus',
components: {
icon
icon,
warningBar
},
mixins: [infoList],
data() {
+20 -18
View File
@@ -44,7 +44,7 @@
</template>
</el-table-column>
</el-table>
<span style="color: red;font-size: 12px">注:右上角头像下拉可切换角色</span>
<warning-bar title="注:右上角头像下拉可切换角色" style="margin-top:12px;" />
<div class="gva-pagination">
<el-pagination
:current-page="page"
@@ -58,37 +58,38 @@
</div>
</div>
<el-dialog v-model="addUserDialog" custom-class="user-dialog" title="新增用户">
<el-form ref="userForm" :rules="rules" :model="userInfo">
<el-form-item label="用户名" label-width="80px" prop="username">
<el-form ref="userForm" :rules="rules" :model="userInfo" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="userInfo.username" />
</el-form-item>
<el-form-item label="密码" label-width="80px" prop="password">
<el-form-item label="密码" prop="password">
<el-input v-model="userInfo.password" />
</el-form-item>
<el-form-item label="别名" label-width="80px" prop="nickName">
<el-form-item label="别名" prop="nickName">
<el-input v-model="userInfo.nickName" />
</el-form-item>
<el-form-item label="用户角色" prop="authorityId">
<el-cascader
v-model="userInfo.authorityIds"
style="width:100%"
:options="authOptions"
:show-all-levels="false"
:props="{ multiple:true,checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
:clearable="false"
/>
</el-form-item>
<el-form-item label="头像" label-width="80px">
<div style="display:inline-block" @click="openHeaderChange">
<img v-if="userInfo.headerImg" class="header-img-box" :src="(userInfo.headerImg && userInfo.headerImg.slice(0, 4) !== 'http')?path+userInfo.headerImg:userInfo.headerImg">
<div v-else class="header-img-box">从媒体库选择</div>
</div>
</el-form-item>
<el-form-item label="用户角色" label-width="80px" prop="authorityId">
<el-cascader
v-model="userInfo.authorityIds"
:options="authOptions"
:show-all-levels="false"
:props="{ multiple:true,checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
filterable
:clearable="false"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeAddUserDialog">取 消</el-button>
<el-button type="primary" @click="enterAddUserDialog">确 定</el-button>
<el-button size="small" @click="closeAddUserDialog">取 消</el-button>
<el-button size="small" type="primary" @click="enterAddUserDialog">确 定</el-button>
</div>
</template>
</el-dialog>
@@ -110,9 +111,10 @@ import infoList from '@/mixins/infoList'
import { mapGetters } from 'vuex'
import CustomPic from '@/components/customPic/index.vue'
import ChooseImg from '@/components/chooseImg/index.vue'
import warningBar from '@/components/warningBar/warningBar.vue'
export default {
name: 'Api',
components: { CustomPic, ChooseImg },
components: { CustomPic, ChooseImg, warningBar },
mixins: [infoList],
data() {
return {