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

xingyu4j
1 parent eed6a9a6
Showing 3 changed files with 9 additions and 4 deletions
yudao-ui-admin-vue3/src/hooks/web/useVxeCrudSchemas.ts
yudao-ui-admin-vue3/src/views/system/post/index.vue
yudao-ui-admin-vue3/src/views/system/post/post.data.ts
@@ -16,9 +16,11 @@ import { ComponentOptions } from &#39;@/types/components&#39;
  
 export type VxeCrudSchema = {
   primaryKey?: string // 主键ID
+  primaryTitle?: string // 主键标题 默认为序号
   primaryType?: VxeColumnPropTypes.Type // 不填写为数据库编号 还支持 "seq" | "radio" | "checkbox" | "expand" | "html" | null
   action?: boolean // 是否开启操作栏插槽
-  actionWidth?: string // 操作栏插槽宽度，一般1个 text 类型按钮 60-80
+  actionTitle?: string // 操作栏标题 默认为操作
+  actionWidth?: string // 操作栏插槽宽度，一般2个字带图标 text 类型按钮 50-70
   columns: VxeCrudColumns[]
 }
 type VxeCrudColumns = Omit<VxeTableColumn, 'children'> & {
@@ -169,7 +171,7 @@ const filterTableSchema = (crudSchema: VxeCrudSchema): VxeGridPropTypes.Columns 
   // 主键ID
   if (crudSchema.primaryKey) {
     const tableSchemaItem = {
-      title: t('common.index'),
+      title: crudSchema.primaryTitle ? crudSchema.primaryTitle : t('common.index'),
       field: crudSchema.primaryKey,
       type: crudSchema.primaryType ? crudSchema.primaryType : null,
       width: '50px'
@@ -202,7 +204,7 @@ const filterTableSchema = (crudSchema: VxeCrudSchema): VxeGridPropTypes.Columns 
   // 操作栏插槽
   if (crudSchema.action && crudSchema.action == true) {
     const tableSchemaItem = {
-      title: t('table.action'),
+      title: crudSchema.actionTitle ? crudSchema.actionTitle : t('table.action'),
       field: 'actionbtns',
       width: crudSchema.actionWidth ? crudSchema.actionWidth : '200px',
       slots: {
 <template>
   <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>
         <!-- 操作：新增 -->
         <XButton
@@ -86,6 +86,8 @@ import { FormExpose } from &#39;@/components/Form&#39;
 import * as PostApi from '@/api/system/post'
 import { rules, allSchemas } from './post.data'
  
+import { useDark } from '@vueuse/core'
+const isDark = useDark()
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
@@ -15,6 +15,7 @@ export const rules = reactive({
 // CrudSchema
 const crudSchemas = reactive<VxeCrudSchema>({
   primaryKey: 'id',
+  primaryType: 'seq',
   action: true,
   columns: [
     {