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.
119 lines
2.9 KiB
119 lines
2.9 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: 'projectUuid', headerName: '项目编号', editable: false, flex: 1 },
|
|
{ field: 'projectLabel', headerName: '项目标题', editable: false, flex: 1 }
|
|
],
|
|
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.data
|
|
})
|
|
}
|
|
|
|
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>
|
|
|