peisweb/src/components/doctorCheck/CheckItemList.vue

<template>
  <div>
    <el-table :data="doctorCheck.checkItemList" style="width: 100%" height="350" 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" />
        </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(['dict', 'doctorCheck']),
  },

  methods: {



    //选择组合项目
    rowClick(row) {
      //registerCheckId
       // "itemResultTemplates": [
      //   {
      //     "itemId": "3a0c6555-0dad-55b4-b59f-b11e8074cfdd",
      //     "result": "阳性",
      //     "diagnosisId": "db34f48c-8c2f-9311-076d-302dc31930e7",
      //     "isNameIntoSummary": "Y",
      //     "isResultIntoSummary": "Y",
      //     "resultStatusId": "08",
      //     "simpleCode": null
      //   },
      //   {
      //     "itemId": "3a0c6555-0dad-55b4-b59f-b11e8074cfdd",
      //     "result": "阴性",
      //     "diagnosisId": "db34f48c-8c2f-9311-076d-302dc31930e7",
      //     "isNameIntoSummary": "Y",
      //     "isResultIntoSummary": "Y",
      //     "resultStatusId": "08",
      //     "simpleCode": null
      //   }
      // ],
      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 scoped>
.el-table .warning-row {
  background: rgb(240, 125, 125);
}

.el-table .refuse-row {
  background: rgb(192, 192, 192);
}
</style>