physical_examination_front/src/views/booklist/index.vue

<template>
  <basic-container>
    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" v-model="form"
      :permission="permissionList" :before-open="beforeOpen" :before-close="beforeClose" @row-del="rowDel"
      @row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset"
      @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
      @refresh-change="refreshChange" @on-load="onLoad" @tree-load="treeLoad">
      <template slot-scope="{row}" slot="status">
        <el-tag :type="row.status == 1 ? 'success' : row.status == 2 ? 'warning' : row.status == 3 ? 'danger' : 'info'">{{ row.status == 1 ? '已报道' : row.status == 2 ? '未报道' : row.status == 3 ? '已拉黑' : '已取消' }}</el-tag>
      </template>
      <template slot-scope="{row}" slot="menu">
        <el-button  @click="handleRegister" :disabled="row.status == 1 ? true : row.status == 4 ? true : false">{{row.status == 3 ? '取消拉黑' : '预约报道'}}</el-button>
      </template>
    </avue-crud>
    <el-drawer
      :visible.sync="isRegister"
      :append-to-body="true"
      :direction="direction"
      :with-header="false"
      class="my-info-dialog"
      custom-class="register_box">
      <div class="title_box">
        <div class="title_txt">
          <div class="txt">预约人报道信息</div>
          <div class="img_box" @click="closeDraw">
            <img src="~@/assets/image/close.png" alt="">
          </div>
        </div>
        <div class="sub_txt">通过身份证、医保卡刷卡识别报道</div>
      </div>
      <div class="tip_box">
        <img v-show="regData.status == 1" src="~@/assets/image/succ.png" alt="">
        <img v-show="regData.status == 2" src="~@/assets/image/fail.png" alt="">
        <img v-show="regData.status == 3" src="~@/assets/image/warn.png" alt="">
        <div class="tip_txt" :class="regData.status == 2 ? 'fail_txt' : regData.status == 3 ? 'warn_txt' : ''">{{regData.status == 1 ? '报道成功' : '报道失败'}}</div>
      </div>
      <div class="tips_txt" v-show="regData.status == 2">无此人员预约检测项目，请预约后按时间报道</div>
      <div class="tips_txt tips_warn" v-show="regData.status == 3">报到时间与预约时间不符，请按预约时间报道</div>
      <div class="account_mess">
        <div class="mess_tit">账号信息</div>
        <div class="mess_box">
          <div class="left_box" :class="regData.status == 2 ? 'fail_box' : regData.status == 3 ? 'warn_box' : ''">
            <div class="acc_text">姓名</div>
            <div class="acc_txt">{{regData.name}}</div>
          </div>
          <div class="right_box" :class="regData.status == 2 ? 'fail_right' : regData.status == 3 ? 'warn_right' : ''">
            <div class="acc_box">
              <div class="acc_text">身份证号</div>
              <div class="acc_txt">{{regData.cardId}}</div>
            </div>
            <div class="acc_box">
              <div class="acc_text">联系方式</div>
              <div class="acc_txt">{{regData.phone}}</div>
            </div>
            <div class="img_box">
              <img v-show="regData.status == 1" src="~@/assets/image/succ_img.png" alt="">
              <img v-show="regData.status == 2" src="~@/assets/image/fail_img.png" alt="">
              <img v-show="regData.status == 3" src="~@/assets/image/warn_img.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="account_mess">
        <div class="mess_tit">体检信息</div>
        <div class="mess_box reg_box">
          <div class="left_box">
            <div class="acc_text">体检项目</div>
            <div class="acc_txt">{{regData.project}}</div>
          </div>
          <div class="right_box">
            <div class="acc_box">
              <div class="acc_text">预约时间</div>
              <div class="acc_txt" :class="regData.status == 3 ? 'acc_warn' : ''">{{regData.time}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn">
        签到并打印
      </div>
  </el-drawer>
  </basic-container>
</template>

<script>
import {
  getLazyList,
  remove,
  update,
  add,
  getDept,
  getDeptTree
} from "@/api/system/dept";
import { mapGetters } from "vuex";
import website from '@/config/website';

export default {
  data() {
    return {
      form: {},
      selectionList: [],
      query: {},
      loading: true,
      parentId: 0,
      direction:'rtl',
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      isRegister:false,
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: false,
        viewBtnIcon:'none',
        editBtn:false,
        delBtn:false,
        addBtn:false,
        selection: true,
        saveBtn:false,
        updateBtn:false,
        cancelBtn:false,
        dialogType: 'drawer',
        border:false,stripe:true,
        dialogClickModal: false,
        column: [
          {
            label: "体检人姓名",
            prop: "name",
          },
          {
            label: "身份证号码",
            prop: "releaseCard",
            searchLabelWidth:100,
            search:true
          },
          {
            label: "联系方式",
            prop: "phone",
          },
          {
            label: "预约时间",
            prop: "releaseTime",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            search: true,
            searchValue:'2022-02-09',
            searchClearable:false
          },
          {
            label: "预约项目",
            prop: "releaseProject",
            type: "select",
            hide: true,
            dicData:[
                {
                    label:'全部',
                    value:0
                },
                {
                    label:'视力',
                    value:1
                },
                {
                    label:'听力',
                    value:2
                },
                {
                    label:'四肢',
                    value:3
                }
            ],
            search: true,
            viewDisplay:false,
            searchValue:0
          },
          {
            label:'预约项目',
            prop:"releasePro",

          },
          {
            label: "状态",
            prop: "status",
            slot: true,
            viewDisplay:false,
          },
        ]
      },
      data: [],
      regData:{
        status:3,
        name:'/',
        cardId:'/',
        phone:'/',
        project:'/',
        time:'/'
      }
    };
  },
  computed: {
   
  },
  created() {
  },
  methods: {
    handleRegister(){
      this.isRegister = true
    },
    beforeOpen(done, type) {
    //   if (["add", "edit"].includes(type)) {
    //     this.initData();
    //   }
    //   if (["edit", "view"].includes(type)) {
    //     getDept(this.form.id).then(res => {
    //       this.form = res.data.data;
    //     });
    //   }
      done();
    },
    beforeClose(done) {
    //   this.parentId = "";
    //   const column = this.findObject(this.option.column, "parentId");
    // //   column.value = "";
    //   column.addDisabled = false;
      done();
    },
    closeDraw(){
      this.isRegister = false
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      // getLazyList(this.parentId, Object.assign(params, this.query)).then(res => {
      //   this.data = res.data.data;
      //   
      //   this.selectionClear();
      // });
      this.data = [
        {name:'张三',releaseCard:321236195812020314,phone:13254651235,releaseTime:'2023-02-07',releasePro:'视力 听力',status:1},
        {name:'李四',releaseCard:321236195812020313,phone:13254651235,releaseTime:'2023-02-07',releasePro:'视力 听力',status:2},
        {name:'王五',releaseCard:321236195812012314,phone:13254651235,releaseTime:'2023-02-07',releasePro:'视力 听力',status:3},
        {name:'刘敏',releaseCard:321236195812012314,phone:13254651235,releaseTime:'2023-02-07',releasePro:'视力 听力',status:4},
      ]
      this.loading = false;
      this.page.total = 4;
    },
  }
};
</script>

