diff --git a/ui/src/assets/css/work/work.css b/ui/src/assets/css/work/work.css
new file mode 100644
index 0000000..bd5431e
--- /dev/null
+++ b/ui/src/assets/css/work/work.css
@@ -0,0 +1,32 @@
+:root {
+    --main-color: #00d4ff;
+}
+.main {
+    display: flex;
+    height: 100vh;
+    width: 98vw;
+    min-width: 600px;
+    min-height: 600px;
+    text-align: center;
+}
+.main-table {
+    position: relative;
+    display: flex;
+    height: 100%;
+    width: 100%;
+}
+.main-add-content {
+    position: fixed;
+    display: flex;
+    width: 100%;
+    z-index: 999;
+    bottom: 10vh;
+    justify-content: center;
+}
+.main-add-box {
+    display: flex;
+    padding: 16px 20px;
+    width: 80%;
+    left: 50%;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/ui/src/components/Detail.vue b/ui/src/components/Detail.vue
new file mode 100644
index 0000000..d96e164
--- /dev/null
+++ b/ui/src/components/Detail.vue
@@ -0,0 +1,38 @@
+<template>
+    <el-descriptions
+        title="Vertical list with border"
+        direction="vertical"
+        :column="4"
+        :size="size"
+        :data="taskData"
+        border
+    >
+        <el-descriptions-item label="创建者ID">{{ taskData.publisher_id }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ taskData.createTime }}</el-descriptions-item>
+        <el-descriptions-item label="结束时间">{{ taskData.deadLine }}</el-descriptions-item>
+        <el-descriptions-item label="状态">
+            <template #default> {{}} </template>
+        </el-descriptions-item>
+        <el-descriptions-item label="负责员工" property="worker" />
+        <el-descriptions-item label="工作信息">{{ taskData.taskContent }}</el-descriptions-item>
+    </el-descriptions>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            taskData: {
+                publisher_id: '1',
+                createTime: '1',
+                deadLine: '1',
+                taskStatus: false,
+                worker: '',
+                taskContent: '213'
+            }
+        }
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/ui/src/components/EditWork.vue b/ui/src/components/EditWork.vue
new file mode 100644
index 0000000..2107bd1
--- /dev/null
+++ b/ui/src/components/EditWork.vue
@@ -0,0 +1,135 @@
+<template>
+    <el-form :model="form" :rules="rules" label-width="120px" ref="ruleForm">
+        <el-form-item label="工作人员" prop="worker">
+            <el-select
+                v-model="form.worker"
+                multiple
+                filterable
+                :reserve-keyword="false"
+                value-key="userID"
+                placeholder="选择相对应的工作人员"
+            >
+                <el-option
+                    v-for="item in workers"
+                    :key="item.userID"
+                    :label="item.userName"
+                    :value="item"
+                />
+            </el-select>
+        </el-form-item>
+        <el-form-item label="终止时间" prop="deadLine">
+            <el-col :span="11">
+                <el-date-picker
+                    v-model="form.deadLine"
+                    type="datetime"
+                    format="YYYY-MM-DD HH:mm"
+                    placeholder="请选择时间"
+                    style="width: 100%"
+                />
+            </el-col>
+        </el-form-item>
+        <el-form-item label="工作内容" prop="taskContent">
+            <el-input v-model="form.taskContent" type="textarea" />
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary" @click="onSubmit(form)">创建</el-button>
+            <el-button @click="reset">重置</el-button>
+            <el-button @click="cancel">取消</el-button>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+    data() {
+        return {
+            form: {
+                publisher_id: '',
+                createTime: '',
+                deadLine: '',
+                taskContent: '',
+                worker: []
+            },
+            workers: [
+                {
+                    userID: '',
+                    userName: ''
+                }
+            ],
+            rules: {
+                worker: [
+                    {
+                        required: true,
+                        message: '请选择相应的工作人员'
+                    }
+                ],
+                deadLine: [
+                    {
+                        type: 'date',
+                        required: true,
+                        message: '请输入终止日期'
+                    }
+                ],
+                taskContent: [
+                    {
+                        required: true,
+                        message: '请输入工作内容'
+                    }
+                ]
+            }
+        }
+    },
+    methods: {
+        getFormData() {
+            axios
+                .get('http://localhost:8080/user')
+                .then((response) => {
+                    console.log(response.data)
+                    this.workers = response.data
+                    console.log(this.workers)
+                })
+                .catch((reportError) => {
+                    console.log(reportError)
+                })
+        },
+        addWork(form) {
+            console.log(form)
+            axios
+                .post('http://localhost:8080/work', form)
+                .then((response) => {
+                    console.log(response.data)
+                })
+                .catch((reportError) => {
+                    console.log(reportError)
+                })
+        },
+        onSubmit(form) {
+            //表单校验
+            this.$refs.ruleForm.validate((value) => {
+                if (value) {
+                    form.createTime = new Date().getTime().toString()
+                    console.log(form)
+                    form.publisher_id = String(1)
+                    this.addWork(form)
+                    this.$emit('setDialogVisible', false)
+                    console.log('submit!')
+                } else {
+                    console.log('fault!')
+                }
+            })
+        },
+        reset() {
+            this.$refs.ruleForm.resetFields()
+        },
+        cancel() {
+            this.$emit('setDialogVisible', false)
+        }
+    },
+    created() {
+        this.getFormData()
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/ui/src/pages/work/AllTask.vue b/ui/src/pages/work/AllTask.vue
new file mode 100644
index 0000000..211c14e
--- /dev/null
+++ b/ui/src/pages/work/AllTask.vue
@@ -0,0 +1,147 @@
+<template>
+    <div class="main">
+        <div class="main-table">
+            <el-table :data="tableData" style="width: 100%">
+                <el-table-column fixed prop="id" label="工作事项ID" width="150" />
+                <el-table-column prop="publisher_id" label="发布者ID" width="120" />
+                <el-table-column prop="taskContent" label="内容" width="800" />
+                <el-table-column prop="worker" label="工作人员" width="200">
+                    <template #default="{ row }">
+                        <span v-for="item in row.worker" :key="item.userID">
+                            {{ item.userName }},&nbsp;
+                        </span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="deadLine" label="结束时间" width="200">
+                    <template #default="scope">
+                        {{ formatDate(scope.row.deadLine) }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="taskStatus" label="状态" width="150" />
+                <el-table-column prop="progress" label="进度" width="250">
+                    <template #default>
+                        <el-progress :text-inside="true" :stroke-width="20" :percentage="70" />
+                    </template>
+                </el-table-column>
+                <el-table-column fixed="right" label="操作" width="240">
+                    <template #default="scope">
+                        <el-button link type="primary" size="large" @click="handleClick"
+                            >编辑</el-button
+                        >
+                        <el-popconfirm
+                            width="220"
+                            confirm-button-text="是"
+                            cancel-button-text="否"
+                            :icon="InfoFilled"
+                            icon-color="#00d4ff"
+                            title="是否确定删除？"
+                            @confirm="deleteConfirmEvent(scope.row)"
+                            @cancel="deleteCancelEvent"
+                        >
+                            <template #reference>
+                                <el-button link type="primary" size="default">删除</el-button>
+                            </template>
+                        </el-popconfirm>
+                        <el-popconfirm
+                            width="220"
+                            confirm-button-text="是"
+                            cancel-button-text="否"
+                            :icon="InfoFilled"
+                            icon-color="#00d4ff"
+                            title="是否确认完成？"
+                            @confirm="completeConfirmEvent"
+                            @cancel="completeCancelEvent"
+                        >
+                            <template #reference>
+                                <el-button link type="primary" size="default">完成</el-button>
+                            </template>
+                        </el-popconfirm>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="main-add-content">
+            <div class="main-add-box">
+                <el-button @click="dialogFormVisible = true">添加</el-button>
+            </div>
+            <el-dialog v-model="dialogFormVisible" width="60%">
+                <edit-work @setDialogVisible="setDialogVisible"></edit-work>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from 'axios'
+import EditWork from '@/components/EditWork.vue'
+
+export default {
+    name: 'AllTaskPage',
+    data() {
+        return {
+            tableData: [],
+            dialogFormVisible: false
+        }
+    },
+    methods: {
+        formatDate(deadLine) {
+            console.log(new Date(deadLine).toLocaleString())
+            return new Date(deadLine).toLocaleString()
+        },
+        handleClick() {
+            console.log('click')
+        },
+        deleteConfirmEvent(row) {
+            this.deleteTableData(row)
+            location.reload()
+            console.log('delete confirm!')
+        },
+        deleteCancelEvent() {
+            console.log('delete cancel!')
+        },
+        completeConfirmEvent() {
+            console.log('complete confirm!')
+        },
+        completeCancelEvent() {
+            console.log('complete cancel!')
+        },
+        getTableData() {
+            axios
+                .get('http://localhost:8080/work')
+                .then((response) => {
+                    console.log(response.data)
+                    this.tableData = response.data
+                    console.log(this.tableData)
+                })
+                .catch((reportError) => {
+                    console.log(reportError)
+                })
+        },
+        deleteTableData(row) {
+            axios
+                .delete('http://localhost:8080/work/' + row.id)
+                .then((response) => {
+                    console.log(response.data)
+                })
+                .catch((reportError) => {
+                    console.log(reportError)
+                })
+        },
+        setDialogVisible(dialogVisible) {
+            console.log(dialogVisible)
+            this.dialogFormVisible = dialogVisible
+            location.reload()
+        }
+    },
+    created() {
+        this.getTableData()
+    },
+    components: {
+        EditWork
+    }
+}
+</script>
+
+<style scoped>
+@import '@/assets/css/work/work.css';
+</style>
diff --git a/ui/src/pages/work/Complete.vue b/ui/src/pages/work/Complete.vue
new file mode 100644
index 0000000..0a588d1
--- /dev/null
+++ b/ui/src/pages/work/Complete.vue
@@ -0,0 +1,102 @@
+<template>
+    <div class="main">
+        <div class="main-table">
+            <el-table :data="tableData" style="width: 100%">
+                <el-table-column fixed prop="id" label="工作事项ID" width="150" />
+                <el-table-column prop="publisher_id" label="发布者ID" width="120" />
+                <el-table-column prop="taskContent" label="内容" width="800" />
+                <el-table-column prop="worker" label="工作人员" width="200">
+                    <template #default="{ row }">
+                        <span v-for="item in row.worker" :key="item.userID">
+                            {{ item.userName }},&nbsp;
+                        </span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="deadLine" label="结束时间" width="200">
+                    <template #default="scope">
+                        {{ formatDate(scope.row.deadLine) }}
+                    </template>
+                </el-table-column>
+                <el-table-column fixed="right" label="操作" width="240">
+                    <template #default="scope">
+                        <el-button link type="primary" size="large">查看</el-button>
+                        <el-popconfirm
+                            width="220"
+                            confirm-button-text="是"
+                            cancel-button-text="否"
+                            :icon="InfoFilled"
+                            icon-color="#00d4ff"
+                            title="是否确认完成？"
+                            @confirm="todoConfirmEvent(scope.row)"
+                            @cancel="todoCancelEvent"
+                        >
+                            <template #reference>
+                                <el-button link type="primary" size="default">未完成</el-button>
+                            </template>
+                        </el-popconfirm>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+    name: 'CompletePage',
+    data() {
+        return {
+            tableData: []
+        }
+    },
+    methods: {
+        formatDate(deadLine) {
+            console.log(new Date(deadLine).toLocaleString())
+            return new Date(deadLine).toLocaleString()
+        },
+        todoConfirmEvent(row) {
+            console.log(row)
+            this.setTaskTodo(row)
+            console.log('complete confirm!')
+            location.reload()
+        },
+        todoCancelEvent() {
+            console.log('complete cancel!')
+        },
+        getTableData() {
+            axios
+                .get('http://localhost:8080/work/complete')
+                .then((response) => {
+                    console.log(response.data)
+                    this.tableData = response.data
+                    console.log(this.tableData)
+                })
+                .catch((reportError) => {
+                    console.log(reportError)
+                })
+        },
+        setTaskTodo(row) {
+            var workDo = new Object()
+            workDo.id = row.id
+            workDo.taskStatus = false
+            axios
+                .put('http://localhost:8080/work', workDo)
+                .then((response) => {
+                    console.log(response.data)
+                })
+                .catch((reportError) => {
+                    console.log(reportError)
+                })
+        }
+    },
+    created() {
+        this.getTableData()
+    }
+}
+</script>
+
+<style scoped>
+@import '@/assets/css/work/work.css';
+</style>
diff --git a/ui/src/pages/work/Task.vue b/ui/src/pages/work/Task.vue
new file mode 100644
index 0000000..2f84aa2
--- /dev/null
+++ b/ui/src/pages/work/Task.vue
@@ -0,0 +1,29 @@
+<template>
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+        <el-menu-item index="1"
+            ><router-link to="/todo" style="text-decoration: none"
+                >待办工作</router-link
+            ></el-menu-item
+        >
+        <el-menu-item index="2"
+            ><router-link to="complete" style="text-decoration: none"
+                >已办工作</router-link
+            ></el-menu-item
+        >
+    </el-menu>
+    <router-view></router-view>
+</template>
+
+<script>
+export default {
+    name: 'TaskPage',
+    data() {
+        return {
+            activeIndex: '1'
+        }
+    },
+    created() {
+        this.$router.push('/todo')
+    }
+}
+</script>
diff --git a/ui/src/pages/work/Todo.vue b/ui/src/pages/work/Todo.vue
index 73ec8c4..b0a8177 100644
--- a/ui/src/pages/work/Todo.vue
+++ b/ui/src/pages/work/Todo.vue
@@ -1,9 +1,101 @@
-<template><div></div></template>
+<template>
+    <div class="main">
+        <div class="main-table">
+            <el-table :data="tableData" style="width: 100%">
+                <el-table-column fixed prop="id" label="工作事项ID" width="150" />
+                <el-table-column prop="publisher_id" label="发布者ID" width="120" />
+                <el-table-column prop="taskContent" label="内容" width="800" />
+                <el-table-column prop="worker" label="工作人员" width="200">
+                    <template #default="{ row }">
+                        <span v-for="item in row.worker" :key="item.userID">
+                            {{ item.userName }},&nbsp;
+                        </span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="deadLine" label="结束时间" width="200">
+                    <template #default="scope">
+                        {{ formatDate(scope.row.deadLine) }}
+                    </template>
+                </el-table-column>
+                <el-table-column fixed="right" label="操作" width="240">
+                    <template #default="scope">
+                        <el-button link type="primary" size="large">查看</el-button>
+                        <el-popconfirm
+                            width="220"
+                            confirm-button-text="是"
+                            cancel-button-text="否"
+                            :icon="InfoFilled"
+                            icon-color="#00d4ff"
+                            title="是否确认完成？"
+                            @confirm="completeConfirmEvent(scope.row)"
+                            @cancel="completeCancelEvent"
+                        >
+                            <template #reference>
+                                <el-button link type="primary" size="default">完成</el-button>
+                            </template>
+                        </el-popconfirm>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
 
 <script>
+import axios from 'axios'
 export default {
-    name: 'TodoPage'
+    name: 'TodoPage',
+    data() {
+        return {
+            tableData: []
+        }
+    },
+    methods: {
+        formatDate(deadLine) {
+            console.log(new Date(deadLine).toLocaleString())
+            return new Date(deadLine).toLocaleString()
+        },
+        completeConfirmEvent(row) {
+            console.log(row)
+            this.setTaskComplete(row)
+            console.log('complete confirm!')
+            location.reload()
+        },
+        completeCancelEvent() {
+            console.log('complete cancel!')
+        },
+        getTableData() {
+            axios
+                .get('http://localhost:8080/work/todo')
+                .then((response) => {
+                    console.log(response.data)
+                    this.tableData = response.data
+                    console.log(this.tableData)
+                })
+                .catch((reportError) => {
+                    console.log(reportError)
+                })
+        },
+        setTaskComplete(row) {
+            var workDo = new Object()
+            workDo.id = row.id
+            workDo.taskStatus = true
+            axios
+                .put('http://localhost:8080/work', workDo)
+                .then((response) => {
+                    console.log(response.data)
+                })
+                .catch((reportError) => {
+                    console.log(reportError)
+                })
+        }
+    },
+    created() {
+        this.getTableData()
+    }
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+@import '@/assets/css/work/work.css';
+</style>