fix: 病例管理页面开发
parent
89406bb0b0
commit
1ebb244765
@ -1,15 +1,232 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from "vue";
|
||||
import MainView from "./page/index.vue";
|
||||
import { useCaseStoreHooks } from "@/store/modules/caseManagement";
|
||||
import { nextTick, reactive, ref } from "vue";
|
||||
import { FormInstance } from "element-plus";
|
||||
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);
|
||||
|
||||
const formData = reactive({
|
||||
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();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
useCaseStoreHooks().changeIsEditFlag(false);
|
||||
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>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</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