任务列表 - 任务管理系统
<p>"<template>\n <div class="list-card">\n <!-- 搜索区域 -->\n <div class="list-card-operation">\n <t-button @click="formVisible = true">新建任务</t-button>\n <t-input v-model="searchValue" class="search-input" placeholder="请输入你需要搜索的内容" clearable>\n <template #suffix-icon>\n <search-icon v-if="searchValue === ''" size="20px" />\n </template>\n </t-input>\n </div>\n <!-- 卡片列表 -->\n <template v-if="pagination.total > 0 && !dataLoading">\n <div class="list-card-items">\n <t-row :gutter="[16, 16]">\n <t-col\n :lg="4"\n :xs="6"\n :xl="3"\n v-for="(task, index) in taskList.slice (\n pagination.pageSize * (pagination.current - 1),\n pagination.pageSize * pagination.current,\n )"\n :key="index"\n >\n <task-card :task="task" @delete-item="handleDeleteItem" @manage-task="handleManagetask" />\n </t-col>\n </t-row>\n </div>\n <div class="list-card-pagination">\n <t-pagination\n v-model="pagination.current"\n :total="pagination.total"\n :pageSizeOptions="[12, 24, 36]"\n :page-size.sync="pagination.pageSize"\n @page-size-change="onPageSizeChange"\n @current-change="onCurrentChange"\n />\n </div>\n </template>\n <div v-else-if="dataLoading" class="list-card-loading">\n <t-loading text="加载中..."></t-loading>\n </div>\n <!-- 任务管理弹窗 -->\n <t-dialog header="新建任务" :visible.sync="formVisible" :width="680" :footer="false">\n <div slot="body">\n <!-- 表单内容 -->\n <t-form :data="formData" ref="form" :rules="rules" @submit="onSubmit" :labelWidth="100">\n <t-form-item label="任务名称" name="task_name">\n <t-input :style="{ width: '480px' }" v-model="formData.task_name" placeholder="请输入任务名称"></t-input>\n </t-form-item>\n <t-form-item label="任务类型" name="task_type">\n <t-select :style="{ width: '480px' }" v-model="formData.task_type" placeholder="请选择任务类型">\n <t-option value=Android>android</t-option>\n <t-option value="iOS">ios</t-option>\n <t-option value="Windows">windows</t-option>\n <t-option value="Mac">mac</t-option>\n <t-option value="Web">web</t-option>\n <t-option value="小程序">miniapp</t-option>\n <t-option value="小游戏">minigame</t-option>\n </t-select>\n </t-form-item>\n <t-form-item label="任务描述" name="task_description">\n <t-input :style="{ width: '480px' }" v-model="formData.task_description" placeholder="请输入任务描述"></t-input>\n </t-form-item>\n <t-form-item style="float: right">\n <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>\n <t-button theme="primary" type="submit">提交</t-button>\n </t-form-item>\n </t-form>\n </div>\n </t-dialog>\n <!-- 删除操作弹窗 -->\n <t-dialog\n header="确认删除所选任务？"\n :body="confirmBody"\n :visible.sync="confirmVisible"\n @confirm="onConfirmDelete"\n :onCancel="onCancel"\n >\n </t-dialog>\n </div>\n</template>\n<script lang="ts">\nimport { prefix } from '@/config/global';\nimport { SearchIcon } from 'tdesign-icons-vue';\nimport TaskCard from '@/components/task-card/index.vue';\n\n\nconst INITIAL_DATA = {\n name: '',\n description: '',\n};\n\nexport default {\n name: 'Tasks',\n components: {\n SearchIcon,\n TaskCard,\n },\n data() {\n return {\n pagination: { current: 1, pageSize: 12, total: 0 },\n prefix,\n taskList: [],\n value: 'first',\n rowKey: 'index',\n tableLayout: 'auto',\n verticalAlign: 'top',\n bordered: true,\n hover: true,\n rowClassName: (rowKey) => <code>${rowKey}-class</code>,\n formData: { ...INITIAL_DATA },\n options: [\n { label: '网关', value: '1' },\n { label: '人工智能', value: '2' },\n { label: 'CVM', value: '3' },\n ],\n formVisible: false,\n textareaValue: '',\n rules: {\n task_name: [{ required: true, message: '请输入项目名称', type: 'error' }],\n task_type: [{ required: true, message: '请输入项目类型', type: 'error' }],\n },\n searchValue: '',\n confirmVisible: false, // 控制确认弹窗\n deletetask: undefined,\n dataLoading: false,\n };\n },\n computed: {\n sortedTaskList() {\n return [...this.taskList].sort((a, b) => b.ID - a.ID);\n },\n confirmBody(): string {\n const { deletetask } = this;\n return deletetask ? <code>删除后，${deletetask.name}的所有任务信息将被清空, 且无法恢复</code> : '';\n },\n },\n watch: {\n // eslint-disable-next-line func-names\n '$route': function(to, from) {\n if (to.path.endsWith('/tasks')) {\n console.log("to tasks")\n // 只有在 /tasks 路由的参数改变时才执行\n this.loadPageData();\n }\n }\n },\n mounted() {\n this.loadPageData();\n },\n methods: {\n loadPageData(): void {\n this.dataLoading = true;\n this.$request\n .get(<code>/web/projects/${this.$route.params.id}/tasks</code>, {\n withCredentials: true\n })\n .then((res) => {\n console.log(res)\n if (res.status === 200) {\n const list = res.data;\n console.log(list)\n this.taskList = list;\n this.pagination = {\n ...this.pagination,\n total: list.length,\n };\n } else {\n console.error(res);\n this.taskList = [];\n }\n })\n .catch((e: Error) => {\n console.log(e);\n })\n .finally(() => {\n this.dataLoading = false;\n });\n },\n onPageSizeChange(size: number): void {\n this.pagination.pageSize = size;\n this.pagination.current = 1;\n },\n onCurrentChange(current: number): void {\n this.pagination.current = current;\n },\n onSubmit({ result, firstError }): void {\n if (!firstError) {\n this.$message.success('提交成功');\n this.formVisible = false;\n this.$request\n .post(<code>web/projects/${this.$route.params.id}/tasks</code>, {\n task_name: this.formData.task_name,\n task_type: this.formData.task_type,\n description: this.formData.task_description,\n }, {\n headers: { 'Content-Type': 'application/json' },\n withCredentials: true\n })\n .then((res) => {\n console.log(res);\n if (res.status === 200) {\n // 新建任务成功，重新加载任务列表\n // this.loadPageData();\n const newTask = res.data;\n newTask.task_name = this.formData.task_name;\n newTask.task_description = this.formData.task_description;\n // 添加新项目到项目列表\n this.taskList.unshift(newTask);\n // 更新当前页的总数量\n // eslint-disable-next-line no-plusplus\n this.pagination.total++;\n // 重置表单数据\n this.formData = { ...INITIAL_DATA };\n } else {\n console.error(res);\n }\n })\n .catch((e: Error) => {\n console.log(e);\n });\n } else {\n console.log('Errors: ', result);\n this.$message.warning(firstError);\n }\n },\n onClickCloseBtn(): void {\n this.formVisible = false;\n this.formData = {};\n },\n handleDeleteItem(task): void {\n this.confirmVisible = true;\n this.deletetask = task;\n },\n onConfirmDelete(): void {\n // const { index } = this.deletetask;\n // this.taskList.splice(index - 1, 1);\n this.confirmVisible = false;\n // 向服务器发送删除请求\n console.log(<code>web/projects/${this.$route.params.id}/tasks</code>);\n this.$request\n .delete(<code>web/projects/${this.$route.params.id}/tasks</code>, {\n withCredentials: true,\n })\n .then((res) => {\n if (res.status === 200) {\n this.$message.success(<code>${this.deletetask.task_name}删除成功</code>);\n console.log('删除成功');\n // eslint-disable-next-line no-plusplus\n this.pagination.total--;\n // 更新任务列表\n this.$request\n .get(<code>web/projects/${this.$route.params.id}/tasks</code>)\n .then((res) => {\n this.taskList = res.data;\n })\n .catch((err) => {\n console.error(err);\n this.$message.error('获取任务列表失败', err);\n });\n }\n })\n .catch((err) => {\n console.error(err);\n this.$message.error('删除失败', err);\n });\n },\n onCancel(): void {\n this.deletetask = undefined;\n this.formData = {};\n },\n handleManagetask(task): void {\n this.formVisible = true;\n this.formData = { ...task, status: task?.isSetup ? '1' : '0' };\n },\n },\n};\n修改代码，让最新创建的 task 展示在最前面内容：To make the newly created task appear at the front, you can modify the <code>onSubmit</code> method in the script section of the code. Here's the modified code:javascriptonSubmit({ result, firstError }): void { if (!firstError) { this.$message.success('提交成功'); this.formVisible = false; this.$request .post(<code>web/projects/${this.$route.params.id}/tasks</code>, { task_name: this.formData.task_name, task_type: this.formData.task_type, description: this.formData.task_description, }, { headers: { 'Content-Type': 'application/json' }, withCredentials: true }) .then((res) => { console.log(res); if (res.status === 200) { const newTask = res.data; newTask.task_name = this.formData.task_name; newTask.task_description = this.formData.task_description; // Add new task at the beginning of the taskList this.taskList.unshift(newTask); // Update current page's total count this.pagination.total++; // Reset form data this.formData = { ...INITIAL_DATA }; } else { console.error(res); } }) .catch((e: Error) => { console.log(e); }); } else { console.log('Errors: ', result); this.$message.warning(firstError); }},</p>
<p>In the <code>onSubmit</code> method, after successfully creating the new task, we add the <code>newTask</code> object at the beginning of the <code>taskList</code> array using the <code>unshift</code> method. This ensures that the newly created task appears at the front. We also update the <code>pagination.total</code> count and reset the form dat</p>
原文地址: https://www.cveoy.top/t/topic/qwvW 著作权归作者所有。请勿转载和采集!