wkx-his-web/src/views/patients/screening/add.vue

<template>
    <div class="p-2">
        <el-card>
            <!-- 新增顶部操作栏 -->
            <el-row>
                <el-col :span="4">
                    <el-button type="primary" plain @click="close"
                        style="margin-right: 20px;margin-left: 30px;">返回</el-button>
                    <span style="font-size: 14px;  vertical-align: middle;">{{ screeningName }}</span>
                </el-col>
            </el-row>
        </el-card>

        <el-card>
            <template v-for="item,idx in form.otherInfo">
                <template v-if="item.questionChildType == 'singleChoice'">
                    <template v-if="item.arrangement == '2'">
                        <div style="margin-bottom: 20px;padding-top: 20px;"
                            :style="{'border-top':idx==0?'none':'1px dashed #e5e7eb'}" class="zebra-row">
                            <el-row>
                                <el-col :span="24">
                                    <span style="color: #f56c6c; margin-right: 4px;" v-show="item.required">*</span>
                                    <span style="font-weight: bold;">{{ item.title }}</span>
                                </el-col>
                            </el-row>
                            <el-row style="margin-bottom: 20px;">
                                <el-col :span="24">
                                    <div class="radio-card">
                                        <el-radio-group v-model="item.value" style="margin-top: 8px;">
                                            <template v-for="ctl,i in item.contentList">
                                                <el-radio :label="ctl.label" :value="i" :disabled="isView">
                                                    <span class="option-content">
                                                        <span v-if="ctl.img" class="option-img">
                                                            <miniImageUpload :limit="1" v-model="ctl.img"
                                                                :disabled="true" />
                                                        </span>
                                                        <span>{{ ctl.label }}</span>
                                                    </span>
                                                </el-radio>
                                            </template>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                    <template v-else>
                        <div style="margin-bottom: 10px; padding-top: 20px;"
                            :style="{'border-top':idx==0?'none':'1px dashed #e5e7eb'}" class="zebra-row">
                            <el-row>
                                <el-col :span="24">
                                    <span style="color: #f56c6c; margin-right: 4px;" v-show="item.required">*</span>
                                    <span style="font-weight: bold;">{{ item.title }}</span>
                                    <el-radio-group v-model="item.value" class="horizontal-radio-group"
                                        style="margin-top: 8px;">
                                        <template v-for="ctl,i in item.contentList">
                                            <el-radio :label="ctl.label" :value="i" :disabled="isView">
                                                <span class="option-content">
                                                        <span v-if="ctl.img" class="option-img">
                                                            <miniImageUpload :limit="1" v-model="ctl.img"
                                                                :disabled="true" />
                                                        </span>
                                                        <span>{{ ctl.label }}</span>
                                                    </span>
                                            </el-radio>
                                        </template>
                                    </el-radio-group>
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                </template>
                <template v-if="item.questionChildType == 'multipleChoice'">
                    <template v-if="item.arrangement == '2'">
                        <div style="margin-bottom: 10px; padding-top: 20px;"
                            :style="{'border-top':idx==0?'none':'1px dashed #e5e7eb'}" class="zebra-row">
                            <el-row>
                                <el-col :span="24">
                                    <span style="color: #f56c6c; margin-right: 4px;" v-show="item.required">*</span>
                                    <span style="font-weight: bold;">{{ item.title }}</span>
                                </el-col>
                            </el-row>
                            <el-row style="margin-bottom: 20px;">
                                <el-col :span="24">
                                    <div class="checkbox-vertical-card">
                                        <el-checkbox-group v-model="item.value" style="margin-top: 8px;">
                                            <template v-for="ctl,i in item.contentList">
                                                <el-checkbox :label="ctl.label" :value="i" :disabled="isView">
                                                    <span class="option-content">
                                                        <span v-if="ctl.img" class="option-img">
                                                            <miniImageUpload :limit="1" v-model="ctl.img"
                                                                :disabled="true" />
                                                        </span>
                                                        <span>{{ ctl.label }}</span>
                                                    </span>
                                                </el-checkbox>
                                            </template>
                                        </el-checkbox-group>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                    <template v-else>
                        <div style="margin-bottom: 10px;  padding-top: 20px;"
                            :style="{'border-top':idx==0?'none':'1px dashed #e5e7eb'}" class="zebra-row">
                            <el-row>
                                <el-col :span="24">
                                    <span style="color: #f56c6c; margin-right: 4px;" v-show="item.required">*</span>
                                    <span style="font-weight: bold;">{{ item.title }}</span>
                                    <el-checkbox-group v-model="item.value" class="horizontal-checkbox-group"
                                        style="margin-top: 8px;">
                                        <template v-for="ctl,i in item.contentList">
                                            <el-checkbox :label="ctl.label" :value="i" :disabled="isView">
                                                <span class="option-content">
                                                        <span v-if="ctl.img" class="option-img">
                                                            <miniImageUpload :limit="1" v-model="ctl.img"
                                                                :disabled="true" />
                                                        </span>
                                                        <span>{{ ctl.label }}</span>
                                                    </span>
                                            </el-checkbox>
                                        </template>
                                    </el-checkbox-group>
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                </template>

                <template v-if="item.questionChildType == 'scaleQuestions'">
                    <div style="margin-bottom: 10px;  padding-top: 20px;"
                        :style="{ 'border-top': idx == 0 ? 'none' : '1px dashed #e5e7eb' }" class="zebra-row">
                        <el-row>
                            <el-col :span="24">
                                <span style="color: #f56c6c; margin-right: 4px;" v-show="item.required">*</span>
                                <span style="font-weight: bold;">{{ item.title }}</span>
                                <div style="overflow-x: scroll;margin-top: 8px;margin-left: 30px;">
                                    <div class="custom-radio-grid">
                                        <div v-for="ctl,n in item.contentList" :key="n"
                                            @click="selectScaleQuestions(idx,n)"
                                            :class="['custom-radio-cell', {'is-selected':ctl.value!=null,'cell': item.contentList.length === n+1, 'is-last': n+1 > 1 }]">
                                            {{ n+1 }}
                                        </div>
                                    </div>

                                    <div class="custom-radio-grid">
                                        <div v-for="ctl, n in item.contentList" :key="ctl.nameEn" style="border: none;"
                                            :class="['custom-radio-cell']">
                                            {{ ctl.label }}
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </template>

                <template v-if="item.questionChildType == 'matrixScale'">
                    <div style="margin-bottom: 10px;  padding-top: 20px;"
                        :style="{ 'border-top': idx == 0 ? 'none' : '1px dashed #e5e7eb' }" class="zebra-row">
                        <el-row>
                            <el-col :span="24">
                                <span style="color: #f56c6c; margin-right: 4px;" v-show="item.required">*</span>
                                <span style="font-weight: bold;">{{ item.title }}</span>
                                <div style="border-bottom: 1px solid #e5e7eb;width: 98%;margin-left: 30px;">
                                    <el-row :gutter="10" class="mb8">
                                        <el-col :span="3" style="margin-top: 30px;">
                                        </el-col>
                                        <template v-for="clt in item.contentList">
                                            <template v-if="clt.optionFlag">
                                                <el-col :span="1" align="center"
                                                    style="margin-top: 30px;margin-left: 15px;">
                                                    {{ clt.optionContent }}
                                                </el-col>
                                            </template>
                                        </template>
                                    </el-row>

                                    <template v-for="clt, i1 in item.contentList">
                                        <el-row :gutter="10" class="mb8">
                                            <el-col :span="3" style="margin-top: 10px;">
                                                <template v-if="clt.labelFlag">
                                                    标题{{ i1 + 1 }}:{{ clt.label }}
                                                </template>
                                            </el-col>
                                            <template v-for="clt2, i2 in item.contentList">
                                                <el-col :span="1" align="center" style="margin-left: 15px;">
                                                    <template v-if="clt2.optionFlag && clt.labelFlag">
                                                        <el-radio-group v-model="clt.value" :disabled="isView">
                                                            <el-radio :value="(i1+1)*1000+i2" size="large" />
                                                        </el-radio-group>
                                                    </template>
                                                </el-col>
                                            </template>
                                        </el-row>
                                    </template>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </template>

            </template>
        </el-card>

        <el-card shadow="always" class="card-footer" v-if="!isView">
            <div>
                <el-button type="primary" size="large" @click="submitForm" :loading="buttonLoading"
                    v-hasPermi="['system:hospital:add']">
                    &nbsp;&nbsp;&nbsp;提交&nbsp;&nbsp;&nbsp;
                </el-button>
            </div>
        </el-card>
    </div>
