前端代码提交

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

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

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

@@ -46,3 +46,4 @@ export function deleteModel(data) {
     data
   })
 }
+

src/views/object-management/instance-management/index.vue

 <template>
   <div>
-    <el-card class="no-bottom">
-      <el-form
-        ref="searchForm"
-        :model="searchForm"
-        label-width="80px"
-        inline
-      >
-        <el-form-item
-          label="input:"
-          prop="input"
-        >
-          <el-input v-model="searchForm.input" />
-        </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-row>
+      <el-col style="width: 480px">
+        <el-card>
+          <el-form
+            ref="searchForm"
+            :model="searchForm"
+            label-width="80px"
+            inline
+          >
+            <el-form-item
+              label="模型名称:"
+              prop="name"
             >
-              <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-input v-model="searchForm.name" style="width: 210px" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" @click="listModel(1)">查询</el-button>
+            </el-form-item>
+          </el-form>
+          <el-table
+            ref="tableModel"
+            :data="tableData"
+            border
+            height="541px"
+            highlight-current-row
+            @current-change="handleTableSel"
+          >
+            <el-table-column
+              type="index"
+              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
-      :title="add ? '增加系统' : '编辑系统'"
+      :title="add ? '增加实例' : '编辑实例'"
       :visible.sync="dialogVisible"
       width="700px"
+      :before-close="beforeClose"
     >
       <el-form
+        ref="addForm"
         :model="addForm"
         label-width="90px"
+        :rules="rules"
       >
         <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
-          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>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="saveSystem">确 定</el-button>
+        <el-button @click="closeDialog">取 消</el-button>
+        <el-button type="primary" @click="saveInstance">确 定</el-button>
       </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import { listModel } from '@/api/object-management/model-management'
+import { listInstance, addInstance, editInstance, deleteInstance } from '@/api/object-management/instance-management'
 export default {
-  name: 'ObjectInstance',
+  name: 'ObjectModel',
   props: {},
   data() {
     return {
       searchForm: {
-        input: null,
-        status: null
+        name: null
+      },
+      searchFormInstance: {
+        instanceName: null
       },
-      add: true,
-      dialogVisible: false,
-      tableData: [],
       addForm: {
-        input: null,
-        status: null
+        instanceName: null,
+        description: null,
+        id: null
       },
+      tableData: [
+      ],
+      tableDataInstance: [
+      ],
       pageForm: {
         pageSize: 10,
         pageNum: 1,
         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() {},
   methods: {
-    getTableData(pageNum) {},
-    resetForm() {
-      this.$refs.searchForm.resetFields()
+    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.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.dialogVisible = true
     },
-    editItem() {
+    showEditView(row) {
+      if (this.currentModelId === null) {
+        this.$message.error('请选择模型')
+        return
+      }
       this.add = false
       this.dialogVisible = true
+      this.addForm.instanceName = row.instanceName
+      this.addForm.description = row.description
+      this.addForm.id = row.id
     },
-    deleteItem(id) {},
-    saveSystem() {},
-    handleSizeChange(val) {
-      this.pageForm.pageSize = val
-      this.getTableData(1)
+    saveInstance() {
+      this.$refs.addForm.validate()
+        .then(_ => {
+          const { instanceName, description } = this.addForm
+          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) {
-      this.pageForm.pageNum = val
-      this.getTableData(val)
+    deleteInstance(id) {
+      deleteInstance({ id: id })
+        .then(res => this.$message.success('操作成功'))
+        .then(_ => {
+          this.listInstance(this.pageFormInstance.pageNum)
+        })
+        .catch(err => {
+          this.$message.error('操作失败')
+          console.error(err.message)
+        })
     }
   }
 }

src/views/object-management/model-management/AddOrUpdate.vue

@@ -31,7 +31,7 @@
       <el-card class="margin-top-20">
         <div slot="header" class="clearfix">
           <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>
         <el-form
           ref="listForm"
@@ -59,6 +59,7 @@
                   v-if="props.row.edit"
                   :prop="`propertyList.${props.$index}.propertyCode`"
                   label=""
+                  style="margin-bottom: 0px"
                 >
                   <el-input v-model="props.row.propertyCode" />
                 </el-form-item>
@@ -75,6 +76,7 @@
                   v-if="props.row.edit"
                   :prop="`propertyList.${props.$index}.propertyName`"
                   label=""
+                  style="margin-bottom: 0px"
                 >
                   <el-input v-model="props.row.propertyName" />
                 </el-form-item>
@@ -90,6 +92,7 @@
                   v-if="props.row.edit"
                   :prop="`propertyList.${props.$index}.propertyType`"
                   label=""
+                  style="margin-bottom: 0px"
                 >
                   <el-select v-model="props.row.propertyType">
                     <el-option
@@ -112,6 +115,7 @@
                   v-if="props.row.edit"
                   :prop="`propertyList.${props.$index}.propertyDefaultValue`"
                   label=""
+                  style="margin-bottom: 0px"
                 >
                   <el-input v-model="props.row.propertyDefaultValue" />
                 </el-form-item>
@@ -127,6 +131,7 @@
                   v-if="props.row.edit"
                   :prop="`propertyList.${props.$index}.propertyUnit`"
                   label=""
+                  style="margin-bottom: 0px"
                 >
                   <el-input v-model="props.row.propertyUnit" />
                 </el-form-item>
@@ -274,7 +279,7 @@ export default {
         })
         .catch(err => {
           console.error(err.message)
-          this.$message.error('保存失败')
+          this.$message.error(err.message)
         })
     },
     editModel() {
@@ -318,5 +323,7 @@ export default {
 </script>
 
 <style scoped>
-
+.clearfix {
+  line-height: 36px;
+}
 </style>

src/views/object-management/model-management/index.vue

@@ -28,6 +28,7 @@
       <el-table
         :data="tableData"
         border
+        height="500px"
       >
         <el-table-column
           type="index"
@@ -176,11 +177,11 @@ export default {
     },
     handleSizeChange(val) {
       this.pageForm.pageSize = val
-      this.getTableData(1)
+      this.listModel(1)
     },
     handleCurrentChange(val) {
       this.pageForm.pageNum = val
-      this.getTableData(val)
+      this.listModel(val)
     },
     onConfirm() {
       this.dialogVisible = false