commit
21f5ce4137
@ -0,0 +1,47 @@
|
||||
<!-- 封装弹窗 -->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="visible"
|
||||
:close-on-click-modal="false"
|
||||
:width="dialog_width"
|
||||
@close="close"
|
||||
>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "LkyDialog",
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/deep/.el-dialog {
|
||||
.el-dialog__title {
|
||||
color: #fff;
|
||||
font-size: 19px;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
}
|
||||
background-image: url("~@/assets/companyFile/dialogBack.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 800px;
|
||||
/* 关闭弹窗叉号 */
|
||||
.el-dialog__headerbtn {
|
||||
.el-dialog__close {
|
||||
color: #e55b5b;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,112 @@
|
||||
<!-- 封装分页 -->
|
||||
<template>
|
||||
<div class="table_pagination" :style="pagination_style">
|
||||
<el-pagination
|
||||
:background="true"
|
||||
@size-change="handle_size_change"
|
||||
@current-change="handle_current_change"
|
||||
:page-sizes="page_sizes"
|
||||
:pager-count="5"
|
||||
:page-size="pageSize"
|
||||
:current-page="pageNum"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "LkyPagination",
|
||||
props: {
|
||||
// 分页盒子宽,分页盒子高固定
|
||||
pagination_width: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
// 分页可选页数类型
|
||||
page_sizes: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 每页多少条
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
// 当前多少页
|
||||
pageNum: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
// 数据总条数
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
// 根据实际页面需求确定分页盒子宽度
|
||||
pagination_style() {
|
||||
return {
|
||||
"--pagination-width": this.pagination_width + "vw",
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 每页多少条 不可随意篡改props值,由调用该组件的父组件执行 方法名定义成size_change
|
||||
handle_size_change(val) {
|
||||
this.$emit("size_change", val);
|
||||
},
|
||||
// 前往哪一页 不可随意篡改props值,由调用该组件的父组件执行 方法名定义成nun_change
|
||||
handle_current_change(val) {
|
||||
this.$emit("num_change", val);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.table_pagination {
|
||||
width: var(--pagination-width);
|
||||
height: 5vh;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
/deep/.el-pagination.is-background .btn-next,
|
||||
/deep/.el-pagination.is-background .btn-prev,
|
||||
/deep/.el-pagination.is-background .el-pager li {
|
||||
margin: 0 5px;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
color: #eaeff7;
|
||||
min-width: 30px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(40, 132, 126, 1);
|
||||
}
|
||||
/deep/.el-pagination__total {
|
||||
color: #fff;
|
||||
}
|
||||
/deep/.el-input__inner {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
border: 1px solid rgba(40, 132, 126, 1);
|
||||
color: #eaeff7;
|
||||
}
|
||||
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: rgba(64, 158, 255, 0);
|
||||
color: #ccc;
|
||||
border: 1px solid #76eae4;
|
||||
}
|
||||
/deep/.btn-prev {
|
||||
margin: 0 5px;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
color: #eaeff7;
|
||||
min-width: 30px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(40, 132, 126, 1);
|
||||
}
|
||||
/deep/.el-pagination__jump {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,26 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
// import Home from '../views/Home.vue'
|
||||
Vue.use(VueRouter)
|
||||
// 系统管理
|
||||
export default [
|
||||
{
|
||||
path: 'module',
|
||||
name: 'module',
|
||||
component: () => import('@/views/module'),
|
||||
children: [
|
||||
// 表格分页
|
||||
{
|
||||
path: 'tableModule',
|
||||
name: 'tableModule',
|
||||
component: () => import('@/views/module/components/tableModule'),
|
||||
},
|
||||
// 单独分页
|
||||
{
|
||||
path: 'paginationModule',
|
||||
name: 'paginationModule',
|
||||
component: () => import('@/views/module/components/paginationModule'),
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<!-- 系统管理左侧导航菜单 -->
|
||||
<el-menu
|
||||
ref="menu"
|
||||
@select="select"
|
||||
:default-active="active"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@close="handleClose"
|
||||
:collapse="isCollapse"
|
||||
>
|
||||
<!-- background-color="#f5f2e9"
|
||||
text-color="#5aa4ae" -->
|
||||
<!-- 一级导航 -->
|
||||
<el-menu-item
|
||||
@click="clickMenu(item)"
|
||||
v-for="item in menuList"
|
||||
:key="item.name"
|
||||
:index="item.value"
|
||||
>
|
||||
<i>
|
||||
<img :src="item.src" alt="" />
|
||||
</i>
|
||||
<span slot="title">{{ item.label }}</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "LeftNav",
|
||||
data() {
|
||||
return {
|
||||
isCollapse: false,
|
||||
active: "1",
|
||||
menu: [
|
||||
// 导航数组
|
||||
{
|
||||
path: "/tableModule",
|
||||
name: "tableModule",
|
||||
label: "表格分页",
|
||||
value: "1",
|
||||
src: require("@/assets/companyFile/menu01.png"),
|
||||
},
|
||||
{
|
||||
path: "/paginationModule",
|
||||
name: "paginationModule",
|
||||
label: "单独分页",
|
||||
value: "2",
|
||||
src: require("@/assets/companyFile/menu02.png"),
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.setCurrentRoute();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
menuList() {
|
||||
// 一级菜单导航
|
||||
return this.menu.filter((item) => !item.children);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.setCurrentRoute();
|
||||
if (sessionStorage.getItem("navkeep")) {
|
||||
this.active = sessionStorage.getItem("navkeep");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击跳转路由
|
||||
clickMenu(val) {
|
||||
this.$router.push({
|
||||
name: val.name,
|
||||
});
|
||||
},
|
||||
setCurrentRoute() {
|
||||
this.active = this.$route.path; //监听到当前路由状态并激活当前菜单
|
||||
},
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
select() {
|
||||
sessionStorage.setItem("navkeep", this.$refs.menu.activeIndex);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
width: 100%; /* 保持和大的aside同宽 */
|
||||
min-height: 98%; /* 固定侧边导航栏高度 */
|
||||
background: url("~@/assets/companyFile/导航背景.png") no-repeat;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.el-menu-vertical-demo.el-menu {
|
||||
.el-menu-item {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
// margin-left: 17px;y
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
background: url("~@/assets/companyFile/921.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
img {
|
||||
margin-bottom: 4px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-menu-item:focus,
|
||||
.el-menu-item:hover {
|
||||
/* 导航选项点击触碰效果 */
|
||||
filter: brightness(150%);
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,37 @@
|
||||
<!-- 仅做模块化展示使用 -->
|
||||
<template>
|
||||
<div>
|
||||
<lkyPagination
|
||||
:page_sizes="page_sizes"
|
||||
:pageSize="pageSize"
|
||||
:pageNum="pageNum"
|
||||
:total="total"
|
||||
:pagination_width="pagination_width"
|
||||
></lkyPagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "PaginationModule",
|
||||
data() {
|
||||
return {
|
||||
page_sizes: [4, 6],
|
||||
pageSize: 4,
|
||||
pageNum: 1,
|
||||
total: 16,
|
||||
pagination_width: "50",
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
// 分页--每页多少条
|
||||
size_change(val) {
|
||||
this.pageNum = 1;
|
||||
this.pageSize = val;
|
||||
},
|
||||
// 分页--前往哪一页
|
||||
num_change(val) {
|
||||
this.pageNum = val;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,203 @@
|
||||
<!-- 仅做模块化展示使用 -->
|
||||
<template>
|
||||
<div>
|
||||
<lkyTable
|
||||
:table_pagination_width="table_pagination_width"
|
||||
:table_pagination_height="table_pagination_height"
|
||||
:table_data="table_data"
|
||||
:table_height="table_height"
|
||||
:table_select="table_select"
|
||||
:table_index="table_index"
|
||||
:color_list="color_list"
|
||||
:child_color_list="child_color_list"
|
||||
:table_columns="table_columns"
|
||||
:table_operation="table_operation"
|
||||
:table_operation_second="table_operation_second"
|
||||
:operation_label="operation_label"
|
||||
:operation_text="operation_text"
|
||||
:operation_text_second="operation_text_second"
|
||||
:page_sizes="page_sizes"
|
||||
:pageSize="pageSize"
|
||||
:pageNum="pageNum"
|
||||
:total="total"
|
||||
:pagination_width="pagination_width"
|
||||
@child_table_link="child_table_link"
|
||||
@open_event="open_event"
|
||||
@size_change="size_change"
|
||||
@num_change="num_change"
|
||||
></lkyTable>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "TableModule",
|
||||
data() {
|
||||
return {
|
||||
table_pagination_width: "72",
|
||||
table_pagination_height: "60",
|
||||
table_data: [
|
||||
{
|
||||
company: "宁波保润有限石化公司",
|
||||
personNum: "22",
|
||||
idcard: "34567",
|
||||
unit: "最小单位",
|
||||
level: "一级",
|
||||
pic_child: "https://t12.baidu.com/it/u=2944858655,3260611328&fm=58",
|
||||
pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
|
||||
company_level: "审核通过",
|
||||
},
|
||||
{
|
||||
company: "宁波保润石化公司",
|
||||
personNum: "22",
|
||||
idcard: "34567",
|
||||
unit: "最小单位",
|
||||
level: "四级",
|
||||
pic_child: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
|
||||
pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
|
||||
company_level: "审核中",
|
||||
},
|
||||
{
|
||||
company: "宁波保润石化公司",
|
||||
personNum: "22",
|
||||
idcard: "34567",
|
||||
unit: "最小单位",
|
||||
level: "一级",
|
||||
pic: "https://img2.baidu.com/it/u=1735491135,1421708020&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691514000&t=9b750206b13e5b42054a728b0e759fe5",
|
||||
pic_child: "1222.png",
|
||||
pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
|
||||
company_level: "审核中",
|
||||
},
|
||||
{
|
||||
company: "宁波保润石化公司",
|
||||
personNum: "22",
|
||||
idcard: "34567",
|
||||
unit: "最小单位",
|
||||
level: "三级",
|
||||
pic_child: "1222.png",
|
||||
pic: "https://t7.baidu.com/it/u=1211026933,587530743&fm=218&app=137&size=f242,150&n=0&f=JPEG&fmt=auto?s=D9934B90441845C2548365530300D0BA&sec=1691514000&t=0d3b6cf3971e24bff2a9ad9909868a3e",
|
||||
pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
|
||||
company_level: "预备审核",
|
||||
},
|
||||
{
|
||||
company: "宁波保润石化公司",
|
||||
personNum: "22",
|
||||
idcard: "34567",
|
||||
unit: "最小单位",
|
||||
level: "一级",
|
||||
pic_child: "1222.png",
|
||||
pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
|
||||
company_level: "预备审核",
|
||||
},
|
||||
{
|
||||
company: "宁波保润石化公司",
|
||||
personNum: "22",
|
||||
idcard: "34567",
|
||||
unit: "最小单位",
|
||||
level: "二级",
|
||||
pic: "1000.png",
|
||||
pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
|
||||
pic_child: "1222.png",
|
||||
company_level: "审核驳回",
|
||||
},
|
||||
],
|
||||
table_height: "550", // 表格高度根据实际场景确定高度
|
||||
table_select: false,
|
||||
table_index: true,
|
||||
child_color_list: ["审核驳回", "预备审核", "审核中", "审核通过"],
|
||||
color_list: ["一级", "二级", "三级", "四级"],
|
||||
table_columns: [
|
||||
{
|
||||
prop: "company_all",
|
||||
label: "公司全览",
|
||||
children: [
|
||||
{
|
||||
prop: "company",
|
||||
label: "公司名称",
|
||||
width: "180",
|
||||
},
|
||||
{
|
||||
prop: "pic_child",
|
||||
label: "个人照片",
|
||||
width: "120",
|
||||
picture: true,
|
||||
},
|
||||
{
|
||||
prop: "personNum",
|
||||
label: "公司人数",
|
||||
width: "120",
|
||||
},
|
||||
{
|
||||
prop: "idcard",
|
||||
label: "公司id",
|
||||
width: "90",
|
||||
},
|
||||
{
|
||||
prop: "unit",
|
||||
label: "公司单位",
|
||||
width: "180",
|
||||
link: true,
|
||||
},
|
||||
{
|
||||
prop: "company_level",
|
||||
label: "公司次等级",
|
||||
width: "160",
|
||||
color: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "level",
|
||||
label: "公司等级",
|
||||
width: "80",
|
||||
color: true,
|
||||
},
|
||||
{
|
||||
prop: "pic",
|
||||
label: "公司照片",
|
||||
width: "120",
|
||||
picture: true,
|
||||
},
|
||||
{
|
||||
prop: "pic_two",
|
||||
label: "个人照片",
|
||||
width: "100",
|
||||
picture: true,
|
||||
},
|
||||
],
|
||||
table_operation: true,
|
||||
table_operation_second: true,
|
||||
operation_label: "操作",
|
||||
operation_text: "详情",
|
||||
operation_text_second: "编辑",
|
||||
page_sizes: [4, 6],
|
||||
pageSize: 4,
|
||||
pageNum: 1,
|
||||
total: 8,
|
||||
pagination_width: "72",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
get_search() {
|
||||
console.log("123");
|
||||
},
|
||||
// 表格详情点击事件
|
||||
open_event(row) {
|
||||
console.log("row456", row);
|
||||
},
|
||||
child_table_link(row) {
|
||||
console.log("row777", row);
|
||||
},
|
||||
// 分页--每页多少条
|
||||
size_change(val) {
|
||||
this.pageNum = 1;
|
||||
this.pageSize = val;
|
||||
this.get_search();
|
||||
},
|
||||
// 分页--前往哪一页
|
||||
num_change(val) {
|
||||
this.pageNum = val;
|
||||
this.get_search();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<!-- 系统管理 -->
|
||||
<div>
|
||||
<el-container>
|
||||
<el-aside>
|
||||
<LeftNav></LeftNav>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-main>
|
||||
<router-view></router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LeftNav from "./components/leftNav.vue";
|
||||
export default {
|
||||
name: "systemManagement",
|
||||
components: {
|
||||
LeftNav,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.el-container {
|
||||
height: calc(100vh - 95px); /* 控制整体布局高度,用于适配 */
|
||||
.el-aside {
|
||||
margin-top: 15px; /* 给左上角logo留空间 -> 后面固定都给15px */
|
||||
margin-left: 15px;
|
||||
width: 11% !important; /* 控制侧边导航栏宽度 */
|
||||
height: 100%;
|
||||
}
|
||||
.el-main {
|
||||
margin: 16px 15px 0px 15px; /* 固定都给15px */
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue