133 lines
3.7 KiB
Vue
133 lines
3.7 KiB
Vue
<template>
|
|
<div class="art-full-height">
|
|
<!-- 搜索面板 -->
|
|
<TableSearch v-model="searchForm" @search="handleSearch" @reset="resetSearchParams" />
|
|
|
|
<ElCard class="art-table-card" shadow="never">
|
|
<!-- 表格头部 -->
|
|
<ArtTableHeader v-model:columns="columnChecks" :loading="loading" @refresh="refreshData">
|
|
<template #left>
|
|
<ElSpace wrap>
|
|
<!-- <ElButton v-permission="'dice:config:index:save'" @click="showDialog('add')" v-ripple>-->
|
|
<!-- <template #icon>-->
|
|
<!-- <ArtSvgIcon icon="ri:add-fill" />-->
|
|
<!-- </template>-->
|
|
<!-- 新增-->
|
|
<!-- </ElButton>-->
|
|
<!-- <ElButton-->
|
|
<!-- v-permission="'dice:config:index:destroy'"-->
|
|
<!-- :disabled="selectedRows.length === 0"-->
|
|
<!-- @click="deleteSelectedRows(api.delete, refreshData)"-->
|
|
<!-- v-ripple-->
|
|
<!-- >-->
|
|
<!-- <template #icon>-->
|
|
<!-- <ArtSvgIcon icon="ri:delete-bin-5-line" />-->
|
|
<!-- </template>-->
|
|
<!-- 删除-->
|
|
<!-- </ElButton>-->
|
|
</ElSpace>
|
|
</template>
|
|
</ArtTableHeader>
|
|
|
|
<!-- 表格 -->
|
|
<ArtTable
|
|
ref="tableRef"
|
|
rowKey="id"
|
|
:loading="loading"
|
|
:data="data"
|
|
:columns="columns"
|
|
:pagination="pagination"
|
|
@sort-change="handleSortChange"
|
|
@selection-change="handleSelectionChange"
|
|
@pagination:size-change="handleSizeChange"
|
|
@pagination:current-change="handleCurrentChange"
|
|
>
|
|
<!-- 操作列 -->
|
|
<template #operation="{ row }">
|
|
<div class="flex gap-2">
|
|
<SaButton
|
|
v-permission="'dice:config:index:update'"
|
|
type="secondary"
|
|
@click="showDialog('edit', row)"
|
|
/>
|
|
<!-- <SaButton-->
|
|
<!-- v-permission="'dice:config:index:destroy'"-->
|
|
<!-- type="error"-->
|
|
<!-- @click="deleteRow(row, api.delete, refreshData)"-->
|
|
<!-- />-->
|
|
</div>
|
|
</template>
|
|
</ArtTable>
|
|
</ElCard>
|
|
|
|
<!-- 编辑弹窗 -->
|
|
<EditDialog
|
|
v-model="dialogVisible"
|
|
:dialog-type="dialogType"
|
|
:data="dialogData"
|
|
@success="refreshData"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useTable } from '@/hooks/core/useTable'
|
|
import { useSaiAdmin } from '@/composables/useSaiAdmin'
|
|
import api from '../../api/config/index'
|
|
import TableSearch from './modules/table-search.vue'
|
|
import EditDialog from './modules/edit-dialog.vue'
|
|
|
|
// 搜索表单
|
|
const searchForm = ref({
|
|
group: undefined,
|
|
title: undefined,
|
|
name: undefined
|
|
})
|
|
|
|
// 搜索处理
|
|
const handleSearch = (params: Record<string, any>) => {
|
|
Object.assign(searchParams, params)
|
|
getData()
|
|
}
|
|
|
|
// 表格配置
|
|
const {
|
|
columns,
|
|
columnChecks,
|
|
data,
|
|
loading,
|
|
getData,
|
|
searchParams,
|
|
pagination,
|
|
resetSearchParams,
|
|
handleSortChange,
|
|
handleSizeChange,
|
|
handleCurrentChange,
|
|
refreshData
|
|
} = useTable({
|
|
core: {
|
|
apiFn: api.list,
|
|
columnsFactory: () => [
|
|
{ type: 'selection' },
|
|
{ prop: 'group', label: '分组', minWidth: 140 },
|
|
{ prop: 'title', label: '标题', minWidth: 160 },
|
|
{ prop: 'name', label: '配置名称' },
|
|
{ prop: 'value', label: '值', minWidth: 240 },
|
|
{ prop: 'operation', label: '操作', width: 100, fixed: 'right', useSlot: true }
|
|
]
|
|
}
|
|
})
|
|
|
|
// 编辑配置
|
|
const {
|
|
dialogType,
|
|
dialogVisible,
|
|
dialogData,
|
|
showDialog,
|
|
deleteRow,
|
|
deleteSelectedRows,
|
|
handleSelectionChange,
|
|
selectedRows
|
|
} = useSaiAdmin()
|
|
</script>
|