diagnosis

src/views/diagnosis/diagnosis.vue

@@ -21,9 +21,9 @@
                 </div>
               </div>
               <div>
-                <el-table :data="tableData" border
+                <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="tableDiagnosis">
+                  highlight-current-row @row-click="rowClick" size="small"  ref="elTable">
                   <el-table-column
                     v-for="(item, index) in headerCols" 
                     :key="`col_${index}`"          
@@ -66,27 +66,102 @@
                 <el-button class="btnClass" @click="btnQuery">查询</el-button>
               </div>
               <div>
-                <el-button type="primary" class="btnClass" @click="btnQuery">新增</el-button>
+                <el-button type="primary" class="btnClass" @click="btnAdd">新增</el-button>
               </div>
               <div>
-                <el-button type="success" class="btnClass" @click="btnQuery">编辑</el-button>
+                <el-button type="success" class="btnClass" @click="btnEdit">编辑</el-button>
               </div>
               <div>
-                <el-button type="danger" class="btnClass" @click="btnQuery">删除</el-button>
+                <el-button type="danger" class="btnClass" @click="btnDel">删除</el-button>
               </div>
               <div>
-                <el-button type="danger" class="btnClass" @click="btnQuery">保存排序</el-button>
+                <el-button type="danger" class="btnClass" @click="btnSort">保存排序</el-button>
               </div>
             </div>
           </div>
 
           <!-- 诊断对应的建议列表 -->
           <div style="margin-top:5px;">
-            <DiagnosisSug :formDiagnosis="form"/>
+            <DiagnosisSug :formDiagnosis="form" :refreshSugs="refreshSugs"/>
           </div>
         </div>
       </div>
     </el-card>
+
+    <!--新增/编辑-->
+    <el-dialog
+      :title="form.id ? '编辑' : '新增'"
+      :visible.sync="dialogVisible"
+      width="800px" @close="closeDialog"
+      :close-on-click-modal="false"
+    >
+      <el-form ref="form" :model="form" label-width="100px" :rules="rules">
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="名称" prop="displayName">
+              <el-input v-model="form.displayName" size="small"/>
+            </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">
+              </el-cascader>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="疾病" prop="isIll">
+              <el-radio v-model="form.isIll" label="Y">是</el-radio>
+              <el-radio v-model="form.isIll" label="N">否</el-radio>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="建议名称" prop="suggestionName">
+              <el-input v-model="form.suggestionName" size="small"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="总检模板" prop="isSummaryTemplate">
+              <el-radio v-model="form.isSummaryTemplate" label="Y">是</el-radio>
+              <el-radio v-model="form.isSummaryTemplate" label="N">否</el-radio>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="适用性别" prop="forSexId">
+              <el-select v-model="form.forSexId" placeholder="请选择" size="small">
+                <el-option
+                  v-for="item in dict.forSex"
+                  :key="item.id"
+                  :label="item.displayName"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select> </el-form-item
+          ></el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="诊断级别" prop="diagnosisLevelId">
+              <el-select v-model="form.diagnosisLevelId" placeholder="请选择" size="small">
+                <el-option
+                  v-for="item in dict.diagnosisLevel"
+                  :key="item.id"
+                  :label="item.displayName"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select> </el-form-item
+          ></el-col>
+        </el-row>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -98,7 +173,7 @@ import Sortable from "sortablejs";
 
 import ItemTypeTree from "../../components/common/ItemTypeTree.vue";
 import DiagnosisSug from "./diagnosisSug.vue";
-import { deepCopy,dddw } from '@/utlis/proFunc';
+import { deepCopy,dddw, arrayExistObj, objCopy } from '@/utlis/proFunc';
 
 
 
