<template><!-- 弹出抽屉组件，如果想改为弹窗，Drawer 换为 Modal 即可快速替换 --><BasicDrawerv-bind="$attrs" --传递来自父组件的属性:showFooter="true" --显示弹窗底部按钮组:okAuth="'test:testData:edit'" --提交按钮权限，控制按钮是否显示@register="registerDrawer" --弹窗后的回调方法@ok="handleSubmit" --提交按钮调用方法width="60%" --弹窗宽度，支持按比例><!-- 弹窗标题 --><template#title><Icon:icon="getTitle.icon" class="pr-1 m-1" /> -- 图标 <span>{{getTitle.value }} </span> -- 标题名称 </template><!-- 表单组件 --><BasicForm@register="registerForm"><!-- 定义表单控件插槽、个性化表单控件，如：这是一个表单子表插槽 --><template#testDataChildList><BasicTable@register="registerTestDataChildTable" @row-click="handleTestDataChildRowClick" /><!-- 子表新增按钮 --><a-buttonclass="mt-2" @click="handleTestDataChildAdd"><Iconicon="i-ant-design:plus-circle-outlined" />{{t('新增') }} </a-button></template></BasicForm></BasicDrawer></template><!-- script name: 当前组件名称（与路由名一致，如果不一致会页面缓存失效）--><scriptlang="ts" setupname="ViewsTestTestDataForm">// 导入当前用到的对象，部分省略import{ref,unref,computed}from'vue';import{officeTreeData}from'/@/api/sys/office';// 页面事件定义constemit=defineEmits(['success','register']);// 国际化方法调用，参数是国际化编码的根路径const{ t }=useI18n('test.testData');// 消息弹窗方法const{ showMessage }=useMessage();// 路由meta信息const{ meta }=unref(router.currentRoute);// 当前页面数据记录constrecord=ref<Recordable>({});// 当前页面标题定义，来自菜单管理定义constgetTitle=computed(()=>({icon: meta.icon||'ant-design:book-outlined',value: record.value.isNewRecord ? t('新增数据') : t('编辑数据'),}));// 输入表单控件定义constinputFormSchemas: FormSchema[]=[{label: t('单行文本'),// 控件前面的页签field: 'testInput',// 字段提交参数名component: 'Input',// 控件类型（可自定义，更多查看 componentMap.ts ）componentProps: {// 组件属性定义maxlength: 200,},required: true,// 表单验证，是否必填（快速定义）rules: [// 如果不只是必填，需要通过 rules 定义，举例：{required: true},{min: 4,max: 20,message: t('请输入长度在 4 到 20 个字符之间')},{pattern: /^[\u0391-\uFFE5\w]+$/,message: t('不能输入特殊字符')},{validator(_rule,value){returnnewPromise((resolve,reject)=>{if(!value||value==='')returnresolve();// 远程验证，访问后台校验数据是否重复checkTestInput(record.value.testInput||'',value).then((res)=>(res ? resolve() : reject(t('数据已存在')))).catch((err)=>reject(err.message||t('验证失败')));});},trigger: 'blur',// 如果是远程验证，可以减少请求频率},],colProps: {lg: 24,md: 24},// 栅格布局（遵循 Ant Design 风格）},{label: t('下拉框'),field: 'testSelect',component: 'Select',// 选择框还有 RadioGroup、CheckboxGroupcomponentProps: {dictType: 'sys_menu_type',// 下拉框选项数据（支持直接指定字典类型）allowClear: true,// 启用空选项，可清空选择mode: 'multiple',// 下拉框模块，启用多选},},{label: t('日期选择'),field: 'testDate',component: 'DatePicker',componentProps: {format: 'YYYY-MM-DD',// 日期选择showTime: false,// 关闭时间选择},},{label: t('日期时间'),field: 'testDatetime',component: 'DatePicker',componentProps: {format: 'YYYY-MM-DD HH:mm',// 日期时间选择showTime: {format: 'HH:mm'},// 设置时间的格式},},{label: t('用户选择'),field: 'testUser.userCode',fieldLabel: 'testUser.userName',//【支持返回，如下拉框或树选择的节点名】component: 'TreeSelect',// 树选择控件componentProps: {api: officeTreeData,// 数据源 API 定义，支持 ztree 格式params: {isLoadUser: true,userIdPrefix: ''},// API 参数canSelectParent: false,// 是否允许选择父级allowClear: true,},},{label: t('子表数据'),field: 'testDataChildList',component: 'Input',colProps: {lg: 24,md: 24},slot: 'testDataChildList',// 指定插槽、个性化控件内容},];// 当前表单的参数定义const[registerForm,{ resetFields, setFieldsValue, validate }]=useForm({labelWidth: 120,// 控件前面的标签宽度schemas: inputFormSchemas,// 控件定义列表baseColProps: {lg: 12,md: 24},// 控件默认栅格布局方式（响应式）});// 当前表单子表格定义const[registerTestDataChildTable,testDataChildTable]=useTable({actionColumn: {// 子表的操作列定义width: 60,// 操作列宽度actions: (record: Recordable)=>[{icon: 'i-ant-design:delete-outlined',color: 'error',popConfirm: {// 是否需要启用确认框title: '是否确认删除',confirm: handleTestDataChildDelete.bind(this,record),},auth: 'sys:empUser:edit',// 按钮权限（可控制按钮是否显示）},],},rowKey: 'id',// 子表主键名pagination: false,// 关闭分页bordered: true,// 开启表格边框size: 'small',// 单元格间距inset: true,// 是否内嵌（去除一些边距）});// 当前表单子表自动定义asyncfunctionsetTestDataChildTableData(_res: Recordable){testDataChildTable.setColumns([{title: t('单行文本'),dataIndex: 'testInput',width: 230,align: 'left',editRow: true,// 是否启用编辑editComponent: 'Input',// 编辑控件（可自定义，更多查看 componentMap.ts ）editRule: true,// 控件验证（是否必填）},{title: t('下拉框'),dataIndex: 'testSelect',width: 130,align: 'left',dictType: 'sys_menu_type',// 指定字典类型，自动显示字典标签editRow: true,editComponent: 'Select',editComponentProps: {// 控件属性dictType: 'sys_menu_type',// 下拉框的字段类型allowClear: true,},editRule: false,},// 更多组件控件不举例了，同表单控件 ...]);// 设定子表数据testDataChildTable.setTableData(record.value.testDataChildList||[]);}// 点击行，启用编辑functionhandleTestDataChildRowClick(record: Recordable){record.onEdit?.(true,false);}// 添加编辑行，可指定初始数据functionhandleTestDataChildAdd(){testDataChildTable.insertTableDataRecord({id: newDate().getTime(),isNewRecord: true,editable: true,});}// 删除编辑行方法functionhandleTestDataChildDelete(record: Recordable){testDataChildTable.deleteTableDataRecord(record);}// 获取子表数据（支持返回删除未提交的数据）asyncfunctiongetTestDataChildList(){lettestDataChildListValid=true;lettestDataChildList: Recordable[]=[];for(constrecordoftestDataChildTable.getDataSource()){// 验证控件内容，并取消行的编辑状态（如果验证失败返回false）if(!(awaitrecord.onEdit?.(false,true))){testDataChildListValid=false;}testDataChildList.push({ ...record,id: !!record.isNewRecord ? '' : record.id,});}for(constrecordoftestDataChildTable.getDelDataSource()){if(!!record.isNewRecord)continue;testDataChildList.push({ ...record,status: '1',});}// 子表验证事件，抛出异常消息if(!testDataChildListValid){throw{errorFields: [{name: ['testDataChildList']}]};}returntestDataChildList;}// 弹窗后的回调事件，进行一些表单数据初始化等操作const[registerDrawer,{ setDrawerProps, closeDrawer }]=useDrawerInner(async(data)=>{resetFields();// 重置表单数据setDrawerProps({loading: true});// 显示加载框constres=awaittestDataForm(data);// 查询表单数据record.value=(res.testData||{})asRecordable;setFieldsValue(record.value);// 设置字段值setTestDataChildTableData(res);// 设置子表数据（没有子表可不写）setDrawerProps({loading: false});// 隐藏加载框});// 表单提交按钮方法asyncfunctionhandleSubmit(){try{constdata=awaitvalidate();// 验证表单，并返回数据setDrawerProps({confirmLoading: true});// 显示提交加载中// 设置提交的参数（QueryString，后台 Controller 的 get 接受）constparams: any={isNewRecord: record.value.isNewRecord,id: record.value.id,};// 获取并设置子表数据data.testDataChildList=awaitgetTestDataChildList();// console.log('submit', params, data, record);// 将数据提交给后台（如果失败跳转到 catch）constres=awaittestDataSave(params,data);showMessage(res.message);// 显示提交结果setTimeout(closeDrawer);// 隐藏抽屉弹窗emit('success',data);// 触发事件，列表数据刷新}catch(error: any){if(error&&error.errorFields){showMessage(t('您填写的信息有误，请根据提示修正。'));}console.log('error',error);}finally{setDrawerProps({confirmLoading: false});// 隐藏提交加载中}}</script>

