320 lines
7.6 KiB
Vue
320 lines
7.6 KiB
Vue
<template>
|
||
<el-popover
|
||
v-model="visible"
|
||
class="trials-select"
|
||
placement="top"
|
||
trigger="manual"
|
||
width="300"
|
||
>
|
||
<div class="trials-select-box">
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 300px;
|
||
background: #fff;
|
||
padding: 15px 15px 0;
|
||
"
|
||
>
|
||
<el-input
|
||
v-model="inputValue"
|
||
prefix-icon="el-icon-search"
|
||
clearable
|
||
@input="inputChange"
|
||
/>
|
||
<div
|
||
style="
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
line-height: 36px;
|
||
padding: 0 5px;
|
||
"
|
||
>
|
||
<div
|
||
style="
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width: 150px;
|
||
"
|
||
>
|
||
{{ $t("trials:trials-list:table:researchNumber") }}
|
||
</div>
|
||
<div
|
||
style="
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width: 80px;
|
||
"
|
||
>
|
||
{{ $t("trials:trials-list:table:sponsor") }}
|
||
</div>
|
||
<div
|
||
style="
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width: 160px;
|
||
"
|
||
>
|
||
{{ $t("trials:trials-list:table:experimentName") }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-tooltip
|
||
placement="left"
|
||
class="trials-select"
|
||
width="300"
|
||
trigger="hover"
|
||
:open-delay="500"
|
||
v-for="(item, index) of resultFilter"
|
||
:key="item.Id"
|
||
>
|
||
<div slot="content">
|
||
{{ $t("trials:trials-list:table:researchNumber") }}:
|
||
{{ item.ResearchProgramNo }}
|
||
<br />
|
||
{{ $t("trials:trials-list:table:sponsor") }}:
|
||
{{ item.Sponsor }}
|
||
<br />
|
||
{{ $t("trials:trials-list:table:experimentName") }}:
|
||
{{ item.ExperimentName }}
|
||
</div>
|
||
<div
|
||
class="options_item"
|
||
:class="{
|
||
selected: item.TrialId === data.TrialId,
|
||
selectedIndex: selectIndex === index,
|
||
}"
|
||
@click.stop="selectTrials(item, index)"
|
||
>
|
||
<div
|
||
style="
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width: 150px;
|
||
"
|
||
>
|
||
{{ item.ResearchProgramNo }}
|
||
</div>
|
||
<div
|
||
style="
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width: 80px;
|
||
"
|
||
>
|
||
{{ item.Sponsor }}
|
||
</div>
|
||
<div
|
||
style="
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width: 160px;
|
||
"
|
||
>
|
||
{{ item.ExperimentName }}
|
||
</div>
|
||
</div>
|
||
</el-tooltip>
|
||
</div>
|
||
<div
|
||
slot="reference"
|
||
:class="{ 'trials-select-reference': true, disabled: status === 'visit' }"
|
||
@click.stop="status === 'trial' ? (visible = !visible) : false"
|
||
>
|
||
<el-tooltip content="Top center" placement="top" style="width: 100%">
|
||
<div slot="content">
|
||
{{ $t("trials:trials-list:table:researchNumber") }}:
|
||
{{ data.ResearchProgramNo }}
|
||
<br />
|
||
{{ $t("trials:trials-list:table:experimentName") }}:
|
||
{{ data.ExperimentName }}
|
||
<br />
|
||
{{ $t("trials:trials-list:table:sponsor") }}:
|
||
{{ data.Sponsor }}
|
||
</div>
|
||
<span class="text-ellipsis"> {{ data.ResearchProgramNo }}</span>
|
||
</el-tooltip>
|
||
<span class="tip-span">
|
||
<span
|
||
class="el-icon-arrow-down tip-span"
|
||
:class="{ selected: visible }"
|
||
/>
|
||
</span>
|
||
</div>
|
||
</el-popover>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "trialsSelect",
|
||
props: {
|
||
options: {
|
||
required: true,
|
||
default: () => [],
|
||
},
|
||
data: {
|
||
required: true,
|
||
default: () => {},
|
||
},
|
||
status: {
|
||
required: true,
|
||
default: "trial",
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
visible: false,
|
||
resultFilter: [],
|
||
inputValue: null,
|
||
selectIndex: null,
|
||
};
|
||
},
|
||
mounted() {
|
||
document.onkeydown = (e) => {
|
||
if (!this.visible) return;
|
||
//事件对象兼容
|
||
let e1 =
|
||
e || event || window.event || arguments.callee.caller.arguments[0];
|
||
//键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
|
||
//左
|
||
if (e1 && e1.keyCode == 40) {
|
||
// 按下箭头
|
||
if (this.resultFilter.length - 1 === this.selectIndex) return;
|
||
this.selectIndex++;
|
||
} else if (e1 && e1.keyCode == 38) {
|
||
// 按上箭头
|
||
if (this.selectIndex === 0) return;
|
||
this.selectIndex--;
|
||
} else if (e1 && e1.keyCode == 13) {
|
||
this.selectTrials(
|
||
this.resultFilter[this.selectIndex],
|
||
this.selectIndex
|
||
);
|
||
}
|
||
document
|
||
.querySelector(".trials-select-box")
|
||
.scrollTo(
|
||
0,
|
||
document.querySelector(".options_item.selectedIndex").offsetTop - 200
|
||
);
|
||
};
|
||
},
|
||
watch: {
|
||
options: {
|
||
handler() {
|
||
this.resultFilter = this.options.filter(() => true);
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
},
|
||
methods: {
|
||
selectTrials(item, index) {
|
||
this.selectIndex = index;
|
||
let obj = JSON.parse(JSON.stringify(this.data));
|
||
obj = Object.assign(obj, item);
|
||
this.$emit("update:data", obj);
|
||
this.visible = false;
|
||
},
|
||
inputChange(v) {
|
||
this.resultFilter = this.options.filter((o) => {
|
||
var reg = new RegExp(v, "ig");
|
||
return (
|
||
reg.test(o.ResearchProgramNo) ||
|
||
reg.test(o.ExperimentName) ||
|
||
reg.test(o.Sponsor)
|
||
);
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.trials-select {
|
||
cursor: pointer;
|
||
.trials-select-reference {
|
||
height: 36px;
|
||
line-height: 36px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
padding: 0 15px;
|
||
padding-right: 30px;
|
||
width: 200px;
|
||
position: relative;
|
||
.tip-span {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 5px;
|
||
}
|
||
}
|
||
}
|
||
.disabled {
|
||
background-color: #f5f7fa;
|
||
cursor: not-allowed;
|
||
}
|
||
.trials-select-box {
|
||
width: 100%;
|
||
max-height: 400px;
|
||
height: auto;
|
||
overflow-y: auto;
|
||
padding-top: 76px;
|
||
}
|
||
.trials-select-box::-webkit-scrollbar {
|
||
display: none; /* Chrome Safari */
|
||
}
|
||
.trials-select-reference {
|
||
line-height: 40px;
|
||
height: 40px;
|
||
.el-icon-arrow-down {
|
||
transition: all 0.3s;
|
||
}
|
||
.el-icon-arrow-down.selected {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
.options_item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
line-height: 30px;
|
||
padding: 0 5px;
|
||
transition: all 0.3s;
|
||
&:hover {
|
||
background: #eee;
|
||
}
|
||
}
|
||
.options_item.selected {
|
||
color: #428bca;
|
||
background: #eee;
|
||
}
|
||
.options_item.selectedIndex {
|
||
background: #eee;
|
||
}
|
||
.text-ellipsis {
|
||
display: inline-block;
|
||
width: 90%;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
-o-text-overflow: ellipsis;
|
||
}
|
||
</style>
|