1.查，删
<template>
<div class="deviceBox">
<h4>设备管理</h4>
<div class="head">
<el-select
v-model="value"
placeholder="==请选择设备名称=="
size="small"
@change="handleChange"
>
<el-option key="全部" label="全部" value="全部" />
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<div class="headRight">
<div class="block">
<img src="/src/assets/001.png" alt="" /><span>导入</span>
</div>
<div class="block">
<img src="/src/assets/002.png" alt="" /> <span>导出</span>
</div>
<div class="block">
<img src="/src/assets/003.png" alt="" /> <span>打印</span>
</div>
<div class="block" @click="addFn">
<img src="/src/assets/004.png" alt="" /> <span>添加设备</span>
</div>
</div>
</div>
<el-table
ref="multipleTableRef"
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
size="small"
>
<el-table-column type="selection" width="40" />
<el-table-column prop="deviceName" label="设备名称" width="100" />
<el-table-column prop="deviceId" label="设备编号" />
<el-table-column prop="deviceLocation" label="存放位置" />
<el-table-column prop="deviceBrank" label="设备品牌" />
<el-table-column prop="purchaseYear" label="购置年份" />
<el-table-column prop="deviceCayegory" label="设备分类" />
<el-table-column prop="deviceState" label="设备状态" />
<el-table-column prop="devicePerson" label="设备管理员" />
<el-table-column label="操作" width="140">
<template #default="scope">
<el-button link type="primary" size="small" @click="editFn(scope.row)"
>编辑</el-button
>
<el-button
link
type="primary"
size="small"
@click="deleteFn(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="bottom">
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
small
background
layout="total, prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
getDeviceTypeApi,
getDeviceListApi,
delDeviceApi,
getDeviceListApi2,
} from "@/api/device";
const $router = useRouter();
let value = ref("");
let options: any = reactive([]);
//获取分类列表
const getDeviceType = () => {
getDeviceTypeApi().then((res: any) => {
let newdata: any = res.data.map((item: any) => ({
value: item.name,
label: item.name,
}));
options.splice(0, options.length, ...newdata);
console.log(options);
value.value = "";
});
};
getDeviceType();
//获取列表数据
interface User {
deviceId: string;
deviceName: string;
deviceLocation: string;
deviceOrigin: string;
purchaseYear: string;
deviceCayegory: string;
deviceState: string;
devicePerson: string;
activationdate: string;
deviceBrank: string;
}
//定义分页
let total = ref(0);
const currentPage = ref(1);
const pageSize = 8;
//定义表格数据为响应式数据
let tableData: User[] = reactive([]);
const getDeviceList = () => {
getDeviceListApi().then((res: any) => {
total.value = res.data.length;
const start = (currentPage.value - 1) * pageSize;
const end = start + pageSize;
const current = res.data.slice(start, end);
tableData.splice(0, tableData.length, ...current);
});
};
getDeviceList();
// 处理当前页码改变
const handleCurrentChange = (page: any) => {
currentPage.value = page;
console.log("pageSize", pageSize);
};
watch(currentPage, () => {
getDeviceList();
});
//复选框
const handleSelectionChange = () => {};
//点击下拉框
const handleChange = (selectedValue: any) => {
value.value = selectedValue;
getDeviceListApi2({ deviceName: value.value }).then((res: any) => {
tableData.splice(0, options.length, ...res.data);
});
if (value.value === "全部") {
getDeviceList();
}
};
//新增设备
const addFn = () => {
$router.push("/Device/AddDevice");
};
//删除设备
const deleteFn = (row: any) => {
console.log("row", row.id);
ElMessageBox.confirm("确定要删除该设备吗?", "Warning", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
delDeviceApi(row.id).then((res: any) => {
console.log(res.data);
getDeviceList();
});
ElMessage({
type: "success",
message: "删除成功",
});
})
.catch(() => {
ElMessage({
type: "info",
message: "删除失败",
});
});
};
//编辑
const editFn = (row: any) => {
console.log("点击编辑按钮", row.id);
$router.push({ path: "/Device/EditDevice", query: { id: row.id } });
};
</script>
<style lang="less" scoped>
.deviceBox {
width: 100%;
height: 100%;
padding: 10px;
h4 {
font-weight: 400;
}
.head {
display: flex;
justify-content: space-between;
align-items: center;
.headRight {
display: flex;
align-items: center;
.block {
padding: 0 10px;
font-size: 14px;
img {
vertical-align: middle;
}
}
}
}
.el-select {
margin-top: 20px;
}
.el-table {
margin-top: 20px;
}
.bottom {
margin-top: 20px;
}
}
</style>
2.增
<template>
<el-form :model="form" label-width="120px" size="small">
<el-row :gutter="24">
<el-col :span="10">
<el-form-item label="设备名称">
<el-select v-model="form.deviceName" placeholder="==请选择分类==">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="default">新增</el-button>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="规格型号">
<el-input v-model="form.specificationModel" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备状态">
<el-input v-model="form.deviceState" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="产地">
<el-input v-model="form.deviceOrigin" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="品牌">
<el-input v-model="form.deviceBrank" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="资产编号">
<el-input
v-model="form.deviceId"
placeholder="请输入：设备-检测-科室-设备编号"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备单价">
<el-input v-model="form.devicePrice" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="购置年份">
<el-input v-model="form.purchaseYear" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="启用日期">
<el-date-picker
v-model="form.activationDate"
type="date"
placeholder="Pick a date"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="10">
<el-form-item label="设备分类">
<el-select v-model="form.deviceCayegory" placeholder="==请选择分类==">
<el-option label="大型仪器" value="大型仪器" />
<el-option label="玻璃仪器" value="玻璃仪器" />
<el-option label="温控设备" value="温控设备" />
<el-option label="特种设备" value="特种设备" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="default">新增</el-button>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="10">
<el-form-item label="设备供货商">
<el-select v-model="form.supplier" placeholder="==请选择供货商==">
<el-option label="xxxx" value="xxxx" />
<el-option label="yyyy" value="yyyy" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="default">新增</el-button>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="10">
<el-form-item label="存放位置">
<el-select v-model="form.deviceLocation" placeholder="==请选择位置==">
<el-option label="色谱室" value="色谱室" />
<el-option label="光谱室" value="光谱室" />
<el-option label="理化室" value="理化室" />
<el-option label="微生物室" value="微生物室" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="default">新增</el-button>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="10">
<el-form-item label="管理员">
<el-select v-model="form.devicePerson" placeholder="==请选择管理员==">
<el-option label="小关" value="小关" />
<el-option label="小张" value="小张" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="default">新增</el-button>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" @click="onSubmit">新增</el-button>
<el-button @click="cancelFn">取消</el-button>
</el-form-item>
</el-form>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { addDeviceApi, getDeviceTypeApi } from "@/api/device";
const $router = useRouter();
//定义表单数据类型
const form = reactive({
deviceId: "",
deviceName: "",
deviceLocation: "",
deviceOrigin: "",
purchaseYear: "",
deviceCayegory: "",
deviceState: "",
devicePerson: "",
activationDate: "",
devicePrice: "",
deviceBrank: "",
EnglishName: "",
specificationModel: "",
supplier: "",
});
//定义表单中下拉框的值为响应式数据
let value = ref("");
let options: any = reactive([]);
//获取分类列表
const getDeviceType = () => {
getDeviceTypeApi().then((res: any) => {
let newdata: any = res.data.map((item: any) => ({
value: item.name,
label: item.name,
}));
options.splice(0, options.length, ...newdata);
console.log(options);
value.value = "";
});
};
getDeviceType();
//新增
const onSubmit = () => {
console.log("submit!");
console.log("value", form);
addDeviceApi(form).then((res: any) => {
console.log("res.data", res.data);
ElMessage({
message: "添加成功.",
type: "success",
});
$router.push("/Device/Manager");
});
};
//取消修改
const cancelFn = () => {
$router.push("/Device/Manager");
};
</script>
3.改
<template>
<div class="editBox">
<h4>修改设备信息</h4>
<el-form :model="form" label-width="120px" size="small">
<el-row :gutter="24">
<el-col :span="10">
<el-form-item label="设备名称">
<el-select v-model="device.deviceName" placeholder="==请选择分类==">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="default">新增</el-button>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="规格型号">
<el-input v-model="device.specificationModel" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备状态">
<el-input v-model="device.deviceState" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="产地">
<el-input v-model="device.deviceOrigin" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="品牌">
<el-input v-model="device.deviceBrank" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="资产编号">
<el-input v-model="device.deviceId" placeholder="请输入：设备-检测-科室-设备编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备单价">
<el-input v-model="device.devicePrice" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="购置年份">
<el-input v-model="device.purchaseYear" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="启用日期">
<el-date-picker v-model="device.activationDate" type="date" placeholder="Pick a date"
style="width: 100%" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="10">
<el-form-item label="设备分类">
<el-select v-model="device.deviceCayegory" placeholder="==请选择分类==">
<el-option label="大型仪器" value="大型仪器" />
<el-option label="玻璃仪器" value="玻璃仪器" />
<el-option label="温控设备" value="温控设备" />
<el-option label="特种设备" value="特种设备" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="default">新增</el-button>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="10">
<el-form-item label="设备供货商">
<el-select v-model="device.supplier" placeholder="==请选择供货商==">
<el-option label="xxxx" value="xxxx" />
<el-option label="yyyy" value="yyyy" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="default">新增</el-button>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="10">
<el-form-item label="存放位置">
<el-select v-model="device.deviceLocation" placeholder="==请选择位置==">
<el-option label="色谱室" value="色谱室" />
<el-option label="光谱室" value="光谱室" />
<el-option label="理化室" value="理化室" />
<el-option label="微生物室" value="微生物室" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="default">新增</el-button>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="10">
<el-form-item label="管理员">
<el-select v-model="device.devicePerson" placeholder="==请选择管理员==">
<el-option label="小关" value="小关" />
<el-option label="小张" value="小张" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="default">新增</el-button>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" @click="onSubmit">修改</el-button>
<el-button @click="cancelFn">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus';
import { useRouter, useRoute } from "vue-router";
import { editDeviceApi, getDeviceTypeApi, getDeviceListApi1 } from "@/api/device";
const $router = useRouter();
const $route = useRoute();
const id = $route.query.id;
//定义设备数据类型
const device = reactive({
deviceId: '',
deviceName: '',
deviceLocation: '',
deviceOrigin: '',
purchaseYear: '',
deviceCayegory: '',
deviceState: '',
devicePerson: '',
activationDate: '',
devicePrice: "",
deviceBrank: "",
specificationModel: "",
supplier: ""
})
//定义下拉框的值
let value = ref('');
let options: any = reactive([]);
//获取分类列表
const getDeviceType = () => {
getDeviceTypeApi()
.then((res: any) => {
let newdata: any = res.data.map((item: any) => ({ value: item.name, label: item.name }))
options.splice(0, options.length, ...newdata);
console.log(options);
value.value = '';
})
}
getDeviceType()
//获取当前这个id的数据
const getCurrentDeviceType = () => {
console.log("id", id);
getDeviceListApi1(id)
.then((res: any) => {
Object.assign(device, res.data);
console.log("编辑页面的device", device);
})
}
getCurrentDeviceType();
//修改
const onSubmit = () => {
console.log('submit!')
console.log("value", device)
editDeviceApi(id, device)
.then((res: any) => {
console.log("res.data", res.data);
ElMessage({
message: '编辑成功.',
type: 'success',
})
$router.push("/Device/Manager")
})
}
//取消修改
const cancelFn = () => {
$router.push("/Device/Manager")
}
</script>
<style lang="less" scoped>
.editBox {
width: 100%;
height: 100%;
padding: 10px;
h4 {
font-size: 16px;
font-weight: 400;
margin-bottom: 20px;
text-align: center;
}
}
</style>
2717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
