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

style: 略微调整只读字段的表现形式

Browse Source
This commit is contained in:
gaoyunqi
2024-02-06 17:36:55 +08:00
parent c4d09347a4
commit 2b4bba94af
3 changed files with 719 additions and 644 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Form/src/components/Readonly.vue
View File

@ -9,11 +9,34 @@
value: String,
schema: Object,
});
const fieldValue = ref(props.value);
const fieldValue = ref(genFieldValue(props.value));
function genFieldValue(val) {
if (!props?.schema || (!val && val !== 0)) {
return '';
}
const schema = props.schema;
const { componentProps, component } = schema;
if (['Input', 'AutoCodeRule', 'DatePicker', 'InputTextArea'].includes(component)) {
return `${componentProps?.addonBefore || ''}${val}${componentProps?.addonAfter || ''}`;
}
if (component === 'Switch') {
return val === 1 ? '是' : '否';
}
}
watch(
() => props.value,
(newValue) => {
fieldValue.value = newValue;
fieldValue.value = genFieldValue(newValue);
},
);
</script>
<style>
.field-readonly {
white-space: pre-wrap;
}
</style>

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

@ -3,22 +3,22 @@
<!--如果是grid 组件 需要新增grid布局包裹-->
<template v-if="schema.component.includes('Grid')">
<Row
type="flex"
v-show="getIsShow(schema)"
:align="(schema.componentProps as any ).align"
:gutter="(schema.componentProps as any ).gutter ?? 0"
:justify="(schema.componentProps as any ).justify"
:align="(schema.componentProps as any ).align"
v-show="getIsShow(schema)"
type="flex"
>
<Col v-for="(col, colIndex) in schema.children" :key="colIndex" :span="col.span">
<template v-for="childSchema in col.list" :key="childSchema.field">
<SimpleFormItem
v-if="showComponent(childSchema)"
:refreshFieldObj="refreshFieldObj"
:form-api="formApi"
:schema="childSchema"
v-model:value="formModel![childSchema.field]"
:label-col="labelCol"
:form-api="formApi"
:isWorkFlow="isWorkFlow"
:label-col="labelCol"
:refreshFieldObj="refreshFieldObj"
:schema="childSchema"
/>
</template>
</Col>
@ -27,26 +27,26 @@
<!--如果是tab 组件 需要新增tab组件包裹-->
<template v-else-if="schema.component === 'Tab'">
<Tabs
v-show="getIsShow(schema)"
v-model:activeKey="activeKey"
:size="(schema.componentProps as any ).tabSize"
:tabPosition="(schema.componentProps as any ).tabPosition"
:type="(schema.componentProps as any ).type"
:size="(schema.componentProps as any ).tabSize"
v-show="getIsShow(schema)"
>
<TabPane
v-for="(tab, tabIndex) in schema.children"
:tab="tab.name"
:forceRender="true"
:key="tabIndex"
:forceRender="true"
:tab="tab.name"
>
<template v-for="childSchema in tab.list" :key="childSchema.field">
<SimpleFormItem
v-if="showComponent(childSchema)"
:refreshFieldObj="refreshFieldObj"
:form-api="formApi"
:schema="childSchema"
:isWorkFlow="isWorkFlow"
v-model:value="formModel![childSchema.field]"
:form-api="formApi"
:isWorkFlow="isWorkFlow"
:refreshFieldObj="refreshFieldObj"
:schema="childSchema"
/>
</template>
</TabPane>
@ -55,48 +55,48 @@
<!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"-->
<template v-else-if="schema.component.includes('Form')">
<FormItem
v-if="getShow(schema)"
v-show="getIsShow(schema)"
:key="schema.key"
:name="schema.field"
:label="getComponentsProps.showLabel ? schema.label : ''"
:label-col="labelCol"
:labelAlign="formProps?.labelAlign"
:name="schema.field"
:wrapperCol="itemLabelWidthProp.wrapperCol"
v-if="getShow(schema)"
v-show="getIsShow(schema)"
>
<component
:disabled="getDisable"
:is="formComponent(schema)"
v-model:value="formModel![schema.field]"
:disabled="getDisable"
:size="formProps?.size"
v-bind="schema.componentProps"
v-model:value="formModel![schema.field]"
/>
</FormItem>
</template>
<!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"-->
<template v-else-if="schema.component.includes('OneForOne')">
<FormItem
v-if="getShow(schema)"
v-show="getIsShow(schema)"
:key="schema.key"
:name="schema.field"
:label="getComponentsProps.showLabel ? schema.label : ''"
:label-col="labelCol"
:labelAlign="formProps?.labelAlign"
:name="schema.field"
:wrapperCol="itemLabelWidthProp.wrapperCol"
v-if="getShow(schema)"
v-show="getIsShow(schema)"
>
<component
:is="componentMap.get(schema.component)"
v-model:value="formModel![schema.field]"
:disabled="getDisable"
:refreshFieldObj="refreshFieldObj"
:is="componentMap.get(schema.component)"
:size="formProps?.size"
v-bind="schema.componentProps"
v-model:value="formModel![schema.field]"
/>
</FormItem>
</template>
<template v-else-if="schema.component === 'TableLayout'">
<TableLayoutPreview :element="schema" v-if="getShow(schema)" v-show="getIsShow(schema)">
<TableLayoutPreview v-if="getShow(schema)" v-show="getIsShow(schema)" :element="schema">
<template #tdElement="{ tdElement }">
<div class="h-full">
<div
@ -107,14 +107,17 @@
padding: '10px',
}"
>
<template v-for="childSchema in tdElement.children" :key="childSchema.field">
<template
v-for="childSchema in tdElement.children"
:key="childSchema.field"
>
<SimpleFormItem
v-if="showComponent(childSchema)"
:refreshFieldObj="refreshFieldObj"
:form-api="formApi"
:schema="childSchema"
:isWorkFlow="isWorkFlow"
v-model:value="formModel![childSchema.field]"
:form-api="formApi"
:isWorkFlow="isWorkFlow"
:refreshFieldObj="refreshFieldObj"
:schema="childSchema"
/>
</template>
</div>
@ -125,40 +128,40 @@
<!--如果是时间区间 组件 需要v-model:startField="表单对象[字段名]" v-model:endField="表单对象[字段名]"-->
<template v-else-if="schema.component.includes('Range')">
<FormItem
:key="schema.key"
:name="schema.field"
:label="getComponentsProps.showLabel ? schema.label : ''"
:label-col="labelCol"
:wrapperCol="itemLabelWidthProp.wrapperCol"
:validateTrigger="['blur', 'change']"
:rules="rules"
v-if="getShow(schema)"
v-show="getIsShow(schema)"
:key="schema.key"
:label="getComponentsProps.showLabel ? schema.label : ''"
:label-col="labelCol"
:name="schema.field"
:rules="rules"
:validateTrigger="['blur', 'change']"
:wrapperCol="itemLabelWidthProp.wrapperCol"
>
<component
:disabled="getDisable"
:is="componentMap.get(schema.component)"
v-model:endField="schema.field.split(',')[1]"
v-model:startField="schema.field.split(',')[0]"
v-model:value="formModel![schema.field]"
:disabled="getDisable"
:size="formProps?.size"
v-bind="schema.componentProps"
v-model:startField="schema.field.split(',')[0]"
v-model:endField="schema.field.split(',')[1]"
v-model:value="formModel![schema.field]"
/>
</FormItem>
<!-- 因为Range会变为 开始时间 和 结束时间 2个属性给与表单数据 所以需要2个隐藏框绑定 starTime 和 endTime -->
<FormItem
:key="schema.key"
v-show="false"
:name="schema.field.split(',')[0]"
:key="schema.key"
:label="getComponentsProps.showLabel ? schema.label : ''"
:name="schema.field.split(',')[0]"
>
<input type="hidden" />
</FormItem>
<FormItem
:key="schema.key"
v-show="false"
:name="schema.field.split(',')[1]"
:key="schema.key"
:label="getComponentsProps.showLabel ? schema.label : ''"
:name="schema.field.split(',')[1]"
>
<input type="hidden" />
</FormItem>
@ -166,41 +169,41 @@
<!--如果checked 或者 switch组件 需要v-model:checked="表单对象[字段名]" "-->
<template v-else-if="checkedValueComponents.includes(schema.component)">
<FormItem
:key="schema.key"
:name="schema.field"
:label="getComponentsProps.showLabel ? schema.label : ''"
:label-col="labelCol"
:wrapperCol="itemLabelWidthProp.wrapperCol"
:rules="rules"
v-if="getShow(schema)"
v-show="getIsShow(schema)"
:key="schema.key"
:label="getComponentsProps.showLabel ? schema.label : ''"
:label-col="labelCol"
:name="schema.field"
:rules="rules"
:wrapperCol="itemLabelWidthProp.wrapperCol"
>
<component
:key="refreshFieldObj[schema.field]"
:is="componentMap.get(schema.component)"
:key="refreshFieldObj[schema.field]"
v-model:checked="formModel![schema.field]"
:disabled="getDisable"
:size="formProps?.size"
v-bind="getComponentsProps"
v-model:checked="formModel![schema.field]"
/>
</FormItem>
</template>
<!--如果是card 组件 需要新增card组件包裹-->
<template v-else-if="schema.component.includes('Card')">
<CollapseContainer
:title="(schema.componentProps as any ).title"
v-show="getIsShow(schema)"
:bordered="false"
:hasLeftBorder="true"
v-show="getIsShow(schema)"
:title="(schema.componentProps as any ).title"
>
<template v-for="childSchema in schema.children![0].list" :key="childSchema.field">
<SimpleFormItem
v-if="showComponent(childSchema)"
:refreshFieldObj="refreshFieldObj"
:form-api="formApi"
:schema="childSchema"
:isWorkFlow="isWorkFlow"
v-model:value="formModel![childSchema.field]"
:form-api="formApi"
:isWorkFlow="isWorkFlow"
:refreshFieldObj="refreshFieldObj"
:schema="childSchema"
/>
</template>
</CollapseContainer>
@ -217,20 +220,20 @@
v-if="getShow(schema)"
v-show="getIsShow(schema)"
:key="schema.key"
:name="schema.field"
:label="getComponentsProps.showLabel ? schema.label : ''"
:label-col="labelCol"
:wrapperCol="itemLabelWidthProp.wrapperCol"
:name="schema.field"
:rules="rules"
:validateTrigger="['blur', 'change']"
:wrapperCol="itemLabelWidthProp.wrapperCol"
>
<component
:is="componentMap.get(schema.component)"
:key="refreshFieldObj[schema.field]"
:disabled="getDisable"
:size="formProps?.size"
v-bind="getComponentsProps"
:value="schema.defaultValue"
v-bind="getComponentsProps"
/>
</FormItem>
</template>
@ -239,14 +242,16 @@
v-if="getShow(schema)"
v-show="getIsShow(schema)"
:key="schema.key"
:name="schema.field"
:label="getComponentsProps.showLabel ? schema.label : ''"
:label-col="labelCol"
:wrapperCol="itemLabelWidthProp.wrapperCol"
:name="schema.field"
:rules="rules"
:validateTrigger="['blur', 'change']"
:wrapperCol="itemLabelWidthProp.wrapperCol"
>
<template
v-if="getDisable && /Input|AutoCodeRule|DatePicker/.test(schema.component)"
>
<template v-if="getDisable && /Input/.test(schema.component)">
<readonly :schema="schema" :value="formModel![schema.field]" />
</template>
<template v-else>
@ -387,7 +392,11 @@
if (isFunction(componentProps)) {
componentProps =
componentProps({ schema: props.schema, formModel, formActionType: props.formApi }) ?? {};
componentProps({
schema: props.schema,
formModel,
formActionType: props.formApi,
}) ?? {};
} else {
if (componentProps['events']) {
for (const eventKey in componentProps['events']) {
@ -404,12 +413,20 @@
let field = camelCaseString(item);
if (field) cloneFormModel[field] = cloneFormModel[item];
}
event(props.schema, isCamelCase ? cloneFormModel : formModel, props.formApi);
event(
props.schema,
isCamelCase ? cloneFormModel : formModel,
props.formApi,
);
if (isCamelCase) {
for (let item in formModel) {
let field = camelCaseString(item);
if (cloneFormModel && field && cloneFormModel[field] !== undefined) {
if (
cloneFormModel &&
field &&
cloneFormModel[field] !== undefined
) {
formModel[item] = cloneFormModel[field];
}
}
@ -460,7 +477,10 @@
// console.log('formitem watch!!!!!!!!');
//填值以后需要手动校验的组件
const validateComponents = ['User', 'RichTextEditor', 'Upload', 'SelectMap'];
if (validateComponents.includes(props.schema.component) && formModel![props.schema.field]) {
if (
validateComponents.includes(props.schema.component) &&
formModel![props.schema.field]
) {
setTimeout(() => {
props.formApi?.validateFields([props.schema.field]);
}, 100);
@ -491,9 +511,11 @@
const formComponent = (schema) => {
return componentMap.get(
['caseErpApplyDetailList', 'case_erp_apply_detailList', 'CASE_ERP_APPLY_DETAILList'].includes(
schema.field,
)
[
'caseErpApplyDetailList',
'case_erp_apply_detailList',
'CASE_ERP_APPLY_DETAILList',
].includes(schema.field)
? 'ErpApply'
: schema.component,
);
@ -514,6 +536,7 @@
? !noShowWorkFlowComponents.includes(schema.type)
: !noShowGenerateComponents.includes(schema.type);
}
function getShow(schema: FormSchema): boolean {
const { show } = schema;
let isIfShow = true;
@ -543,3 +566,20 @@
line-height: 28px;
}
</style>
<style lang="less">
.ant-select-disabled {
.ant-select-selector {
border: none !important;
background-color: transparent !important;
padding-left: 0 !important;
}
.ant-select-selection-item {
color: rgb(0 0 0 / 85%) !important;
}
.ant-select-arrow {
display: none;
}
}
</style>

14
src/views/secondDev/createFlow.vue
View File

@ -1,5 +1,5 @@
<template>
<div clas="itc-create-flow">
<div class="itc-create-flow">
<div class="toolbar">
<a-space wrap>
<a-button>提交</a-button>
@ -129,3 +129,15 @@
}
}
</script>
<style lang="less">
.itc-create-flow {
padding: 10px 12px;
background-color: #fff;
.toolbar {
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
}
</style>