完成小区相关的接口对接

src/views/community/AddCommunity.vue

@@ -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;