admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化页面样式

Browse Source
This commit is contained in:
李强
2023-11-30 21:31:55 +08:00
parent 120c737de7
commit 7691481006
4 changed files with 42 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
backend/dvadmin/system/fixtures/init_systemconfig.json
View File

@@ -130,7 +130,7 @@
"parent": 1, "parent": 1,
"title": "版权信息", "title": "版权信息",
"key": "copyright", "key": "copyright",
"value": "2021-2022 django-vue-admin.com 版权所有", "value": "2021-2024 django-vue-admin.com 版权所有",
"sort": 4, "sort": 4,
"status": true, "status": true,
"data_options": null, "data_options": null,

27
web/index.html
View File

@@ -10,23 +10,22 @@
/> />
<meta <meta
name="description" name="description"
content="django-vue3-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus, 是一款全栈，快速，开源的后台管理系统！" content="django-vue-admin 基于RBAC模型的权限控制的一整套基础开发平台，权限粒度达到列级别，前后端分离，后端采用django + django-rest-framework，前端采用基于 vue3 + CompositionAPI + typescript + vite + element plus"
/> />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<title>django-vue3-admin</title> <title>django-vue-admin</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="text/javascript"> <script>
// let _hmt = _hmt || []; var _hmt = _hmt || [];
(function () { (function() {
let hm = document.createElement('script'); var hm = document.createElement("script");
hm.src = 'https://hm.baidu.com/hm.js?d9c8b87d10717013641458b300c552e4'; hm.src = "https://hm.baidu.com/hm.js?9ba8fc809b5584167a2fb9b31bb3970c";
let s = document.getElementsByTagName('script')[0]; var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s); s.parentNode.insertBefore(hm, s);
})(); })();
</script> </script>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=wsijQt8sLXrCW71YesmispvYHitfG9gv&s=1"></script>
</body> </body>
</html> </html>

2
web/src/views/system/login/index.vue
View File

@@ -42,7 +42,7 @@
</div> </div>
<div class="login-authorization"> <div class="login-authorization">
<p>Copyright © {{getSystemConfig['login.copyright'] || '2021-2022 django-vue-admin.com'}} 版权所有</p> <p>Copyright © {{getSystemConfig['login.copyright'] || '2021-2024 django-vue-admin.com'}} 版权所有</p>
<p class="la-other"> <p class="la-other">
<a href="https://beian.miit.gov.cn" target="_blank">{{getSystemConfig['login.keep_record'] || '晋ICP备18005113号-3'}}</a> <a href="https://beian.miit.gov.cn" target="_blank">{{getSystemConfig['login.keep_record'] || '晋ICP备18005113号-3'}}</a>
| |

42
web/src/views/system/role/components/PermissionComNew/index.vue
View File

