@corgicoding-el/page-search-table

页面搜索表格，请优先阅读 DataFormGrid 和 DataTableGrid 的内容。

• DataFormGrid
• DataTableGrid

props

import type { FormGridConfig } from '@corgicoding-el/data-form-grid';
import type {
  DataTableGridProps,
  ColumnType,
  ActionType
} from '@corgicoding-el/data-table-grid';

export interface PageSearchTableProps {
  url: string;
  data?: Array<any>;
  dgId?: number;
  fields?: Array<FormGridConfig>; // 表单搜索配置
  columns: Array<ColumnType>; // 列表显示字段
  actions?: Array<ActionType>;
  defaultQuery?: any; // 默认参数
  searchToQuery?: (searchForm?: any) => any; // 搜索参数转译
  submitSpan?: number; // 提交的按钮区域大小
  submitJustify?: 'start' | 'end' | 'center';
  noAutoHeight?: boolean;
  fieldOptions?: {
    configs?: Array<FormGridConfig>;
    labelWidth?: string | number;
    labelPosition?: 'left' | 'right' | 'top';
    disabled?: boolean;
    formName?: string;
    type?: 'text' | 'form';
  }; // 表单组件的配置
  height?: any; // 高度
  noActionHeader?: boolean; // 无操作头边距
  noCardStyle?: boolean; // 无卡片风格划分
  tableOptions?: DataTableGridProps;
  tableEvents?: any;
  heightSub?: number;
  ignoreGlobal?: boolean; // 无损全局的列表配置
  hasColConfig?: boolean; // 是否有配置按钮
  justTable?: boolean; // 仅表格
  layout?: string;
  /**
   * @deprecated 已废弃
   */
  debuggerMode?: boolean;
  immediateLoad?: boolean;
  actionShowInSearch?: boolean;
  actionHeaderSpan?: number;
}

默认参数

const props = withDefaults(defineProps<PageSearchTableProps>(), {
  actionShowInSearch: false,
  actionHeaderSpan: undefined,
  headerTeleport: undefined,
  dgId: -1,
  data: undefined,
  layout: undefined,
  immediateLoad: true,
  fields: () => [],
  columns: () => [],
  actions: () => [],
  submitJustify: 'end',
  defaultQuery: () => ({}),
  searchToQuery: undefined,
  submitSpan: undefined,
  fieldOptions: () => ({}),
  tableOptions: () => ({}) as any,
  tableEvents: () => ({}),
  hasColConfig: true,
  height: undefined,
  heightSub: 110
});

emits

无

expose

defineExpose({
  loadSearch,
  resetSearch,
  reloadSearch: reloadTableFn,
  calTableHeight,
  queryParams,
  tableColumns: tableColumns,
  tableRef
});

用例参考

<script setup lang="ts">
import { PageSearchTable } from '@corgicoding/el-libs';
import type { FormGridConfig, ColumnType } from '@corgicoding/el-libs/types.d';

import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';
import { cloneDeep } from 'lodash-es';

const { t, locale } = useI18n();

const props = defineProps<{
  logType?: number;
  height?: number;
}>();

const sortQueryParams = reactive<{
  column?: string;
  order?: string;
}>({
  column: 'createTime',
  order: 'desc'
});

const searchConfigs = computed<Array<FormGridConfig>>(() => [
  {
    name: t('system.logContent'),
    key: 'keyWord',
    span: 7
  },
  {
    type: 'daterange',
    key: 'createTime',
    name: t('system.createTime'),
    span: 6,
    componentOptions: {
      startPlaceholder: t('form.startDate'),
      endPlaceholder: t('form.endDate')
    }
  },
  // {
  //   name: t('system.source'),
  //   type: 'select',
  //   key: 'logSource',
  //   span: 4,
  //   options: [
  //     {
  //       label: 'PC',
  //       value: 'PC'
  //     },
  //     {
  //       label: t('system.wechatApp'),
  //       value: '小程序'
  //     }
  //   ]
  // },
  {
    name: t('button.action'),
    key: 'operator',
    type: 'slot',
    span: 6
  }
]);

