1.添加新字段

2.看在当前行点击进行编辑
3.添加滚动条

src/views/outClinicalpathway.vue

@@ -2,7 +2,7 @@
  * @Author: wsq
  * @Date: 2022-04-22 15:20:58
  * @LastEditors: wsq
- * @LastEditTime: 2023-01-28 15:40:40
+ * @LastEditTime: 2023-01-30 13:51:13
  * @Description: 
 -->
 <template>
@@ -134,7 +134,6 @@
           ref="multipleTable"
           row-key="id"
           :data="tableData"
-          style="width: 100%; height: 100%; overflow-y: scroll"
           :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
           :select-on-indeterminate="true"
           @selection-change="SelectionChange"
@@ -150,17 +149,147 @@
             show-overflow-tooltip
             property="advice_name"
             label="路径名称"
+            width="150"
           />
           <el-table-column
             show-overflow-tooltip
             property="project_code"
             label="医院项目编码"
+            width="120"
           />
           <el-table-column
             show-overflow-tooltip
             property="project_name"
             label="医院项目名称"
+            width="150"
           />
+
+          <el-table-column
+            show-overflow-tooltip
+            property="specifications"
+            label="规格说明"
+          />
+          <el-table-column
+            show-overflow-tooltip
+            property="dosage"
+            label="药品剂型"
+          />
+          <el-table-column
+            show-overflow-tooltip
+            property="isAntibiotic"
+            label="抗生素否"
+            width="110"
+          >
+            <template #default="scope">
+              <span v-if="tableIndex != scope.$index">{{
+                scope.row.isAntibiotic
+              }}</span>
+              <el-select v-else size="mini" v-model="scope.row.isAntibiotic">
+                <el-option
+                  v-for="item in chargeTypeoptions"
+                  :key="item.label"
+                  :label="item.label"
+                  :value="item.label"
+                >
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column prop="medicUseQuantity" label="用量" width="120">
+            <template #default="scope">
+              <span v-if="tableIndex != scope.$index">{{
+                scope.row.medicUseQuantity
+              }}</span>
+              <el-input
+                v-else
+                v-model="scope.row.medicUseQuantity"
+                size="mini"
+                placeholder="请输入内容"
+              ></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column
+            show-overflow-tooltip
+            property="medicUseUnit"
+            label="单位"
+          />
+          <el-table-column
+            show-overflow-tooltip
+            property="medicUseMode"
+            label="途径"
+          />
+          <el-table-column
+            show-overflow-tooltip
+            property="medicUsePlan"
+            label="频率"
+          />
+
+          <el-table-column prop="dropNumber" label="滴数" width="120">
+            <template #default="scope">
+              <span v-if="tableIndex != scope.$index">{{
+                scope.row.dropNumber
+              }}</span>
+              <el-input
+                v-else
+                v-model="scope.row.dropNumber"
+                size="mini"
+                placeholder="请输入内容"
+              ></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column prop="medicQuantity" label="用药总量" width="120">
+            <template #default="scope">
+              <span v-if="tableIndex != scope.$index">{{
+                scope.row.medicQuantity
+              }}</span>
+              <el-input
+                v-else
+                v-model="scope.row.medicQuantity"
+                size="mini"
+                placeholder="请输入内容"
+              ></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column
+            show-overflow-tooltip
+            property="medicUnit"
+            label="单位"
+          />
+          <el-table-column
+            show-overflow-tooltip
+            property="remark"
+            label="嘱托"
+          />
+          <el-table-column label="操作" width="200" align="center">
+            <template #default="scope">
+              <div
+                class="table_handle"
+                v-show="tableIndex != scope.$index"
+                v-if="scope.row.advice_name == null"
+              >
+                <el-button
+                  size="mini"
+                  type="info"
+                  @click="edit(scope.row, scope.$index)"
+                  >编辑</el-button
+                >
+              </div>
+              <div class="table_handle" v-show="tableIndex == scope.$index">
+                <el-button
+                  size="mini"
+                  type="primary"
+                  @click="confirm(scope.row, scope.$index)"
+                  >确定</el-button
+                >
+                <el-button
+                  size="mini"
+                  type="primary"
+                  @click="cancel(scope.row, scope.$index)"
+                  >取消</el-button
+                >
+              </div>
+            </template>
+          </el-table-column>
         </el-table>
       </div>
     </div>
@@ -182,7 +311,7 @@ import { Message } from "element-ui";
 import { useRoute, useRouter } from "../utils/useVueRouter";
 import { setItem, getItem } from "../utils/auth";
 import { Loading } from "element-ui";
-
+import _ from "lodash";
 export default {
   name: "outClinicalpathway",
   setup() {
@@ -226,8 +355,38 @@ export default {
       reasonoptions: [], //变异原因
       crid: null,
       chickid: [], //选中的id
+
+      tableIndex: -1,
+      tempRow: {}, //储存正在编辑的行
+      chargeTypeoptions: [
+        {
+          label: "是",
+        },
+        {
+          label: "否",
+        },
+      ],
     });
 
+    //编辑
+    const edit = (row, index) => {
+      console.log("row", row);
+      state.tableIndex = index;
+      state.tempRow = _.cloneDeep(row);
+      console.log("state.tempRow ", state.tempRow);
+    };
+
+    //取消
+    const cancel = (row, index) => {
+      if (!row.id) {
+        //如果为空,删除当前行
+        state.tableData.splice(index, 1); //前端删除
+      } else {
+        state.tableData[index] = state.tempRow;
+      }
+      state.tableIndex = -1;
+    };
+
     //获取患者信息
     const gettopdata = () => {
       http
@@ -524,6 +683,8 @@ export default {
       joinorder,
       getreasonoptions,
       getTitle,
+      edit,
+      cancel,
     };
   },
 };
@@ -537,6 +698,34 @@ export default {
   background-color: #0085ba !important;
   border-color: #1097e0 !important;
 }
+::v-deep .el-table--scrollable-x .el-table__body-wrapper {
+  height: 688px !important ;
+  overflow-y: auto !important;
+}
+
+// 滚动条的宽度
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 10px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 10px;
+  background-color: #ffff;
+}
+
+// 滚动条的滑块
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background-color: #27aae2;
+  border: 3px solid transparent;
+  border-radius: 9px;
+  background-clip: content-box;
+}
+
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  border-radius: 20px;
+  background: #ffff;
+  width: 10px;
+}
 .outClinicalpathway {
   // height: calc(100% - 50px);
   // background-color: white;
@@ -669,6 +858,7 @@ export default {
     &_right {
       height: 100%;
       width: 20%;
+
       display: flex;
       align-items: center;
       justify-content: center;
@@ -700,6 +890,7 @@ export default {
     &_right {
       width: 84%;
       height: 100%;
+      // overflow: scroll;
     }
   }
 }