<style lang="scss" scoped>
</style>
<style lang="scss">
.el-drawer__wrapper{
  .register_box{
    width: 45% !important;
    padding: 0 40px;

    .title_box{
      // padding: 0 40px;
      margin-top: 40px;
      .title_txt{
        display: flex;
        height: 30px;
        align-items: center;
        justify-content: space-between;

        .txt{
          font-weight: bold;
          color: #333333;
          line-height: 16px;
          font-size: 20px;

        }
        .img_box{
          img{
            width: 30px;
            height: 30px;
          }
        }
      }
      .sub_txt{
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }
    }
    .tip_box{
      display: flex;
      align-items: center;
      justify-content: center;
      margin:60px 0 20px 0;

      .img{
        width: 30px;
        height: 30px;
      }
      .tip_txt{
        font-size: 24px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #00B578;
        margin-left: 10px;
      }

      .fail_txt{
        color: #F93A4A;
      }
      .warn_txt{
        color: #FF6010;
      }
    }
    .tips_txt{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #F93A4A;
    }
    .tips_warn{
      color: #FF6010;
    }
    .fail_tip{
      color: #FF6010;
    }

    .account_mess{
      .mess_tit{
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin:40px 0 20px 0;
      }
      .mess_box{
        width: 100%;
        height: 123px;
        background: #F5F6FA;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left_box{
          width: 25%;
          margin-left: 30px;
            .acc_text{
              font-size: 14px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              margin-bottom:14px;
            }

            .acc_txt{
              font-size: 16px;
              font-family: Microsoft YaHei-Bold, Microsoft YaHei;
              font-weight: bold;
              color: #00B578;
            }
        }
        .fail_box{
          .acc_txt{
            color: #333333;
          }
        }
         .warn_box{
          .acc_txt{
            color: #333333;
          }
        }
        .right_box{
          display: flex;
          width: 75%;
          align-items: center;
          justify-content: space-between;
          .acc_box{
            .acc_text{
              font-size: 14px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              margin-bottom:14px;
            }

            .acc_txt{
              font-size: 16px;
              font-family: Microsoft YaHei-Bold, Microsoft YaHei;
              font-weight: bold;
              color: #00B578;
            }
          }
        }
        .fail_right{
          .acc_box{
            .acc_txt{
              color: #333333;
            }
          }
        }
        .warn_right{
          .acc_box{
            .acc_txt{
              color: #333333;
            }
          }
        }
      }
      .reg_box{
          justify-content: start;
          .left_box{
            .acc_txt{
              color: #333333;
            }
          }
          .right_box{
            .acc_box{
              .acc_txt{
                color: #333333;
              }
              .acc_warn{
                color: #FF6010;
              }
            }
          }
          
        }
    }

    .btn{
      width: 151px;
      height: 50px;
      background: #1677FF;
      border-radius: 2px 2px 2px 2px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      margin-top: 50px;
    }
  }
}
</style>