73 lines
1.5 KiB
Vue
73 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<custom-modal v-model="visible" :width="490" title="Config User Library" :footer="null">
|
||
|
|
<div class="config-user-library">
|
||
|
|
<a-transfer
|
||
|
|
:titles="['Total Nuclides', 'User Nuclides']"
|
||
|
|
:dataSource="list"
|
||
|
|
:list-style="{
|
||
|
|
width: '200px',
|
||
|
|
height: '400px'
|
||
|
|
}"
|
||
|
|
:target-keys="targetKeys"
|
||
|
|
:render="item => item.title"
|
||
|
|
:showSearch="true"
|
||
|
|
@change="handleChange"
|
||
|
|
></a-transfer>
|
||
|
|
|
||
|
|
<div class="config-user-library-btns">
|
||
|
|
<div>
|
||
|
|
<a-button type="primary">Default</a-button>
|
||
|
|
<a-button type="primary">Load</a-button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<a-button type="primary">Save</a-button>
|
||
|
|
<a-button type="primary">Apply</a-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</custom-modal>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import ModalMixin from '@/mixins/ModalMixin'
|
||
|
|
export default {
|
||
|
|
mixins: [ModalMixin],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
title: 'Ac228'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
title: 'Ag106M'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
targetKeys: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleChange(targetKeys) {
|
||
|
|
this.targetKeys = targetKeys
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.config-user-library {
|
||
|
|
&-btns {
|
||
|
|
margin-top: 20px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
> div {
|
||
|
|
width: 200px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|