wxservice-web/src/views/hospital-service/assessments/InpatientSatisfiedAssessment.vue

<template>
  <window-size>
    <div v-for="(item, index) in headQuestions" :key="item.code" class="question-box">
      <p>{{index + 1}}-1、{{ item.label }}</p>
      <div style="margin-top: 4px">
        <van-radio-group v-model="answer[item.code]" direction="horizontal">
          <van-radio name="满意">满意</van-radio>
          <van-radio name="不满意">不满意</van-radio>
          <van-radio v-if="item.hasWjc" name="未接触">未接触</van-radio>
        </van-radio-group>
      </div>
      <div v-show="answer[item.code] === '不满意'">
        <p style="margin-top: 6px">{{ index + 1 }}-2、{{ tailQuestions[index] }}</p>
        <van-checkbox-group v-model="answer[item.code + 'BmyyyList']" direction="horizontal">
          <van-checkbox
              shape="square"
              v-for="child in getOptions(item.code)"
              :key="child"
              :name="child"
              style="margin-top: 5px"
          >{{ child }}
          </van-checkbox>
        </van-checkbox-group>
        <div class="m-input">其他：<input type="text" v-model="answer[item.code + 'Input']"></div>
      </div>
    </div>

    <div style="padding: 6px 6px 12px 6px; border-bottom: 1px dashed rgb(128,128,128)">
      <p>13-1、您选择我院的主要原因是什么？</p>
      <van-checkbox-group v-model="answer.xzwyyyList" direction="horizontal">
        <van-checkbox
            shape="square"
            v-for="child in xzwyyyXx"
            :key="child"
            :name="child"
            style="margin-top: 5px"
        >{{ child }}
        </van-checkbox>
      </van-checkbox-group>
      <div class="m-input">其他：<input type="text" v-model="answer.xzwyyyInput"></div>
    </div>
    <div style="padding: 6px 6px 12px 6px; border-bottom: 1px dashed rgb(128,128,128)">
      <p>14-1、如果您或亲朋好友需要医疗保健、治疗服务时，您会选择再来或推荐来吗？</p>
      <van-radio-group v-model="answer.sfhxzzl" direction="horizontal">
        <van-radio
            shape="square"
            v-for="child in hbhXx"
            :name="child"
            style="margin-top: 5px"
        >{{ child }}
        </van-radio>
      </van-radio-group>
    </div>

    <div style="padding: 6px 6px 12px 6px; border-bottom: 1px dashed rgb(128,128,128)">
      <p>15-1、请您对本次就诊的医疗服务全过程给予整体评价(1-10分)</p>
      <van-radio-group v-model="answer.ztpj" direction="horizontal">
        <van-radio
            shape="square"
            v-for="n in 10"
            :name="n"
            style="margin-top: 5px"
        >{{ n }}
        </van-radio>
      </van-radio-group>
    </div>

    <div style="padding: 6px 6px 12px 6px; border-bottom: 1px dashed rgb(128,128,128)">
      <p>您最满意的医生、护士是：</p>
      <div class="m-input">
        <input type="text" v-model="answer.zmydyshs">
      </div>
    </div>

    <div class="m-input" style="padding: 0 6px; margin-bottom: 20px">
      您对我院的建议和意见：
      <input type="text" v-model="answer.dwydjyhyj" style="width: 100%">
    </div>
    <van-button type="primary" block :disabled="disableSubmitButton" @click="submitAnswer">提交</van-button>
  </window-size>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {submitInpatientQuestionnaire} from '@/api/assessments'
import {showDialog, showToast} from "vant";
import {useRouter} from "vue-router";
import {receiveAssessmentGift} from "@/api/coupon";

const router = useRouter()

const routerValue = router.currentRoute.value
const routerParams = routerValue.params.visitId
const couponGift = routerValue.path.indexOf('inpatientSatisfiedByPush') > -1
    && routerParams.indexOf('AND') > -1

const answer = reactive({
  inpatientNo: null,
  times: null,
  patientId: null
})
const disableSubmitButton = ref(false)

// 默认选项
const mrXx = ['叫号服务', '等待时长', '服务态度', '沟通解释', '及时响应', '服装礼仪', '准确率']

const zykshlXx = ['技术水平', '隐私保护', '服务态度', '沟通解释', '病情巡视', '服装礼仪', '其他']

const zyksysXx = ['技术水平', '隐私保护', '服务态度', '沟通解释', '按时查房', '服装礼仪', '其他']

const yystXx = ['卫生情况', '口味', '菜品', '服务态度', '服装礼仪', '其他']

const ybkXx = ['专业能力', '等待时长', '服务态度', '沟通解释', '及时响应', '服装礼仪', '服务流程']

const xzwyyyXx = ['慕名而来', '就近选择', '朋友推荐', '网络查询', '服务水平', '环境设备', '医疗价格']

const hbhXx = ['会', '不会']

const hjwxXx = ['食堂卫生', '门诊大厅卫生', '诊间卫生', '病房卫生', '卫生间卫生', '电梯卫生', '楼道卫生', '座椅卫生', '公共区域']

