SAMPLE

src/components/common/ItemTypeTree.vue

@@ -1,13 +1,15 @@
 <template>
   <div>
+    <!--
     <div style="margin:2px 2px 2px 2px;">
       <el-input  placeholder="输入关键字进行过滤" v-model="filterText" size="small" />
     </div>
-    <div :style="'overflow: scroll;height:' +(window.pageHeight < 600 ? 410 : window.pageHeight - 190) + 'px;'">
+    -->
+    <div :style="'overflow: scroll;height:' +(window.pageHeight < 600 ? 450 : window.pageHeight - 150) + 'px;'">
       <el-tree :data="dict.itemTypeTree" :props="customerOrg.treeprops" 
         node-key="id" :filter-node-method="filterNode"
         :default-expanded-keys="customerOrg.defaultExpandedKeys" 
-        @node-click="treeclick" highlight-current ref="customerOrgTree"/>
+        @node-click="treeclick" highlight-current ref="elTree"/>
     </div>
   </div>
 </template>
@@ -19,7 +21,7 @@ import { getTreePids} from "../../utlis/tree";
 
 export default {
   components: {},
-  props:['refreshItemTypeId'],
+  props:['refreshItemTypeId','itemTypeId'],
   data() {
     return {
       filterText:''
@@ -68,11 +70,27 @@ export default {
   },
 
   watch: {
+    "filterText"(newVal,oldVal){
+      this.$refs['elTree'].filter(newVal);
+    },
 
+    "itemTypeId":{
+      immediate: true, // 立即执行
+      deep: true, // 深度监听复杂类型内变化
+      handler(newVal,oldVal){
+        console.log('watch:itemTypeId:',newVal,oldVal)
         
-    "filterText"(newVal,oldVal){
-      this.$refs['customerOrgTree'].filter(newVal);
-    }
+        
+        if(newVal && newVal != oldVal){
+          //this.$refs['elTree'].setCurrentKey(newVal); 
+          this.customerOrg.defaultExpandedKeys = []
+          this.customerOrg.defaultExpandedKeys.push(newVal)
+          this.$nextTick(() => {
+            this.$refs['elTree'].setCurrentKey(newVal);
+          })
+        }
+      }
+    },
   },
  
 };

src/views/diagnosis/diagnosis.vue

@@ -7,7 +7,7 @@
       <div style="display: flex;">
         <!-- 类别树组件 -->
         <div :style="'border: 1px solid;width:200px; height:' +(window.pageHeight < 600 ? 450 : window.pageHeight - 150) +'px;'">
-          <ItemTypeTree :refreshItemTypeId="refreshItemTypeId"/>
+          <ItemTypeTree :refreshItemTypeId="refreshItemTypeId" :itemTypeId="query.itemTypeId"/>
         </div>
         <!-- 诊断与建议 -->
         <div style="display: block;">          
@@ -16,14 +16,32 @@
             <div :style="'width:' + (window.pageWidth - 200 - 110 - 50) + 'px;'">
               <div style="margin-left: 5px;display: flex; flex-wrap: wrap;">
                 <div>
+                  <!--
                   <el-checkbox v-model="query.itemTypeFlag">项目类别作为查询条件</el-checkbox>                  
                   <el-input placeholder="查询关键字" v-model="query.keyWords" size="small" clearable style="width: 200px" />
+                    
+                    
+                  -->
+                  <el-select v-model="diagnosis" placeholder="快速查找" size="small" 
+                    filterable   :filter-method="filterMethod" value-key="id"
+                    clearable @clear="quickTableData = deepCopy(tableData)" 
+                    @change="quickDiagnosis" default-first-option ref="elSelectKeyWords"
+                    style="width:200px;text-align: left;padding-right: 15px;">
+                    <!-- 
+                    <el-option key='1' value="" label="1" />
+                    <el-option key='2' value="{id:'2',displayName:'n2'}" label="2" />
+                     -->
+                    <!--  -->
+                    <el-option v-for="item in quickTableData" :key="item.id" :value="item" :label="item.displayName" />
+                    
+                  </el-select>
                 </div>
               </div>
               <div>
                 <el-table :data="tableData" border id="elTableDiagnosis" row-key="id"
                   :height="window.pageHeight < 600 ? 200 : Math.floor((window.pageHeight - 200) / 2)"
                   highlight-current-row @row-click="rowClick" size="small"  ref="elTable">
+                  <el-table-column type="index" label="序号" width="40" align="center"/>
                   <el-table-column
                     v-for="(item, index) in headerCols" 
                     :key="`col_${index}`"          
@@ -40,7 +58,10 @@
                         {{ scope.row[dropCol[index].prop] == 'Y' ? '是':'否' }}
                       </div>
                       <div v-else-if="dropCol[index].prop == 'itemTypeId'" >
-                        {{ dddw(dict.itemTypeTree, "id", scope.row[dropCol[index].prop], "displayName") }}
+                        <el-cascader :options="dict.itemTypeTree" v-model="scope.row[dropCol[index].prop]" 
+                          :props="{ checkStrictly: true, expandTrigger: 'hover', ...customerOrg.treeprops, }" :show-all-levels="false"
+                          disabled size="small">
+                        </el-cascader>                        
                       </div>
                       <div v-else-if="dropCol[index].prop == 'diagnosisLevelId'" >
                         {{ dddw(dict.diagnosisLevel, "id", scope.row[dropCol[index].prop], "displayName") }}
@@ -57,13 +78,21 @@
                       </div>
                     </template>
                   </el-table-column>
+                  <el-table-column label="排序" width="40" align="center">
+                    <template>
+                      <el-tag class="move" style="cursor: move;" draggable>
+                        <i class="el-icon-d-caret" style="font-size: 14px; color: rgb(113, 113, 113)" />
+                      </el-tag>
+                    </template>
+                  </el-table-column>
                 </el-table>
               </div>
             </div>
             <!--按钮-->
             <div style="margin-left: 10px;">
+              <!---->
               <div>
-                <el-button class="btnClass" @click="btnQuery">查询</el-button>
+                <el-button class="btnClass" @click="btnQuery">刷新</el-button>
               </div>
               <div>
                 <el-button type="primary" class="btnClass" @click="btnAdd">新增</el-button>
@@ -99,14 +128,14 @@
         <el-row>
           <el-col :span="8">
             <el-form-item label="名称" prop="displayName">
-              <el-input v-model="form.displayName" size="small"/>
+              <el-input v-model="form.displayName" size="small" @input="inputDisplayName" />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="项目类别" prop="itemTypeId">
               <el-cascader :options="dict.itemTypeTree" v-model="form.itemTypeId" 
                 :props="{ checkStrictly: true, expandTrigger: 'hover', ...customerOrg.treeprops, }" :show-all-levels="false"
-                disabled size="small">
+                size="small">
               </el-cascader>
             </el-form-item>
           </el-col>
@@ -189,7 +218,9 @@ export default {
         itemTypeId:'',
         keyWords:'',        
       },
+      diagnosis: {}, //null, //{id:'',displayName:''}
       tableData:[], //诊断列表
+      quickTableData:[], //快速查找诊断
       formInit:{},
       form:{
         id:'',
@@ -198,7 +229,7 @@ export default {
         displayName:'',
         suggestionName:'',
         forSexId:'A',
-        isSummaryTemplate:'Y',
+        isSummaryTemplate:'N',
         diagnosisLevelId:0,
         suggestions:[],
       },
@@ -213,7 +244,7 @@ export default {
 
       //拖动列（预留）
       dropCol: [
-        { label: "序号",prop: "sn",minWidth: 40,align:"center"},
+        //{ label: "序号",prop: "sn",minWidth: 40,align:"center"},
         { label: "项目类别",prop: "itemTypeId",minWidth: 120,align:"center"},
         { label: "诊断级别",prop: "diagnosisLevelId",minWidth: 60,align:"center"},
         { label: "诊断名称",prop: "displayName",minWidth: 100,align:"center"},
@@ -236,6 +267,7 @@ export default {
   //挂载完成
   mounted() { 
     this.rowDrop('elTableDiagnosis') 
+    this.btnQuery()
   },
 
   computed: {
@@ -282,18 +314,58 @@ export default {
 
     btnQuery(){
       let body = {}
-      if(this.query.itemTypeFlag && this.query.itemTypeId)  body.itemTypeId = this.query.itemTypeId
-      if(this.query.keyWords) body.keyWords = this.query.keyWords  
+      // if(this.query.itemTypeFlag && this.query.itemTypeId)  body.itemTypeId = this.query.itemTypeId
+      // if(this.query.keyWords) body.keyWords = this.query.keyWords  
 
       postapi('/api/app/diagnosis/getlistinsuggestion',body).then(res =>{
         if(res.code != -1){
           this.tableData = res.data
+          this.quickTableData = res.data
           this.form = Object.assign({},this.formInit)
         }
       })      
       //console.log(this.query)
     },
 
+    //快速查找诊断时，调整可按拼间简码及简称查找
+    filterMethod(keyWords) {
+      //console.log('filterMethod',this.dict.asbItemQuick)  
+      if (keyWords) {
+        this.quickTableData = [];
+        this.tableData.forEach(item => {
+          if (item.displayName.indexOf(keyWords) > - 1
+            || item.simpleCode.indexOf(keyWords.toUpperCase()) > - 1
+            || item.suggestionName.indexOf(keyWords) > - 1) {
+            this.quickTableData.push(item);
+          }
+        });
+      } else {
+        this.quickTableData = deepCopy(tableData);
+      }
+    },
+
+    //快速查找诊断
+    quickDiagnosis(v) {
+      //远程查询时，设置了 value-key 也不管用，只能取到value console.log('quickDiagnosis',v)
+      let lfind = -1
+      if (v.id) {
+        lfind = arrayExistObj(this.tableData, 'id', v.id)
+        if (lfind > -1) {
+          this.$refs['elTable'].setCurrentRow(this.tableData[lfind])
+          this.rowClick(this.tableData[lfind])          
+        }
+      }    
+      //console.log('v,query.diagnosis',v,this.query.diagnosis)
+      this.$refs['elSelectKeyWords'].focus(); //asbItemId
+      this.$nextTick(() => {        
+        this.$refs['elSelectKeyWords'].blur(); //total  asbItemId
+        //this.query.keyWords = ''
+        this.quickTableData = deepCopy(this.tableData)        
+        this.$refs['elSelectKeyWords'].focus(); //total  asbItemId       
+      });      
+    },
+ 
+
     //拖拽
     rowDrop(elId) {
       this.$nextTick(() => {
@@ -301,7 +373,7 @@ export default {
         //console.log('tbody', el)
         let that = this;
         Sortable.create(el, {
-          //handle: ".move",  // 选中class='move'的元素按住，方可拖动
+          handle: ".move",  // 选中class='move'的元素按住，方可拖动
           animation: 150, // ms, number 单位：ms，定义排序动画的时间
           //拖拽结束
           onEnd({ newIndex, oldIndex }) {
@@ -314,6 +386,14 @@ export default {
 
     rowClick(row){
       this.form = deepCopy(row)
+
+      //用于选择树节点
+      if(typeof row.itemTypeId == 'string'){
+        this.query.itemTypeId = row.itemTypeId  
+      }else{
+        this.query.itemTypeId = row.itemTypeId[row.itemTypeId.length - 1]
+      }
+      
     },
 
     btnAdd(){
@@ -321,6 +401,7 @@ export default {
         this.$message.warning("请先选择项目类别！")
         return
       }
+      console.log('this.form,this.query',this.form,this.query)
       this.form = deepCopy(this.formInit)
       this.form.itemTypeId = this.query.itemTypeId
       this.dialogVisible = true
@@ -334,8 +415,13 @@ export default {
       this.dialogVisible = true
     },
 
+    inputDisplayName(v){
+      //console.log(v)
+      this.form.suggestionName = v
+    },
+
     onSubmit(formName){
-      let msg='',body = {}
+      let msg='',body = {},itemTypeId=''
       
       this.$refs[formName].validate((valid, fields) => {
         if (!valid) {
@@ -349,9 +435,15 @@ export default {
         return
       }
 
+      if(typeof this.form.itemTypeId == 'object'){
+        itemTypeId = this.form.itemTypeId[this.form.itemTypeId.length - 1]
+      }else{
+        itemTypeId = this.form.itemTypeId
+      }
+      
       body = {
         displayName: this.form.displayName,
-        itemTypeId: this.form.itemTypeId,
+        itemTypeId,
         suggestionName: this.form.suggestionName,
         isIll: this.form.isIll,
         isSummaryTemplate: this.form.isSummaryTemplate,
@@ -360,14 +452,14 @@ export default {
       }
 
       if(this.form.id){
-        putapi(`/api/app/diagnosis/${this.form.id}`,body).then(res =>{
+        postapi(`/api/app/diagnosis/updatediagnosis?id=${this.form.id}`,body).then(res =>{
           if(res.code != -1){
             this.$message.success("操作成功！")
             this.dialogVisible = false
           }
         })
       }else{
-        postapi(`/api/app/diagnosis`,body).then(res =>{
+        postapi(`/api/app/diagnosis/creatediagnosis`,body).then(res =>{
           if(res.code != -1){
             this.$message.success("操作成功！") 
             this.form = Object.assign(this.form,res.data)    
@@ -427,7 +519,7 @@ export default {
         type: "warning",
       }).then(() => {
         //console.log('{patientRegisterIds}',{patientRegisterIds})
-        return deletapi(`/api/app/diagnosis/${this.form.id}`);
+        return postapi(`/api/app/diagnosis/deletediagnosis?id=${this.form.id}`);
       }).then((res) => {
         if(res.code != -1){
           this.$message.success("操作成功");
@@ -445,16 +537,16 @@ export default {
   },
 
   watch: {    
-    "query.itemTypeId":{
-      immediate: true, // 立即执行
-      deep: true, // 深度监听复杂类型内变化
-      handler(newVal,oldVal){
-        // console.log('watch:patientRegisterNo:',newVal,oldVal)
-        if(newVal != oldVal){
-          this.btnQuery();                 
-        }
-      }
-    },
+    // "query.itemTypeId":{
+    //   immediate: true, // 立即执行
+    //   deep: true, // 深度监听复杂类型内变化
+    //   handler(newVal,oldVal){
+    //     // console.log('watch:patientRegisterNo:',newVal,oldVal)
+    //     if(newVal != oldVal){
+    //       this.btnQuery();                 
+    //     }
+    //   }
+    // },
   },
 };
 </script>