table des matières
1. Compétences
Une fois que tout est sélectionné, appuyez directement sur tab et
appuyez sur Maj + Tab pour se rétracter
2.css expression
L'expression css
calc peut être utilisée pour calculer la longueur de l'élément
.wrapper {
padding-top: 85px;
.medicalOrder {
height: 40%;
padding-bottom: 10px;
/deep/ .el-card__body {
padding: 0px;
overflow: auto;
height: calc(100% - 52px);
}
}
Utiliser des expressions calc dans la ligne height="calc(100%-110px)"
3.css sélecteur de profondeur
/ sélecteur d'action profonde / profonde
4. Comment citer scss
Comment citer le style SCSS
problème
.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;
}
}
}
La disposition de la boîte à gauche affecte la droite
// 水平居中
@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%);
}
// Consolidation des soldes
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 || '标准错误提示');
}
},
Dans le cadre du triage de rendez-vous : { vue d'ensemble du médecin de rendez-vous (doctorOverview); enregistrement d'enregistrement-enregistrement (registerRecord); enregistrement de rendez-vous de connexion (nominationRecord); service de triage-triage (triage); enregistrement de pré-diagnostic-pré-examen (pré-diagnostic ) }; en cours de règlement: { gestion des factures de facturation (billManage); situation de planification du numéro de remboursement (planification); progression du remboursement-remboursement (replacementProgress) }
<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. Utilisez les invites de message
if (code === 1){
this.$message.success('分配成功!')
}else{
this.$message.error(msg)
}
6. Demande
attendre getTemplateList (params) .then (res => { console.log (res); });
7. Transmission transparente de l'interface principale de la boîte à outils
Dans la méthode de déclenchement de la boîte à outils, this. $ Emit ('message', id) id est le paramètre passé.
Interface principale @message: "messageHandler"
messageHandler (m) { m est l'id du paramètre passé. Vous pouvez écrire un paramètre i dans data puis this.i = m; Cela obtiendra les paramètres passés de la boîte à outils } L' interface principale est dans le composant: i = "i"
Props dans l'interface principale du composant: ['i']
obtiendra i
8. fonction de temps 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. Scène inversée 1
Utilisation des instructions d'affichage inversé Utilisation de codeTransform
<span val="G2" code="supplier" v-codeTransform></span>
Le code consiste à demander au backend de
remplir la
plage de champ correspondante du val et de convertir automatiquement le champ correspondant en fonction de la valeur du champ.
10. Deux façons d'appeler l'interface
方法一
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>