update 设备类型 页面

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

@@ -2,10 +2,55 @@ import request from '@/utils/request'
 // const baseURL = process.env.VUE_APP_BASE_API
 const baseURL = ''
 
-// 获取数据集列表-分页
-export function getTableData(data) {
+// 获取设备类型列表-分页
+export function getDeviceTypeList(data) {
   return request({
-    url: `${baseURL}/cc/linque/getDatasetList`,
+    url: `${baseURL}/iot/deviceModel/list`,
+    method: 'post',
+    data
+  })
+}
+
+// 增加设备类型
+export function addDeviceType(data) {
+  return request({
+    url: `${baseURL}/iot/deviceModel/add`,
+    method: 'post',
+    data
+  })
+}
+
+// 编辑设备类型
+export function updateDeviceType(data) {
+  return request({
+    url: `${baseURL}/iot/deviceModel/edit`,
+    method: 'post',
+    data
+  })
+}
+
+// 删除设备类型
+export function deleteDeviceType(data) {
+  return request({
+    url: `${baseURL}/iot/deviceModel/delete`,
+    method: 'post',
+    data
+  })
+}
+
+// 关联数据模型
+export function bindingDataModel(data) {
+  return request({
+    url: `${baseURL}/iot/deviceModel/saveDataModelByDeviceTypeId`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取已关联数据模型
+export function getDataModelByDeviceTypeId(data) {
+  return request({
+    url: `${baseURL}/iot/deviceModel/getDataModelByDeviceTypeId`,
     method: 'post',
     data
   })

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

 <template>
   <div>
-    <el-card class="no-bottom">
+    <el-card>
+      <div style="display: flex;justify-content: space-between">
         <el-form
           ref="searchForm"
           :model="searchForm"
@@ -8,31 +9,17 @@
           inline
         >
           <el-form-item
-          label="input:"
+            label=""
             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-input v-model="searchForm.name" clearable placeholder="设备类型">
+              <el-button slot="append" icon="el-icon-search" @click="getDeviceTypeList(1)" />
+            </el-input>
           </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 class="buttons-group">
+          <el-button type="primary" icon="el-icon-plus" @click="addRow">增加设备类型</el-button>
+        </div>
       </div>
 
       <el-table
@@ -46,31 +33,25 @@
           align="center"
         />
         <el-table-column
-          prop="a"
-          label="a"
-        />
-        <el-table-column
-          prop="b"
-          label="b"
-        />
-        <el-table-column
-          prop="c"
-          label="c"
+          prop="name"
+          label="设备类型"
         />
         <el-table-column
-          prop="d"
-          label="d"
+          prop="description"
+          label="描述"
         />
         <el-table-column
           label="操作"
-          width="140px"
+          width="180px"
           align="center"
         >
-          <template slot-scope="props">
-            <el-button v-permission="'SysMgr_update'" type="text" @click="editItem(props.row)">编辑</el-button>
+          <template slot-scope="scope">
+            <el-button type="text" @click="bindingDataModel(scope.row.id)">关联管理</el-button>
+            <el-button type="text" @click="editItem(scope.row)">编辑</el-button>
             <el-popconfirm
               title="确定要删除此条记录吗？"
-              @onConfirm="deleteItem(props.row.id)"
+              style="margin-left: 10px"
+              @onConfirm="deleteItem(scope.row.id)"
             >
               <el-button slot="reference" type="text">删除</el-button>
             </el-popconfirm>
@@ -91,23 +72,32 @@
     </el-card>
 
     <el-dialog
-      :title="add ? '增加系统' : '编辑系统'"
+      :title="add ? '增加设备类型' : '编辑设备类型'"
       :visible.sync="dialogVisible"
       width="700px"
     >
       <el-form
+        v-if="dialogVisible"
+        ref="addForm"
         :model="addForm"
-        label-width="90px"
+        label-width="100px"
+        :rules="rules"
       >
         <el-form-item
-          label="input:"
+          label="设备类型:"
+          prop="name"
         >
-          <el-input v-model="addForm.input" />
+          <el-input v-model="addForm.name" />
         </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"
+            :row="2"
+          />
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
@@ -115,48 +105,130 @@
         <el-button type="primary" @click="saveSystem">确 定</el-button>
       </span>
     </el-dialog>
+
+    <el-dialog
+      title="关联数据模型"
+      :visible.sync="bindingVisible"
+      width="700px"
+    >
+      <el-transfer
+        v-model="bindingDataModelIds"
+        :data="dataModelList"
+        :titles="['未关联数据模型', '已关联数据模型']"
+        :button-texts="['取消', '关联']"
+      ></el-transfer>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancelBind">取 消</el-button>
+        <el-button type="primary" @click="binding">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getTableData } from '@/api/equipment-management/equipment-model'
+import {
+  getDeviceTypeList,
+  addDeviceType,
+  updateDeviceType,
+  deleteDeviceType,
+  bindingDataModel,
+  getDataModelByDeviceTypeId
+} from '@/api/equipment-management/equipment-model'
+import { getAllModel } from '@/api/data-visible/dashboard'
+
 export default {
   name: 'EquipmentModel',
   props: {},
   data() {
     return {
+      bindingDataModelIds: [],
+      bindingVisible: false,
       searchForm: {
-        input: null,
-        status: null
+        name: null
       },
       add: true,
       dialogVisible: false,
       tableData: [],
       addForm: {
-        input: null,
-        status: null
+        name: null,
+        description: null
       },
       pageForm: {
         pageSize: 10,
         pageNum: 1,
         total: 0
+      },
+      dataModelList: [],
+      currentId: null,
+      rules: {
+        name: [
+          { required: true, message: '请输入设备类型', trigger: 'blur' },
+          { min: 1, max: 50, message: '长度在 50 个字符以内', trigger: 'change' }
+        ],
+        description: [
+          { required: true, message: '请输入设备描述', trigger: 'blur' },
+          { min: 0, max: 200, message: '长度在 200 个字符以内', trigger: ['blur', 'change'] }
+        ]
       }
     }
   },
-  created() {},
+  created() {
+    this.getDeviceTypeList(1)
+    getAllModel()
+      .then(res => {
+        this.dataModelList = res.data.map(v => {
+          return {
+            key: v.id,
+            label: v.name
+          }
+        })
+      })
+      .catch(_ => {})
+  },
   mounted() {},
   methods: {
-    getTableData(pageNum) {
+    cancelBind() {
+      this.bindingVisible = false
+      this.bindingDataModelIds = []
+    },
+    binding() {
+      const params = {
+        deviceTypeId: parseInt(this.currentId),
+        dataModelId: this.bindingDataModelIds.join(',')
+      }
+      bindingDataModel(params)
+        .then(_ => this.$message.success('操作成功'))
+        .then(_ => this.getDeviceTypeList(1))
+        .then(_ => {
+          this.bindingVisible = false
+          this.bindingDataModelIds = []
+        })
+        .catch(_ => {})
+    },
+    bindingDataModel(id) {
+      this.currentId = id
+      getDataModelByDeviceTypeId({ id })
+        .then(res => {
+          if (res.data.length) {
+            this.bindingDataModelIds = res.data.map(v => {
+              return v.id
+            })
+          }
+          this.bindingVisible = true
+        })
+        .catch(_ => {})
+    },
+    getDeviceTypeList(pageNum) {
       const params = {
         ...this.searchForm,
         pageNum,
         pageSize: this.pageForm.pageSize
       }
-      getTableData(params)
+      getDeviceTypeList(params)
         .then(res => {
-          const { records, totalSize } = res.data
+          const { records, total } = res.data
           this.tableData = records
-          this.pageForm.total = totalSize
+          this.pageForm.total = total
         })
         .catch(err => console.error(err))
     },
@@ -167,19 +239,45 @@ export default {
       this.add = true
       this.dialogVisible = true
     },
-    editItem() {
+    editItem(row) {
       this.add = false
       this.dialogVisible = true
+      const { id, name, description } = row
+      this.currentId = id
+      this.addForm = {
+        name,
+        description
+      }
+    },
+    deleteItem(id) {
+      deleteDeviceType({ id })
+        .then(_ => this.$message.success('操作成功'))
+        .then(_ => this.getDeviceTypeList(1))
+        .catch(_ => {})
+    },
+    saveSystem() {
+      this.$refs.addForm.validate()
+        .then(_ => {
+          return { ...this.addForm }
+        })
+        .then(params => {
+          if (!this.add) { params.id = this.currentId }
+          return this.add ? addDeviceType(params) : updateDeviceType(params)
+        })
+        .then(_ => this.$message.success('操作成功'))
+        .then(_ => this.getDeviceTypeList(1))
+        .then(_ => {
+          this.dialogVisible = false
+        })
+        .catch(_ => {})
     },
-    deleteItem(id) {},
-    saveSystem() {},
     handleSizeChange(val) {
       this.pageForm.pageSize = val
-      this.getTableData(1)
+      this.getDeviceTypeList(1)
     },
     handleCurrentChange(val) {
       this.pageForm.pageNum = val
-      this.getTableData(val)
+      this.getDeviceTypeList(val)
     }
   }
 }