lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update:优化滚动，样式

This commit is contained in:
zouzhibing 2022-09-13 00:11:45 +08:00
parent 3cfb256281
commit d00b9c385f
15 changed files with 429 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
src/components/Table/PropTable/index.vue Normal file
View File

@ -0,0 +1,218 @@
<template>
<div class="zb-pro-table">
<div class="header">
<el-form :inline="true" :model="formInline" class="demo-form-inline search-form" ref="ruleFormRef" >
<template v-for="(item, index) in formSearchData" :key="index">
<el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
<template v-if="item.valueType === 'input'">
<el-input v-model="formInline[item.name]" :placeholder="`请输入${item.label}`" />
</template>
<template v-if="item.valueType === 'select'">
<el-select v-model="formInline[item.name]" :placeholder="`请选择${item.label}`">
<el-option
v-for="ite in item.options"
:key="ite.value"
:label="ite.label"
:value="ite.value"
/>
</el-select>
</template>
</el-form-item>
</template>
</el-form>
<div class="search">
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
<el-button @click="reset(ruleFormRef)">重置</el-button>
<el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
<arrow-down v-if="!isExpand" />
<arrow-up v-else /> </el-icon
></el-button>
</div>
</div>
<!----------底部---------------------->
<div class="footer">
<!-----------工具栏操作工具----------------->
<div class="operator">
<slot name="btn"></slot>
</div>
<!-- ------------表格--------------->
<el-table
v-loading="loading"
@selection-change="(val) => emit('selection-change', val)"
:data="list"
:border="true"
>
<template v-for="item in columns">
<el-table-column
v-if="item.type"
:type="item.type"
:width="item.width"
:align="item.align"
:fixed="item.fixed"
:label="item.label"
/>
<el-table-column
v-else
:prop="item.name"
:width="item.width"
:align="item.align"
:fixed="item.fixed"
:label="item.label"
>
<template #default="scope">
<span v-if="!item.slot">{{ scope.row[item.name] }}</span>
<slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
</template>
</el-table-column>
</template>
</el-table>
<div class="pagination">
<el-pagination
v-model:currentPage="currentPage1"
:page-size="10"
background
layout="total, sizes, prev, pager, next, jumper"
:total="data.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import {Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
let props = defineProps({
columns: {
type: Array,
default: () => [],
},
data: {
type: Array,
default: () => [],
},
loading: {
type: Boolean,
default: false,
},
})
const currentPage1 = ref(1)
// 收缩展开
const isExpand = ref(false)
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`)
currentPage1.value = val
}
const list = computed(() => {
let arr = JSON.parse(JSON.stringify(props.data))
return arr.splice((currentPage1.value - 1) * 10, 10)
})
const listLoading = ref(false)
const confirmEdit = (row) => {
row.edit = false
}
const cancelEdit = (row) => {
row.edit = false
}
import { reactive } from 'vue'
let obj = {}
let search = []
for (let item of props.columns) {
if (item.inSearch) {
obj[item.name] = null
}
if (item.inSearch) {
search.push(item)
}
}
const formSearchData = ref(search)
const formInline = reactive(obj)
const onSubmit = () => {
console.log('submit!', formInline)
emit('onSubmit', formInline)
}
const reset = (formEl: FormInstance | undefined) => {
formSearchData.value.forEach((item) => {
formInline[item.name] = null
})
emit('reset')
}
const deleteAction = (row) => {
ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
draggable: true,
})
.then(() => {
list.value = list.value.filter((item) => item.id !== row.id)
ElMessage.success('删除成功')
})
.catch(() => {})
}
</script>
<style scoped lang="scss">
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
.zb-pro-table {
width: 100%;
height: 100%;
display:flex;
flex-direction:column;
.header{
display: flex;
}
.footer{
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
.operator{
margin-bottom: 15px
}
}
.search-form{
flex: 1;
}
.search{
white-space: nowrap;
}
::v-deep{
.el-table__header th{
font-size: 15px;
font-weight: 700;
color: #252525;
}
}
.pagination{
width: 100%;
display: flex;
justify-content: center;
padding-top: 20px;
box-sizing: border-box;
}
}
</style>

2
src/components/u-Hamburger/index.vue
View File

@ -1,6 +1,6 @@
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<transition-group name="breadcrumb" mode="out-in">
<el-breadcrumb-item v-for="(item, index) in obj.levelList" :key="item.path">
<span
v-if="item.redirect === 'noRedirect' || index == obj.levelList.length - 1"

9
src/components/u-container-layout/index.vue
View File

@ -10,17 +10,20 @@
<style lang="scss" scoped>
.m-container-layout {
padding: 20px;
box-sizing: border-box;
width: 100%;
height: 100%;
display: flex;
padding: 20px;
box-sizing: border-box;
.m-container-layout-inner {
flex: 1;
display: flex;
flex-direction: column;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
background: white;
padding: 20px;
width: 100%;
box-sizing: border-box;
min-height: 100%;
}
}
</style>

1
src/layout/Main/index.vue
View File

@ -30,6 +30,7 @@
<style lang="scss" scoped>
.app-main {
flex: 1;
display: flex;
overflow-x: hidden;
width: 100%;
box-sizing: border-box;

2
src/router/index.ts
View File

@ -8,7 +8,6 @@ interface extendRoute {
// 引入组件
//
import permissionRouter from './modules/permission'
import tableRouter from './modules/table'
import dataScreenRouter from './modules/dataScreen'
import errorRouter from './modules/error'
@ -117,7 +116,6 @@ export const asyncRoutes = [
externalLink,
clipboardTable,
systemRouter,
permissionRouter,
{
path: '/:pathMatch(.*)',
redirect: '/error/404'

25
src/router/modules/permission.ts
View File

@ -1,25 +0,0 @@
/** When your routing table is too long, you can split it into small modules**/
import Layout from "@/layout/index.vue";
const permissionRouter = {
path: '/permission',
component: Layout,
redirect: 'noRedirect',
name: 'permission',
alwaysShow: true, // 总是显示根目录
meta: {
title: '权限测试页',
icon: 'trend-charts', roles:['other']
},
children: [
{
path: 'page',
component: () => import('@/views/permission/page.vue'),
name: 'page',
meta: { title: '页面权限', icon: 'trend-charts', roles:['other'] }
},
]
}
export default permissionRouter

6
src/router/modules/system.ts
View File

@ -12,6 +12,12 @@ const systemRouter = {
icon: 'ElementPlus'
},
children: [
{
path: 'page',
component: () => import('@/views/system/page.vue'),
name: 'page',
meta: { title: '页面权限', icon: 'trend-charts', roles:['other'] }
},
{
path: 'user',
component: () => import('@/views/system/user.vue'),

7
src/store/modules/user.ts
View File

@ -35,6 +35,13 @@ export const useUserStore = defineStore({
resolve(this.roles)
} )
},
// 获取用户信息 ，如实际应用中 可以通过token通过请求接口在这里获取用户信息
getInfo(roles) {
return new Promise((resolve, reject) =>{
this.roles = roles
resolve(roles)
} )
},
// 退出
logout() {
return new Promise((resolve, reject) => {

12
src/styles/common.scss
View File

@ -57,3 +57,15 @@ body{
box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
}
/* nprogress样式 */
#nprogress .bar {
background: $primaryColor !important;
}
#nprogress .spinner-icon {
border-top-color: $primaryColor !important;
border-left-color: $primaryColor !important;
}
#nprogress .peg {
box-shadow: 0 0 10px $primaryColor, 0 0 5px $primaryColor !important;
}

2
src/styles/index.scss
View File

@ -1,6 +1,6 @@
@import "./common.scss";
@import './variables.scss';
@import './sidebar.scss';
@import './transition.scss';
@import "./common.scss";

23
src/styles/transition.scss
View File

@ -40,15 +40,30 @@
// 面包屑动画
.breadcrumb-enter-active {
transition: all 0.25s;
// 面包屑动画 方案1
//.breadcrumb-enter-active {
// transition: all 0.25s;
//}
//.breadcrumb-enter-from,
//.breadcrumb-leave-active {
// opacity: 0;
// transform: translateX(30px) skewX(-50deg);
//}
/* 面包屑动画 方案2 */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all 0.2s ease;
}
.breadcrumb-enter-from,
.breadcrumb-leave-active {
opacity: 0;
transform: translateX(30px) skewX(-50deg);
transform: translateX(10px);
}
.breadcrumb-leave-active {
position: absolute;
z-index: -1;
}
.fade-transform-leave-active,
.fade-transform-enter-active {

16
src/views/other/qrcode.vue
View File

@ -1,12 +1,14 @@
<template>
<u-container-layout>
<el-input v-model="inputData" placeholder="请输入" style="width: 400px; max-width: 100%" />
<el-button type="primary" @click="handleQrcode(1)">
<el-icon style="margin-right: 6px"><collection /></el-icon> 生成普通二维码
</el-button>
<el-button type="primary" @click="handleQrcode(2)">生成带logo</el-button>
<el-button type="primary" @click="handleQrcode(3)">生成随机颜色二维码</el-button>
<el-button type="primary" @click="handleQrcode(4)">下载</el-button>
<div style="display: flex">
<el-input v-model="inputData" placeholder="请输入" style="width: 400px; max-width: 100%" />
<el-button type="primary" @click="handleQrcode(1)">
<el-icon style="margin-right: 6px"><collection /></el-icon> 生成普通二维码
</el-button>
<el-button type="primary" @click="handleQrcode(2)">生成带logo</el-button>
<el-button type="primary" @click="handleQrcode(3)">生成随机颜色二维码</el-button>
<el-button type="primary" @click="handleQrcode(4)">下载</el-button>
</div>
<div>
<vue-qr :logoSrc="logoSrc" :text="inputData" :size="200" :callback="qrcodeCallback" :color-dark="randomColor" ></vue-qr>
</div>

2
src/views/permission/page.vue → src/views/system/page.vue
View File

@ -1,6 +1,6 @@
<template>
<u-container-layout class="m-permission-page">
<div style="margin-bottom: 20px"> 权限列表{{ store.getters.roles }} </div>
<div style="margin-bottom: 20px"> 权限列表{{ UserStore.roles }} </div>
<el-radio-group v-model="switchRoles">
<el-radio-button label="other" />
<el-radio-button label="admin" />

189
src/views/table/components/comprehensive.vue
View File

@ -1,83 +1,89 @@
<template>
<div class="inline-edit-table">
<el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef">
<template v-for="(item, index) in formSearchData" :key="index">
<el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
<template v-if="item.valueType === 'input'">
<el-input v-model="formInline[item.name]" :placeholder="`请输入${item.label}`" />
</template>
<template v-if="item.valueType === 'select'">
<el-select v-model="formInline[item.name]" :placeholder="`请选择${item.label}`">
<el-option
v-for="ite in item.options"
:key="ite.value"
:label="ite.label"
:value="ite.value"
/>
</el-select>
</template>
</el-form-item>
</template>
<el-form-item>
<el-button @click="reset(ruleFormRef)">重置</el-button>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button link @click="isExpand = !isExpand"
>{{ isExpand ? '合并' : '展开'
}}<el-icon>
<arrow-down v-if="!isExpand" />
<arrow-up v-else /> </el-icon
></el-button>
</el-form-item>
</el-form>
<div style="margin-bottom: 15px">
<slot name="btn"></slot>
<div class="header">
<el-form :inline="true" :model="formInline" class="demo-form-inline search-form" ref="ruleFormRef" >
<template v-for="(item, index) in formSearchData" :key="index">
<el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
<template v-if="item.valueType === 'input'">
<el-input v-model="formInline[item.name]" :placeholder="`请输入${item.label}`" />
</template>
<template v-if="item.valueType === 'select'">
<el-select v-model="formInline[item.name]" :placeholder="`请选择${item.label}`">
<el-option
v-for="ite in item.options"
:key="ite.value"
:label="ite.label"
:value="ite.value"
/>
</el-select>
</template>
</el-form-item>
</template>
</el-form>
<div class="search">
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
<el-button @click="reset(ruleFormRef)">重置</el-button>
<el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
<arrow-down v-if="!isExpand" />
<arrow-up v-else /> </el-icon
></el-button>
</div>
</div>
<el-table
v-loading="loading"
@selection-change="(val) => emit('selection-change', val)"
:data="list"
style="width: 100%"
:border="true"
>
<template v-for="item in columns">
<el-table-column
v-if="item.type"
:type="item.type"
:width="item.width"
:align="item.align"
:fixed="item.fixed"
:label="item.label"
<!----------底部---------------------->
<div class="footer">
<!-----------工具栏操作工具----------------->
<div class="operator">
<slot name="btn"></slot>
</div>
<!-- ------------表格--------------->
<el-table
height="585"
v-loading="loading"
@selection-change="(val) => emit('selection-change', val)"
:data="list"
:border="true"
>
<template v-for="item in columns">
<el-table-column
v-if="item.type"
:type="item.type"
:width="item.width"
:align="item.align"
:fixed="item.fixed"
:label="item.label"
/>
<el-table-column
v-else
:prop="item.name"
:width="item.width"
:align="item.align"
:fixed="item.fixed"
:label="item.label"
>
<template #default="scope">
<span v-if="!item.slot">{{ scope.row[item.name] }}</span>
<slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
</template>
</el-table-column>
</template>
</el-table>
<div class="pagination">
<el-pagination
v-model:currentPage="currentPage1"
:page-size="10"
background
layout="total, sizes, prev, pager, next, jumper"
:total="data.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<el-table-column
v-else
:prop="item.name"
:width="item.width"
:align="item.align"
:fixed="item.fixed"
:label="item.label"
>
<template #default="scope">
<span v-if="!item.slot">{{ scope.row[item.name] }}</span>
<slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
</template>
</el-table-column>
</template>
</el-table>
<div style="width: 100%; display: flex; justify-content: center; padding-top: 20px">
<el-pagination
v-model:currentPage="currentPage1"
:page-size="10"
background
layout="total, sizes, prev, pager, next, jumper"
:total="data.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import {Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
@ -98,7 +104,8 @@
})
const currentPage1 = ref(1)
const isExpand = ref(true)
// 收缩展开
const isExpand = ref(false)
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
}
@ -160,7 +167,7 @@
.catch(() => {})
}
</script>
<style scoped>
<style scoped lang="scss">
.edit-input {
padding-right: 100px;
}
@ -171,5 +178,41 @@
}
.inline-edit-table {
width: 100%;
height: 100%;
display:flex;
flex-direction:column;
.header{
display: flex;
}
.footer{
flex: 1;
display: flex;
flex-direction: column;
.operator{
margin-bottom: 15px
}
}
.search-form{
flex: 1;
}
.search{
white-space: nowrap;
}
::v-deep{
.el-table__header th{
font-size: 15px;
font-weight: 700;
color: #252525;
}
}
.pagination{
width: 100%;
display: flex;
justify-content: center;
padding-top: 20px;
box-sizing: border-box;
}
}
</style>

52
src/views/table/comprehensive.vue
View File

@ -1,21 +1,21 @@
<template>
<u-container-layout>
<div class="app-container">
<comprehensive-table
:loading="loading"
@selection-change="selectionChange"
:columns="column"
:data="list"
@reset="reset"
@onSubmit="onSubmit"
<div class="app-container" ref="appContainer">
<PropTable
:loading="loading"
@selection-change="selectionChange"
:columns="column"
:data="list"
@reset="reset"
@onSubmit="onSubmit"
>
<template v-slot:btn>
<div style="display: flex; justify-content: flex-end">
<el-button type="primary" @click="add"
><el-icon><plus /></el-icon> 添加</el-button
><el-icon><plus /></el-icon> 添加</el-button
>
<el-button type="danger" @click="batchDelete"
><el-icon><delete /></el-icon>删除</el-button
><el-icon><delete /></el-icon>删除</el-button
>
</div>
</template>
@ -28,16 +28,16 @@
删除
</el-button>
</template>
</comprehensive-table>
</PropTable>
<el-dialog v-model="dialogVisible" :title="title" width="50%">
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="rules"
label-width="120px"
class="demo-ruleForm"
:size="formSize"
ref="ruleFormRef"
:model="ruleForm"
:rules="rules"
label-width="120px"
class="demo-ruleForm"
:size="formSize"
>
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name" />
@ -63,12 +63,13 @@
</u-container-layout>
</template>
<script lang="ts" setup name="comprehensive">
import { ref, reactive, onMounted } from 'vue'
import {ref, reactive, onMounted, nextTick} from 'vue'
import * as dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
const loading = ref(true)
import ComprehensiveTable from './components/comprehensive.vue'
const appContainer = ref(null)
import PropTable from '@/components/Table/PropTable/index.vue'
const data = []
for (let i = 0; i < 100; i++) {
data.push({
@ -120,7 +121,7 @@
{ name: 'province', label: '省份' },
{ name: 'city', label: '城市' },
{ name: 'zip', label: '邮编' },
{ name: 'operation', slot: true, fixed: 'right', width: 200 },
{ name: 'operation', slot: true, fixed: 'right', width: 200,label: '操作' },
]
const list = ref(data)
@ -257,6 +258,9 @@
}
onMounted(() => {
nextTick(()=>{
// let data = appContainer.value.
})
setTimeout(() => {
loading.value = false
}, 500)
@ -267,6 +271,14 @@
.edit-input {
padding-right: 100px;
}
.app-container{
flex: 1;
display: flex;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.cancel-btn {
position: absolute;
right: 15px;