Skip to content

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

前端代码提交

parent 2747dc0c
Show 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,29 +6,41 @@ ...@@ -6,29 +6,41 @@
<span>基本信息</span> <span>基本信息</span>
</div> </div>
<el-form <el-form
:model="basicInfoForm" ref="modelForm"
:model="modelForm"
label-width="90px" label-width="90px"
> >
<el-form-item <el-form-item
label="模型名称:" 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>
<el-form-item <el-form-item
label="描述:" 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-item>
</el-form> </el-form>
</el-card> </el-card>
<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 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> </div>
<el-form
ref="listForm"
:model="modelForm"
class="table-form"
>
<el-table <el-table
:data="basicInfoForm.propertyList" :data="modelForm.propertyList"
style="width: 100%; height: 310px;" style="width: 100%; height: 260px;"
border border
> >
<el-table-column <el-table-column
...@@ -38,28 +50,108 @@ ...@@ -38,28 +50,108 @@
align="center" align="center"
/> />
<el-table-column <el-table-column
prop="propCode" prop="propertyCode"
label="属性编码" label="属性编码"
width="155" 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 <el-table-column
prop="propName" prop="propertyName"
label="属性名称" label="属性名称"
width="155" 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 <el-table-column
prop="propType" prop="propertyType"
label="数据类型" 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 <el-table-column
prop="defaultValue" prop="propertyDefaultValue"
label="默认值" 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 <el-table-column
prop="unit" prop="propertyUnit"
label="单位" 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-table>
</el-form>
</el-card> </el-card>
</div> </div>
<div class="el-dialog__footer" style="margin-top: 20px"> <div class="el-dialog__footer" style="margin-top: 20px">
...@@ -70,13 +162,28 @@ ...@@ -70,13 +162,28 @@
</template> </template>
<script> <script>
import dictionary from '@/utils/dictionary'
import { addModel, getModelDetail, editModel } from '@/api/object-management/model-management'
export default { export default {
name: 'Details', name: 'AddOrUpdate',
mixins: [dictionary],
props: {
add: {
type: Boolean,
default: true
},
id: {
type: [String, Number],
default: null
}
},
data() { data() {
return { return {
basicInfoForm: { modelForm: {
name: null, name: null,
description: null, description: null,
hasInstance: false,
instanceCount: null,
propertyList: [] propertyList: []
} }
} }
...@@ -85,21 +192,126 @@ export default { ...@@ -85,21 +192,126 @@ export default {
}, },
created() { created() {
if (!this.add) {
this.getModelDetail()
}
}, },
methods: { 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() { cancel() {
this.$emit('cancel') this.$emit('cancel')
}, },
addRow() { addRow() {
const newRow = { this.modelForm.propertyList.push({
'propCode': 'temperature', propertyCode: null,
'propName': '温度', propertyName: null,
'propType': 'number', propertyType: null,
'defaultValue': '0', propertyDefaultValue: null,
'unit': '摄氏度' propertyUnit: null,
edit: true
})
if (this.modelForm.propertyList.length > 1) {
this.modelForm.propertyList[this.modelForm.propertyList.length - 2].edit = false
} }
this.basicInfoForm.propertyList.push(newRow) },
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
}
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 @@ ...@@ -5,16 +5,23 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>基本信息</span> <span>基本信息</span>
</div> </div>
<descriptions-item :span="8" label="模型名称" value="模型1" /> <el-row>
<descriptions-item :span="8" label="描述" value="描述1" /> <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>
<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>
</div> </div>
<el-table <el-table
:data="detailTableData" :data="modelForm.propertyList"
style="width: 100%" style="width: 100%; height: 310px;"
border border
> >
<el-table-column <el-table-column
...@@ -24,68 +31,109 @@ ...@@ -24,68 +31,109 @@
align="center" align="center"
/> />
<el-table-column <el-table-column
prop="propCode" prop="propertyCode"
label="属性编码" label="属性编码"
width="155" width="155"
/> />
<el-table-column <el-table-column
prop="propName" prop="propertyName"
label="属性名称" label="属性名称"
width="155" width="155"
/> />
<el-table-column <el-table-column
prop="propType" prop="propertyType"
label="数据类型" label="数据类型"
:formatter="colTypeFormat"
/> />
<el-table-column <el-table-column
prop="defaultValue" prop="propertyDefaultValue"
label="默认值" label="默认值"
/> />
<el-table-column <el-table-column
prop="unit" prop="propertyUnit"
label="单位" label="单位"
/> />
</el-table> </el-table>
</el-card> </el-card>
</div> </div>
<div class="el-dialog__footer"> <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> <el-button type="primary" @click="cancel">关闭</el-button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import dictionary from '@/utils/dictionary'
import { getModelDetail, deleteModel } from '@/api/object-management/model-management'
export default { export default {
name: 'Details', name: 'Details',
mixins: [dictionary],
props: {
id: {
type: [String, Number],
default: null
}
},
data() { data() {
return { return {
detailTableData: [ modelForm: {
{ name: null,
'propCode': 'temperature', description: null,
'propName': '温度', hasInstance: null,
'propType': 'number', instanceCount: null,
'defaultValue': '0', propertyList: []
'unit': '摄氏度'
},
{
'propCode': 'humidity',
'propName': '湿度',
'propType': 'number',
'defaultValue': '0',
'unit': '%'
} }
]
} }
}, },
computed: { computed: {
}, },
created() { created() {
this.getModelDetail()
}, },
methods: { 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() { cancel() {
this.$emit('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 @@ ...@@ -9,12 +9,12 @@
> >
<el-form-item <el-form-item
label="模型名称:" label="模型名称:"
prop="input" prop="name"
> >
<el-input v-model="searchForm.input" /> <el-input v-model="searchForm.name" />
</el-form-item> </el-form-item>
<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-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -41,22 +41,13 @@ ...@@ -41,22 +41,13 @@
width="300px" width="300px"
> >
<template slot-scope="props"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="description" prop="description"
label="描述" 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-table>
<el-pagination <el-pagination
...@@ -94,7 +85,10 @@ ...@@ -94,7 +85,10 @@
> >
<Details <Details
v-if="detailDialogVisible" v-if="detailDialogVisible"
:id="currentRowId"
@cancel="detailDialogVisible = false" @cancel="detailDialogVisible = false"
@toEdit="editItemFromDetail()"
@delete="onDelete()"
/> />
</esv-dialog> </esv-dialog>
</div> </div>
...@@ -103,6 +97,7 @@ ...@@ -103,6 +97,7 @@
<script> <script>
import Details from '@/views/object-management/model-management/detail' import Details from '@/views/object-management/model-management/detail'
import AddOrUpdate from '@/views/object-management/model-management/AddOrUpdate' import AddOrUpdate from '@/views/object-management/model-management/AddOrUpdate'
import { listModel } from '@/api/object-management/model-management'
export default { export default {
name: 'ObjectModel', name: 'ObjectModel',
components: { components: {
...@@ -119,10 +114,6 @@ export default { ...@@ -119,10 +114,6 @@ export default {
dialogVisible: false, dialogVisible: false,
detailDialogVisible: false, detailDialogVisible: false,
tableData: [ tableData: [
{
'name': '模型1',
'description': '描述1'
}
], ],
addForm: { addForm: {
input: null, input: null,
...@@ -136,10 +127,32 @@ export default { ...@@ -136,10 +127,32 @@ export default {
currentRowId: null currentRowId: null
} }
}, },
created() {}, created() {
this.listModel(1)
},
mounted() {}, mounted() {},
methods: { 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() { resetForm() {
this.$refs.searchForm.resetFields() this.$refs.searchForm.resetFields()
}, },
...@@ -147,15 +160,20 @@ export default { ...@@ -147,15 +160,20 @@ export default {
this.add = true this.add = true
this.dialogVisible = true this.dialogVisible = true
}, },
editItem() { editItem(row) {
this.add = false this.add = false
this.currentRowId = row.id
this.dialogVisible = true this.dialogVisible = true
}, },
checkDetails() { editItemFromDetail() {
this.detailDialogVisible = false
this.add = false
this.dialogVisible = true
},
checkDetails(row) {
this.currentRowId = row.id
this.detailDialogVisible = true this.detailDialogVisible = true
}, },
deleteItem(id) {},
saveSystem() {},
handleSizeChange(val) { handleSizeChange(val) {
this.pageForm.pageSize = val this.pageForm.pageSize = val
this.getTableData(1) this.getTableData(1)
...@@ -166,6 +184,11 @@ export default { ...@@ -166,6 +184,11 @@ export default {
}, },
onConfirm() { onConfirm() {
this.dialogVisible = false 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