记录

(el-dialog)-疾病诊断对话框

  • 2022-08-30
  • 作者 我爱小小蝶
  • ~4.58K 字
  1. 1. vue組件:
    1. 1.1. 1、点击按钮弹出对话框部分
    2. 1.2. 2、 患者诊断对话框:
      1. 1.2.1. 2.1 运行截图：
    3. 1.3. 2、实现
  2. 2. 总结：
  3. 3. 效果图：

vue組件:

1、点击按钮弹出对话框部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<el-descriptions-item label="诊断" label-align="center">
       <el-table
         :data="state.medical_record.disease"
         style="width: 100%"
         size="large"
         @selection-change="delDiseaseSelection"
         ref="selectDiseaseTable" >

         <el-table-column width="180">
           <template #header>
             <el-button type="primary" text @click="dialogTableVisible = true"
               >增加</el-button
             >
             <el-button type="danger" text @click="delDisease(item)"
               >删除</el-button
             >
           </template>
         </el-table-column>
           
       </el-table>
     </el-descriptions-item>

2、 患者诊断对话框:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- 对话框 -->
   <el-dialog v-model="dialogTableVisible" title="添加疾病诊断">
       
     <div>
       <el-tag style="width: 20%; height: 30px">疾病名称:</el-tag
       ><el-input
         style="width: 80%"
         v-model="state.disease.disease_name"
         placeholder="请输入疾病名称"
       ></el-input>
     </div>
     <div>
       <el-tag style="width: 20%; height: 30px">疾病助记码:</el-tag
       ><el-input
         style="width: 80%"
         size="default"
         v-model="state.disease.disease_code"
         placeholder="请输入疾病助记码"
       ></el-input>
     </div>
     <div>
       <el-tag style="width: 20%; height: 30px">疾病ICD:</el-tag
       ><el-input
         style="width: 80%"
         size="default"
         v-model="state.disease.diseaseICD"
         placeholder="请输入疾病国际ICD编码"
       ></el-input>
     </div>
     <div style="float: right">
       <el-button @click="searchDisease">搜索</el-button>
     </div>

     <!-- 疾病查询表格对话框 -->
     <el-table
       :data="state.search_disease"
       @selection-change="diseaseSelectionChange"
     >
       <el-table-column type="selection" width="55"></el-table-column>
       <el-table-column
         property="disease_name"
         label="疾病名称"
         width="150"
       ></el-table-column>
       <el-table-column
         property="disease_code"
         label="疾病助记码"
         width="200"
       ></el-table-column>
       <el-table-column
         property="diseaseICD"
         label="疾病ICD"
       ></el-table-column>
     </el-table>

     <div style="margin-top: 10px">
       <el-button type="primary" @click="addSelectionDisease">添加</el-button>
       <el-button type="info" @click="dialogTableVisible = false"
         >关闭</el-button
       >
     </div>
   </el-dialog>

2.1 运行截图：

需要注意的是 诊断 部分， 里面嵌套了一个表格，并且里面使用的template模板是要使用

1
<template #header>

才可以成功运行。（依我理解是用做表格头部所以用 head - -。）

2、实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//选择疾病
const diseaseSelectionChange = (selVal) => {
  state.temp_disease = selVal;
};

//选择删除疾病
const delDiseaseSelection = (selVal) => {
  state.temp_disease = selVal;
};
//删除疾病
const delDisease = (item) => {
  for (let i = 0; i < state.temp_disease.length; i++) {
    for (let j = 0; j < state.medical_record.disease.length; j++) {
      if (
        state.temp_disease[i].disease_name ===
        state.medical_record.disease[j].disease_name
      ) {
        state.medical_record.disease.splice(j, 1);
        j--;
      }
    }
  }
};

//将选择疾病加到病历中
const addSelectionDisease = () => {
  if (state.temp_disease != null && state.temp_disease.length > 0) {
    for (let i = 0; i < state.temp_disease.length; i++) {
      state.medical_record.disease.push(state.temp_disease[i]);
    }
  }
};

总结：

​ 表格 使用事件 @selection-change=”diseaseSelectionChange” 在 js里写

1
2
3
4
//选择疾病
const diseaseSelectionChange = (selVal) => {
  state.temp_disease = selVal;
};

可以获取当前数据，实现添加或者删除，神奇的是不用传参

效果图：