diff --git a/src/api/xunjian.js b/src/api/xunjian.js
index 8f733ca4bd75a3d1a611a92d62fb29c1433c3075..5bd1e19d3aceb42c3939b93b581b261aa42919ea 100644
--- a/src/api/xunjian.js
+++ b/src/api/xunjian.js
@@ -1,4 +1,4 @@
-import { getReq, postReq } from '@/utils/requestUtil';
+import { getReq, postReq, putReq } from '@/utils/requestUtil';
 
 export function getXunJianDownloadUrlApi(idList) {
     return getReq('/ranger/inspection/api/v1/jobs/export', { jobIdList: idList.join(',') });
@@ -7,3 +7,15 @@ export function getXunJianDownloadUrlApi(idList) {
 export function addXunJianTaskApi(data) {
     return postReq('/ranger/inspection/api/v1/jobs/temporary', data);
 }
+
+export function getRegionInfoApi(id) {
+    return getReq(`/ranger/inspection/api/v1/region/${id}`);
+}
+
+export function addRegionApi(data) {
+    return postReq('/ranger/inspection/api/v1/region', data);
+}
+
+export function editRegionApi(data) {
+    return putReq(`ranger/inspection/api/v1/region`, data);
+}
diff --git a/src/components/table/more_item.vue b/src/components/table/more_item.vue
index fdcb9841fa8e33070b510723fd7da544db0f8382..3e7c0fdeb6f8c9585f36bf7c9cd2127d60870757 100644
--- a/src/components/table/more_item.vue
+++ b/src/components/table/more_item.vue
@@ -14,9 +14,10 @@ export default {
 </script>
 
 <style module lang="less">
-.container:last-child {
-    min-width: 250px;
+.container {
+    max-width: 400px;
 }
+
 .label {
     color: rgba(0, 0, 0, 0.85);
     width: 6em;
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index f74b18fe9217511a57cdc926f7fd93f68887049b..10b222b030bee797269d55c0fbb8873dfdc832bf 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -163,7 +163,6 @@ export default {
     methods: {
         async getData() {
             this.loading = true;
-            console.log(this.queryForm);
             try {
                 this.noPage ? await this.getDataNoPage() : await this.getDataWithPage();
             } catch (error) {
@@ -215,7 +214,6 @@ export default {
         addBtnClick() {
             const { click } = typeof this.addBtn === 'object' ? this.addBtn : {};
             click && click();
-            this.type = 'add';
             this.visible = true;
         },
     },
diff --git a/src/pages/xunjian/basic/region/add_edit.vue b/src/pages/xunjian/basic/region/add_edit.vue
new file mode 100644
index 0000000000000000000000000000000000000000..052a3243086a3905e5e890a456255f914796f208
--- /dev/null
+++ b/src/pages/xunjian/basic/region/add_edit.vue
@@ -0,0 +1,68 @@
+<template>
+    <Wraper :hidden="hidden" :onOk="submit" :refresh="refresh" :noFooter="isView">
+        <a-form-model layout="vertical" :model="form" :rules="rules" ref="form">
+            <a-form-model-item label="地区名称" prop="regionName">
+                <a-input v-model="form.regionName" :disabled="isView" />
+            </a-form-model-item>
+
+            <a-form-model-item label="所属组织" prop="organizationId">
+                <UrlSelect
+                    url="/api/v1/users/organizations"
+                    labelFiled="orgName"
+                    valueFiled="orgId"
+                    v-model="form.organizationId"
+                    :disabled="isView"
+                />
+            </a-form-model-item>
+
+            <a-form-model-item label="备注" prop="remark">
+                <a-textarea placeholder="Basic usage" :rows="4" v-model="form.remark" :disabled="isView" />
+            </a-form-model-item>
+        </a-form-model>
+    </Wraper>
+</template>
+
+<script>
+import Wraper from '@/components/table/wraper.vue';
+import UrlSelect from '@/components/MySelect/url_select.vue';
+import { addRegionApi, editRegionApi, getRegionInfoApi } from '@/api';
+
+export default {
+    components: { Wraper, UrlSelect },
+    props: { hidden: Function, row: Object, type: String, refresh: Function },
+    data: () => ({
+        form: {},
+        rules: {
+            regionName: [{ required: true }],
+            organizationId: [{ required: true }],
+        },
+    }),
+
+    computed: {
+        isView() {
+            return this.type === 'view';
+        },
+        isEdit() {
+            return this.type === 'edit';
+        },
+        isAdd() {
+            return this.type === null;
+        },
+    },
+
+    async mounted() {
+        if (!this.isAdd) {
+            this.form = await getRegionInfoApi(this.row.regionId);
+        }
+    },
+
+    methods: {
+        async submit() {
+            await this.$refs.form.validate();
+            console.log(this.isAdd);
+            if (this.isAdd) return addRegionApi(this.form);
+            if (this.isEdit) return editRegionApi(this.form);
+        },
+    },
+};
+</script>
diff --git a/src/pages/xunjian/basic/region/index.vue b/src/pages/xunjian/basic/region/index.vue
index 5d388a210d4a289e69121892aec72e81d29b478f..05e7787a9d2c4ece94ab627c960d7981e48fbf69 100644
--- a/src/pages/xunjian/basic/region/index.vue
+++ b/src/pages/xunjian/basic/region/index.vue
@@ -1,3 +1,68 @@
 <template>
-    <h1>template</h1>
+    <Table
+        url="/ranger/inspection/api/v1/region/page"
+        rowKey="regionId"
+        addBtn
+        :buttons="buttons"
+        ref="table"
+    >
+        <template #search="{ query }">
+            <MoreItem label="所属组织">
+                <UrlSelect
+                    v-model="query.organizationId"
+                    url="/api/v1/users/organizations"
+                    labelFiled="orgName"
+                    valueFiled="orgId"
+                />
+            </MoreItem>
+            <MoreItem label="地区名称">
+                <a-input v-model="query.regionName" />
+            </MoreItem>
+        </template>
+
+        <template #drawer="drawer">
+            <AddAndEdit v-bind="drawer" />
+        </template>
+
+        <a-table-column title="地区名称" data-index="regionName" />
+        <a-table-column title="所属组织" data-index="organizationName" />
+        <a-table-column title="备注" data-index="remark" />
+        <a-table-column title="修改人" data-index="editorName" />
+        <a-table-column title="修改时间" data-index="editTime" />
+    </Table>
 </template>
+
+<script>
+import Table from '@/components/table/table.vue';
+import UrlSelect from '@/components/MySelect/url_select.vue';
+import MoreItem from '@/components/table/more_item.vue';
+import AddAndEdit from './add_edit.vue';
+
+export default {
+    components: { Table, UrlSelect, MoreItem, AddAndEdit },
+    data() {
+        return {
+            buttons: [
+                { label: '编辑', click: this.edit },
+                { label: '详情', click: this.view },
+                {
+                    type: 'confirm',
+                    url: (row) => `/ranger/inspection/api/v1/region/${row.regionId}`,
+                    after: this.refresh,
+                },
+            ],
+        };
+    },
+    methods: {
+        refresh() {
+            this.$refs.table.getData();
+        },
+        edit(row) {
+            this.$refs.table.show({ row, title: '编辑', type: 'edit' });
+        },
+        view(row) {
+            this.$refs.table.show({ row, title: '编辑', type: 'view' });
+        },
+    },
+};
+</script>