peisweb/src/components/doctorCheck/CheckSumSug.vue

<template>
  <div style="display: flex;">
    <div :style="'width:'+Math.floor((window.pageWidth - 200 - 110 - 45 - 4)/2) + 'px;'">
      <el-table id="tableSummary" row-key="id" :data="doctorCheck.checkSummaryList" size="samll"
        :height="window.pageHeight < 600 ? Math.floor((395 - (isCheckPicture ? 100:0))*2/5):Math.floor((window.pageHeight - 205 - (isCheckPicture ? 100:0))*2/5)"
        width="100%" border @row-click="rowClick">
        <el-table-column prop="summary" label="小结" >
          <template slot-scope="scope">
            <el-input type="textarea" v-model="scope.row.summary" :autosize="{ minRows: 1, maxRows: 100 }"
            :disabled="doctorCheck.RegisterCheckEdit.completeFlag=='1' || doctorCheck.RegisterCheckEdit.completeFlag=='2'" placeholder="请输入小结">
            </el-input>
          </template>
        </el-table-column>      
      </el-table>
    </div>
    <div :style="'margin-left:2px;width:'+Math.floor((window.pageWidth - 200 - 110 - 45 - 4)/2) + 'px;'">
      <el-table id="tableSuggestion" row-key="id" :data="doctorCheck.checkSuggestionList" size="samll"
        :height="window.pageHeight < 600 ? Math.floor((395 - (isCheckPicture ? 100:0))*2/5):Math.floor((window.pageHeight - 205 - (isCheckPicture ? 100:0))*2/5)"
        width="100%" border @row-click="rowClick">
        <el-table-column prop="suggestion" label="建议" >
          <template slot-scope="scope">
            <el-input type="textarea" v-model="scope.row.suggestion" :autosize="{ minRows: 1, maxRows: 100 }"
            :disabled="doctorCheck.RegisterCheckEdit.completeFlag=='1' || doctorCheck.RegisterCheckEdit.completeFlag=='2'" placeholder="请输入建议">
          </el-input>
          </template>
        </el-table-column>       
      </el-table>
    </div>
  </div>
</template>
<script lang="ts">
import { mapState } from 'vuex';
import Sortable from "sortablejs";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
export default {
  components: {},
  props:["isCheckPicture"],
  data() {
    return {

    };
  },

  created() { },

  //挂载完成
  mounted() { 
    this.rowDrop();
    this.rowDropSuggestion()
  },

  computed: {
    ...mapState(['window','dict', 'doctorCheck']),
  },

  methods: {
    //获取小结
    checkSummaryList(RegisterCheckId) {
      if(!RegisterCheckId){
        this.doctorCheck.checkSummaryList = [];
        return;
      }
      // console.log(`/api/app/registerchecksummary/getregisterchecksummarylist?RegisterCheckId=${RegisterCheckId}`)
      getapi(`/api/app/registerchecksummary/getregisterchecksummarylist?RegisterCheckId=${RegisterCheckId}`)
        .then((res) => {
          console.log("checkSummaryList", res.data);
          if (res.code != -1) {
            this.doctorCheck.checkSummaryList = res.data;
          }
        })
        .catch((err) => {
          this.$message({ type: "error", message: `操作失败，原因：${err}` });
        });
    },

    //获取建议
    checkSuggestionList(RegisterCheckId) {
      if(!RegisterCheckId){
        this.doctorCheck.checkSuggestionList = [];
        return;
      }
      // console.log(`/api/app/registerchecksuggestion/getregisterchecksuggestionlist?RegisterCheckId=${RegisterCheckId}`)
      getapi(`/api/app/registerchecksuggestion/getregisterchecksuggestionlist?RegisterCheckId=${RegisterCheckId}`)
        .then((res) => {
          console.log("checkSuggestionList", res.data);
          if (res.code != -1) {
            this.doctorCheck.checkSuggestionList = res.data;
          }
        })
        .catch((err) => {
          this.$message({ type: "error", message: `操作失败，原因：${err}` });
        });
    },

    //选择组合项目
    rowClick(row) {
      
    },

    //拖拽
    rowDrop() {
      this.$nextTick(() => {
        const el = document.querySelector("#tableSummary tbody");
        console.log('el0',el)
        const that = this;
        Sortable.create(el, {
          animation: 150, // ms, number 单位：ms，定义排序动画的时间
          //拖拽结束
          onEnd({ newIndex, oldIndex }) {            
            that.isshow = false;
            const currRow = that.doctorCheck.checkSummaryList.splice(oldIndex, 1)[0];
            that.doctorCheck.checkSummaryList.splice(newIndex, 0, currRow);    
            console.log('el',el)       
          },
        });
      });
    }, 
    
    //拖拽
    rowDropSuggestion() {
      this.$nextTick(() => {
        const el = document.querySelector("#tableSuggestion tbody");
        //console.log('tbody',tbody)
        const that = this;
        Sortable.create(el, {
          animation: 150, // ms, number 单位：ms，定义排序动画的时间
          //拖拽结束
          onEnd({ newIndex, oldIndex }) {            
            that.isshow = false;
            const currRow = that.doctorCheck.checkSuggestionList.splice(oldIndex, 1)[0];
            that.doctorCheck.checkSuggestionList.splice(newIndex, 0, currRow);           
          },
        });
      });
    }, 

  },

  //监听事件
  watch: {
    //检查项目切换
    "doctorCheck.RegisterCheckId"(newVal, oldVal) {
      console.log("watch doctorCheck.RegisterCheckId newVal：", newVal, " oldVal：", oldVal);      
      this.checkSummaryList(newVal)
      this.checkSuggestionList(newVal)      
    },
  },
};
</script>
<style scoped>
@import '../../assets/css/global_table.css';
</style>