547 lines
17 KiB
Vue
547 lines
17 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="header">
|
||
<span>智慧物业后台管理系统</span>
|
||
<navbar :Showhamburger="false" ref="navbarRef" />
|
||
</div>
|
||
<div class="container AddBuildingBox">
|
||
<el-form inline class="formBody" ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||
<div class="AddBuildingBody">
|
||
<div class="title">基本信息</div>
|
||
<div class="addBuildingFormBody">
|
||
<el-form-item label="小区名称" prop="villageName">
|
||
<el-input maxlength="25" v-model.trim="form.villageName" placeholder="请输入小区名称" />
|
||
</el-form-item>
|
||
<el-form-item label="小区编号" prop="villageCode">
|
||
<el-input maxlength="20" v-model.trim="form.villageCode" placeholder="请输入小区编号" />
|
||
</el-form-item>
|
||
<el-form-item label="所在城市" prop="city">
|
||
<el-cascader :options="pcaTextArrList" v-model="city" @change="cityChange"> </el-cascader>
|
||
</el-form-item>
|
||
<el-form-item label="完整详细地址" prop="buildingArea">
|
||
<el-input type="textarea" :row="3" maxlength="100" show-word-limit v-model.trim="form.address" placeholder="请输入完整详细地址" />
|
||
</el-form-item>
|
||
<el-form-item label="建成时间" prop="buildingArea">
|
||
<el-date-picker v-model="builtTime" type="date" placeholder="选择建成时间" value-format="YYYY-MM-DD" @change="changeBuiltTime" />
|
||
</el-form-item>
|
||
<el-form-item label="房屋用途" prop="buildingArea">
|
||
<el-select v-model="form.houseUse" placeholder="请选择房屋用途" style="width: 240px">
|
||
<el-option v-for="item in houseUserList" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="小区面积" prop="villageArea">
|
||
<el-input maxlength="8" v-model.trim="form.villageArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
|
||
</el-form-item>
|
||
<el-form-item label="车位数量" prop="parkingSpaceCount">
|
||
<el-input maxlength="8" v-model.trim="form.parkingSpaceCount" placeholder="请输入车位数量">
|
||
<template #append>个</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item style="width: 100%" label="小区图片">
|
||
<el-upload
|
||
accept=".jpg, .png"
|
||
ref="uploadRef"
|
||
:action="uploadFileUrl"
|
||
:headers="headerToken()"
|
||
list-type="picture-card"
|
||
:file-list="villageImg"
|
||
:auto-upload="false"
|
||
:limit="9"
|
||
:on-exceed="handleExceed"
|
||
@change="handleUploadChange"
|
||
@before-upload="handleBeforeUpload"
|
||
>
|
||
<el-icon><Plus /></el-icon>
|
||
<template #file="{ file }">
|
||
<div>
|
||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
||
<span class="el-upload-list__item-actions">
|
||
<span class="el-upload-list__item-delete" @click="handleRemove(file)">
|
||
<el-icon><Delete /></el-icon>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</template>
|
||
<template #tip>
|
||
<div class="el-upload__tip">支持jpg, png等格式文件上传，文件大小不超过10MB</div>
|
||
</template>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item style="width: 100%" label="小区简介">
|
||
<el-input maxlength="200" show-word-limit v-model.trim="form.remark" :rows="5" type="textarea" placeholder="小区简介" />
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<div class="AddBuildingBody">
|
||
<div class="title">负责人信息</div>
|
||
<div class="addBuildingFormBody addBuildingForm_User_Body">
|
||
<el-form-item label="姓名">
|
||
<el-input maxlength="20" v-model.trim="form.manageName" placeholder="请输入姓名" />
|
||
</el-form-item>
|
||
<el-form-item label="电话" prop="managePhone">
|
||
<el-input v-model.trim="form.managePhone" placeholder="请输入电话" />
|
||
</el-form-item>
|
||
<el-form-item label="微信" prop="manageVx">
|
||
<el-input maxlength="20" v-model.trim="form.manageVx" placeholder="请输入微信"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="QQ" prop="manageQq">
|
||
<el-input maxlength="20" v-model.trim="form.manageQq" placeholder="请输入QQ"> </el-input>
|
||
</el-form-item>
|
||
<el-form-item label="邮箱" prop="manageEmail">
|
||
<el-input maxlength="30" v-model.trim="form.manageEmail" placeholder="请输入邮箱"> </el-input>
|
||
</el-form-item>
|
||
<div class="pl-100px">
|
||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||
<el-button @click="cancelForm">取消</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import Navbar from '@/layout/components/Navbar.vue';
|
||
import { ref } from 'vue';
|
||
import { pcaTextArr } from 'element-china-area-data';
|
||
import type { DataItem } from 'element-china-area-data';
|
||
import { useUserStore } from '@/store/modules/user';
|
||
import { CascaderValue } from 'element-plus';
|
||
import { addVillageAPI, editVillageAPI, getVillageByIdAPI, uploadVillageImageAPI } from '@/api/system/community';
|
||
import { communitylist_rows_type } from '@/api/system/community/type';
|
||
import { Delete, Plus } from '@element-plus/icons-vue';
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const editId = ref(route.query.id as string);
|
||
const isEdit = computed(() => Boolean(editId.value));
|
||
const apiPrefix = import.meta.env.VITE_APP_BASE_API;
|
||
const uploadFileUrl = `${apiPrefix}/village/uploadImages`;
|
||
// 获取省 市 区╬╬╬╬╬╬╬
|
||
const pcaTextArrList = ref<DataItem[]>(pcaTextArr);
|
||
// 获取小区用途
|
||
const houseUserList = ref([
|
||
{
|
||
value: 0,
|
||
label: '住宅'
|
||
},
|
||
{
|
||
value: 1,
|
||
label: '商住两用'
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '商业'
|
||
},
|
||
{
|
||
value: 3,
|
||
label: '办公'
|
||
}
|
||
]);
|
||
const formRef = ref();
|
||
const uploadRef = ref();
|
||
|
||
const form = ref<communitylist_rows_type>({
|
||
villageId: null,
|
||
villageName: '',
|
||
villageCode: '',
|
||
address: '',
|
||
houseUse: null,
|
||
villageArea: '',
|
||
remark: '',
|
||
parkingSpaceCount: '',
|
||
villageImageUrl: '',
|
||
city: '',
|
||
status: '0',
|
||
choiceStatus: 1, // 0 选择 1未选择
|
||
manageName: '',
|
||
managePhone: '',
|
||
manageVx: '',
|
||
manageEmail: '',
|
||
manageQq: '',
|
||
completDate: ''
|
||
});
|
||
const builtTime = ref(null);
|
||
const city = ref<string[]>([]);
|
||
const villageImg = ref([]);
|
||
|
||
// 表单验证
|
||
const rules = ref({
|
||
villageName: [{ required: true, message: '请输入小区名称', trigger: 'blur' }],
|
||
villageArea: [
|
||
{ required: false, message: '请输入小区面积', trigger: 'blur' },
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
const num = Number(value);
|
||
if (value === '' || value === null) {
|
||
return callback();
|
||
}
|
||
if (Number.isNaN(num)) {
|
||
return callback(new Error('请输入正确的小区面积'));
|
||
}
|
||
if (num < 0) {
|
||
return callback(new Error('小区面积不能小于0'));
|
||
}
|
||
callback();
|
||
}
|
||
}
|
||
],
|
||
parkingSpaceCount: [
|
||
{ required: false, message: '请输入车位数量', trigger: 'blur' },
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
const num = Number(value);
|
||
if (value === '' || value === null) {
|
||
return callback();
|
||
}
|
||
if (Number.isNaN(num)) {
|
||
return callback(new Error('请输入正确的车位数量'));
|
||
}
|
||
if (num < 0) {
|
||
return callback(new Error('车位数量不能小于0'));
|
||
}
|
||
if (num % 1 !== 0) {
|
||
return callback(new Error('请输入正确的整数车位数量'));
|
||
}
|
||
callback();
|
||
}
|
||
}
|
||
],
|
||
villageCode: [
|
||
{ required: true, message: '请输入小区编号', trigger: 'blur' },
|
||
{
|
||
validator: (_, value, callback) => {
|
||
if (value === '' || value === null) {
|
||
return callback(new Error('请输入小区编号'));
|
||
}
|
||
if (!/^[a-zA-Z0-9_-]{1,20}$/.test(value)) {
|
||
callback(new Error('请输入正确的小区编号,只能包含字母、数字、_和-'));
|
||
} else {
|
||
callback();
|
||
}
|
||
}
|
||
}
|
||
],
|
||
city: [{ required: true, message: '请选择城市', trigger: 'blur' }],
|
||
managePhone: [
|
||
{ required: false, message: '请输入电话', trigger: 'blur' },
|
||
{
|
||
validator: (_, value, callback) => {
|
||
// 值为空直接放行（非必填）
|
||
if (value === '' || value === null) {
|
||
return callback();
|
||
}
|
||
if (!/^1[3456789]\d{9}$/.test(value)) {
|
||
callback(new Error('请输入正确的手机号'));
|
||
} else {
|
||
callback();
|
||
}
|
||
}
|
||
}
|
||
],
|
||
manageEmail: [
|
||
{ required: false, message: '请输入邮箱', trigger: 'blur' },
|
||
{
|
||
validator: (_, value, callback) => {
|
||
if (value === '' || value === null) {
|
||
return callback();
|
||
}
|
||
// 邮箱总长度不超过254个字符，用户名不超过64个字符
|
||
if (value.length > 254 || value.split('@')[0].length > 64) {
|
||
callback(new Error('邮箱地址过长'));
|
||
} else if (!/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(value)) {
|
||
callback(new Error('请输入正确的邮箱'));
|
||
} else {
|
||
callback();
|
||
}
|
||
}
|
||
}
|
||
],
|
||
manageVx: [
|
||
{ required: false, message: '请输入微信', trigger: 'blur' },
|
||
{
|
||
validator: (_, value, callback) => {
|
||
// 值为空直接放行（非必填）
|
||
if (value === '' || value === null) {
|
||
return callback();
|
||
}
|
||
if (!/^[a-zA-Z0-9_]{4,20}$/.test(value)) {
|
||
callback(new Error('请输入正确的微信'));
|
||
} else {
|
||
callback();
|
||
}
|
||
}
|
||
}
|
||
],
|
||
manageQq: [
|
||
{ required: false, message: '请输入QQ', trigger: 'blur' },
|
||
{
|
||
validator: (_, value, callback) => {
|
||
// 值为空直接放行（非必填）
|
||
if (value === '' || value === null) {
|
||
return callback();
|
||
}
|
||
if (!/^[1-9]\d{4,10}$/.test(value)) {
|
||
callback(new Error('请输入正确的QQ'));
|
||
} else {
|
||
callback();
|
||
}
|
||
}
|
||
}
|
||
]
|
||
});
|
||
|
||
/** 获取编辑小区的信息 */
|
||
function getCommunityInfo() {
|
||
const id = editId.value;
|
||
getVillageByIdAPI(id).then((res) => {
|
||
city.value = res.data.city ? res.data.city.split('/') : [];
|
||
if (res.data.villageImageUrl) {
|
||
villageImg.value = res.data.villageImageUrl
|
||
.split(',')
|
||
.filter((item) => item !== '')
|
||
.map((item) => {
|
||
return {
|
||
name: item.split('/').pop(),
|
||
url: item
|
||
};
|
||
});
|
||
}
|
||
if (res.data.completDate) {
|
||
builtTime.value = res.data.completDate.split(' ')[0];
|
||
}
|
||
form.value = {
|
||
...res.data,
|
||
completDate: builtTime.value
|
||
};
|
||
});
|
||
}
|
||
|
||
if (isEdit.value) {
|
||
getCommunityInfo();
|
||
}
|
||
|
||
// 请求头
|
||
function headerToken() {
|
||
const useStore = useUserStore();
|
||
return {
|
||
Authorization: 'Bearer ' + useStore.token
|
||
};
|
||
}
|
||
|
||
const allowImgSuffix = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'heic'];
|
||
/** 检测文件大小和格式 */
|
||
function handleBeforeUpload(file: UploadFile): Promise<boolean | { file: UploadFile; type: string }> {
|
||
const type = file.raw.type.split('/').pop();
|
||
return new Promise((resolve, reject) => {
|
||
const isLt10M = file.size / 1024 / 1024 < 10;
|
||
if (!isLt10M) {
|
||
reject({
|
||
type: '文件大小错误',
|
||
file: file
|
||
});
|
||
ElMessage.warning('图片大小超过10M,请重新上传');
|
||
} else if (!allowImgSuffix.includes(type)) {
|
||
reject({
|
||
type: '文件类型错误',
|
||
file: file
|
||
});
|
||
ElMessage.warning('图片格式不是 png/jpg/jpeg 格式, 请重新上传');
|
||
} else {
|
||
resolve(true);
|
||
}
|
||
});
|
||
}
|
||
/** 上传狗子 */
|
||
async function handleUploadChange(file: UploadFile) {
|
||
const isUpload = await handleBeforeUpload(file);
|
||
if (typeof isUpload === 'object') {
|
||
ElMessage.error(isUpload.type);
|
||
return;
|
||
} else if (typeof isUpload === 'boolean' && isUpload === true) {
|
||
villageImg.value.push(file.raw);
|
||
}
|
||
}
|
||
|
||
function handleExceed() {
|
||
ElMessage.error('最多上传9张图片');
|
||
}
|
||
/** 移除钩子 */
|
||
const handleRemove = (file: UploadFile) => {
|
||
villageImg.value = villageImg.value.filter((item) => item.uid !== file.uid);
|
||
};
|
||
|
||
// 改变时间
|
||
const changeBuiltTime = (value: string) => {
|
||
form.value.completDate = value;
|
||
};
|
||
|
||
const cityChange = (value: CascaderValue[]) => {
|
||
form.value.city = value.join('/');
|
||
};
|
||
|
||
const reg = {
|
||
phone: /^1[3-9]\d{9}$/,
|
||
email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
|
||
qq: /^[1-9]\d{4,11}$/,
|
||
wechat: /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/
|
||
};
|
||
// 上传图片
|
||
const submitForm = () => {
|
||
formRef.value?.validate(async (valid: boolean) => {
|
||
if (valid) {
|
||
// 1) 将图片拆分为“新上传文件”和“已有图片URL”
|
||
const newFiles: File[] = [];
|
||
const existingUrls: string[] = [];
|
||
villageImg.value.forEach((item: any) => {
|
||
// 新增图片：handleUploadChange push 进来的是 File
|
||
if (item instanceof File) {
|
||
newFiles.push(item);
|
||
return;
|
||
}
|
||
// 编辑态已有图片：通常是 { name, url } 结构
|
||
if (item && typeof item === 'object' && typeof item.url === 'string') {
|
||
existingUrls.push(item.url);
|
||
return;
|
||
}
|
||
// 兜底：如果有字符串URL也兼容
|
||
if (typeof item === 'string') {
|
||
existingUrls.push(item);
|
||
}
|
||
});
|
||
// 2) 没有新文件：不调用上传接口，直接用已有URL提交
|
||
if (newFiles.length === 0) {
|
||
form.value.villageImageUrl = existingUrls.join(',');
|
||
submitFormInfo();
|
||
return;
|
||
}
|
||
|
||
// 3) 有新文件：先上传新文件，再与已有URL合并
|
||
const formdata = new FormData();
|
||
newFiles.forEach((file) => formdata.append('files', file));
|
||
console.log('newFiles', newFiles);
|
||
uploadVillageImageAPI(formdata).then((res) => {
|
||
const uploadedUrls = res.data.success.map((x) => x.url).filter(Boolean);
|
||
// 4) 最终图片 = 已有图片 + 新上传图片（避免覆盖）
|
||
form.value.villageImageUrl = [...existingUrls, ...uploadedUrls].join(',');
|
||
submitFormInfo();
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
function submitFormInfo() {
|
||
if (form.value.managePhone && form.value.managePhone.trim()) {
|
||
if (!reg.phone.test(form.value.managePhone)) {
|
||
ElMessage.error('请输入正确的手机号码');
|
||
return;
|
||
}
|
||
}
|
||
if (form.value.manageVx && form.value.manageVx.trim()) {
|
||
if (!reg.wechat.test(form.value.manageVx)) {
|
||
ElMessage.error('请输入正确的微信号');
|
||
return;
|
||
}
|
||
}
|
||
if (form.value.manageQq && form.value.manageQq.trim()) {
|
||
if (!reg.qq.test(form.value.manageQq)) {
|
||
ElMessage.error('请输入正确的QQ号码');
|
||
return;
|
||
}
|
||
}
|
||
if (form.value.manageEmail && form.value.manageEmail.trim()) {
|
||
if (!reg.email.test(form.value.manageEmail)) {
|
||
ElMessage.error('请输入正确的邮箱号码');
|
||
return;
|
||
}
|
||
}
|
||
|
||
if (isEdit.value) {
|
||
editVillageAPI<communitylist_rows_type>(form.value).then(() => {
|
||
ElMessage.success('编辑成功');
|
||
cancelForm();
|
||
});
|
||
} else {
|
||
addVillageAPI<communitylist_rows_type>(form.value).then(() => {
|
||
ElMessage.success('添加成功');
|
||
cancelForm();
|
||
});
|
||
}
|
||
}
|
||
// 返回
|
||
const cancelForm = () => {
|
||
router.back();
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.box {
|
||
background: #deedff;
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
background: transparent;
|
||
& > div {
|
||
flex: 1;
|
||
}
|
||
& > span {
|
||
padding-left: 20px;
|
||
font-size: 20px;
|
||
color: #000;
|
||
}
|
||
}
|
||
}
|
||
.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: 50px;
|
||
}
|
||
.addBuildingFormBody {
|
||
width: 900px;
|
||
margin: 0 auto;
|
||
padding-bottom: 40px;
|
||
.el-form-item {
|
||
width: 46%;
|
||
margin-bottom: 20px;
|
||
&:deep(.el-input, .el-date-editor.el-input) {
|
||
width: 300px;
|
||
}
|
||
}
|
||
.el-button {
|
||
width: 80px;
|
||
height: 35px;
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.addBuildingForm_User_Body {
|
||
width: 900px;
|
||
margin: 0 auto;
|
||
.el-button {
|
||
width: 80px;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
}
|
||
}
|
||
</style>
|