1442 lines
49 KiB
Vue
1442 lines
49 KiB
Vue
<template>
|
||
<div class="temporary whiteBlock">
|
||
<div class="placeholder"></div>
|
||
<div class="content">
|
||
<div class="title_wrap flex">
|
||
<el-form :inline="true" class="demo-form-inline" size="medium">
|
||
<el-form-item>
|
||
<!-- icon="el-icon-plus" -->
|
||
<!-- 人员录入 -->
|
||
<el-button v-permission="{key: 'rygl_inputPerson', menuPath: '/project/labor/personManage'}" type="primary" @click="addTemporary">{{
|
||
$t("message.laborMange.personnelEntry")
|
||
}}</el-button>
|
||
<el-button type="primary" v-if="false" icon="el-icon-upload"
|
||
>{{$t("message.laborMange.export")}}</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-form :inline="true" class="demo-form-inline" size="medium">
|
||
<el-form-item :label='$t("message.laborMange.healthCodeStatus")' v-if="COMPANY == 'nanchang'">
|
||
<el-select v-model="codeState" style="width: 120px">
|
||
<el-option
|
||
:label="$t('message.laborMange.all')"
|
||
value
|
||
></el-option>
|
||
<el-option :label="$t('message.laborMange.codeless')" value="0"></el-option>
|
||
<el-option :label="$t('message.laborMange.redCode')" value="1"></el-option>
|
||
<el-option :label="$t('message.laborMange.yellowCode')" value="2"></el-option>
|
||
<el-option :label="$t('message.laborMange.greenCode')" value="3"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.laborMange.compellation')">
|
||
<el-input :placeholder="$t('message.laborMange.placeholder2')" v-model="workerName"></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.laborMange.dateOfEntry')">
|
||
<el-date-picker
|
||
v-model="enterDate"
|
||
type="date"
|
||
:placeholder="$t('message.laborMange.pleaseChoose')"
|
||
value-format="yyyy-MM-dd"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<!-- 查询 -->
|
||
<el-button v-permission="{key: 'rygl_query', menuPath: '/project/labor/personManage'}" type="primary" @click="getInfoList" plain>{{
|
||
$t("message.laborMange.inquire")
|
||
}}</el-button>
|
||
<!-- 刷新 -->
|
||
<el-button
|
||
v-permission="{key: 'rygl_refresh', menuPath: '/project/labor/personManage'}"
|
||
type="warning"
|
||
@click="
|
||
workerName = '';
|
||
enterDate = '';
|
||
enterDate = '';
|
||
codeState = '';
|
||
getInfoList();
|
||
"
|
||
plain
|
||
>{{ $t("message.laborMange.refresh") }}</el-button
|
||
>
|
||
<el-button title="按班组导出" v-permission="{key: 'rygl_drive', menuPath: '/project/labor/personManage'}" type="primary" @click="exportFn">{{$t('message.laborMange.export')}}</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<vue-scroll style="height: 86%">
|
||
<el-table
|
||
:data="tableData"
|
||
style="width: 100%"
|
||
:header-cell-style="{ background: '#E2EBFF' }"
|
||
:show-header="false"
|
||
>
|
||
<el-table-column prop="attendanceNumber" align="center">
|
||
<template slot-scope="scope">
|
||
<div class="flex3" style="padding-left: 20px">
|
||
<img
|
||
:src="$store.state.FILEURL + scope.row.fieldAcquisitionUrl"
|
||
style="
|
||
width: 52px;
|
||
height: 72px;
|
||
margin: 0px 15px;
|
||
cursor: pointer;
|
||
"
|
||
@click="handlePreview(scope.row.fieldAcquisitionUrl)"
|
||
/>
|
||
<div>
|
||
<div class="workerName" @click="showDetail(scope.row)">
|
||
{{ scope.row.workerName }}
|
||
<el-tag
|
||
v-if="COMPANY == 'nanchang'"
|
||
:type="parseCode(scope.row.codeState)[0]"
|
||
size="small"
|
||
style="margin-left: 10px"
|
||
>{{ parseCode(scope.row.codeState)[1] }}</el-tag
|
||
>
|
||
</div>
|
||
<div>
|
||
<span>{{
|
||
scope.row.sex == 1
|
||
? $t("message.laborMange.man"):
|
||
scope.row.sex == 2?$t("message.laborMange.female"):''
|
||
}}</span>
|
||
<span>{{ scope.row.nation }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="attendanceNumber" align="left">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
{{ $t("message.laborMange.attendanceNumber") }}：{{
|
||
scope.row.attendanceNumber
|
||
}}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="idCard" align="lfet">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<div>
|
||
{{ $t("message.laborMange.IdNumber") }}：{{
|
||
scope.row.idCard
|
||
}}
|
||
</div>
|
||
<div>
|
||
{{ $t("message.laborMange.contactNumber") }}：{{
|
||
scope.row.phoneNumber
|
||
}}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="sex" label="" align="center">
|
||
<template slot-scope="scope">
|
||
<div class="flex" style="width: 40%; margin: auto">
|
||
<div
|
||
class="flex"
|
||
style="cursor: pointer"
|
||
@click="editStaffInfo(scope.row)"
|
||
>
|
||
<img
|
||
src="@/assets/images/icon-edit.png"
|
||
style="margin-right: 8px"
|
||
/>
|
||
<span>{{ $t("message.laborMange.edit") }}</span>
|
||
</div>
|
||
<div
|
||
class="flex"
|
||
style="cursor: pointer"
|
||
@click="deteleStaffInfo(scope.row)"
|
||
>
|
||
<img
|
||
src="@/assets/images/icon-delete.png"
|
||
style="margin-right: 8px; margin-top: -2px"
|
||
/>
|
||
<span>{{ $t("message.laborMange.delete") }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</vue-scroll>
|
||
<el-pagination
|
||
class="pagerBox"
|
||
style="margin: 10px 20px 0; text-align: center"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="page"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(total)"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
|
||
<!-- 新增 || 编辑 弹框 -->
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
class="temporaryDialog"
|
||
:title="temporaryTitle"
|
||
:visible.sync="temporaryDialog"
|
||
width="1100px"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<div class="dialog_content">
|
||
<el-form
|
||
ref="addForm"
|
||
:rules="rules"
|
||
:model="addForm"
|
||
size="small"
|
||
label-width="100px"
|
||
>
|
||
<el-row :gutter="24">
|
||
<div class="titleStyle flex">
|
||
<span>{{ $t("message.laborMange.essential") }}</span>
|
||
</div>
|
||
<el-col :span="16">
|
||
<el-row :gutter="24">
|
||
<el-col :span="11">
|
||
<el-form-item
|
||
:label="$t('message.laborMange.compellation')"
|
||
prop="workerName"
|
||
>
|
||
<el-input
|
||
v-model="addForm.workerName"
|
||
style="width: 210px"
|
||
:disabled="operationType == 'detail'"
|
||
:placeholder="$t('message.laborMange.placeholder2')"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<el-form-item
|
||
:label="$t('message.laborMange.sex')"
|
||
prop="sex"
|
||
>
|
||
<el-radio-group
|
||
v-model="addForm.sex"
|
||
:disabled="operationType == 'detail'"
|
||
>
|
||
<el-radio :label="1">{{
|
||
$t("message.laborMange.man")
|
||
}}</el-radio>
|
||
<el-radio :label="2">{{
|
||
$t("message.laborMange.female")
|
||
}}</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="11">
|
||
<el-form-item
|
||
:label="$t('message.laborMange.dateOfBirth')"
|
||
prop="birthday"
|
||
>
|
||
<el-date-picker
|
||
:disabled="operationType == 'detail'"
|
||
v-model="addForm.birthday"
|
||
style="width: 210px"
|
||
type="date"
|
||
value-format="yyyy-MM-dd"
|
||
:placeholder="$t('message.laborMange.pleaseSelectADate')"
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<el-form-item
|
||
:label="$t('message.laborMange.IdNumber2')"
|
||
prop="idCard"
|
||
>
|
||
<el-input
|
||
:disabled="operationType == 'detail'"
|
||
v-model="addForm.idCard"
|
||
style="width: 210px"
|
||
:placeholder="$t('message.laborMange.placeholder2')"
|
||
maxlength="18"
|
||
@input="handleIdCardInput($event)"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="11">
|
||
<el-form-item
|
||
:label="$t('message.laborMange.nation')"
|
||
prop="nation"
|
||
>
|
||
<el-select
|
||
style="width: 210px"
|
||
v-model="addForm.nation"
|
||
:placeholder="$t('message.laborMange.pleaseChoose')"
|
||
:disabled="operationType == 'detail'"
|
||
>
|
||
<el-option
|
||
v-for="item in $t('message.laborMange.nationList')"
|
||
:key="item.name"
|
||
:label="item.name"
|
||
:value="item.name"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<el-form-item
|
||
:label="$t('message.laborMange.nativePlace')"
|
||
prop="nativePlace"
|
||
>
|
||
<el-input
|
||
v-model="addForm.nativePlace"
|
||
:placeholder="$t('message.laborMange.placeholder2')"
|
||
style="width: 210px"
|
||
:disabled="operationType == 'detail'"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="11">
|
||
<el-form-item
|
||
:label="$t('message.laborMange.issuingAuthority')"
|
||
prop="issuingAuthorityForIdcard"
|
||
>
|
||
<el-input
|
||
v-model="addForm.issuingAuthorityForIdcard"
|
||
:placeholder="$t('message.laborMange.placeholder2')"
|
||
style="width: 210px"
|
||
:disabled="operationType == 'detail'"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<el-form-item
|
||
:label="$t('message.laborMange.effectiveDate')"
|
||
prop="idCardEndDate"
|
||
>
|
||
<el-date-picker
|
||
v-model="addForm.idCardEndDate"
|
||
style="width: 210px"
|
||
type="date"
|
||
value-format="yyyy-MM-dd"
|
||
:placeholder="$t('message.laborMange.pleaseSelectADate')"
|
||
:disabled="operationType == 'detail'"
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="11">
|
||
<el-form-item
|
||
:label="$t('message.laborMange.contactNumber')"
|
||
prop="phoneNumber"
|
||
>
|
||
<el-input
|
||
v-model="addForm.phoneNumber"
|
||
style="width: 210px"
|
||
:placeholder="$t('message.laborMange.placeholder2')"
|
||
oninput="if(value.length>11)value=value.slice(0,11)"
|
||
type="number"
|
||
:disabled="operationType == 'detail'"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<!-- <el-form-item label="进场日期" prop="enterDate">
|
||
<el-date-picker
|
||
v-model="addForm.enterDate"
|
||
style="width:210px"
|
||
type="date"
|
||
value-format="yyyy-MM-dd"
|
||
placeholder="请选择日期"
|
||
></el-date-picker>
|
||
</el-form-item>-->
|
||
<el-col :span="12">
|
||
|
||
<!-- <el-form-item
|
||
:label="$t('message.laborMange.frontAndBackOfIdCard')"
|
||
prop="idCardUpPhotoUrl"
|
||
>
|
||
<div class="flex3" style="width: 160px">
|
||
<div>
|
||
<div
|
||
v-if="personForm.idCardUpPhotoUrl"
|
||
style="
|
||
position: relative;
|
||
width: 60px;
|
||
height: 38px;
|
||
"
|
||
>
|
||
<img
|
||
:src="fileUrl + personForm.idCardUpPhotoUrl"
|
||
style="width: 60px; height: 38px"
|
||
@click="
|
||
handlePreview(
|
||
fileUrl + personForm.idCardUpPhotoUrl,
|
||
0
|
||
)
|
||
"
|
||
/>
|
||
<img
|
||
v-if="
|
||
personForm.idCardUpPhotoUrl &&
|
||
titleType != 'detail'
|
||
"
|
||
src="@/assets/images/shut_icon.png"
|
||
width="15px"
|
||
height="15px"
|
||
class="shut_icon"
|
||
@click="shutIconBtn(2)"
|
||
/>
|
||
</div>
|
||
<el-upload
|
||
v-else
|
||
class="upload-demo identity_card"
|
||
:action="uploadUrl"
|
||
:on-remove="(file) => handleRemove(file, 8)"
|
||
:on-success="(file) => handleSuccess(file, 8)"
|
||
:on-error="(file) => handleError(file, 8)"
|
||
:on-preview="(file) => handlePreview(file, 8)"
|
||
:beforeUpload="
|
||
(file) => handleBeforeUpload(file, 8)
|
||
"
|
||
name="files"
|
||
:class="titleType == 'detail' ? 'margin_top35' : ''"
|
||
:file-list="idCardUpPhotoUrlFile"
|
||
:disabled="titleType == 'detail'"
|
||
:show-file-list="false"
|
||
>
|
||
<img src="@/assets/images/cockade.png" />
|
||
</el-upload>
|
||
</div>
|
||
<div>
|
||
<div
|
||
v-if="personForm.idCardDownPhotoUrl"
|
||
style="
|
||
position: relative;
|
||
width: 60px;
|
||
height: 38px;
|
||
"
|
||
>
|
||
<img
|
||
:src="fileUrl + personForm.idCardDownPhotoUrl"
|
||
style="width: 60px; height: 38px"
|
||
@click="
|
||
handlePreview(
|
||
fileUrl + personForm.idCardDownPhotoUrl,
|
||
0
|
||
)
|
||
"
|
||
/>
|
||
<img
|
||
v-if="
|
||
personForm.idCardDownPhotoUrl &&
|
||
titleType != 'detail'
|
||
"
|
||
src="@/assets/images/shut_icon.png"
|
||
width="15px"
|
||
height="15px"
|
||
class="shut_icon"
|
||
@click="shutIconBtn(3)"
|
||
/>
|
||
</div>
|
||
<el-upload
|
||
v-else
|
||
class="upload-demo identity_card"
|
||
:action="uploadUrl"
|
||
:on-remove="(file) => handleRemove(file, 9)"
|
||
:on-success="(file) => handleSuccess(file, 9)"
|
||
:on-error="(file) => handleError(file, 9)"
|
||
:on-preview="(file) => handlePreview(file, 9)"
|
||
:beforeUpload="
|
||
(file) => handleBeforeUpload(file, 9)
|
||
"
|
||
name="files"
|
||
:class="titleType == 'detail' ? 'margin_top35' : ''"
|
||
:file-list="idCardDownPhotoUrlFile"
|
||
:disabled="titleType == 'detail'"
|
||
:show-file-list="false"
|
||
>
|
||
<img src="@/assets/images/portrait.png" />
|
||
</el-upload>
|
||
</div>
|
||
</div>
|
||
</el-form-item> -->
|
||
</el-col>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :span="8" style="margin: 15px 0 30px">
|
||
<div
|
||
style="text-align: center; margin: -20px 0 8px 0px"
|
||
class="flex"
|
||
v-if="operationType != 'detail'"
|
||
>
|
||
<el-button
|
||
type="primary"
|
||
size="medium"
|
||
@click="getIdCardInfo"
|
||
>{{ $t("message.laborMange.idCardInformation") }}</el-button
|
||
>
|
||
<el-button
|
||
type="primary"
|
||
size="medium"
|
||
@click="downloadPlugIn"
|
||
style="background: #09c2aa; border-color: #09c2aa"
|
||
>{{ $t("message.laborMange.highBeatDownload") }}</el-button
|
||
>
|
||
</div>
|
||
<div class="flex5 uploadImage_wrap">
|
||
<div class="position">
|
||
<img
|
||
:src="$store.state.FILEURL + addForm.idCardBigPhotoUrl"
|
||
v-if="addForm.idCardBigPhotoUrl != ''"
|
||
style="width: 100px; height: 119px; cursor: pointer"
|
||
@click="handlePreview(addForm.idCardBigPhotoUrl)"
|
||
/>
|
||
<img
|
||
v-else
|
||
:src="defaultImg"
|
||
style="width: 100%; height: auto; cursor: pointer"
|
||
/>
|
||
<img
|
||
src="@/assets/images/shut_icon.png"
|
||
style="width: 16px; height: auto"
|
||
class="shut_icon"
|
||
v-if="
|
||
addForm.idCardBigPhotoUrl != '' &&
|
||
operationType != 'detail'
|
||
"
|
||
@click.stop="addForm.idCardBigPhotoUrl = ''"
|
||
/>
|
||
</div>
|
||
<div class="position">
|
||
<img
|
||
:src="$store.state.FILEURL+addForm.fieldAcquisitionUrl"
|
||
v-if="addForm.fieldAcquisitionUrl!=''"
|
||
style="width: 100px; height: 119px; cursor: pointer"
|
||
@click="handlePreview(addForm.fieldAcquisitionUrl)"
|
||
/>
|
||
<img
|
||
v-else
|
||
:src="defaultImg"
|
||
style="width: 100%; height: auto; cursor: pointer"
|
||
/>
|
||
<img
|
||
src="@/assets/images/shut_icon.png"
|
||
style="width:16px; height:auto"
|
||
class="shut_icon"
|
||
v-if="addForm.fieldAcquisitionUrl!='' && operationType != 'detail'"
|
||
@click="addForm.fieldAcquisitionUrl=''"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="flex5" style="margin: 5px 0">
|
||
<span>
|
||
<!-- <span class="required">*</span> -->
|
||
<div style="width: 100px;text-align: center;">
|
||
{{ $t("message.laborMange.IdCardHead") }}
|
||
</div>
|
||
</span>
|
||
<span>
|
||
<span class="required">*</span>现场采集人脸
|
||
</span>
|
||
</div>
|
||
<div class="flex5" v-if="operationType != 'detail'">
|
||
<!-- <el-upload
|
||
class="upload-demo"
|
||
ref="upload"
|
||
:action="$store.state.UPLOADURL"
|
||
:before-upload="beforeUpload"
|
||
name="files"
|
||
:on-success="(file) => uploadSuccess(file, 1)"
|
||
:show-file-list="false"
|
||
:disabled="operationType == 'detail'"
|
||
>
|
||
<el-button slot="trigger" size="medium" type="primary">{{
|
||
$t("message.laborMange.clickOnTheUpload")
|
||
}}</el-button>
|
||
</el-upload>
|
||
<el-upload
|
||
class="upload-demo"
|
||
ref="upload"
|
||
:action="$store.state.UPLOADURL"
|
||
name="files"
|
||
:before-upload="beforeUpload"
|
||
:on-success="(file)=>uploadSuccess(file,2)"
|
||
:show-file-list="false"
|
||
>
|
||
<el-button slot="trigger" size="small" type="primary">点击上传</el-button>
|
||
</el-upload> -->
|
||
<el-upload
|
||
action="uploadUrl"
|
||
:on-remove="(file) => handleTemporaryRemove(file, 3)"
|
||
:on-preview="(file) => handleTemporaryPreview(file, 3)"
|
||
:beforeUpload="(file) => handleBeforeUpload(file, 3)"
|
||
:show-file-list="false"
|
||
:file-list="idCardBigPhotoUrlFile"
|
||
list-type="picture"
|
||
:http-request="
|
||
(val) => handleTemporaryUpload(val, 'idCardAvatar')
|
||
"
|
||
>
|
||
<el-button
|
||
size="medium"
|
||
style="padding: 9px 20px"
|
||
type="primary"
|
||
v-if="titleType != 'detail'"
|
||
>{{ $t("message.laborMange.clickOnTheUpload") }}</el-button
|
||
>
|
||
</el-upload>
|
||
<el-upload
|
||
action="uploadUrl"
|
||
:on-remove="(file) => handleTemporaryRemove(file, 4)"
|
||
:on-preview="(file) => handleTemporaryPreview(file, 4)"
|
||
:beforeUpload="(file) => handleBeforeUpload(file, 4)"
|
||
list-type="picture"
|
||
:show-file-list="false"
|
||
:file-list="fieldAcquisitionUrlFile"
|
||
:http-request="
|
||
(val) => handleTemporaryUpload(val, 'livesFace')
|
||
"
|
||
>
|
||
<el-button
|
||
size="medium"
|
||
style="padding: 9px 20px"
|
||
type="primary"
|
||
v-if="titleType != 'detail'"
|
||
>{{ $t("message.laborMange.clickOnTheUpload") }}</el-button
|
||
>
|
||
</el-upload>
|
||
</div>
|
||
</el-col>
|
||
<div class="titleStyle flex">
|
||
<span>{{ $t("message.laborMange.attendanceInfo") }}</span>
|
||
</div>
|
||
<el-row :gutter="24">
|
||
<el-col :span="11">
|
||
<el-form-item
|
||
:label="$t('message.laborMange.attendanceNumber')"
|
||
prop="attendanceNumber"
|
||
>
|
||
<el-input
|
||
v-model="addForm.attendanceNumber"
|
||
:placeholder="$t('message.laborMange.placeholder2')"
|
||
style="width: 210px"
|
||
:disabled="operationType == 'detail'"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-row>
|
||
</el-form>
|
||
<!-- style="margin-left:120px" -->
|
||
<div class="dialog-footer" v-if="operationType != 'detail'">
|
||
<el-button
|
||
size="medium"
|
||
icon="el-icon-circle-close"
|
||
@click="temporaryDialog = false"
|
||
>{{ $t("message.laborMange.cancel") }}</el-button
|
||
>
|
||
<el-button
|
||
icon="el-icon-circle-check"
|
||
type="primary"
|
||
size="medium"
|
||
@click="submitForm('addForm')"
|
||
>{{ $t("message.laborMange.confirm") }}</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 查看大图 -->
|
||
<div
|
||
v-if="bigImageDialog"
|
||
class="bigImageDialog"
|
||
@click="bigImageDialog = false"
|
||
>
|
||
<div class="bigImageContent">
|
||
<img width="auto" height="auto" :src="bigImageUrl" alt />
|
||
</div>
|
||
</div>
|
||
<!-- 图片裁剪弹框 -->
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="
|
||
$t('message.personnelPosition.mapManage.dialog_KJNova_Clipper.title')
|
||
"
|
||
:visible.sync="cropperDialog"
|
||
width="767px"
|
||
>
|
||
<div class="dialog_content" style="height: 400px">
|
||
<!-- <vue-scroll> -->
|
||
<vueCropper
|
||
ref="cropper"
|
||
:img="cropperOption.img"
|
||
:outputType="cropperOption.outputType"
|
||
:autoCropWidth="cropperOption.autoCropWidth"
|
||
:autoCropHeight="cropperOption.autoCropHeight"
|
||
:autoCrop="true"
|
||
:fixedBox="true"
|
||
></vueCropper>
|
||
<!-- </vue-scroll> -->
|
||
</div>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="cropperDialog = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>{{ $t("message.personnelPosition.cancel") }}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="saveMapUrlFn"
|
||
size="medium"
|
||
>{{ $t("message.personnelPosition.determine") }}
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import scroll from "vue-seamless-scroll";
|
||
import {
|
||
addWorkerInfo,
|
||
editWorkerInfo,
|
||
deleteWorkerInfo,
|
||
getWorkerInfoList,
|
||
} from "@/assets/js/api/laborPerson";
|
||
import {
|
||
IdentityCodeValid
|
||
} from '@/assets/js/util.js'
|
||
import { VueCropper } from "vue-cropper";
|
||
import { apiUploadImage } from "@/assets/js/api/common";
|
||
import lrz from "lrz";
|
||
export default {
|
||
name: "temporary",
|
||
components: {
|
||
scroll,
|
||
VueCropper
|
||
},
|
||
data() {
|
||
return {
|
||
//显示的文件列表
|
||
fieldAcquisitionUrlFile: [],
|
||
idCardBigPhotoUrlFile: [],
|
||
cropperOption: {
|
||
outputType: "png",
|
||
img: "",
|
||
autoCropWidth: 300, // 默认生成截图框宽度
|
||
autoCropHeight: 360, // 默认生成截图框高度
|
||
},
|
||
cropperDialog: false,
|
||
COMPANY: COMPANY,
|
||
tableData: [],
|
||
page: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
workerName: "",
|
||
enterDate: "",
|
||
codeState: "",
|
||
temporaryDialog: false,
|
||
temporaryTitle: this.$t("message.laborMange.personnelEntry"),
|
||
operationType: "add",
|
||
addForm: {
|
||
personType: 3,
|
||
workerName: "",
|
||
sex: "",
|
||
phoneNumber: "",
|
||
attendanceNumber: "",
|
||
nation: "",
|
||
issuingAuthorityForIdcard: "",
|
||
idCardBigPhotoUrl: "",
|
||
fieldAcquisitionUrl: "",
|
||
idCardEndDate: "",
|
||
nativePlace: "",
|
||
birthday: "",
|
||
idCard: "",
|
||
// enterDate: "",
|
||
},
|
||
bigImageDialog: false,
|
||
bigImageUrl: "",
|
||
projectSn: "",
|
||
defaultImg: require("../../../../assets/images/profile_photo.png"),
|
||
rules: {
|
||
workerName: [
|
||
{
|
||
required: true,
|
||
message: this.$t("message.laborMange.pleaseInputYourName"),
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
// sex: [
|
||
// {
|
||
// required: true,
|
||
// message: "请选择性别",
|
||
// trigger: "submit",
|
||
// },
|
||
// ],
|
||
idCard: [
|
||
{
|
||
required: true,
|
||
message: this.$t("message.laborMange.pleaseInputYourIdNumber"),
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
// attendanceNumber: [
|
||
// {
|
||
// required: true,
|
||
// message: this.$t(
|
||
// "message.laborMange.pleaseInputYourAttendanceNumber"
|
||
// ),
|
||
// trigger: "blur",
|
||
// },
|
||
// ],
|
||
// phoneNumber: [
|
||
// { required: true, message: "请输入联系电话", trigger: "blur" },
|
||
// ],
|
||
// enterDate: [
|
||
// { required: true, message: "请选择进场日期", trigger: "blur" },
|
||
// ],
|
||
},
|
||
};
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.getInfoList();
|
||
},
|
||
methods: {
|
||
// 人员照片库比对
|
||
checkImgLibrary(url) {
|
||
console.log(url);
|
||
checkImgLibraryApi({ fileUrl: url, projectSn: this.projectSn }).then(
|
||
(res) => {
|
||
if (res.result && res.result.length > 0) {
|
||
this.imgRadiolist = res.result;
|
||
this.radio = res.result[0].personSerial;
|
||
this.showImgList = true;
|
||
this.cropperDialog = false;
|
||
} else {
|
||
if (this.temporaryDialog1 || this.temporaryDialog2) {
|
||
this.personForm.personSerial = "";
|
||
this.personForm.fieldAcquisitionUrl = url;
|
||
this.fieldAcquisitionFile = [{ name: "", url: url }];
|
||
this.cropperDialog = false;
|
||
} else {
|
||
this.addForm.personSerial = "";
|
||
this.addForm.fieldAcquisitionUrl = url;
|
||
this.fieldAcquisitionFile = [{ name: "", url: url }];
|
||
this.cropperDialog = false;
|
||
}
|
||
}
|
||
console.log(res, "-----人员库照片查询");
|
||
}
|
||
);
|
||
},
|
||
//人脸监测、
|
||
checkFace(url) {
|
||
checkFaceApi({ fileUrl: url }).then((res) => {
|
||
if (res.result.checkType == 1) {
|
||
if (this.temporaryDialog1 || this.temporaryDialog2) {
|
||
this.personForm.fieldAcquisitionUrl = url;
|
||
this.fieldAcquisitionFile = [{ name: "", url: url }];
|
||
this.cropperDialog = false;
|
||
} else {
|
||
this.addForm.fieldAcquisitionUrl = url;
|
||
this.fieldAcquisitionFile = [{ name: "", url: url }];
|
||
this.cropperDialog = false;
|
||
}
|
||
} else {
|
||
this.$message.error(res.result.message);
|
||
}
|
||
});
|
||
},
|
||
//保存截图
|
||
saveMapUrlFn() {
|
||
this.$refs.cropper.startCrop();
|
||
var _this = this;
|
||
this.$refs.cropper.getCropBlob((data) => {
|
||
const isLt2M = data.size / 1024 < 500;
|
||
if (!isLt2M) {
|
||
this.$message.error(this.$t("message.laborMange.hint9"));
|
||
return;
|
||
}
|
||
var param = new FormData();
|
||
param.append("files", data, "image.png");
|
||
_this.$http
|
||
.post("/upload/image", param, {
|
||
headers: {
|
||
"Content-Type": "multipart/form-data",
|
||
},
|
||
})
|
||
.then((res) => {
|
||
console.log("aaaaa", res);
|
||
if (res.data.status == "SUCCESS") {
|
||
if (this.isSzProject == 1) {
|
||
this.checkImgLibrary(res.data.data[0].imageUrl);
|
||
} else {
|
||
this.checkFace(res.data.data[0].imageUrl);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
},
|
||
handleTemporaryUpload(fileData, type) {
|
||
console.log(fileData, 111222);
|
||
const file = fileData.file;
|
||
// 压缩图片
|
||
lrz(file, { quality: 1 }).then((result) => {
|
||
const formData = new FormData();
|
||
formData.append("files", result.file);
|
||
// 图片上传
|
||
apiUploadImage(formData).then((res) => {
|
||
if (res.code == 200 || res.status == "SUCCESS") {
|
||
const imgInfo = res.data[0];
|
||
|
||
switch (type) {
|
||
case "idCardAvatar": // 身份证头像
|
||
this.addForm.idCardBigPhotoUrl = imgInfo.imageUrl;
|
||
this.idCardUpPhotoFile = [
|
||
{ name: imgInfo.filename, url: imgInfo.imageUrl },
|
||
];
|
||
break;
|
||
case "livesFace": // 现场采集人脸
|
||
this.cropperOption.img =
|
||
this.$store.state.FILEURL + imgInfo.imageUrl;
|
||
this.cropperDialog = true;
|
||
// let imgStatus = result.file.size / 1024 < 500
|
||
// if (!imgStatus) {
|
||
// this.cropperOption.img =
|
||
// this.$store.state.FILEURL + imgInfo.imageUrl
|
||
// this.cropperDialog = true
|
||
// } else {
|
||
// if (this.isSzProject == 1) {
|
||
// this.checkImgLibrary(imgInfo.imageUrl)
|
||
// } else {
|
||
// this.checkFace(imgInfo.imageUrl)
|
||
// }
|
||
// }
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
});
|
||
},
|
||
// 文件上传 之前
|
||
handleBeforeUpload(file, type) {
|
||
if (
|
||
file.type != "image/jpeg" &&
|
||
file.type != "image/png" &&
|
||
file.type != "image/jpg" &&
|
||
file.type != "image/bmp"
|
||
) {
|
||
this.$message.error(this.$t("message.companyDiagram.uploadMsg")); //只能上传图片
|
||
return false;
|
||
} else if (type == 7) {
|
||
if (
|
||
file.type != "image/jpeg" &&
|
||
file.type != "image/jpg"
|
||
// file.type != "image/png"
|
||
) {
|
||
this.$message.error(this.$t("message.laborMange.hint8")); //"请上传jpg、jpeg格式图片"
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
},
|
||
//查看图片
|
||
handleTemporaryPreview(file, type) {
|
||
if (type === 0) {
|
||
this.bigImageDialog = true;
|
||
this.bigImageUrl = file;
|
||
} else {
|
||
// 新增企业 type == 1 资质照片; 2 logo;
|
||
// 人员录入 type == 3 体检报告; 4 合同附件; 5 从业资格证书; 6 身份证头像; 7 现场采集人脸;
|
||
let fileType = null;
|
||
if (file.response) {
|
||
let url = file.response.data[0];
|
||
fileType = url.imageUrl.split(".")[1];
|
||
} else {
|
||
fileType = file.url.split(".")[1];
|
||
}
|
||
if (
|
||
fileType != "jpg" &&
|
||
fileType != "jpeg" &&
|
||
fileType != "png" &&
|
||
fileType != "bmp" &&
|
||
fileType != "gif"
|
||
) {
|
||
window.open(this.fileUrl + file.url);
|
||
//type== 0 直接查看列表中的图片
|
||
} else {
|
||
this.bigImageDialog = true;
|
||
this.bigImageUrl = file.response
|
||
? this.fileUrl + file.response.data[0].imageUrl
|
||
: this.fileUrl + file.url;
|
||
}
|
||
}
|
||
},
|
||
handleTemporaryRemove() {
|
||
if (file.status == "ready") {
|
||
} else {
|
||
this.$message.success(this.$t("message.laborMange.deleteSuccess"));
|
||
if (type == 1) {
|
||
this.addForm.fieldAcquisitionUrl = "";
|
||
}
|
||
}
|
||
},
|
||
// 输入框输入后触发(输入身份证号码，自动产生出生日期)
|
||
handleIdCardInput(idCard) {
|
||
// console.log('身份证输入',idCard)
|
||
// 自动产生出生日期
|
||
if (idCard.length >= 14) {
|
||
// const bornStr = idCard.substr(6, 4) + '-' + idCard.substr(10, 2) + '-' + idCard.substr(12, 2)
|
||
// this.addForm.birthday = bornStr
|
||
this.addForm.birthday = this.getBirth(idCard)
|
||
}
|
||
|
||
// 自动判定性别
|
||
if (idCard.length >= 17) {
|
||
// const sexStr = idCard.substr(16, 1)
|
||
// const sexInt = parseInt(sexStr)
|
||
// if (sexInt % 2 === 0) { // 女
|
||
// this.form.sex = 2
|
||
// } else { // 男
|
||
// this.form.sex = 1
|
||
// }
|
||
|
||
this.addForm.sex = this.getSex(idCard)
|
||
}
|
||
},
|
||
// 获取 出生日期
|
||
getBirth(idCard) {
|
||
var birthday = ''
|
||
if (idCard != null && idCard != '') {
|
||
if (idCard.length == 15) {
|
||
birthday = '19' + idCard.slice(6, 12)
|
||
} else if (idCard.length == 18) {
|
||
birthday = idCard.slice(6, 14)
|
||
}
|
||
birthday = birthday.replace(/(.{4})(.{2})/, '$1-$2-')
|
||
//通过正则表达式来指定输出格式为:1990-01-01
|
||
}
|
||
return birthday
|
||
},
|
||
//获取 性别 男女
|
||
getSex(idCard) {
|
||
var sexStr = ''
|
||
if (parseInt(idCard.slice(-2, -1)) % 2 == 1) {
|
||
sexStr = 1
|
||
} else {
|
||
sexStr = 2
|
||
}
|
||
return sexStr
|
||
},
|
||
|
||
parseCode(code) {
|
||
if (code == 0) {
|
||
return ["info", this.$t("message.laborMange.codeless")];
|
||
} else if (code == 1) {
|
||
return ["danger", this.$t("message.laborMange.redCode")];
|
||
} else if (code == 2) {
|
||
return ["warning", this.$t("message.laborMange.yellowCode")];
|
||
} else if (code == 3) {
|
||
return ["success", this.$t("message.laborMange.greenCode")];
|
||
}
|
||
},
|
||
exportFn() {
|
||
window.location.href =
|
||
this.$http.defaults.baseURL +
|
||
"xmgl/download/exporZipWorkerInfo?" +
|
||
"projectSn=" +
|
||
this.projectSn +
|
||
"&workerName=" +
|
||
this.workerName +
|
||
"&personType=3" +
|
||
"&enterDate=" +
|
||
this.enterDate +
|
||
"&codeState=" +
|
||
this.codeState;
|
||
},
|
||
//获取列表信息
|
||
getInfoList() {
|
||
let data = {
|
||
personType: 3,
|
||
projectSn: this.projectSn,
|
||
pageNo: this.page,
|
||
pageSize: this.pageSize,
|
||
workerName: this.workerName,
|
||
enterDate: this.enterDate,
|
||
userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
|
||
codeState: this.codeState,
|
||
};
|
||
getWorkerInfoList(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.total = res.result.total;
|
||
this.tableData = JSON.parse(JSON.stringify(res.result.records));
|
||
console.log(' this.tableData', this.tableData);
|
||
}
|
||
});
|
||
},
|
||
|
||
//人员录入按钮
|
||
addTemporary() {
|
||
this.temporaryTitle = this.$t("message.laborMange.personnelEntry");
|
||
(this.operationType = "add"), (this.temporaryDialog = true);
|
||
this.addForm = {
|
||
personType: 3,
|
||
workerName: "",
|
||
sex: "",
|
||
phoneNumber: "",
|
||
attendanceNumber: "",
|
||
nation: "",
|
||
issuingAuthorityForIdcard: "",
|
||
idCardBigPhotoUrl: "",
|
||
fieldAcquisitionUrl: "",
|
||
idCardEndDate: "",
|
||
nativePlace: "",
|
||
birthday: "",
|
||
idCard: "",
|
||
// enterDate: "",
|
||
};
|
||
},
|
||
|
||
//人员录入 提交
|
||
submitForm(formName) {
|
||
if (this.addForm.idCardBigPhotoUrl == "") {
|
||
this.$message.error(
|
||
this.$t("message.laborMange.pleaseUploadYourIDPhoto")
|
||
);
|
||
return;
|
||
}
|
||
//身份证校验
|
||
if (!IdentityCodeValid(this.addForm.idCard)) {
|
||
this.$message.error(this.$t('message.laborMange.correctCellIdCard'))
|
||
return
|
||
}
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
this.addForm.projectSn = this.projectSn;
|
||
if (this.operationType == "add") {
|
||
addWorkerInfo(this.addForm).then((res) => {
|
||
if (res.code == 200) {
|
||
this.resetForm(formName);
|
||
this.temporaryDialog = false;
|
||
this.addForm.idCardBigPhotoUrl = "";
|
||
this.addForm.fieldAcquisitionUrl = "";
|
||
this.getInfoList();
|
||
}
|
||
});
|
||
} else {
|
||
delete this.addForm.addTime;
|
||
editWorkerInfo(this.addForm).then((res) => {
|
||
if (res.code == 200) {
|
||
this.resetForm(formName);
|
||
this.temporaryDialog = false;
|
||
this.addForm.idCardBigPhotoUrl = "";
|
||
this.addForm.fieldAcquisitionUrl = "";
|
||
this.getInfoList();
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
|
||
//编辑人员信息
|
||
editStaffInfo(value) {
|
||
this.temporaryDialog = true;
|
||
this.temporaryTitle = this.$t("message.laborMange.editCrewInfo");
|
||
this.operationType = "edit";
|
||
this.addForm = JSON.parse(JSON.stringify(value));
|
||
console.log(this.addForm.idCardBigPhotoUrl);
|
||
},
|
||
|
||
//删除人员信息
|
||
deteleStaffInfo(value) {
|
||
this.$confirm(
|
||
this.$t("message.laborMange.deleteHint"),
|
||
this.$t("message.laborMange.hint"),
|
||
{
|
||
confirmButtonText: this.$t("message.laborMange.confirm"),
|
||
cancelButtonText: this.$t("message.laborMange.cancel"),
|
||
type: "warning",
|
||
}
|
||
)
|
||
.then(() => {
|
||
let data = {
|
||
id: value.id,
|
||
};
|
||
deleteWorkerInfo(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
type: "success",
|
||
message: this.$t("message.laborMange.deleteSuccess"),
|
||
});
|
||
this.getInfoList();
|
||
}
|
||
});
|
||
})
|
||
.catch(() => {
|
||
// this.$message({
|
||
// type: "info",
|
||
// message: "已取消删除",
|
||
// });
|
||
});
|
||
},
|
||
//查看详情
|
||
showDetail(value) {
|
||
this.addForm = {};
|
||
this.addForm = JSON.parse(JSON.stringify(value));
|
||
this.temporaryDialog = true;
|
||
this.temporaryTitle = this.$t("message.laborMange.crewInfoDetail");
|
||
this.operationType = "detail";
|
||
},
|
||
|
||
//查看图片
|
||
handlePreview(file) {
|
||
this.bigImageDialog = true;
|
||
this.bigImageUrl = this.$store.state.FILEURL + file;
|
||
},
|
||
|
||
//重置表单
|
||
resetForm(formName) {
|
||
this.$refs[formName].resetFields();
|
||
},
|
||
//切换数量
|
||
handleSizeChange(value) {
|
||
this.pageSize = value;
|
||
this.getInfoList();
|
||
},
|
||
handleCurrentChange(value) {
|
||
this.page = value;
|
||
this.getInfoList();
|
||
},
|
||
//上传前
|
||
beforeUpload(file) {
|
||
if (
|
||
file.type != "image/jpeg" &&
|
||
file.type != "image/png" &&
|
||
file.type != "image/jpg" &&
|
||
file.type != "image/bmp"
|
||
) {
|
||
this.$message.error(this.$t("message.companyDiagram.uploadMsg")); //只能上传图片
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
},
|
||
//上传成功
|
||
uploadSuccess(file, type) {
|
||
if (type == 1) {
|
||
this.addForm.idCardBigPhotoUrl = file.data[0].imageUrl;
|
||
} else {
|
||
this.addForm.fieldAcquisitionUrl = file.data[0].imageUrl;
|
||
}
|
||
},
|
||
//下载高拍仪插件
|
||
downloadPlugIn() {
|
||
window.open("http://139.159.226.224:9000/itbgp/file/IDCamera1.0.rar");
|
||
},
|
||
|
||
//高拍仪获取身份证信息
|
||
getIdCardInfo() {
|
||
var ws = new WebSocket("ws://127.0.0.1:1818");
|
||
this.webSocket = ws;
|
||
ws.onopen = (event) => {
|
||
this.onopen(event);
|
||
};
|
||
|
||
ws.onmessage = (event) => {
|
||
this.onmessage(event);
|
||
};
|
||
|
||
ws.onerror = this.onerror;
|
||
},
|
||
//发送链接设备请求
|
||
onopen(event) {
|
||
// 识别身份证
|
||
this.webSocket.send("ReadCard(1001,C:\\Doccamera\\)");
|
||
},
|
||
//接收服务器返回的信息
|
||
onmessage(event) {
|
||
//结束通讯
|
||
if (
|
||
event.data.indexOf("BeginbStopPlaytrueEndbStopPlay") >= 0 ||
|
||
event.data.indexOf("BeginbStopPlayfalseEndbStopPlay") >= 0 ||
|
||
event.data.indexOf("BeginbStartPlayfalseEndbStartPlay") >= 0 ||
|
||
event.data.indexOf("BeginbStartPlay2falseEndbStartPlay2") >= 0 ||
|
||
event.data.indexOf("BeginOpenFaceFrametrueEndOpenFaceFrame") >= 0
|
||
) {
|
||
return;
|
||
}
|
||
|
||
if (event.data.indexOf("BeginReadCard") >= 0) {
|
||
//获取身份证信息
|
||
if (event.data == "BeginReadCardEndReadCard") {
|
||
this.$message.error(
|
||
this.$t("message.laborMange.failedToObtainIdentityInformation")
|
||
);
|
||
return;
|
||
} else {
|
||
// 截取掉 多余的字符
|
||
let data = JSON.parse(
|
||
event.data.replace("BeginReadCard", "").replace("EndReadCard", "")
|
||
);
|
||
console.log(data);
|
||
//身份证 人脸照片
|
||
this.uploadFile(data.FrontB64);
|
||
this.addForm.sex = data.Sex == "男" ? 1 : 2;
|
||
this.addForm.workerName = data.Name;
|
||
this.addForm.nation = data.Folk + this.$t("message.laborMange.clan");
|
||
this.addForm.issuingAuthorityForIdcard = data.Agency;
|
||
this.addForm.birthday =
|
||
data.BirthDate.substring(0, 4) +
|
||
"-" +
|
||
data.BirthDate.substring(4, 6) +
|
||
"-" +
|
||
data.BirthDate.substring(6, 8);
|
||
//截取身份证有效日期
|
||
let date = data.Valid.split("-");
|
||
this.addForm.idCardEndDate = date[1] == "长期" ? "" : date[1];
|
||
this.addForm.nativePlace = data.Address;
|
||
this.addForm.idCard = data.IdNo;
|
||
}
|
||
}
|
||
},
|
||
onerror() {
|
||
this.$message.error(this.$t("message.laborMange.failedToConnectDevice"));
|
||
},
|
||
|
||
//上传现场采集照片发到服务器
|
||
uploadFile(url) {
|
||
let param = new FormData(); //创建form对象
|
||
param.append("base64Image", "data:image/jpeg;base64," + url); //通过append向form对象添加数据
|
||
this.$http({
|
||
url: "/upload/uploadBase64",
|
||
method: "post",
|
||
data: param,
|
||
headers: {
|
||
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
|
||
},
|
||
}).then((res) => {
|
||
if ((res.status = "SUCCESS")) {
|
||
this.addForm.idCardBigPhotoUrl = res.data.data.imageUrl;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.flex2 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
.flex3 {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.flex4 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.flex5 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
.temporary {
|
||
// width: 100%;
|
||
height: auto;
|
||
.placeholder {
|
||
width: 100%;
|
||
height: 41px;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
}
|
||
.content {
|
||
padding: 15px 0;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: calc(100% - 42px);
|
||
}
|
||
.title_wrap {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 20px;
|
||
border-bottom: 2px solid @borderColor;
|
||
}
|
||
.titleStyle {
|
||
width: 100%;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin: -15px 0 30px;
|
||
background: #ededed;
|
||
padding: 10px 15px;
|
||
box-sizing: border-box;
|
||
}
|
||
.el-button--small {
|
||
height: 32px;
|
||
}
|
||
.uploadImage_wrap {
|
||
margin: 10px 0 0 0;
|
||
.position {
|
||
position: relative;
|
||
}
|
||
.shut_icon {
|
||
position: absolute;
|
||
top: -11px;
|
||
right: -11px;
|
||
z-index: 100;
|
||
margin: 5px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.required {
|
||
color: #f56c6c;
|
||
}
|
||
.workerName {
|
||
color: #5181f6;
|
||
font-size: 18px;
|
||
margin-bottom: 10px;
|
||
cursor: pointer;
|
||
}
|
||
.bigImageDialog {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
text-align: center;
|
||
z-index: 1000000;
|
||
overflow-y: auto;
|
||
// padding-bottom: 50px;
|
||
height: 100%;
|
||
.bigImageContent {
|
||
height: 100%;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
img {
|
||
// margin-top: 10%;
|
||
position: relative;
|
||
top: 10%;
|
||
max-height: 80%;
|
||
max-width: 80%;
|
||
}
|
||
}
|
||
}
|
||
</style> |