<template>
|
<div
|
class="WorkerDetailDialog"
|
v-loading.fullscreen.lock="loading"
|
element-loading-background="transparent"
|
>
|
<el-dialog
|
:visible.sync="applyVisible"
|
:title="title"
|
:close-on-click-modal="false"
|
:modal-append-to-body="true"
|
:append-to-body="true"
|
:destroy-on-close="true"
|
@close="closeDialog('form')"
|
width="60%"
|
:scrollable="true"
|
|
>
|
<p
|
class="workerDetailDialogtitle"
|
style="text-align: left; margin-left: 20px"
|
>
|
<span></span>
|
工人基本信息
|
</p>
|
<el-form ref="workerForm" size="small" inline label-width="165px">
|
<div class="form">
|
<el-form-item label="工人id" prop="workSerialNo">
|
<el-input
|
v-model="selectWorkerInfo.workSerialNo"
|
disabled
|
></el-input>
|
</el-form-item>
|
<el-form-item label="姓名" prop="customername">
|
<el-input
|
v-model="workerDetailInfo.customername"
|
disabled
|
></el-input>
|
</el-form-item>
|
<el-form-item label="证件号码" prop="customercertno">
|
<el-input
|
v-model="workerDetailInfo.customercertno"
|
disabled
|
></el-input>
|
</el-form-item>
|
<el-form-item label="手机号码" prop="phone" class="">
|
<el-input v-model="workerDetailInfo.phone" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="出生年月" prop="birthday">
|
<el-input v-model="workerDetailInfo.birthday" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="婚姻状态" prop="marriageCn">
|
<el-input v-model="workerDetailInfo.marriageCn" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="身份证有效期开始日期" prop="validBegin">
|
<el-input v-model="workerDetailInfo.validBegin" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="身份证有效期结束日期" prop="validEnd">
|
<el-input v-model="workerDetailInfo.validEnd" disabled></el-input>
|
</el-form-item>
|
<el-form-item
|
label="家庭住址"
|
prop="familyaddress"
|
style="width: 100%"
|
class="family-address-item"
|
>
|
<el-input
|
v-model="workerDetailInfo.familyaddress"
|
disabled
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="工种" prop="jobtitle">
|
<el-input v-model="workerDetailInfo.jobtitle" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="班组" prop="team">
|
<el-input v-model="workerDetailInfo.team" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="进场状态" prop="entrystatus">
|
<el-input
|
v-model="workerDetailInfo.entrystatus"
|
disabled
|
></el-input>
|
</el-form-item>
|
<el-form-item label="工人类型" prop="workertype">
|
<el-input v-model="workerDetailInfo.workertype" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="进场开始时间" prop="entrystartdate">
|
<el-input
|
v-model="workerDetailInfo.entrystartdate"
|
disabled
|
></el-input>
|
</el-form-item>
|
<el-form-item label="进场结束时间" prop="entryenddate">
|
<el-input
|
v-model="workerDetailInfo.entryenddate"
|
disabled
|
></el-input>
|
</el-form-item>
|
<el-form-item label="合同生效日期" prop="contractvaliddate">
|
<el-input
|
v-model="workerDetailInfo.contractvaliddate"
|
disabled
|
></el-input>
|
</el-form-item>
|
<el-form-item label="合同失效日期" prop="contractinvaliddate">
|
<el-input
|
v-model="workerDetailInfo.contractinvaliddate"
|
disabled
|
></el-input>
|
</el-form-item>
|
<el-form-item label="所属合同名称" prop="contractname">
|
<el-input
|
v-model="workerDetailInfo.contractname"
|
disabled
|
></el-input>
|
</el-form-item>
|
<el-form-item label="是否签名" prop="flgsignCn">
|
<el-input v-model="workerDetailInfo.flgsignCn" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="所属项目名称" prop="projname">
|
<el-input v-model="workerDetailInfo.projname" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="所属项目id" prop="projid">
|
<el-input v-model="workerDetailInfo.projid" disabled></el-input>
|
</el-form-item>
|
</div>
|
</el-form>
|
<p
|
class="workerDetailDialogtitle"
|
style="text-align: left; margin-left: 20px"
|
>
|
<span></span>
|
银行卡信息
|
</p>
|
<el-table
|
stripe
|
:data="workerbankCardList"
|
style="margin-top: 30px"
|
highlight-current-row
|
:header-cell-style="{ background: '#f5f5f5', color: '#222222' }"
|
>
|
<el-table-column min-width="60">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">银行名称</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 15px">{{ row.bankName }}</span></template
|
>
|
</el-table-column>
|
<el-table-column min-width="60">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">支行名称</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 15px">{{
|
row.bankBranchName
|
}}</span></template
|
>
|
</el-table-column>
|
<el-table-column min-width="60">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">银行卡号</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 15px">{{ row.bankNo }}</span></template
|
>
|
</el-table-column>
|
<el-table-column min-width="60">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">预留手机号</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 15px">{{
|
row.bankPhone
|
}}</span></template
|
>
|
</el-table-column>
|
<el-table-column min-width="60">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">更新时间</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 15px">{{
|
row.updateTime
|
}}</span></template
|
>
|
</el-table-column>
|
</el-table>
|
<div style="text-align: center; margin-top: 20px">
|
<el-button type="primary" @click="closeDialog('form')">关闭</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import { qryWorkerInfo } from "@/api/product";
|
import common from "@/utils/common";
|
export default {
|
props: ["title", "visible", "selectWorkerInfo"],
|
data() {
|
return {
|
loading: false,
|
workerDetailInfo: {},
|
workerbankCardList: [],
|
};
|
},
|
computed: {
|
applyVisible: {
|
get() {
|
return this.visible;
|
},
|
set() {},
|
},
|
},
|
async created() {
|
console.log("selectWorkerInfo", this.selectWorkerInfo);
|
this.requestQryWorkerInfo();
|
},
|
methods: {
|
async requestQryWorkerInfo() {
|
const resp = await qryWorkerInfo({
|
workerSerialNo: this.selectWorkerInfo.workSerialNo,
|
});
|
if (resp.code == "00") {
|
this.workerDetailInfo = resp.result;
|
this.workerbankCardList = resp.result.bankInfoList;
|
}
|
},
|
closeDialog(formName) {
|
this.$emit("closeApply", false);
|
},
|
},
|
};
|
</script>
|
|
<style lang="stylus">
|
.WorkerDetailDialog {
|
.el-dialog {
|
width: auto;
|
max-width: calc(100% - 180px);
|
min-width: 1280px;
|
max-height: 100%;
|
overflow: hidden;
|
margin: 0 !important;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
|
p {
|
text-align: center;
|
color: #222222;
|
font-size: 18px;
|
font-weight: 500;
|
margin-bottom: 20px;
|
}
|
|
.el-dialog__header {
|
padding: 40px 0 30px;
|
|
.el-dialog__title {
|
margin: 0 0 0 20px;
|
}
|
|
.el-dialog__headerbtn {
|
top: 12px;
|
}
|
}
|
|
.el-dialog__body {
|
padding: 0 20px 26px;
|
.el-table {
|
td, th {
|
height: 48px;
|
padding: 0;
|
|
.cell {
|
line-height: 18px;
|
}
|
}
|
}
|
}
|
|
.el-dialog__footer {
|
padding: 0;
|
}
|
|
.dialog-footer {
|
padding: 0 0 40px;
|
}
|
|
.el-button {
|
width: 120px;
|
font-size: 14px;
|
line-height: 20px;
|
padding: 5px 0;
|
}
|
|
.el-form {
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
|
.el-form-item {
|
display: flex;
|
width: 45%;
|
margin: 0 30px 24px 0;
|
|
.el-form-item__label {
|
color: #888;
|
}
|
|
.el-form-item__content {
|
flex: 1;
|
|
.el-date-editor {
|
width: auto;
|
}
|
|
.el-select {
|
display: block;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.workerDetailDialogtitle {
|
margin: 0px 0 20px 0;
|
padding: 0 0 0 10px;
|
border-left: solid 2px #0081f0;
|
line-height: 16px;
|
font-size: 14px;
|
color: #222222;
|
}
|
.el-dialog__body {
|
max-height: 600px; /* 你可以根据需要调整这个值 */
|
overflow-y: auto; /* 当内容超出最大高度时，显示垂直滚动条 */
|
}
|
|
.family-address-item .el-form-item__content {
|
width: 50%; /* 或者你希望的特定宽度 */
|
}
|
</style>
|
