aiwen/src/components/stu-doc-item/index.vue

<script setup>
import { ref, reactive, defineProps,defineEmits ,toRef } from "vue";
import { Plus, Calendar, Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";


const optionRadio = ref(props.docInfo.dxxd_wxdj);

const props = defineProps(['docInfo', 'd'])

const emit = defineEmits(['func']);

const checkedIn = ref(false);
const chekboxShow = (val) => {
  let objA = {
      mark: val,
      params:props.docInfo.dxxd_id,
    }
    emit('editChooseArr', objA)
}

</script>
<template>
  <div class="singleAll">
    <div class="withAllShow">
      <div class="withAllShow_left">
        <el-checkbox v-model="checkedIn" @change="chekboxShow"></el-checkbox>
      </div>
      <div class="singleItem">
        <div class="everyRow flexEveryRow">
          <div class="mainT">咨询记录</div>
          <div class="dataShow">日期：{{ props.docInfo.dxxd_date }}</div>
        </div>
        <div class="everyRow moreDetail">
          <div class="vistorFirstShow">来访者姓名</div>
          <div class="vistorSecondFill">{{ props.docInfo.dxxd_lfzxm }}</div>
          <div class="vistorFirstShow">学校</div>
          <div class="vistorSecondFill" style="width: 25%">{{ props.docInfo.dxxd_school_name }}</div>
          <div class="vistorFirstShow">班级</div>
          <div class="vistorSecondFill" style="width: 15%; border-right: 0">{{ props.docInfo.dxxd_class_name }}</div>
        </div>
        <div class="everyRow moreDetail">
          <div class="vistorFirstShow">接访老师</div>
          <div class="vistorSecondFill">{{ props.docInfo.dxxd_jfls }}</div>
          <div class="vistorFirstShow">住址（选填）</div>
          <div class="vistorSecondFill" style="width: 25%"> {{ props.docInfo.dxxd_address }} </div>
          <div class="vistorFirstShow">电话（选填）</div>
          <div class="vistorSecondFill" style="width: 15%; border-right: 0">{{ props.docInfo.dxxd_phone }}</div>
        </div>
        <div class="everyRow textAreaCont">
          <P class="MainP">咨询缘由：</P>
          <div class="detailShow">{{ props.docInfo.dxxd_zxyy }}</div>
        </div>
        <div class="everyRow textAreaCont">
          <P class="MainP">来访者自述：</P>
          <div class="detailShow">{{ props.docInfo.dxxd_lfzzs }}</div>
        </div>
        <div class="everyRow textAreaCont">
          <P class="MainP">初步分析：</P>
          <div class="detailShow">{{ props.docInfo.dxxd_cbfx }}</div>
        </div>
        <div class="everyRow textAreaCont">
          <P class="MainP">危险等级（单选）：</P>
          <div class="detailShow">
            <el-radio-group v-model="optionRadio" class="ml-4" :disabled="d">
              <el-radio label="1" size="small">一般</el-radio>
              <el-radio label="2" size="small">严重</el-radio>
              <el-radio label="3" size="small">重大</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="everyRow textAreaCont">
          <P class="MainP">处理方式：</P>
          <div class="detailShow">{{ props.docInfo.dxxd_clfs }}</div>
        </div>
      </div>
    </div>
    <div class="ZXTime">咨询时长：{{ props.docInfo.xxd_zxsc }}</div>
  </div>
</template>

<style scoped>
.withAllShow{
  display: flex;
}
.withAllShow_left {
  width: 2%;
  margin-right: 1%;
}
.singleItem {
  width: 97%;
  border: 1px solid #969696;
}

.everyRow {
  border: 1px solid #dbdbdb;
}

.flexEveryRow {
  display: flex;
  flex-direction: row;
}

.mainT {
  width: 65%;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  font-family: PingFangSC-Regular;
  text-align: left;
  color: #000000;
  box-sizing: border-box;
  padding: 0 0 0 10%;
  background: url("../assets/images/cardIcon.png") no-repeat 10% center;
  background-size: 19px 18px;
}

.dataShow {
  width: 35%;
  height: 36px;
  line-height: 36px;
  font-size: 12px;
  font-family: PingFangSC-Regular;
  text-align: left;
  color: #898989;
}

.moreDetail {
  display: flex;
  flex-direction: row;
  height: 32px;
  line-height: 32px;
}

.vistorFirstShow {
  width: 15%;
  font-size: 10px;
  font-family: PingFangSC-Regular;
  text-align: left;
  color: #000000;
  border-right: 1px solid #dbdbdb;
  box-sizing: border-box;
  padding: 0 0 0 5px;
}

.vistorSecondFill {
  font-size:10px;
  width: 15%;
  border-right: 1px solid #dbdbdb;
  box-sizing: border-box;
  padding: 0 0 0 2px;
}

.textAreaCont {
  height: 69px;
  box-sizing: border-box;
  padding-left: 3px;
  display: flex;
  flex-direction: column;
}

.MainP {
  height: 15px;
  font-size: 10px;
  font-family: PingFangSC-Regular;
  text-align: left;
  color: #000000;
}

.detailShow {
  font-size: 14px;
  color: #969696;
}

.ZXTime {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-family: PingFangSC-Regular;
  text-align: left;
  color: #007dff;
  margin-left:3%;
}
</style>