完成小区相关的接口对接
This commit is contained in:
Zy
@@ -1,32 +1,39 @@
|
||||
<template>
|
||||
<div class="container AddBuildingBox">
|
||||
<PageHeader title="新建小区"></PageHeader>
|
||||
<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="buildingName">
|
||||
<el-input v-model="form.buildingName" placeholder="请输入小区名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="小区编号" prop="buildingCode">
|
||||
<el-input v-model="form.buildingCode" placeholder="请输入小区编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所在城市" prop="buildingType">
|
||||
<el-input v-model="form.buildingType" placeholder="请输入楼高(m)" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入楼栋结构" />
|
||||
</el-form-item>
|
||||
<el-form-item label="建成时间" prop="buildingArea">
|
||||
<el-date-picker v-model="builtTime" type="date" placeholder="选择建成时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="房屋用途" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入楼栋结构" />
|
||||
</el-form-item>
|
||||
<el-form-item label="小区面积" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="小区楼栋" prop="buildingArea">
|
||||
<div class="box">
|
||||
<div class="header">
|
||||
<span>智慧物业后台管理系统</span>
|
||||
<navbar ref="navbarRef" />
|
||||
</div>
|
||||
<div class="container AddBuildingBox">
|
||||
<PageHeader :title="isedit ? '编辑小区' : '添加小区'"> </PageHeader>
|
||||
<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 v-model.trim="form.villageName" placeholder="请输入小区名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="小区编号" prop="villageCode">
|
||||
<el-input 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 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 v-model.trim.number="form.villageArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="小区楼栋" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入小区楼栋"><template #append>栋</template> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="小区房屋" prop="buildingArea">
|
||||
@@ -34,81 +41,339 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="小区面积" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="车位数量" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入车位数量">
|
||||
<template #append>个</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" label="小区图片" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入楼栋结构" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" label="小区简介" prop="buildingArea">
|
||||
<el-input v-model="form.textarea" :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="姓名" prop="buildingName">
|
||||
<el-input v-model="form.buildingName" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="buildingCode">
|
||||
<el-input v-model="form.buildingCode" placeholder="请输入电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="微信" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入微信"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="QQ" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入QQ"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入邮箱"> </el-input>
|
||||
</el-form-item>
|
||||
<div class="pl-100px">
|
||||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||||
<el-button @click="cancelForm">取消</el-button>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="车位数量" prop="parkingSpaceCount">
|
||||
<el-input v-model.trim.number="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"
|
||||
@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 v-model.trim="form.remark" :rows="5" type="textarea" placeholder="小区简介" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="AddBuildingBody">
|
||||
<div class="title">负责人信息</div>
|
||||
<div class="addBuildingFormBody addBuildingForm_User_Body">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model.trim="form.manageName" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话">
|
||||
<el-input v-model.trim="form.managePhone" placeholder="请输入电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="微信">
|
||||
<el-input v-model.trim="form.manageVx" placeholder="请输入微信"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="QQ">
|
||||
<el-input v-model.trim="form.manageQq" placeholder="请输入QQ"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱">
|
||||
<el-input 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 PageHeader from '@/components/Pageheader/index.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/index';
|
||||
import { communitylist_rows_type } from '@/api/system/community/type';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const editId = ref(route.query.id as string);
|
||||
const isedit = computed(() => Boolean(editId.value));
|
||||
|
||||
const apipriex = import.meta.env.VITE_APP_BASE_API;
|
||||
const uploadfileurl = `${apipriex}/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 form = ref({
|
||||
buildingName: '',
|
||||
buildingCode: '',
|
||||
buildingType: '',
|
||||
buildingArea: '',
|
||||
buildingAddress: null,
|
||||
buildingDescription: null,
|
||||
textarea: ''
|
||||
const uploadRef = ref();
|
||||
|
||||
const form = ref<communitylist_rows_type>({
|
||||
villageName: '',
|
||||
villageCode: '',
|
||||
address: '',
|
||||
houseUse: null,
|
||||
villageArea: 0,
|
||||
remark: '',
|
||||
parkingSpaceCount: 0,
|
||||
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({
|
||||
buildingName: [{ required: true, message: '请输入楼栋名称', trigger: 'blur' }],
|
||||
buildingAddress: [{ required: true, message: '请输入单元数', trigger: 'blur' }],
|
||||
buildingDescription: [{ required: true, message: '请输入楼层', trigger: 'blur' }]
|
||||
villageName: [{ required: true, message: '请输入小区名称', trigger: 'blur' }],
|
||||
villageCode: [{ required: true, message: '请输入小区编号', trigger: 'blur' }],
|
||||
city: [{ required: true, message: '请选择城市', trigger: 'blur' }]
|
||||
});
|
||||
|
||||
/** 获取编辑小区的信息 */
|
||||
function getCommunityinfo() {
|
||||
getVillageByIdAPI(editId.value).then((res) => {
|
||||
city.value = (res.data.city as string).split('/');
|
||||
if (res.data.villageImageUrl) {
|
||||
villageImg.value = res.data.villageImageUrl
|
||||
.split(',')
|
||||
.filter((item) => item !== '')
|
||||
.map((item) => {
|
||||
return {
|
||||
name: item.split('/').pop(),
|
||||
url: item
|
||||
};
|
||||
});
|
||||
}
|
||||
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
|
||||
};
|
||||
}
|
||||
|
||||
/** 检测文件大小和格式 */
|
||||
function handleBeforeUpload(file: UploadFile): Promise<boolean | { file: UploadFile; type: string }> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const isLt10M = file.size / 1024 / 1024 < 10;
|
||||
if (!isLt10M) {
|
||||
reject({
|
||||
type: '文件大小错误',
|
||||
file: file
|
||||
});
|
||||
} else if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png') {
|
||||
reject({
|
||||
type: '文件类型错误',
|
||||
file: file
|
||||
});
|
||||
} 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);
|
||||
}
|
||||
}
|
||||
|
||||
/** 移除钩子 */
|
||||
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}$/
|
||||
};
|
||||
|
||||
// 使用
|
||||
reg.phone.test('13800138000');
|
||||
// 上传图片
|
||||
const submitForm = () => {
|
||||
formRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
console.log(form.value);
|
||||
// 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));
|
||||
|
||||
uploadVillageImageAPI(formdata).then((res) => {
|
||||
const uploadedUrls = res.data.map((x) => x.url).filter(Boolean);
|
||||
// 4) 最终图片 = 已有图片 + 新上传图片（避免覆盖）
|
||||
form.value.villageImageUrl = [...existingUrls, ...uploadedUrls].join(',');
|
||||
submitFormInfo();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function submitFormInfo() {
|
||||
if (form.value.managePhone.trim()) {
|
||||
if (reg.phone.test(form.value.managePhone)) {
|
||||
ElMessage.error('请输入正确的手机号码');
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (form.value.manageVx.trim()) {
|
||||
if (reg.wechat.test(form.value.manageVx)) {
|
||||
ElMessage.error('请输入正确的微信号');
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (form.value.manageQq.trim()) {
|
||||
if (reg.qq.test(form.value.manageQq)) {
|
||||
ElMessage.error('请输入正确的QQ号码');
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (form.value.manageEmail.trim()) {
|
||||
if (reg.email.test(form.value.manageEmail)) {
|
||||
ElMessage.error('请输入正确的邮箱号码');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (isedit.value) {
|
||||
editVillageAPI<communitylist_rows_type>(form.value).then((res) => {
|
||||
ElMessage.success('编辑成功');
|
||||
router.push({
|
||||
path: '/community'
|
||||
});
|
||||
});
|
||||
} else {
|
||||
addVillageAPI<communitylist_rows_type>(form.value).then((res) => {
|
||||
ElMessage.success('添加成功');
|
||||
router.push({
|
||||
path: '/community'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
const cancelForm = () => {
|
||||
console.log('取消');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
background-color: #1a75ff;
|
||||
& > div {
|
||||
flex: 1;
|
||||
}
|
||||
& > span {
|
||||
padding-left: 20px;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.AddBuildingBox {
|
||||
padding: 15px;
|
||||
height: 100%;
|
||||
@@ -128,7 +393,7 @@ const cancelForm = () => {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
border-bottom: 1px solid #bbbbbb;
|
||||
margin-bottom: 60px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.addBuildingFormBody {
|
||||
width: 900px;
|
||||
|
||||
@@ -1,76 +1,153 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="community_nav_box">
|
||||
<div class="currentbox">当前小区：xxxxxxxxxxxxx</div>
|
||||
<div class="subtitle flex align-center">
|
||||
<div class="line"></div>
|
||||
<div class="changecommunity">切换小区</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="header">
|
||||
<span class="">智慧物业后台管理系统</span>
|
||||
<navbar ref="navbarRef" />
|
||||
</div>
|
||||
<div class="communityBody">
|
||||
<div
|
||||
class="coummunity_card"
|
||||
:class="{
|
||||
activeCommunity: index === 2
|
||||
}"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
>
|
||||
<img src="https://picsum.photos/400/400" alt="" />
|
||||
<div class="coummunityaction_box">
|
||||
<div class="coummunityname">{{ item.name }}</div>
|
||||
<div class="counmmunityaddress">{{ item.address }}</div>
|
||||
</div>
|
||||
<div class="actions flex">
|
||||
<div>管理</div>
|
||||
<div>编辑</div>
|
||||
<div>删除</div>
|
||||
<div class="container">
|
||||
<div class="community_nav_box">
|
||||
<div class="currentbox">当前小区:{{ currentViliageInfo && currentViliageInfo.villageName }}</div>
|
||||
<div class="subtitle flex align-center">
|
||||
<div class="line"></div>
|
||||
<div class="changecommunity">切换小区</div>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="handleAdd" class="coummunity_card addActions flex flex-items-center justify-center">
|
||||
<div class="addCoummunity">
|
||||
<el-icon>
|
||||
<AddLocation></AddLocation>
|
||||
</el-icon>
|
||||
<div>添加小区</div>
|
||||
<div class="communityBody">
|
||||
<div
|
||||
class="coummunity_card"
|
||||
:class="{
|
||||
activeCommunity: item.choiceStatus === 0
|
||||
}"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
>
|
||||
<el-image :src="item.villageImageUrl ? item.villageImageUrl.split(',')[0] : ''">
|
||||
<template #error>
|
||||
<div class="image-viewer-slot image-slot">
|
||||
<el-icon><Picture /></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<div class="coummunityaction_box">
|
||||
<div class="coummunityname">{{ item.villageName }}</div>
|
||||
<div class="counmmunityaddress">{{ item.address }}</div>
|
||||
</div>
|
||||
<div class="actions flex">
|
||||
<div
|
||||
@click="handleclick(item)"
|
||||
:style="{
|
||||
color: item.choiceStatus === 0 ? 'green' : ''
|
||||
}"
|
||||
>
|
||||
{{ item.choiceStatus === 0 ? '进入' : '管理' }}
|
||||
</div>
|
||||
<div @click="handleEdit(item)">编辑</div>
|
||||
<div @click="handleDelete(item)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="handleAdd" class="coummunity_card addActions flex flex-items-center justify-center">
|
||||
<div class="addCoummunity">
|
||||
<el-icon>
|
||||
<AddLocation></AddLocation>
|
||||
</el-icon>
|
||||
<div>添加小区</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
const list = ref([
|
||||
{
|
||||
name: '北境碧桂园小区',
|
||||
address: '北境朝北市塔reek儿大道368号'
|
||||
},
|
||||
{
|
||||
name: '北境碧桂园小区',
|
||||
address: '北境朝北市塔reek儿大道368号'
|
||||
},
|
||||
{
|
||||
name: '北境碧桂园小区',
|
||||
address: '北境朝北市塔reek儿大道368号'
|
||||
},
|
||||
{
|
||||
name: '北境碧桂园小区',
|
||||
address: '北境朝北市塔reek儿大道368号'
|
||||
},
|
||||
{
|
||||
name: '北境碧桂园小区',
|
||||
address: '北境朝北市塔reek儿大道368号'
|
||||
}
|
||||
]);
|
||||
import Navbar from '@/layout/components/Navbar.vue';
|
||||
import { deleteVillageByIdAPI, switchVillageAPI, getCommunitylistAPI } from '@/api/system/community/index';
|
||||
import type { communitylist_rows_type } from '@/api/system/community/type';
|
||||
import { Picture } from '@element-plus/icons-vue';
|
||||
|
||||
const router = useRouter();
|
||||
const list = ref<communitylist_rows_type[]>([]);
|
||||
const currentViliageInfo = ref<communitylist_rows_type>();
|
||||
/** 获取小区列表 */
|
||||
function getlist() {
|
||||
getCommunitylistAPI().then((res) => {
|
||||
list.value = res.rows;
|
||||
currentViliageInfo.value = res.rows.find((item) => item.choiceStatus === 0);
|
||||
res.rows.forEach((item) => {
|
||||
if (item.villageImageUrl) {
|
||||
console.log(item.villageImageUrl.split(','));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
getlist();
|
||||
/** 新增小区 */
|
||||
function handleAdd() {
|
||||
console.log('add');
|
||||
router.push({
|
||||
path: '/community/AddCommunity'
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除小区 */
|
||||
function handleDelete(item: communitylist_rows_type) {
|
||||
deleteVillageByIdAPI(item.villageId).then(() => {
|
||||
const newlist = list.value.filter((listitem) => listitem.villageId !== item.villageId);
|
||||
list.value = newlist;
|
||||
});
|
||||
}
|
||||
|
||||
/** 编辑小区 */
|
||||
function handleEdit(item: communitylist_rows_type) {
|
||||
router.push({
|
||||
path: '/community/AddCommunity',
|
||||
query: {
|
||||
id: item.villageId
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 管理小区 */
|
||||
function handleclick(item: communitylist_rows_type) {
|
||||
if (item.choiceStatus === 0) {
|
||||
router.push({
|
||||
path: '/index'
|
||||
});
|
||||
} else {
|
||||
switchVillageAPI(item.villageId).then((res) => {
|
||||
console.log('切换成小区---------------------');
|
||||
ElMessage.success('切换小区成功');
|
||||
router.push({
|
||||
path: '/index'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
background-color: #1a75ff;
|
||||
& > div {
|
||||
flex: 1;
|
||||
}
|
||||
& > span {
|
||||
padding-left: 20px;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 30px;
|
||||
height: 200px;
|
||||
background: #fff;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
@@ -106,30 +183,41 @@ function handleAdd() {
|
||||
}
|
||||
}
|
||||
.communityBody {
|
||||
padding: 30px;
|
||||
|
||||
padding: 20px;
|
||||
color: #000;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(292px, 1fr));
|
||||
@media (max-width: 1540px) {
|
||||
grid-template-columns: repeat(4, minmax(292px, 1fr));
|
||||
}
|
||||
@media (max-width: 1280px) {
|
||||
grid-template-columns: repeat(3, minmax(292px, 1fr));
|
||||
}
|
||||
@media (max-width: 1030px) {
|
||||
grid-template-columns: repeat(2, minmax(292px, 1fr));
|
||||
}
|
||||
.coummunity_card {
|
||||
width: 330px;
|
||||
height: 330px;
|
||||
height: 300px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
margin-right: 15px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 15px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.el-image {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.coummunityaction_box {
|
||||
height: 100px;
|
||||
padding: 10px 10px;
|
||||
flex: 1;
|
||||
padding: 10px 5px;
|
||||
font-size: 15px;
|
||||
.counmmunityaddress {
|
||||
margin-top: 20px;
|
||||
font-size: small;
|
||||
|
||||
@@ -125,7 +125,6 @@ const handleLogin = () => {
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log('error submit!', fields);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@@ -8,14 +8,14 @@
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(item, index) in buildingList"
|
||||
v-for="(item, index) in currentBuildingInfoList"
|
||||
:class="{
|
||||
active: index === activeId
|
||||
active: item.id === currentBuildingInfo.id
|
||||
}"
|
||||
:key="index"
|
||||
@click="checkBuilding(index)"
|
||||
@click="switchBuilding(item.id)"
|
||||
>
|
||||
<div class="buildingname">{{ item.name }}</div>
|
||||
<div class="buildingname">{{ item.villageName ?? '未知' }}</div>
|
||||
<div class="buildactions flex align-center justify-around">
|
||||
<el-icon class="pointer hover-color-blue"><Setting /></el-icon>
|
||||
<el-icon class="pointer hover-color-red"><Delete /></el-icon>
|
||||
@@ -27,26 +27,11 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useHouseStore } from '@/store/modules/house';
|
||||
const houseStore = useHouseStore();
|
||||
const { switchBuilding } = houseStore; // 方法
|
||||
const { currentBuildingInfoList, currentBuildingInfo } = storeToRefs(houseStore); // 数据
|
||||
const router = useRouter();
|
||||
const activeId = ref(0);
|
||||
const buildingList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: 'a栋'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'b栋'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'c栋'
|
||||
}
|
||||
]);
|
||||
const checkBuilding = (index: number) => {
|
||||
activeId.value = index;
|
||||
};
|
||||
|
||||
const handleAddBuilding = () => {
|
||||
router.push({
|
||||
|
||||
@@ -15,6 +15,8 @@ const props = defineProps<{
|
||||
unit: any;
|
||||
fIdx: number;
|
||||
}>();
|
||||
const houstlist = ref([]);
|
||||
props.unit;
|
||||
const router = useRouter();
|
||||
const checked = ref([]);
|
||||
// 菜单
|
||||
@@ -28,7 +30,6 @@ const menuList = ref([
|
||||
const contextMenu = ref();
|
||||
// 点击事件
|
||||
const handleSelect = (val) => {
|
||||
console.log('你选择了：', val);
|
||||
switch (val) {
|
||||
case 'edit':
|
||||
break;
|
||||
@@ -50,10 +51,6 @@ function handleClick(house: any) {
|
||||
const emit = defineEmits<{
|
||||
change: string[];
|
||||
}>();
|
||||
|
||||
function handleContextMenu(e) {
|
||||
console.log(e);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -1,14 +1,21 @@
|
||||
<template>
|
||||
<div class="TableBox p-5 h-full">
|
||||
<el-table border :data="Array.from({ length: building.totalFloors }, (_, i) => i + 1)">
|
||||
<el-table border :data="floorsSortList">
|
||||
<el-table-column align="center" fixed label="楼层\单元" width="85">
|
||||
<template #default="{ $index }">
|
||||
<span>{{ $index + 1 }}楼</span>
|
||||
<template #default="{ $index, row }">
|
||||
<span>{{ row }}楼</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="160" class="column" align="center" :label="units.unitNo" v-for="(units, index) in building.units" :key="index">
|
||||
<template #default="{ $index }">
|
||||
<houseItem :unit="units.houses[$index]" :f-idx="$index"></houseItem>
|
||||
<el-table-column
|
||||
min-width="160"
|
||||
class="column"
|
||||
align="center"
|
||||
:label="units.buildingName"
|
||||
v-for="(units, index) in currentHouseInfoList"
|
||||
:key="index"
|
||||
>
|
||||
<template #default="{ $index, row }">
|
||||
<houseItem :unit="units.floors_Json" :f-idx="row"></houseItem>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -18,72 +25,38 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import houseItem from './houseItem.vue';
|
||||
import { build } from 'vite';
|
||||
// 房屋信息
|
||||
interface House {
|
||||
id: string; // 唯一标识，如 B-1-101
|
||||
roomNo: string; // 房号，如 101
|
||||
checked: boolean; // 是否选中
|
||||
// 可扩展：面积、户型、收费标准、状态等
|
||||
import { useHouseStore } from '@/store/modules/house';
|
||||
const houseStore = useHouseStore();
|
||||
const { currentHouseInfoList } = storeToRefs(houseStore); // 数据
|
||||
console.log(currentHouseInfoList);
|
||||
const maxFloors = ref(0);
|
||||
const maxUnits = ref(currentHouseInfoList.value.length);
|
||||
const floorslist = ref(new Set());
|
||||
const floorsSortList = computed(() => {
|
||||
const list = Array.from(floorslist.value) as string[];
|
||||
return list.sort(sortNumberStr);
|
||||
});
|
||||
function sortNumberStr(a, b) {
|
||||
const numA = parseFloat(a);
|
||||
const numB = parseFloat(b);
|
||||
|
||||
// 如果都是有效数字 → 按数字大小排（支持负数、小数）
|
||||
if (!isNaN(numA) && !isNaN(numB)) {
|
||||
return numA - numB;
|
||||
}
|
||||
|
||||
// 否则按自然语言排
|
||||
return a.localeCompare(b, 'zh-CN', { numeric: true });
|
||||
}
|
||||
|
||||
// 单元信息
|
||||
interface Unit {
|
||||
id: string; // 唯一标识，如 1
|
||||
unitNo: string; // 单元号，如 1单元
|
||||
houses: House[][]; // 按楼层分组的房屋，houses[0] 对应1楼，houses[1]对应2楼...
|
||||
}
|
||||
|
||||
// 楼栋信息
|
||||
interface Building {
|
||||
buildingNo: string; // 楼栋号，如 B栋
|
||||
totalFloors: number; // 总楼层
|
||||
units: Unit[]; // 单元列表
|
||||
}
|
||||
// 初始化B栋数据
|
||||
const building: Building = {
|
||||
buildingNo: 'B栋',
|
||||
totalFloors: 5, // 总楼层
|
||||
// 栋-> 单元 -> 楼 -> 房间
|
||||
units: []
|
||||
};
|
||||
|
||||
function init(length) {
|
||||
const arr = Array.from({ length: length }).map((_, index) => {
|
||||
return {
|
||||
id: index,
|
||||
unitNo: index + 1 + '单元',
|
||||
// 1单元
|
||||
houses: [
|
||||
// 1楼
|
||||
[
|
||||
// 一楼房屋
|
||||
{ id: 'B-3-301', roomNo: '101', checked: true },
|
||||
{ id: 'B-3-302', roomNo: '102', checked: false },
|
||||
{ id: 'B-3-303', roomNo: '103', checked: false },
|
||||
{ id: 'B-3-304', roomNo: '104', checked: false },
|
||||
{ id: 'B-3-305', roomNo: '105', checked: false },
|
||||
{ id: 'B-3-306', roomNo: '106', checked: false },
|
||||
{ id: 'B-3-307', roomNo: '107', checked: false },
|
||||
{ id: 'B-3-308', roomNo: '108', checked: false }
|
||||
],
|
||||
[
|
||||
{ id: 'B-1-201', roomNo: '201', checked: true },
|
||||
{ id: 'B-1-202', roomNo: '202', checked: false },
|
||||
{ id: 'B-1-203', roomNo: '203', checked: false },
|
||||
{ id: 'B-1-204', roomNo: '204', checked: false },
|
||||
{ id: 'B-1-205', roomNo: '205', checked: false },
|
||||
{ id: 'B-1-206', roomNo: '206', checked: false },
|
||||
{ id: 'B-1-207', roomNo: '207', checked: false },
|
||||
{ id: 'B-1-208', roomNo: '208', checked: false }
|
||||
]
|
||||
]
|
||||
};
|
||||
}) as any;
|
||||
console.log(arr);
|
||||
building.units = arr;
|
||||
}
|
||||
init(20);
|
||||
currentHouseInfoList.value.forEach((item) => {
|
||||
maxFloors.value = Math.max(maxFloors.value, item.actualFloorCount);
|
||||
item.floors_Json = JSON.parse(`[${item.floors.replaceAll('\\', '')}]`);
|
||||
console.log(item.floors_Json);
|
||||
item.floors_Json.forEach((floor) => {
|
||||
floorslist.value.add(floor.floorNo);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -26,7 +26,6 @@ import { ref } from 'vue';
|
||||
import TableUnit from './components/table.vue';
|
||||
const router = useRouter();
|
||||
function handleAddHouse() {
|
||||
console.log('add house');
|
||||
router.push({
|
||||
path: '/house/addHouse'
|
||||
});
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
<PageHeader>
|
||||
<template #content>
|
||||
<div class="houseAdressBox">
|
||||
<span class="mr-50px">当前小区：北境碧桂园小区</span>
|
||||
<span>小区地址：北境朝北市塔里克儿大道368号</span>
|
||||
<span class="mr-50px">当前小区：{{ currentVilageInfo && currentVilageInfo.villageName }}</span>
|
||||
<span>小区地址：{{ currentVilageInfo && currentVilageInfo.city }} {{ currentVilageInfo && currentVilageInfo.address }}</span>
|
||||
</div>
|
||||
<div class="houseTypeBox flex">
|
||||
<div
|
||||
@@ -31,47 +31,19 @@
|
||||
import building from './components/building.vue';
|
||||
import unit from './components/unit.vue';
|
||||
import PageHeader from '@/components/Pageheader/index.vue';
|
||||
const housetypelist = ['住宅', '办公', '商用', '公寓'];
|
||||
import { useHouseStore } from '@/store/modules/house';
|
||||
const houseStore = useHouseStore();
|
||||
const { currentVilageInfo } = storeToRefs(houseStore);
|
||||
console.log(currentVilageInfo);
|
||||
|
||||
const housetypelist = ['住宅', '办公', '商用', '公寓'];
|
||||
const active = ref(0);
|
||||
const changeHouseType = (index: number) => {
|
||||
active.value = index;
|
||||
};
|
||||
|
||||
let ojb = {
|
||||
'code': 200,
|
||||
'msg': '操作成功',
|
||||
'data': [
|
||||
{
|
||||
'unitNo': '1',
|
||||
'houses': '{"houseId":5,"houseNo":"1201室"}, {"houseId":6,"houseNo":"1202室"}',
|
||||
'houseCount': 2,
|
||||
'floorNo': '12',
|
||||
'buildingId': 54564
|
||||
},
|
||||
{
|
||||
'unitNo': '1',
|
||||
'houses': '{"houseId":1,"houseNo":"1301室"}, {"houseId":2,"houseNo":"1302室"}',
|
||||
'houseCount': 2,
|
||||
'floorNo': '13',
|
||||
'buildingId': 54564
|
||||
},
|
||||
{
|
||||
'unitNo': '2',
|
||||
'houses': '{"houseId":7,"houseNo":"1201室"}',
|
||||
'houseCount': 1,
|
||||
'floorNo': '12',
|
||||
'buildingId': 54564
|
||||
},
|
||||
{
|
||||
'unitNo': '2',
|
||||
'houses': '{"houseId":3,"houseNo":"1301室"}, {"houseId":4,"houseNo":"1302室"}',
|
||||
'houseCount': 2,
|
||||
'floorNo': '13',
|
||||
'buildingId': 54564
|
||||
}
|
||||
]
|
||||
};
|
||||
// 初始化数据
|
||||
houseStore.initHouse(active.value);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
<template>
|
||||
<div class="StoreRoomBox">
|
||||
<PageHeader title="储藏室管理">
|
||||
<template #container>
|
||||
<div class="flex flex-items-center pb-3">
|
||||
<div>储藏编号</div>
|
||||
<el-input class="ml-10px mr-20px" placeholder="请输入" v-model="searchValue" />
|
||||
<el-button class="mr-20px" type="primary">查询</el-button>
|
||||
<el-button>重置</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</PageHeader>
|
||||
<PageHeader title="储藏室管理"> </PageHeader>
|
||||
<div class="nav flex flex-items-center pb-3">
|
||||
<div class="title-text">储藏编号</div>
|
||||
<el-input placeholder="请输入" v-model="searchValue" />
|
||||
<el-button class="mr-10px" type="primary">查询</el-button>
|
||||
<el-button>重置</el-button>
|
||||
</div>
|
||||
<div class="StoreRoomBody">
|
||||
<div class="nav flex flex-items-center justify-between">
|
||||
<div class="title-text">储藏室列表</div>
|
||||
@@ -19,42 +16,43 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="StoreRoomTablebox">
|
||||
<el-table checked>
|
||||
<el-table-column label="楼栋" width="100">
|
||||
<el-table :data="datalist" checked>
|
||||
<el-table-column align="center" type="selection"></el-table-column>
|
||||
<el-table-column align="center" label="楼栋">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.id }}</div>
|
||||
<div>{{ scope.row.floor }}栋</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单元" width="100">
|
||||
<el-table-column align="center" label="单元">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.name }}单元</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="储藏室号">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.name }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="储藏室号" width="100">
|
||||
<el-table-column align="center" label="建筑面积">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.name }}</div>
|
||||
<div>{{ scope.row.name }}㎡</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="建筑面积" width="100">
|
||||
<el-table-column align="center" label="公摊面积">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.name }}</div>
|
||||
<div>{{ scope.row.name }}㎡</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="公摊面积" width="100">
|
||||
<el-table-column align="center" label="实用面积">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.name }}</div>
|
||||
<div>{{ scope.row.name }}㎡</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="实用面积" width="100">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.name }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<el-table-column align="center" label="操作">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<el-button type="primary">编辑</el-button>
|
||||
<el-button type="danger">删除</el-button>
|
||||
<el-button text type="primary">编辑</el-button>
|
||||
<el-button text type="danger">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -68,12 +66,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
const searchValue = ref('');
|
||||
import PageHeader from '@/components/Pageheader/index.vue';
|
||||
|
||||
const paginationOptions = ref({
|
||||
total: 100,
|
||||
page: 1,
|
||||
limit: 10
|
||||
});
|
||||
|
||||
const datalist = ref([
|
||||
{
|
||||
units: 3,
|
||||
name: 'A1',
|
||||
storeroom: 'b123',
|
||||
area: '1000',
|
||||
commontArea: '222',
|
||||
useArea: '333',
|
||||
floor: '1'
|
||||
}
|
||||
]);
|
||||
function handleSizeChange(val: number) {
|
||||
paginationOptions.value.limit = val;
|
||||
}
|
||||
@@ -83,9 +94,39 @@ function hanlePageChange(val: number) {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.StoreRoomBody {
|
||||
.StoreRoomBox {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
& > .nav {
|
||||
background-color: white;
|
||||
padding: 20px 30px;
|
||||
border-top: 1px solid #ccc;
|
||||
& > .title-text {
|
||||
width: 80px;
|
||||
}
|
||||
.el-input {
|
||||
width: 300px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.StoreRoomBody {
|
||||
$navHeight: 60px;
|
||||
flex: 1;
|
||||
|
||||
padding: 20px;
|
||||
// height: 785px;
|
||||
border-radius: 5px;
|
||||
margin-top: 20px;
|
||||
background-color: #fff;
|
||||
.nav {
|
||||
height: $navHeight;
|
||||
}
|
||||
@@ -93,6 +134,9 @@ function hanlePageChange(val: number) {
|
||||
padding: 0 10px;
|
||||
margin-top: 10px;
|
||||
height: calc(100% - $navHeight);
|
||||
& > .el-table {
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user