iotlcm/vue/aaa.md

import { h, ref } from 'vue';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { getPopupContainer } from '@vben/utils';
import type { DescItem } from '#/components/description';
import { cloneDeep } from 'lodash-es';
import type { VbenFormSchema } from '@vben/common-ui';
import { z } from '@vben/common-ui';
import { renderDict, renderPopoverMemberSumma, type MemberSumma } from '#/utils';
import { getDictOptions } from '#/utils/dict';
import FormOptions from '#/constants/FormOption';

export class State {
  public id = 0; // 主键ID
  public apiName = ''; // 接口名称
  public apiCode = ''; // 接口权限标识
  public method = ''; // 请求方法：GET/POST/PUT/DELETE
  public path = ''; // 接口路径
  public status = 0; // 状态：0启用，1停用
  public version = ''; // 接口版本
  public remark = ''; // 备注
  public tenantId = ''; // 租户ID
  public createdDept = 0; // 创建部门
  public createdBy = 0; // 创建者
  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
  public createdAt = ''; // 创建时间
  public updatedBy = 0; // 更新者
  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
  public updatedAt = ''; // 更新时间

  constructor(state?: Partial<State>) {
    if (state) {
      Object.assign(this, state);
    }
  }
}

export function newState(state: State | Record<string, any> | null): State {
  if (state !== null) {
    if (state instanceof State) {
      return cloneDeep(state);
    }
    return new State(state);
  }
  return new State();
}

// 表单验证规则

// 表格搜索表单
export const querySchema: VbenFormSchema[] = [
  {
				fieldName: 'id',
				component: 'InputNumber',
				label: '主键ID',
				componentProps: {
					placeholder: '请输入主键ID',
					onUpdateValue: (e: any) => {
						console.log(e);
					},   
				},  rules:null,
				formItemClass: 'col-span-1',
			},  {    
			fieldName: 'status',    
			component: 'Select',    
			label: '状态：0启用，1停用',    
			defaultValue: null,    
			componentProps: {    
				placeholder: '请选择状态：0启用，1停用',    
				options: getDictOptions('sys_common_status'),    
				onUpdateValue: (e: any) => {    
					console.log(e);    
				},  
			},
			rules:'selectRequired',
			formItemClass: 'col-span-1',
		},
		  {
				fieldName: 'createdAt',
				component: 'RangePicker',
				label: '创建时间',
				componentProps: {
					type: 'datetimerange',
					clearable: true,
					valueFormat: 'YYYY-MM-DD HH:mm:ss',
					onUpdateValue: (e: any) => {
						console.log(e);
					},   
				},  rules:null,
				formItemClass: 'col-span-1',
			},];

// 表格列
export const columns: VxeGridProps['columns'] = [
  {
    title: '接口名称',
    field: 'apiName',
    align: 'left',
    width: -1,
 },
  {
    title: '接口权限标识',
    field: 'apiCode',
    align: 'left',
    width: -1,
 },
  {
    title: '请求方法',
    field: 'method',
    align: 'left',
    width: -1,
		slots: {
      	default: ({ row }) => {
						return renderDict(row.method, DictEnum.T_METHOD);
					}
				},
  },
  {
    title: '接口路径',
    field: 'path',
    align: 'left',
    width: -1,
 },
 {    
				title: '状态',    field: 'status',    align: 'left',    width: -1, 
				slots: {
      				default: ({ row }) => {
						return renderDict(row.status, DictEnum.GLOBAL_ENABLED);
					}
				},
			},
			  {
    title: '接口版本',
    field: 'version',
    align: 'left',
    width: -1,
 },
 
  { title: '操作', width: 120, slots: { default: 'action' } },
];

// 表格列接口
export interface RowType {
  id: number;
  apiName: string;
  apiCode: string;
  method: string;
  path: string;
  status: number;
  version: string;
  remark: string;
  tenantId: string;
  createdDept: number;
  createdBy: number;
  createdAt: string;
  updatedBy: number;
  updatedAt: string;
};

// 查看字段列表
export const viewSchema: DescItem[] = [
  {  field: 'apiName',  label: '接口名称'},
  {  field: 'apiCode',  label: '接口权限标识'},
  {  field: 'method',  label: '请求方法：GET/POST/PUT/DELETE'},
  {  field: 'path',  label: '接口路径'},
  {
				field: 'status',
				label: '状态',
				render: (val) => renderDict(val, 'sys_common_status'),
			},
  {  field: 'version',  label: '接口版本'},
  {  field: 'remark',  label: '备注'},
];

// 编辑字段列表
export const editSchema: VbenFormSchema[] = [
 {
			fieldName: 'id',
			component: 'Input',
			label: '主键ID',
			dependencies: {   show: () => false,    triggerFields: [''],   },
			componentProps: {
				placeholder: '',
				onUpdateValue: (e: any) => {
					console.log(e);
				},   
			},
			formItemClass: 'col-span-1',
		},  {
		fieldName: 'apiName',
		component: 'Input',
		label: '接口名称',
		componentProps: {
			placeholder: '请输入接口名称',
			onUpdateValue: (e: any) => {
				console.log(e);
			},   
		},  
		rules:'required',
		formItemClass: 'col-span-1',
	},  {
		fieldName: 'apiCode',
		component: 'Input',
		label: '接口权限标识',
		componentProps: {
			placeholder: '请输入接口权限标识',
			onUpdateValue: (e: any) => {
				console.log(e);
			},   
		},  
		rules:'required',
		formItemClass: 'col-span-1',
	},  {
		fieldName: 'method',
		component: 'Select',
		label: '请求方法',
		componentProps: {
			placeholder: '请选择请求方法',
			options: getDictOptions(DictEnum.T_METHOD ),
			onUpdateValue: (e: any) => {
				console.log(e);
			},   
		},  
		rules:'required',
		formItemClass: 'col-span-1',
	},  {
		fieldName: 'path',
		component: 'Input',
		label: '接口路径',
		componentProps: {
			placeholder: '请输入接口路径',
			onUpdateValue: (e: any) => {
				console.log(e);
			},   
		},  
		rules:'required',
		formItemClass: 'col-span-1',
	},  
	{    
		fieldName: 'status',    
		component: 'Switch',    
		label: '状态',    
		defaultValue: 0,    
		componentProps: FormOptions.Component.SwitchEnabled(),    
	},
	{
		fieldName: 'version',
		component: 'Input',
		label: '接口版本',
		componentProps: {
			placeholder: '请输入接口版本',
			onUpdateValue: (e: any) => {
				console.log(e);
			},   
		},  
		rules:'required',
		formItemClass: 'col-span-1',
	},  {
		fieldName: 'remark',
		component: 'Input',
		label: '备注',
		componentProps: {
			placeholder: '请输入备注',
			onUpdateValue: (e: any) => {
				console.log(e);
			},   
		},  
		rules:null,
		formItemClass: 'col-span-1',
	}, ];