2019 代码记录

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)
}

扫描二维码关注公众号，回复： 12506747 查看本文章

 <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>