temp 2023/5/5

ui/src/components/Detail.vue

@@ -1,38 +0,0 @@
-<template>
-    <el-descriptions
-        title="Vertical list with border"
-        direction="vertical"
-        :column="4"
-        :size="5"
-        :data="taskData"
-        border
-    >
-        <el-descriptions-item label="创建者ID">{{ taskData.publisherId }}</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.content }}</el-descriptions-item>
-    </el-descriptions>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            taskData: {
-                publisherId: '1',
-                createTime: '1',
-                deadline: '1',
-                status: false,
-                worker: '',
-                content: '213'
-            }
-        }
-    }
-}
-</script>
-
-<style scoped></style>

ui/src/components/DetailComponents.vue

@@ -0,0 +1,54 @@
+<template>
+    <el-descriptions
+        title="工作详细信息"
+        direction="vertical"
+        :column="3"
+        :size="size"
+        :data="taskData"
+        border
+    >
+        <el-descriptions-item label="创建者">{{ taskData.publisherName }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{
+            formatDate(taskData.createTime)
+        }}</el-descriptions-item>
+        <el-descriptions-item label="结束时间">{{
+            formatDate(taskData.deadline)
+        }}</el-descriptions-item>
+        <el-descriptions-item label="状态">
+            <el-progress :text-inside="true" :stroke-width="16" :percentage="taskData.progress" />
+        </el-descriptions-item>
+        <el-descriptions-item label="负责员工">
+            <el-tag v-for="item in taskData.worker" style="margin-right: 10px">{{
+                item.username
+            }}</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="工作信息">{{ taskData.content }}</el-descriptions-item>
+    </el-descriptions>
+</template>
+
+<script>
+export default {
+    props: {
+        taskData: {
+            publisherId: '',
+            createTime: '',
+            deadline: '',
+            content: '',
+            progress: '',
+            worker: []
+        }
+    },
+    data() {
+        return {
+            size: '10'
+        }
+    },
+    methods: {
+        formatDate(time) {
+            return new Date(time).toLocaleString()
+        }
+    }
+}
+</script>
+
+<style scoped></style>

ui/src/components/EditWork.vue

@@ -18,12 +18,11 @@
             </el-select>
         </el-form-item>
         <el-form-item label="终止时间" prop="deadline">
-            <el-col :span="11">
+            <el-col :span="10">
                 <el-date-picker
                     v-model="form.deadline"
                     type="datetime"
                     format="YYYY-MM-DD HH:mm"
-                    value-format="YYYY-MM-DDTHH:mm:ss"
                     placeholder="请选择时间"
                     style="width: 100%"
                 />
