人员审查详情弹窗

pull/114/head
lukeyan 1 year ago
parent 838917d7dc
commit 1d6ca6e5ba

Binary file not shown.

After

Width:  |  Height:  |  Size: 722 B

@ -106,7 +106,7 @@
</div>
</template>
<script>
import PersonBack from './components/personBack'
import PersonBack from './personBack/index.vue'
export default {
name: "ApplySupermarket",
components:{

@ -0,0 +1,215 @@
<!-- 人员审查详情弹窗 -->
<template>
<el-dialog
class="dialog"
title="详情"
:visible.sync="visible"
:close-on-click-modal="false"
width="1000px"
@close="close"
>
<div class="item_text">
<!-- 左方小三角 -->
<div class="icon_line">
<div class="icon_body"></div>
</div>
<div class="item_text_area">
<div class="item_text_left">
<div class="item_text_left_text">
<div class="item_text_cell">企业名称:</div>
<div class="item_text_cell">审核原因:</div>
<div class="item_text_cell">审查人数:</div>
</div>
<div class="item_text_left_value">
<div class="item_value_cell">{{ this.form_data.company_name }}</div>
<div class="item_value_cell">{{ this.form_data.reason }}</div>
<div class="item_value_cell">{{ this.form_data.people }}</div>
</div>
</div>
<div class="item_text_right">
<div class="item_text_right_text">
<div class="item_text_cell">申请时间:</div>
<div class="item_text_cell">审核结果:</div>
</div>
<div class="item_text_right_value">
<div class="item_value_cell">{{ this.form_data.time }}</div>
<div class="item_value_cell">{{ this.form_data.end }}</div>
</div>
</div>
</div>
</div>
<!-- 下方表格 -->
<div class="item_table">
<!-- 左方小三角 -->
<div class="icon_line">
<div class="icon_body"></div>
</div>
<div class="item_table_title">审核人员名单</div>
<!-- 正常异常切换 -->
<el-tabs v-model="active" type="card" @tab-click="handle_click" class="item_tabs">
<el-tab-pane label="正常" name="first"></el-tab-pane>
<el-tab-pane label="异常" name="second"></el-tab-pane>
</el-tabs>
</div>
</el-dialog>
</template>
<script>
export default {
name: "PersonBackDialog",
data() {
return {
visible: false,
form_data: {}, //
active:'first',
};
},
methods: {
open(item) {
this.visible = true;
this.form_data = item;
},
//
handle_click() {},
close() {
this.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;
.item_text {
margin-top: 40px;
width: 970px;
height: 210px;
background: url("~@/assets/companyFile/background2.png") no-repeat !important;
background-size: 100% 100% !important;
.icon_line {
width: 970px;
height: 25px;
// border: 0.1px solid #28847e;
.icon_body {
width: 25px;
height: 25px;
background: url("~@/assets/companyFile/decoration01.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
.item_text_area {
width: 970px;
height: 180px;
// border: 0.1px solid #28847e;
display: flex;
.item_text_left {
width: 400px;
height: 180px;
display: flex;
.item_text_left_text {
width: 100px;
height: 180px;
.item_text_cell {
width: 100px;
height: 60px;
line-height: 60px;
color: #d0deee;
font-size: 16px;
text-align: center;
// border: 0.1px solid #28847e;
}
}
.item_text_left_value {
width: 300px;
height: 180px;
.item_value_cell {
width: 300px;
height: 60px;
line-height: 60px;
color: #fff;
font-size: 16px;
text-align: left;
}
}
}
.item_text_right {
width: 550px;
height: 180px;
display: flex;
.item_text_right_text {
width: 100px;
height: 180px;
.item_text_cell {
width: 100px;
height: 60px;
line-height: 60px;
color: #d0deee;
font-size: 16px;
text-align: center;
// border: 0.1px solid #28847e;
}
}
.item_text_right_value {
width: 400px;
height: 180px;
.item_value_cell {
width: 400px;
height: 60px;
line-height: 60px;
color: #fff;
font-size: 16px;
text-align: left;
}
}
}
}
}
.item_table {
margin-top: 10px;
width: 970px;
height: 450px;
background: url("~@/assets/companyFile/background2.png") no-repeat !important;
background-size: 100% 100% !important;
.icon_line {
width: 970px;
height: 25px;
// border: 0.1px solid #28847e;
.icon_body {
width: 25px;
height: 25px;
background: url("~@/assets/companyFile/decoration01.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
.item_table_title {
width: 970px;
height: 30px;
border: 0.1px solid #28847e;
padding-left: 15px;
color: #fff;
font-size: 17px;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
}
}
}
</style>

@ -37,7 +37,7 @@
</div>
<!-- 详情按钮 -->
<div class="cell_body_information_btn">
<div class="item_btn" @click="check_item"></div>
<div class="item_btn" @click="check_item(item)"></div>
</div>
</div>
<!-- 正常展示 -->
@ -59,7 +59,7 @@
</div>
<!-- 详情按钮 -->
<div class="cell_body_information_btn">
<div class="item_btn" @click="check_item"></div>
<div class="item_btn" @click="check_item(item)"></div>
</div>
</div>
</div>
@ -77,11 +77,16 @@
>
</el-pagination>
</div>
<PersonBackDialog ref="personBackDialog"></PersonBackDialog>
</div>
</template>
<script>
import PersonBackDialog from './components/personBackDialog'
export default {
name: "PersonBack",
components:{
PersonBackDialog
},
data() {
return {
search_company: "",
@ -137,8 +142,8 @@ export default {
methods: {
search() {},
//
check_item() {
check_item(item) {
this.$refs.personBackDialog.open(item)
},
handleSizeChange(val) {
console.log(`每页 ${val}`);
Loading…
Cancel
Save