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

<template>
  <el-dialog top="30px" class="number-manage" append-to-body :visible.sync="visible" width="50%" @close="closeDialog">
    <div slot="title">
      <div>
        <div class="title_header">已约患者列表</div>
        <div style="margin: 8px 0">{{ dateInfo }}</div>
        <div>{{ projectName }}</div>
      </div>
    </div>
    <el-row style="margin-bottom: 15px">
      <el-col v-if="canAdd" style="margin: 8px" :span="11">
        <el-button style="width: 100%" size="mini" icon="el-icon-plus" type="primary" @click="addOrder">新增预约</el-button>
      </el-col>
      <el-col v-for="(item,index) in patientsList" :key="index" :span="11" class="patientBox">
        <div class="patient_left">
          <div style="margin-right: 8px;color: #1C76FD;">{{ item.appointDate }}</div>
          <div style="margin-right: 8px">{{ item.patientName }}</div>
          <div style="margin-right: 8px">{{ item.patientSex }}</div>
          <div>{{ item.patientAge }}</div>
        </div>
        <div class="patient_right">
          <div class="edit" @click="changeOrder(item)">改约</div>
          <div class="delete" @click="deleteOrder(item)">删除</div>
        </div>
      </el-col>
    </el-row>
    <add-patient-order
      v-if="addPatientVisible"
      ref="addPatientOrder"
      :project="curProject"
      :patient-detail="curPatient"
      :title="addTitle"
      :is-edit="isEdit"
      @goFormList="goFormList"
      @closeDialog="closeAddDialog"
      @updateAppoint="updateAppoint"
    />
  </el-dialog>
</template>

<script>

import AddPatientOrder from '@/page-subspecialty/views/modules/nurseManagement/reservation/schedule/addPatientOrder.vue'

export default {
  components: { AddPatientOrder },
  props: {
    patientsList: {
      type: Array,
      default: () => []
    },
    canAdd: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false,
      addPatientVisible: false,
      dateInfo: '',
      isEdit: false,
      projectName: '',
      curProject: '',
      curPatient: null,
      title: '',
      addTitle: ''
    }
  },
  methods: {
    init() {
      this.visible = true
    },
    addOrder() {
      this.addPatientVisible = true
      this.addTitle = '新增预约'
      this.isEdit = false
      this.curPatient = null
      this.$nextTick(() => {
        this.$refs.addPatientOrder.init()
      })
    },
    // 修改预约
    changeOrder(value) {
      this.addPatientVisible = true
      this.addTitle = '修改预约'
      this.curPatient = value
      this.isEdit = true
      this.$nextTick(() => {
        this.$refs.addPatientOrder.init()
      })
    },
    // 删除预约
    deleteOrder(item) {
      this.$confirmFun('确认删除吗？').then(() => {
        this.$http.get('/appoint/delAppiontInfo', {
          params: {
            id: item.id
          }
        }).then(() => {
          this.$message.success('删除成功')
          this.$emit('getScheduleList')
        })
      })
    },
    closeAddDialog() {
      this.addPatientVisible = false
    },
    goFormList() {
      this.$emit('goFormList')
    },
    updateAppoint() {
      this.$emit('getScheduleList')
    },
    // 关闭弹框
    closeDialog() {
      this.$emit('closeDialog')
    }
  }
}
</script>
<style lang="scss" scoped>
.number-manage {
  .number-manage-head {
    border-bottom: 1px dashed #d6d6d6;
  }
  .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 {
        padding-right: 6px;
      }
      span:nth-child(1) {
        font-weight: 700;
      }
    }
  }
  .form-two {
    margin-left: 16px;
  }
  .operation-details {
    cursor: pointer;
  }
}
</style>
<style lang="scss">
::v-deep .el-dialog__header{
  background:linear-gradient(rgba(27, 91, 251, 0.8) , #1B5BFB 100%);
  color: #fff;
}
.title_header{
  font-size: 20px;
  font-weight: bold;
}
.patientBox{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px 4px 16px;
  background: #EFF4FF;
  border: 1px solid rgba(27, 91, 251, 0.2);
  border-radius: 2px;
  font-size: 14px;
  line-height: 22px;
  margin: 8px;
  .patient_left{
    display: flex;
  }
  .patient_right{
    display: flex;
  }
  .edit{
    cursor: pointer;
    user-select: none;
    color: #1C76FD;
  }
  .delete{
    color: #FF4D4F;
    cursor: pointer;
    user-select: none;
    margin-left: 8px;
  }
}
</style>