<template><div><!-- 表格组件 --><BasicTable@register="registerTable"><!-- 表格标题插槽 --><template#tableTitle><Icon:icon="getTitle.icon" class="m-1 pr-1" /><span>{{getTitle.value }} </span></template><!-- 表格右侧按钮插槽，其中 v-auth 是按钮权限控制 --><template#toolbar><a-buttontype="primary" @click="handleForm({})" v-auth="'test:testData:edit'"><Iconicon="i-fluent:add-12-filled" />{{t('新增') }} </a-button></template><!-- 首列插槽 --><template#firstColumn="{record }"><a@click="handleForm({id: record.id })">{{record.testInput }} </a></template></BasicTable><!-- 点击表格行进入的输入表单弹窗 --><InputForm@register="registerDrawer" @success="handleSuccess" /></div></template><!-- script name: 当前组件名称（与路由名一致，如果不一致会页面缓存失效）--><scriptlang="ts" setupname="ViewsTestTestDataList">// 导入当前用到的对象，部分省略importInputFormfrom'./form.vue';// 国际化方法调用，参数是国际化编码的根路径const{ t }=useI18n('test.testData');// 消息弹窗方法const{ showMessage }=useMessage();// 路由meta信息const{ meta }=unref(router.currentRoute);// 当前页面标题定义，来自菜单管理定义constgetTitle={icon: meta.icon||'ant-design:book-outlined',value: meta.title||t('数据管理'),};// 表格搜索表单控件定义constsearchForm: FormProps={baseColProps: {lg: 6,md: 8},// 表单栅格布局labelWidth: 90,// 表单标签宽度schemas: [{label: t('单行文本'),// 表单标签field: 'testInput',// 字段提交参数名component: 'Input',// 表单控件},{label: t('下拉框'),field: 'testSelect',component: 'Select',// 选择框还有 RadioGroup、CheckboxGroupcomponentProps: {dictType: 'sys_menu_type',// 下拉框选项数据（支持直接指定字典类型）allowClear: true,// 启用空选项，可清空选择mode: 'multiple',// 下拉框模块，启用多选},},// 更多控件，再次不展示了，和上一节表单视图一致],};// 表格列定义consttableColumns: BasicColumn[]=[{title: t('单行文本'),// 表头标题dataIndex: 'testInput',// 表列实体属性名key: 'a.test_input',// 排序数据库字段名sorter: true,// 点击表头是否可排序width: 230,// 列宽align: 'left',// 列的对齐方式// 个性化列，可定义插槽（如样式，增加控件等）slot: 'firstColumn',},{title: t('下拉框'),dataIndex: 'testSelect',key: 'a.test_select',sorter: true,width: 130,align: 'center',dictType: 'sys_menu_type',// 字典列，快速显示字典标签},];// 表格操作列定义constactionColumn: BasicColumn={width: 160,// 操作列宽actions: (record: Recordable)=>[{icon: 'i-clarity:note-edit-line',title: t('编辑数据'),onClick: handleForm.bind(this,{id: record.id}),// 按钮权限控制，指定权限字符串auth: 'test:testData:edit',},{icon: 'i-ant-design:stop-outlined',color: 'error',title: t('停用数据'),// 是否需要启用确认框popConfirm: {title: t('是否确认停用数据'),confirm: handleDisable.bind(this,{id: record.id}),},// 按钮权限控制，指定权限字符串auth: 'test:testData:edit',// 控制按钮是否显示（区别：show 是显示或隐藏；ifShow 是显示或移除）show: ()=>record.status==='0',ifShow: ()=>record.status==='0',},],// 操作列更多按钮定义dropDownActions: (record: Recordable)=>[{icon: 'i-ant-design:reload-outlined',label: t('重置密码'),onClick: handleResetpwd.bind(this,{userCode: record.userCode}),auth: 'sys:empUser:resetpwd',},],};// 点击首列或编辑按钮是的抽屉弹窗定义const[registerDrawer,{ openDrawer }]=useDrawer();// 表格定义const[registerTable,{ reload }]=useTable({api: testDataListData,// 表格数据源 APIbeforeFetch: (params)=>{returnparams;// API 提交之前的参数修改},columns: tableColumns,// 表格列actionColumn: actionColumn,// 操作列formConfig: searchForm,// 搜索表单showTableSetting: true,// 是否显示右上角的设置按钮useSearchForm: true,// 是否显示搜索表单canResize: true,// 是否自适应表单高度});// 弹窗操作方法functionhandleForm(record: Recordable){openDrawer(true,record);}// 操作列停用按钮方法asyncfunctionhandleDisable(record: Recordable){constres=awaittestDataDisable(record);showMessage(res.message);handleSuccess();}// 刷新表格数据（含表单回调）functionhandleSuccess(){reload();}</script>