Skip to content

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

低代码表单校验

parent 51d624c0
Hide whitespace changes
Inline Side-by-side
Showing with 738 additions and 389 deletions
src/Dynamic/FormItem/DCheckbox.vue → src/Dynamic/ConfigRenderComponent/DForm/FormItem/DCheckbox.vue
View file @ df2d5daa
...@@ -2,33 +2,50 @@ ...@@ -2,33 +2,50 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-08-01 09:55:12 * @Date: 2024-08-01 09:55:12
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-07 10:58:40 * @LastEditTime: 2024-08-09 18:19:46
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: 动态渲染-复选框组件 * @Description: 动态渲染-复选框组件
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
--> -->
<template> <template>
<van-cell center class="d-form-item" :required="required" :title="label"> <!-- <van-cell center class="d-form-item" :required="required" :title="label">
<!-- <template #title>
<span v-if="required" class="required">*</span>
{{label}}
</template> -->
<template #right-icon> <template #right-icon>
<van-checkbox v-model="currentValue" @change="checked" :disabled="disabled" /> <van-checkbox v-model="currentValue" @change="checked" :disabled="disabled" />
</template> </template>
</van-cell> </van-cell> -->
<div class="d-form-item">
<van-field
:disabled="disabled"
:required="required"
:rules="[{ required, message: `请填写${label}` }]"
>
<d-label :label="label" :help="help" slot="label" />
<template #input>
<van-checkbox v-model="currentValue" @change="checked" :disabled="disabled" />
</template>
</van-field>
</div>
</template> </template>
<script> <script>
import {Cell, Checkbox} from 'vant'; import {Cell, Checkbox, Field} from 'vant';
import DLabel from './DLabel';
export default { export default {
name: 'DCheckbox', name: 'DCheckbox',
components: { components: {
[Cell.name]: Cell, [Cell.name]: Cell,
[Checkbox.name]: Checkbox, [Checkbox.name]: Checkbox,
[Field.name]: Field,
DLabel
}, },
props: { props: {
help: {
type: String,
default: ''
},
label: { label: {
type: String, type: String,
default: '' default: ''
......
src/Dynamic/FormItem/DDate.vue → src/Dynamic/ConfigRenderComponent/DForm/FormItem/DDate.vue
View file @ df2d5daa
...@@ -2,21 +2,38 @@ ...@@ -2,21 +2,38 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-08-01 09:55:12 * @Date: 2024-08-01 09:55:12
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-07 15:56:19 * @LastEditTime: 2024-08-09 18:21:29
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: 动态渲染-日期组件 * @Description: 动态渲染-日期组件
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
--> -->
<template> <template>
<div class="d-form-item"> <div class="d-form-item">
<van-cell center :required="required"> <!-- <van-cell center :required="required">
<d-label :label="label" :help="fieldConfig.help" slot="title" /> <d-label :label="label" :help="help" slot="title" />
<span @click="showDate(true)" class="cell-value"> <span @click="showDate(true)" class="cell-value">
<input placeholder="请选择" :value="currentValue" readonly class="value-input"/> <input placeholder="请选择" :value="currentValue" readonly class="value-input"/>
<van-icon name="clear" v-show="clearable && currentValue" @click="clear"/> <van-icon name="clear" v-show="clearable && currentValue" @click="clear"/>
<img src="../assets/date-icon.png" alt="" class="right-icon" v-show="!(clearable && currentValue)"/> <img src="../../../assets/date-icon.png" alt="" class="right-icon" v-show="!(clearable && currentValue)"/>
</span> </span>
</van-cell> </van-cell> -->
<van-field
readonly
v-model="currentValue"
placeholder="请选择"
:disabled="disabled"
:required="required"
@click="showDate(true)"
:rules="[{ required, message: `请选择${label}` }]"
:error="false"
>
<d-label :label="label" :help="help" slot="label" />
<template slot="right-icon" >
<van-icon name="clear" v-show="clearable && currentValue" @click="clear"/>
<img src="../../../assets/date-icon.png" alt="" class="right-icon"/>
</template>
</van-field>
<van-popup v-model="visible" round position="bottom" class="d-date-popup"> <van-popup v-model="visible" round position="bottom" class="d-date-popup">
<van-datetime-picker <van-datetime-picker
...@@ -31,7 +48,7 @@ ...@@ -31,7 +48,7 @@
</template> </template>
<script> <script>
import {Cell, DatetimePicker, Popup, Icon} from 'vant'; import {Cell, DatetimePicker, Popup, Icon, Field} from 'vant';
import DLabel from './DLabel'; import DLabel from './DLabel';
export default { export default {
...@@ -41,6 +58,7 @@ export default { ...@@ -41,6 +58,7 @@ export default {
[DatetimePicker.name]: DatetimePicker, [DatetimePicker.name]: DatetimePicker,
[Popup.name]: Popup, [Popup.name]: Popup,
[Icon.name]: Icon, [Icon.name]: Icon,
[Field.name]: Field,
DLabel DLabel
}, },
props: { props: {
...@@ -52,6 +70,10 @@ export default { ...@@ -52,6 +70,10 @@ export default {
type: String, type: String,
default: 'DatePicker' default: 'DatePicker'
}, },
help: {
type: String,
default: ''
},
label: { label: {
type: String, type: String,
default: '' default: ''
......
src/Dynamic/FormItem/DField.vue → src/Dynamic/ConfigRenderComponent/DForm/FormItem/DField.vue
View file @ df2d5daa
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-08-01 09:55:12 * @Date: 2024-08-01 09:55:12
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-07 14:21:09 * @LastEditTime: 2024-08-09 18:19:34
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: 动态渲染-文本框组件 * @Description: 动态渲染-文本框组件
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
...@@ -11,16 +11,17 @@ ...@@ -11,16 +11,17 @@
<div class="d-form-item"> <div class="d-form-item">
<van-field <van-field
v-model="currentValue" v-model="currentValue"
placeholder="请输入" placeholder="请输入"
input-align="right"
@input="fieldInput" @input="fieldInput"
:type="fieldType[type]" :type="fieldType[type]"
:disabled="disabled" :disabled="disabled"
:required="required" :required="required"
:clearable="clearable" :clearable="clearable"
:formatter="formatter" :formatter="formatter"
:rules="[{ required: true, message: `请输入${label}` }]"
:error="false"
> >
<d-label :label="label" :help="fieldConfig.help" slot="label" /> <d-label :label="label" :help="help" slot="label" />
<span slot="extra" v-if="type === 'CentField'">%</span> <span slot="extra" v-if="type === 'CentField'">%</span>
</van-field> </van-field>
</div> </div>
...@@ -48,6 +49,10 @@ export default { ...@@ -48,6 +49,10 @@ export default {
type: String, type: String,
default: 'TextField', default: 'TextField',
}, },
help: {
type: String,
default: ''
},
label: { label: {
type: String, type: String,
default: '' default: ''
......
src/Dynamic/FormItem/DLov.vue → src/Dynamic/ConfigRenderComponent/DForm/FormItem/DLov.vue
View file @ df2d5daa
...@@ -2,15 +2,15 @@ ...@@ -2,15 +2,15 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-08-01 09:55:12 * @Date: 2024-08-01 09:55:12
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-07 22:35:19 * @LastEditTime: 2024-08-09 18:18:35
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: 动态渲染-Lov * @Description: 动态渲染-Lov
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
--> -->
<template> <template>
<div class="d-form-item d-lov"> <div class="d-form-item d-lov">
<van-cell center :required="required" :title="label"> <!-- <van-cell center :required="required" :title="label">
<d-label :label="label" :help="fieldConfig.help" slot="title" /> <d-label :label="label" :help="help" slot="title" />
<template #right-icon> <template #right-icon>
<span @click="changeVisible(true)"> <span @click="changeVisible(true)">
...@@ -22,7 +22,26 @@ ...@@ -22,7 +22,26 @@
</span> </span>
<van-icon name="arrow" style="margin-left: 5px" /> <van-icon name="arrow" style="margin-left: 5px" />
</template> </template>
</van-cell> </van-cell> -->
<van-field
v-model="fieldValue"
:disabled="disabled"
:required="required"
:rules="[{ required, message: `请选择${label}` }]"
>
<d-label :label="label" :help="help" slot="label" />
<template #input>
<div @click="changeVisible(true)" class="cell-value">
<span v-if="!currentValue || currentValue.length === 0" class="placeholder">请选择</span>
<span v-else>{{valueDisplay()}}</span>
</div>
</template>
<template slot="right-icon" >
<van-icon name="clear" v-show="clearable && !(!currentValue || currentValue.length === 0)" @click="clear"/>
<van-icon name="arrow" />
</template>
</van-field>
<van-popup v-model="visible" round position="bottom" class="d-lov-popup"> <van-popup v-model="visible" round position="bottom" class="d-lov-popup">
<div class="title"> <div class="title">
...@@ -39,7 +58,6 @@ ...@@ -39,7 +58,6 @@
<scroll <scroll
ref="scroll" ref="scroll"
:pullUp="true" :pullUp="true"
:height="multiple ? 'calc(100% - 165px)' : 'calc(100% - 105px)'"
@pullingUp="getLovData"> @pullingUp="getLovData">
<ul class="list"> <ul class="list">
<li <li
...@@ -67,17 +85,17 @@ ...@@ -67,17 +85,17 @@
</scroll> </scroll>
<div class="footer" v-if="multiple"> <div class="footer" v-if="multiple">
<van-checkbox shape="square" v-model="selectAllFlag" @change="selectAllData">全选</van-checkbox> <van-checkbox shape="square" v-model="selectAllFlag" @change="selectAllData">全选</van-checkbox>
<button type="primary" @click="test">确定</button> <button type="primary" @click="confirm">确定</button>
</div> </div>
</van-popup> </van-popup>
</div> </div>
</template> </template>
<script> <script>
import {Cell, Switch, Icon, Popup, Search, Checkbox, Tag} from 'vant'; import {Cell, Switch, Icon, Popup, Search, Checkbox, Tag, Field} from 'vant';
import DLabel from './DLabel'; import DLabel from './DLabel';
import hlsHttp from '../utils/hlsHttp'; import hlsHttp from '../../../utils/hlsHttp';
import utils from '../../scripts/hlsUtil'; import {getOrganizationId} from '../../../utils/utils';
export default { export default {
name: 'DLov', name: 'DLov',
...@@ -90,12 +108,17 @@ export default { ...@@ -90,12 +108,17 @@ export default {
[Search.name]: Search, [Search.name]: Search,
[Checkbox.name]: Checkbox, [Checkbox.name]: Checkbox,
[Tag.name]: Tag, [Tag.name]: Tag,
[Field.name]: Field,
}, },
props: { props: {
fieldConfig: { fieldConfig: {
type: Object, type: Object,
default: () => {} default: () => {}
}, },
help: {
type: String,
default: ''
},
label: { label: {
type: String, type: String,
default: '' default: ''
...@@ -113,19 +136,27 @@ export default { ...@@ -113,19 +136,27 @@ export default {
default: false, default: false,
}, },
multiple: { // 是否多选 multiple: { // 是否多选
type: Boolean,
default: true,
},
clearable: {
type: Boolean, type: Boolean,
default: false, default: false,
},
cascadesParams: {
type: Object,
default: () => ({})
} }
}, },
data () { data () {
return { return {
fieldValue: '', // 该变量纯粹用来判断是否有选值，给form校验用
lovConfig: {}, // lov配置 lovConfig: {}, // lov配置
lovData: [], lovData: [],
searchValue: '', //搜索字段 searchValue: '', //搜索字段
selectAllFlag: false, selectAllFlag: false,
page: 0, page: 0,
size: 10, size: 10,
currentValue: null, currentValue: null,
testValue: false, testValue: false,
visible: false, visible: false,
...@@ -137,7 +168,7 @@ export default { ...@@ -137,7 +168,7 @@ export default {
}, },
methods: { methods: {
getLovConfig() { getLovConfig() {
hlsHttp.get(`/hpfm/v1/${utils.getOrganizationId()}/lov-view/info`, {viewCode: this.fieldConfig.lovCode}).then(res => { hlsHttp.get(`/hpfm/v1/${getOrganizationId()}/lov-view/info`, {viewCode: this.fieldConfig.lovCode}).then(res => {
this.lovConfig = res; this.lovConfig = res;
// this.getLovData(); // this.getLovData();
}); });
...@@ -148,8 +179,10 @@ export default { ...@@ -148,8 +179,10 @@ export default {
lovCode, lovCode,
page: this.page, page: this.page,
size: this.size, size: this.size,
tenantId: utils.getOrganizationId() tenantId: getOrganizationId(),
...this.cascadesParams
} }
console.log('cascadesParams', this.cascadesParams)
hlsHttp.get(queryUrl, params).then(res => { hlsHttp.get(queryUrl, params).then(res => {
this.lovData = this.lovData.concat(res.content.map(item => ({...item, _selected: false}))); this.lovData = this.lovData.concat(res.content.map(item => ({...item, _selected: false})));
if (res.totalElements > this.lovData.length) { if (res.totalElements > this.lovData.length) {
...@@ -163,8 +196,13 @@ export default { ...@@ -163,8 +196,13 @@ export default {
changeVisible(flag) { changeVisible(flag) {
if (!this.disabled) { if (!this.disabled) {
this.visible = flag; this.visible = flag;
if (flag && this.lovData.length === 0) { if (flag) {
this.getLovData() if (this.cascadesParams && JSON.stringify(this.cascadesParams) !== '{}') { // 存在级联查询参数
this.page = 0;
this.getLovData();
} else if (this.lovData.length === 0) {
this.getLovData()
}
} }
} }
}, },
...@@ -175,21 +213,19 @@ export default { ...@@ -175,21 +213,19 @@ export default {
if(!this.multiple) { if(!this.multiple) {
this.currentValue = val; this.currentValue = val;
this.changeVisible(false); this.changeVisible(false);
this.$emit('input', val[this.lovConfig.displayField]); this.inputValue(this.currentValue);
} else { } else {
val._selected = true; val._selected = true;
} }
}, },
// 确定 // 确定
test() { confirm() {
this.changeVisible(false); this.changeVisible(false);
console.log('过来了 ')
const data = this.lovData.filter(o => o._selected); const data = this.lovData.filter(o => o._selected);
this.currentValue = data; this.currentValue = data;
this.$emit('input', data); this.inputValue(this.currentValue);
this.$emit('change', data)
}, },
// 删除 // 删除 - 暂时无用
del(val, index) { del(val, index) {
const newData = [...this.currentValue]; const newData = [...this.currentValue];
newData.splice(index, 1); newData.splice(index, 1);
...@@ -205,7 +241,23 @@ export default { ...@@ -205,7 +241,23 @@ export default {
// 全选 // 全选
selectAllData(flag) { selectAllData(flag) {
this.lovData = this.lovData.map(o => ({...o, _selected: flag})); this.lovData = this.lovData.map(o => ({...o, _selected: flag}));
} },
inputValue(val) {
this.fieldValue = val ? JSON.stringify(val) : '';
this.$emit('input', val);
this.$emit('change', val);
},
valueDisplay() {
console.log('this.currentValue', this.currentValue)
if (this.multiple) {
return this.currentValue.map(o => o[this.lovConfig.displayField]).join('、');
} else {
return this.currentValue[this.lovConfig.displayField];
}
},
clear() {
this.inputValue(undefined);
},
}, },
} }
</script> </script>
...@@ -213,8 +265,8 @@ export default { ...@@ -213,8 +265,8 @@ export default {
<style lang="less"> <style lang="less">
@import './index.less'; @import './index.less';
.d-lov-popup { .d-lov-popup {
// display: flex; display: flex;
// flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
// min-height: 200px; // min-height: 200px;
// max-height: 75%; // max-height: 75%;
......
src/Dynamic/FormItem/DSelect.vue → src/Dynamic/ConfigRenderComponent/DForm/FormItem/DSelect.vue
View file @ df2d5daa
...@@ -2,73 +2,94 @@ ...@@ -2,73 +2,94 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-08-01 09:55:12 * @Date: 2024-08-01 09:55:12
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-07 11:58:04 * @LastEditTime: 2024-08-09 18:20:44
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: 动态渲染-Select * @Description: 动态渲染-Select
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
--> -->
<template> <template>
<div class="d-form-item d-select"> <div class="d-form-item d-select">
<van-cell <!-- <van-cell
center center
:required="required" :required="required"
:class="disabled && 'van-field--disabled'" :class="disabled && 'van-field--disabled'"
> >
<d-label :label="label" :help="fieldConfig.help" slot="title" /> <d-label :label="label" :help="help" slot="title" />
<div @click="showSelectOption(true)" class="cell-value"> <div @click="showSelectOption(true)" class="cell-value">
<input placeholder="请选择" :value="currentValue.meaning" readonly class="value-input"/> <input placeholder="请选择" :value="currentValue.meaning" readonly class="value-input"/>
<van-icon name="arrow" /> <van-icon name="arrow" />
</div> </div>
</van-cell> </van-cell> -->
<van-field
v-model="currentValue.meaning"
:disabled="disabled"
:required="required"
:rules="[{ required, message: `请选择${label}` }]"
>
<d-label :label="label" :help="help" slot="label" />
<template #input>
<div @click="showSelectOption(true)" class="cell-value">
<span v-if="!(currentValue.length || currentValue.meaning)" class="placeholder">请选择</span>
<span v-else>{{valueDisplay()}}</span>
</div>
</template>
<template slot="right-icon" >
<van-icon name="clear" v-show="clearable && (currentValue.length || currentValue.meaning)" @click="clear"/>
<van-icon name="arrow" />
</template>
</van-field>
<van-popup v-model="visible" round position="bottom" class="d-select-popup"> <van-popup v-model="visible" round position="bottom" class="d-select-popup">
<!-- <div class="d-select-popup"> <div class="d-select-popup">
<div class="title"> <div class="title">
<span class="cancel" @click="showSelectOption(false)">取消</span> <span class="cancel" @click="showSelectOption(false)">取消</span>
<span class="title-label">请选择{{fieldConfig.description}}</span> <span class="title-label">请选择{{fieldConfig.description}}</span>
<span class="confirm"></span> <span class="confirm" @click="onConfirm">确定</span>
</div> </div>
<ul class="list"> <ul class="list">
<li <li
v-for="option in options" v-for="(option, index) in options"
:class="value === option.value ? 'item active' : 'item'" :class="option.selected ? 'item active' : 'item'"
:key="option.value" :key="option.value"
@click="selectOption(option)" @click="selectOption(option, index)"
>{{option.meaning}}</li> >{{option.meaning}}</li>
</ul> </ul>
</div> --> </div>
<van-picker
show-toolbar
:title="`请选择${fieldConfig.description}`"
:columns="columns"
@cancel="visible = false"
@confirm="onConfirm"
ref="pickerRef"
/>
</van-popup> </van-popup>
</div> </div>
</template> </template>
<script> <script>
import {Cell, Switch, Icon, Popup, Picker} from 'vant'; import {Cell, Switch, Icon, Popup, Field} from 'vant';
import DLabel from './DLabel'; import DLabel from './DLabel';
import hlsHttp from '../utils/hlsHttp'; import hlsHttp from '../../../utils/hlsHttp';
import utils from '../../scripts/hlsUtil'; import {getOrganizationId} from '../../../utils/utils';
export default { export default {
name: 'DSelect', name: 'DSelect',
components: { components: {
DLabel, DLabel,
[Picker.name]: Picker,
[Cell.name]: Cell, [Cell.name]: Cell,
[Switch.name]: Switch, [Switch.name]: Switch,
[Icon.name]: Icon, [Icon.name]: Icon,
[Popup.name]: Popup [Popup.name]: Popup,
[Field.name]: Field,
}, },
props: { props: {
fieldConfig: { fieldConfig: {
type: Object, type: Object,
default: () => {} default: () => ({})
},
multiple: {
type: Boolean,
default: true
},
help: {
type: String,
default: ''
}, },
label: { label: {
type: String, type: String,
...@@ -85,17 +106,20 @@ export default { ...@@ -85,17 +106,20 @@ export default {
required: { required: {
type: Boolean, type: Boolean,
default: false, default: false,
} },
clearable: {
type: Boolean,
default: false,
},
}, },
data () { data () {
return { return {
currentValue: { currentValue: this.multiple ? [] : {
meaning: '', meaning: '',
value: '' value: ''
}, },
visible: false, visible: false,
options: [], options: [],
columns: [],
} }
}, },
mounted() { mounted() {
...@@ -103,36 +127,65 @@ export default { ...@@ -103,36 +127,65 @@ export default {
}, },
methods: { methods: {
getOptions() { getOptions() {
hlsHttp.get(`/hpfm/v1/${utils.getOrganizationId()}/lovs/data`, {lovCode: this.fieldConfig.lookupCode}).then(res => { hlsHttp.get(`/hpfm/v1/${getOrganizationId()}/lovs/data`, {lovCode: this.fieldConfig.lookupCode}).then(res => {
this.options = res; // 处理值
this.columns = this.options.map(o => o.meaning) const selectData = [];
if (this.value) { const valueArr = (this.value || '').split(',');
const index = res.findIndex(o => o.value === this.value); this.options = res.map(item => {
this.currentValue = index > -1 ? res[index] : { if (valueArr.includes(item.value)) {
meaning: '', item.selected = true;
value: '' selectData.push({...item});
} }
this.$refs.pickerRef.setColumnIndex(index); return item;
});
if (this.multiple) { // 多选
this.currentValue = selectData;
} else {
this.currentValue = selectData.length ? selectData : { meaning: '', value: '' };
} }
}); });
}, },
showSelectOption(flag) { showSelectOption(flag) {
console.log('laile', flag)
if (!this.disabled) { if (!this.disabled) {
this.visible = flag; this.visible = flag;
} }
}, },
onInput (val) { clear() {
this.$emit('input', val); this.options = this.options.map(o => ({...o, selected: false}));
if (this.multiple) {
this.currentValue = [];
} else {
this.currentValue = {meaning: '', value: ''};
}
this.inputValue('');
}, },
onConfirm() { onConfirm() {
this.selectOption(this.options[this.$refs.pickerRef.getColumnIndex(0)]); if (this.multiple) {
}, this.currentValue = this.options.filter(o => o.selected);
selectOption(val) { const values = this.currentValue.map(o => o.value).join(',');
this.currentValue = val; this.inputValue(values);
} else {
this.currentValue = this.options.find(o => o.selected);
this.inputValue(this.currentValue.value);
}
this.showSelectOption(false); this.showSelectOption(false);
this.$emit('input', val.value); },
this.$emit('change', val.value); selectOption(val, index) {
if (!this.multiple) {
this.options = this.options.map(o => ({...o, selected: false}))
}
this.$set(this.options[index], 'selected', !this.options[index].selected);
},
inputValue(val) {
this.$emit('input', val);
this.$emit('change', val);
},
valueDisplay() {
if (this.multiple) {
return this.currentValue.map(o => o.meaning).join('、');
} else {
return this.currentValue.meaning;
}
} }
}, },
} }
...@@ -141,13 +194,6 @@ export default { ...@@ -141,13 +194,6 @@ export default {
<style lang="less"> <style lang="less">
@import './index.less'; @import './index.less';
.d-select-popup { .d-select-popup {
.van-picker__title {
color: #131313;
}
.van-picker__toolbar {
border-bottom: 1px solid #F1F0F5;
}
.title{ .title{
padding: 13px; padding: 13px;
display: flex; display: flex;
...@@ -169,17 +215,31 @@ export default { ...@@ -169,17 +215,31 @@ export default {
font-weight: 400; font-weight: 400;
} }
.list { .list {
padding: 15px 20px;
min-height: 200px; min-height: 200px;
max-height: 60%; max-height: 60%;
overflow: auto; overflow: auto;
.item { .item {
padding:6px 12px; padding:15px 30px;
text-align: center; text-align: center;
font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
color: rgba(56,63,69,0.60); color: #131313;
// border-bottom: 1px solid #ebedf0;
&.active { &.active {
font-size: 16px; position: relative;
color: #131313; font: normal normal normal 14px / 1 'vant-icon';
font: normal normal normal 14px / 1 var(--van-icon-font-family, 'vant-icon');
text-rendering: auto;
color: @primary-color;
&::after {
position: absolute;
right: 0;
top: 50%;
margin-top: -8px;
content: '\e728';
font-size: 16px;
}
} }
} }
} }
......
src/Dynamic/FormItem/DSwitch.vue → src/Dynamic/ConfigRenderComponent/DForm/FormItem/DSwitch.vue
View file @ df2d5daa
...@@ -2,33 +2,49 @@ ...@@ -2,33 +2,49 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-08-01 09:55:12 * @Date: 2024-08-01 09:55:12
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-07 10:58:08 * @LastEditTime: 2024-08-09 18:20:53
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: 动态渲染-开关组件 * @Description: 动态渲染-开关组件
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
--> -->
<template> <template>
<van-cell center class="d-form-item" :required="required" :title="label"> <!-- <van-cell center class="d-form-item" :required="required" :title="label">
<!-- <template #title>
<span v-if="required" class="required">*</span>
{{label}}
</template> -->
<template #right-icon> <template #right-icon>
<van-switch @change="checked" v-model="currentValue" :disabled="disabled" size="19" /> <van-switch @change="checked" v-model="currentValue" :disabled="disabled" size="19" />
</template> </template>
</van-cell> </van-cell> -->
<div class="d-form-item">
<van-field
:disabled="disabled"
:required="required"
:rules="[{ required, message: `请填写${label}` }]"
>
<d-label :label="label" :help="help" slot="label" />
<template #input>
<van-switch v-model="currentValue" @change="checked" :disabled="disabled" size="19" />
</template>
</van-field>
</div>
</template> </template>
<script> <script>
import {Cell, Switch} from 'vant'; import {Cell, Switch, Field} from 'vant';
import DLabel from './DLabel';
export default { export default {
name: 'DSwitch', name: 'DSwitch',
components: { components: {
[Cell.name]: Cell, [Cell.name]: Cell,
[Switch.name]: Switch, [Switch.name]: Switch,
[Field.name]: Field,
DLabel
}, },
props: { props: {
help: {
type: String,
default: ''
},
label: { label: {
type: String, type: String,
default: '' default: ''
......
src/Dynamic/FormItem/DUrl.vue → src/Dynamic/ConfigRenderComponent/DForm/FormItem/DUrl.vue
View file @ df2d5daa
...@@ -2,19 +2,16 @@ ...@@ -2,19 +2,16 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-08-01 09:55:12 * @Date: 2024-08-01 09:55:12
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-07 10:57:58 * @LastEditTime: 2024-08-09 16:22:01
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: 动态渲染-超链接组件 * @Description: 动态渲染-超链接组件
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
--> -->
<template> <template>
<van-cell center class="d-form-item d-url" :required="required" :title="label"> <van-cell center class="d-form-item d-url" :required="required">
<!-- <template #title> <d-label :label="label" :help="help" slot="title" />
<span v-if="required" class="required">*</span>
{{label}}
</template> -->
<div class="d-url-value cell-value"> <div class="d-url-value cell-value">
<img src="../assets/url-icon.png" alt="" class="right-icon" /> <img src="../../../assets/url-icon.png" alt="" class="right-icon" />
<a>{{value}}</a> <a>{{value}}</a>
</div> </div>
</van-cell> </van-cell>
...@@ -30,6 +27,10 @@ export default { ...@@ -30,6 +27,10 @@ export default {
[Checkbox.name]: Checkbox, [Checkbox.name]: Checkbox,
}, },
props: { props: {
help: {
type: String,
default: ''
},
label: { label: {
type: String, type: String,
default: '' default: ''
......
src/Dynamic/FormItem/index.less → src/Dynamic/ConfigRenderComponent/DForm/FormItem/index.less
View file @ df2d5daa
@import '../../../index.less';
.d-form-item { .d-form-item {
position: relative; position: relative;
.required { .value-input {
color: red; text-align: right;
&::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #B4B4B5;
}
} }
.placeholder { .placeholder {
text-align: right; text-align: right;
color: #B4B4B5; color: #B4B4B5;
} }
.cell-value { .cell-value {
width: 100%;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: end;
.right-icon { .right-icon {
width: 16px; width: 16px;
} }
...@@ -31,6 +38,17 @@ ...@@ -31,6 +38,17 @@
color: #c8c9cc; color: #c8c9cc;
} }
.van-field__right-icon {
display: flex;
align-items: center;
img {
width: 16px;
}
}
.van-field__error-message {
line-height: normal;
}
&:after { &:after {
position: absolute; position: absolute;
box-sizing: border-box; box-sizing: border-box;
......
src/Dynamic/ConfigRenderComponent/DForm/index.vue
View file @ df2d5daa
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 10:51:56 * @Date: 2024-07-29 10:51:56
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-07 16:21:07 * @LastEditTime: 2024-08-09 18:06:06
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: 表单渲染 * @Description: 表单渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
...@@ -11,23 +11,14 @@ ...@@ -11,23 +11,14 @@
<fragment> <fragment>
<DTitle v-if="showTitle" :title="tabInfo.description" :tabButtons="tabInfo.tabButtons || []" /> <DTitle v-if="showTitle" :title="tabInfo.description" :tabButtons="tabInfo.tabButtons || []" />
<van-form @submit="onSubmit"> <van-form @submit="onSubmit" ref="formRef" error-message-align="right" input-align="right">
<fragment v-for="field in fields" :key="field.columnName"> <fragment v-for="field in fieldList" :key="field.columnName">
<!-- <h-field
v-if="fieldComponents.indexOf(field.validationTypeDisplay) > -1"
v-model="fieldsObj[field.columnName]"
:type="getInputType(field.validationTypeDisplay)"
placeholder="请输入"
:label="field.description"
:disabled="field.readOnly"
:required="field.required"
/> -->
<d-field <d-field
v-if="fieldComponents.indexOf(field.validationTypeDisplay) > -1" v-if="fieldComponents.indexOf(field.validationTypeDisplay) > -1"
v-model="fieldsObj[field.columnName]" v-model="fieldsObj[field.columnName]"
:fieldConfig="field" :fieldConfig="field"
:type="field.validationTypeDisplay" :type="field.validationTypeDisplay"
placeholder="请输入" :help="field.help"
:label="field.description" :label="field.description"
:disabled="field.readOnly" :disabled="field.readOnly"
:required="field.required" :required="field.required"
...@@ -37,56 +28,64 @@ ...@@ -37,56 +28,64 @@
<d-switch <d-switch
v-if="field.validationTypeDisplay === 'Switch'" v-if="field.validationTypeDisplay === 'Switch'"
:label="field.description" :label="field.description"
:help="field.help"
v-model="fieldsObj[field.columnName]" v-model="fieldsObj[field.columnName]"
:disabled="field.readOnly" :disabled="field.readOnly"
:required="field.required" :required="field.required"
@change="change1" @change="fieldChange"
/> />
<d-checkbox <d-checkbox
v-if="field.validationTypeDisplay === 'CheckBox'" v-if="field.validationTypeDisplay === 'CheckBox' || field.validationTypeDisplay === 'Radio'"
:label="field.description" :label="field.description"
:help="field.help"
v-model="fieldsObj[field.columnName]" v-model="fieldsObj[field.columnName]"
:disabled="field.readOnly" :disabled="field.readOnly"
:required="field.required" :required="field.required"
@change="change1" @change="fieldChange"
/> />
<d-url <d-url
v-if="field.validationTypeDisplay === 'UrlField'" v-if="field.validationTypeDisplay === 'UrlField'"
:label="field.description" :label="field.description"
:help="field.help"
v-model="fieldsObj[field.columnName]" v-model="fieldsObj[field.columnName]"
:disabled="field.readOnly" :disabled="field.readOnly"
:required="field.required" :required="field.required"
@change="change1" @change="fieldChange"
/> />
<d-select <d-select
v-if="field.validationTypeDisplay === 'Select'" v-if="field.validationTypeDisplay === 'Select'"
v-model="fieldsObj[field.columnName]" v-model="fieldsObj[field.columnName]"
:help="field.help"
:label="field.description" :label="field.description"
:fieldConfig="field" :fieldConfig="field"
:disabled="field.readOnly" :disabled="field.readOnly"
:required="field.required" :required="field.required"
:clearable="field.clearFlag" :clearable="field.clearFlag"
@change="change1" @change="fieldChange"
/> />
<d-lov <d-lov
v-if="field.validationTypeDisplay === 'Lov'" v-if="field.validationTypeDisplay === 'Lov'"
v-model="fieldsObj[field.columnName]" v-model="fieldsObj[field.columnName]"
:record="fieldsObj"
:help="field.help"
:label="field.description" :label="field.description"
:fieldConfig="field" :fieldConfig="field"
:disabled="field.readOnly" :disabled="field.readOnly"
:required="field.required" :required="field.required"
:clearable="field.clearFlag" :clearable="field.clearFlag"
@change="change1" :cascadesParams="getCascadesParams(field)"
@change="fieldChange"
/> />
<d-date <d-date
v-if="dateComponents.indexOf(field.validationTypeDisplay) > -1" v-if="dateComponents.indexOf(field.validationTypeDisplay) > -1"
v-model="fieldsObj[field.columnName]" v-model="fieldsObj[field.columnName]"
:label="field.description" :label="field.description"
:help="field.help"
:fieldConfig="field" :fieldConfig="field"
:disabled="field.readOnly" :disabled="field.readOnly"
:required="field.required" :required="field.required"
...@@ -99,13 +98,13 @@ ...@@ -99,13 +98,13 @@
<script> <script>
import { Field, Form, Button, Cell } from 'vant'; import { Field, Form, Button, Cell } from 'vant';
import DField from '../../FormItem/DField'; import DField from './FormItem/DField';
import DSwitch from '../../FormItem/DSwitch'; import DSwitch from './FormItem/DSwitch';
import DSelect from '../../FormItem/DSelect'; import DSelect from './FormItem/DSelect';
import DLov from '../../FormItem/DLov'; import DLov from './FormItem/DLov';
import DDate from '../../FormItem/DDate'; import DDate from './FormItem/DDate';
import DCheckbox from '../../FormItem/DCheckbox'; import DCheckbox from './FormItem/DCheckbox';
import DUrl from '../../FormItem/DUrl'; import DUrl from './FormItem/DUrl';
import DTitle from '../DTitle'; import DTitle from '../DTitle';
import DButtons from '../DButtons'; import DButtons from '../DButtons';
...@@ -148,6 +147,10 @@ export default { ...@@ -148,6 +147,10 @@ export default {
type: Array, type: Array,
default: () => [] default: () => []
}, },
originFields: {
type: Array,
default: () => []
}
}, },
data () { data () {
let initFields = {} let initFields = {}
...@@ -158,18 +161,18 @@ export default { ...@@ -158,18 +161,18 @@ export default {
fieldComponents: ['TextField',"TextArea", "Currency", "NumberField", "EmailField","CentField"], fieldComponents: ['TextField',"TextArea", "Currency", "NumberField", "EmailField","CentField"],
dateComponents: ["DatePicker", "DateTimePicker"], dateComponents: ["DatePicker", "DateTimePicker"],
componentTypes: ["UrlField"], componentTypes: ["UrlField"],
fieldList: [...this.fields],
fieldsObj: {...initFields} fieldsObj: {...initFields}
} }
}, },
mounted() { mounted() {
console.log(this.fields) console.log('D-form', this.fields)
if (this.record && JSON.stringify(this.record) === '{}') { if (this.record && JSON.stringify(this.record) === '{}') {
this.fieldsObj = {...this.record}; this.fieldsObj = {...this.record};
} }
}, },
methods: { methods: {
getInputType(type) { getInputType(type) {
console.log(type)
if (type === 'TextArea') { if (type === 'TextArea') {
return 'textarea'; return 'textarea';
} }
...@@ -178,14 +181,47 @@ export default { ...@@ -178,14 +181,47 @@ export default {
} }
return 'text' return 'text'
}, },
getCascadesParams(field) {
if (field.layoutFieldCascade.length) {
const obj = {};
field.layoutFieldCascade.forEach(item => {
if (item.enableFlag === 'Y') {
const originField = this.originFields.find(o => o.columnName === item.recordField) || {};
if (originField.bind) {
const bindField = originField.bind.split('.');
if (bindField.length >1) {
obj[item.parameterField] = this.fieldsObj[bindField[0]] ? this.fieldsObj[bindField[0]][bindField[1]] : undefined;
} else {
obj[item.parameterField] = this.fieldsObj[bindField[0]];
}
} else {
obj[item.parameterField] = this.fieldsObj[item.recordField];
}
}
})
return obj;
}
return {};
},
onSubmit() { onSubmit() {
console.log('souusole', this.fieldsObj) console.log('souusole', this.fieldsObj)
}, },
change1(val) { fieldChange(val) {
console.log(val) console.log(val)
}, },
validate() { validate() {
console.log('字段娇艳', this.fieldsObj) 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])) {
// }
// })
} }
}, },
} }
......
src/Dynamic/ConfigRenderComponent/DTable/index.vue
View file @ df2d5daa
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 10:51:56 * @Date: 2024-07-29 10:51:56
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-08 22:34:26 * @LastEditTime: 2024-08-09 15:19:07
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: 表格渲染 * @Description: 表格渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<van-popup v-model="visible" position="top" class="d-table-form-popup" get-container="body"> <van-popup v-model="visible" position="top" class="d-table-form-popup" get-container="body">
<div class="form-content"> <div class="form-content">
<d-form :fields="columns" ref="dformRef" :record="record" :showTitle="false" /> <d-form :fields="columns" :originFields="originColumns" ref="dformRef" :record="record" :showTitle="false" />
</div> </div>
<div class="d-table-form-footer"> <div class="d-table-form-footer">
<van-button <van-button
...@@ -79,6 +79,10 @@ export default { ...@@ -79,6 +79,10 @@ export default {
columns: { columns: {
type: Array, type: Array,
default: () => [], default: () => [],
},
originColumns: {
type: Array,
default: () => [],
} }
}, },
data () { data () {
...@@ -99,7 +103,6 @@ export default { ...@@ -99,7 +103,6 @@ export default {
methods: { methods: {
init() { init() {
this.getList(); this.getList();
console.log('columns', this.columns)
}, },
getList() { getList() {
const params = { const params = {
...@@ -123,7 +126,7 @@ export default { ...@@ -123,7 +126,7 @@ export default {
}, },
saveRecord() { saveRecord() {
this.$refs.dformRef.validate(); this.$refs.dformRef.validate();
this.visible = false; // this.visible = false;
}, },
cancelRecord() { cancelRecord() {
this.visible = false; this.visible = false;
......
src/Dynamic/ConfigRenderComponent/DTitle/index.vue
View file @ df2d5daa
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-08-02 15:32:36 * @Date: 2024-08-02 15:32:36
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-08 22:40:26 * @LastEditTime: 2024-08-09 10:16:37
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: 组件头部渲染 * @Description: 组件头部渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
...@@ -30,38 +30,11 @@ ...@@ -30,38 +30,11 @@
@select="handlClick" @select="handlClick"
:offset="[12, 14]" :offset="[12, 14]"
> >
<template #reference> <template #reference>
<span class="title-button-more">更多</span> <span class="title-button-more">更多</span>
</template> </template>
</van-popover> </van-popover>
<!-- <fragment v-if="tabButtons.length > num"> -->
<!-- <van-popover
v-model="moreVisible"
trigger="click"
:actions="actions"
@select="handlClick"
>
<template #reference>
<span class="title-button-more" @click="more">更多</span>
</template>
</van-popover> -->
<!-- <span class="title-button-more" @click="more">更多</span>
<div class="title-button-more-content" :style="{display: moreVisible ? 'flex' : 'none'}">
<van-button
v-for="btn in hideBtns"
round
size="mini"
:key="btn.name"
:icon="buttonIcon[btn.name]"
class="title-button"
@click="handlClick(btn)"
>{{btn.description}}</van-button>
</div> -->
<!-- </fragment> -->
</div> </div>
<!-- <div class="flex-item title-btns"><d-buttons :buttons="tabButtons" /></div> -->
</div> </div>
</template> </template>
...@@ -185,18 +158,6 @@ export default { ...@@ -185,18 +158,6 @@ export default {
font-size: 12px; font-size: 12px;
color: rgba(19,19,19,0.60); color: rgba(19,19,19,0.60);
} }
// .title-button-more-content {
// z-index: 1;
// position: absolute;
// right: 0;
// top: 100%;
// display: flex;
// flex-direction: column;
// .title-button {
// margin-top: 8px;
// }
// }
} }
} }
</style> </style>
src/Dynamic/ConfigRenderComponent/QueryForm/index.vue
View file @ df2d5daa
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 10:51:56 * @Date: 2024-07-29 10:51:56
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-07 16:22:15 * @LastEditTime: 2024-08-09 14:39:09
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: 查询表单渲染 * @Description: 查询表单渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</van-search> </van-search>
<van-popup v-model="show" position="top"> <van-popup v-model="show" position="top">
<DForm :fields="fields" ref="dformRef" formType="query" :showTitle="false" /> <DForm :fields="fields" :originFields="originFields" ref="dformRef" formType="query" :showTitle="false" />
<div style="margin: 16px;"> <div style="margin: 16px;">
<h-button <h-button
type="primary" type="primary"
...@@ -39,13 +39,11 @@ ...@@ -39,13 +39,11 @@
<script> <script>
import { Search, Icon, Popup } from 'vant'; import { Search, Icon, Popup } from 'vant';
import QueryFormFields from './query-form-fields';
import DForm from '../DForm'; import DForm from '../DForm';
export default { export default {
name: 'QueryForm', name: 'QueryForm',
components: { components: {
QueryFormFields,
DForm, DForm,
[Search.name]: Search, [Search.name]: Search,
[Icon.name]: Icon, [Icon.name]: Icon,
...@@ -59,7 +57,11 @@ export default { ...@@ -59,7 +57,11 @@ export default {
tabInfo: { tabInfo: {
type: Object, type: Object,
default: () => {} default: () => {}
} },
originFields: {
type: Array,
default: () => []
}
}, },
data () { data () {
return { return {
......
src/Dynamic/ConfigRenderComponent/QueryForm/query-form-fields.vue deleted 100644 → 0
View file @ 51d624c0
<!--
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 10:51:56
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-05 17:45:52
* @Version: 1.0.0
* @Description: 查询表单渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
-->
<template>
<van-form @submit="onSubmit">
<fragment v-for="field in fields" :key="field.columnName">
<h-field
v-if="fieldComponents.includes(field.validationTypeDisplay)"
v-model="fieldsObj[field.columnName]"
:type="getInputType(field.validationTypeDisplay)"
placeholder="请输入"
:label="field.description"
:disabled="field.readOnly"
:required="field.required"
/>
<d-switch
v-if="field.validationTypeDisplay === 'Switch'"
:label="field.description"
v-model="fieldsObj[field.columnName]"
:disabled="field.readOnly"
:required="field.required"
@change="change1"
/>
<d-select
v-if="field.validationTypeDisplay === 'Select'"
v-model="fieldsObj[field.columnName]"
:label="field.description"
:fieldConfig="field"
:disabled="field.readOnly"
:required="field.required"
@change="change1"
/>
<d-lov
v-if="field.validationTypeDisplay === 'Lov'"
v-model="fieldsObj[field.columnName]"
:label="field.description"
:fieldConfig="field"
:disabled="field.readOnly"
:required="field.required"
@change="change1"
/>
</fragment>
<div style="margin: 16px;">
<!-- <van-button round type="info" native-type="submit" v-for="">重置</van-button>
<van-button round type="info" native-type="submit">提交</van-button> -->
<h-button type="primary" v-for="btn in buttons" :key="btn.name" style="margin-left: 10px">{{btn.description}}</h-button>
</div>
</van-form>
</template>
<script>
import { Field, Form, Button, Cell, Switch } from 'vant';
import DSwitch from '../../FormItem/DSwitch';
import DSelect from '../../FormItem/DSelect';
import DLov from '../../FormItem/DLov';
export default {
name: 'QueryFormFields',
components: {
[Form.name]: Form,
[Field.name]: Field,
[Button.name]: Button,
[Cell.name]: Cell,
DSwitch,
DSelect,
DLov
},
props: {
fields: {
type: Array,
default: () => []
},
buttons: {
type: Array,
default: () => []
}
},
data () {
let initFields = {}
this.fields.forEach(item => {
initFields[item.columnName] = null;
})
return {
fieldComponents: ['TextField',"TextArea", "Currency", "NumberField", "EmailField","CentField"],
componentTypes: ['TextField', "TextArea", "Currency", "NumberField", "EmailField", "Select", "DatePicker",
"DateTimePicker", "CheckBox", "Switch", "Lov", "UrlField", "CentField"],
fieldsObj: {...initFields}
}
},
methods: {
getInputType(type) {
if (type === 'TextArea') {
return 'textarea';
}
if (['NumberField', 'Currency', 'CentField'].includes(type)) {
return 'number';
}
return 'text'
},
onSubmit() {
console.log('souusole', this.fieldsObj)
},
change1(val) {
console.log(val)
}
},
}
</script>
<style scoped lang="less">
</style>
src/Dynamic/ConfigRenderComponent/init.jsx
View file @ df2d5daa
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 09:41:54 * @Date: 2024-07-30 09:41:54
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-07 15:55:35 * @LastEditTime: 2024-08-09 11:10:49
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: * @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
...@@ -102,18 +102,9 @@ const ConfigRenderComponent = { ...@@ -102,18 +102,9 @@ const ConfigRenderComponent = {
.withParentTabCode(parentTabCode) .withParentTabCode(parentTabCode)
// .withComponentRenderers(componentRenderers) // .withComponentRenderers(componentRenderers)
.build(); .build();
// console.log('===init', columns, tabType)
// const buttons = new TabButtonBuilder()
// .withCreateElement(createElement)
// .withType(tabType)
// .withTabButtons(tabButtons)
// .withTabCode(tabCode)
// .withLayoutCode(childrenTab.layoutCode || layoutCode)
// // .withComponentButtons(componentButtons)
// // .withReadOnly(param[Constants.FIELD_READONLY])
// .build();
// return <div>{tabCode}-{description} {buttons}</div>
const findField = find(tabFields, { formatCascadeFlag: 'Y' }); const findField = find(tabFields, { formatCascadeFlag: 'Y' });
return new ComponentBuilder() return new ComponentBuilder()
// .withDataSet(dataSet) // .withDataSet(dataSet)
// .withHistoryDataSet(dataSets[`history_${dataSetName}`]) // .withHistoryDataSet(dataSets[`history_${dataSetName}`])
......
src/Dynamic/ConfigRenderComponent/utils.jsx
View file @ df2d5daa
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 21:21:37 * @Date: 2024-07-30 21:21:37
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-07 16:21:45 * @LastEditTime: 2024-08-09 14:44:50
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: * @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
*/ */
import Vue from 'vue'; import Vue from 'vue';
import {compact, head, isFunction, isNil, isNumber, isUndefined, upperFirst} from 'lodash'; import {compact, head, isFunction, isNil, isNumber, isUndefined, upperFirst} from 'lodash';
import utils from '../../scripts/hlsUtil'; import {getCurrentUser} from '../utils/utils';
/** /**
* 格式化代码 * 格式化代码
...@@ -101,33 +101,35 @@ export class ColumnBuilder extends BaseBuilder { ...@@ -101,33 +101,35 @@ export class ColumnBuilder extends BaseBuilder {
*/ */
initFields(fields, cascadeKey = '') { initFields(fields, cascadeKey = '') {
return fields const newFields = fields.map(field => {
.filter(field => isNumber(field.columnSeq) && isNumber(field.rowSeq)) return {
.map(field => { ...field,
return { readOnly: field.inputModeDisplay === "READONLY",
...field, required: field.inputModeDisplay === "REQUIRED",
readOnly: field.inputModeDisplay === "READONLY", clearFlag: field.clearButton === 'Y'
required: field.inputModeDisplay === "REQUIRED", }
clearFlag: field.clearButton === 'Y' // if (field.validationTypeDisplay === 'UrlField') {
} // const {renderer} = this.getCustomizedRenderer(field.columnName, field);
// if (field.validationTypeDisplay === 'UrlField') { // // if (renderer instanceof FormField) {
// const {renderer} = this.getCustomizedRenderer(field.columnName, field); // return renderer || <div label={field.description}>{field.columnName}</div>;
// // if (renderer instanceof FormField) { // /* } else {
// return renderer || <div label={field.description}>{field.columnName}</div>; // return renderer || <div label={field.description} newLine={field.columnSeq === 1}>{field.columnName}</div>;
// /* } else { // } */
// return renderer || <div label={field.description} newLine={field.columnSeq === 1}>{field.columnName}</div>; // }
// } */ // const dataClass= `${this.layoutCode}-${this.tabCode}-${field.columnName}`.toLowerCase();
// } // return FormField({
// const dataClass= `${this.layoutCode}-${this.tabCode}-${field.columnName}`.toLowerCase(); // ...field,
// return FormField({ // key: field.id,
// ...field, // cascadeKey,
// key: field.id, // dataSet: this.dataSet,
// cascadeKey, // 'data-class':dataClass,
// dataSet: this.dataSet, // // showTitle: true,
// 'data-class':dataClass, // });
// // showTitle: true, });
// }); return {
}); fields: newFields.filter(field => isNumber(field.columnSeq) && isNumber(field.rowSeq)),
_originFields: newFields,
};
} }
/** /**
...@@ -165,25 +167,19 @@ export class ColumnBuilder extends BaseBuilder { ...@@ -165,25 +167,19 @@ export class ColumnBuilder extends BaseBuilder {
switch (this.type) { switch (this.type) {
case 'Table': case 'Table':
case 'Tree': { case 'Tree': {
let titleField = {}; const newFields = this.fields.map(field => { // .filter(o => o.isVisible === 'Y')
const newFields = []; return {
this.fields.filter(o => o.isVisible === 'Y').map(field => {
const item = {
...field, ...field,
readOnly: field.inputModeDisplay === "READONLY", readOnly: field.inputModeDisplay === "READONLY",
required: field.inputModeDisplay === "REQUIRED", required: field.inputModeDisplay === "REQUIRED",
clearFlag: field.clearButton === 'Y' clearFlag: field.clearButton === 'Y'
} }
if (field.fieldStats === '1') { // 标题
titleField = {
...item,
isTitle: true
}
} else {
newFields.push({...item})
}
}); });
return newFields; // return newFields;
return {
fields: newFields.filter(o => o.isVisible === 'Y'),
_originFields: newFields,
}
} }
case 'Form': case 'Form':
return this.parseFormFields(); return this.parseFormFields();
...@@ -467,7 +463,7 @@ class BaseComponentBuilder extends BaseBuilder { ...@@ -467,7 +463,7 @@ class BaseComponentBuilder extends BaseBuilder {
// } // }
urlHandler(url) { urlHandler(url) {
const allInfo = { ...utils.getCurrentUser(), ...this.routeParams }; const allInfo = { ...getCurrentUser(), ...this.routeParams };
if (url === undefined || url === null) { if (url === undefined || url === null) {
return url; return url;
} }
...@@ -511,7 +507,8 @@ class BaseComponentBuilder extends BaseBuilder { ...@@ -511,7 +507,8 @@ class BaseComponentBuilder extends BaseBuilder {
key: refKey, key: refKey,
tabInfo: this.props, tabInfo: this.props,
buttons: this.buttons, buttons: this.buttons,
columns: this.columns, columns: this.columns.fields,
originColumns: this.columns._originFields
} }
}, },
[] []
...@@ -553,7 +550,8 @@ class BaseComponentBuilder extends BaseBuilder { ...@@ -553,7 +550,8 @@ class BaseComponentBuilder extends BaseBuilder {
props: { props: {
formType: 'normal', formType: 'normal',
showTitle: true, showTitle: true,
fields: newFields, fields: newFields.fields,
originFields: newFields._originFields,
tabInfo: this.props, tabInfo: this.props,
} }
} }
...@@ -564,6 +562,7 @@ class BaseComponentBuilder extends BaseBuilder { ...@@ -564,6 +562,7 @@ class BaseComponentBuilder extends BaseBuilder {
{ {
props: { props: {
fields: newFields, fields: newFields,
originFields: newFields._originFields,
buttons: this.props.tabButtons, buttons: this.props.tabButtons,
tabInfo: this.props, tabInfo: this.props,
} }
...@@ -630,9 +629,6 @@ export class ComponentBuilder extends BaseComponentBuilder { ...@@ -630,9 +629,6 @@ export class ComponentBuilder extends BaseComponentBuilder {
wrapTab(tab, tabType, cols) { wrapTab(tab, tabType, cols) {
const {description, compareField} = this.props;
const {cascadeKey, historyButtonName, currentButtonName} = this;
return super.wrapTab(tab, tabType, cols); return super.wrapTab(tab, tabType, cols);
} }
} }
\ No newline at end of file
src/Dynamic/LayoutButtons/index.vue
View file @ df2d5daa
...@@ -2,28 +2,13 @@ ...@@ -2,28 +2,13 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-07-31 15:09:30 * @Date: 2024-07-31 15:09:30
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-08 22:15:10 * @LastEditTime: 2024-08-09 17:44:54
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: 页面按钮渲染 * @Description: 页面按钮渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
--> -->
<template> <template>
<div class="layout-buttons" :id="id"> <div class="layout-buttons" :id="id">
<!-- <div v-if="layoutButtons.length > num" class="layout-buttons-more">
<span class="layout-button-more" @click="more"><van-icon name="more-o" />更多</span>
<div class="layout-button-more-content" :style="{display: moreVisible ? 'flex' : 'none'}">
<van-button
v-for="btn in hideBtns"
round
type="info"
:key="btn.name"
:icon="buttonIcon[btn.name]"
class="layout-button"
@click="handlClick(btn)"
>{{btn.description}}</van-button>
</div>
</div> -->
<van-popover <van-popover
v-if="layoutButtons.length > num" v-if="layoutButtons.length > num"
v-model="moreVisible" v-model="moreVisible"
...@@ -73,7 +58,7 @@ export default { ...@@ -73,7 +58,7 @@ export default {
inject: ['config'], inject: ['config'],
data () { data () {
return { return {
id: uuidv4(), id: 'layoutButton' + uuidv4(),
configInfo: {}, // 配置信息 configInfo: {}, // 配置信息
layoutButtons: [], // 页面按钮 layoutButtons: [], // 页面按钮
num: 2, num: 2,
......
src/Dynamic/index.vue
View file @ df2d5daa
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 10:51:56 * @Date: 2024-07-29 10:51:56
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-08 17:48:08 * @LastEditTime: 2024-08-09 17:48:37
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: * @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
import {Loading} from 'vant'; import {Loading} from 'vant';
import LayoutButtons from './LayoutButtons'; import LayoutButtons from './LayoutButtons';
import ConfigRenderComponent from './ConfigRenderComponent/init.jsx'; import ConfigRenderComponent from './ConfigRenderComponent/init.jsx';
import {query, queryRoute} from './store' import {query, queryRoute} from './service'
import './index.less' import './index.less'
export default { export default {
...@@ -66,7 +66,7 @@ export default { ...@@ -66,7 +66,7 @@ export default {
}; };
}, },
created() { created() {
window.localStorage.setItem('access_token', '38581e99-54c3-4252-9b4b-990f89576b08'); window.localStorage.setItem('access_token', '75d8f55f-4043-454c-a647-ef62a9bf7e5b');
this.queryParams = { this.queryParams = {
...this.$route.params, ...this.$route.params,
...this.$route.query ...this.$route.query
......
src/Dynamic/service.js 0 → 100644
View file @ df2d5daa
/*
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-09 10:54:02
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-09 14:42:17
* @Version: 1.0.0
* @Description: 页面配置请求
* @Copyright: Copyright (c) 2021, Hand-RongJing
*/
import {getOrganizationId} from './utils/utils';
import {get} from './utils/hlsHttp'
export async function query(layoutCode, param) {
let config = {
datas: {},
param: {},
};
try {
const data = await get(`/hllc/v1/${getOrganizationId()}/doc-layouts/config/app/${layoutCode}`, param);
config.param = param;
config.datas = data || {};
return config;
} catch (err) {
return config;
}
}
export async function queryRoute(match, param) {
let config = {
datas: {},
param: {},
};
try {
const res = await get(
`/hllc/v1/${getOrganizationId()}/rule-engine-low-code?route=${window.encodeURIComponent(
match
)}`
);
if (res) {
const data = await this.query(res.routeResultValue, param);
return data;
} else {
return config;
}
} catch (err) {
return config;
}
}
src/Dynamic/store/index.js
View file @ df2d5daa
/* /*
* @Description: In User Settings Edit * @Author: zong.wang01@hand-china.com
* @Author: huangtianyang * @Date: 2024-07-29 16:35:07
* @Date: 2020-01-06 13:32 * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-09 10:58:29
* @Version: 1.0.0
* @Description: 状态管理
* @Copyright: Copyright (c) 2021, Hand-RongJing
*/ */
// import Vue from 'vue'
import Vuex from 'vuex'
import utils from '../../scripts/hlsUtil'; // Vue.use(Vuex)
import {get} from '../utils/hlsHttp'
// lowcode/lowcode_page_config/lowcode_page_tab/FYSQD_NEW/10141?typeId=1305852827234414594&documentCategory=801009 const store = new Vuex.Store({
state: {
export async function query(layoutCode, param) { layoutConfig: {
let config = {
datas: {}, }
param: {}, },
}; mutations: {
try { saveLayoutConfig (code, config) {
const data = await get(`/hllc/v1/${utils.getOrganizationId()}/doc-layouts/config/app/${layoutCode}`, param); state.layoutConfig[code] = config;
config.param = param;
config.datas = data || {};
return config;
} catch (err) {
return config;
}
}
export async function queryRoute(match, param) {
let config = {
datas: {},
param: {},
};
try {
const res = await get(
`/hllc/v1/${getOrganizationId()}/rule-engine-low-code?route=${window.encodeURIComponent(
match
)}`
);
if (res) {
const data = await this.query(res.routeResultValue, param);
return data;
} else {
return config;
} }
} catch (err) {
return config;
} }
});
}
export default store;
\ No newline at end of file
src/Dynamic/utils/utils.js
View file @ df2d5daa
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com * @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 14:39:47 * @Date: 2024-07-30 14:39:47
* @LastEditors: zong.wang01@hand-china.com * @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-07-30 14:39:49 * @LastEditTime: 2024-08-09 15:12:26
* @Version: 1.0.0 * @Version: 1.0.0
* @Description: 工具类 * @Description: 工具类
* @Copyright: Copyright (c) 2021, Hand-RongJing * @Copyright: Copyright (c) 2021, Hand-RongJing
...@@ -29,5 +29,94 @@ const getHeaderExtrasProp = (layoutCode, tabCode, props) => { ...@@ -29,5 +29,94 @@ const getHeaderExtrasProp = (layoutCode, tabCode, props) => {
); );
}; };
/**
* 判断对象为空
* @param v
* @return {boolean}
*/
const isEmpty = (v) => {
if (typeof v === 'undefined') {
return true
}
if (v === undefined || v === 'undefined' || v === null || v === '' || v === 'null') {
return true
}
switch (typeof v) {
case 'string' :
if (v.trim().length === 0) {
return true
}
break
case 'boolean' :
if (!v) {
return true
}
break
case 'object' :
return undefined !== v.length && v.length === 0
}
return false
}
const getOrganizationId = () => {
return 0;
// const globalState = getDvaApp()._store.getState();
// const user = globalState.user || {};
// switch (system) {
// case 'hls': // return getCurrentOrganizationId();
// case 'hcf':
// // return 0;
// return user?.currentUser.tenantId;
// default:
// break;
// }
};
const getCurrentUser = () => {
return {
"id": 1,
"loginName": "admin",
"email": "admin@hzero.com",
"organizationId": 0,
"realName": "超级管理员",
"phone": "18666666661",
"internationalTelCode": "+86",
"imageUrl": "http://hlsapp.hand-china.com/hls-file/public/hiam02/0/fd6ca1bdf3254e499b568f15cb8d3f51@WechatIMG775.jpg",
"language": "zh_CN",
"languageName": "简体中文",
"timeZone": "GMT+8",
"lastPasswordUpdatedAt": "2024-06-05 11:38:35",
"countryId": 1,
"countryName": "安道尔",
"regionId": 0,
"phoneCheckFlag": 1,
"emailCheckFlag": 1,
"passwordResetFlag": 1,
"tenantName": "融租易",
"tenantNum": "HLS",
"dateFormat": "YYYY-MM-DD",
"timeFormat": "HH:mm:ss",
"dateTimeFormat": "YYYY-MM-DD HH:mm:ss",
"changePasswordFlag": 0,
"title": "融租易5.0",
"logo": "http://leafdev.hand-china.com/hls-file/public/hpfm05/0/d21ff00430f146caa234a8e5ddde2320@融租易icon.png",
"menuLayout": "inline",
"menuLayoutTheme": "default",
"roleMergeFlag": 0,
"tenantId": 0,
"currentRoleId": 1,
"currentRoleCode": "role/organization/default/administrator",
"currentRoleName": "租户管理员",
"currentRoleLevel": "organization",
"currentRoleLabels": [
"TENANT_ADMIN"
],
"favicon": "",
"dataHierarchyFlag": 0,
"recentAccessTenantList": []
};
};
export { getCustomizedProp, getCustomized,getHeaderExtrasProp }; export { getCustomizedProp, getCustomized,getHeaderExtrasProp, getOrganizationId, getCurrentUser };
src/global.less
View file @ df2d5daa
...@@ -8,6 +8,9 @@ ...@@ -8,6 +8,9 @@
@button-default-background-color: #f2f2f2; @button-default-background-color: #f2f2f2;
@button-default-color: rgba(19,19,19,0.80); @button-default-color: rgba(19,19,19,0.80);
// field
@field-error-message-color: #FF4837;
// picker组件 // picker组件
@text-link-color: @primary-color; @text-link-color: @primary-color;
@gray-6: #666666; @gray-6: #666666;
......
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