361 lines
11 KiB
Vue
361 lines
11 KiB
Vue
<template>
|
|
<div class="AddBuildingBox">
|
|
<PageHeader></PageHeader>
|
|
<div class="AddBuildingBody">
|
|
<div class="title">基本信息</div>
|
|
<div class="addBuildingFormBody">
|
|
<el-form class="formBody" label-position="left" ref="formRef" :model="form" :rules="rules" label-width="130px">
|
|
<el-row>
|
|
<el-col :span="11">
|
|
<el-form-item label="楼栋房屋" prop="houseId">
|
|
<el-cascader v-model="userHousepath" :options="treedata" @change="handleChange" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="2"></el-col>
|
|
<el-col :span="11">
|
|
<el-form-item label="住户姓名" prop="name">
|
|
<el-input v-model="form.name" placeholder="请输入住户姓名" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="11">
|
|
<el-form-item label="住户性别" prop="gender">
|
|
<el-radio-group v-model="form.gender">
|
|
<el-radio v-for="dist in sys_user_sex" :label="dist.label" :value="dist.value" :key="dist.value"></el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="2"></el-col>
|
|
<el-col :span="11">
|
|
<el-form-item label="身份证号码" prop="idCard">
|
|
<el-input v-model="form.idCard" placeholder="请输入证件号码" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="11">
|
|
<el-form-item label="与业主的关系" prop="type">
|
|
<el-select v-model.number="form.type" class="m-2" placeholder="请选择">
|
|
<el-option v-for="item in com_resident_relationship" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="2"></el-col>
|
|
<el-col :span="11">
|
|
<el-form-item label="手机号码" prop="phone">
|
|
<el-input v-model.number="form.phone" placeholder="请输入手机号码" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="11">
|
|
<el-form-item label="身份证正面照" prop="cardImageFront">
|
|
<el-upload
|
|
ref="upload"
|
|
class="avatar-uploader"
|
|
:action="uploadUrl"
|
|
:show-file-list="false"
|
|
:on-success="handleAvatarSuccess"
|
|
:on-exceed="handleExceed"
|
|
:on-error="handleError"
|
|
:limit="1"
|
|
>
|
|
<img v-if="form.cardImageFront" :src="form.cardImageFront" class="avatar" />
|
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="2"></el-col>
|
|
<el-col :span="11">
|
|
<el-form-item label="身份证背面照" prop="cardImageBack">
|
|
<el-upload
|
|
ref="upload2"
|
|
class="avatar-uploader"
|
|
:action="uploadUrl"
|
|
:show-file-list="false"
|
|
:limit="1"
|
|
:on-exceed="handleExceed2"
|
|
:on-success="handleAvatar2Success"
|
|
:on-error="handleError2"
|
|
>
|
|
<img v-if="form.cardImageBack" :src="form.cardImageBack" class="avatar" />
|
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-form-item label="备注" prop="remark">
|
|
<el-input type="textarea" :row="5" v-model.number="form.remark" placeholder="请输入备注" />
|
|
</el-form-item>
|
|
<el-form-item style="margin-top: 30px">
|
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
|
<el-button @click="cancelForm">返回</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import PageHeader from '@/components/Pageheader/index.vue';
|
|
import { getHousePathById } from '@/utils/house';
|
|
import { ResidentForm } from '@/api/system/resident/type';
|
|
import { CascaderValue, UploadFiles, UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
|
|
import { genFileId } from 'element-plus';
|
|
import { addResident, getResident, updateResident } from '@/api/system/resident';
|
|
import { validator } from '@/utils/Reg';
|
|
import { useHouseStore } from '@/store/modules/house';
|
|
|
|
const houseStore = useHouseStore();
|
|
const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/resident/uploadImage';
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
|
|
const { com_resident_relationship } = toRefs<any>(proxy?.useDict('com_resident_relationship'));
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const formRef = ref();
|
|
const form = ref<ResidentForm>({
|
|
houseId: null,
|
|
name: '',
|
|
gender: '0',
|
|
idCard: '',
|
|
type: '0', // 与业主关系 0业主
|
|
phone: null, //手机号
|
|
cardImageFront: '',
|
|
cardImageBack: '',
|
|
remark: '' //备注
|
|
});
|
|
const userHousepath = ref<CascaderValue>([]);
|
|
const rules = ref({
|
|
houseId: [{ required: true, message: '请选择房屋', trigger: 'blur' }],
|
|
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
|
gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
|
|
cardImageFront: [{ required: true, message: '请上传身份证照片', trigger: 'blur' }],
|
|
cardImageBack: [{ required: true, message: '请上传身份证照片', trigger: 'blur' }],
|
|
idCard: [
|
|
{ required: true, message: '请输入身份证号', trigger: 'blur' },
|
|
{
|
|
validator: (_, value) => validator(value, 'idCard'),
|
|
message: '请输入正确的18位身份证号码',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
type: [{ required: true, message: '请选择与业主关系', trigger: 'blur' }],
|
|
phone: [
|
|
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
|
{
|
|
validator: (_, value) => validator(value, 'phone'),
|
|
message: '请输入正确的手机号码',
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
});
|
|
|
|
const treedata = ref([]);
|
|
function getTree() {
|
|
houseStore.getCurrentVilageTreeHouse().then((res) => {
|
|
treedata.value = res;
|
|
gettreedata();
|
|
});
|
|
}
|
|
getTree();
|
|
// !== 楼栋房屋 =============================================================================
|
|
const userid = ref(null);
|
|
function gettreedata() {
|
|
// !== 编辑用户 =============================================================================
|
|
if (route.query.id) {
|
|
userid.value = route.query.id;
|
|
getResident(userid.value).then((res) => {
|
|
form.value = {
|
|
...res.data
|
|
};
|
|
const arr = getHousePathById(treedata.value, form.value.houseId);
|
|
userHousepath.value = arr;
|
|
});
|
|
}
|
|
}
|
|
|
|
function handleChange(val: CascaderValue) {
|
|
userHousepath.value = val;
|
|
form.value.buildingId = val[0];
|
|
form.value.houseId = val[2];
|
|
}
|
|
|
|
// !== 上传文件 =============================================================================
|
|
// 上传文件成功
|
|
const upload = ref<UploadInstance>();
|
|
const upload2 = ref<UploadInstance>();
|
|
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
|
|
if (response.data && response.data.url) {
|
|
form.value.cardImageFront = response.data.url;
|
|
}
|
|
};
|
|
const handleAvatar2Success: UploadProps['onSuccess'] = (response, uploadFile) => {
|
|
if (response.data && response.data.url) {
|
|
form.value.cardImageBack = response.data.url;
|
|
}
|
|
};
|
|
const handleExceed: UploadProps['onExceed'] = (files) => {
|
|
upload.value!.clearFiles();
|
|
const file = files[0] as UploadRawFile;
|
|
file.uid = genFileId();
|
|
upload.value!.handleStart(file);
|
|
upload.value?.submit();
|
|
};
|
|
const handleExceed2: UploadProps['onExceed'] = (files) => {
|
|
upload2.value!.clearFiles();
|
|
const file = files[0] as UploadRawFile;
|
|
file.uid = genFileId();
|
|
upload2.value!.handleStart(file);
|
|
upload2.value?.submit();
|
|
};
|
|
const handleError: UploadProps['onError'] = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
|
|
console.log(error);
|
|
};
|
|
const handleError2: UploadProps['onError'] = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
|
|
console.log(error);
|
|
};
|
|
// !== 提交 =============================================================================
|
|
|
|
// 提交
|
|
const submitForm = () => {
|
|
formRef.value?.validate(async (valid: boolean) => {
|
|
if (valid) {
|
|
if (!form.value.cardImageFront.trim()) {
|
|
return ElMessage.error('请上传身份证正面照片');
|
|
}
|
|
if (!form.value.cardImageBack.trim()) {
|
|
return ElMessage.error('请上传身份证背面照片');
|
|
}
|
|
const obj = {
|
|
...form.value
|
|
};
|
|
if (userid.value) {
|
|
updateResident(obj).then(() => {
|
|
ElMessage.success('修改成功');
|
|
cancelForm();
|
|
});
|
|
} else {
|
|
addResident(obj).then(() => {
|
|
ElMessage.success('添加成功');
|
|
cancelForm();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
};
|
|
// 推出
|
|
const cancelForm = () => {
|
|
router.push({
|
|
path: '/house/resident'
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.avatar-uploader {
|
|
border: 1px solid #ccc;
|
|
}
|
|
.avatar-uploader .avatar {
|
|
width: 178px;
|
|
height: 178px;
|
|
display: block;
|
|
object-fit: cover;
|
|
}
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed var(--el-border-color);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--el-transition-duration-fast);
|
|
}
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: var(--el-color-primary);
|
|
}
|
|
.avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.el-icon.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
text-align: center;
|
|
}
|
|
.AddBuildingBox {
|
|
padding: 15px;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.AddBuildingBody {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
background-color: white;
|
|
padding: 15px;
|
|
.title {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding-left: 20px;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
color: rgba(16, 16, 16, 1);
|
|
border-bottom: 1px solid #bbbbbb;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.formBody {
|
|
width: 1050px;
|
|
margin: 0 auto;
|
|
|
|
&:deep(.el-form-item__content, .el-select, .el-input) {
|
|
width: 350px !important;
|
|
margin-right: 10px;
|
|
.el-cascader {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.el-form-item {
|
|
margin-bottom: 20px;
|
|
align-items: center;
|
|
}
|
|
.unitBox {
|
|
.el-input {
|
|
width: 440px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.el-button {
|
|
width: 80px;
|
|
height: 35px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.houseTypebox {
|
|
display: flex;
|
|
align-items: center;
|
|
.el-input {
|
|
width: 100px;
|
|
margin-right: 0px;
|
|
}
|
|
span {
|
|
margin: 0 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|