1. Skills
2.css expression
3.css depth selector
4. How to cite scss
5. Use message prompts
6. Request
7. Transparent transmission of the main interface of the toolbox
8.js time function
9. Reversed scene 1
10. Two ways to call the interface

1. Skills

After all selected, directly press tab and
press shift+tab to retract

2.css expression

The css expression
calc can be used to calculate the length of the element

.wrapper {
  padding-top: 85px;
  .medicalOrder {
	height: 40%;
	padding-bottom: 10px;

	/deep/ .el-card__body {
	  padding: 0px;
	  overflow: auto;
	  height: calc(100% - 52px);
	}
}

Use calc expressions in the line height="calc(100%-110px)"

3.css depth selector

/deep/ deep action selector

4. How to cite scss

How to quote scss style

problem

.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;
      }
    }
}

The box layout on the left affects the right

// 水平居中
@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%);
}

//Balance consolidation

  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 || '标准错误提示');
	}
  },

Under the appointment and triage: { appointment-doctor Overview (doctorOverview); registration-registration record (registerRecord); sign-in-appointment record (appointRecord); triage-triage department (triage); pre-diagnosis-pre-examination record (preDiagnosisRecord) }; under settlement: { charge-bill management (billManage); refund number-scheduling situation (scheduling); refund-refund progress (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. Use message prompts

  if (code === 1){
	this.$message.success('分配成功!')
  }else{
	this.$message.error(msg)
  }

6. Request

await getTemplateList(params).then(res => {
console.log(res);
});

7. Transparent transmission of the main interface of the toolbox

In the toolbox trigger method, this.$emit('message',id) id is the passed parameter.
Main interface @message: "messageHandler"
messageHandler(m) { m is the passed parameter id. You can write a parameter i in data and then this.i=m; This will get the parameters passed from the toolbox }The main interface is in the component: i="i"

Props in the main interface of the component: ['i']
will get i

8.js time function

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. Reversed scene 1

Use of reverse display instructions Use of codeTransform

<span val="G2" code="supplier" v-codeTransform></span>

Code is to ask the backend to
fill in the corresponding field
span of the val and automatically convert the corresponding field according to the value of the field.

10. Two ways to call the 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>

2019 code record

table of Contents