mirror of
https://github.com/bufanyun/hotgo.git
synced 2025-08-29 08:14:33 +08:00
v2.0
This commit is contained in:
孟帅
83
web/src/views/comp/table/CellColumns.ts
Normal file
83
web/src/views/comp/table/CellColumns.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
import { h } from 'vue';
|
||||
import { NAvatar } from 'naive-ui';
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
key: 'id',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '编码',
|
||||
key: 'no',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name',
|
||||
editComponent: 'NInput',
|
||||
// 默认必填校验
|
||||
editRule: true,
|
||||
edit: true,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '头像',
|
||||
key: 'avatar',
|
||||
width: 100,
|
||||
render(row) {
|
||||
return h(NAvatar, {
|
||||
size: 48,
|
||||
src: row.avatar,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
editComponent: 'NSelect',
|
||||
editComponentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '广东省',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '浙江省',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
edit: true,
|
||||
width: 200,
|
||||
ellipsis: false,
|
||||
},
|
||||
{
|
||||
title: '开始日期',
|
||||
key: 'beginTime',
|
||||
edit: true,
|
||||
width: 160,
|
||||
editComponent: 'NDatePicker',
|
||||
editComponentProps: {
|
||||
type: 'datetime',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
},
|
||||
ellipsis: false,
|
||||
},
|
||||
{
|
||||
title: '结束日期',
|
||||
key: 'endTime',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'date',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '停留时间',
|
||||
key: 'time',
|
||||
width: 80,
|
||||
},
|
||||
];
|
||||
113
web/src/views/comp/table/basic.vue
Normal file
113
web/src/views/comp/table/basic.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicTable
|
||||
title="表格列表"
|
||||
titleTooltip="这是一个提示"
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.id"
|
||||
ref="actionRef"
|
||||
:actionColumn="actionColumn"
|
||||
:scroll-x="1360"
|
||||
@update:checked-row-keys="onCheckedRow"
|
||||
>
|
||||
<template #toolbar>
|
||||
<n-button type="primary" @click="reloadTable">刷新数据</n-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, h } from 'vue';
|
||||
import { BasicTable, TableAction } from '@/components/Table';
|
||||
import { getTableList } from '@/api/table/list';
|
||||
import { columns } from './basicColumns';
|
||||
import { useDialog, useMessage } from 'naive-ui';
|
||||
import { DeleteOutlined, EditOutlined } from '@vicons/antd';
|
||||
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
const actionRef = ref();
|
||||
|
||||
const params = reactive({
|
||||
pageSize: 5,
|
||||
name: 'xiaoMa',
|
||||
});
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 150,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
render(record) {
|
||||
return h(TableAction as any, {
|
||||
style: 'text',
|
||||
actions: createActions(record),
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
function createActions(record) {
|
||||
return [
|
||||
{
|
||||
label: '删除',
|
||||
type: 'error',
|
||||
// 配置 color 会覆盖 type
|
||||
color: 'red',
|
||||
icon: DeleteOutlined,
|
||||
onClick: handleDelete.bind(null, record),
|
||||
// 根据业务控制是否显示 isShow 和 auth 是并且关系
|
||||
ifShow: () => {
|
||||
return true;
|
||||
},
|
||||
// 根据权限控制是否显示: 有权限，会显示，支持多个
|
||||
auth: ['basic_list'],
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
type: 'primary',
|
||||
icon: EditOutlined,
|
||||
onClick: handleEdit.bind(null, record),
|
||||
ifShow: () => {
|
||||
return true;
|
||||
},
|
||||
auth: ['basic_list'],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const loadDataTable = async (res) => {
|
||||
return await getTableList({ ...params, ...res });
|
||||
};
|
||||
|
||||
function onCheckedRow(rowKeys) {
|
||||
console.log(rowKeys);
|
||||
}
|
||||
|
||||
function reloadTable() {
|
||||
actionRef.value.reload();
|
||||
}
|
||||
|
||||
function handleDelete(record) {
|
||||
console.log(record);
|
||||
dialog.info({
|
||||
title: '提示',
|
||||
content: `您想删除${record.name}`,
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {
|
||||
message.success('删除成功');
|
||||
},
|
||||
onNegativeClick: () => {},
|
||||
});
|
||||
}
|
||||
|
||||
function handleEdit(record) {
|
||||
console.log(record);
|
||||
message.success('您点击了编辑按钮');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
72
web/src/views/comp/table/basicColumns.ts
Normal file
72
web/src/views/comp/table/basicColumns.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
import { h } from 'vue';
|
||||
import { NAvatar, NTag } from 'naive-ui';
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
key: 'id',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '编码',
|
||||
key: 'no',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '头像',
|
||||
key: 'avatar',
|
||||
width: 100,
|
||||
render(row) {
|
||||
return h(NAvatar, {
|
||||
size: 48,
|
||||
src: row.avatar,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '开始日期',
|
||||
key: 'beginTime',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '结束日期',
|
||||
key: 'endTime',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
render(row) {
|
||||
return h(
|
||||
NTag,
|
||||
{
|
||||
type: row.status ? 'success' : 'error',
|
||||
},
|
||||
{
|
||||
default: () => (row.status ? '启用' : '禁用'),
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'date',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '停留时间',
|
||||
key: 'time',
|
||||
width: 80,
|
||||
},
|
||||
];
|
||||
59
web/src/views/comp/table/editCell.vue
Normal file
59
web/src/views/comp/table/editCell.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicTable
|
||||
title="表格列表"
|
||||
titleTooltip="这是一个提示"
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.id"
|
||||
ref="actionRef"
|
||||
@edit-end="editEnd"
|
||||
@edit-change="onEditChange"
|
||||
@update:checked-row-keys="onCheckedRow"
|
||||
:scroll-x="1360"
|
||||
>
|
||||
<template #toolbar>
|
||||
<n-button type="primary" @click="reloadTable">刷新数据</n-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { BasicTable } from '@/components/Table';
|
||||
import { getTableList } from '@/api/table/list';
|
||||
import { columns } from './CellColumns';
|
||||
|
||||
const actionRef = ref();
|
||||
const params = reactive({
|
||||
pageSize: 5,
|
||||
name: 'xiaoMa',
|
||||
});
|
||||
|
||||
function onEditChange({ column, value, record }) {
|
||||
if (column.key === 'id') {
|
||||
record.editValueRefs.name4.value = `${value}`;
|
||||
}
|
||||
console.log(column, value, record);
|
||||
}
|
||||
|
||||
const loadDataTable = async (res) => {
|
||||
return await getTableList({ ...params, ...res });
|
||||
};
|
||||
|
||||
function onCheckedRow(rowKeys) {
|
||||
console.log(rowKeys);
|
||||
}
|
||||
|
||||
function reloadTable() {
|
||||
console.log(actionRef.value);
|
||||
actionRef.value.reload();
|
||||
}
|
||||
|
||||
function editEnd({ record, index, key, value }) {
|
||||
console.log(value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
114
web/src/views/comp/table/editRow.vue
Normal file
114
web/src/views/comp/table/editRow.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicTable
|
||||
title="表格列表"
|
||||
titleTooltip="这是一个提示"
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.id"
|
||||
ref="actionRef"
|
||||
:actionColumn="actionColumn"
|
||||
@edit-end="editEnd"
|
||||
@edit-change="onEditChange"
|
||||
@update:checked-row-keys="onCheckedRow"
|
||||
:scroll-x="1590"
|
||||
>
|
||||
<template #toolbar>
|
||||
<n-button type="primary" @click="reloadTable">刷新数据</n-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, h } from 'vue';
|
||||
import { BasicTable, TableAction } from '@/components/Table';
|
||||
import { getTableList } from '@/api/table/list';
|
||||
import { columns } from './rowColumns';
|
||||
|
||||
const actionRef = ref();
|
||||
const currentEditKeyRef = ref('');
|
||||
const params = reactive({
|
||||
pageSize: 5,
|
||||
name: 'xiaoMa',
|
||||
});
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 150,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
render(record) {
|
||||
return h(TableAction, {
|
||||
style: 'button',
|
||||
actions: createActions(record),
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
function handleEdit(record) {
|
||||
currentEditKeyRef.value = record.key;
|
||||
record.onEdit?.(true);
|
||||
}
|
||||
|
||||
function handleCancel(record) {
|
||||
currentEditKeyRef.value = '';
|
||||
record.onEdit?.(false, false);
|
||||
}
|
||||
|
||||
function onEditChange({ column, value, record }) {
|
||||
if (column.key === 'id') {
|
||||
record.editValueRefs.name4.value = `${value}`;
|
||||
}
|
||||
console.log(column, value, record);
|
||||
}
|
||||
|
||||
async function handleSave(record) {
|
||||
const pass = await record.onEdit?.(false, true);
|
||||
if (pass) {
|
||||
currentEditKeyRef.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
function createActions(record) {
|
||||
if (!record.editable) {
|
||||
return [
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
];
|
||||
} else {
|
||||
return [
|
||||
{
|
||||
label: '保存',
|
||||
onClick: handleSave.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
onClick: handleCancel.bind(null, record),
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
const loadDataTable = async (res) => {
|
||||
return await getTableList({ ...params, ...res });
|
||||
};
|
||||
|
||||
function onCheckedRow(rowKeys) {
|
||||
console.log(rowKeys);
|
||||
}
|
||||
|
||||
function reloadTable() {
|
||||
console.log(actionRef.value);
|
||||
actionRef.value.reload();
|
||||
}
|
||||
|
||||
function editEnd({ record, index, key, value }) {
|
||||
console.log(value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
97
web/src/views/comp/table/rowColumns.ts
Normal file
97
web/src/views/comp/table/rowColumns.ts
Normal file
@@ -0,0 +1,97 @@
|
||||
import { h } from 'vue';
|
||||
import { NAvatar } from 'naive-ui';
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
key: 'id',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '编码',
|
||||
key: 'no',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name',
|
||||
editComponent: 'NInput',
|
||||
editRow: true,
|
||||
// 默认必填校验
|
||||
editRule: true,
|
||||
edit: true,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '头像',
|
||||
key: 'avatar',
|
||||
width: 100,
|
||||
render(row) {
|
||||
return h(NAvatar, {
|
||||
size: 48,
|
||||
src: row.avatar,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
editRow: true,
|
||||
editComponent: 'NSelect',
|
||||
editComponentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '广东省',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '浙江省',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
edit: true,
|
||||
width: 200,
|
||||
ellipsis: false,
|
||||
},
|
||||
{
|
||||
title: '开始日期',
|
||||
key: 'beginTime',
|
||||
editRow: true,
|
||||
edit: true,
|
||||
width: 240,
|
||||
editComponent: 'NDatePicker',
|
||||
editComponentProps: {
|
||||
type: 'datetime',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
},
|
||||
ellipsis: false,
|
||||
},
|
||||
{
|
||||
title: '结束日期',
|
||||
key: 'endTime',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
editRow: true,
|
||||
edit: true,
|
||||
width: 100,
|
||||
editComponent: 'NSwitch',
|
||||
editValueMap: (value) => {
|
||||
return value ? '启用' : '禁用';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'date',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '停留时间',
|
||||
key: 'time',
|
||||
width: 80,
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user