diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 6a23334..8c035ca 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -20,7 +20,7 @@
   sort: '',
   order: '',
 })
-const columns = [
+const columns = ref([
   {
     text: '日志名称',
     value: 'logName',
@@ -38,7 +38,7 @@
     text: '详细信息',
     value: 'message',
   },
-]
+])
 const list = ref([])
 const total = ref(20)
 const logTypeList = ref(null)
@@ -171,8 +171,8 @@
         <template #columns>
           <el-table-column label="操作" width="70" align="center">
             <template #default="scope">
-              <el-button type="text" size="small" @click="detail(scope.row)">
-                详情ㅤㅤ
+              <el-button link type="primary" size="small" @click="detail(scope.row)">
+                ㅤ详情ㅤㅤ
               </el-button>
             </template>
           </el-table-column>

diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 6a23334..8c035ca 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -20,7 +20,7 @@
   sort: '',
   order: '',
 })
-const columns = [
+const columns = ref([
   {
     text: '日志名称',
     value: 'logName',
@@ -38,7 +38,7 @@
     text: '详细信息',
     value: 'message',
   },
-]
+])
 const list = ref([])
 const total = ref(20)
 const logTypeList = ref(null)
@@ -171,8 +171,8 @@
         <template #columns>
           <el-table-column label="操作" width="70" align="center">
             <template #default="scope">
-              <el-button type="text" size="small" @click="detail(scope.row)">
-                详情ㅤㅤ
+              <el-button link type="primary" size="small" @click="detail(scope.row)">
+                ㅤ详情ㅤㅤ
               </el-button>
             </template>
           </el-table-column>
diff --git a/src/views/system/process/process.ts b/src/views/system/process/process.ts
new file mode 100644
index 0000000..554c264
--- /dev/null
+++ b/src/views/system/process/process.ts
@@ -0,0 +1,11 @@
+export interface IlistQuery {
+  number: string // 编号
+  name: string // 名称
+  business: string // 关联业务
+  person: string // 负责人
+  time: string // 创建时间
+  status: string // 当前流程状态
+  describe?: string // 流程描述
+  offset: number
+  limit: number
+}

diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 6a23334..8c035ca 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -20,7 +20,7 @@
   sort: '',
   order: '',
 })
-const columns = [
+const columns = ref([
   {
     text: '日志名称',
     value: 'logName',
@@ -38,7 +38,7 @@
     text: '详细信息',
     value: 'message',
   },
-]
+])
 const list = ref([])
 const total = ref(20)
 const logTypeList = ref(null)
@@ -171,8 +171,8 @@
         <template #columns>
           <el-table-column label="操作" width="70" align="center">
             <template #default="scope">
-              <el-button type="text" size="small" @click="detail(scope.row)">
-                详情ㅤㅤ
+              <el-button link type="primary" size="small" @click="detail(scope.row)">
+                ㅤ详情ㅤㅤ
               </el-button>
             </template>
           </el-table-column>
diff --git a/src/views/system/process/process.ts b/src/views/system/process/process.ts
new file mode 100644
index 0000000..554c264
--- /dev/null
+++ b/src/views/system/process/process.ts
@@ -0,0 +1,11 @@
+export interface IlistQuery {
+  number: string // 编号
+  name: string // 名称
+  business: string // 关联业务
+  person: string // 负责人
+  time: string // 创建时间
+  status: string // 当前流程状态
+  describe?: string // 流程描述
+  offset: number
+  limit: number
+}
diff --git a/src/views/system/process/process.vue b/src/views/system/process/process.vue
index 2d5ca89..84319b8 100644
--- a/src/views/system/process/process.vue
+++ b/src/views/system/process/process.vue
@@ -1,5 +1,206 @@
+<script lang="ts" setup name="Process">
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Delete } from '@element-plus/icons-vue'
+import type { IlistQuery } from './process'
+import { delLoginLog, getLoginLogList } from '@/api/system/log'
+
+const { proxy } = getCurrentInstance() as any
+const listQuery: IlistQuery = reactive({
+  number: '', // 编号
+  name: '', // 名称
+  business: '', // 关联业务
+  person: '', // 负责人
+  time: '', // 创建时间
+  status: '', // 当前流程状态,
+  offset: 1,
+  limit: 20,
+})
+const columns = ref([
+  {
+    text: '流程编号',
+    value: 'number',
+    // width: 150,
+  },
+  {
+    text: '流程名称',
+    value: 'name',
+  },
+  {
+    text: '关联业务',
+    value: 'business',
+  },
+  {
+    text: '当前流程状态',
+    value: 'status',
+  },
+  {
+    text: '流程负责人',
+    value: 'person',
+  },
+  {
+    text: '流程描述',
+    value: 'describe',
+  },
+])
+const list = ref([
+  {
+    number: '11111',
+    name: '流程1',
+    business: '关联1',
+    person: '负责人1',
+    time: '2022-12-45 95:45:51',
+    status: '废止',
+    describe: '流程描述',
+    offset: 1,
+    limit: 20,
+  },
+  {
+    number: '11111',
+    name: '流程1',
+    business: '关联1',
+    person: '负责人1',
+    time: '2022-12-45 95:45:51',
+    status: '废止',
+    describe: '流程描述',
+    offset: 1,
+    limit: 20,
+  },
+])
+const total = ref(20)
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const dialogFormVisible = ref(false)
+const dialogStatus = ref('')
+
+// 获取日志数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  // getLoginLogList(listQuery).then((response) => {
+  //   list.value = response.data.rows
+  //   total.value = parseInt(response.data.total)
+  //   listLoading.value = false
+  // })
+}
+
+fetchData(true)
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
 <template>
-  <view>
-    流程管理
-  </view>
+  <div class="process">
+    <app-container>
+      <!-- 筛选条件 -->
+      <search-area @search="search">
+        <search-item>
+          <el-input
+            v-model.trim="listQuery.number"
+            placeholder="流程编号"
+            clearable
+          />
+        </search-item>
+        <search-item>
+          <el-input
+            v-model.trim="listQuery.name"
+            placeholder="流程名称"
+            clearable
+          />
+        </search-item>
+        <search-item>
+          <el-input
+            v-model.trim="listQuery.business"
+            placeholder="关联业务"
+            clearable
+          />
+        </search-item>
+        <search-item>
+          <el-input
+            v-model.trim="listQuery.status"
+            placeholder="当前流程状态"
+            clearable
+          />
+        </search-item>
+        <search-item>
+          <el-input
+            v-model.trim="listQuery.person"
+            placeholder="流程负责人"
+            clearable
+          />
+        </search-item>
+        <search-item>
+          <el-date-picker
+            v-model="listQuery.time"
+            type="datetime"
+            value-format="YYYY/MM/DD HH:mm:ss"
+            placeholder="创建时间"
+          />
+        </search-item>
+        <template #btns>
+          <el-button class="filter-item" type="info" :icon="Delete" :style="{ marginTop: '-10px' }" @click="reset">
+            重置
+          </el-button>
+        </template>
+      </search-area>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list"
+        :total="total"
+        :columns="columns"
+        :query="listQuery"
+        :list-loading="listLoading"
+        @change="changePage"
+      >
+        <template #columns>
+          <el-table-column label="操作" width="200" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                编辑
+              </el-button>
+              <el-button type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                详情
+              </el-button>
+              <el-button type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                废止
+              </el-button>
+              <el-button type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </app-container>
+  </div>
 </template>
+
+<style lang="scss">
+  .list-login-log {
+    .el-button + .el-button {
+      margin-top: -10px;
+    }
+  }
+
+  .el-message-box {
+    overflow: auto;
+  }
+</style>
+