fix: 初始化
This commit is contained in:
jiaojinfeng
326
packages/icpx-workflow/public/form/index.html
Normal file
326
packages/icpx-workflow/public/form/index.html
Normal file
@ -0,0 +1,326 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>formbuilder</title>
|
||||
<link rel="stylesheet" href="./lib/dragula/dragula.css" />
|
||||
|
||||
<link rel="stylesheet" href="./lib/colpick/colpick.css" />
|
||||
<link rel="stylesheet" href="./lib/datetime/jquery.datetimepicker.min.css" />
|
||||
<link rel="stylesheet" href="./build/formbuilder.min.css" />
|
||||
<link rel="stylesheet" href="../../src/theme/app.less" />
|
||||
<link rel="stylesheet" href="../../src/app.less" />
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="formbuilder"></div>
|
||||
</body>
|
||||
<script type="text/javascript" src="./lib/lodash-4.17.5.js"></script>
|
||||
<script type="text/javascript" src="./lib/jquery-1.8.2.js"></script>
|
||||
<script type="text/javascript" src="./lib/jquery-ui.js"></script>
|
||||
<script type="text/javascript" src="./lib/dragula/dragula.js"></script>
|
||||
<script type="text/javascript" src="./lib/jquery.fileupload.js"></script>
|
||||
<script type="text/javascript" src="./lib/viewer.js"></script>
|
||||
<script type="text/javascript" src="./lib/colpick/colpick.js"></script>
|
||||
|
||||
<script type="text/javascript" src="./lib/dayjs/dayjs.min.js"></script>
|
||||
<script type="text/javascript" src="./lib/dayjs/plugin/utc.js"></script>
|
||||
<script type="text/javascript" src="./lib/dayjs/plugin/timezone.js"></script>
|
||||
<script>
|
||||
dayjs.extend(window.dayjs_plugin_utc);
|
||||
dayjs.extend(window.dayjs_plugin_timezone);
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="./lib/datetime/jquery.datetimepicker.js"></script>
|
||||
|
||||
<script type="text/javascript" src="./build/formbuilder.min.js"></script>
|
||||
<script type="text/javascript" src="./build/platform.min.js"></script>
|
||||
<!-- 测试数据记得删除 -->
|
||||
<script type="text/javascript" src="./data/datasets.js"></script>
|
||||
<script type="text/javascript" src="./data/data.js"></script>
|
||||
<script type="text/javascript" src="./data/events.js"></script>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
'use strict';
|
||||
});
|
||||
|
||||
const urls = {
|
||||
batchGetFileUrl: '/api/file/applicationFile/batchGetFile',
|
||||
uploadUrl: `/api/file/applicationFile/template/uploadUrl`,
|
||||
uploadFinishedUrl: `/api/file/applicationFile/template/uploadFinished`,
|
||||
batchRollbackUrl: `/api/file/applicationFile/batchRollback`,
|
||||
downloadUrl: `/api/file/applicationFile/download?`,
|
||||
};
|
||||
|
||||
// 是否是文件上传类型
|
||||
const fileUploadTypes = ['FileUploadValue', 'ImageUploadValue', 'fileupload'];
|
||||
const isFileUpload = type => {
|
||||
return fileUploadTypes.includes(type);
|
||||
};
|
||||
// 枚举下拉类型
|
||||
const enumTypes = [
|
||||
'EnumValue',
|
||||
'MultiEnumValue',
|
||||
'LanuageSelValue',
|
||||
'VersionValue',
|
||||
'StateValue',
|
||||
'SingleUserAutoComboxValue',
|
||||
'SingleRoleAutoComboxValue',
|
||||
'SingleGroupAutoComboxValue',
|
||||
'EnumValue',
|
||||
'MultiEnumValue',
|
||||
'MultiLovListValue',
|
||||
'ObjectEnumValue',
|
||||
'MultiObjectEnumValue',
|
||||
'BoolValue',
|
||||
'LovListRadio',
|
||||
'LovValue',
|
||||
'LovListRadio',
|
||||
'EnumRadioValue',
|
||||
'ExhaustionLovListValue',
|
||||
'ExhaustionObjectEnumValue',
|
||||
'ObjectTypeListValue',
|
||||
'CheckBoxListValue',
|
||||
'Sql',
|
||||
];
|
||||
//动态数据源类型
|
||||
const DynamicSelectTypes = ['HBDynamicSelect'];
|
||||
// 获取token
|
||||
let access_token = localStorage.getItem('access_token') || '';
|
||||
let companyId = localStorage.getItem('companyId') || '';
|
||||
let connect = localStorage.getItem('connect') || '';
|
||||
access_token = access_token.replace(/"/g, '');
|
||||
const token = `Bearer ${access_token}`;
|
||||
$.formbuilder.icpx.setComponentConfig(fileUploadTypes, {
|
||||
source: {
|
||||
token,
|
||||
uploadUrl: urls.uploadUrl,
|
||||
uploadFinishedUrl: urls.uploadFinishedUrl,
|
||||
batchRollbackUrl: urls.batchRollbackUrl,
|
||||
downloadUrl: urls.downloadUrl,
|
||||
appCode: 'DEFAULT-APP',
|
||||
filePath: 'platform',
|
||||
volumeCode: 'DEFAULT-VOLUME',
|
||||
},
|
||||
});
|
||||
$.formbuilder.icpx.setComponentConfig(enumTypes, {
|
||||
source: {
|
||||
url: '/api/system/modelForm/getModelEnumList',
|
||||
method: 'post',
|
||||
token: token,
|
||||
},
|
||||
sourceParams: function () {
|
||||
return {
|
||||
objectType: this.options.tag?.ObjTypeName || '',
|
||||
fieldName: this.options.tag?.InfoType || '',
|
||||
};
|
||||
},
|
||||
});
|
||||
$.formbuilder.icpx.setComponentConfig(DynamicSelectTypes, {
|
||||
source: {
|
||||
url: '/api/system/modelForm/getDynamicList',
|
||||
method: 'post',
|
||||
token: token,
|
||||
},
|
||||
sourceParams: function () {
|
||||
return {
|
||||
objectType: this.options.tag?.ObjTypeName || '',
|
||||
fieldName: this.options.tag?.InfoType || '',
|
||||
companyId: companyId,
|
||||
connect: connect,
|
||||
};
|
||||
},
|
||||
});
|
||||
let formOptions = null;
|
||||
|
||||
// 处理文件类型单元格的数据
|
||||
const loadFileCellValue = cell => {
|
||||
// 如果是个数组，直接返回
|
||||
if (cell.value instanceof Array) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
// 如果是其他类型，设置为空数组
|
||||
if (typeof cell.value !== 'string') {
|
||||
cell.value = [];
|
||||
return Promise.resolve();
|
||||
}
|
||||
// 空字符串直接返回空数组
|
||||
if (cell.value === '') {
|
||||
cell.value = [];
|
||||
return Promise.resolve();
|
||||
}
|
||||
const promise = fetch(urls.batchGetFileUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=UTF-8',
|
||||
Authorization: token,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
eidstr: cell.value.split(';'),
|
||||
}),
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data1 => {
|
||||
data1.data.map(file => (file.fileId = file.eid));
|
||||
cell.value = data1.data;
|
||||
});
|
||||
return promise;
|
||||
};
|
||||
|
||||
// 获取文件对应的信息
|
||||
const loadFileData = data => {
|
||||
const promises = [];
|
||||
if (!data.controls && !data.datasets?.data) {
|
||||
return Promise.resolve([]);
|
||||
}
|
||||
if (data.controls) {
|
||||
data.controls
|
||||
.filter(control => !!control.tag)
|
||||
.filter(
|
||||
(control, index) => isFileUpload(control.type) || isFileUpload(control.tag.DisposeType),
|
||||
)
|
||||
.map(control => promises.push(loadFileCellValue(control)));
|
||||
}
|
||||
if (data.datasets?.data && data.datasets?.template) {
|
||||
Object.keys(data.datasets.template).map(key => {
|
||||
const templateCells = data.datasets.template[key];
|
||||
const rows = data.datasets.data?.find(item => item.id === key)?.rows;
|
||||
templateCells
|
||||
.filter(templateCell => {
|
||||
return !!templateCell.tag;
|
||||
})
|
||||
.map((templateCell, templateCellInx) => {
|
||||
if (isFileUpload(templateCell.type) || isFileUpload(templateCell.tag?.DisposeType)) {
|
||||
rows?.map(row => {
|
||||
row?.map(cells => {
|
||||
const cell = cells[templateCellInx];
|
||||
promises.push(loadFileCellValue(cell));
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
return Promise.all(promises);
|
||||
};
|
||||
|
||||
// 初始化方法, 创建（设计、填报、浏览）
|
||||
const init = options => {
|
||||
formOptions = options;
|
||||
const buildOption = $.formbuilder.icpx.buildOption;
|
||||
loadFileData(options.data).then(() => {
|
||||
$('#formbuilder').formbuilder(buildOption(options));
|
||||
});
|
||||
};
|
||||
|
||||
// 加载数据
|
||||
const loadData = data => {
|
||||
loadFileData(data).then(() => {
|
||||
$('#formbuilder').formbuilder('data', data);
|
||||
});
|
||||
};
|
||||
// 获取设计数据
|
||||
const getData = () => {
|
||||
const _data = $('#formbuilder').formbuilder('data');
|
||||
// 新增表单后，未设计，controls为空
|
||||
if (_data) {
|
||||
// 主表附件上传数据处理
|
||||
if (_data.controls) {
|
||||
_data.controls.map(control => {
|
||||
if (isFileUpload(control.type) || isFileUpload(control?.tag?.DisposeType)) {
|
||||
control.value = control.value.map(item => item.fileId).join(';');
|
||||
}
|
||||
});
|
||||
}
|
||||
// 从表附件上传数据处理
|
||||
if (_data.datasets?.data) {
|
||||
_data.datasets?.data.map(dataVal => {
|
||||
dataVal?.rows.map(rowItem => {
|
||||
rowItem.map(val1 => {
|
||||
val1.map(val2 => {
|
||||
if (isFileUpload(val2.type) || isFileUpload(val2?.tag?.DisposeType)) {
|
||||
val2.value = val2.value.map(item => item.fileId).join(';');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
return _data;
|
||||
};
|
||||
|
||||
// 校验
|
||||
const check = () => {
|
||||
return $('#formbuilder').formbuilder('check');
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取设计模式工具方法
|
||||
*/
|
||||
const getDesignUtils = () => {
|
||||
return $.formbuilder.icpx.design;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取填报模式工具方法
|
||||
*/
|
||||
const getApplyUtils = () => {
|
||||
return $.formbuilder.icpx.applying;
|
||||
};
|
||||
/**
|
||||
* 导出数据方法
|
||||
*/
|
||||
const getExport = () => {
|
||||
return $('#formbuilder').formbuilder('export');
|
||||
};
|
||||
// 获取填报数据
|
||||
// 更新
|
||||
// 导出
|
||||
// 重置大小
|
||||
// 销毁
|
||||
|
||||
window.methods = {
|
||||
init,
|
||||
loadData,
|
||||
getData,
|
||||
loadFileData,
|
||||
check,
|
||||
getDesignUtils,
|
||||
getApplyUtils,
|
||||
getExport,
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
if (
|
||||
formOptions &&
|
||||
formOptions.events &&
|
||||
typeof formOptions.events.handelPopup == 'function'
|
||||
) {
|
||||
formOptions.events
|
||||
.handelPopup('select', {
|
||||
valueType: 'string',
|
||||
componentType: 'user',
|
||||
dataQueryType: 'company',
|
||||
width: '368px',
|
||||
})
|
||||
.then(value => {
|
||||
console.log(value);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
</script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user