任务管理系统 - 任务列表 - 常规

<template>
  <div class='list-card'>
    <!-- 搜索区域 -->
    <div class='list-card-operation'>
      <t-button @click='formVisible = true'>新建任务</t-button>
      <t-input v-model='searchValue' class='search-input' placeholder='请输入你需要搜索的内容' clearable>
        <template #suffix-icon>
          <search-icon v-if='searchValue === '' ' size='20px' />
        </template>
      </t-input>
    </div>
    <!-- 卡片列表 -->
    <template v-if='pagination.total > 0 && !dataLoading'>
      <div class='list-card-items'>
        <t-row :gutter='[16, 16]'>
          <t-col
            :lg='4'
            :xs='6'
            :xl='3'
            v-for='(task, index) in taskList.slice(
              pagination.pageSize * (pagination.current - 1),
              pagination.pageSize * pagination.current,
            )'
            :key='index'
          >
            <task-card :task='task' @delete-item='handleDeleteItem' @manage-task='handleManagetask' />
          </t-col>
        </t-row>
      </div>
      <div class='list-card-pagination'>
        <t-pagination
          v-model='pagination.current'
          :total='pagination.total'
          :pageSizeOptions='[12, 24, 36]'
          :page-size.sync='pagination.pageSize'
          @page-size-change='onPageSizeChange'
          @current-change='onCurrentChange'
        />
      </div>
    </template>
    <div v-else-if='dataLoading' class='list-card-loading'>
      <t-loading text='加载中...'></t-loading>
    </div>
    <!-- 任务管理弹窗 -->
    <t-dialog header='新建任务' :visible.sync='formVisible' :width='680' :footer='false'>
      <div slot='body'>
        <!-- 表单内容 -->
        <t-form :data='formData' ref='form' :rules='rules' @submit='onSubmit' :labelWidth='100'>
          <t-form-item label='任务名称' name='task_name'>
            <t-input :style='{ width: '480px' }' v-model='formData.task_name' placeholder='请输入任务名称'></t-input>
          </t-form-item>
          <t-form-item label='任务类型' name='task_type'>
            <t-select :style='{ width: '480px' }' v-model='formData.task_type' placeholder='请选择任务类型'>
              <t-option value='Android'>android</t-option>
              <t-option value='iOS'>ios</t-option>
              <t-option value='Windows'>windows</t-option>
              <t-option value='Mac'>mac</t-option>
              <t-option value='Web'>web</t-option>
              <t-option value='小程序'>miniapp</t-option>
              <t-option value='小游戏'>minigame</t-option>
            </t-select>
          </t-form-item>
          <t-form-item label='任务描述' name='task_description'>
            <t-input :style='{ width: '480px' }' v-model='formData.task_description' placeholder='请输入任务描述'></t-input>
          </t-form-item>
          <t-form-item style='float: right'>
            <t-button variant='outline' @click='onClickCloseBtn'>取消</t-button>
            <t-button theme='primary' type='submit'>提交</t-button>
          </t-form-item>
        </t-form>
      </div>
    </t-dialog>
    <!-- 删除操作弹窗 -->
    <t-dialog
      header='确认删除所选任务？'
      :body='confirmBody'
      :visible.sync='confirmVisible'
      @confirm='onConfirmDelete'
      :onCancel='onCancel'
    >
    </t-dialog>
  </div>
