123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- <template>
- <div class="table-page">
- <GiTable
- row-key="id"
- title="任务列表"
- :data="dataList"
- :columns="columns"
- :loading="loading"
- :scroll="{ x: '100%', y: '100%', minWidth: 1200 }"
- :pagination="pagination"
- :disabled-tools="['size']"
- :disabled-column-keys="['title']"
- @refresh="search"
- >
- <template #toolbar-left>
- <a-input-search v-model="queryForm.name" placeholder="任务名称" allow-clear @search="search" />
- <a-select
- v-model="queryForm.categoryCode"
- :options="TaskStatusList"
- placeholder="请选择任务分类"
- allow-clear
- style="width: 180px"
- @change="search"
- />
- <a-button @click="reset">
- <template #icon><icon-refresh /></template>
- <template #default>重置</template>
- </a-button>
- </template>
- <template #toolbar-right>
- <a-button type="primary" @click="onAdd">
- <template #icon><icon-plus /></template>
- <template #default>新增</template>
- </a-button>
- </template>
- <template #taskIcon="{ record }">
- <a-avatar v-if="record.taskIcon">
- <img :src="record.taskIcon" />
- </a-avatar>
- </template>
- <template #passengerFlowWay="{ record }">
- <GiCellTag :value="record.categoryCode" :dict="task_type" />
- </template>
- <template #action="{ record }">
- <a-space>
- <a-link title="修改" @click="onUpdate(record)">修改</a-link>
- <a-link status="danger" title="删除" @click="onDelete(record)"> 删除 </a-link>
- </a-space>
- </template>
- </GiTable>
- <TaskAddModal ref="TaskAddModalRef" @save-success="search"></TaskAddModal>
- </div>
- </template>
- <script setup lang="ts">
- import TaskAddModal from './taskAddModal.vue'
- import type { TableInstanceColumns } from '@/components/GiTable/type'
- import { useTable } from '@/hooks'
- import { isMobile } from '@/utils'
- import type { TaskListResp, TaskQuery } from '@/apis/task/type'
- import { listTask, taskDel } from '@/apis/task/taskhome'
- import { TaskStatusList } from '@/constant/common'
- import { useDict } from '@/hooks/app'
- defineOptions({ name: 'Jliangli' })
- const queryForm = reactive<TaskQuery>({} as TaskQuery)
- const { task_type } = useDict('task_type')
- const {
- tableData: dataList,
- loading,
- pagination,
- search,
- handleDelete,
- } = useTable((page) => listTask({ ...queryForm, ...page }), { immediate: true })
- const columns: TableInstanceColumns[] = [
- {
- title: '序号',
- width: 66,
- align: 'center',
- render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
- },
- { title: '任务图标', dataIndex: 'taskIcon', slotName: 'taskIcon', align: 'center', width: 180 },
- { title: '任务分类', dataIndex: 'categoryCode', slotName: 'categoryCode', align: 'center', width: 180 },
- { title: '名称', dataIndex: 'name', slotName: 'name', align: 'center', width: 180 },
- { title: '金币数量', dataIndex: 'goldCoin', slotName: 'goldCoin', align: 'center', width: 180 },
- { title: '创建时间', dataIndex: 'createTime', slotName: 'createTime', align: 'center', width: 180 },
- {
- title: '操作',
- dataIndex: 'action',
- slotName: 'action',
- width: 350,
- align: 'center',
- fixed: !isMobile() ? 'right' : undefined,
- show: true,
- },
- ]
- const reset = () => {
- queryForm.name = undefined
- queryForm.taskType = undefined
- queryForm.categoryCode = undefined
- search()
- }
- const TaskAddModalRef = ref<InstanceType<typeof TaskAddModal>>()
- const onAdd = () => {
- TaskAddModalRef.value?.onAdd()
- }
- const onUpdate = (record: TaskListResp) => {
- TaskAddModalRef.value?.onUpdate(record.id)
- }
- const onDelete = (record: TaskListResp) => {
- return handleDelete(() => taskDel(record.id), {
- content: `是否确定任务「${record.name}」?`,
- showModal: true,
- })
- }
- </script>
- <style scoped lang="scss"></style>
|