feature: 地址联调完成, 还未加校验

components.d.ts

@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    GridAddress: typeof import('./src/components/address/gridAddress/index.vue')['default']
     VanButton: typeof import('vant/es')['Button']
     VanCascader: typeof import('vant/es')['Cascader']
     VanCell: typeof import('vant/es')['Cell']

src/api/system/index.ts

@@ -0,0 +1,12 @@
+import { service } from '@/utils/request'
+import { GridAddressReq, GridAddressResp } from './types'
+import { ApiResponse } from '../types'
+export enum SystemApi {
+  /** 获取网格地址信息 */
+  GET_GRID_ADDRESS = '/areaGrid/data/getAreaGrid',
+}
+
+/** 获取网格地址信息 */
+export function getGridAddress(params: GridAddressReq) {
+  return service.get<ApiResponse<GridAddressResp[]>>(SystemApi.GET_GRID_ADDRESS, {params})
+}

src/api/system/types.ts

@@ -0,0 +1,37 @@
+/** 网格地址信息Resp */
+export interface GridAddressResp {
+  /**
+   * 地址段code
+   */
+  addrRangeCode?: string
+  /**
+   * 地址段名称
+   */
+  addrRangeName?: string
+  /**
+   * 上级名称拼接)
+   */
+  addrRangeSuperiorsName?: string
+  /**
+   *
+   * 地址段类型(district区，town镇街，vilage村社，community/自然村/园区/路段/厂房等，cell子小区，banner幢，unit单元，floor楼层，room室)
+   */
+  addrRangeType?: string
+  /**
+   * 地址段子集
+   */
+  children?: GridAddressResp[]
+  /**
+   * 父地址段code
+   */
+  parentCode?: string
+}
+
+/** 网格地址信息req */
+export interface GridAddressReq {
+  parentCode?: string
+  /**
+   * 查询方式 1 精准数据 2 基础网格  3 专职网格 4督查网格
+   */
+  selectMethod?: string
+}

src/components/address/gridAddress/index.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { defineProps, defineEmits, ref, onMounted, watch } from 'vue'
+import { CascaderOption } from 'vant'
+import { getGridAddress } from '@/api/system'
+
+// 接收父组件传递的 props
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits(['update:modelValue','finish'])
+
+const localShow = ref(props.modelValue) // 本地控制的显示状态
+const cascaderValue = ref<string>() // 用于存储级联选择的值
+const options = ref<CascaderOption[]>([]) // 用于存储级联选择的选项
+
+// 监听 props 的变化，更新本地状态
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    localShow.value = newVal
+  }
+)
+
+// 当弹窗关闭时触发事件，更新父组件的 areaShow
+const onClose = () => {
+  emit('update:modelValue', false)
+}
+
+
+// 当级联选择完成时
+const onFinish = (value: any) => {
+  emit('update:modelValue', false)
+  emit('finish',value)
+}
+
+// 异步加载选项数据
+const fieldNames = {
+  text: 'areaName',
+  value: 'areaCode',
+  children: 'childrenRes',
+}
+// 递归删除最后一级的childrenRes为[]的节点
+const deleteEmptyChildren = (data: CascaderOption[]) => {
+  data.forEach((item) => {
+    if (item.childrenRes && item.childrenRes.length === 0) {
+      delete item.childrenRes
+    }
+    if (item.childrenRes) {
+      deleteEmptyChildren(item.childrenRes)
+    }
+  })
+  return data
+}
+onMounted(async () => {
+  const { data } = await getGridAddress({ parentCode: '330205', selectMethod: '2' })
+  options.value = data ? deleteEmptyChildren(data) : []
+})
+</script>
+
+<template>
+  <van-popup v-model:show="localShow" round position="bottom">
+    <van-cascader
+      v-model="cascaderValue"
+      title="请选择所在地区"
+      :options="options"
+      :field-names="fieldNames"
+      @close="onClose"
+      @finish="onFinish"
+    />
+  </van-popup>
+</template>
+
+<style lang="scss" scoped></style>

src/config/proxy.ts

