组件.数据表格

12003

简单 Table

<jh-toast />
<jh-mask />
<jh-confirm-dialog />
<v-app mobile-breakpoint="sm">
    <!-- 头部内容 >>>>>>>>>>>>> -->
    <div class="jh-page-second-bar px-8">
        <v-row class="align-center" dense>
            <v-col cols="12" xs="12" sm="4" md="4" xl="3">
                <div class="py-4 text-body-1 font-weight-bold d-flex align-center">简单 Table</div>
            </v-col>
            <!-- 搜索条件表单 >>>>>>>> -->
            <v-col cols="12" xs="12" sm="8" md="8" xl="9">
                <v-row class="jh-backend-form-container justify-end ma-0 py-3">
                    <div class="jh-backend-search-btn">
                        <v-btn class="elevation-0 float-right mt-2 mt-md-0" color="success" small
                            @click="doUiAction('getTableData')">
                            查询
                        </v-btn>
                    </div>
                </v-row>
            </v-col>
            <!-- <<<<<<<< 搜索条件表单 -->
        </v-row>
    </div>
    <!-- <<<<<<<<<<<<< 头部内容 -->
    <div class="jh-page-body-container px-8">
        <!-- 页面内容 >>>>>>>>>>>>> -->
        <v-card class="rounded-lg">
            <v-row class="ma-0 pa-3">
                <!-- 新增按钮 -->
                <v-btn v-if="tableSelected.length > 0" color="default" class="elevation-0 mr-2" small>{{
                    tableSelected.length }}个选中</v-btn>
                <v-spacer></v-spacer>
                <!-- 搜索过滤 -->
                <v-col cols="12" xs="8" sm="4" md="3" xl="2" class="pa-0">
                    <v-text-field color="success" v-model="searchInput" prefix="搜索：" class="jh-v-input" dense filled
                        single-line></v-text-field>
                </v-col>
            </v-row>
            <v-data-table :headers="headers" :items="tableData" :search="searchInput"
                :footer-props="{ itemsPerPageOptions: [20, 50, -1], itemsPerPageText: '每页行数', itemsPerPageAllText: '所有'}"
                :items-per-page="-1" mobile-breakpoint="0" :loading="isTableLoading"
                :class="{'zebraLine': isTableZebraLineShown }" checkbox-color="success" fixed-header
                class="jh-fixed-table-height elevation-0 mt-0 mb-xs-4" show-select item-key="studentId"
                @item-selected="tableItemSelected" @toggle-select-all="tableToggleSelectAll" v-model="tableSelected">
                <!-- 性别 -->
                <template v-slot:item.gender="{ item }">
                    {{ getDisplayText({displayObj: constantObj.gender, displayValue: item.gender}) }}
                </template>
                <!-- 年级 -->
                <template v-slot:item.level="{ item }">
                    {{ getDisplayText({displayObj: constantObj.level, displayValue: item.level}) }}
                </template>
                <!-- 没有数据 -->
                <template v-slot:loading>
                    <div class="jh-no-data">数据加载中</div>
                </template>
                <template v-slot:no-data>
                    <div class="jh-no-data">暂无数据</div>
                </template>
                <template v-slot:no-results>
                    <div class="jh-no-data">暂无数据</div>
                </template>
                <!-- 表格分页 -->
                <template v-slot:footer.page-text="pagination">
                    <span>{{pagination.pageStart}}-{{pagination.pageStop}}</span>
                    <span class="ml-1">共{{pagination.itemsLength}}条</span>
                </template>
            </v-data-table>
        </v-card>
    </div>
