Commit 1e780e6d authored by 王纵's avatar 王纵

表单提供change事件回调

parent e74e91c7
......@@ -90,7 +90,7 @@ export default {
checked (flag) {
if (!this.disabled) {
this.$emit('input', flag)
this.$emit('change', flag)
this.$emit('change', this.name, flag)
}
},
},
......
......@@ -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-19 11:20:34
* @LastEditTime: 2024-10-12 11:31:24
* @Version: 1.0.0
* @Description: 动态渲染-文本框组件
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -123,8 +123,8 @@ export default {
},
methods: {
fieldInput (val) {
this.$emit('input', Number(val));
this.$emit('change', Number(val));
this.$emit('input', val ? Number(val) : '')
this.$emit('change', this.name, val ? Number(val) : '')
},
onFocus() {
this.focused = true;
......
......@@ -2,22 +2,13 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-01 09:55:12
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-09-19 15:34:42
* @LastEditTime: 2024-10-12 11:30:35
* @Version: 1.0.0
* @Description: 动态渲染-日期组件
* @Copyright: Copyright (c) 2021, Hand-RongJing
-->
<template>
<div class="d-form-item">
<!-- <van-cell center :required="required">
<d-label :label="label" :help="help" slot="title" />
<span @click="showDate(true)" class="cell-value">
<input placeholder="请选择" :value="currentValue" readonly class="value-input"/>
<van-icon name="clear" v-show="clearable && currentValue" @click="clear"/>
<img src="../../../assets/date-icon.png" alt="" class="right-icon" v-show="!(clearable && currentValue)"/>
</span>
</van-cell> -->
<van-field
readonly
v-model="description"
......@@ -64,9 +55,9 @@
</template>
<script>
import {Cell, DatetimePicker, Popup, Icon, Field, Picker} from 'vant';
import DLabel from './DLabel';
import {dateFormat} from '../../../utils/utils';
import {Cell, DatetimePicker, Popup, Icon, Field, Picker} from 'vant'
import DLabel from './DLabel'
import {dateFormat} from '../../../utils/utils'
export default {
name: 'DDate',
......@@ -86,7 +77,7 @@ export default {
},
type: {
type: String,
default: 'date', //'DatePicker'
default: 'date' // 'DatePicker'
},
name: {
type: String,
......@@ -102,19 +93,19 @@ export default {
},
value: {
type: String,
default: "",
default: ''
},
disabled: {
type: Boolean,
default: false,
default: false
},
required: {
type: Boolean,
default: false,
default: false
},
clearable: {
type: Boolean,
default: false,
default: false
}
},
data () {
......@@ -127,94 +118,97 @@ export default {
month: 'year-month',
year: 'year-month',
week: 'date',
date: 'date',
date: 'date'
},
currentValue: '',
description: '',
pickerValue: '',
visible: false,
columns: [],
columns: []
}
},
watch: {
value: function(newValue, oldValue) {
value: function (newValue, oldValue) {
if (newValue !== oldValue && this.currentValue !== newValue) {
this.currentValue = newValue;
this.currentValue = newValue
if (newValue) {
this.dateParse(this.currentValue);
this.dateParse(this.currentValue)
}
}
}
},
mounted() {
this.init();
mounted () {
this.init()
},
methods: {
init() {
init () {
this.currentValue = this.value
if (this.value) {
this.dateParse(this.currentValue)
}
if (this.type === 'year') {
this.setColumns();
this.setColumns()
}
},
setColumns() {
const currentYear = new Date().getFullYear();
const cols = [currentYear];
setColumns () {
const currentYear = new Date().getFullYear()
const cols = [currentYear]
for (let i = 1; i <= 10; i++) {
cols.unshift(currentYear - i);
cols.push(currentYear + i);
cols.unshift(currentYear - i)
cols.push(currentYear + i)
}
this.columns = cols;
this.columns = cols
},
dateParse(val) {
dateParse (val) {
if (val) {
const {value, description} = dateFormat(this.type, new Date(val));
this.currentValue = value;
this.description = description;
const {value, description} = dateFormat(this.type, new Date(val))
this.currentValue = value
this.description = description
} else {
this.currentValue = val;
this.description = val;
this.currentValue = val
this.description = val
}
},
filter(type, options) {
filter (type, options) {
if (this.type === 'year' && type === 'month') {
return ['', '', '', ''];
return ['', '', '', '']
}
return options;
return options
},
clear(e) {
clear (e) {
e.preventDefault()
e.stopPropagation()
this.dateConfirm('')
},
showDate(flag) {
showDate (flag) {
if (!this.disabled) {
this.visible = flag;
this.visible = flag
if (flag) {
this.pickerValue = this.currentValue ? new Date(this.currentValue) : '';
this.pickerValue = this.currentValue ? new Date(this.currentValue) : ''
if (this.type === 'year') {
this.$refs.yearRef.setValues([this.description]);
this.$refs.yearRef.setValues([this.description])
}
}
}
},
dateConfirm(date) {
this.showDate(false);
dateConfirm (date) {
this.showDate(false)
if (date) {
if (this.type === 'year') {
this.currentValue = `${date}-00-00`;
this.description = date;
this.currentValue = `${date}-00-00`
this.description = date
} else {
const {value, description} = dateFormat(this.type, date);
this.currentValue = value;
this.description = description;
const {value, description} = dateFormat(this.type, date)
this.currentValue = value
this.description = description
}
} else {
this.currentValue = '';
this.description = '';
this.currentValue = ''
this.description = ''
}
this.$emit('input', this.currentValue)
this.$emit('change', this.name, this.currentValue)
}
this.$emit('input', this.currentValue);
this.$emit('change', this.currentValue);
},
// dateFormat(type, time) { // 时间格式化 2019-09-08
// let year = time.getFullYear();
// let month = this.suppField(time.getMonth() + 1);
......@@ -247,7 +241,7 @@ export default {
// suppField(num) { // 补充显示
// return `${num < 10 ? `0`: ''}${num}`;
// }
},
}
}
</script>
......
......@@ -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-19 11:22:50
* @LastEditTime: 2024-10-12 11:31:50
* @Version: 1.0.0
* @Description: 动态渲染-文本框组件
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -36,11 +36,11 @@
</template>
<script>
import {Cell, Field, Icon} from 'vant';
import DLabel from './DLabel';
import {Cell, Field, Icon} from 'vant'
import DLabel from './DLabel'
export default {
name: 'DCheckbox',
name: 'DField',
components: {
[Cell.name]: Cell,
[Field.name]: Field,
......@@ -50,11 +50,11 @@ export default {
props: {
fieldConfig: {
type: Object,
default: {}
default: () => ({})
},
type: {
type: String,
default: 'TextField',
default: 'TextField'
},
name: {
type: String,
......@@ -69,20 +69,20 @@ export default {
default: ''
},
value: {
type: String | Number,
default: '',
type: [String, Number],
default: ''
},
disabled: {
type: Boolean,
default: false,
default: false
},
required: {
type: Boolean,
default: false,
default: false
},
clearable: {
type: Boolean,
default: false,
default: false
}
},
data () {
......@@ -94,22 +94,22 @@ export default {
EmailField: 'text',
CentField: 'number'
},
currentValue: '',
}
},
watch: {
value: function(newValue, oldValue) {
if (newValue !== oldValue && this.currentValue !== newValue) {
this.currentValue = newValue;
}
computed: {
currentValue: {
get() {
return this.value
},
set() {}
}
},
methods: {
fieldInput (val) {
this.$emit('input', val)
this.$emit('change', val)
},
},
this.$emit('change', this.name, val)
}
}
}
</script>
......
......@@ -2,28 +2,13 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-01 09:55:12
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-09-19 15:34:48
* @LastEditTime: 2024-10-12 15:00:31
* @Version: 1.0.0
* @Description: 动态渲染-Lov
* @Copyright: Copyright (c) 2021, Hand-RongJing
-->
<template>
<div class="d-form-item d-lov">
<!-- <van-cell center :required="required" :title="label">
<d-label :label="label" :help="help" slot="title" />
<template #right-icon>
<span @click="changeVisible(true)">
<span v-if="multiple">
<van-tag v-for="(val, index) in currentValue" closeable size="medium" @close="del(val, index)" :key="val[lovConfig.valueField]">{{val[lovConfig.displayField]}}</van-tag>
</span>
<span v-if="!currentValue || currentValue.length === 0" class="placeholder">请选择</span>
<span v-else>{{currentValue[lovConfig.displayField || 'label']}}</span>
</span>
<van-icon name="arrow" style="margin-left: 5px" />
</template>
</van-cell> -->
<van-field
v-model="fieldValue"
:name="name"
......@@ -37,12 +22,12 @@
<template #input>
<div @click="changeVisible(true)" class="cell-value">
<span v-if="!currentValue || currentValue.length === 0" class="placeholder">{{disabled ? '' : '请选择'}}</span>
<span v-if="!fieldValue" class="placeholder">{{disabled ? '' : '请选择'}}</span>
<span v-else>{{valueDisplay()}}</span>
</div>
</template>
<template #right-icon >
<van-icon name="clear" v-show="!disabled && clearable && !(!currentValue || currentValue.length === 0)" @click="clear"/>
<van-icon name="clear" v-show="!disabled && clearable && fieldValue" @click="clear"/>
<van-icon name="arrow" v-show="!disabled" />
</template>
</van-field>
......@@ -59,10 +44,14 @@
placeholder="搜索"
@search="onSearch"
/>
<d-scroll
ref="scroll"
:pullUp="true"
@pullingUp="getLovData">
<van-list
v-model="loading"
:finished="finished"
:immediateCheck="false"
finished-text="没有更多了"
@load="getLovData"
style="overflow: auto;"
>
<ul class="list">
<li
v-for="item in lovData"
......@@ -86,7 +75,7 @@
</div>
</li>
</ul>
</d-scroll>
</van-list>
<div class="footer" v-if="multiple">
<van-checkbox shape="square" v-model="selectAllFlag" @change="selectAllData">全选</van-checkbox>
<button type="primary" @click="confirm">确定</button>
......@@ -96,16 +85,15 @@
</template>
<script>
import {Cell, Switch, Icon, Popup, Search, Checkbox, Tag, Field} from 'vant';
import DLabel from './DLabel';
import {DScroll} from '../../../LayoutComponents';
import {getLovConfig, getLovData} from '../../../service';
import {Cell, Switch, Icon, Popup, Search, Checkbox, Tag, Field, List} from 'vant'
import DLabel from './DLabel'
import {getLovConfig, getLovData} from '../../../service'
export default {
name: 'DLov',
components: {
DLabel,
DScroll,
[List.name]: List,
[Cell.name]: Cell,
[Switch.name]: Switch,
[Icon.name]: Icon,
......@@ -113,7 +101,7 @@ export default {
[Search.name]: Search,
[Checkbox.name]: Checkbox,
[Tag.name]: Tag,
[Field.name]: Field,
[Field.name]: Field
},
props: {
fieldConfig: {
......@@ -133,24 +121,24 @@ export default {
default: ''
},
value: {
type: Object | Array,
default: () => ({}),
type: [Object, Array],
default: () => undefined
},
disabled: {
type: Boolean,
default: false,
default: false
},
required: {
type: Boolean,
default: false,
default: false
},
multiple: { // 是否多选
type: Boolean,
default: false,
default: false
},
clearable: {
type: Boolean,
default: false,
default: false
},
cascadesParams: {
type: Object,
......@@ -162,7 +150,7 @@ export default {
fieldValue: '', // 该变量纯粹用来判断是否有选值,给form校验用
lovConfig: {}, // lov配置
lovData: [],
searchValue: '', //搜索字段
searchValue: '', // 搜索字段
selectAllFlag: false,
page: 0,
size: 10,
......@@ -170,21 +158,27 @@ export default {
testValue: false,
visible: false,
options: [],
loading: false,
finished: false,
}
},
watch: {
value: {
handler(newValue, oldValue) {
handler (newValue, oldValue) {
console.log(' this.handler', newValue, oldValue)
if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
this.currentValue = newValue;
this.fieldValue = newValue ? JSON.stringify(newValue) : '';
this.currentValue = newValue
this.fieldValue = newValue ? JSON.stringify(newValue) : ''
}
},
deep: true
}
},
mounted() {
this.getLovConfig();
mounted () {
this.currentValue = this.value
this.fieldValue = this.value ? JSON.stringify(this.value) : ''
console.log(' this.currentValue', this.currentValue)
this.getLovConfig()
},
methods: {
getLovConfig() {
......@@ -192,83 +186,80 @@ export default {
this.lovConfig = res;
});
},
getLovData() {
const {queryUrl, lovCode} = this.lovConfig;
getLovData () {
const {queryUrl, lovCode, queryFields} = this.lovConfig
const params = {
lovCode,
page: this.page,
size: this.size,
[queryFields[0].field]: this.searchValue,
...this.cascadesParams
};
}
this.loading = true
getLovData(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) {
this.page = this.page + 1;
this.$refs.scroll.update(false)
this.page = this.page + 1
this.finished = false
} else {
this.$refs.scroll.update(true)
this.finished = true
}
});
}).finally(() => {
this.loading = false
})
},
changeVisible(flag) {
changeVisible (flag) {
if (!this.disabled) {
this.visible = flag;
this.visible = flag
if (flag) {
if (this.cascadesParams && JSON.stringify(this.cascadesParams) !== '{}') { // 存在级联查询参数
this.page = 0;
this.getLovData();
this.page = 0
this.lovData = []
this.getLovData()
} else if (this.lovData.length === 0) {
this.getLovData()
}
}
}
},
selectData(val) {
this.currentValue = val;
this.changeVisible(false);
this.inputValue(this.currentValue);
selectData (val) {
this.currentValue = val
this.changeVisible(false)
this.inputValue(this.currentValue)
},
// 确定
confirm() {
this.changeVisible(false);
const data = this.lovData.filter(o => o._selected);
this.currentValue = data;
this.inputValue(this.currentValue);
confirm () {
this.changeVisible(false)
const data = this.lovData.filter(o => o._selected)
this.currentValue = data
this.inputValue(this.currentValue)
},
// 删除 - 暂时无用
del(val, index) {
const newData = [...this.currentValue];
newData.splice(index, 1);
this.currentValue = [...newData];
this.$emit('input', this.currentValue);
this.$emit('change', this.currentValue);
const lindex = this.lovData.findIndex(o => o[this.lovConfig.valueField] === o[this.lovConfig.valueField]);
this.lovData[lindex]._selected = false;
},
onSearch() {
onSearch () {
this.page = 0;
this.lovData = [];
this.getLovData();
},
// 全选
selectAllData(flag) {
this.lovData = this.lovData.map(o => ({...o, _selected: flag}));
selectAllData (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);
inputValue (val) {
this.fieldValue = val ? JSON.stringify(val) : ''
this.$emit('input', val)
this.$emit('change', this.name, val)
},
valueDisplay() {
console.log('this.currentValue', this.currentValue)
valueDisplay () {
if (this.multiple) {
return this.currentValue.map(o => o[this.lovConfig.displayField]).join('、');
return this.currentValue.map(o => o[this.lovConfig.displayField]).join('、')
} else {
return this.currentValue[this.lovConfig.displayField];
return this.currentValue[this.lovConfig.displayField]
}
},
clear() {
this.inputValue(undefined);
},
},
clear () {
this.currentValue = undefined
this.inputValue(undefined)
}
}
}
</script>
......@@ -340,6 +331,5 @@ export default {
flex: 1;
}
}
</style>
......@@ -2,26 +2,13 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-01 09:55:12
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-09-19 15:34:53
* @LastEditTime: 2024-10-12 14:56:42
* @Version: 1.0.0
* @Description: 动态渲染-Select
* @Copyright: Copyright (c) 2021, Hand-RongJing
-->
<template>
<div class="d-form-item d-select">
<!-- <van-cell
center
:required="required"
:class="disabled && 'van-field--disabled'"
>
<d-label :label="label" :help="help" slot="title" />
<div @click="showSelectOption(true)" class="cell-value">
<input placeholder="请选择" :value="currentValue.meaning" readonly class="value-input"/>
<van-icon name="arrow" />
</div>
</van-cell> -->
<van-field
v-model="fieldValue"
:name="name"
......@@ -44,7 +31,6 @@
</template>
</van-field>
<van-popup v-model="visible" round position="bottom" class="d-select-popup" get-container="body">
<div class="title">
<span class="cancel" @click="showSelectOption(false)">取消</span>
......@@ -101,20 +87,20 @@ export default {
default: ''
},
value: {
type: String | Number,
default: '',
type: [String, Number],
default: ''
},
disabled: {
type: Boolean,
default: false,
default: false
},
required: {
type: Boolean,
default: false,
default: false
},
clearable: {
type: Boolean,
default: false,
default: false
},
cascadesParams: {
type: Object,
......@@ -129,39 +115,60 @@ export default {
value: ''
},
visible: false,
options: [],
options: []
}
},
inject: ['dynamicInfo'],
watch: {
value: function(newValue, oldValue) {
value: function (newValue, oldValue) {
if (newValue !== oldValue) {
if (this.multiple) {
if (JSON.stringify(newValue) !== JSON.stringify(this.currentValue)) {
this.formatValue();
this.formatValue()
}
} else if (newValue !== this.currentValue.value) {
this.formatValue();
this.formatValue()
}
}
},
cascadesParams: {
handler(newValue, oldValue) {
handler (newValue, oldValue) {
if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
this.getOptions()
}
},
deep: true
},
fieldConfig: {
handler (newValue, oldValue) {
if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
if (JSON.stringify(newValue.queryParams) !== JSON.stringify(oldValue.queryParams) ||
newValue.lookupCode !== oldValue.lookupCode ||
JSON.stringify(newValue.selectOptions) !== JSON.stringify(oldValue.selectOptions)) {
this.getOptions();
}
}
},
deep: true
}
},
mounted() {
this.getOptions();
mounted () {
this.getOptions()
},
methods: {
getOptions() {
if (this.fieldConfig.lookupCode) { // 取值列表code
getSelectOptions({lovCode: this.fieldConfig.lookupCode, ...this.cascadesParams}).then(res => {
this.options = res.map(item => ({...item, _selected: false}));
this.formatValue();
});
} else { // 取传递的options
this.options = (this.fieldConfig.selectOptions || []).map(item => ({
...item,
_selected: false,
}))
this.formatValue();
}
},
formatValue() {
const selectData = [];
......@@ -220,7 +227,7 @@ export default {
inputValue(val) {
this.fieldValue = val ? JSON.stringify(val) : '';
this.$emit('input', val);
this.$emit('change', val);
this.$emit('change', this.name, this.currentValue)
},
valueDisplay() {
if (this.multiple) {
......@@ -276,7 +283,7 @@ export default {
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;
color: var(--theme-color);
&::after {
position: absolute;
right: 0;
......
......@@ -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-19 11:22:20
* @LastEditTime: 2024-10-12 15:05:05
* @Version: 1.0.0
* @Description: 动态渲染-开关组件
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -89,7 +89,7 @@ export default {
checked (flag) {
if (!this.disabled) {
this.$emit('input', flag ? 1 : 0);
this.$emit('change', flag ? 1 : 0);
this.$emit('change', this.name, flag ? 1 : 0)
}
},
},
......
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 10:51:56
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-09-23 11:07:17
* @LastEditTime: 2024-10-12 15:25:23
* @Version: 1.0.0
* @Description: 表单渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -30,6 +30,7 @@
:disabled="readOnly || field.readOnly"
:required="field.required"
:clearable="field.clearFlag"
@change="fieldChange"
/>
<d-currency
......@@ -41,6 +42,7 @@
:disabled="readOnly || field.readOnly"
:required="field.required"
:clearable="field.clearFlag"
@change="fieldChange"
/>
<d-switch
......@@ -77,6 +79,7 @@
:clearable="field.clearFlag"
:multiple="field.multiple === 1"
:cascadesParams="getCascadesParams(field)"
:routeParams="queryParams"
@change="fieldChange"
/>
......@@ -93,6 +96,7 @@
:clearable="field.clearFlag"
:cascadesParams="getCascadesParams(field)"
:multiple="field.multiple === 1"
:routeParams="queryParams"
@change="fieldChange"
/>
......@@ -107,6 +111,7 @@
:disabled="readOnly || field.readOnly"
:required="field.required"
:clearable="field.clearFlag"
@change="fieldChange"
/>
<d-url
......@@ -247,6 +252,7 @@ export default {
}
}
})
this.fieldsObj = {...this.fieldsObj}
this.originFieldsObj = {...this.fieldsObj};
},
async loadData() {
......@@ -291,7 +297,8 @@ export default {
}
return {};
},
fieldChange(val) {
fieldChange (name, val) {
this.dynamicInfo().formUpdate(this.tabInfo.tabCode, this, name, val, this.fieldsObj)
// console.log(val)
},
validate() {
......@@ -365,6 +372,15 @@ export default {
setFieldsValue(fieldsValue) {
this.fieldsObj = {...this.fieldsObj, ...fieldsValue};
},
setFieldConfig (columnName, config) {
const index = this.fieldList.findIndex(o => o.columnName === columnName);
if (index > -1) {
this.fieldList[index] = {
...this.fieldList[index],
...config
}
}
},
buttonsClick(btn) {
const customBtn = this.componentButtons.find(o => o.name === btn.name); // 采用页面传入的方法
if (customBtn && customBtn.clickFunction) {
......
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-16 09:39:36
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-09-19 15:27:44
* @LastEditTime: 2024-10-12 14:57:31
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -50,7 +50,7 @@ export default {
}
},
created() {
window.localStorage.access_token = '71fc3203-0d1b-4f62-adea-d08dd473c0cc'
window.localStorage.access_token = 'f5872e6f-6e47-498f-ba2c-db07470f0f25'
},
methods: {
configLoadHandle(config) { // 查询配置信息之后的回调
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment