Skip to content

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

表格自定义url渲染，布局按钮自定义

parent 7b64e303
Show whitespace changes
Inline Side-by-side
Showing with 229 additions and 44 deletions
src/Dynamic/ConfigRenderComponent/DForm/FormItem/DCustomRender.jsx 0 → 100644
View file @ 4490ce2f
/*
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 09:41:54
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-14 17:41:47
* @Version: 1.0.0
* @Description: 表单渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
*/
import Vue from 'vue';
const DCustomRender = {
props: {
getData: {
type: Function,
default: () => {
return {}
}
},
fieldConfig: {
type: Object,
default: () => {}
},
renderer: {
type: Function,
default: null
}
},
data () {
return {
}
},
methods: {
},
// 为了弥补缺少的实例
// 提供第二个参数作为上下文
render: function (h, context) {
return this.renderer ? <div class="cell-value">{this.renderer(this.fieldConfig, this.getData)}</div> : this.$slots.default
}
};
export default DCustomRender;
\ No newline at end of file
src/Dynamic/ConfigRenderComponent/DForm/FormItem/DUrl.vue
View file @ 4490ce2f
......@@ -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-08-14 10:30:30
* @LastEditTime: 2024-08-14 17:40:37
* @Version: 1.0.0
* @Description: 动态渲染-超链接组件
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -10,25 +10,42 @@
<template>
<van-cell center class="d-form-item d-url" :required="required">
<d-label :label="label" :help="help" slot="title" />
<d-custom-render
:getData="getCurrentRecord"
:renderer="renderer"
:fieldConfig="fieldConfig"
>
<div class="d-url-value cell-value">
<img src="../../../assets/url-icon.png" alt="" class="right-icon" />
<a>{{value}}</a>
</div>
</d-custom-render>
<!-- <fragment v-else>
<img src="../../../assets/url-icon.png" alt="" class="right-icon" />
<a>{{value}}</a>
</fragment> -->
</div>
</van-cell>
</template>
<script>
import {Cell, Checkbox} from 'vant';
import DCustomRender from './DCustomRender.jsx';
import DLabel from './DLabel';
export default {
name: 'DUrl',
components: {
DLabel,
DCustomRender,
[Cell.name]: Cell,
[Checkbox.name]: Checkbox,
},
props: {
fieldConfig: {
type: Object,
default: () => {}
},
help: {
type: String,
default: ''
......@@ -48,6 +65,16 @@ export default {
required: {
type: Boolean,
default: false,
},
renderer: {
type: Function,
default: null
},
getCurrentRecord: {
type: Function,
default: () => {
return {}
}
}
},
data () {
......@@ -71,7 +98,7 @@ export default {
// @import './index.less';
.d-url {
padding: 6px 14px;
padding: 12px 14px;
.d-url-value {
padding: 5px 12px;
background: #3789FF10;
......
src/Dynamic/ConfigRenderComponent/DForm/index.vue
View file @ 4490ce2f
......@@ -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-08-14 16:02:32
* @LastEditTime: 2024-08-14 17:32:53
* @Version: 1.0.0
* @Description: 表单渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -99,12 +99,15 @@
<d-url
v-if="field.validationTypeDisplay === 'UrlField'"
v-model="fieldsObj[field.columnName]"
:name="field.columnName"
:label="field.description"
:help="field.help"
v-model="fieldsObj[field.columnName]"
:renderer="field.renderer"
:fieldConfig="field"
:disabled="readOnly || field.readOnly"
:required="field.required"
:getCurrentRecord="getCurrentRecord"
@change="fieldChange"
/>
</fragment>
......@@ -306,7 +309,10 @@ export default {
});
},
reset() {
this.fieldsObj = {...this.originFieldsObj};
this.fieldsObj = {...this.originFieldsObj};
},
getCurrentRecord() {
return this.fieldsObj;
}
},
}
......
src/Dynamic/ConfigRenderComponent/DTable/DTableTd.jsx
View file @ 4490ce2f
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 09:41:54
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-12 16:12:51
* @LastEditTime: 2024-08-14 16:21:18
* @Version: 1.0.0
* @Description: 表格列渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -17,6 +17,10 @@ const DTableTd = {
type: Object,
default: () => ({})
},
index: {
type: Number,
default: null,
},
columnName: {
type: String,
default: '',
......@@ -47,7 +51,7 @@ const DTableTd = {
// 提供第二个参数作为上下文
render: function (h, context) {
return this.tdRender ?
this.tdRender(this.record) :
this.tdRender(this.record, this.index) :
<span>{this.$slots.default || (this.columnValue() || '--')}</span>
}
};
......
src/Dynamic/ConfigRenderComponent/DTable/index.vue
View file @ 4490ce2f
......@@ -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-08-14 09:16:29
* @LastEditTime: 2024-08-14 16:22:00
* @Version: 1.0.0
* @Description: 表格渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -30,6 +30,7 @@
<d-table-td
:tdRender="column.renderer"
:columnName="column.columnName"
:index="pIndex"
:record="item" />
</van-checkbox>
<van-icon name="records-o" v-if="showEdit" @click="showRecord(item, pIndex)"/>
......@@ -40,6 +41,7 @@
:tdRender="column.renderer"
:columnName="column.columnName"
:record="item"
:index="pIndex"
:typeDisplay="column.validationTypeDisplay"
>
<template v-if="booleanType.includes(column.validationTypeDisplay)">
......
src/Dynamic/ConfigRenderComponent/LayoutBuilder.jsx
View file @ 4490ce2f
......@@ -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-08-13 16:41:48
* @LastEditTime: 2024-08-14 16:35:48
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -95,20 +95,20 @@ export class ColumnBuilder extends BaseBuilder {
getCustomizedRenderer(columnName) {
const currentRenderers = this.getCurrentRenderers(columnName, this.componentRenderers);
let renderer;
if (this.type === 'Table') {
renderer = currentRenderers.length > 0 ? currentRenderers[0].renderer : undefined;
} else if (this.type === 'Form') {
if (currentRenderers.length > 0 && isFunction(currentRenderers[0].renderer) && this.dataSet) {
renderer = currentRenderers[0].renderer({
dataSet: this.dataSet,
record: this.dataSet ? this.dataSet.current : undefined,
});
}
}
if (currentRenderers.length > 0) {
return { renderer, editor: currentRenderers[0].editor };
}
let renderer = currentRenderers.length > 0 ? currentRenderers[0].renderer : undefined;
// if (this.type === 'Table') {
// renderer = currentRenderers.length > 0 ? currentRenderers[0].renderer : undefined;
// } else if (this.type === 'Form') {
// if (currentRenderers.length > 0 && isFunction(currentRenderers[0].renderer) && this.dataSet) {
// renderer = currentRenderers[0].renderer({
// dataSet: this.dataSet,
// record: this.dataSet ? this.dataSet.current : undefined,
// });
// }
// }
// if (currentRenderers.length > 0) {
// return { renderer, editor: currentRenderers[0].editor };
// }
return { renderer };
}
......
src/Dynamic/LayoutButtons/index.vue
View file @ 4490ce2f
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-31 15:09:30
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-14 09:14:38
* @LastEditTime: 2024-08-15 10:18:13
* @Version: 1.0.0
* @Description: 页面按钮渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -64,6 +64,14 @@ export default {
type: Object,
default: () => ({})
},
layoutButtonsFun: { // 自定义按钮方法
type: Object,
default: () => ({})
},
headerButtons: { // 页面按钮渲染
type: Array,
default: () => []
},
},
data () {
return {
......@@ -81,13 +89,20 @@ export default {
export: '',
remove: 'delete',
query: 'search'
},
allFuns: {
save: this.saveFunction,
query: this.query,
reset: this.reset,
remove: this.remove,
}
}
},
mounted() {
this.configInfo = this.dynamicInfo().config;
this.readOnly = this.dynamicInfo().queryParams.readOnly;
this.layoutButtons = this.configInfo.layoutButtons || [];
this.allFuns = {...this.allFuns, ...this.layoutButtonsFun}; // 综合按钮方法
this.layoutButtons = (this.configInfo.layoutButtons || []).concat(this.headerButtons).filter(o => this.allFuns[o.name]);
this.init();
},
methods: {
......@@ -99,11 +114,23 @@ export default {
this.defaultBtns = [...this.layoutButtons];
}
},
getClickFunction(name) { // 获取对应的点击事件
const currentButtons = this.customizedButtons.filter(value => value.name === name);
return currentButtons.length > 0 ? currentButtons[0].clickFunction : this.dataSetFunction[name];
},
handlClick(btn) {
this.moreVisible = false;
if (btn.name === 'save') {
this.saveFunction();
}
const func = this.allFuns[btn.name];
func();
},
query(){
},
reset(){
},
remove() {
},
async saveFunction() {
const saveDataSet = this.dynamicInfo().dataSetObject;
......@@ -228,7 +255,7 @@ export default {
box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.2);
border-radius: 20px;
white-space: nowrap;
padding: 8px;
padding: 10px;
// margin: 6px 0;
// box-shadow: 0px 2px 2px 0px #3789ff;
}
......
src/Dynamic/index.vue
View file @ 4490ce2f
......@@ -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-08-14 10:48:44
* @LastEditTime: 2024-08-15 10:10:21
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -21,7 +21,11 @@
:componentRenderers="componentRenderers"
/>
</h-content>
<layout-buttons v-if="configDatas.id"/>
<layout-buttons
v-if="configDatas.id"
:layoutButtonsFun="layoutButtons"
:headerButtons="headerButtons"
/>
</h-view>
</template>
......@@ -53,6 +57,14 @@ export default {
componentRenderers: { // 组件渲染
type: Array,
default: () => []
},
headerButtons: { // 页面按钮渲染
type: Array,
default: () => []
},
layoutButtons: { // 布局按钮方法
type: Object,
default: () => ({})
}
},
data () {
......
src/pages/dynamicDetail.vue
View file @ 4490ce2f
......@@ -2,23 +2,87 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-31 18:41:49
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-13 10:47:38
* @LastEditTime: 2024-08-15 10:13:48
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
-->
<template>
<Dynamic layoutCode="PRJ005F1" />
<Dynamic
layoutCode="PRJ005F1"
:componentRenderers="componentRenderers"
:headerButtons="headerButtons"
:layoutButtons="layoutButtons"
/>
</template>
<script>
export default {
name: 'DynamicDetail',
data () {
return {}
return {
componentRenderers: [
{
tabCode: 'F_BASIC',
columnName: 'test',
renderer: (field, getRecord) => {
console.log('------->>>', field, getRecord())
return <span>328388</span>
},
},
],
headerButtons: [
{
description: '复制',
name: "copy",
},
{
description: '新建',
name: "new",
},
],
layoutButtons: {
submit: this.handleHeaderSubmit,
remove: this.handleDelete,
copy: this.handleCopyClick
}
// layoutButtons: [
// {
// name: 'submit',
// clickFunction: () => {
// this.handleHeaderSubmit()
// },
// },
// {
// name: 'remove',
// clickFunction: () => {
// this.handleDelete()
// },
// },
// {
// name: 'copy',
// clickFunction: () => {
// this.handleCopyClick()
// },
// },
// ],
}
},
methods: {
handleCopyClick() {
console.log('复制')
},
handleHeaderSubmit() {
console.log("点击提交")
},
handleDelete() {
console.log("点击删除")
},
handleNew() {
console.log("点击新建")
}
},
methods: {},
}
</script>
......
src/pages/testDynamic.vue
View file @ 4490ce2f
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 11:02:22
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-13 10:51:44
* @LastEditTime: 2024-08-14 16:22:37
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -26,7 +26,7 @@ export default {
{
tabCode: 'G_QUERY_RESULT',
columnName: 'projectName',
renderer: (record) => {
renderer: (record, index) => {
return <span style="color: #3789ff" onClick={() => this.toDetail(record)}>{record.projectName} <van-icon name="arrow" /></span>
},
},
......
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