<template>
|
<div class="app-container">
|
<div style="display: flex;align-items: center;margin-bottom: 16px;justify-content: space-between;">
|
<el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" round @click="operate(3,undefined)">增加设备</el-button>
|
<el-input placeholder="请输入机床名" v-model="keyWord" size="mini" style="max-width: 220px;margin-left: 10px;">
|
<el-button slot="append" icon="el-icon-search" style="padding: 12px;" @click="queryDevice()">查询</el-button>
|
</el-input>
|
</div>
|
<el-table :data="list" v-loading.table="listLoading" element-loading-text="Loading" fit border
|
style="width: 100%;" class="mdc-table">
|
<el-table-column prop="name"label="机床名"></el-table-column>
|
<el-table-column prop="type"label="机床类型"></el-table-column>
|
<el-table-column prop="ip" label="机床ip"></el-table-column>
|
<el-table-column prop="port" label="端口号"></el-table-column>
|
<el-table-column prop="workshop" label="车间名"></el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<!-- 编辑机床 -->
|
<i class="mdc-icon-font el-icon-view mdc-editor" @click="operate(0, scope.row)"></i>
|
<!-- 删除机床 -->
|
<i class="mdc-icon-font el-icon-delete mdc-delete" @click="operate(1, scope.row, scope.$index)"></i>
|
<!--其他-->
|
<!-- <i class="mdc-icon-font el-icon-setting mdc-setting" @click="operate(2, scope.row)"></i>-->
|
<i class="mdc-icon-font el-icon-setting mdc-setting"></i>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="padding-top: 10px;display: flex;justify-content: flex-end;align-items: center;">
|
<el-button-group>
|
<el-button type="primary" icon="el-icon-arrow-left" size="mini" round @click="prePage()" :disabled="canPaging[0]">上一页</el-button>
|
<el-button disabled size="mini" plain>{{currentPage}}/{{totalPage}}</el-button>
|
<el-button type="primary" size="mini" round @click="nextPage()" :disabled="canPaging[1]">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
</el-button-group>
|
</div>
|
<!-- 添加机床dialog -->
|
<create-device-dialog @submit="addDeviceCallback" :is-visible="dialog.showAdd"></create-device-dialog>
|
<!--机床信息编辑查看-->
|
<device-detail-dialog :is-visible="dialog.showMsg" :device="selectDevice" @submit="lookupDeviceInfoCallBack"></device-detail-dialog>
|
</div>
|
</template>
|
|
<script>
|
import createDeviceDialog from './dialog/DeviceAdd'
|
// import grantAuthDialog from './dialog/grant-auth'
|
import { mapGetters } from 'vuex'
|
import deviceDetailDialog from './dialog/DeviceDetail'
|
import { getMachineList, addDevice, delDevice, userAuth } from '@/api/MdcApi'
|
export default {
|
name: 'ums',
|
components: {
|
deviceDetailDialog,
|
// grantAuthDialog,
|
createDeviceDialog
|
},
|
data: function() {
|
return {
|
keyWord: '', // 关键字 用于搜索
|
listLoading: true,
|
list: [], // 机床列表
|
dialog: {
|
showAdd: false, // 添加
|
showMsg: false, // 详情
|
showGrant: false // 授权
|
},
|
selectDevice: {},
|
grantList: [],
|
currentPage: 1,
|
totalPage: 1
|
}
|
},
|
computed: {
|
...mapGetters({
|
workshopList: 'workshopList'
|
}),
|
canPaging() {
|
const tem = [false, false]
|
tem[0] = (this.currentPage <= 1)
|
tem[1] = (this.currentPage >= this.totalPage)
|
return tem
|
}
|
},
|
methods: {
|
/**
|
* 初始化已有机床
|
*/
|
initDevices() {
|
getMachineList(this.currentPage, this.keyWord).then(res => {
|
this.listLoading = false
|
let totalNum = parseInt(res.totalPage)
|
if (totalNum + '' === 'NaN') {
|
totalNum = 1
|
}
|
this.totalPage = totalNum
|
this.list = res.list || []
|
})
|
},
|
/**
|
* 查询机床
|
*/
|
queryDevice() {
|
this.currentPage = 1
|
this.initDevices()
|
},
|
/**
|
* 检查是否有相同机床名
|
* @param deviceName
|
* */
|
hasSameDeviceName(deviceName) {
|
for (let i = 0; i < this.list.length; i++) {
|
if (deviceName === this.list[i].name) {
|
return true
|
}
|
}
|
return false
|
},
|
/**
|
* 添加机床回调
|
* action 'confirm','cancel' data action 为 confirm 时候的回调数据
|
*/
|
addDeviceCallback({ action, data }) {
|
switch (action) {
|
case 'confirm':
|
if (this.hasSameDeviceName(data.user)) {
|
this.$message({
|
type: 'error',
|
message: '该机床名已存在，请重新输入'
|
})
|
return
|
} else {
|
// todo 网络请求 创建机床
|
addDevice(data).then(res => {
|
if (res.result === 'SUCCESS') {
|
this.list.push(data)
|
} else {
|
if (res.msg === 'type error') {
|
this.$message({
|
type: 'error',
|
message: '机床类型不支持，请重试...'
|
})
|
} else if (res.msg === 'workshop error') {
|
this.$message({
|
type: 'error',
|
message: '无此车间，请重试...'
|
})
|
} else {
|
this.$message({
|
type: 'error',
|
message: '增加机床失败，请重试...'
|
})
|
}
|
}
|
})
|
}
|
break
|
}
|
this.dialog.showAdd = false
|
},
|
/**
|
* 授权对话框回调
|
* @param { action:'confirm'或者'cancel' }
|
* */
|
grantCallback({ action, data }) {
|
switch (action) {
|
case 'confirm':
|
// todo 调用用户授权接口
|
userAuth(this.selectDevice.device, JSON.parse(data)).then(res => {
|
if (res.result === 'SUCCESS') {
|
this.selectDevice.workshops = data
|
this.dialog.showGrant = false
|
} else {
|
this.$message({
|
type: 'error',
|
message: '授权失败，请后重试!'
|
})
|
}
|
})
|
break
|
case 'cancel':
|
this.dialog.showGrant = false
|
break
|
}
|
},
|
/**
|
* 查看机床信息话框回调
|
* @param { action:'confirm'或者'cancel' }
|
* */
|
lookupDeviceInfoCallBack({ action, data }) {
|
switch (action) {
|
case 'confirm':
|
break
|
case 'cancel':
|
break
|
}
|
this.dialog.showMsg = false
|
},
|
/**
|
* 机床操作
|
* @param type
|
* @param user { userID, userName }
|
* @param index
|
*/
|
operate(type, device, index) {
|
this.selectDevice = device || {}
|
switch (type) {
|
case 0: // 编辑
|
this.dialog.showMsg = true
|
break
|
case 1: // 删除
|
this.$confirm('此操作将永久删除机床, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
customClass: 'mdc-confirm-dialog',
|
type: 'warning',
|
beforeClose: (action, instance, done) => {
|
switch (action) {
|
case 'confirm':
|
instance.confirmButtonLoading = true
|
instance.confirmButtonText = '执行中...'
|
// todo 模拟调用接口 删除机床
|
// console.log(this.selectDevice)
|
delDevice(this.selectDevice.name).then(res => {
|
// {"result":"SUCCESS"}
|
if (res.result === 'SUCCESS') {
|
instance.confirmButtonLoading = false
|
instance.confirmButtonText = '确定'
|
done()
|
this.list.splice(index, 1)
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
})
|
} else {
|
this.$message({
|
type: 'error',
|
message: '删除失败，请收稍后重试!'
|
})
|
}
|
})
|
break
|
case 'cancel':
|
done()
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
break
|
}
|
}
|
}).catch(() => {})
|
break
|
case 3: // 添加机床
|
this.dialog.showAdd = true
|
break
|
}
|
}
|
},
|
/**
|
* 上一页
|
*/
|
prePage() {
|
this.currentPage--
|
this.initDevices()
|
},
|
/**
|
* 下一页
|
*/
|
nextPage() {
|
this.currentPage++
|
this.initDevices()
|
},
|
/**
|
* 初始化数据
|
*/
|
created() {
|
this.initDevices()
|
}
|
}
|
</script>
|
|
<style scoped>
|
.mdc-icon-font{
|
font-size: 18px;margin-right: 6px;
|
}
|
.mdc-icon-font:active{
|
opacity: 0.5;
|
}
|
.mdc-editor{
|
color: #409EFF;
|
}
|
.mdc-delete{
|
color: #F56C6C;
|
}
|
.mdc-setting{
|
color: #67C23A;
|
}
|
.mdc-table{}
|
.mdc-table>>> thead th{
|
background-color: #e7f1fd;color:#606266;
|
}
|
.mdc-table>>> .el-table__body tr:hover>td{
|
background-color: transparent;
|
}
|
</style>
|
|
