mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-19 18:23:32 -04:00
Merge pull request #59 from liuxuewei/master
feat(ncform-show/create-form-by-form): 添加表单生成表单的demo
This commit is contained in:
daniel-dx
@@ -9,7 +9,8 @@ module.exports = {
|
||||
|
||||
entry: {
|
||||
playground: path.join(config.src, "components", "playground", "index.vue"),
|
||||
schemaGen: path.join(config.src, "components", "schema-gen", "index.vue")
|
||||
schemaGen: path.join(config.src, "components", "schema-gen", "index.vue"),
|
||||
createFormByForm: path.join(config.src, "components", "create-form-by-form", "index.vue")
|
||||
// Don't touch me - components
|
||||
|
||||
// Don't touch me - directives
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ncform Playground</title>
|
||||
<link rel="stylesheet" href="//at.alicdn.com/t/font_1140662_7xsrl0zru89.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function() {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?addd37f621cdecdfdff2216d28fc21c2";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<style>
|
||||
* {margin: 0; padding: 0;}
|
||||
.invalid-feedback {
|
||||
margin-top: .25rem;
|
||||
font-size: .875rem;
|
||||
color: #dc3545;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<!--演示区域-->
|
||||
<div id="demo">
|
||||
<create-form-by-form></create-form-by-form>
|
||||
</div>
|
||||
<script type="text/javascript" src="../../../node_modules/ace-builds/src-min-noconflict/ace.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/axios/dist/axios.min.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/@ncform/ncform-common/dist/ncformCommon.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/@ncform/ncform/dist/vueNcform.min.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/@ncform/ncform-theme-elementui/dist/ncformStdComps.min.js"></script>
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script src="https://unpkg.com/mockjs"></script>
|
||||
<script src="https://unpkg.com/js-url"></script>
|
||||
<script type="text/javascript" src="../../../dist/createFormByForm.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
Mock.mock(/getProvinces/, function (options) {
|
||||
return [{ "id": 1, "name": "Guangdong" }, { "id": 2, "name": "Beijing" }]
|
||||
})
|
||||
Mock.mock(/getCities/, function (options) {
|
||||
let params = url('?', options.url) || {};
|
||||
let result = {
|
||||
1: [{ id: 10, name: 'Guangzhou' }, { id: 20, name: 'Shantou' }],
|
||||
2: [{ id: 30, name: 'Beijing' }]
|
||||
}
|
||||
let res = result[params.provinceId] || [];
|
||||
return res.filter(item => !params.keyword || item.name.indexOf(params.keyword) >= 0);
|
||||
})
|
||||
|
||||
let lang = location.search.indexOf('lang=cn') >= 0 ? 'zh-cn' : 'en';
|
||||
Vue.use(vueNcform, { extComponents: ncformStdComps, lang });
|
||||
// Bootstrap the app
|
||||
new Vue({
|
||||
el: '#demo',
|
||||
components: {
|
||||
createFormByForm: createFormByForm.default
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -33,8 +33,8 @@
|
||||
<script type="text/javascript" src="../../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/axios/dist/axios.min.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/@ncform/ncform-common/dist/ncformCommon.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/@ncform/ncform/dist/vueNcform.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/@ncform/ncform-theme-elementui/dist/ncformStdComps.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/@ncform/ncform/dist/vueNcform.min.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/@ncform/ncform-theme-elementui/dist/ncformStdComps.min.js"></script>
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script src="https://unpkg.com/mockjs"></script>
|
||||
<script src="https://unpkg.com/js-url"></script>
|
||||
|
||||
@@ -38,8 +38,8 @@
|
||||
<script type="text/javascript" src="../../../node_modules/ace-builds/src-min-noconflict/ace.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/@ncform/ncform-common/dist/ncformCommon.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/@ncform/ncform/dist/vueNcform.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/@ncform/ncform-theme-elementui/dist/ncformStdComps.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/@ncform/ncform/dist/vueNcform.min.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/@ncform/ncform-theme-elementui/dist/ncformStdComps.min.js"></script>
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script type="text/javascript" src="../../../dist/schemaGen.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
@@ -15,6 +15,9 @@
|
||||
<li>
|
||||
<a href="examples/components/schema-gen/index.html">SchemaGen Example</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="examples/components/create-form-by-form/index.html">createFormByForm Example</a>
|
||||
</li>
|
||||
<!-- Don't touch me - compopnents -->
|
||||
</ul>
|
||||
<h2>Directives</h2>
|
||||
|
||||
@@ -14,11 +14,11 @@
|
||||
"axios": "^0.17.1",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-eslint": "^6.0.4",
|
||||
"babel-plugin-transform-runtime": "^6.3.13",
|
||||
"babel-runtime": "^6.25.0",
|
||||
"babel-plugin-transform-runtime": "^6.22.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-power-assert": "^1.0.0",
|
||||
"babel-preset-stage-3": "^6.24.1",
|
||||
"babel-runtime": "^6.3.19",
|
||||
"browser-sync": "^2.26.3",
|
||||
"concat": "^1.0.0",
|
||||
"css-loader": "^0.23.1",
|
||||
@@ -60,6 +60,7 @@
|
||||
"@ncform/ncform-theme-elementui": "^1.1.2",
|
||||
"ace-builds": "^1.2.9",
|
||||
"lodash-es": "^4.16.2",
|
||||
"vue": "^2.1.8"
|
||||
"vue": "^2.1.8",
|
||||
"vuex": "2.x"
|
||||
}
|
||||
}
|
||||
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"key": "",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": {
|
||||
"type": "string",
|
||||
"value": "DatePicker",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"hidden": true,
|
||||
"disabled": true
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段名称(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段(name)",
|
||||
"columns": 6
|
||||
}
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "时间选择器",
|
||||
"itemClass": "",
|
||||
"showLegend": false
|
||||
}
|
||||
}
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"key": "",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": {
|
||||
"type": "string",
|
||||
"value": "Input",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"hidden": true,
|
||||
"disabled": true
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段名称(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段(name)",
|
||||
"columns": 6
|
||||
}
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "输入框",
|
||||
"itemClass": "",
|
||||
"showLegend": false
|
||||
}
|
||||
}
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
{
|
||||
"key": "",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": {
|
||||
"type": "string",
|
||||
"value": "MultiSelect",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"hidden": true,
|
||||
"disabled": true
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段名称(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段(name)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"itemList":{
|
||||
"type": "array",
|
||||
"ui": {
|
||||
"label": "下拉框列表项",
|
||||
"columns": 12,
|
||||
"widget": "array-table",
|
||||
"showLegend": false
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
},
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性名(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"value": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性值(value)",
|
||||
"columns": 6
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "多选下拉框",
|
||||
"itemClass": "",
|
||||
"showLegend": false
|
||||
}
|
||||
}
|
||||
+121
@@ -0,0 +1,121 @@
|
||||
{
|
||||
"key": "",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": {
|
||||
"type": "string",
|
||||
"value": "Object",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"hidden": true,
|
||||
"disabled": true
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段名称(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段(name)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"itemList": {
|
||||
"type": "array",
|
||||
"ui": {
|
||||
"label": "对象属性列表",
|
||||
"columns": 12,
|
||||
"widget": "array-table",
|
||||
"showLegend": false
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
},
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性名(label)",
|
||||
"columns": 3
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性(name)",
|
||||
"columns": 3
|
||||
}
|
||||
},
|
||||
"type": {
|
||||
"type": "array",
|
||||
"value": "Input",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性类型",
|
||||
"columns": 3,
|
||||
"widget": "select",
|
||||
"widgetConfig": {
|
||||
"clearable": true,
|
||||
"filterable": true,
|
||||
"enumSource": [{
|
||||
"value": "Input",
|
||||
"label": "String"
|
||||
},
|
||||
{
|
||||
"value": "DatePicker",
|
||||
"label": "Date"
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "对象",
|
||||
"itemClass": "",
|
||||
"showLegend": false
|
||||
}
|
||||
}
|
||||
+121
@@ -0,0 +1,121 @@
|
||||
{
|
||||
"key": "",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": {
|
||||
"type": "string",
|
||||
"value": "Repeator",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"hidden": true,
|
||||
"disabled": true
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段名称(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段(name)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"itemList": {
|
||||
"type": "array",
|
||||
"ui": {
|
||||
"label": "属性列表",
|
||||
"columns": 12,
|
||||
"widget": "array-table",
|
||||
"showLegend": false
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
},
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性名(label)",
|
||||
"columns": 3
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性(name)",
|
||||
"columns": 3
|
||||
}
|
||||
},
|
||||
"type": {
|
||||
"type": "array",
|
||||
"value": "Input",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性类型",
|
||||
"columns": 3,
|
||||
"widget": "select",
|
||||
"widgetConfig": {
|
||||
"clearable": true,
|
||||
"filterable": true,
|
||||
"enumSource": [{
|
||||
"value": "Input",
|
||||
"label": "String"
|
||||
},
|
||||
{
|
||||
"value": "DatePicker",
|
||||
"label": "Date"
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "列表",
|
||||
"itemClass": "",
|
||||
"showLegend": false
|
||||
}
|
||||
}
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
{
|
||||
"key": "",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": {
|
||||
"type": "string",
|
||||
"value": "Select",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"hidden": true,
|
||||
"disabled": true
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段名称(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段(name)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"itemList":{
|
||||
"type": "array",
|
||||
"ui": {
|
||||
"label": "下拉框列表项",
|
||||
"columns": 12,
|
||||
"widget": "array-table",
|
||||
"showLegend": false
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
},
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性名(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"value": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性值(value)",
|
||||
"columns": 6
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "下拉框",
|
||||
"itemClass": "",
|
||||
"showLegend": false
|
||||
}
|
||||
}
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"key": "",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": {
|
||||
"type": "string",
|
||||
"value": "TextArea",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"hidden": true,
|
||||
"disabled": true
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段名称(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段(name)",
|
||||
"columns": 6
|
||||
}
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "文本框",
|
||||
"itemClass": "",
|
||||
"showLegend": false
|
||||
}
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"type": "string",
|
||||
"ui": {
|
||||
"label": "",
|
||||
"columns": 6,
|
||||
"widget": "date-picker",
|
||||
"widgetConfig": {
|
||||
"type": "datetime",
|
||||
"format": "yyyy-MM-dd HH:mm:ss"
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"type": "string",
|
||||
"ui": {
|
||||
"label": "",
|
||||
"columns": 6,
|
||||
"widgetConfig": {
|
||||
"trim": false
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
}
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"type": "array",
|
||||
"rules": {
|
||||
"required": true
|
||||
},
|
||||
"ui": {
|
||||
"label": "",
|
||||
"columns": 6,
|
||||
"widget": "select",
|
||||
"widgetConfig": {
|
||||
"clearable": true,
|
||||
"filterable": true,
|
||||
"multiple": true,
|
||||
"enumSource": []
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
|
||||
},
|
||||
"ui": {
|
||||
"label": "",
|
||||
"showLegend": false
|
||||
}
|
||||
}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"type": "array",
|
||||
"ui": {
|
||||
"label": "",
|
||||
"columns": 12,
|
||||
"widget": "array-table",
|
||||
"showLegend": false
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
},
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"type": "array",
|
||||
"rules": {
|
||||
"required": true
|
||||
},
|
||||
"ui": {
|
||||
"label": "",
|
||||
"columns": 6,
|
||||
"widget": "select",
|
||||
"widgetConfig": {
|
||||
"clearable": true,
|
||||
"filterable": true,
|
||||
"enumSource": []
|
||||
}
|
||||
}
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"type": "string",
|
||||
"ui": {
|
||||
"label": "",
|
||||
"columns": 12,
|
||||
"widget": "textarea",
|
||||
"widgetConfig": {
|
||||
"rows": 4
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"required": true,
|
||||
"maxLength": 500
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
|
||||
<div class="create-form-by-form">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<h3 class="title">定义运营表单</h3>
|
||||
<ncform class="ncform" :form-schema="buildJsonSchemaForm" form-name="build-business-form" v-model="buildJsonSchemaForm.value"/>
|
||||
<div class="bottom-action">
|
||||
<el-popover placement="bottom" trigger="click" v-model="addComponentPopoverShow">
|
||||
<el-button slot="reference">添加组件</el-button>
|
||||
<div class="component-type-menu popover-menu">
|
||||
<a href="javascript:;" @click="addComponent('Input');addComponentPopoverShow=false;"><i class="luyou-icon iconshurukuang"/> Input</a>
|
||||
<a href="javascript:;" @click="addComponent('Select');addComponentPopoverShow=false;"><i class="luyou-icon iconxialakuangpeizhi"/> Select</a>
|
||||
<a href="javascript:;" @click="addComponent('MultiSelect');addComponentPopoverShow=false;"><i class="luyou-icon iconmulti-selection"/> MultiSelect</a>
|
||||
<a href="javascript:;" @click="addComponent('DatePicker');addComponentPopoverShow=false;"><i class="luyou-icon icondate"/> DatePicker</a>
|
||||
<a href="javascript:;" @click="addComponent('Object');addComponentPopoverShow=false;"><i class="luyou-icon iconjson"/> Object</a>
|
||||
<a href="javascript:;" @click="addComponent('TextArea');addComponentPopoverShow=false;"><i class="luyou-icon icontextarea"/> TextArea</a>
|
||||
<a href="javascript:;" @click="addComponent('Repeator');addComponentPopoverShow=false;"><i class="luyou-icon icontable"/> Repeator</a>
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-popover placement="bottom" trigger="click" v-model="removeComponentPopoverShow">
|
||||
<el-button slot="reference">删除组件</el-button>
|
||||
<div class="component-remove-menu popover-menu">
|
||||
<a v-for="item in buildJsonSchemaForm.properties" :key="item.key" href="javascript:;" @click="removeComponent(item.key);removeComponentPopoverShow=false;">{{item.ui.label}}</a>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
<el-button type="primary" @click="submit">生成表单json scheme</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<h3 class="title">预览运营表单</h3>
|
||||
<ncform class="ncform" :form-schema="previewJsonSchemaForm" form-name="json-data-form" v-model="previewJsonSchemaForm.value"/>
|
||||
<div class="bottom-action">
|
||||
<el-button type="primary" @click="submitJsonData">提交数据</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@@ -0,0 +1,242 @@
|
||||
/**
|
||||
* <create-form-by-form></create-form-by-form>
|
||||
*/
|
||||
import { setTimeout, clearTimeout } from 'timers';
|
||||
let buildJsonSchemaValueTimer = null;
|
||||
const deepCopy = function(obj) {
|
||||
return JSON.parse(JSON.stringify(obj));
|
||||
};
|
||||
const defauleSchemaFormConfig = {
|
||||
"type": "object",
|
||||
"ui": {
|
||||
"showLegend": false,
|
||||
"widgetConfig": {
|
||||
"layout": "h"
|
||||
}
|
||||
}
|
||||
};
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
componentCount: 0,
|
||||
componentKeyIndex: 0,//与count的区别是，index只会增加，不会减少
|
||||
addComponentPopoverShow: false,
|
||||
removeComponentPopoverShow: false,
|
||||
previewJsonSchemaForm: {
|
||||
type: 'object',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: "h"
|
||||
}
|
||||
},
|
||||
properties: {}
|
||||
},
|
||||
buildJsonSchemaForm: {...defauleSchemaFormConfig}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'buildJsonSchemaForm.value'(newValue, oldValue) {
|
||||
// console.log('buildJsonSchemaForm.value changed new',JSON.stringify(newValue));
|
||||
// console.log('buildJsonSchemaForm.value changed old',JSON.stringify(oldValue));
|
||||
|
||||
if(buildJsonSchemaValueTimer){
|
||||
clearTimeout(buildJsonSchemaValueTimer);
|
||||
buildJsonSchemaValueTimer = null;
|
||||
}
|
||||
buildJsonSchemaValueTimer = setTimeout(()=>{
|
||||
console.log('buildJsonSchemaForm.value change');
|
||||
this.initJsonSchemaComponents(newValue);
|
||||
},1500)
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
|
||||
const businessJsonSchema = require('./schema/build-json-schema.json');
|
||||
this.initBuildJsonSchemaComponents(businessJsonSchema);
|
||||
this.initJsonSchemaComponents(businessJsonSchema.value);
|
||||
|
||||
},
|
||||
//构建表单
|
||||
initBuildJsonSchemaComponents(buildJsonSchema){
|
||||
|
||||
console.log('buildJsonSchemaComponents',buildJsonSchema);
|
||||
const configProperties = {...buildJsonSchema.properties};
|
||||
console.log('configProperties',configProperties);
|
||||
const configValues = {...buildJsonSchema.value};
|
||||
const propertiesKeyList = Object.keys(configProperties);
|
||||
this.componentCount = propertiesKeyList.length || 0;
|
||||
this.componentKeyIndex = propertiesKeyList.length || 0;
|
||||
//添加默认值
|
||||
for(const key in configProperties){
|
||||
// console.log(key,'configProperties',configProperties[key]);
|
||||
// console.log(key,'fieldProperties',configProperties[key].properties);
|
||||
// console.log(key,'configValues',configValues[key]);
|
||||
const fieldProperties = configProperties[key].properties || {};
|
||||
for(const field in fieldProperties){
|
||||
// console.log(field, 'properties field',configProperties[key].properties[field]);
|
||||
// console.log('value', configValues[key][field]);
|
||||
|
||||
// 塞入后端返回的初始化value，value只用作初始化，不存放在schema中，
|
||||
// 在提交format config data时请删除value字段！另外field=type的value请勿删除！
|
||||
configProperties[key].properties[field].value = configValues[key][field];
|
||||
}
|
||||
}
|
||||
const initBuildJsonSchema = {
|
||||
...defauleSchemaFormConfig,
|
||||
"properties": configProperties,
|
||||
"value": configValues
|
||||
};
|
||||
console.log('initBuildJsonSchema',JSON.stringify(initBuildJsonSchema));
|
||||
this.buildJsonSchemaForm = initBuildJsonSchema;
|
||||
},
|
||||
//构建运营表单
|
||||
initJsonSchemaComponents(jsonSchema){
|
||||
const currentProperties = {};
|
||||
|
||||
for(const key in jsonSchema){
|
||||
const componentItem = jsonSchema[key];
|
||||
if(componentItem.type && componentItem.label && componentItem.name){
|
||||
const componentItemKey = `json-form-item-${key}`;
|
||||
const componentItemProperties = deepCopy(require(`./components-schema/${componentItem.type}`));
|
||||
|
||||
componentItemProperties.key = componentItemKey;
|
||||
componentItemProperties.ui.itemClass = componentItemKey;
|
||||
componentItemProperties.ui.label = componentItem.label;
|
||||
|
||||
// console.log('componentItem',JSON.stringify(componentItem));
|
||||
if(componentItem.type==='Select' || componentItem.type==='MultiSelect'){
|
||||
componentItemProperties.ui.widgetConfig.enumSource = componentItem.itemList || [];
|
||||
}
|
||||
if(componentItem.type==='Object' || componentItem.type==='Repeator'){
|
||||
const itemList = componentItem.itemList || [];
|
||||
const itemsProperties = {};
|
||||
// console.log('itemList',JSON.stringify(itemList));
|
||||
for(let i=0;i<itemList.length;i++){
|
||||
const item = itemList[i];
|
||||
if(item.type && item.label && item.name){
|
||||
const itemProperties = deepCopy(require(`./components-schema/${item.type}`));
|
||||
itemProperties.ui.label = item.label;
|
||||
// 追加到组件中
|
||||
itemsProperties[item.name] = itemProperties;
|
||||
// console.log('item properties',JSON.stringify(itemProperties));
|
||||
}
|
||||
}
|
||||
// console.log('【items】properties',JSON.stringify(itemsProperties));
|
||||
if(componentItem.type==='Repeator'){
|
||||
componentItemProperties.items.properties = itemsProperties;
|
||||
}
|
||||
if(componentItem.type==='Object'){
|
||||
componentItemProperties.properties = itemsProperties;
|
||||
}
|
||||
|
||||
}
|
||||
//追加到预览表单
|
||||
currentProperties[componentItem.name] = componentItemProperties;
|
||||
}
|
||||
|
||||
}
|
||||
const previewValue = this.previewJsonSchemaForm.value;
|
||||
const initJsonSchema = {
|
||||
...defauleSchemaFormConfig,
|
||||
"properties": {
|
||||
...currentProperties
|
||||
},
|
||||
"value": previewValue
|
||||
};
|
||||
console.log('initJsonSchema',JSON.stringify(initJsonSchema));
|
||||
this.$data.previewJsonSchemaForm = initJsonSchema;
|
||||
},
|
||||
async addComponent(type){
|
||||
//这种方式不生效，需要找作者定位下
|
||||
// this.$data.buildJsonSchemaForm.properties[`build-form-item-${this.componentKeyIndex}`] = require(`./build-components-schema/${type}`);
|
||||
const currentProperties = {...this.buildJsonSchemaForm.properties};
|
||||
const currentValue = {...this.buildJsonSchemaForm.value};
|
||||
|
||||
const addComponentKey = `build-form-item-${this.componentKeyIndex}`;
|
||||
const addComponentConfig = deepCopy(require(`./build-components-schema/${type}`));
|
||||
addComponentConfig.key = addComponentKey;
|
||||
addComponentConfig.ui.label += this.componentKeyIndex;
|
||||
addComponentConfig.ui.itemClass = addComponentKey;
|
||||
|
||||
this.$data.buildJsonSchemaForm = {
|
||||
...defauleSchemaFormConfig,
|
||||
"properties": {
|
||||
...currentProperties,
|
||||
[addComponentKey]: addComponentConfig
|
||||
},
|
||||
"value": currentValue
|
||||
};
|
||||
this.componentCount++;
|
||||
this.componentKeyIndex++;
|
||||
},
|
||||
removeComponent(itemKey){
|
||||
if(this.componentCount===1){
|
||||
this.$message({type: 'error', message: '请至少保留一个配置项'});
|
||||
return;
|
||||
}
|
||||
const currentProperties = {...this.buildJsonSchemaForm.properties};
|
||||
const currentValue = {...this.buildJsonSchemaForm.value};
|
||||
|
||||
delete currentProperties[itemKey];
|
||||
delete currentValue[itemKey];
|
||||
|
||||
this.$data.buildJsonSchemaForm = {
|
||||
...defauleSchemaFormConfig,
|
||||
"properties": currentProperties,
|
||||
"value": currentValue
|
||||
}
|
||||
this.componentCount--;
|
||||
console.log('remove itemKey',itemKey)
|
||||
},
|
||||
formatBuildJsonSchema(buildJsonSchema){
|
||||
const copyBuildJsonSchema = deepCopy(buildJsonSchema);
|
||||
const JsonSchemaProperties = {...copyBuildJsonSchema.properties};
|
||||
//添加默认值
|
||||
for(const key in JsonSchemaProperties){
|
||||
// console.log('key',key,JsonSchemaProperties[key]);
|
||||
const fieldProperties = JsonSchemaProperties[key].properties || {};
|
||||
for(const field in fieldProperties){
|
||||
// console.log('field',field,JsonSchemaProperties[key].properties[field]);
|
||||
if(field!=='type'){ //type的value不能删除
|
||||
//删除掉由后端返回的初始化value，value只用作初始化，不存放在schema中
|
||||
delete JsonSchemaProperties[key].properties[field].value;
|
||||
}
|
||||
}
|
||||
}
|
||||
copyBuildJsonSchema.properties = JsonSchemaProperties;
|
||||
return copyBuildJsonSchema;
|
||||
},
|
||||
submit() {
|
||||
this.$ncformValidate('build-business-form').then(data => {
|
||||
if (!data.result) {
|
||||
return;
|
||||
}
|
||||
console.log('校验通过');
|
||||
const buildJsonSchemaForm = this.$data.buildJsonSchemaForm || {};
|
||||
const submitBuildJsonSchema = this.formatBuildJsonSchema(buildJsonSchemaForm);
|
||||
// console.log('buildJsonSchemaForm properties', JSON.stringify(submitBuildJsonSchemaProperties));
|
||||
// console.log('buildJsonSchemaForm value', JSON.stringify(buildJsonSchemaForm.value));
|
||||
console.log('submitBuildJsonSchema', JSON.stringify(submitBuildJsonSchema));
|
||||
|
||||
});
|
||||
},
|
||||
submitJsonData(){
|
||||
this.$ncformValidate('json-data-form').then(data => {
|
||||
if (!data.result) {
|
||||
return;
|
||||
}
|
||||
console.log('校验通过');
|
||||
const previewJsonSchemaForm = this.$data.previewJsonSchemaForm || {};
|
||||
// console.log('previewJsonSchemaForm properties', JSON.stringify(buildJsonSchemaForm.properties));
|
||||
console.log('previewJsonSchemaForm value', JSON.stringify(previewJsonSchemaForm.value));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
.create-form-by-form {
|
||||
background: #f8f8f8;
|
||||
.title{
|
||||
text-align: center;
|
||||
}
|
||||
.el-dialog__body{
|
||||
padding-top: 0;
|
||||
}
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.component-plus {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
.luyou-icon {
|
||||
margin-left: 40px;
|
||||
border-color: #9e9e9e;
|
||||
opacity: .3;
|
||||
transition: all .2s;
|
||||
padding-left: 5px;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
border-color: #7dbdff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ncform{
|
||||
height: 500px;
|
||||
overflow-y: scroll;
|
||||
margin-bottom: 20px;
|
||||
.__array-table-form-item .table td:last-child, .__array-table-form-item .table th:last-child{
|
||||
min-width: 155px;
|
||||
}
|
||||
}
|
||||
.bottom-action{
|
||||
background: #fff;
|
||||
height: 80px;
|
||||
padding: 20px 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
.el-button{
|
||||
margin-right: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.component-type-menu,.component-remove-menu {
|
||||
margin-left: -12px;
|
||||
margin-right: -12px;
|
||||
a {
|
||||
padding: 4px 12px;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
width: 130px;
|
||||
text-align: left;
|
||||
border-bottom: 1px dashed #ecf5ff;
|
||||
color: #606266;
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
.luyou-icon {
|
||||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
a:hover {
|
||||
background-color: #ecf5ff;
|
||||
color: #66b1ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
<template src="./create-form-by-form.html">
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./create-form-by-form.scss">
|
||||
</style>
|
||||
|
||||
<script src="./create-form-by-form.js">
|
||||
</script>
|
||||
+556
@@ -0,0 +1,556 @@
|
||||
{
|
||||
"type": "object",
|
||||
"ui": {
|
||||
"showLegend": false,
|
||||
"widgetConfig": {
|
||||
"layout": "h"
|
||||
}
|
||||
},
|
||||
"properties": {
|
||||
"build-form-item-0": {
|
||||
"key": "build-form-item-0",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": {
|
||||
"type": "string",
|
||||
"value": "Input",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"hidden": true,
|
||||
"disabled": true
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段名称(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段(name)",
|
||||
"columns": 6
|
||||
}
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "输入框0",
|
||||
"itemClass": "build-form-item-0",
|
||||
"showLegend": false
|
||||
}
|
||||
},
|
||||
"build-form-item-1": {
|
||||
"key": "build-form-item-1",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": {
|
||||
"type": "string",
|
||||
"value": "Repeator",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"hidden": true,
|
||||
"disabled": true
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段名称(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段(name)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"itemList": {
|
||||
"type": "array",
|
||||
"ui": {
|
||||
"label": "属性列表",
|
||||
"columns": 12,
|
||||
"widget": "array-table",
|
||||
"showLegend": false
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
},
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性名(label)",
|
||||
"columns": 3
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性(name)",
|
||||
"columns": 3
|
||||
}
|
||||
},
|
||||
"type": {
|
||||
"type": "array",
|
||||
"value": "Input",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性类型",
|
||||
"columns": 3,
|
||||
"widget": "select",
|
||||
"widgetConfig": {
|
||||
"clearable": true,
|
||||
"filterable": true,
|
||||
"enumSource": [{
|
||||
"value": "Input",
|
||||
"label": "String"
|
||||
}, {
|
||||
"value": "DatePicker",
|
||||
"label": "Date"
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "列表1",
|
||||
"itemClass": "build-form-item-1",
|
||||
"showLegend": false
|
||||
}
|
||||
},
|
||||
"build-form-item-2": {
|
||||
"key": "build-form-item-2",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": {
|
||||
"type": "string",
|
||||
"value": "Object",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"hidden": true,
|
||||
"disabled": true
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段名称(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段(name)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"itemList": {
|
||||
"type": "array",
|
||||
"ui": {
|
||||
"label": "对象属性列表",
|
||||
"columns": 12,
|
||||
"widget": "array-table",
|
||||
"showLegend": false
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
},
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性名(label)",
|
||||
"columns": 3
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性(name)",
|
||||
"columns": 3
|
||||
}
|
||||
},
|
||||
"type": {
|
||||
"type": "array",
|
||||
"value": "Input",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性类型",
|
||||
"columns": 3,
|
||||
"widget": "select",
|
||||
"widgetConfig": {
|
||||
"clearable": true,
|
||||
"filterable": true,
|
||||
"enumSource": [{
|
||||
"value": "Input",
|
||||
"label": "String"
|
||||
}, {
|
||||
"value": "DatePicker",
|
||||
"label": "Date"
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "对象2",
|
||||
"itemClass": "build-form-item-2",
|
||||
"showLegend": false
|
||||
}
|
||||
},
|
||||
"build-form-item-3": {
|
||||
"key": "build-form-item-3",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": {
|
||||
"type": "string",
|
||||
"value": "MultiSelect",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"hidden": true,
|
||||
"disabled": true
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段名称(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段(name)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"itemList": {
|
||||
"type": "array",
|
||||
"ui": {
|
||||
"label": "下拉框列表项",
|
||||
"columns": 12,
|
||||
"widget": "array-table",
|
||||
"showLegend": false
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
},
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性名(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"value": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性值(value)",
|
||||
"columns": 6
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "多选下拉框3",
|
||||
"itemClass": "build-form-item-3",
|
||||
"showLegend": false
|
||||
}
|
||||
},
|
||||
"build-form-item-4": {
|
||||
"key": "build-form-item-4",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": {
|
||||
"type": "string",
|
||||
"value": "Select",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"hidden": true,
|
||||
"disabled": true
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段名称(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "字段(name)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"itemList": {
|
||||
"type": "array",
|
||||
"ui": {
|
||||
"label": "下拉框列表项",
|
||||
"columns": 12,
|
||||
"widget": "array-table",
|
||||
"showLegend": false
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
},
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"label": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性名(label)",
|
||||
"columns": 6
|
||||
}
|
||||
},
|
||||
"value": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": {
|
||||
"value": true,
|
||||
"errMsg": "该字段必填"
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "属性值(value)",
|
||||
"columns": 6
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"label": "下拉框4",
|
||||
"itemClass": "build-form-item-4",
|
||||
"showLegend": false
|
||||
}
|
||||
}
|
||||
},
|
||||
"value": {
|
||||
"build-form-item-0": {
|
||||
"type": "Input",
|
||||
"label": "发多少",
|
||||
"name": "ggs"
|
||||
},
|
||||
"build-form-item-1": {
|
||||
"type": "Repeator",
|
||||
"label": "图片列表",
|
||||
"name": "imgList",
|
||||
"itemList": [{
|
||||
"label": "图片链接",
|
||||
"name": "url",
|
||||
"type": "Input"
|
||||
}, {
|
||||
"label": "图片名称",
|
||||
"name": "alt",
|
||||
"type": "Input"
|
||||
}, {
|
||||
"label": "上线时间",
|
||||
"name": "time",
|
||||
"type": "DatePicker"
|
||||
}]
|
||||
},
|
||||
"build-form-item-2": {
|
||||
"type": "Object",
|
||||
"label": "fsf",
|
||||
"name": "fsdf",
|
||||
"itemList": [{
|
||||
"label": "fsa",
|
||||
"name": "fsdf",
|
||||
"type": "Input"
|
||||
}, {
|
||||
"label": "4123",
|
||||
"name": "4214",
|
||||
"type": "DatePicker"
|
||||
}]
|
||||
},
|
||||
"build-form-item-3": {
|
||||
"type": "MultiSelect",
|
||||
"label": "fsdf",
|
||||
"name": "fsf",
|
||||
"itemList": [{
|
||||
"label": "efq",
|
||||
"value": "dsa"
|
||||
}, {
|
||||
"label": "fds",
|
||||
"value": "fsfa"
|
||||
}, {
|
||||
"label": "eww",
|
||||
"value": "casd"
|
||||
}]
|
||||
},
|
||||
"build-form-item-4": {
|
||||
"type": "Select",
|
||||
"label": "fsadf",
|
||||
"name": "erq",
|
||||
"itemList": [{
|
||||
"label": "sdf",
|
||||
"value": "fsa"
|
||||
}, {
|
||||
"label": "dfs",
|
||||
"value": "fdsf"
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
{
|
||||
"name": {
|
||||
"type": "string",
|
||||
"ui": {
|
||||
"columns": 6,
|
||||
"label": "姓名"
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
}
|
||||
},
|
||||
"message": {
|
||||
"type": "string",
|
||||
"ui": {
|
||||
"columns": 12,
|
||||
"widget": "textarea",
|
||||
"label": "消息",
|
||||
"widgetConfig": {
|
||||
"rows": 4
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
}
|
||||
},
|
||||
"users": {
|
||||
"type": "array",
|
||||
"ui": {
|
||||
"columns": 12,
|
||||
"label": "用户列表",
|
||||
"widget": "array-table",
|
||||
"showLegend": false
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
},
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"createTime": {
|
||||
"type": "string",
|
||||
"ui": {
|
||||
"columns": 6,
|
||||
"label": "注册时间",
|
||||
"widget": "date-picker",
|
||||
"widgetConfig": {
|
||||
"type": "datetime",
|
||||
"format": "yyyy-MM-dd HH:mm:ss"
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
}
|
||||
},
|
||||
"educationBackground": {
|
||||
"type": "array",
|
||||
"rules": {
|
||||
"required": true
|
||||
},
|
||||
"ui": {
|
||||
"columns": 6,
|
||||
"label": "学历",
|
||||
"widget": "select",
|
||||
"widgetConfig": {
|
||||
"clearable": true,
|
||||
"filterable": true,
|
||||
"multiple": true,
|
||||
"enumSource": [
|
||||
{
|
||||
"value": "primarySchool",
|
||||
"label": "小学"
|
||||
},
|
||||
{
|
||||
"value": "juniorHighSchool",
|
||||
"label": "初中"
|
||||
},
|
||||
{
|
||||
"value": "seniorHighSchool",
|
||||
"label": "高中"
|
||||
},
|
||||
{
|
||||
"value": "juniorCollege",
|
||||
"label": "专科"
|
||||
},
|
||||
{
|
||||
"value": "college",
|
||||
"label": "本科"
|
||||
},
|
||||
{
|
||||
"value": "master",
|
||||
"label": "硕士"
|
||||
},
|
||||
{
|
||||
"value": "doctor",
|
||||
"label": "博士"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"email": {
|
||||
"type": "string",
|
||||
"rules": {
|
||||
"required": true
|
||||
},
|
||||
"ui": {
|
||||
"columns": 6,
|
||||
"label": "邮箱"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"date": {
|
||||
"type": "string",
|
||||
"ui": {
|
||||
"columns": 6,
|
||||
"label": "时间",
|
||||
"widget": "date-picker",
|
||||
"widgetConfig": {
|
||||
"type": "datetime",
|
||||
"format": "yyyy-MM-dd HH:mm:ss"
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"required": true
|
||||
}
|
||||
},
|
||||
"choice": {
|
||||
"type": "array",
|
||||
"rules": {
|
||||
"required": true
|
||||
},
|
||||
"ui": {
|
||||
"columns": 6,
|
||||
"label": "下拉框",
|
||||
"widget": "select",
|
||||
"widgetConfig": {
|
||||
"clearable": true,
|
||||
"filterable": true,
|
||||
"multiple": true,
|
||||
"enumSource": [
|
||||
{
|
||||
"value": 1,
|
||||
"label": "option1"
|
||||
},
|
||||
{
|
||||
"value": 2,
|
||||
"label": "option2"
|
||||
},
|
||||
{
|
||||
"value": 3,
|
||||
"label": "option3"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,11 @@
|
||||
import playground from "./playground/index.vue";
|
||||
import schemaGen from "./schema-gen/index.vue";
|
||||
import createFormByForm from "./create-form-by-form/index.vue";
|
||||
// Don't touch me - import
|
||||
|
||||
module.exports = {
|
||||
playground,
|
||||
schemaGen
|
||||
schemaGen,
|
||||
createFormByForm
|
||||
// Don't touch me - export
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user