Commit 13149244 authored by pangjh's avatar pangjh

前端代码提交

parent 7f525e99
import request from '@/utils/request'
// const baseURL = process.env.VUE_APP_BASE_API
const baseURL = ''
// 实例列表
export function listInstance(data) {
return request({
url: `${baseURL}/iot/model/getModelInstance4Page`,
method: 'post',
data
})
}
// 实例增加
export function addInstance(data) {
return request({
url: `${baseURL}/iot/model/instance/add`,
method: 'post',
data
})
}
// 实例编辑
export function editInstance(data) {
return request({
url: `${baseURL}/iot/model/instance/edit`,
method: 'post',
data
})
}
// 实例删除
export function deleteInstance(data) {
return request({
url: `${baseURL}/iot/model/instance/delete`,
method: 'post',
data
})
}
...@@ -46,3 +46,4 @@ export function deleteModel(data) { ...@@ -46,3 +46,4 @@ export function deleteModel(data) {
data data
}) })
} }
<template> <template>
<div> <div>
<el-card class="no-bottom"> <el-row>
<el-form <el-col style="width: 480px">
ref="searchForm" <el-card>
:model="searchForm" <el-form
label-width="80px" ref="searchForm"
inline :model="searchForm"
> label-width="80px"
<el-form-item inline
label="input:" >
prop="input" <el-form-item
> label="模型名称:"
<el-input v-model="searchForm.input" /> prop="name"
</el-form-item>
<el-form-item
label="status:"
prop="status"
>
<el-select v-model="searchForm.status" placeholder="请选择">
<el-option label="全部" :value="null" />
<el-option label="正常" :value="0" />
<el-option label="锁定" :value="1" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getTableData">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="margin-top-20">
<div class="buttons-group margin-bottom-20">
<el-button type="primary" icon="el-icon-plus" @click="addRow">增加系统</el-button>
</div>
<el-table
:data="tableData"
border
>
<el-table-column
type="index"
label="序号"
width="50px"
align="center"
/>
<el-table-column
prop="a"
label="a"
/>
<el-table-column
prop="b"
label="b"
/>
<el-table-column
prop="c"
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-input v-model="searchForm.name" style="width: 210px" />
</el-popconfirm> </el-form-item>
</template> <el-form-item>
</el-table-column> <el-button type="primary" icon="el-icon-search" @click="listModel(1)">查询</el-button>
</el-table> </el-form-item>
</el-form>
<el-pagination <el-table
class="margin-top-20 text-align-right" ref="tableModel"
:current-page="pageForm.pageNum" :data="tableData"
:page-sizes="[10, 20, 50, 100]" border
:page-size="pageForm.pageSize" height="541px"
layout="total, sizes, prev, pager, next, jumper" highlight-current-row
:total="pageForm.total" @current-change="handleTableSel"
@size-change="handleSizeChange" >
@current-change="handleCurrentChange" <el-table-column
/> type="index"
</el-card> label="序号"
width="50px"
align="center"
/>
<el-table-column
prop="name"
label="模型名称"
width="387px"
/>
</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-col>
<el-col style="margin-left:20px; width: 960px">
<el-card>
<el-form
ref="searchFormInstance"
:model="searchFormInstance"
label-width="80px"
inline
>
<el-form-item
label="实例名称:"
prop="name"
>
<el-input v-model="searchFormInstance.instanceName" style="width: 210px" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="listInstance(1)">查询</el-button>
</el-form-item>
</el-form>
<div class="buttons-group margin-bottom-20">
<el-button type="primary" icon="el-icon-plus" @click="showAddView">增加实例</el-button>
</div>
<el-table
res="tableInstance"
:data="tableDataInstance"
border
height="485px"
>
<el-table-column
type="index"
label="序号"
width="50px"
align="center"
/>
<el-table-column
prop="instanceName"
label="实例名称"
width="320px"
/>
<el-table-column
prop="description"
label="描述"
/>
<el-table-column
label="操作"
width="140px"
align="center"
>
<template slot-scope="props">
<el-button type="text" style="margin-right: 10px" @click="showEditView(props.row)">编辑</el-button>
<el-popconfirm
title="确定要删除此条记录吗?"
@onConfirm="deleteInstance(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="pageFormInstance.pageNum"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageFormInstance.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageFormInstance.total"
@size-change="handleSizeChangeInstance"
@current-change="handleCurrentChangeInstance"
/>
</el-card>
</el-col>
</el-row>
<el-dialog <el-dialog
:title="add ? '增加系统' : '编辑系统'" :title="add ? '增加实例' : '编辑实例'"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="700px" width="700px"
:before-close="beforeClose"
> >
<el-form <el-form
ref="addForm"
:model="addForm" :model="addForm"
label-width="90px" label-width="90px"
:rules="rules"
> >
<el-form-item <el-form-item
label="input:" label="实例名称:"
prop="instanceName"
> >
<el-input v-model="addForm.input" /> <el-input v-model="addForm.instanceName" />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="status:" label="描述:"
prop="description"
> >
<el-input v-model="addForm.status" /> <el-input v-model="addForm.description" type="textarea" :rows="4" />
</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="closeDialog">取 消</el-button>
<el-button type="primary" @click="saveSystem">确 定</el-button> <el-button type="primary" @click="saveInstance">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { listModel } from '@/api/object-management/model-management'
import { listInstance, addInstance, editInstance, deleteInstance } from '@/api/object-management/instance-management'
export default { export default {
name: 'ObjectInstance', name: 'ObjectModel',
props: {}, props: {},
data() { data() {
return { return {
searchForm: { searchForm: {
input: null, name: null
status: null },
searchFormInstance: {
instanceName: null
}, },
add: true,
dialogVisible: false,
tableData: [],
addForm: { addForm: {
input: null, instanceName: null,
status: null description: null,
id: null
}, },
tableData: [
],
tableDataInstance: [
],
pageForm: { pageForm: {
pageSize: 10, pageSize: 10,
pageNum: 1, pageNum: 1,
total: 0 total: 0
},
pageFormInstance: {
pageSize: 10,
pageNum: 1,
total: 0
},
add: true,
dialogVisible: false,
currentRowId: null,
currentRow: null,
currentModelId: null,
rules: {
instanceName: [
{ required: true, message: '请输入实例名称', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
],
description: [
{ required: true, message: '请输入描述', trigger: 'blur' },
{ min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
]
} }
} }
}, },
created() {}, created() {
this.listModel(1)
},
mounted() {}, mounted() {},
methods: { methods: {
getTableData(pageNum) {}, listModel(pageNum) {
resetForm() { const {
this.$refs.searchForm.resetFields() name
} = this.searchForm
const params = {
name,
pageNum,
pageSize: this.pageForm.pageSize
}
listModel(params)
.then(res => {
const { data } = res
this.tableData = data.records
this.pageForm.total = data.total
this.pageForm.pageNum = data.pageNum
})
.catch(err => {
console.error(err.message)
this.$message.error('查询遇到问题')
})
}, },
addRow() { handleSizeChange(val) {
this.pageForm.pageSize = val
this.listModel(1)
},
handleCurrentChange(val) {
this.pageForm.pageNum = val
this.listModel(val)
},
handleSizeChangeInstance(val) {
this.pageFormInstance.pageSize = val
this.listInstance(1)
},
handleCurrentChangeInstance(val) {
this.pageFormInstance.pageNum = val
this.listInstance(val)
},
handleTableSel(val) {
this.currentRow = val
this.currentModelId = this.currentRow.id
this.listInstance(1)
},
listInstance(pageNum) {
if (this.currentModelId === null) {
this.$message.error('请选择模型')
return
}
const {
instanceName
} = this.searchFormInstance
const params = {
modelId: this.currentModelId,
instanceName,
pageNum,
pageSize: this.pageFormInstance.pageSize
}
listInstance(params)
.then(res => {
const { data } = res
this.tableDataInstance = data.records
this.pageFormInstance.total = data.total
this.pageFormInstance.pageNum = data.pageNum
})
.catch(err => {
console.error(err.message)
this.$message.error('查询遇到问题')
})
},
resetFields() {
this.addForm = {
instanceName: null,
description: null,
id: null
}
this.$refs.addForm.clearValidate()
},
beforeClose(done) {
this.resetFields()
this.$nextTick()
.then(_ => {
done()
})
},
closeDialog() {
this.resetFields()
this.$nextTick()
.then(_ => {
this.dialogVisible = false
})
},
showAddView() {
if (this.currentModelId === null) {
this.$message.error('请选择模型')
return
}
this.add = true this.add = true
this.dialogVisible = true this.dialogVisible = true
}, },
editItem() { showEditView(row) {
if (this.currentModelId === null) {
this.$message.error('请选择模型')
return
}
this.add = false this.add = false
this.dialogVisible = true this.dialogVisible = true
this.addForm.instanceName = row.instanceName
this.addForm.description = row.description
this.addForm.id = row.id
}, },
deleteItem(id) {}, saveInstance() {
saveSystem() {}, this.$refs.addForm.validate()
handleSizeChange(val) { .then(_ => {
this.pageForm.pageSize = val const { instanceName, description } = this.addForm
this.getTableData(1) const params = {
instanceName,
description,
modelId: this.currentModelId
}
if (this.add) {
addInstance(params)
.then(_ => this.$message.success('操作成功'))
.then(_ => this.listInstance(1))
.then(_ => this.closeDialog())
.catch(err => {
this.$message.error('操作失败')
console.error(err.message)
})
} else {
params.id = this.addForm.id
editInstance(params)
.then(_ => this.$message.success('操作成功'))
.then(_ => this.listInstance(1))
.then(_ => this.closeDialog())
.catch(err => {
this.$message.error('操作失败')
console.error(err.message)
})
}
})
.catch(_ => {})
}, },
handleCurrentChange(val) { deleteInstance(id) {
this.pageForm.pageNum = val deleteInstance({ id: id })
this.getTableData(val) .then(res => this.$message.success('操作成功'))
.then(_ => {
this.listInstance(this.pageFormInstance.pageNum)
})
.catch(err => {
this.$message.error('操作失败')
console.error(err.message)
})
} }
} }
} }
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<el-card class="margin-top-20"> <el-card class="margin-top-20">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>模型数据</span> <span>模型数据</span>
<el-button v-if="!modelForm.hasInstance" style="float: right; padding: 0; margin-left: 10px" type="text" @click="addRow">添加</el-button> <el-button v-if="!modelForm.hasInstance" style="float: right; margin-left: 10px" type="primary" @click="addRow">添加</el-button>
</div> </div>
<el-form <el-form
ref="listForm" ref="listForm"
...@@ -59,6 +59,7 @@ ...@@ -59,6 +59,7 @@
v-if="props.row.edit" v-if="props.row.edit"
:prop="`propertyList.${props.$index}.propertyCode`" :prop="`propertyList.${props.$index}.propertyCode`"
label="" label=""
style="margin-bottom: 0px"
> >
<el-input v-model="props.row.propertyCode" /> <el-input v-model="props.row.propertyCode" />
</el-form-item> </el-form-item>
...@@ -75,6 +76,7 @@ ...@@ -75,6 +76,7 @@
v-if="props.row.edit" v-if="props.row.edit"
:prop="`propertyList.${props.$index}.propertyName`" :prop="`propertyList.${props.$index}.propertyName`"
label="" label=""
style="margin-bottom: 0px"
> >
<el-input v-model="props.row.propertyName" /> <el-input v-model="props.row.propertyName" />
</el-form-item> </el-form-item>
...@@ -90,6 +92,7 @@ ...@@ -90,6 +92,7 @@
v-if="props.row.edit" v-if="props.row.edit"
:prop="`propertyList.${props.$index}.propertyType`" :prop="`propertyList.${props.$index}.propertyType`"
label="" label=""
style="margin-bottom: 0px"
> >
<el-select v-model="props.row.propertyType"> <el-select v-model="props.row.propertyType">
<el-option <el-option
...@@ -112,6 +115,7 @@ ...@@ -112,6 +115,7 @@
v-if="props.row.edit" v-if="props.row.edit"
:prop="`propertyList.${props.$index}.propertyDefaultValue`" :prop="`propertyList.${props.$index}.propertyDefaultValue`"
label="" label=""
style="margin-bottom: 0px"
> >
<el-input v-model="props.row.propertyDefaultValue" /> <el-input v-model="props.row.propertyDefaultValue" />
</el-form-item> </el-form-item>
...@@ -127,6 +131,7 @@ ...@@ -127,6 +131,7 @@
v-if="props.row.edit" v-if="props.row.edit"
:prop="`propertyList.${props.$index}.propertyUnit`" :prop="`propertyList.${props.$index}.propertyUnit`"
label="" label=""
style="margin-bottom: 0px"
> >
<el-input v-model="props.row.propertyUnit" /> <el-input v-model="props.row.propertyUnit" />
</el-form-item> </el-form-item>
...@@ -274,7 +279,7 @@ export default { ...@@ -274,7 +279,7 @@ export default {
}) })
.catch(err => { .catch(err => {
console.error(err.message) console.error(err.message)
this.$message.error('保存失败') this.$message.error(err.message)
}) })
}, },
editModel() { editModel() {
...@@ -318,5 +323,7 @@ export default { ...@@ -318,5 +323,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.clearfix {
line-height: 36px;
}
</style> </style>
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
<el-table <el-table
:data="tableData" :data="tableData"
border border
height="500px"
> >
<el-table-column <el-table-column
type="index" type="index"
...@@ -176,11 +177,11 @@ export default { ...@@ -176,11 +177,11 @@ export default {
}, },
handleSizeChange(val) { handleSizeChange(val) {
this.pageForm.pageSize = val this.pageForm.pageSize = val
this.getTableData(1) this.listModel(1)
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.pageForm.pageNum = val this.pageForm.pageNum = val
this.getTableData(val) this.listModel(val)
}, },
onConfirm() { onConfirm() {
this.dialogVisible = false this.dialogVisible = false
......
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