</v-app>
{% include 'common/jianghuJs/fixedTableHeightV4.html' %}
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vueComponent: 'page',
        vuetify: new Vuetify(),
        data: {
            isTableZebraLineShown: true,
            constantObj: {
                gender: [{ "value": "male", "text": "男" }, { "value": "female", "text": "女" }],
                level: [{ "value": "01", "text": "一年级" }, { "value": "02", "text": "二年级" }, { "value": "03", "text": "三年级" }],
            },
            searchInput: null,
            isTableLoading: true,
            tableData: [],
            headers: [
                { text: "学生ID", value: "studentId", width: 80, class: 'fixed', cellClass: 'fixed' },
                { text: "班级ID", value: "classId", width: 140 },
                { text: "学生名字", value: "name", width: 120 },
                { text: "年级", value: "level", width: 120 },
                { text: "性别", value: "gender", width: 120 },
                { text: "出生日期", value: "dateOfBirth", width: 120 },
                { text: "身高", value: "bodyHeight", width: 120 },
                { text: "学生状态", value: "studentStatus", width: 120 },
                { text: "备注", value: "remarks", width: 120 },
                { text: "操作者", value: "operationByUser", width: 120 },
                { text: "操作时间", value: "operationAt", width: 250 },
            ],
            tableSelected: [],
        },
        watch: {},
        async created() {
            this.doUiAction('getTableData');
        },
        async mounted() {
        },
        methods: {
            async doUiAction(uiActionId, uiActionData) {
                try {
                    switch (uiActionId) {
                        case 'getTableData':
                            await this.getTableData();
                            break;
                        default:
                            console.error("[doUiAction] uiActionId not find", { uiActionId });
                            break;
                    }
                } catch (error) {
                    throw error;
                } finally {
                    window.jhMask && window.jhMask.hide();
                }
            },
            async getTableData() {
                this.isTableLoading = true;
                const result = await window.jianghuAxios({
                    data: {
                        appData: {
                            pageId: 'playground-doUiAction',
                            actionId: 'selectItemList',
                            actionData: {},
                            where: {},
                            orderBy: [{ column: 'operationAt', order: 'desc' }]
                        }
                    }
                });
                this.tableData = result.data.appData.resultData.rows;
                this.isTableLoading = false;
            },
            // ---------- table selected >>>>>>>>>>>> --------
            tableItemSelected({ item, value }) {
                if (value) {
                    this.tableSelected.push(item);
                } else {
                    this.tableSelected = _.reject(this.tableSelected, ['studentId', item.studentId]);
                }
            },
            tableToggleSelectAll({ items, value }) {
                if (value) {
                    this.tableSelected = items;
                } else {
                    this.tableSelected = [];
                }
            },
            // ---------- <<<<<<<<<<< table selected  --------
        }
    })
</script>

CRUD Table

