xiangan_pc/src/page-subspecialty/views/modules/nurseManagement/reservation/schedule/operation-detail.vue

<template>
  <el-dialog append-to-body class="operation-detail" :visible.sync="visible" width="50%" :title="title">
    <div class="operation-detail-head">
      <div class="head-content">
        <span class="head-content-left">
          <span>医生姓名：</span>
          <span>刘灿</span>
        </span>
        <span class="head-content-right">
          <span>预约日期：</span>
          <span>2022-12-24</span>
          <span>周二</span>
          <span>上午</span>
        </span>
      </div>

    </div>
    <div class="number-list">
      <el-table
        ref="multipleTable"
        class="number-table"
        highlight-current-row
        :data="dataList"
        tooltip-effect="dark"
        style="width: 100%"
        @current-change="handleCurrentChange"
      >
        <el-table-column
          prop="name"
          label="预约号"
        />

        <el-table-column
          label="预约时间"
        >
          <template slot-scope="scope">123</template>
        </el-table-column>
        <template v-if="title=='预约详情'">
          <el-table-column
            prop="name"
            label="姓名"
          />
          <el-table-column
            prop="name"
            label="性别"
          />
          <el-table-column
            prop="name"
            label="年龄"
          />
        </template>

        <el-table-column v-if="title=='选择时间'" label="手术状态" prop="status" header-align="center" align="center">
          <template slot-scope="scope">
            <div v-show="scope.row.status == 0">
              <span class="circle-status circle-green" />
              <span>已预约</span>
            </div>
            <div v-show="scope.row.status == 1">
              <span class="circle-status circle-blue" />
              <span>可用</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template v-if="title==='选择时间'" slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
  },
  data() {
    return {
      visible: false,
      title: '',
      dataList: [],
      currentTableList: []
    }
  },
  computed: {
    dataRule() {
      return {
      }
    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
      })
    },
    handleCurrentChange() {},
    // 获取信息
    getInfo() {
      this.$http.get(`/patient/manage/${this.params.patientCentreId}/${this.params.patientIdNumber}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
      }).catch(() => { })
    }
  }
}
</script>
<style lang="scss" scoped>
.operation-detail {
  .operation-detail-head {
  }
  .head-content {
    font-size: 14px;
    padding: 10px;
    margin: 4px 0 12px 0;
    background: #eff4ff;
    border: 1px solid #c5d5fe;
    display: flex;
    justify-content: space-between;
    .head-content-left,.head-content-right {
      span:nth-child(1) {
        font-weight: 700;
      }
    }
    .head-content-right {
      span:nth-child(3),span:nth-child(4) {
        padding-left: 10px;
      }
    }
  }
}
</style>
<style lang="scss">
.operation-detail {

  .el-table-column--selection .cell {
    padding-left: 10px;
  }
  .el-table__body tr.current-row>td.el-table__cell {
    color: #fff;
    background: #1e79ff;
  }
  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border: none;
  }
}
</style>