224 lines
7.9 KiB
JavaScript
224 lines
7.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: undefined,
|
||
|
toolbar: '#tableToolbar',
|
||
|
defaultToolbar: ['filter', 'exports', 'print'],
|
||
|
cols: [[
|
||
|
{type: 'checkbox'},
|
||
|
{field: 'model_name', title: '设备型号', width: 180},
|
||
|
{field: 'device_type', title: '设备类型', width: 120, templet: function(d){
|
||
|
var types = {
|
||
|
'software': '软件',
|
||
|
'website': '网站',
|
||
|
'embedded': '嵌入式设备',
|
||
|
'mcu': '单片机设备'
|
||
|
};
|
||
|
return types[d.device_type] || d.device_type;
|
||
|
}},
|
||
|
{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>';
|
||
|
if(d.status === 'expired') return '<span class="layui-badge layui-bg-orange">已过期</span>';
|
||
|
return '<span class="layui-badge layui-bg-gray">未激活</span>';
|
||
|
}},
|
||
|
{field: 'CreatedAt', title: '创建时间', width: 180, templet: function(d){
|
||
|
return d.CreatedAt ? new Date(d.CreatedAt).toLocaleString('zh-CN', {
|
||
|
year: 'numeric',
|
||
|
month: '2-digit',
|
||
|
day: '2-digit',
|
||
|
hour: '2-digit',
|
||
|
minute: '2-digit',
|
||
|
second: '2-digit',
|
||
|
hour12: false
|
||
|
}) : '';
|
||
|
}},
|
||
|
{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', data);
|
||
|
form.render();
|
||
|
}
|
||
|
});
|
||
|
break;
|
||
|
case 'files':
|
||
|
layer.open({
|
||
|
type: 2,
|
||
|
title: '设备文件管理',
|
||
|
area: ['900px', '600px'],
|
||
|
content: '/admin/device-files?model=' + encodeURIComponent(data.deviceModel)
|
||
|
});
|
||
|
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
|
||
|
});
|
||
|
return false;
|
||
|
});
|
||
|
|
||
|
// 添加设备型号按钮点击事件
|
||
|
$('#add-device').on('click', function(){
|
||
|
layer.open({
|
||
|
type: 1,
|
||
|
title: '添加设备型号',
|
||
|
area: ['500px', '400px'],
|
||
|
content: $('#deviceFormTpl').html(),
|
||
|
success: function(){
|
||
|
// 初始化设备类型选择
|
||
|
form.val('deviceForm', {
|
||
|
'device_type': 'software' // 设置默认值
|
||
|
});
|
||
|
form.render();
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
|
||
|
// 设备型号表单提交
|
||
|
form.on('submit(deviceSubmit)', function(data){
|
||
|
// 如果是编辑模式,确保 id 是数字类型
|
||
|
if(data.field.id) {
|
||
|
data.field.id = parseInt(data.field.id);
|
||
|
}
|
||
|
|
||
|
// 构造提交数据,使用下划线命名
|
||
|
const submitData = {
|
||
|
model_name: data.field.model_name,
|
||
|
device_type: data.field.device_type,
|
||
|
company: data.field.company,
|
||
|
remark: data.field.remark,
|
||
|
status: 'active'
|
||
|
};
|
||
|
|
||
|
// 如果是编辑模式,添加 ID
|
||
|
if(data.field.id) {
|
||
|
submitData.id = data.field.id;
|
||
|
}
|
||
|
|
||
|
var url = data.field.id ? '/api/devices/models/' + data.field.id : '/api/devices/models';
|
||
|
var method = data.field.id ? 'PUT' : 'POST';
|
||
|
|
||
|
fetch(url, {
|
||
|
method: method,
|
||
|
headers: {
|
||
|
'Content-Type': 'application/json'
|
||
|
},
|
||
|
credentials: 'include',
|
||
|
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;
|
||
|
});
|
||
|
});
|