yvan-rcs-web/src/views/user/users.vue

<script setup lang="ts">
import { createVNode, reactive } from "vue";
import { ElButton } from "element-plus";
import { Delete, EditPen, Plus, Search } from "@element-plus/icons-vue";
import DataForm from "@/components/data-form/DataForm.vue";
import type { FormField } from "@/components/data-form/DataFormTypes.ts";
import { AgGridVue } from "ag-grid-vue3";
import { type GridOptions, type IServerSideGetRowsParams } from "ag-grid-enterprise";
import type { GridApi, GridReadyEvent } from "ag-grid-community";
import { localeText as localeTextCn } from "@/components/yvTable/yv-aggrid-cn.locale";
import { Request } from "@ease-forge/shared";

// 定义 Props 类型
interface ComponentProps {
}

// 读取组件 props 属性
const props = withDefaults(defineProps<ComponentProps>(), {});

// 定义 State 类型
interface ComponentState {
    loading: boolean;
    queryData: any;
    grid1Data: Array<any>;
}

// state 属性
const state = reactive<ComponentState>({
    loading: false,
    queryData: {},
    grid1Data: [],
});

// 定义 Data 类型
interface ComponentData {
    formFields?: Array<FormField>;
    gridSetting: Partial<GridOptions>;
    api?: GridApi;
}

// 内部数据
const data: ComponentData = {
    formFields: [
        {
            dataPath: 'loginName', label: '用户登录名', input: 'Input',
            inputProps: {
                placeholder: '用户登录名',
                clearable: true,
            }
        },
        {
            dataPath: 'isEnable', label: '是否启用', input: 'SelectV2',
            inputProps: {
                placeholder: "是否启用",
                clearable: true,
                options: [
                    { value: "0", label: "禁用" },
                    { value: "1", label: "启用" },
                ],
            }
        },
    ],
    gridSetting: {
        localeText: localeTextCn,
        // suppressNoRowsOverlay: true,
        // suppressLoadingOverlay: true,
        // 选择行配置
        rowSelection: "single",
        rowModelType: "serverSide",
        columnDefs: [
            { field: 'id', headerName: 'id', editable: false, hide: true },
            { field: 'loginName', headerName: '登录名', editable: false },
            { field: 'password', headerName: '密码', editable: false, hide: true },
            { field: 'userName', headerName: '用户名', editable: false },
            { field: 'isEnable', headerName: '是否启用', editable: false },
            { field: 'createAt', headerName: '创建时间', editable: false },
            { field: 'createBy', headerName: '创建人', editable: false },
            { field: 'updateAt', headerName: '最后更新时间', editable: false },
            { field: 'updateBy', headerName: '更新人', editable: false },
        ],
        pagination: true,
        paginationPageSize: 50,
        // cacheBlockSize: 50,
        // suppressPaginationPanel
        onGridReady(event: GridReadyEvent) {
            data.api = event.api;
            data.api.setServerSideDatasource({ getRows: serverSideDatasource });
        },
    },
};

function reload() {
    data.api.paginationGoToPage(0);
    data.api.setServerSideDatasource({ getRows: serverSideDatasource });
}

function serverSideDatasource(params: IServerSideGetRowsParams) {
    const { startRow, endRow } = params.request;
    console.log("startRow, endRow ", params.request);
    const pageSize = endRow - startRow;
    const pageNo = Math.floor(startRow / pageSize) + 1;
    state.loading = true;
    Request.request.get<PageData>(
        "/api/workbench/UserPermissions@queryUser",
        {
            params: {
                ...state.queryData,
                pageSize,
                pageNo,
            },
        },
    ).then(page => {
        params.success({ rowData: page.records, rowCount: page.total })
    }).finally(() => state.loading = false);
}

function addOrUpdate(add: boolean = true) {
    let row = {};
    let ref;
    if (!add) {
        const select = data.api?.getSelectedRows()?.[0];
        if (!select) {
            system.msg("未选择数据行");
            return;
        }
        row = select;
    }
    system.showDialog(createVNode(DataForm, {
        refCallback: v => ref = v,
        data: row,
        formFields: [
            {
                dataPath: 'loginName', label: '登录名', input: 'Input',
                inputProps: {
                    placeholder: '登录名',
                    disabled: !add,
                }
            },
            {
                dataPath: 'password', label: '密码', input: 'Input',
                inputProps: {
                    placeholder: '密码',
                    type: "password",
                    showPassword: true,
                }
            },
            {
                dataPath: 'userName', label: '姓名', input: 'Input',
                inputProps: {
                    placeholder: '姓名'
                }
            },
            {
                dataPath: 'isEnable', label: '启用', input: 'Switch',
                inputProps: {
                    inactiveValue: 0,
                    activeValue: 1,
                    inlinePrompt: true,
                    inactiveText: "禁用",
                    activeText: "启用",
                },
            },
        ],
        rules: {
            loginName: [
                { required: true, message: "登录名必填", trigger: "blur" },
            ],
            password: [
                { required: true, message: "密码必填", trigger: "blur" },
            ],
            userName: [
                { required: true, message: "姓名必填", trigger: "blur" },
            ],
        },
        showMessage: true,
        columnCount: 1,
        labelWidth: '70px'
    }), {
        title: `${add ? "新增" : "编辑"}用户`,
        width: 480,
        height: 300,
        showClose: true,
        showMax: false,
        showCancelButton: true,
        showOkButton: true,
        okButtonText: '确定',
        cancelButtonText: '取消',
        manualClose: async (close) => {
            await ref.data.formRef.validate();
            Request.request.post(`/api/workbench/UserPermissions@${add ? "addUser" : "updateUser"}`, row).then(() => {
                close();
                reload();
            });
        },
    }).then().finally()
}

function delUser() {
    const select = data.api?.getSelectedRows()?.[0];
    if (!select) {
        system.msg("未选择数据行");
        return;
    }
    system.confirm(`是否删除用户: ${select.loginName}?`).then(() => {
        Request.request.post(`/api/workbench/UserPermissions@delUser?id=${select.id}`).then(() => {
            reload();
        });
    });
}
</script>

<template>
    <div class="common-layout dashboard flex-column-container">
        <div class="toolbar flex-item-fixed">
            <ElButton :icon="Search" :loading="state.loading" @click="reload" type="warning" plain>查询</ElButton>
            <ElButton :icon="Plus" @click="addOrUpdate(true)">新增</ElButton>
            <ElButton :icon="EditPen" @click="addOrUpdate(false)">编辑</ElButton>
            <ElButton :icon="Delete" type="danger" :plain="true" @click="delUser">删除</ElButton>
        </div>
        <DataForm
            class="query-form flex-item-fixed"
            :data="state.queryData"
            :formFields="data.formFields"
            :columnCount="4"
            layout="bothFixed"
            labelWidth="85px"
            inputWidth="200px"
            :inline="true"
        />
        <AgGridVue
            ref="gridRef"
            :class="['ag-theme-alpine', 'yv-table', 'hi-light-selected-row','allow-vertical-line', 'flex-item-fill']"
            v-bind="{...data.gridSetting}"
        >
        </AgGridVue>
    </div>
</template>

<style scoped>
.dashboard {
    height: 100%;
}

.query-form {
    height: unset;
}
</style>