NewLife.QuickVue

<template>
  <Page></Page>
</template>

<script setup lang="ts">
</script>

{
    columns?: {
        // 通用配置
        // 修改哪个位置的配置，不传则全部修改
        in?: ColumnKind | Array<ColumnKind>;
        // 字段名
        prop: string;
        // 字段中文名称
        label?: string;
        // 组件
        component?: keyof FormType;
        // 是否渲染
        if?: boolean;
        // 是否显示
        show?: boolean;
        // 自定义组件插槽名称
        slot?: string;
        // 必填
        required?: boolean;
        // 组件参数
        props?: ColumnProp<ColumnConfig['component']>;
        // 校验规则
        rules?: FormRule[];
        // 排序下标
        index?: number;
        // 所占列数
        col?: number | Col;

        // 以下配置只用于表单
        // 分组
        group?: string;

        // 以下配置只用于表格
        // 宽度
        width?: string | number;
        // 是否勾选显示
        isCheck?: boolean;
        // 是否可排序
        sort?: boolean;
    },
    /** 表格配置（支持element-plus table的所有配置） */
    tableConfig?: Partial<TableProps<EmptyObjectType>> & Partial<TableMoreProps> & {
      api?: (...props: EmptyArrayType) => Promise<EmptyObjectType | Array<EmptyObjectType>>;
      url?: string;
      requestProps?: EmptyObjectType;
      handleWidth?: number;
    },
    /** 详情相关配置 */
    detailConfig?: {
      api?: (...props: EmptyArrayType) => Promise<EmptyObjectType | Array<EmptyObjectType>>;
      url?: string;
      requestProps?: EmptyObjectType | ((row: EmptyObjectType) => EmptyObjectType);
    },
    /** 添加相关配置 */
    addConfig?: {
      api?: (...props: EmptyArrayType) => Promise<EmptyObjectType | Array<EmptyObjectType>>;
      url?: string;
      requestProps?: EmptyObjectType;
    },
    /** 编辑相关配置 */
    editConfig?: {
      api?: (...props: EmptyArrayType) => Promise<EmptyObjectType | Array<EmptyObjectType>>;
      url?: string;
      requestProps?: EmptyObjectType;
    },
    /** 添加修改删除请求点击以及执行前后的回调钩子 */
    onAddClick?: () => void;
    onAddBefore?: (data: EmptyObjectType, addFun: Function) => void;
    onAddAfter?: (data: EmptyObjectType) => void;
    onEditClick?: (data: EmptyObjectType) => void;
    onEditBefore?: (data: EmptyObjectType, editFun: Function) => void;
    onEditAfter?: (data: EmptyObjectType) => void;
    onDelBefore?: (data: EmptyObjectType, delFun: Function) => void;
    onDelAfter?: (data: EmptyObjectType) => void;
}

{
  // 配置相关
  tableColumns: Ref<TableColumn[]>;
  searchColumns: Ref<ColumnConfig[]>;
  editColumns: Ref<ColumnConfig[]>;
  addColumns: Ref<ColumnConfig[]>;
  detailColumns: Ref<ColumnConfig[]>;
  // 表单相关
  searchForm: Ref<EmptyObjectType>;
  infoForm: Ref<EmptyObjectType>;
  // 相关操作
  handle: PageHandle
}

{
	autocomplete: ElAutocomplete,
	cascader: ElCascader,
	checkbox: ElCheckbox,
	checkboxGroup: CheckboxGroup, // 可配置api等参数
	colorPicker: ElColorPicker,
	datePicker: ElDatePicker,
	input: ElInput,
	inputNumber: ElInputNumber,
	radioGroup: RadioGroup, // 可配置api等参数
	radio: ElRadio,
	rate: ElRate,
	select: Select, // 可配置api等参数
	slider: ElSlider,
	switch: ElSwitch,
	timePicker: ElTimePicker,
	timeSelect: ElTimeSelect,
	upload: ElUpload,
	editor: Editor,
}

{
	(LIST = 1), DETAIL, ADD, EDIT, SEARCH;
}

<template>
  <Page>
    <template #mail>
      测试
    </template>
  </Page>
</template>

<script setup lang="ts">
import usePage from '/@/hook/usePage'
import { ColumnKind, usePageApi } from '/@/api/page';
const { columns, forms } = usePage({
  columns: [
    {
      in: ColumnKind.ADD,
      prop: 'sex',
      component: 'radioGroup',
      props: {
        options: [{ id: 1, name: '男' }, { id: 2, name: '女' }]
      },
    },
    {
      in: [ColumnKind.SEARCH, ColumnKind.LIST],
      prop: 'mail',
      slot: 'mail',
    },
    {
      prop: 'departmentID',
      component: 'select',
      props: {
        api: () => usePageApi().getTableData('/admin/department', { pageIndex: 0 })
      }
    },
    {
      prop: 'roleID',
      component: 'select',
      props: {
        url: '/admin/role'
      }
    },
    {
      in: [ColumnKind.ADD, ColumnKind.EDIT],
      prop: 'name',
      props: {
        onChange: (val: string) => {
          forms.data!.mail = val
          columns.add!.find(item => item.prop === 'sex')!.if = !val
        }
      }
    }
  ]
})
</script>