huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-30 11:11:55 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: 添加 序号和操作栏标题

Browse Source
This commit is contained in:
xingyu4j 2022-11-16 12:34:08 +08:00
parent eed6a9a689
commit f4525f7a0a
3 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
yudao-ui-admin-vue3/src/hooks/web/useVxeCrudSchemas.ts
View File

@ -16,9 +16,11 @@ import { ComponentOptions } from '@/types/components'
export type VxeCrudSchema = { export type VxeCrudSchema = {
primaryKey?: string // 主键ID primaryKey?: string // 主键ID
primaryTitle?: string // 主键标题 默认为序号
primaryType?: VxeColumnPropTypes.Type // 不填写为数据库编号 还支持 "seq" | "radio" | "checkbox" | "expand" | "html" | null primaryType?: VxeColumnPropTypes.Type // 不填写为数据库编号 还支持 "seq" | "radio" | "checkbox" | "expand" | "html" | null
action?: boolean // 是否开启操作栏插槽 action?: boolean // 是否开启操作栏插槽
actionWidth?: string // 操作栏插槽宽度，一般1个 text 类型按钮 60-80 actionTitle?: string // 操作栏标题 默认为操作
actionWidth?: string // 操作栏插槽宽度，一般2个字带图标 text 类型按钮 50-70
columns: VxeCrudColumns[] columns: VxeCrudColumns[]
} }
type VxeCrudColumns = Omit<VxeTableColumn, 'children'> & { type VxeCrudColumns = Omit<VxeTableColumn, 'children'> & {
@ -169,7 +171,7 @@ const filterTableSchema = (crudSchema: VxeCrudSchema): VxeGridPropTypes.Columns
// 主键ID // 主键ID
if (crudSchema.primaryKey) { if (crudSchema.primaryKey) {
const tableSchemaItem = { const tableSchemaItem = {
title: t('common.index'), title: crudSchema.primaryTitle ? crudSchema.primaryTitle : t('common.index'),
field: crudSchema.primaryKey, field: crudSchema.primaryKey,
type: crudSchema.primaryType ? crudSchema.primaryType : null, type: crudSchema.primaryType ? crudSchema.primaryType : null,
width: '50px' width: '50px'
@ -202,7 +204,7 @@ const filterTableSchema = (crudSchema: VxeCrudSchema): VxeGridPropTypes.Columns
// 操作栏插槽 // 操作栏插槽
if (crudSchema.action && crudSchema.action == true) { if (crudSchema.action && crudSchema.action == true) {
const tableSchemaItem = { const tableSchemaItem = {
title: t('table.action'), title: crudSchema.actionTitle ? crudSchema.actionTitle : t('table.action'),
field: 'actionbtns', field: 'actionbtns',
width: crudSchema.actionWidth ? crudSchema.actionWidth : '200px', width: crudSchema.actionWidth ? crudSchema.actionWidth : '200px',
slots: { slots: {

4
yudao-ui-admin-vue3/src/views/system/post/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar" :class="isDark">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -86,6 +86,8 @@ import { FormExpose } from '@/components/Form'
import * as PostApi from '@/api/system/post' import * as PostApi from '@/api/system/post'
import { rules, allSchemas } from './post.data' import { rules, allSchemas } from './post.data'
import { useDark } from '@vueuse/core'
const isDark = useDark()
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量

1
yudao-ui-admin-vue3/src/views/system/post/post.data.ts
View File

@ -15,6 +15,7 @@ export const rules = reactive({
// CrudSchema // CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({ const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id', primaryKey: 'id',
primaryType: 'seq',
action: true, action: true,
columns: [ columns: [
{ {