```
docs(release-notes): 添加住院护士站划价功能说明和发版记录 - 新增住院护士站划价服务流程说明文档,详细描述了从参数预处理到结果响应的五大阶段流程 - 包含耗材类医嘱和诊疗活动类医嘱的差异化处理逻辑 - 添加完整的发版内容记录,涵盖新增菜单功能和各模块优化点 - 记录了住院相关功能的新增和门诊业务流程的修复 ```
This commit is contained in:
196
openhis-ui-vue3/src/components/TableLayout/FormItem.vue
Normal file
196
openhis-ui-vue3/src/components/TableLayout/FormItem.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<el-form-item
|
||||
:label="labelWithSuffix"
|
||||
:prop="item.prop"
|
||||
:required="item.required"
|
||||
:class="{ 'form-item-double': item.type === 'custom' || item.type === 'daterange' }"
|
||||
>
|
||||
<el-input
|
||||
v-if="item.type === 'input'"
|
||||
:model-value="modelValue"
|
||||
:placeholder="item.placeholder || `请输入${item.label}`"
|
||||
:clearable="item.clearable !== false"
|
||||
:style="item.style || { width: item.width || '200px' }"
|
||||
v-bind="item.extraprops || {}"
|
||||
@keyup.enter="handleEnter"
|
||||
@update:model-value="handleUpdate"
|
||||
/>
|
||||
<el-select
|
||||
v-else-if="item.type === 'select'"
|
||||
:model-value="modelValue"
|
||||
:placeholder="item.placeholder || `请选择${item.label}`"
|
||||
:clearable="item.clearable !== false"
|
||||
:style="item.style || { width: item.width || '200px' }"
|
||||
:disabled="item.disabled"
|
||||
v-bind="item.extraprops || {}"
|
||||
:multiple="item.multiple !== false"
|
||||
:filterable="item.filterable !== false"
|
||||
:collapse-tags="item.collapseTags !== false"
|
||||
@change="handleChange"
|
||||
@update:model-value="(value) => handleUpdateWithCheck(value, item.checkBeforeChange)"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in item.options || []"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-radio-group
|
||||
v-else-if="item.type === 'radio'"
|
||||
:model-value="modelValue"
|
||||
v-bind="item.extraprops || {}"
|
||||
@change="handleChange"
|
||||
@update:model-value="handleUpdate"
|
||||
>
|
||||
<el-radio v-for="option in item.options || []" :key="option.value" :label="option.value">
|
||||
{{ option.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<!-- 单独日期 -->
|
||||
<el-date-picker
|
||||
v-else-if="item.type === 'date'"
|
||||
:model-value="modelValue"
|
||||
type="date"
|
||||
:placeholder="item.placeholder || `请选择${item.label}`"
|
||||
:clearable="item.clearable !== false"
|
||||
:value-format="item.valueFormat || 'YYYY-MM-DD'"
|
||||
:style="item.style || { width: item.width || '200px' }"
|
||||
:disabled="item.disabled"
|
||||
v-bind="item.extraprops || {}"
|
||||
@change="handleChange"
|
||||
@update:model-value="handleUpdate"
|
||||
/>
|
||||
<!-- 日期区间 -->
|
||||
<QuickDateRange
|
||||
v-else-if="item.type === 'daterange'"
|
||||
:model-value="daterangeValue"
|
||||
:start-placeholder="item.startPlaceholder || '开始日期'"
|
||||
:end-placeholder="item.endPlaceholder || '结束日期'"
|
||||
:value-format="item.valueFormat || 'YYYY-MM-DD'"
|
||||
:clearable="item.clearable !== false"
|
||||
:date-picker-style="daterangeStyle"
|
||||
:attrs="item.extraprops || {}"
|
||||
@change="handleChange"
|
||||
@update:model-value="handleUpdate"
|
||||
/>
|
||||
<!-- 纯文本展示 -->
|
||||
<span
|
||||
v-else-if="item.type === 'text'"
|
||||
:style="item.style || { width: item.width || '200px' }"
|
||||
class="form-item-text"
|
||||
>
|
||||
{{ item.formatter ? item.formatter(modelValue) : modelValue ?? '' }}
|
||||
</span>
|
||||
<slot
|
||||
v-else-if="item.type === 'custom'"
|
||||
:name="item.slot || item.prop"
|
||||
:item="item"
|
||||
:modelValue="modelValue"
|
||||
:updateModelValue="handleUpdate"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import type { FormItemProps } from '../types/FormItem.d';
|
||||
import QuickDateRange from './QuickDateRange.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'FormItem',
|
||||
});
|
||||
|
||||
const props = defineProps<FormItemProps>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: any];
|
||||
change: [value: any];
|
||||
}>();
|
||||
|
||||
const labelWithSuffix = computed(() => {
|
||||
const suffix = props.item.labelSuffix || '';
|
||||
return `${props.item.label || ''}${suffix}`;
|
||||
});
|
||||
|
||||
// 日期区间组件的值处理
|
||||
const daterangeValue = computed<string[]>(() => {
|
||||
if (props.item.type === 'daterange') {
|
||||
if (Array.isArray(props.modelValue)) {
|
||||
return props.modelValue.map((v: any) => String(v));
|
||||
}
|
||||
return [];
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
// 日期区间组件的样式处理
|
||||
const daterangeStyle = computed(() => {
|
||||
if (props.item.type === 'daterange') {
|
||||
if (
|
||||
typeof props.item.style === 'object' &&
|
||||
props.item.style !== null &&
|
||||
!Array.isArray(props.item.style)
|
||||
) {
|
||||
return props.item.style;
|
||||
}
|
||||
return { width: props.item.width || 'calc(316px + 7em)' };
|
||||
}
|
||||
return {};
|
||||
});
|
||||
|
||||
const handleUpdate = (value: any) => {
|
||||
emit('update:modelValue', value);
|
||||
};
|
||||
|
||||
const handleUpdateWithCheck = async (value: any, shouldCheck = false) => {
|
||||
if (shouldCheck) {
|
||||
if (props.item.onChange && typeof props.item.onChange === 'function') {
|
||||
const result = await props.item.onChange(value);
|
||||
if (result === false) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
handleUpdate(value);
|
||||
};
|
||||
|
||||
const handleChange = (value: any) => {
|
||||
emit('change', value);
|
||||
};
|
||||
|
||||
const handleEnter = () => {
|
||||
if (props.onEnter && typeof props.onEnter === 'function') {
|
||||
props.onEnter();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 16px;
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
vertical-align: top;
|
||||
margin-right: 16px;
|
||||
|
||||
.el-form-item__label {
|
||||
width: 7em !important;
|
||||
min-width: 7em;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
line-height: 1.5;
|
||||
padding-right: 8px;
|
||||
text-align: right;
|
||||
padding-top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user