const headQuestions = [
  {code: 'zykshl', label: '您对住院科室护理人员服务满意吗？'},
  {code: 'zyksys', label: '您对住院科室医生服务满意吗？'},
  {code: 'yyst', label: '您对医院食堂满意吗？', hasWjc: true},
  {code: 'yjk', label: '您对药剂科工作人员服务满意吗？', hasWjc: true},
  {code: 'fsk', label: '您对放射科工作人员服务满意吗？', hasWjc: true},
  {code: 'csyxk', label: '您对超声影像科工作人员服务满意吗？', hasWjc: true},
  {code: 'jyk', label: '您对检验科工作人员服务满意吗？', hasWjc: true},
  {code: 'sfck', label: '您对收费窗口工作人员服务满意吗？', hasWjc: true},
  {code: 'mzyh', label: '您对门诊医护人员服务满意吗？', hasWjc: true},
  {code: 'jzyh', label: '您对急诊医护人员服务满意吗？', hasWjc: true},
  {code: 'ybk', label: '您对医保科工作人员服务满意吗？', hasWjc: true},
  {code: 'yyhjws', label: '您对医院环境卫生满意吗?'}
]

const tailQuestions = [
  '您对住院科室护理人员哪些服务不满意？',
  '您对住院科室医生哪些服务不满意？',
  '您对医院食堂哪些地方不满意？',
  '您对药剂科工作人员哪些服务不满意？',
  '您对放射科工作人员哪些服务不满意？',
  '您对超声影像科工作人员哪些服务不满意？',
  '您对检验科工作人员哪些服务不满意？',
  '您对收费窗口工作人员哪些服务不满意？',
  '您对门诊医护人员哪些服务不满意？',
  '您对急诊医护人员哪些服务不满意？',
  '您对医保科工作人员哪些服务不满意？',
  '您对医院环境卫生哪些地方不满意？'
]

const submitAnswer = () => {
  if (!validAnswer()) {
    return
  }
  submitInpatientQuestionnaire(answer).then(() => {
    disableSubmitButton.value = true
    if (couponGift) {
      receiveAssessmentGift(routerParams).then((res) => {
        showDialog({
          title: '提示',
          message: res,
        }).then(() => {
          gotoResult()
        }).catch(() => {
          gotoResult()
        })
      }).catch(() => {
        gotoResult()
      })
    } else {
      gotoResult()
    }
  })
}

const gotoResult = () => {
  router.push({
    name: 'resultSuccess',
    params: {
      title: '提交成功',
      subtitle: '感谢您的评价，您的意见对我们非常重要。',
    },
  })
}

const keyList = [
  {key1: 'zykshl', key2: 'zykshlBmyyyList', key3: 'zykshlInput'},
  {key1: 'zyksys', key2: 'zyksysBmyyyList', key3: 'zyksysInput'},
  {key1: 'yyst', key2: 'yystBmyyyList', key3: 'yystInput'},
  {key1: 'yjk', key2: 'yjkBmyyyList', key3: 'yjkInput'},
  {key1: 'fsk', key2: 'yjkBmyyyList', key3: 'fskInput'},
  {key1: 'csyxk', key2: 'csyxkBmyyyList', key3: 'csyxkInput'},
  {key1: 'jyk', key2: 'jykBmyyyList', key3: 'jykInput'},
  {key1: 'sfck', key2: 'sfckBmyyyList', key3: 'sfckInput'},
  {key1: 'mzyh', key2: 'mzyhBmyyyList', key3: 'mzyhInput'},
  {key1: 'jzyh', key2: 'jzyhBmyyyList', key3: 'jzyhInput'},
  {key1: 'ybk', key2: 'ybkBmyyyList', key3: 'ybkInput'},
  {key1: 'yyhjws', key2: 'yyhjwsBmyyyList', key3: 'yyhjwsInput'},
]

const validAnswer = () => {
  for (let i = 0; i < keyList.length; i++) {
    let keyObj = keyList[i]
    if (answer[keyObj.key1] === '不满意'
        && (!answer[keyObj.key2] || answer[keyObj.key2].length === 0)
        && !answer[keyObj.key3]) {
      showToast({
        message: `请补充或者勾选【${i + 1}-2】中您不满意的原因。`,
        position: 'top',
        duration: 3000,
      })
      return false
    }
  }

  if ((!answer.xzwyyyList || answer.xzwyyyList.length === 0) && !answer.xzwyyyInput) {
    showToast({
      message: `请补充或者勾选【13-1】中的选项。`,
      position: 'top',
      duration: 3000,
    })
    return false
  }
  if (!answer.sfhxzzl) {
    showToast({
      message: `请勾选【14-1】中的选项。`,
      position: 'top',
      duration: 3000,
    })
    return false
  }
  if (!answer.ztpj) {
    showToast({
      message: `请勾选【15-1】中的选项。`,
      position: 'top',
      duration: 3000,
    })
    return false
  }
  return true
}

function getOptions(code) {
  if (code === 'zykshl') {
    return zykshlXx
  } else if (code === 'zyksys') {
    return zyksysXx
  } else if (code === 'yyst') {
    return yystXx;
  } else if (code === 'fsk') {
    return zyksysXx;
  } else if (code === 'ybk') {
    return ybkXx;
  } else if (code === 'yyhjws') {
    return hjwxXx;
  } else {
    return mrXx;
  }
}

onMounted(() => {
  let visitIdArr = routerParams.split('AND')
  if (visitIdArr.length < 3) {
    answer.inpatientNo = 'unknown'
    answer.times = 0
    answer.patientId = routerParams
  } else {
    answer.inpatientNo = visitIdArr[0]
    answer.times = visitIdArr[1]
    answer.patientId = visitIdArr[2]
  }
})
</script>

<style scoped>
.question-box {
  padding: 6px 0 12px 6px;
  border-bottom: 1px dashed rgb(128, 128, 128);
}
.m-input {
  margin-top: 6px;
}
.m-input > input {
  border: none;
  width: 80%;
  height: 26px;
  border-bottom: 1px solid rgb(128, 128, 128);
}
</style>