Skip to content

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

页面跳转刷新数据、 提供数据给外层页面使用

parent c07e8f2a
Show whitespace changes
Inline Side-by-side
Showing with 357 additions and 792 deletions
src/Dynamic/ConfigRenderComponent/DForm/FormItem/DDate.vue
View file @ ad09e035
......@@ -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-15 14:29:10
* @LastEditTime: 2024-08-15 17:01:36
* @Version: 1.0.0
* @Description: 动态渲染-日期组件
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -63,6 +63,7 @@
<script>
import {Cell, DatetimePicker, Popup, Icon, Field, Picker} from 'vant';
import DLabel from './DLabel';
import {dateFormat} from '../../../utils/utils';
export default {
name: 'DDate',
......@@ -163,7 +164,7 @@ export default {
},
dateParse(val) {
if (val) {
const {value, description} = this.dateFormat(new Date(val));
const {value, description} = dateFormat(this.type, new Date(val));
this.currentValue = value;
this.description = description;
} else {
......@@ -200,7 +201,7 @@ export default {
this.currentValue = `${date}-00-00`;
this.description = date;
} else {
const {value, description} = this.dateFormat(date);
const {value, description} = dateFormat(this.type, date);
this.currentValue = value;
this.description = description;
}
......@@ -211,38 +212,38 @@ export default {
this.$emit('input', this.currentValue);
this.$emit('change', this.currentValue);
},
dateFormat(time) { // 时间格式化 2019-09-08
let year = time.getFullYear();
let month = this.suppField(time.getMonth() + 1);
let day = this.suppField(time.getDate());
let hour = this.suppField(time.getHours());
let minutes = this.suppField(time.getMinutes());
let seconds = this.suppField(time.getSeconds());
let dateDescription = `${year}-${month}-${day}`;
let dateValue = `${year}-${month}-${day}`;
if (['time', 'dateTime'].includes(this.type)) {
dateDescription = `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;
dateValue = dateDescription;
} else if (this.type === 'month') {
dateDescription = `${year}-${month}`;
dateValue = `${year}-${month}-01`;
} else if (this.type === 'year') {
dateDescription = `${year}`;
dateValue = `${year}-00-00`;
} else if (this.type === 'week') {
const firstDayOfYear = new Date(year, 0, 1); // 获取当年的第一天
const pastDaysOfYear = (time - firstDayOfYear) / 86400000; // 计算已经过去的天数
const weekNum = Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7); // 计算当前日期是第几周
dateDescription = `${year}-${weekNum}周`;
}
return {
value: dateValue,
description: dateDescription
}
},
suppField(num) { // 补充显示
return `${num < 10 ? `0`: ''}${num}`;
}
// dateFormat(type, time) { // 时间格式化 2019-09-08
// let year = time.getFullYear();
// let month = this.suppField(time.getMonth() + 1);
// let day = this.suppField(time.getDate());
// let hour = this.suppField(time.getHours());
// let minutes = this.suppField(time.getMinutes());
// let seconds = this.suppField(time.getSeconds());
// let dateDescription = `${year}-${month}-${day}`;
// let dateValue = `${year}-${month}-${day}`;
// if (['time', 'dateTime'].includes(this.type)) {
// dateDescription = `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;
// dateValue = dateDescription;
// } else if (type === 'month') {
// dateDescription = `${year}-${month}`;
// dateValue = `${year}-${month}-01`;
// } else if (type === 'year') {
// dateDescription = `${year}`;
// dateValue = `${year}-00-00`;
// } else if (type === 'week') {
// const firstDayOfYear = new Date(year, 0, 1); // 获取当年的第一天
// const pastDaysOfYear = (time - firstDayOfYear) / 86400000; // 计算已经过去的天数
// const weekNum = Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7); // 计算当前日期是第几周
// dateDescription = `${year}-${weekNum}周`;
// }
// return {
// value: dateValue,
// description: dateDescription
// }
// },
// suppField(num) { // 补充显示
// return `${num < 10 ? `0`: ''}${num}`;
// }
},
}
</script>
......
src/Dynamic/ConfigRenderComponent/DForm/index.vue
View file @ ad09e035
......@@ -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-15 12:04:42
* @LastEditTime: 2024-08-15 17:48:20
* @Version: 1.0.0
* @Description: 表单渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -183,6 +183,7 @@ export default {
default: () => []
}
},
inject: ['dynamicInfo', 'addFormRef', 'setDataSetData', 'dataLoadHandle'],
data () {
return {
fieldComponents: ['TextField',"TextArea", "NumberField", "EmailField","CentField"],
......@@ -196,13 +197,10 @@ export default {
status: 'add',
}
},
inject: ['dynamicInfo', 'addFormRef', 'setDataSetData'],
mounted() {
console.log('D-form', this.fields)
this.init();
},
activated() {
console.log('D-form-activated', this.fields)
this.init();
},
methods: {
......@@ -226,8 +224,10 @@ export default {
if (this.formType === 'normal') {
if (this.tabInfo.readUrl) {
// console.log('D-form-activated', this.tabInfo.readUrl, JSON.stringify(this.queryParams))
const res = await hlsHttp.get(this.tabInfo.readUrl, this.queryParams)
this.fieldsObj = res.content.length ? res.content[0] : {};
this.dataLoadHandle(this.fieldsObj, this.tabInfo.tabCode); // 数据查询后的回调
this.addFormRef(this, this.tabInfo.tabCode); //正常表单保存表单组件实例，供页面整体保存时使用
this.setDataSetData(this.tabInfo.tabCode, {...this.fieldsObj}); // 保存一份原始数据
this.status = 'update';
......@@ -241,7 +241,6 @@ export default {
this.originFields.forEach(item => {
if (item.validationTypeDisplay === 'CentField' && this.fieldsObj[item.columnName]) {
this.fieldsObj[item.columnName] = this.fieldsObj[item.columnName] * 100;
console.log('CentField', this.fieldsObj[item.columnName])
}
if (item.bind && this.fieldsObj[item.columnName]) { // 主要处理lov绑定字段
const bindField = item.bind.split('.');
......@@ -259,7 +258,6 @@ export default {
}
})
this.originFieldsObj = {...this.fieldsObj};
console.log('this.fieldsObj', this.fieldsObj)
},
getInputType(type) {
if (type === 'TextArea') {
......
src/Dynamic/ConfigRenderComponent/DTable/DTableTd.jsx
View file @ ad09e035
......@@ -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-14 16:21:18
* @LastEditTime: 2024-08-15 17:06:59
* @Version: 1.0.0
* @Description: 表格列渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -41,7 +41,7 @@ const DTableTd = {
methods: {
columnValue() {
if (['Lov', 'Select'].includes(this.typeDisplay)) {
return this.record[`${this.columnName}Name`];
return this.record[`${this.columnName}Name`] || this.record[`${this.columnName}N`] || this.record[this.columnName];
} else {
return this.record[this.columnName];
}
......
src/Dynamic/ConfigRenderComponent/DTable/index.vue
View file @ ad09e035
......@@ -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:22:00
* @LastEditTime: 2024-08-15 17:42:48
* @Version: 1.0.0
* @Description: 表格渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -47,6 +47,9 @@
<template v-if="booleanType.includes(column.validationTypeDisplay)">
{{booleanDisplay[item[column.columnName]] || '--'}}
</template>
<template v-if="dateType[column.dataType]">
{{dateDescription(dateType[column.dataType], item[column.columnName]) || '--'}}
</template>
<!-- {{(column.validationTypeDisplay === 'Switch' ? (item[column.columnName] ? '是' : '否' ) : item[column.columnName]) || '--'}} -->
</d-table-td>
</div>
......@@ -88,7 +91,7 @@ import DForm from '../DForm';
import DTableTd from './DTableTd.jsx';
import { Checkbox, CheckboxGroup, Popup, Button, Icon, Toast } from 'vant';
import hlsHttp from '../../utils/hlsHttp';
import {getDataSetName, getOrganizationId} from '../../utils/utils';
import {getDataSetName, getOrganizationId, dateFormat} from '../../utils/utils';
import EventBus from '../../utils/eventBus';
export default {
......@@ -122,9 +125,17 @@ export default {
default: () => [],
}
},
inject: ['dynamicInfo'],
inject: ['dynamicInfo', 'dataLoadHandle'],
data () {
return {
dateType: {
dateTime: 'datetime',
time: 'datetime',
month: 'year-month',
year: 'year-month',
week: 'date',
date: 'date',
},
booleanType: ['Switch', 'Radio', 'CheckBox'],
booleanDisplay: {
1: '是',
......@@ -145,11 +156,9 @@ export default {
}
},
mounted() {
this.dynamicConfigInfo = this.dynamicInfo();
this.init();
},
activated() {
this.dynamicConfigInfo = this.dynamicInfo();
this.init();
},
deactivated() {
......@@ -160,6 +169,8 @@ export default {
},
methods: {
init() {
this.$nextTick(() => {
this.dynamicConfigInfo = this.dynamicInfo();
if (this.tabInfo.queryTabCode) {
EventBus.$on('tableQuery', (data, queryTabCode) => {
if (this.tabInfo.queryTabCode === queryTabCode) {
......@@ -177,6 +188,7 @@ export default {
} else {
this.showEdit = this.columns.some(o => !o.readOnly); // 存在可输入则显示编辑
}
})
},
refresh() {
this.page = 0;
......@@ -184,7 +196,6 @@ export default {
this.getList();
},
getList() {
// console.log('D-Table', this.columns)
const params = {
page: this.page,
size: this.size,
......@@ -193,27 +204,33 @@ export default {
}
hlsHttp.get(this.tabInfo.readUrl, params).then(res => {
this.tableData = this.tableData.concat(res.content || []);
this.dataLoadHandle(this.tableData, this.tabInfo.tabCode)
// EventBus.$on('dataLoad', this.tableData, this.tabInfo.tabCode); // 将查询的数据
if (res.totalElements > this.tableData.length) {
this.page = this.page + 1;
this.$refs.scroll.update(false)
} else {
this.$refs.scroll.update(true)
}
})
},
showRecord(res, index) {
if (this.tabInfo.createUrl) {
this.record = {...res};
this.recordIndex = index;
this.visible = true;
// if (this.tabInfo.createUrl) {
// this.record = {...res};
// this.recordIndex = index;
// this.visible = true;
// console.log('this.record', this.record)
// } else {
// Toast.fail('保存接口未配置，请检查配置');
// }
} else {
Toast.fail('保存接口未配置，请检查配置');
}
},
dateDescription(type, val) {
if (val) {
const res = dateFormat(type, new Date(val));
return res.description;
}
return val;
},
async saveRecord() {
const {allValues} = await this.$refs.dformRef.validate();
......
src/Dynamic/ConfigRenderComponent/DTitle/index.vue
View file @ ad09e035
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-02 15:32:36
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-14 09:19:09
* @LastEditTime: 2024-08-15 16:00:59
* @Version: 1.0.0
* @Description: 组件头部渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -86,13 +86,15 @@ export default {
mounted() {
this.init();
},
// activated() {
// this.init();
// },
methods: {
init() {
if(this.tabButtons.length > this.num) {
this.defaultBtns = this.tabButtons.slice(0, this.num);
this.hideBtns = this.tabButtons.slice(this.num, this.tabButtons.length);
this.actions = this.hideBtns.map(o => ({...o, text: o.description}));
console.log('this.actions', this.actions)
} else {
this.defaultBtns = [...this.tabButtons];
}
......
src/Dynamic/ConfigRenderComponent/LayoutBuilder.jsx
View file @ ad09e035
......@@ -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-14 16:35:48
* @LastEditTime: 2024-08-15 17:34:58
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -96,19 +96,6 @@ export class ColumnBuilder extends BaseBuilder {
getCustomizedRenderer(columnName) {
const currentRenderers = this.getCurrentRenderers(columnName, this.componentRenderers);
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 };
}
......@@ -216,115 +203,115 @@ export class ColumnBuilder extends BaseBuilder {
/**
* 表格、表单按钮建造类
*/
export class TabButtonBuilder extends BaseBuilder {
constructor() {
super();
/**
* 组件级按钮
* @type {Array.<{name: string, description: string}>}
*/
this.tabButtons = [];
/**
*
* @type {Array.<{tabCode: string, layoutCode: string, name: string, clickFunction: Function}>}
*/
this.componentButtons = [];
/**
* 组件code
* @type {string}
*/
this.tabCode = '';
this.layoutCode = '';
/**
* 组件类型
* @type {string}
*/
this.type = '';
/**
* 是否只读
* @type {boolean}
*/
this.readOnly = false;
this.setBtnRef = null;
this.createElement = () => {};
this.init();
}
/**
* 获取点击事件
* @param {string} name - 名称
* @returns {Function} 点击事件
*/
getClickFunction(name) {
if (this.type === 'Form') {
switch (name) {
case 'query':
console.log('表单查询')
break;
case 'reset':
console.log('表单重置')
break;
default:
}
} else if (this.type === 'Table') {
switch (name) {
case 'create':
console.log('创建')
break;
case 'query':
console.log('查询')
break;
case 'export':
console.log('导出')
break;
case 'remove':
console.log('删除')
break;
case 'save':
console.log('保存')
break;
default:
}
}
}
build() {
return this.tabButtons.map(btn => {
return this.createElement(
'h-button', // 元素类型
{ // 属性对象
props: {
type: "primary",
key: btn.name
},
// on: {
// click: this.test,
// test2: function(){
// console.log('22222')
// }
// },
nativeOn: {
click: () => this.getClickFunction(btn.name)
}
},
[ // 子元素数组
btn.description, // 文本内容
]
)
})
}
}
// export class TabButtonBuilder extends BaseBuilder {
// constructor() {
// super();
// /**
// * 组件级按钮
// * @type {Array.<{name: string, description: string}>}
// */
// this.tabButtons = [];
// /**
// *
// * @type {Array.<{tabCode: string, layoutCode: string, name: string, clickFunction: Function}>}
// */
// this.componentButtons = [];
// /**
// * 组件code
// * @type {string}
// */
// this.tabCode = '';
// this.layoutCode = '';
// /**
// * 组件类型
// * @type {string}
// */
// this.type = '';
// /**
// * 是否只读
// * @type {boolean}
// */
// this.readOnly = false;
// this.setBtnRef = null;
// this.createElement = () => {};
// this.init();
// }
// /**
// * 获取点击事件
// * @param {string} name - 名称
// * @returns {Function} 点击事件
// */
// getClickFunction(name) {
// if (this.type === 'Form') {
// switch (name) {
// case 'query':
// console.log('表单查询')
// break;
// case 'reset':
// console.log('表单重置')
// break;
// default:
// }
// } else if (this.type === 'Table') {
// switch (name) {
// case 'create':
// console.log('创建')
// break;
// case 'query':
// console.log('查询')
// break;
// case 'export':
// console.log('导出')
// break;
// case 'remove':
// console.log('删除')
// break;
// case 'save':
// console.log('保存')
// break;
// default:
// }
// }
// }
// build() {
// return this.tabButtons.map(btn => {
// return this.createElement(
// 'h-button', // 元素类型
// { // 属性对象
// props: {
// type: "primary",
// key: btn.name
// },
// // on: {
// // click: this.test,
// // test2: function(){
// // console.log('22222')
// // }
// // },
// nativeOn: {
// click: () => this.getClickFunction(btn.name)
// }
// },
// [ // 子元素数组
// btn.description, // 文本内容
// ]
// )
// })
// }
// }
class BaseComponentBuilder extends BaseBuilder {
constructor() {
......@@ -371,7 +358,9 @@ class BaseComponentBuilder extends BaseBuilder {
this.routeParams = {}; // 路由信息
this.createElement = () => {}
this.createElement = () => {};
this.parentProps = {};
super.init();
}
......@@ -443,50 +432,6 @@ class BaseComponentBuilder extends BaseBuilder {
return columns;
}
/**
* 包裹组件
* @param tab
* @param tabType
* @param cols
* @returns {*}
*/
// eslint-disable-next-line no-unused-vars
// wrapTab(tab, tabType, cols) {
// if (tabType === 'Form') {
// const {dataSet, tabCode, layoutCode} = tab.props;
// const {cascadeKey} = this;
// const Cmp = observer(
// class extends React.Component {
// render() {
// // eslint-disable-next-line no-shadow
// const {dataSet: ds, setTabRef, tabCode, layoutCode} = this.props;
// const refKey = `${parseCode(layoutCode)}_${parseCode(tabCode)}_formRef`;
// return cascadeKey && ds.current && !isNil(ds.current.get(cascadeKey)) ? (
// <Eva.Form
// setRef={(ref) => {
// setTabRef({[refKey]: ref})
// }}
// {...tab.props}
// >{cols[ds.current.get(cascadeKey)] || cols.DEFAULT}
// </Eva.Form>
// ) : (
// <Eva.Form
// setRef={(ref) => {
// setTabRef({[refKey]: ref})
// }}
// {...tab.props}
// >{cols.DEFAULT}
// </Eva.Form>
// );
// }
// }
// );
// return <Cmp dataSet={dataSet} setTabRef={this.setTabRef} tabCode={tabCode} layoutCode={layoutCode} />;
// }
// return <>{tab}</>;
// }
urlHandler(url) {
const allInfo = { ...getCurrentUser(), ...this.routeParams };
if (url === undefined || url === null) {
......@@ -539,32 +484,6 @@ class BaseComponentBuilder extends BaseBuilder {
},
[]
);
// return this.wrapTab(<div>table</div>, this.tabType, this.loadTableColumns(this.columns))
// props = {
// ...props,
// dataSet: this.dataSet,
// dataSetName: this.dataSet == null ? '' : this.dataSet.name,
// border: true,
// height: undefined,
// style: props.height ? {height: props.height} : undefined,
// buttons: this.buttons,
// id: undefined,
// header: this.getHeader(props),
// showFold: props.showFold === 'Y',
// defaultFold: props.defaultFold === 'Y',
// ...this.loadTableProps(props),
// };
// return this.wrapTab(
// <Tab
// {...props}
// ref={ref => {
// this.setTabRef({[refKey]: ref})
// }}
// >{this.loadTableColumns(this.columns)}
// </Tab>,
// this.tabType,
// this.loadTableColumns(this.columns)
// );
case 'Form':
// 不存在baseTable意味着是查询组件 只有查询组件有按钮
const { cascadeKey } = this;
......@@ -598,17 +517,13 @@ class BaseComponentBuilder extends BaseBuilder {
}
// 处理嵌入布局
case 'Layout':
// const components = this.staticComponents.filter(item => item.tabCode === this.tabCode);
// if (components && components.length) {
// const StaticComponent = components[0].component
// return React.cloneElement(StaticComponent)
// }
// return <></>
return this.createElement(
'div',
{},
['嵌入布局']
)
const components = this.staticComponents.filter(item => item.tabCode === this.tabCode);
if (components && components.length) {
const StaticComponent = components[0].component;
return StaticComponent();
}
return null;
default:
throw new Error('Unsupported tab type');
}
......
src/Dynamic/ConfigRenderComponent/QueryForm/index.vue
View file @ ad09e035
......@@ -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-13 17:52:35
* @LastEditTime: 2024-08-15 17:07:36
* @Version: 1.0.0
* @Description: 查询表单渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -81,9 +81,12 @@ export default {
mounted() {
this.configDatas = this.dynamicInfo().config;
},
activated() {
this.configDatas = this.dynamicInfo().config;
},
methods: {
onSearch() { // 搜索
console.log('souusole')
// console.log('souusole')
},
showForm() {
this.show = true;
......@@ -103,6 +106,7 @@ export default {
values[key] = formValues[key];
}
});
delete values._status;
EventBus.$emit('tableQuery', values, this.tabInfo.tabCode);
this.show = false;
},
......
src/Dynamic/ConfigRenderComponent/index.jsx
View file @ ad09e035
......@@ -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-13 16:43:34
* @LastEditTime: 2024-08-15 16:44:45
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -10,7 +10,7 @@
import Vue from 'vue';
import {Button} from 'vant'
import layouts from '../layout/index.js';
import {ColumnBuilder, TabButtonBuilder, ComponentBuilder} from './LayoutBuilder.jsx'
import {ColumnBuilder, ComponentBuilder} from './LayoutBuilder.jsx'
import QueryForm from './QueryForm';
import DTable from './DTable';
import DForm from './DForm';
......@@ -53,13 +53,9 @@ const ConfigRenderComponent = {
},
mounted() {
this.configInfo = this.dynamicInfo().config;
console.log('this.componentRenderers', this.componentRenderers, this.dynamicInfo())
console.log(this.$refs);
},
activated () {
this.configInfo = this.dynamicInfo().config;
console.log('激活', this.dynamicInfo().queryParams);
},
methods: {
getTabs(layoutTabs, state, layoutCode, createElement) {
......@@ -67,17 +63,6 @@ const ConfigRenderComponent = {
const parentTabCode = layoutTab.tabCode;
// 布局类型
const layoutName = layoutTab.tabType;
// 静态嵌入布局
if (layoutName === 'Layout' && layoutTab.tabStatusType === 'STATIC') {
const currentStaticLayoutTabs = this.staticLayoutTabs.filter(
value => value.tabCode === parentTabCode
);
if (currentStaticLayoutTabs.length > 0 && currentStaticLayoutTabs[0].component) {
const StaticComponent = currentStaticLayoutTabs[0].component;
return [<StaticComponent {...this} />];
}
return [];
}
if (!layoutTab.childrenTabs || layoutTab.childrenTabs.length === 0) {
return [];
}
......@@ -86,7 +71,6 @@ const ConfigRenderComponent = {
let components;
if (this.layoutComponents.some(item => layoutTab.childrenTabs[0].tabType === item)) {
layoutTab.childrenTabs.forEach(childrenTab => {
// componentNames.push(childrenTab.description);
componentNames.push({code: childrenTab.tabCode, label: childrenTab.description})
});
components = this.getTabs(layoutTab.childrenTabs, state, layoutCode, createElement);
......@@ -95,20 +79,16 @@ const ConfigRenderComponent = {
const {
tabType,
tabCode,
baseTable,
parentTable,
tabFields,
tabButtons,
description
} = childrenTab;
// componentNames.push(description);
componentNames.push({code: tabCode, label: description});
const columns = new ColumnBuilder()
.withFields(tabFields)
.withType(tabType)
.withTabCode(tabCode)
// .withTableFooterRenderers(tableFooterRenderers)
.withLayoutCode(childrenTab.layoutCode || layoutCode)
.withParentTabCode(parentTabCode)
.withComponentRenderers(this.componentRenderers)
......@@ -117,21 +97,16 @@ const ConfigRenderComponent = {
const findField = find(tabFields, { formatCascadeFlag: 'Y' });
return new ComponentBuilder()
// .withDataSet(dataSet)
// .withHistoryDataSet(dataSets[`history_${dataSetName}`])
// .withDifference(differenceMap[dataSetName])
.withCascadeKey(findField && findField.columnName)
// .withHistoryButtonName(historyButtonName)
// .withCurrentButtonName(currentButtonName)
.withRouteParams(this.queryParams)
.withCreateElement(createElement)
.withTabType(tabType)
.withColumns(columns)
// .withButtons(buttons)
.withLayoutCode(childrenTab.layoutCode || layoutCode)
.withTabCode(childrenTab.tabCode)
.withProps(childrenTab)
// .withComponentHeaderExtras(componentHeaderExtras)
.withStaticComponents(this.staticLayoutTabs)
.withParentProps(this)
.build();
});
}
......@@ -146,7 +121,7 @@ const ConfigRenderComponent = {
// 为了弥补缺少的实例
// 提供第二个参数作为上下文
render: function (h, context) {
console.log('context', context, this.configInfo)
// console.log('context', context, this.configInfo)
const { layoutCode, layoutTabs = [] } = this.configInfo;
return <div style="height: 100%">{layoutTabs.length ? this.getTabs(layoutTabs, this, layoutCode, h) : null}</div>;
}
......
src/Dynamic/index.vue
View file @ ad09e035
......@@ -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-15 10:48:44
* @LastEditTime: 2024-08-15 17:42:29
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -17,8 +17,9 @@
<h-content>
<van-loading size="24px" vertical v-if="loading">加载中...</van-loading>
<config-render-component
v-if="configDatas.id"
v-if="configDatas.id && !loading"
:componentRenderers="componentRenderers"
:staticLayoutTabs="staticLayoutTabs"
/>
</h-content>
<layout-buttons
......@@ -35,8 +36,7 @@ import LayoutButtons from './LayoutButtons';
import ConfigRenderComponent from './ConfigRenderComponent/index.jsx';
import {query, queryRoute} from './service'
import './index.less'
import { getOrganizationId } from './utils/utils';
import Constants from './utils/Constants';
import EventBus from './utils/eventBus';
export default {
name: 'Dynamic',
......@@ -65,6 +65,18 @@ export default {
layoutButtons: { // 布局按钮方法
type: Object,
default: () => ({})
},
staticLayoutTabs: { // 静态布局内容
type: Array,
default: () => []
},
configLoadHandle: {
type: Function,
default: () => {}
},
dataLoadHandle: {
type: Function,
default: () => {}
}
},
data () {
......@@ -82,13 +94,8 @@ export default {
return {
addFormRef: this.addFormRef,
setDataSetData: this.setDataSetData,
dynamicInfo: () => ({ // 配置的所有信息
layoutCode: this.layoutCode,
config: this.configDatas,
dataSetObject: this.dataSetObject,
queryParams: this.qpara,
componentRenderers: this.componentRenderers
})
dataLoadHandle: this.dataLoadHandle,
dynamicInfo: this.getDynamicInfo
};
},
created() {
......@@ -104,6 +111,7 @@ export default {
...this.$route.query
}
console.log('activated', this.params)
this.layoutCodeQuery();
},
beforeMount() {
this.layoutCodeQuery();
......@@ -118,16 +126,19 @@ export default {
if (this.params.readOnly === "YES" || this.params.readOnly == 'true') {
readOnly = true
}
// if (disabled) {
// readOnly = disabled
// }
this.qpara = {
const qpara = {
...this.params,
readOnly,
};
// if (this.store.config.datas !== null && isEqual(this.qpara, this.store.config.param)) {
// return;
// }
}
if (JSON.stringify(this.qpara) === JSON.stringify(qpara)) {
this.loading = false;
return;
}
this.qpara = qpara;
let res = {datas: {}, params: {}}
if (this.layoutCode) {
res = await query(this.layoutCode, this.qpara);
......@@ -138,7 +149,8 @@ export default {
this.configDatas = {...res.datas};
this.params = res.params;
this.dataSetObject = this.transformDateSetTree(res.datas.dataSetsTree);
// this.getDataSets(res.datas.dataSetsTree)
this.configLoadHandle(this.getDynamicInfo());
},
transformDateSetTree(tree) {
let obj = {};
......@@ -157,7 +169,16 @@ export default {
setDataSetData(tabCode, data) {
this.dataSetObject[tabCode].data = data;
},
getDynamicInfo() {
return { // 配置的所有信息
layoutCode: this.layoutCode, // 布局编码
config: this.configDatas, // 页面配置信息
dataSetObject: this.dataSetObject, // 页面datasetTree的转换，方便快速找出datasetname
queryParams: this.qpara, // 页面查询参数
EventBus: EventBus
// componentRenderers: this.componentRenderers // 组件渲染内容
}
}
},
}
</script>
......
src/Dynamic/layout/AbstractLayout/index.js deleted 100644 → 0
View file @ c07e8f2a
/*
* @Description: 布局抽象类
* @Author: huangtianyang
* @Date: 2020-01-13 15:56
*/
import { Bind } from 'lodash-decorators';
import React, { Component } from 'react';
/**
* @extends {Component}
* @ReactProps {React.ReactElement} components
*/
class AbstractLayout extends Component {
constructor(props) {
super(props);
this.counter = 0;
}
/**
* 包装渲染布局下组件
* @param {Array.<React.ReactElement>} components 组件
*/
@Bind()
packageContents(components) {
return components;
}
@Bind()
getCounter() {
this.counter += 1;
return this.counter;
}
/**
* 获取框架
* @param {*} content
* @returns {React.ReactElement}
*/
@Bind()
getLayoutFrame(content) {
return <div>{content}</div>;
}
render() {
const { components } = this.props;
return <>{this.getLayoutFrame(this.packageContents(components))}</>;
}
}
export default AbstractLayout;
src/Dynamic/layout/AbstractLayout/index.jsx deleted 100644 → 0
View file @ c07e8f2a
/*
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 17:19:32
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-07-30 17:34:57
* @Version: 1.0.0
* @Description: 布局抽象类
* @Copyright: Copyright (c) 2021, Hand-RongJing
*/
import Vue from 'vue';
import { Fragment } from 'vue-fragment';
const AbstractLayout = {
// functional: true,
// Props 是可选的
props: {
components: { // 是否需要返回键
type: Boolean,
default: true
},
staticLayoutTabs: {
type: Array,
default: () => [],
}
},
data () {
return {
counter: 0, // 配置信息
}
},
methods: {
/**
* 包装渲染布局下组件
* @param {Array.<VueElement>} components 组件
*/
packageContents(components) {
return components;
},
getCounter() {
this.counter += 1;
return this.counter;
},
/**
* 获取框架
* @param {*} content
* @returns {Element}
*/
getLayoutFrame(content) {
return <div>{content}</div>;
}
},
// 为了弥补缺少的实例
// 提供第二个参数作为上下文
render: function (h, context) {
return <div></div>
return <Fragment>{this.getLayoutFrame(this.packageContents(components))}</Fragment>;
}
};
export default AbstractLayout;
src/Dynamic/layout/TabPane/index.js deleted 100644 → 0
View file @ c07e8f2a
/*
* @Description: In User Settings Edit
* @Author: gaoyang
* @Date: 2020-05-26 15:57
*/
import AbstractLayout from '../AbstractLayout';
export default class TabPane extends AbstractLayout {
/**
* @override
* @param {React.ReactElement} content
* @returns {*}
*/
getLayoutFrame(content) {
return content;
}
/**
* @override
* @param components 组件
* @returns {*[]}
*/
packageContents(components) {
return components;
}
}
src/Dynamic/layout/Tabs/index.jsx
View file @ ad09e035
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-02 11:06:33
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-06 12:03:35
* @LastEditTime: 2024-08-15 16:44:04
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......
src/Dynamic/layout/components/NavigationBar/NavigationContent.js deleted 100644 → 0
View file @ c07e8f2a
/*
* @Description: In User Settings Edit
* @Author: huangtianyang
* @Date: 2020-03-09 12:16
*/
import { Bind } from 'lodash-decorators';
import { debounce } from 'lodash';
import NavigationContentItem from './NavigationContentItem';
import React from 'react';
import classNames from 'classnames';
import styles from './index.less';
/**
*
* @param components {Array,<React.ReactElement>} -组件数组
* @param componentNames {Array.<String>} -组件描述名
* @returns {*}
* @constructor
*/
class NavigationContent extends React.Component {
constructor(props) {
super(props);
this.state = {
activeIndex: 0,
windowHeight: window.innerHeight
};
this.ref = React.createRef();
this.scrollTops = [];
this.nodes = [];
this.content = null;
this.disableScrollHandler = false;
}
@Bind()
resizeHandler() {
if (window.parent === window.self) {
this.setState({ windowHeight: window.innerHeight });
}
}
componentDidMount() {
window.addEventListener('resize', this.resizeHandler);
const node = this.ref.current;
if (node) {
const { children } = node;
this.content = node;
for (let i = 0; i < children.length; i++) {
this.nodes.push(children[i]);
this.scrollTops.push(children[i].offsetTop - node.offsetTop);
}
}
}
componentWillUnmount() {
window.removeEventListener('resize', this.resizeHandler);
}
@Bind()
wheelHandler() {
this.disableScrollHandler = false;
}
@Bind()
getIndex(index) {
this.setState({ activeIndex: index });
}
@Bind()
getScrollTop(index) {
return this.nodes[index].offsetTop - this.content.offsetTop;
}
render() {
const { windowHeight, activeIndex } = this.state;
const { componentNames, components } = this.props;
return (
<div
className={classNames(styles['navigation-content'])}
style={{ maxHeight: windowHeight - 210 }}
>
<div
ref={this.ref}
onWheel={this.wheelHandler}
onScroll={event => {
if (!this.disableScrollHandler) {
debounce(e => {
e.persist();
const { scrollTop } = this.ref.current;
for (let i = 0; i < this.scrollTops.length; i++) {
const minTop = this.scrollTops[i];
const maxTop = this.scrollTops[i + 1];
if (
(scrollTop >= minTop && maxTop && scrollTop < maxTop) ||
(scrollTop >= minTop && !maxTop)
) {
this.setState({ activeIndex: i });
}
}
}, 100)(event);
}
}}
className={styles.content}
>
{components.map((component, index) => {
return (
<NavigationContentItem
parentRef={this.ref}
key={
/* eslint-disable-next-line react/no-array-index-key */
index
}
component={component}
index={index}
getIndex={() => this.getIndex(index)}
/>
);
})}
</div>
<div className={styles.menus}>
{componentNames.map((name, index) => {
return (
<div
key={name}
onClick={() => {
// eslint-disable-next-line no-undef
if (this.ref.current) {
this.ref.current.scrollTop = this.getScrollTop(index);
this.disableScrollHandler = true;
this.setState({ activeIndex: index });
}
}}
className={classNames(styles.menu, index === activeIndex ? styles.active : null)}
>
<div className={classNames(styles.menuCro, index === activeIndex ? styles.active : null,index===componentNames.length-1?styles.menuCroLast:null)} />
<span>{name}</span>
</div>
);
})}
</div>
</div>
);
}
}
export default NavigationContent;
src/Dynamic/layout/components/NavigationBar/NavigationContentItem.js deleted 100644 → 0
View file @ c07e8f2a
/*
* @Description: In User Settings Edit
* @Author: huangtianyang
* @Date: 2020-03-09 22:21
*/
import React from 'react';
import classNames from 'classnames';
import styles from './index.less';
const NavigationContentItem = ({ component, index, getIndex }) => {
return (
<div
className={classNames(styles.item)}
onClick={() => {
getIndex(index);
}}
>
{component}
</div>
);
};
export default NavigationContentItem;
src/Dynamic/layout/components/NavigationBar/index.js deleted 100644 → 0
View file @ c07e8f2a
/*
* @Description: Server Config
* @Author: huangtianyang
* @Date: 2020-03-09 12:11
*/
import NavigationContent from './NavigationContent';
import React from 'react';
import styles from './index.less';
const NavigationBar = ({ components, componentNames }) => {
return (
<div className={styles['hls-navigation-bar']}>
<NavigationContent components={components} componentNames={componentNames} />
</div>
);
};
export default NavigationBar;
src/Dynamic/layout/components/NavigationBar/index.less deleted 100644 → 0
View file @ c07e8f2a
@import '~leaf-ui/lib/style/themes/default.less';
.hls-navigation-bar {
.navigation-content {
display: flex;
margin: 8px 0 0 0;
.menus {
flex-shrink: 0;
height: 100%;
background: #fff;
overflow: auto;
padding: 0 5px 0 10px;
width: 150px;
.menu {
height: 35px;
line-height: 35px;
margin: 4px 6px;
cursor: pointer;
font-family: @font-family;
font-weight: bold;
font-size: 13px;
color: #6a6a6a;
letter-spacing: 0.59px;
text-align: center;
display: flex;
align-items: center;
&.active {
color: @leaf-primary-color;
border-radius: 4px;
}
span{
margin-left: 10px;
width: 100px;
max-width: 100px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
}
}
.menuCro {
width: 10px;
height: 10px;
border-radius: 10px;
border: 2px solid rgba(0,0,0,.2);
position: relative;
&::after {
position: absolute;
content: '';
height: 30px;
border: 1px solid rgba(0,0,0,.2);
margin-top: 8px;
margin-left: -1px;
}
&.active {
border: 2px solid @leaf-primary-color;
}
}
.menuCroLast{
&::after{
position: absolute;
content: '';
height: 0;
border: 0;
}
}
}
.content {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: 0 8px;
.item {
margin: 5px 0;
}
}
}
}
src/Dynamic/utils/utils.js
View file @ ad09e035
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 14:39:47
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-15 11:48:09
* @LastEditTime: 2024-08-15 17:02:23
* @Version: 1.0.0
* @Description: 工具类
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -33,35 +33,48 @@ const getDataSetName = (config, tabCode) => {
return config[tabCode].dataSetName || '';
};
const suppField = (num) => { // 补充显示
return `${num < 10 ? `0`: ''}${num}`;
}
/**
* 判断对象为空
* @param v
* @return {boolean}
* 日期格式话
* @param {*} type 日期类型
* @param {*} time date类型
* @returns
*/
const isEmpty = (v) => {
if (typeof v === 'undefined') {
return true
}
if (v === undefined || v === 'undefined' || v === null || v === '' || v === 'null') {
return true
}
const dateFormat = (type, time) => { // 时间格式化 2019-09-08
let year = time.getFullYear();
let month = suppField(time.getMonth() + 1);
let day = suppField(time.getDate());
let hour = suppField(time.getHours());
let minutes = suppField(time.getMinutes());
let seconds = suppField(time.getSeconds());
let dateDescription = `${year}-${month}-${day}`;
let dateValue = `${year}-${month}-${day}`;
if (['time', 'dateTime'].includes(type)) {
dateDescription = `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;
dateValue = dateDescription;
switch (typeof v) {
case 'string' :
if (v.trim().length === 0) {
return true
}
break
case 'boolean' :
if (!v) {
return true
} else if (type === 'month') { // 月
dateDescription = `${year}-${month}`;
dateValue = `${year}-${month}-01`;
} else if (type === 'year') { // 年
dateDescription = `${year}`;
dateValue = `${year}-00-00`;
} else if (type === 'week') { // 周
const firstDayOfYear = new Date(year, 0, 1); // 获取当年的第一天
const pastDaysOfYear = (time - firstDayOfYear) / 86400000; // 计算已经过去的天数
const weekNum = Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7); // 计算当前日期是第几周
dateDescription = `${year}-${weekNum}周`;
}
break
case 'object' :
return undefined !== v.length && v.length === 0
return {
value: dateValue,
description: dateDescription
}
return false
}
};
const getOrganizationId = () => {
return 0;
......@@ -128,6 +141,7 @@ export {
getCustomized,
getHeaderExtrasProp,
getDataSetName,
dateFormat,
getOrganizationId,
getCurrentUser
};
src/global.less
View file @ ad09e035
......@@ -31,3 +31,7 @@
@popover-action-width: auto;
@popover-action-font-size: 12px;
@popover-light-text-color: rgba(19,19,19,0.80);
::-webkit-scrollbar {
display: none;
}
\ No newline at end of file
src/pages/dynamicDetail.vue
View file @ ad09e035
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-31 18:41:49
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-15 10:13:48
* @LastEditTime: 2024-08-15 17:42:00
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -14,20 +14,29 @@
:componentRenderers="componentRenderers"
:headerButtons="headerButtons"
:layoutButtons="layoutButtons"
:staticLayoutTabs="staticLayoutTabs"
:configLoadHandle="configLoadHandle"
:dataLoadHandle="dataLoadHandle"
ref="dynamicRef"
/>
</template>
<script>
import {Button} from 'vant';
export default {
name: 'DynamicDetail',
components: {
[Button.name]: Button
},
data () {
return {
buttonText: '嵌入内容',
componentRenderers: [
{
tabCode: 'F_BASIC',
columnName: 'test',
renderer: (field, getRecord) => {
console.log('------->>>', field, getRecord())
return <span>328388</span>
},
},
......@@ -46,35 +55,34 @@ export default {
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()
// },
// },
// ],
},
staticLayoutTabs: [
{
tabCode: 'F_STATIC',
component: (props) => {
return (
<van-button onClick={this.handleCopyClick}>{this.buttonText}</van-button>
)
},
},
]
}
},
methods: {
configLoadHandle(config) { // 查询配置信息之后的回调
console.log('configLoadHandle', config)
},
dataLoadHandle(data, tabCode) {
console.log(tabCode, data);
},
handleCopyClick() {
console.log('复制')
this.buttonText = '复制'
},
handleHeaderSubmit() {
console.log("点击提交")
this.buttonText = '提交'
},
handleDelete() {
console.log("点击删除")
......
src/pages/testDynamic.vue
View file @ ad09e035
......@@ -2,14 +2,20 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 11:02:22
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-14 16:22:37
* @LastEditTime: 2024-08-15 17:43:42
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
-->
<template>
<Dynamic layoutCode="PRJ005" :componentRenderers="componentRenderers" />
<Dynamic
layoutCode="CN001"
:componentRenderers="componentRenderers"
:configLoadHandle="configLoadHandle"
:dataLoadHandle="dataLoadHandle"
ref="dynamicRef"
/>
</template>
<script>
......@@ -34,6 +40,12 @@ export default {
}
},
methods: {
configLoadHandle(config) { // 查询配置信息之后的回调
console.log('configLoadHandle', config)
},
dataLoadHandle(data, tabCode) {
console.log(tabCode, data);
},
toDetail(record) {
this.$router.push({
name: 'DynamicDetail',
......
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