Vue_New/src/xt_pages/user/patients.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <el-button
        :disabled="$store.getters.xt_user.subscibe.state == 3 ? true : false"
        @click="$router.push({ path: '/patients/create' })"
        class="filter-item"
        style="float:right;"
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="small"
        >新增</el-button
      >
    </div>
    <div class="app-container">
      <div class="cell clearfix">
        <!-- <label class="title"><span class="name">病人搜索</span> : </label> -->
        <el-input
          style="width: 400px;"
          v-model.trim="searchKey"
          class="filter-item"
          placeholder="病人姓名/透析号"
          size="small"
        />
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="search"
          size="small"
          >搜索</el-button
        >
      </div>

      <div class="cell clearfix">
        <label class="title"><span class="name">日期查询</span> : </label>
        <el-date-picker
          size="small"
          clearable
          v-model="listQuery.start_time"
          prefix-icon="el-icon-date"
          @change="changeTimeOne"
          :editable="false"
          style="width: 196px;"
          type="date"
          placeholder="选择日期时间"
          align="right"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <span class="cellLine"> - </span>
        <el-date-picker
          size="small"
          clearable
          v-model="listQuery.end_time"
          prefix-icon="el-icon-date"
          @change="changeTime"
          :editable="false"
          style="width: 196px;"
          type="date"
          placeholder="选择日期时间"
          align="right"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div class="cell clearfix">
        <label class="title"><span class="name">排班班次</span> : </label>
        <div class="time ">
          <ul class="">
            <li
              :class="item.value == schedulType ? 'active' : ''"
              @click="selectSchedulType(item.value)"
              v-for="item in schedulArr"
              :key="item.value"
            >
              {{ item.label }}
            </li>
          </ul>
        </div>
      </div>
      <div class="cell clearfix">
        <label class="title"><span class="name">状态</span> : </label>
        <div class="time ">
          <ul class="">
            <li
              :class="item.value == systemType ? 'active' : ''"
              @click="selectSystemType(item.value)"
              v-for="item in systemArr"
              :key="item.value"
            >
              {{ item.label }}
            </li>
          </ul>
        </div>
      </div>
      <div class="cell clearfix">
        <label class="title"><span class="name">转归情况</span> : </label>
        <div class="time ">
          <ul class="">
            <li
              :class="item.lapseto == lapsetoType ? 'active' : ''"
              @click="selectLapseTo(item.lapseto)"
              v-for="item in lapsetoArr"
              :key="item.value"
            >
              {{ item.label }}
            </li>
          </ul>
        </div>
      </div>
      <div class="cell clearfix">
        <label class="title"><span class="name">病人来源</span> : </label>
        <div class="time ">
          <ul class="">
            <li
              :class="item.source == sourceType ? 'active' : ''"
              @click="selectSource(item.source)"
              v-for="item in sourceArr"
              :key="item.value"
            >
              {{ item.label }}
            </li>
          </ul>
        </div>
      </div>
      <div class="cell clearfix">
        <label class="title"><span class="name">其它查询</span> : </label>
        <el-select
          v-model="listQuery.contagion"
          size="small"
          clearable
          placeholder="传染病"
          @change="changeOtherSearch"
        >
          <el-option
            v-for="item in contagionList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-select
          style="margin-left: 10px;"
          v-model="listQuery.reimbursement_way"
          size="small"
          clearable
          placeholder="付费方式"
          @change="changeOtherSearch"
        >
          <el-option
            v-for="item in reimbursement_ways"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="listQuery.isscheduling"
          collapse-tags
          style="margin-left: 10px;"
          clearable
          placeholder="排班情况"
          size="small"
          @change="changeOtherSearch"
        >
          <el-option
            v-for="item in scheduling"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="listQuery.isprescription"
          collapse-tags
          style="margin-left:10px;"
          clearable
          placeholder="透析处方"
          size="small"
          @change="changeOtherSearch"
        >
          <el-option
            v-for="item in prescription"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <el-table
        ref="multipleTable"
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
        :data="tableData"
        border
        fit
        highlight-current-row
        style="width: 100%;margin-top: 10px;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          align="center"
          label="全选"
          width="60px"
          type="selection"
        ></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
        ></el-table-column>
        <el-table-column
          label="透析号"
          min-width="80"
          property="dialysis_no"
          align="center"
          style="color:red"
        ></el-table-column>
        <el-table-column
          label="住院号"
          min-width="80"
          property="admission_number"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          min-width="80"
          align="center"
        >
          <template slot-scope="scope">
            <router-link
              :to="'/patients/patient/' + scope.row.id"
              style="color:#409eff"
              >{{ scope.row.name }}</router-link
            >
          </template>
        </el-table-column>
        <el-table-column label="性别" min-width="80" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.gender == 1">男</span>
            <span v-else-if="scope.row.gender == 2">女</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column label="来源" min-width="80" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.source == 1">门诊</span>
            <span v-else-if="scope.row.source == 2">住院</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column
          label="透析次数"
          min-width="94"
          align="center"
        >
          <template slot-scope="scope" >
            <span>{{getCount(scope.row)}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column min-width="150" label="二维码" align="center">
        <template slot-scope="scope"  type="text">
          <a style="color:#409eff"  v-if="scope.row.binding_state==1" @click="openWechatBindDialog">已绑定</a>
          <a style="color:#409eff"  v-else @click="openWechatBindDialog">生成</a>
        </template>
      </el-table-column> -->
        <el-table-column label="日期" min-width="144" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.created_time | parseTime("{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column label="转归" align="center">
          <template slot-scope="scope">
            <span>{{ LapsetoInfo(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="140">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="转归"
              placement="top"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="small"
                @click="OpenSetLapseto(scope.row, scope.$index)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="预览"
              placement="top"
            >
              <el-button
                type="danger"
                icon="el-icon-tickets"
                size="small"
                @click="
                  OpenView(scope.row.name, scope.row.dialysis_no, scope.row.id)
                "
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- <pagi-nation title="分页"></pagi-nation> -->

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.pate"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        background
        style="margin-top:20px;"
        align="right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <el-dialog
        title="微信绑定"
        :visible.sync="bindWechatDialog"
        width="30%"
        center
      >
        <img :src="wechatbindimg" width="100%" alt="" v-if="wechatbindimg" />
        <i class="el-icon-loading" v-else></i>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="bindWechatDialog = false"
            >关闭</el-button
          >
        </span>
      </el-dialog>
      <el-dialog title="转归" :visible.sync="LapsetoDialogVisible">
        <el-form
          :model="lapsetoForm"
          :rules="lapsetoRules"
          ref="lapsetoForm"
          label-width="140px"
        >
          <el-form-item label="治疗状态（转归）:" prop="lapseto_type" required>
            <el-radio-group v-model="lapsetoForm.lapseto_type">
              <el-radio
                v-for="item in lapsetoOptions"
                :key="item.value"
                :label="item.value"
                :value="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="转归时间 :" prop="lapseto_time" required>
            <el-date-picker
              v-model="lapsetoForm.lapseto_time"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
              default-time="12:00:00"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="LapsetoDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="EditLapseto()">保 存</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="签到卡"
        :visible.sync="centerDialogVisible"
        :close-on-click-modal="false"
        @opened="ShowQRCode()"
        width="30%"
        center
      >
        <div align="center" style="margin-bottom:6px;font-size:20px">
          <!-- 姓名:<el-input v-model="name" size="small" style="width:200px"></el-input><br>    -->
          姓名:<span>{{ this.name }}</span>
        </div>
        <div align="center" style="margin-bottom:10px;font-size:20px">
          <!-- 透析号:<el-input v-model="dialysis_no" size="small" style="width:200px"></el-input><br> -->
          透析号:<span>{{ this.dialysis_no }}</span>
        </div>
        <div id="qrcode" align="center"></div>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button  type="primary"  @click="download()">下载</el-button> -->
          <el-button type="primary" @click="print()">打印</el-button>
        </span>
      </el-dialog>
      <div hidden="hidden">
        <div id="print-card-info">
          <div
            class="order_title"
            align="center"
            style="margin-bottom:20px;font-size:35px"
          >
            签到卡
          </div>
          <div align="center" style="margin-bottom:4px;font-size:25px">
            姓名:<span>&nbsp;&nbsp;{{ this.name }}</span
            ><br />
          </div>
          <div align="center" style="margin-bottom:20px;font-size:25px">
            透析号:<span>&nbsp;&nbsp;{{ this.dialysis_no }}</span>
          </div>
          <div>
            <div id="code" align="center"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchList, EditLapseto, OpenView, code } from "@/api/patient";
import QRCode from "qrcodejs2";
import Vue from "vue";
import print from "print-js";
import { Base64 } from "js-base64";
import { uParseTime } from "@/utils/tools";
import { log } from "util";
import BreadCrumb from "@/xt_pages/components/bread-crumb";
export default {
  name: "Patient",
  components: {
    BreadCrumb
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "病人管理" },
        { path: "/patients/patients", name: "病人管理" }
      ],
      lapsetoRules: {
        lapseto_type: [{ required: true, message: "请选择治疗状态" }],
        lapseto_time: [{ required: true, message: "请选择转归时间" }]
      },
      currentIndex: -1,
      LapsetoDialogVisible: false,
      centerDialogVisible: false,
      checkAll: false,
      isIndeterminate: true,
      wechatbindimg: "",
      active: true,
      schedulType: 0,
      lapsetoForm: {
        lapseto_type: 0,
        lapseto_time: "",
        patient_id: 0
      },
      schedulArr: [
        { value: 0, label: "全部" },
        { value: 1, label: "上午" },
        { value: 2, label: "下午" },
        { value: 3, label: "晚上" }
      ],
      lapsetoOptions: [
        { value: 1, label: "留治" },
        { value: 2, label: "转出" }
      ],
      systemType: 0,
      systemArr: [
        { value: 0, label: "全部" },
        { value: 1, label: "已绑定" },
        { value: 2, label: "未绑定" }
      ],
      sourceType: 0,
      sourceID: 0,
      lapsetoType: 0,
      sourceArr: [
        { value: 0, label: "全部", source: 0, lapseto: 0 },
        // { value: 1, label: "转出", source: 0, lapseto: 2 },
        // { value: 2, label: "留治", source: 0, lapseto: 1 },
        { value: 3, label: "门诊", source: 1, lapseto: 1 },
        { value: 4, label: "住院", source: 2, lapseto: 1 }
      ],
      lapsetoArr: [
        { value: 0, label: "全部", source: 0, lapseto: 0 },
        { value: 1, label: "转出", source: 0, lapseto: 2 },
        { value: 2, label: "留治", source: 0, lapseto: 1 }
        // { value: 3, label: "门诊", source: 1, lapseto: 1 },
        // { value: 4, label: "住院", source: 2, lapseto: 1 }
      ],
      scheduling: [
        {
          value: 1,
          label: "已排班"
        },
        {
          value: 2,
          label: "未排班"
        }
      ],
      prescription: [
        {
          value: 1,
          label: "有处方"
        },
        {
          value: 2,
          label: "无处方"
        }
      ],
      tableData: null,
      searchKey: "",
      // value2: '',
      total: 0,
      pageTotal: 0,
      pageSelect: 0,
      listQuery: {
        page: 1,
        limit: 10,
        schedul_type: 0,
        binding_state: 0,
        lapseto: 0,
        source: 0,
        start_time: "",
        end_time: "",
        keywords: "",
        contagion: "",
        reimbursement_way: "",
        isscheduling: "",
        isprescription: ""
      },
      multipleSelection: [],
      bindWechatDialog: false,
      contagionList: [],
      reimbursement_ways: [],
      patient: null,
      id: "",
      name: "",
      dialysis_no: "",
      patientPrint: {},
      patient_id: "",
      gender: "",
      idcardno: "",
      phone: "",
      healthcareno: "",
      startTime: ""
    };
  },
  created() {
    this.getList();
    this.contagionList = this.$store.getters.contagions;
    this.reimbursement_ways = this.$store.getters.reimbursement_ways;

    const keyword = this.$route.query && this.$route.query.keyword;
    if (typeof keyword === "string" && keyword.length > 0) {
      this.listQuery.keywords = keyword;
      this.searchKey = keyword;
    }
  },

  methods: {
    getCount(row){
      console.log(row)
      return row.total_dialysis + row.user_sys_before_count
    },
    EditLapseto() {
      if (this.lapsetoForm.lapseto_time == "") {
        this.$message.error("请选择时间");
        return;
      }
      EditLapseto(this.lapsetoForm.patient_id, this.lapsetoForm).then(
        response => {
          if (response.data.state === 1) {
            this.$notify({
              title: "成功",
              message: "转归设置完成",
              type: "success",
              duration: 2000
            });
            this.tableData[
              this.currentIndex
            ].lapseto = this.lapsetoForm.lapseto_type;
            this.currentIndex = -1;
            this.LapsetoDialogVisible = false;
          } else {
            this.$message.error(response.data.msg);
          }
        }
      );
    },
    OpenSetLapseto(row, index) {
      this.patient = row;
      this.currentIndex = index;
      this.lapsetoForm.lapseto_time = "";
      this.lapsetoForm.lapseto_type = row.lapseto;
      this.lapsetoForm.patient_id = row.id;
      this.LapsetoDialogVisible = true;
    },
    LapsetoInfo(row) {
      if (
        typeof row.lapseto === "undefined" ||
        (row.lapseto !== 1 && row.lapseto !== 2)
      ) {
        return "未设置";
      } else if (row.lapseto === 1) {
        return "留治";
      } else {
        return "转出";
      }
    },
    openWechatBindDialog() {
      this.bindWechatDialog = true;
    },
    handleCheckAllChange(val) {
      console.log(val);
      console.log(this.checkAll);
      console.log(this.isIndeterminate);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.pageSelect = this.multipleSelection.length;
    },

    handleCheckedCitiesChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    changeCategoryId(categoryId) {
      this.categoryId = categoryId;
    },
    selectSchedulType(scheduleType) {
      // alert(scheduleType);/
      this.schedulType = scheduleType;
      this.listQuery.schedul_type = scheduleType;
      this.getList();
    },
    selectSystemType(systemType) {
      this.systemType = systemType;
      this.listQuery.binding_state = systemType;
      this.getList();
    },
    selectLapseTo(lapseto) {
      this.lapsetoType = lapseto;
      this.listQuery.lapseto = lapseto;
      this.getList();
    },
    selectSource(source) {
      this.sourceType = source;
      this.listQuery.source = source;
      this.getList();
    },
    changeTimeOne(val) {
      this.startTime = this.getTimestamp(val);
    },
    changeTime(val) {
      var time = this.getTimestamp(val) - this.startTime;
      if (time < 0) {
        this.$message.error("结束时间不能小于开始时间");
        this.listQuery.end_time = "";
      } else {
        this.getList();
      }
    },
    getTimestamp(time) {
      // 把时间日期转成时间戳
      return new Date(time).getTime() / 1000;
    },
    search() {
      this.listQuery.keywords = this.searchKey;
      this.getList();
    },
    changeOtherSearch() {
      this.getList();
    },
    getList() {
      fetchList(this.listQuery).then(response => {
        if (response.data.state === 0) {
          this.$message.error(response.data.msg);
          return false;
        } else {
          this.tableData = response.data.data.patients;
          // console.log('病人是', this.tableData)
          this.pageTotal = this.tableData.length;
          this.total = response.data.data.total;
        }
      });
    },

    OpenView(name, number, id) {
      this.name = name;
      this.dialysis_no = number;
      this.centerDialogVisible = true;
      OpenView(id).then(response => {
        if (response.data.state === 0) {
          this.$message.error(response.data.msg);
          return false;
        } else {
          var patient = response.data.data.patient;
          console.log("二维码病人信息", patient);
          this.id = patient.id;
          this.name = patient.name;
          this.gender = patient.gender;
          this.idcardno = patient.id_card_no;
          this.phone = patient.phone;
          this.healthcareno = patient.health_care_no;
        }
      });
    },
    ShowQRCode() {
      document.getElementById("qrcode").innerHTML = "";
      this.qrcode = this.$QRCode();
    },
    download() {
      alert("aaaa");
    },
    print() {
      var ptime = Math.round(new Date().getTime() / 1000);
      this.print_time = uParseTime(ptime, "{y}年{m}月{d}日");
      const style =
        "@media print { .print_main_content { background-color: white; width:960px; margin:0 auto; padding: 0 0 20px 0; } .print_main_content .order_title { text-align: center; font-size: 23px; line-height: 50px; font-weight: 500; } .print_main_content table { width: 100%; border: 1px solid; border-collapse: collapse; padding: 2px; } .print_main_content table tbody tr td { border: 1px solid; text-align: center; padding: 10px 8px; } .td_proj_title { font-size: 18px; line-height: 25px; font-weight: 500; } .td_proj_content { font-size: 18px; line-height: 25px; } .td_align_left { text-align: left; } .print_footnote_panel { font-size: 17px; line-height: 40px; } .print_footnote_panel .proj { display: inline-block; width: 49%; } .print_footnote_panel .proj .proj_title { font-weight: 500;} }";
      setTimeout(() => {
        printJS({
          printable: "print-card-info",
          type: "html",
          style: style,
          scanStyles: false
        });
      }, 1);

      var id = this.id;
      var name = this.name;
      var gender = this.gender;
      if (gender === 1) {
        gender = "男";
      }
      if (gender === 2) {
        gender = "女";
      }
      var idcardno = this.idcardno;
      var phone = this.phone;
      var healthcareno = this.healthcareno;
      var dialysisno = this.dialysis_no;

      // Base64位加密
      var aid = this.Base64.encode(id);
      var aname = this.Base64.encode(name);
      var agender = this.Base64.encode(gender);
      var aidcardno = this.Base64.encode(idcardno);
      var aphone = this.Base64.encode(phone);
      var ahealthcareno = this.Base64.encode(healthcareno);
      var adialysisno = this.Base64.encode(dialysisno);
      // 调用生成二维码的方法
      this.$options.methods.qrcode(
        aid,
        aname,
        agender,
        aidcardno,
        aphone,
        ahealthcareno,
        adialysisno
      );
    },
    qrcode(id, name, gender, idcardno, phone, healthcareno, dialysisno) {
      document.getElementById("code").innerHTML = "";
      const qrcode = new QRCode("code", {
        width: 200,
        height: 200,
        text:
          "user_id:" +
          id +
          "," +
          "name:" +
          name +
          "," +
          "dialysis_no:" +
          dialysisno +
          "," +
          "gender:" +
          gender +
          "," +
          "idcard_no:" +
          idcardno +
          "," +
          "phone:" +
          phone +
          "," +
          "healthcare_no:" +
          healthcareno
      });
    }
    //  components:{
    //    pagiNation
    //  }
  }
};
Vue.prototype.$QRCode = function() {
  var name = this.name;
  var dialysis_no = this.dialysis_no;
  var id = this.id;
  var gender = this.gender;
  if (gender === 1) {
    gender = "男";
  }
  if (gender === 2) {
    gender = "女";
  }
  var idcardno = this.idcardno;
  var phone = this.phone;
  var healthcareno = this.healthcareno;

  // BASE64加密
  // var eid = this.Base64.encode(id)
  // var ename = this.Base64.encode(name)
  // var egender = this.Base64.encode(gender)
  // var eidcardno = this.Base64.encode(idcardno)
  // var ephone = this.Base64.encode(phone)
  // var ehealthcareno = this.Base64.encode(healthcareno)
  // var edialysisno = this.Base64.encode(dialysis_no)
  var eid = id;
  var ename = name;
  var egender = gender;
  var eidcardno = idcardno;
  var ephone = phone;
  var ehealthcareno = healthcareno;
  var edialysisno = dialysis_no;
  console.log(
    "user_id" + eid,
    "name:" + ename,
    "gender:" + egender,
    "idcard_no:" + eidcardno,
    "phone:" + ephone,
    "healthcare_no:" + ehealthcareno,
    "edialysis_no:" + edialysisno
  );
  const salting = "admin-authority";
  new QRCode("qrcode", {
    width: 150, // 设置宽度
    height: 150, // 设置高度
    text:
      "user_id:" +
      eid +
      "," +
      "name:" +
      ename +
      "," +
      "dialysis_no:" +
      edialysisno +
      "," +
      "gender:" +
      egender +
      "," +
      "idcard_no:" +
      eidcardno +
      "," +
      "phone:" +
      ephone +
      "," +
      "healthcare_no:" +
      ehealthcareno
  });
};
</script>

<style rel="stylesheet/scss" lang="scss">
.app-container {
  // margin: 20px;
  font-size: 15px;
  .filter-container {
    padding-bottom: 5px;
  }
  .search-component {
    width: 500px;
    .searchBox {
      width: 300px;
      height: 36px;
      line-height: 36px;
      padding-left: 15px;
      border: 1px #dcdfe6 solid;
      border-right: none;
      outline: none;
      float: left;
      border-radius: 6px 0 0 6px;
      font-size: 14px;
      color: #333;
      background: #fff;
      box-shadow: 3px 3px 4px rgba(135, 135, 135, 0.05);
    }
    .searchBtn {
      background-color: #409eff;
      color: #fff;
      font-size: 15px;
      text-align: center;
      height: 36px;
      line-height: 36px;
      float: left;
      outline: none;
      width: 70px;
      border: none;
      border-radius: 0 6px 6px 0;
      font-family: "Microsoft Yahei";
      cursor: pointer;
    }
  }
  .amount {
    font-weight: normal;
    padding: 10px 0 0 0;
    color: #606266;
    font-size: 14px;
    span {
      color: #ef2525;
      font-family: "Arial";
      padding: 0 2px;
    }
  }

  .print_main_content {
    background-color: white;
    width: 960px;
    margin: 0 auto;
    padding: 0 0 20px 0;
  }
  .print_main_content .order_title {
    text-align: center;
    font-size: 23px;
    line-height: 50px;
    font-weight: 500px;
  }
  .print_main_content table {
    width: 100%;
    border: 1px solid;
    border-collapse: collapse;
    padding: 2px;
  }
  .print_main_content table tbody tr td {
    border: 1px solid;
    text-align: center;
    /* font-size: 17px; */
    padding: 10px 8px;
  }
  .td_proj_title {
    font-size: 18px;
    line-height: 25px;
    font-weight: 500;
  }
  .td_proj_content {
    font-size: 18px;
    line-height: 25px;
  }
  .td_align_left {
    text-align: left;
  }
  .print_footnote_panel {
    font-size: 17px;
    line-height: 40px;
  }
  .print_footnote_panel .proj {
    display: inline-block;
    width: 49%;
  }
  .print_footnote_panel .proj .proj_title {
    font-weight: 500;
  }
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #d0d3da;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #d0d3da;
}
.el-select--small {
  width: 196px;
}
.el-checkbox__inner::after {
  height: 10px;
  left: 7px;
}
.el-checkbox__inner {
  width: 20px;
  height: 20px;
}
</style>