yvan-rcs-web/src/views/device/vehicles.vue

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { ElButton } from "element-plus";
import { 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 } 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";
import lodash from "lodash";

// 定义 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: 'virtualFloorCode', label: '仿真车所在楼层', input: 'Input',
            inputProps: {
                placeholder: '仿真车所在楼层',
                clearable: true,
            }
        },
        {
            dataPath: 'isActive', label: '是否激活', input: 'Checkbox',
            inputProps: {
                placeholder: '是否激活',
                clearable: true,
            }
        },
    ],
    gridSetting: {
        localeText: localeTextCn,
        // suppressNoRowsOverlay: true,
        // suppressLoadingOverlay: true,
        // 选择行配置
        rowSelection: "single",
        columnDefs: [
            { headerName: "环境ID", field: "envId" },
            { headerName: "执行器ID", field: "executorId" },
            { headerName: "仿真车所在楼层", field: "virtualFloorCode" },
            { headerName: "仿真车所在XYZ", field: "virtualLocationAt" },
            { headerName: "仿真车配置详情", field: "virtualExecutorPayload" },
            {
                headerName: "是否激活", field: "isActive",
                valueFormatter: params => lodash.toString(params.value) === "0" ? "否" : "是",
            },
            { headerName: "创建时间", field: "createAt" },
            { headerName: "创建人", field: "createBy" },
            { headerName: "更新时间", field: "updateAt" },
            { headerName: "更新人", field: "updateBy" },
        ],
        onGridReady(event: GridReadyEvent) {
            data.api = event.api;
            // data.api.setServerSideDatasource({ getRows: serverSideDatasource });
        },
    },
};
onMounted(reload);

function reload() {
    state.loading = true;
    Request.request.get<Array<any>>(
        "/api/workbench/DeviceManager@queryExecutor",
        {
            params: {
                ...state.queryData,
            },
        },
    ).then(data => {
        state.grid1Data = data;
    }).finally(() => state.loading = false);
}
</script>

<template>
    <div class="common-layout dashboard flex-column-container">
        <div class="flex-item-fixed toolbar">
            <ElButton :icon="Search" :loading="state.loading" @click="reload">查询</ElButton>
        </div>
        <DataForm
            class="query-form flex-item-fixed"
            :data="state.queryData"
            :formFields="data.formFields"
            :columnCount="4"
            layout="bothFixed"
            :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}"
            :modelValue="state.grid1Data"
        >
        </AgGridVue>
    </div>
</template>

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

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