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"
      @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: '',
      appointPatients: [],
      isEdit: false,
      projectName: '',
      curProject: '',
      curPatient: null,
      morOrAft: '', // 上下午
      weekName: '', // 星期几
      title: '',
      addTitle: '',
      doctorName: '',
      dataForm: {
        operaDate: '', // 预约日期(年月日)
        doctorCode: '', // 医生工号
        morOrAft: '',
        total: '' // 总数
      },
      dataList: [],
      currentTableList: [],
      currentTableId: [],
      rowListObj: {},
      editOperationVisible: false
    }
  },
  computed: {
    dataRule() {
      return {
        startNum: [
          { required: true, message: '请输入起始号', trigger: 'change' }
        ],
        total: [
          { required: true, message: '请输入总数', trigger: 'change' }
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        interval: [
          { required: true, message: '请输入间隔时间', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.dataForm ? this.$refs.dataForm.resetFields() : '' // 重置表单
        this.dataForm.morOrAft = this.morOrAft
      })
    },
    addOrder() {
      this.addPatientVisible = true
      this.addTitle = '新增预约'
      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')
        })
      })
    },
    // 获取排台管理列表
    async getSourceList() {
      const { data: res } = await this.$http.get('/num/source/getList', {
        params: {
          doctorCode: this.dataForm.doctorCode, // 医生工号
          morOrAft: this.morOrAft, // morOrAft --1:上午，2:下午
          searchDate: this.dataForm.operaDate // 搜索日期
        }
      })
      if (res.code === 0) {
        this.dataList = res.data
        // 选中哪一行
        this.dataList.forEach((item, index) => {
          if (this.rowListObj.id === item.id) {
            this.rowListObj.operaTime && this.$refs.multipleTable ? this.$refs.multipleTable.setCurrentRow(this.dataList[index]) : ''
          }
        })
      } else {
        this.$message.error(res.msg)
      }
    },
    // 表格批量选择
    handleSelectionChange(val) {
      // console.log(val)
      this.currentTableList = val
      this.currentTableId = []
      this.currentTableList.forEach(item => {
        this.currentTableId.push(item.id)
      })
    },
    // 点击行
    rowClick(val) {
      console.log('点击rowClick', val)
      this.rowListObj = val
    },
    // 把每一行的索引放进row
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    // 修改
    editHandle(scopeRow) {
      this.editOperationVisible = true
      this.$nextTick(() => {
        this.$refs.editOperationRef.dataForm.operaTime = scopeRow.appointmentTime.substr(0, 5)
        this.$refs.editOperationRef.dataForm.morOrAft = scopeRow.morOrAft
        this.$refs.editOperationRef.patientInfo = scopeRow

        this.$refs.editOperationRef.init()
      })
    },
    // 删除
    async deleteHandle(scopeRow) {
      this.deleteClickFun([scopeRow.id])
    },
    // 批量删除
    batchDeleteClick() {
      if (this.currentTableId.length > 0) {
        this.deleteClickFun(this.currentTableId)
      } else {
        this.$message({
          message: '请选择删除项',
          type: 'warning'
        })
      }
    },
    // 删除--保存过的预约号
    deleteClickFun(id) {
      this.$confirmFun('您确定要删除吗？').then(async() => {
        const { data: res } = await this.$http({
          url: '/num/source',
          method: 'delete',
          data: id
        })
        if (res.code === 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getSourceList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    closeAddDialog() {
      this.addPatientVisible = false
    },
    updateAppoint() {
      this.$emit('getScheduleList')
    },
    // 关闭弹框
    closeDialog() {
      this.$emit('closeDialog')
      this.$emit('getScheduleList')
    }
  }
}
</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>