You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
3.7 KiB
128 lines
3.7 KiB
<script setup lang="ts">
|
|
import { onMounted, reactive, useTemplateRef } from "vue";
|
|
import { AgGridVue } from "ag-grid-vue3";
|
|
import { ElButton } from "element-plus";
|
|
import { type GridOptions } from "ag-grid-enterprise";
|
|
import { type GridApi, type GridReadyEvent } from "ag-grid-community";
|
|
import { Request } from "@ease-forge/shared";
|
|
import { localeText as localeTextCn } from "../components/yvTable/yv-aggrid-cn.locale";
|
|
import "ag-grid-community/styles/ag-grid.css";
|
|
import "ag-grid-community/styles/ag-theme-alpine.css";
|
|
|
|
defineOptions({
|
|
name: 'OpenProject',
|
|
});
|
|
|
|
// 组件事件定义
|
|
const emit = defineEmits<{
|
|
"cancel": [];
|
|
"open": [row: any];
|
|
"add": [expose: OpenProjectExpose];
|
|
}>();
|
|
|
|
// 定义 Props 类型
|
|
interface OpenProjectProps {
|
|
}
|
|
|
|
// 读取组件 props 属性
|
|
const props = withDefaults(defineProps<OpenProjectProps>(), {});
|
|
|
|
// 定义 State 类型
|
|
interface OpenProjectState {
|
|
grid1Data?: Array<any>;
|
|
}
|
|
|
|
// state 属性
|
|
const state = reactive<OpenProjectState>({});
|
|
|
|
// 定义 Data 类型
|
|
interface OpenProjectData {
|
|
gridSetting: Partial<GridOptions>;
|
|
api?: GridApi;
|
|
}
|
|
|
|
// 内部数据
|
|
const data: OpenProjectData = {
|
|
gridSetting: {
|
|
localeText: localeTextCn,
|
|
// suppressNoRowsOverlay: true,
|
|
// suppressLoadingOverlay: true,
|
|
// 选择行配置
|
|
rowSelection: "single",
|
|
columnDefs: [
|
|
{ field: 'id', headerName: 'id', editable: false, hide: true },
|
|
{ field: 'projectUuid', headerName: '项目编号', editable: false },
|
|
{ field: 'projectLabel', headerName: '项目标题', editable: false },
|
|
{ field: 'projectVersion', headerName: '项目版本', editable: false },
|
|
{ field: 'server', headerName: '所在服务器', editable: false },
|
|
{ field: 'directoryData', headerName: '目录数据', editable: false },
|
|
{ field: 'otherData', headerName: '其他数据', editable: false },
|
|
{ field: 'createAt', headerName: '创建时间', editable: false },
|
|
{ field: 'createBy', headerName: '创建人', editable: false },
|
|
{ field: 'updateAt', headerName: '最后更新时间', editable: false },
|
|
{ field: 'updateBy', headerName: '更新人', editable: false },
|
|
],
|
|
onGridReady(event: GridReadyEvent) {
|
|
data.api = event.api
|
|
},
|
|
},
|
|
};
|
|
const grid = useTemplateRef<InstanceType<typeof AgGridVue>>("gridRef");
|
|
onMounted(loadData);
|
|
|
|
function loadData() {
|
|
Request.request.post("/api/workbench/LccModelManager@projectList").then(res => {
|
|
state.grid1Data = res.records;
|
|
});
|
|
}
|
|
|
|
function open() {
|
|
const row = data.api?.getSelectedRows()?.[0];
|
|
if (!row) return;
|
|
emit("open", row);
|
|
}
|
|
|
|
function add() {
|
|
emit("add", expose);
|
|
}
|
|
|
|
interface OpenProjectExpose {
|
|
state: OpenProjectState;
|
|
data: OpenProjectData;
|
|
loadData: () => void;
|
|
}
|
|
|
|
const expose: OpenProjectExpose = {
|
|
state,
|
|
data,
|
|
loadData,
|
|
};
|
|
// 定义组件公开内容
|
|
defineExpose(expose);
|
|
|
|
export type {
|
|
OpenProjectProps,
|
|
OpenProjectState,
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex-column-container" style="height: 100%;">
|
|
<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 class="flex-item-fixed" style="padding-top: 12px;padding-right: 12px;text-align: right;">
|
|
<ElButton type="primary" @click="open">打开</ElButton>
|
|
<ElButton type="primary" @click="add">新建项目</ElButton>
|
|
<ElButton @click="emit('cancel')">取消</ElButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|