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>
|