add 后台添加土地下拉框方式选择地区

admin/src/api/common.ts

@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+// 省列表
+export function apiProvinceList(params: any) {
+    return request.get({ url: '/common/province', params })
+}
+// 市列表
+export function apiCityList(params: any) {
+    return request.get({ url: '/common/city', params })
+}
+// 区列表
+export function apiAreaList(params: any) {
+    return request.get({ url: '/common/area', params })
+}
+// 镇列表
+export function apiStreetList(params: any) {
+    return request.get({ url: '/common/street', params })
+}
+// 村列表
+export function apiVillageList(params: any) {
+    return request.get({ url: '/common/village', params })
+}
+
+// 队列表
+export function apiBrigadeList() {
+    return request.get({ url: '/common/brigade' })
+}
+

admin/src/views/land/edit.vue

@@ -38,41 +38,125 @@
                 <!-- <el-form-item label="剩余面积" prop="residual_area">
     <el-input v-model="formData.residual_area" clearable disabled placeholder="请输入剩余面积" />
 </el-form-item> -->
-                <el-form-item label="省编码" prop="province_code">
+
-    <el-input v-model="formData.province_code" clearable placeholder="请输入省编码" />
+  <el-form-item
+      label="省"
+      :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]"
+      prop="province_code"
+  >
+    <el-select
+        v-model="formData.province_code"
+        placeholder="请选择省"
+        clearable
+        @change="province_change"
+        :style="{ width: '100%' }"
+    >
+      <el-option
+          v-for="(item, index) in datas.provinceOptions"
+          :key="index"
+          :label="item.province_name"
+          :value="item.province_code"
+      ></el-option>
+    </el-select>
   </el-form-item>
-                <el-form-item label="省名称" prop="province_name">
+  <el-form-item
-    <el-input v-model="formData.province_name" clearable placeholder="请输入省名称" />
+      label="市"
+      :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]"
+      prop="city_code"
+  >
+    <el-select
+        v-model="formData.city_code"
+        placeholder="请选择市"
+        clearable
+        @change="city_change"
+        :style="{ width: '100%' }"
+    >
+      <el-option
+          v-for="(item, index) in datas.cityOptions"
+          :key="index"
+          :label="item.city_name"
+          :value="item.city_code"
+      ></el-option>
+    </el-select>
   </el-form-item>
-                <el-form-item label="市编码" prop="city_code">
+  <el-form-item
-    <el-input v-model="formData.city_code" clearable placeholder="请输入市编码" />
+      label="区"
+      :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]"
+      prop="county_code"
+  >
+    <el-select
+        v-model="formData.county_code"
+        placeholder="请选择区"
+        clearable
+        @change="area_change"
+        :style="{ width: '100%' }"
+    >
+      <el-option
+          v-for="(item, index) in datas.areaOptions"
+          :key="index"
+          :label="item.county_name"
+          :value="item.county_code"
+      ></el-option>
+    </el-select>
   </el-form-item>
-                <el-form-item label="市名称" prop="city_name">
+  <el-form-item
-    <el-input v-model="formData.city_name" clearable placeholder="请输入市名称" />
+      label="镇"
+      :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]"
+      prop="town_code"
+  >
+    <el-select
+        v-model="formData.town_code"
+        placeholder="请选择镇"
+        clearable
+        @change="street_change"
+        :style="{ width: '100%' }"
+    >
+      <el-option
+          v-for="(item, index) in datas.streetOptions"
+          :key="index"
+          :label="item.town_name"
+          :value="item.town_code"
+      ></el-option>
+    </el-select>
   </el-form-item>
-                <el-form-item label="县编码" prop="county_code">
+  <el-form-item
-    <el-input v-model="formData.county_code" clearable placeholder="请输入县编码" />
+      label="村"
+      :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]"
+      prop="village_code"
+  >
+    <el-select
+        v-model="formData.village_code"
+        placeholder="请选择村"
+        clearable
+        @change="village_change"
+        :style="{ width: '100%' }"
+    >
+      <el-option
+          v-for="(item, index) in datas.villageOptions"
+          :key="index"
+          :label="item.village_name"
+          :value="item.village_code"
+      ></el-option>
+    </el-select>
   </el-form-item>
-                <el-form-item label="县名称" prop="county_name">
+  <el-form-item
-    <el-input v-model="formData.county_name" clearable placeholder="请输入县名称" />
+      label="队"
-</el-form-item>
+      :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]"
-                <el-form-item label="镇编码" prop="town_code">
+      prop="group_code"
-    <el-input v-model="formData.town_code" clearable placeholder="请输入镇编码" />
+  >
-</el-form-item>
+    <el-select
-                <el-form-item label="镇名称" prop="town_name">
+        v-model="formData.group_code"
-    <el-input v-model="formData.town_name" clearable placeholder="请输入镇名称" />
+        placeholder="请选择队"
-</el-form-item>
+        clearable
-                <el-form-item label="村编码" prop="village_code">
+        :style="{ width: '100%' }"
-    <el-input v-model="formData.village_code" clearable placeholder="请输入村编码" />
+    >
-</el-form-item>
+      <el-option
-                <el-form-item label="村名称" prop="village_name">
+          v-for="(item, index) in datas.brigadeOptions"
-    <el-input v-model="formData.village_name" clearable placeholder="请输入村名称" />
+          :key="index"
-</el-form-item>
+          :label="item.group_name"
-                <el-form-item label="组编码" prop="group_code">
+          :value="item.id"
-    <el-input v-model="formData.group_code" clearable placeholder="请输入组编码" />
+      ></el-option>
-</el-form-item>
+    </el-select>
-                <el-form-item label="组名称" prop="group_name">
-    <el-input v-model="formData.group_name" clearable placeholder="请输入组名称" />
   </el-form-item>
                 <el-form-item label="土地负责人" prop="master_name">
     <el-input v-model="formData.master_name" clearable placeholder="请输入土地负责人" />
