新建三防责任人行政区划功能

src/api/setting/PreventionResponsible/tree.ts

@@ -0,0 +1,12 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { UserInfo } from '@/api/system/user/types';
+import { data } from 'autoprefixer';
+
+export function getZoning(id): AxiosPromise<UserInfo> {
+  return request({
+    url: '/api/system/area/tree2/' + id,
+    method: 'get',
+    params: data
+  });
+}

src/types/components.d.ts

@@ -47,10 +47,12 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElStep: typeof import('element-plus/es')['ElStep']
     ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']

src/views/setting/PreventionResponsible/add.vue

@@ -20,10 +20,34 @@
           <el-form-item label="职务：" prop="position">
             <el-input v-model="form.position" placeholder="例如：县长/办公室主任/办事员等" />
           </el-form-item>
-          <el-form-item label="行政区划" prop="area_code">
-            <template>
-              <el-cascader :props="props" />
-            </template>
+          <el-form-item label="行政区划：" prop="area_code">
+            <el-select v-model="data1" placeholder="请选择" style="width: 200px;margin-right: 5px" @change="getOptions2()" clearable>
+              <el-option
+                v-for="item in options1"
+                :key="item.id"
+                :label="item.label"
+                :value="item.id"
+              />
+            </el-select>
+            <el-select v-model="data2" placeholder="请选择" style="width: 200px; margin-right: 5px" @change="getOptions3()" clearable>
+              <el-option
+                v-for="item in options2"
+                :key="item.id"
+                :label="item.label"
+                :value="item.id"
+              />
+            </el-select>
+            <el-select v-model="data3" placeholder="请选择" style="width: 200px; margin-right: 5px" @change="getAreaContent()" clearable>
+              <el-option
+                v-for="item in options3"
+                :key="item.id"
+                :label="item.label"
+                :value="item.id"
+              />
+            </el-select>
+<!--            <template>-->
+<!--              <el-cascader :props="props" />-->
+<!--            </template>-->
           </el-form-item>
           <el-form-item label="排位顺序：" prop="order_num">
             <el-input v-model="form.order_num" placeholder="例如：请输入排位序号1-999" />
@@ -67,13 +91,16 @@ import {
 } from '@/api/comprehensiveGuarantee/materialReserveManagement/godownManagement';
 
 import { crateData, updateData } from '@/api/PreventionResponsible';
+import { getZoning } from '@/api/setting/PreventionResponsible/tree';
 const category = ['党委政府', '三防指挥部', '应急部门', '成员单位', '重点部门', '行政村', '水利工程', '受威胁转移', '抢险队伍', '地质灾害', '其他']
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const props = defineProps({
   id: String
 });
 const buttonLoading = ref(false);
-
+const data1 = ref();
+const data2 = ref();
+const data3 = ref();
 // 表单数据
 const data = reactive({
   form: {
@@ -98,6 +125,9 @@ const emits = defineEmits(['close']);
 const closeDialog = () => {
   emits('close');
 };
+const options1 = ref("");
+const options2 = ref("");
+const options3 = ref("");
 const submitForm = async (formEl) => {
   if (!formEl) return;
   await formEl.validate((valid, fields) => {
@@ -129,11 +159,61 @@ const submitForm = async (formEl) => {
     }
   });
 };
+const getOptions1 = (id) => {
+  getZoning(id).then(res => {
+    options1.value = res.data;
+  })
+}
+const getOptions2 = () => {
+  if (!data1.value) {
+    data2.value = "";
+    data3.value = "";
+    form.value.area_code = undefined;
+    options2.value = undefined;
+    return;
+  }else{
+    getZoning(data1.value).then(res => {
+      options2.value = res.data;
+    })
+    form.value.area_code = data1.value;
+  }
+}
+const getOptions3 = () => {
+  if (!data2.value) {
+    data3.value = "";
+    form.value.area_code = data1.value;
+    options3.value = undefined;
+    return;
+  }else{
+    getZoning(data2.value).then(res => {
+      options3.value = res.data;
+    })
+    form.value.area_code = data2.value;
+  }
+}
+const getAreaContent = () => {
+  if (!data3.value) {
+    form.value.area_code = data2.value;
+    return
+  }else {
+    form.value.area_code = data3.value;
+  }
+}
+watch(data1,(newdata2, olddata2) => {
+  data2.value = "";
+  data3.value = "";
+  options2.value = undefined;
+})
+watch(data2, (newdata2, olddata2) => {
+  data3.value = "";
+  options3.value = undefined;
+})
 
 onMounted(() => {
   getMaterialWarehouseInfo(props.id).then((res) => {
     form.value = res.data;
   });
+  getOptions1(2);
 });
 </script>