<jh-toast />
<jh-mask />
<jh-confirm-dialog />
<v-app mobile-breakpoint="sm">
    <!-- 头部内容 >>>>>>>>>>>>> -->
    <div class="jh-page-second-bar px-8">
        <v-row class="align-center" dense>
            <v-col cols="12" xs="12" sm="4" md="4" xl="3">
                <div class="py-4 text-body-1 font-weight-bold d-flex align-center">CRUD Table</div>
            </v-col>
            <!-- 搜索条件表单 >>>>>>>> -->
            <v-col cols="12" xs="12" sm="8" md="8" xl="9">
                <v-row class="jh-backend-form-container justify-end ma-0 py-3">
                    <div class="jh-backend-search-btn">
                        <v-btn class="elevation-0 float-right mt-2 mt-md-0" color="success" small
                            @click="doUiAction('getTableData')">
                            查询
                        </v-btn>
                    </div>
                </v-row>
            </v-col>
            <!-- <<<<<<<< 搜索条件表单 -->
        </v-row>
    </div>
    <!-- <<<<<<<<<<<<< 头部内容 -->
    <div class="jh-page-body-container px-8">
        <!-- 页面内容 >>>>>>>>>>>>> -->
        <v-card class="rounded-lg">
            <v-row class="ma-0 pa-3">
                <!-- 新增按钮 -->
                <v-btn color="success" class="elevation-0 mr-2" @click="doUiAction('startCreateItem')" small>新增</v-btn>
                <v-btn class="red--text text--accent-2 elevation-0 mr-2" small outlined
                    @click="doUiAction('deleteItemBatch')" :disabled="tableSelected.length === 0">批量删除</v-btn>
                <v-spacer></v-spacer>
                <!-- 搜索过滤 -->
                <v-col cols="12" xs="8" sm="4" md="3" xl="2" class="pa-0">
                    <v-text-field color="success" v-model="searchInput" prefix="搜索：" class="jh-v-input" dense filled
                        single-line></v-text-field>
                </v-col>
            </v-row>
            <!-- 表格 -->
            <v-data-table :headers="headers" :items="tableData" :search="searchInput"
                :footer-props="{ itemsPerPageOptions: [20, 50, -1], itemsPerPageText: '每页行数', itemsPerPageAllText: '所有'}"
                :items-per-page="-1" mobile-breakpoint="0" :loading="isTableLoading"
                :class="{'zebraLine': isTableZebraLineShown }" checkbox-color="success" fixed-header
                class="jh-fixed-table-height elevation-0 mt-0 mb-xs-4" show-select item-key="studentId"
                @item-selected="tableItemSelected" @toggle-select-all="tableToggleSelectAll" v-model="tableSelected">
                <!-- 表格行操作按钮 -->
                <template v-slot:item.action="{ item }">
                    <template>
                        <!-- pc端 -->
                        <template v-if="!isMobile">
                            <span role="button" class="success--text font-weight-medium font-size-2 mr-2"
                                @click="doUiAction('startUpdateItem', item)">
                                <v-icon size="16" class="success--text">mdi-note-edit-outline</v-icon>修改
                            </span>
                            <span role="button" class="red--text text--accent-2 font-weight-medium font-size-2"
                                @click="doUiAction('deleteItem', item)">
                                <v-icon size="16" class="red--text text--accent-2">mdi-trash-can-outline</v-icon>删除
                            </span>
                        </template>
                        <!-- 手机端 -->
                        <v-menu offset-y v-if="isMobile">
                            <template v-slot:activator="{ on, attrs }">
                                <span role="button" class="success--text font-weight-medium font-size-2" v-bind="attrs"
                                    v-on="on">
                                    操作<v-icon size="14" class="success--text">mdi-chevron-down</v-icon>
                                </span>
                            </template>
                            <v-list dense>
                                <v-list-item @click="doUiAction('startUpdateItem', item)">
                                    <v-list-item-title>修改</v-list-item-title>
                                </v-list-item>
                                <v-list-item @click="doUiAction('deleteItem', item)">
                                    <v-list-item-title>删除</v-list-item-title>
                                </v-list-item>
                            </v-list>
                        </v-menu>
                    </template>
                </template>
                <!-- 性别 -->
                <template v-slot:item.gender="{ item }">
                    {{ getDisplayText({displayObj: constantObj.gender, displayValue: item.gender}) }}
                </template>
                <!-- 年级 -->
                <template v-slot:item.level="{ item }">
                    {{ getDisplayText({displayObj: constantObj.level, displayValue: item.level}) }}
                </template>
                <!-- 没有数据 -->
                <template v-slot:loading>
                    <div class="jh-no-data">数据加载中</div>
                </template>
                <template v-slot:no-data>
                    <div class="jh-no-data">暂无数据</div>
                </template>
                <template v-slot:no-results>
                    <div class="jh-no-data">暂无数据</div>
                </template>
                <!-- 表格分页 -->
                <template v-slot:footer.page-text="pagination">
                    <span>{{pagination.pageStart}}-{{pagination.pageStop}}</span>
                    <span class="ml-1">共{{pagination.itemsLength}}条</span>
                </template>
            </v-data-table>
        </v-card>
        <!-- <<<<<<<<<<<<< 页面内容 -->
        <!-- 新增抽屉 -->
        <v-navigation-drawer v-model="isCreateDrawerShown" v-click-outside="drawerClickOutside" fixed temporary right
            width="80%" class="elevation-24">
            <v-form ref="createForm" lazy-validation>
                <!-- 抽屉标题 -->
                <v-row no-gutters>
                    <span class="text-h7 font-weight-bold pa-4">添加信息</span>
                </v-row>
                <v-divider class="jh-divider"></v-divider>
                <!-- 抽屉表单主体 -->
                <v-row class="mt-0 px-4">
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">学生ID<span class="red--text text--accent-2 ml-1">*必填</span></span>
                        <v-text-field class="jh-v-input" dense single-line filled label="学生ID"
                            v-model="createItem.studentId" :rules="validationRules.requireRules"></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">班级ID</span>
                        <v-select class="jh-v-input" dense single-line filled clearable label="班级ID"
                            v-model="createItem.classId" :items="constantObj.classId"></v-select>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">学生名字</span>
                        <v-text-field class="jh-v-input" dense single-line filled label="学生名字"
                            v-model="createItem.name"></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">年级</span>
                        <v-select class="jh-v-input" dense single-line filled clearable label="年级"
                            v-model="createItem.level" :items="constantObj.level"></v-select>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">性别</span>
                        <v-select class="jh-v-input" dense single-line filled clearable label="性别"
                            v-model="createItem.gender" :items="constantObj.gender"></v-select>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">出生日期</span>
                        <v-menu class="jh-v-input" transition="scale-transition" offset-y min-width="auto">
                            <template v-slot:activator="{on, attrs}">
                                <v-text-field v-bind="attrs" v-on="on" v-model="createItem.dateOfBirth"
                                    class="jh-v-input" dense single-line filled readonly label="出生日期"></v-text-field>
                            </template>
                            <v-date-picker color="success" elevation="20"
                                v-model="createItem.dateOfBirth"></v-date-picker>
                        </v-menu>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">身高</span>
                        <v-text-field class="jh-v-input" dense single-line filled label="身高"
                            v-model="createItem.bodyHeight"></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">学生状态</span>
                        <v-select class="jh-v-input" dense single-line filled clearable label="学生状态"
                            v-model="createItem.studentStatus" :items="constantObj.studentStatus"></v-select>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">备注</span>
                        <v-text-field class="jh-v-input" dense single-line filled label="备注"
                            v-model="createItem.remarks"></v-text-field>
                    </v-col>
                </v-row>
                <!-- 抽屉操作按钮 -->
                <v-row class="justify-end mx-0 my-8 px-4">
                    <v-btn color="success" @click="doUiAction('createItem')" small>保存</v-btn>
                    <v-btn class="ml-2" @click="isCreateDrawerShown = false" small>取消</v-btn>
                </v-row>
            </v-form>
            <!-- 抽屉关闭按钮 -->
            <v-btn elevation="0" color="success" fab absolute top left small tile class="drawer-close-float-btn"
                @click="isCreateDrawerShown = false">
                <v-icon>mdi-close</v-icon>
            </v-btn>
        </v-navigation-drawer>
        <!-- 编辑抽屉 -->
        <v-navigation-drawer v-model="isUpdateDrawerShown" v-click-outside="drawerClickOutside" fixed temporary right
            width="80%" class="elevation-24">
            <v-form ref="updateForm" lazy-validation>
                <!-- 抽屉标题 -->
                <v-row no-gutters>
                    <span class="text-h7 font-weight-bold pa-4">修改信息</span>
                </v-row>
                <v-divider class="jh-divider"></v-divider>
                <!-- 抽屉表单 -->
                <v-row class="mt-0 px-4">
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">学生ID<span class="red--text text--accent-2 ml-1">*必填</span></span>
                        <v-text-field class="jh-v-input" disabled dense single-line filled label="学生ID"
                            v-model="updateItem.studentId" :rules="validationRules.requireRules"></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">班级ID</span>
                        <v-select class="jh-v-input" dense single-line filled clearable label="班级ID"
                            v-model="updateItem.classId" :items="constantObj.classId"></v-select>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">学生名字</span>
                        <v-text-field class="jh-v-input" dense single-line filled label="学生名字"
                            v-model="updateItem.name"></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">年级</span>
                        <v-select class="jh-v-input" dense single-line filled clearable label="年级"
                            v-model="updateItem.level" :items="constantObj.level"></v-select>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">性别</span>
                        <v-select class="jh-v-input" dense single-line filled clearable label="性别"
                            v-model="updateItem.gender" :items="constantObj.gender"></v-select>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">出生日期</span>
                        <v-menu class="jh-v-input" transition="scale-transition" offset-y min-width="auto">
                            <template v-slot:activator="{on, attrs}">
                                <v-text-field v-bind="attrs" v-on="on" v-model="updateItem.dateOfBirth"
                                    class="jh-v-input" dense single-line filled readonly label="出生日期"></v-text-field>
                            </template>
                            <v-date-picker color="success" elevation="20"
                                v-model="updateItem.dateOfBirth"></v-date-picker>
                        </v-menu>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">身高</span>
                        <v-text-field class="jh-v-input" dense single-line filled label="身高"
                            v-model="updateItem.bodyHeight"></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">学生状态</span>
                        <v-select class="jh-v-input" dense single-line filled clearable label="学生状态"
                            v-model="updateItem.studentStatus" :items="constantObj.studentStatus"></v-select>
                    </v-col>
                    <v-col cols="12" sm="12" md="4">
                        <span class="jh-input-label">备注</span>
                        <v-text-field class="jh-v-input" dense single-line filled label="备注"
                            v-model="updateItem.remarks"></v-text-field>
                    </v-col>
                </v-row>
                <!-- 抽屉操作按钮 -->
                <v-row class="justify-end mx-0 my-8 px-4">
                    <v-btn color="success" small @click="doUiAction('updateItem')">保存</v-btn>
                    <v-btn class="ml-2" small @click="isUpdateDrawerShown = false">取消
                    </v-btn>
                </v-row>
            </v-form>
            <!-- 抽屉关闭按钮 -->
            <v-btn elevation="0" color="success" fab absolute top left small tile class="drawer-close-float-btn"
                @click="isUpdateDrawerShown = false">
                <v-icon>mdi-close</v-icon>
            </v-btn>
        </v-navigation-drawer>
    </div>
    <!-- 帮助页抽屉 >>>>>>>>>>>>> -->
    <v-navigation-drawer v-if="isHelpPageDrawerShown" v-model="isHelpPageDrawerShown"
        v-click-outside="drawerClickOutside" fixed temporary right width="80%" class="elevation-24">
        <iframe style="border: 0" :src="`/${appInfo.appId}/pageDoc#3.doUiAction.md`" width="100%"
            height="100%"></iframe>
        <v-btn elevation="0" color="success" fab absolute top left small tile class="drawer-close-float-btn"
            @click="isHelpPageDrawerShown = false">
            <v-icon>mdi-close</v-icon>
        </v-btn>
    </v-navigation-drawer>
    <!-- <<<<<<<<<<<<< 帮助页抽屉 -->
