You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
817 lines
23 KiB
817 lines
23 KiB
<template> |
|
<basic-container v-loading="loadingObj.pageLoading"> |
|
<div class="avue-crud"> |
|
<el-form label-width="140px" ref="formRef" :inline="true" :model="form"> |
|
<el-form-item |
|
style="width: 30%" |
|
:label="item.label" |
|
v-for="item in option" |
|
:key="item.prop" |
|
:prop="item.prop" |
|
:rules="item.rules" |
|
> |
|
<!-- 输入框 --> |
|
<el-input |
|
clearable |
|
v-model="form[item.prop]" |
|
@input="() => item.input && item.input(form[item.prop], item)" |
|
v-if="item.type == 'input'" |
|
:placeholder="item.placeholder || '请输入' + item.label" |
|
/> |
|
|
|
<!-- 数字输入框 --> |
|
<el-input-number |
|
v-model="form[item.prop]" |
|
@input="() => item.input && item.input(form[item.prop], item)" |
|
clearable |
|
v-else-if="item.type == 'number'" |
|
:precision="item.precision" |
|
:min="item.min || 0" |
|
:controls="false" |
|
:placeholder="item.placeholder || '请输入' + item.label" |
|
class="w100" |
|
:value-on-clear="item.min || 0" |
|
/> |
|
|
|
<!-- 日期 --> |
|
<el-date-picker |
|
v-model="form[item.prop]" |
|
v-else-if="item.type == 'date'" |
|
clearable |
|
type="date" |
|
:placeholder="item.placeholder || '请选择' + item.label" |
|
:disabled-date="disabledDate" |
|
class="w100" |
|
:value-format="item.valueFormat || 'yyyy-MM-dd'" |
|
/> |
|
|
|
<!-- 下拉框 --> |
|
<el-select |
|
v-else-if="item.type == 'select'" |
|
v-model="form[item.prop]" |
|
class="w100" |
|
clearable |
|
:placeholder="item.placeholder || '请选择' + item.label" |
|
:multiple="item.multiple || false" |
|
:filterable="item.filterable || false" |
|
> |
|
<el-option |
|
v-for="value in item.options" |
|
:key="value.dictKey" |
|
:label="value.dictValue" |
|
:value="value.dictKey" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<div class="img-container"> |
|
<el-form-item |
|
style="width: 30%" |
|
:label="item.label" |
|
v-for="item in imgOption" |
|
:key="item.prop" |
|
:prop="item.prop" |
|
:rules="item.rules" |
|
> |
|
<el-upload |
|
list-type="picture-card" |
|
:show-file-list="false" |
|
:on-preview="handlePreview" |
|
:action="'/api/blade-resource/oss/endpoint/put-file'" |
|
:on-success="file => handleUpLoadSuccess(file, item)" |
|
:before-upload="handleBeforeUpload" |
|
:on-exceed="() => handleImgError(item)" |
|
:headers="headers" |
|
> |
|
<div v-if="form[item.prop]" @click.stop class="upLoadImg_box"> |
|
<el-image |
|
:src="form[item.prop]" |
|
class="avatar" |
|
:preview-src-list="[form[item.prop]]" |
|
/> |
|
|
|
<div class="clearIcon" @click="() => handleRemoveImg(item)"> |
|
<el-icon color="#f00"><DeleteFilled /></el-icon> |
|
</div> |
|
</div> |
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> |
|
</el-upload> |
|
</el-form-item> |
|
</div> |
|
</el-form> |
|
</div> |
|
<div class="submit_container"> |
|
<el-button icon="CircleClose" @click="back">关 闭</el-button> |
|
<el-button icon="Refresh" type="primary" @click="handleReset">重 置</el-button> |
|
<el-button icon="Promotion" type="primary" @click="submitForm">保 存</el-button> |
|
</div> |
|
</basic-container> |
|
</template> |
|
|
|
<script> |
|
import { |
|
getList, |
|
getDetail, |
|
add, |
|
update, |
|
remove, |
|
getPage, |
|
} from '@/api/basicdata/basicdataDriverArtery'; |
|
/** 获取字典 */ |
|
import { getDictionaryBiz } from '@/api/system/dict'; |
|
import { getVehicle, getListName, getDictionary } from '@/api/basicdata/basicdataVehicle'; |
|
import { mapGetters } from 'vuex'; |
|
import { getToken } from '@/utils/auth'; |
|
import { downloadXls, setNodeHeight, debounce } from '@/utils/util'; |
|
import { ElMessageBox } from 'element-plus'; |
|
export default { |
|
name: '/basicdata/driverArtery/basicdataDriverArteryAdd', |
|
data() { |
|
return { |
|
// 表单数据 |
|
form: {}, |
|
option: [ |
|
{ |
|
label: '姓名', |
|
prop: 'name', |
|
type: 'input', |
|
rules: [{ required: true, message: '请输入姓名!', trigger: ['blur', 'change'] }], |
|
}, |
|
{ |
|
label: '手机号码', |
|
prop: 'phone', |
|
type: 'input', |
|
precision: 0, |
|
blur(payload) { |
|
console.log('payload :>> ', payload); |
|
payload.value = payload.value + 1; |
|
console.log('111 :>> ', 111); |
|
}, |
|
|
|
rules: [ |
|
{ |
|
required: true, |
|
message: '请输入电话号码', |
|
trigger: 'blur', |
|
}, |
|
], |
|
}, |
|
{ |
|
label: '司机类型', |
|
prop: 'type', |
|
filterable: true, |
|
type: 'select', |
|
dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_driver_type', |
|
options: [], |
|
rules: [{ required: true, message: '请选择司机类型', trigger: ['blur', 'change'] }], |
|
}, |
|
{ |
|
label: '职务类型', |
|
prop: 'jobType', |
|
filterable: true, |
|
type: 'select', |
|
dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_driverjob_type', |
|
options: [], |
|
multiple: true, |
|
rules: [{ required: true, message: '请选择职务类型', trigger: ['blur'] }], |
|
}, |
|
{ |
|
label: '准驾车型', |
|
prop: 'drivingType', |
|
filterable: true, |
|
type: 'select', |
|
dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_driving_type', |
|
rules: [{ required: true, message: '请选择准驾车型', trigger: ['blur', 'change'] }], |
|
options: [], |
|
}, |
|
|
|
{ |
|
label: '绑定车辆', |
|
prop: 'bindVehicles', |
|
filterable: true, |
|
type: 'select', |
|
remote: true, |
|
multiple: true, |
|
// dicData: [], |
|
dicUrl: '/api/logpm-basicdata/vehicle/dictionary?vehicleNub={{key}}', |
|
options: [], |
|
multiple: true, |
|
}, |
|
{ |
|
label: '合同开始时间', |
|
prop: 'contractStartTime', |
|
type: 'date', |
|
format: 'YYYY-MM-DD', |
|
valueFormat: 'YYYY-MM-DD', |
|
}, |
|
{ |
|
label: '合同结束时间', |
|
prop: 'contractEndTime', |
|
type: 'date', |
|
format: 'YYYY-MM-DD', |
|
valueFormat: 'YYYY-MM-DD', |
|
}, |
|
{ |
|
label: '身份证号', |
|
prop: 'idCard', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '性别', |
|
prop: 'gender', |
|
filterable: true, |
|
type: 'select', |
|
|
|
dicUrl: '/api/blade-system/dict-biz/dictionary?code=sex', |
|
options: [], |
|
}, |
|
{ |
|
label: '仓库', |
|
prop: 'warehouseIds', |
|
filterable: true, |
|
type: 'select', |
|
remote: true, |
|
dicUrl: '/logpm-basicdata/warehouse/listName?name={{key}}', |
|
options: [], |
|
rules: [{ required: true, message: '请选择仓库!', trigger: 'blur' }], |
|
multiple: true, |
|
}, |
|
{ |
|
label: '居住地址', |
|
prop: 'residentialAddress', |
|
type: 'input', |
|
}, |
|
{ |
|
label: '银行类型', |
|
prop: 'bankType', |
|
filterable: true, |
|
type: 'select', |
|
dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_bank_type', |
|
options: [], |
|
}, |
|
{ |
|
label: '银行卡号', |
|
prop: 'bankCardNub', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '驾驶证号', |
|
prop: 'driverLicenseNub', |
|
type: 'input', |
|
}, |
|
{ |
|
label: '驾驶证发证机关', |
|
prop: 'driverLicenseOrgan', |
|
type: 'input', |
|
}, |
|
{ |
|
label: '驾驶证起始日期', |
|
prop: 'driverLicenseStartTime', |
|
type: 'date', |
|
format: 'YYYY-MM-DD', |
|
valueFormat: 'YYYY-MM-DD', |
|
}, |
|
{ |
|
label: '驾驶证到期日期', |
|
prop: 'driverLicenseEndTime', |
|
type: 'date', |
|
format: 'YYYY-MM-DD', |
|
valueFormat: 'YYYY-MM-DD', |
|
}, |
|
{ |
|
label: '从业资格证编号', |
|
prop: 'employeeQualificationNub', |
|
type: 'input', |
|
}, |
|
{ |
|
label: '道路经营许可证号', |
|
prop: 'roadOperationLicenseNub', |
|
type: 'input', |
|
}, |
|
{ |
|
label: '承运商', |
|
prop: 'carrierId', |
|
filterable: true, |
|
type: 'select', |
|
filterable: true, |
|
dicUrl: '/api/logpm-basicdata/carrier/dictionary', |
|
options: [], |
|
rules: [{ required: true, message: '请选择承运商!', trigger: 'blur' }], |
|
}, |
|
{ |
|
label: '运输协议', |
|
prop: 'transportationAgreement', |
|
type: 'input', |
|
}, |
|
{ |
|
label: '备注', |
|
prop: 'notes', |
|
type: 'input', |
|
}, |
|
], |
|
imgOption: [ |
|
{ |
|
label: '人证合照照片', |
|
prop: 'licensePeoplePhoto', |
|
type: 'upload', |
|
dataType: 'string', |
|
listType: 'picture-img', |
|
hide: true, |
|
multiple: false, |
|
action: '/blade-resource/oss/endpoint/put-file', |
|
propsHttp: { |
|
res: 'data', |
|
url: 'link', |
|
}, |
|
}, |
|
{ |
|
label: '身份证正面照片', |
|
prop: 'idCardFrontPhoto', |
|
type: 'upload', |
|
dataType: 'string', |
|
listType: 'picture-img', |
|
hide: true, |
|
multiple: false, |
|
action: '/blade-resource/oss/endpoint/put-file', |
|
propsHttp: { |
|
res: 'data', |
|
url: 'link', |
|
}, |
|
}, |
|
{ |
|
label: '身份证背面照片', |
|
prop: 'idCardBackPhoto', |
|
type: 'upload', |
|
dataType: 'string', |
|
listType: 'picture-img', |
|
hide: true, |
|
multiple: false, |
|
action: '/blade-resource/oss/endpoint/put-file', |
|
propsHttp: { |
|
res: 'data', |
|
url: 'link', |
|
}, |
|
}, |
|
{ |
|
label: '驾驶证照片', |
|
prop: 'driverLicensePhoto', |
|
type: 'upload', |
|
dataType: 'string', |
|
listType: 'picture-img', |
|
hide: true, |
|
multiple: false, |
|
action: '/blade-resource/oss/endpoint/put-file', |
|
propsHttp: { |
|
res: 'data', |
|
url: 'link', |
|
}, |
|
}, |
|
{ |
|
label: '驾驶证背面照片', |
|
prop: 'driverLicensePhotoBack', |
|
type: 'upload', |
|
dataType: 'string', |
|
listType: 'picture-img', |
|
hide: true, |
|
multiple: false, |
|
action: '/blade-resource/oss/endpoint/put-file', |
|
propsHttp: { |
|
res: 'data', |
|
url: 'link', |
|
}, |
|
}, |
|
], |
|
rules: {}, |
|
/** 头部 */ |
|
headers: { |
|
'Blade-Auth': 'bearer ' + getToken(), |
|
}, |
|
shortcuts: [ |
|
{ |
|
text: '最近一周', |
|
value: () => { |
|
const end = new Date(); |
|
const start = new Date(); |
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
|
return [start, end]; |
|
}, |
|
}, |
|
{ |
|
text: '最近一个月', |
|
value: () => { |
|
const end = new Date(); |
|
const start = new Date(); |
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
|
return [start, end]; |
|
}, |
|
}, |
|
{ |
|
text: '最近三个月', |
|
value: () => { |
|
const end = new Date(); |
|
const start = new Date(); |
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
|
return [start, end]; |
|
}, |
|
}, |
|
], |
|
/** loading */ |
|
loadingObj: { |
|
/** 表格loading */ |
|
loading: false, |
|
/** 页面loading */ |
|
pageLoading: false, |
|
}, |
|
}; |
|
}, |
|
computed: { |
|
...mapGetters(['permission']), |
|
permissionList() { |
|
return { |
|
addBtn: this.validData(this.permission.basicdataDriverArtery_add, false), |
|
}; |
|
}, |
|
}, |
|
async created() { |
|
console.log('created'); |
|
try { |
|
this.loadingObj.pageLoading = true; |
|
|
|
await Promise.all([this.onLoad(), this.hanleOptions()]); |
|
this.rules = this.getRules(); |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
this.loadingObj.pageLoading = false; |
|
} |
|
}, |
|
methods: { |
|
/** 获取验证规则 */ |
|
getRules() { |
|
const _rulesArr = {}; |
|
|
|
for (let i = 0; i < this.option.length; i++) { |
|
const value = this.option[i]; |
|
|
|
if (value.rules && value.rules.length > 0) { |
|
_rulesArr[value.prop] = value.rules; |
|
} |
|
|
|
return _rulesArr; |
|
} |
|
}, |
|
/** 查询车辆绑定情况 */ |
|
getVehiclede() { |
|
getVehicle().then(res => { |
|
console.log('车辆信息', res.data.data); |
|
res.data.data.map(v => {}); |
|
}); |
|
}, |
|
/** 获取复选框的值 */ |
|
async hanleOptions() { |
|
const res = await Promise.all([ |
|
// 司机类型 |
|
getDictionaryBiz('basic_driver_type'), |
|
// 职务类型 |
|
getDictionaryBiz('basic_driverjob_type'), |
|
// 准驾车型 |
|
getDictionaryBiz('basic_driving_type'), |
|
// 性别 |
|
getDictionaryBiz('sex'), |
|
// 银行类型 |
|
getDictionaryBiz('basic_bank_type'), |
|
// 绑定车辆 |
|
getVehicle(), |
|
// 仓库 |
|
getListName({ name: '' }), |
|
// 承运商 |
|
getDictionary(), |
|
]); |
|
|
|
const _nameArr = [ |
|
'司机类型', |
|
'职务类型', |
|
'准驾车型', |
|
'性别', |
|
'银行类型', |
|
'绑定车辆', |
|
'仓库', |
|
'承运商', |
|
]; |
|
|
|
for (let i = 0; i < this.option.length; i++) { |
|
const value = this.option[i]; |
|
|
|
const _index = _nameArr.indexOf(value.label); |
|
if (_index === -1) continue; |
|
const response = res[_index]; |
|
console.log('response :>> ', response); |
|
const { code } = response.data; |
|
const data = response.data.data || []; |
|
|
|
if (code !== 200) continue; |
|
if (value.label === '绑定车辆') { |
|
const _data = []; |
|
|
|
for (let index = 0; index < data.length; index++) { |
|
_data.push({ |
|
dictKey: data[index].id, |
|
dictValue: data[index].vehicleNub, |
|
}); |
|
} |
|
|
|
value.options = _data; |
|
} else if (value.label === '仓库') { |
|
const _data = []; |
|
|
|
for (let index = 0; index < data.length; index++) { |
|
_data.push({ |
|
dictKey: data[index].id, |
|
dictValue: data[index].name, |
|
}); |
|
} |
|
value.options = _data; |
|
} else if (value.label === '承运商') { |
|
const _data = []; |
|
|
|
for (let index = 0; index < data.length; index++) { |
|
_data.push({ |
|
dictKey: data[index].id, |
|
dictValue: data[index].carrierName, |
|
}); |
|
} |
|
value.options = _data; |
|
} else value.options = data; |
|
} |
|
console.log('res :>> ', res); |
|
}, |
|
/** 上传前 */ |
|
handleBeforeUpload(file) { |
|
const isJPG = file.type === 'image/jpeg'; |
|
const isPNG = file.type === 'image/png'; |
|
const isLt2M = file.size / 1024 / 1024 < 2; |
|
|
|
if (!isJPG && !isPNG) { |
|
this.$message.error('上传图片只能是 JPG 或 PNG 格式!'); |
|
} |
|
if (!isLt2M) { |
|
this.$message.error('上传图片大小不能超过 2MB!'); |
|
} else { |
|
return (isJPG || isPNG) && isLt2M; |
|
} |
|
|
|
/* let that = this; |
|
// ?通过FormData构造函数创建一个空对象 |
|
let formData = new FormData(); |
|
let reader = new FileReader(); |
|
// ?将读取到的文件编码成DataURL |
|
reader.readAsDataURL(file); |
|
// ?压缩图片 |
|
reader.onload = function (ev) { |
|
try { |
|
// ?读取图片来获得上传图片的宽高 |
|
let img = new Image(); |
|
img.src = ev.target.result; |
|
img.onload = function (ev) { |
|
// ?将图片绘制到canvas画布上进行压缩 |
|
let canvas = document.createElement('canvas'); |
|
let context = canvas.getContext('2d'); |
|
let imgwidth = img.width; |
|
let imgHeight = img.height; |
|
// ?按比例缩放后图片宽高; |
|
let targetwidth = imgwidth; |
|
let targetHeight = imgHeight; |
|
// ?/如果原图宽大于最大宽度 |
|
if (targetWidth > targetHeight) { |
|
// ?原图宽高比例 |
|
let scale = targetHeight / 1280; |
|
targetHeight = 1280; |
|
targetWidth = targetwidth / scale; |
|
} else { |
|
// ?原图宽高比例 |
|
let scale = targetWidth / 1280; |
|
targetWidth = 1280; |
|
targetHeight = targetHeight / scale; |
|
} |
|
// ?缩放后高度仍然大于最大高度继续按比例缩小 |
|
canvas.width = targetwidth; //canvas的宽=图片的宽 |
|
canvas.height = targetHeight; //canvas的高=图片的高 |
|
context.clearRect(0, 0, canvas.width, canvas.height); |
|
context.drawImage(this, 0, 0, canvas.width, canvas.height); |
|
let data = ''; |
|
// ?如果图片小于0.6Mb，不进行压缩，并返回二进制流 |
|
if (file.size <= 628288) { |
|
data = canvas.toDataURL('image/jpeg'); |
|
formData.append('file', file); |
|
that.handleChange(file); |
|
} |
|
// ?如果图片大于e.6Mb，进行压缩，并返回二进制流 |
|
else { |
|
// todo 压缩文件大小比例 |
|
data = canvas.toDataURL('image/jpeg', 0.4); |
|
let paper = that.GLOBAL.dataURLtoFile(data, file.name); |
|
formData.append('file', paper); |
|
console.log('paper :>> ', paper); |
|
} |
|
}; |
|
} catch (error) { |
|
console.log('出现错误', error); |
|
} |
|
}; */ |
|
}, |
|
/** 上传成功 */ |
|
handleUpLoadSuccess(file, item) { |
|
console.log('file :>> ', file); |
|
console.log(' this.form :>> ', this.form); |
|
if (file.code !== 200) return; |
|
this.form[item.prop] = file.data.link; |
|
}, |
|
/** 移除图片 */ |
|
handleRemoveImg(item) { |
|
delete this.form[item.prop]; |
|
}, |
|
handleImgError(item) { |
|
this.$message.error(item.label + '仅需上传一张图片'); |
|
}, |
|
handlePreview(file) { |
|
console.log('file :>> ', file); |
|
}, |
|
async onLoad() { |
|
const _id = this.$route.query.id; |
|
if (!_id) return; |
|
const res = await getDetail(_id); |
|
|
|
const { code, data } = res.data; |
|
if (code !== 200) return; |
|
const _data = data; |
|
this.form = { |
|
..._data, |
|
}; |
|
this.form.jobType= this.form.jobTypeString |
|
this.form.bindVehicles = _data.bindVehicles && _data.bindVehicles.split(','); |
|
this.form.warehouseIds = _data.warehouses.map(val => val.warehouseId); |
|
console.log('_data :>> ', _data); |
|
}, |
|
/** 新增 */ |
|
async handleAdd() { |
|
try { |
|
this.loadingObj.pageLoading = true; |
|
|
|
const submitData = { ...this.form }; |
|
submitData.bindVehicles = this.form.bindVehicles && this.form.bindVehicles.join(','); |
|
submitData.phone = this.form.phone.trim(); |
|
submitData.jobType = submitData.jobType.join(',') |
|
|
|
const res = await add(submitData); |
|
const { code, msg } = res.data; |
|
if (code !== 200) return; |
|
this.$message.success(msg); |
|
|
|
ElMessageBox.confirm('是否继续添加?', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
distinguishCancelAndClose: true, |
|
type: 'warning', |
|
}) |
|
.then(() => { |
|
submitData.jobType=[] |
|
this.$refs.formRef.resetFields(); |
|
}) |
|
.catch(() => this.back()); |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
this.loadingObj.pageLoading = false; |
|
} |
|
}, |
|
/** 编辑 */ |
|
async handleEdit() { |
|
try { |
|
this.loadingObj.pageLoading = true; |
|
|
|
const submitData = { ...this.form }; |
|
submitData.bindVehicles = this.form.bindVehicles && this.form.bindVehicles.join(','); |
|
submitData.phone = this.form.phone.trim(); |
|
submitData.jobType = submitData.jobType.join(',') |
|
const res = await update(submitData); |
|
const { code, msg } = res.data; |
|
if (code !== 200) return; |
|
this.$message.success(msg); |
|
|
|
this.back(); |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
this.loadingObj.pageLoading = false; |
|
} |
|
}, |
|
submitForm() { |
|
this.$refs.formRef.validate(async valid => { |
|
if (!valid) return; |
|
console.log('this.form :>> ', this.form); |
|
ElMessageBox.confirm('是否确定提交?', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
}).then(() => { |
|
const { type } = this.$route.query; |
|
// 新增 |
|
if (type === 'add') this.handleAdd(); |
|
else if (type === 'edit') this.handleEdit(); |
|
}); |
|
}); |
|
}, |
|
/** 重置 */ |
|
handleReset() { |
|
ElMessageBox.confirm('是否重置数据?', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
}).then(() => { |
|
const { type } = this.$route.query; |
|
// 新增 |
|
this.$refs.formRef.resetFields(); |
|
if (type === 'edit') this.onLoad(); |
|
}); |
|
}, |
|
back() { |
|
const { backPath } = this.$route.query; |
|
this.$store.commit('DEL_TAG_CURRENT'); |
|
backPath ? this.$route.push({ path: backPath }) : this.$router.go(-1); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
:deep(.header_search .el-date-editor.el-input__wrapper) { |
|
height: 100% !important; |
|
} |
|
|
|
// 标题 |
|
:deep(.el-divider__text.is-left) { |
|
font-size: 20px; |
|
font-weight: bold; |
|
color: var(--el-color-primary); |
|
} |
|
|
|
.w100 { |
|
width: 100% !important; |
|
} |
|
|
|
// 数字输入框 |
|
:deep(.el-input-number .el-input__inner) { |
|
text-align: left; |
|
} |
|
|
|
// 日期选择框 |
|
:deep(.el-date-editor--date) { |
|
width: 100% !important; |
|
height: 100% !important; |
|
} |
|
|
|
.img-container { |
|
display: flex; |
|
flex-wrap: wrap; |
|
} |
|
|
|
.avatar { |
|
width: 147px; |
|
height: 147px; |
|
display: block; |
|
} |
|
|
|
.upLoadImg_box { |
|
position: relative; |
|
|
|
.clearIcon { |
|
opacity: 0; |
|
position: absolute; |
|
right: 10px; |
|
top: 10px; |
|
transition: all 0.3s; |
|
width: 30px; |
|
height: 30px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
background-color: #fff; |
|
border-radius: 50%; |
|
} |
|
|
|
&:hover { |
|
.clearIcon { |
|
cursor: pointer; |
|
opacity: 1; |
|
} |
|
} |
|
} |
|
|
|
.submit_container { |
|
position: absolute; |
|
bottom: 20px; |
|
left: 0; |
|
width: 100%; |
|
text-align: center; |
|
} |
|
</style>
|
|
|