xiangan_pc/src/components/360View/collection.vue

<template>
  <div class="collection">
    <div class="collection_title">个人收藏</div>
    <div style="flex: 1">
      <el-button v-if="!tableData.length" size="mini" @click="dialogFormVisible = true">新增节点</el-button>
      <el-tree
        v-else
        :data="tableData"
        :props="collectProps"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
      >
        <span slot-scope="{ node, data }" class="custom-tree-node" :name="node.id">
          <span style="display: inline-block;min-width: 100px">
            <span>{{ node.label }}</span>
          <!--          <el-input v-else v-model="editName" :autofocus="true" @blur="" @change="getRename" />-->
          </span>
          <span>
            <el-dropdown trigger="click" @command="(command)=>addNode(command,node,data)">
              <span>
                <i class="el-icon-plus" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="same">新增同级节点</el-dropdown-item>
                <el-dropdown-item command="child">新增子级节点</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown trigger="click" style="margin-left: 10px" @command="(command)=>handleNode(command,node,data)">
              <span>···</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="rename">重命名</el-dropdown-item>
                <el-dropdown-item command="delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </span>
      </el-tree>
      <el-dialog width="30%" :modal="false" title="节点名称" :visible.sync="dialogFormVisible">
        <el-input v-model="editName" />
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmNode()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <div style="display:flex;text-align: center;padding: 16px">
        <span>备注：</span>
        <el-input v-model="remark" style="flex: 1" type="textarea" resize="none" clearable placeholder="请输入备注" />
      </div>
      <div style="text-align: right;padding:0 16px 16px">
        <el-button style="width: 180px" type="primary" size="small" @click="handleAddPatient">收藏当前患者</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import dialogjs from '@/mixins/dialog'
import infoDetail from './infoDetail'

export default {
  components: {
    infoDetail
  },
  mixins: [dialogjs],
  props: {
    patientIdNumber: {
      type: String,
      default: ''
    },
    platform: {
      type: String,
      default: ''
    },
    patientId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      remark: '',
      currentNumber: '',
      editName: '',
      collectProps: {
        // children: 'childs',
        // label: 'name'
      },
      addParam: {
        id: 0,
        parentId: 0
      },
      doctorId: JSON.parse(window.localStorage.getItem('qg-userData')).id,
      collectData: [],
      tableData: [{
        id: 1,
        label: '一级 1',
        isEdit: false,
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        isEdit: false,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        isEdit: false,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      setPlanList: [],
      addFollowList: [],
      patientInfoHeadHeight: '',
      crfSelectVisible: false
    }
  },
  watch: {

  },
  async created() {
    this.initPatient()
  },
  mounted() {

  },
  methods: {
    // 初始化获取或者相关信息
    initPatient() {
      this.findTree()
      this.queryPatientRemarks()
    },
    // 获取当前或者最新备注
    async queryPatientRemarks() {
      const { data } = await this.$http.get('/tree/findTreeIsExistPatient', {
        params: {
          doctorId: this.doctorId,
          patientId: this.patientId,
          platform: this.platform
        }
      })
      console.log('备注', data)
    },
    // 查询树结构
    async findTree() {
      const { data } = await this.$http.get(`/tree/findTree`, {
        params: {
          doctorId: JSON.parse(window.localStorage.getItem('qg-userData')).id,
          platform: this.platform
        }
      })
      console.log('树结构', data)
      // this.tableData = data
    },
    // 或者详情目录结构包含或者备注信息
    // async patientTrees() {
    //   const { data } = await this.$http.get('/tree/findTreeIsExistPatient', {
    //     params: {
    //       doctorId: this.doctorId,
    //       patientId: this.patientId,
    //       platform: this.platform
    //     }
    //   })
    //   console.log('详情目录', data)
    // },
    searchRemark(data) {
      // this.treeId = data.id
      // this.remark = data.hisManagePatientEntity ? data.hisManagePatientEntity.remark : ''
      // this.remarkId = data.hisManagePatientEntity ? data.hisManagePatientEntity.id : ''
    },
    handleAddPatient() {
      this.$http.post('/tree/addPatientTree', {})
    },
    // 新增节点
    addNode(command, node) {
      switch (command) {
        case 'same':
          this.dialogFormVisible = true
          this.addParam.id = node.id
          this.addParam.parentId = node.parent.id
          this.editName = node.name
          break
        case 'child':
          this.addParam.id = node.id
          this.addParam.parentId = node.parent.id
          this.editName = node.name
          break
        default:
          this.addParam.id = 0
          this.addParam.parentId = 0
          this.editName = ''
          break
      }
    },
    // 确定新增节点
    async confirmNode() {
      const params = {
        createDate: new Date().getDate(),
        doctorId: this.doctorId,
        flag: '1',
        name: this.editName,
        platform: this.platform,
        weight: 1,
        ...this.addParam
      }
      await this.$http.post('/tree/addTree', params)
      await this.findTree()
      this.dialogFormVisible = false
    },
    handleNode(command, node, data) {
      if (command === 'delete') {
        this.deleteNode(node, data)
      } else {
        this.editNode(node, data)
      }
    },
    // 删除树节点
    deleteNode(node, data) {
      this.addParam.id = node.id
      this.addParam.parentId = node.parent.id
      const params = {
        createDate: new Date().getDate(),
        doctorId: this.doctorId,
        flag: '1',
        name: data.label,
        platform: this.platform,
        weight: 1,
        ...this.addParam
      }
      this.$http.post('/tree/deleteTree', params)
      this.findTree()
    },
    // 重命名
    editNode(node, data) {
      this.dialogFormVisible = true
      this.editName = node.label
      this.findTree()
    }
  }
}
</script>

<style lang="scss" scoped>
.collection {
  width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .collection_title{
    font-size: 16px;
    font-weight: bold;
    padding: 18px;
  }
  .cell-cursor {
    cursor: pointer;
    color: #1e79ff;
  }
  .table-column-disable {
    color: #dddd;
  }
  ::v-deep .el-textarea__inner{
    height: 164px;
  }
}
</style>