index.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template>
  2. <div class="table-page">
  3. <GiTable
  4. row-key="id"
  5. title="任务列表"
  6. :data="dataList"
  7. :columns="columns"
  8. :loading="loading"
  9. :scroll="{ x: '100%', y: '100%', minWidth: 1200 }"
  10. :pagination="pagination"
  11. :disabled-tools="['size']"
  12. :disabled-column-keys="['title']"
  13. @refresh="search"
  14. >
  15. <template #toolbar-left>
  16. <a-input-search v-model="queryForm.name" placeholder="任务名称" allow-clear @search="search" />
  17. <a-select
  18. v-model="queryForm.categoryCode"
  19. :options="TaskStatusList"
  20. placeholder="请选择任务分类"
  21. allow-clear
  22. style="width: 180px"
  23. @change="search"
  24. />
  25. <a-button @click="reset">
  26. <template #icon><icon-refresh /></template>
  27. <template #default>重置</template>
  28. </a-button>
  29. </template>
  30. <template #toolbar-right>
  31. <a-button type="primary" @click="onAdd">
  32. <template #icon><icon-plus /></template>
  33. <template #default>新增</template>
  34. </a-button>
  35. </template>
  36. <template #taskIcon="{ record }">
  37. <a-avatar v-if="record.taskIcon">
  38. <img :src="record.taskIcon" />
  39. </a-avatar>
  40. </template>
  41. <template #passengerFlowWay="{ record }">
  42. <GiCellTag :value="record.categoryCode" :dict="task_type" />
  43. </template>
  44. <template #action="{ record }">
  45. <a-space>
  46. <a-link title="修改" @click="onUpdate(record)">修改</a-link>
  47. <a-link status="danger" title="删除" @click="onDelete(record)"> 删除 </a-link>
  48. </a-space>
  49. </template>
  50. </GiTable>
  51. <TaskAddModal ref="TaskAddModalRef" @save-success="search"></TaskAddModal>
  52. </div>
  53. </template>
  54. <script setup lang="ts">
  55. import TaskAddModal from './taskAddModal.vue'
  56. import type { TableInstanceColumns } from '@/components/GiTable/type'
  57. import { useTable } from '@/hooks'
  58. import { isMobile } from '@/utils'
  59. import type { TaskListResp, TaskQuery } from '@/apis/task/type'
  60. import { listTask, taskDel } from '@/apis/task/taskhome'
  61. import { TaskStatusList } from '@/constant/common'
  62. import { useDict } from '@/hooks/app'
  63. defineOptions({ name: 'Jliangli' })
  64. const queryForm = reactive<TaskQuery>({} as TaskQuery)
  65. const { task_type } = useDict('task_type')
  66. const {
  67. tableData: dataList,
  68. loading,
  69. pagination,
  70. search,
  71. handleDelete,
  72. } = useTable((page) => listTask({ ...queryForm, ...page }), { immediate: true })
  73. const columns: TableInstanceColumns[] = [
  74. {
  75. title: '序号',
  76. width: 66,
  77. align: 'center',
  78. render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
  79. },
  80. { title: '任务图标', dataIndex: 'taskIcon', slotName: 'taskIcon', align: 'center', width: 180 },
  81. { title: '任务分类', dataIndex: 'categoryCode', slotName: 'categoryCode', align: 'center', width: 180 },
  82. { title: '名称', dataIndex: 'name', slotName: 'name', align: 'center', width: 180 },
  83. { title: '金币数量', dataIndex: 'goldCoin', slotName: 'goldCoin', align: 'center', width: 180 },
  84. { title: '创建时间', dataIndex: 'createTime', slotName: 'createTime', align: 'center', width: 180 },
  85. {
  86. title: '操作',
  87. dataIndex: 'action',
  88. slotName: 'action',
  89. width: 350,
  90. align: 'center',
  91. fixed: !isMobile() ? 'right' : undefined,
  92. show: true,
  93. },
  94. ]
  95. // 重置
  96. const reset = () => {
  97. queryForm.name = undefined
  98. queryForm.taskType = undefined
  99. queryForm.categoryCode = undefined
  100. search()
  101. }
  102. // 新增
  103. const TaskAddModalRef = ref<InstanceType<typeof TaskAddModal>>()
  104. const onAdd = () => {
  105. TaskAddModalRef.value?.onAdd()
  106. }
  107. const onUpdate = (record: TaskListResp) => {
  108. TaskAddModalRef.value?.onUpdate(record.id)
  109. }
  110. const onDelete = (record: TaskListResp) => {
  111. return handleDelete(() => taskDel(record.id), {
  112. content: `是否确定任务「${record.name}」?`,
  113. showModal: true,
  114. })
  115. }
  116. </script>
  117. <style scoped lang="scss"></style>