</template>
  
  <script setup name="Screening" lang="ts">
  import { listScreening, getScreening, delScreening, addScreening, updateScreening } from '@/api/patients/screening';
  import { ScreeningVO, ScreeningQuery, ScreeningForm } from '@/api/patients/screening/types';
  import {  getScreeningAssessmentConfig } from '@/api/system/screeningAssessmentConfig';
  import {ScreeningAssessmentConfigForm} from '@/api/system/screeningAssessmentConfig/types';
  import { ref } from 'vue'
  let paramForm = ref<ScreeningForm>({});

  const { proxy } = getCurrentInstance() as ComponentInternalInstance; 
 
  const screeningName = ref(''); 
  const { patientInfo } = defineProps<{ patientInfo: any }>()
  const emit = defineEmits(['change'])
  let form=ref<ScreeningAssessmentConfigForm>({});   
  const buttonLoading = ref(false);
  let isView=ref(false);
  
  /** 查询营养筛查列表 */
const getList = async () => {
    let id = patientInfo.other;
    let reg=/^[0-9]*$/;
     
    if (!reg.test(id.toString())) {
        id = window.atob(id);
        isView.value = true;
        const res =await getScreening(id as string);
        const content =JSON.parse(res.data.content);
        screeningName.value = content.name;
        Object.assign(form.value, content);
    } else {
        isView.value = false;
        const res = await getScreeningAssessmentConfig(id as string);
        screeningName.value = res.data.name;
        Object.assign(form.value, res.data);
    }
}


const close = async () => {
    emit('change', 'nutritionScreening');
};
 
  
/** 提交按钮 */
const submitForm = async () => {
    for (let i = 0, len = form.value.otherInfo.length; i < len; i++) {
        let item = form.value.otherInfo[i];
        if (item.required && (item.value == null || item.value == undefined)) {
            proxy?.$modal.msgError("请确保必填项(第" + (i + 1) + "题)不为空");
            return;
        }
    }

    buttonLoading.value = true;    
    paramForm.value.content = JSON.stringify(form.value);
    if (paramForm.value.id) {
        await updateScreening(paramForm.value).finally(() => buttonLoading.value = false);
    } else {
        await addScreening(paramForm.value).finally(() => buttonLoading.value = false);
    }
    proxy?.$modal.msgSuccess("操作成功");
    close();
}
 

const selectScaleQuestions = async (idx:number, n:number) => {
    if(isView.value){
        return;
    }
    let other = form.value.otherInfo[idx];
    if (!other.value) {
        other.value = [];
    }

    let ctl = other.contentList[n];
    if (ctl.value!=null) {
        ctl.value = null;
        let newList=[];
        for (let i = 0, len = other.value.length; i < len; i++) {             
            if (other.value[i] != n) {                
                newList.push(other.value[i]);
            }
        }
        other.value=newList;
    } else {
        ctl.value = n;
        other.value.push(n);
    }
}

  
  onMounted(() => {
    paramForm.value.patientId=patientInfo.id;
    paramForm.value.patientNo=patientInfo.outpatientNo;
    paramForm.value.visitType=patientInfo.type;
    paramForm.value.configId=patientInfo.other;    
    getList();       
  });
  </script>
  
  <style scoped>
  .screening-type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .screening-type-btn {
    font-weight: bold;
    font-size: 16px;
    height: 48px;
    border-radius: 8px;
  }
  .radio-card {
    display: inline-block;
  }
  .radio-card .el-radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .radio-card .el-radio {
    margin-bottom: 3px;
    margin-left: 30px;
  }
  .radio-card el-radio:last-child {
    margin-bottom: 0;
  }
  .horizontal-radio-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 16px;
  }
  .horizontal-radio-group .el-radio {
    margin-right: 32px;
    margin-bottom: 0;
    margin-left: 14px;
  }
  .horizontal-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 30px;
  }
  .horizontal-checkbox-group .el-checkbox {
    margin-right: 32px;
    margin-bottom: 8px;
  }
  .checkbox-vertical-card .el-checkbox-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .checkbox-vertical-card .el-checkbox {
    margin-bottom: 10px;
    margin-left: 30px;
  }
  .checkbox-vertical-card .el-checkbox:last-child {
    margin-bottom: 0;
  }
 

  /* 斑马色：偶数题背景色 */
.zebra-row:nth-child(even) {
  background: #fafafa;
}

/* 斑马色：奇数题背景色 */
.zebra-row:nth-child(odd) {
  background: #fff;
}

.card-footer{  
    z-index: 99;
    bottom: 0px;
    left: calc(var(--left-menu-max-width) + var(--app-content-padding));
    right: 0px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;     
}

.custom-radio-grid {
  display: flex;
  /* border: 1px solid #bfc4cc; */
  border-radius: 4px;
  background: #fff;
  margin-bottom: 16px;
}

.custom-radio-cell {
  width: 100px;
  flex: none;
  text-align: center;
  border: 1px solid #bfc4cc;
  margin: 0 !important;
  height: 40px;
  line-height: 20px;
  font-size: 18px;
  font-weight: normal;
  background: #fff;
  border-radius: 0 !important;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
  word-break: break-all;
  white-space: normal;
  overflow-wrap: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.custom-radio-cell:last-child {
  border-right: none;
}

.custom-radio-cell .el-radio__input {
  display: none !important;
}

.custom-radio-cell .el-radio__label {
  padding: 0;
  width: 100%;
  display: block;
  text-align: center;
  cursor: pointer;
}
 

.custom-radio-cell .cell {
  border-right: 1px solid #bfc4cc;
}


.is-selected {
  background-color: #ccf0a4;   /* Element Plus 主色 */
  color: #fff;  
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(64,158,255,0.08);
  transition: background 0.2s, color 0.2s, border 0.2s;
}

.custom-radio-cell.is-last {
  border-right: 1px solid #bfc4cc;
  border-left: none;
}
  </style>