lukeyan
1 year ago
parent
9e61a3bda7
commit
717fd1f92c
@ -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>
|
||||||
@ -1,201 +1,43 @@
|
|||||||
<!-- 仅做模块化展示使用 -->
|
|
||||||
<template>
|
<template>
|
||||||
|
<!-- 系统管理 -->
|
||||||
<div>
|
<div>
|
||||||
<lkyTable
|
<el-container>
|
||||||
:table_pagination_width="table_pagination_width"
|
<el-aside>
|
||||||
:table_pagination_height="table_pagination_height"
|
<LeftNav></LeftNav>
|
||||||
:table_data="table_data"
|
</el-aside>
|
||||||
:table_height="table_height"
|
<el-container>
|
||||||
:table_select="table_select"
|
<el-main>
|
||||||
:table_index="table_index"
|
<router-view></router-view>
|
||||||
:color_list="color_list"
|
</el-main>
|
||||||
:child_color_list="child_color_list"
|
</el-container>
|
||||||
:table_columns="table_columns"
|
</el-container>
|
||||||
: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"
|
|
||||||
@table_link="table_link"
|
|
||||||
@open_event="open_event"
|
|
||||||
@size_change="size_change"
|
|
||||||
@num_change="num_change"
|
|
||||||
></lkyTable>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import LeftNav from "./components/leftNav.vue";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
name: "systemManagement",
|
||||||
return {
|
components: {
|
||||||
table_pagination_width: "75",
|
LeftNav,
|
||||||
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: "75",
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
get_search() {
|
|
||||||
console.log("123");
|
|
||||||
},
|
|
||||||
// 表格详情点击事件
|
|
||||||
open_event(row) {
|
|
||||||
console.log("row456", row);
|
|
||||||
},
|
|
||||||
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();
|
|
||||||
},
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</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