pengjun
2 years ago
3 changed files with 328 additions and 23 deletions
@ -0,0 +1,294 @@ |
|||
<template> |
|||
<div style="display: flex; margin-top: -30px;"> |
|||
<div style="width:230px;"> |
|||
<div style="display: flex;"> |
|||
<span>项目类别</span> |
|||
<el-cascader :options="dict.itemTypeTree" v-model="itemTypeIds" style="margin-left: 3px;width:160px;" |
|||
:props="{ checkStrictly: true, expandTrigger: 'hover', ...customerOrg.treeprops, }" :show-all-levels="false" |
|||
clearable filterable @change="parseAsbitem" size="small"> |
|||
</el-cascader> |
|||
</div> |
|||
<div class="mainareaBox"> |
|||
<el-table :data="asbItems" :height="400" @row-dblclick="dbClickChoosedAsb" |
|||
@selection-change="handleSelectionChange" size="small"> |
|||
<el-table-column type="selection" align="center" width="60" /> |
|||
<el-table-column prop="displayName" label="未选组合项目" width="160" /> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
|
|||
<div style="width:100px;margin-top: 70px;"> |
|||
<div class="btnList"> |
|||
<el-button type="primary" @click="addAbs(asbItemChoosed)" style="width:90px;">添加 <i class="el-icon-right"></i> |
|||
</el-button> |
|||
</div> |
|||
<div class="btnList"> |
|||
<el-button type="primary" @click="delAbs(asbItemOCXChoosed)" style="width:90px;">移除 <i class="el-icon-back"></i> |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div style="display: block; width:230px;"> |
|||
|
|||
<div class="disTotal"> |
|||
<el-select v-model="asbItemId" placeholder="快速选择组合项目" size="small" filterable clearable remote automatic-dropdown |
|||
:remote-method="remoteMethod" @change="quickChoosedAsb" default-first-option ref="asbItemId" |
|||
style="width:150px;text-align: left;padding-right: 15px;"> |
|||
<el-option v-for="item in quickAsb" :key="item.id" :value="item.id" :label="item.displayName" /> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="mainareaBox"> |
|||
<el-table :data="report.dataAsbitemOCX" height="400" width="100%" @row-dblclick="removeAbs" |
|||
@selection-change="selecteditems" size="small"> |
|||
<!-- temporaryselection personnelUnit.nogroupselected--> |
|||
<el-table-column type="selection" align="center" width="60" /> |
|||
<el-table-column label="已选组合项目" width="160" prop="displayName" /> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
|
|||
<div style="width:100px;margin-top: 70px;"> |
|||
<div class="btnList"> |
|||
<el-button type="primary" @click="addAbs(asbItemChoosed)" style="width:90px;">复制套餐</el-button> |
|||
</div> |
|||
<div class="btnList"> |
|||
<el-button type="primary" @click="btnOk('close')" style="width:90px;">确定 <i class="el-icon-check"></i> |
|||
</el-button> |
|||
</div> |
|||
<div class="btnList" |
|||
style="text-align: center;background-color: rgb(192, 192, 192);border-radius: 5%;padding: 5px 0;"> |
|||
已选组合项<br> |
|||
目为空时即<br> |
|||
表示选择所<br> |
|||
有组合项自 |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
import { mapState, mapActions } from "vuex"; |
|||
import { getapi, postapi, putapi, deletapi } from "@/api/api"; |
|||
import { arrayFilter, arrayReduce, arrayExistObj, deepCopy } from "../../utlis/proFunc"; |
|||
export default { |
|||
props: ["patientRegisterForm", "payTypeFlag"], |
|||
data() { |
|||
return { |
|||
itemTypeIds: [], //项目类别 |
|||
|
|||
asbItems: [], //可被选的 asbItem |
|||
asbItemChoosed: [], //勾选的 未选组合项目 |
|||
|
|||
asbItemOCXChoosed: [], //勾选的 已选组合项目 |
|||
|
|||
asbItemQuick: [], //可供 快速选择的组合项目 |
|||
quickAsb: [], //快速选择当前显的下拉数据 |
|||
asbItemId: '', //快速选择的组合项目ID |
|||
|
|||
}; |
|||
}, |
|||
computed: { |
|||
...mapState(["dict", "customerOrg", "patientRegister", "personnelUnit", "report"]), |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
|
|||
mounted() { |
|||
this.dictInit(); |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
dictInit() { |
|||
getapi("/api/app/asbitem/in-filter?Filter").then((res) => { |
|||
if (res.code == 1) { |
|||
this.dict.asbItemAll = res.data.items; |
|||
this.parseAsbitem(); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
//分析可选组合项目，及快速可选组合项目的数据 |
|||
parseAsbitem() { |
|||
this.asbItemQuick = deepCopy(this.dict.asbItemAll); |
|||
arrayReduce(this.asbItemQuick, this.report.dataAsbitemOCX, 'id'); |
|||
this.asbItems = deepCopy(this.asbItemQuick); |
|||
if (this.itemTypeIds && this.itemTypeIds.length > 0) { |
|||
this.asbItems = arrayFilter(this.asbItems, 'itemTypeId', this.itemTypeIds[this.itemTypeIds.length - 1]) |
|||
} |
|||
}, |
|||
|
|||
|
|||
|
|||
//未选组合项目 勾选情况 |
|||
handleSelectionChange(val) { |
|||
// this.selecteddata = val; |
|||
this.asbItemChoosed = val; |
|||
//console.log(this.asbItemChoosed); |
|||
}, |
|||
|
|||
// 添加组合项目 |
|||
///api/app/register-asbitem/many/3fa85f64-5717-4562-b3fc-2c963f66afa6' |
|||
addAbs(asbItemChoosed) { |
|||
|
|||
if (asbItemChoosed.length < 1) { |
|||
alert("请选择要添加的组合项目") |
|||
return |
|||
} |
|||
arrayReduce(this.asbItems, asbItemChoosed, 'id') |
|||
arrayReduce(this.asbItemQuick, asbItemChoosed, 'id') |
|||
this.report.dataAsbitemOCX = this.report.dataAsbitemOCX.concat(asbItemChoosed) |
|||
|
|||
this.btnOk(); |
|||
}, |
|||
|
|||
//人员已选组合项目 勾选情况 |
|||
selecteditems(val) { |
|||
this.asbItemOCXChoosed = val |
|||
}, |
|||
|
|||
//删除 人员已选中的组合项目 |
|||
///api/app/register-asbitem/many?RegisterAsbitemIds=3fa85f64-5717-4562-b3fc-2c963f66afa6 |
|||
delAbs(absForDel) { |
|||
if (absForDel.length < 1) { |
|||
alert("请选择要移除的组合项目") |
|||
return |
|||
} |
|||
arrayReduce(this.report.dataAsbitemOCX, absForDel, 'id'); |
|||
this.asbItems = this.asbItems.concat(absForDel) |
|||
this.asbItemQuick = this.asbItemQuick.concat(absForDel) |
|||
this.btnOk(); |
|||
}, |
|||
|
|||
//双击删除已选项目 |
|||
removeAbs(row) { |
|||
this.delAbs([row]); |
|||
}, |
|||
|
|||
|
|||
//双击选择组合项目 |
|||
dbClickChoosedAsb(row) { |
|||
this.addAbs([row]); |
|||
}, |
|||
|
|||
//快速选择组合项目 |
|||
quickChoosedAsb(v) { |
|||
//远程查询时，设置了 value-key 也不管用，只能取到value console.log('quickChoosedAsb',v) |
|||
let lfind = -1 |
|||
if (v) { |
|||
lfind = arrayExistObj(this.asbItemQuick, 'id', v) |
|||
if (lfind > -1) { |
|||
this.addAbs([this.asbItemQuick[lfind]]) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
//快速选择组合项目时，调整可按拼间简码及简称查找 |
|||
remoteMethod(keyWords) { |
|||
//console.log('remoteMethod',this.dict.asbItemQuick) |
|||
if (keyWords) { |
|||
this.quickAsb = []; |
|||
this.asbItemQuick.forEach(item => { |
|||
if (item.displayName.toLowerCase().indexOf(keyWords.toLowerCase()) > - 1 |
|||
|| item.simpleCode.toLowerCase().indexOf(keyWords.toLowerCase()) > - 1 |
|||
|| item.shortName.toLowerCase().indexOf(keyWords.toLowerCase()) > - 1) { |
|||
this.quickAsb.push(item); |
|||
} |
|||
}); |
|||
} else { |
|||
this.quickAsb = deepCopy(this.asbItemQuick); |
|||
} |
|||
}, |
|||
|
|||
btnOk(closed){ |
|||
if(this.report.dataAsbitemOCX && this.report.dataAsbitemOCX.length > 0){ |
|||
switch (this.report.dataAsbitemOCX.length) { |
|||
case 1: |
|||
this.patientRegister.query.asbitemOCX = this.report.dataAsbitemOCX[0].displayName |
|||
break; |
|||
default: |
|||
this.patientRegister.query.asbitemOCX = this.report.dataAsbitemOCX[0].displayName + '，… + ' + this.report.dataAsbitemOCX.length |
|||
break; |
|||
} |
|||
}else{ |
|||
this.patientRegister.query.asbitemOCX = '' |
|||
} |
|||
|
|||
if(closed){ |
|||
this.report.dialogAsbitemOCX = false |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
//监听事件 |
|||
watch: { |
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "../../assets/css/global.css"; |
|||
|
|||
.mainareaBox { |
|||
border: 1px solid #000; |
|||
height: 400px; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
.btnList { |
|||
margin-top: 5px; |
|||
margin-left: 5px; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
.disTotal { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
::v-deep .el-input__inner { |
|||
/*text-align: center;*/ |
|||
padding-left: 2px; |
|||
padding-right: 15px; |
|||
} |
|||
|
|||
::v-deep .el-input__icon { |
|||
width: 15px; |
|||
/* 输入框下拉箭头或清除图标 默认 25 */ |
|||
} |
|||
|
|||
/* 表格 表头 列间距控制 */ |
|||
::v-deep .el-table th.el-table__cell>.cell { |
|||
text-align: center; |
|||
/* 表格 表头 对齐方式，默认 left */ |
|||
padding-right: 2px; |
|||
/* 表格 表头 列间距控制，默认 10px */ |
|||
padding-left: 2px; |
|||
/* 表格 表头 列间距控制，默认 10px */ |
|||
} |
|||
|
|||
/* 表格 表体 首列左间距控制 */ |
|||
::v-deep .el-table--border .el-table__cell:first-child .cell { |
|||
padding-left: 2px; |
|||
/* 表格 表体 首列左间距控制，默认 10px */ |
|||
} |
|||
|
|||
/* 表格 行列间距控制 ，默认 10 px*/ |
|||
::v-deep .el-table__cell { |
|||
padding: 2px 2px 2px 2px; |
|||
/* 上，右，下，左 */ |
|||
} |
|||
|
|||
|
|||
::v-deep .cell { |
|||
padding-left: 2px; |
|||
padding-right: 2px; |
|||
} |
|||
|
|||
::v-deep .el-icon-date:before { |
|||
content: "" |
|||
}</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue