geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复单选、多选、多行文本的只读样式

Browse Source
This commit is contained in:
gaoyunqi
2024-04-25 10:12:19 +08:00
parent 60ef2ca412
commit 64140ebbca
4 changed files with 381 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Designer/src/types/index.ts
View File

@ -146,6 +146,8 @@ export const basicComponents = [
typeName: t('编辑器'),
type: 'richtext-editor',
options: {
labelWidthMode: 'fix',
labelFixWidth: 120,
span: '',
defaultValue: '',
width: '100%',

69
src/components/Form/src/components/ApiCheckboxGroup.vue
View File

@ -2,13 +2,18 @@
* @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
-->
<template>
<CheckboxGroup v-bind="attrs" v-model:value="checked" button-style="solid" @change="handleChange">
<div class="api-checkbox-group">
<CheckboxGroup v-show="!disabled" v-model:value="checked" button-style="solid" v-bind="attrs" @change="handleChange">
<template v-for="item in getOptions" :key="`${item.value}`">
<Checkbox :value="item.value" :disabled="item.disabled">
<Checkbox :disabled="item.disabled" :value="item.value">
{{ item.label }}
</Checkbox>
</template>
</CheckboxGroup>
<div v-if="disabled" class="readonly-wrap">
{{ displayText() }}
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, computed, unref, watch, inject, watchEffect } from 'vue';
@ -28,23 +33,23 @@
name: 'ApiCheckboxGroup',
components: {
CheckboxGroup: Checkbox.Group,
Checkbox,
Checkbox
},
props: {
api: {
type: Function as PropType<(arg?: Recordable | string) => Promise<OptionsItem[]>>,
default: null,
default: null
},
params: {
type: [Object, String] as PropType<Recordable | string>,
default: () => ({}),
default: () => ({})
},
value: {
type: [Array, String],
type: [Array, String]
},
isBtn: {
type: [Boolean] as PropType<boolean>,
default: false,
default: false
},
numberToString: propTypes.bool,
resultField: propTypes.string.def(''),
@ -57,14 +62,15 @@
// defaultValue: Array,
staticOptions: {
type: Array as PropType<OptionsItem[]>,
default: () => [],
default: () => []
},
apiConfig: {
type: Object,
default: () => {},
default: () => {}
},
mainKey: String,
index: Number,
disabled: Boolean
},
emits: ['options-change', 'change', 'update:value'],
setup(props, { emit }) {
@ -86,7 +92,7 @@
prev.push({
label: next[labelField],
value: numberToString ? `${value}` : value,
...omit(next, [labelField, valueField]),
...omit(next, [labelField, valueField])
});
}
return prev;
@ -101,13 +107,9 @@
let val = isValidJSON(o.value);
let field = '';
if (val && val.bindTable) {
let table = !isCamelCase
? val.bindTable + 'List'
: camelCaseString(val.bindTable + '_List');
let table = !isCamelCase ? val.bindTable + 'List' : camelCaseString(val.bindTable + '_List');
field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
formModel &&
formModel[table!][props.index || 0] &&
formModel[table!][props.index || 0][field];
formModel && formModel[table!][props.index || 0] && formModel[table!][props.index || 0][field];
} else if (val && val.bindField) {
field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
formModel && formModel[field];
@ -126,8 +128,8 @@
},
{
immediate: true,
deep: true,
},
deep: true
}
);
watch(
@ -136,8 +138,8 @@
checked.value = typeof val === 'string' ? val?.split(',') : val;
},
{
immediate: true,
},
immediate: true
}
);
async function fetch() {
@ -153,12 +155,7 @@
options.value = props.staticOptions;
}
if (props.datasourceType === 'api') {
options.value = await apiConfigFunc(
props.apiConfig,
isCamelCase,
formModel,
props.index,
);
options.value = await apiConfigFunc(props.apiConfig, isCamelCase, formModel, props.index);
}
}
@ -191,13 +188,21 @@
function handleChange(value) {
emit('update:value', value.toString());
emit('change');
checked.value =
props.value === undefined || props.value === null
? value
: (props.value as any).split(',');
checked.value = props.value === undefined || props.value === null ? value : (props.value as any).split(',');
}
return { checked, getOptions, attrs, loading, t, handleChange, props };
},
function displayText() {
const _checked = checked.value;;
const labelArr = [];
(getOptions.value || []).forEach((opt) => {
if (_checked.includes(opt.value)) {
labelArr.push(opt.label);
}
});
return labelArr.join(', ');
}
return { checked, getOptions, attrs, loading, t, handleChange, props, displayText };
}
});
</script>

69
src/components/Form/src/components/ApiRadioGroup.vue
View File

