fix: 日期时间区间支持只读显示，选人组件在只读状态下不再可选
fix: 略微调整表单标签的高度
This commit is contained in:
gaoyunqi
@ -3,48 +3,62 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
schema: Object,
|
||||
});
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
schema: Object,
|
||||
model: Object
|
||||
});
|
||||
|
||||
const fieldValue = ref(genFieldValue(props.value));
|
||||
const fieldValue = ref(genFieldValue(props.value));
|
||||
const textComponents = ['Input', 'AutoCodeRule', 'DatePicker', 'TimePicker', 'Info', 'Text', 'InputTextArea', 'InputNumber'];
|
||||
|
||||
function genFieldValue(val) {
|
||||
if (!props?.schema || (!val && val !== 0)) {
|
||||
return '';
|
||||
function parseRangeVal(val, component) {
|
||||
if (component !== 'RangePicker' || !val) {
|
||||
return val || '';
|
||||
}
|
||||
return val.split(' ')[0];
|
||||
}
|
||||
const schema = props.schema;
|
||||
const { componentProps, component } = schema;
|
||||
|
||||
if ([
|
||||
"Input",
|
||||
"AutoCodeRule",
|
||||
"DatePicker",
|
||||
"TimePicker",
|
||||
"Info",
|
||||
"Text",
|
||||
'InputTextArea',
|
||||
'InputNumber'].includes(component)) {
|
||||
return `${componentProps?.addonBefore || ''}${val}${componentProps?.addonAfter || ''}`;
|
||||
}
|
||||
if (component === 'Switch') {
|
||||
return val === 1 ? '是' : '否';
|
||||
}
|
||||
}
|
||||
function genFieldValue(val) {
|
||||
const schema = props.schema;
|
||||
const model = props.model;
|
||||
const { componentProps, component } = schema;
|
||||
if (model && (component === 'TimeRangePicker' || component === 'RangePicker')) {
|
||||
const fieldArr = schema.field.split(',');
|
||||
const valStart = parseRangeVal(model[fieldArr[0]], component);
|
||||
const valEnd = parseRangeVal(model[fieldArr[1]], component);
|
||||
return `${valStart} - ${valEnd}`;
|
||||
}
|
||||
if (!schema || (!val && val !== 0)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(newValue) => {
|
||||
fieldValue.value = genFieldValue(newValue);
|
||||
},
|
||||
);
|
||||
if (textComponents.includes(component)) {
|
||||
return `${componentProps?.addonBefore || ''}${val}${componentProps?.addonAfter || ''}`;
|
||||
} else if (component === 'Switch') {
|
||||
return val === 1 ? '是' : '否';
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(newValue) => {
|
||||
fieldValue.value = genFieldValue(newValue);
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.model,
|
||||
(newValue) => {
|
||||
fieldValue.value = genFieldValue(newValue);
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.field-readonly {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.field-readonly {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,86 +1,102 @@
|
||||
<template>
|
||||
<div>
|
||||
<FormItemRest>
|
||||
<SelectUser
|
||||
:multiple="multiple"
|
||||
:selectedIds="selectedIds"
|
||||
:key="key"
|
||||
@change="
|
||||
(ids, options) => {
|
||||
emit('update:value', ids.join(','));
|
||||
emit('selectedId', ids.join(','));
|
||||
emit('change', ids.join(','), options);
|
||||
}
|
||||
"
|
||||
@change-names="
|
||||
(names) => {
|
||||
userNames = names;
|
||||
}
|
||||
"
|
||||
>
|
||||
<a-input
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
v-model:value="userNames"
|
||||
:size="size"
|
||||
:bordered="bordered"
|
||||
>
|
||||
<template #prefix v-if="prefix">
|
||||
<Icon :icon="prefix" />
|
||||
</template>
|
||||
<template #suffix v-if="suffix">
|
||||
<Icon :icon="suffix" />
|
||||
</template>
|
||||
</a-input>
|
||||
</SelectUser>
|
||||
</FormItemRest>
|
||||
</div>
|
||||
<div :class="{ disabled }" class="form-select-user">
|
||||
<FormItemRest>
|
||||
<SelectUser
|
||||
:key="key"
|
||||
:multiple="multiple"
|
||||
:selectedIds="selectedIds"
|
||||
:disabled="disabled"
|
||||
@change="
|
||||
(ids, options) => {
|
||||
emit('update:value', ids.join(','));
|
||||
emit('selectedId', ids.join(','));
|
||||
emit('change', ids.join(','), options);
|
||||
}
|
||||
"
|
||||
@change-names="
|
||||
(names) => {
|
||||
userNames = names;
|
||||
}
|
||||
"
|
||||
>
|
||||
<a-input v-model:value="userNames" :bordered="bordered" :disabled="disabled" :placeholder="placeholder" :size="size" readonly>
|
||||
<template v-if="prefix" #prefix>
|
||||
<Icon :icon="prefix" />
|
||||
</template>
|
||||
<template v-if="suffix" #suffix>
|
||||
<Icon :icon="suffix" />
|
||||
</template>
|
||||
</a-input>
|
||||
</SelectUser>
|
||||
</FormItemRest>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { SelectUser } from '/@/components/SelectOrganizational/index';
|
||||
import { watch, ref } from 'vue';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { SelectUser } from '/@/components/SelectOrganizational/index';
|
||||
import { watch, ref } from 'vue';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
|
||||
// 用于包裹弹窗的form组件 因为一个FormItem 只能收集一个表单组件 所以弹窗的form 必须排除
|
||||
const FormItemRest = Form.ItemRest;
|
||||
// 用于包裹弹窗的form组件 因为一个FormItem 只能收集一个表单组件 所以弹窗的form 必须排除
|
||||
const FormItemRest = Form.ItemRest;
|
||||
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
prefix: String,
|
||||
suffix: String,
|
||||
placeholder: String,
|
||||
readonly: Boolean,
|
||||
disabled: Boolean,
|
||||
size: String,
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
prefix: String,
|
||||
suffix: String,
|
||||
placeholder: String,
|
||||
readonly: Boolean,
|
||||
disabled: Boolean,
|
||||
size: String,
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
});
|
||||
|
||||
const userNames = ref<string>();
|
||||
const selectedIds = ref<string[]>([]);
|
||||
const emit = defineEmits(['update:value', 'selectedId', 'change']);
|
||||
const key = ref<number>(0);
|
||||
const userNames = ref<string>();
|
||||
const selectedIds = ref<string[]>([]);
|
||||
const emit = defineEmits(['update:value', 'selectedId', 'change']);
|
||||
const key = ref<number>(0);
|
||||
|
||||
watch(
|
||||
props,
|
||||
async () => {
|
||||
selectedIds.value = props.value ? props.value?.split(',') : [];
|
||||
if (!props.value) {
|
||||
//预览页面 重置
|
||||
userNames.value = '';
|
||||
}
|
||||
key.value++;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
watch(
|
||||
props,
|
||||
async () => {
|
||||
selectedIds.value = props.value ? props.value?.split(',') : [];
|
||||
if (!props.value) {
|
||||
//预览页面 重置
|
||||
userNames.value = '';
|
||||
}
|
||||
key.value++;
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.form-select-user {
|
||||
&.disabled {
|
||||
.ant-input-suffix {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper-disabled {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ant-input[disabled] {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper{
|
||||
border: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user