调整为按需加载,element样式调整为皮肤模式,不再使用全局变量覆盖。 (#1349)

* 调整element为自动按需引入,减少打包体积。

* 调整element样式变更为变量模式不再使用全局css覆盖

* 修改element自动化模板适配element皮肤变量模式

---------

Co-authored-by: piexlmax<303176530@qq.com>
This commit is contained in:
奇淼(piexlmax
2023-02-16 19:03:51 +08:00
committed by GitHub
parent 95fa7e8130
commit 0eea78f796
31 changed files with 184 additions and 289 deletions
+10 -10
View File
@@ -22,22 +22,22 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
<el-button size="small" icon="refresh" @click="onReset">重置</el-button>
<el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
<el-button icon="refresh" @click="onReset">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button size="small" type="primary" icon="plus" @click="openDialog('addApi')">新增</el-button>
<el-button type="primary" icon="plus" @click="openDialog('addApi')">新增</el-button>
<el-popover v-model="deleteVisible" placement="top" width="160">
<p>确定要删除吗?</p>
<div style="text-align: right; margin-top: 8px;">
<el-button size="small" type="primary" link @click="deleteVisible = false">取消</el-button>
<el-button size="small" type="primary" @click="onDelete">确定</el-button>
<el-button type="primary" link @click="deleteVisible = false">取消</el-button>
<el-button type="primary" @click="onDelete">确定</el-button>
</div>
<template #reference>
<el-button icon="delete" size="small" :disabled="!apis.length" style="margin-left: 10px;" @click="deleteVisible = true">删除</el-button>
<el-button icon="delete" :disabled="!apis.length" style="margin-left: 10px;" @click="deleteVisible = true">删除</el-button>
</template>
</el-popover>
</div>
@@ -62,14 +62,14 @@
<template #default="scope">
<el-button
icon="edit"
size="small"
type="primary"
link
@click="editApiFunc(scope.row)"
>编辑</el-button>
<el-button
icon="delete"
size="small"
type="primary"
link
@click="deleteApiFunc(scope.row)"
@@ -116,8 +116,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button size="small" @click="closeDialog">取 消</el-button>
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
</el-dialog>
+10 -10
View File
@@ -3,7 +3,7 @@
<warning-bar title="注:右上角头像下拉可切换角色" />
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button size="small" type="primary" icon="plus" @click="addAuthority(0)">新增角色</el-button>
<el-button type="primary" icon="plus" @click="addAuthority(0)">新增角色</el-button>
</div>
<el-table
:data="tableData"
@@ -17,35 +17,35 @@
<template #default="scope">
<el-button
icon="setting"
size="small"
type="primary"
link
@click="opdendrawer(scope.row)"
>设置权限</el-button>
<el-button
icon="plus"
size="small"
type="primary"
link
@click="addAuthority(scope.row.authorityId)"
>新增子角色</el-button>
<el-button
icon="copy-document"
size="small"
type="primary"
link
@click="copyAuthorityFunc(scope.row)"
>拷贝</el-button>
<el-button
icon="edit"
size="small"
type="primary"
link
@click="editAuthority(scope.row)"
>编辑</el-button>
<el-button
icon="delete"
size="small"
type="primary"
link
@click="deleteAuth(scope.row)"
@@ -61,7 +61,7 @@
<el-cascader
v-model="form.parentId"
style="width:100%"
:disabled="dialogType=='add'"
:disabled="dialogType==='add'"
:options="AuthorityOption"
:props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
:show-all-levels="false"
@@ -69,7 +69,7 @@
/>
</el-form-item>
<el-form-item label="角色ID" prop="authorityId">
<el-input v-model="form.authorityId" :disabled="dialogType=='edit'" autocomplete="off" />
<el-input v-model="form.authorityId" :disabled="dialogType==='edit'" autocomplete="off" />
</el-form-item>
<el-form-item label="角色姓名" prop="authorityName">
<el-input v-model="form.authorityName" autocomplete="off" />
@@ -77,8 +77,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button size="small" @click="closeDialog">取 消</el-button>
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
</el-dialog>
@@ -2,7 +2,7 @@
<div>
<div class="clearfix sticky-button">
<el-input v-model="filterText" class="fitler" placeholder="筛选" />
<el-button class="fl-right" size="small" type="primary" @click="authApiEnter">确 定</el-button>
<el-button class="fl-right" type="primary" @click="authApiEnter">确 定</el-button>
</div>
<div class="tree-content">
<el-tree
@@ -2,10 +2,10 @@
<div>
<warning-bar title="此功能仅用于创建角色和角色的many2many关系表,具体使用还须自己结合表实现业务,详情参考示例代码(客户示例)。此功能不建议使用,建议使用插件市场【组织管理功能(点击前往)】来管理资源权限。" href="https://plugin.gin-vue-admin.com/#/layout/newPluginInfo?id=36" />
<div class="clearfix sticky-button" 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" type="primary" @click="authDataEnter">确 定</el-button>
<el-button class="fl-left" type="primary" @click="all">全选</el-button>
<el-button class="fl-left" type="primary" @click="self">本角色</el-button>
<el-button class="fl-left" type="primary" @click="selfAndChildren">本角色及子角色</el-button>
</div>
<div class="tree-content">
<el-checkbox-group v-model="dataAuthorityId" @change="selectAuthority">
@@ -2,7 +2,7 @@
<div>
<div class="clearfix sticky-button">
<el-input v-model="filterText" class="fitler" placeholder="筛选" />
<el-button class="fl-right" size="small" type="primary" @click="relation">确 定</el-button>
<el-button class="fl-right" type="primary" @click="relation">确 定</el-button>
</div>
<div class="tree-content">
<el-tree
@@ -24,7 +24,7 @@
<el-button
type="primary"
link
size="small"
:style="{color:row.defaultRouter === data.name?'#E6A23C':'#85ce61'}"
:disabled="!node.checked"
@click="() => setDefault(data)"
@@ -36,7 +36,7 @@
<el-button
type="primary"
link
size="small"
@click="() => OpenBtn(data)"
>
分配按钮
@@ -59,8 +59,8 @@
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button size="small" @click="closeDialog">取 消</el-button>
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
</el-dialog>
@@ -215,7 +215,7 @@ export default {
}
</script>
<style lang="scss" scope>
<style lang="scss" scoped>
@import "@/style/button.scss";
.custom-tree-node{
span+span{
@@ -22,13 +22,13 @@
</el-form-item>
<el-form-item>
<el-button
size="small"
type="primary"
icon="search"
@click="onSubmit"
>查询</el-button>
<el-button
size="small"
icon="refresh"
@click="onReset"
>重置</el-button>
@@ -38,7 +38,7 @@
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button
size="small"
type="primary"
icon="plus"
@click="openDialog"
@@ -83,14 +83,14 @@
<el-table-column align="left" label="按钮组">
<template #default="scope">
<el-button
size="small"
icon="document"
type="primary"
link
@click="toDetail(scope.row)"
>详情</el-button>
<el-button
size="small"
icon="edit"
type="primary"
link
@@ -104,14 +104,14 @@
<p>确定要删除吗?</p>
<div style="text-align: right; margin-top: 8px">
<el-button
size="small"
type="primary"
link
@click="scope.row.visible = false"
>取消</el-button>
<el-button
type="primary"
size="small"
@click="deleteSysDictionaryFunc(scope.row)"
>确定</el-button>
</div>
@@ -120,7 +120,7 @@
type="primary"
link
icon="delete"
size="small"
style="margin-left: 10px"
@click="scope.row.visible = true"
>删除</el-button>
@@ -151,7 +151,6 @@
ref="dialogForm"
:model="formData"
:rules="rules"
size="medium"
label-width="110px"
>
<el-form-item label="字典名(中)" prop="name">
@@ -188,9 +187,9 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button size="small" @click="closeDialog">取 消</el-button>
<el-button @click="closeDialog">取 消</el-button>
<el-button
size="small"
type="primary"
@click="enterDialog"
>确 定</el-button>
@@ -15,14 +15,14 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
<el-button size="small" icon="refresh" @click="onReset">重置</el-button>
<el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
<el-button icon="refresh" @click="onReset">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button size="small" type="primary" icon="plus" @click="openDialog">新增字典项</el-button>
<el-button type="primary" icon="plus" @click="openDialog">新增字典项</el-button>
</div>
<el-table
ref="multipleTable"
@@ -48,15 +48,15 @@
<el-table-column align="left" label="按钮组">
<template #default="scope">
<el-button size="small" type="primary" link icon="edit" @click="updateSysDictionaryDetailFunc(scope.row)">变更</el-button>
<el-button type="primary" link icon="edit" @click="updateSysDictionaryDetailFunc(scope.row)">变更</el-button>
<el-popover v-model="scope.row.visible" placement="top" width="160">
<p>确定要删除吗?</p>
<div style="text-align: right; margin-top: 8px;">
<el-button size="small" type="primary" link @click="scope.row.visible = false">取消</el-button>
<el-button type="primary" size="small" @click="deleteSysDictionaryDetailFunc(scope.row)">确定</el-button>
<el-button type="primary" link @click="scope.row.visible = false">取消</el-button>
<el-button type="primary" @click="deleteSysDictionaryDetailFunc(scope.row)">确定</el-button>
</div>
<template #reference>
<el-button type="primary" link icon="delete" size="small" @click="scope.row.visible = true">删除</el-button>
<el-button type="primary" link icon="delete" @click="scope.row.visible = true">删除</el-button>
</template>
</el-popover>
</template>
@@ -77,7 +77,7 @@
</div>
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
<el-form ref="dialogForm" :model="formData" :rules="rules" size="medium" label-width="110px">
<el-form ref="dialogForm" :model="formData" :rules="rules" label-width="110px">
<el-form-item label="展示值" prop="label">
<el-input
v-model="formData.label"
@@ -105,8 +105,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button size="small" @click="closeDialog">取 消</el-button>
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
</el-dialog>
@@ -133,7 +133,7 @@ import { ElMessage } from 'element-plus'
import { formatBoolean, formatDate } from '@/utils/format'
const route = useRoute()
onBeforeRouteUpdate((to, form) => {
onBeforeRouteUpdate((to) => {
if (to.name === 'dictionaryDetail') {
searchInfo.value.sysDictionaryID = to.params.id
getTableData()
+13 -18
View File
@@ -2,7 +2,7 @@
<div>
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button size="small" type="primary" icon="plus" @click="addMenu('0')">新增根菜单</el-button>
<el-button type="primary" icon="plus" @click="addMenu('0')">新增根菜单</el-button>
</div>
<!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
@@ -36,21 +36,19 @@
<el-table-column align="left" fixed="right" label="操作" width="300">
<template #default="scope">
<el-button
size="small"
type="primary"
link
icon="plus"
@click="addMenu(scope.row.ID)"
>添加子菜单</el-button>
<el-button
size="small"
type="primary"
link
icon="edit"
@click="editMenu(scope.row.ID)"
>编辑</el-button>
<el-button
size="small"
type="primary"
link
icon="delete"
@@ -81,10 +79,10 @@
</el-form-item>
<el-form-item prop="path" style="width:30%">
<template #label>
<div style="display:inline-flex">
路由Path
<el-checkbox v-model="checkFlag" style="float:right;margin-left:20px;">添加参数</el-checkbox>
</div>
<span style="display: inline-flex;align-items: center;">
<span>路由Path</span>
<el-checkbox v-model="checkFlag" style="margin-left:12px;height: auto">添加参数</el-checkbox>
</span>
</template>
<el-input
@@ -113,7 +111,7 @@
</el-form-item>
<el-form-item label="文件路径" prop="component" style="width:60%">
<el-input v-model="form.component" autocomplete="off" placeholder="页面:view/xxx/xx.vue 插件:plugin/xx/xx.vue" @blur="fmtComponent" />
<span style="font-size:12px;margin-right:12px;">如果菜单包含子菜单,请创建router-view二级路由页面或者</span><el-button style="margin-top:4px" size="small" @click="form.component = 'view/routerHolder.vue'">点我设置</el-button>
<span style="font-size:12px;margin-right:12px;">如果菜单包含子菜单,请创建router-view二级路由页面或者</span><el-button style="margin-top:4px" @click="form.component = 'view/routerHolder.vue'">点我设置</el-button>
</el-form-item>
<el-form-item label="展示名称" prop="meta.title" style="width:30%">
<el-input v-model="form.meta.title" autocomplete="off" />
@@ -165,12 +163,11 @@
</el-form>
<div>
<el-button
size="small"
type="primary"
icon="edit"
@click="addParameter(form)"
>新增菜单参数</el-button>
<el-table :data="form.parameters" style="width: 100%">
<el-table :data="form.parameters" style="width: 100%;margin-top: 12px;">
<el-table-column align="left" prop="type" label="参数类型" width="180">
<template #default="scope">
<el-select v-model="scope.row.type" placeholder="请选择">
@@ -198,7 +195,7 @@
<div>
<el-button
type="danger"
size="small"
icon="delete"
@click="deleteParameter(form.parameters,scope.$index)"
>删除</el-button>
@@ -209,12 +206,11 @@
<el-button
style="margin-top:12px"
size="small"
type="primary"
icon="edit"
@click="addBtn(form)"
>新增可控按钮</el-button>
<el-table :data="form.menuBtn" style="width: 100%">
<el-table :data="form.menuBtn" style="width: 100%;margin-top: 12px;">
<el-table-column align="left" prop="name" label="按钮名称" width="180">
<template #default="scope">
<div>
@@ -234,7 +230,7 @@
<div>
<el-button
type="danger"
size="small"
icon="delete"
@click="deleteBtn(form.menuBtn,scope.$index)"
>删除</el-button>
@@ -245,8 +241,8 @@
</div>
<template #footer>
<div class="dialog-footer">
<el-button size="small" @click="closeDialog">取 消</el-button>
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
</el-dialog>
@@ -336,7 +332,6 @@ const deleteBtn = async(btns, index) => {
const res = await canRemoveAuthorityBtnApi({ id: btn.ID })
if (res.code === 0) {
btns.splice(index, 1)
return
}
}
@@ -12,8 +12,8 @@
<el-input v-model="searchInfo.status" placeholder="搜索条件" />
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
<el-button size="small" icon="refresh" @click="onReset">重置</el-button>
<el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
<el-button icon="refresh" @click="onReset">重置</el-button>
</el-form-item>
</el-form>
</div>
@@ -23,11 +23,11 @@
<el-popover v-model="deleteVisible" placement="top" width="160">
<p>确定要删除吗?</p>
<div style="text-align: right; margin-top: 8px;">
<el-button size="small" type="primary" link @click="deleteVisible = false">取消</el-button>
<el-button size="small" type="primary" @click="onDelete">确定</el-button>
<el-button type="primary" link @click="deleteVisible = false">取消</el-button>
<el-button type="primary" @click="onDelete">确定</el-button>
</div>
<template #reference>
<el-button icon="delete" size="small" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="deleteVisible = true">删除</el-button>
<el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="deleteVisible = true">删除</el-button>
</template>
</el-popover>
</div>
@@ -94,11 +94,11 @@
<el-popover v-model="scope.row.visible" placement="top" width="160">
<p>确定要删除吗?</p>
<div style="text-align: right; margin-top: 8px;">
<el-button size="small" type="primary" link @click="scope.row.visible = false">取消</el-button>
<el-button size="small" type="primary" @click="deleteSysOperationRecordFunc(scope.row)">确定</el-button>
<el-button type="primary" link @click="scope.row.visible = false">取消</el-button>
<el-button type="primary" @click="deleteSysOperationRecordFunc(scope.row)">确定</el-button>
</div>
<template #reference>
<el-button icon="delete" size="small" type="primary" link @click="scope.row.visible = true">删除</el-button>
<el-button icon="delete" type="primary" link @click="scope.row.visible = true">删除</el-button>
</template>
</el-popover>
</template>
+8 -8
View File
@@ -3,7 +3,7 @@
<warning-bar title="注:右上角头像下拉可切换角色" />
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button size="small" type="primary" icon="plus" @click="addUser">新增用户</el-button>
<el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
</div>
<el-table
:data="tableData"
@@ -50,15 +50,15 @@
<el-popover v-model="scope.row.visible" placement="top" width="160">
<p>确定要删除此用户吗</p>
<div style="text-align: right; margin-top: 8px;">
<el-button size="small" type="primary" link @click="scope.row.visible = false">取消</el-button>
<el-button type="primary" size="small" @click="deleteUserFunc(scope.row)">确定</el-button>
<el-button type="primary" link @click="scope.row.visible = false">取消</el-button>
<el-button type="primary" @click="deleteUserFunc(scope.row)">确定</el-button>
</div>
<template #reference>
<el-button type="primary" link icon="delete" size="small">删除</el-button>
<el-button type="primary" link icon="delete">删除</el-button>
</template>
</el-popover>
<el-button type="primary" link icon="edit" size="small" @click="openEdit(scope.row)">编辑</el-button>
<el-button type="primary" link icon="magic-stick" size="small" @click="resetPasswordFunc(scope.row)">重置密码</el-button>
<el-button type="primary" link icon="edit" @click="openEdit(scope.row)">编辑</el-button>
<el-button type="primary" link icon="magic-stick" @click="resetPasswordFunc(scope.row)">重置密码</el-button>
</template>
</el-table-column>
@@ -131,8 +131,8 @@
<template #footer>
<div class="dialog-footer">
<el-button size="small" @click="closeAddUserDialog">取 消</el-button>
<el-button size="small" type="primary" @click="enterAddUserDialog">确 定</el-button>
<el-button @click="closeAddUserDialog">取 消</el-button>
<el-button type="primary" @click="enterAddUserDialog">确 定</el-button>
</div>
</template>
</el-dialog>