forked from opentiny/tiny-engine
717 lines
20 KiB
JSON
717 lines
20 KiB
JSON
{
|
||
"version": "1.1",
|
||
"componentName": "Page",
|
||
"fileName": "FormTable",
|
||
"css": ".overflow-container .card {\n padding-bottom: 8px;\n}\n.main-body {\n display: flex;\n flex: 1;\n flex-direction: column;\n margin: 20px 20px 9px 20px;\n}\n.card {\n padding: 20px 20px;\n background-color: #ffffff;\n box-shadow: 0 2px 10px 0 rgb(0 0 0 / 6%);\n border-radius: 2px;\n}\n.manage-list {\n margin-bottom: 60px !important;\n} .crm-title-wrapper{\n display: flex;\n justify-content: start;\n align-items: center;\n margin-bottom: 20px;\n gap: 20px;\n}\n .crm-import-button:not(:last-child) {\n margin-right: 10px;\n}",
|
||
"props": {},
|
||
"children": [
|
||
{
|
||
"componentName": "Text",
|
||
"props": {
|
||
"style": "background: url(\"**/public/logo.png\");",
|
||
"className": "page-header",
|
||
"text": "标题区"
|
||
}
|
||
},
|
||
{
|
||
"componentName": "Text",
|
||
"props": {
|
||
"style": "background: url('**/public/background.png');",
|
||
"text": "副标题区"
|
||
}
|
||
},
|
||
{
|
||
"componentName": "Template",
|
||
"props": {
|
||
"text": "空插槽，出码会跳过此节点"
|
||
},
|
||
"children": []
|
||
},
|
||
{
|
||
"componentName": "ImageTitle",
|
||
"fileName": "ImageTitle",
|
||
"componentType": "Block",
|
||
"props": {
|
||
"className": {
|
||
"type": "JSExpression",
|
||
"value": "['basic-info', {'form-fixed-layout': this.props.isFixed}, {'form-auto-layout': this.props.isAuto}]"
|
||
},
|
||
"text": "配置报价",
|
||
"hasSplitLine": false,
|
||
"onClickLogo": {
|
||
"type": "JSExpression",
|
||
"value": "this.handleReset",
|
||
"params": ["state.flag"]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"componentName": "TinyForm",
|
||
"props": {
|
||
"inline": true,
|
||
"style": {
|
||
"margin": "12px"
|
||
},
|
||
"className": "form"
|
||
},
|
||
"children": [
|
||
{
|
||
"componentName": "TinyFormItem",
|
||
"props": {
|
||
"label": {
|
||
"type": "i18n",
|
||
"key": "company.name"
|
||
}
|
||
},
|
||
"children": [
|
||
{
|
||
"componentName": "TinyInput",
|
||
"props": {
|
||
"disabled": false,
|
||
"value": {
|
||
"type": "JSExpression",
|
||
"value": "state.companyName"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"componentName": "TinyFormItem",
|
||
"condition": {
|
||
"type": "JSExpression",
|
||
"value": "state.cityOptions.length"
|
||
},
|
||
"children": [
|
||
{
|
||
"componentName": "Template",
|
||
"props": {
|
||
"slot": "label"
|
||
},
|
||
"children": "城市"
|
||
},
|
||
{
|
||
"componentName": "TinySelect",
|
||
"props": {
|
||
"value": {
|
||
"type": "JSExpression",
|
||
"value": "state.companyCity"
|
||
},
|
||
"options": [
|
||
{
|
||
"label": {
|
||
"type": "i18n",
|
||
"key": "city.foochow",
|
||
"zh_CN": "福州",
|
||
"en_US": "Foochow"
|
||
},
|
||
"value": 0
|
||
},
|
||
{
|
||
"label": "深'i'圳",
|
||
"value": 1
|
||
},
|
||
{
|
||
"label": "中山",
|
||
"value": 2
|
||
},
|
||
{
|
||
"label": "龙岩",
|
||
"value": 3
|
||
},
|
||
{
|
||
"label": "韶关",
|
||
"value": 4
|
||
},
|
||
{
|
||
"label": "黄冈",
|
||
"value": 5
|
||
},
|
||
{
|
||
"label": "赤壁",
|
||
"value": 6
|
||
},
|
||
{
|
||
"label": "厦门",
|
||
"value": 7
|
||
}
|
||
]
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"componentName": "TinyFormItem",
|
||
"props": {},
|
||
"children": [
|
||
{
|
||
"componentName": "Text",
|
||
"props": {
|
||
"className": "form-footer",
|
||
"text": "表单提交区"
|
||
}
|
||
},
|
||
{
|
||
"componentName": "TinyButton",
|
||
"props": {
|
||
"type": "primary",
|
||
"icon": {
|
||
"componentName": "Icon",
|
||
"props": {
|
||
"name": "IconSearch"
|
||
}
|
||
},
|
||
"onClick": {
|
||
"type": "JSExpression",
|
||
"value": "this.handleSearch"
|
||
}
|
||
},
|
||
"children": "搜索"
|
||
},
|
||
{
|
||
"componentName": "TinyButton",
|
||
"props": {
|
||
"onClick": {
|
||
"type": "JSExpression",
|
||
"value": "this.handleReset"
|
||
}
|
||
},
|
||
"children": {
|
||
"type": "i18n",
|
||
"key": "operation.reset"
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"componentName": "Collection",
|
||
"props": {
|
||
"dataSource": "a5f6ef4f"
|
||
},
|
||
"children": [
|
||
{
|
||
"componentName": "TinyGrid",
|
||
"props": {
|
||
"columns": {
|
||
"type": "JSExpression",
|
||
"value": "state.columns"
|
||
},
|
||
"data": {
|
||
"type": "JSExpression",
|
||
"value": "state.tableData"
|
||
},
|
||
"fetchData": {
|
||
"type": "JSExpression",
|
||
"value": "{ api: getTableData }"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"componentName": "Collection",
|
||
"props": {
|
||
"dataSource": "a5f6ef4f"
|
||
},
|
||
"children": [
|
||
{
|
||
"componentName": "TinyGrid",
|
||
"props": {
|
||
"columns": [
|
||
{ "type": "index", "width": 60, "title": "" },
|
||
{ "type": "selection", "width": 60 },
|
||
{
|
||
"field": "employees",
|
||
"title": "员工数",
|
||
"slots": {
|
||
"default": {
|
||
"type": "JSSlot",
|
||
"params": ["row", "rowIndex"],
|
||
"value": [{ "componentName": "TinyInput", "props": {}, "id": "49e232ce" }]
|
||
}
|
||
}
|
||
},
|
||
{ "field": "city", "title": "城市" },
|
||
{
|
||
"title": "产品",
|
||
"slots": {
|
||
"default": {
|
||
"type": "JSSlot",
|
||
"params": ["row"],
|
||
"value": [
|
||
{
|
||
"componentName": "div",
|
||
"id": "592fbc05",
|
||
"children": [{ "componentName": "TinySwitch", "props": { "modelValue": "" }, "id": "46a60c6f" }]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"title": "操作",
|
||
"slots": {
|
||
"default": {
|
||
"type": "JSSlot",
|
||
"value": [
|
||
{
|
||
"componentName": "TinyButton",
|
||
"props": {
|
||
"text": "删除",
|
||
"icon": {
|
||
"componentName": "Icon",
|
||
"props": {
|
||
"name": "IconDel"
|
||
}
|
||
},
|
||
"onClick": {
|
||
"type": "JSExpression",
|
||
"value": "this.emit",
|
||
"params": ["row"]
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
],
|
||
"data": {
|
||
"type": "JSExpression",
|
||
"value": "state.tableData"
|
||
},
|
||
"fetchData": {
|
||
"type": "JSExpression",
|
||
"value": "{ api: getTableData }"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"componentName": "div",
|
||
"props": {
|
||
"style": {
|
||
"width": {
|
||
"type": "JSExpression",
|
||
"value": "this.props.quotePopWidth"
|
||
}
|
||
}
|
||
},
|
||
"children": "循环渲染："
|
||
},
|
||
{
|
||
"componentName": "Icon",
|
||
"condition": false,
|
||
"props": {
|
||
"name": "TinyIconHelpCircle"
|
||
}
|
||
},
|
||
{
|
||
"children": [
|
||
{
|
||
"componentName": "TinyButton",
|
||
"loop": {
|
||
"type": "JSExpression",
|
||
"value": "state.buttons"
|
||
},
|
||
"loopArgs": ["item", "index"],
|
||
"props": {
|
||
"key": {
|
||
"type": "JSExpression",
|
||
"value": "item.text"
|
||
},
|
||
"type": {
|
||
"type": "JSExpression",
|
||
"value": "item.type"
|
||
},
|
||
"text": {
|
||
"type": "JSExpression",
|
||
"value": "index + item.text"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"componentName": "br"
|
||
},
|
||
{
|
||
"children": [
|
||
{
|
||
"componentName": "TinyButton",
|
||
"loop": [
|
||
{
|
||
"type": "primary",
|
||
"text": "字面量"
|
||
},
|
||
{
|
||
"type": "success",
|
||
"text": "字面量"
|
||
},
|
||
{
|
||
"type": "danger",
|
||
"text": "危险操作"
|
||
}
|
||
],
|
||
"loopArgs": ["item"],
|
||
"props": {
|
||
"key": {
|
||
"type": "JSExpression",
|
||
"value": "item.text"
|
||
},
|
||
"type": {
|
||
"type": "JSExpression",
|
||
"value": "item.type"
|
||
},
|
||
"text": {
|
||
"type": "JSExpression",
|
||
"value": "item.text"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
],
|
||
"state": {
|
||
"IconPlusSquare": {
|
||
"type": "JSResource",
|
||
"value": "this.utils.IconPlusSquare()"
|
||
},
|
||
"theme": "{ \"id\": 22, \"name\": \"@cloud/tinybuilder-theme-dark\", \"description\": \"黑暗主题\" }",
|
||
"companyName": "",
|
||
"companyOptions": null,
|
||
"companyCity": "",
|
||
"cityOptions": [
|
||
{
|
||
"label": "福州",
|
||
"value": 0
|
||
},
|
||
{
|
||
"label": "深圳",
|
||
"value": 1
|
||
},
|
||
{
|
||
"label": "中山",
|
||
"value": 2
|
||
},
|
||
{
|
||
"label": "龙岩",
|
||
"value": 3
|
||
},
|
||
{
|
||
"label": "韶关",
|
||
"value": 4
|
||
},
|
||
{
|
||
"label": "黄冈",
|
||
"value": 5
|
||
},
|
||
{
|
||
"label": "赤壁",
|
||
"value": 6
|
||
},
|
||
{
|
||
"label": "厦门",
|
||
"value": 7
|
||
}
|
||
],
|
||
"editConfig": {
|
||
"trigger": "click",
|
||
"mode": "cell",
|
||
"showStatus": true,
|
||
"activeMethod": {
|
||
"type": "JSFunction",
|
||
"value": "function() { return this.props.isEdit }"
|
||
}
|
||
},
|
||
"columns": [
|
||
{
|
||
"type": {
|
||
"type": "JSExpression",
|
||
"value": "this.props.isEdit ? 'selection' : 'index'"
|
||
},
|
||
"width": "60",
|
||
"title": {
|
||
"type": "JSExpression",
|
||
"value": "this.props.isEdit ? '' : '序号'"
|
||
}
|
||
},
|
||
{
|
||
"field": "status",
|
||
"title": "状态",
|
||
"filter": {
|
||
"layout": "input,enum,default,extends,base",
|
||
"inputFilter": {
|
||
"component": {
|
||
"type": "JSResource",
|
||
"value": "this.utils.Numeric"
|
||
},
|
||
"attrs": { "format": "yyyy/MM/dd hh:mm:ss" },
|
||
"relation": "A",
|
||
"relations": [
|
||
{
|
||
"label": "小于",
|
||
"value": "A",
|
||
"method": {
|
||
"type": "JSFunction",
|
||
"value": "function({ value, input }) { return value < input }"
|
||
}
|
||
},
|
||
{ "label": "等于", "value": "equals" },
|
||
{ "label": "大于", "value": "greaterThan" }
|
||
]
|
||
},
|
||
"extends": [
|
||
{
|
||
"label": "我要过滤大于800的数",
|
||
"method": {
|
||
"type": "JSFunction",
|
||
"value": "function({ value }) { return value > 800 }"
|
||
}
|
||
},
|
||
{
|
||
"label": "我要过滤全部的数",
|
||
"method": {
|
||
"type": "JSFunction",
|
||
"value": "function() { return true }"
|
||
}
|
||
}
|
||
]
|
||
},
|
||
"slots": {
|
||
"default": {
|
||
"type": "JSSlot",
|
||
"params": ["row"],
|
||
"value": [
|
||
{
|
||
"componentName": "div",
|
||
"children": [
|
||
{
|
||
"componentName": "Icon",
|
||
"props": {
|
||
"name": "IconEdit"
|
||
}
|
||
},
|
||
{
|
||
"componentName": "CrmQuoteListGridStatus",
|
||
"componentType": "Block",
|
||
"condition": {
|
||
"type": "JSExpression",
|
||
"value": "this.props.isEdit"
|
||
},
|
||
"props": {
|
||
"isEdit": {
|
||
"type": "JSExpression",
|
||
"value": "this.props.isEdit"
|
||
},
|
||
"status": {
|
||
"type": "JSExpression",
|
||
"value": "row.status"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"type": "index",
|
||
"width": 60
|
||
},
|
||
{
|
||
"type": "selection",
|
||
"width": 60
|
||
},
|
||
{
|
||
"field": "name",
|
||
"title": "公司名称"
|
||
},
|
||
{
|
||
"field": "employees",
|
||
"title": "员工数"
|
||
},
|
||
{
|
||
"field": "city",
|
||
"title": "城市"
|
||
},
|
||
{
|
||
"title": "操作",
|
||
"slots": {
|
||
"default": {
|
||
"type": "JSSlot",
|
||
"value": [
|
||
{
|
||
"component": "div",
|
||
"props": {
|
||
"style": "color: rgb(94,124, 224);cursor:pointer;",
|
||
"text": {
|
||
"type": "i18n",
|
||
"key": "operation.delete"
|
||
},
|
||
"prop1": {
|
||
"a": 123
|
||
},
|
||
"visible": true,
|
||
"onClick": {
|
||
"type": "JSExpression",
|
||
"value": "this.emit"
|
||
}
|
||
},
|
||
"children": [
|
||
{
|
||
"componentName": "TinyInput",
|
||
"props": {
|
||
"value": {
|
||
"type": "JSExpression",
|
||
"value": "row.giveamount",
|
||
"model": {
|
||
"prop": ""
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"component": "span",
|
||
"condition": {
|
||
"type": "JSExpression",
|
||
"value": "state.cityOptions.length"
|
||
},
|
||
"children": {
|
||
"type": "i18n",
|
||
"key": "operation.hello"
|
||
}
|
||
},
|
||
{
|
||
"componentName": "Icon",
|
||
"props": {
|
||
"name": "TinyIconHelpCircle",
|
||
"style": "margin-left: 6px; cursor: pointer;vertical-align: top;"
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
],
|
||
"tableData": [
|
||
{
|
||
"id": "1",
|
||
"name": "GFD科技有限公司",
|
||
"city": "福州",
|
||
"employees": 800,
|
||
"boole": false
|
||
},
|
||
{
|
||
"id": "2",
|
||
"name": "WWW科技有限公司",
|
||
"city": "深圳",
|
||
"employees": 300,
|
||
"boole": true
|
||
},
|
||
{
|
||
"id": "3",
|
||
"name": "RFV有限责任公司",
|
||
"city": "中山",
|
||
"employees": 1300,
|
||
"boole": false
|
||
},
|
||
{
|
||
"id": "4",
|
||
"name": "TGB科技有限公司",
|
||
"city": "龙岩",
|
||
"employees": 360,
|
||
"boole": true
|
||
},
|
||
{
|
||
"id": "5",
|
||
"name": "YHN科技有限公司",
|
||
"city": "韶关",
|
||
"employees": 810,
|
||
"boole": true
|
||
},
|
||
{
|
||
"id": "6",
|
||
"name": "WSX科技有限公司",
|
||
"city": "黄冈",
|
||
"employees": 800,
|
||
"boole": true
|
||
},
|
||
{
|
||
"id": "7",
|
||
"name": "KBG物业有限公司",
|
||
"city": "赤壁",
|
||
"employees": 400,
|
||
"boole": false
|
||
},
|
||
{
|
||
"id": "8",
|
||
"name": "深圳市福德宝网络技术有限公司",
|
||
"boole": true,
|
||
"city": "厦门",
|
||
"employees": 540
|
||
}
|
||
],
|
||
"status": {
|
||
"type": "JSExpression",
|
||
"value": "this.statusData",
|
||
"computed": true
|
||
},
|
||
"buttons": [
|
||
{
|
||
"type": "primary",
|
||
"text": "主要操作"
|
||
},
|
||
{
|
||
"type": "success",
|
||
"text": "成功操作"
|
||
},
|
||
{
|
||
"type": "danger",
|
||
"text": {
|
||
"type": "i18n",
|
||
"key": "operation.danger"
|
||
}
|
||
}
|
||
]
|
||
},
|
||
"lifeCycles": {
|
||
"setup": {
|
||
"type": "JSFunction",
|
||
"value": "function({ props, watch, onMounted }) {\r\n onMounted(() => {\r\n this.getTableDta()\r\n })\r\n watch(\r\n () => props.load,\r\n (load) => {\r\n if (load.isLoad) {\r\n this.getTableDta()\r\n }\r\n },\r\n {\r\n deep: true\r\n }\r\n )\r\n}"
|
||
},
|
||
"onBeforeMount": {
|
||
"type": "JSFunction",
|
||
"value": "function() { return '生命周期：onBeforeMount'; }"
|
||
},
|
||
"onMounted": {
|
||
"type": "JSFunction",
|
||
"value": "function onMounted() { return '生命周期：onMounted'; }"
|
||
}
|
||
},
|
||
"methods": {
|
||
"getTableData": {
|
||
"type": "JSFunction",
|
||
"value": "function getData({ page, filterArgs }) {\n const { curPage, pageSize } = page;\n const offset = (curPage - 1) * pageSize;\n\n return new Promise((resolve) => {\n setTimeout(() => {\n const { tableData } = this.state;\n let result = [...tableData];\n\n if (filterArgs) {\n result = result.filter((item) => item.city === filterArgs);\n }\n\n const total = result.length;\n result = result.slice(offset, offset + pageSize);\n\n resolve({ result, page: { total } });\n }, 500);\n });\n}"
|
||
},
|
||
"handleSearch": {
|
||
"type": "JSFunction",
|
||
"value": "function(e) { return ['搜索:', this.i18n('operation.search'), e]; }"
|
||
},
|
||
"handleReset": {
|
||
"type": "JSFunction",
|
||
"value": "function handleReset(e) { return ['重置:', e]; }"
|
||
},
|
||
"statusData": {
|
||
"type": "JSFunction",
|
||
"value": "function () {\r\n return [\r\n { name: this.i18n('quotes.common.configure_basic_information'), status: 'ready' },\r\n { name: this.i18n('quotes.quote_list.quote'), status: 'wait' },\r\n { name: this.i18n('quotes.common.complete_configuration_quote'), status: 'wait' }\r\n ]\r\n}"
|
||
}
|
||
}
|
||
}
|