198 lines
6.9 KiB
JavaScript
198 lines
6.9 KiB
JavaScript
layui.use(['table', 'form', 'layer'], function(){
|
|
var table = layui.table;
|
|
var form = layui.form;
|
|
var layer = layui.layer;
|
|
var $ = layui.$;
|
|
|
|
// 初始化表格
|
|
table.render({
|
|
elem: '#device-table',
|
|
url: '/api/devices/models',
|
|
headers: {
|
|
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
|
},
|
|
toolbar: '#tableToolbar',
|
|
defaultToolbar: ['filter', 'exports', 'print'],
|
|
cols: [[
|
|
{type: 'checkbox'},
|
|
{field: 'ID', hide: true},
|
|
{field: 'model_name', title: '设备型号', width: 180},
|
|
{field: 'device_type', title: '设备类型', width: 120},
|
|
{field: 'company', title: '所属公司', width: 150},
|
|
{field: 'remark', title: '备注说明'},
|
|
{field: 'device_count', title: '设备数量', width: 100},
|
|
{field: 'status', title: '状态', width: 100, templet: function(d){
|
|
if(d.status === 'active') return '<span class="layui-badge layui-bg-green">启用</span>';
|
|
return '<span class="layui-badge layui-bg-gray">禁用</span>';
|
|
}},
|
|
{fixed: 'right', title: '操作', toolbar: '#tableRowBar', width: 180}
|
|
]],
|
|
page: true,
|
|
parseData: function(res) {
|
|
if (res.code === 401) {
|
|
window.location.href = '/login';
|
|
return;
|
|
}
|
|
return res;
|
|
}
|
|
});
|
|
|
|
// 表格工具栏事件
|
|
table.on('toolbar(device-table)', function(obj){
|
|
var checkStatus = table.checkStatus(obj.config.id);
|
|
|
|
switch(obj.event){
|
|
case 'refresh':
|
|
table.reload('device-table');
|
|
break;
|
|
case 'batchDel':
|
|
var data = checkStatus.data;
|
|
if(data.length === 0){
|
|
layer.msg('请选择要删除的设备型号');
|
|
return;
|
|
}
|
|
layer.confirm('确定删除选中的设备型号吗?', function(index){
|
|
var ids = data.map(item => item.ID);
|
|
fetch('/api/devices/models/batch', {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
|
},
|
|
body: JSON.stringify({ids: ids})
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
if (result.error) {
|
|
layer.msg(result.error);
|
|
return;
|
|
}
|
|
layer.msg('批量删除成功');
|
|
table.reload('device-table');
|
|
})
|
|
.catch(error => {
|
|
layer.msg('批量删除失败:' + error.message);
|
|
});
|
|
layer.close(index);
|
|
});
|
|
break;
|
|
}
|
|
});
|
|
|
|
// 行工具栏事件
|
|
table.on('tool(device-table)', function(obj){
|
|
var data = obj.data;
|
|
|
|
switch(obj.event){
|
|
case 'edit':
|
|
layer.open({
|
|
type: 1,
|
|
title: '编辑设备型号',
|
|
area: ['500px', '400px'],
|
|
content: $('#deviceFormTpl').html(),
|
|
success: function(){
|
|
form.val('deviceForm', {
|
|
id: data.ID,
|
|
model_name: data.model_name,
|
|
device_type: data.device_type,
|
|
company: data.company,
|
|
status: data.status || 'active',
|
|
remark: data.remark
|
|
});
|
|
form.render();
|
|
}
|
|
});
|
|
break;
|
|
case 'del':
|
|
layer.confirm('确定删除该设备型号吗?', function(index){
|
|
fetch('/api/devices/models/' + data.ID, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
if (result.error) {
|
|
layer.msg(result.error);
|
|
return;
|
|
}
|
|
layer.msg('删除成功');
|
|
obj.del();
|
|
})
|
|
.catch(error => {
|
|
layer.msg('删除失败:' + error.message);
|
|
});
|
|
layer.close(index);
|
|
});
|
|
break;
|
|
}
|
|
});
|
|
|
|
// 搜索表单提交
|
|
form.on('submit(search)', function(data){
|
|
table.reload('device-table', {
|
|
where: data.field,
|
|
page: {
|
|
curr: 1
|
|
}
|
|
});
|
|
return false;
|
|
});
|
|
|
|
// 添加设备型号按钮点击事件
|
|
$('#add-device').on('click', function(){
|
|
layer.open({
|
|
type: 1,
|
|
title: '添加设备型号',
|
|
area: ['500px', '400px'],
|
|
content: $('#deviceFormTpl').html(),
|
|
success: function(){
|
|
form.render();
|
|
}
|
|
});
|
|
});
|
|
|
|
// 设备型号表单提交
|
|
form.on('submit(deviceSubmit)', function(data){
|
|
// 构造请求数据
|
|
const submitData = {
|
|
model_name: data.field.model_name,
|
|
device_type: data.field.device_type,
|
|
company: data.field.company,
|
|
status: data.field.status,
|
|
remark: data.field.remark
|
|
};
|
|
|
|
// 确定请求URL和方法
|
|
const url = data.field.id ?
|
|
`/api/devices/models/${data.field.id}` :
|
|
'/api/devices/models';
|
|
const method = data.field.id ? 'PUT' : 'POST';
|
|
|
|
fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
|
},
|
|
body: JSON.stringify(submitData)
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
if (result.error) {
|
|
layer.msg(result.error);
|
|
return;
|
|
}
|
|
layer.closeAll('page');
|
|
layer.msg(data.field.id ? '更新成功' : '添加成功');
|
|
table.reload('device-table');
|
|
})
|
|
.catch(error => {
|
|
layer.msg((data.field.id ? '更新' : '添加') + '失败:' + error.message);
|
|
});
|
|
|
|
return false;
|
|
});
|
|
});
|