前端代码提交

src/api/object-management/model-management.js

+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/detail.vue

@@ -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

@@ -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)
     }
   }
 }