peisweb/src/components/doctorCheck/CheckItemList.vue

<template>
  <div>
    <el-table :data="doctorCheck.checkItemList" style="width: 100%" :height="window.pageHeight < 600
        ? Math.floor(((380 - 40) * 3) / 5)
        : Math.floor(((window.pageHeight - 220 - 40) * 3) / 5)
      " :row-style="{ height: '30px' }" border @row-click="rowClick">
      <el-table-column prop="itemName" label="项目" width="180" />
      <el-table-column prop="result" label="结果" width="500">
        <template slot-scope="scope">
          <el-autocomplete style="width: 480px" class="inline-input" type="textarea"
            v-model="doctorCheck.checkItemList[scope.$index].result" :fetch-suggestions="querySearch" placeholder="请输入结果值"
            @select="handleSelect" :disabled="doctorCheck.RegisterCheckEdit.completeFlag == '1' ||
              doctorCheck.RegisterCheckEdit.completeFlag == '2'
              " :autosize="{ minRows: 1, maxRows: 100 }" />
        </template>
      </el-table-column>
      <el-table-column prop="unit" label="单位" width="80" />
      <el-table-column prop="referenceRangeValue" label="参考范围" width="120" />
    </el-table>
  </div>
</template>



<script>
import { mapState } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";

export default {
  components: {},
  data() {
    return {
      restaurants: [], //结果模版
      currentRow: -1, //当前操作的行
    };
  },

  created() { },

  //挂载完成
  mounted() { },

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

  methods: {
    //选择项目
    rowClick(row) {
      this.doctorCheck.checkItem = row;
      this.restaurants = row.itemResultTemplates;
    },

    //检查组合项目下所包含的明细项目
    checkItemList(RegisterCheckId) {
      console.log(
        `/api/app/registercheckitem/getlistinregistercheckid?RegisterCheckId=${RegisterCheckId}`
      );
      getapi(
        `/api/app/registercheckitem/getlistinregistercheckid?RegisterCheckId=${RegisterCheckId}`
      )
        .then((res) => {
          console.log("checkItemList", res.data);
          if (res.code == 1) {
            this.doctorCheck.checkItemList = res.data;
          }
        })
        .catch((err) => {
          this.$message({ type: "error", message: `操作失败，原因：${err}` });
        });
    },
    querySearch(queryString, cb) {
      var restaurants = [...this.restaurants]; //[{ value: '阴性' },{ value: '阳性' }]
      restaurants.forEach((item) => {
        return (item.value = item.result);
      });
      console.log("restaurants", restaurants);
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },

    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant["value"]
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
  },

  //监听事件
  watch: {
    //检查项目切换
    "doctorCheck.RegisterCheckId"(newVal, oldVal) {
      console.log(
        "watch doctorCheck.RegisterCheckId newVal：",
        newVal,
        " oldVal：",
        oldVal
      );
      if (newVal != oldVal && newVal != "") {
        this.checkItemList(newVal);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/css/global.css";

::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  padding: 0;
}


</style>