Skip to content

E
EMS
提交 8a58ef28 authored 作者: hejie's avatar hejie
浏览文件
操作

feat: 🚀 设备管理模块添加新增页面和查询页面

上级 85664d58
隐藏空白字符变更
内嵌 并排
正在显示 包含 848 行增加 和 2 行删除
src/views/device/add.vue 0 → 100644
浏览文件 @ 8a58ef28
<script setup lang="ts">
import { useAddHook } from "./utils/addHook";
const { form, handleReset, handleSubmit, rules, validateForm } = useAddHook();
</script>
<template>
<div class="add-device">
<h3>设备信息</h3>
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
<el-row :gutter="30">
<el-col :span="20">
<el-row :gutter="50" class="my-5">
<el-col :span="8">
<el-form-item label="设备名称" prop="name">
<el-input v-model="form.name" placeholder="请输入设备名称" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="所属设备" prop="sssb">
<el-select v-model="form.sssb" placeholder="请选择设备分类">
<el-option label="分类1" value="1" />
<el-option label="分类2" value="2" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="设备名称" prop="sssb">
<el-select v-model="form.sssb" placeholder="请选择设备分类">
<el-option label="分类1" value="1" />
<el-option label="分类2" value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="50" class="my-5">
<el-col :span="8">
<el-form-item label="设备编号" prop="name">
<el-input v-model="form.name" placeholder="请输入设备名称" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="设备类型" prop="sssb">
<el-select v-model="form.sssb" placeholder="请选择设备分类">
<el-option label="分类1" value="1" />
<el-option label="分类2" value="2" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="设备型号" prop="sssb">
<el-select v-model="form.sssb" placeholder="请选择设备分类">
<el-option label="分类1" value="1" />
<el-option label="分类2" value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="50" class="my-5">
<el-col :span="12">
<el-form-item label="设备联系人" prop="name">
<el-input v-model="form.name" placeholder="请输入设备名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="部署位置" prop="sssb">
<el-input v-model="form.name" placeholder="请输入设备名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="50" class="my-5">
<el-col :span="8">
<el-form-item label="所属站点" prop="name">
<el-input v-model="form.name" placeholder="请输入设备名称" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="设备出厂日期" prop="sssb">
<el-select v-model="form.sssb" placeholder="请选择设备分类">
<el-option label="分类1" value="1" />
<el-option label="分类2" value="2" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="设备厂商" prop="sssb">
<el-select v-model="form.sssb" placeholder="请选择设备分类">
<el-option label="分类1" value="1" />
<el-option label="分类2" value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="50" class="my-5">
<el-col :span="8">
<el-form-item label="年检提醒" prop="name">
<el-input v-model="form.name" placeholder="请输入设备名称" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="设备用途" prop="sssb">
<el-select v-model="form.sssb" placeholder="请选择设备分类">
<el-option label="分类1" value="1" />
<el-option label="分类2" value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="4" class="my-5 flex justify-center items-center">
<el-form-item
label="设备图片"
prop="fileList"
label-position="top"
:rules="[{ required: true, message: '附件不能为空' }]"
>
<el-upload
ref="uploadRef"
v-model:file-list="validateForm.fileList"
drag
multiple
action="#"
class="w-[200px]!"
:auto-upload="false"
>
<img
src="https://shoplineimg.com/65a8de08211b1e008886980e/6659acc772c9d500104bb668/800x.png?"
alt=""
/>
<div class="el-upload__text">
<UploadIcon class="m-auto mb-2" />
2M以内，支持JPG、PNG格式 <br />
<em> 可点击或拖拽上传 </em>
</div>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row class="mt-4">
<el-col :span="24">
<el-form-item label="备注" prop="name">
<el-input
v-model="form.name"
type="textarea"
placeholder="请输入设备描述"
:rows="10"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="flex justify-end mt-4">
<el-button size="large" @click="handleReset">取消</el-button>
<el-button size="large" type="primary" @click="handleSubmit"
>确定</el-button
>
</div>
</div>
</template>
<style lang="scss" scoped>
.add-device {
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}
.add-device h1 {
margin-bottom: 10px;
font-size: 24px;
color: #333;
}
</style>
src/views/device/index.vue
浏览文件 @ 8a58ef28
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import { useDept } from "./hook"; import { useDept } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar"; import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
......
src/views/device/list.vue 0 → 100644
浏览文件 @ 8a58ef28
<script setup lang="ts">
import { ref } from "vue";
import { useDept } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
// 导入不同的图标组件
import Delete from "~icons/ep/delete";
import EditPen from "~icons/ep/edit-pen";
import Refresh from "~icons/ep/refresh";
import AddFill from "~icons/ri/add-circle-line";
import { Column } from "element-plus";
defineOptions({ name: "device" });
const formRef = ref();
const tableRef = ref();
const {
form,
loading,
columns,
dataList,
onSearch,
resetForm,
openDialog,
handleDelete,
handleSelectionChange
} = useDept();
function onFullscreen() {
tableRef.value.setAdaptive();
}
</script>
<template>
<div class="main">
<el-form
ref="formRef"
:inline="true"
:model="form"
class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
>
<el-form-item label="设备名称：" prop="name">
<el-input
v-model="form.name"
placeholder="请输入设备名称"
clearable
class="w-[180px]!"
/>
</el-form-item>
<el-form-item label="状态：" prop="status">
<el-select
v-model="form.status"
placeholder="请选择状态"
clearable
class="w-[180px]!"
>
<el-option label="启用" :value="1" />
<el-option label="停用" :value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="useRenderIcon('ri/search-line')"
:loading="loading"
@click="onSearch"
>
搜索框
</el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
重置
</el-button>
</el-form-item>
</el-form>
<PureTableBar
:title="'设备（仅演示，操作后不生效）'"
:columns="columns"
:tableRef="tableRef?.getTableRef()"
@refresh="onSearch"
@fullscreen="onFullscreen"
>
<template #buttons>
<el-button
type="primary"
:icon="useRenderIcon(AddFill)"
@click="openDialog()"
>
新增设备
</el-button>
</template>
<template v-slot="{ size, dynamicColumns }">
<pure-table
ref="tableRef"
adaptive
:adaptiveConfig="{ offsetBottom: 45 }"
align-whole="center"
row-key="id"
showOverflowTooltip
table-layout="auto"
default-expand-all
:loading="loading"
:size="size"
:data="dataList"
:columns="dynamicColumns"
:header-cell-style="{
background: 'var(--el-fill-color-light)',
color: 'var(--el-text-color-primary)'
}"
@selection-change="handleSelectionChange"
>
<template #operation="{ row }">
<el-button
class="reset-margin"
link
type="primary"
:size="size"
:icon="useRenderIcon(EditPen)"
@click="openDialog('修改', row)"
>
修改
</el-button>
<el-button
class="reset-margin"
link
type="primary"
:size="size"
:icon="useRenderIcon(AddFill)"
@click="openDialog('新增', { parentId: row.id } as any)"
>
新增
</el-button>
<el-popconfirm
:title="`是否确认删除设备名称为${row.name}的这条数据`"
@confirm="handleDelete(row)"
>
<template #reference>
<el-button
class="reset-margin"
link
type="primary"
:size="size"
:icon="useRenderIcon(Delete)"
>
删除
</el-button>
</template>
</el-popconfirm>
</template>
</pure-table>
</template>
</PureTableBar>
</div>
</template>
<style lang="scss" scoped>
/* 移除表格内滚动条底部的线 */
:deep(.el-table__inner-wrapper::before) {
height: 0;
}
/* 主内容区域样式 */
:deep(.main-content) {
margin: 24px 24px 0 !important;
}
/* 搜索按钮样式 */
:deep(.search-form) {
.el-form-item {
margin-bottom: 12px;
}
}
</style>
src/views/device/search.vue 0 → 100644
浏览文件 @ 8a58ef28
<script setup lang="ts">
import { ref } from "vue";
import { useRole } from "./utils/searchHook";
// import { getPickerShortcuts } from "../../utils";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Delete from "~icons/ep/delete";
import Refresh from "~icons/ep/refresh";
defineOptions({
name: "LoginLog"
});
const formRef = ref();
const tableRef = ref();
const {
form,
loading,
columns,
dataList,
pagination,
selectedNum,
onSearch,
clearAll,
resetForm,
onbatchDel,
handleSizeChange,
onSelectionCancel,
handleCurrentChange,
handleSelectionChange
} = useRole(tableRef);
</script>
<template>
<div class="main">
<!-- <h3>查询条件</h3> -->
<el-form
ref="formRef"
:inline="true"
:model="form"
class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
label-position="left"
label-width="85px"
>
<el-form-item label="设别分类" prop="status">
<el-select
v-model="form.status"
placeholder="请选择"
clearable
class="w-[150px]!"
>
<el-option label="成功" value="1" />
<el-option label="失败" value="0" />
</el-select>
</el-form-item>
<el-form-item label="所属设备" prop="status">
<el-select
v-model="form.status"
placeholder="请选择"
clearable
class="w-[150px]!"
>
<el-option label="成功" value="1" />
<el-option label="失败" value="0" />
</el-select>
</el-form-item>
<el-form-item label="设备名称" prop="username">
<el-input
v-model="form.username"
placeholder="请输入用户名"
clearable
class="w-[150px]!"
/>
</el-form-item>
<el-form-item label="设备类型" prop="status" label-width="85px">
<el-select
v-model="form.status"
placeholder="请选择"
clearable
class="w-[150px]!"
>
<el-option label="成功" value="1" />
<el-option label="失败" value="0" />
</el-select>
</el-form-item>
<el-form-item label="设备型号" prop="username">
<el-input
v-model="form.username"
placeholder="请输入用户名"
clearable
class="w-[150px]!"
/>
</el-form-item>
<el-form-item label="设备编号" prop="username">
<el-input
v-model="form.username"
placeholder="请输入用户名"
clearable
class="w-[150px]!"
/>
</el-form-item>
<el-form-item label="所属站点" prop="status">
<el-select
v-model="form.status"
placeholder="请选择"
clearable
class="w-[150px]!"
>
<el-option label="成功" value="1" />
<el-option label="失败" value="0" />
</el-select>
</el-form-item>
<el-form-item label="设备联系人" prop="username" label-width="85px">
<el-input
v-model="form.username"
placeholder="请输入用户名"
clearable
class="w-[150px]!"
/>
</el-form-item>
<el-form-item label="部署位置" prop="username">
<el-input
v-model="form.username"
placeholder="请输入用户名"
clearable
class="w-[150px]!"
/>
</el-form-item>
<el-form-item label="设备出厂日期" prop="loginTime" label-width="102px">
<!-- :shortcuts="getPickerShortcuts()" -->
<el-date-picker
v-model="form.loginTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期时间"
end-placeholder="结束日期时间"
/>
</el-form-item>
<el-form-item label="设备厂商" prop="username">
<el-input
v-model="form.username"
placeholder="请输入用户名"
clearable
class="w-[150px]!"
/>
</el-form-item>
<el-form-item label="年检提醒" prop="username">
<el-input
v-model="form.username"
placeholder="请输入用户名"
clearable
class="w-[150px]!"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="useRenderIcon('ri:search-line')"
:loading="loading"
@click="onSearch"
>
查询
</el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
重置
</el-button>
</el-form-item>
</el-form>
<PureTableBar title="查询结果" :columns="columns" @refresh="onSearch">
<!-- <template #buttons>
<el-popconfirm title="确定要删除所有日志数据吗？" @confirm="clearAll">
<template #reference>
<el-button type="danger" :icon="useRenderIcon(Delete)">
清空日志
</el-button>
</template>
</el-popconfirm>
</template> -->
<template v-slot="{ size, dynamicColumns }">
<div
v-if="selectedNum > 0"
v-motion-fade
class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
>
<div class="flex-auto">
<span
style="font-size: var(--el-font-size-base)"
class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
>
已选 {{ selectedNum }} 项
</span>
<el-button type="primary" text @click="onSelectionCancel">
取消选择
</el-button>
</div>
<el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
<template #reference>
<el-button type="danger" text class="mr-1!"> 批量删除 </el-button>
</template>
</el-popconfirm>
</div>
<pure-table
ref="tableRef"
row-key="id"
align-whole="center"
table-layout="auto"
:loading="loading"
:size="size"
adaptive
:adaptiveConfig="{ offsetBottom: 108 }"
:data="dataList"
:columns="dynamicColumns"
:pagination="{ ...pagination, size }"
:header-cell-style="{
background: 'var(--el-fill-color-light)',
color: 'var(--el-text-color-primary)'
}"
@selection-change="handleSelectionChange"
@page-size-change="handleSizeChange"
@page-current-change="handleCurrentChange"
/>
</template>
</PureTableBar>
</div>
</template>
<style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) {
margin: 0;
}
.main-content {
margin: 24px 24px 0 !important;
}
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
}
}
</style>
src/views/device/utils/addHook.tsx 0 → 100644
浏览文件 @ 8a58ef28
import { message } from "@/utils/message";
import { reactive, ref, onMounted, toRaw } from "vue";
export function useAddHook() {
const form = reactive({
name: "",
sssb: "",
sbmc2: "",
sbbh: "",
sblx: "",
sbxh: "",
sblxr: "",
bswz: "",
sszd: "",
sbccrq: "",
sbcs: "",
njtx: "",
sbyt: "",
bz: ""
});
const formRef = ref();
const validateForm = reactive({
fileList: [],
date: ""
});
const rules = {
name: [{ required: true, message: "请输入设备名称", trigger: "blur" }]
// sssb: [{ required: true, message: "请输入设备分类", trigger: "blur" }],
// sbmc2: [{ required: true, message: "请输入所属设备", trigger: "blur" }],
// sblx: [{ required: true, message: "请输入设备类型", trigger: "blur" }],
// sbxh: [{ required: true, message: "请输入设备型号", trigger: "blur" }],
// sblxr: [{ required: true, message: "请输入设备联系人", trigger: "blur" }],
// bswz: [{ required: true, message: "请输入设备位置", trigger: "blur" }],
// sszd: [{ required: true, message: "请输入所属站点", trigger: "blur" }],
// sbccrq: [{ required: true, message: "请输入出厂日期", trigger: "blur" }],
// sbcs: [{ required: true, message: "请输入设备厂商", trigger: "blur" }],
// njtx: [{ required: true, message: "请输入年检提醒", trigger: "blur" }],
// sbyt: [{ required: true, message: "请输入设备状态", trigger: "blur" }],
// bz: [{ required: true, message: "请输入备注", trigger: "blur" }]
};
const handleReset = () => {
Object.keys(form).forEach(key => {
form[key] = "";
});
};
const handleSubmit = async () => {
const data = toRaw(form);
const res = await addDevice(data);
if (res.code === 200) {
message.success("添加成功");
} else {
message.error("添加失败" + res.msg);
}
};
// })
onMounted(() => {
// 获取设备类型
// 获取设备型号
// 获取设备厂商
// 获取设备状态
});
return {
form,
handleReset,
handleSubmit,
rules,
formRef,
validateForm
};
}
src/views/device/hook.tsx → src/views/device/utils/hook.tsx
浏览文件 @ 8a58ef28
...@@ -7,7 +7,7 @@ import { getDeptList, addDept, deleteDept, updateDept } from "@/api/systems"; ...@@ -7,7 +7,7 @@ import { getDeptList, addDept, deleteDept, updateDept } from "@/api/systems";
import { usePublicHooks } from "@/hooks/hooks"; import { usePublicHooks } from "@/hooks/hooks";
import { addDialog } from "@/components/ReDialog"; import { addDialog } from "@/components/ReDialog";
import { reactive, ref, onMounted, h } from "vue"; import { reactive, ref, onMounted, h } from "vue";
import type { FormItemProps } from "./types"; import type { FormItemProps } from "../types";
import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils"; import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
export function useDept() { export function useDept() {
const form = reactive({ const form = reactive({
......
src/views/device/utils/searchHook.tsx 0 → 100644
浏览文件 @ 8a58ef28
import dayjs from "dayjs";
import { message } from "@/utils/message";
import { getKeyList } from "@pureadmin/utils";
import { getLoginLogsList } from "@/api/system";
// import { usePublicHooks } from "@/views/system/hooks";
import type { PaginationProps } from "@pureadmin/table";
import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
export function useRole(tableRef: Ref) {
const form = reactive({
username: "",
status: "",
loginTime: ""
});
const dataList = ref([]);
const loading = ref(false);
const selectedNum = ref(0);
// const { tagStyle } = usePublicHooks();
const pagination = reactive<PaginationProps>({
total: 0,
pageSize: 10,
currentPage: 1,
background: true
});
const columns: TableColumnList = [
{
label: "勾选列", // 如果需要表格多选，此处label必须设置
type: "selection",
fixed: "left",
reserveSelection: true // 数据刷新后保留选项
},
{
label: "序号",
prop: "id",
minWidth: 90
},
{
label: "设备分类",
prop: "username",
minWidth: 100
},
{
label: "所属设备",
prop: "ip",
minWidth: 140
},
{
label: "设备名称",
prop: "address",
minWidth: 140
},
{
label: "设备类型",
prop: "system",
minWidth: 100
},
{
label: "设备型号",
prop: "browser",
minWidth: 100
},
{
label: "所属站点",
prop: "behavior",
minWidth: 100
},
{
label: "设备联系人",
prop: "behavior",
minWidth: 100
},
{
label: "部署位置",
prop: "behavior",
minWidth: 100
},
{
label: "设备出厂日期",
prop: "loginTime",
minWidth: 180,
formatter: ({ loginTime }) =>
dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
},
{
label: "设备厂商",
prop: "behavior",
minWidth: 100
},
{
label: "年检提醒",
prop: "behavior",
minWidth: 100
}
];
function handleSizeChange(val: number) {
console.log(`${val} items per page`);
}
function handleCurrentChange(val: number) {
console.log(`current page: ${val}`);
}
/** 当CheckBox选择项发生变化时会触发该事件 */
function handleSelectionChange(val) {
selectedNum.value = val.length;
// 重置表格高度
tableRef.value.setAdaptive();
}
/** 取消选择 */
function onSelectionCancel() {
selectedNum.value = 0;
// 用于多选表格，清空用户的选择
tableRef.value.getTableRef().clearSelection();
}
/** 批量删除 */
function onbatchDel() {
// 返回当前选中的行
const curSelected = tableRef.value.getTableRef().getSelectionRows();
// 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
message(`已删除序号为 ${getKeyList(curSelected, "id")} 的数据`, {
type: "success"
});
tableRef.value.getTableRef().clearSelection();
onSearch();
}
/** 清空日志 */
function clearAll() {
// 根据实际业务，调用接口删除所有日志数据
message("已删除所有日志数据", {
type: "success"
});
onSearch();
}
async function onSearch() {
loading.value = true;
const { data } = await getLoginLogsList(toRaw(form));
dataList.value = data.list;
pagination.total = data.total;
pagination.pageSize = data.pageSize;
pagination.currentPage = data.currentPage;
setTimeout(() => {
loading.value = false;
}, 500);
}
const resetForm = formEl => {
if (!formEl) return;
formEl.resetFields();
onSearch();
};
onMounted(() => {
// onSearch();
});
return {
form,
loading,
columns,
dataList,
pagination,
selectedNum,
onSearch,
clearAll,
resetForm,
onbatchDel,
handleSizeChange,
onSelectionCancel,
handleCurrentChange,
handleSelectionChange
};
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论