@@ -2,6 +2,11 @@ import { ProxyOptions } from 'vite'
 
 const proxy: Record<string, string | ProxyOptions> = {
   /** 请求的后端地址  */
+  '/api/areaGrid': {
+    target: 'http://192.168.3.72:8085/',
+    changeOrigin: true,
+    rewrite: (path) => path.replace(/^\/api/, ''),
+  },
   '/api': {
     target: 'http://192.168.3.72:8081/',
     changeOrigin: true,

src/store/address/index.ts

@@ -0,0 +1,34 @@
+import { getGridAddress } from '@/api/system'
+import { defineStore } from 'pinia'
+import { CascaderOption } from 'vant'
+import { computed, ref } from 'vue'
+
+const useAddressState = defineStore('addressState', () => {
+  /** 网格级别的地址信息 */
+  const gridAddressList = ref<CascaderOption[]>([])
+
+  /** 网格级别的地址信息 */
+  const getGridAddressList = computed(() => gridAddressList.value)
+  const setGridAddressList = (list: CascaderOption[]) => {
+    gridAddressList.value = list
+  }
+
+
+  /** 获取网格级别的地址信息 */
+  const handleGetGridAddressList = async () => {
+    const {data} = await getGridAddress({ parentCode: '330205', selectMethod: '2' })
+    if (data) {
+      setGridAddressList(data)
+    }
+  }
+
+
+  return {
+    getGridAddressList,
+
+    handleGetGridAddressList,
+  }
+})
+
+
+export default useAddressState

src/subPages/pages/inspectionResults/index.vue

@@ -6,15 +6,7 @@ const finished = ref(false)
 const list = ref([])
 const onLoad = () => {
   loading.value = true
-  setTimeout(() => {
-    for (let i = 0; i < 10; i++) {
-      list.value.push('列表' + list.value.length)
-    }
-    loading.value = false
-    if (list.value.length >= 40) {
-      finished.value = true
-    }
-  }, 500)
+   finished.value = true
 }
 
 const handleGoDetail = () => {
@@ -27,10 +19,6 @@ const handleGoDetail = () => {
 <template>
   <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
     <view>
-      <view class="top">
-        <view class="title">xxxx</view>
-        <van-button plain hairline size="mini" type="primary" @click="handleGoDetail">查看详情</van-button>
-      </view>
     </view>
   </van-list>
 </template>

src/subPages/pages/reportProblems/index.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import { addQuestionReportData, pageQuestionReportData } from '@/api/questionReqort';
+import { addQuestionReportData, pageQuestionReportData } from '@/api/questionReqort'
 import { AddQuestionReportDataReq, QuestionListRes } from '@/api/questionReqort/types'
 import { ref } from 'vue'
+import GridAddress from '@/components/address/gridAddress/index.vue'
+import { showNotify } from 'vant';
 
 const active = ref(0)
 
@@ -15,8 +17,25 @@ const rules = ref({
 })
 
 /** 上报问题 */
+const addressList = ref([])
+const handleAddressFinish = (value) => {
+  formData.value.addrName = value.selectedOptions[value.tabIndex].areaName
+  addressList.value = value
+}
 const submit = async () => {
-  const { data } = await addQuestionReportData(formData.value)
+  if (!addressList.value || addressList.value.length === 0) {
+    showNotify('请选择问题所在地')
+    return
+  }
+  const { data } = await addQuestionReportData({
+    ...formData.value,
+    streetCode: addressList.value.selectedOptions[1] ? addressList.value.selectedOptions[1].areaCode : '',
+    streetName: addressList.value.selectedOptions[1] ? addressList.value.selectedOptions[1].areaName : '',
+    communityCode: addressList.value.selectedOptions[2] ? addressList.value.selectedOptions[2].areaCode : '',
+    communityName: addressList.value.selectedOptions[2] ? addressList.value.selectedOptions[2].areaName : '',
+    grid: addressList.value.selectedOptions[3] ? addressList.value.selectedOptions[3].areaCode : '',
+    gridName: addressList.value.selectedOptions[3] ? addressList.value.selectedOptions[3].areaName : '',
+  })
   if (data) {
     uni.showToast({
       title: '上报成功',
@@ -58,6 +77,10 @@ const handleGoDetail = (item: QuestionListRes) => {
   })
 }
 
+const areaShow = ref(false)
+const hanleSelectArea = () => {
+  areaShow.value = true
+}
 </script>
 
 <template>
@@ -78,7 +101,8 @@ const handleGoDetail = (item: QuestionListRes) => {
           </uni-forms-item>
           <!-- 问题所在地 -->
           <uni-forms-item label="问题所在地" required name="addrName">
-            <uni-easyinput v-model="formData.addrName" placeholder="请输入问题所在地"></uni-easyinput>
+            <uni-easyinput v-model="formData.addrName" placeholder="请输入问题所在地" @focus="hanleSelectArea"></uni-easyinput>
+            <GridAddress v-model="areaShow" @finish="handleAddressFinish"></GridAddress>
           </uni-forms-item>
         </uni-forms>
         <van-button class="w-full mb-3" type="primary" @click="submit">提交</van-button>
@@ -87,7 +111,7 @@ const handleGoDetail = (item: QuestionListRes) => {
     <van-tab title="已上报问题">
       <view class="tab-container">
         <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="questList">
-          <view  v-for="item in list" :key="item.uuid"  class="list-item-style">
+          <view v-for="item in list" :key="item.uuid" class="list-item-style">
             <view class="top">
               <view class="title">{{ item.questionTitle }}</view>
               <van-button plain hairline size="mini" type="primary" @click="handleGoDetail(item)">查看详情</van-button>
@@ -115,8 +139,8 @@ const handleGoDetail = (item: QuestionListRes) => {
   padding-bottom: 30px;
   min-height: calc(100vh - var(--van-tabs-card-height));
   box-sizing: border-box;
-   display: flex;
-   flex-direction: column;
+  display: flex;
+  flex-direction: column;
   > uni-view:first-child {
     flex: 1;
   }

src/subPages/pages/reportServer/index.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { addServiceReportData, pageServiceReportData } from '@/api/reportService'
 import { addReportServiceDataReq, ReportServiceRes } from '@/api/reportService/types'
-import { CascaderOption } from 'vant'
 import { ref } from 'vue'
+import GridAddress from '@/components/address/gridAddress/index.vue'
+
 
 const active = ref(0)
 
@@ -19,7 +20,15 @@ const rules = ref({
 const range = ref([])
 
 const submit = async () => {
-  const { data } = await addServiceReportData(formData.value)
+  const { data } = await addServiceReportData({
+    ...formData.value,
+    streetCode: addressList.value.selectedOptions[1] ? addressList.value.selectedOptions[1].areaCode : '',
+    streetName: addressList.value.selectedOptions[1] ? addressList.value.selectedOptions[1].areaName : '',
+    communityCode: addressList.value.selectedOptions[2] ? addressList.value.selectedOptions[2].areaCode : '',
+    communityName: addressList.value.selectedOptions[2] ? addressList.value.selectedOptions[2].areaName : '',
+    grid: addressList.value.selectedOptions[3] ? addressList.value.selectedOptions[3].areaCode : '',
+    gridName: addressList.value.selectedOptions[3] ? addressList.value.selectedOptions[3].areaName : '',
+  })
   if (data) {
     uni.showToast({
       title: '上报成功',
@@ -63,41 +72,14 @@ const handleGoDetail = (item: ReportServiceRes) => {
 }
 
 /** 选择地区 */
+const addressList = ref([])
 const areaShow = ref(false)
-const options = ref<CascaderOption[]>([
-  {
-    text: '广东省',
-    value: '440000',
-    children: [
-      {
-        text: '广州市',
-        value: '440100',
-        children: [
-          {
-            text: '荔湾区',
-            value: '440103',
-          },
-          {
-            text: '越秀区',
-            value: '440104',
-          },
-        ],
-      },
-    ],
-  },
-])
-const cascaderValue = ref('')
-const onChange = (e) => {
-  console.log(e)
-}
-const onFinish = (e) => {
-  areaShow.value = false
-  console.log(e)
+const handleAddressFinish = (value) => {
+  formData.value.area = value.selectedOptions[value.tabIndex].areaName
+  addressList.value = value
 }
 const hanleSelectArea = () => {
-  console.log('121212')
   areaShow.value = true
-  console.log('12')
 }
 </script>
 
@@ -120,16 +102,7 @@ const hanleSelectArea = () => {
           <!-- 问题所在地 -->
           <uni-forms-item label="所在区域" required name="area">
             <uni-easyinput :value="formData.area" placeholder="所在区域" @focus="hanleSelectArea"></uni-easyinput>
-            <van-popup v-model:show="areaShow" round position="bottom">
-              <van-cascader
-                v-model="cascaderValue"
-                title="请选择所在地区"
-                :options="options"
-                @close="areaShow = false"
-                @change="onChange"
-                @finish="onFinish"
-              />
-            </van-popup>
+            <GridAddress v-model="areaShow" @finish="handleAddressFinish"></GridAddress>
           </uni-forms-item>
           <!-- 联系人姓名 -->
           <uni-forms-item label="联系人姓名" required name="contactPerson">

tsconfig.json

@@ -5,17 +5,16 @@
     "module": "esnext",
     "sourceMap": true,
     "baseUrl": "./",
+    "jsx": "preserve",
     "skipLibCheck": true,
     "preserveValueImports": false,
     "isolatedModules": true,
     "paths": {
-      "@/*": [
-        "src/*",
-      ]
+      "@/*": ["src/*"]
     },
     "lib": ["esnext", "dom"],
-    "types": ["@dcloudio/types"],
+    "types": ["@dcloudio/types"]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json"}]
+  "references": [{ "path": "./tsconfig.node.json" }]
 }