peisweb/src/components/doctorCheck/CheckSumSug.vue

<template>
  <div style="display: flex;">
    <div :style="`width:${sumWidth}px;`">
      <el-table id="tableSummary" row-key="id" :data="doctorCheck.checkSummaryList" size="samll" :height="sumHeight"
        width="100%" border>
        <el-table-column type="index" width="25" align="center" />
        <el-table-column prop="summary" label="小结">
          <template slot="header">
            <div style="display: flex;justify-content:space-between;">
              <div>小结</div>
              <div style="display: flex;">
                <div v-show="checkPagePriv(pagePriv.privs, '生成小结')">
                  <el-button type="primary" class="btnClass" @click="btnMakeDiagnosis">生成小结</el-button>
                </div>
                <div v-show="checkPagePriv(pagePriv.privs, '新增小结')">
                  <el-button type="primary" class="btnClass" @click="addSummary">新增小结</el-button>
                </div>
                <div v-show="checkPagePriv(pagePriv.privs, '保存结果')">
                  <el-button type="primary" class="btnClass" @click="save">保存结果</el-button>
                </div>
                <div v-show="checkPagePriv(pagePriv.privs, '审核')">
                  <el-button type="primary" class="btnClass" style="min-width: 40px;" @click="audit">审核</el-button>
                </div>
                <div v-show="checkPagePriv(pagePriv.privs, '排队')">
                  <el-button type="primary" class="btnClass" style="min-width: 40px;" @click="btnLineUp">排队</el-button>
                </div>
              </div>
            </div>
          </template>
          <template slot-scope="scope">
            <div style="display: flex;">
              <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>
              <el-button type="danger" style="min-width:23px;padding:2px;" icon="el-icon-delete"
                @click="delSum(scope.$index)"
                :disabled="doctorCheck.RegisterCheckEdit.completeFlag == '1' || doctorCheck.RegisterCheckEdit.completeFlag == '2'"
                size="small"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div :style="`margin-left:2px;width:${sumWidth}px;`">
      <el-table id="tableSuggestion" row-key="id" :data="doctorCheck.checkSuggestionList" size="samll" :height="sumHeight"
        width="100%" border>
        <el-table-column type="index" width="25" align="center" />
        <el-table-column prop="suggestion" label="建议">
          <template slot="header">
            <div style="display: flex;justify-content:space-between;">
              <div>建议</div>
              <div style="display: flex;">
                <div v-show="checkPagePriv(pagePriv.privs, '新增建议')">
                  <el-button type="primary" class="btnClass" @click="addSuggestion"
                    :disabled="doctorCheck.RegisterCheckEdit.completeFlag == '1' || doctorCheck.RegisterCheckEdit.completeFlag == '2'">新增建议</el-button>
                </div>
              </div>
            </div>
          </template>
          <template slot-scope="scope">
            <div style="display: flex;">
              <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>
              <el-button type="danger" style="min-width:23px;padding:2px;" icon="el-icon-delete"
                @click="delSug(scope.$index)"
                :disabled="doctorCheck.RegisterCheckEdit.completeFlag == '1' || doctorCheck.RegisterCheckEdit.completeFlag == '2'"
                size="small"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import Sortable from "sortablejs";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { getPagePriv, checkPagePriv, deepCopy } from "../../utlis/proFunc";
export default {
  components: {},
  props: ["registerCheckId", "isCheckPicture", "optGrant", "addSummary", "btnMakeDiagnosis", "save", "audit", "unAudit", "btnLineUp"],
  data() {
    return {
      pagePriv: {
        routeUrlorPageName: 'doctorCheck', //当前页面归属路由或归属页面权限名称
        privs: [] // 页面权限
      },
    };
  },

  created() {
    //获取用户当前页面的权限
    let userPriv = window.sessionStorage.getItem('userPriv')
    if (userPriv) this.pagePriv.privs = deepCopy(getPagePriv(this.pagePriv.routeUrlorPageName))
  },

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

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

    //小结宽度
    sumWidth() {
      return Math.floor((this.window.pageWidth - 200 - 110 - 15 - 4) / 2);
    },

    //小结高度
    sumHeight() {
      return this.window.pageHeight < 600 ? Math.floor((480 - (this.isCheckPicture ? 110 : 0)) * 2 / 5) : Math.floor((this.window.pageHeight - 120 - (this.isCheckPicture ? 110 : 0)) * 2 / 5);
    }
  },

  methods: {
    checkPagePriv,
    //获取小结
    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}` });
        });
    },


    //拖拽
    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);
          },
        });
      });
    },

    //删除小结
    delSum(index) {
      this.$confirm("此操作将删除该记录, 是否继续?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      }).then(() => {
        this.doctorCheck.checkSummaryList.splice(index, 1);
      }).catch(err => {
        if (err == "cancel") {
          // this.$message.info("已取消删除");
          console.log('已取消删除')
        }
      });
    },

    addSuggestion() {
      this.doctorCheck.checkSuggestionList.push({
        id: Math.random(),
        registerCheckId: this.doctorCheck.RegisterCheckEdit.id,
        suggestion: '',
      })
    },


    //删除建议明细
    delSug(index) {
      this.$confirm("此操作将删除该记录, 是否继续?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      }).then(() => {
        this.doctorCheck.checkSuggestionList.splice(index, 1);
      }).catch((err) => {
        if (err == "cancel") {
          // this.$message.info("已取消删除");
          console.log('已取消删除')
        }
      });
    },

  },

  //监听事件
  watch: {
    //检查项目切换
    // "doctorCheck.RegisterCheckId"(newVal, oldVal) {
    //   console.log("watch doctorCheck.RegisterCheckId newVal：", newVal, " oldVal：", oldVal);      
    //   this.checkSummaryList(newVal)
    //   this.checkSuggestionList(newVal)      
    // },
    //检查项目未切换换时 也可以强制刷新数据
    "dataTransOpts.refresh.register_check.S": {
      immediate: true,
      handler(newVal, oldVal) {
        console.log(`watch 小结 newVal:${newVal} oldVal:${oldVal} registerCheckId: ${this.dataTransOpts.tableS.register_check.id}`);
        this.checkSummaryList(this.dataTransOpts.tableS.register_check.id)
        this.checkSuggestionList(this.dataTransOpts.tableS.register_check.id)
      }
    },

  },
};
</script>
<style scoped>
@import '../../assets/css/global_table.css';

.btnClass {
  margin-left: 2px;
  height: 22px;
  padding: 2px 2px;
  /*原始 默认值 500 */
}

::v-deep .el-textarea__inner {
  min-height: 23px;
  height: 23px;
  line-height: 1.25;
  padding: 1px 15px 1px 2px;
}</style>