<template>
|
<el-dialog v-model="dialogVisible" width="75%" top="50vh" align-center @close="closeDialog">
|
<template #header>
|
<div style="display:flex;font-size: 1.2rem;font-weight: bolder">
|
{{state.title}}
|
<div style="font-size: 0.9rem;display:flex;align-items: center;font-weight: normal;margin-left: 6px"><Warning style="color:#EF4444;width: 0.9rem; height: 0.9rem;margin-right: 2px" />请认真填写注册信息，带 <span style="color:#EF4444;vertical-align: middle">*</span> 为必填项</div>
|
</div>
|
</template>
|
<el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form" label-position="top">
|
<el-row :gutter="30">
|
<el-col :span="8">
|
<el-form-item prop="agency.name" label="机构名称">
|
<el-input
|
v-model="registerForm.agency.name"
|
size="large"
|
placeholder="请输入机构名称"
|
>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item prop="agency.creditCode" label="社会信用代码">
|
<el-input
|
v-model="registerForm.agency.creditCode"
|
size="large"
|
placeholder="请输入社会信用代码"
|
>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item prop="agency.attribute" label="机构属性">
|
<el-radio-group v-model="registerForm.agency.attribute" style="width: 50%" @change="changeAttr()">
|
<el-radio :label="0" size="large" border>疆内</el-radio>
|
<el-radio :label="1" size="large" border>疆外</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item prop="agency.area" label="实际经营地址所属区域">
|
<el-cascader
|
v-model="registerForm.agency.area"
|
:options="state.areaList"
|
:props="props"
|
@change="handleChange"
|
style="width: 100%"
|
size="large"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item prop="agency.address" label="实际经营地址">
|
<el-input
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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.assetValue" label="固定资产总值">
|
<el-input
|
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
|
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
|
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
|
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 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-->
|
<!-- v-model:file-list="state.fileList"-->
|
<!-- class="upload-demo"-->
|
<!-- action=""-->
|
<!-- multiple-->
|
<!-- :on-preview="handlePreview"-->
|
<!-- :on-remove="handleRemove"-->
|
<!-- :before-remove="beforeRemove"-->
|
<!-- :limit="3"-->
|
<!-- :on-exceed="handleExceed"-->
|
<!-- >-->
|
<!-- <el-button type="primary">点击上传</el-button>-->
|
<!-- <template #tip>-->
|
<!-- <div class="el-upload__tip">-->
|
<!-- 上传文件大小不超过2M-->
|
<!-- </div>-->
|
<!-- </template>-->
|
<!-- </el-upload>-->
|
<el-upload accept="image/*" :action="state.uploadUrl" :headers="state.header" method="post" :on-success="handleAvatarSuccess" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='state.imgLimit' v-model:file-list="state.fileList" list-type="picture-card" :before-upload="picSize" :on-remove="handleRemove" :before-remove="beforeRemove">
|
<el-icon><Plus /></el-icon>
|
<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="登录用户名(字母+数字，长度在5-16之间)">
|
<el-input
|
v-model.trim="registerForm.username"
|
size="large"
|
placeholder="请输入登录用户名"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item prop="phone" label="用户电话">
|
<el-input
|
v-model.trim="registerForm.phone"
|
size="large"
|
placeholder="请输入用户电话"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30" v-if="state.title == '新增/注册'">
|
<el-col :span="12">
|
<el-form-item prop="password" label="密码">
|
<el-input
|
v-model.trim="registerForm.password"
|
type="password"
|
size="large"
|
placeholder="请输入密码"
|
show-password
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item prop="confirmPassword" label="确认密码">
|
<el-input
|
v-model.trim="registerForm.confirmPassword"
|
type="password"
|
size="large"
|
auto-complete="off"
|
placeholder="确认密码"
|
show-password
|
>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item style="width:100%;">
|
<el-button
|
:loading="loading"
|
size="large"
|
type="primary"
|
style="width:40%;margin: 0 auto"
|
@click.prevent="handleRegister"
|
>
|
<div v-if="state.title == '新增/注册'">
|
<span v-if="!loading">注 册</span>
|
<span v-else>注 册 中...</span>
|
</div>
|
<div v-else>
|
<span v-if="!loading">确定</span>
|
<span v-else>编 辑 中...</span>
|
</div>
|
</el-button>
|
</el-form-item>
|
</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, toRefs, watchEffect} from "vue"
|
import {ElMessage, ElMessageBox} from "element-plus"
|
import {register, delPic, getDict, checkUserName, checkPhone, editAgency} from "@/api/login"
|
import { getRegionTree } from "@/api/area"
|
import { getToken } from "@/utils/auth";
|
import {verifyPhone, verifyUsername, verifyPwd} from "../../../utils/validate";
|
let { proxy } = getCurrentInstance()
|
import { Base64 } from 'js-base64'
|
import {getAgencyById} from "../../../api/sysUsers";
|
const emit = defineEmits(["getList"]);
|
|
const props = {
|
expandTrigger: 'hover',
|
value: 'name',
|
label: 'name'
|
}
|
|
const state = reactive({
|
title: '',
|
areaList: [],
|
busList: [],
|
fileList: [],
|
imgLimit: 1,
|
uploadUrl: import.meta.env.VITE_APP_BASE_API + '/system/common/uploadFile',
|
header: {
|
Authorization: 'Bearer ' + getToken()
|
},
|
dialogImageUrl: '',
|
dialogImg: false,
|
isView: false,
|
registerForm:{
|
agency:{
|
name: "",
|
creditCode: "",
|
attribute: 0,
|
area: [],
|
province: '',
|
city: '',
|
district: '',
|
address: '',
|
legalPerson: '',
|
legalPhone: '',
|
manager: '',
|
managerPhone: '',
|
certNumber: '',
|
issueDate: '',
|
validDate: '',
|
assetValue: '',
|
workArea: '',
|
archiveArea: '',
|
regAddress: '',
|
business: '',
|
reportPath: '',
|
},
|
username: '',
|
phone: '',
|
password: '',
|
confirmPassword: ''
|
}
|
})
|
const {registerForm} = toRefs(state);
|
const startUsername = ref('');
|
const startPhone = ref('');
|
const equalToPassword = (rule, value, callback) => {
|
if (state.registerForm.password !== value) {
|
callback(new Error("两次输入的密码不一致"));
|
} else {
|
callback();
|
}
|
};
|
|
const validatePhone = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入手机号'))
|
}else{
|
if(!verifyPhone(value)){
|
callback(new Error('手机号格式有误'))
|
}else{
|
callback()
|
}
|
}
|
}
|
|
const validateUserPhone = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入手机号'))
|
}else if(state.title == '编辑' && value == startPhone.value){
|
callback()
|
} else{
|
if(!verifyPhone(value)){
|
callback(new Error('手机号格式有误'))
|
}else{
|
checkPhone({phone:value}).then((res)=>{
|
if(res.data == false){
|
callback(new Error('该手机号已被绑定用户，请更换其他手机号'))
|
}else{
|
callback()
|
}
|
})
|
}
|
}
|
}
|
|
const validateUsername = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入登录时用户名'))
|
}else if(state.title == '编辑' && value == startUsername.value){
|
callback()
|
}else{
|
if(!verifyUsername(value)){
|
callback(new Error('用户名须使用字母+数字，长度在5-16之间'))
|
}else{
|
checkUserName({username:value}).then((res)=>{
|
if(res.data == false){
|
callback(new Error('用户名已被占用，请更换其他用户名'))
|
}else{
|
callback()
|
}
|
})
|
}
|
}
|
}
|
|
let validatePwd = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入密码'))
|
}else{
|
if(!verifyPwd(value)){
|
callback(new Error('密码须包含字母、数字、特殊字符(不包括下划线)，长度在6-16之间'))
|
}else{
|
callback()
|
}
|
}
|
}
|
|
const registerRules = {
|
"agency.name": [{required: true, trigger: "blur", message: "请输入机构名称"}],
|
"agency.creditCode": [{required: true, trigger: "blur", message: "请输入社会信用代码"}],
|
"agency.attribute": [{required: true, trigger: "blur", message: "请选择机构属性"}],
|
"agency.area": [{required: true, trigger: "blur", message: "请选择实际经营地址所属区域"}],
|
"agency.address": [{required: true, trigger: "blur", message: "请输入实际经营地址"}],
|
"agency.legalPerson": [{required: true, trigger: "blur", message: "请输入法定代表人"}],
|
"agency.legalPhone": [{required: true, trigger: "blur", validator: validatePhone}],
|
"agency.manager": [{required: true, trigger: "blur", message: "请输入机构负责人"}],
|
"agency.managerPhone": [{required: true, trigger: "blur", validator: validatePhone}],
|
"agency.certNumber": [{required: true, trigger: "blur", message: "请输入资质证书编号"}],
|
"agency.issueDate": [{required: true, trigger: "blur", message: "请选择发证日期"}],
|
"agency.validDate": [{required: true, trigger: "blur", message: "请选择有效日期"}],
|
"agency.assetValue": [{required: true, trigger: "blur", message: "请输入固定资产总值"}],
|
"agency.workArea": [{required: true, trigger: "blur", message: "请输入工作场所建筑面积"}],
|
"agency.archiveArea": [{required: true, trigger: "blur", message: "请输入档案室面积"}],
|
"agency.regAddress": [{required: true, trigger: "blur", message: "请输入注册地址"}],
|
"agency.business": [{required: true, trigger: "blur", message: "请选择申请的法定安全评价业务范围"}],
|
"agency.reportPath": [{required: true, trigger: "blur", message: "请上传加盖公章的《机构信息上报表》"}],
|
username: [{ required: true, trigger: "blur", validator: validateUsername }],
|
phone: [{ required: true, trigger: "blur", validator: validateUserPhone }],
|
password: [{ required: true, trigger: "blur", validator: validatePwd }],
|
confirmPassword: [
|
{ required: true, trigger: "blur", message: "请再次确认密码" },
|
{ required: true, validator: equalToPassword, trigger: "blur" }
|
]
|
};
|
|
const loading = ref(false)
|
const dialogVisible = ref(false)
|
const registerRef = ref(null)
|
|
onMounted(()=>{
|
getBusiness()
|
watchEffect(() => {
|
// 在副作用中调用 getArea()
|
getArea();
|
});
|
})
|
|
const openDialog=(type, value)=>{
|
state.title = type === 'add' ? '新增/注册' : type ==='edit' ? '编辑' : '查看' ;
|
if(type === 'edit' || type == 'view') {
|
state.registerForm.id = value.id
|
state.registerForm.username = value.username
|
state.registerForm.phone = value.phone
|
startUsername.value = value.username
|
startPhone.value = value.phone
|
state.registerForm.agency.id = value.agencyId
|
getAgencyById({agencyId: value.agencyId}).then((res)=>{
|
if(res.code == 200){
|
const info = JSON.parse(JSON.stringify(res.data))
|
for(let i in state.registerForm.agency){
|
if(validKey(i,info)){
|
state.registerForm.agency[i] = info[i]
|
}
|
}
|
state.registerForm.agency.business = info.business.split(',').map(Number)
|
if(state.registerForm.agency.attribute === 0){
|
state.registerForm.agency.area = [info.city,info.district].filter(item => { return item && item.trim() })
|
}else {
|
state.registerForm.agency.area = [info.province,info.city,info.district].filter(item => { return item && item.trim() })
|
}
|
if(res.data.reportPath) {
|
const imgUrl = import.meta.env.VITE_APP_BASE_API + "/" + res.data.reportPath
|
state.fileList = imgUrl ? imgUrl.split(',').map(url => {return {url} }) : []
|
}
|
|
}else{
|
ElMessage.warning(res.message)
|
}
|
})
|
if(type == 'view'){
|
state.isView = true
|
}
|
}
|
dialogVisible.value = true
|
}
|
|
const validKey=(key,obj)=>{
|
return key in obj
|
}
|
|
const handleChange = (value) => {
|
if(state.registerForm.agency.attribute == 0){
|
state.registerForm.agency.province = '新疆维吾尔自治区'
|
state.registerForm.agency.city = value[0]?value[0]:''
|
state.registerForm.agency.district = value[1]?value[1]:''
|
}else{
|
state.registerForm.agency.province = value[0]?value[0]:''
|
state.registerForm.agency.city = value[1]?value[1]:''
|
state.registerForm.agency.district = value[2]?value[2]:''
|
}
|
}
|
|
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 = state.registerForm.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 changeAttr=()=>{
|
getArea()
|
}
|
|
// 图片上传
|
const showTip =()=>{
|
ElMessage({
|
type: 'warning',
|
message: '超出文件上传数量'
|
});
|
}
|
|
const picSize = async (rawFile) => {
|
if(rawFile.size / 1024 / 1024 > 5){
|
ElMessage({
|
type: 'warning',
|
message: '文件大小不能超过5M'
|
});
|
return false
|
}
|
};
|
|
const handlePictureCardPreview = (uploadFile) => {
|
state.dialogImageUrl = uploadFile.url
|
state.dialogImg = true
|
};
|
|
|
const handleAvatarSuccess = (res, uploadFile) => {
|
if(res.code == 200){
|
state.registerForm.agency.reportPath = res.data.path
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: '文件上传失败'
|
})
|
}
|
}
|
|
const handleRemove = async (file, uploadFiles) => {
|
const res = await delPic({path: state.registerForm.agency.reportPath})
|
if(res.code == 200){
|
ElMessage({
|
type: 'success',
|
message: '文件已删除'
|
})
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.message
|
})
|
}
|
}
|
|
function handleRegister() {
|
proxy.$refs.registerRef.validate(valid => {
|
if (valid) {
|
loading.value = true;
|
if(state.title == '新增/注册'){
|
const {confirmPassword, ...data} = state.registerForm
|
data.password = Base64.encode(data.password)
|
data.agency.business = data.agency.business.join(',')
|
delete data.agency.area
|
register(data).then(res => {
|
if(res.code == 200){
|
const username = state.registerForm.username
|
ElMessageBox.alert("<font color='red'>恭喜，您的账号 " + username + " 注册成功！</font>", "系统提示", {
|
dangerouslyUseHTMLString: true,
|
type: "success",
|
}).then(() => {
|
emit("getList")
|
dialogVisible.value = false
|
proxy.$refs.registerRef.resetFields()
|
proxy.$refs.registerRef.clearValidate()
|
state.fileList = []
|
// router.push("/homePage")
|
}).catch(() => {})
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.message
|
})
|
}
|
}).catch(() => {
|
loading.value = false
|
})
|
}else {
|
const {confirmPassword, ...data} = state.registerForm
|
data.password = Base64.encode(data.password)
|
console.log('data',data)
|
data.agency.business = data.agency.business.join(',')
|
// delete data.agency.area
|
console.log('data',data)
|
editAgency(data).then(res => {
|
if(res.code == 200){
|
ElMessage({
|
type: 'success',
|
message: '编辑成功'
|
})
|
emit("getList")
|
dialogVisible.value = false
|
proxy.$refs.registerRef.resetFields()
|
proxy.$refs.registerRef.clearValidate()
|
state.fileList = []
|
loading.value = false
|
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.message
|
})
|
}
|
}).catch(() => {
|
loading.value = false
|
})
|
}
|
}
|
});
|
}
|
|
const closeDialog = ()=>{
|
proxy.$refs.registerRef.resetFields()
|
proxy.$refs.registerRef.clearValidate()
|
state.fileList = []
|
}
|
|
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 {
|
.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>
|
