lukeyan #122

Merged
lukeyan merged 3 commits from lukeyan into master 1 year ago

@ -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,432 @@
<!-- 封装表格 -->
<template>
<!-- 本组件样式包含表格分页 -->
<div class="table_pagination_body" :style="table_pagination_style">
<el-table class="lky_table" :data="table_data" :height="table_height">
<!-- 是否需要多行选择数据 -->
<el-table-column
v-if="table_select"
type="selection"
width="55"
align="center"
>
</el-table-column>
<!-- 是否需要数据序号 -->
<el-table-column
v-if="table_index"
label="序号"
type="index"
width="70"
align="center"
></el-table-column>
<template v-for="item in table_columns">
<!-- 如果有多级表头 -->
<template v-if="item.children">
<el-table-column :key="item.prop" :label="item.label" align="center">
<template>
<el-table-column
v-for="val in item.children"
:key="val.prop"
:prop="val.prop"
:label="val.label"
:width="val.width"
align="center"
>
<!-- 如果val.picture为true时则该列单元格可显示图片 -->
<template v-if="val.picture" #default="{ row }">
<!-- 二级表数据照片 -->
<el-image
:src="row[val.prop]"
style="width: 42px; height: 42px"
>
<div slot="error" class="image-slot">
<img src="@/assets/companyFile/avatar.png" alt="" />
</div>
</el-image>
</template>
<!-- 如果val.color为true时则该列单元格字颜色按需更改 -->
<template v-else-if="val.color" #default="{ row }">
<div :style="{ color: child_style_change(row[val.prop]) }">
{{ row[val.prop] }}
</div>
</template>
<!-- 如果val.link为true时则该列单元格文字可点击 -->
<template v-else-if="val.link" #default="{ row }">
<el-link
:underline="false"
type="primary"
@click="child_table_link(row)"
>
{{ row[val.prop] }}
</el-link>
</template>
</el-table-column>
</template>
</el-table-column>
</template>
<!-- 如果没有多级表头 -->
<template v-else>
<el-table-column
:key="item.prop"
:prop="item.prop"
:label="item.label"
:width="item.width"
align="center"
>
<!-- 如果item.picture为true时则该列单元格可显示图片 -->
<template v-if="item.picture" #default="{ row }">
<el-image :src="row[item.prop]" style="width: 42px; height: 42px">
<div slot="error" class="image-slot">
<img src="@/assets/companyFile/avatar.png" alt="" />
</div>
</el-image>
</template>
<!-- 如果item.color为true时则该列单元格字颜色按需更改 -->
<template v-else-if="item.color" #default="{ row }">
<div :style="{ color: style_change(row[item.prop]) }">
{{ row[item.prop] }}
</div>
</template>
<!-- 如果item.link为true时则该列单元格文字可点击 -->
<template v-else-if="item.link" #default="{ row }">
<el-link
:underline="false"
type="primary"
@click="table_link(row)"
>
{{ row[item.prop] }}
</el-link>
</template>
</el-table-column>
</template>
</template>
<!-- 是否需要操作单元格 -->
<el-table-column
v-if="table_operation"
:label="operation_label"
align="center"
>
<template slot-scope="scope">
<el-button
size="small"
class="operation_btn"
v-if="table_operation"
@click="open(scope.row)"
>{{ operation_text }}</el-button
>
<el-button
size="small"
class="operation_btn"
v-if="table_operation_second"
@click="open(scope.row)"
>{{ operation_text_second }}</el-button
>
</template>
</el-table-column>
</el-table>
<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>
</div>
</template>
<script>
export default {
name: "LkyTable",
props: {
//
table_pagination_width: {
type: String,
default: "",
},
//
table_pagination_height: {
type: String,
default: "",
},
//
table_data: {
type: Array,
default: () => [],
},
//
table_height: {
type: String,
default: "",
},
//
table_select: {
type: Boolean,
default: false,
},
//
table_index: {
type: Boolean,
default: false,
},
// list
child_color_list: {
type: Array,
default: () => [],
},
// list
color_list: {
type: Array,
default: () => [],
},
//
table_columns: {
type: Array,
default: () => [],
},
//
table_operation: {
type: Boolean,
default: false,
},
//
table_operation_second: {
type: Boolean,
default: false,
},
//
operation_label: {
type: String,
default: "",
},
//
operation_text: {
type: String,
default: "",
},
//
operation_text_second: {
type: String,
default: "",
},
//
page_sizes: {
type: Array,
default: () => [],
},
//
pageSize: {
type: Number,
default: 0,
},
//
pageNum: {
type: Number,
default: 0,
},
//
total: {
type: Number,
default: 0,
},
// ,
pagination_width: {
type: String,
default: "",
},
},
data() {
return {};
},
computed: {
//
table_pagination_style() {
return {
"--table_pagination-width": this.table_pagination_width + "vw",
"--table_pagination-height": this.table_pagination_height + "vh",
};
},
//
pagination_style() {
return {
"--pagination-width": this.pagination_width + "vw",
};
},
},
methods: {
// , open_event
open(row) {
this.$emit("open_event", row);
},
//
child_style_change(val) {
switch (val) {
case this.child_color_list[0]:
return "#3eba75";
case this.child_color_list[1]:
return "#FDA722";
case this.child_color_list[2]:
return "#2eb9ef";
case this.child_color_list[3]:
return "#e55b5b";
}
},
//
style_change(val) {
switch (val) {
case this.color_list[0]:
return "#3eba75";
case this.color_list[1]:
return "#FDA722";
case this.color_list[2]:
return "#2eb9ef";
case this.color_list[3]:
return "#e55b5b";
}
},
//
child_table_link(row) {
this.$emit("child_table_link", row);
},
//
table_link(row) {
this.$emit("table_link", row);
},
// 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_body {
margin-top: 1vh;
margin-left: 0.4vw;
width: var(--table_pagination-width);
height: var(--table_pagination-height);
}
/* 表格样式 */
/deep/.lky_table.el-table {
background: rgba(0, 0, 0, 0);
border: 0.1px solid #3f5564;
thead {
color: #fff;
font-weight: 500;
border: 0.1px solid #3f5564;
background: linear-gradient(
to right,
#284f49,
#2f6363 5%,
#233b38 80%
) !important;
& th {
background-color: transparent;
}
& tr {
background-color: transparent;
}
}
tr {
color: #fff;
background: rgba(0, 0, 0, 0);
}
}
/* 单元格边框样式 */
/deep/.el-table th.el-table__cell.is-leaf {
border: 0.1px solid #3f5564;
}
/* 单元格边框样式 */
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border: 0.1px solid #3f5564;
}
/deep/.el-table--border th.el-table__cell,
.el-table__fixed-right-patch {
border: 0.1px solid #3f5564;
}
/* 表格右侧白线取消 */
/deep/.el-table--border::after,
.el-table--group::after {
width: 0px;
}
/* 表格内容过长时进度条盒子样式 */
/deep/.el-table__body-wrapper::-webkit-scrollbar {
display: none;
width: 6px;
background-color: #5e666a;
border-radius: 4px;
}
/* 表格内容过长时进度条样式 */
/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
display: none;
width: 5px;
background-color: #3c4b4a;
border-radius: 4px;
}
/* 表格操作单元格按钮样式 */
/deep/.el-button.operation_btn {
background-color: #182527;
border: 0px;
color: #2fabdc;
}
/* 表格操作单元格按钮操作时样式 */
/deep/.el-button.operation_btn:hover,
.el-button.operation_btn:focus {
background-color: #182527;
border: 0px;
color: #2fabdc;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
.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>

@ -6,10 +6,13 @@ import router from './router'
import store from './store' import store from './store'
import Message from './components/message'; import Message from './components/message';
import erupload from "./components/upload"; import erupload from "./components/upload";
import lkyTable from "./components/publicModule/lkyTable" // 本组件样式包含普通表格、分页
import lkyPagination from "./components/publicModule/lkyPagination" // 本组件单独抽离分页样式
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.use(Message) Vue.use(Message)
Vue.component('erupload', erupload) Vue.component('erupload', erupload)
Vue.component('lkyTable', lkyTable)
Vue.component('lkyPagination',lkyPagination)
const vm = new Vue({ const vm = new Vue({
el: '#app', el: '#app',
router, router,

@ -4,6 +4,7 @@ import box from '../components/box'
// import Home from '../views/Home.vue' // import Home from '../views/Home.vue'
Vue.use(VueRouter) Vue.use(VueRouter)
import systemManagement from './routes/systemManagement' import systemManagement from './routes/systemManagement'
import module from './routes/module'
const routes = [ const routes = [
{ {
@ -67,12 +68,19 @@ const routes = [
name: 'closeLoopDispose', name: 'closeLoopDispose',
component: () => import('@/views/closeLoopDispose'), component: () => import('@/views/closeLoopDispose'),
}, },
// 应用超市 // 安商惠企
{ {
path:'applySupermarket', path:'applySupermarket',
name:'applySupermarket', name:'applySupermarket',
component: () => import('@/views/applySupermarket'), component: () => import('@/views/applySupermarket'),
}, },
// 封装演示模块
...module,
// {
// path:'module',
// name:'module',
// component: () => import('@/views/module'),
// },
] ]
}, },
{ {

@ -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'),
},
]
}
]

@ -7,8 +7,8 @@ const request = axios.create({
//baseURL: 'http://172.18.113.50:8080/zhapi', //baseURL: 'http://172.18.113.50:8080/zhapi',
//baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强 //baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
//baseURL: 'http://192.168.0.188:8888/zhapi', //baseURL: 'http://192.168.0.188:8888/zhapi',
//baseURL: 'http://121.41.91.94:12002/zhapi', baseURL: 'http://121.41.91.94:12002/zhapi',
baseURL: `http://${window.location.host}/zhapi`, //baseURL: `http://${window.location.host}/zhapi`,
timeout: 50000, timeout: 50000,
headers: { 'content-type': 'application/json' }, headers: { 'content-type': 'application/json' },
}) })

