390 lines
11 KiB
Vue
390 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<div class="container">
|
|
<!-- 筛选 -->
|
|
<div class="handle-box">
|
|
<el-select v-model="query.params.deviceType" placeholder="设备类型" class="handle-select mr10"
|
|
style="width: 160px;">
|
|
<el-option :key="''" label="全部设备类型" :value="''"></el-option>
|
|
<el-option v-for="opt in deviceTypeOption" :key="opt.id" :label="opt.typeName"
|
|
:value="opt.id"></el-option>
|
|
</el-select>
|
|
<!-- <el-input v-model="query.params.name" placeholder="设备名" class="handle-input mr10"></el-input>
|
|
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button> -->
|
|
<el-button type="primary" :icon="Plus" @click="handleNew">新增设备</el-button>
|
|
<el-button type="primary" :icon="Plus" @click="exportExcel">导出设备列表</el-button>
|
|
</div>
|
|
<!-- 表格 -->
|
|
<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
|
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
|
<el-table-column prop="name" label="设备名称" align="center"></el-table-column>
|
|
<el-table-column prop="type" label="设备类型" align="center"></el-table-column>
|
|
<el-table-column prop="deviceName" label="设备ID" align="center"></el-table-column>
|
|
<el-table-column prop="location" label="设备位置" align="center"></el-table-column>
|
|
<el-table-column prop="contractor" label="承建商" align="center"></el-table-column>
|
|
<el-table-column prop="manufacturer" label="生产商" align="center"></el-table-column>
|
|
<el-table-column label="状态" align="center">
|
|
<template #default="scope">
|
|
<el-tag :type="scope.row.state === '在线' ? 'success' : (scope.row.state === '离线' ? 'danger' : '')">
|
|
{{ scope.row.state }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="220" align="center">
|
|
<template #default="scope">
|
|
<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)"
|
|
v-permiss="'equipment-setting-manage'">
|
|
编辑
|
|
</el-button>
|
|
<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row)"
|
|
v-permiss="'equipment-setting-manage'">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<div class="pagination">
|
|
<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
|
|
:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 编辑弹出框 -->
|
|
<el-dialog :title="formId > 0 ? '编辑' : '新增'" v-model="editVisible" style="width: 30%; min-width: 280px;">
|
|
<el-form ref="editForm" label-width="80px" :rules="rules" :model="form">
|
|
<el-form-item label="设备名称" prop="name">
|
|
<el-input class="popup-item" v-model="form.name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="设备类型" prop="typeId">
|
|
<el-select class="popup-item" v-model="form.typeId" placeholder="设备类型">
|
|
<el-option :key="''" label="请选择设备类型" :value="''"></el-option>
|
|
<el-option v-for="opt in deviceTypeOption" :key="opt.id" :label="opt.typeName"
|
|
:value="opt.id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="设备ID" prop="deviceName">
|
|
<el-input class="popup-item" v-model="form.deviceName"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="设备位置">
|
|
<el-input class="popup-item" v-model="form.location"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="承建商">
|
|
<el-input class="popup-item" v-model="form.contractor"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="生产商">
|
|
<el-input class="popup-item" v-model="form.manufacturer"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="editVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="saveEdit(editForm)">确 定</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, watch } from 'vue';
|
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
|
import type { FormInstance, FormRules } from 'element-plus';
|
|
import { ElLoading } from 'element-plus';
|
|
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
|
|
import send_request from '../utils/send_request';
|
|
import * as XLSX from 'xlsx';
|
|
|
|
// 筛选条件
|
|
const query = reactive({
|
|
params: {
|
|
deviceType: '',
|
|
name: '',
|
|
},
|
|
pageIndex: 1,
|
|
pageSize: 10
|
|
});
|
|
|
|
// 下拉框数据
|
|
const deviceTypeOption = ref<[{ id: any, typeName: any }]>()
|
|
|
|
// 表格数据
|
|
const tableData: any = ref([]);
|
|
const pageTotal = ref(0);
|
|
const deviceTypeDict: any = ref({});
|
|
// 获取表格&下拉框数据
|
|
const getData = async () => {
|
|
const loading = ElLoading.service({
|
|
lock: true,
|
|
text: '请稍候',
|
|
background: 'rgba(0, 0, 0, 0.7)',
|
|
});
|
|
await send_request('v1/device/list', "GET", {
|
|
...query.params,
|
|
pageIndex: query.pageIndex,
|
|
pageSize: query.pageSize,
|
|
page: query.pageIndex,
|
|
}, (data: any) => {
|
|
|
|
let deviceList = data.list;
|
|
let deviceTypeList = data.optionDeviceType;
|
|
|
|
//生成"设备类型"数据字典
|
|
console.log("deviceList/deviceTypeList:", deviceList, deviceTypeList)
|
|
deviceTypeList.forEach((item: any) => deviceTypeDict.value[item.id] = item.typeName)
|
|
|
|
// 渲染表格
|
|
tableData.value = deviceList.list.map((i: any) => {
|
|
i.state = "在线"
|
|
i.type = deviceTypeDict.value[i.typeId]
|
|
return i
|
|
});
|
|
// console.log("tableData", tableData);
|
|
pageTotal.value = deviceList.total;
|
|
// 渲染下拉框
|
|
deviceTypeOption.value = deviceTypeList;
|
|
});
|
|
loading.close();
|
|
};
|
|
getData();
|
|
|
|
// 查询操作
|
|
const handleSearch = () => {
|
|
query.pageIndex = 1;
|
|
getData();
|
|
};
|
|
|
|
// 筛选条件变化自动搜索
|
|
watch(() => query.params, function (newVal, oldVal, ...args) {
|
|
console.log("watch query.params newVal", JSON.stringify(newVal))
|
|
console.log("watch query.params oldVal", JSON.stringify(oldVal))
|
|
console.log("watch query.params args", args)
|
|
handleSearch();
|
|
}, { deep: true });
|
|
|
|
// 分页导航
|
|
const handlePageChange = (val: number) => {
|
|
query.pageIndex = val;
|
|
getData();
|
|
};
|
|
|
|
// 删除操作
|
|
const handleDelete = (index: number, row: any) => {
|
|
// 二次确认删除
|
|
ElMessageBox.confirm('确定要删除吗？', '提示', {
|
|
type: 'warning'
|
|
})
|
|
.then(() => send_request('v1/device/delete', "POST", {
|
|
deviceId: row.id
|
|
}, (data: any) => {
|
|
// console.log(data);
|
|
ElMessage.success('删除成功');
|
|
tableData.value.splice(index, 1);
|
|
}))
|
|
.catch(() => {
|
|
ElMessage.success('删除失败');
|
|
});
|
|
};
|
|
|
|
// 添加/修改记录时表单验证
|
|
const editForm = ref<FormInstance>();
|
|
const rules: FormRules = {
|
|
name: [
|
|
{
|
|
required: true,
|
|
message: '请输入设备名称',
|
|
trigger: 'blur'
|
|
},
|
|
{
|
|
min: 2,
|
|
message: '设备名称过短',
|
|
trigger: 'blur'
|
|
},
|
|
{
|
|
max: 52,
|
|
message: '设备名称过长',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
typeId: [
|
|
{
|
|
required: true,
|
|
message: '请选择设备类型',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
deviceName: [
|
|
{
|
|
required: true,
|
|
message: '请输入设备ID',
|
|
trigger: 'blur'
|
|
},
|
|
{
|
|
min: 2,
|
|
message: '设备ID过短',
|
|
trigger: 'blur'
|
|
},
|
|
{
|
|
max: 52,
|
|
message: '设备ID过长',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
};
|
|
// 表格编辑时弹窗和保存
|
|
const editVisible = ref(false);
|
|
let form = reactive({
|
|
name: '',
|
|
typeId: '',
|
|
deviceName: '',
|
|
location: '',
|
|
contractor: '',
|
|
manufacturer: '',
|
|
});
|
|
let idx: number = -1;
|
|
let formId: number = -1;
|
|
const handleEdit = (index: number, row: any) => {
|
|
idx = index;
|
|
formId = row.id;
|
|
form.name = row.name;
|
|
form.typeId = row.typeId;
|
|
form.deviceName = row.deviceName;
|
|
form.location = row.location;
|
|
form.contractor = row.contractor;
|
|
form.manufacturer = row.manufacturer;
|
|
editVisible.value = true;
|
|
};
|
|
// 新增弹窗
|
|
const handleNew = () => {
|
|
formId = -1;
|
|
for (let formKeys of Object.keys(form)) {
|
|
form[formKeys] = ''
|
|
}
|
|
editVisible.value = true;
|
|
};
|
|
|
|
const saveEdit = async (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return;
|
|
// console.log("formEl", formEl);
|
|
formEl.validate(async (valid: boolean, invalidFields: any) => {
|
|
if (!valid) {
|
|
// console.log("invalidFields", invalidFields);
|
|
// 对表单中的每一个不合法输入框进行遍历
|
|
Object.values(invalidFields).forEach((input: any) => {
|
|
// 对该不合法输入框的提示信息进行遍历
|
|
input.forEach((element: any) => {
|
|
ElMessage.error({ message: element.message, grouping: true });
|
|
});
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (formId > 0) {
|
|
// 更新表格中数据
|
|
tableData.value[idx].name = form.name;
|
|
tableData.value[idx].typeId = form.typeId;
|
|
tableData.value[idx].deviceName = form.deviceName;
|
|
tableData.value[idx].location = form.location;
|
|
tableData.value[idx].contractor = form.contractor;
|
|
tableData.value[idx].manufacturer = form.manufacturer;
|
|
// 修改记录
|
|
await send_request('v1/device/edit', "POST", {
|
|
id: formId,
|
|
contractor: form.contractor,
|
|
deviceName: form.deviceName,
|
|
name: form.name,
|
|
location: form.location,
|
|
manufacturer: form.manufacturer,
|
|
typeId: form.typeId
|
|
}, (data: any) => {
|
|
// console.log(data)
|
|
// 关闭弹窗
|
|
editVisible.value = false;
|
|
ElMessage.success(`修改成功`);
|
|
});
|
|
} else {
|
|
// 新增记录
|
|
await send_request('v1/device/add', "POST", {
|
|
contractor: form.contractor,
|
|
deviceName: form.deviceName,
|
|
name: form.name,
|
|
location: form.location,
|
|
manufacturer: form.manufacturer,
|
|
typeId: form.typeId
|
|
}, (data: any) => {
|
|
// console.log(data)
|
|
// 关闭弹窗
|
|
editVisible.value = false;
|
|
ElMessage.success(`添加成功`);
|
|
query.pageIndex = Math.ceil((pageTotal.value + 1) / query.pageSize);
|
|
getData();
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
// 导出设备到Excel列表
|
|
const exportExcel = async () => {
|
|
const loading = ElLoading.service({
|
|
lock: true,
|
|
text: '请稍候',
|
|
background: 'rgba(0, 0, 0, 0.7)',
|
|
});
|
|
|
|
let list = [['序号', '设备名称', '设备类型', '设备ID', '设备位置', '承建商', '生产商']];
|
|
await send_request('v1/device/listAll', "GET", {
|
|
}, (data: any) => {
|
|
data.list.map((item: any, i: number) => {
|
|
const arr: any[] = [i + 1];
|
|
// console.log("-----------------", arr);
|
|
arr.push(...[item.name, deviceTypeDict.value[item.typeId], item.deviceName, item.location, item.manufacturer, item.contractor]);
|
|
list.push(arr);
|
|
});
|
|
let WorkSheet = XLSX.utils.aoa_to_sheet(list);
|
|
let new_workbook = XLSX.utils.book_new();
|
|
XLSX.utils.book_append_sheet(new_workbook, WorkSheet, '第一页');
|
|
XLSX.writeFile(new_workbook, `表格.xlsx`);
|
|
});
|
|
loading.close();
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.handle-box {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.handle-select {
|
|
width: 120px;
|
|
}
|
|
|
|
.handle-input {
|
|
width: 300px;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.red {
|
|
color: #F56C6C;
|
|
}
|
|
|
|
.mr10 {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.table-td-thumb {
|
|
display: block;
|
|
margin: auto;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.popup-item {
|
|
width: 100%;
|
|
}
|
|
</style>
|