2019 代码记录

素颜马尾好姑娘i 2022-12-30 08:15 188阅读 0赞

### 目录 ###

*  1.技巧
 *  2.css表达式
 *  3.css深度选择器
 *  4.如何引用scss
 *  5.使用消息提示
 *  6.请求
 *  7.工具箱主界面透传
 *  8.js时间函数
 *  9.反显 场景1
 *  10.调用接口的两种方法

# 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 的使用

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>