select2使用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40442091/article/details/137781391

// ==UserScript==
// @name 登录用户筛选select2
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match /xxx/gctp/logon.jsp
// @require /xxx/gctp/js/jquery/jquery.js

//
// @require /al/plugins/jQuery/jquery-2.2.3.min.js
// @require /al/plugins/jQuery/jquery.fileDownload.js
// @require /al/plugins/jQueryUI/jquery-ui.min.js
// @require /al/plugins-ext/jquery.cookie/jquery.cookie.js
// 
// @require1111 /al/plugins/select2/select2.min.css
//
// @require /al/plugins/select2/select2.full.min.js

// @grant none
// ==/UserScript==

var selfGlobalConfig = {
token: ''
};
//默认用户
var defaultUserList = [];
defaultUserList.push({"id":"xxxxx","text":"xxxxx-"});
defaultUserList.push({"id":"xxxxx","text":"-"});

/**
* 执行登录操作
* 该函数构造一个包含登录数据的请求，并发送该请求以完成登录流程。
*
* @returns 返回一个由request函数处理的请求结果，该结果可能是登录成功与否的响应数据。
*/
function login(){
// 准备登录数据，设定登录类型为1
const data = {loginType: 1}
// 配置请求的参数，包括URL和请求方法
const params = {
url: '/admin/user/login.do', // 设置请求的目标URL
method: 'post', // 使用POST方法发送请求
data: {
public: publics(), // 获取并加入公共请求数据
private: data // 设置私有的请求数据，包含登录类型
}
}
// 发起网络请求
return request(params)
}

function queryUserList(userName){
const data = {
pageNum: 1,
pageSize: 10,
brno: "",
userName
}
const params = {
url: '/app/cash/role/userInfoLikeQry.do', // 设置请求的目标URL
method: 'post', // 使用POST方法发送请求
data: {
public: publics(), // 获取并加入公共请求数据
private: data // 设置私有的请求数据，包含登录类型
}
}
// 发起网络请求
return request(params)

}

/**
* 发送请求的函数
* @param {Object} option 配置对象，包含请求的配置项
* @param {String} option.method 请求方法，默认为GET
* @param {String} option.url 请求的相对路径
* @param {Object|String} option.data 请求携带的数据
* @returns {Promise} 返回一个Promise对象，用于处理请求的成功或失败
*/
function request(option){
const { method, url, data } = option
// 构建完整的请求URL
const baseURL = 'http://xxx/xxx/xxx/new_portal/api/service'
const fullURL = baseURL + url
// 返回一个新的Promise对象，处理异步请求
return new Promise((resolve,reject)=>{
// 使用jQuery的ajax方法发送请求
$.ajax({
type: method || 'GET', // 如果未指定请求方法，默认使用GET
contentType: 'application/json;charset=UTF-8;', // 指定请求头的ContentType
crossDomain: true, // 允许跨域请求
url: fullURL, // 请求的完整URL
data: JSON.stringify(data), // 发送的数据
success: resolve, // 请求成功时的回调函数
error: reject // 请求失败时的回调函数
})
})
}

/**
* 格式化时间函数
* @param {Date} time - 可选的时间参数，如果未提供，则使用当前时间
* @param {string} type - 时间格式类型，支持 "YYYYMMDD", "HHMMSS", 默认为 "YYYY-MM-DD HH:MM:SS"
* @returns {string} 返回格式化后的时间字符串
*/
function formatTime (time, type) {
// 如果未提供时间参数，则使用当前时间
const t = time || new Date();
const times = new Date(t);
const yy = times.getFullYear(); // 获取年份
let mm = times.getMonth() + 1; // 获取月份，需要转换为数字
// 如果月份小于10，则在前面补0
mm = mm > 9 ? mm : `0${mm}`;
let dd = times.getDate(); // 获取日期
// 如果日期小于10，则在前面补0
dd = dd > 9 ? dd : `0${dd}`;
let HH = times.getHours(); // 获取小时数
// 如果小时数小于10，则在前面补0
HH = HH > 9 ? HH : `0${HH}`;
let MM = times.getMinutes(); // 获取分钟数
// 如果分钟数小于10，则在前面补0
MM = MM > 9 ? MM : `0${MM}`;
let SS = times.getSeconds(); // 获取秒数
// 如果秒数小于10，则在前面补0
SS = SS > 9 ? SS : `0${SS}`;
// 根据提供的类型格式化时间
switch (type) {
case "YYYYMMDD":
return `${yy}${mm}${dd}`; // 返回年月日格式
case "HHMMSS":
return `${HH}:${MM}:${SS}`; // 返回时分秒格式
default:
return `${yy}-${mm}-${dd} ${HH}:${MM}:${SS}`; // 返回默认格式
}
}