@@ -118,10 +193,19 @@ export default {
       formInit:{},
       form:{
         id:'',
+        itemTypeId:'',
+        isIll:'Y',
+        displayName:'',
+        suggestionName:'',
+        forSexId:'A',
+        isSummaryTemplate:'Y',
+        diagnosisLevelId:0,
         suggestions:[],
       },
-      rules:{
-
+      dialogVisible:false,
+      rules: {
+        displayName: [{ required: true, message: "请输入诊断名称", trigger: "blur" }],
+        itemTypeId: [{ required: true, message: "请输入项目类别", trigger: "blur" }],        
       },
 
       //动态列（预留）
@@ -151,8 +235,7 @@ export default {
 
   //挂载完成
   mounted() { 
-    this.btnQuery();
-    
+    this.rowDrop('elTableDiagnosis')  
   },
 
   computed: {
@@ -184,11 +267,19 @@ export default {
 
     },
 
-    //供树节点组件调用，更新当前所选的项目类别
+    // 供树节点组件调用，更新当前所选的项目类别
     refreshItemTypeId(itemTypeId){
       this.query.itemTypeId = itemTypeId
     },
 
+    // 供明建议组件调用，更新所选建议
+    refreshSugs(sugs){
+      if(!this.form.id) return
+      this.form.suggestions = deepCopy(sugs)
+      let lfind = arrayExistObj(this.tableData,'id',this.form.id)
+      if(lfind > -1) this.tableData[lfind] = Object.assign(this.tableData[lfind],this.form)
+    },
+
     btnQuery(){
       let body = {}
       if(this.query.itemTypeFlag && this.query.itemTypeId)  body.itemTypeId = this.query.itemTypeId
@@ -197,22 +288,173 @@ export default {
       postapi('/api/app/diagnosis/getlistinsuggestion',body).then(res =>{
         if(res.code != -1){
           this.tableData = res.data
+          this.form = Object.assign({},this.formInit)
         }
       })      
+      //console.log(this.query)
+    },
 
-      console.log(this.query)
+    //拖拽
+    rowDrop(elId) {
+      this.$nextTick(() => {
+        let el = document.querySelector(`#${elId} tbody`);
+        //console.log('tbody', el)
+        let that = this;
+        Sortable.create(el, {
+          //handle: ".move",  // 选中class='move'的元素按住，方可拖动
+          animation: 150, // ms, number 单位：ms，定义排序动画的时间
+          //拖拽结束
+          onEnd({ newIndex, oldIndex }) {
+            let currRow = that.tableData.splice(oldIndex, 1)[0];
+            that.tableData.splice(newIndex, 0, currRow);
+          },
+        });
+      });
     },
 
     rowClick(row){
       this.form = deepCopy(row)
     },
 
+    btnAdd(){
+      if(!this.query.itemTypeId){
+        this.$message.warning("请先选择项目类别！")
+        return
+      }
+      this.form = deepCopy(this.formInit)
+      this.form.itemTypeId = this.query.itemTypeId
+      this.dialogVisible = true
+    },
+
+    btnEdit(){
+      if(!this.form.id){
+        this.$message.warning("请先选择要编辑的诊断记录！")
+        return
+      }
+      this.dialogVisible = true
+    },
+
+    onSubmit(formName){
+      let msg='',body = {}
+      
+      this.$refs[formName].validate((valid, fields) => {
+        if (!valid) {
+          msg = fields[Object.keys(fields)[0]][0].message;
+          return false;
+        }        
+      })
+
+      if(msg){
+        this.$message.warning(msg);
+        return
+      }
+      
+      body = {
+        displayName: this.form.displayName,
+        itemTypeId: this.form.itemTypeId,
+        suggestionName: this.form.suggestionName,
+        isIll: this.form.isIll,
+        isSummaryTemplate: this.form.isSummaryTemplate,
+        forSexId: this.form.forSexId,
+        diagnosisLevelId: this.form.diagnosisLevelId,
+      }
+
+      if(this.form.id){
+        putapi(`/api/app/diagnosis/${this.form.id}`,body).then(res =>{
+          if(res.code != -1){
+            this.$message.success("操作成功！")
+            this.dialogVisible = false
+          }
+        })
+      }else{
+        postapi(`/api/app/diagnosis`,body).then(res =>{
+          if(res.code != -1){
+            this.$message.success("操作成功！") 
+            this.form = Object.assign(this.form,res.data)    
+            this.dialogVisible = false        
+          }
+        })
+      }
+    },
+
+    btnSort(){
+      if(this.tableData.length<2) return
+      let itemList = []
+      this.tableData.forEach((e,index) =>{
+        console.log(e.displayName)
+        itemList.push({
+          id:e.id,
+          displayOrder:index
+        })
+      })
+
+      putapi('/api/app/diagnosis/updatesortmany',{itemList}).then(res =>{
+        if(res.code != -1){
+          this.$message.success("操作成功！")
+        }
+      })
+    },
+
+    closeDialog(){
+      if(!this.form.id) return
+      let curRow = {}
+      let lfind = arrayExistObj(this.tableData,'id',this.form.id)
+      if(lfind > -1){
+        curRow = Object.assign(this.tableData[lfind],this.form)
+        this.tableData[lfind] = curRow
+      }else{
+        lfind = this.tableData.length
+        curRow = Object.assign({},this.form)
+        this.tableData.push(curRow)
+      }
+      if(lfind > -1){
+        this.$refs['elTable'].setCurrentRow(curRow)
+        this.$nextTick(() =>{
+          this.rowClick(curRow)
+        })
+      }
+    },
+
+    btnDel(){
+      if(!this.form.id){
+        this.$message.warning("请先选中要删除的诊断记录！")
+        return
+      }
+
+      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
+        confirmButtonText: "是",
+        cancelButtonText: "否", 
+        type: "warning",
+      }).then(() => {
+        //console.log('{patientRegisterIds}',{patientRegisterIds})
+        return deletapi(`/api/app/diagnosis/${this.form.id}`);
+      }).then((res) => {
+        if(res.code != -1){
+          this.$message.success("操作成功");
+          let lfind = arrayExistObj(this.tableData,'id',this.form.id)
+          if(lfind > -1) this.tableData.splice(lfind,1)
+          this.form = deepCopy(this.formInit)          
+        }          
+      }).catch((err) => {
+        if (err == "cancel") {
+          this.$message.info("已取消操作");
+        }
+      });     
+    },
+
   },
 
   watch: {    
-    "query.itemTypeId"(newVal,oldVal){
+    "query.itemTypeId":{
+      immediate: true, // 立即执行
+      deep: true, // 深度监听复杂类型内变化
+      handler(newVal,oldVal){
+        // console.log('watch:patientRegisterNo:',newVal,oldVal)
+        if(newVal != oldVal){
           this.btnQuery();                 
         }
+      }
+    },
   },
 };
 </script>

src/views/diagnosis/diagnosisSug.vue

@@ -1,10 +1,10 @@
 <template>  
   <div style="margin-left:5px;display: flex;">
     <div :style="'width:' + (window.pageWidth - 200 - 110 - 50) + 'px;'"> 
-      <el-table :data="tableData" border
+      <el-table id="elTableDiagnosisSug" :data="tableData" border row-key="id"
         :height="window.pageHeight < 600 ? 215 : Math.floor((window.pageHeight - 170) / 2)"
         highlight-current-row @row-click="rowClick" size="small"  ref="elTable">
-        <el-table-column type="index" label="序号" min-width="40" align="center"/>
+        <el-table-column type="index" label="序号" width="40" align="center"/>
         <el-table-column prop="suggestionContent" label="建议内容">        
           <template slot-scope="scope">            
             <el-input type="textarea" v-model="scope.row.suggestionContent" placeholder="建议内容" style="width: 100%"
@@ -12,18 +12,25 @@
             </el-input>
           </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 style="margin-left: 10px;">              
       <div>
-        <el-button type="primary" class="btnClass" @click="btnQuery">新增</el-button>
+        <el-button type="primary" class="btnClass" @click="btnAdd">新增</el-button>
       </div>
       <div>
-        <el-button type="danger" class="btnClass" @click="btnQuery">删除</el-button>
+        <el-button type="danger" class="btnClass" @click="btnDel">删除</el-button>
       </div>
       <div>
-        <el-button type="success" class="btnClass" @click="btnQuery">保存</el-button>
+        <el-button type="success" class="btnClass" @click="btnSave">保存建议</el-button>
       </div>
     </div>
   </div>
@@ -35,7 +42,7 @@ import { mapState } from "vuex";
 import { getapi, postapi, putapi, deletapi } from "@/api/api";
 import Sortable from "sortablejs";
 
-import { deepCopy,dddw } from '@/utlis/proFunc';
+import { deepCopy,dddw, arrayExistObj } from '@/utlis/proFunc';
 
 
 
@@ -43,7 +50,7 @@ export default {
   components: {
     
   }, 
-  props:["formDiagnosis"],
+  props:["formDiagnosis","refreshSugs"],
   data() {
     return {      
       tableData:[], //建议列表
@@ -57,8 +64,7 @@ export default {
 
   //挂载完成
   mounted() { 
-    this.btnQuery();
-    
+    this.rowDrop('elTableDiagnosisSug')
   },
 
   computed: {
@@ -72,15 +78,87 @@ export default {
       this.tableData = deepCopy(this.formDiagnosis.suggestions)
     },
 
-    //供树节点组件调用，更新当前所选的项目类别
-    refreshItemTypeId(itemTypeId){
-      this.query.itemTypeId = itemTypeId
+    //拖拽
+    rowDrop(elId) {
+      this.$nextTick(() => {
+        let el = document.querySelector(`#${elId} tbody`);
+        //console.log('tbody', el)
+        let that = this;
+        Sortable.create(el, {
+          handle: ".move",  // 选中class='move'的元素按住，方可拖动
+          animation: 150, // ms, number 单位：ms，定义排序动画的时间
+          //拖拽结束
+          onEnd({ newIndex, oldIndex }) {
+            let currRow = that.tableData.splice(oldIndex, 1)[0];
+            that.tableData.splice(newIndex, 0, currRow);
           },
+        });
+      });
+    },
+
 
     rowClick(row){
-      this.curRow = row
+      this.curRow = Object.assign({},row)
+    },
+
+    btnAdd(){
+      if(!this.formDiagnosis.id){
+        this.$message.warning("请先选择诊断记录！")
+        return
+      }
+      let rd = {
+        id:Math.random(),
+        suggestionContent:''
+      }
+      this.tableData.push(rd)
+    },
+
+    btnSave(){
+      if(!this.formDiagnosis.id){
+        this.$message.warning("请先选择诊断记录！")
+        return
+      }
+
+      let diagnosisId = this.formDiagnosis.id
+      let details = []
+
+      this.tableData.forEach(e =>{
+        if(e.suggestionContent){
+          details.push({diagnosisId,suggestionContent:e.suggestionContent})
+        }
+      })
+      let body = {diagnosisId,details}
+
+      postapi('/api/app/suggestion/createsuggestionmany',body).then(res =>{
+        if(res.code != -1){
+          this.$message.success("操作成功！")
+          //更新明细诊断父组件的建议
+          this.refreshSugs(this.tableData)
+        }
+      })
+
     },
 
+    btnDel(){      
+      if(!this.formDiagnosis.id || !this.curRow.id){
+        this.$message.warning("请先选中要删除的记录！")
+        return
+      }
+
+      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
+        confirmButtonText: "是",
+        cancelButtonText: "否", 
+        type: "warning",
+      }).then(() => {
+        let lfind = arrayExistObj(this.tableData,'id',this.curRow.id)
+        if(lfind > -1) this.tableData.splice(lfind,1)
+      }).catch((err) => {
+        if (err == "cancel") {
+          this.$message.info("已取消操作");
+        }
+      });
+    }
+
   },
 
   watch: {