fix: 病例管理页面开发
parent
89406bb0b0
commit
1ebb244765
@ -1,15 +1,232 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted } from "vue";
|
import { nextTick, reactive, ref } from "vue";
|
||||||
import MainView from "./page/index.vue";
|
import { FormInstance } from "element-plus";
|
||||||
import { useCaseStoreHooks } from "@/store/modules/caseManagement";
|
import { message } from "@/utils/message";
|
||||||
|
// import { useRoute } from "vue-router";
|
||||||
|
defineOptions({
|
||||||
|
name: "AddEdit"
|
||||||
|
});
|
||||||
|
const isEditFlag = ref(false);
|
||||||
|
const diseaseList = ref([]);
|
||||||
|
const id = ref("");
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
|
||||||
onMounted(() => {
|
const formData = reactive({
|
||||||
useCaseStoreHooks().changeIsEditFlag(false);
|
patientGender: "",
|
||||||
|
directoryDesc: "",
|
||||||
|
patientSelfDesc: "",
|
||||||
|
patientAge: "",
|
||||||
|
diseaseId: ""
|
||||||
|
});
|
||||||
|
const ruleFormRef = ref<FormInstance>();
|
||||||
|
const rules = {
|
||||||
|
patientGender: [{ required: true, message: "请选择", trigger: "change" }],
|
||||||
|
directoryDesc: [{ required: true, message: "请输入", trigger: "change" }]
|
||||||
|
};
|
||||||
|
defineExpose({
|
||||||
|
async open(item) {
|
||||||
|
dialogVisible.value = true;
|
||||||
|
await nextTick();
|
||||||
|
if (item) {
|
||||||
|
for (const key in item) {
|
||||||
|
// eslint-disable-next-line no-prototype-builtins
|
||||||
|
if (formData.hasOwnProperty(key)) {
|
||||||
|
formData[key] = item[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
isEditFlag.value = true;
|
||||||
|
id.value = item.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
const resetForm = () => {
|
||||||
|
ruleFormRef.value.resetFields();
|
||||||
|
};
|
||||||
|
const closeDialog = () => {
|
||||||
|
dialogVisible.value = false;
|
||||||
|
isEditFlag.value = false;
|
||||||
|
resetForm();
|
||||||
|
};
|
||||||
|
const emit = defineEmits(["update"]);
|
||||||
|
const reset = () => {
|
||||||
|
ruleFormRef.value.resetFields();
|
||||||
|
};
|
||||||
|
|
||||||
|
const save = (formEl: FormInstance | undefined) => {
|
||||||
|
formEl.validate(async (valid, fields) => {
|
||||||
|
if (valid) {
|
||||||
|
// formData.result = refWangEditor.value.valueHtml;
|
||||||
|
// const params = {
|
||||||
|
// ...formData,
|
||||||
|
// result: refWangEditor.value.valueHtml,
|
||||||
|
// diseaseId: route.query.id
|
||||||
|
// };
|
||||||
|
if (isEditFlag.value) {
|
||||||
|
// const res: any = await updateSupportInspect({
|
||||||
|
// ...params,
|
||||||
|
// id: id.value
|
||||||
|
// });
|
||||||
|
if (res.code === 200) {
|
||||||
|
message("修改成功", { type: "success" });
|
||||||
|
id.value = "";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// const res: any = await addSupportInspect(params);
|
||||||
|
// if (res.code === 200) {
|
||||||
|
// message("新增成功", { type: "success" });
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
dialogVisible.value = false;
|
||||||
|
emit("update");
|
||||||
|
} else {
|
||||||
|
return fields;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<MainView />
|
<el-drawer
|
||||||
|
:size="650"
|
||||||
|
append-to-body
|
||||||
|
v-model="dialogVisible"
|
||||||
|
:show-close="false"
|
||||||
|
:with-header="false"
|
||||||
|
:before-close="closeDialog"
|
||||||
|
custom-class="AddEdit"
|
||||||
|
>
|
||||||
|
<div class="AddEdit">
|
||||||
|
<div class="header-title">
|
||||||
|
<div class="tip" />
|
||||||
|
<span>新建病历</span>
|
||||||
|
</div>
|
||||||
|
<div class="line" />
|
||||||
|
<el-form
|
||||||
|
ref="ruleFormRef"
|
||||||
|
:model="formData"
|
||||||
|
:rules="rules"
|
||||||
|
label-width="80px"
|
||||||
|
>
|
||||||
|
<el-form-item label="姓名" prop="directoryDesc">
|
||||||
|
<el-input
|
||||||
|
size="large"
|
||||||
|
placeholder="请输入"
|
||||||
|
v-model="formData.directoryDesc"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="性别" prop="patientGender">
|
||||||
|
<el-radio-group size="large" v-model="formData.patientGender">
|
||||||
|
<el-radio label="男" />
|
||||||
|
<el-radio label="女" />
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="主诉" prop="patientSelfDesc">
|
||||||
|
<el-input size="large" v-model="formData.patientSelfDesc" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="年龄" prop="patientAge">
|
||||||
|
<el-input
|
||||||
|
size="large"
|
||||||
|
maxLength="3"
|
||||||
|
v-model="formData.patientAge"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="初步诊断:" prop="diseaseId">
|
||||||
|
<el-select
|
||||||
|
size="large"
|
||||||
|
filterable
|
||||||
|
clearable
|
||||||
|
v-model="formData.diseaseId"
|
||||||
|
class="form_select"
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="请选择初步诊断"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in diseaseList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.diseaseName"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<div class="footer_btn">
|
||||||
|
<div class="reset" @click="reset()">重置</div>
|
||||||
|
<div class="main" @click="save(ruleFormRef)">确定</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-drawer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.AddEdit {
|
||||||
|
:deep(.el-form-item__label) {
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// border-left: 6px solid #4287ff;
|
||||||
|
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #2b3f54;
|
||||||
|
|
||||||
|
.tip {
|
||||||
|
width: 6px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 10px;
|
||||||
|
line-height: 20px;
|
||||||
|
background: #4287ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
position: relative;
|
||||||
|
left: -20px;
|
||||||
|
width: 605px;
|
||||||
|
height: 1px;
|
||||||
|
margin: 24px 0;
|
||||||
|
background: rgb(91 139 255 / 30%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer_btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 16px;
|
||||||
|
|
||||||
|
.reset {
|
||||||
|
width: 188px;
|
||||||
|
height: 48px;
|
||||||
|
margin-right: 24px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 48px;
|
||||||
|
color: #4287ff;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #4287ff;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: 188px;
|
||||||
|
height: 48px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 48px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #4287ff;
|
||||||
|
border: 1px solid #4287ff;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,39 @@
|
|||||||
|
<script setup lang="ts"></script>
|
||||||
|
<template>
|
||||||
|
<div class="ElectronicCase">
|
||||||
|
<div class="header">
|
||||||
|
<div class="header_left">
|
||||||
|
<span>电子病历</span>
|
||||||
|
</div>
|
||||||
|
<div class="header_right">
|
||||||
|
<el-button size="large" class="btn" @click="add" type="primary"
|
||||||
|
>添加病例项</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.ElectronicCase {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 88px;
|
||||||
|
padding: 0 40px;
|
||||||
|
border-bottom: 1px solid #d9d9d9;
|
||||||
|
|
||||||
|
.header_left {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding-left: 8px;
|
||||||
|
border-left: 6px solid #4287ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import ElectronicCase from "./compontents/ElectronicCase/index.vue";
|
||||||
|
import { ref } from "vue";
|
||||||
|
const activedIndex = ref(0);
|
||||||
|
const navList = ref([
|
||||||
|
{
|
||||||
|
name: "电子病历"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "临床问诊"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "临床诊断"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "诊断依据"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "处置计划"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="editCase main-table">
|
||||||
|
<div class="editCase_nav">
|
||||||
|
<div
|
||||||
|
class="editCase_nav_item"
|
||||||
|
:class="[activedIndex === index ? 'actived' : '']"
|
||||||
|
v-for="(item, index) in navList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="line" />
|
||||||
|
<span>{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ElectronicCase v-if="activedIndex === 0" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.editCase {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row !important;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.editCase_nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 168px;
|
||||||
|
// justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
padding-top: 24px;
|
||||||
|
border-right: 1px solid #d9d9d9;
|
||||||
|
|
||||||
|
.editCase_nav_item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 120px;
|
||||||
|
height: 53px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 4px;
|
||||||
|
height: 17px;
|
||||||
|
margin-right: 12px;
|
||||||
|
background: #999;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actived {
|
||||||
|
color: #4287ff;
|
||||||
|
background: linear-gradient(90deg, rgb(66 135 255 / 10%) 0%, #fff 100%);
|
||||||
|
|
||||||
|
.line {
|
||||||
|
background: #4287ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,133 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref } from "vue";
|
||||||
|
import AddEdit from "./addEdit.vue";
|
||||||
|
import { Edit, Delete } from "@element-plus/icons-vue";
|
||||||
|
import { downLoadUrl } from "@/utils/auth";
|
||||||
|
const dataList = ref([]);
|
||||||
|
const activedId = ref("");
|
||||||
|
const AddEditRef = ref();
|
||||||
|
const add = () => {
|
||||||
|
AddEditRef.value.open();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onMouseenter = id => {
|
||||||
|
activedId.value = id;
|
||||||
|
};
|
||||||
|
const onMouseleave = () => {
|
||||||
|
activedId.value = "";
|
||||||
|
};
|
||||||
|
const handleCommand = async (e: any) => {
|
||||||
|
if (e === "edit") {
|
||||||
|
// EditMaterialsRef.value.open(0, item);
|
||||||
|
} else {
|
||||||
|
// const res: any = await deleteMaterial({
|
||||||
|
// id: item.id
|
||||||
|
// });
|
||||||
|
// if (res.code === 200) {
|
||||||
|
// message("删除成功", { type: "success" });
|
||||||
|
// getData();
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const getData = () => {};
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="digitalHuman main-table">
|
||||||
|
<div class="main-table-title">
|
||||||
|
<div class="title">
|
||||||
|
<div class="line" />
|
||||||
|
<span> 数字人生成器 </span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-row class="mb-6">
|
||||||
|
<el-button size="large" class="btn" @click="add" type="primary"
|
||||||
|
>生成数字人</el-button
|
||||||
|
>
|
||||||
|
</el-row>
|
||||||
|
<div v-show="dataList.length > 0" class="img_card_list">
|
||||||
|
<div
|
||||||
|
class="img_card_item"
|
||||||
|
v-for="(item, index) in dataList"
|
||||||
|
:key="index"
|
||||||
|
@mouseenter.prevent="onMouseenter(item.id)"
|
||||||
|
@mouseleave.prevent="onMouseleave()"
|
||||||
|
>
|
||||||
|
<div class="folder_img">
|
||||||
|
<img :src="downLoadUrl(item.fileResourceId)" alt="" />
|
||||||
|
</div>
|
||||||
|
<div :title="item.materialName" class="name">
|
||||||
|
{{ item.materialName }}
|
||||||
|
</div>
|
||||||
|
<el-dropdown
|
||||||
|
@command="e => handleCommand(e, item)"
|
||||||
|
trigger="click"
|
||||||
|
class="icon"
|
||||||
|
>
|
||||||
|
<moreIcon v-show="activedId === item.id" />
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item command="edit" :icon="Edit">
|
||||||
|
编辑
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="del" :icon="Delete">
|
||||||
|
删除
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<AddEdit ref="AddEditRef" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.digitalHuman {
|
||||||
|
.img_card_list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.img_card_item {
|
||||||
|
position: relative;
|
||||||
|
width: 190px;
|
||||||
|
height: 230px;
|
||||||
|
margin-right: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0 0 12px 12px;
|
||||||
|
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder_img {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 190px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 130px;
|
||||||
|
height: 130px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
width: 200px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue