kyj-yanglao-web-new/src/views/elderly/nursing/keep-fit/nine-prevention-measures-list/AddForm.vue

<template>
  <Dialog
    style="max-width: 100vw; min-width: 96vw"
    v-model="dialogVisible"
    :title="title"
    scroll
    class="OutwardRegistrationBak"
    noPaddingEL="OutwardRegistrationBak"
  >

    <el-form  v-loading="loading" ref="formRef" :model="dataForm" :rules="isDetail?[]:dataRule" :label-width="labelWidth">
      <div class="info-wrap">
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="长者姓名" prop="elderId">
              <search-the-elderly ref="selectElderRef" :disabled="isDetail" @update_elder="elderUp" v-model="dataForm.elderName" :tId="dataForm.tenantId"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item  label="档案号" prop="fileNumber">
              <el-input v-if="!isDetail" v-model="dataForm.fileNumber" disabled />
              <el-text v-else >{{dataForm.fileNumber}}</el-text>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item  label="性别" prop="elderSex">
              <el-input v-if="!isDetail" v-model="dataForm.elderSex" disabled />
              <el-text v-else >{{dataForm.elderSex}}</el-text>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item  label="年龄" prop="elderAge">
              <el-input v-if="!isDetail" v-model="dataForm.elderAge" disabled />
              <el-text v-else >{{dataForm.elderAge}}</el-text>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item  label="入院日期" prop="checkInTime">
              <el-input v-if="!isDetail" :model-value="dayjs(dataForm.checkInTime).format('YYYY-MM-DD')=='Invalid Date'?'':dayjs(dataForm.checkInTime).format('YYYY-MM-DD')" disabled />
              <el-text v-else >{{dayjs(dataForm.checkInTime).format('YYYY-MM-DD')}}</el-text>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item  label="床位号" prop="bedName">
              <el-input v-if="!isDetail" v-model="dataForm.bedName" disabled />
              <el-text v-else disabled="">{{dataForm.bedName}}</el-text>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="护理级别" prop="nurseLevelName">
              <el-input v-if="!isDetail" v-model="dataForm.nurseLevelName" disabled />
              <el-text v-else>{{dataForm.nurseLevelName}}</el-text>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="记录月份" prop="recordMonth">
              <el-date-picker
                size="default"
                style="width: 100%"
                v-if="!isDetail"
                v-model="dataForm.recordMonth"
                type="month"
                :clearable="false"
                :editable="false"
                placeholder="选择记录月份"
                value-format="YYYY-MM"
                format="YYYY-MM"
                date-format="YYYY-MM"
              />
              <el-text v-else>{{dataForm.recordMonth}}</el-text>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item  label="执行人" prop="operator">
              <el-input v-if="!isDetail" v-model="dataForm.operator"  />
              <el-text v-else disabled="">{{dataForm.operator}}</el-text>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item  label="监督人" prop="supervisor">
              <el-input v-if="!isDetail" v-model="dataForm.supervisor"  />
              <el-text v-else disabled="">{{dataForm.supervisor}}</el-text>
            </el-form-item>
          </el-col>
        </el-row>

      </div>
    </el-form>



    <el-table
      style="width: 100%;"
      :data="dataForm.items"
      :header-cell-style="tableHeaderColor"
      @selection-change="handleSelectionChange"
      ref="multipleTableRef"
    >


      <el-table-column prop="bedName" header-align="center" align="center" label="服务风险" width="130">
        <template #default="scope">
          <el-text>{{scope.row.serviceRisk}}</el-text>
        </template>
      </el-table-column>

      <el-table-column prop="bedName" header-align="center" align="center" label="风险等级" width="130">
        <template #default="scope">
          <select v-if="!isDetail" v-model="scope.row.riskLevel" class="native-select-risk">
            <option value="">请选择</option>
            <option value="无风险">无风险</option>
            <option value="低风险">低风险</option>
            <option value="中风险">中风险</option>
            <option value="高风险">高风险</option>
          </select>
          <span v-else class="risk-value">{{ scope.row.riskLevel || '-' }}</span>
        </template>
      </el-table-column>


      <el-table-column prop="bedName" header-align="center" align="center" label="预防措施" width="380">
        <template #default="scope">
          <el-text>{{scope.row.preventiveMeasure}}</el-text>
        </template>
      </el-table-column>



      <el-table-column prop="bedName"  label="执行情况">
        <template #default="scope">
          <div v-if="isReady" style="display:flex;flex-direction: row;flex-wrap: wrap;align-items: center;gap: 8px;">
            <div v-for="(item,index) in scope.row.executionStatus" :key="index" style="display:flex;align-items:center;">
              <span style="min-width: 26px; text-align: right; margin-right: 6px; color: #303133; font-size: 12px; font-weight: 600;">
                {{ String(index + 1).padStart(2, '0') }}日:
              </span>
              <select v-if="!isDetail" v-model="scope.row.executionStatus[index]" class="native-select-prevention">
                <option value="">请选择</option>
                <option value="正常">正常</option>
                <option value="请假外出">请假外出</option>
                <option value="退住">退住</option>
              </select>
              <span v-else class="prevention-value">{{ scope.row.executionStatus[index] || '-' }}</span>
            </div>
          </div>
        </template>
      </el-table-column>

    </el-table>



    <template #footer>
      <el-button @click="handleClosed">关闭</el-button>
      <el-button v-loading="formLoading" type="primary" v-show="!isDetail" @click="submitForm">确定</el-button>
    </template>
  </Dialog>


</template>

<script lang="ts" setup>
import { computed, nextTick, ref } from 'vue'
import { FormRules } from 'element-plus'
import { useMediaQuery } from '@vueuse/core'
const { isValidNumberDis } = useValidator()
import { useValidator } from '@/hooks/web/useValidator'
import SelectBed from "@/views/preSalesManage/BookBed/SelectBed.vue";
import dayjs from 'dayjs'
import { useUserStore } from '@/store/modules/user'
import {tableHeaderColor} from "@/utils/table";
import {
  nineRestraintCreate,
  nineRestraintGetById,
  nineRestraintUpdate
} from "@/api/elderly/nursing/keep-fit";
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const discountAmount = ref()
const discount = ref()
const selectBedRef = ref()
const title = ref('')
const dialogVisible = ref(false) // 弹窗
const loading = ref(false) // 弹窗
const formRef = ref() // 表单 Ref
const radio = ref(1) // 表单 Ref
const selectElderRef = ref() // 表单 Ref
const isDetail = ref(false) // 是否详情打开
const isReady = ref(false) // 内容是否准备好渲染，用于性能优化
const jsonDataList = ref([])
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const userStore = useUserStore()


const removeElementsFromA = (a, b) => {
  // 使用Set来存储B中的元素，以提高查找效率
  const bSet = new Set(b)
  // 遍历A，使用filter来过滤掉那些在B中也存在的元素
  const filtered = a.filter((item) => !bSet.has(item))
  // 返回过滤后的数组
  return filtered
}


const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log(multipleSelection.value)
}
const deleteItems = () => {
  dataForm.value.items = removeElementsFromA(dataForm.value.items, multipleSelection.value)
}


let dataForm = ref({
  // 表单字段
  id: undefined,
  idCard: '',
  fileNumber: '', //档案号
  elderName: '',//长者姓名
  bedName: '', //床位号
  elderAge: '', //年龄
  elderSex: '', //性别
  checkInTime: '', //入院日期
  elderId: '',
  operator: '',
  supervisor: '',
  recordMonth: dayjs().format('YYYY-MM'), // 记录时间，默认当前时间
  items: [], //时间数组
  tenantId: undefined
})
// 表单规则
const dataRule = reactive<FormRules>({
  recordTime: [{ required: true, message: '记录时间不能为空', trigger: 'blur' }],
  elderId: [{ required: true, message: '长者姓名不能为空', trigger: 'blur' }],
  phone: [{ required: true, message: '联系方式不能为空', trigger: 'blur' },
    { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
  sourceChannel: [{ required: true, message: '来源渠道不能为空', trigger: 'blur' }],
  elderId: [{ required: true, message: '长者姓名不能为空', trigger: 'blur' }],

})



const elderUp = (e) => {
  dataForm.value.elderName = e.elderName
  dataForm.value.elderId = e.id
  dataForm.value.elderSex = e.elderSex === 1 ? '男' : '女'
  dataForm.value.bedName = e.bedName||''
  dataForm.value.checkInTime = e.checkInTime
  dataForm.value.fileNumber = e.fileNumber
  dataForm.value.elderAge = e.elderAge
  dataForm.value.nurseLevelName = e.nurseLevelName

}

// 计算窗口大小
const currentWidth = useMediaQuery('(max-width: 800px)')
// 计算文字大小
const labelWidth = computed(() => {
  return currentWidth.value ? '130px' : '130px'
})



/** 打开弹窗 */
const open = async (tenantId, id?: any, detail: boolean = false) => {
  resetForm()
  isReady.value = false
  dialogVisible.value = true
  dataForm.value.id = id || undefined
  dataForm.value.tenantId = tenantId
  isDetail.value = detail
  await nextTick()
  requestAnimationFrame(() => {
    isReady.value = true
  })
  if(id){
    title.value = "编辑-九防记录"
  }else {
    title.value = "新增-九防记录"
  }
  if (detail) {
    title.value = "详情-九防记录"
  }


  if (id) {
    try {
      loading.value = true
      const res = await nineRestraintGetById(id)
      dataForm.value = res
      try {
        for (const re of dataForm.value.items) {
            re.executionStatus = re.executionStatus.split('^')
        }
      }catch (e){}
      loading.value = false
      const elderRes = await selectElderRef.value.upData(res.elderName, res.elderId)
      elderUp(elderRes)

    } catch (err) { loading.value = false}

  }else {
      //新增
    dataForm.value.items=[
      {serviceRisk:'防坠床防跌倒',riskLevel:'',preventiveMeasure:'1、床头挂警示标识。',executionStatus:[]},
      {serviceRisk:'防坠床防跌倒',riskLevel:'',preventiveMeasure:'2、昼夜加强巡视。',executionStatus:[]},
      {serviceRisk:'防坠床防跌倒',riskLevel:'',preventiveMeasure:'3、必要时遵医嘱协助使用保护性约束。',executionStatus:[]},
      {serviceRisk:'防坠床防跌倒',riskLevel:'',preventiveMeasure:'4、嘱长者有事可使用紧急呼叫铃。',executionStatus:[]},
      {serviceRisk:'防坠床防跌倒',riskLevel:'',preventiveMeasure:'5、老人在床休息时使用床护栏。',executionStatus:[]},
      {serviceRisk:'防坠床防跌倒',riskLevel:'',preventiveMeasure:'6、协助老人上、下床。',executionStatus:[]},
      {serviceRisk:'防坠床防跌倒',riskLevel:'',preventiveMeasure:'7、检查床单元及居室安全。',executionStatus:[]},
      {serviceRisk:'防坠床防跌倒',riskLevel:'',preventiveMeasure:'8、观察老人服用药物后的反应。',executionStatus:[]},
      {serviceRisk:'防坠床防跌倒',riskLevel:'',preventiveMeasure:'9、行动不便老人起床、行走、如厕时进行辅助。',executionStatus:[]},

      {serviceRisk:'防噎食',riskLevel:'',preventiveMeasure:'1、床头挂警示标识。',executionStatus:[]},
      {serviceRisk:'防噎食',riskLevel:'',preventiveMeasure:'2、餐食类型：①普食②软食③烂碎④硬碎⑤糊状。',executionStatus:[]},
      {serviceRisk:'防噎食',riskLevel:'',preventiveMeasure:'3、在进食情况下有护理人员看护。',executionStatus:[]},
      {serviceRisk:'防噎食',riskLevel:'',preventiveMeasure:'4、进食速度不宜过快，需提示细嚼慢咽',executionStatus:[]},
      {serviceRisk:'防噎食',riskLevel:'',preventiveMeasure:'5、无法独立进食长者专人进行协助，出现呛咳或进食后声音改变，立即停止喂食。',executionStatus:[]},

      {serviceRisk:'防食品药品误食',riskLevel:'',preventiveMeasure:'1、床头挂警示标识。',executionStatus:[]},
      {serviceRisk:'防食品药品误食',riskLevel:'',preventiveMeasure:'2、严格遵医嘱用药说明服药，由工作人员按时按量派发药物。',executionStatus:[]},
      {serviceRisk:'防食品药品误食',riskLevel:'',preventiveMeasure:'4、委托发药长者，协助服药到口。',executionStatus:[]},
      {serviceRisk:'防食品药品误食',riskLevel:'',preventiveMeasure:'4、进食速度不宜过快，需提示细嚼慢咽',executionStatus:[]},
      {serviceRisk:'防食品药品误食',riskLevel:'',preventiveMeasure:'5、将易误食物品进行收纳，由工作人员代为管理。',executionStatus:[]},
      {serviceRisk:'防食品药品误食',riskLevel:'',preventiveMeasure:'6、每周两次检查食品，防止老年人误食过期或变质食品。',executionStatus:[]},
      {serviceRisk:'防食品药品误食',riskLevel:'',preventiveMeasure:'7、每周两次检查药品，防止老年人误食过期药品。',executionStatus:[]},

      {serviceRisk:'防压疮',riskLevel:'',preventiveMeasure:'1、床头挂警示标识。',executionStatus:[]},
      {serviceRisk:'防压疮',riskLevel:'',preventiveMeasure:'2、根据长者实际情况，提醒或协助变换体位。',executionStatus:[]},
      {serviceRisk:'防压疮',riskLevel:'',preventiveMeasure:'3、勤换片，保持皮肤清洁，干燥。',executionStatus:[]},
      {serviceRisk:'防压疮',riskLevel:'',preventiveMeasure:'4、设立翻身卡，定期协助长者翻身。',executionStatus:[]},
      {serviceRisk:'防压疮',riskLevel:'',preventiveMeasure:'5、使用便器时，须将老人进行抬离床面，避免拉、拽、减少摩擦力和避免便器刮伤。',executionStatus:[]},
      {serviceRisk:'防压疮',riskLevel:'',preventiveMeasure:'6、按需使用气垫床，翻身床，翻身枕等。',executionStatus:[]},
      {serviceRisk:'防压疮',riskLevel:'',preventiveMeasure:'7、保持床单平整，干燥，清洁。',executionStatus:[]},
      {serviceRisk:'防压疮',riskLevel:'',preventiveMeasure:'8、保持营养的食物搭配。',executionStatus:[]},

      {serviceRisk:'防烫伤',riskLevel:'',preventiveMeasure:'1、床头挂警示标识。',executionStatus:[]},
      {serviceRisk:'防烫伤',riskLevel:'',preventiveMeasure:'2、暖瓶类放置在安全区域内，统一集中管理。',executionStatus:[]},
      {serviceRisk:'防烫伤',riskLevel:'',preventiveMeasure:'3、由工作人员帮忙打开水。',executionStatus:[]},
      {serviceRisk:'防烫伤',riskLevel:'',preventiveMeasure:'4、协助洗漱、洗浴水温适宜。',executionStatus:[]},
      {serviceRisk:'防烫伤',riskLevel:'',preventiveMeasure:'5、避免老人饮用、进食高温饮食。',executionStatus:[]},
      {serviceRisk:'防烫伤',riskLevel:'',preventiveMeasure:'6、使用取暖设备，应在工作人员的协助下进行。',executionStatus:[]},
      {serviceRisk:'防烫伤',riskLevel:'',preventiveMeasure:'7、开水房、饮水机热水开关设置安全锁。',executionStatus:[]},

      {serviceRisk:'防他伤和自伤',riskLevel:'',preventiveMeasure:'1、床头挂警示标识。',executionStatus:[]},
      {serviceRisk:'防他伤和自伤',riskLevel:'',preventiveMeasure:'2、定期检查长者居室安全。',executionStatus:[]},
      {serviceRisk:'防他伤和自伤',riskLevel:'',preventiveMeasure:'3、昼夜加强巡视。',executionStatus:[]},
      {serviceRisk:'防他伤和自伤',riskLevel:'',preventiveMeasure:'4、时刻察觉老人情绪变化。',executionStatus:[]},
      {serviceRisk:'防他伤和自伤',riskLevel:'',preventiveMeasure:'5、危险物品放置于规定区域，专人进行管理。',executionStatus:[]},

      {serviceRisk:'防走失',riskLevel:'',preventiveMeasure:'1、床头挂警示标识。',executionStatus:[]},
      {serviceRisk:'防走失',riskLevel:'',preventiveMeasure:'2、昼夜加强巡视。',executionStatus:[]},
      {serviceRisk:'防走失',riskLevel:'',preventiveMeasure:'3、严格加强交接班制度，中高风险长者重点床头交接。',executionStatus:[]},
      {serviceRisk:'防走失',riskLevel:'',preventiveMeasure:'4、认知症长者，有游走行为需要居住在有门禁的楼层。',executionStatus:[]},
      {serviceRisk:'防走失',riskLevel:'',preventiveMeasure:'5、关注长者心理变化，避免长者独自外出。',executionStatus:[]},
      {serviceRisk:'防走失',riskLevel:'',preventiveMeasure:'6、外出请假、须有家属或监护人陪同老人外出。',executionStatus:[]},
    ]

    dataForm.value.items.map((item)=>{
      for (let i=1;i<=31;i++){
        item.executionStatus.push('')
      }
    })

  }
}





defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  if(formLoading.value){
    return
  }
  formLoading.value = true
  // 提交请求
  try {

    // 校验表单
    if (!formRef.value) return
    const valid = await formRef.value.validate()
    if (!valid) return


    const tempParams = JSON.parse(JSON.stringify(dataForm.value));
    for (const item of tempParams.items) {
       item.executionStatus = item.executionStatus.join('^')
    }

    if(dataForm.value.id) {
      const res = await nineRestraintUpdate(tempParams)
      if (res) {
        message.success(t('common.updateSuccess'))
        dialogVisible.value = false
        // 发送操作成功的事件
        emit('success')
      }
    }else {
      const res = await nineRestraintCreate(tempParams)
      if (res) {
        message.success(t('common.updateSuccess'))
        dialogVisible.value = false
        // 发送操作成功的事件
        emit('success')
      }
    }

  } finally {
    setTimeout(()=>{
      formLoading.value = false
    },500)
  }
}



/** 重置表单 */
const resetForm = () => {
  dataForm.value = {
    // 表单字段
    id: undefined,
    idCard: '',
    fileNumber: '', //档案号
    elderName: '',//长者姓名
    bedName: '', //床位号
    elderAge: '', //年龄
    elderSex: '', //性别
    checkInTime: '', //入院日期
    elderId: '',
    operator: '',
    supervisor: '',
    recordMonth: dayjs().format('YYYY-MM'), // 记录时间，默认当前时间
    items: [], //时间数组
    tenantId: undefined
  }
  formRef.value?.resetFields()

  jsonDataList.value=[]
  radio.value=1

}

// 关闭表单
const handleClosed = () => {
  dialogVisible.value = false
  resetForm()
}
</script>

<style lang="scss" scoped>
.OutwardRegistrationBak {
  .el-form {
    padding: 15px 0 !important;
  }

  // 原生选择器样式
  .native-select-prevention {
    width: 85px;
    height: 26px;
    padding: 0 18px 0 6px;
    font-size: 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 3px center;
    background-size: 12px;

    &:focus {
      border-color: #409eff;
      outline: none;
    }

    option {
      font-size: 12px;
    }
  }

  .prevention-value {
    display: inline-block;
    width: 85px;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    text-align: center;
    color: #606266;
  }

  // 风险等级选择器样式
  .native-select-risk {
    width: 100px;
    height: 28px;
    padding: 0 20px 0 8px;
    font-size: 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 14px;

    &:focus {
      border-color: #409eff;
      outline: none;
    }

    option {
      font-size: 12px;
    }
  }

  .risk-value {
    display: inline-block;
    width: 100px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    text-align: center;
    color: #606266;
  }

  .info-title {
    min-width: 75px;
    max-width: 180px;
    padding: 15px;
    font-weight: bolder;
    background-color: #f3f6fb;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
  }

  .info-wrap {
    margin: 15px;
  }


  .title-bg {
    background-color: #f2f5fa;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    margin-top: 1px;
    font-size: 16px;
    font-weight: 800;
    width: 140px;
    height: 50px;
  }

  .row {
    display: flex;
    align-items: center;
    flex-direction: row;
  }

}

</style>