@@ -10,7 +10,7 @@
<el-tag>{{ props.roleName }}</el-tag> <el-tag>{{ props.roleName }}</el-tag>
</div> </div>
</el-col> </el-col>
<el-col :span="6" :offset="8"> <el-col :span="6">
<div> <div>
<el-button size="small" type="primary" class="pc-save-btn" @click="handleSavePermission">保存菜单授权 <el-button size="small" type="primary" class="pc-save-btn" @click="handleSavePermission">保存菜单授权
</el-button> </el-button>
@@ -20,15 +20,16 @@
</template> </template>
<div class="permission-com"> <div class="permission-com">
<el-collapse v-model="collapseCurrent" @change="handleCollapseChange" accordion> <el-collapse v-model="collapseCurrent" @change="handleCollapseChange" accordion>
<el-collapse-item v-for="(item,mIndex) in menuData" :key="mIndex" :name="mIndex"> <el-collapse-item v-for="(item,mIndex) in menuData" :key="mIndex" :name="mIndex"
style=" background-color: #fafafa;">
<template #title> <template #title>
<div @click.stop="null"> <div>
<p class="pc-collapse-title"> <div class="pc-collapse-title">
<el-checkbox v-model="item.isCheck"> <el-checkbox v-model="item.isCheck" @click.stop="null">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</el-checkbox> </el-checkbox>
</p> </div>
<div v-show="!collapseCurrent.includes(mIndex)"> <div v-show="!collapseCurrent.includes(mIndex)" @click.stop="null" style="text-align: left;">
<el-checkbox v-for="btn in item.btns" :key="btn.value" :label="btn.value" v-model="btn.isCheck"> <el-checkbox v-for="btn in item.btns" :key="btn.value" :label="btn.value" v-model="btn.isCheck">
{{ btn.name }} {{ btn.name }}
</el-checkbox> </el-checkbox>
@@ -40,7 +41,7 @@
<p>允许对这些数据有以下操作</p> <p>允许对这些数据有以下操作</p>
<el-checkbox v-for="(btn,bIndex) in item.btns" :key="bIndex" v-model="btn.isCheck" :label="btn.value"> <el-checkbox v-for="(btn,bIndex) in item.btns" :key="bIndex" v-model="btn.isCheck" :label="btn.value">
<div class="btn-item"> <div class="btn-item">
{{ btn.data_range!==null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }} {{ btn.data_range !== null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }}
<span v-show="btn.isCheck" @click.stop.prevent="handleSettingClick(item, btn.id)"> <span v-show="btn.isCheck" @click.stop.prevent="handleSettingClick(item, btn.id)">
<el-icon><Setting/></el-icon> <el-icon><Setting/></el-icon>
</span> </span>
@@ -51,7 +52,7 @@
<div class="pccm-item"> <div class="pccm-item">
<p>对这些数据有以下字段权限</p> <p>对这些数据有以下字段权限</p>
<ul class="columns-list"> <ul class="columns-list">
<li class="columns-head"> <li class="columns-head">
<div class="width-txt"> <div class="width-txt">
<span>字段</span> <span>字段</span>
@@ -59,7 +60,7 @@
<div v-for="(head,hIndex) in column.header" :key="hIndex" class="width-check"> <div v-for="(head,hIndex) in column.header" :key="hIndex" class="width-check">
<el-checkbox :label="head.value" @change="handleColumnChange($event, item, head.value)"> <el-checkbox :label="head.value" @change="handleColumnChange($event, item, head.value)">
<span>{{head.label}}</span> <span>{{ head.label }}</span>
</el-checkbox> </el-checkbox>
</div> </div>
</li> </li>
@@ -111,7 +112,13 @@
import {ref, onMounted, defineProps, watch, computed, reactive} from 'vue'; import {ref, onMounted, defineProps, watch, computed, reactive} from 'vue';
import XEUtils from 'xe-utils'; import XEUtils from 'xe-utils';
import {errorNotification} from '/@/utils/message'; import {errorNotification} from '/@/utils/message';
import {getDataPermissionRange, getDataPermissionDept, getRolePremission, setRolePremission,setBtnDatarange} from './api'; import {
getDataPermissionRange,
getDataPermissionDept,
getRolePremission,
setRolePremission,
setBtnDatarange
} from './api';
import {MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType} from './types'; import {MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType} from './types';
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
@@ -158,9 +165,9 @@ let menuBtnCurrent = ref<number>(-1);
let dialogVisible = ref(false); let dialogVisible = ref(false);
let dataPermissionRange = ref<DataPermissionRangeType[]>([]); let dataPermissionRange = ref<DataPermissionRangeType[]>([]);
const formatDataRange = computed(() => { const formatDataRange = computed(() => {
return function(datarange:number){ return function (datarange: number) {
const findItem = dataPermissionRange.value.find((i) => i.value === datarange); const findItem = dataPermissionRange.value.find((i) => i.value === datarange);
return findItem?.label || '' return findItem?.label || ''
} }
}) })
let deptData = ref<CustomDataPermissionDeptType[]>([]); let deptData = ref<CustomDataPermissionDeptType[]>([]);
@@ -228,7 +235,7 @@ const handleDialogConfirm = () => {
if (btn.id === menuBtnCurrent.value) { if (btn.id === menuBtnCurrent.value) {
const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value); const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value);
btn.data_range = findItem?.value || 0; btn.data_range = findItem?.value || 0;
if(btn.data_range===4){ if (btn.data_range === 4) {
btn.dept = customDataPermission.value btn.dept = customDataPermission.value
} }
} }
@@ -254,7 +261,10 @@ const handleSavePermission = () => {
} }
const column = reactive({ const column = reactive({
header:[{value:'is_create',label:'新增可见'},{value:'is_update',label:'编辑可见'},{value:'is_query',label:'列表可见'}] header: [{value: 'is_create', label: '新增可见'}, {value: 'is_update', label: '编辑可见'}, {
value: 'is_query',
label: '列表可见'
}]
}) })
onMounted(() => { onMounted(() => {
@@ -272,6 +282,7 @@ onMounted(() => {
.pc-collapse-title { .pc-collapse-title {
line-height: 32px; line-height: 32px;
text-align: left;
span { span {
font-size: 16px; font-size: 16px;
@@ -365,6 +376,7 @@ onMounted(() => {
border-left: 1px solid #ebeef5; border-left: 1px solid #ebeef5;
border-right: 1px solid #ebeef5; border-right: 1px solid #ebeef5;
box-sizing: border-box; box-sizing: border-box;
background-color: #fafafa;
} }
.el-collapse-item__header.is-active { .el-collapse-item__header.is-active {