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