Skip to content

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

表格删除、保存

parent f6a621e7
Show whitespace changes
Inline Side-by-side
Showing with 447 additions and 144 deletions
packages/components/Scroll/index.vue
View file @ bddd72f8
......@@ -297,25 +297,25 @@ export default {
initScroll () {
let vm = this
if (!this.$refs.scroll) return
if (this.height) {
this.$refs.scroll.style.height = this.height;
} else {
const headerHeight = vm.getHeaderHeight()
const nextHeight = vm.getNextElementHeight()
this.$refs.scroll.style.height = `${this.$refs.scroll.getBoundingClientRect().height - headerHeight - nextHeight}px`
}
// 设置scrollContent的最小高，实现高度不足时也有回弹效果
if (this.$refs.scrollContent) {
// if (this.height) {
// this.$refs.scroll.style.height = this.height;
// } else {
// const headerHeight = vm.getHeaderHeight()
// const nextHeight = vm.getNextElementHeight()
this.$refs.scrollContent.style.minHeight = window.getComputedStyle(this.$refs.scroll).height; // `${this.$refs.scroll.getBoundingClientRect().height}px`
// this.$refs.scrollContent.style.paddingTop = `${headerHeight}px`
if (vm.hasFoot.footFlag) {
let height = vm.hasFoot.height || 88
// this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height - height}px`
this.$refs.scrollContent.style.paddingBottom = height + 'px'
}
}
// this.$refs.scroll.style.height = `${this.$refs.scroll.getBoundingClientRect().height - headerHeight - nextHeight}px`
// }
// // 设置scrollContent的最小高，实现高度不足时也有回弹效果
// if (this.$refs.scrollContent) {
// // const nextHeight = vm.getNextElementHeight()
// this.$refs.scrollContent.style.minHeight = window.getComputedStyle(this.$refs.scroll).height; // `${this.$refs.scroll.getBoundingClientRect().height}px`
// // this.$refs.scrollContent.style.paddingTop = `${headerHeight}px`
// if (vm.hasFoot.footFlag) {
// let height = vm.hasFoot.height || 88
// // this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height - height}px`
// this.$refs.scrollContent.style.paddingBottom = height + 'px'
// }
// }
const options = {
probeType: this.probeType,
......
src/Dynamic/ConfigRenderComponent/DForm/FormItem/DCheckbox.vue
View file @ bddd72f8
......@@ -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-09 18:19:46
* @LastEditTime: 2024-08-12 11:15:28
* @Version: 1.0.0
* @Description: 动态渲染-复选框组件
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -51,8 +51,8 @@ export default {
default: ''
},
value: {
type: Boolean,
default: false,
type: Number | Boolean,
default: 0,
},
disabled: {
type: Boolean,
......@@ -71,7 +71,11 @@ export default {
watch: {
value: function(newValue, oldValue) {
if (newValue !== oldValue) {
this.currentValue = newValue
if (typeof newValue === 'boolean') {
this.currentValue = newValue;
} else {
this.currentValue = Number(newValue) === 1 ? true : false;
}
}
}
},
......
src/Dynamic/ConfigRenderComponent/DForm/FormItem/DField.vue
View file @ bddd72f8
......@@ -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-09 18:19:34
* @LastEditTime: 2024-08-12 14:09:57
* @Version: 1.0.0
* @Description: 动态渲染-文本框组件
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -18,7 +18,7 @@
:required="required"
:clearable="clearable"
:formatter="formatter"
:rules="[{ required: true, message: `请输入${label}` }]"
:rules="[{ required, message: `请输入${label}` }]"
:error="false"
>
<d-label :label="label" :help="help" slot="label" />
......@@ -102,7 +102,6 @@ export default {
return val;
},
fieldInput (val) {
console.log('val', val)
this.$emit('input', val)
this.$emit('change', val)
},
......
src/Dynamic/ConfigRenderComponent/DForm/FormItem/DSwitch.vue
View file @ bddd72f8
......@@ -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-09 18:20:53
* @LastEditTime: 2024-08-12 11:15:21
* @Version: 1.0.0
* @Description: 动态渲染-开关组件
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -50,8 +50,8 @@ export default {
default: ''
},
value: {
type: Boolean,
default: false,
type: Number | Boolean,
default: 0,
},
disabled: {
type: Boolean,
......@@ -70,15 +70,19 @@ export default {
watch: {
value: function(newValue, oldValue) {
if (newValue !== oldValue) {
this.currentValue = newValue
if (typeof newValue === 'boolean') {
this.currentValue = newValue;
} else {
this.currentValue = Number(newValue) === 1 ? true : false;
}
}
}
},
methods: {
checked (flag) {
if (!this.disable) {
this.$emit('input', flag)
this.$emit('change', flag)
this.$emit('input', flag ? 1 : 0);
this.$emit('change', flag ? 1 : 0);
}
},
},
......
src/Dynamic/ConfigRenderComponent/DForm/FormItem/DUrl.vue
View file @ bddd72f8
......@@ -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-09 16:22:01
* @LastEditTime: 2024-08-11 10:44:31
* @Version: 1.0.0
* @Description: 动态渲染-超链接组件
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -19,10 +19,12 @@
<script>
import {Cell, Checkbox} from 'vant';
import DLabel from './DLabel';
export default {
name: 'DUrl',
components: {
DLabel,
[Cell.name]: Cell,
[Checkbox.name]: Checkbox,
},
......@@ -36,8 +38,8 @@ export default {
default: ''
},
value: {
type: Boolean,
default: false,
type: String,
default: '',
},
disabled: {
type: Boolean,
......
src/Dynamic/ConfigRenderComponent/DForm/index.vue
View file @ bddd72f8
......@@ -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-09 22:40:43
* @LastEditTime: 2024-08-12 14:09:34
* @Version: 1.0.0
* @Description: 表单渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -11,7 +11,7 @@
<fragment>
<DTitle v-if="showTitle" :title="tabInfo.description" :tabButtons="tabInfo.tabButtons || []" />
<van-form @submit="onSubmit" ref="formRef" error-message-align="right" input-align="right">
<van-form ref="formRef" error-message-align="right" input-align="right">
<fragment v-for="field in fieldList" :key="field.columnName">
<d-field
v-if="fieldComponents.indexOf(field.validationTypeDisplay) > -1"
......@@ -109,6 +109,7 @@ import DCheckbox from './FormItem/DCheckbox';
import DUrl from './FormItem/DUrl';
import DTitle from '../DTitle';
import DButtons from '../DButtons';
import hlsHttp from '../../utils/hlsHttp';
export default {
name: 'DForm',
......@@ -155,25 +156,44 @@ export default {
}
},
data () {
let initFields = {}
this.fields.forEach(item => {
initFields[item.columnName] = null;
})
return {
fieldComponents: ['TextField',"TextArea", "Currency", "NumberField", "EmailField","CentField"],
dateComponents: ["DatePicker", "DateTimePicker"],
componentTypes: ["UrlField"],
fieldList: [...this.fields],
fieldsObj: {...initFields}
fieldsObj: {},
queryParams: {},
}
},
inject: ['dynamicInfo'],
mounted() {
this.init();
},
activated() {
console.log('D-form', this.fields)
if (this.record && JSON.stringify(this.record) === '{}') {
this.init();
},
methods: {
init() {
this.queryParams = this.dynamicInfo().queryParams;
if (JSON.stringify(this.record) === '{}') { // 新建
let initFields = {}
this.fields.forEach(item => {
initFields[item.columnName] = item.defaultValue ? item.defaultValue : null;
if (item.dataType === 'boolean') {
initFields[item.columnName] = item.defaultValue === '1' ? true : false;
}
})
this.fieldsObj = {...initFields};
} else { // 详情
this.fieldsObj = {...this.record};
}
if (this.tabInfo && this.tabInfo.readUrl) {
hlsHttp.get(this.tabInfo.readUrl, this.queryParams).then(res => {
this.fieldsObj = res.content.length ? res.content[0] : {};
})
}
},
methods: {
getInputType(type) {
if (type === 'TextArea') {
return 'textarea';
......@@ -205,25 +225,26 @@ export default {
}
return {};
},
onSubmit() {
console.log('souusole', this.fieldsObj)
},
fieldChange(val) {
console.log(val)
// console.log(val)
},
validate() {
console.log('字段娇艳', this.fieldsObj)
this.$refs.formRef.submit();
// this.$refs.formRef.submit((res) => {
// console.log(res);
// }, err => {
// console.log(err)
// })
// this.fields.forEach(field => {
// if (!(this.fieldsObj[field.columnName])) {
// }
// })
const values = {...this.fieldsObj};
this.originFields.forEach(item => {
if (item.bind) {
const bindField = item.bind.split('.');
if (bindField.length >1) {
values[item.columnName] = values[bindField[0]] ? values[bindField[0]][bindField[1]] : undefined;
} else {
values[item.columnName] = values[bindField[0]];
}
}
if (item.dataType === 'boolean') {
values[item.columnName] = values[item.columnName] ? 1 : 0;
}
})
return values;
}
},
}
......
src/Dynamic/ConfigRenderComponent/DTable/DTableTd.jsx 0 → 100644
View file @ bddd72f8
/*
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 09:41:54
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-11 10:28:01
* @Version: 1.0.0
* @Description: 表格列渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
*/
import Vue from 'vue';
const DTableTd = {
components: {
},
props: {
record: { // 数据
type: Object,
default: () => ({})
},
columnName: {
type: String,
default: '',
},
tdRender: {
type: Function,
default: null
}
},
data () {
return {
}
},
methods: {
},
// 为了弥补缺少的实例
// 提供第二个参数作为上下文
render: function (h, context) {
return this.tdRender ? this.tdRender(this.record) : <span>{this.$slots.default || (this.record[this.columnName] || '--')}</span>
}
};
export default DTableTd;
\ No newline at end of file
src/Dynamic/ConfigRenderComponent/DTable/index.vue
View file @ bddd72f8
......@@ -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-09 15:19:07
* @LastEditTime: 2024-08-12 14:10:34
* @Version: 1.0.0
* @Description: 表格渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -12,19 +12,35 @@
<DTitle :title="tabInfo.description" :tabButtons="tabInfo.tabButtons || []" :buttonsFun="buttonsClick" />
<scroll
ref="scroll" class="has-footer" :pullUp="true" :pull-down="true" @pullingUp="getList"
ref="scroll" :pullUp="true" :pull-down="true" @pullingUp="getList"
@pullingDown="getList"
height="calc(100vh - 130px)"
style="max-height: calc(100vh - 130px)"
>
<van-checkbox-group v-model="checkResult">
<div v-for="(item, index) in tableData" :key="item[tabInfo.primaryKey]" class="d-table" @click="showRecord(item, index)">
<div v-for="(item, pIndex) in tableData" :key="item[tabInfo.primaryKey]" class="d-table">
<fragment v-for="(column, index) in columns" :key="column.columnName" >
<div v-if="index === 0" class="d-table-th">
<van-checkbox :name="item[tabInfo.primaryKey]">{{column.description}}: {{item[column.columnName]}}</van-checkbox>
<van-checkbox :name="item[tabInfo.primaryKey]">
{{column.description}}:
<d-table-td
:tdRender="column.renderer"
:columnName="column.columnName"
:record="item" />
</van-checkbox>
<van-icon name="records-o" @click="showRecord(item, pIndex)"/>
</div>
<div v-else class="d-table-tr" @click="toDetail">
<div v-else class="d-table-tr">
<span>{{column.description}}</span>
<span>{{(column.validationTypeDisplay === 'Switch' ? (item[column.columnName] ? '是' : '否' ) : item[column.columnName]) || '--'}}</span>
<d-table-td
:tdRender="column.renderer"
:columnName="column.columnName"
:record="item"
>
<template v-if="booleanType.includes(column.validationTypeDisplay)">
{{booleanDisplay[item[column.columnName]] || '--'}}
</template>
<!-- {{(column.validationTypeDisplay === 'Switch' ? (item[column.columnName] ? '是' : '否' ) : item[column.columnName]) || '--'}} -->
</d-table-td>
</div>
</fragment>
</div>
......@@ -32,7 +48,14 @@
<van-popup v-model="visible" position="top" class="d-table-form-popup" get-container="body">
<div class="form-content">
<d-form :fields="columns" :originFields="originColumns" ref="dformRef" :record="record" :showTitle="false" />
<d-form
v-if="visible"
:fields="columns"
:originFields="originColumns"
ref="dformRef"
:record="record"
:showTitle="false"
/>
</div>
<div class="d-table-form-footer">
<van-button
......@@ -54,18 +77,23 @@
<script>
import DTitle from '../DTitle';
import DForm from '../DForm';
import { Checkbox, CheckboxGroup, Popup, Button } from 'vant';
import {get} from '../../utils/hlsHttp';
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';
export default {
name: 'DTable',
components: {
DTitle,
DForm,
DTableTd,
[Button.name]: Button,
[Checkbox.name]: Checkbox,
[CheckboxGroup.name]: CheckboxGroup,
[Popup.name]: Popup,
[Icon.name]: Icon,
[Toast.name]: Toast,
},
props: {
tabInfo: { // 配置信息
......@@ -85,8 +113,14 @@ export default {
default: () => [],
}
},
inject: ['dynamicInfo'],
data () {
return {
booleanType: ['Switch', 'Radio', 'CheckBox'],
booleanDisplay: {
1: '是',
0: '否'
},
page: 0,
size: 10,
tableData: [], // 表格数据
......@@ -94,22 +128,32 @@ export default {
visible: false,
record: {}, // 操作记录
recordIndex: -1,
buttonsFun: {}
buttonsFun: {},
dynamicConfigInfo: {},
}
},
mounted() {
this.dynamicConfigInfo = this.dynamicInfo();
this.init();
},
activated() {
this.dynamicConfigInfo = this.dynamicInfo();
this.init();
},
methods: {
init() {
this.page = 0;
this.tableData = [];
this.getList();
},
getList() {
// console.log('D-Table', this.columns)
const params = {
page: this.page,
size: this.size,
...this.dynamicConfigInfo.queryParams,
}
get(this.tabInfo.readUrl, params).then(res => {
hlsHttp.get(this.tabInfo.readUrl, params).then(res => {
this.tableData = this.tableData.concat(res.content || []);
if (res.totalElements > this.tableData.length) {
this.page = this.page + 1;
......@@ -125,29 +169,35 @@ export default {
this.visible = true;
},
saveRecord() {
this.$refs.dformRef.validate();
// this.visible = false;
const values = this.$refs.dformRef.validate();
hlsHttp.post(this.tabInfo.createUrl, [{...values, ...this.dynamicConfigInfo.queryParams}]).then(() => {
this.visible = false;
Toast.success('保存成功！');
this.init();
})
},
cancelRecord() {
this.visible = false;
},
toDetail(e) {
e.stopPropagation();
e.preventDefault()
this.$router.push({
name: 'DynamicDetail',
// params: params
})
},
// 删除
deleteRecords() {
let result = this.tableData.filter(o => this.checkResult.includes(o[this.tabInfo.primaryKey]));
const dataSetName = getDataSetName(this.dynamicConfigInfo.config, this.tabInfo.tabCode);
const url = this.tabInfo.destroyUrl ||
`/hllc/v1/${getOrganizationId()}/dynamic-crud/delete${dataSetName ? '?datasetName=' + dataSetName : ''}`;
hlsHttp.delete(url , result).then(res=> {
Toast.success('删除成功！');
this.init();
})
},
buttonsClick(btn) {
console.log(btn)
switch (btn.name) {
case 'create':
if (this.tabInfo.createUrl) {
this.showRecord({}, -1);
} else {
Toast.fail('保存接口未配置，请检查配置');
}
break;
case 'query':
console.log('查询')
......@@ -170,6 +220,8 @@ export default {
</script>
<style scoped lang="less">
@import '../../index.less';
.d-table {
margin: 0 8px 12px 8px;
padding: 4px 8px 12px 8px;
......@@ -184,12 +236,19 @@ export default {
color: #646465;
}
.d-table-th {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0 12px 8px;
border-bottom: 1px solid #F3F3F7;;
font-family: PingFangSC-Semibold;
font-size: 15px;
color: #4B4A4B;
font-weight: 600;
.van-icon-records-o {
font-size: 17px;
color: @primary-color;
}
}
}
.d-table-form-popup {
......
src/Dynamic/ConfigRenderComponent/utils.jsx → src/Dynamic/ConfigRenderComponent/LayoutBuilder.jsx
View file @ bddd72f8
......@@ -2,14 +2,14 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 21:21:37
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-09 14:44:50
* @LastEditTime: 2024-08-11 10:52:17
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
*/
import Vue from 'vue';
import {compact, head, isFunction, isNil, isNumber, isUndefined, upperFirst} from 'lodash';
import {getCurrentUser} from '../utils/utils';
import {getCustomizedProp, getHeaderExtrasProp, getCurrentUser} from '../utils/utils';
/**
* 格式化代码
......@@ -93,20 +93,43 @@ export class ColumnBuilder extends BaseBuilder {
super.init();
}
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 };
}
return { renderer };
}
getCurrentRenderers(columnName, renderers) {
return getCustomizedProp(this.layoutCode, this.tabCode, columnName, renderers);
}
/**
* 生成表单下字段组件数组
* @param {Array.<{columnName: string, columnSeq: number, rowSeq: number, cascadeValue: string, validationTypeDisplay: string, columnCount: number, rowCount: number, inputModeDisplay: string, width: number}>} fields
* @param {string} cascadeKey
* @return
*/
initFields(fields, cascadeKey = '') {
const newFields = fields.map(field => {
return {
...field,
readOnly: field.inputModeDisplay === "READONLY",
required: field.inputModeDisplay === "REQUIRED",
clearFlag: field.clearButton === 'Y'
clearFlag: field.clearButton === 'Y',
renderer: this.getCustomizedRenderer(field.columnName, field).renderer,
}
// if (field.validationTypeDisplay === 'UrlField') {
// const {renderer} = this.getCustomizedRenderer(field.columnName, field);
......@@ -168,11 +191,13 @@ export class ColumnBuilder extends BaseBuilder {
case 'Table':
case 'Tree': {
const newFields = this.fields.map(field => { // .filter(o => o.isVisible === 'Y')
const customizedRenderer = this.getCustomizedRenderer(field.columnName);
return {
...field,
readOnly: field.inputModeDisplay === "READONLY",
required: field.inputModeDisplay === "REQUIRED",
clearFlag: field.clearButton === 'Y'
clearFlag: field.clearButton === 'Y',
renderer: customizedRenderer.renderer,
}
});
// return newFields;
......@@ -561,7 +586,7 @@ class BaseComponentBuilder extends BaseBuilder {
'query-form',
{
props: {
fields: newFields,
fields: newFields.fields,
originFields: newFields._originFields,
buttons: this.props.tabButtons,
tabInfo: this.props,
......
src/Dynamic/ConfigRenderComponent/QueryForm/index.vue
View file @ bddd72f8
......@@ -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-09 14:39:09
* @LastEditTime: 2024-08-11 10:51:32
* @Version: 1.0.0
* @Description: 查询表单渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -69,11 +69,11 @@ export default {
searchValue: '',
}
},
inject: ['config', 'testname'],
inject: ['config'],
mounted() {
this.configDatas = this.config();
console.log('config', this.config())
console.log('query-form', this.fields)
},
methods: {
onSearch() { // 搜索
......
src/Dynamic/ConfigRenderComponent/init.jsx → src/Dynamic/ConfigRenderComponent/index.jsx
View file @ bddd72f8
......@@ -2,15 +2,15 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 09:41:54
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-09 11:10:49
* @LastEditTime: 2024-08-11 11:08:27
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
*/
import Vue from 'vue';
import {Button} from 'vant'
import layouts from '../layout';
import {ColumnBuilder, TabButtonBuilder, ComponentBuilder} from './utils.jsx'
import layouts from '../layout/index.js';
import {ColumnBuilder, TabButtonBuilder, ComponentBuilder} from './LayoutBuilder.jsx'
import QueryForm from './QueryForm';
import DTable from './DTable';
import DForm from './DForm';
......@@ -28,6 +28,10 @@ const ConfigRenderComponent = {
type: Boolean,
default: true
},
componentRenderers: {
type: Array,
default: () => [],
},
staticLayoutTabs: {
type: Array,
default: () => [],
......@@ -40,7 +44,7 @@ const ConfigRenderComponent = {
queryParams: {}, // 路由参数
}
},
inject: ['config'],
inject: ['dynamicInfo'],
created() {
this.queryParams = {
...this.$route.params,
......@@ -48,7 +52,13 @@ const ConfigRenderComponent = {
}
},
mounted() {
this.configInfo = this.config();
this.configInfo = this.dynamicInfo().config;
console.log('this.componentRenderers', this.componentRenderers, this.dynamicInfo())
},
activated () {
this.configInfo = this.dynamicInfo().config;
console.log('激活', this.dynamicInfo().queryParams);
},
methods: {
getTabs(layoutTabs, state, layoutCode, createElement) {
......@@ -100,7 +110,7 @@ const ConfigRenderComponent = {
// .withTableFooterRenderers(tableFooterRenderers)
.withLayoutCode(childrenTab.layoutCode || layoutCode)
.withParentTabCode(parentTabCode)
// .withComponentRenderers(componentRenderers)
.withComponentRenderers(this.componentRenderers)
.build();
const findField = find(tabFields, { formatCascadeFlag: 'Y' });
......
src/Dynamic/index.vue
View file @ bddd72f8
......@@ -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-09 17:48:37
* @LastEditTime: 2024-08-12 09:31:49
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -16,7 +16,10 @@
</h-header>
<h-content>
<van-loading size="24px" vertical v-if="loading">加载中...</van-loading>
<config-render-component v-if="configDatas.id" />
<config-render-component
v-if="configDatas.id"
:componentRenderers="componentRenderers"
/>
</h-content>
<layout-buttons v-if="configDatas.id" />
</h-view>
......@@ -25,7 +28,7 @@
<script>
import {Loading} from 'vant';
import LayoutButtons from './LayoutButtons';
import ConfigRenderComponent from './ConfigRenderComponent/init.jsx';
import ConfigRenderComponent from './ConfigRenderComponent/index.jsx';
import {query, queryRoute} from './service'
import './index.less'
......@@ -45,6 +48,10 @@ export default {
type: Boolean,
default: true
},
componentRenderers: { // 组件渲染
type: Array,
default: () => []
}
},
data () {
return {
......@@ -61,17 +68,33 @@ export default {
},
provide() {
return {
testname: () => this.testname,
config: () => this.configDatas // 提供方法，注意提供的方法要写在return对象中
config: () => this.configDatas, // 提供方法，注意提供的方法要写在return对象中
queryParams: () => this.queryParams,
dynamicInfo: () => ({ // 配置的所有信息
layoutCode: this.layoutCode,
config: this.configDatas,
queryParams: {
...this.$route.params,
...this.$route.query
},
componentRenderers: this.componentRenderers
})
};
},
created() {
window.localStorage.setItem('access_token', '75d8f55f-4043-454c-a647-ef62a9bf7e5b');
window.localStorage.setItem('access_token', '1f22ae78-2ee2-470c-bea4-916396e5632c');
this.queryParams = {
...this.$route.params,
...this.$route.query
}
},
activated() {
this.queryParams = {
...this.$route.params,
...this.$route.query
}
console.log('activated', this.queryParams)
},
beforeMount() {
this.layoutCodeQuery();
},
......@@ -95,22 +118,27 @@ export default {
// if (this.store.config.datas !== null && isEqual(this.qpara, this.store.config.param)) {
// return;
// }
let res = {datas: {}, params: {}}
if (this.layoutCode) {
const {datas, params} = await query(
this.layoutCode,
this.qpara,
);
this.configDatas = datas;
this.params = params;
res = await query(this.layoutCode, this.qpara);
} else {
const {datas, params} = await queryRoute(
this.$route.path,
this.qpara,
);
this.configDatas = datas;
this.params = params;
res = await queryRoute(this.layoutCode, this.qpara);
}
const dataSetObj = this.transformDateSetTree(res.datas.dataSetsTree);
this.configDatas = {...res.datas, dataSetObject: dataSetObj};
this.params = res.params;
this.loading = false;
},
transformDateSetTree(tree) {
let obj = {};
if (tree) {
tree.forEach(dataSets => {
dataSets.forEach(config => {
obj[config.tabCode] = {...config}
})
})
}
return obj;
}
},
}
......
src/Dynamic/utils/hlsHttp.js
View file @ bddd72f8
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 16:36:23
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-02 10:52:06
* @LastEditTime: 2024-08-10 00:00:58
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -183,6 +183,7 @@ export function post (url, param = {}) {
// console.log(postName + ' url ' + url)
// console.log(postName + ' parameter ' + JSON.stringify(param, '', 2))
// }
console.log(param)
return new Promise((resolve, reject) => {
withTokenAxios({
method: 'post',
......@@ -197,7 +198,71 @@ export function post (url, param = {}) {
})
}
// put
export function put (url, param = {}, queryParams = {}) {
param.user_id = window.localStorage.user_id
param.access_token = window.localStorage.access_token
let headers = {}
if (window.localStorage.access_token) {
headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + window.localStorage.access_token,
}
} else {
headers = {
'Content-Type': 'application/json',
}
}
return new Promise((resolve, reject) => {
withTokenAxios({
method: 'put',
headers: headers,
url: process.env.apiPath + url,
data: param,
params: queryParams
}).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
// delete请求
export function deletes (url, param = {}, queryParams = {}) {
param.user_id = window.localStorage.user_id
param.access_token = window.localStorage.access_token
let headers = {}
if (window.localStorage.access_token) {
headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + window.localStorage.access_token,
}
} else {
headers = {
'Content-Type': 'application/json',
}
}
return new Promise((resolve, reject) => {
withTokenAxios({
method: 'delete',
headers: headers,
url: process.env.apiPath + url,
data: param,
params: queryParams
}).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
export default {
get: get,
post: post,
put: put,
delete: deletes
}
src/Dynamic/utils/utils.js
View file @ bddd72f8
......@@ -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-09 15:12:26
* @LastEditTime: 2024-08-11 15:27:32
* @Version: 1.0.0
* @Description: 工具类
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -29,6 +29,10 @@ const getHeaderExtrasProp = (layoutCode, tabCode, props) => {
);
};
const getDataSetName = (config, tabCode) => {
return config.dataSetObject[tabCode].dataSetName || '';
};
/**
* 判断对象为空
* @param v
......@@ -119,4 +123,11 @@ const getCurrentUser = () => {
};
export { getCustomizedProp, getCustomized,getHeaderExtrasProp, getOrganizationId, getCurrentUser };
export {
getCustomizedProp,
getCustomized,
getHeaderExtrasProp,
getDataSetName,
getOrganizationId,
getCurrentUser
};
src/pages/testDynamic.vue
View file @ bddd72f8
<template>
<Dynamic layoutCode="BP001" />
<Dynamic layoutCode="BP001" :componentRenderers="componentRenderers" />
</template>
<script>
import {Icon} from 'vant';
export default {
name: 'TestDynamic',
components: {
[Icon.name]: Icon,
},
data () {
return {}
return {
componentRenderers: [
{
tabCode: 'G_QUERY_RESULT',
columnName: 'bpName',
renderer: (record) => {
return <span style="color: #3789ff" onClick={() => this.toDetail(record)}>{record.bpName} <van-icon name="arrow" /></span>
},
},
]
}
},
methods: {
toDetail(record) {
console.log({
bpId: record.bpId,
bpName: record.bpName,
bpCode: record.bpCode,
})
this.$router.push({
name: 'DynamicDetail',
params: {
bpId: record.bpId,
bpName: record.bpName,
bpCode: record.bpCode,
}
})
},
},
methods: {},
}
</script>
......
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