诊断和手术可以拖动了。

package-lock.json

@@ -2967,6 +2967,11 @@
         }
       }
     },
+    "sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.nlark.com/sortablejs/download/sortablejs-1.14.0.tgz",
+      "integrity": "sha1-bS4XzL2yX0ZHNN9iHU811Ks1s9g="
+    },
     "source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.5.7.tgz",

package.json

@@ -10,26 +10,27 @@
   },
   "dependencies": {
     "@babel/standalone": "7.14.8",
+    "@kangc/v-md-editor": "^2.3.5",
     "@vitejs/plugin-legacy": "^1.4.4",
+    "@vueuse/core": "^4.10.0",
+    "axios": "^0.21.1",
     "dayjs": "^1.10.6",
+    "echarts": "^5.2.0",
     "element-plus": "^1.0.2-beta.63",
     "file-saver": "^2.0.5",
     "jquery": "^3.6.0",
     "js-cookie": "^3.0.0",
     "jsbarcode": "^3.11.4",
+    "moment": "^2.29.1",
+    "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "qrcanvas": "^3.1.2",
+    "sortablejs": "^1.14.0",
+    "throttle-debounce": "^3.0.1",
     "vue": "^3.1.5",
     "vue-router": "^4.0.10",
     "vuex": "^4.0.2",
-    "xlsx": "^0.17.0",
-    "moment": "^2.29.1",
-    "@kangc/v-md-editor": "^2.3.5",
-    "@vueuse/core": "^4.10.0",
-    "axios": "^0.21.1",
-    "normalize.css": "^8.0.1",
-    "echarts": "^5.2.0",
-    "throttle-debounce": "^3.0.1"
+    "xlsx": "^0.17.0"
   },
   "devDependencies": {
     "@types/node": "^15.0.3",

src/components/si-sheet-upload/JieSuanDanXiangQing.vue

@@ -70,15 +70,14 @@
       <el-tag size="small">住院诊断信息</el-tag>
       <el-button type="success" icon="el-icon-circle-plus" @click="addZhenDuanClick">新增诊断</el-button>
       入院病情： 1.有，2.临床未确定，3.情况不明，4.无
-      <el-table :data="diseinfo" :height="store.state.app.windowSize.h / 2.5" stripe highlight-current-row>
-        <el-table-column label="诊断代码" prop="disDiag">
-          <template #default="scope">
-            <el-button type="text" @click="xiuGaiZhenDuanClick(scope.$index,scope.row)">{{
-                scope.row.disDiag
-              }}
-            </el-button>
+      <el-table :data="diseinfo" :height="store.state.app.windowSize.h / 2.5" stripe highlight-current-row
+                id="sortable-diseinfo" row-key="id">
+        <el-table-column width="40">
+          <template #default>
+            <i class="iconfont icon-shangxiatuodong" style="font-size: 20px"></i>
           </template>
         </el-table-column>
+        <el-table-column label="诊断代码" prop="disDiag"></el-table-column>
         <el-table-column label="诊断名称" prop="disDiagComment"></el-table-column>
         <el-table-column label="入院病情" prop="admissCond" width="90">
         </el-table-column>
@@ -99,6 +98,8 @@
         </el-table-column>
         <el-table-column label="删除">
           <template #default="scope">
+            <el-button type="warning" @click="xiuGaiZhenDuanClick(scope.$index,scope.row)" icon="el-icon-edit">修改
+            </el-button>
             <el-popconfirm
                 confirm-button-text="确认"
                 cancel-button-text="取消"
@@ -116,12 +117,15 @@
       </el-table>
       <el-tag size="small">手术操作信息</el-tag>
       <el-button type="success" icon="el-icon-circle-plus" @click="tianJiaXiuGaiShouShu(-1)">新增手术</el-button>
-      <el-table :data="oprninfo" :height="store.state.app.windowSize.h / 2.5" stripe highlight-current-row>
-        <el-table-column label="手术及操作名称" prop="ssmc">
-          <template #default="scope">
-            <el-button type="text" @click="tianJiaXiuGaiShouShu(scope.$index)">{{ scope.row.ssmc }}</el-button>
+      <el-table :data="oprninfo" :height="store.state.app.windowSize.h / 2.5"
+                stripe highlight-current-row row-key="id" id="sortable-oprninfo">
+        <el-table-column width="40">
+          <template #default>
+            <i class="iconfont icon-shangxiatuodong" style="font-size: 20px"></i>
           </template>
         </el-table-column>
+        <el-table-column label="手术及操作名称" prop="ssmc"></el-table-column>
+        <el-table-column label="序号" prop="ssxh" width="50"></el-table-column>
         <el-table-column label="手术及操作日期" prop="ssrq"></el-table-column>
         <el-table-column label="手术级别" prop="ssjb"></el-table-column>
         <el-table-column label="手术及操作编码	" prop="ssbm"></el-table-column>
@@ -141,8 +145,10 @@
           </template>
         </el-table-column>
         <el-table-column label="麻醉医师" prop="mzysName"></el-table-column>
-        <el-table-column label="操作">
+        <el-table-column label="操作" width="210">
           <template #default="scope">
+            <i class="iconfont icon-shangxiatuodong" style="font-size: 20px"></i>
+            <el-button type="warning" @click="tianJiaXiuGaiShouShu(scope.$index)" icon="el-icon-edit">修改</el-button>
             <el-popconfirm
                 confirm-button-text="确认"
                 cancel-button-text="取消"
@@ -323,14 +329,15 @@ import {operations, decTypes} from '../../data'
 import {clone} from "../../utils/clone";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {getRenYuan} from "../../api/public-api";
-import {setlModifyReq, setlUploadAudit, shouShuBianMa, upldSetlList} from "../../api/medical-insurance/si-setl-upload";
+import {setlUploadAudit, shouShuBianMa, upldSetlList} from "../../api/medical-insurance/si-setl-upload";
 import {formatDatetime} from "../../utils/date";
-import {listIsBlank, listNotBlank, stringIsBlank, stringNotBlank} from "../../utils/blank-utils";
+import {listIsBlank, stringIsBlank, stringNotBlank} from "../../utils/blank-utils";
 import ShuJuDuiBi from "./ShuJuDuiBi.vue"
 import {getsiDiagTypeName, maZuiFangShis, maZuiName, qieKouName, qks, shenHeQuanXian} from "./jieSuanDanXiuGai";
 import ShenHeXinXi from "./ShenHeXinXi.vue";
 import KeShiFeiYong from "./KeShiFeiYong.vue";
 import BeiZhu from "./BeiZhu.vue";
+import Sortable from "sortablejs";
 
 export default {
   name: "JieSuanDanXiangQing",
@@ -763,18 +770,68 @@ export default {
             })
           }, 1000)
         }
