Skip to content

KE02-example-crud--view-and-logic.md

Latest commit

 

History

History
883 lines (851 loc) · 36.9 KB

KE02-example-crud--view-and-logic.md

File metadata and controls

883 lines (851 loc) · 36.9 KB

全栈-CRUD页前后端示例

example1

// 每个逻辑的命名规则如下：[逻辑的用途名][引用的组件名][根据情况唯一标识（可选）]

$Logic({ title: '获取学校列表', description: '从数据库中获取学校列表', returnDescription: '学校列表分页结果', directory: 'school_management(学校管理)' }) export function loadSchool_eltable1_dasc(page: Integer, size: Integer, sort: String, order: String, filter: app.dataSources.defaultDS.entities.School): { list: List<{ school: app.dataSources.defaultDS.entities.School }>, total: Integer } { $Return({ description: '学校列表分页结果', autoInferType: true }) let result; result = PAGINATE(FROM(app.dataSources.defaultDS.entities.SchoolEntity, School => $() .WHERE(LIKE(School.name, filter.name) && LIKE(School.address, filter.address)) .SELECT({ school: School, }) .ORDER_BY((resultItem) => [[resultItem[sort], order]]) ), page, size); return result; } $View({ title: "学校管理", description: "学校信息的增删改查管理", crumb: "学校管理", auth: true, bindRoles: ["DEV-AdminRole", "manager"], isIndex: false, }) export function school() { $Variable({ description: '表单输入数据', directory: 'data_models(数据模型)' }) let input: app.dataSources.defaultDS.entities.School; 
$Variable({
    description: '筛选条件',
    directory: 'filters(筛选条件)'
})
let filter: app.dataSources.defaultDS.entities.School;

$Variable({
    description: '是否为更新操作',
    directory: 'ui_state(界面状态)'
})
let isUpdate: Boolean;

$Variable({
    description: '待删除的学校（确认弹窗绑定与删除入参）',
    directory: 'data_models(数据模型)'
})
let deleteSchool: app.dataSources.defaultDS.entities.School;

onCreated(function init() {
    nasl.util.Clear(filter, 'deep');
    return;
})

return <>
    <ElFlex
        direction="vertical"
        mode="block">
        <ElFlex>
            <ElForm
                inline={true}
                labelWidth={100}
                style="margin-bottom: -12px;">
                <ElFormInput
                    placeholder="请输入名称"
                    modelValue={$sync(filter.name)}
                    slotLabel={() => <ElText
                        text="名称" />} />
                <ElFormInput
                    placeholder="请输入地址"
                    modelValue={$sync(filter.address)}
                    slotLabel={() => <ElText
                        text="学校地址" />} />
                <ElButton
                    type="primary"
                    text="查 询"
                    onClick={function reload() {
                        $refs.el_table_1.reload();
                        return;
                    }} />
            </ElForm>
        </ElFlex>
        <ElFlex
            alignment="center"
            justify="end"
            style="width: 100%;margin-bottom: 16px">
            <ElButton
                type="primary"
                text="创 建"
                $auth={true} $bindRoles={["DEV-AdminRole", "manager"]}
                onClick={function create() {
                    isUpdate = false;
                    input = new app.dataSources.defaultDS.entities.School();
                    $refs.el_dialog_save_1.open();
                    return;
                }} />
        </ElFlex>
        <ElTable ref="el_table_1"
            dataSource={app.logics.loadSchool_eltable1_dasc($self.currentPage, $self.pageSize, $self.sort, 'desc', filter)}
            rowKey="school.id"
            pagination={true}
            defaultPageSize={20}
            defaultCurrentPage={1}>
            <ElTableColumn
                prop="school.createdTime"
                style="width: 180px"
                slotHeader={() => <ElText
                    text="创建时间" />}
                slotDefault={(current) => <ElText
                    text={current.item.school.createdTime} />} />
            <ElTableColumn
                prop="school.name"
                style="width: 160px"
                slotHeader={() => <ElText
                    text="名称" />}
                slotDefault={(current) => <ElText
                    text={current.item.school.name} />} />
            <ElTableColumn
                prop="school.address"
                style="width: 200px"
                slotHeader={() => <ElText
                    text="学校地址" />}
                slotDefault={(current) => <ElText
                    text={current.item.school.address} />} />
            <ElTableColumn
                style="width: 120px"
                isFixed={true}
                fixed="right"
                slotHeader={() => <ElText
                    text="操作" />}
                slotDefault={(current) => <ElFlex>
                    <ElLink
                        text="修改" 
                        $auth={true} $bindRoles={["DEV-AdminRole", "manager"]}
                        onClick={function modify() {
                            isUpdate = true;
                            input = nasl.util.Clone(current.item.school);
                            $refs.el_dialog_save_1.open();
                            return;
                        }} />
                    <ElLink
                        text="删除"
                        $auth={true} $bindRoles={["DEV-AdminRole", "manager"]}
                        onClick={function remove() {
                            deleteSchool = nasl.util.Clone(current.item.school);
                            $refs.el_message_box_1.open();
                            return;
                        }} />
                </ElFlex>} />
        </ElTable>
    </ElFlex>
    <ElDialog ref="el_dialog_save_1"
        $auth={true} $bindRoles={["DEV-AdminRole", "manager"]}
        onClose={function close() {
            $refs.el_dialog_save_form_1.resetForm();
            return;
        }}
        slotHeader={() => <>
            <ElText
                $if={isUpdate}
                text="修改" />
            <ElText
                $if={!(isUpdate)}
                text="创建" />
        </>}
        slotFooter={() => <ElFlex
            justify="center"
            alignment="center">
            <ElButton
                $if={isUpdate}
                type="primary"
                text="提交修改"
                onClick={function updateSubmit() {
                    let result: { valid: nasl.core.Boolean } = $refs.el_dialog_save_form_1.validated();
                    if (result.valid) {
                        app.dataSources.defaultDS.entities.SchoolEntity.update(input, (item: app.dataSources.defaultDS.entities.SchoolEntity) => [item.id, item.name, item.address]);
                        $refs.el_dialog_save_1.close();
                        $refs.el_table_1.reload();
                    } else {
                    }
                    return;
                }} />
            <ElButton
                $if={!(isUpdate)}
                type="primary"
                text="立即创建"
                onClick={function submit() {
                    let result: { valid: nasl.core.Boolean } = $refs.el_dialog_save_form_1.validated();
                    if (result.valid) {
                        app.dataSources.defaultDS.entities.SchoolEntity.create(input);
                        $refs.el_dialog_save_1.close();
                        $refs.el_table_1.reload();
                    } else {
                    }
                    return;
                }} />
        </ElFlex>}>
        <ElForm ref="el_dialog_save_form_1"
            labelWidth={80}>
            <ElFormInput
                placeholder="请输入名称"
                modelValue={$sync(input.name)}
                rules={[filled(), maxLength(20)]}
                slotLabel={() => <ElText
                    text="名称" />} />
            <ElFormInput
                type="textarea"
                placeholder="请输入地址"
                modelValue={$sync(input.address)}
                rules={[filled(), maxLength(200)]}
                slotLabel={() => <ElText
                    text="学校地址" />} />
        </ElForm>
    </ElDialog>
    <ElMessageBox ref="el_message_box_1"
        type="confirm"
        iconType="warning"
        title="删除学校"
        showCancelButton={true}
        closeOnClickModal={false}
        onConfirm={function confirm() {
            app.dataSources.defaultDS.entities.SchoolEntity.delete(deleteSchool.id);
            $refs.el_table_1.reload();
            $refs.el_message_box_1.close();
            nasl.ui.showMessage('删除成功');
            return;
        }}
        onCancel={function cancel() {
            $refs.el_message_box_1.close();
            return;
        }}>
        <ElText
            text={`确认删除学校：${deleteSchool.name}？`} />
    </ElMessageBox>
</>

}