/**
* 构造并返回一个包含公共信息的对象。
* 该函数不接受任何参数。
*
* @return {Object} 包含以下属性的对象：
* - invokerId: 调用者ID，固定值 'N01'。
* - serverId: 服务器ID，固定值 'ADMIN'。
* - token: 安全令牌，一个固定的字符串。
* - userId: 用户ID，一个固定的字符串。
* - msgId: 消息ID，使用当前时间戳生成。
* - reqTime: 请求时间，格式化当前时间。
*/
function publics() {
const userId = 'xxx' // 用户ID
const tempToken = 'IKISEZEVJTCZJBHDENBWHUDZGQDDDNBFFHGAHNEI' // 安全令牌
// 返回包含公共信息的对象
return {
invokerId: 'N01',
serverId: 'ADMIN',
token: selfGlobalConfig.token || tempToken,
userId,
msgId: new Date().getTime(), // 消息ID，当前时间戳
reqTime: formatTime() // 请求时间，调用formatTime函数获取
}
}

//外联样式
function loadCss(url){
var link = document.createElement('link');
link.type='text/css';
link.rel='stylesheet';
link.href=url;
document.head.appendChild(link);
}

(async function() {
'use strict';
// Your code here...
await login().then(res=>{
const data = res.data || {}
selfGlobalConfig.token = data.token
selfGlobalConfig.userInfo = data.userInfo
})
// 添加元素
const html = `
<div id="appendEle" style="margin-top: 10px;">
<div>
<select class="singleSelect select2" style="width: 200px;">

</select>
</div>
</div>
`
$('#main_right').append(html);

//加载外部样式
loadCss('/al/plugins/select2/select2.min.css');

// 监听表单事件
$('#container input[name="keyword"]').on('input',function(){
const keyword = $(this).val()
queryUserList(keyword).then(res=>{
const data = res.data || {}
const list = data.list || []
if(list.length > 0){
const html = list.map(item=>`<li style="line-height: 22px;cursor: pointer;" value="${item.userId}">${item.userName}-${item.mbrnoName}</li>`).join('')
$('#userList').html(html)
}else{
$('#userList').html('')
}
})
})

$('#container #userList').on('click', 'li', function(){
const value = this.getAttribute('value');
$('#main_right input[name="userId"]').val(value);
$('#login_button').click();
});

var json2 = {
"public": {
"invokerId": "N01",
"serverId": "ADMIN",
"token": "OA-REQUEST",
"userId": "xxxxx",
"msgId": "1713148613284",
"reqTime": "2024-04-15 10:36:53"
},
"private": {
"pageNum": 1,
"pageSize": 10,
"brno": "",
"userName":"xxxxx"
}

}

$(document).ready(function() {
//加载动态数据
$('.singleSelect').select2({
language:"zn-CN",
placeholder:'请选择用户登录',

//placeholder: { id: "xxx", text: "xxu" },
allowClear: true,
ajax:{
url: 'http://xxxx/xxx/szbmp/new_portal/api/service/app/cash/role/userInfoLikeQry.do',
contentType: 'application/json;charset=UTF-8',
type: 'post',
dataType:"json",
data: function(params){
json2.private.userName = params.term||'';
return JSON.stringify(json2);
},
processResults: function (data, params) {
var keyword = params.term;
if(keyword == undefined){
return {
results:defaultUserList
}
}
params.page = params.page || 1;
var list = data.data.list;

var results = [];
list = $.map(list, function (obj) {
results.push({id:obj.userId,text:obj.userName+'-'+obj.mbrnoName});
});
if(results.length == 0){
return {
results:defaultUserList
};
}

return {
results:results
};

}
}

});
});
setTimeout(function(){
$(".select2-container").css("width",255);

},20);

$(".singleSelect").on("change",function(e){
var userId = $(".singleSelect").val();
　　 $('#main_right input[name="userId"]').val(userId);
$('#login_button').click();
});

})();