loveflow
7 months ago
parent
2368f46732
commit
dd3707946a
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 660 KiB |
|
After Width: | Height: | Size: 626 B |
|
After Width: | Height: | Size: 627 B |
|
After Width: | Height: | Size: 188 B |
|
After Width: | Height: | Size: 636 B |
|
After Width: | Height: | Size: 592 B |
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="enterpriseTopicWrap loveflow">
|
||||
<div class="riskTrim tlIcon"></div>
|
||||
<div class="riskTrim trIcon"></div>
|
||||
<div class="riskTrim blIcon"></div>
|
||||
<div class="riskTrim brIcon"></div>
|
||||
<div class="topicMianBack">
|
||||
<div class="backBtn" @click="goBack()"><img :src="backIcon" />返回</div>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
backIcon: require("@/assets/images/topic/left.png"),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$router.push({
|
||||
path: "/topic/screen",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.enterpriseTopicWrap {
|
||||
height: 100%;
|
||||
padding: 10px 24px 20px;
|
||||
position: relative;
|
||||
background: url("~@/assets/images/topic/bg.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
.topicMianBack {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: solid 1px #5b748c;
|
||||
height: 50px;
|
||||
.backBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
margin-right: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.riskTrim {
|
||||
position: absolute;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.tlIcon {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: url("~@/assets/images/screen/tl.png") no-repeat center center;
|
||||
}
|
||||
.trIcon {
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: url("~@/assets/images/screen/tr.png") no-repeat center center;
|
||||
}
|
||||
.blIcon {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: url("~@/assets/images/screen/bl.png") no-repeat center center;
|
||||
}
|
||||
.brIcon {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: url("~@/assets/images/screen/br.png") no-repeat center center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div style="height: 100%">
|
||||
<div class="flexSpaceBetween">
|
||||
<div class="tableOperator">
|
||||
<div
|
||||
class="flex-center filterBtnWrap"
|
||||
v-for="item in filterList"
|
||||
:key="item.name"
|
||||
@click="filterClick(item.value)"
|
||||
>
|
||||
<div
|
||||
:class="{ filterActive: filterValue == item.value }"
|
||||
class="filterBtn"
|
||||
>
|
||||
{{ item.name }} ({{ item.total }})
|
||||
</div>
|
||||
<el-divider
|
||||
:class="{ filterActive: filterValue == '2' }"
|
||||
direction="vertical"
|
||||
></el-divider>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchWrap">
|
||||
<el-form :inline="true" :model="queryParam" class="demo-form-inline">
|
||||
<el-form-item label="关键字">
|
||||
<el-input
|
||||
v-model="queryParam.key"
|
||||
placeholder="请输入姓名、身份证"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchQuery">查询</el-button>
|
||||
<el-button type="primary" plain @click="searchReset"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tableWrap">
|
||||
<gMainTable
|
||||
border
|
||||
stripe
|
||||
ref="gMainTable"
|
||||
:tableData="dataSource"
|
||||
:columns="columns"
|
||||
rowKey="id"
|
||||
:pagination="ipagination"
|
||||
@pageSizeChange="handlePageSizeChange"
|
||||
@currentPageChange="handleCurrentPageChange"
|
||||
>
|
||||
<template v-slot:djSlot="{ scope }">
|
||||
<span class="noColor"> {{ scope.row.isD }}</span>
|
||||
</template>
|
||||
<template v-slot:qkSlot="{ scope }">
|
||||
<span class="isColor"> {{ scope.row.isQ }}</span>
|
||||
</template>
|
||||
<template v-slot:ptypeSlot="{ scope }">
|
||||
<div class="personType gaowei">{{ scope.row.personType }}</div>
|
||||
</template>
|
||||
</gMainTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
|
||||
|
||||
export default {
|
||||
mixins: [tableListMixins],
|
||||
data() {
|
||||
return {
|
||||
filterValue: "1",
|
||||
filterList: [
|
||||
{
|
||||
name: "全部",
|
||||
value: "1",
|
||||
total: 123,
|
||||
},
|
||||
{
|
||||
name: "未登记人员",
|
||||
value: "2",
|
||||
total: 12,
|
||||
},
|
||||
{
|
||||
name: "重点人员",
|
||||
value: "3",
|
||||
total: 123,
|
||||
},
|
||||
{
|
||||
name: "未变更人员",
|
||||
value: "4",
|
||||
total: 23,
|
||||
},
|
||||
{
|
||||
name: "高危人员",
|
||||
value: "5",
|
||||
total: 13,
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
prop: "name",
|
||||
label: "姓名",
|
||||
},
|
||||
{
|
||||
prop: "cmy",
|
||||
label: "所属公司",
|
||||
},
|
||||
{
|
||||
prop: "phone",
|
||||
label: "手机号",
|
||||
},
|
||||
{
|
||||
prop: "gender",
|
||||
label: "性别",
|
||||
},
|
||||
{
|
||||
prop: "card",
|
||||
label: "身份证号",
|
||||
attrs: {
|
||||
width: 180,
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "address",
|
||||
label: "来源地",
|
||||
},
|
||||
{
|
||||
slot: "qkSlot",
|
||||
prop: "isQ",
|
||||
label: "是否有前科",
|
||||
},
|
||||
{
|
||||
slot: "djSlot",
|
||||
prop: "isD",
|
||||
label: "是否登记",
|
||||
},
|
||||
{
|
||||
slot: "ptypeSlot",
|
||||
prop: "personType",
|
||||
label: "人员类型",
|
||||
},
|
||||
{
|
||||
prop: "date",
|
||||
label: "入职日期",
|
||||
attrs: {
|
||||
width: 180,
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "address",
|
||||
label: "主要岗位",
|
||||
},
|
||||
{
|
||||
prop: "address",
|
||||
label: "所属部门",
|
||||
},
|
||||
{
|
||||
prop: "address",
|
||||
label: "备注",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
filterClick(val) {
|
||||
this.filterValue = val;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,7 +1,146 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="enterpriseTopicPanel">
|
||||
<!-- 人员安全 -->
|
||||
人员安全
|
||||
<topicMain>
|
||||
<div class="enterpriseTopic">
|
||||
<el-tabs v-model="tabindex" @tab-click="tabChange">
|
||||
<el-tab-pane
|
||||
v-for="item in tabList"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
:name="item.value"
|
||||
></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="enterpriseTopicResult">
|
||||
<component :is="content"></component>
|
||||
</div>
|
||||
</div>
|
||||
</topicMain>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less"></style>
|
||||
<script>
|
||||
import topicMain from "../components/topicMain.vue";
|
||||
import flowPerson from "./flowPerson.vue";
|
||||
import workPerson from "./workPerson.vue";
|
||||
import keyPerson from "./keyPerson.vue";
|
||||
export default {
|
||||
components: { topicMain, flowPerson, workPerson, keyPerson },
|
||||
data() {
|
||||
return {
|
||||
tabList: [
|
||||
{
|
||||
label: "流动人口管理",
|
||||
value: "1",
|
||||
content: flowPerson,
|
||||
},
|
||||
{
|
||||
label: "重点岗位人员",
|
||||
value: "2",
|
||||
content: workPerson,
|
||||
},
|
||||
{
|
||||
label: "重点人员",
|
||||
value: "3",
|
||||
content: keyPerson,
|
||||
},
|
||||
],
|
||||
tabindex: "1",
|
||||
content: "flowPerson",
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
tabChange(tab, event) {
|
||||
let findIndex = this.tabList.findIndex((item) => {
|
||||
return this.tabindex === item.value;
|
||||
});
|
||||
if (findIndex > -1) {
|
||||
this.content = this.tabList[findIndex]["content"];
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.enterpriseTopicPanel {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
.enterpriseTopic {
|
||||
height: calc(100% - 50px);
|
||||
.enterpriseTopicResult {
|
||||
margin: 0;
|
||||
height: calc(100% - 70px);
|
||||
|
||||
.personType {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
}
|
||||
.gaowei {
|
||||
background: url("~@/assets/images/topic/gaowei.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.bgeng {
|
||||
background: url("~@/assets/images/topic/bgeng.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.wdji {
|
||||
background: url("~@/assets/images/topic/wdji.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.zdian {
|
||||
background: url("~@/assets/images/topic/zdian.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tableOperator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(234, 241, 248, 0.1) 0%,
|
||||
rgba(208, 222, 238, 0.1) 100%
|
||||
);
|
||||
border: 1px solid #5b748c;
|
||||
.filterBtnWrap {
|
||||
padding: 2px;
|
||||
&:last-child{
|
||||
.el-divider{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.filterBtn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
height: 34px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #eaf6ff;
|
||||
&.filterActive {
|
||||
font-weight: 500;
|
||||
color: #4bffad;
|
||||
background: rgba(129, 255, 204, 0.26);
|
||||
}
|
||||
&:hover {
|
||||
color: #4bffad;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div style="height: 100%">
|
||||
<div class="flexSpaceBetween">
|
||||
<div class="tableOperator">
|
||||
<div
|
||||
class="flex-center filterBtnWrap"
|
||||
v-for="item in filterList"
|
||||
:key="item.name"
|
||||
@click="filterClick(item.value)"
|
||||
>
|
||||
<div
|
||||
:class="{ filterActive: filterValue == item.value }"
|
||||
class="filterBtn"
|
||||
>
|
||||
{{ item.name }} ({{ item.total }})
|
||||
</div>
|
||||
<el-divider
|
||||
:class="{ filterActive: filterValue == '2' }"
|
||||
direction="vertical"
|
||||
></el-divider>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchWrap">
|
||||
<el-form :inline="true" :model="queryParam" class="demo-form-inline">
|
||||
<el-form-item label="关键字">
|
||||
<el-input
|
||||
v-model="queryParam.key"
|
||||
placeholder="请输入姓名、身份证"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchQuery">查询</el-button>
|
||||
<el-button type="primary" plain @click="searchReset"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tableWrap">
|
||||
<gMainTable
|
||||
border
|
||||
stripe
|
||||
ref="gMainTable"
|
||||
:tableData="dataSource"
|
||||
:columns="columns"
|
||||
rowKey="id"
|
||||
:pagination="ipagination"
|
||||
@pageSizeChange="handlePageSizeChange"
|
||||
@currentPageChange="handleCurrentPageChange"
|
||||
>
|
||||
<template v-slot:scSlot="{ scope }">
|
||||
<span class="noColor"> {{ scope.row.sc }}</span>
|
||||
</template>
|
||||
<template v-slot:gwSlot="{ scope }">
|
||||
<div class="personType gaowei">{{ scope.row.personType }}</div>
|
||||
</template>
|
||||
</gMainTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
|
||||
|
||||
export default {
|
||||
mixins: [tableListMixins],
|
||||
data() {
|
||||
return {
|
||||
filterValue: "1",
|
||||
filterList: [
|
||||
{
|
||||
name: "全部",
|
||||
value: "1",
|
||||
total: 123,
|
||||
},
|
||||
{
|
||||
name: "危险品保管人员",
|
||||
value: "2",
|
||||
total: 12,
|
||||
},
|
||||
{
|
||||
name: "危险品领用人员",
|
||||
value: "3",
|
||||
total: 123,
|
||||
},
|
||||
{
|
||||
name: "危险品使用人员",
|
||||
value: "4",
|
||||
total: 23,
|
||||
},
|
||||
{
|
||||
name: "危险品技术资质人员",
|
||||
value: "5",
|
||||
total: 13,
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
prop: "name",
|
||||
label: "姓名",
|
||||
},
|
||||
{
|
||||
prop: "card",
|
||||
label: "身份证号",
|
||||
attrs: {
|
||||
width: 180,
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "gender",
|
||||
label: "性别",
|
||||
},
|
||||
{
|
||||
prop: "phone",
|
||||
label: "手机号",
|
||||
},
|
||||
{
|
||||
prop: "cmy",
|
||||
label: "归属企业",
|
||||
},
|
||||
{
|
||||
prop: "address",
|
||||
label: "岗位名称",
|
||||
},
|
||||
{
|
||||
slot: "gwSlot",
|
||||
prop: "address",
|
||||
label: "岗位类别",
|
||||
},
|
||||
{
|
||||
prop: "personType",
|
||||
label: "资质证书",
|
||||
},
|
||||
{
|
||||
prop: "date",
|
||||
label: "证书截止日期效期",
|
||||
attrs: {
|
||||
width: 180,
|
||||
},
|
||||
},
|
||||
{
|
||||
slot: "scSlot",
|
||||
prop: "address",
|
||||
label: "资质审查结果",
|
||||
},
|
||||
{
|
||||
prop: "address",
|
||||
label: "备注",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
filterClick(val) {
|
||||
this.filterValue = val;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in new issue