注意：

  • 推荐：在逻辑中更新实体时，建议使用 update 方法的第二个参数指定更新后返回的字段列表，如 app.dataSources.defaultDS.entities.SchoolEntity.update(input, (item: app.dataSources.defaultDS.entities.SchoolEntity) => [item.id, item.name, item.address])。这样可以避免或遗漏字段。

example2

// 每个逻辑的命名规则如下：[逻辑的用途名][引用的组件名][根据情况唯一标识（可选）]

$Logic({ title: '获取学生列表', description: '从数据库中获取学生列表', returnDescription: '学生列表分页结果', directory: 'education_system(教育系统)' }) export function loadStudentForTable( /** 页码 */ page: Integer, /** 每页条数 */ size: Integer, /** 排序字段 */ sort: String, /** 排序方向 */ order: String, /** 学生过滤条件 */ filter: app.dataSources.defaultDS.entities.Student ): { /** 学生和学校关联列表 */ list: List<{ /** 学生信息 */ student: app.dataSources.defaultDS.entities.Student, /** 学校信息 */ school: app.dataSources.defaultDS.entities.School }>, /** 总条数 */ total: Integer } { $Return({ description: '学生列表分页结果', autoInferType: true }) let result; result = PAGINATE(FROM(app.dataSources.defaultDS.entities.StudentEntity, Student => $() .LEFT_JOIN(app.dataSources.defaultDS.entities.SchoolEntity, School => ON(Student.schoolId == School.id) .WHERE(LIKE(Student.name, filter.name) && Student.age == filter.age && Student.schoolId == filter.schoolId && Student.status == filter.status) .SELECT({ student: Student, school: School, }) .ORDER_BY((resultItem) => [[resultItem[sort], order]]) )), page, size); return result; } $Logic({ title: '获取学校列表', description: '从数据库中获取学校列表用于选择框', returnDescription: '学校列表结果', directory: 'education_system(教育系统)' }) export function loadStudentSchoolForSelect( /** 地址过滤条件 */ filterByAddress: String ): List<{ /** 学校信息 */ school: app.dataSources.defaultDS.entities.School }> { $Return({ description: '学校列表结果', autoInferType: true }) let result; result = FROM(app.dataSources.defaultDS.entities.SchoolEntity, School => $() .WHERE(LIKE(School.address, filterByAddress)) .SELECT({ school: School, })); return result; } $View({ title: "学生管理", description: "学生信息的增删改查及关联学校管理", crumb: "学生管理", auth: false, isIndex: false, }) export function student( /** 页面参数 */ param1: String ) { $Variable({ description: '表单输入数据', directory: 'education_system(教育系统)' }) let input: app.dataSources.defaultDS.entities.Student; 
$Variable({
    description: '筛选条件',
    directory: 'education_system(教育系统)'
})
let filter: app.dataSources.defaultDS.entities.Student;

$Variable({
    description: '是否为更新操作',
    directory: 'education_system(教育系统)'
})
let isUpdate: Boolean;

$Variable({
    description: '待删除的学生（确认弹窗绑定与删除入参）',
    directory: 'education_system(教育系统)'
})
let deleteStudent: app.dataSources.defaultDS.entities.Student;

onCreated(function init() {
    nasl.util.Clear(filter, 'deep');
    return;
})

return <>
    <ElFlex
        direction="vertical"
        mode="block">
        <ElFlex>
            <ElForm
                inline={true}
                labelWidth={80}
                style="margin-bottom: -12px;">
                <ElFormInput
                    placeholder="请输入名称"
                    modelValue={$sync(filter.name)}
                    slotLabel={() => <ElText
                        text="名称" />} />
                <ElFormInputNumber
                    theme="column"
                    placeholder="请输入年龄"
                    modelValue={$sync(filter.age)}
                    slotLabel={() => <ElText
                        text="年龄" />} />
                <ElFormSelect
                    clearable={true}
                    placeholder="请选择状态"
                    dataSource={nasl.util.EnumToList<app.enums.StudentStatus>()}
                    textField="text"
                    valueField="item"
                    modelValue={$sync(filter.status)}
                    slotLabel={() => <ElText
                        text="状态" />} />
                <ElFormSelect
                    clearable={true}
                    placeholder="请选择学校"
                    dataSource={app.logics.loadStudentSchoolForSelect(null)}
                    textField="school.name"
                    valueField="school.id"
                    modelValue={$sync(filter.schoolId)}
                    slotLabel={() => <ElText
                        text="学校" />} />
                <ElButton
                    type="primary"
                    text="查 询"
                    onClick={function reload() {
                        $refs.el_table_1.reload();
                        return;
                    }} />
            </ElForm>
        </ElFlex>
        <ElFlex
            alignment="center"
            justify="end"
            style="width: 100%;margin-bottom: 16px">
            <ElButton
                type="primary"
                text="创 建"
                onClick={function create() {
                    isUpdate = false;
                    input = new app.dataSources.defaultDS.entities.Student();
                    $refs.el_dialog_save_1.open();
                    return;
                }} />
        </ElFlex>
        <ElTable ref="el_table_1"
            dataSource={app.logics.loadStudentForTable($self.currentPage, $self.pageSize, $self.sort, 'desc', filter)}
            rowKey="student.id"
            pagination={true}
            defaultPageSize={20}
            defaultCurrentPage={1}>
            <ElTableColumn
                prop="student.createdTime"
                style="width: 180px"
                slotHeader={() => <ElText
                    text="创建时间" />}
                slotDefault={(current) => <ElText
                    text={current.item.student.createdTime} />} />
            <ElTableColumn
                prop="student.name"
                style="width: 120px"
                slotHeader={() => <ElText
                    text="名称" />}
                slotDefault={(current) => <ElText
                    text={current.item.student.name} />} />
            <ElTableColumn
                prop="student.age"
                style="width: 80px"
                slotHeader={() => <ElText
                    text="年龄" />}
                slotDefault={(current) => <ElText
                    text={current.item.student.age} />} />
            <ElTableColumn
                prop="student.status"
                style="width: 120px"
                slotHeader={() => <ElText
                    text="状态" />}
                slotDefault={(current) => <ElText
                    text={current.item.student.status} />} />
            <ElTableColumn
                prop="student.schoolId"
                style="width: 160px"
                slotHeader={() => <ElText
                    text="学校" />}
                slotDefault={(current) => <ElText
                    text={current.item.school.name} />} />
            <ElTableColumn
                style="width: 120px"
                isFixed={true}
                fixed="right"
                slotHeader={() => <ElText
                    text="操作" />}
                slotDefault={(current) => <ElFlex>
                    <ElLink
                        text="修改"
                        onClick={function modify() {
                            isUpdate = true;
                            input = nasl.util.Clone(current.item.student);
                            $refs.el_dialog_save_1.open();
                            return;
                        }} />
                    <ElLink
                        text="删除"
                        onClick={function remove() {
                            deleteStudent = nasl.util.Clone(current.item.student);
                            $refs.el_message_box_1.open();
                            return;
                        }} />
                </ElFlex>} />
        </ElTable>
    </ElFlex>
    <ElDialog ref="el_dialog_save_1"
        onClose={function close() {
            $refs.el_dialog_save_form_1.resetForm();
            return;
        }}
        slotHeader={() => <>
            <ElText
                $if={isUpdate}
                text="修改" />
            <ElText
                $if={!(isUpdate)}
                text="创建" />
        </>}
        slotFooter={() => <ElFlex
            justify="center"
            alignment="center">
            <ElButton
                $if={isUpdate}
                type="primary"
                text="提交修改"
                onClick={function updateSubmit() {
                    let result: { valid: nasl.core.Boolean } = $refs.el_dialog_save_form_1.validated();
                    if (result.valid) {
                        app.dataSources.defaultDS.entities.StudentEntity.update(input, (item: app.dataSources.defaultDS.entities.StudentEntity) => [item.id, item.name, item.age, item.status, item.schoolId]);
                        $refs.el_dialog_save_1.close();
                        $refs.el_table_1.reload();
                    } else {
                    }
                    return;
                }} />
            <ElButton
                $if={!(isUpdate)}
                type="primary"
                text="立即创建"
                onClick={function submit() {
                    let result: { valid: nasl.core.Boolean } = $refs.el_dialog_save_form_1.validated();
                    if (result.valid) {
                        app.dataSources.defaultDS.entities.StudentEntity.create(input);
                        $refs.el_dialog_save_1.close();
                        $refs.el_table_1.reload();
                    } else {
                    }
                    return;
                }} />
        </ElFlex>}>
        <ElForm ref="el_dialog_save_form_1"
            labelWidth={100}>
            <ElRow>
                <ElCol span={12}>
                    <ElFormInput
                        placeholder="请输入名称"
                        modelValue={$sync(input.name)}
                        rules={[filled(), maxLength(20)]}
                        slotLabel={() => <ElText
                            text="名称" />} />
                    <ElFormInputNumber
                        theme="column"
                        placeholder="请输入年龄"
                        modelValue={$sync(input.age)}
                        rules={[required(), integer()]}
                        slotLabel={() => <ElText
                            text="年龄" />} />
                </ElCol>
                <ElCol span={12}>
                    <ElFormSelect
                        clearable={true}
                        placeholder="请选择状态"
                        dataSource={nasl.util.EnumToList<app.enums.StudentStatus>()}
                        textField="text"
                        valueField="item"
                        modelValue={$sync(input.status)}
                        rules={[required()]}
                        slotLabel={() => <ElText
                            text="状态" />} />
                    <ElFormSelect
                        clearable={true}
                        placeholder="请选择学校"
                        dataSource={app.logics.loadStudentSchoolForSelect(null)}
                        textField="school.name"
                        valueField="school.id"
                        modelValue={$sync(input.schoolId)}
                        rules={[required()]}
                        slotLabel={() => <ElText
                            text="学校" />} />
                </ElCol>
            </ElRow>
        </ElForm>
    </ElDialog>
    <ElMessageBox ref="el_message_box_1"
        type="confirm"
        iconType="warning"
        title="删除学生"
        showCancelButton={true}
        closeOnClickModal={false}
        onConfirm={function confirm() {
            app.dataSources.defaultDS.entities.StudentEntity.delete(deleteStudent.id);
            $refs.el_table_1.reload();
            $refs.el_message_box_1.close();
            nasl.ui.showMessage('删除成功');
            return;
        }}
        onCancel={function cancel() {
            $refs.el_message_box_1.close();
            return;
        }}>
        <ElText
            text={`确认删除学生：${deleteStudent.name}？`} />
    </ElMessageBox>
</>

}

