You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

293 lines
9.1 KiB

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- <link rel="stylesheet" href="./css/element.css">-->
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<script src="../js/element.js"></script>
<script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
<div id="app">
<template>
<el-select v-model="devicecategory" placeholder="请选择">
<el-option
v-for="item in devicecategoryAll"
:key="item.categoryID"
:label="item.categoryName"
:value="item.categoryID">
</el-option>
</el-select>
</template>
<template>
<el-select v-model="location" placeholder="请选择">
<el-option
v-for="item in locationAll"
:key="item.locationID"
:label="item.locationName"
:value="item.locationID">
</el-option>
</el-select>
</template>
<el-button @click="devicePage()" type="primary">查找</el-button>
<el-button v-if="use === 'admin'" @click="dialogVisible = true" type="primary">运行</el-button>
<template>
<el-table
:data="page.records"
border
style="width: 100%">
<el-table-column
fixed
prop="deviceName"
label="设备名称"
width="150">
</el-table-column>
<el-table-column
prop="type"
label="设备类型"
width="120">
</el-table-column>
<el-table-column
prop="model"
label="型号"
width="120">
</el-table-column>
<el-table-column
prop="purchaseDate"
label="入场时间"
width="120">
</el-table-column>
<el-table-column
prop="locationName"
label="位置"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button v-if="use === 'admin'" @click="delDevice(scope.row.deviceID)" type="text" size="small">报废</el-button>
<el-button v-if="use === 'admin'" @click="modifyDevice(scope.row)" type="text" size="small">维护</el-button>
</template>
</el-table-column>
</el-table>
</template>
<el-pagination
small
@current-change="handleCurrentChange"
layout="prev, pager, next"
:total="50">
</el-pagination>
<el-dialog
title="运行设备"
:visible.sync="dialogVisible"
width="30%"
>
<el-input v-model="addDevice.deviceName" placeholder="输入设备名字"></el-input>
<el-input v-model="addDevice.model" placeholder="输入设备型号"></el-input>
<template>
<el-select v-model="devicecategory" placeholder="请选择设备类型">
<el-option
v-for="item in devicecategoryAll"
:key="item.categoryID"
:label="item.categoryName"
:value="item.categoryID">
</el-option>
</el-select>
</template>
<template>
<el-select v-model="location" placeholder="请选择设备位置">
<el-option
v-for="item in locationAll"
:key="item.locationID"
:label="item.locationName"
:value="item.locationID">
</el-option>
</el-select>
</template>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addDeviceOk ">确 定</el-button>
</span>
</el-dialog>
<el-dialog
title="维修设备"
:visible.sync="dialogVisible1"
width="30%"
>
<el-input v-model="modifyDevice1.deviceName" placeholder="输入设备名字"></el-input>
<el-input v-model="modifyDevice1.model" placeholder="输入设备型号"></el-input>
<template>
<el-select v-model="devicecategory" placeholder="请选择设备类型">
<el-option
v-for="item in devicecategoryAll"
:key="item.categoryID"
:label="item.categoryName"
:value="item.categoryID">
</el-option>
</el-select>
</template>
<template>
<el-select v-model="location" placeholder="请选择设备位置">
<el-option
v-for="item in locationAll"
:key="item.locationID"
:label="item.locationName"
:value="item.locationID">
</el-option>
</el-select>
</template>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible1 = false">取 消</el-button>
<el-button type="primary" @click="modifyDeviceOk ">确 定</el-button>
</span>
</el-dialog>
</div>
<script>
new Vue({
el: '#app',
data: {
page: {
size: 5,
current: 1
},
dialogVisible:false,
device:[],
use:"",
dialogVisible1:false,
addDevice:{},
modifyDevice1:{},
devicecategoryAll:[],
devicecategory:"",
locationAll:[],
location:""
},
methods: {
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.topage(val)
},
topage(current) {
this.page.current = current
axios.post("/device/devicePage", this.page).then(resp => {
this.page = resp.data.data
})
},
devicePage() {
this.page.deviceType=this.devicecategory
this.page.location=this.location
axios.post("/device/devicePage", this.page)
.then(resp => {
if (resp.data.code == 200) {
this.page = resp.data.data
}
})
},
findDevicecategoryAll() {
axios.post("/devicecategory/devicecategoryAll")
.then(resp => {
if (resp.data.code == 200) {
this.devicecategoryAll = resp.data.data
}
})
},
delDevice(obj){
axios.post("/device/delDevice",{
id:obj
})
.then(resp => {
if (resp.data.code == 200) {
alert(resp.data.message)
this.devicePage();
}
})
},
findLocationAll() {
axios.post("/location/locationAll")
.then(resp => {
if (resp.data.code == 200) {
this.locationAll = resp.data.data
}
})
},
modifyDevice(obj){
this.modifyDevice1=obj
this.devicecategory=obj.deviceType
this.location=obj.location
this.dialogVisible1=true
},
modifyDeviceOk(obj){
this.modifyDevice1.deviceType=this.devicecategory
this.modifyDevice1.location=this.location
axios.post("/device/modifyDevice",this.modifyDevice1)
.then(resp => {
if (resp.data.code == 200) {
alert(resp.data.message)
this.dialogVisible1=false
this.location=""
this.devicecategory=""
this.devicePage();
}
})
},
addDeviceOk(){
this.addDevice.deviceType=this.devicecategory
this.addDevice.location=this.location
axios.post("/device/addDevice",this.addDevice)
.then(resp => {
if (resp.data.code == 200) {
alert(resp.data.message)
this.dialogVisible=false
this.location=""
this.devicecategory=""
this.devicePage();
}
})
}
},
created() {
this.devicePage();
this.findDevicecategoryAll();
this.findLocationAll();
this.use = JSON.parse(sessionStorage.getItem("loginUser")).userName;
}
})
</script>
</body>
</html>