+        if (diseinfo.value.length > 0) {
+          setTimeout(() => {
+            sortableDiseinfo()
+          }, 100)
+        }
+        if (oprninfo.value.length > 0) {
+          setTimeout(() => {
+            sortableOprninfo()
+          }, 100)
+        }
+        //初始化拖拽表格
       } else {
         diseinfo.value = clone(props.data.ybZyDisDiag)
         oprninfo.value = clone(props.data.batjBa4)
       }
-
       zhenDuanQuery.value.medType = props.data.medType
     }
+
+    /**
+     * 诊断的拖拽
+     */
+    function sortableDiseinfo() {
+      const el = document.querySelector("#sortable-diseinfo tbody");
+      //设置拖拽的参数
+      const ops = {
+        animation: 200, //动画时长
+        handle: '.icon-shangxiatuodong', // 拖动的 class
+        onEnd(evt) {
+          const currRow = diseinfo.value.splice(evt.oldIndex, 1)[0]
+          diseinfo.value.splice(evt.newIndex, 0, currRow)
+          diseinfo.value.forEach((item, index) => {
+            item.disDiagNo = index + 1
+          })
+        },//拖拽完成回调函数（新index，旧index）
+      };
+      Sortable.create(el, ops);
+    }
+
+    function sortableOprninfo() {
+      const el = document.querySelector("#sortable-oprninfo tbody");
+      const ops = {
+        animation: 200, //动画时长
+        handle: '.icon-shangxiatuodong',
+        onEnd(evt) {
+          const currRow = oprninfo.value.splice(evt.oldIndex, 1)[0]
+
+          oprninfo.value.splice(evt.newIndex, 0, currRow)
+          oprninfo.value.forEach((item, index) => {
+            item.ssxh = index + 1
+          })
+        },//拖拽完成回调函数（新index，旧index）
+      };
+      Sortable.create(el, ops);
+    }
+
+
     watch(() => props.data,
         () => {
           init()
         })
 
+
     return {
       props,
       setlinfo,
@@ -853,7 +910,8 @@ export default {
       beiZhuRef,
       baoCunHouGuanBi,
     }
-  }
+  },
+
 }
 
 

src/icons/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2473230 */
-  src: url('iconfont.woff2?t=1638754458419') format('woff2'),
-       url('iconfont.woff?t=1638754458419') format('woff'),
-       url('iconfont.ttf?t=1638754458419') format('truetype');
+  src: url('iconfont.woff2?t=1639981215030') format('woff2'),
+       url('iconfont.woff?t=1639981215030') format('woff'),
+       url('iconfont.ttf?t=1639981215030') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shangxiatuodong:before {
+  content: "\e661";
+}
+
 .icon-jiesuandanshangchuan:before {
   content: "\e615";
 }