diff --git a/src/api/setting.ts b/src/api/setting.ts
index bf25901..b36d885 100644
--- a/src/api/setting.ts
+++ b/src/api/setting.ts
@@ -543,3 +543,8 @@ export function getContractTags(
 ): Promise<SettingProjectProvinceRes> {
   return axios.get(`dictionary/getContractTags?id=${id}`);
 }
+// 系统配置-流程设置-流程设置列表
+// 类型：1审批流，2工作流
+export function getWorkflowsList(type: number): Promise<any> {
+  return axios.get(`workflows/getList?type=${type}`);
+}
diff --git a/src/views/setting/system/process-settings/index.vue b/src/views/setting/system/process-settings/index.vue
index c8cb69c..91f238d 100644
--- a/src/views/setting/system/process-settings/index.vue
+++ b/src/views/setting/system/process-settings/index.vue
@@ -1,3 +1,66 @@
 <template>
-  <div> Data Dictionary </div>
+  <div class="system-setting-general">
+    <Breadcrumb :items="['menu.setting', 'menu.setting.system', '流程设置']" />
+    <a-card class="full_height" title="流程设置">
+      <div class="flex">
+        <a-tabs
+          class="w-[250px] h-full border-[1px] border-solid border-[#e5e6eb] rounded-[6px] pb-[300px]"
+        >
+          <a-tab-pane
+            v-for="item in processList"
+            :key="item.type"
+            class="tab_item h-[36px]"
+            @click="chooseSettingTab(item.type)"
+          >
+            <template #title>
+              <icon-branch />
+              {{ item.text }}
+            </template>
+            <div class="px-[20px]">
+              <ul>
+                <li> <icon-plus /> 新增审批流程 </li>
+                <li v-for="item in workflowsList[currentType]" :key="item.id">{{
+                  item.name
+                }}</li>
+              </ul>
+            </div>
+          </a-tab-pane>
+        </a-tabs>
+        <div
+          class="flex-1 ml-[20px] border-[1px] border-solid border-[#e5e6eb] rounded-[6px]"
+        >
+          asdasdsa
+        </div>
+      </div>
+    </a-card>
+  </div>
 </template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { getWorkflowsList } from '@/api/setting';
+  // import { useI18n } from 'vue-i18n';
+  const processList = [
+    { type: 1, text: '审批流程', icon: '' },
+    { type: 2, text: '工作流程', icon: '' },
+  ];
+  const currentType = ref<number>(1);
+
+  const workflowsList = ref<any>({ 1: [], 2: [] });
+  async function getWorkflowsListData() {
+    const { code, data } = await getWorkflowsList(currentType.value);
+    if (code === 200) {
+      workflowsList.value[currentType.value] = data?.workflowsSetting;
+    }
+  }
+
+  const chooseSettingTab = (type: number) => {
+    if (type === currentType.value) return;
+    currentType.value = type;
+    getWorkflowsListData();
+  };
+  onMounted(() => {
+    getWorkflowsListData();
+  });
+</script>
+<style lang="less" scoped></style>