const tableColumns = computed<Array<ColumnType>>(() => [
  {
    prop: 'expand',
    name: '',
    width: '60',
    type: 'expand',
    slotName: 'expand',
    fixed: true,
    align: 'left',
    hidden: props.logType === 1
  },
  {
    prop: 'logContent',
    name: t('system.logContent'),
    width: 160
  },
  {
    prop: 'userid',
    name: t('system.actionUserId'),
    width: 120
  },
  {
    prop: 'username',
    name: t('system.actionUsername'),
    width: locale.value === 'en' ? 145 : 120
  },
  {
    prop: 'ip',
    name: 'IP',
    width: 150
  },
  {
    prop: 'costTime',
    name: t('system.costTime'),
    width: locale.value === 'en' ? 145 : 120,
    formatter(row, column, cellValue) {
      return cellValue ? cellValue + 'ms' : '-';
    }
  },
  {
    prop: 'logType',
    name: t('system.logType'),
    width: 120,
    formatter: row => {
      return row.logType === 1 ? t('system.loginLog') : t('system.actionLog');
    }
  },
  // {
  //   prop: 'logSource',
  //   name: t('system.source'),
  //   width: 90
  // },
  {
    prop: 'createTime',
    name: t('system.createTime'),
    width: 200,
    sortable: 'custom'
  }
]);

const tableRef = ref<InstanceType<typeof PageSearchTable>>();

const tableEvent = {
  sortChange: ({ prop, order }) => {
    console.log('123');

    if (order) {
      sortQueryParams.column = prop;
      sortQueryParams.order = order === 'ascending' ? 'asc' : 'desc';
    } else {
      sortQueryParams.column = undefined;
      sortQueryParams.order = undefined;
    }

    tableRef.value?.loadSearch();
  }
};

/**
 * @description 搜索方法转化
 */
const searchToQuery = (defaultValue: any) => {
  const queryParams = Object.assign(cloneDeep(defaultValue), sortQueryParams);
  if (
    queryParams.createTime instanceof Array &&
    queryParams.createTime.length > 0
  ) {
    queryParams.createTime_begin = queryParams.createTime[0];
    queryParams.createTime_end = queryParams.createTime[1];
    queryParams.createTime = undefined;
  } else {
    queryParams.createTime_begin = undefined;
    queryParams.createTime_end = undefined;
  }

  return queryParams;
};
</script>

<template>
  <div
    class="mt-4 h-full relative"
    :style="{
      height: `${height ? height - 72 : 527}px`
    }"
  >
    <PageSearchTable
      ref="tableRef"
      url="/sys/log/list"
      :no-card-style="true"
      :no-action-header="true"
      :columns="tableColumns"
      :default-query="{
        logType
      }"
      :search-to-query="searchToQuery"
      :fields="searchConfigs"
      :table-options="{
        eventMethods: tableEvent
      }"
    >
      <template #expand="{ row }">
        <div v-if="row.method" class="w-full">
          <div class="p-2 px-4">
            <div class="mb-2">
              <el-badge style="height: 12px" is-dot type="success"></el-badge>
              {{ t('system.requestMethod') }}:
            </div>
            <div class="pre-text">{{ row.method }}</div>
          </div>
          <div v-if="row.requestParam" class="p-4">
            <div class="mb-2">
              <el-badge style="height: 12px" is-dot type="primary"></el-badge>
              {{ t('system.requestParams') }}:
            </div>
            <div class="pre-text">{{ row.requestParam }}</div>
          </div>
        </div>
      </template>
    </PageSearchTable>
  </div>
</template>

<style scoped>
.pre-text {
  white-space: pre-wrap;
  background-color: #f7f7f7;
  border: 1px solid #eaeaea;
  padding: 12px;
  color: #4a4a4a;
  overflow: auto;
}
</style>