forked from opentiny/tiny-vue
153 lines
4.3 KiB
Vue
153 lines
4.3 KiB
Vue
<template>
|
||
<div>
|
||
<p class="user-value">
|
||
{{ user }}
|
||
</p>
|
||
<tiny-user v-model="user" v-bind="service" sort-by-fetch-data></tiny-user>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="jsx">
|
||
import { ref } from 'vue'
|
||
import { User as TinyUser, Modal } from '@opentiny/vue'
|
||
|
||
const user = ref('441047913162396')
|
||
const service = ref({
|
||
fetchSuggestUser: getSuggestUser,
|
||
fetchW3Accounts: fetchW3Accounts
|
||
})
|
||
|
||
function getSuggestUser(userCN) {
|
||
return new Promise((resolve) => {
|
||
/* 此处为输入联想搜索逻辑，，数据返回格式如下 */
|
||
Modal.message(`用户输入的值为：${userCN}`)
|
||
|
||
const result = [
|
||
{
|
||
'programValidity': null,
|
||
'employeeNumber': '12345678',
|
||
'userType': 'HWE',
|
||
'currentRole': null,
|
||
'currentProgramIds': null,
|
||
'validRoles': null,
|
||
'defaultRole': 'otc:2749;',
|
||
'coalitionPermission': false,
|
||
'endDate': '2017-11-13T14:26:06.000+0800',
|
||
'dept': null,
|
||
'userId': 421000103624183, // value-field
|
||
'userAccount': 'test1',
|
||
'userCN': 'test1', // text-field
|
||
'email': 'test1@test1.com',
|
||
'creationDate': '2012-08-17T11:26:18.000+0800',
|
||
'lastUpdateDate': '2015-03-30T14:27:34.000+0800',
|
||
'rowIdx': -1,
|
||
'creationUserCN': null,
|
||
'lastUpdateUserCN': null
|
||
},
|
||
{
|
||
'programValidity': null,
|
||
'employeeNumber': '12345678',
|
||
'userType': 'WX',
|
||
'currentRole': null,
|
||
'currentProgramIds': null,
|
||
'validRoles': null,
|
||
'defaultRole': null,
|
||
'coalitionPermission': false,
|
||
'endDate': null,
|
||
'dept': null,
|
||
'userId': 435259704104388,
|
||
'userAccount': 'test2',
|
||
'userCN': 'test2',
|
||
'email': 'test2@test2.com',
|
||
'creationDate': '2017-10-23T11:16:59.000+0800',
|
||
'lastUpdateDate': '2017-10-23T11:16:59.000+0800',
|
||
'rowIdx': -1,
|
||
'creationUserCN': null,
|
||
'lastUpdateUserCN': null
|
||
},
|
||
{
|
||
'programValidity': null,
|
||
'employeeNumber': '12345678',
|
||
'userType': 'HWE',
|
||
'currentRole': null,
|
||
'currentProgramIds': null,
|
||
'validRoles': null,
|
||
'defaultRole': null,
|
||
'coalitionPermission': false,
|
||
'endDate': '2017-10-26T11:48:56.000+0800',
|
||
'dept': null,
|
||
'userId': 441047913162396,
|
||
'userAccount': 'test3',
|
||
'userCN': 'test3',
|
||
'email': 'test3@test3.com',
|
||
'creationDate': '2015-01-06T09:38:41.000+0800',
|
||
'lastUpdateDate': '2017-10-10T15:13:28.000+0800',
|
||
'rowIdx': -1,
|
||
'creationUserCN': null,
|
||
'lastUpdateUserCN': null
|
||
},
|
||
{
|
||
'programValidity': null,
|
||
'employeeNumber': '12345678',
|
||
'userType': 'WX',
|
||
'currentRole': null,
|
||
'currentProgramIds': null,
|
||
'validRoles': null,
|
||
'defaultRole': null,
|
||
'coalitionPermission': false,
|
||
'endDate': '2017-11-10T08:50:56.000+0800',
|
||
'dept': null,
|
||
'userId': 702973890055088,
|
||
'userAccount': 'test4',
|
||
'userCN': 'test4',
|
||
'email': 'test4@test4.com',
|
||
'creationDate': '2017-10-10T18:22:33.000+0800',
|
||
'lastUpdateDate': '2017-10-10T18:22:33.000+0800',
|
||
'rowIdx': -1,
|
||
'creationUserCN': null,
|
||
'lastUpdateUserCN': null
|
||
}
|
||
]
|
||
|
||
setTimeout(() => {
|
||
resolve(result)
|
||
}, 1000)
|
||
})
|
||
}
|
||
|
||
function fetchW3Accounts(userId) {
|
||
/* 此为初始化时，v-model值不为空时，根据默认值查询用户数据，数据返回格式如下 */
|
||
Modal.message(`v-model默认值为：${userId}`)
|
||
|
||
return new Promise((resolve) => {
|
||
const result = [
|
||
{
|
||
'programValidity': null,
|
||
'employeeNumber': '12345678',
|
||
'userType': 'HWE',
|
||
'currentRole': null,
|
||
'currentProgramIds': null,
|
||
'validRoles': null,
|
||
'defaultRole': null,
|
||
'coalitionPermission': false,
|
||
'endDate': '2017-10-26T11:48:56.000+0800',
|
||
'dept': null,
|
||
'userId': 441047913162396,
|
||
'userAccount': 'test3',
|
||
'userCN': 'test3',
|
||
'email': 'test3@test3.com',
|
||
'creationDate': '2015-01-06T09:38:41.000+0800',
|
||
'lastUpdateDate': '2017-10-10T15:13:28.000+0800',
|
||
'rowIdx': -1,
|
||
'creationUserCN': null,
|
||
'lastUpdateUserCN': null
|
||
}
|
||
]
|
||
|
||
setTimeout(() => {
|
||
resolve(result)
|
||
}, 1000)
|
||
})
|
||
}
|
||
</script>
|