<template>
|
<el-dialog v-model="dialogVisible" width="75%" top="50vh" align-center @close="closeDialog">
|
<el-form ref="registerRef" :model="registerForm" class="register-form" label-position="top">
|
<el-row :gutter="30">
|
<el-col :span="6">
|
<el-form-item prop="agency.name" label="机构名称">
|
<el-input
|
disabled
|
v-model="registerForm.agency.name"
|
size="large"
|
placeholder="请输入机构名称"
|
>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item prop="agency.creditCode" label="社会信用代码">
|
<el-input
|
disabled
|
v-model="registerForm.agency.creditCode"
|
size="large"
|
placeholder="请输入社会信用代码"
|
>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item prop="agency.attribute" label="机构属性">
|
<el-radio-group v-model="registerForm.agency.attribute" style="width: 50%" disabled>
|
<el-radio :label="0" size="large">疆内</el-radio>
|
<el-radio :label="1" size="large">疆外</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item prop="agency.businessType" label="业务类别">
|
<el-checkbox-group v-model="registerForm.agency.businessType" disabled>
|
<el-checkbox v-for="item in registerForm.businessTypeList" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item prop="agency.area" label="实际经营地址所属区域">
|
<!-- <el-input v-model="registerForm.agency.area" disabled></el-input>-->
|
<el-cascader
|
disabled
|
v-model="registerForm.agency.area"
|
:options="state.areaList"
|
:props="props"
|
style="width: 100%"
|
size="large"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item prop="agency.address" label="实际经营地址">
|
<el-input
|
disabled
|
v-model="registerForm.agency.address"
|
size="large"
|
placeholder="请输入实际经营地址"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item prop="agency.legalPerson" label="法定代表人">
|
<el-input
|
disabled
|
v-model="registerForm.agency.legalPerson"
|
size="large"
|
placeholder="请输入法定代表人"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item prop="agency.legalPhone" label="法人电话">
|
<el-input
|
disabled
|
v-model="registerForm.agency.legalPhone"
|
size="large"
|
placeholder="请输入法人电话"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item prop="agency.manager" label="机构负责人">
|
<el-input
|
disabled
|
v-model="registerForm.agency.manager"
|
size="large"
|
placeholder="请输入机构负责人"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item prop="agency.managerPhone" label="负责人电话">
|
<el-input
|
disabled
|
v-model="registerForm.agency.managerPhone"
|
size="large"
|
placeholder="请输入负责人电话"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="8">
|
<el-form-item prop="agency.certNumber" label="资质证书编号">
|
<el-input
|
disabled
|
v-model="registerForm.agency.certNumber"
|
size="large"
|
placeholder="请输入机构负责人"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item prop="agency.issueDate" label="发证日期">
|
<el-date-picker
|
disabled
|
v-model="registerForm.agency.issueDate"
|
type="date"
|
placeholder="请选择发证日期"
|
value-format="YYYY-MM-DD 00:00:00"
|
size="large"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item prop="agency.validDate" label="有效日期">
|
<el-date-picker
|
disabled
|
v-model="registerForm.agency.validDate"
|
type="date"
|
placeholder="请选择有效日期"
|
value-format="YYYY-MM-DD 00:00:00"
|
size="large"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="8">
|
<el-form-item prop="agency.certPath" label="资质证书">
|
<el-upload disabled v-model:file-list="certList" :limit='state.imgLimit' :on-preview="handlePictureCardPreview" list-type="picture-card" >
|
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="8">
|
<el-form-item prop="agency.assetValue" label="固定资产总值">
|
<el-input
|
disabled
|
v-model="registerForm.agency.assetValue"
|
type="number"
|
size="large"
|
placeholder="请输入固定资产总值"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item prop="agency.workArea" label="工作场所建筑面积">
|
<el-input
|
disabled
|
type="number"
|
v-model="registerForm.agency.workArea"
|
size="large"
|
placeholder="请输入工作场所建筑面积"
|
><template #append>㎡</template></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item prop="agency.archiveArea" label="档案室面积">
|
<el-input
|
disabled
|
type="number"
|
v-model="registerForm.agency.archiveArea"
|
size="large"
|
placeholder="请输入档案室面积"
|
><template #append>㎡</template></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="8">
|
<el-form-item prop="agency.regAddress" label="注册地址">
|
<el-input
|
disabled
|
v-model="registerForm.agency.regAddress"
|
size="large"
|
placeholder="请输入注册地址"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item prop="agency.business" label="申请的法定安全评价业务范围">
|
<el-select disabled v-model="registerForm.agency.business" placeholder="请选择业务范围" multiple size="large" style="width: 100%">
|
<el-option
|
v-for="item in state.busList"
|
:key="item.id"
|
:label="item.label"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="8">
|
<el-form-item prop="agency.reportPath" label="加盖公章的《机构信息上报表》">
|
<el-upload disabled :limit='state.imgLimit' :show-file-list="false" list-type="picture-card" >
|
<el-image v-if="imageUrl" :src="imageUrl" :preview-src-list="srcList" style="width: 100%;max-height: 146px;" />
|
<!-- <template #tip>-->
|
<!-- <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传1张</div>-->
|
<!-- </template>-->
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item prop="username" label="用户名">
|
<el-input
|
disabled
|
v-model="registerForm.username"
|
size="large"
|
placeholder="请输入登录用户名"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item prop="phone" label="用户电话">
|
<el-input
|
disabled
|
v-model="registerForm.phone"
|
size="large"
|
placeholder="请输入用户电话"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-dialog v-model="state.dialogImg">
|
<el-image style="width: 100%; height: 100%" :src="state.dialogImageUrl"/>
|
</el-dialog>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import {ref, watch, defineExpose, onMounted, reactive} from "vue"
|
import { getToken } from "@/utils/auth";
|
import {getInstitutionDetail} from "@/api/backManage/insitution";
|
import {getNoticeDetail} from "@/api/backManage/notice";
|
import {ElMessage} from "element-plus";
|
import {getDict} from "@/api/login";
|
import {getRegionTree} from "@/api/area";
|
const imageUrl = ref("");
|
const certImageUrl = ref("");
|
const srcList = ref([]);
|
const certList = ref([]);
|
const registerForm = ref({
|
agency:{
|
name: "",
|
creditCode: "",
|
attribute: 0,
|
area: [],
|
province: '',
|
city: '',
|
district: '',
|
address: '',
|
legalPerson: '',
|
legalPhone: '',
|
manager: '',
|
managerPhone: '',
|
certNumber: '',
|
issueDate: '',
|
validDate: '',
|
assetValue: '',
|
workArea: '',
|
archiveArea: '',
|
regAddress: '',
|
business: '',
|
reportPath: '',
|
businessType: []
|
},
|
username: '',
|
phone: '',
|
password: '',
|
confirmPassword: '',
|
businessTypeList: [
|
{
|
value: 1,
|
label: '安全评价'
|
},
|
{
|
value: 2,
|
label: '检验检测'
|
},
|
]
|
});
|
|
|
const props = {
|
expandTrigger: 'hover',
|
value: 'name',
|
label: 'name'
|
}
|
const state = reactive({
|
areaList: [],
|
busList: [],
|
fileList: [],
|
imgLimit: 5,
|
uploadUrl: import.meta.env.VITE_APP_BASE_API + '/system/common/uploadFile',
|
header: {
|
Authorization: 'Bearer ' + getToken()
|
},
|
dialogImageUrl: '',
|
dialogImg: false
|
})
|
|
const loading = ref(false)
|
const dialogVisible = ref(false)
|
const registerRef = ref(null)
|
|
const getBusiness = async ()=>{
|
const res = await getDict({dictType: 'sys_business_scope'})
|
if(res.code == 200){
|
state.busList = res.data
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
|
const getArea = async ()=>{
|
const type = registerForm.value.agency.attribute
|
const res = await getRegionTree({name: '',parentId: null,regionType: type})
|
if(res.code == 200){
|
state.areaList = res.data
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
|
const openDialog = async (val,type) => {
|
let id = "";
|
if(type === 'view'){
|
id = val.agencyId
|
}else {
|
id = val.id
|
}
|
const param = {
|
agencyId: id
|
}
|
const res = await getInstitutionDetail(param);
|
if(res.code === 200){
|
registerForm.value.agency = res.data
|
await getBusiness()
|
await getArea()
|
registerForm.value.username = res.data.user?.username
|
registerForm.value.phone = res.data.user?.phone
|
if(registerForm.value.agency.attribute === 0){
|
registerForm.value.agency.area = [res.data.city,res.data.district].filter(item => { return item && item.trim() })
|
}else {
|
registerForm.value.agency.area = [res.data.province,res.data.city,res.data.district].filter(item => { return item && item.trim() })
|
}
|
registerForm.value.agency.business = res.data.business.split(",").map(Number)
|
registerForm.value.agency.businessType = res.data.businessType ? res.data.businessType.split(',').map(Number): []
|
imageUrl.value = import.meta.env.VITE_APP_BASE_API + "/" + res.data.reportPath
|
srcList.value.push(imageUrl.value)
|
|
if(res.data.certPath) {
|
const imgList = res.data.certPath.split(',')
|
imgList.forEach((item,index) => {
|
if(item.includes(import.meta.env.VITE_APP_BASE_API)){
|
|
}else{
|
imgList[index] = import.meta.env.VITE_APP_BASE_API + "/" + item
|
}
|
})
|
const imgUrl = imgList.join(',')
|
certList.value = imgUrl ? imgUrl.split(',').map(url => {return {url} }) : []
|
}
|
// certImageUrl.value = import.meta.env.VITE_APP_BASE_API + "/" + res.data.certPath
|
|
|
|
}else{
|
ElMessage.warning(res.message)
|
}
|
dialogVisible.value = true;
|
}
|
|
|
const closeDialog = ()=>{
|
dialogVisible.value = false;
|
state.fileList = []
|
srcList.value = []
|
certList.value = []
|
}
|
const handlePictureCardPreview = (uploadFile) => {
|
state.dialogImageUrl = uploadFile.url
|
state.dialogImg = true
|
}
|
|
defineExpose({
|
openDialog,
|
})
|
|
</script>
|
<style lang='scss'>
|
::v-deep(.el-overlay-dialog){
|
.el-dialog:not(.is-fullscreen){
|
margin-top: 500px !important;
|
}
|
}
|
|
|
</style>
|
<style lang='scss' scoped>
|
.register-form {
|
::v-deep(.el-upload--picture-card){display: none}
|
.el-input {
|
height: 40px;
|
input {
|
height: 40px;
|
}
|
}
|
.input-icon {
|
height: 39px;
|
width: 14px;
|
margin-left: 0px;
|
}
|
.el-radio-group{
|
width: 200px !important;
|
}
|
}
|
.register-tip {
|
font-size: 13px;
|
text-align: center;
|
color: #bfbfbf;
|
}
|
.register-code {
|
width: 33%;
|
height: 40px;
|
float: right;
|
img {
|
cursor: pointer;
|
vertical-align: middle;
|
}
|
}
|
.el-register-footer {
|
height: 40px;
|
line-height: 40px;
|
position: fixed;
|
bottom: 0;
|
width: 100%;
|
text-align: center;
|
color: #fff;
|
font-family: Arial;
|
font-size: 12px;
|
letter-spacing: 1px;
|
}
|
.register-code-img {
|
height: 40px;
|
padding-left: 12px;
|
}
|
</style>
|
