327 lines
9.9 KiB
HTML
327 lines
9.9 KiB
HTML
<!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>
|