@ -115,7 +115,7 @@ export default {
res.rows[i].abnormal_num = res.rows[ res.rows[i].abnormal_num = res.rows[
i i
].examinationResultDetail.substring( ].examinationResultDetail.substring(
res.rows[i].examinationResultDetail.indexOf("正常,") + 3, res.rows[i].examinationResultDetail.indexOf("正常") + 3,
res.rows[i].examinationResultDetail.indexOf("人异常") res.rows[i].examinationResultDetail.indexOf("人异常")
); );
console.log(res.rows[i].abnormal_num); console.log(res.rows[i].abnormal_num);
@ -326,54 +326,38 @@ export default {
height: 6vh; height: 6vh;
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
// border: 0.1px solid #2f6363; /deep/.el-pagination.is-background .btn-next,
// background: #3c4b4a; /deep/.el-pagination.is-background .btn-prev,
/deep/.el-pagination { /deep/.el-pagination.is-background .el-pager li {
margin-top: 1vh; margin: 0 5px;
margin-right: 1vw; background-color: rgba(255, 255, 255, 0);
.el-pagination__total { color: #eaeff7;
color: #fff; min-width: 30px;
} border-radius: 2px;
/* 显示多少条/页和在哪页的input样式 */ border: 1px solid rgba(40, 132, 126, 1);
.el-input__inner { }
border-radius: 4px; /deep/.el-pagination__total {
border: 2px solid #28847e;
background: #3c4b4a;
color: #fff;
}
.btn-prev {
border-radius: 0px;
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
ul {
li {
border: 0.1px solid #28847e;
background: #3c4b4a;
color: #fff;
}
}
.btn-next {
border: 0.1px solid #28847e;
border-radius: 0px;
background: #3c4b4a;
color: #fff;
}
.el-pager {
li {
border: 0.1px solid #28847e;
background: #3c4b4a !important;
}
}
.el-pagination__jump {
color: #fff; 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 { /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
border: 0.1px solid #76eae4; background-color: rgba(64, 158, 255, 0);
} color: #ccc;
/deep/.el-pagination.is-background .el-pager li:not(.disabled):hover { 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; color: #fff;
} }
} }

@ -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>

@ -324,7 +324,7 @@ export default {
/* card统一样式 */ /* card统一样式 */
.el-card.box-card.is-always-shadow { .el-card.box-card.is-always-shadow {
border: 0px; border: 0px;
height: 88.5vh; /* 控制card布局高度,用于适配 */ height: 88vh; /* 控制card布局高度,用于适配 */
position: relative; position: relative;
background: url("~@/assets/companyFile/22136.png") no-repeat !important; background: url("~@/assets/companyFile/22136.png") no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;

Loading…
Cancel
Save