</v-app>
{% include 'common/jianghuJs/fixedTableHeightV4.html' %}
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vueComponent: 'page',
        vuetify: new Vuetify(),
        data: {
            isHelpPageDrawerShown: false,
            isMobile: window.innerWidth < 500,
            // 表格相关数据
            isTableZebraLineShown: true,
            validationRules: {
                requireRules: [
                    v => !!v || 'This is required',
                ],
            },
            // 下拉选项
            constantObj: {
                gender: [{ "value": "male", "text": "男" }, { "value": "female", "text": "女" }],
                classId: [
                    { "value": "2021-01级-01班", "text": "2021-01级-01班" }, { "value": "2021-01级-02班", "text": "2021-01级-02班" },
                    { "value": "2021-02级-01班", "text": "2021-02级-01班" }, { "value": "2021-02级-02班", "text": "2021-02级-02班" },
                    { "value": "2021-03级-01班", "text": "2021-03级-01班" }, { "value": "2021-03级-02班", "text": "2021-03级-02班" }
                ],
                level: [{ "value": "01", "text": "一年级" }, { "value": "02", "text": "二年级" }, { "value": "03", "text": "三年级" }],
                studentStatus: [{ "value": "正常", "text": "正常" }, { "value": "退学", "text": "退学" }]
            },
            searchInput: null,
            isTableLoading: true,
            tableData: [],
            headers: [
                { text: "学生ID", value: "studentId", width: 80, class: window.innerWidth < 500 ? 'fixed' : '', cellClass: window.innerWidth < 500 ? 'fixed' : '' },
                { text: "班级ID", value: "classId", width: 140 },
                { text: "学生名字", value: "name", width: 120 },
                { text: "年级", value: "level", width: 120 },
                { text: "性别", value: "gender", width: 120 },
                { text: "出生日期", value: "dateOfBirth", width: 120 },
                { text: "身高", value: "bodyHeight", width: 120 },
                { text: "学生状态", value: "studentStatus", width: 120 },
                { text: "备注", value: "remarks", width: 120 },
                { text: "操作者", value: "operationByUser", width: 120 },
                { text: "操作时间", value: "operationAt", width: 250 },
                { text: '操作', value: 'action', align: 'center', sortable: false, width: window.innerWidth < 500 ? 80 : 120, class: 'fixed', cellClass: 'fixed' },
            ],
            tableSelected: [],
            isCreateDrawerShown: false,
            createItem: {},
            createActionData: {},
            isUpdateDrawerShown: false,
            updateItem: {},
            updateItemId: null,
            updateActionData: {},
            deleteItem: {},
            deleteItemId: null
        },
        watch: {},
        mounted() {
            this.doUiAction('getTableData');
        },
        methods: {
            async doUiAction(uiActionId, uiActionData) {
                try {
                    switch (uiActionId) {
                        case 'getTableData':
                            await this.getTableData();
                            break;
                        case 'startCreateItem':
                            await this.prepareCreateFormData();
                            await this.openCreateDrawer();
                            break;
                        case 'createItem':
                            await this.prepareCreateValidate();
                            await this.confirmCreateItemDialog();
                            await this.prepareDoCreateItem();
                            await this.doCreateItem();
                            await this.closeCreateDrawer();
                            await this.getTableData();
                            break;
                        case 'startUpdateItem':
                            await this.prepareUpdateFormData(uiActionData);
                            await this.openUpdateDrawer();
                            break;
                        case 'updateItem':
                            await this.prepareUpdateValidate();
                            await this.confirmUpdateItemDialog();
                            await this.prepareDoUpdateItem();
                            await this.doUpdateItem();
                            await this.closeUpdateDrawer();
                            await this.getTableData();
                            break;
                        case 'deleteItem':
                            await this.prepareDeleteFormData(uiActionData);
                            await this.confirmDeleteItemDialog();
                            await this.prepareDoDeleteItem();
                            await this.doDeleteItem();
                            await this.clearDeleteItem();
                            await this.getTableData();
                            break;
                        case 'deleteItemBatch':
                            await this.confirmDeleteItemDialog();
                            await this.doDeleteItemBatch();
                            await this.clearTableSelected();
                            await this.getTableData();
                            break;
                        default:
                            console.error("[doUiAction] uiActionId not find", { uiActionId });
                            break;
                    }
                } catch (error) {
                    throw error;
                } finally {
                    window.jhMask && window.jhMask.hide();
                }
            },
            async getTableData() {
                this.isTableLoading = true;
                const result = await window.jianghuAxios({
                    data: {
                        appData: {
                            pageId: 'playground-doUiAction',
                            actionId: 'selectItemList',
                            actionData: {},
                            where: {},
                            orderBy: [{ column: 'operationAt', order: 'desc' }]
                        }
                    }
                });
                this.tableData = result.data.appData.resultData.rows;
                this.isTableLoading = false;
            },
            // ---------- 新增数据 uiAction >>>>>>>>>> --------
            async prepareCreateFormData() {
                this.createItem = {};
            },
            async openCreateDrawer() {
                this.isCreateDrawerShown = true;
            },
            async prepareCreateValidate() {
                if (await this.$refs.createForm.validate()) {
                    return true;
                }
                throw new Error("请完善表单信息")
            },
            async confirmCreateItemDialog() {
                if (await window.confirmDialog({ title: "新增", content: "确定新增吗？" }) === false) {
                    throw new Error("[confirmCreateFormDialog] 否");
                }
            },
            prepareDoCreateItem() {
                const { id, ...data } = this.createItem;
                this.createActionData = data;
            },
            async doCreateItem() {
                await window.jhMask.show();
                await window.vtoast.loading("新增学生");
                await window.jianghuAxios({
                    data: {
                        appData: {
                            pageId: 'playground-doUiAction',
                            actionId: 'insertItem',
                            actionData: this.createActionData
                        }
                    }
                })
                await window.jhMask.hide();
                await window.vtoast.success("新增学生成功");
            },
            async closeCreateDrawer() {
                this.isCreateDrawerShown = false;
                this.createItem = {};
                this.createActionData = null;
            },
            // ---------- <<<<<<<<<<< 新增数据 uiAction ---------
            // ---------- 修改数据 uiAction >>>>>>>>>>>> --------
            async prepareUpdateFormData(funObj) {
                this.updateItem = _.cloneDeep(funObj);
            },
            async openUpdateDrawer() {
                this.isUpdateDrawerShown = true;
            },
            async prepareUpdateValidate() {
                if (await this.$refs.updateForm.validate()) {
                    return true;
                }
                throw new Error("请完善表单信息")
            },
            async confirmUpdateItemDialog() {
                if (await window.confirmDialog({ title: "修改", content: "确定修改吗？" }) === false) {
                    throw new Error("[confirmUpdateItemDialog] 否");
                }
            },
            async prepareDoUpdateItem() {
                const { id, ...data } = this.updateItem;
                this.updateItemId = id;
                this.updateActionData = data;
            },
            async doUpdateItem() {
                await window.jhMask.show();
                await window.vtoast.loading("修改学生");
                await window.jianghuAxios({
                    data: {
                        appData: {
                            pageId: 'playground-doUiAction',
                            actionId: 'updateItem',
                            actionData: this.updateActionData,
                            where: { id: this.updateItemId }
                        }
                    }
                })
                await window.jhMask.hide();
                await window.vtoast.success("修改学生成功");
            },
            async closeUpdateDrawer() {
                this.isUpdateDrawerShown = false;
                this.updateItem = {};
                this.updateActionData = null;
                this.updateItemId = null;
            },
            // ---------- <<<<<<<<<<< 修改数据 uiAction ---------
            // ---------- 删除数据 uiAction >>>>>>>>>>>> --------
            async prepareDeleteFormData(funObj) {
                this.deleteItem = _.cloneDeep(funObj);
            },
            async confirmDeleteItemDialog() {
                if (await window.confirmDialog({ title: "删除", content: "确定删除吗？" }) === false) {
                    throw new Error("[confirmDeleteItemDialog] 否");
                }
            },
            async prepareDoDeleteItem() {
                const { id } = this.deleteItem;
                this.deleteItemId = id;
            },
            async doDeleteItem() {
                await window.vtoast.loading("删除学生");
                await window.jianghuAxios({
                    data: {
                        appData: {
                            pageId: 'playground-doUiAction',
                            actionId: 'deleteItem',
                            actionData: {},
                            where: { id: this.deleteItemId }
                        }
                    }
                });
                await window.vtoast.success("删除学生成功");
            },
            async clearDeleteItem() {
                this.deleteItem = {};
                this.deleteItemId = null;
            },
            // ---------- <<<<<<<<<<< 删除数据 uiAction ---------
            // ---------- 批量删除数据 uiAction >>>>>>>>>>>> --------
            async doDeleteItemBatch() {
                await window.vtoast.loading("批量删除");
                for (const item of this.tableSelected) {
                    await window.jianghuAxios({
                        data: {
                            appData: {
                                pageId: 'playground-doUiAction',
                                actionId: 'deleteItem',
                                actionData: {},
                                where: { id: item.id }
                            }
                        }
                    });
                }
                await window.vtoast.success("批量删除");
            },
            async clearTableSelected() {
                this.tableSelected = [];
            },
            // ---------- <<<<<<<<<<< 批量删除数据 uiAction ---------
            // ---------- table selected >>>>>>>>>>>> --------
            tableItemSelected({ item, value }) {
                if (value) {
                    this.tableSelected.push(item);
                } else {
                    this.tableSelected = _.reject(this.tableSelected, ['studentId', item.studentId]);
                }
            },
            tableToggleSelectAll({ items, value }) {
                if (value) {
                    this.tableSelected = items;
                } else {
                    this.tableSelected = [];
                }
            },
            // ---------- <<<<<<<<<<< table selected  --------
        }
    })
</script>