@@ -93,7 +177,14 @@ import { useDictOptions } from '@/hooks/useDictOptions'
 import type { FormInstance } from 'element-plus'
 import Popup from '@/components/popup/index.vue'
 import { apiLandAdd, apiLandEdit, apiLandDetail, getUserList, getUserInfo } from '@/api/land'
-import { timeFormat } from '@/utils/util'
+import {
+  apiCityList,
+  apiAreaList,
+  apiStreetList,
+  apiProvinceList,
+  apiVillageList,
+  apiBrigadeList,
+} from "@/api/common";
 import type { PropType } from 'vue'
 defineProps({
     dictData: {
@@ -108,9 +199,15 @@ const mode = ref('add')
 
 // 弹窗标题
 const popupTitle = computed(() => {
+  if (mode.value == 'edit') {
+    getCityList();
+    getAreaList();
+    getStreetList();
+    getVillageList();
+    getBrigadeList();
+  }
     return mode.value == 'edit' ? '编辑土地' : '新增土地'
 })
-
 // 表单数据
 const formData = reactive({
     id: '',
@@ -232,6 +329,87 @@ const handleClose = () => {
     emit('close')
 }
 
+const datas = reactive({
+  provinceOptions: [],
+  cityOptions: [],
+  areaOptions: [],
+  streetOptions: [],
+  villageOptions: [],
+  brigadeOptions: [],
+});
+function province_change(value: string) {
+  getCityList();
+  // 给省名称赋值
+  datas['provinceOptions'].forEach((item: any) =>{
+    if(item.province_code == value) {
+      formData.province_name = item.province_name
+    }
+  })
+}
+function city_change(value: string) {
+  getAreaList();
+}
+function area_change(value: string) {
+  getStreetList();
+}
+function street_change(value: string) {
+  getVillageList();
+}
+function village_change(value: string) {
+  getBrigadeList();
+}
+// function brigade_change(value: string) {
+//     formData.brigade = value
+// }
+const getProvinceList = async () => {
+  const data = await apiProvinceList({});
+  datas["provinceOptions"] = data;
+};
+const getCityList = async () => {
+  const data = await apiCityList({ city: formData.province_code });
+  datas["cityOptions"] = data;
+};
+const getAreaList = async () => {
+  const data = await apiAreaList({ area: formData.city_code });
+  datas["areaOptions"] = data;
+  // 市名称
+  datas['cityOptions'].forEach((item: any) =>{
+    if(item.city_code == formData.city_code) {
+      formData.city_name = item.city_name
+    }
+  })
+};
+const getStreetList = async () => {
+  const data = await apiStreetList({ street: formData.county_code });
+  datas["streetOptions"] = data;
+  // 区名称
+  datas['areaOptions'].forEach((item: any) =>{
+    if(item.county_code == formData.county_code) {
+      formData.county_name = item.county_name
+    }
+  })
+};
+const getVillageList = async () => {
+  const data = await apiVillageList({ village: formData.town_code });
+  datas["villageOptions"] = data;
+// 镇名称
+  datas['streetOptions'].forEach((item: any) =>{
+    if(item.town_code == formData.town_code) {
+      formData.town_name = item.town_name
+    }
+  })
+};
+const getBrigadeList = async () => {
+  const data = await apiBrigadeList();
+  datas["brigadeOptions"] = data;
+  // 镇名称
+  datas['villageOptions'].forEach((item: any) =>{
+    if(item.village_code == formData.village_code) {
+      formData.village_name = item.village_name
+    }
+  })
+};
+getProvinceList(); // 初始化即请求省份数据
 
 defineExpose({
     open,

app/adminapi/controller/CommonController.php

@@ -22,25 +22,25 @@ class CommonController extends BaseAdminController
     //**区域列表 */
     public function area($area)
     {
-        $data = Db::name('geo_area')->where(['city_code' => $area])->select();
+        $data = Db::name('geo_county')->where(['city_code' => $area])->select();
         return $this->data($data->toArray());
     }
     //**街道列表 */
     public function street($street)
     {
-        $data = Db::name('geo_street')->where(['area_code' => $street])->select();
+        $data = Db::name('geo_town')->where(['county_code' => $street])->select();
         return $this->data($data->toArray());
     }
         //**村列表 */
     public function village($village)
     {
-        $data = Db::name('geo_village')->where(['street_code' => $village])->select();
+        $data = Db::name('geo_village')->where(['town_code' => $village])->select();
         return $this->data($data->toArray());
     }
     //**小队列表 */
     public function brigade()
     {
-        $data = Db::name('geo_brigade')->select();
+        $data = Db::name('geo_group')->select();
         return $this->data($data->toArray());
     }
 }