追溯记录图路上 代码如下 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-optionv-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-optionv-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-treev-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:00const endOfDay = new Date(today)endOfDay.setHours(23, 59, 59) // 设置为当天的 23:59:59this.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_codepostTableZNMJG('/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><!-- <pv-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><!-- <pv-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 = truethis.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.datathis.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 = thislet 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 = 3line.setOptions({dash: { animation: true },})this.lines.push(line)})this.drawLeaderLine(element.children)}})},position_top(id, position) {let dom = document.getElementById(id)let heightif (dom) {height = dom.clientHeight}let rtif (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;
}
}
}
