1.技巧
全部选中以后直接按tab
按shift+tab可以缩回
2.css表达式
css表达式
calc可用于元素计算长度
.wrapper {
padding-top: 85px;
.medicalOrder {
height: 40%;
padding-bottom: 10px;
/deep/ .el-card__body {
padding: 0px;
overflow: auto;
height: calc(100% - 52px);
}
}
行内使用calc表达式 height="calc(100%-110px)"
3.css深度选择器
/deep/ 深度作用选择器
4.如何引用scss
怎么引用scss样式
问题
.schedule {
position: relative;
height: 178px;
padding: 20px;
margin-top: 20px;
border: 1px solid #e4e4e4;
.scheduleCard {
display: inline-block;
}
.schedule-left {
width: 70%;
border-right: 1px solid rgba(228, 228, 228, 1);
.schedule-title {
height: 20px;
font-size: 14px;
font-family: SourceHanSansSC;
font-weight: bold;
color: rgba(46, 50, 58, 1);
line-height: 20px;
&::before {
content: "";
float: left;
width: 4px;
height: 20px;
background: #f05a23;
margin-right: 5px;
}
}
.schedule-main {
padding: 20px;
}
}
.schedule-right {
position: absolute;
width: 29%;
.right-content {
margin-left: auto;
margin-right: auto;
width: 50%;
height: 60px;
background-color: #f05a23;
}
}
}
左边盒子布局影响到右边
// 水平居中
@mixin l-center-horizontal {
position: relative;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
// 垂直居中
@mixin l-center-vertical {
position: relative;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
//余额合并
async balanceCombine() {
let cardList = [...this.cardList];
let cardListNew = [];
for (let index in cardList) {
if (cardList[index].checked) {
cardListNew.push(cardList[index]);
}
}
this.loading = true;
try {
//合并接口
// await balanceCombine(cardListNew);
this.getCardList();
this.loading = false;
} catch (error) {
this.loading = false;
this.$message.error(error.message || '标准错误提示');
}
},
预约分诊下的:{
预约–医生总览(doctorOverview);
挂号–挂号记录(registerRecord);
签到–预约记录(appointRecord);
分诊–分诊科室(triage);
预诊–预检记录(preDiagnosisRecord)
};
结算下的:{
收费–票据管理(billManage);
退号–排班情况(scheduling);
退费–退费进度(refundProgress)
}
<div class="info">
<div class="info-title">会诊进度</div>
<div class="little-title">简要病情</div>
<div>患者病情复杂,继续会诊。</div>
<div class="little-title">会诊目的</div>
<div>通过会诊,治愈病人病情,降低患者病情恶化风险!</div>
</div>
.info-title {
height: 20px;
line-height: 20px;
font-weight: bold;
&::before {
content: "";
float: left;
width: 4px;
height: 20px;
background: #f05a23;
margin-right: 5px;
}
5.使用消息提示
if (code === 1){
this.$message.success('分配成功!')
}else{
this.$message.error(msg)
}
6.请求
await getTemplateList(params).then(res => {
console.log(res);
});
7.工具箱主界面透传
工具箱 触发方法里 this.$emit(‘message’,id) id为传递的参数
主界面 @message:“messageHandler”
messageHandler(m){
m就是传过来的参数id
可以在data里写一个参数i
然后this.i=m;
这样就拿到了工具箱传过来的参数
}
主界面在组件中 :i=“i”
组件主界面中 props:[‘i’]
就拿到i了
8.js时间函数
alert(new Date().format("yyyy年MM月dd日"));
alert(new Date().format("MM/dd/yyyy"));
alert(new Date().format("yyyyMMdd"));
alert(new Date().format("yyyy-MM-dd hh:mm:ss"));
-------科室反显------------------------------------------------------------------------------
<span
tableName="sys_org"
:conditionMap="{org_type: '_DEPT_', id:inpSdeptId}"
columns="org_nm"
v-tableTransform
></span>
---------表格反显-这个不是科室反显---下面有一个科室反显------------------------------------------------------------------------
<template>
<div class="height100 width100">
<div class="out_box height100">
<el-table
:data="diagHistory"
border
width="100%"
height="100%"
ref="singleTable"
highlight-current-row
v-loadmore="loadNextPage"
v-loading="tlm_isLoading"
>
<el-table-column fixed="left" align="center" min-width="45">
<template slot-scope="scope">
<el-button type="text" size="small" class="blue-color" @click="quoteFunc(scope.row)">引用</el-button>
</template>
</el-table-column>
<el-table-column
label="诊断日期"
width="115"
header-align="center"
align="center"
show-overflow-tooltip
>
<template slot-scope="scope">
<span>{{scope.row.diagTime}}</span>
</template>
</el-table-column>
<el-table-column
label="诊断类型"
width="90"
header-align="center"
align="center"
show-overflow-tooltip
>
<template slot-scope="scope">
<span code="DiseaseDiagnosisCategoryCode" v-codeTransform :val="scope.row.diagType"></span>
</template>
</el-table-column>
<el-table-column
v-for="(item,index) in tableParamsZ"
:key="index"
:prop="item.prop"
:label="item.label"
:min-width="item.width"
:align="item.align || 'center'"
header-align="center"
:fixed="item.fixed"
show-overflow-tooltip
></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import { getDiagList } from "@/api/tools/historicalDiagnosis";
import { mapGetters } from "vuex";
import { addDiag } from "@/api/common/diagnosis";
import { deepClone } from "@/utils/index.js";
export default {
name: "timeLine",
data() {
return {
load: false,
diagHistory: [],
tableParamsZ: [
// {
// prop: "diagTime",
// label: "诊断日期",
// width: 110,
// align: "center",
// fixed: false
// },
// {
// prop: "clinicType",
// label: "就诊类型",
// width: 80,
// align: "center",
// fixed: false
// },
// {
// prop: "diagType",
// label: "诊断类型",
// width: 90,
// align: "center",
// fixed: false
// },
{
prop: "diagName",
label: "诊断名称",
width: 135,
align: "center",
fixed: false
},
{
prop: "deptName",
label: "诊断科室",
width: 80,
align: "center",
fixed: false
},
{
prop: "diagDoctorName",
label: "诊断医生",
width: 80,
align: "center",
fixed: false
}
],
// 分页控制参数
pageParams: {
pageNo: 1, // 当前页数
total: 0, // 总共页数
pageSize: 20 // 每页数据条数
},
// table 分页加载必须定义字段
tlm_isLoading: false
};
},
computed: {
...mapGetters("base", ["receivePatientData"]),
tlm_noMore() {
return (
Math.ceil(this.pageParams.total / this.pageParams.pageSize) <=
this.pageParams.pageNo
);
}
},
mounted() {
this.loadTable();
},
watch: {
receivePatientData: {
handler(n) {
this.loadTable();
},
deep: true
}
},
methods: {
// table加载下一页
loadNextPage() {
if (this.tlm_noMore) {
return;
}
this.pageParams.pageNo++;
this.loadTable();
},
// 加载列表数据 CLINIC_TYPE
async loadTable() {
if (!this.receivePatientData.patientId) {
this.tableData = [];
return;
}
try {
this.tlm_isLoading = true;
let params = {
patientId: this.receivePatientData.patientId,
...this.pageParams
};
let response = await getDiagList(params);
// let tableData = [];
if (response.code == "1") {
if (this.pageParams.pageNo === 1) {
this.diagHistory = response.data;
} else {
this.diagHistory = this.diagHistory.concat(response.data);
}
this.pageParams = { ...response.pageParams };
}
// this.tableData = tableData;
this.tlm_isLoading = false;
} catch (error) {
this.tlm_isLoading = false;
this.$message.error(error.msg);
}
},
quoteFunc(row) {
this.$confirm("您确定要引用此诊断吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
const data = deepClone(row);
if (this.receivePatientData.visitCode) {
data.visitCode = this.receivePatientData.visitCode;
this.$delete(data, "inpCode");
} else if (this.receivePatientData.inpCode) {
data.inpCode = this.receivePatientData.inpCode;
this.$delete(data, "visitCode");
}
this.$delete(data, "id");
addDiag(data)
.then(res => {
if (res.code === 1) {
this.$message.success("引用成功");
this.$emit("load-diag-table");
} else {
this.$message.error(res.msg || "引用失败");
}
})
.catch(err => {
this.$message.error(err || "引用失败");
});
})
.catch(() => {
this.$message.info("已取消引用");
});
}
}
};
</script>
<style lang="scss" scoped>
.el-button {
width: 45px;
text-align: left;
color: #3d7dfb;
}
</style>
-------------表格反显 科室反显------------------------------------------------------------------------
<template>
<div class="signIn">
<l-card-title>
<template #left>
<div>{{patientInfo.patientName || ''}}预约记录</div>
</template>
</l-card-title>
<div class="table-box">
<el-table v-loading="isLoading" height='100%' :data="tableData" border style="width: 100%">
<el-table-column align='center' show-overflow-tooltip prop="appointmentTime" label="预约时间" min-width="110">
</el-table-column>
<el-table-column align='center' show-overflow-tooltip prop="ouptDeptId" label="预约科室" min-width="100">
<template slot-scope="scope">
<span
tableName="sys_org"
:conditionMap="{org_type: '_DEPT_', id: scope.row['ouptDeptId']}"
columns="org_nm"
v-tableTransform
></span>
</template>
</el-table-column>
<el-table-column align='center' label="是否就诊" min-width="80">
<template slot-scope='{row}'>
<span>{{row.recordStatus=='1'?'未签到':'已签到'}}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import { getUId, getUN } from "@/utils/crypto";
import tooBox from '@/api/cis/toolBox/toolBox';
import {mapGetters} from 'vuex'
export default {
name: 'signIn',
props:{
name:{
type:String,
default:'易斌'
}
},
data () {
return {
isLoading: false,
patientInfo: {
patientName:'',
},
tableData:[],
pageParams: {
pageNo: 0, // 当前页数
total: 5, // 总共页数
pageSize: 20 // 每页数据条数
},
}
},
computed : {
...mapGetters("base", ["receivePatientData"])
},
mounted(){
this.getAppotRecord();
},
watch: {
"receivePatientData":{//深度监听,可监听到对象、数组的变化
handler(val){
// 监听 患者 ID 变化 触发事件 reload table 数据
this.patientInfo = val;
this.getAppotRecord();
},
immediate: true,
deep:true
}
},
methods: {
async getAppotRecord(){//获取患者预约记录
try {
if(!this.patientInfo || !this.patientInfo.patientId){
return;
}
this.isLoading = true;
let params={
patientId: this.patientInfo.patientId
}
tooBox.getRecord(params).then(res=>{
this.tableData = res.data;
this.isLoading = false;
})
} catch (error) {
this.$hideLoading();
this.$message.error(error.msg || "标准错误提示");
}
}
}
}
</script>
<style lang='scss' scoped>
.signIn{
// width: 298px;
width: 100%;
height: 100%;
background-color: #fff;
padding: 0 10px 10px;
.table-box{
width: 100%;
height: calc(100% - 63px);
}
}
</style>
9.反显 场景1
反显指令的使用 codeTransform 的使用
<span val="G2" code="supplier" v-codeTransform></span>
code是问后端要的
val填对应的字段
span就自动根据字段的值来转换对应的
10.调用接口的两种方法
方法一
import service from "@/api/appointment/appointment";
const response = await service.getToCharge({
sDate:sDate,
eDate:eDate
});
接口里
export default {
// 根据时间区间拿到排班信息
async getScheduleList(params){
return await get("/doctorSchedule/list",params,true);
},
// 查询收费类型
async getChargesItem(params){
return await get("/chargeItem/listByTreatType",params,true);
},
}
方法二
import { getScheduleList } from "@/api/appointment/appointment";
export function getNotArrivedList(params) {
return post("/outpAppt/getNotArrivedOutpApptByRoomIds",params,true);
};
接口里
let params = {
startDate:new Date().format("yyyy-MM-dd") + " 00:00:00",
stopDate:new Date().format("yyyy-MM-dd") + " 23:59:59"
};
let res= await getScheduleList(params);
-------------------------------------------------------------------------------------
<span
code="MARITAL_STATUS_CODE"
:val="receivePatientData.maritalStatus"
v-codeTransform
></span>
<span
code="codeDiagType"
v-codeTransform
:val="scope0.row[item.prop]"
></span>