Skip to content

S
super-hive-web
Commit 639b7eb3 authored by pangjh's avatar pangjh
Browse files
Options

前端代码提交

parent 2747dc0c
Hide whitespace changes
Inline Side-by-side
Showing with 427 additions and 96 deletions
src/api/object-management/model-management.js 0 → 100644
View file @ 639b7eb3
import request from '@/utils/request'
// const baseURL = process.env.VUE_APP_BASE_API
const baseURL = ''
// 模型新增
export function addModel(data) {
return request({
url: `${baseURL}/iot/model/add`,
method: 'post',
data
})
}
// 模型列表
export function listModel(data) {
return request({
url: `${baseURL}/iot/model/list`,
method: 'post',
data
})
}
// 模型详情
export function getModelDetail(data) {
return request({
url: `${baseURL}/iot/model/detail`,
method: 'post',
data
})
}
// 模型编辑
export function editModel(data) {
return request({
url: `${baseURL}/iot/model/edit`,
method: 'post',
data
})
}
// 模型删除
export function deleteModel(data) {
return request({
url: `${baseURL}/iot/model/delete`,
method: 'post',
data
})
}
src/views/object-management/model-management/AddOrUpdate.vue
View file @ 639b7eb3
......@@ -6,60 +6,152 @@
<span>基本信息</span>
</div>
<el-form
:model="basicInfoForm"
ref="modelForm"
:model="modelForm"
label-width="90px"
>
<el-form-item
label="模型名称:"
>
<el-input v-model="basicInfoForm.name" style="width: 400px" />
<el-input v-model="modelForm.name" style="width: 400px" />
</el-form-item>
<el-form-item
label="描述:"
>
<el-input v-model="basicInfoForm.description" type="textarea" :rows="4" style="width: 400px" />
<el-input v-model="modelForm.description" type="textarea" :rows="4" style="width: 400px" />
</el-form-item>
<el-form-item
v-if="!add"
label="实例数量:"
>
<label v-text="modelForm.instanceCount" />
</el-form-item>
</el-form>
</el-card>
<el-card class="margin-top-20">
<div slot="header" class="clearfix">
<span>模型数据</span>
<el-button style="float: right; padding: 0; margin-left: 10px" type="text" @click="addRow">添加</el-button>
<el-button v-if="!modelForm.hasInstance" style="float: right; padding: 0; margin-left: 10px" type="text" @click="addRow">添加</el-button>
</div>
<el-table
:data="basicInfoForm.propertyList"
style="width: 100%; height: 310px;"
border
<el-form
ref="listForm"
:model="modelForm"
class="table-form"
>
<el-table-column
type="index"
label="序号"
width="50px"
align="center"
/>
<el-table-column
prop="propCode"
label="属性编码"
width="155"
/>
<el-table-column
prop="propName"
label="属性名称"
width="155"
/>
<el-table-column
prop="propType"
label="数据类型"
/>
<el-table-column
prop="defaultValue"
label="默认值"
/>
<el-table-column
prop="unit"
label="单位"
/>
</el-table>
<el-table
:data="modelForm.propertyList"
style="width: 100%; height: 260px;"
border
>
<el-table-column
type="index"
label="序号"
width="50px"
align="center"
/>
<el-table-column
prop="propertyCode"
label="属性编码"
width="155"
>
<template slot-scope="props">
<el-form-item
v-if="props.row.edit"
:prop="`propertyList.${props.$index}.propertyCode`"
label=""
>
<el-input v-model="props.row.propertyCode" />
</el-form-item>
<div v-else>{{ props.row.propertyCode }}</div>
</template>
</el-table-column>
<el-table-column
prop="propertyName"
label="属性名称"
width="155"
>
<template slot-scope="props">
<el-form-item
v-if="props.row.edit"
:prop="`propertyList.${props.$index}.propertyName`"
label=""
>
<el-input v-model="props.row.propertyName" />
</el-form-item>
<div v-else>{{ props.row.propertyName }}</div>
</template>
</el-table-column>
<el-table-column
prop="propertyType"
label="数据类型"
>
<template slot-scope="props">
<el-form-item
v-if="props.row.edit"
:prop="`propertyList.${props.$index}.propertyType`"
label=""
>
<el-select v-model="props.row.propertyType">
<el-option
v-for="(item, index) in dictionary.col_type"
:key="index"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<div v-else>{{ $_dictionaryFormat(null, null, props.row.propertyType, null, 'col_type') }}</div>
</template>
</el-table-column>
<el-table-column
prop="propertyDefaultValue"
label="默认值"
>
<template slot-scope="props">
<el-form-item
v-if="props.row.edit"
:prop="`propertyList.${props.$index}.propertyDefaultValue`"
label=""
>
<el-input v-model="props.row.propertyDefaultValue" />
</el-form-item>
<div v-else>{{ props.row.propertyDefaultValue }}</div>
</template>
</el-table-column>
<el-table-column
prop="propertyUnit"
label="单位"
>
<template slot-scope="props">
<el-form-item
v-if="props.row.edit"
:prop="`propertyList.${props.$index}.propertyUnit`"
label=""
>
<el-input v-model="props.row.propertyUnit" />
</el-form-item>
<div v-else>{{ props.row.propertyUnit }}</div>
</template>
</el-table-column>
<el-table-column
v-if="!modelForm.hasInstance"
label="操作"
width="140px"
align="center"
>
<template slot-scope="props">
<el-button v-if="!props.row.edit" type="text" style="margin-right: 20px" @click="editItem(props.row)">编辑</el-button>
<el-button v-if="props.row.edit" type="text" style="margin-right: 20px" @click="finishItem(props.row)">完成</el-button>
<el-popconfirm
title="确定要删除此条记录吗？"
@onConfirm="deleteItem(props.$index)"
>
<el-button slot="reference" type="text">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</el-form>
</el-card>
</div>
<div class="el-dialog__footer" style="margin-top: 20px">
......@@ -70,13 +162,28 @@
</template>
<script>
import dictionary from '@/utils/dictionary'
import { addModel, getModelDetail, editModel } from '@/api/object-management/model-management'
export default {
name: 'Details',
name: 'AddOrUpdate',
mixins: [dictionary],
props: {
add: {
type: Boolean,
default: true
},
id: {
type: [String, Number],
default: null
}
},
data() {
return {
basicInfoForm: {
modelForm: {
name: null,
description: null,
hasInstance: false,
instanceCount: null,
propertyList: []
}
}
......@@ -85,21 +192,126 @@ export default {
},
created() {
if (!this.add) {
this.getModelDetail()
}
},
methods: {
getModelDetail() {
getModelDetail({ id: this.id })
.then(res => {
this.modelForm = {
...res.data
}
this.modelForm.propertyList = res.data.propertyList.map(v => {
return {
propertyCode: v.propertyCode,
propertyName: v.propertyName,
propertyType: v.propertyType,
propertyDefaultValue: v.propertyDefaultValue,
propertyUnit: v.propertyUnit,
edit: false
}
})
})
.catch(err => {
console.error(err.message)
this.$message.error('查询遇到问题')
})
},
cancel() {
this.$emit('cancel')
},
addRow() {
const newRow = {
'propCode': 'temperature',
'propName': '温度',
'propType': 'number',
'defaultValue': '0',
'unit': '摄氏度'
this.modelForm.propertyList.push({
propertyCode: null,
propertyName: null,
propertyType: null,
propertyDefaultValue: null,
propertyUnit: null,
edit: true
})
if (this.modelForm.propertyList.length > 1) {
this.modelForm.propertyList[this.modelForm.propertyList.length - 2].edit = false
}
},
validate() {
const p = [
this.$refs.modelForm.validate(),
this.$refs.listForm.validate()
]
return Promise.all(p)
},
confirm() {
this.validate()
.then(_ => {
if (this.add) {
this.addModel()
} else {
this.editModel()
}
})
.catch(_ => {})
},
addModel() {
const params = {
name: this.modelForm.name,
description: this.modelForm.description
}
this.basicInfoForm.propertyList.push(newRow)
params.propertyList = this.modelForm.propertyList.map(v => {
return {
propertyCode: v.propertyCode,
propertyName: v.propertyName,
propertyType: v.propertyType,
propertyDefaultValue: v.propertyDefaultValue,
propertyUnit: v.propertyUnit
}
})
addModel(params)
.then(_ => this.$message.success('保存成功'))
.then(_ => {
this.$emit('confirm')
})
.catch(err => {
console.error(err.message)
this.$message.error('保存失败')
})
},
editModel() {
const params = {
id: this.id,
name: this.modelForm.name,
description: this.modelForm.description
}
if (!this.modelForm.hasInstance) {
params.propertyList = this.modelForm.propertyList.map(v => {
return {
propertyCode: v.propertyCode,
propertyName: v.propertyName,
propertyType: v.propertyType,
propertyDefaultValue: v.propertyDefaultValue,
propertyUnit: v.propertyUnit
}
})
}
editModel(params)
.then(_ => this.$message.success('保存成功'))
.then(_ => {
this.$emit('confirm')
})
.catch(err => {
console.error(err.message)
this.$message.error(err.message)
})
},
editItem(row) {
row.edit = true
},
finishItem(row) {
row.edit = false
},
deleteItem(index) {
this.modelForm.propertyList.splice(index)
}
}
}
......
src/views/object-management/model-management/detail.vue
View file @ 639b7eb3
......@@ -5,16 +5,23 @@
<div slot="header" class="clearfix">
<span>基本信息</span>
</div>
<descriptions-item :span="8" label="模型名称" value="模型1" />
<descriptions-item :span="8" label="描述" value="描述1" />
<el-row>
<descriptions-item label="模型名称" :value="modelForm.name" style="width: 400px" />
</el-row>
<el-row>
<descriptions-item label="描述" :value="modelForm.description" style="width: 400px" />
</el-row>
<el-row>
<descriptions-item label="实例数量" :value="modelForm.instanceCount" style="width: 400px" />
</el-row>
</el-card>
<el-card class="margin-top-20">
<div slot="header" class="clearfix">
<span>模型数据</span>
</div>
<el-table
:data="detailTableData"
style="width: 100%"
:data="modelForm.propertyList"
style="width: 100%; height: 310px;"
border
>
<el-table-column
......@@ -24,68 +31,109 @@
align="center"
/>
<el-table-column
prop="propCode"
prop="propertyCode"
label="属性编码"
width="155"
/>
<el-table-column
prop="propName"
prop="propertyName"
label="属性名称"
width="155"
/>
<el-table-column
prop="propType"
prop="propertyType"
label="数据类型"
:formatter="colTypeFormat"
/>
<el-table-column
prop="defaultValue"
prop="propertyDefaultValue"
label="默认值"
/>
<el-table-column
prop="unit"
prop="propertyUnit"
label="单位"
/>
</el-table>
</el-card>
</div>
<div class="el-dialog__footer">
<el-popconfirm
v-if="!this.modelForm.hasInstance"
title="确定要删除此模型吗？"
@onConfirm="deleteModel()"
>
<el-button slot="reference" style="margin-right: 10px" type="primary">删除</el-button>
</el-popconfirm>
<el-button type="primary" @click="editModel">编辑</el-button>
<el-button type="primary" @click="cancel">关闭</el-button>
</div>
</div>
</template>
<script>
import dictionary from '@/utils/dictionary'
import { getModelDetail, deleteModel } from '@/api/object-management/model-management'
export default {
name: 'Details',
mixins: [dictionary],
props: {
id: {
type: [String, Number],
default: null
}
},
data() {
return {
detailTableData: [
{
'propCode': 'temperature',
'propName': '温度',
'propType': 'number',
'defaultValue': '0',
'unit': '摄氏度'
},
{
'propCode': 'humidity',
'propName': '湿度',
'propType': 'number',
'defaultValue': '0',
'unit': '%'
}
]
modelForm: {
name: null,
description: null,
hasInstance: null,
instanceCount: null,
propertyList: []
}
}
},
computed: {
},
created() {
this.getModelDetail()
},
methods: {
getModelDetail() {
getModelDetail({ id: this.id })
.then(res => {
this.modelForm = {
...res.data
}
})
.catch(err => {
console.error(err.message)
this.$message.error('查询遇到问题')
})
},
colTypeFormat(row, column, cellValue, index) {
return this.$_dictionaryFormat(row, column, cellValue, index, 'col_type')
},
cancel() {
this.$emit('cancel')
},
editModel() {
this.$emit('toEdit')
},
deleteModel() {
const params = {
id: this.id
}
deleteModel(params)
.then(_ => this.$message.success('删除成功'))
.then(_ => {
this.$emit('delete')
})
.catch(err => {
console.error(err.message)
this.$message.error(err.message)
})
}
}
}
......
src/views/object-management/model-management/index.vue
View file @ 639b7eb3
......@@ -9,12 +9,12 @@
>
<el-form-item
label="模型名称:"
prop="input"
prop="name"
>
<el-input v-model="searchForm.input" />
<el-input v-model="searchForm.name" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getTableData">查询</el-button>
<el-button type="primary" icon="el-icon-search" @click="listModel(1)">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
......@@ -41,22 +41,13 @@
width="300px"
>
<template slot-scope="props">
<el-button type="text" @click="checkDetails()">{{ props.row.name }}</el-button>
<el-button type="text" @click="checkDetails(props.row)">{{ props.row.name }}</el-button>
</template>
</el-table-column>
<el-table-column
prop="description"
label="描述"
/>
<el-table-column
label="操作"
width="140px"
align="center"
>
<template slot-scope="props">
<el-button type="text" @click="editItem(props.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
......@@ -94,7 +85,10 @@
>
<Details
v-if="detailDialogVisible"
:id="currentRowId"
@cancel="detailDialogVisible = false"
@toEdit="editItemFromDetail()"
@delete="onDelete()"
/>
</esv-dialog>
</div>
......@@ -103,6 +97,7 @@
<script>
import Details from '@/views/object-management/model-management/detail'
import AddOrUpdate from '@/views/object-management/model-management/AddOrUpdate'
import { listModel } from '@/api/object-management/model-management'
export default {
name: 'ObjectModel',
components: {
......@@ -119,10 +114,6 @@ export default {
dialogVisible: false,
detailDialogVisible: false,
tableData: [
{
'name': '模型1',
'description': '描述1'
}
],
addForm: {
input: null,
......@@ -136,10 +127,32 @@ export default {
currentRowId: null
}
},
created() {},
created() {
this.listModel(1)
},
mounted() {},
methods: {
getTableData(pageNum) {},
listModel(pageNum) {
const {
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.pageNum = data.pageNum
})
.catch(err => {
console.error(err.message)
this.$message.error('查询遇到问题')
})
},
resetForm() {
this.$refs.searchForm.resetFields()
},
......@@ -147,15 +160,20 @@ export default {
this.add = true
this.dialogVisible = true
},
editItem() {
editItem(row) {
this.add = false
this.currentRowId = row.id
this.dialogVisible = true
},
checkDetails() {
editItemFromDetail() {
this.detailDialogVisible = false
this.add = false
this.dialogVisible = true
},
checkDetails(row) {
this.currentRowId = row.id
this.detailDialogVisible = true
},
deleteItem(id) {},
saveSystem() {},
handleSizeChange(val) {
this.pageForm.pageSize = val
this.getTableData(1)
......@@ -166,6 +184,11 @@ export default {
},
onConfirm() {
this.dialogVisible = false
this.listModel(this.pageForm.pageNum)
},
onDelete() {
this.detailDialogVisible = false
this.listModel(this.pageForm.pageNum)
}
}
}
......
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