<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>window</title>
<script src="../../../js/tool/jquery-3.3.1.min.js"></script>
<script src="../../../js/tool/layui/layui.js"></script>
<script src="../../../js/common.js"></script>
<script src="../../../js/tool/vue.js"></script>
<script src="../../../js/tool/xm-select.js"></script>
<link rel="stylesheet" href="../../../js/tool/layui/css/layui.css">
</head>
<style>
.layui-btn-sm {
position: relative;
top: 2px;
}
</style>
<body style="padding: 20px">
<h4 style="margin-left: 20px"><span style="color: black"><b>检测名称</b></span></h4>
<div id="app" class="layui-form-select" style="margin-left: 20px"></div>
<div>
<button type="button" class="layui-btn " id="app-reload" style="margin-left: 20px">数据加载</button>
</div>
<div id="item">
<div class="tableBar layui-form" style="width:auto;margin-left: 20px;" v-if="iqcCheckContentList!=null">
<div>
<table class="layui-table">
<thead>
<tr>
<th>检测名称</th>
<th>是否必检(0是必检,1是选检)</th>
</tr>
</thead>
<tr v-for="(item, index) in iqcCheckContentList">
<td>
<input class="layui-input" type="text" v-model="item.name"
disabled="disabled">
</td>
<td>
<input type="number" class="layui-input" v-model="item.checkStatus">
</td>
</tr>
</table>
</div>
<button type="button" class="layui-btn" @click="doCheck()">确定</button>
</div>
</div>
</body>
</html>
<script>
var app = xmSelect.render({
el: '#app',
autoRow: true,
toolbar: {show: true},
filterable: true,
remoteSearch: true,
remoteMethod: function (val, cb, show) {
//这里如果val为空, 则不触发搜索
$.ajax({
url: server + "/iqcBaseData/getAllIqcBaseData",
method: 'post',
contentType: 'application/json',
success: function (res) {
if (res.type == 0) {
var iqcBaseDataList = res.data
var obj = [];
iqcBaseDataList.forEach(function (v, i) {
obj.push({
name: v.checkName,
value: v.id
});
})
cb(obj);
}
}
})
},
});
document.getElementById('app-reload').onclick = function () {
//获取当前多选选中的值
var selectArr = app.getValue();
var data = selectArr
localStorage.removeItem("iqcBaseData")
localStorage.setItem("iqcBaseData", JSON.stringify(data))
};
</script>
<script>
var item = new Vue({
el: "#item",
data: {
iqcCheckContentList: [],
},
methods: {
setTimer: function () {
this.timer = setInterval(() => {
var parentValue = JSON.parse(localStorage.getItem("iqcBaseData"))
if(null==parentValue){
return
}
if (null == this.iqcCheckContentList) {
this.iqcCheckContentList = parentValue;
return;
}
var count = 1
for (var i = 1; i < parentValue.length; i++) {
for (var j = 0; j < this.iqcCheckContentList.length; j++) {
if (parentValue[i].name == (this.iqcCheckContentList[j].name)) {
count++;
}
}
}
if (count != parentValue.length) {
this.iqcCheckContentList = parentValue;
}
}, 50);
},
doCheck: function () {
var layer
layui.use('layer', function () {
layer = layui.layer;
})
var data = this.iqcCheckContentList;
var cInvcId = localStorage.getItem("tempData")
$.ajax({
url: server + "/itemCheck/addItemCheckDetailsVersionTwo",
method: 'post',
data: JSON.stringify({
itemDetailsList: data,
cInvcId: cInvcId
}),
contentType: 'application/json',
success: function (res) {
if (res.type == 0) {
item.currentPageClose();
}
layer.msg(res.msg)
}
})
},
//关闭当前页面
currentPageClose: function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);//关闭当前页
},
},
//页面关闭前关闭定时器 (这个才有用) 并且清空缓存
destroyed: function () {
console.log("============清空缓存");
clearInterval(this.timer)
},
//页面加载完成后执行方法(启动定时器)
mounted: function () {
clearInterval(this.timer)
this.setTimer()
},
});
</script>
x-select的运用
最新推荐文章于 2023-12-07 12:01:27 发布