feat(form): dialog支持disabled配置

This commit is contained in:
roymondchen 2022-11-25 20:58:34 +08:00
parent ea8b863694
commit 239b5d3efe
12 changed files with 49 additions and 12 deletions

View File

@ -4,7 +4,6 @@
ref="tMagicForm"
:model="values"
:label-width="labelWidth"
:disabled="disabled"
:style="`height: ${height}`"
:inline="inline"
:label-position="labelPosition"
@ -12,6 +11,7 @@
<template v-if="initialized && Array.isArray(config)">
<Container
v-for="(item, index) in config"
:disabled="disabled"
:key="item[keyProp] ?? index"
:config="item"
:model="values"

View File

@ -20,6 +20,7 @@
v-model="stepActive"
ref="form"
:size="size"
:disabled="disabled"
:config="config"
:init-values="values"
:parent-values="parentValues"
@ -71,6 +72,7 @@ const props = withDefaults(
width?: string | number;
labelWidth?: string;
fullscreen?: boolean;
disabled?: boolean;
title?: string;
zIndex?: number;
size?: 'small' | 'default' | 'large';

View File

@ -7,6 +7,7 @@
:label-width="config.labelWidth || labelWidth"
:expand-more="expandMore"
:size="size"
:disabled="disabled"
@change="changeHandler"
></Container>
</TMagicCol>
@ -30,6 +31,7 @@ const props = defineProps<{
span?: number;
size?: string;
prop?: string;
disabled?: boolean;
}>();
const emit = defineEmits(['change']);

View File

@ -21,6 +21,7 @@
:is="tagName"
:model="model"
:config="config"
:disabled="disabled"
:name="name"
:prop="itemProp"
:step-active="stepActive"
@ -87,6 +88,7 @@
:model="name || name === 0 ? model[name] : model"
:config="item"
:size="size"
:disabled="disabled"
:step-active="stepActive"
:expand-more="expand"
:label-width="itemLabelWidth"
@ -97,7 +99,7 @@
</template>
<div style="text-align: center" v-if="config.expand && type !== 'fieldset'">
<TMagicButton type="primary" size="small" text @click="expandHandler">{{
<TMagicButton type="primary" size="small" :disabled="false" text @click="expandHandler">{{
expand ? '收起配置' : '展开更多配置'
}}</TMagicButton>
</div>
@ -118,6 +120,7 @@ const props = withDefaults(
model: FormValue;
config: ChildConfig;
prop?: string;
disabled?: boolean;
labelWidth?: string;
expandMore?: boolean;
stepActive?: string | number;
@ -159,7 +162,9 @@ const tagName = computed(() => {
return 'm-fields-text';
});
const disabled = computed(() => filterFunction(mForm, props.config.disabled, props));
const disabled = computed(() =>
typeof props.disabled === 'undefined' ? filterFunction(mForm, props.config.disabled, props) : props.disabled,
);
const tooltip = computed(() => filterFunction(mForm, props.config.tooltip, props));

View File

@ -27,6 +27,7 @@
:rules="name ? rules[name] : []"
:config="item"
:prop="prop"
:disabled="disabled"
:labelWidth="lWidth"
:size="size"
@change="change"
@ -46,6 +47,7 @@
:prop="prop"
:labelWidth="lWidth"
:size="size"
:disabled="disabled"
@change="change"
></Container>
</template>
@ -69,6 +71,7 @@ const props = withDefaults(
model: Record<string, any>;
config: FieldsetConfig;
rules?: any;
disabled?: boolean;
}>(),
{
rules: {},

View File

@ -15,13 +15,14 @@
:index="index"
:label-width="labelWidth"
:size="size"
:disabled="disabled"
:group-model="model[name]"
@remove-item="removeHandler"
@swap-item="swapHandler"
@change="changeHandler"
></MFieldsGroupListItem>
<TMagicButton @click="addHandler" size="small" v-if="addable">添加组</TMagicButton>
<TMagicButton @click="addHandler" size="small" :disabled="disabled" v-if="addable">添加组</TMagicButton>
<TMagicButton :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</TMagicButton>
</div>
@ -45,6 +46,7 @@ const props = defineProps<{
labelWidth?: string;
prop?: string;
size?: string;
disabled?: boolean;
}>();
const emit = defineEmits(['change']);

View File

@ -5,21 +5,22 @@
><CaretBottom v-if="expand" /><CaretRight v-else
/></TMagicIcon>
<TMagicButton text @click="expandHandler">{{ title }}</TMagicButton>
<TMagicButton text :disabled="disabled" @click="expandHandler">{{ title }}</TMagicButton>
<TMagicButton
v-show="showDelete(parseInt(String(index)))"
style="color: #f56c6c"
text
:icon="Delete"
style="color: #f56c6c"
:disabled="disabled"
@click="removeHandler"
></TMagicButton>
<template v-if="movable()">
<TMagicButton v-show="index !== 0" text size="small" @click="changeOrder(-1)"
<TMagicButton v-show="index !== 0" text :disabled="disabled" size="small" @click="changeOrder(-1)"
>上移<TMagicIcon><CaretTop /></TMagicIcon
></TMagicButton>
<TMagicButton v-show="index !== length - 1" text size="small" @click="changeOrder(1)"
<TMagicButton v-show="index !== length - 1" :disabled="disabled" text size="small" @click="changeOrder(1)"
>下移<TMagicIcon><CaretBottom /></TMagicIcon
></TMagicButton>
</template>
@ -34,6 +35,7 @@
:labelWidth="labelWidth"
:prop="`${prop}${prop ? '.' : ''}${String(index)}`"
:size="size"
:disabled="disabled"
@change="changeHandler"
></Container>
</div>
@ -58,6 +60,7 @@ const props = defineProps<{
prop?: string;
size?: string;
index: number;
disabled?: boolean;
}>();
const emit = defineEmits(['swap-item', 'remove-item', 'change']);

View File

@ -25,6 +25,7 @@
:model="name ? model[name] : model"
:prop="prop"
:size="size"
:disabled="disabled"
:label-width="config.labelWidth || labelWidth"
@change="changeHandler"
></Container>
@ -41,6 +42,7 @@
:model="name ? model[name] : model"
:prop="prop"
:size="size"
:disabled="disabled"
:label-width="config.labelWidth || labelWidth"
@change="changeHandler"
></Container>
@ -67,6 +69,7 @@ const props = defineProps<{
labelWidth?: string;
prop?: string;
size?: string;
disabled?: boolean;
}>();
const emit = defineEmits(['change']);

View File

@ -10,6 +10,7 @@
:model="name ? model[name] : model"
:prop="prop"
:size="size"
:disabled="disabled"
@change="changeHandler"
/>
</TMagicRow>
@ -32,6 +33,7 @@ const props = defineProps<{
prop?: string;
size?: string;
expandMore?: boolean;
disabled?: boolean;
}>();
const emit = defineEmits(['change']);

View File

@ -20,6 +20,7 @@
:model="step.name ? model[step.name] : model"
:prop="`${step.name}`"
:size="size"
:disabled="disabled"
:label-width="config.labelWidth || labelWidth"
@change="changeHandler"
></Container>
@ -44,6 +45,7 @@ const props = withDefaults(
stepActive?: number;
labelWidth?: string;
size?: string;
disabled?: boolean;
}>(),
{
stepActive: 1,

View File

@ -50,6 +50,7 @@
size="small"
type="primary"
:icon="ArrowUp"
:disabled="disabled"
text
@click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
@dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
@ -65,6 +66,7 @@
size="small"
type="primary"
:icon="ArrowDown"
:disabled="disabled"
text
@click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
@dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
@ -100,6 +102,7 @@
<Container
v-if="scope.$index > -1"
labelWidth="0"
:disabled="disabled"
:prop="getProp(scope.$index)"
:rules="column.rules"
:config="makeConfig(column, scope.row)"
@ -113,7 +116,10 @@
</TMagicTable>
</TMagicTooltip>
<slot></slot>
<TMagicButton v-if="addable" size="small" type="primary" plain @click="newHandler()">添加</TMagicButton> &nbsp;
<TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
>添加</TMagicButton
>
&nbsp;
<TMagicButton
:icon="Grid"
size="small"
@ -133,15 +139,18 @@
</TMagicButton>
<TMagicUpload
v-if="importable"
style="display: inline-block"
ref="excelBtn"
action="/noop"
:disabled="disabled"
:on-change="excelHandler"
:auto-upload="false"
style="display: inline-block"
>
<TMagicButton size="small" type="success" plain>导入EXCEL</TMagicButton> </TMagicUpload
<TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton> </TMagicUpload
>&nbsp;
<TMagicButton v-if="importable" size="small" type="warning" plain @click="clearHandler()">清空</TMagicButton>
<TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
>清空</TMagicButton
>
</div>
<div class="bottom" style="text-align: right" v-if="config.pagination">
@ -191,6 +200,7 @@ const props = withDefaults(
prop?: string;
labelWidth?: string;
sort?: boolean;
disabled?: boolean;
sortKey?: string;
text?: string;
size?: string;
@ -414,6 +424,7 @@ const itemExtra = (fuc: any, index: number) => {
};
const removeHandler = (index: number) => {
if (props.disabled) return;
props.model[modelName.value].splice(index, 1);
emit('change', props.model[modelName.value]);
};

View File

@ -22,6 +22,7 @@
v-for="item in tabItems(tab)"
:key="item[mForm?.keyProp || '__key']"
:config="item"
:disabled="disabled"
:model="
config.dynamic
? (name ? model[name] : model)[tabIndex]
@ -90,6 +91,7 @@ const props = defineProps<{
labelWidth?: string;
prop?: string;
expandMore?: boolean;
disabled?: boolean;
}>();
const emit = defineEmits(['change']);