</template>
<script lang='ts'>
import { prefix } from '@/config/global';
import { SearchIcon } from 'tdesign-icons-vue';
import TaskCard from '@/components/task-card/index.vue';
<p>const INITIAL_DATA = {
name: '',
description: '',
};</p>
<p>export default {
name: 'Tasks',
components: {
SearchIcon,
TaskCard,
},
data() {
return {
pagination: { current: 1, pageSize: 12, total: 0 },
prefix,
taskList: [],
value: 'first',
rowKey: 'index',
tableLayout: 'auto',
verticalAlign: 'top',
bordered: true,
hover: true,
rowClassName: (rowKey) =&gt; <code>${rowKey}-class</code>,
formData: { ...INITIAL_DATA },
options: [
{ label: '网关', value: '1' },
{ label: '人工智能', value: '2' },
{ label: 'CVM', value: '3' },
],
formVisible: false,
textareaValue: '',
rules: {
task_name: [{ required: true, message: '请输入项目名称', type: 'error' }],
task_type: [{ required: true, message: '请输入项目类型', type: 'error' }],
},
searchValue: '',
confirmVisible: false, // 控制确认弹窗
deletetask: undefined,
dataLoading: false,
};
},
computed: {
sortedTaskList() {
return [...this.taskList].sort((a, b) =&gt; b.ID - a.ID);
},
confirmBody(): string {
const { deletetask } = this;
return deletetask ? <code>删除后，${deletetask.name}的所有任务信息将被清空, 且无法恢复</code> : '';
},
},
watch: {
// eslint-disable-next-line func-names
'$route': function(to, from) {
if (to.path.endsWith('/tasks')) {
console.log('to tasks')
// 只有在 /tasks 路由的参数改变时才执行
this.loadPageData();
}
}
},
mounted() {
this.loadPageData();
},
methods: {
loadPageData(): void {
this.dataLoading = true;
this.$request
.get(<code>/web/projects/${this.$route.params.id}/tasks</code>, {
withCredentials: true
})
.then((res) =&gt; {
console.log(res)
if (res.status === 200) {
const list = res.data.reverse(); // Reverse the array to have the latest created task at the top
console.log(list)
this.taskList = list;
this.pagination = {
...this.pagination,
total: list.length,
};
} else {
console.error(res);
this.taskList = [];
}
})
.catch((e: Error) =&gt; {
console.log(e);
})
.finally(() =&gt; {
this.dataLoading = false;
});
},
onPageSizeChange(size: number): void {
this.pagination.pageSize = size;
this.pagination.current = 1;
},
onCurrentChange(current: number): void {
this.pagination.current = current;
},
onSubmit({ 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) =&gt; {
console.log(res);
if (res.status === 200) {
// 新建任务成功，重新加载任务列表
// this.loadPageData();
const newTask = res.data;
newTask.task_name = this.formData.task_name;
newTask.task_description = this.formData.task_description;
// 添加新项目到项目列表
this.taskList.unshift(newTask);
// 更新当前页的总数量
// eslint-disable-next-line no-plusplus
this.pagination.total++;
} else {
console.error(res);
}
})
.catch((e: Error) =&gt; {
console.log(e);
});
} else {
console.log('Errors: ', result);
this.$message.warning(firstError);
}
},
onClickCloseBtn(): void {
this.formVisible = false;
this.formData = {};
},
handleDeleteItem(task): void {
this.confirmVisible = true;
this.deletetask = task;
},
onConfirmDelete(): void {
// const { index } = this.deletetask;
// this.taskList.splice(index - 1, 1);
this.confirmVisible = false;
// 向服务器发送删除请求
console.log(<code>web/projects/${this.$route.params.id}/tasks</code>);
this.$request
.delete(<code>web/projects/${this.$route.params.id}/tasks</code>, {
withCredentials: true,
})
.then((res) =&gt; {
if (res.status === 200) {
this.$message.success(<code>${this.deletetask.task_name}删除成功</code>);
console.log('删除成功');
// eslint-disable-next-line no-plusplus
this.pagination.total--;
// 更新任务列表
this.$request
.get(<code>web/projects/${this.$route.params.id}/tasks</code>)
.then((res) =&gt; {
this.taskList = res.data;
})
.catch((err) =&gt; {
console.error(err);
this.$message.error('获取任务列表失败', err);
});
}
})
.catch((err) =&gt; {
console.error(err);
this.$message.error('删除失败', err);
});
},
onCancel(): void {
this.deletetask = undefined;
this.formData = {};
},
handleManagetask(task): void {
this.formVisible = true;
this.formData = { ...task, status: task?.isSetup ? '1' : '0' };
},
},
};
&lt;/scrip</p>