Skip to content

V
vue-composition-api
Commit 08b47a3e by tangyufeng
Options

1.滚动条 

2.修复锁定状态栏
3.修复页面跳转
parent cc1f20bb
Showing with 1005 additions and 1293 deletions
src/views/outClinicalpathway.vue
...@@ -6,530 +6,288 @@ ...@@ -6,530 +6,288 @@
* @Description: * @Description:
--> -->
<template> <template>
<!-- 临床路径外放页面 --> <!-- 临床路径外放页面 -->
<div class="outClinicalpathway"> <div class="outClinicalpathway">
<!-- 患者信息 --> <!-- 患者信息 -->
<div class="outClinicalpathway_top"> <div class="outClinicalpathway_top">
<div class="outClinicalpathway_top_bg"></div> <div class="outClinicalpathway_top_bg"></div>
<div class="outClinicalpathway_top_coent"> <div class="outClinicalpathway_top_coent">
<!--患者信息 --> <!--患者信息 -->
<div class="outClinicalpathway_top_coent_left"> <div class="outClinicalpathway_top_coent_left">
<div class="outClinicalpathway_top_coent_left_one"> <div class="outClinicalpathway_top_coent_left_one">
<span><img src="../assets/img/peo.png" alt="" /></span> <span><img src="../assets/img/peo.png" alt="" /></span>
<div class="outClinicalpathway_top_coent_left_one_t1"> <div class="outClinicalpathway_top_coent_left_one_t1">
患者姓名:<span>{{ topdata.patientName }}</span> 患者姓名:<span>{{ topdata.patientName }}</span>
</div> </div>
<div class="outClinicalpathway_top_coent_left_one_t2"> <div class="outClinicalpathway_top_coent_left_one_t2">
住院号:<span>{{ topdata.regCode }}</span> 住院号:<span>{{ topdata.regCode }}</span>
</div> </div>
<div class="outClinicalpathway_top_coent_left_one_t3"> <div class="outClinicalpathway_top_coent_left_one_t3">
住院次数:<span>{{ topdata.inHosNum }}</span> 住院次数:<span>{{ topdata.inHosNum }}</span>
</div>
<div class="outClinicalpathway_top_coent_left_one_t4">
符合临床路径:<span>{{ topdata.clinical_route_name }}</span>
</div>
</div>
</div>
<div class="outClinicalpathway_top_coent_right">
<div class="outClinicalpathway_top_coent_right_btn">
<el-button icon="el-icon-user" style="background-color: #0283bb; color: #ffff" @click="joinorder()">保存医嘱</el-button>
<el-button icon="el-icon-s-tools" style="background-color: #0283bb; color: #ffff" @click="variation()">病情变异</el-button>
</div>
</div>
</div> </div>
<div class="outClinicalpathway_top_coent_left_one_t4"> <div class="outClinicalpathway_top_time">
符合临床路径:<span>{{ topdata.clinical_route_name }}</span> <el-timeline style="display: flex; width: 25%; padding: 0 10px">
<el-timeline-item
:class="timeindex == activity.inhosdays ? 'outClinicalpathway_top_time_timespan' : 'outClinicalpathway_top_time_timespan2'"
v-for="(activity, index) in activities"
:key="index"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:hollow="activity.hollow"
:timestamp="activity.timestamp"
>
<span @click="timeclick(activity)">{{ activity.inhosdays }}</span>
</el-timeline-item>
</el-timeline>
</div> </div>
</div>
</div> </div>
<div class="outClinicalpathway_top_coent_right"> <!--病情变异弹框开始 -->
<div class="outClinicalpathway_top_coent_right_btn"> <el-dialog :visible.sync="editdialogFormVisible" width="30%" @close="close">
<el-button <el-form ref="fromRef" :model="form" :label-position="labelPosition" label-width="100px">
icon="el-icon-user" <el-form-item label="路径天数:">
style="background-color: #0283bb; color: #ffff" <!-- <el-input v-model="form.inhosdays" /> -->
@click="joinorder()" <el-select v-model="form.inhosdays" class="m-2" placeholder="请选择" size="mini">
>保存医嘱</el-button <el-option v-for="item in options" :key="item.inhosdays" :label="item.inhosdays" :value="item.inhosdays" />
> </el-select>
<el-button </el-form-item>
icon="el-icon-s-tools" <el-form-item label="变异原因:">
style="background-color: #0283bb; color: #ffff" <el-select v-model="form.reason" class="m-2" placeholder="请选择" size="mini" :title="getTitle(form.reason)">
@click="variation()" <el-option v-for="item in reasonoptions" :key="item.id" :label="item.describe" :value="item.describe" :title="item.describe">
>病情变异</el-button </el-option>
> </el-select>
</div> </el-form-item>
</div> <el-form-item label="备注:">
</div> <el-input v-model="form.remarks" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" />
<div class="outClinicalpathway_top_time"> </el-form-item>
<el-timeline style="display: flex; width: 25%; padding: 0 10px"> </el-form>
<el-timeline-item <template #footer>
:class=" <span class="dialog-footer">
timeindex == activity.inhosdays <el-button size="mini" @click="close()">取消</el-button>
? 'outClinicalpathway_top_time_timespan' <el-button size="mini" type="primary" @click="fromOKbtn()">确定 </el-button>
: 'outClinicalpathway_top_time_timespan2' </span>
"
v-for="(activity, index) in activities"
:key="index"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:hollow="activity.hollow"
:timestamp="activity.timestamp"
>
<span @click="timeclick(activity)">{{ activity.inhosdays }}</span>
</el-timeline-item>
</el-timeline>
</div>
</div>
<!--病情变异弹框开始 -->
<el-dialog :visible.sync="editdialogFormVisible" width="30%" @close="close">
<el-form
ref="fromRef"
:model="form"
:label-position="labelPosition"
label-width="100px"
>
<el-form-item label="路径天数:">
<!-- <el-input v-model="form.inhosdays" /> -->
<el-select
v-model="form.inhosdays"
class="m-2"
placeholder="请选择"
size="mini"
>
<el-option
v-for="item in options"
:key="item.inhosdays"
:label="item.inhosdays"
:value="item.inhosdays"
/>
</el-select>
</el-form-item>
<el-form-item label="变异原因:">
<el-select
v-model="form.reason"
class="m-2"
placeholder="请选择"
size="mini"
:title="getTitle(form.reason)"
>
<el-option
v-for="item in reasonoptions"
:key="item.id"
:label="item.describe"
:value="item.describe"
:title="item.describe"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注:">
<el-input
v-model="form.remarks"
:autosize="{ minRows: 4, maxRows: 10 }"
type="textarea"
/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button size="mini" @click="close()">取消</el-button>
<el-button size="mini" type="primary" @click="fromOKbtn()"
>确定
</el-button>
</span>
</template>
</el-dialog>
<!--病情变异弹框结束 -->
<!-- 表格 -->
<div class="outClinicalpathway_table">
<!-- 表格 -->
<div class="outClinicalpathway_table_right">
<div class="outClinicalpathway_table_right_radio">
<el-radio-group v-model="radio" @input="radiochange">
<el-radio :label="1">长期医嘱</el-radio>
<el-radio :label="2">临时医嘱</el-radio>
</el-radio-group>
</div>
<el-table
ref="multipleTable"
row-key="id"
:data="tableData"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
:select-on-indeterminate="true"
@selection-change="SelectionChange"
@select-all="selectAll"
@select="select"
default-expand-all
size="mini"
:row-class-name="rowClass"
>
<el-table-column
type="selection"
:selectable="selectEnable"
width="55"
/>
<el-table-column
show-overflow-tooltip
property="advice_name"
label="路径名称"
width="150"
/>
<el-table-column
show-overflow-tooltip
property="tickTime"
label="当前时间"
width="145"
>
<template #default="scope">
<span
v-if="scope.row.advice_name == null && scope.row.ischeck == 1"
>{{ scope.row.tickTime }}</span
>
</template> </template>
</el-table-column> </el-dialog>
<el-table-column <!--病情变异弹框结束 -->
show-overflow-tooltip <!-- 表格 -->
property="orderType" <div class="outClinicalpathway_table">
label="类型" <!-- 表格 -->
width="60" <div class="outClinicalpathway_table_right">
/> <div class="outClinicalpathway_table_right_radio">
<el-radio-group v-model="radio" @input="radiochange">
<el-radio :label="1">长期医嘱</el-radio>
<el-radio :label="2">临时医嘱</el-radio>
</el-radio-group>
</div>
<el-table
ref="multipleTable"
row-key="id"
:data="tableData"
height="100%"
style="width: 100%"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
:select-on-indeterminate="true"
@selection-change="SelectionChange"
@select-all="selectAll"
@select="select"
default-expand-all
size="mini"
:row-class-name="rowClass"
>
<el-table-column type="selection" :selectable="selectEnable" width="55" />
<el-table-column <el-table-column show-overflow-tooltip property="advice_name" label="路径名称" width="150" />
show-overflow-tooltip <el-table-column show-overflow-tooltip property="tickTime" label="当前时间" width="145">
property="project_name" <template #default="scope">
label="医院项目名称" <span v-if="scope.row.advice_name == null && scope.row.ischeck == 1">{{ scope.row.tickTime }}</span>
width="120" </template>
/> </el-table-column>
<el-table-column show-overflow-tooltip property="orderType" label="类型" width="60" />
<el-table-column <el-table-column show-overflow-tooltip property="project_name" label="医院项目名称" width="220" />
show-overflow-tooltip
property="specifications"
label="规格说明"
width="80"
/>
<el-table-column
show-overflow-tooltip
property="dosage"
label="药品剂型"
width="80"
/>
<el-table-column
show-overflow-tooltip
property="isAntibiotic"
label="抗生素"
width="85"
>
<template #default="scope">
<el-select
v-if="scope.row.advice_name == null && scope.row.ischeck == 1"
size="mini"
v-model="scope.row.isAntibiotic"
>
<el-option
v-for="item in chargeTypeoptions"
:key="item.label"
:label="item.label"
:value="item.label"
>
</el-option>
</el-select>
<span v-else>{{ scope.row.isAntibiotic }}</span>
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
property="medicalPurpose"
label="用药目的"
width="135"
>
<template #default="scope">
<el-select
v-if="scope.row.advice_name == null && scope.row.ischeck == 1"
size="mini"
v-model="scope.row.medicalPurpose"
>
<el-option
v-for="item in medicalPurposeoptions"
:key="item.id"
:label="item.describe"
:value="item.describe"
>
</el-option>
</el-select>
<span v-else>{{ scope.row.medicalPurpose }}</span>
</template>
</el-table-column>
<el-table-column prop="medicUseQuantity" label="用量" width="75">
<template #default="scope">
<el-input
v-if="scope.row.advice_name == null && scope.row.ischeck == 1"
v-model="scope.row.medicUseQuantity"
size="mini"
></el-input>
<span v-else>{{ scope.row.medicUseQuantity }}</span>
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
property="medicUseUnit"
label="单位"
width="50"
/>
<el-table-column
show-overflow-tooltip
property="medicUseMode"
label="途径"
width="110"
>
<template #default="scope">
<el-select
v-if="scope.row.advice_name == null && scope.row.ischeck == 1"
size="mini"
v-model="scope.row.medicUseMode"
>
<el-option
v-for="item in medicUseModeoptions"
:key="item.id"
:label="item.describe"
:value="item.describe"
>
</el-option>
</el-select>
<span v-else>{{ scope.row.medicUseMode }}</span>
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
property="medicUsePlan"
label="频率"
width="100"
>
<template #default="scope">
<el-select
v-if="scope.row.advice_name == null && scope.row.ischeck == 1"
size="mini"
v-model="scope.row.medicUsePlan"
>
<el-option
v-for="item in medicUsePlanoptions"
:key="item.id"
:label="item.describe"
:value="item.describe"
>
</el-option>
</el-select>
<span v-else>{{ scope.row.medicUsePlan }}</span>
</template>
</el-table-column>
<el-table-column prop="medicQuantity" label="用药总量" width="80"> <el-table-column show-overflow-tooltip property="specifications" label="规格说明" width="80" />
<template #default="scope"> <el-table-column show-overflow-tooltip property="dosage" label="药品剂型" width="80" />
<el-input <el-table-column show-overflow-tooltip property="isAntibiotic" label="抗生素" width="85">
v-if="scope.row.advice_name == null && scope.row.ischeck == 1" <template #default="scope">
v-model="scope.row.medicQuantity" <el-select v-if="scope.row.advice_name == null && scope.row.ischeck == 1" size="mini" v-model="scope.row.isAntibiotic">
size="mini" <el-option v-for="item in chargeTypeoptions" :key="item.label" :label="item.label" :value="item.label"> </el-option>
></el-input> </el-select>
<span v-else>{{ scope.row.medicQuantity }}</span> <span v-else>{{ scope.row.isAntibiotic }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column show-overflow-tooltip property="medicalPurpose" label="用药目的" width="135">
show-overflow-tooltip <template #default="scope">
property="medicUnit" <el-select v-if="scope.row.advice_name == null && scope.row.ischeck == 1" size="mini" v-model="scope.row.medicalPurpose">
label="单位" <el-option v-for="item in medicalPurposeoptions" :key="item.id" :label="item.describe" :value="item.describe"> </el-option>
width="50" </el-select>
/> <span v-else>{{ scope.row.medicalPurpose }}</span>
<el-table-column </template>
show-overflow-tooltip </el-table-column>
property="remark" <el-table-column prop="medicUseQuantity" label="用量" width="75">
label="嘱托" <template #default="scope">
width="150'" <el-input
> v-if="scope.row.advice_name == null && scope.row.ischeck == 1"
<template #default="scope"> v-model="scope.row.medicUseQuantity"
<el-input size="mini"
v-if="scope.row.advice_name == null && scope.row.ischeck == 1" ></el-input>
v-model="scope.row.remark" <span v-else>{{ scope.row.medicUseQuantity }}</span>
size="mini" </template>
type="textarea" </el-table-column>
:autosize="{ minRows: 2 }" <el-table-column show-overflow-tooltip property="medicUseUnit" label="单位" width="50" />
placeholder="请输入内容" <el-table-column show-overflow-tooltip property="medicUseMode" label="途径" width="110">
></el-input> <template #default="scope">
<span v-else>{{ scope.row.remark }}</span> <el-select v-if="scope.row.advice_name == null && scope.row.ischeck == 1" size="mini" v-model="scope.row.medicUseMode">
</template> <el-option v-for="item in medicUseModeoptions" :key="item.id" :label="item.describe" :value="item.describe"> </el-option>
</el-table-column> </el-select>
<span v-else>{{ scope.row.medicUseMode }}</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip property="medicUsePlan" label="频率" width="100">
<template #default="scope">
<el-select v-if="scope.row.advice_name == null && scope.row.ischeck == 1" size="mini" v-model="scope.row.medicUsePlan">
<el-option v-for="item in medicUsePlanoptions" :key="item.id" :label="item.describe" :value="item.describe"> </el-option>
</el-select>
<span v-else>{{ scope.row.medicUsePlan }}</span>
</template>
</el-table-column>
<el-table-column prop="description" label="诊断描述" width="150"> <el-table-column prop="medicQuantity" label="用药总量" width="80">
<template #default="scope"> <template #default="scope">
<div <el-input v-if="scope.row.advice_name == null && scope.row.ischeck == 1" v-model="scope.row.medicQuantity" size="mini"></el-input>
style=" <span v-else>{{ scope.row.medicQuantity }}</span>
display: flex; </template>
height: 100%; </el-table-column>
flex-direction: column; <el-table-column show-overflow-tooltip property="medicUnit" label="单位" width="50" />
justify-content: center; <el-table-column show-overflow-tooltip property="remark" label="嘱托" width="150'">
align-items: center; <template #default="scope">
" <el-input
> v-if="scope.row.advice_name == null && scope.row.ischeck == 1"
<div style="display: flex"> v-model="scope.row.remark"
<span size="mini"
v-if=" type="textarea"
scope.row.advice_name == null && :autosize="{ minRows: 2 }"
scope.row.ischeck == 1 && placeholder="请输入内容"
scope.row.type == 2 ></el-input>
" <span v-else>{{ scope.row.remark }}</span>
style="color: red" </template>
>*</span </el-table-column>
>
<el-input <el-table-column prop="description" label="诊断描述" width="150">
size="mini" <template #default="scope">
type="textarea" <div style="display: flex; height: 100%; flex-direction: column; justify-content: center; align-items: center">
:autosize="{ minRows: 2 }" <div style="display: flex">
placeholder="请输入内容" <span v-if="scope.row.advice_name == null && scope.row.ischeck == 1 && scope.row.type == 2" style="color: red">*</span>
v-if=" <el-input
scope.row.advice_name == null && size="mini"
scope.row.ischeck == 1 && type="textarea"
scope.row.type != 1 :autosize="{ minRows: 2 }"
" placeholder="请输入内容"
v-model="scope.row.description" v-if="scope.row.advice_name == null && scope.row.ischeck == 1 && scope.row.type != 1"
></el-input> v-model="scope.row.description"
</div> ></el-input>
<span </div>
style="font-size: 12px; color: red" <span
v-if=" style="font-size: 12px; color: red"
scope.row.advice_name == null && v-if="scope.row.advice_name == null && scope.row.ischeck == 1 && scope.row.type == 2 && scope.row.description == ''"
scope.row.ischeck == 1 && >请输入内容</span
scope.row.type == 2 && >
scope.row.description == '' </div>
" </template>
>请输入内容</span </el-table-column>
> <el-table-column prop="symptom" label="症状及体征" width="150">
</div> <template #default="scope">
</template> <div style="display: flex; height: 100%; flex-direction: column; justify-content: center; align-items: center">
</el-table-column> <div style="display: flex">
<el-table-column prop="symptom" label="症状及体征" width="150"> <span v-if="scope.row.advice_name == null && scope.row.ischeck == 1 && scope.row.type == 2" style="color: red">*</span>
<template #default="scope"> <el-input
<div size="mini"
style=" type="textarea"
display: flex; :autosize="{ minRows: 2 }"
height: 100%; placeholder="请输入内容"
flex-direction: column; v-if="scope.row.advice_name == null && scope.row.ischeck == 1 && scope.row.type != 1"
justify-content: center; v-model="scope.row.symptom"
align-items: center; ></el-input>
" </div>
> <span
<div style="display: flex"> style="font-size: 12px; color: red"
<span v-if="scope.row.advice_name == null && scope.row.ischeck == 1 && scope.row.type == 2 && scope.row.symptom == ''"
v-if=" >请输入内容</span
scope.row.advice_name == null && >
scope.row.ischeck == 1 && </div>
scope.row.type == 2 </template>
" </el-table-column>
style="color: red"
>*</span
>
<el-input
size="mini"
type="textarea"
:autosize="{ minRows: 2 }"
placeholder="请输入内容"
v-if="
scope.row.advice_name == null &&
scope.row.ischeck == 1 &&
scope.row.type != 1
"
v-model="scope.row.symptom"
></el-input>
</div>
<span
style="font-size: 12px; color: red"
v-if="
scope.row.advice_name == null &&
scope.row.ischeck == 1 &&
scope.row.type == 2 &&
scope.row.symptom == ''
"
>请输入内容</span
>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="80"> <el-table-column label="操作" width="80">
<template #default="scope"> <template #default="scope">
<el-button <el-button
v-if=" v-if="scope.row.advice_name == null && scope.row.ischeck == 1 && scope.row.type != 1"
scope.row.advice_name == null && size="mini"
scope.row.ischeck == 1 && type="primary"
scope.row.type != 1 @click="goSeeScore(scope.row, scope.$index, scope)"
" >更多</el-button
size="mini" >
type="primary" </template>
@click="goSeeScore(scope.row, scope.$index, scope)" </el-table-column>
>更多</el-button </el-table>
> </div>
</div>
<!-- 更多弹框开始 -->
<el-dialog :visible.sync="goSeeScoredialogFormVisible" width="30%">
<el-form ref="goSeefromRef" :model="goSeeform" :label-position="labelPosition" label-width="100px">
<el-form-item label="主诉:">
<el-input v-model="goSeeform.chiefComplaint" :autosize="{ minRows: 2 }" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="检查目的:">
<el-input
v-model="goSeeform.inspectionPurpose"
:autosize="{ minRows: 2 }"
type="textarea"
placeholder="请输入内容"
:disabled="distype == 3 ? true : false"
/>
</el-form-item>
<el-form-item label="既往史:">
<el-input v-model="goSeeform.pastHistory" :autosize="{ minRows: 2 }" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="其他辅助项目:">
<el-input
v-model="goSeeform.auxiliaryItems"
:autosize="{ minRows: 2 }"
type="textarea"
placeholder="请输入内容"
:disabled="distype == 3 ? true : false"
/>
</el-form-item>
<el-form-item label="备注:">
<el-input v-model="goSeeform.inspectRemarks" :autosize="{ minRows: 2 }" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button size="mini" @click="goSeecolse()">取消</el-button>
<el-button size="mini" @click="goSeeok()">确定 </el-button>
</span>
</template> </template>
</el-table-column> </el-dialog>
</el-table> <!-- 更多弹框结束 -->
</div>
</div> </div>
<!-- 更多弹框开始 -->
<el-dialog :visible.sync="goSeeScoredialogFormVisible" width="30%">
<el-form
ref="goSeefromRef"
:model="goSeeform"
:label-position="labelPosition"
label-width="100px"
>
<el-form-item label="主诉:">
<el-input
v-model="goSeeform.chiefComplaint"
:autosize="{ minRows: 2 }"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
<el-form-item label="检查目的:">
<el-input
v-model="goSeeform.inspectionPurpose"
:autosize="{ minRows: 2 }"
type="textarea"
placeholder="请输入内容"
:disabled="distype == 3 ? true : false"
/>
</el-form-item>
<el-form-item label="既往史:">
<el-input
v-model="goSeeform.pastHistory"
:autosize="{ minRows: 2 }"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
<el-form-item label="其他辅助项目:">
<el-input
v-model="goSeeform.auxiliaryItems"
:autosize="{ minRows: 2 }"
type="textarea"
placeholder="请输入内容"
:disabled="distype == 3 ? true : false"
/>
</el-form-item>
<el-form-item label="备注:">
<el-input
v-model="goSeeform.inspectRemarks"
:autosize="{ minRows: 2 }"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button size="mini" @click="goSeecolse()">取消</el-button>
<el-button size="mini" @click="goSeeok()">确定 </el-button>
</span>
</template>
</el-dialog>
<!-- 更多弹框结束 -->
</div>
</template> </template>
<script> <script>
import http from "../utils/http"; import http from "../utils/http";
import { import { reactive, toRefs, onMounted, nextTick, computed, ref } from "@vue/composition-api";
reactive,
toRefs,
onMounted,
nextTick,
computed,
ref,
} from "@vue/composition-api";
import { decimal } from "../utils/decimal"; import { decimal } from "../utils/decimal";
import { img } from "../assets/img/zu.png"; import { img } from "../assets/img/zu.png";
import { Message } from "element-ui"; import { Message } from "element-ui";
...@@ -541,616 +299,570 @@ import { transformTimestampnow } from "../utils/formatTime"; ...@@ -541,616 +299,570 @@ import { transformTimestampnow } from "../utils/formatTime";
import { format } from "echarts"; import { format } from "echarts";
import M from "minimatch"; import M from "minimatch";
export default { export default {
name: "outClinicalpathway", name: "outClinicalpathway",
setup() { setup() {
//表格自适应高度 //表格自适应高度
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const fromRef = ref(); const fromRef = ref();
const goSeefromRef = ref(); const goSeefromRef = ref();
function tableLayout() { function tableLayout() {
nextTick(() => { nextTick(() => {
fromRef.value.doLayout(); fromRef.value.doLayout();
}); });
}
const monthlyPlanTable = ref();
const multipleTable = ref();
const transformTime = computed(() => {
return transformTimestampnow;
});
let state = reactive({
//患者信息
topdata: {
patientName: "", //患者姓名
regCode: "", // 住院号
inHosNum: "", // 住院次数
clinical_route_name: "", // 符合临床路径
},
multipleSelection: [], //被选择的数据
selectArr: [],
tableData: [], //表格数据
yztype: {
1: "长期医嘱",
2: "临时医嘱",
},
//被点击的index
timeindex: null,
case_routeid: null, //点击左侧时间线的天数id
inhosdays: null, //点击左侧时间线的天数
//时间线
activities: [],
labelPosition: "right",
editdialogFormVisible: false, //弹框是否显示
//表单
form: {
inhosdays: "",
reason: "", //变异原因
remarks: "", //备注
},
//路径天数下拉数据
options: [],
reasonoptions: [], //变异原因
crid: null,
chickid: [], //选中的id
chargeTypeoptions: [
{
label: "是",
},
{
label: "否",
},
],
tempRow: {}, //储存正在编辑的行
tempRowChildren: [],
medicUseModeoptions: [], //途径
medicUsePlanoptions: [], //频率
medicalPurposeoptions: [], //用药目的
radio: 1,
newtable1: [],
newtable2: [],
objtable: { route1: [], route2: [] },
goSeeScoredialogFormVisible: false, //更多弹框
goSeeform: {},
oldRowObj: {},
goSeeIndex: "",
goSeeIndexPid: "",
distype: 1,
hisUrl: "", //his的接口地址
tempMedicalDrug: {},
tempMedicalcheck: {},
tempMedicalCheckout: {},
longMedical: {},
});
//表格禁用
const selectEnable = (row, rowIndex) => {
if (row.isForbidden == false) {
return false; // 不禁用
} else {
return true; //禁用
}
};
//表格当前行样式
const rowClass = ({ row, index }) => {
if (row.isClass == true) {
return "rowStyleclass";
} else {
return "";
}
};
//更多
const goSeeScore = (row) => {
console.log("state.tableData", state.tableData);
console.log("row", row);
state.distype = row.type;
state.goSeeScoredialogFormVisible = true;
state.oldRowObj = { ...row };
state.goSeeform = { ...row };
state.tableData.forEach((item, index) => {
let childIndex = item.children.findIndex((v) => v.id == row.id);
if (childIndex !== -1) {
state.goSeeIndexPid = index;
state.goSeeIndex = childIndex;
}
});
};
//更多-取消
const goSeecolse = () => {
state.goSeeform = {};
let childrenList = [...state.tableData[state.goSeeIndexPid].children];
childrenList.splice(state.goSeeIndex, 1, state.oldRowObj);
state.tableData[state.goSeeIndexPid].children = childrenList;
state.goSeeScoredialogFormVisible = false;
toggleSelection(state.oldRowObj, true);
};
//更多--确定
const goSeeok = () => {
let childrenList = [...state.tableData[state.goSeeIndexPid].children];
childrenList.splice(state.goSeeIndex, 1, state.goSeeform);
state.tableData[state.goSeeIndexPid].children = childrenList;
console.log(state.tableData, 999);
state.goSeeScoredialogFormVisible = false;
toggleSelection(state.goSeeform, true);
};
//获取途径，频率的下拉数据
const gemedicUseModeoptions = () => {
http
.post(
`/ClinicalRoute/ClinicalRoute/GetStaCRParametersByType?type=1`,
{}
)
.then((data) => {
state.medicUseModeoptions = data;
})
.catch((error) => {});
};
//获取频率，频率的下拉数据
const gemedicUsePlanoptions = () => {
http
.post(
`/ClinicalRoute/ClinicalRoute/GetStaCRParametersByType?type=2`,
{}
)
.then((data) => {
state.medicUsePlanoptions = data;
})
.catch((error) => {});
};
//获取用要目的下拉数据
const getmedicalPurposeoptions = () => {
http
.post(
`/ClinicalRoute/ClinicalRoute/GetStaCRParametersByType?type=3`,
{}
)
.then((data) => {
state.medicalPurposeoptions = data;
})
.catch((error) => {});
};
//获取患者信息
const gettopdata = () => {
http
.post(
`/ClinicalRoute/ClinicalRoute/GetPatientInfo?pid=${route.value.query.pid}`,
{}
)
.then((data) => {
state.topdata = data;
state.crid = data.crid;
getreasonoptions();
})
.catch((error) => {});
};
const setChildren = (children, type) => {
// 编辑多个子层级
children.map((j) => {
toggleSelection(j, type);
if (j.children) {
setChildren(j.children, type);
}
});
};
// 选中父节点时，子节点一起选中取消
const select = (selection, row) => {
console.log("row--父节点", row);
row.tickTime = transformTimestampnow();
// 选中
if (
selection.some((el) => {
return row.id === el.id;
})
) {
row.ischeck = 1;
if (row.children) {
row.children.map((j) => {
toggleSelection(j, true);
});
} }
//取消 const monthlyPlanTable = ref();
} else { const multipleTable = ref();
if (row.children) { const transformTime = computed(() => {
row.children.map((p) => { return transformTimestampnow;
p.ischeck = 2; });
p.isClass = false;
toggleSelection(p, false); let state = reactive({
}); //患者信息
} else { topdata: {
//取消的行数据 patientName: "", //患者姓名
row.ischeck = 2; regCode: "", // 住院号
} inHosNum: "", // 住院次数
} clinical_route_name: "", // 符合临床路径
}; },
// 控制选框是否被选中 multipleSelection: [], //被选择的数据
const toggleSelection = (row, select) => { selectArr: [],
if (row) { tableData: [], //表格数据
// console.log("row-亮", row); yztype: {
1: "长期医嘱",
2: "临时医嘱",
},
//被点击的index
timeindex: null,
case_routeid: null, //点击左侧时间线的天数id
inhosdays: null, //点击左侧时间线的天数
//时间线
activities: [],
labelPosition: "right",
editdialogFormVisible: false, //弹框是否显示
//表单
form: {
inhosdays: "",
reason: "", //变异原因
remarks: "", //备注
},
//路径天数下拉数据
options: [],
reasonoptions: [], //变异原因
crid: null,
chickid: [], //选中的id
nextTick(() => { chargeTypeoptions: [
multipleTable.value && {
multipleTable.value.toggleRowSelection(row, select); label: "是",
},
{
label: "否",
},
],
tempRow: {}, //储存正在编辑的行
tempRowChildren: [],
medicUseModeoptions: [], //途径
medicUsePlanoptions: [], //频率
medicalPurposeoptions: [], //用药目的
radio: 1,
newtable1: [],
newtable2: [],
objtable: { route1: [], route2: [] },
goSeeScoredialogFormVisible: false, //更多弹框
goSeeform: {},
oldRowObj: {},
goSeeIndex: "",
goSeeIndexPid: "",
distype: 1,
hisUrl: "", //his的接口地址
tempMedicalDrug: {},
tempMedicalcheck: {},
tempMedicalCheckout: {},
longMedical: {},
}); });
if (select == true) { //表格禁用
row.ischeck = 1; const selectEnable = (row, rowIndex) => {
} else { if (row.isForbidden == false) {
row.ischeck = 2; return false; // 不禁用
row.isClass = false; } else {
} return true; //禁用
} }
}; };
//表格当前行样式
const rowClass = ({ row, index }) => {
if (row.isClass == true) {
return "rowStyleclass";
} else {
return "";
}
};
// 选择全部 //更多
const selectAll = (selection) => { const goSeeScore = (row) => {
// tabledata第一层只要有在selection里面就是全选 console.log("state.tableData", state.tableData);
const isSelect = selection.some((el) => { console.log("row", row);
const tableDataIds = state.tableData.map((j) => j.id); state.distype = row.type;
return tableDataIds.includes(el.id); state.goSeeScoredialogFormVisible = true;
}); state.oldRowObj = { ...row };
// tableDate第一层只要有不在selection里面就是全不选 state.goSeeform = { ...row };
const isCancel = !state.tableData.every((el) => { state.tableData.forEach((item, index) => {
const selectIds = selection.map((j) => j.id); let childIndex = item.children.findIndex((v) => v.id == row.id);
return selectIds.includes(el.id); if (childIndex !== -1) {
}); state.goSeeIndexPid = index;
if (isSelect) { state.goSeeIndex = childIndex;
selection.map((el) => { }
if (el.children) {
el.children.map((j) => {
toggleSelection(j, true);
});
}
});
}
if (isCancel) {
state.tableData.map((el) => {
if (el.children) {
el.children.map((j) => {
toggleSelection(j, false);
}); });
} };
}); //更多-取消
} const goSeecolse = () => {
}; state.goSeeform = {};
let childrenList = [...state.tableData[state.goSeeIndexPid].children];
childrenList.splice(state.goSeeIndex, 1, state.oldRowObj);
state.tableData[state.goSeeIndexPid].children = childrenList;
state.goSeeScoredialogFormVisible = false;
toggleSelection(state.oldRowObj, true);
};
//更多--确定
const goSeeok = () => {
let childrenList = [...state.tableData[state.goSeeIndexPid].children];
childrenList.splice(state.goSeeIndex, 1, state.goSeeform);
state.tableData[state.goSeeIndexPid].children = childrenList;
console.log(state.tableData, 999);
state.goSeeScoredialogFormVisible = false;
toggleSelection(state.goSeeform, true);
};
//获取途径，频率的下拉数据
const gemedicUseModeoptions = () => {
http.post(`/ClinicalRoute/ClinicalRoute/GetStaCRParametersByType?type=1`, {})
.then((data) => {
state.medicUseModeoptions = data;
})
.catch((error) => {});
};
//获取频率，频率的下拉数据
const gemedicUsePlanoptions = () => {
http.post(`/ClinicalRoute/ClinicalRoute/GetStaCRParametersByType?type=2`, {})
.then((data) => {
state.medicUsePlanoptions = data;
})
.catch((error) => {});
};
//获取用要目的下拉数据
const getmedicalPurposeoptions = () => {
http.post(`/ClinicalRoute/ClinicalRoute/GetStaCRParametersByType?type=3`, {})
.then((data) => {
state.medicalPurposeoptions = data;
})
.catch((error) => {});
};
//当选择项发生变化时会触发该事件 //获取患者信息
const SelectionChange = (val) => { const gettopdata = () => {
state.multipleSelection = val; http.post(`/ClinicalRoute/ClinicalRoute/GetPatientInfo?pid=${route.value.query.pid}`, {})
}; .then((data) => {
state.topdata = data;
state.crid = data.crid;
getreasonoptions();
})
.catch((error) => {});
};
//获取左侧时间线数据 const setChildren = (children, type) => {
const getlefttime = () => { // 编辑多个子层级
http children.map((j) => {
.post( toggleSelection(j, type);
`/ClinicalRoute/ClinicalRoute/GetGetRouteAdvicesLeft?pid=${route.value.query.pid}`, if (j.children) {
{} setChildren(j.children, type);
) }
.then((data) => { });
state.activities = data; };
state.options = data;
state.activities.every((item) => { // 选中父节点时，子节点一起选中取消
//如果都为true高亮最后一个 const select = (selection, row) => {
if (item.flag == true) { console.log("row--父节点", row);
for (let i = 0; i < state.activities.length; i++) { row.tickTime = transformTimestampnow();
state.timeindex = // 选中
state.activities[state.activities.length - 1].inhosdays; console.log(
timeclick(state.activities[state.activities.length - 1]); selection.some((el) => {
console.log( return row.id === el.id;
"state.activities[state.activities.length-1]", })
state.activities[state.activities.length - 1] );
); if (
} selection.some((el) => {
//如果都为false高亮第一个 return row.id === el.id;
} else if (item.flag == false) { })
for (let i = 0; i < state.activities.length; i++) { ) {
state.timeindex = state.activities[0].inhosdays; row.ischeck = 1;
timeclick(state.activities[0]); if (row.children) {
console.log("state.activities[0]", state.activities[0]); row.children.map((j) => {
} toggleSelection(j, true);
//truehe和false都有高亮第一个false });
}
//取消
} else { } else {
let obj = null; if (row.children) {
row.children.map((p) => {
p.ischeck = 2;
p.isClass = false;
//find返回数组中符合条件的第一个元素 有false toggleSelection(p, false);
state.activities.find((item) => { });
if (item.flag == false) { } else {
obj = item; //取消的行数据
state.timeindex = obj.inhosdays; row.ischeck = 2;
timeclick(obj);
console.log("item--false", item);
} }
});
} }
}); };
}) // 控制选框是否被选中
.catch((error) => {}); const toggleSelection = (row, select) => {
}; console.log(row, select);
//单选 if (row) {
const radiochange = () => { // console.log("row-亮", row);
http
.post( nextTick(() => {
`/ClinicalRoute/ClinicalRoute/GetGetRouteAdvicesRight?pid=${route.value.query.pid}&case_routeid=${state.case_routeid}&searchQuery=${state.inhosdays}`, multipleTable.value && multipleTable.value.toggleRowSelection(row, select);
{} });
) if (select == true) {
.then((data) => { row.ischeck = 1;
if (state.radio == 1) { } else {
state.tableData = data.route1; row.ischeck = 2;
state.tableData.map((el) => { row.isClass = false;
// console.log(" el",el);
if (el.children) {
for (let i = 0; i < el.children.length; i++) {
if (el.children[i].ischeck == 1) {
toggleSelection(el.children[i], true);
toggleSelection(el, true);
}
} }
} }
};
// 选择全部
const selectAll = (selection) => {
// tabledata第一层只要有在selection里面就是全选
const isSelect = selection.some((el) => {
const tableDataIds = state.tableData.map((j) => j.id);
return tableDataIds.includes(el.id);
}); });
state.newtable1 = state.tableData; // tableDate第一层只要有不在selection里面就是全不选
} else if (state.radio == 2) { const isCancel = !state.tableData.every((el) => {
state.tableData = data.route2; const selectIds = selection.map((j) => j.id);
state.tableData.map((el) => { return selectIds.includes(el.id);
// console.log(" el",el);
if (el.children) {
for (let i = 0; i < el.children.length; i++) {
if (el.children[i].ischeck == 1) {
toggleSelection(el.children[i], true);
toggleSelection(el, true);
}
}
}
}); });
state.newtable2 = state.tableData; if (isSelect) {
} selection.map((el) => {
}) if (el.children) {
.catch((error) => {}); el.children.map((j) => {
}; toggleSelection(j, true);
//点击左侧时间线 获取右侧表格数据 });
const timeclick = (val) => { }
state.timeindex = val.inhosdays;
state.case_routeid = val.case_routeid;
state.inhosdays = val.inhosdays;
radiochange();
};
//保存医嘱
const joinorder = () => {
state.objtable.route1 = state.newtable1;
state.objtable.route2 = state.newtable2;
http
.post(
`/ClinicalRoute/ClinicalRoute/SetPatientRoutes?pid=${route.value.query.pid}`,
state.objtable
)
.then((data) => {
// console.log("data.hisUrl", data.hisUrl);
state.hisUrl = data.hisUrl.split("api/")[2];
// console.log("state.hisUrl", state.hisUrl);
//临时西药
state.tempMedicalDrug = data.tempMedicalDrug;
//临时检查
state.tempMedicalcheck = data.tempMedicalcheck;
//临时检验
state.tempMedicalCheckout = data.tempMedicalCheckout;
//长期西药
state.longMedical = data.longMedical;
// 调用his接口 临时西药
http
.post(`/${state.hisUrl}`, {
method: "tempMedical",
type: 1,
data: state.tempMedicalDrug,
})
.then((data) => {
//重新获取左侧时间线数据
getlefttime();
Message({
message: data.message,
type: "success",
});
console.log("临时西药");
if (data.code == "0") {
Message({
message: `临时西药${data.msg}`,
type: "success",
}); });
} else if (data.code == "1") { }
Message({ if (isCancel) {
message: `临时西药失败`, state.tableData.map((el) => {
type: "error", if (el.children) {
el.children.map((j) => {
toggleSelection(j, false);
});
}
}); });
} }
}) };
.catch((error) => {});
// 调用his接口 临时检查 //当选择项发生变化时会触发该事件
http const SelectionChange = (val) => {
.post(`/${state.hisUrl}`, { state.multipleSelection = val;
method: "tempMedical", };
type: 3,
data: state.tempMedicalcheck,
})
.then((data) => {
console.log("临时检查");
if (data.code == "0") {
Message({
message: `临时${data.msg}`,
type: "success",
});
} else if (data.code == "1") {
Message({
message: `临时检查失败`,
type: "error",
});
}
})
.catch((error) => {});
// 调用his接口 临时检验 //获取左侧时间线数据
http const getlefttime = () => {
.post(`/${state.hisUrl}`, { http.post(`/ClinicalRoute/ClinicalRoute/GetGetRouteAdvicesLeft?pid=${route.value.query.pid}`, {})
method: "tempMedical", .then((data) => {
type: 4, state.activities = data;
data: state.tempMedicalCheckout, state.options = data;
}) if (state.activities.filter((item) => item.flag).length == state.activities.length) {
.then((data) => { state.timeindex = state.activities[state.activities.length - 1].inhosdays;
console.log("临时检验"); timeclick(state.activities[state.activities.length - 1]);
if (data.code == "0") { }
Message({ if (state.activities.filter((item) => !item.flag).length == state.activities.length) {
message: `临时${data.msg}`, state.timeindex = state.activities[0].inhosdays;
type: "success", timeclick(state.activities[0]);
} else {
state.timeindex = state.activities.filter((item) => !item.flag)[0].inhosdays;
timeclick(state.activities.filter((item) => !item.flag)[0]);
}
})
.catch((error) => {
router.push({
path: "Entrypath",
query: {
pid: route.value.query.pid,
},
});
}); });
} else if (data.code == "1") { };
Message({ //单选
message: `临时检验失败`, const radiochange = () => {
type: "error", http.post(
}); `/ClinicalRoute/ClinicalRoute/GetGetRouteAdvicesRight?pid=${route.value.query.pid}&case_routeid=${state.case_routeid}&searchQuery=${state.inhosdays}`,
} {}
}) )
.catch((error) => {}); .then((data) => {
if (state.radio == 1) {
state.tableData = data.route1;
state.tableData.map((el) => {
// console.log(" el",el);
if (el.children) {
for (let i = 0; i < el.children.length; i++) {
if (el.children[i].ischeck == 1) {
toggleSelection(el.children[i], true);
toggleSelection(el, true);
}
}
}
});
state.newtable1 = state.tableData;
} else if (state.radio == 2) {
state.tableData = data.route2;
state.tableData.map((el) => {
// console.log(" el",el);
if (el.children) {
for (let i = 0; i < el.children.length; i++) {
if (el.children[i].ischeck == 1) {
toggleSelection(el.children[i], true);
toggleSelection(el, true);
}
}
}
});
state.newtable2 = state.tableData;
}
})
.catch((error) => {});
};
//点击左侧时间线 获取右侧表格数据
const timeclick = (val) => {
state.timeindex = val.inhosdays;
state.case_routeid = val.case_routeid;
state.inhosdays = val.inhosdays;
radiochange();
};
//保存医嘱
const joinorder = () => {
state.objtable.route1 = state.newtable1;
state.objtable.route2 = state.newtable2;
http.post(`/ClinicalRoute/ClinicalRoute/SetPatientRoutes?pid=${route.value.query.pid}`, state.objtable)
.then((data) => {
// console.log("data.hisUrl", data.hisUrl);
state.hisUrl = data.hisUrl.split("api/")[2];
// console.log("state.hisUrl", state.hisUrl);
//临时西药
state.tempMedicalDrug = data.tempMedicalDrug;
//临时检查
state.tempMedicalcheck = data.tempMedicalcheck;
//临时检验
state.tempMedicalCheckout = data.tempMedicalCheckout;
//长期西药
state.longMedical = data.longMedical;
// 调用his接口 长期西药 // 调用his接口 临时西药
http http.post(`/${state.hisUrl}`, {
.post(`/${state.hisUrl}`, { method: "tempMedical",
method: "longMedical", type: 1,
type: 1, data: state.tempMedicalDrug,
data: state.longMedical, })
}) .then((data) => {
.then((data) => { //重新获取左侧时间线数据
console.log("长期西药"); getlefttime();
if (data.code == "0") { Message({
Message({ message: data.message,
message: `长期西药${data.msg}`, type: "success",
type: "success", });
}); console.log("临时西药");
} else if (data.code == "1") { if (data.code == "0") {
Message({ Message({
message: `长期西药失败`, message: `临时西药${data.msg}`,
type: "error", type: "success",
}); });
} } else if (data.code == "1") {
}) Message({
.catch((error) => {}); message: `临时西药失败`,
}) type: "error",
});
}
})
.catch((error) => {});
.catch((error) => {}); // 调用his接口 临时检查
}; http.post(`/${state.hisUrl}`, {
//获取病情变异--变异原因下拉框 method: "tempMedical",
const getreasonoptions = () => { type: 3,
http data: state.tempMedicalcheck,
.post( })
`/ClinicalRoute/ClinicalRoute/GetStandardByType?crid=${state.crid}`, .then((data) => {
{} console.log("临时检查");
) if (data.code == "0") {
.then((data) => { Message({
state.reasonoptions = data; message: `临时${data.msg}`,
}) type: "success",
.catch((error) => {}); });
}; } else if (data.code == "1") {
Message({
message: `临时检查失败`,
type: "error",
});
}
})
.catch((error) => {});
//病情变异 // 调用his接口 临时检验
const variation = () => { http.post(`/${state.hisUrl}`, {
state.editdialogFormVisible = true; method: "tempMedical",
}; type: 4,
data: state.tempMedicalCheckout,
})
.then((data) => {
console.log("临时检验");
if (data.code == "0") {
Message({
message: `临时${data.msg}`,
type: "success",
});
} else if (data.code == "1") {
Message({
message: `临时检验失败`,
type: "error",
});
}
})
.catch((error) => {});
//确定 // 调用his接口 长期西药
const fromOKbtn = (fromRef) => { http.post(`/${state.hisUrl}`, {
let prome = { method: "longMedical",
pid: route.value.query.pid, type: 1,
reason: state.form.reason, data: state.longMedical,
inhosdays: state.form.inhosdays, })
remarks: state.form.remarks, .then((data) => {
}; console.log("长期西药");
if (data.code == "0") {
Message({
message: `长期西药${data.msg}`,
type: "success",
});
} else if (data.code == "1") {
Message({
message: `长期西药失败`,
type: "error",
});
}
})
.catch((error) => {});
})
http .catch((error) => {});
.post(`/ClinicalRoute/ClinicalRoute/SetVariation`, prome) };
.then((data) => { //获取病情变异--变异原因下拉框
Message({ const getreasonoptions = () => {
message: data.message, http.post(`/ClinicalRoute/ClinicalRoute/GetStandardByType?crid=${state.crid}`, {})
type: "success", .then((data) => {
}); state.reasonoptions = data;
(state.form = { })
inhosdays: "", .catch((error) => {});
reason: "", };
}),
(state.editdialogFormVisible = false);
router.push({ //病情变异
path: "Entrypath", const variation = () => {
query: { state.editdialogFormVisible = true;
pid: route.value.query.pid, };
},
}); //确定
}) const fromOKbtn = (fromRef) => {
.catch((error) => {}); let prome = {
}; pid: route.value.query.pid,
//取消 reason: state.form.reason,
const close = () => { inhosdays: state.form.inhosdays,
(state.form = { remarks: state.form.remarks,
inhosdays: "", };
reason: "",
}), http.post(`/ClinicalRoute/ClinicalRoute/SetVariation`, prome)
(state.editdialogFormVisible = false); .then((data) => {
}; Message({
//下拉框鼠标移上显示提示文字 message: data.message,
const getTitle = (val) => { type: "success",
if (val != "") { });
let a = state.reasonoptions.filter((item) => item.describe == val); (state.form = {
return a[0].describe; inhosdays: "",
} reason: "",
}; }),
(state.editdialogFormVisible = false);
router.push({
path: "Entrypath",
query: {
pid: route.value.query.pid,
},
});
})
.catch((error) => {});
};
//取消
const close = () => {
(state.form = {
inhosdays: "",
reason: "",
}),
(state.editdialogFormVisible = false);
};
//下拉框鼠标移上显示提示文字
const getTitle = (val) => {
if (val != "") {
let a = state.reasonoptions.filter((item) => item.describe == val);
return a[0].describe;
}
};
onMounted(() => { onMounted(() => {
gettopdata(); gettopdata();
getlefttime(); getlefttime();
gemedicUseModeoptions(); gemedicUseModeoptions();
gemedicUsePlanoptions(); gemedicUsePlanoptions();
getmedicalPurposeoptions(); getmedicalPurposeoptions();
}); });
return { return {
...toRefs(state), ...toRefs(state),
decimal, decimal,
monthlyPlanTable, monthlyPlanTable,
multipleTable, multipleTable,
SelectionChange, SelectionChange,
gettopdata, gettopdata,
getlefttime, getlefttime,
timeclick, timeclick,
setChildren, setChildren,
select, select,
toggleSelection, toggleSelection,
selectAll, selectAll,
variation, variation,
fromOKbtn, fromOKbtn,
fromRef, fromRef,
close, close,
joinorder, joinorder,
getreasonoptions, getreasonoptions,
getTitle, getTitle,
confirm, confirm,
tableLayout, tableLayout,
gemedicUseModeoptions, gemedicUseModeoptions,
gemedicUsePlanoptions, gemedicUsePlanoptions,
radiochange, radiochange,
getmedicalPurposeoptions, getmedicalPurposeoptions,
transformTime, transformTime,
goSeeok, goSeeok,
goSeeScore, goSeeScore,
goSeefromRef, goSeefromRef,
goSeecolse, goSeecolse,
selectEnable, selectEnable,
rowClass, rowClass,
}; };
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -1158,258 +870,258 @@ export default { ...@@ -1158,258 +870,258 @@ export default {
@import "../styles/media/components/outClinicalpathway.scss"; @import "../styles/media/components/outClinicalpathway.scss";
//选中当前行样式 //选中当前行样式
::v-deep .rowStyleclass { ::v-deep .rowStyleclass {
font-weight: 700; font-weight: 700;
} }
//时间线样式 //时间线样式
::v-deep .el-timeline-item__tail { ::v-deep .el-timeline-item__tail {
left: 0 !important; left: 0 !important;
height: 0 !important; height: 0 !important;
} }
::v-deep .el-timeline-item { ::v-deep .el-timeline-item {
padding-bottom: 5px !important; padding-bottom: 5px !important;
display: flex !important; display: flex !important;
align-items: end !important; align-items: end !important;
} }
::v-deep .el-timeline-item__wrapper { ::v-deep .el-timeline-item__wrapper {
padding-left: 29px !important; padding-left: 29px !important;
margin-right: 30px !important; margin-right: 30px !important;
top: 3px !important; top: 3px !important;
display: flex !important; display: flex !important;
align-items: end !important; align-items: end !important;
} }
::v-deep .el-timeline-item__node--normal { ::v-deep .el-timeline-item__node--normal {
margin-left: 15px !important; margin-left: 15px !important;
} }
//单选框 //单选框
::v-deep .el-radio__input.is-checked .el-radio__inner { ::v-deep .el-radio__input.is-checked .el-radio__inner {
background-color: #0085ba !important; background-color: #0085ba !important;
border-color: #1097e0 !important; border-color: #1097e0 !important;
} }
::v-deep .el-radio__input.is-checked + .el-radio__label { ::v-deep .el-radio__input.is-checked + .el-radio__label {
color: #0085ba !important; color: #0085ba !important;
} }
//多选框选中状态背景颜色 //多选框选中状态背景颜色
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner { ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #0085ba !important; background-color: #0085ba !important;
border-color: #1097e0 !important; border-color: #1097e0 !important;
} }
::v-deep .el-table--scrollable-x .el-table__body-wrapper { ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
height: 688px !important ; height: 688px !important ;
overflow-y: auto !important; overflow-y: auto !important;
} }
// 滚动条的宽度 // 滚动条的宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar { ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
/*滚动条整体样式*/ /*滚动条整体样式*/
width: 10px; width: 10px;
/*高宽分别对应横竖滚动条的尺寸*/ /*高宽分别对应横竖滚动条的尺寸*/
height: 10px; height: 10px;
background-color: #ffff; background-color: #ffff;
} }
// 滚动条的滑块 // 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb { ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #27aae2; background-color: #27aae2;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 9px; border-radius: 9px;
background-clip: content-box; background-clip: content-box;
} }
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track { ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
/*滚动条里面轨道*/ /*滚动条里面轨道*/
border-radius: 20px; border-radius: 20px;
background: #ffff; background: #ffff;
width: 10px; width: 10px;
} }
.outClinicalpathway { .outClinicalpathway {
// height: calc(100% - 50px); // height: calc(100% - 50px);
// background-color: white; // background-color: white;
// padding: 20px; // padding: 20px;
// position: relative; // position: relative;
// overflow: hidden; // overflow: hidden;
height: 900px; height: 900px;
background-color: #f0f0f0;
// padding: 10px;
overflow: hidden;
position: relative;
&_top {
width: 100%;
height: 12%;
margin-bottom: 5px;
background-color: #f0f0f0; background-color: #f0f0f0;
display: flex; // padding: 10px;
flex-direction: column; overflow: hidden;
&_bg { position: relative;
width: 100%; &_top {
height: 15%;
background-color: #0283bb;
}
&_coent {
width: 100%;
height: 50%;
background-color: #ffff;
display: flex;
margin-bottom: 5px;
&_left {
height: 100%;
width: 100%; width: 100%;
height: 12%;
margin-bottom: 5px;
background-color: #f0f0f0;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center; &_bg {
&_one { width: 100%;
width: 98%; height: 15%;
height: 80%; background-color: #0283bb;
background-color: #f2fafd; }
margin-bottom: 10px; &_coent {
display: flex; width: 100%;
align-items: center; height: 50%;
justify-content: space-between;
margin-top: 10px;
span {
width: 3%;
height: 100%;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
&_t1 {
width: 24%;
height: 80%;
margin-right: 5px;
background-color: #ffff; background-color: #ffff;
display: flex; display: flex;
align-items: center; margin-bottom: 5px;
color: #acacac; &_left {
font-weight: 400; height: 100%;
padding-left: 20px; width: 100%;
margin-left: 10px; display: flex;
span { justify-content: center;
width: 80%; align-items: center;
height: 80%; &_one {
color: #181617; width: 98%;
display: flex; height: 80%;
justify-content: flex-start; background-color: #f2fafd;
align-items: center; margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
span {
width: 3%;
height: 100%;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
&_t1 {
width: 24%;
height: 80%;
margin-right: 5px;
background-color: #ffff;
display: flex;
align-items: center;
color: #acacac;
font-weight: 400;
padding-left: 20px;
margin-left: 10px;
span {
width: 80%;
height: 80%;
color: #181617;
display: flex;
justify-content: flex-start;
align-items: center;
}
}
&_t2 {
width: 24%;
height: 80%;
margin-right: 5px;
background-color: #ffff;
display: flex;
align-items: center;
color: #acacac;
font-weight: 400;
padding-left: 20px;
span {
width: 80%;
height: 80%;
color: #181617;
display: flex;
justify-content: flex-start;
align-items: center;
}
}
&_t3 {
width: 24%;
height: 80%;
margin-right: 5px;
background-color: #ffff;
margin-right: 10px;
display: flex;
align-items: center;
color: #acacac;
font-weight: 400;
padding-left: 20px;
span {
width: 80%;
height: 80%;
color: #181617;
display: flex;
justify-content: flex-start;
align-items: center;
}
}
&_t4 {
width: 24%;
height: 80%;
background-color: #ffff;
margin-right: 5px;
display: flex;
align-items: center;
color: #acacac;
font-weight: 400;
padding-left: 20px;
span {
width: 60%;
height: 80%;
color: #181617;
display: flex;
justify-content: flex-start;
align-items: center;
}
}
}
} }
} &_right {
&_t2 { height: 100%;
width: 24%; width: 20%;
height: 80%; display: flex;
margin-right: 5px; align-items: center;
background-color: #ffff; justify-content: center;
display: flex; &_btn {
align-items: center; height: 50%;
color: #acacac; width: 100%;
font-weight: 400; display: flex;
padding-left: 20px; align-items: center;
span { justify-content: center;
width: 80%; }
height: 80%;
color: #181617;
display: flex;
justify-content: flex-start;
align-items: center;
} }
} }
&_t3 { &_time {
width: 24%; width: 100%;
height: 80%; height: 35%;
margin-right: 5px; background: #ffff;
background-color: #ffff;
margin-right: 10px;
display: flex;
align-items: center;
color: #acacac;
font-weight: 400;
padding-left: 20px; padding-left: 20px;
span {
width: 80%;
height: 80%;
color: #181617;
display: flex;
justify-content: flex-start;
align-items: center;
}
}
&_t4 {
width: 24%;
height: 80%;
background-color: #ffff;
margin-right: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
color: #acacac; &_timespan {
font-weight: 400; width: 100%;
padding-left: 20px; height: 20px;
span { display: flex;
width: 60%; background-color: #0283bb;
height: 80%; border-radius: 20px;
color: #181617; margin-right: 10px;
display: flex; span {
justify-content: flex-start; color: #ffff;
align-items: center; }
}
&_timespan2 {
width: 100%;
height: 20px;
display: flex;
} }
}
}
}
&_right {
height: 100%;
width: 20%;
display: flex;
align-items: center;
justify-content: center;
&_btn {
height: 50%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
} }
}
} }
&_time { &_table {
width: 100%; height: 84%;
height: 35%;
background: #ffff;
padding-left: 20px;
display: flex;
align-items: center;
&_timespan {
width: 100%;
height: 20px;
display: flex;
background-color: #0283bb;
border-radius: 20px;
margin-right: 10px;
span {
color: #ffff;
}
}
&_timespan2 {
width: 100%; width: 100%;
height: 20px;
display: flex; display: flex;
}
}
}
&_table {
height: 84%;
width: 100%;
display: flex;
&_right { &_right {
width: 100%; width: 100%;
height: 100%; height: 100%;
&_radio { &_radio {
width: 100%; width: 100%;
height: 8%; height: 8%;
background: #ffff; background: #ffff;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 10px; padding-left: 10px;
} }
}
} }
}
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment