yvan/Study
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式美化

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
web/src/view/example/customer/customer.vue
+2 -2
View File
@@ -59,8 +59,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>
web/src/view/example/excel/excel.vue
+2 -2
View File
@@ -17,8 +17,8 @@
</div>
<el-table :data="tableData" row-key="ID">
<el-table-column label="ID" min-width="100" prop="ID" />
<el-table-column label="路由Name" min-width="160" prop="name" />
<el-table-column label="路由Path" min-width="160" prop="path" />
<el-table-column show-overflow-tooltip label="路由Name" min-width="160" prop="name" />
<el-table-column show-overflow-tooltip label="路由Path" min-width="160" prop="path" />
<el-table-column label="是否隐藏" min-width="100" prop="hidden">
<template #default="scope">
web/src/view/layout/setting/index.vue
+25 -37
View File
@@ -9,30 +9,25 @@
>
<div class="setting_body">
<div class="setting_card">
<div class="setting_title">侧边栏主题 (注：自定义请先配置背景色)</div>
<div class="setting_content">
<div class="theme-box">
<div class="item" @click="changeMode('light')">
<i v-if="mode === 'light'" class="el-icon-check check" />
<img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
<div class="item-top">
<i v-if="mode === 'light'" class="el-icon-check check" />
<img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
</div>
<p>
简约白
</p>
</div>
<div class="item" @click="changeMode('dark')">
<i v-if="mode === 'dark'" class="el-icon-check check" />
<img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
</div>
</div>
<div class="color-box">
<div>
<div class="setting_title">自定义背景色</div>
<el-color-picker :value="sideMode" @change="changeMode" />
</div>
<div>
<div class="setting_title">自定义基础色</div>
<el-color-picker :value="baseColor" @change="changeBaseColor" />
</div>
<div>
<div class="setting_title">活跃色</div>
<el-color-picker :value="activeColor" @change="activeColorChange" />
<div class="item-top">
<i v-if="mode === 'dark'" class="el-icon-check check" />
<img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
</div>
<p>
商务黑
</p>
</div>
</div>
</div>
@@ -53,7 +48,7 @@ export default {
}
},
computed: {
...mapGetters('user', ['sideMode', 'baseColor', 'activeColor', 'mode'])
...mapGetters('user', ['mode'])
},
methods: {
handleClose() {
@@ -69,20 +64,6 @@ export default {
}
this.$store.dispatch('user/changeSideMode', e)
},
changeBaseColor(e) {
if (e === null) {
this.$store.dispatch('user/changeBaseColor', '#fff')
return
}
this.$store.dispatch('user/changeBaseColor', e)
},
activeColorChange(e) {
if (e === null) {
this.$store.dispatch('user/changeActiveColor', '#1890ff')
return
}
this.$store.dispatch('user/changeActiveColor', e)
}
}
}
</script>
@@ -126,17 +107,24 @@ export default {
}
}
.item{
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-right: 20px;
.item-top{
position: relative;
}
.check{
position: absolute;
font-size: 20px;
color: #00afff;
right:10px;
bottom: 10px;
}
img{
margin-right: 20px;
p{
text-align: center;
font-size: 12px;
}
}
}
web/src/view/person/person.vue
+2 -2
View File
@@ -93,8 +93,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="showPassword=false">取 消</el-button>
<el-button type="primary" @click="savePassword">确 定</el-button>
<el-button size="small" @click="showPassword=false">取 消</el-button>
<el-button size="small" type="primary" @click="savePassword">确 定</el-button>
</div>
</template>
</el-dialog>
web/src/view/superAdmin/api/api.vue
+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 {
web/src/view/superAdmin/authority/authority.vue
+8 -5
View File
@@ -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() {
web/src/view/superAdmin/dictionary/sysDictionary.vue
+2 -2
View File
@@ -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>
web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
+2 -2
View File
@@ -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>
web/src/view/superAdmin/menu/icon.vue
+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>
web/src/view/superAdmin/menu/menu.vue
+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() {
web/src/view/superAdmin/user/user.vue
+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 {
web/src/view/systemTools/autoCode/component/fieldDialog.vue
+65 -72
View File
@@ -1,6 +1,6 @@
<template>
<div>
<span style="color:red">搜索时如果条件为LIKE只支持字符串</span>
<warning-bar title="id , created_at , updated_at , deleted_at 会自动生成请勿重复创建。搜索时如果条件为LIKE只支持字符串" />
<el-form
ref="fieldDialogFrom"
:model="middleDate"
@@ -9,97 +9,88 @@
:rules="rules"
>
<el-form-item label="Field名称" prop="fieldName">
<el-col :span="6">
<el-input v-model="middleDate.fieldName" autocomplete="off" />
</el-col>
<el-col :offset="1" :span="2">
<el-button size="mini" @click="autoFill">自动填充</el-button>
</el-col>
<el-input v-model="middleDate.fieldName" autocomplete="off" style="width:80%" />
<el-button size="mini" style="width:18%;margin-left:2%" @click="autoFill">自动填充</el-button>
</el-form-item>
<el-form-item label="Field中文名" prop="fieldDesc">
<el-col :span="6">
<el-input v-model="middleDate.fieldDesc" autocomplete="off" />
</el-col>
<el-input v-model="middleDate.fieldDesc" autocomplete="off" />
</el-form-item>
<el-form-item label="FieldJSON" prop="fieldJson">
<el-col :span="6">
<el-input v-model="middleDate.fieldJson" autocomplete="off" />
</el-col>
<el-input v-model="middleDate.fieldJson" autocomplete="off" />
</el-form-item>
<el-form-item label="数据库字段名" prop="columnName">
<el-col :span="6">
<el-input v-model="middleDate.columnName" autocomplete="off" />
</el-col>
<el-input v-model="middleDate.columnName" autocomplete="off" />
</el-form-item>
<el-form-item label="数据库字段描述" prop="comment">
<el-col :span="6">
<el-input v-model="middleDate.comment" autocomplete="off" />
</el-col>
<el-input v-model="middleDate.comment" autocomplete="off" />
</el-form-item>
<el-form-item label="Field数据类型" prop="fieldType">
<el-col :span="8">
<el-select
v-model="middleDate.fieldType"
placeholder="请选择field数据类型"
clearable
@change="getDbfdOptions"
>
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
<el-select
v-model="middleDate.fieldType"
style="width:100%"
placeholder="请选择field数据类型"
clearable
@change="getDbfdOptions"
>
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="数据库字段类型" prop="dataType">
<el-col :span="8">
<el-select
v-model="middleDate.dataType"
:disabled="!middleDate.fieldType"
placeholder="请选择数据库字段类型"
clearable
>
<el-option
v-for="item in dbfdOptions"
:key="item.label"
:label="item.label"
:value="item.label"
/>
</el-select>
</el-col>
<el-select
v-model="middleDate.dataType"
style="width:100%"
:disabled="!middleDate.fieldType"
placeholder="请选择数据库字段类型"
clearable
>
<el-option
v-for="item in dbfdOptions"
:key="item.label"
:label="item.label"
:value="item.label"
/>
</el-select>
</el-form-item>
<el-form-item label="数据库字段长度" prop="dataTypeLong">
<el-col :span="8">
<el-input v-model="middleDate.dataTypeLong" placeholder="自定义类型必须指定长度" :disabled="!middleDate.dataType" />
</el-col>
<el-input v-model="middleDate.dataTypeLong" placeholder="自定义类型必须指定长度" :disabled="!middleDate.dataType" />
</el-form-item>
<el-form-item label="Field查询条件" prop="fieldSearchType">
<el-col :span="8">
<el-select v-model="middleDate.fieldSearchType" placeholder="请选择Field查询条件" clearable>
<el-option
v-for="item in typeSearchOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
<el-select
v-model="middleDate.fieldSearchType"
style="width:100%"
placeholder="请选择Field查询条件"
clearable
>
<el-option
v-for="item in typeSearchOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="关联字典" prop="dictType">
<el-col :span="8">
<el-select v-model="middleDate.dictType" :disabled="middleDate.fieldType!=='int'" placeholder="请选择字典" clearable>
<el-option
v-for="item in dictOptions"
:key="item.type"
:label="`${item.type}(${item.name})`"
:value="item.type"
/>
</el-select>
</el-col>
<el-select
v-model="middleDate.dictType"
style="width:100%"
:disabled="middleDate.fieldType!=='int'"
placeholder="请选择字典"
clearable
>
<el-option
v-for="item in dictOptions"
:key="item.type"
:label="`${item.type}(${item.name})`"
:value="item.type"
/>
</el-select>
</el-form-item>
</el-form>
</div>
@@ -109,9 +100,11 @@
import { getDict } from '@/utils/dictionary'
import { toLowerCase, toSQLLine } from '@/utils/stringFun'
import { getSysDictionaryList } from '@/api/sysDictionary'
import warningBar from '@/components/warningBar/warningBar.vue'
export default {
name: 'FieldDialog',
components: { warningBar },
props: {
dialogMiddle: {
type: Object,
web/src/view/systemTools/autoCode/index.vue
+1 -1
View File
@@ -149,7 +149,7 @@
<PreviewCodeDialog v-if="previewFlag" :preview-code="preViewCode" />
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="previewFlag = false">确 定</el-button>
<el-button size="small" type="primary" @click="previewFlag = false">确 定</el-button>
</div>
</template>
</el-dialog>
web/src/view/systemTools/system/system.vue
+2 -2
View File
@@ -10,7 +10,7 @@
<el-input v-model.number="config.system.addr" />
</el-form-item>
<el-form-item label="数据库类型">
<el-select v-model="config.system.dbType">
<el-select v-model="config.system.dbType" style="width:100%">
<el-option value="mysql" />
<el-option value="sqlite" />
<el-option value="sqlserver" />
@@ -18,7 +18,7 @@
</el-select>
</el-form-item>
<el-form-item label="Oss类型">
<el-select v-model="config.system.ossType">
<el-select v-model="config.system.ossType" style="width:100%">
<el-option value="local" />
<el-option value="qiniu" />
<el-option value="tencent-cos" />