5 changed files with 248 additions and 28 deletions
@ -0,0 +1,128 @@ |
|||
<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> |
|||
Loading…
Reference in new issue