Add fuzzy query function in work items

ui/src/pages/work/Complete.vue

@@ -9,6 +9,18 @@
             >
                 <el-table-column fixed prop="publisherName" label="发布者" width="120" />
                 <el-table-column prop="content" label="内容" width="800" />
+                <el-table-column prop="status" label="完成状态" width="100">
+                    <template #default="scope">
+                        <el-tag :type="scope.row.tagType">
+                            {{ statusTag(scope.row) }}
+                        </el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="completeTime" label="完成时间" width="200" sortable>
+                    <template #default="scope">
+                        {{ formatDate(scope.row.userWorkList[0].completeTime) }}
+                    </template>
+                </el-table-column>
                 <el-table-column prop="deadline" label="结束时间" width="200">
                     <template #default="scope">
                         {{ formatDate(scope.row.deadline) }}
@@ -53,13 +65,23 @@ export default {
             tableData: [],
             visible: false,
             taskData: [],
-            loading: true
+            loading: true,
+            tagType: 'info'
         }
     },
     methods: {
-        formatDate(deadline) {
-            console.log(new Date(deadline).toLocaleString())
-            return new Date(deadline).toLocaleString()
+        formatDate(time) {
+            console.log(new Date(time).toLocaleString())
+            return new Date(time).toLocaleString()
+        },
+        statusTag(row) {
+            if (row.userWorkList[0].completeTime <= row.deadline) {
+                row.tagType = 'success'
+                return '已完成'
+            } else {
+                row.tagType = 'danger'
+                return '超时完成'
+            }
         },
         todoConfirmEvent(row) {
             const userWork = {
@@ -79,6 +101,7 @@ export default {
                 .then((response) => {
                     this.tableData = response.data.data
                     if (this.tableData) {
+                        console.log(this.tableData)
                         this.loading = false
                     }
                 })

ui/src/pages/work/Manage.vue

@@ -1,4 +1,23 @@
 <template>
+    <div class="head">
+        <el-row style="width: 50%">
+            <el-col :span="17">
+                <el-input
+                    v-model="searchContent"
+                    placeholder="请输入查询的工作内容"
+                    size="default"
+                    clearable
+                />
+            </el-col>
+            <el-col :span="1" />
+            <el-col :span="3">
+                <el-button size="default" type="primary" @click="searchByContent">搜索</el-button>
+            </el-col>
+            <el-col :span="3">
+                <el-button size="default" @click="addVisible = true">添加</el-button>
+            </el-col>
+        </el-row>
+    </div>
     <div class="main">
         <div class="main-table">
             <el-table
@@ -22,12 +41,12 @@
                         </el-tag>
                     </template>
                 </el-table-column>
-                <el-table-column prop="deadline" label="结束时间" width="200">
+                <el-table-column prop="deadline" label="结束时间" width="200" sortable>
                     <template #default="scope">
                         {{ formatDate(scope.row.deadline) }}
                     </template>
                 </el-table-column>
-                <el-table-column fixed="right" prop="progress" label="进度" width="200">
+                <el-table-column fixed="right" prop="progress" label="进度" width="200" sortable>
                     <template #default="scope">
                         <el-progress
                             :text-inside="true"
@@ -58,27 +77,22 @@
                 </el-table-column>
             </el-table>
         </div>
-        <div class="main-add-content">
-            <div class="main-add-box">
-                <el-button size="large" @click="addVisible = true">添加</el-button>
-            </div>
-            <el-dialog v-model="addVisible" width="60%">
-                <edit-work @setDialogVisible="setDialogVisible" @addWork="addWork"></edit-work>
-            </el-dialog>
-            <el-dialog v-model="editVisible" width="60%">
-                <edit-work
-                    :editForm="rowData"
-                    @setDialogVisible="setDialogVisible"
-                    @updateWork="updateWork"
-                ></edit-work>
-            </el-dialog>
-        </div>
+        <el-dialog v-model="addVisible" width="60%">
+            <edit-work @setDialogVisible="setDialogVisible" @addWork="addWork"></edit-work>
+        </el-dialog>
+        <el-dialog v-model="editVisible" width="60%">
+            <edit-work
+                :editForm="rowData"
+                @setDialogVisible="setDialogVisible"
+                @updateWork="updateWork"
+            ></edit-work>
+        </el-dialog>
     </div>
 </template>
 
 <script lang="ts">
 import request from '@/services'
-import EditWork from '@/components/EditWork.vue'
+import EditWork from '@/components/work/EditWork.vue'
 
 export default {
     name: 'AllTaskPage',
@@ -88,7 +102,8 @@ export default {
             rowData: [],
             addVisible: false,
             editVisible: false,
-            loading: true
+            loading: true,
+            searchContent: ''
         }
     },
     methods: {
@@ -165,6 +180,19 @@ export default {
         },
         formatDate(time) {
             return new Date(time).toLocaleString()
+        },
+        searchByContent() {
+            request
+                .get('/work', { content: this.searchContent })
+                .then((response) => {
+                    this.tableData = response.data.data
+                    if (this.tableData) {
+                        this.loading = false
+                    }
+                })
+                .catch((reportError) => {
+                    console.log(reportError)
+                })
         }
     },
     created() {

ui/src/pages/work/Todo.vue

@@ -9,9 +9,9 @@
             >
                 <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">
+                <el-table-column prop="deadline" label="结束时间" width="200" sortable>
                     <template #default="scope">
-                        {{ formatDate(scope.row.deadline) }}
+                        <span :style="{ color: scope.row.color1 }">{{ formatDate(scope) }}</span>
                     </template>
                 </el-table-column>
                 <el-table-column fixed="right" label="操作" width="150">
@@ -52,12 +52,25 @@ export default {
             tableData: [],
             visible: false,
             taskData: [],
-            loading: true
+            loading: true,
+            color1: '#000000'
         }
     },
     methods: {
-        formatDate(time) {
-            return new Date(time).toLocaleString()
+        formatDate(scope) {
+            const deadDate = new Date(scope.row.deadline)
+            const beforeTime = new Date(deadDate)
+            const beforeDate = new Date(beforeTime.setDate(deadDate.getDate() - 3))
+            const nowTime = new Date()
+            console.log(scope)
+            if (nowTime <= beforeDate) {
+                scope.row.color1 = '#909399'
+            } else if (nowTime > beforeDate && nowTime < deadDate) {
+                scope.row.color1 = '#E6A23C'
+            } else if (nowTime >= deadDate) {
+                scope.row.color1 = '#F56C6C'
+            }
+            return new Date(scope.row.deadline).toLocaleString()
         },
         completeConfirmEvent(row) {
             const userWork = {
@@ -101,6 +114,7 @@ export default {
                 })
         },
         setTaskStatus(userWork) {
+            userWork.completeTime = new Date()
             console.log(userWork)
             request
                 .put('/work/setStatus', userWork)