注意：

  • 推荐：单变量筛选，如 filterByAddress, filterByAge 等，loadSelect(filterByAddress: string)。直接赋值或传入 null 清空筛选条件。loadSelect(null)
  • 禁止：loadSelect('') 等用空字符串“清空”筛选条件。
  • 推荐：但 create、update 中关于 enabled 相关的参数，尽量传 truthy 值。如 createCategory(enabled: boolean); createCategory(true);
  • 推荐：在逻辑中更新实体时，建议使用 update 方法的第二个参数指定更新后返回的字段列表，如 app.dataSources.defaultDS.entities.StudentEntity.update(input, (item: app.dataSources.defaultDS.entities.StudentEntity) => [item.id, item.name, item.age, item.status, item.schoolId])。这样可以避免或遗漏字段。

example3

// 每个逻辑的命名规则如下：[逻辑的用途名][引用的组件名][根据情况唯一标识（可选）] // 本示例为学校根据输入框进行筛选。

$Logic({ title: '获取学生列表', description: '从数据库中获取学生列表', returnDescription: '学生列表分页结果', directory: 'student_management(学生管理)' }) export function loadStudentForTable(page: Integer, size: Integer, sort: String, order: String, filter: app.dataSources.defaultDS.entities.Student, filterSchoolName: String): { list: List<{ student: app.dataSources.defaultDS.entities.Student, school: app.dataSources.defaultDS.entities.School }>, total: Integer } { $Return({ description: '学生列表分页结果', autoInferType: true }) let result; result = PAGINATE(FROM(app.dataSources.defaultDS.entities.StudentEntity, Student => $() .LEFT_JOIN(app.dataSources.defaultDS.entities.SchoolEntity, School => ON(Student.schoolId == School.id) .WHERE(LIKE(Student.name, filter.name) && Student.age == filter.age && Student.status == filter.status && LIKE(School.name == filterSchoolName) .SELECT({ student: Student, school: School, }) .ORDER_BY((resultItem) => [[resultItem[sort], order]]) )), page, size); return result; } $View({ title: "学生列表", description: "学生信息列表展示、筛选及关联学校管理", crumb: "学生列表", auth: true, bindRoles: ["DEV-AdminRole", "teacher", "student"], isIndex: false, }) export function student(param1: String) { $Variable({ description: '当前操作的学生对象', directory: 'data_models(数据模型)' }) let student: app.dataSources.defaultDS.entities.Student; 
$Variable({
    description: '表单输入数据',
    directory: 'data_models(数据模型)'
})
let input: app.dataSources.defaultDS.entities.Student;

$Variable({
    description: '学生筛选条件',
    directory: 'filters(筛选条件)'
})
let filter: app.dataSources.defaultDS.entities.Student;

$Variable({
    description: '学校名称筛选',
    directory: 'filters(筛选条件)'
})
let filterSchoolName: String;

onCreated(function init() {
    nasl.util.Clear(filter, 'deep');
    return;
})

return <>
    <ElFlex
        direction="vertical"
        mode="block">
        <ElFlex>
            <ElForm
                inline={true}
                labelWidth={100}
                style="margin-bottom: -12px;">
                <ElFormInput
                    placeholder="请输入名称"
                    modelValue={$sync(filter.name)}
                    slotLabel={() => <ElText
                        text="名称" />} />
                <ElFormInputNumber
                    theme="column"
                    placeholder="请输入年龄"
                    modelValue={$sync(filter.age)}
                    slotLabel={() => <ElText
                        text="年龄" />} />
                <ElFormSelect
                    clearable={true}
                    placeholder="请选择状态"
                    dataSource={nasl.util.EnumToList<app.enums.StudentStatus>()}
                    textField="text"
                    valueField="item"
                    modelValue={$sync(filter.status)}
                    slotLabel={() => <ElText
                        text="状态" />} />
                <ElFormInputNumber
                    theme="column"
                    placeholder="请输入学校名称"
                    modelValue={$sync(filterSchoolName)}
                    slotLabel={() => <ElText
                        text="学校名称" />} />
                <ElButton
                    type="primary"
                    text="查 询"
                    onClick={function reload() {
                        $refs.el_table_1.reload();
                        return;
                    }} />
            </ElForm>
        </ElFlex>
        <ElTable ref="el_table_1"
            dataSource={app.logics.loadStudentForTable($self.currentPage, $self.pageSize, $self.sort, 'desc', filter, filterSchoolName)}
            rowKey="student.id"
            pagination={true}
            defaultPageSize={20}
            defaultCurrentPage={1}>
            <ElTableColumn
                prop="student.createdTime"
                style="width: 180px"
                slotHeader={() => <ElText
                    text="创建时间" />}
                slotDefault={(current) => <ElText
                    text={current.item.student.createdTime} />} />
            <ElTableColumn
                prop="student.name"
                style="width: 120px"
                slotHeader={() => <ElText
                    text="名称" />}
                slotDefault={(current) => <ElText
                    text={current.item.student.name} />} />
            <ElTableColumn
                prop="student.age"
                style="width: 80px"
                slotHeader={() => <ElText
                    text="年龄" />}
                slotDefault={(current) => <ElText
                    text={current.item.student.age} />} />
            <ElTableColumn
                prop="student.status"
                style="width: 120px"
                slotHeader={() => <ElText
                    text="状态" />}
                slotDefault={(current) => <ElText
                    text={current.item.student.status} />} />
            <ElTableColumn
                prop="school.id"
                style="width: 160px"
                slotHeader={() => <ElText
                    text="学校" />}
                slotDefault={(current) => <ElText
                    text={current.item.school.name} />} />
            <ElTableColumn
                style="width: 120px"
                isFixed={true}
                fixed="right"
                slotHeader={() => <ElText
                    text="操作" />}
                slotDefault={(current) => <ElFlex>
                    <ElLink
                        text="详情"
                        $auth={true} $bindRoles={["DEV-AdminRole", "teacher", "student"]}
                        onClick={function detail() {
                            input = nasl.util.Clone(current.item.student);
                            $refs.el_dialog_detail_1.open();
                            return;
                        }} />
                </ElFlex>} />
        </ElTable>
    </ElFlex>
    <ElDialog ref="el_dialog_detail_1"
        slotHeader={() => <ElText text="学生详情" />}
        slotFooter={() => <ElFlex
            justify="center"
            alignment="center">
            <ElButton
                text="关闭"
                onClick={function close() {
                    $refs.el_dialog_detail_1.close();
                    return;
                }} />
        </ElFlex>}>
        <ElForm ref="el_dialog_detail_form_1"
            preview={true}
            labelWidth={100}>
            <ElRow>
                <ElCol span={12}>
                    <ElFormInput
                        placeholder="请输入名称"
                        modelValue={$sync(input.name)}
                        rules={[filled(), maxLength(20)]}
                        slotLabel={() => <ElText
                            text="名称" />} />
                    <ElFormInputNumber
                        theme="column"
                        placeholder="请输入年龄"
                        modelValue={$sync(input.age)}
                        rules={[required(), integer()]}
                        slotLabel={() => <ElText
                            text="年龄" />} />
                </ElCol>
                <ElCol span={12}>
                    <ElFormSelect
                        clearable={true}
                        placeholder="请选择状态"
                        dataSource={nasl.util.EnumToList<app.enums.StudentStatus>()}
                        textField="text"
                        valueField="item"
                        modelValue={$sync(input.status)}
                        rules={[required()]}
                        slotLabel={() => <ElText
                            text="状态" />} />
                    <ElFormSelect
                        clearable={true}
                        placeholder="请选择学校"
                        dataSource={app.logics.loadStudentSchoolForSelect(null)}
                        textField="school.name"
                        valueField="school.id"
                        modelValue={$sync(input.schoolId)}
                        rules={[required()]}
                        slotLabel={() => <ElText
                            text="学校" />} />
                </ElCol>
            </ElRow>
        </ElForm>
    </ElDialog>
</>

}

注意：

  • 推荐：单变量筛选，如 filterByAddress, filterByAge 等，loadSelect(filterByAddress: string)。直接赋值或传入 null 清空筛选条件。loadSelect(null)
  • 禁止：loadSelect('') 等用空字符串“清空”筛选条件。
  • 推荐：但 create、update 中关于 enabled 相关的参数，尽量传 truthy 值。如 createCategory(enabled: boolean); createCategory(true);
- 中如果表单项较多时，建议用 和 分 2 - 3 列布局。 - 必须要根据各表单项的 label 文字数量设置 labelSize，一般建议最小 80，4个字100左右比较美观，字数更多时请酌情设置。 - 宽度不填为 50%，建议根据内容设置宽度。比如内部的 中如果是单列，建议 400px 左右；如果是两列，建议 800px 左右。 - 内部第一层渲染的组件必须设置样式 `width: 100%; overflow-x: auto;`。例如： ... - 弹窗弹层类组件（ElDialog, ElDrawer, ElMessageBox, ElMessage, ElNotification, ElPopover）只能出现在 View 的顶层, 例如： return <> ... - 表格行内「删除」等危险操作须使用 二次确认：先将当前行实体赋值给待删除变量（nasl.util.Clone），再打开确认弹窗，禁止在点击时直接 Entity.delete；确认后仅关闭该确认弹窗，勿误关用于新建/编辑的 。 - 请根据列标题和内容尽量用 style 设置宽度，保留1-2个文本较长的字段（如名称、地址、描述等）不要设置宽度（自适应）。比如日期时间类的建议 180px，地址不设置宽度，其他酌情设置。 - 注意：创建、修改和详情中的表单项组件请使用合适的组件，否则会报类型错误。只是字段展示的详情就是给详情表单组件上添加 preview={true} 即可。 - 分页列表的数据源应绑定已有逻辑或数据源查询结果，不要使用 nasl.util.FromData 或手写假数据；若 pageSize 不是 10、20、50 这三个默认值之一，必须在 pageSizes 属性中包含该值。例如：pageSize={12} 时，必须设置 pageSizes="[10,12,20,50]"（按升序排列） - 数据源与 pageSizes 约定同 ；第一层渲染的组件请设置样式 `width: 100%` 以保证布局占满容器宽度 - 、 使用 modelValue 与 onInput(event)，不要使用 value 与 $event。 - 若页面存在多实体关联（例如在弹窗或子流程中维护关联关系），须保留完整入口，以及列表、弹窗之间的加载与提交闭环，避免只做静态展示或半截流程。 - 需要设置 `value` 和 `label` 属性