@ -2,22 +2,21 @@
* @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
-->
<template>
<RadioGroup
v-bind="attrs"
v-model:value="checked"
:optionType="optionType"
button-style="solid"
@change="handleChange"
>
<div class="api-radio-group">
<RadioGroup v-show="!disabled" v-model:value="checked" :optionType="optionType" button-style="solid" v-bind="attrs" @change="handleChange">
<template v-for="item in getOptions" :key="`${item.value}`">
<RadioButton v-if="optionType === 'button'" :value="item.value" :disabled="item.disabled">
<RadioButton v-if="optionType === 'button'" :disabled="item.disabled" :value="item.value">
{{ item.label }}
</RadioButton>
<Radio v-else :value="item.value" :disabled="item.disabled">
<Radio v-else :disabled="item.disabled" :value="item.value">
{{ item.label }}
</Radio>
</template>
</RadioGroup>
<div v-if="disabled">
{{ displayText() }}
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, computed, unref, watch, inject, watchEffect } from 'vue';
@ -38,23 +37,23 @@
components: {
RadioGroup: Radio.Group,
RadioButton: Radio.Button,
Radio,
Radio
},
props: {
api: {
type: Function as PropType<(arg?: Recordable | string) => Promise<OptionsItem[]>>,
default: null,
default: null
},
params: {
type: [Object, String] as PropType<Recordable | string>,
default: () => ({}),
default: () => ({})
},
value: {
type: [String, Number, Boolean] as PropType<string | number | boolean>,
type: [String, Number, Boolean] as PropType<string | number | boolean>
},
isBtn: {
type: [Boolean] as PropType<boolean>,
default: false,
default: false
},
numberToString: propTypes.bool,
resultField: propTypes.string.def(''),
@ -66,11 +65,11 @@
optionType: propTypes.string.def('default'),
staticOptions: {
type: Array as PropType<OptionsItem[]>,
default: () => [],
default: () => []
},
apiConfig: Object,
mainKey: String,
index: Number,
index: Number
},
emits: ['options-change', 'change', 'update:value'],
setup(props, { emit }) {
@ -82,6 +81,7 @@
const isCamelCase = inject<boolean>('isCamelCase', false);
// Embedded in the form, just use the hook binding to perform form verification
const checked = ref<string | number>('');
const disabled = attrs.value.disabled;
// Processing options value
const getOptions = computed(() => {
const { labelField, valueField, numberToString } = props;
@ -91,7 +91,7 @@
prev.push({
label: next[labelField],
value: numberToString ? `${value}` : value,
...omit(next, [labelField, valueField]),
...omit(next, [labelField, valueField])
});
}
return prev;
@ -105,14 +105,10 @@
let val = isValidJSON(o.value);
let field = '';
if (val && val.bindTable) {
let table = !isCamelCase
? val.bindTable + 'List'
: camelCaseString(val.bindTable + '_List');
let table = !isCamelCase ? val.bindTable + 'List' : camelCaseString(val.bindTable + '_List');
field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
formModel &&
formModel[table!][props.index || 0] &&
formModel[table!][props.index || 0][field];
formModel && formModel[table!][props.index || 0] && formModel[table!][props.index || 0][field];
} else if (val && val.bindField) {
field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
formModel && formModel[field];
@ -128,7 +124,7 @@
() => {
fetch();
},
{ deep: true, immediate: true },
{ deep: true, immediate: true }
);
watch(
@ -137,8 +133,8 @@
checked.value = val;
},
{
immediate: true,
},
immediate: true
}
);
async function fetch() {
@ -154,12 +150,7 @@
options.value = props.staticOptions;
}
if (props.datasourceType === 'api') {
options.value = await apiConfigFunc(
props.apiConfig,
isCamelCase,
formModel,
props.index,
);
options.value = await apiConfigFunc(props.apiConfig, isCamelCase, formModel, props.index);
}
} else {
api = props.api;
@ -195,7 +186,17 @@
emit('change');
}
return { checked, getOptions, attrs, loading, t, handleChange, props };
},
function displayText() {
const val = checked.value;
const options = getOptions.value || [];
const chkItem = options.find((item) => item.value === val);
if (chkItem) {
return chkItem.label;
}
return '';
}
return { checked, getOptions, attrs, loading, t, handleChange, props, displayText, disabled };
}
});
</script>

2
src/components/SimpleForm/src/components/SimpleFormItem.vue
View File

@ -417,7 +417,7 @@
}
function readonlySupport(name) {
return /^(Input|AutoCodeRule|DatePicker|Text|TimePicker|Range|RichTextEditor)$/.test(name);
return /^(Input|AutoCodeRule|DatePicker|Text|TimePicker|Range|RichTextEditor|TimeRangePicker|RangePicker|InputTextArea)$/.test(name);
}
function getShow(schema: FormSchema): boolean {