ncs_ui/src/views/hospitalFrame/frameTreeView.vue

<template>
  <div>
    <el-container :style="{height: asideHeight+'px'}">
      <el-aside width="280px" style="border-color: rgb(238, 241, 246)">
        <div class="el-row--flex">
          <el-input
            v-model="filterText"
            :placeholder="this.$t('frameManage.keywordsFilter')"
            clearable
          />
          <el-button
            type="text"
            size="mini"
            style="margin-left: 10px;color: #67C23A"
            @click="quickCreateFrame"
          >{{ this.$t('frameManage.quickCreate') }}</el-button>

        </div>
        <el-tree
          ref="frameTree"
          :data="treeData"
          :show-checkbox="false"
          node-key="id"
          :default-expand-all="true"
          :auto-expand-parent="true"
          :expand-on-click-node="false"
          :highlight-current="true"
          :current-node-key="selectedNodeId"
          draggable
          :accordion="true"
          :filter-node-method="filterNode"
          @node-drag-start="nodeDragStart"
          @node-drop="nodeDrop"
          @node-click="nodeClick"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <el-tooltip
                :content="data.full_name"
                :disabled="isShowTooltip"
                :open-delay="300"
                placement="top"
                effect="dark"
              >
            <!--            <span><svg-icon :icon-class="data.type===4?'sickroom':data.type===5?'bed':'area'" />{{ data.full_name }}</span>-->
              <span @mouseover="mouseOver($event)"
                  class="over-ellipsis"
              ><svg-icon
                  :style="data.customer_id ? 'color: #0a901c' : ''"
                  :icon-class="data.type===4?'sickroom':data.type===5?'bed':'area'"
              />{{ data.full_name }}</span>
            </el-tooltip>
            <span class="top-right">
              <el-button
                v-if="data.type!==5"
                type="text"
                size="mini"
                icon="el-icon-plus"
                @click.stop="() => append(data)"
              />
              <el-button
                type="text"
                v-if="data.type===5||data.type===4"
                size="mini"
                icon="el-icon-edit"
                @click.stop="() => edit(data)"
              />
              <el-button
                type="text"
                v-if="data.type===5||data.type===4"
                :disabled="data.type===1 || data.type===3"
                size="mini"
                icon="el-icon-delete"
                @click.stop="() => remove(data)"
              />
               <el-tooltip class="item" effect="light" :content="$t('frameManage.renameRooms')" placement="top">
               <el-button
                       v-if="data.type===3"
                       type="text"
                       size="mini"
                       icon="el-icon-c-scale-to-original"
                       @click.stop="() => batchRenameRoom(data)"
               />
               </el-tooltip>
               <el-tooltip class="item" effect="light" :content="$t('frameManage.renameBeds')" placement="top">
              <el-button
                      v-if="data.type===3"
                      type="text"
                      size="mini"
                      icon="el-icon-tickets"
                      @click.stop="() => beatchRenameBed(data)"
              />
               </el-tooltip>
            </span>
          </span>
        </el-tree>
      </el-aside>
      <el-main>
        <el-tabs v-model="activeName" style="margin:0px;" type="border-card">
          <el-tab-pane :label="this.$t('frameManage.memberList')" name="frameInfo">
            <keep-alive>
              <customer-manager v-if="uiVersion===2" :frame="selectedNode" @saved="handleCustomerChange" />
              <patient-manager v-if="uiVersion===1" :frame="selectedNode" @saved="handleCustomerChange" />
              <elderly-care-manager v-if="uiVersion===3" :frame="selectedNode" @saved="handleCustomerChange" />
            </keep-alive>
          </el-tab-pane>
          <el-tab-pane :label="this.$t('frameManage.deviceList')" name="deviceList">
            <keep-alive>
              <device-manager :frame="selectedNode" />
            </keep-alive>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>

    <!---添加空间结构弹窗 -->
    <el-dialog :title="frameEditTitle" :visible.sync="frameDialogVisible" width="500px">
      <el-form ref="editForm" :model="frameInfo" :rules="rules" label-width="130px">
        <el-row>
          <el-col :span="24">
            <!--医院结构名称-->
            <el-form-item :label="this.$t('action.name')" prop="name">
              <el-input v-model="frameInfo.name" :maxlength="20" @change="frameChange">
                <template slot="append">{{ frameInfo.type === 4? this.$t('frameManage.room') : this.$t('frameManage.bed') }}</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <!--医院结构别名-->
            <el-form-item :label="this.$t('action.alias')" prop="alias">
              <el-input v-model="frameInfo.alias" :maxlength="20" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <!--医院结构别名-->
            <el-form-item :label="this.$t('action.fullName')" prop="full_name">
              <el-input v-model="frameInfo.full_name" :maxlength="20" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row hidden>
          <el-col :span="12">
            <el-form-item :label="this.$t('action.type')">
              <el-radio v-model="frameInfo.type" :label="1">{{ this.$t('frameManage.room') }}</el-radio>
              <el-radio v-model="frameInfo.type" :label="2">{{ this.$t('frameManage.bed') }}</el-radio>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" class="save" @click="handleFrameSubmit('editForm')">{{ this.$t('action.yes') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!---添加空间结构弹窗 -->

    <!---快速创建结构弹窗 -->
    <el-dialog :title="this.$t('frameManage.quickCreateFrame')" :visible.sync="frameQuickCreateVisible" width="620px">
      <el-form ref="createFrameForm" :model="createFrameModel" :rules="createFrameRules" label-width="200px">
        <el-row>
          <el-col :span="17">
            <!--前缀-->
            <el-form-item :label="this.$t('frameManage.prefix')" prop="prefix">
              <el-input v-model="createFrameModel.prefix" :placeholder="$t('frameManage.prefixExample')" maxlength="10" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="el-form-item__label" style="margin-left: 20px">
              {{ this.$t('frameManage.example') }}：{{ $t('frameManage.prefixExample') }}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <!--开始房间号-->
            <el-form-item :label="this.$t('frameManage.startRoom')" prop="start_no">
              <el-input-number v-model="createFrameModel.room_start_no" :min="1" @change="roomStartChange" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <!--结束房间号-->
            <el-form-item :label="this.$t('frameManage.endRoom')" prop="end_no">
              <el-input-number v-model="createFrameModel.room_end_no" :min="createFrameModel.room_start_no" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <!--每房床位数-->
            <el-form-item :label="this.$t('frameManage.bedQuantity')" prop="beds_per_room">
              <el-input-number v-model="createFrameModel.beds_per_room" :min="1" :max="20" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18">
            <!--每房床位数-->
            <el-form-item :label="this.$t('frameManage.showRoomDigit')" prop="room_num_bits">
              <el-input-number v-model="createFrameModel.room_num_bits" :min="1" :max="4" @change="(val)=>{bitNumChange(val,'room')}" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="el-form-item__label">
              {{ this.$t('frameManage.example') }}：{{ room_num_demo }}
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18">
            <!--每房床位数-->
            <el-form-item :label="this.$t('frameManage.showBedDigit')" prop="bed_num_bits">
              <el-input-number v-model="createFrameModel.bed_num_bits" :min="1" :max="4" @change="(val)=>{bitNumChange(val,'bed')}" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="el-form-item__label">
              {{ this.$t('frameManage.example') }}：{{ bed_num_demo }}
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="17">
            <!--需要跳过的房间号-->
            <el-form-item :label="this.$t('frameManage.skipRoomNo')" prop="skip_room_no">
              <el-input v-model="createFrameModel.skip_room_no" :placeholder="$t('frameManage.skipMsg1')" clearable :maxlength="20"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="el-form-item__label" style="margin-left: 20px">
              {{ this.$t('frameManage.example') }}：{{ $t('frameManage.skipMsg2') }}
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="17">
            <!--需要跳过的床位号-->
            <el-form-item :label="this.$t('frameManage.skipBedNo')" prop="skip_bed_no">
              <el-input v-model="createFrameModel.skip_bed_no" :placeholder="$t('frameManage.skipMsg1')" clearable :maxlength="20"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="el-form-item__label" style="margin-left: 20px">
              {{ this.$t('frameManage.example') }}：{{ $t('frameManage.skipMsg2') }}
            </div>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" class="save" @click="quickCreateSubmit()">{{ this.$t('action.yes') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!---快速创建结构弹窗 -->
<!--重命名床位-->
    <el-dialog :title="this.$t('frameManage.renameBeds')" :visible.sync="renameBedVisible" width="620px">
      <el-form ref="createFrameForm" :model="renameBedFrameModel" :rules="createFrameRules" label-width="200px">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('frameManage.renameRule')">
              <el-radio-group v-model="renameBedFrameModel.rename_type">
                <el-radio :label="1">{{$t('frameManage.orderInPart')}}</el-radio>
                <el-radio :label="2">{{$t('frameManage.orderInRoom')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="17">

            <!--前缀-->
            <el-form-item :label="this.$t('frameManage.prefix')" prop="prefix">
              <el-input v-model="renameBedFrameModel.prefix" @change="generateBedExample" :placeholder="$t('frameManage.renamePrefixExample')" maxlength="10" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="el-form-item__label" style="margin-left: 20px">
              {{ this.$t('frameManage.example') }}：{{ $t('frameManage.renamePrefixExample') }}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <!--床位数字位数-->
            <el-form-item :label="this.$t('frameManage.showBedDigit')" prop="bed_num_bits">
              <el-input-number v-model="renameBedFrameModel.bed_num_bits" :min="1" :max="4" @change="(val)=>{renameBedBitNumChange(val,'bed')}" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="el-form-item__label">
              {{ this.$t('frameManage.example') }}：{{ bed_num_demo }}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="17">
            <!--需要跳过的床位号-->
            <el-form-item :label="this.$t('frameManage.skipBedNo')" prop="skip_bed_no">
              <el-input v-model="renameBedFrameModel.skip_bed_no" @change="generateBedExample" :placeholder="$t('frameManage.skipMsg1')" clearable :maxlength="100"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="el-form-item__label" style="margin-left: 20px">
              {{ this.$t('frameManage.example') }}：{{ $t('frameManage.skipMsg2') }}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="17">

            <!--名称后缀-->
            <el-form-item :label="this.$t('frameManage.nameSuffix')" prop="prefix">
              <el-input v-model="renameBedFrameModel.name_suffix" :placeholder="$t('frameManage.suffixExample')" maxlength="10" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="el-form-item__label" style="margin-left: 20px">
              {{ this.$t('frameManage.example') }}：{{ $t('frameManage.suffixExample') }}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="17">

            <!--全名后缀-->
            <el-form-item :label="this.$t('frameManage.suffix')" prop="prefix">
              <el-input v-model="renameBedFrameModel.suffix" :placeholder="$t('frameManage.suffixExample')" maxlength="10" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="el-form-item__label" style="margin-left: 20px">
              {{ this.$t('frameManage.example') }}：{{ $t('frameManage.suffixExample') }}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item  >
            <el-checkbox v-model="renameBedFrameModel.all_part" :true-label="1" :false-label="0">{{ this.$t('frameManage.updateForAllPart') }}</el-checkbox>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="this.$t('frameManage.namePreview')" >
            <el-tag v-for="item in bedExamples" :key="item.name">{{item.name}}{{renameBedFrameModel.name_suffix}}</el-tag>
          </el-form-item>
          <el-form-item :label="this.$t('frameManage.fullNamePreview')" >
            <el-tag v-for="item in bedExamples" :key="item.name">{{item.name}}{{renameBedFrameModel.suffix}}</el-tag>
          </el-form-item>
        </el-row>


        <el-form-item>
          <el-button type="primary" class="save" @click="renameBedNameSubmit">{{ this.$t('action.yes') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--重命名床位-->
    <!-- 重命名房间名称-->
    <el-dialog :title="this.$t('frameManage.renameRooms')" :visible.sync="renameRoomVisible" width="620px">
      <el-form ref="createFrameForm" :model="renameRoomFrameModel" :rules="createFrameRules" label-width="200px">
        <el-row>
          <el-col :span="17">

            <!--前缀-->
            <el-form-item :label="this.$t('frameManage.prefix')" prop="prefix">
              <el-input v-model="renameRoomFrameModel.prefix" @change="generateRoomExample" :placeholder="$t('frameManage.renamePrefixExample')" maxlength="10" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="el-form-item__label" style="margin-left: 20px">
              {{ this.$t('frameManage.example') }}：{{ $t('frameManage.renamePrefixExample') }}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <!--床位数字位数-->
            <el-form-item :label="this.$t('frameManage.showRoomDigit')" prop="room_num_bits">
              <el-input-number v-model="renameRoomFrameModel.room_num_bits" :min="1" :max="4" @change="(val)=>{renameRoomBitNumChange(val,'bed')}" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="el-form-item__label">
              {{ this.$t('frameManage.example') }}：{{ bed_num_demo }}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="17">
            <!--需要跳过的床位号-->
            <el-form-item :label="this.$t('frameManage.skipRoomNo')" prop="skip_room_no">
              <el-input v-model="renameRoomFrameModel.skip_room_no" @change="generateRoomExample" :placeholder="$t('frameManage.skipMsg1')" clearable :maxlength="100"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="el-form-item__label" style="margin-left: 20px">
              {{ this.$t('frameManage.example') }}：{{ $t('frameManage.skipMsg2') }}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="17">

            <!--全名后缀-->
            <el-form-item :label="this.$t('frameManage.roomSuffix')" prop="prefix">
              <el-input v-model="renameRoomFrameModel.suffix" :placeholder="$t('frameManage.room')" maxlength="10" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="el-form-item__label" style="margin-left: 20px">
              {{ this.$t('frameManage.example') }}：{{ $t('frameManage.room') }}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item  >
            <el-checkbox v-model="renameRoomFrameModel.all_part" :true-label="1" :false-label="0">{{ this.$t('frameManage.updateForAllPart') }}</el-checkbox>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="this.$t('frameManage.namePreview')" >
            <el-tag v-for="item in roomExamples" :key="item.name">{{item.name}}{{renameRoomFrameModel.suffix}}</el-tag>
          </el-form-item>
        </el-row>


        <el-form-item>
          <el-button type="primary" class="save" @click="renameRoomNameSubmit">{{ this.$t('action.yes') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  <!--- 重命名房间 -->
  </div>
</template>

<script>
import * as HospitalFrame_API from '@/api/ncs_hospitalFrame'
import * as API_Frame from '@/api/ncs_hospitalFrame'
import CustomerManager from '../customer/components/customerManager'
import DeviceManager from '../ncs-device/components/deviceManager'
import PatientManager from '../customer/components/patientManager'
// import { uiVersion } from '@/utils/domain'
import { FRAME_TYPE } from '@/utils/enum/FrameTypeEnum'
import ElderlyCareManager from "../customer/components/elderlyCareManager"
const uiVersion = domain.uiVersion
export default {
  name: 'FrameTreeView',
  components: {ElderlyCareManager, PatientManager, DeviceManager, CustomerManager },
  data() {
    return {
      treeData: [],
      treeDataClone: [],
      isShowTooltip: false,
      /** 当前选中的树节点 */
      selectedNodeId: 0,
      selectedNode: {},
      filterText: '',
      activeName: 'frameInfo',
      /** 上级机构数组 **/
      parents: [],
      /** frame 编辑弹窗 **/
      frameEditTitle: this.$t('action.add'),
      frameDialogVisible: false,
      renameBedVisible:false,
      renameRoomVisible:false,
      frameInfo: {},
      renameBedFrameModel:{
       bed_num_bits:2,
        rename_type:1,
        all_part:0
      },
      renameRoomFrameModel:{
        room_num_bits:2,
        all_part:0
      },
      bedExamples:[{name:'01'},{name:'02'},{name:'03'},{name:'04'},{name:'05'},{name:'06'},{name:'07'},{name:'08'},{name:'09'},{name:'10'}],
      roomExamples:[{name:'01'},{name:'02'},{name:'03'},{name:'04'},{name:'05'},{name:'06'},{name:'07'},{name:'08'},{name:'09'},{name:'10'}],
      rules: {
        name: [
          this.MixinRequired(this.$t('frameManage.inputFrameName')),
          { min: 1, max: 20, message: this.$t('frameManage.inputLong'), trigger: 'blur' }
        ],
        alias: [
          { min: 1, max: 20, message: this.$t('frameManage.inputLong'), trigger: 'blur' }
        ],
        full_name: [
          this.MixinRequired(this.$t('frameManage.inputFrameFullName')),
          { min: 1, max: 20, message: this.$t('frameManage.inputLong'), trigger: 'blur' }
        ]
      },
      /** 快速创建空间结构弹窗 **/
      frameQuickCreateVisible: false,
      createFrameModel: {
        prefix: '',
        room_start_no: 1,
        room_end_no: 2,
        beds_per_room: 4,
        room_num_bits: 2,
        bed_num_bits: 2,
        skip_room_no: '',
        skip_bed_no: ''
      },
      bed_num_demo: '01',
      room_num_demo: '01',
      createFrameRules: {

      },
      uiVersion: uiVersion
    }
  },
  computed: {
    asideHeight() {
      return this.mainAreaHeight
    }
  },
  watch: {
    selectedNodeId(newval, old) {
      console.log('watch', newval)
      this.selectedNode = this.findNodeById(this.treeData, newval)
    },
    filterText(val) {
      this.$refs.frameTree.filter(val)
    }
  },
  mounted() {
    this.getFrameTree().then(() => {
      this.selectedNodeId = this.treeData[0].id
      this.$refs.frameTree.setCurrentKey(this.selectedNodeId)
    }).catch(err => {
      this.$message.error(err.message)
    })
  },
  methods: {
    /**
     * 获取空间结构树形数据
     * */
    getFrameTree() {
      return new Promise((resolve, reject) => {
        API_Frame.getframestruct(this.$store.getters.partId, FRAME_TYPE.PART).then(res => {
          this.treeData = res.frameTree
          resolve()
        }).catch(err => {
          reject(err)
        })
      })
    },

    append(data) {
      if (data.type === FRAME_TYPE.ROOM) {
        this.frameEditTitle = '【' + data.full_name + '】' + this.$t('frameManage.addBed')
      } else {
        this.frameEditTitle = '【' + data.full_name + '】' + this.$t('frameManage.addRoom')
      }
      this.frameInfo = {
        hospital_id: data.hospital_id,
        parent_id: data.id,
        type: data.type === FRAME_TYPE.ROOM ? FRAME_TYPE.BED : FRAME_TYPE.ROOM,
        parent_name: data.name,
        name: '',
        alias: ''
      }
      this.frameDialogVisible = true
      console.log('append', data)
    },
    edit(data, e) {
      const parentNode = this.findNodeById(this.treeData, data.parent_id)
      this.frameInfo = {
        ...data,
        parent_name: parentNode === null ? '' : parentNode.name
      }
      this.frameEditTitle = this.$t('frameManage.editFrame')
      this.frameDialogVisible = true
    },
    remove(data) {
      let warning = ''
      if (data.type === FRAME_TYPE.ROOM) {
        warning = this.$t('frameManage.sureDelete') + '【' + data.full_name + '】' + this.$t('frameManage.allBad')
      } else {
        warning = this.$t('frameManage.sureDeleteBed') + '【' + data.full_name + '】?'
      }
      this.$confirm(warning, this.$t('action.waring' + ''), {
        confirmButtonText: this.$t('action.yes'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        HospitalFrame_API.deleteHospitalFrame(data.id).then(response => {
          this.$message({
            type: 'success',
            message: this.$t('action.deleted')
          })
          this.getFrameTree().then(() => {
            // 判断选中节点是否被删除，如果被删除需要重新选择根节点
            const selectNode = this.findNodeById(this.treeData, this.selectedNodeId)
            if (selectNode === null) {
              this.selectedNodeId = this.treeData[0].id
            }
            this.$refs.frameTree.setCurrentKey(this.selectedNodeId)
          })
        }).catch(response => {
          this.$message({
            type: 'info',
            message: response.message
          })
        })
      }).catch(() => {

      })
    },

    handleFrameSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const params = this.MixinClone(this.frameInfo)
          if (params.id) {
            HospitalFrame_API.updateHospitalFrame(params.id, params).then(response => {
              this.$message.success(this.$t('action.editSuccess') + '')
              this.frameDialogVisible = false
              this.getFrameTree().then(() => {
                this.selectedNodeId = response.id
                this.$refs.frameTree.setCurrentKey(this.selectedNodeId)
              })
            })
          } else {
            if (!params.part_id) {
              params.part_id = this.$store.getters.partId
            }

            HospitalFrame_API.addHospitalFrame(params).then(response => {
              this.$message.success(this.$t('action.addSuccess') + '')
              this.frameDialogVisible = false
              this.getFrameTree()
            })
          }
        } else {
          this.$message.error(this.$t('action.fromError'))
          return false
        }
      })
    },
    /** 开始拖拽之前保存treeData数据，拖拽完成后判定能否拖拽到目标节点，不允许拖拽把初始数据覆盖拖拽后的数据，否则拖拽成功
     * @param node
     * @param event
     */
    nodeDragStart(node, event) {
      this.treeDataClone = this.MixinClone(this.treeData)
    },
    /** 拖拽结束 **/
    nodeDrop(node, target, position, event) {
      var success = true
      const nparent = this.findNodeById(this.treeDataClone, node.data.parent_id)
      const tparent = this.findNodeById(this.treeDataClone, target.data.parent_id)
      if (position === 'inner') { // 进入了某个节点之中,不能将某一节点拖入同级节点，也不能跨级拖动
        if (Number(node.data.type) <= Number(target.data.type) || Number(node.data.type) - Number(target.data.type) > 1) {
          this.treeData = this.treeDataClone
          success = false
        }
      } else {
        // 查找Target和node的parent 判定target的parent类型与node的parent类型是否一致
        if (nparent === null || tparent === null || nparent.type !== tparent.type) {
          this.treeData = this.treeDataClone
          success = false
        }
      }
      if (success) { // 拖拽完成,更新node和target排序
        HospitalFrame_API.sort(node.data.id, target.data.id, position).then(res => {
          this.selectedNodeId = node.data.id
          this.getFrameTree().then(() => {
            this.$refs.frameTree.setCurrentKey(this.selectedNodeId)
            console.log('sid', this.selectedNodeId)
          })
        })
      }
    },
    /** 树形结构中查找指定Id节点 */
    findNodeById(data, id) {
      let node = null
      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          if (data[i].id === id) {
            node = data[i]
            break
          }
          if (data[i].children && data[i].children.length > 0) {
            const subresult = this.findNodeById(data[i].children, id)
            if (subresult !== null) {
              node = subresult
              break
            }
          }
        }
      }
      return node
    },
    /** 节点过滤方法 **/
    filterNode(value, data) {
      if (!value) return true
      return data.full_name.indexOf(value) !== -1
    },
    /** 点击树形节点  **/
    nodeClick(data, node, leaf) {
      this.$set(this, 'selectedNodeId', data.id)
    },
    /** 快速创建空间结构弹窗 **/
    quickCreateFrame() {
      this.frameQuickCreateVisible = true
    },

    quickCreateSubmit(formname) {
      const params = this.createFrameModel
      params.part_frame_id = this.treeData[0].id
      HospitalFrame_API.quickCreate(params).then(res => {
        this.$message.success(this.$t('action.createSuccess') + '')
        this.frameQuickCreateVisible = false
        this.getFrameTree().then(() => {
          this.$refs.frameTree.setCurrentKey(this.selectedNodeId)
        })
      }).catch(err => {
        this.$message.error(err.message)
      })
    },

    /** 显示位数变化 **/
    bitNumChange(val, frame_type) {
      const s = Array(val).join(0) + 1
      if (frame_type === 'room') {
        this.room_num_demo = s
      } else {
        this.bed_num_demo = s
      }
    },
    renameBedBitNumChange(val,frame_type){
      this.bitNumChange(val,frame_type)
      this.generateBedExample()
    },

    renameRoomBitNumChange(val,frame_type){
      this.bitNumChange(val,frame_type)
      this.generateRoomExample()
    },
    /** 起始位数变化 结束位置要根据起始位置的大小来变化 */
    roomStartChange(val) {
      console.log(val)
      if (val > this.createFrameModel.room_end_no) {
        this.createFrameModel.room_end_no = val
      }
    },
    /**
     * 名称输入变化
     * @param val
     */
    frameChange(val) {
      console.log('s', this.frameInfo)
      if (!this.frameInfo.full_name) {
        if (this.frameInfo.type === FRAME_TYPE.ROOM) {
          this.$set(this.frameInfo, 'full_name', val + this.$t('frameManage.room'))
          // this.frameInfo.full_name = val
        } else {
          this.$set(this.frameInfo, 'full_name', this.frameInfo.parent_name + '-' + val + this.$t('frameManage.bed'))
          // this.frameInfo.full_name =
        }
      }
    },
    handleCustomerChange() {
      this.getFrameTree()
    },
    mouseOver(event) {
      this.isShowTooltip =
          event.currentTarget.scrollWidth <= event.currentTarget.clientWidth;
    },
    beatchRenameBed(data){
      this.renameBedVisible=true
      console.log('data',data)
    },
    batchRenameRoom(data){
      this.renameRoomVisible=true
    },

    generateBedExample(){
      this.bedExamples=[]
      let total =10
      let skipNumber=[]
      if(this.renameBedFrameModel.skip_bed_no!==null&&this.renameBedFrameModel.skip_bed_no!==undefined&&this.renameBedFrameModel.skip_bed_no!==''){
        skipNumber = this.renameBedFrameModel.skip_bed_no.split(',').map(p=>Number(p))
        console.log('sn',this.renameBedFrameModel.skip_bed_no)
        total+=skipNumber.filter(p=>p<=10).length
      }else{
        total=10
      }

      for (let i = 1; i <=total ; i++) {
        if(skipNumber.includes(i)){
          continue
        }
        this.bedExamples.push({

          name:(this.renameBedFrameModel.prefix?this.renameBedFrameModel.prefix:'')+''+this.padding2(i,this.renameBedFrameModel.bed_num_bits)
        })
      }
    },
    generateRoomExample(){
      this.roomExamples=[]
      let total =10
      let skipNumber=[]
      if(this.renameRoomFrameModel.skip_room_no!==null&&this.renameRoomFrameModel.skip_room_no!==undefined&&this.renameRoomFrameModel.skip_room_no!==''){
        skipNumber = this.renameRoomFrameModel.skip_room_no.split(',').map(p=>Number(p))
        console.log('sn',this.renameRoomFrameModel.skip_room_no)
        total+=skipNumber.filter(p=>p<=10).length
      }else{
        total=10
      }

      for (let i = 1; i <=total ; i++) {
        if(skipNumber.includes(i)){
          continue
        }
        this.roomExamples.push({

          name:(this.renameRoomFrameModel.prefix?this.renameRoomFrameModel.prefix:'')+''+this.padding2(i,this.renameRoomFrameModel.room_num_bits)
        })
      }
    },
    padding2(num, length) {
    if((num + "").length >= length) {
      return num;
    }
     return this.padding2("0" + num, length)
   },
    renameBedNameSubmit(){
      API_Frame.renameBeds(this.$store.getters.partId,this.renameBedFrameModel).then(res=>{
        this.renameBedVisible=false
        this.getFrameTree().then(() => {
          this.selectedNodeId = this.treeData[0].id
          this.$refs.frameTree.setCurrentKey(this.selectedNodeId)
        }).catch(err => {
          this.$message.error(err.message)
        })
      }).catch(err=>{

      })
    },
    renameRoomNameSubmit(){
      API_Frame.renameRooms(this.$store.getters.partId,this.renameRoomFrameModel).then(res=>{
        this.renameRoomVisible=false
        this.getFrameTree().then(() => {
          this.selectedNodeId = this.treeData[0].id
          this.$refs.frameTree.setCurrentKey(this.selectedNodeId)
        }).catch(err => {
          this.$message.error(err.message)
        })
      }).catch(err=>{

      })
    }
  }
}
</script>

<style scoped>
.top-right{
  display: block;
  min-width: 50px;
  width: 60px;
  text-align: right;
  position: absolute;
  right: 1px;
}
.over-ellipsis{
  display: block;
  width: calc(100% - 60px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-aside{
    margin: 8px;
    padding: 8px;
    border-width: 1px;
    border-style: solid;
    background: #fff;
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
    .el-tree{margin-top: 8px}
    .el-main{
        margin: 8px;
        padding: 0;
    }
.el-tag+.el-tag{
  margin-left: 10px;
}
</style>