<template>
|
<div class="app-container home">
|
<div class="main_form">
|
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="200px">
|
<el-row>
|
<el-col :span="10">
|
<el-form-item label="专业类别" prop="profession">
|
<el-cascader
|
style="width: 100%"
|
v-model="form.profession"
|
:options="options"
|
:props="{ expandTrigger: 'hover' }"
|
@change="professionChange"></el-cascader>
|
</el-form-item>
|
</el-col>
|
<el-col :span="10">
|
<el-form-item label="填报日期" prop="date">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.date"
|
type="date"
|
placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="姓名" prop="name">
|
<el-input v-model="form.name"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="性别" prop="sex">
|
<el-radio-group v-model="form.sex">
|
<el-radio :label="0">男</el-radio>
|
<el-radio :label="1">女</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="出生年月" prop="birthday">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.birthday"
|
type="date"
|
placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="联系电话" prop="phone">
|
<el-input v-model="form.phone"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-form-item label="企业类型" prop="type">
|
<el-select v-model="form.type" @change="showMaterial">
|
<el-option
|
v-for="item in typeList"
|
:key="item.id"
|
:value="item.name"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="经营范围" prop="businessrange">
|
<el-input v-model="form.businessrange"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="负责人" prop="legalperson">
|
<el-input v-model="form.legalperson"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="负责人手机号" prop="legalpersonphone">
|
<el-input v-model="form.legalpersonphone"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="10">
|
<el-form-item label="许可证开始时间" prop="licensestart">
|
<el-date-picker
|
value-format="yyyy-MM-dd"
|
type="date"
|
v-model="form.licensestart"
|
placeholder="选择日期时间">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="10">
|
<el-form-item label="许可证结束时间" prop="licenseend">
|
<el-date-picker
|
value-format="yyyy-MM-dd"
|
type="date"
|
v-model="form.licenseend"
|
placeholder="选择日期时间">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="10">
|
<el-form-item label="省：" prop="province">
|
<el-select v-model="form.province" clearable filterable @change="changeArea('province')">
|
<el-option
|
v-for="item in provinceList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="10">
|
<el-form-item label="市：" prop="city">
|
<el-select v-model="form.city" clearable filterable @change="changeArea('city')">
|
<el-option
|
v-for="item in cityList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="10">
|
<el-form-item label="区/县：" prop="district">
|
<el-select v-model="form.district" clearable filterable @change="changeArea('district')">
|
<el-option
|
v-for="item in districtList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="10">
|
<el-form-item label="街道:" prop="street">
|
<el-select v-model="form.street" clearable filterable @change="changeArea('street')">
|
<el-option
|
v-for="item in streetList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="10">
|
<el-form-item label="居委会：" prop="committee">
|
<el-select v-model="form.committee" clearable filterable @change="changeArea('committee')">
|
<el-option
|
v-for="item in committeeList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="详细地址" prop="address">
|
<el-input v-model="form.address"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row v-if="longMaterial">
|
<el-form-item label="企业营业执照、生产许可证:" prop="imgs">
|
<el-upload
|
action="#"
|
list-type="picture-card"
|
:file-list="businessLicense"
|
:on-change="handleChangeOne"
|
:auto-upload="false">
|
<i slot="default" class="el-icon-plus"></i>
|
<div slot="file" slot-scope="{file}">
|
<img
|
class="el-upload-list__item-thumbnail"
|
:src="file.url" alt=""
|
>
|
<span class="el-upload-list__item-actions">
|
<span
|
class="el-upload-list__item-preview"
|
@click="handlePictureCardPreview(file)"
|
>
|
<i class="el-icon-zoom-in"></i>
|
</span>
|
<span
|
v-if="!disabled"
|
class="el-upload-list__item-delete"
|
@click="handleRemove(file,'one')"
|
>
|
<i class="el-icon-delete"></i>
|
</span>
|
</span>
|
</div>
|
</el-upload>
|
</el-form-item>
|
</el-row>
|
<el-row v-if="shortMaterial">
|
<el-form-item label="法人身份证复印件加盖公章:" prop="imgs">
|
<el-upload
|
action="#"
|
list-type="picture-card"
|
:file-list="idCard"
|
:on-change="handleChangeTwo"
|
:auto-upload="false">
|
<i slot="default" class="el-icon-plus"></i>
|
<div slot="file" slot-scope="{file}">
|
<img
|
class="el-upload-list__item-thumbnail"
|
:src="file.url" alt=""
|
>
|
<span class="el-upload-list__item-actions">
|
<span
|
class="el-upload-list__item-preview"
|
@click="handlePictureCardPreview(file)"
|
>
|
<i class="el-icon-zoom-in"></i>
|
</span>
|
<span
|
v-if="!disabled"
|
class="el-upload-list__item-delete"
|
@click="handleRemove(file,'two')"
|
>
|
<i class="el-icon-delete"></i>
|
</span>
|
</span>
|
</div>
|
</el-upload>
|
</el-form-item>
|
</el-row>
|
<div v-if="shortMaterial">
|
<el-row>
|
<el-col :span="10">
|
<el-form-item label="有效期开始时间（主要负责人）:" prop="legalpersonstart">
|
<el-date-picker
|
value-format="yyyy-MM-dd"
|
type="date"
|
v-model="form.legalpersonstart"
|
placeholder="选择日期时间">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="10">
|
<el-form-item label="结束时间" prop="legalpersonend">
|
<el-date-picker
|
value-format="yyyy-MM-dd"
|
type="date"
|
v-model="form.legalpersonend"
|
placeholder="选择日期时间">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row >
|
<el-form-item label="主要负责人、安全生产管理人员考核合格的证明材料:" prop="imgs">
|
<el-upload
|
action="#"
|
list-type="picture-card"
|
:file-list="legalPerson"
|
:on-change="handleChangeThree"
|
:auto-upload="false">
|
<i slot="default" class="el-icon-plus"></i>
|
<div slot="file" slot-scope="{file}">
|
<img
|
class="el-upload-list__item-thumbnail"
|
:src="file.url" alt=""
|
>
|
<span class="el-upload-list__item-actions">
|
<span
|
class="el-upload-list__item-preview"
|
@click="handlePictureCardPreview(file)"
|
>
|
<i class="el-icon-zoom-in"></i>
|
</span>
|
<span
|
v-if="!disabled"
|
class="el-upload-list__item-delete"
|
@click="handleRemove(file,'three')"
|
>
|
<i class="el-icon-delete"></i>
|
</span>
|
</span>
|
</div>
|
</el-upload>
|
</el-form-item>
|
</el-row>
|
</div>
|
<div v-if="produceMaterial">
|
<el-row>
|
<el-col :span="10">
|
<el-form-item label="有效期开始时间（特种人员）:" prop="qualificationstart">
|
<el-date-picker
|
value-format="yyyy-MM-dd"
|
type="date"
|
v-model="form.qualificationstart"
|
placeholder="选择日期时间">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="10">
|
<el-form-item label="结束时间" prop="qualificationend">
|
<el-date-picker
|
value-format="yyyy-MM-dd"
|
type="date"
|
v-model="form.qualificationend"
|
placeholder="选择日期时间">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row >
|
<el-form-item label="特种作业人员取得操作资格证书的证明材料，从业人员安全生产教育和培训合格的证明材料:" prop="imgs">
|
<el-upload
|
action="#"
|
list-type="picture-card"
|
:file-list="operationQualification"
|
:on-change="handleChangeFour"
|
:auto-upload="false">
|
<i slot="default" class="el-icon-plus"></i>
|
<div slot="file" slot-scope="{file}">
|
<img
|
class="el-upload-list__item-thumbnail"
|
:src="file.url" alt=""
|
>
|
<span class="el-upload-list__item-actions">
|
<span
|
class="el-upload-list__item-preview"
|
@click="handlePictureCardPreview(file)"
|
>
|
<i class="el-icon-zoom-in"></i>
|
</span>
|
<span
|
v-if="!disabled"
|
class="el-upload-list__item-delete"
|
@click="handleRemove(file,'four')"
|
>
|
<i class="el-icon-delete"></i>
|
</span>
|
</span>
|
</div>
|
</el-upload>
|
</el-form-item>
|
</el-row>
|
<el-row>
|
<el-col :span="10">
|
<el-form-item label="有效期开始时间（押运公司）:" prop="escortstart">
|
<el-date-picker
|
value-format="yyyy-MM-dd"
|
type="date"
|
v-model="form.escortstart"
|
placeholder="选择日期时间">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="10">
|
<el-form-item label="结束时间" prop="escortend">
|
<el-date-picker
|
value-format="yyyy-MM-dd"
|
type="date"
|
v-model="form.escortend"
|
placeholder="选择日期时间">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-form-item label="押运公司营业执照、道路运输经营许可证、危险品准运证:" prop="imgs">
|
<el-upload
|
action="#"
|
list-type="picture-card"
|
:file-list="escortCompany"
|
:on-change="handleChangeFive"
|
:auto-upload="false">
|
<i slot="default" class="el-icon-plus"></i>
|
<div slot="file" slot-scope="{file}">
|
<img
|
class="el-upload-list__item-thumbnail"
|
:src="file.url" alt=""
|
>
|
<span class="el-upload-list__item-actions">
|
<span
|
class="el-upload-list__item-preview"
|
@click="handlePictureCardPreview(file)"
|
>
|
<i class="el-icon-zoom-in"></i>
|
</span>
|
<span
|
v-if="!disabled"
|
class="el-upload-list__item-delete"
|
@click="handleRemove(file,'five')"
|
>
|
<i class="el-icon-delete"></i>
|
</span>
|
</span>
|
</div>
|
</el-upload>
|
</el-form-item>
|
</el-row>
|
</div>
|
<el-row v-if="shortMaterial">
|
<el-form-item label="安全责任险、意外险投保材料:" prop="imgs">
|
<el-upload
|
action="#"
|
list-type="picture-card"
|
:file-list="insurance"
|
:on-change="handleChangeSix"
|
:auto-upload="false">
|
<i slot="default" class="el-icon-plus"></i>
|
<div slot="file" slot-scope="{file}">
|
<img
|
class="el-upload-list__item-thumbnail"
|
:src="file.url" alt=""
|
>
|
<span class="el-upload-list__item-actions">
|
<span
|
class="el-upload-list__item-preview"
|
@click="handlePictureCardPreview(file)"
|
>
|
<i class="el-icon-zoom-in"></i>
|
</span>
|
<span
|
v-if="!disabled"
|
class="el-upload-list__item-delete"
|
@click="handleRemove(file,'six')"
|
>
|
<i class="el-icon-delete"></i>
|
</span>
|
</span>
|
</div>
|
</el-upload>
|
</el-form-item>
|
</el-row>
|
<el-row v-if="buyMaterial">
|
<el-form-item label="安全生产标准化证书材料:" prop="imgs">
|
<el-upload
|
action="#"
|
list-type="picture-card"
|
:file-list="safetyProduction"
|
:on-change="handleChangeSeven"
|
:auto-upload="false">
|
<i slot="default" class="el-icon-plus"></i>
|
<div slot="file" slot-scope="{file}">
|
<img
|
class="el-upload-list__item-thumbnail"
|
:src="file.url" alt=""
|
>
|
<span class="el-upload-list__item-actions">
|
<span
|
class="el-upload-list__item-preview"
|
@click="handlePictureCardPreview(file)"
|
>
|
<i class="el-icon-zoom-in"></i>
|
</span>
|
<span
|
v-if="!disabled"
|
class="el-upload-list__item-delete"
|
@click="handleRemove(file,'seven')"
|
>
|
<i class="el-icon-delete"></i>
|
</span>
|
</span>
|
</div>
|
</el-upload>
|
</el-form-item>
|
</el-row>
|
</el-form>
|
<div align="center" style="padding-bottom: 30px">
|
<el-button type="primary" @click="submit()">同意协议并注册</el-button>
|
</div>
|
<el-dialog :visible.sync="dialogVisible">
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "Index",
|
data() {
|
return {
|
form:{
|
enterprisename:'',
|
enterprisenumber:'',
|
password:'',
|
type:'',
|
businessrange:'',
|
licensestart:'',
|
licenseend:'',
|
legalpersonstart:'',
|
legalpersonend:'',
|
qualificationstart:'',
|
qualificationend:'',
|
escortstart:'',
|
escortend:'',
|
legalperson:'',
|
legalpersonphone:'',
|
province:'',
|
city:'',
|
district:'',
|
street:'',
|
committee:'',
|
address:'',
|
},
|
rules:{
|
enterprisename:[
|
{ required: true, message: '请填写企业名称', trigger: 'blur' },
|
]
|
},
|
dialogVisible: false
|
};
|
},
|
methods: {
|
async submit(){
|
this.$refs["ruleForm"].validate((valid) =>{
|
if(valid) {
|
|
}else{
|
this.$message({
|
type:'warning',
|
message:'请完善必填信息'
|
})
|
}
|
})
|
},
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.home {
|
blockquote {
|
padding: 10px 20px;
|
margin: 0 0 20px;
|
font-size: 17.5px;
|
border-left: 5px solid #eee;
|
}
|
hr {
|
margin-top: 20px;
|
margin-bottom: 20px;
|
border: 0;
|
border-top: 1px solid #eee;
|
}
|
.col-item {
|
margin-bottom: 20px;
|
}
|
|
ul {
|
padding: 0;
|
margin: 0;
|
}
|
|
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
font-size: 13px;
|
color: #676a6c;
|
overflow-x: hidden;
|
|
ul {
|
list-style-type: none;
|
}
|
|
h4 {
|
margin-top: 0px;
|
}
|
|
h2 {
|
margin-top: 10px;
|
font-size: 26px;
|
font-weight: 100;
|
}
|
|
p {
|
margin-top: 10px;
|
|
b {
|
font-weight: 700;
|
}
|
}
|
|
.update-log {
|
ol {
|
display: block;
|
list-style-type: decimal;
|
margin-block-start: 1em;
|
margin-block-end: 1em;
|
margin-inline-start: 0;
|
margin-inline-end: 0;
|
padding-inline-start: 40px;
|
}
|
}
|
}
|
</style>
|
