Skip to content

S
super-hive-web
Commit ec62b6c0 authored by wends's avatar wends
Browse files
Options

update 设备实例

parent 01ed96ad
Hide whitespace changes
Inline Side-by-side
Showing with 272 additions and 135 deletions
src/views/equipment-management/equipment-instance/index.vue
View file @ ec62b6c0
<template> <template>
<div> <el-card class="container">
<el-card class="no-bottom"> <el-row :gutter="20" class="content">
<el-form <el-col :xs="8" :sm="8" :md="6" :lg="4">
ref="searchForm" <div class="custom-menu">
:model="searchForm" <el-menu
label-width="80px" ref="customMenu"
inline :default-active="defaultActive"
> @select="onSelect"
<el-form-item >
label="input:" <el-menu-item
prop="input" v-for="(type, index) in typeList"
:key="'type' + index"
:index="type.id.toString()"
>{{ type.name }}</el-menu-item>
</el-menu>
</div>
</el-col>
<el-col :xs="16" :sm="16" :md="18" :lg="20">
<div class="top-container" style="display: flex;justify-content: space-between">
<el-form
:model="searchForm"
inline
label-width="80px"
@submit.native.prevent
>
<el-form-item label="">
<el-input v-model="searchForm.instanceName" clearable placeholder="设备名称">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-form-item>
</el-form>
<div class="buttons-group">
<el-button type="primary" @click="showAddItem">新增实例</el-button>
</div>
</div>
<el-table
:data="dataTable"
border
> >
<el-input v-model="searchForm.input" /> <el-table-column
</el-form-item> prop="name"
<el-form-item label="设备名称"
label="status:" />
prop="status" <el-table-column
> prop="description"
<el-select v-model="searchForm.status" placeholder="请选择"> label="设备描述"
<el-option label="全部" :value="null" /> />
<el-option label="正常" :value="0" /> <el-table-column
<el-option label="锁定" :value="1" /> prop="businessId"
</el-select> label="设备业务ID"
</el-form-item> />
<el-form-item> <el-table-column
<el-button type="primary" icon="el-icon-search" @click="getTableData">查询</el-button> prop="deviceModel"
<el-button icon="el-icon-refresh" @click="resetForm">重置</el-button> label="设备型号"
</el-form-item> />
</el-form> <el-table-column
</el-card> prop="createTime"
label="创建时间"
<el-card class="margin-top-20"> :formatter="$moment"
<div class="buttons-group margin-bottom-20"> />
<el-button type="primary" icon="el-icon-plus" @click="addRow">增加系统</el-button> <el-table-column
</div> prop="updateTime"
label="修改时间"
<el-table :formatter="$moment"
:data="tableData" />
border <el-table-column
> label="操作"
<el-table-column min-width="80"
type="index" >
label="序号" <template slot-scope="scope">
width="50px" <el-button type="text" @click="editItem(scope.row)">编辑</el-button>
align="center" <el-popconfirm
/> title="这是一段内容确定删除吗？"
<el-table-column >
prop="a" <el-button
label="a" slot="reference"
/> class="padding-left"
<el-table-column type="text"
prop="b" @click="deleteItem(scope.row.id)"
label="b" >删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-pagination
class="margin-top-20 text-align-right"
:current-page="pageForm.pageNum"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageForm.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/> />
<el-table-column </el-col>
prop="c" </el-row>
label="c"
/>
<el-table-column
prop="d"
label="d"
/>
<el-table-column
label="操作"
width="140px"
align="center"
>
<template slot-scope="props">
<el-button v-permission="'SysMgr_update'" type="text" @click="editItem(props.row)">编辑</el-button>
<el-popconfirm
title="确定要删除此条记录吗？"
@onConfirm="deleteItem(props.row.id)"
>
<el-button slot="reference" type="text">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-pagination
class="margin-top-20 text-align-right"
:current-page="pageForm.pageNum"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageForm.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-card>
<el-dialog <el-dialog
:title="add ? '增加系统' : '编辑系统'" :title="add ? '新增实例' : '编辑实例'"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="700px" width="700px"
> >
<el-form <el-form
:model="addForm" v-if="dialogVisible"
ref="instanceForm"
:model="instanceForm"
label-width="90px" label-width="90px"
:rules="rules"
> >
<el-form-item <el-form-item
label="input:" label="设备名称:"
prop="name"
>
<el-input v-model="instanceForm.name" />
</el-form-item>
<el-form-item
label="设备描述:"
prop="description"
>
<el-input
v-model="instanceForm.description"
type="textarea"
:row="2"
/>
</el-form-item>
<el-form-item
label="设备业务ID:"
> >
<el-input v-model="addForm.input" /> <el-input v-model="instanceForm.businessId" />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="status:" label="设备型号:"
> >
<el-input v-model="addForm.status" /> <el-input v-model="instanceForm.deviceModel" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveSystem">确 定</el-button> <el-button type="primary" @click="addItem">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </el-card>
</template> </template>
<script> <script>
import { getTableData } from '@/api/equipment-management/equipment-instance'
export default { export default {
name: 'EquipmentInstance', name: 'EquipmentInstance',
props: {}, props: {},
data() { data() {
return { return {
searchForm: { fakeData: {
input: null, '1': [
status: null {
}, id: 1,
add: true, deviceTypeId: '1',
dialogVisible: false, name: '鼓风机',
tableData: [], description: '1968-06-9',
addForm: { businessId: 1,
input: null, deviceModel: 1,
status: null createTime: 1596697194035,
updateTime: 1596697194035
}
],
'2': [
{
id: 1,
deviceTypeId: '2',
name: '机床',
description: '1968-06-9',
businessId: 1,
deviceModel: 1,
createTime: 1596697194035,
updateTime: 1596697194035
}
],
'3': [],
'4': []
}, },
dataTable: [],
dataHeader: [],
defaultActive: null,
typeList: [
{
id: 1,
name: '类型一'
},
{
id: 2,
name: '类型二'
},
{
id: 3,
name: '类型三'
},
{
id: 4,
name: '类型四'
}
],
searchForm: {},
pageForm: { pageForm: {
pageSize: 10, pageSize: 10,
pageNum: 1, pageNum: 1,
total: 0 total: 0
},
dialogVisible: false,
instanceForm: {
deviceTypeId: null,
name: null,
description: null,
businessId: null,
deviceModel: null
},
add: true,
rules: {
name: [
{ required: true, message: '请输入设备名称', trigger: 'blur' }
],
description: [
{ required: true, message: '请输入设备描述', trigger: 'blur' }
]
} }
} }
}, },
created() {}, created() {},
mounted() {}, mounted() {
if (this.typeList.length > 0) {
const type = this.typeList[0]
const indexPath = type.id.toString()
this.defaultActive = indexPath
this.getInstanceList(indexPath)
}
},
methods: { methods: {
getTableData(pageNum) { showAddItem() {
const params = { this.instanceForm = {
...this.searchForm, deviceTypeId: null,
pageNum, name: null,
pageSize: this.pageForm.pageSize description: null,
businessId: null,
deviceModel: null
} }
getTableData(params)
.then(res => {
const { records, totalSize } = res.data
this.tableData = records
this.pageForm.total = totalSize
})
.catch(err => console.error(err))
},
resetForm() {
this.$refs.searchForm.resetFields()
},
addRow() {
this.add = true
this.dialogVisible = true this.dialogVisible = true
this.add = true
}, },
editItem() { onSelect(index, indexPath) {
this.add = false const activeType = this.typeList[parseInt(index) - 1]
this.dialogVisible = true this.instanceForm.deviceTypeId = activeType.id
this.getInstanceList(indexPath[0])
},
getInstanceList(indexPath) {
const data = [...this.fakeData[indexPath]]
this.dataHeader = []
for (const key in data[0]) {
if (Object.prototype.hasOwnProperty.call(data[0], key)) {
this.dataHeader.push({
label: key,
prop: key
})
}
}
this.dataTable = data
}, },
deleteItem(id) {},
saveSystem() {},
handleSizeChange(val) { handleSizeChange(val) {
this.pageForm.pageSize = val this.pageForm.pageSize = val
this.getTableData(1)
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.pageForm.pageNum = val this.pageForm.pageNum = val
this.getTableData(val) },
editItem(row) {
const { id, deviceTypeId, name, description, businessId, deviceModel } = row
this.instanceForm = {
id,
deviceTypeId,
name,
description,
businessId,
deviceModel
}
this.dialogVisible = true
this.add = false
},
deleteItem(id) {},
addItem() {
this.$refs.instanceForm.validate()
.then(_ => {})
.catch(_ => {})
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container{
min-height: calc(100vh - 95px);
.content{
display: flex;
min-height: calc(100vh - 135px);
.padding-left{
padding-left: 10px;
}
.custom-menu{
width: 100%;
background-color: #efeff1;
height: 100%;
.el-menu{
background-color: initial;
border-right: none;
border-top: solid 1px #e6e6e6;
border-left: solid 1px #e6e6e6;
.el-menu-item.el-menu-item{
min-width: initial;
background-color: #efeff1;
}
.el-menu-item.is-active{
background-color: #fff;
color: #303133;
}
}
}
.top{
display: flex;
justify-content: space-between;
}
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment