---

追溯记录图路上 代码如下 index.vue

<template>
    
  <div style="margin-left: 5%;margin-top: 6%">
<el-form style="margin-top: -5%; "  :inline="true">
    <el-form-item label="药品名称">
        <el-select v-model="drugs_code" placeholder="请选择" filterable clearable @change="changedrugs" >
    <el-option
      v-for="item in drugsList"
      :key="item.drugs_code"
      :label="item.drugs_name +'|' + item.drugs_code  + '|' + item.short_name" 
      :value="item.drugs_code">
    </el-option>
  </el-select>
</el-form-item>
    <el-form-item label="批号">
        <el-select v-model="batch_no" placeholder="请选择" filterable clearable  :disabled="isshow">
    <el-option
      v-for="item in batchList"
      :key="item.batch_no"
      :label="item.batch_no" 
      :value="item.batch_no">
    </el-option>
  </el-select></el-form-item>

  <!-- <el-form-item label="时间">
        <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item> -->



    <el-form-item > <el-button type="warning" @click="search"> 搜索</el-button></el-form-item>
</el-form>
    <right-tree
      v-if="list && list.length"
      :list="list"
      :showfields="showFields"
    ></right-tree>
  </div>
</template>
<script>
import RightTree from './RightTree'
import { formatDates, convertDateRange } from '@/api/house/recordinfo'
import { getTableZNMJG, postTableZNMJG } from '@/api/table/tableCommon'
export default {
    components:{
        RightTree,
    },
    data(){
        return{
            dateRange: [],
            isshow:true,
            drugs_code:'',
            drugs_name:'',
            batch_no:'',
            list: [
           
            ],
            drugsList:[],
            batchList:[],
            showFields: [
                {
                    name: '规格：',
                    key: 'name',
                },
                {
                    name: '批号：',
                    key: 'serviceId',
                },
            ],
        }
    },
    created(){

        this.getDrugs()
    },
    mounted() {
    const today = new Date()
    const startOfDay = new Date(today)
    startOfDay.setHours(0, 0, 0) // 设置为当天的 00:00:00

    const endOfDay = new Date(today)
    endOfDay.setHours(23, 59, 59) // 设置为当天的 23:59:59
    this.dateRange = formatDates([startOfDay, endOfDay])
  },
    methods:{
        search(){
            let _this = this;
            let parm = {};
            parm.drugs_code = this.drugs_code;
            parm.drugs_name = '';
            parm.batch_no = this.batch_no;
            parm.expire_date = '';

            postTableZNMJG('/AccountBook/Traceability',parm)
          .then(function (res) {
            
            if (res.code == 200) {
              _this.list = res.data;

            }

          })
          .catch(function (e) {
            _this.list=[];

          });
        },
        changedrugs(){
            let _this = this;
        let parm = {};
        this.batch_no = '';
        parm.drugs_code=  this.drugs_code
          postTableZNMJG('/AccountBook/Batch_noInfo' , parm)
          .then(function (res) {
            if (res.code == 200) {
              _this.batchList = res.data;
              _this.isshow = false;
            }
          })
          .catch(function (e) {
            _this.batchList=[];

          });
        },
        getDrugs(){
            let _this = this;
            let parm = {};
            parm.drugs_enable = 1;
            parm.is_bottle = 1;
            postTableZNMJG('/AccountBook/DrugsWhole',parm)
          .then(function (res) {
            if (res.code == 200) {
              _this.drugsList = res.data;
            }
          })
          .catch(function (e) {
            _this.drugsList=[];

          });
        }

    },
    
}
</script>

RightTree.vue

<template>
  

  <div class="TreeRight" v-if="showTree">
    <div class="childs">
      <div class="child" v-for="(item, index) in list" :key="item.id + '-child-' + index">
        <div class="child-item" :style="{ marginRight: item.children && item.children.length > 1 ? '20px' : '' }">
          <div class="childname" :id="item">
            <div v-if="item.id != '1'" class="content-box" :ref="item.id" :id="item.id">
              <el-button type="primary" round style="margin-left: 30%"> {{ item.dept_name }}</el-button>
              <!-- <span style="color:blue">  {{}} </span> -->
              <br />
              <div v-if="item.id == '1'">
                <span style="color: rgb(134, 143, 152); font-size: 12px">{{ tem.drusg_name }} </span>
                <br />
                <span style="color: rgb(134, 143, 152); font-size: 12px">规格：{{ item.drugs_specs }}</span>
                <br />
                <span style="color: rgb(134, 143, 152); font-size: 12px">批号：{{ item.batch_no }}</span>
              </div>
              <div style="display: flex" v-else>
                <span style="margin-left: 8%; color: rgb(134, 143, 152); font-size: 14px"
                  >存入:<el-button type="text" @click="details(item.id, item.drugs_code, '入库' ,item.batch_no)"> {{ item.replish_Qty }}</el-button>
                </span>
                <span style="margin-left: 5%; color: rgb(134, 143, 152); font-size: 14px"
                  >取出:<el-button type="text" @click="details(item.id, item.drugs_code, '出库' ,  item.batch_no)"> {{ item.pick_Qty }}</el-button>
                </span>
                <span style="margin-left: 5%; color: rgb(134, 143, 152); font-size: 14px"
                  >库存:<el-button type="text" @click="details" disabled> {{ item.stock_Qty }}</el-button>
                </span>
              </div>
              <!-- <p
                v-for="(itemshow,index3) in showfields"
                :key="'itemshow'+index3"
              >{{itemshow.name}}{{item[itemshow.key]}}</p> -->
            </div>
            <div v-else class="content-boxOne" :ref="item.id" :id="item.id">
              <el-button type="primary" round style="margin-left: 30%"> {{ item.dept_name }}</el-button>
              <!-- <span style="color:blue">  {{}} </span> -->
              <br />
              <div v-if="item.id == '1'">
                <br />
                <span style="margin-left: 8%; color: rgb(134, 143, 152); font-size: 12px; font-weight: bold">{{ item.drusg_name }} </span>
                <br />
                <br />
                <span style="margin-left: 8%; color: rgb(134, 143, 152); font-size: 12px">规格：{{ item.drugs_specs }}</span>
                <br />
                <span style="margin-left: 8%; color: rgb(134, 143, 152); font-size: 12px">批号：{{ item.batch_no }}</span>
                <br />
                <span style="margin-left: 8%; color: rgb(134, 143, 152); font-size: 12px"
                  >存入:<el-button type="text" @click="details(item.id, item.drugs_code, '入库' ,item.batch_no)" > {{ item.replish_Qty }}</el-button>
                </span>
                <span style="margin-left: 5%; color: rgb(134, 143, 152); font-size: 12px"
                  >取出:<el-button type="text"  @click="details(item.id, item.drugs_code, '出库' ,item.batch_no)" > {{ item.pick_Qty }}</el-button>
                </span>
                <span style="margin-left: 5%; color: rgb(134, 143, 152); font-size: 12px"
                  >库存:<el-button type="text"> {{ item.stock_Qty }}</el-button>
                </span>
              </div>
              <div style="display: flex" v-else>
                <span style="color: rgb(134, 143, 152); font-size: 14px"
                  >存入：<el-button type="text"> {{ item.replish_Qty }}</el-button>
                </span>
                <span style="color: rgb(134, 143, 152); font-size: 14px"
                  >取出：<el-button type="text"> {{ item.pick_Qty }}</el-button>
                </span>
                <span style="color: rgb(134, 143, 152); font-size: 14px"
                  >库存：<el-button type="text" disabled> {{ item.stock_Qty }}</el-button>
                </span>
              </div>
              <!-- <p
                v-for="(itemshow,index3) in showfields"
                :key="'itemshow'+index3"
              >{{itemshow.name}}{{item[itemshow.key]}}</p> -->
            </div>
            <div style="width: 30px"></div>
            <div class="position-top" v-if="isFirst(item.id) && domready" :style="position_top(item.id, 'top')"></div>
            <div class="position-top" v-if="isLast(item.id)" :style="position_top(item.id, 'bottom')"></div>
          </div>
          <div style="width: 160px"></div>
        </div>
        <!-- 递归组件展示子节点 -->
        <div class="child-children" v-if="item.children && item.children.length">
          <RightTree :list="item.children" :showfields="showfields" />
        </div>
      </div>
    </div>
    
  

      <el-dialog title="明细" :visible.sync="dialogVisible" width="90%">
        <el-table
        :data="tableList"
      >
        <el-table-column type="index" width="50" label="" prop=""/> 
        <el-table-column  width="" prop="sy_type" label="类型"/>  
        <el-table-column  width="" prop="real_qty" label="数量"/>
   

        <!-- <el-table-column  width="" prop="out_qty" label="出库"/>  -->
     
        <!-- <el-table-column  width="" prop="bussniess_type" label="bussniess_type"/>  -->
        <el-table-column  width="" prop="dept_name" label="科室名称"/> 
        <el-table-column  width="" prop="drugs_code" label="药品编号"/> 
        <el-table-column  width="" prop="drugs_name" label="药品名称"/> 
        <!-- <el-table-column  width="" prop="stock_qty" label="库存"/>  -->
        <el-table-column  width="" prop="stock_totalqty" label="总库存"/> 
        <!-- <el-table-column  width="" label="total_stock" prop="total_stock"/>  -->
        <!-- <el-table-column  width="" prop="bill_qty" label="单据数量"/>  -->
        <!-- <el-table-column  width="" prop="need_qty" label="需取数量"/>  -->
        <!-- <el-table-column  width="" prop="real_qty" label="数量"/>  -->
        <el-table-column  width="" prop="bill_no" label="单号"/> 
        <!-- <el-table-column  width="" label="serial_no" prop="serial_no"/>  -->
        <!-- <el-table-column  width="" label="patient_id" prop="patient_id"/>  -->
        <!-- <el-table-column  width="" prop="patient_name" label="患者姓名"/>  -->
        <!-- <el-table-column  width="" prop="patient_dept_no" label="患者科室号"/>  -->
        <!-- <el-table-column  width="" prop="patient_dept_name" label="患者科室"/>  -->
        <!-- <el-table-column  width="" prop="patient_sex" label="patient_sex"/>  -->
        <!-- <el-table-column  width="" prop="patient_age" label="patient_age"/>  -->
        <!-- <el-table-column  width="" prop="patient_bedno" label="patient_bedno"/>  -->
        <el-table-column  width="" prop="batch_no" label="批号"/> 

        <!-- <template slot-scope="scope">
        <el-table-column  v-if="scope.row.sy_type == '入库'"  width="" prop="produce_name" label="供应商"/>
        <el-table-column v-if="scope.row.sy_type == '入库'"  width="" prop="produce_date" label="生产日期"/> 
        </template> -->
      

        <el-table-column  width="" prop="expire_date" label="效期"/> 
        <el-table-column  width="" prop="create_by" label="入库/出库人"/> 
        <el-table-column  width="" prop="last_update_by" label="复核人"/> 
       
        <el-table-column  width="" prop="drugs_specs" label="规格"/> 
        <!-- <el-table-column  width="" prop="dosage" label=""/>  -->
        <!-- <el-table-column  width="" prop="dose_mode" label="dose_mode"/>  -->
        <!-- <el-table-column  width="" prop="exec_rate" label="exec_rate"/>  -->
        <!-- <el-table-column  width="" prop="produce_date" label="produce_date"/>  -->
        <!-- <el-table-column  width="" prop="bill_type" label="bill_type"/>  -->
        <!-- <el-table-column  width="" prop="qty_h" label="qty_h"/>  -->
        <!-- <el-table-column  width="" prop="qty_l" label="qty_l"/>  -->
        <!-- <el-table-column  width="" prop="dept_no" label="dept_no"/>  -->
        <!-- <el-table-column  width="" prop="batch_no_qty" label="batch_no_qty"/>  -->
        <!-- <el-table-column  width="" prop="mPerson" label="mPerson"/>  -->
        <!-- <el-table-column  prop="package_unit" label="package_unit"/>  -->
        <!-- <el-table-column   prop="package_ratio" label="package_ratio"/>  -->
        <!-- <el-table-column   prop="return_qty" label="return_qty"/>  -->
        <!-- <el-table-column  prop="drugs_flag" label="drugs_flag"/>  -->
        <el-table-column   prop="create_date" label="入库/出库时间"/> 
        <!-- <el-table-column  width="" prop="last_update_date" label="复"/>  -->
      </el-table>
     
   </el-dialog>

  </div>

  
</template>

<script>
import LeaderLine from 'leader-line-vue'

import { getTableByKey, getTable, getTableZNMJG, postTableZNMJG } from '@/api/table/tableCommon'
export default {
  name: 'RightTree',
  components: {},
  data() {
    return {
      tableData: {
        keyName: 'zhuisumap',
        Data: {},
      },
      xxdrugsBatch: '',
      xxdrugsSpecs: '',
      xxdrugsName: '',
      api_url: '',
      domready: false,
      dialogVisible: false,
      lines: [],
      tableList: [],
    }
  },
  created() {
   // this.loadTable()
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    showfields: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.domready = true
      this.drawArrowLine()
    })
  },
  computed: {
    /**
     * 是否展示树计算属性
     */
    showTree() {
      return this.list && this.list.length
    },
  },
  beforeDestroy() {
    /**
     * 离开页面时销毁所有line
     */
    if (this.lines && this.lines.length) {
      this.lines.forEach((line) => {
        line.remove()
      })
    }
  },
  methods: {
    loadTable() {
      getTableByKey(this.tableData.keyName)
        .then((response) => {
          this.tableData.Data = response.data
          this.tableData.Data.columns.forEach((item) => {
        //    this.getDictsTable(item.dictName)
          })
        })
        .catch((err) => {
          this.$message.warning('数据表格框架尚未维护，请联系实施人员进行维护')
        })
    },
    // getDictsTable(dictName) {
    //   if (dictName != null) {
    //     this.getDicts(dictName).then((response) => {
    //       this.tableData.Data.columns.forEach((item) => {
    //         if (item.isDict == 'Y' && item.dictName == dictName) {
    //           item.rangeKey = response.data
    //         }
    //       })
    //     })
    //   }
    // },
    details(id, drugs_code, type ,batch_no) {
      let _this = this
      let parm = {
        page: 1,
        limit: 10,
        dept_no: id,
        drugs_code: drugs_code,
        batch_no : batch_no,
        sy_type: type,
        start_time: '2022-01-01',
        end_time: '2025-01-01',
      }
      postTableZNMJG('/AccountBook/TraceabilityShifts', parm)
        .then(function (res) {
          if (res.code == 200) {
            _this.tableList = res.data
            _this.dialogVisible = true
          }
        })
        .catch(function (e) {
          _this.tableList = []
        })
    },
    /**
     * 递归绘制箭头
     */
    drawArrowLine() {
      this.drawLeaderLine(this.list)
    },
    /**
     * 根据上下级关系绘制线条
     */
    drawLeaderLine(list) {
      list.forEach((element) => {
        let start = document.getElementById(element.id)
        if (element.children && element.children.length) {
          element.children.forEach((child) => {
            let line = LeaderLine.setLine(start, document.getElementById(child.id))
            line.color = 'rgba(30, 130, 250, 0.5)'
            line.path = 'grid'
            line.size = 3
            line.setOptions({
              dash: { animation: true },
            })
            this.lines.push(line)
          })
          this.drawLeaderLine(element.children)
        }
      })
    },
    position_top(id, position) {
      let dom = document.getElementById(id)
      let height
      if (dom) {
        height = dom.clientHeight
      }
      let rt
      if (position === 'top') {
        rt = {
          height: height / 2 - 2 + 'px',
          top: 0,
        }
      }
      if (position === 'bottom') {
        rt = {
          height: height / 2 + 1 + 'px',
          bottom: 0,
        }
      }
      return rt
    },
    isFirst(id) {
      return this.list.length > 1 && this.list.map((x) => x.id).indexOf(id) === 0
    },
    isLast(id) {
      return this.list.length > 1 && this.list.map((x) => x.id).indexOf(id) === this.list.length - 1
    },
  },
}
</script>

<style lang="scss" scoped>
.TreeRight {
  p {
    margin: 0;
    font-size: 13px;
  }
  display: flex;
  .father {
    width: 70px;
    background-color: rgb(127, 92, 223);
    padding: 100px 10px;
  }
  .childs {
    .child {
      display: flex;
      background-color: #fff;
      .child-item {
        display: flex;
        align-items: center;
        margin: 10px 0;
        .childname {
          .content-box {
            text-align: left;
            border: 1px solid #777676;

            padding: 10px;
            height: 80px;
            border-radius: 100px;
            width: 1000%;
            box-shadow: 0 2px 4px 0 rgba(99, 98, 98, 0.7);
          }
          .content-boxOne {
            text-align: left;
            border: 1px solid #808080;
            background-color: rgb(241, 241, 241);
            padding: 10px;
            height: 300px;
            border-radius: 70px;
            width: 1000%;
            box-shadow: 0 2px 4px 0 rgba(107, 106, 106, 0.7);
          }
          //cursor: pointer;
          height: 100%;
          display: flex;
          align-items: center;
          width: 220px;
          text-align: center;
          justify-content: center;
          position: relative;
          padding: 10px 0;
          .position-arrow {
            position: absolute;
            left: -22px;
          }
          .position-top {
            position: absolute;
            width: 3px;
            background-color: #fff;
            left: -23px;
            height: 10px;
          }
        }
        .childarrow {
          height: 100%;
          display: flex;
          align-items: center;
        }
      }
    }
    .child-children {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
</style>

ition-arrow {
position: absolute;
left: -22px;
}
.position-top {
position: absolute;
width: 3px;
background-color: #fff;
left: -23px;
height: 10px;
}
}
.childarrow {
height: 100%;
display: flex;
align-items: center;
}
}
}
.child-children {
display: flex;
flex-direction: column;
justify-content: center;
}
}
}