273 lines
7.7 KiB
Vue
273 lines
7.7 KiB
Vue
|
<template>
|
|||
|
|
<el-popover :visible="selectVisible" placement="bottom" :width="'18vw'" @after-enter="initClickOutside">
|
|||
|
|
<el-form :model="queryParams" class="query-form" label-width="5.625rem">
|
|||
|
|
<!-- 病人类型选择 -->
|
|||
|
|
<el-form-item label="病人类型：" prop="brly">
|
|||
|
|
<el-select v-model="queryParams.brly" placeholder="全部" clearable>
|
|||
|
|
<el-option v-for="item in brlyOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="药敏：" prop="finish">
|
|||
|
|
<el-radio-group v-model="queryParams.finish" @change="handleRadioChange">
|
|||
|
|
<el-radio value="1" @click.native="handleRadioClick('1', 'finish')">已完成</el-radio>
|
|||
|
|
<el-radio value="0" @click.native="handleRadioClick('0', 'finish')">未完成</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 审核状态选择 -->
|
|||
|
|
<el-form-item label="审核状态：" prop="jgbz">
|
|||
|
|
<el-radio-group v-model="queryParams.jgbz" @change="handleRadioChange">
|
|||
|
|
<el-radio value="2" @click.native="handleRadioClick('2', 'jgbz')">已审核</el-radio>
|
|||
|
|
<el-radio value="3" @click.native="handleRadioClick('3', 'jgbz')">初报</el-radio>
|
|||
|
|
<el-radio value="4" @click.native="handleRadioClick('4', 'jgbz')">二报</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="7">
|
|||
|
|
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="7">
|
|||
|
|
<!-- 危急值选择 -->
|
|||
|
|
<el-form-item prop="alarmflag" label-width="0">
|
|||
|
|
<el-checkbox v-model="queryParams.alarmflag" true-value="1" false-value=""> 警 </el-checkbox>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<!-- 急诊选择 -->
|
|||
|
|
<el-form-item prop="jzbz" label-width="0">
|
|||
|
|
<el-checkbox v-model="queryParams.jzbz" true-value="1" false-value=""> 急诊 </el-checkbox>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<!-- 打印状态选择 -->
|
|||
|
|
<el-form-item label="打印状态：" prop="dybz">
|
|||
|
|
<el-radio-group v-model="queryParams.dybz" @chnage="handleRadioChange">
|
|||
|
|
<el-radio value="1" @click.native="handleRadioClick('1', 'dybz')">已打印</el-radio>
|
|||
|
|
<el-radio value="0" @click.native="handleRadioClick('0', 'dybz')">未打印</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 操作按钮 -->
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" @click="handleQuery" :size="props.size">确认查询</el-button>
|
|||
|
|
<el-button @click="handleReset" style="margin-left: 0.5rem" :size="props.size">重置</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
|
|||
|
|
<template #reference>
|
|||
|
|
<el-input v-model="selectShowValue" :size="props.size" @clear="clearHandle"
|
|||
|
|
@click="selectVisible = !selectVisible" :placeholder="props.placeholder" readonly
|
|||
|
|
:style="{ width: props.width }" suffix-icon="ArrowDown" :clearable="props.clearable" />
|
|||
|
|
</template>
|
|||
|
|
</el-popover>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, defineProps, defineEmits, nextTick, watch } from 'vue'
|
|||
|
|
import { ElMessage } from 'element-plus'
|
|||
|
|
|
|||
|
|
// 定义下拉选项类型
|
|||
|
|
interface OptionItem {
|
|||
|
|
label: string
|
|||
|
|
value: string | number
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 定义查询参数类型
|
|||
|
|
interface QueryParams {
|
|||
|
|
brly?: string | number
|
|||
|
|
jgbz?: string | number
|
|||
|
|
dybz?: string | number
|
|||
|
|
alarmflag?: string | number
|
|||
|
|
jzbz?: string | number
|
|||
|
|
finish?: string | number
|
|||
|
|
autojgbz?: string | number
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 定义组件Props
|
|||
|
|
const props = defineProps<{
|
|||
|
|
// 可传入初始查询参数
|
|||
|
|
initialParams?: Partial<QueryParams>,
|
|||
|
|
// 宽度
|
|||
|
|
width?: string,
|
|||
|
|
// 是否禁用
|
|||
|
|
disabled?: boolean,
|
|||
|
|
// 是否可清空
|
|||
|
|
clearable?: boolean,
|
|||
|
|
// 是否显示查询按钮
|
|||
|
|
showQueryButton?: boolean,
|
|||
|
|
// 是否显示重置按钮
|
|||
|
|
showResetButton?: boolean,
|
|||
|
|
// 尺寸
|
|||
|
|
size?: 'large' | 'default' | 'small',
|
|||
|
|
// 占位符
|
|||
|
|
placeholder?: string,
|
|||
|
|
dictData?: any
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
|
|||
|
|
watch(() => props.dictData, () => {
|
|||
|
|
brlyOptions.value = props.dictData.PT
|
|||
|
|
optionMaps.brly = props.dictData.PT
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 定义组件事件
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
// 查询事件，返回查询参数
|
|||
|
|
(e: 'query', params: QueryParams): void
|
|||
|
|
// 重置事件
|
|||
|
|
(e: 'reset'): void
|
|||
|
|
}>()
|
|||
|
|
const selectVisible = ref(false)
|
|||
|
|
const selectShowValue = ref('')
|
|||
|
|
const selectRef = ref()
|
|||
|
|
// 病人类型选项
|
|||
|
|
const brlyOptions = ref<OptionItem[]>([])
|
|||
|
|
// 审核状态选项
|
|||
|
|
const jgbzOptions: OptionItem[] = [
|
|||
|
|
{ label: '已审核', value: 2 },
|
|||
|
|
{ label: '初报', value: 3 },
|
|||
|
|
{ label: '二报', value: 4 },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 打印状态选项
|
|||
|
|
const dybzOptions: OptionItem[] = [
|
|||
|
|
{ label: '未打印', value: 0 },
|
|||
|
|
{ label: '已打印', value: 1 },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 危急值选项
|
|||
|
|
const alarmflagOptions: OptionItem[] = [
|
|||
|
|
{ label: '危急值', value: 1 },
|
|||
|
|
{ label: '无', value: 0 }
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 急诊选项
|
|||
|
|
const emergencyOptions: OptionItem[] = [
|
|||
|
|
{ label: '急诊', value: 1 },
|
|||
|
|
{ label: '否', value: 0 }
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 完成状态选项
|
|||
|
|
const finishOptions: OptionItem[] = [
|
|||
|
|
{ label: '未完成', value: 0 },
|
|||
|
|
{ label: '已完成', value: 1 },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 自审状态选项
|
|||
|
|
const autojgbzOptions: OptionItem[] = [
|
|||
|
|
{ label: '否', value: 0 },
|
|||
|
|
{ label: '自审', value: 1 },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 创建选项映射关系，方便查找label
|
|||
|
|
const optionMaps = {
|
|||
|
|
brly: props.dictData.PT,
|
|||
|
|
jgbz: jgbzOptions,
|
|||
|
|
dybz: dybzOptions,
|
|||
|
|
alarmflag: alarmflagOptions,
|
|||
|
|
jzbz: emergencyOptions,
|
|||
|
|
finish: finishOptions,
|
|||
|
|
autojgbz: autojgbzOptions
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 查询参数
|
|||
|
|
const queryParams = ref<QueryParams>({
|
|||
|
|
...props.initialParams
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 由于更多按钮在 app 元素内，给 app 元素注册的点击事件必须在弹出框显示后并且是一次性的
|
|||
|
|
// 防止更多按钮的事件与之冲突
|
|||
|
|
const initClickOutside = () => {
|
|||
|
|
document.getElementById('app')!.addEventListener('click', () => {
|
|||
|
|
selectVisible.value = false
|
|||
|
|
}, { once: true })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 记录上一次选中的值
|
|||
|
|
const lastRadioValue = ref<string | undefined>(undefined);
|
|||
|
|
const handleRadioChange = (value: string) => {
|
|||
|
|
lastRadioValue.value = value;
|
|||
|
|
};
|
|||
|
|
const handleRadioClick = (value: string, zd: keyof QueryParams) => {
|
|||
|
|
if (value === lastRadioValue.value) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
queryParams.value[zd] = undefined;
|
|||
|
|
lastRadioValue.value = undefined;
|
|||
|
|
}, 100);
|
|||
|
|
} else {
|
|||
|
|
lastRadioValue.value = value;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
const clearHandle = () => {
|
|||
|
|
queryParams.value = {}
|
|||
|
|
selectShowValue.value = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 根据值和选项列表获取对应的label
|
|||
|
|
const getLabelByValue = (value: string | number | undefined, options: OptionItem[]) => {
|
|||
|
|
if (value === undefined || value === null || value === '') return ''
|
|||
|
|
const item = options.find(option => option.value == value)
|
|||
|
|
return item ? item.label : ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理查询
|
|||
|
|
const handleQuery = () => {
|
|||
|
|
// 过滤空值参数
|
|||
|
|
const filteredParams = Object.fromEntries(
|
|||
|
|
Object.entries(queryParams.value).filter(([_, v]) => v !== undefined && v !== null && v !== '')
|
|||
|
|
) as QueryParams
|
|||
|
|
|
|||
|
|
// 收集所有选中项的label
|
|||
|
|
const labels: string[] = []
|
|||
|
|
Object.entries(filteredParams).forEach(([key, value]) => {
|
|||
|
|
// @ts-ignore
|
|||
|
|
const options = optionMaps[key]
|
|||
|
|
if (options) {
|
|||
|
|
const label = getLabelByValue(value, options)
|
|||
|
|
if (label) labels.push(label)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 拼接label并设置到显示值
|
|||
|
|
selectShowValue.value = labels.join(',')
|
|||
|
|
console.log('selectShowValue.value==>', selectShowValue.value);
|
|||
|
|
|
|||
|
|
emit('query', filteredParams)
|
|||
|
|
|
|||
|
|
selectVisible.value = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理重置
|
|||
|
|
const handleReset = () => {
|
|||
|
|
selectShowValue.value = ''
|
|||
|
|
queryParams.value = {}
|
|||
|
|
selectVisible.value = false;
|
|||
|
|
emit('reset')
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.query-form {
|
|||
|
|
|
|||
|
|
:deep(.el-form-item) {
|
|||
|
|
margin-bottom: .5rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 响应式调整 */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.query-form {
|
|||
|
|
:deep(.el-form-item) {
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|