diff --git a/src/api/achievement/index.ts b/src/api/achievement/index.ts
new file mode 100644
index 0000000..41a380a
--- /dev/null
+++ b/src/api/achievement/index.ts
@@ -0,0 +1,19 @@
+import { defHttp } from '@/utils/http/axios';
+import { AccountListGetResultModel, AccountListItem, AccountParams } from './model/index';
+
+enum Api {
+  loadTableListData = '/api/InAiShp/Load', //shp列表数据
+  loadTifTableListData = '/api/InsTif/Load', //tif影像列表数据
+}
+
+/**
+ * @description: Get sample options value
+ */
+ 
+export const loadTableListData = (params: AccountParams) =>
+  defHttp.get<AccountListGetResultModel>({ url: Api.loadTableListData, params });
+
+export const loadTifTableListData = (params: AccountParams) =>
+  defHttp.get<AccountListGetResultModel>({ url: Api.loadTifTableListData, params });
+
+ 
\ No newline at end of file
diff --git a/src/api/achievement/model/index.ts b/src/api/achievement/model/index.ts
new file mode 100644
index 0000000..c3638c5
--- /dev/null
+++ b/src/api/achievement/model/index.ts
@@ -0,0 +1,22 @@
+import { BasicFetchResult } from '@/api/model/baseModel';
+
+export interface AccountListItem {
+  databaseLinkId: string;
+  dbName: string;
+  dbAlias: string;
+  dbType: number;
+  serverAddress: string;
+  dbConnection: string;
+  description: string;
+}
+/**
+ * @description: Request list return value
+ */
+export interface AccountParams {
+  id?: string;
+  keyword?: string;
+  page?: string;
+  limit?: string;
+};
+
+export type AccountListGetResultModel = BasicFetchResult<AccountListItem>;
diff --git a/src/views/demo/achievementmanage/index.data.ts b/src/views/demo/achievementmanage/index.data.ts
new file mode 100644
index 0000000..97db9c8
--- /dev/null
+++ b/src/views/demo/achievementmanage/index.data.ts
@@ -0,0 +1,52 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+
+// 图形化建表table
+export const achievementColumns: BasicColumn[] = [
+  {
+    title: 'shp名称',
+    dataIndex: 'shpName',
+  },
+  {
+    title: 'shp路径',
+    dataIndex: 'shpPath',
+  },
+  {
+    title: 'shp包含图斑数量',
+    dataIndex: 'shpCount',
+  },
+  {
+    title: '日期',
+    dataIndex: 'shpDate',
+    ifShow: false,
+  },
+  {
+    title: '地块名称',
+    dataIndex: 'plotName',
+  },
+  {
+    title: '面积（平方米）',
+    dataIndex: 'areaNum',
+  },
+  {
+    title: '地区id',
+    dataIndex: 'areaId',
+    ifShow: false,
+  },
+  {
+    title: '地区',
+    dataIndex: 'areaName',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+  },
+];
+// 图形化建表-搜索
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'Name',
+    label: '名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
diff --git a/src/views/demo/achievementmanage/index.vue b/src/views/demo/achievementmanage/index.vue
new file mode 100644
index 0000000..6005014
--- /dev/null
+++ b/src/views/demo/achievementmanage/index.vue
@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <!-- <a-button type="primary" @click="handleAdd">新增</a-button> -->
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '查看',
+                onClick: () => {
+                  handleView(record);
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <a-modal
+      class="categories-modal"
+      v-model:open="openModal"
+      :title="modalData.title"
+      :afterClose="clearModal"
+    >
+      <UseModal
+        ref="modalForm"
+        :modalData="modalData"
+        @closeModal="closeModal"
+        @submit="submit"
+      />
+    </a-modal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  // 子组件
+  import UseModal from './modal/index.vue';
+  import { Modal, message } from 'ant-design-vue';
+  // ts
+  import { searchFormSchema, achievementColumns } from './index.data';
+  // api
+  import { loadTableListData } from '@/api/achievement/index';
+
+
+  const modalForm = ref();
+  let openModal = ref(false);
+  const modalData = reactive({
+    title: '',
+    data: {},
+    type: '',
+  });
+ 
+  // 表格
+  const searchInfo = reactive<Recordable>({});
+  const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
+    api: loadTableListData,
+    columns: achievementColumns,
+    rowKey: 'id',
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    // 序号列
+    showIndexColumn: true,
+    striped: false,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    actionColumn: {
+      width: 180,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+  const closeModal = () => {
+    openModal.value = false;
+  };
+  const clearModal = () => {
+    modalForm.value.clearModalData();
+  };
+  // 新增-打开窗口
+  function handleAdd() {
+    modalData.title = "新增"
+    openModal.value = true;
+  }
+  // 查看-打开窗口
+  function handleView(record) {
+    modalData.data = record;
+    modalData.title = "详情"
+    openModal.value = true;
+  }
+  // 编辑-打开窗口
+  function handleEdit(record) {
+    modalData.data = record;
+    modalData.title = "编辑";
+    openModal.value = true;
+  }
+
+  // 新增、编辑、删除-提交后刷新
+  function submit() {
+    clearSelectedRowKeys();
+    reload();
+  }
+</script>
+<style lang="scss">
+.categories-modal {
+  .ant-modal-footer > button {
+    display: none;
+  }
+  .ant-modal-footer {
+    margin-top: 0px;
+    border-top: 0px;
+  }
+}
+</style>
diff --git a/src/views/demo/achievementmanage/modal/index.vue b/src/views/demo/achievementmanage/modal/index.vue
new file mode 100644
index 0000000..f6b3a28
--- /dev/null
+++ b/src/views/demo/achievementmanage/modal/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="categories-modal-container">
+    <a-form
+      ref="formRef"
+      :model="props.modalData.data"
+      :rules="rules"
+      labelAlign="right"
+      :label-col="{ span: 6 }"
+    >
+        <a-form-item label="shp名称" name="shpName">
+          <a-input v-model:value="props.modalData.data.shpName" />
+        </a-form-item>
+        <a-form-item label="shp路径" name="shpPath">
+          <a-input v-model:value="props.modalData.data.shpPath"  />
+        </a-form-item>
+        <a-form-item label="shp包含图斑数量" name="shpCount">
+          <a-input v-model:value="props.modalData.data.shpCount" />
+        </a-form-item>
+        <a-form-item label="日期" name="shpDate">
+          <a-input v-model:value="props.modalData.data.shpDate" />
+        </a-form-item>
+        <a-form-item label="地块名称" name="plotName">
+          <a-input v-model:value="props.modalData.data.plotName" />
+        </a-form-item>
+        <a-form-item label="面积（平方米）" name="areaNum">
+          <a-input v-model:value="props.modalData.data.areaNum" />
+        </a-form-item>
+        <a-form-item label="地区" name="areaName">
+          <a-input v-model:value="props.modalData.data.areaName" />
+        </a-form-item>
+        <a-form-item label="创建时间" name="createTime">
+          <a-input v-model:value="props.modalData.data.createTime" />
+        </a-form-item>
+        <a-form-item label="最后一次修改时间" name="updateTime">
+          <a-input v-model:value="props.modalData.data.updateTime" />
+        </a-form-item>
+        <a-form-item label="备注" name="remark">
+          <a-textarea v-model:value="props.modalData.data.remark" :auto-size="{ minRows: 2, maxRows: 5 }" />
+        </a-form-item>
+    </a-form>
+    <div class="modal-footer">
+      <!-- <a-button style="margin-right: 10px" @click="closeModal">取消</a-button>
+      <a-button type="primary" @click="submit">确定</a-button> -->
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { defineProps, defineEmits, ref } from 'vue';
+  const props = defineProps(['modalData']);
+  const emit = defineEmits(['closeModal', 'submit']);
+  const formRef = ref();
+  const rules = {
+    shpName: [{ required: false, message: '不能为空', trigger: 'blur' }],
+    plotName: [{ required: false, message: '不能为空', trigger: 'blur' }],
+  };
+  const submit = () => {
+    formRef.value
+      .validate()
+      .then(() => {
+        emit('submit');
+      })
+      .catch((error) => {
+        console.log('error', error);
+      });
+  };
+  const closeModal = () => {
+    emit('closeModal');
+    formRef.value.resetFields();
+  };
+  const clearModalData = () => {
+    formRef.value.resetFields();
+  };
+  defineExpose({
+    clearModalData,
+  });
+</script>
+<style lang="scss" scoped>
+  .categories-modal-container {
+    padding: 10px 25px;
+    .modal-footer {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 20px;
+    }
+  }
+</style>
diff --git a/src/views/demo/achievementmanage/modal/modal.data.ts b/src/views/demo/achievementmanage/modal/modal.data.ts
new file mode 100644
index 0000000..38ea238
--- /dev/null
+++ b/src/views/demo/achievementmanage/modal/modal.data.ts
@@ -0,0 +1,65 @@
+import { BasicColumn } from '@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: 'shp名称',
+    dataIndex: 'shpName',
+    key: 'shpName',
+  },
+  {
+    title: 'shp路径',
+    dataIndex: 'shpPath',
+    key: 'shpPath',
+  },
+  {
+    title: 'shp包含图斑数量',
+    dataIndex: 'shpCount',
+    key: 'shpCount',
+  },
+  {
+    title: '日期',
+    dataIndex: 'shpDate',
+    key: 'shpDate',
+  },
+  {
+    title: '地块名称',
+    dataIndex: 'plotName',
+    key: 'plotName',
+  },
+  {
+    title: '面积（平方米）',
+    dataIndex: 'areaNum',
+    key: 'areaNum',
+  },
+  {
+    title: '地区id',
+    dataIndex: 'areaId',
+    ifShow: false,
+    key: 'areaId',
+  },
+  {
+    title: '地区',
+    dataIndex: 'areaName',
+    key: 'areaName',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+  },
+  {
+    title: '最后一次修改时间',
+    dataIndex: 'updateTime',
+    key: 'updateTime',
+  }, 
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    key: 'remark',
+  }, 
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action',
+  },
+];
diff --git a/src/views/demo/tifdatamanage/index.data.ts b/src/views/demo/tifdatamanage/index.data.ts
new file mode 100644
index 0000000..80de6fc
--- /dev/null
+++ b/src/views/demo/tifdatamanage/index.data.ts
@@ -0,0 +1,48 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+
+// 图形化建表table
+export const achievementColumns: BasicColumn[] = [
+  {
+    title: '影像名称',
+    dataIndex: 'tifName',
+  },
+  {
+    title: '影像路径',
+    dataIndex: 'tifPath',
+  },
+  {
+    title: '日期',
+    dataIndex: 'tifDate',
+    ifShow: false,
+  },
+  {
+    title: '地块名称',
+    dataIndex: 'plotName',
+  },
+  {
+    title: '面积（平方米）',
+    dataIndex: 'areaNum',
+  },
+  {
+    title: '地区id',
+    dataIndex: 'areaId',
+    ifShow: false,
+  },
+  {
+    title: '地区',
+    dataIndex: 'areaName',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+  },
+];
+// 图形化建表-搜索
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    label: '关键字',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
diff --git a/src/views/demo/tifdatamanage/index.vue b/src/views/demo/tifdatamanage/index.vue
new file mode 100644
index 0000000..5f7223e
--- /dev/null
+++ b/src/views/demo/tifdatamanage/index.vue
@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <!-- <a-button type="primary" @click="handleAdd">新增</a-button> -->
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '查看',
+                onClick: () => {
+                  handleView(record);
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <a-modal
+      class="categories-modal"
+      v-model:open="openModal"
+      :title="modalData.title"
+      :afterClose="clearModal"
+    >
+      <UseModal
+        ref="modalForm"
+        :modalData="modalData"
+        @closeModal="closeModal"
+        @submit="submit"
+      />
+    </a-modal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  // 子组件
+  import UseModal from './modal/index.vue';
+  import { Modal, message } from 'ant-design-vue';
+  // ts
+  import { searchFormSchema, achievementColumns } from './index.data';
+  // api
+  import { loadTifTableListData } from '@/api/achievement/index';
+
+
+  const modalForm = ref();
+  let openModal = ref(false);
+  const modalData = reactive({
+    title: '',
+    data: {},
+    type: '',
+  });
+ 
+  // 表格
+  const searchInfo = reactive<Recordable>({});
+  const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
+    api: loadTifTableListData,
+    columns: achievementColumns,
+    rowKey: 'id',
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    // 序号列
+    showIndexColumn: true,
+    striped: false,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    actionColumn: {
+      width: 180,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+  const closeModal = () => {
+    openModal.value = false;
+  };
+  const clearModal = () => {
+    modalForm.value.clearModalData();
+  };
+  // 新增-打开窗口
+  function handleAdd() {
+    modalData.title = "新增"
+    openModal.value = true;
+  }
+  // 查看-打开窗口
+  function handleView(record) {
+    modalData.data = record;
+    modalData.title = "详情"
+    openModal.value = true;
+  }
+  // 编辑-打开窗口
+  function handleEdit(record) {
+    modalData.data = record;
+    modalData.title = "编辑";
+    openModal.value = true;
+  }
+
+  // 新增、编辑、删除-提交后刷新
+  function submit() {
+    clearSelectedRowKeys();
+    reload();
+  }
+</script>
+<style lang="scss">
+.categories-modal {
+  .ant-modal-footer > button {
+    display: none;
+  }
+  .ant-modal-footer {
+    margin-top: 0px;
+    border-top: 0px;
+  }
+}
+</style>
diff --git a/src/views/demo/tifdatamanage/modal/index.vue b/src/views/demo/tifdatamanage/modal/index.vue
new file mode 100644
index 0000000..f3e91c6
--- /dev/null
+++ b/src/views/demo/tifdatamanage/modal/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="categories-modal-container">
+    <a-form
+      ref="formRef"
+      :model="props.modalData.data"
+      :rules="rules"
+      labelAlign="right"
+      :label-col="{ span: 6 }"
+    >
+        <a-form-item label="影像名称" name="tifName">
+          <a-input v-model:value="props.modalData.data.tifName" />
+        </a-form-item>
+        <a-form-item label="影像路径" name="tifPath">
+          <a-input v-model:value="props.modalData.data.tifPath"  />
+        </a-form-item>
+        <a-form-item label="日期" name="tifDate">
+          <a-input v-model:value="props.modalData.data.tifDate" />
+        </a-form-item>
+        <a-form-item label="地块名称" name="plotName">
+          <a-input v-model:value="props.modalData.data.plotName" />
+        </a-form-item>
+        <a-form-item label="面积（平方米）" name="areaNum">
+          <a-input v-model:value="props.modalData.data.areaNum" />
+        </a-form-item>
+        <a-form-item label="地区" name="areaName">
+          <a-input v-model:value="props.modalData.data.areaName" />
+        </a-form-item>
+        <a-form-item label="创建时间" name="createTime">
+          <a-input v-model:value="props.modalData.data.createTime" />
+        </a-form-item>
+        <a-form-item label="最后一次修改时间" name="updateTime">
+          <a-input v-model:value="props.modalData.data.updateTime" />
+        </a-form-item>
+        <a-form-item label="备注" name="remark">
+          <a-textarea v-model:value="props.modalData.data.remark" :auto-size="{ minRows: 2, maxRows: 5 }" />
+        </a-form-item>
+    </a-form>
+    <div class="modal-footer">
+      <!-- <a-button style="margin-right: 10px" @click="closeModal">取消</a-button>
+      <a-button type="primary" @click="submit">确定</a-button> -->
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { defineProps, defineEmits, ref } from 'vue';
+  const props = defineProps(['modalData']);
+  const emit = defineEmits(['closeModal', 'submit']);
+  const formRef = ref();
+  const rules = {
+    shpName: [{ required: false, message: '不能为空', trigger: 'blur' }],
+    plotName: [{ required: false, message: '不能为空', trigger: 'blur' }],
+  };
+  const submit = () => {
+    formRef.value
+      .validate()
+      .then(() => {
+        emit('submit');
+      })
+      .catch((error) => {
+        console.log('error', error);
+      });
+  };
+  const closeModal = () => {
+    emit('closeModal');
+    formRef.value.resetFields();
+  };
+  const clearModalData = () => {
+    formRef.value.resetFields();
+  };
+  defineExpose({
+    clearModalData,
+  });
+</script>
+<style lang="scss" scoped>
+  .categories-modal-container {
+    padding: 10px 25px;
+    .modal-footer {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 20px;
+    }
+  }
+</style>
diff --git a/src/views/demo/tifdatamanage/modal/modal.data.ts b/src/views/demo/tifdatamanage/modal/modal.data.ts
new file mode 100644
index 0000000..8940f2c
--- /dev/null
+++ b/src/views/demo/tifdatamanage/modal/modal.data.ts
@@ -0,0 +1,60 @@
+import { BasicColumn } from '@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '影像名称',
+    dataIndex: 'tifName',
+    key: 'tifName',
+  },
+  {
+    title: '影像路径',
+    dataIndex: 'tifPath',
+    key: 'tifPath',
+  },
+  {
+    title: '日期',
+    dataIndex: 'tifDate',
+    key: 'tifDate',
+  },
+  {
+    title: '地块名称',
+    dataIndex: 'plotName',
+    key: 'plotName',
+  },
+  {
+    title: '面积（平方米）',
+    dataIndex: 'areaNum',
+    key: 'areaNum',
+  },
+  {
+    title: '地区id',
+    dataIndex: 'areaId',
+    ifShow: false,
+    key: 'areaId',
+  },
+  {
+    title: '地区',
+    dataIndex: 'areaName',
+    key: 'areaName',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+  },
+  {
+    title: '最后一次修改时间',
+    dataIndex: 'updateTime',
+    key: 'updateTime',
+  }, 
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    key: 'remark',
+  }, 
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action',
+  },
+];