blood_vue/src/views/doctor/application/component/reviewComments.vue

<template>
  <el-dialog v-model="dialogVisible" title="审核意见" width="900px" :close-on-click-modal="false" @close="resetForm">
    <!-- 上方指征表格 -->
    <el-table ref="tableRef" :data="tableData" border style="margin-bottom: 16px" max-height="320"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="指征名称" prop="indicateName" min-width="280" />
      <el-table-column label="补充说明" prop="remark" min-width="320" />
    </el-table>

    <!-- 下方表单区域 -->
    <el-form label-width="130px" :model="indicationForm" :rules="rules">
      <el-form-item label="审核意见" prop="checkResult">
        <SelectTable v-model:data="indicationForm.checkResult" dict-type="sqdshyj" placeholder="" />
      </el-form-item>
      <el-form-item label="审核备注">
        <el-input v-model="indicationForm.checkExplain" type="textarea" :rows="4" placeholder="" />
      </el-form-item>
      <el-form-item label="上次血型复核">
        <span>{{ indicationForm.checkDateText }}</span>
      </el-form-item>
      <div class="row-flex">
        <el-form-item label="是否需要血型复核">
          <el-checkbox v-model="indicationForm.needCheck" true-value="Y" false-value="N" />
        </el-form-item>
        <el-form-item label="输血合理性">
          <el-select v-model="indicationForm.validFlag" placeholder="" style="width:150px">
            <el-option label="合理" value="Y"></el-option>
            <el-option label="不合理" value="N"></el-option>
            <el-option label="待定" value="W"></el-option>
          </el-select>
        </el-form-item>
      </div>


    </el-form>

    <template #footer>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import type { ElTable } from 'element-plus'
import { checkExplain, queryCausailsList } from '@/api/doctor/application'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'
// 弹窗显隐 
const dialogVisible = defineModel<boolean>()
const tableRef = ref<InstanceType<typeof ElTable>>()
// 存储表格勾选选中行
const selectedRows = ref<any[]>([])

const rules = {
  checkResult: [{ required: true, message: '请选择审核意见', trigger: 'change' }]
}
// 表格数据源
const tableData = ref<{ indicateName: string; remark: string }[]>([])

// 表单变量
const indicationForm = ref({
  checkExplain: '',
  auditRemark: '',
  checkResult: '',
  validFlag: '',
  needCheck: 'N'
})

const emit = defineEmits<{
  (e: 'success'): void
}>()

// 表格勾选事件
const handleSelectionChange = (val: any[]) => {
  selectedRows.value = val
}

// 提交逻辑
const handleSubmit = async () => {
  if (!indicationForm.value.checkResult) return ElMessage.error('请选择审核意见')
  if (indicationForm.value.checkResult == '001' && indicationForm.value.validFlag == 'N') {
    ElMessageBox.confirm(
      `审核意见:【同意】，输血合理性为【不合理】确定继续吗？`,
      '提示',
      { type: 'warning', }
    ).then(() => {
      comfirm()
    })
  } else {
    comfirm()
  }
}

const comfirm = () => {
  checkExplain(indicationForm.value).then(res => {
    if (res.code == 0) {
      ElMessage.success(res.msg)
      emit('success')
      dialogVisible.value = false
    }
  })
}

// 弹窗关闭重置表单、清空表格勾选
const resetForm = () => {
  indicationForm.value = {
    checkExplain: '',
    auditRemark: '',
    checkResult: '',
    validFlag: '',
    needCheck: 'N'
  }
  selectedRows.value = []
  // 清空表格勾选
  tableRef.value?.clearSelection()
}


const open = (data) => {
  indicationForm.value = data
  dialogVisible.value = true
  queryCausailsList({ billNo: data.applyNo }).then(res => {
    tableData.value = res.data
  })
}


defineExpose({
  open
})
</script>

<style scoped lang="scss">
.row-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
</style>