|
|
@ -10,10 +10,10 @@ |
|
|
</template> |
|
|
</template> |
|
|
<script setup lang="ts"> |
|
|
<script setup lang="ts"> |
|
|
import { reactive, ref, onMounted, nextTick, watch } from 'vue'; |
|
|
import { reactive, ref, onMounted, nextTick, watch } from 'vue'; |
|
|
import { useRoute, onBeforeRouteUpdate } from 'vue-router'; |
|
|
import { useRoute } from 'vue-router'; |
|
|
import { axios, Environment, OptionComeFromEnum, FormTypeEnum, Tools } from 'platform-core'; |
|
|
import { axios, Environment } from 'platform-core'; |
|
|
|
|
|
|
|
|
import { getPageConfig, PageTemplateType } from './page.ts'; |
|
|
import { getPageConfig, PageTemplateType, Page } from './page.ts'; |
|
|
import GridPage from './grid/GridPage.vue'; |
|
|
import GridPage from './grid/GridPage.vue'; |
|
|
|
|
|
|
|
|
const gridPageRef = ref(); |
|
|
const gridPageRef = ref(); |
|
|
@ -38,13 +38,6 @@ watch( |
|
|
}, |
|
|
}, |
|
|
); |
|
|
); |
|
|
|
|
|
|
|
|
// onBeforeRouteUpdate((to, from, next) => { |
|
|
|
|
|
// // if (!Tools.isEmpty(to.query?.id) && !Tools.isEmpty(from.query?.id) && to.query.id !== from.query.id) { |
|
|
|
|
|
// // reload(); |
|
|
|
|
|
// // } |
|
|
|
|
|
// next(); |
|
|
|
|
|
// }); |
|
|
|
|
|
|
|
|
|
|
|
const reload = () => { |
|
|
const reload = () => { |
|
|
state.isReload = false; |
|
|
state.isReload = false; |
|
|
nextTick(() => { |
|
|
nextTick(() => { |
|
|
@ -61,27 +54,7 @@ const getJsonStr = async () => { |
|
|
state.pageType = result.type; |
|
|
state.pageType = result.type; |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
const getSelectOptions = async (configItem) => { |
|
|
|
|
|
let options = []; |
|
|
|
|
|
if (configItem.fieldIsSelect && configItem.optionComeFrom === OptionComeFromEnum.数据字典) { |
|
|
|
|
|
// 数据字典选项值 |
|
|
|
|
|
} else if (configItem.fieldIsSelect && configItem.optionComeFrom === OptionComeFromEnum.Java接口) { |
|
|
|
|
|
// java返回的选项值 |
|
|
|
|
|
} else if (configItem.fieldIsSelect && configItem.optionComeFrom === OptionComeFromEnum.自定义数组) { |
|
|
|
|
|
// 自定义数组 |
|
|
|
|
|
options = eval('(' + configItem.otherOptionValue + ')'); |
|
|
|
|
|
} else if (configItem.fieldIsSelect && configItem.optionComeFrom === 'sql') { |
|
|
|
|
|
const requestParams = { |
|
|
|
|
|
method: 'POST', |
|
|
|
|
|
headers: { 'content-type': 'text/plain;charset=utf-8;' }, |
|
|
|
|
|
data: configItem.otherOptionValue, |
|
|
|
|
|
url: Environment.apiContextPath('api/jdbc/fetchDataBySql'), |
|
|
|
|
|
}; |
|
|
|
|
|
const resp = await axios(requestParams); |
|
|
|
|
|
options = resp.data; |
|
|
|
|
|
} |
|
|
|
|
|
return options; |
|
|
|
|
|
}; |
|
|
|
|
|
const getConfig = async () => { |
|
|
const getConfig = async () => { |
|
|
const resp = await axios.get(Environment.apiContextPath('api/template/config/fetch/') + (props.configId ? props.configId : route.query.id)); |
|
|
const resp = await axios.get(Environment.apiContextPath('api/template/config/fetch/') + (props.configId ? props.configId : route.query.id)); |
|
|
if (resp && resp.data && resp.data.templateConfig?.templatePageLoadType === 'JSON') { |
|
|
if (resp && resp.data && resp.data.templateConfig?.templatePageLoadType === 'JSON') { |
|
|
@ -91,257 +64,10 @@ const getConfig = async () => { |
|
|
const templateGrid = resp.data.templateGrid; |
|
|
const templateGrid = resp.data.templateGrid; |
|
|
const templateGridFields = resp.data.templateGridFields; |
|
|
const templateGridFields = resp.data.templateGridFields; |
|
|
|
|
|
|
|
|
// 处理分页排序 |
|
|
|
|
|
const tablePagination = { |
|
|
|
|
|
// sortBy: '', |
|
|
|
|
|
// descending: true, |
|
|
|
|
|
reqPageStart: 0, |
|
|
|
|
|
rowsPerPage: 10, |
|
|
|
|
|
}; |
|
|
|
|
|
let defaultSortBy = undefined; |
|
|
|
|
|
if (templateGrid.defaultSortBy) { |
|
|
|
|
|
try { |
|
|
|
|
|
defaultSortBy = eval('(' + templateGrid.defaultSortBy + ')'); |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
console.error('sortBy eval error!'); |
|
|
|
|
|
} |
|
|
|
|
|
// tablePagination.sortBy = templateGrid.defaultSortBy; |
|
|
|
|
|
// tablePagination.descending = templateGrid.descending; |
|
|
|
|
|
} |
|
|
|
|
|
if (templateGrid.reqPageStart) { |
|
|
|
|
|
tablePagination.reqPageStart = templateGrid.reqPageStart; |
|
|
|
|
|
} |
|
|
|
|
|
if (templateGrid.rowsPerPage) { |
|
|
|
|
|
tablePagination.rowsPerPage = templateGrid.rowsPerPage; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 处理按钮 |
|
|
|
|
|
const tableButtons = <any>[]; |
|
|
|
|
|
let configButton = false; |
|
|
|
|
|
if (templateGrid.buttons && templateGrid.buttons.length > 0) { |
|
|
|
|
|
templateGrid.buttons.forEach((item) => { |
|
|
|
|
|
if (item !== 'config') { |
|
|
|
|
|
tableButtons.push(item); |
|
|
|
|
|
} else { |
|
|
|
|
|
configButton = true; |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 处理紧凑模式 |
|
|
|
|
|
const dense = { |
|
|
|
|
|
dense: false, |
|
|
|
|
|
denseToolbar: false, |
|
|
|
|
|
denseHeader: false, |
|
|
|
|
|
denseBody: false, |
|
|
|
|
|
denseBottom: false, |
|
|
|
|
|
}; |
|
|
|
|
|
if (templateGrid.dense && templateGrid.dense.length > 0) { |
|
|
|
|
|
if ( |
|
|
|
|
|
templateGrid.dense.findIndex((item) => { |
|
|
|
|
|
return item === 'dense'; |
|
|
|
|
|
}) > -1 |
|
|
|
|
|
) { |
|
|
|
|
|
dense.dense = true; |
|
|
|
|
|
} |
|
|
|
|
|
if ( |
|
|
|
|
|
templateGrid.dense.findIndex((item) => { |
|
|
|
|
|
return item === 'denseToolbar'; |
|
|
|
|
|
}) > -1 |
|
|
|
|
|
) { |
|
|
|
|
|
dense.denseToolbar = true; |
|
|
|
|
|
} |
|
|
|
|
|
if ( |
|
|
|
|
|
templateGrid.dense.findIndex((item) => { |
|
|
|
|
|
return item === 'denseHeader'; |
|
|
|
|
|
}) > -1 |
|
|
|
|
|
) { |
|
|
|
|
|
dense.denseHeader = true; |
|
|
|
|
|
} |
|
|
|
|
|
if ( |
|
|
|
|
|
templateGrid.dense.findIndex((item) => { |
|
|
|
|
|
return item === 'denseBody'; |
|
|
|
|
|
}) > -1 |
|
|
|
|
|
) { |
|
|
|
|
|
dense.denseBody = true; |
|
|
|
|
|
} |
|
|
|
|
|
if ( |
|
|
|
|
|
templateGrid.dense.findIndex((item) => { |
|
|
|
|
|
return item === 'denseBottom'; |
|
|
|
|
|
}) > -1 |
|
|
|
|
|
) { |
|
|
|
|
|
dense.denseBottom = true; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 处理字段 |
|
|
|
|
|
const addFormFields = <any>[]; |
|
|
|
|
|
const queryFormFields = <any>[]; |
|
|
|
|
|
const tableColumns = <any>[]; |
|
|
|
|
|
let addFormField = {}; |
|
|
|
|
|
let queryFormField = {}; |
|
|
|
|
|
let tableColumn = {}; |
|
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < templateGridFields.length; i++) { |
|
|
|
|
|
let item = templateGridFields[i]; |
|
|
|
|
|
addFormField = {}; |
|
|
|
|
|
queryFormField = {}; |
|
|
|
|
|
tableColumn = {}; |
|
|
|
|
|
const options = await getSelectOptions(item); |
|
|
|
|
|
if (item.editorShow) { |
|
|
|
|
|
addFormField = { ...addFormField, ...{ label: item.fieldLabel, name: item.fieldName } }; |
|
|
|
|
|
if (item.editorFormType) { |
|
|
|
|
|
if (item.editorFormType === FormTypeEnum.下拉框) { |
|
|
|
|
|
addFormField = { ...addFormField, ...{ type: 'w-select' } }; |
|
|
|
|
|
addFormField = { ...addFormField, ...{ options: options } }; |
|
|
|
|
|
} else if (item.editorFormType === FormTypeEnum.多选下拉框) { |
|
|
|
|
|
addFormField = { ...addFormField, ...{ type: 'w-select' } }; |
|
|
|
|
|
addFormField = { ...addFormField, ...{ options: options } }; |
|
|
|
|
|
} else if (item.editorFormType === FormTypeEnum.数字框) { |
|
|
|
|
|
if (item.fieldPrecision) { |
|
|
|
|
|
addFormField = { ...addFormField, ...{ type: 'w-number', precision: item.fieldPrecision } }; |
|
|
|
|
|
} else { |
|
|
|
|
|
addFormField = { ...addFormField, ...{ type: 'w-number' } }; |
|
|
|
|
|
} |
|
|
|
|
|
} else if (item.editorFormType === FormTypeEnum.日期) { |
|
|
|
|
|
addFormField = { ...addFormField, ...{ type: 'w-date' } }; |
|
|
|
|
|
} else if (item.editorFormType === FormTypeEnum.日期范围) { |
|
|
|
|
|
addFormField = { ...addFormField, ...{ type: 'dateRange' } }; |
|
|
|
|
|
} else { |
|
|
|
|
|
addFormField = { ...addFormField, ...{ type: 'w-text' } }; |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
addFormField = { ...addFormField, ...{ type: 'w-text' } }; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (item.editorDefaultValue) { |
|
|
|
|
|
addFormField = { ...addFormField, ...{ defaultValue: item.editorDefaultValue } }; |
|
|
|
|
|
} |
|
|
|
|
|
if (item.editorIsRequired) { |
|
|
|
|
|
addFormField = { ...addFormField, ...{ requiredIf: item.editorIsRequired } }; |
|
|
|
|
|
} |
|
|
|
|
|
addFormFields.push(addFormField); |
|
|
|
|
|
} |
|
|
|
|
|
if (item.queryShow) { |
|
|
|
|
|
queryFormField = { ...queryFormField, ...{ label: item.fieldLabel, name: item.fieldName } }; |
|
|
|
|
|
if (item.queryFormType) { |
|
|
|
|
|
if (item.queryFormType === FormTypeEnum.下拉框) { |
|
|
|
|
|
queryFormField = { ...queryFormField, ...{ type: 'w-select' } }; |
|
|
|
|
|
queryFormField = { ...queryFormField, ...{ options: options } }; |
|
|
|
|
|
} else if (item.queryFormType === FormTypeEnum.多选下拉框) { |
|
|
|
|
|
queryFormField = { ...queryFormField, ...{ type: 'w-select' } }; |
|
|
|
|
|
queryFormField = { ...queryFormField, ...{ options: options } }; |
|
|
|
|
|
} else if (item.queryFormType === FormTypeEnum.数字框) { |
|
|
|
|
|
if (item.fieldPrecision) { |
|
|
|
|
|
queryFormField = { ...queryFormField, ...{ type: 'w-number', precision: item.fieldPrecision } }; |
|
|
|
|
|
} else { |
|
|
|
|
|
queryFormField = { ...queryFormField, ...{ type: 'w-number' } }; |
|
|
|
|
|
} |
|
|
|
|
|
} else if (item.queryFormType === FormTypeEnum.日期) { |
|
|
|
|
|
queryFormField = { ...queryFormField, ...{ type: 'w-date' } }; |
|
|
|
|
|
} else if (item.queryFormType === FormTypeEnum.日期范围) { |
|
|
|
|
|
queryFormField = { ...queryFormField, ...{ type: 'dateRange' } }; |
|
|
|
|
|
} else { |
|
|
|
|
|
queryFormField = { ...queryFormField, ...{ type: 'w-text' } }; |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
queryFormField = { ...queryFormField, ...{ type: 'w-text' } }; |
|
|
|
|
|
} |
|
|
|
|
|
if (item.queryDefaultValue) { |
|
|
|
|
|
queryFormField = { ...queryFormField, ...{ defaultValue: item.queryDefaultValue } }; |
|
|
|
|
|
} |
|
|
|
|
|
if (item.queryIsRequired) { |
|
|
|
|
|
queryFormField = { ...queryFormField, ...{ requiredIf: item.queryIsRequired } }; |
|
|
|
|
|
} |
|
|
|
|
|
if (item.queryOperator) { |
|
|
|
|
|
queryFormField = { ...queryFormField, ...{ queryOperator: item.queryOperator } }; |
|
|
|
|
|
} |
|
|
|
|
|
queryFormFields.push(queryFormField); |
|
|
|
|
|
} |
|
|
|
|
|
if (item.tableShow) { |
|
|
|
|
|
tableColumn = { ...tableColumn, ...{ label: item.fieldLabel, name: item.fieldName } }; |
|
|
|
|
|
if (item.tableSort) { |
|
|
|
|
|
tableColumn = { ...tableColumn, ...{ sortable: item.tableSort } }; |
|
|
|
|
|
} |
|
|
|
|
|
if (item.tableColumnAlign) { |
|
|
|
|
|
tableColumn = { ...tableColumn, ...{ align: item.tableColumnAlign } }; |
|
|
|
|
|
} |
|
|
|
|
|
if (item.tableColumnWidth) { |
|
|
|
|
|
tableColumn = { ...tableColumn, ...{ width: item.tableColumnWidth } }; |
|
|
|
|
|
} |
|
|
|
|
|
if (item.fieldIsSelect) { |
|
|
|
|
|
tableColumn = { |
|
|
|
|
|
...tableColumn, |
|
|
|
|
|
...{ |
|
|
|
|
|
format: (val, row) => { |
|
|
|
|
|
if (Array.isArray(options) && options.length > 0) { |
|
|
|
|
|
let formatResult = val; |
|
|
|
|
|
options.forEach((option: any) => { |
|
|
|
|
|
if (option.value === val) { |
|
|
|
|
|
formatResult = option.label; |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
return formatResult; |
|
|
|
|
|
} else { |
|
|
|
|
|
return val; |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}; |
|
|
|
|
|
} |
|
|
|
|
|
tableColumns.push(tableColumn); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 根据配置组装数据对象 |
|
|
|
|
|
state.pageType = templateConfig.templateType; |
|
|
state.pageType = templateConfig.templateType; |
|
|
state.pageConfig = { |
|
|
// 根据配置组装数据对象 |
|
|
// templateGridId: templateGrid.id, |
|
|
const page = new Page(templateConfig, templateGrid, templateGridFields); |
|
|
title: templateGrid.title, |
|
|
state.pageConfig = page.buildGridConfig(); |
|
|
toolbarActions: tableButtons, |
|
|
|
|
|
configButton: configButton, |
|
|
|
|
|
selection: templateGrid.selection, |
|
|
|
|
|
primaryKey: templateGrid.primaryKey, |
|
|
|
|
|
foreignKey: templateGrid.foreignKey, |
|
|
|
|
|
dataUrl: Environment.apiContextPath(templateGrid.dataUrl), |
|
|
|
|
|
fetchDataUrl: Environment.apiContextPath(templateGrid.fetchDataUrl + '?templateGridId=' + templateGrid.id), |
|
|
|
|
|
addDataUrl: Environment.apiContextPath(templateGrid.addDataUrl) + '/' + templateGrid.id, |
|
|
|
|
|
editDataUrl: Environment.apiContextPath(templateGrid.editDataUrl) + '/' + templateGrid.id + '/' + templateGrid.primaryKey, |
|
|
|
|
|
removeDataUrl: Environment.apiContextPath(templateGrid.removeDataUrl) + '/' + templateGrid.id + '/' + templateGrid.primaryKey, |
|
|
|
|
|
sortNo: templateGrid.sortNo, |
|
|
|
|
|
checkboxSelection: templateGrid.checkboxSelection, |
|
|
|
|
|
draggable: templateGrid.draggable, |
|
|
|
|
|
autoFetchData: templateGrid.autoFetchData, |
|
|
|
|
|
dense: dense.dense, |
|
|
|
|
|
denseToolbar: dense.denseToolbar, |
|
|
|
|
|
denseHeader: dense.denseHeader, |
|
|
|
|
|
denseBody: dense.denseBody, |
|
|
|
|
|
denseBottom: dense.denseBottom, |
|
|
|
|
|
stickyNum: templateGrid.stickyNum, |
|
|
|
|
|
tree: templateGrid.tree, |
|
|
|
|
|
treeRelationship: templateGrid.treeRelationship, |
|
|
|
|
|
// treeIcon: |
|
|
|
|
|
treeDefaultExpandAll: templateGrid.treeDefaultExpandAll, |
|
|
|
|
|
treeTickStrategy: templateGrid.treeTickStrategy, |
|
|
|
|
|
tickedField: templateGrid.tickedField, |
|
|
|
|
|
selectedField: templateGrid.selectedField, |
|
|
|
|
|
pageable: templateGrid.pageable, |
|
|
|
|
|
pagination: tablePagination, |
|
|
|
|
|
queryFormColsNum: templateGrid.queryFormColsNum, |
|
|
|
|
|
queryFormRowNum: templateGrid.queryFormRowNum, |
|
|
|
|
|
editor: { |
|
|
|
|
|
dialog: { |
|
|
|
|
|
width: '60%', |
|
|
|
|
|
}, |
|
|
|
|
|
form: { |
|
|
|
|
|
colsNum: templateGrid.editorFormColsNum, |
|
|
|
|
|
fields: addFormFields, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
queryFormFields: queryFormFields, |
|
|
|
|
|
columns: tableColumns, |
|
|
|
|
|
sortBy: defaultSortBy, |
|
|
|
|
|
}; |
|
|
|
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
