Skip to content

H
hls-easy-ui
Commit afe50e3e authored by 王纵's avatar 王纵
Browse files
Options

低代码优化

parent 4935a91d
Hide whitespace changes
Inline Side-by-side
Showing with 145 additions and 76 deletions
src/Dynamic/ConfigRenderComponent/DForm/FormItem/DLov.vue
View file @ afe50e3e
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-01 09:55:12
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-10-12 15:00:31
* @LastEditTime: 2024-10-12 15:43:25
* @Version: 1.0.0
* @Description: 动态渲染-Lov
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -165,7 +165,6 @@ export default {
watch: {
value: {
handler (newValue, oldValue) {
console.log(' this.handler', newValue, oldValue)
if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
this.currentValue = newValue
this.fieldValue = newValue ? JSON.stringify(newValue) : ''
......@@ -177,7 +176,6 @@ export default {
mounted () {
this.currentValue = this.value
this.fieldValue = this.value ? JSON.stringify(this.value) : ''
console.log(' this.currentValue', this.currentValue)
this.getLovConfig()
},
methods: {
......
src/Dynamic/ConfigRenderComponent/DTable/index.vue
View file @ afe50e3e
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 10:51:56
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-09-13 15:25:03
* @LastEditTime: 2024-10-14 09:36:28
* @Version: 1.0.0
* @Description: 表格渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -13,7 +13,7 @@
:title="tabInfo.description"
:tabButtons="tabInfo.tabButtons || []"
:buttonsFun="buttonsClick"
:showBtns="!readOnly"
:showBtns="true"
/>
<div>
......@@ -40,7 +40,7 @@
:title="tabInfo.description"
:tabButtons="tabInfo.tabButtons || []"
:buttonsFun="buttonsClick"
:showBtns="!readOnly"
:showBtns="true"
/>
</template>
<van-list
......
src/Dynamic/ConfigRenderComponent/DTitle/DTitleRender.jsx 0 → 100644
View file @ afe50e3e
/*
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 09:41:54
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-27 14:27:21
* @Version: 1.0.0
* @Description: 表格列渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
*/
import Vue from 'vue';
const DTitleRender = {
props: {
title: {
type: String,
default: '',
},
extraRender: {
type: Function,
default: null
},
instance: {
type: Object,
default: () => ({})
}
},
// 为了弥补缺少的实例
// 提供第二个参数作为上下文
render: function (h, context) {
return this.extraRender ? this.extraRender(this.instance) : <div class="title">{this.title}</div>
}
};
export default DTitleRender;
\ No newline at end of file
src/Dynamic/ConfigRenderComponent/DTitle/index.vue
View file @ afe50e3e
......@@ -2,19 +2,19 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-02 15:32:36
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-19 14:48:45
* @LastEditTime: 2024-10-14 09:30:54
* @Version: 1.0.0
* @Description: 组件头部渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
-->
<template>
<div class="layout-title">
<div class="title">{{title}}</div>
<d-title-render :title="title" :extraRender="extraRender" :parentRef="$parent" />
<div class="title-btns" v-if="showBtns">
<van-button
<van-button
v-for="btn in defaultBtns"
round
size="mini"
size="mini"
:key="btn.name"
:icon="buttonIcon[btn.name]"
class="title-button"
......@@ -40,6 +40,7 @@
<script>
import { Button, Icon, Popover } from 'vant';
import DTitleRender from './DTitleRender.jsx';
export default {
name: 'DTitle',
......@@ -47,11 +48,12 @@ export default {
[Icon.name]: Icon,
[Button.name]: Button,
[Popover.name]: Popover,
DTitleRender
},
props: {
title: {
type: String,
default: '',
default: ''
},
tabButtons: {
type: Array,
......@@ -63,9 +65,12 @@ export default {
},
showBtns: {
type: Boolean,
default: false,
default: false
},
extraRender: {
type: Function,
default: null
}
},
data () {
return {
......@@ -115,6 +120,18 @@ export default {
flex-wrap: nowrap;
align-items: center;
padding: 15px 14px;
position: relative;
&::before {
content: '';
background-color: @primary-color;
position: absolute;
left: 0;
top: 50%;
margin-top: -9px;
width: 4px;
height: 18px;
border-radius: 0px 20px 20px 0px;
}
.title {
position: relative;
max-width: 50%;
......@@ -123,17 +140,6 @@ export default {
color: #333333;
font-weight: 500;
// border-left: 5px solid @primary-color;
&::before {
content: '';
background-color: @primary-color;
position: absolute;
left: -14px;
top: 50%;
margin-top: -9px;
width: 4px;
height: 18px;
border-radius: 0px 20px 20px 0px;
}
}
.title-btns{
// text-align: right;
......@@ -142,7 +148,7 @@ export default {
position: relative;
align-items: center;
justify-content: end;
.title-button {
padding: 0 12px;
height: 24px;
......
src/Dynamic/ConfigRenderComponent/LayoutBuilder.jsx
View file @ afe50e3e
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 21:21:37
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-09-19 16:05:29
* @LastEditTime: 2024-10-12 15:35:29
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -84,10 +84,10 @@ export class ColumnBuilder extends BaseBuilder {
this.layoutCode = '';
/**
* 页脚渲染
* 自定义字段配置
* @type {*[]}
*/
this.tableFooterRenderers = [];
this.customFieldsConfig = [];
this.createElement= () => {}
super.init();
......@@ -105,6 +105,11 @@ export class ColumnBuilder extends BaseBuilder {
return getCustomizedProp(this.layoutCode, this.tabCode, columnName, renderers);
}
getCurrentFieldCustom(columnName) {
const field = this.customFieldsConfig.find(o => o.columnName === columnName) || {};
return field;
}
/**
* 生成表单下字段组件数组
* @param {Array.<{columnName: string, columnSeq: number, rowSeq: number, cascadeValue: string, validationTypeDisplay: string, columnCount: number, rowCount: number, inputModeDisplay: string, width: number}>} fields
......@@ -113,6 +118,7 @@ export class ColumnBuilder extends BaseBuilder {
*/
initFields(fields, cascadeKey = '') {
const newFields = fields.map(field => {
const customConfig = this.getCurrentFieldCustom(field.columnName);
const customerRender = this.getCustomizedRenderer(field.columnName);
return {
...field,
......@@ -120,7 +126,8 @@ export class ColumnBuilder extends BaseBuilder {
required: field.inputModeDisplay === "REQUIRED",
clearFlag: field.clearButton === 'Y',
renderer: customerRender.renderer,
dataClass: customerRender.className
dataClass: customerRender.className,
...customConfig,
}
// if (field.validationTypeDisplay === 'UrlField') {
// const {renderer} = this.getCustomizedRenderer(field.columnName, field);
......@@ -183,6 +190,7 @@ export class ColumnBuilder extends BaseBuilder {
case 'Tree': {
const newFields = this.fields.map(field => { // .filter(o => o.isVisible === 'Y')
const customizedRenderer = this.getCustomizedRenderer(field.columnName);
const customConfig = this.getCurrentFieldCustom(field.columnName);
return {
...field,
readOnly: field.inputModeDisplay === "READONLY",
......@@ -190,7 +198,8 @@ export class ColumnBuilder extends BaseBuilder {
clearFlag: field.clearButton === 'Y',
renderer: customizedRenderer.renderer,
formRenderer: customizedRenderer.formRenderer,
dataClass: customizedRenderer.className
dataClass: customizedRenderer.className,
...customConfig,
}
});
// return newFields;
......@@ -388,12 +397,12 @@ class BaseComponentBuilder extends BaseBuilder {
getHeaderRenderer() {
const currentHeaderExtra = getHeaderExtrasProp(this.layoutCode, this.tabCode, this.componentHeaderExtras);
let renderer = currentHeaderExtra.length > 0 ? currentHeaderExtra[0].renderer : undefined;
if (renderer) {
renderer = renderer({
dataSet: this.dataSet,
record: this.dataSet ? this.dataSet.current : undefined,
});
}
// if (renderer) {
// renderer = renderer({
// dataSet: this.dataSet,
// record: this.dataSet ? this.dataSet.current : undefined,
// });
// }
return {renderer};
}
......@@ -475,6 +484,7 @@ class BaseComponentBuilder extends BaseBuilder {
build() {
this.handleUrls();
const refKey = `${parseCode(this.layoutCode)}_${parseCode(this.tabCode)}_${this.tabType.toLowerCase()}Ref`;
const headExtraRender = this.getHeaderRenderer();
switch (this.tabType) {
case 'Table':
case 'Tree':
......@@ -487,7 +497,8 @@ class BaseComponentBuilder extends BaseBuilder {
// buttons: this.buttons,
columns: this.columns.fields,
originColumns: this.columns._originFields,
componentButtons: this.componentButtons
componentButtons: this.componentButtons,
titleExtraRender: headExtraRender.renderer
},
ref:`DTABLE_${this.tabCode}`,
},
......@@ -507,7 +518,8 @@ class BaseComponentBuilder extends BaseBuilder {
fields: newFields.fields,
originFields: newFields._originFields,
tabInfo: this.props,
componentButtons: this.componentButtons
componentButtons: this.componentButtons,
titleExtraRender: headExtraRender.renderer
},
ref:`DFORM_${this.tabCode}`,
}
......@@ -571,12 +583,6 @@ export class ComponentBuilder extends BaseComponentBuilder {
*/
this.componentHeaderExtras = [];
/**
* 数据集
* @type {undefined|DataSet}
* @public
*/
this.dataSet = undefined;
super.init();
}
......
src/Dynamic/LayoutButtons/index.vue
View file @ afe50e3e
......@@ -8,7 +8,7 @@
* @Copyright: Copyright (c) 2021, Hand-RongJing
-->
<template>
<div :class="safeArea ? 'van-safe-area-bottom layout-buttons' : 'layout-buttons'" v-if="!readOnly && layoutButtons.length">
<div :class="safeArea ? 'van-safe-area-bottom layout-buttons' : 'layout-buttons'" v-if="layoutButtons.length">
<div class="layout-buttons-content" :id="id" >
<van-popover
v-if="layoutButtons.length > num"
......
src/Dynamic/index.vue
View file @ afe50e3e
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 10:51:56
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-09-19 15:52:43
* @LastEditTime: 2024-10-12 15:42:34
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -23,7 +23,9 @@
v-if="configDatas.id && !loading"
:componentRenderers="componentRenderers"
:staticLayoutTabs="staticLayoutTabs"
:componentHeaderExtraRenders="componentHeaderExtraHandler"
:componentButtons="componentButtons"
:fieldCustomConfigs="fieldCustomConfigs"
/>
</d-content>
<layout-buttons
......@@ -38,7 +40,7 @@
<script>
import {NavBar, Loading, Toast} from 'vant';
import {DView, DHeader, DContent, DScroll} from './LayoutComponents';
import {DView, DContent} from './LayoutComponents';
import LayoutButtons from './LayoutButtons';
import ConfigRenderComponent from './ConfigRenderComponent/index.jsx';
import {query, queryRoute, save} from './service'
......@@ -55,9 +57,7 @@ export default {
LayoutButtons,
ConfigRenderComponent,
DView,
DHeader,
DContent,
DScroll
DContent
},
props: {
layoutCode: { // 页面编码
......@@ -76,7 +76,11 @@ export default {
type: Array,
default: () => []
},
headerButtons: { // 页面按钮渲染
headerButtons: { // 页面按钮渲染
type: Array,
default: () => []
},
componentHeaderExtraHandler: { // 组件头渲染
type: Array,
default: () => []
},
......@@ -92,6 +96,10 @@ export default {
type: Array,
default: () => []
},
fieldCustomConfigs: { // 字段
type: Array,
default: () => []
},
configLoadHandle: {
type: Function,
default: () => {}
......@@ -100,13 +108,17 @@ export default {
type: Function,
default: () => {}
},
safeArea: { // 是否显示安全区域
safeArea: { // 是否显示安全区域
type: Boolean,
default: true
},
routeParams: {
type: Object,
default: null
},
formUpdate: { // 表单数据更新
type: Function,
default: () => {}
}
},
data () {
......@@ -123,26 +135,37 @@ export default {
name: 'save',
clickFunction: this.layoutSave,
},
]
],
}
},
provide() {
provide () {
return {
addRef: this.addRef,
setDataSetData: this.setDataSetData,
dataLoadHandle: this.dataLoadHandle,
dynamicInfo: this.getDynamicInfo
};
}
},
created() {
this.init();
},
activated() {
this.init();
this.layoutCodeQuery();
this.init();
this.layoutCodeQuery()
},
beforeMount() {
this.layoutCodeQuery();
this.layoutCodeQuery()
},
watch: {
routeParams: {
handler (newValue, oldValue) {
if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
this.init();
this.layoutCodeQuery()
}
},
deep: true
},
},
methods: {
init() {
......@@ -167,28 +190,29 @@ export default {
const qpara = {
...this.params,
readOnly,
readOnly
}
if (JSON.stringify(this.qpara) === JSON.stringify(qpara)) {
this.loading = false;
return;
this.loading = false
return
}
this.qpara = qpara;
this.qpara = qpara
let res = {datas: {}, params: {}}
if (this.layoutCode) {
res = await query(this.layoutCode, this.qpara);
res = await query(this.layoutCode, this.qpara)
} else {
res = await queryRoute(this.layoutCode, this.qpara);
res = await queryRoute(this.layoutCode, this.qpara)
}
this.loading = false;
this.configDatas = {...res.datas};
this.params = res.params;
this.dataSetObject = this.transformDateSetTree(res.datas.dataSetsTree);
this.configLoadHandle(this.getDynamicInfo());
this.loading = false
this.configDatas = {...res.datas}
this.params = res.params
this.dataSetObject = this.transformDateSetTree(res.datas.dataSetsTree, res.datas)
this.$nextTick(() => {
this.configLoadHandle(this.getDynamicInfo())
})
},
transformDateSetTree(tree) {
let obj = {};
......@@ -207,13 +231,14 @@ export default {
setDataSetData(tabCode, data) {
this.dataSetObject[tabCode].data = data;
},
getDynamicInfo() {
getDynamicInfo () {
return { // 配置的所有信息
layoutCode: this.layoutCode, // 布局编码
config: this.configDatas, // 页面配置信息
dataSetObject: this.dataSetObject, // 页面datasetTree的转换，方便快速找出datasetname
queryParams: this.qpara, // 页面查询参数
EventBus: EventBus
EventBus: EventBus,
formUpdate: this.formUpdate
// componentRenderers: this.componentRenderers // 组件渲染内容
}
},
......@@ -242,7 +267,7 @@ export default {
if (window.history.state.position > 0) return window.history.back();
}
}
},
}
}
</script>
......
src/pages/dynamicTest/testDynamic.vue
View file @ afe50e3e
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-16 09:39:36
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-10-12 14:57:31
* @LastEditTime: 2024-10-14 09:27:49
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -50,7 +50,7 @@ export default {
}
},
created() {
window.localStorage.access_token = 'f5872e6f-6e47-498f-ba2c-db07470f0f25'
window.localStorage.access_token = 'a0876b60-d54e-4008-b43e-87cdead3d664'
},
methods: {
configLoadHandle(config) { // 查询配置信息之后的回调
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment