From 10dd6bb358d88bf4bdad0bd70ffe0ddb55d69fa3 Mon Sep 17 00:00:00 2001
From: shidongli <shidongli>
Date: Tue, 9 Apr 2024 16:20:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=B7=A5=E9=9A=8F=E8=AE=BF=E5=BE=85?=
 =?UTF-8?q?=E5=8A=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/followupsee.js          |  22 ++
 src/store/modules/user.js              |   6 +
 src/views/system/followup/index.vue    | 102 ++++++-
 src/views/system/followupsee/index.vue | 381 ++++++++++++++++++++++---
 4 files changed, 457 insertions(+), 54 deletions(-)
 create mode 100644 src/api/system/followupsee.js

diff --git a/src/api/system/followupsee.js b/src/api/system/followupsee.js
new file mode 100644
index 0000000..787cca8
--- /dev/null
+++ b/src/api/system/followupsee.js
@@ -0,0 +1,22 @@
+import request from '@/utils/request'
+export function selectFollowPatientInfo(id) {
+    return request({
+        url: '/manage/signroute/selectFollowPatientInfo/'+id,
+        method: 'get',
+    })
+}
+// 问卷量表
+export function question(id) {
+    return request({
+        url: '/system/question/'+id,
+        method: 'get',
+    })
+}
+//保存
+export function addPatientQuestionResult(data) {
+    return request({
+        url: '/manage/signroute/addPatientQuestionResult',
+        method: 'post',
+        data: data
+    })
+}
\ No newline at end of file
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 324c99f..ba84d65 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,5 +1,6 @@
 import { login, logout, getInfo } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
+import Cookies from 'js-cookie'
 
 const user = {
   state: {
@@ -51,6 +52,11 @@ const user = {
       return new Promise((resolve, reject) => {
         getInfo().then(res => {
           const user = res.user
+          console.log(user,'user')
+          Cookies.set("userId",user.userId)
+          Cookies.set("userName",user.userName)
+
+          // localStorage.setItem("userId",user.userId);
           const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
           localStorage.setItem('user', JSON.stringify(user))
           if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
diff --git a/src/views/system/followup/index.vue b/src/views/system/followup/index.vue
index f593c54..ecb538d 100644
--- a/src/views/system/followup/index.vue
+++ b/src/views/system/followup/index.vue
@@ -128,13 +128,21 @@
           v-model="queryParams.visitMethod"
           placeholder="请选择就诊类型"
           clearable
+          @change="change"
         >
           <el-option
+            v-for="item in visitoptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+          <!-- <el-option
             v-for="dict in dict.type.visit_type"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
-          />
+          /> -->
         </el-select>
       </el-form-item>
       <el-form-item label="就诊流水号" prop="visitSerialNumber">
@@ -148,7 +156,7 @@
 
       <el-form-item label="门诊/出院时间" prop="intentionalTimeStart">
         <el-date-picker
-        @change="mzchange"
+          @change="mzchange"
           v-model="mzTime"
           type="daterange"
           range-separator="至"
@@ -256,11 +264,12 @@
         align="center"
         prop="attendingPhysicianName"
       />
-      <el-table-column label="就诊类型" align="center" prop="visitMethod">
+      <el-table-column label="就诊类型" align="center" prop="suitRange">
         <template slot-scope="scope">
           <span
-            >{{ scope.row.visitMethod == "OUTPATIENT_SERVICE" ? "门诊" : "" }}
-            {{ scope.row.visitMethod == "BE_IN_HOSPITAL" ? "住院" : "" }}
+            >{{ scope.row.suitRange == "OUTPATIENT_SERVICE" ? "门诊" : "" }}
+            {{ scope.row.suitRange == "IN_THE_HOSPITAL" ? "在院" : "" }}
+            {{ scope.row.suitRange == "DISCHARGE" ? "出院" : "" }}
           </span>
         </template></el-table-column
       >
@@ -327,7 +336,7 @@
     />
   </div>
 </template>
-  
+
   <script>
 
 import { manualFollowUpList } from "@/api/system/followup"
@@ -412,6 +421,18 @@ export default {
       },
       // 表单参数
       form: {},
+      visitoptions: [
+        {
+          value: 'IN_THE_HOSPITAL',
+          label: '在院'
+        }, {
+          value: 'OUTPATIENT_SERVICE',
+          label: '门诊'
+        }, {
+          value: 'DISCHARGE',
+          label: '出院'
+        },
+      ],
       // 表单校验
       // rules: {
       //   patientId: [
@@ -425,6 +446,29 @@ export default {
     this.selectAgencyinfo();
   },
   methods: {
+    change(e) {
+      if (e == 'DISCHARGE') {
+        this.queryParams.clinicalStartTime = null
+        this.queryParams.clinicalEndTime = null
+
+      } else if (e == 'OUTPATIENT_SERVICE') {
+        this.queryParams.dischargeStartTime = null
+        this.queryParams.dischargeEndTime = null
+      }else{
+
+        this.queryParams.dischargeStartTime = null
+        this.queryParams.dischargeEndTime = null
+        this.queryParams.clinicalStartTime = null
+        this.queryParams.clinicalEndTime = null
+
+      }
+      console.log(e)
+      // DISCHARGE
+      // 出院
+      // OUTPATIENT
+      // 门诊
+
+    },
     //主治医生
     usergetListinfo() {
       usergetList({
@@ -571,23 +615,47 @@ export default {
         this.queryParams.followEndTime = null
       } else {
         this.queryParams.followStartTime = this.intentionalTime[0]
-      this.queryParams.followEndTime = this.intentionalTime[1]
+        this.queryParams.followEndTime = this.intentionalTime[1]
       }
     },
     // 门诊
-    mzchange(){
+    mzchange() {
       if (this.mzTime == null) {
         this.mzTime = [];
         this.queryParams.clinicalStartTime = null
         this.queryParams.clinicalEndTime = null
       } else {
-        this.queryParams.clinicalStartTime = this.mzTime[0]
-        this.queryParams.clinicalEndTime = this.mzTime[1]
+        console.log(this.queryParams, '-----')
+        if (!this.queryParams.visitMethod || this.queryParams.visitMethod=='IN_THE_HOSPITAL') {
+          this.queryParams.clinicalStartTime = this.mzTime[0]
+          this.queryParams.clinicalEndTime = this.mzTime[1]
+          this.queryParams.dischargeStartTime = this.queryParams.clinicalStartTime
+          this.queryParams.dischargeEndTime = this.queryParams.clinicalEndTime
+        } else if (this.queryParams.visitMethod == 'DISCHARGE') {
+          this.queryParams.dischargeStartTime = this.mzTime[0]
+          this.queryParams.dischargeEndTime = this.mzTime[1]
+
+
+          this.queryParams.clinicalStartTime = null
+          this.queryParams.clinicalEndTime = null
+
+        } else if (this.queryParams.visitMethod == 'OUTPATIENT_SERVICE') {
+          this.queryParams.dischargeStartTime = null
+          this.queryParams.dischargeEndTime = null
+          this.queryParams.clinicalStartTime = this.mzTime[0]
+          this.queryParams.clinicalEndTime = this.mzTime[1]
+
+
+
+
+
+        }
+
       }
 
     },
     // 入院
-    rychange(){
+    rychange() {
       if (this.ryTime == null) {
         this.ryTime = [];
         this.queryParams.admissionStartTime = null
@@ -606,7 +674,7 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
-      this.queryParams= {
+      this.queryParams = {
         pageNum: 1,
         pageSize: 10,
         followStartTime: null,
@@ -638,7 +706,7 @@ export default {
         departmentId: null,
         wardId: null,
       },
-      this.handleQuery();
+        this.handleQuery();
       this.intentionalTime = [];
       this.mzTime = [];
       this.ryTime = [];
@@ -662,9 +730,12 @@ export default {
         path: "/task/followupsee",
         query: {
           patientId: row.patientId,
-          taskContent: row.taskContent,
+          taskType: row.taskType,
+          templateId: row.templateId,
           cardNo: row.cardNo,
           patientName: row.patientName,
+          manageRouteName: row.manageRouteName,
+          manageRouteNodeName:row.routeNodeName,
           patientPhone: row.patientPhone,
           sex: row.sex,
           birthDate: row.birthDate,
@@ -673,6 +744,8 @@ export default {
           patientSource: row.patientSource,
           createTime: row.createTime,
           age: row.birthDate ? getAge(row.birthDate) : "",
+          manageRouteId: row.manageRouteId,
+          manageRouteNodeId: row.manageRouteNodeId,
         },
       });
 
@@ -735,4 +808,3 @@ export default {
   },
 };
   </script>
-  
\ No newline at end of file
diff --git a/src/views/system/followupsee/index.vue b/src/views/system/followupsee/index.vue
index 70cf6f3..55e66b9 100644
--- a/src/views/system/followupsee/index.vue
+++ b/src/views/system/followupsee/index.vue
@@ -24,8 +24,12 @@
           {{ list.age }}
         </div>
         <div class="source">
-            <div class="item" @click="submit"><el-button plain>保存</el-button></div>
-            <div class="item" @click="cencal"><el-button plain>取消</el-button></div>
+          <div class="item" @click="submit">
+            <el-button plain>保存</el-button>
+          </div>
+          <div class="item" @click="cencal">
+            <el-button plain>取消</el-button>
+          </div>
         </div>
       </div>
       <div class="information">
@@ -42,34 +46,167 @@
       </div>
     </div>
     <div class="bottomheader">
-
       <div style="display: flex">
         <!-- 问卷模板 -->
         <div
           class="right"
-          v-if="$route.query.taskContent == 'QUESTIONNAIRE_SCALE'"
+          v-if="$route.query.taskType == 'QUESTIONNAIRE_SCALE'"
         >
+          <div style="float: right; margin-top: 20px">
+            <el-form
+              :inline="true"
+              class="demo-form-inline"
+              :model="questiondata"
+              :rules="rules"
+              ref="questiondata"
+            >
+              <el-form-item label="任务处理信息" prop="routeHandleRemark">
+                <el-input
+                  type="textarea"
+                  placeholder="请输入任务处理信息"
+                  v-model="questiondata.routeHandleRemark"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
           <div class="sport">问卷模板: Barthel指数评定问卷</div>
           <div class="words">
             您好!本问卷用于评估日常生活能力，请根据自身日常实际表现选择合适的选项。
           </div>
-          <div class="words">
-            1.进食【单选题】
-            <el-radio-group v-model="radio" class="custom-radio-group">
-              <el-radio label="1" class="custom">备选项</el-radio>
-              <el-radio label="2" class="custom">备选项</el-radio>
-              <el-radio label="3" class="custom">备选项</el-radio>
+          <div
+            class="words"
+            v-for="(item, index) in questiondata.questionSubjectList"
+            :key="index"
+          >
+            {{ index + 1 }}.{{ item.questionName }}
+            <span v-if="item.questionType == 'MULTIPLE_CHOICE'"
+              >（单选题）</span
+            >
+            <span v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS'"
+              >（多选题）</span
+            >
+            <span v-if="item.questionType == 'SCORING_QUESTIONS'"
+              >（打分题）</span
+            >
+            <span v-if="item.questionType == 'COMBINATION_RADIO_SUBJECT'"
+              >（组合单选题）</span
+            >
+            <span v-if="item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'"
+              >（组合多选题）</span
+            >
+            <span v-if="item.questionType == 'COMBINATION_BLANKS_SUBJECT'"
+              >（组合填空题）</span
+            >
+            <span v-if="item.questionType == 'FILL_IN_THE_BLANKS'"
+              >（填空题）</span
+            >
+            <span v-if="item.questionType == 'COMBINATION_SCORING_SUBJECT'"
+              >（组合打分题）</span
+            >
+            <span v-if="item.questionType == 'DATE_BLANKS_SUBJECT'"
+              >（日期填空题）</span
+            >
+            <span v-if="item.questionType == 'TIME_BLANKS_SUBJECT'"
+              >（时间填空题）</span
+            >
+            <el-radio-group
+              v-if="
+                item.questionType == 'MULTIPLE_CHOICE' ||
+                item.questionType == 'COMBINATION_RADIO_SUBJECT' ||
+                item.questionType == 'SCORING_QUESTIONS' ||
+                item.questionType == 'COMBINATION_SCORING_SUBJECT'
+              "
+              v-model="questiondata[index]"
+              class="custom-radio-group"
+              @change="radioGroupChange($event, item)"
+            >
+              <el-radio
+                class="custom"
+                v-for="(aitem, aindex) in item.questionSubjectOptionList"
+                :key="aindex"
+                :label="aitem.id"
+                @change="radioChange($event, aitem, index)"
+                >{{ aitem.optionName }}</el-radio
+              >
             </el-radio-group>
+            <!-- 多选、组合多选 -->
+            <el-checkbox-group
+              v-model="checkeddata"
+              @change="radioGroupChange($event, item, 'checkbox')"
+              v-if="
+                item.questionType == 'MULTIPLE_CHOICE_QUESTIONS' ||
+                item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'
+              "
+            >
+              <el-checkbox
+                v-for="(aitem, aindex) in item.questionSubjectOptionList"
+                :key="aindex"
+                :label="aitem.id"
+                @change="radioChangecheck($event, aitem, index, aindex)"
+                >{{ aitem.optionName }}</el-checkbox
+              >
+            </el-checkbox-group>
+            <!-- 填空题、组合填空 -->
+            <div
+              v-if="
+                item.questionType == 'FILL_IN_THE_BLANKS' ||
+                item.questionType == 'COMBINATION_BLANKS_SUBJECT'
+              "
+              class="tk"
+            >
+              <el-input
+                v-model="item.optionAnswer"
+                placeholder="请输入答案"
+                type="textarea"
+              />
+              <!-- <el-input></el-input> -->
+            </div>
+            <!-- 日期填空题、 -->
+            <div
+              v-if="item.questionType == 'DATE_BLANKS_SUBJECT'"
+              style="margin: 20px 0 10px 30px"
+            >
+              <el-date-picker
+              @change="timepicker($event,index)"
+              clearable
+                v-model="item.optionAnswer"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </div>
+            <!-- 时间填空题 -->
+            <div
+              style="margin: 20px 0 10px 30px"
+              v-if="item.questionType == 'TIME_BLANKS_SUBJECT'"
+            >
+              <el-time-select
+              @change="timepickerselect($event,index)"
+              clearable
+                v-model="item.optionAnswer"
+                :picker-options="{
+                  start: '08:30',
+                  step: '00:30',
+                  end: '23:30',
+                }"
+                placeholder="选择时间"
+              >
+              </el-time-select>
+            </div>
           </div>
         </div>
         <!-- 电话外呼 -->
-        <div v-if="$route.query.taskContent == 'PHONE_OUTBOUND'">
-            <div class="sport">电话外呼</div>
-            <div class="nexttime">话术名称</div>
-          </div>
+        <div v-if="$route.query.taskType == 'PHONE_OUTBOUND'">
+          <div class="sport">电话外呼</div>
+          <div class="nexttime">话术名称</div>
+        </div>
 
         <!-- 人工随访 -->
-        <div class="right" v-if="$route.query.taskContent == 'ARTIFICIAL_FOLLOW_UP'">
+        <div
+          class="right"
+          v-if="$route.query.taskType == 'ARTIFICIAL_FOLLOW_UP'"
+        >
           <div class="sport">人工随访模板: 神经内科人工随访</div>
           <div class="words">**您好!</div>
           <div class="words">
@@ -78,13 +215,20 @@
           <div class="words">
             1.进食【单选题】
             <el-radio-group v-model="radio" class="custom-radio-group">
-              <el-radio label="1" class="custom">备选项</el-radio>
+              <el-radio
+                v-for="item in options"
+                :key="item.id"
+                :label="item.value"
+              >
+                {{ item.label }}
+              </el-radio>
+              <!-- <el-radio label="1" class="custom">备选项</el-radio>
               <el-radio label="2" class="custom">备选项</el-radio>
-              <el-radio label="3" class="custom">备选项</el-radio>
+              <el-radio label="3" class="custom">备选项</el-radio> -->
             </el-radio-group>
           </div>
         </div>
-        <!-- <div v-if="$route.query.taskContent == 'ARTIFICIAL_FOLLOW_UP'">
+        <!-- <div v-if="$route.query.taskType == 'ARTIFICIAL_FOLLOW_UP'">
             <div class="sport">人工随访模板:</div>
             <div class="sport">人工随访模板内容:</div>
           </div> -->
@@ -92,42 +236,183 @@
     </div>
   </div>
 </template>
-      
+
     <script>
-import { selectVisitRecord } from "@/api/system/taskExecuteRecord";
+import { selectFollowPatientInfo, question, addPatientQuestionResult } from "@/api/system/followupsee";
+import Cookies from 'js-cookie'
+
 export default {
   name: "patientdetails",
   data() {
     return {
-      radio: "1",
-      activeName: "first",
+      obj: {},
+      checkList: [],
+      checked: false,
+      rules: {
+        routeHandleRemark: [
+          { required: true, message: '请输入任务处理信息', trigger: 'change' }
+        ],
+      },
+
+      options: [
+        { id: 1, value: 'A', label: '选项A' },
+        { id: 2, value: 'B', label: '选项B', show: 'true' },
+        { id: 3, value: 'C', label: '选项C' }
+      ],
+      radio: "B",
       id: "",
       list: [],
+      type: '',
+      checkeddata: [],
+      questiondata: {
+        totalScore: 0,  //总分
+        routeHandlePerson: null,
+        routeHandleId: null,
+
+      },
+
     };
+
   },
   created() {
-    console.log(this.$route.query);
-    this.id = this.$route.query.patientId;
+    this.id = this.$route.query.manageRouteId;
     this.info();
+    this.questioninfo();
   },
   methods: {
+    // 日期填空题
+    timepicker(e,index){
+      this.questiondata.questionSubjectList[index].optionAnswer=e
+
+    },
+    // 时间填空题 
+    timepickerselect(e,index){
+      console.log(e)
+      this.questiondata.questionSubjectList[index].optionAnswer=e
+    },
+
+    radioGroupChange(e, item) {
+    },
+    // 选中某个单选框时，由radio时触发
+    radioChange(e, item, index) {
+      console.log(e, item, index, '选中某个单选框时')
+      this.questiondata.questionSubjectList[index].questionSubjectOptionList.forEach(el => {
+        if (el.id == item.id) {
+          el.optionChooseSign = '0'
+        }
+        else {
+          el.optionChooseSign = '1'
+        }
+      })
+    },
+    // 复选框
+    radioChangecheck(e, item, index, aindex) {
+      console.log(e, item, index, '选中某个复选框时')
+      if (e == true) {
+  
+
+        this.questiondata.questionSubjectList[index].questionSubjectOptionList[aindex].optionChooseSign = '0'
+      } else {
+        this.questiondata.questionSubjectList[index].questionSubjectOptionList[aindex].optionChooseSign = '1'
+
+
+      }
+      console.log(this.questiondata, '11111111复选框')
+    },
+
     info() {
-      selectVisitRecord(this.id).then((res) => {
-        console.log(res);
+      selectFollowPatientInfo(this.id).then((res) => {
+
         this.list = res.data;
+
       });
+
+    },
+    questioninfo() {
+      question(this.$route.query.templateId).then((res) => {
+        this.questiondata = res.data;
+        this.questiondata.questionInfoId = res.data.id;
+        this.questiondata.routeHandlePerson = Cookies.get('userName')
+        this.questiondata.routeHandleId = Cookies.get('userId')
+        this.questiondata.patientId = this.$route.query.patientId
+        this.questiondata.manageRouteId = this.$route.query.manageRouteId
+        this.questiondata.manageRouteNodeId = this.$route.query.manageRouteNodeId
+        this.questiondata.patientName = this.$route.query.patientName
+        this.questiondata.manageRouteName = this.$route.query.manageRouteName
+        this.questiondata.manageRouteNodeName = this.$route.query.manageRouteNodeName
+        this.questiondata.totalScore = 0
+        this.questiondata.questionSubjectList.forEach(e => {
+          e.questionSubjectOptionList.forEach(el => {
+            if (e.questionType == 'MULTIPLE_CHOICE_QUESTIONS' || e.questionType == 'COMBINATION_MULTIPLE_SUBJECT') {
+              el.optionChooseSign = '1'
+
+
+            }
+          })
+        })
+      });
+
     },
     // 保存
-    submit(){},
-    // 取消
-    cencal(){
 
-        this.$router.push({
-          path: "/task/followup",
+    /** 提交按钮 */
+    submit() {
+      var score = 0
+      // 单选、多选、打分分值
+      this.questiondata.questionSubjectList.forEach(e => {
+        if (e.questionSubjectOptionList?.length > 0) {
+          e.questionSubjectOptionList.forEach(el => {
+            if (e.questionType == 'MULTIPLE_CHOICE' || e.questionType == 'MULTIPLE_CHOICE_QUESTIONS' || e.questionType == 'SCORING_QUESTIONS') {
+              if(el.optionChooseSign=='0'){
+                score += el.optionScore
+              }
+            }
+          })
+          console.log(score,'score')
+          this.questiondata.totalScore=score
 
-        });
+        }
+
+      })
+      console.log(this.questiondata, 'questiondata')
+      // 对象.新名字=对象.原数组
+      this.questiondata.subjectResultDTOList = this.questiondata.questionSubjectList
+      this.obj = JSON.parse(JSON.stringify(this.questiondata))
+      delete this.obj.questionSubjectList;
+      this.obj.subjectResultDTOList.forEach(e => {
+        e.optionResultList = e.questionSubjectOptionList
+        // console.log(e.optionResultList, 'e.optionResultList')
+        if (e.optionResultList.optionSubmitAnswer) {
+          e.optionResultList.optionSubmitAnswer = e.optionResultList.optionSubmitAnswer
+        }
+        this.$delete(this.obj, '0', '')
+        //  this.obj.splice(index, 1)
+
+        delete e.questionSubjectOptionList;
+
+      });
+      console.log(this.obj, 'obj')
+      // console.log(this.questiondata, 'questiondata')
+      this.$refs["questiondata"].validate(valid => {
+        if (valid) {
+          addPatientQuestionResult(this.obj).then(response => {
+            this.$modal.msgSuccess("新增成功");
+            this.open = false;
+            this.getList();
+          });
+
+        }
+      });
     },
-    
+    // 取消
+    cencal() {
+
+      this.$router.push({
+        path: "/task/followup",
+
+      });
+    },
+
     handleClick(tab, event) {
       console.log(tab, event);
     },
@@ -135,6 +420,24 @@ export default {
 };
   </script>
     <style lang="scss" scoped>
+.tk {
+  ::v-deep .el-textarea__inner {
+    margin: 20px 0 10px 30px;
+  }
+}
+
+::v-deep .el-radio {
+  padding: 10px;
+}
+::v-deep .el-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0px 10px 24px;
+}
+::v-deep .el-checkbox {
+  padding: 10px 0 10px 0px;
+  // padding: 10px;
+}
 .custom-radio-group {
   display: flex;
   flex-direction: column;
@@ -176,7 +479,7 @@ export default {
   }
 }
 .right {
-  width: 70%;
+  width: 100%;
   height: 500px;
   // background: yellow;
 }
@@ -193,6 +496,7 @@ export default {
   }
 
   .bottomheader {
+    overflow: auto;
     width: 99%;
     background-color: #fff;
     margin: 10px auto;
@@ -295,10 +599,10 @@ export default {
         display: flex;
         position: relative;
         right: 59px;
-    position: absolute;
-    .item{
-        margin-left: 20px;
-    }
+        position: absolute;
+        .item {
+          margin-left: 20px;
+        }
       }
 
       .name {
@@ -323,4 +627,3 @@ export default {
   }
 }
 </style>
-      
\ No newline at end of file