@@ -110,6 +109,7 @@ export default {
             this.$refs.ruleForm.validate((value) => {
                 if (value) {
                     console.log(form.deadline)
+                    console.log(typeof form.deadline)
                     form.publisherId = String(1)
                     if (this.editForm) {
                         this.$emit('updateWork', form)

ui/src/pages/work/Complete.vue

@@ -1,7 +1,12 @@
 <template>
     <div class="main">
         <div class="main-table">
-            <el-table :data="tableData" style="width: 100%">
+            <el-table
+                :data="tableData"
+                style="width: 100%"
+                v-loading="loading"
+                element-loading-text="加载中..."
+            >
                 <el-table-column fixed prop="publisherName" label="发布者" width="120" />
                 <el-table-column prop="content" label="内容" width="800" />
                 <el-table-column prop="deadline" label="结束时间" width="200">
@@ -11,7 +16,9 @@
                 </el-table-column>
                 <el-table-column fixed="right" label="操作" width="150">
                     <template #default="scope">
-                        <el-button link type="primary" size="large">查看</el-button>
+                        <el-button link type="primary" size="large" @click="viewClick(scope.row.id)"
+                            >查看</el-button
+                        >
                         <el-popconfirm
                             width="220"
                             confirm-button-text="是"
@@ -30,6 +37,9 @@
                 </el-table-column>
             </el-table>
         </div>
+        <el-dialog v-model="visible" width="60%">
+            <detail-components :taskData="taskData"></detail-components>
+        </el-dialog>
     </div>
 </template>
 
@@ -40,7 +50,10 @@ export default {
     name: 'CompletePage',
     data() {
         return {
-            tableData: []
+            tableData: [],
+            visible: false,
+            taskData: [],
+            loading: true
         }
     },
     methods: {
@@ -65,14 +78,30 @@ export default {
             axios
                 .get('http://localhost:8621/work/complete/1652714496280469506')
                 .then((response) => {
-                    console.log(response.data.data)
                     this.tableData = response.data.data
-                    console.log(this.tableData)
+                    if (this.tableData) {
+                        this.loading = false
+                    }
                 })
                 .catch((reportError) => {
                     console.log(reportError)
                 })
         },
+        getTaskData(workId) {
+            console.log(workId)
+            axios
+                .get('http://localhost:8621/work/' + workId)
+                .then((response) => {
+                    console.log(response.data.data)
+                    this.taskData = response.data.data
+                    console.log(this.tableData)
+                    return true
+                })
+                .catch((reportError) => {
+                    console.log(reportError)
+                    return false
+                })
+        },
         setTaskStatus(userWork) {
             console.log(userWork)
             axios
@@ -84,6 +113,10 @@ export default {
                 .catch((reportError) => {
                     console.log(reportError)
                 })
+        },
+        viewClick(workId) {
+            this.getTaskData(workId)
+            this.visible = true
         }
     },
     created() {

ui/src/pages/work/Manage.vue

@@ -1,14 +1,25 @@
 <template>
     <div class="main">
         <div class="main-table">
-            <el-table :data="tableData" style="width: 100%">
+            <el-table
+                :data="tableData"
+                style="width: 100%"
+                v-loading="loading"
+                element-loading-text="加载中..."
+            >
                 <el-table-column prop="content" label="内容" width="800" />
                 <el-table-column prop="publisherName" label="发布者" width="120" />
                 <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>
+                        <el-tag
+                            v-for="item in row.worker"
+                            :key="item.userId"
+                            size="small"
+                            round
+                            style="margin-right: 10px"
+                        >
+                            {{ item.username }}
+                        </el-tag>
                     </template>
                 </el-table-column>
                 <el-table-column prop="deadline" label="结束时间" width="200">
@@ -76,14 +87,11 @@ export default {
             tableData: [],
             rowData: [],
             addVisible: false,
-            editVisible: false
+            editVisible: false,
+            loading: true
         }
     },
     methods: {
-        formatDate(deadline) {
-            console.log(new Date(deadline).toLocaleString())
-            return new Date(deadline).toLocaleString()
-        },
         handleClick(row) {
             this.rowData = row
             this.editVisible = true
@@ -106,9 +114,10 @@ export default {
             axios
                 .get('http://localhost:8621/work')
                 .then((response) => {
-                    console.log(response.data.data)
                     this.tableData = response.data.data
-                    console.log(this.tableData)
+                    if (this.tableData) {
+                        this.loading = false
+                    }
                 })
                 .catch((reportError) => {
                     console.log(reportError)
@@ -143,7 +152,6 @@ export default {
                 })
         },
         addWork(form) {
-            console.log(form)
             axios
                 .post('http://localhost:8621/work', form)
                 .then((response) => {
@@ -154,6 +162,9 @@ export default {
                 .catch((reportError) => {
                     console.log(reportError)
                 })
+        },
+        formatDate(time) {
+            return new Date(time).toLocaleString()
         }
     },
     created() {

ui/src/pages/work/Task.vue

@@ -1,7 +1,7 @@
 <template>
-    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" router>
-        <el-menu-item index="1" route="/work/task/todo">待办工作</el-menu-item>
-        <el-menu-item index="2" route="/work/task/complete">已办工作</el-menu-item>
+    <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" router>
+        <el-menu-item index="/work/task/todo">待办工作</el-menu-item>
+        <el-menu-item index="/work/task/complete">已办工作</el-menu-item>
     </el-menu>
     <router-view></router-view>
 </template>
@@ -11,7 +11,7 @@ export default {
     name: 'TaskPage',
     data() {
         return {
-            activeIndex: '1'
+            activeIndex: 'todo'
         }
     }
 }

ui/src/pages/work/Todo.vue

@@ -1,7 +1,12 @@
 <template>
     <div class="main">
         <div class="main-table">
-            <el-table :data="tableData" style="width: 100%">
+            <el-table
+                :data="tableData"
+                style="width: 100%"
+                v-loading="loading"
+                element-loading-text="加载中..."
+            >
                 <el-table-column fixed prop="publisherName" label="发布者" width="150" />
                 <el-table-column prop="content" label="内容" width="800" />
                 <el-table-column prop="deadline" label="结束时间" width="200">
@@ -11,7 +16,9 @@
                 </el-table-column>
                 <el-table-column fixed="right" label="操作" width="150">
                     <template #default="scope">
-                        <el-button link type="primary" size="large">查看</el-button>
+                        <el-button link type="primary" size="large" @click="viewClick(scope.row.id)"
+                            >查看</el-button
+                        >
                         <el-popconfirm
                             width="220"
                             confirm-button-text="是"
@@ -30,6 +37,9 @@
                 </el-table-column>
             </el-table>
         </div>
+        <el-dialog v-model="visible" width="60%">
+            <detail-components :taskData="taskData"></detail-components>
+        </el-dialog>
     </div>
 </template>
 
@@ -39,13 +49,15 @@ export default {
     name: 'TodoPage',
     data() {
         return {
-            tableData: []
+            tableData: [],
+            visible: false,
+            taskData: [],
+            loading: true
         }
     },
     methods: {
-        formatDate(deadline) {
-            console.log(new Date(deadline).toLocaleString())
-            return new Date(deadline).toLocaleString()
+        formatDate(time) {
+            return new Date(time).toLocaleString()
         },
         completeConfirmEvent(row) {
             const userWork = {
@@ -65,14 +77,30 @@ export default {
             axios
                 .get('http://localhost:8621/work/todo/1652714496280469506')
                 .then((response) => {
-                    console.log(response.data.data)
                     this.tableData = response.data.data
-                    console.log(this.tableData)
+                    if (this.taskData) {
+                        this.loading = false
+                    }
                 })
                 .catch((reportError) => {
                     console.log(reportError)
                 })
         },
+        getTaskData(workId) {
+            console.log(workId)
+            axios
+                .get('http://localhost:8621/work/' + workId)
+                .then((response) => {
+                    console.log(response.data.data)
+                    this.taskData = response.data.data
+                    console.log(this.tableData)
+                    return true
+                })
+                .catch((reportError) => {
+                    console.log(reportError)
+                    return false
+                })
+        },
         setTaskStatus(userWork) {
             console.log(userWork)
             axios
@@ -84,6 +112,10 @@ export default {
                 .catch((reportError) => {
                     console.log(reportError)
                 })
+        },
+        viewClick(workId) {
+            this.getTaskData(workId)
+            this.visible = true
         }
     },
     created() {