产品管理

src/api/Internet-of-things/product-management.js

@@ -0,0 +1,28 @@
+import request from '@/router/axios'
+
+// 产品管理-分页
+export function tdaProductPage(data) {
+  return request({
+    url: '/api/syringe-production/tdaProduct/page',
+    method: 'post',
+    data: data,
+  })
+}
+
+// 产品管理-添加
+export function tdaProductAdd(data) {
+  return request({
+    url: '/api/syringe-production/tdaProduct/add',
+    method: 'post',
+    data: data,
+  })
+}
+
+// 产品管理-删除
+export function tdaProductDelete(data) {
+  return request({
+    url: '/api/syringe-production/tdaProduct/delete',
+    method: 'post',
+    data: data,
+  })
+}

src/api/Internet-of-things/select.js

@@ -0,0 +1,46 @@
+import request from '@/router/axios'
+
+// 行业列表
+export function tdaApplicationList(data) {
+  return request({
+    url: '/api/syringe-production/tdaApplication/list',
+    method: 'post',
+    data: data,
+  })
+}
+
+// 产品列表
+export function tdaProductList(data) {
+  return request({
+    url: '/api/syringe-production/tdaProduct/list',
+    method: 'post',
+    data: data,
+  })
+}
+
+// 产品-厂商名称列表
+export function tdaProductManufacturerNameList(data) {
+  return request({
+    url: '/api/syringe-production/tdaProduct/manufacturerNameList',
+    method: 'post',
+    data: data,
+  })
+}
+
+// 产品-设备类型列表
+export function tdaProductDeviceTypeList(data) {
+  return request({
+    url: '/api/syringe-production/tdaProduct/deviceTypeList',
+    method: 'post',
+    data: data,
+  })
+}
+
+// 设备列表
+export function tdaDeviceList(data) {
+  return request({
+    url: '/api/syringe-production/tdaDevice/list',
+    method: 'post',
+    data: data,
+  })
+}

src/router/page/index.js

@@ -109,4 +109,17 @@ export default [
       },
     ],
   },
+  {
+    path: '/Internet-of-things/product-management',
+    component: Layout,
+    redirect: '/Internet-of-things/product-management/index',
+    children: [
+      {
+        path: 'index',
+        name: '产品管理',
+        component: () => import(/* webpackChunkName: "page" */ '@/views/Internet-of-things/product-management/index'),
+        props: true,
+      },
+    ],
+  },
 ]

src/styles/element-ui.scss

@@ -78,6 +78,10 @@
 
 .el-table th {
   background-color: #edf0f5 !important;
+}
+
+.el-table td,
+.el-table th {
   height: 35px;
   padding: 0 !important;
 }

src/views/Internet-of-things/Industry-management/index.vue

@@ -2,7 +2,7 @@
   <el-card class="box-card">
     <test v-model="queryParams" :form-config="queryForm"></test>
 
-    <el-table :data="tableList" :cell-style="{ padding: '0' }" :row-style="{ height: '35px' }" v-loading="loading" header-row-class-name="tableHeader">
+    <el-table :data="tableList" v-loading="loading">
       <el-table-column label="行业名称" align="center" prop="appName" />
       <el-table-column label="AppId" align="center" prop="appId" />
       <el-table-column label="创建人" align="center" prop="createUserName" />

src/views/Internet-of-things/product-management/index.vue

@@ -0,0 +1,297 @@
+<template>
+  <el-card class="box-card">
+    <test v-model="queryParams" :form-config="queryForm"></test>
+
+    <el-table :data="tableList" v-loading="loading">
+      <el-table-column label="所属行业" align="center" prop="appName" />
+      <el-table-column label="产品名称" align="center" prop="name" />
+      <el-table-column label="产品ID" align="center" prop="productId" />
+      <el-table-column label="设备类型" align="center" prop="deviceType" width="120" />
+      <el-table-column label="协议类型" align="center" prop="protocolType" width="120" />
+      <el-table-column label="数据格式" align="center" prop="dataFormat" width="120" />
+      <el-table-column label="厂商名称" align="center" prop="manufacturerName" />
+      <el-table-column label="操作" align="center" width="80">
+        <template slot-scope="scope">
+          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+    <el-dialog title="创建产品" v-if="open" :visible.sync="open" width="30%">
+      <test ref="test" v-model="dialogParams" :form-config="dialogForm" :insideRules="dialogRules"></test>
+    </el-dialog>
+  </el-card>
+</template>
+
+<script>
+import * as API from '@/api/Internet-of-things/product-management.js'
+import * as APISelect from '@/api/Internet-of-things/select.js'
+import test from '@/components/form-test/index.vue'
+
+export default {
+  name: 'product-management',
+  components: { test },
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: '',
+        tdaApplicationId: '',
+        deviceType: '',
+        manufacturerName: '',
+      },
+      queryForm: {
+        keyword: {
+          label: '关键字',
+          span: 6,
+        },
+        tdaApplicationId: {
+          label: '行业',
+          span: 6,
+          type: 'select',
+          data: [],
+          keyName: 'id',
+          labelName: 'appName',
+        },
+        deviceType: {
+          label: '设备类型',
+          span: 6,
+          type: 'select',
+          data: [],
+          keyName: 'value',
+          labelName: 'label',
+        },
+        manufacturerName: {
+          label: '厂商名称',
+          span: 6,
+          type: 'select',
+          data: [],
+          keyName: 'value',
+          labelName: 'label',
+        },
+        operation: {
+          // 搜索按钮操作
+          query: () => {
+            this.queryParams.pageNum = 1
+            this.getList()
+          },
+          // 重置按钮操作
+          reset: () => {
+            this.queryParams = { pageNum: 1, pageSize: 10, keyword: '', tdaApplicationId: '', deviceType: '', manufacturerName: '' }
+            this.queryParams.pageNum = 1
+            this.getList()
+          },
+        },
+        otherButton: {
+          list: [
+            {
+              name: '创建产品',
+              methodsText: 'add',
+              type: 'primary',
+              add: () => {
+                this.handleAdd()
+              },
+            },
+          ],
+        },
+      },
+      tableList: [],
+      total: 0,
+      loading: false,
+      open: false,
+      title: '',
+      dialogParams: {
+        tdaApplicationId: '',
+        name: '',
+        protocolType: 'MQTT',
+        dataFormat: 'json',
+        manufacturerName: '',
+        deviceType: '',
+      },
+      dialogForm: {
+        loadingStatus: false,
+        loadingText: '数据提交中,请稍后',
+        tdaApplicationId: {
+          label: '所属行业',
+          type: 'select',
+          data: [],
+          keyName: 'id',
+          labelName: 'appName',
+        },
+        name: {
+          label: '产品名称',
+        },
+        protocolType: {
+          label: '协议类型',
+          type: 'select',
+          span: 2,
+          data: [{ label: 'MQTT', value: 'MQTT' }],
+          keyName: 'value',
+          labelName: 'label',
+          disabled: true,
+        },
+        dataFormat: {
+          label: '数据格式',
+          type: 'select',
+          span: 2,
+          data: [{ label: 'json', value: 'json' }],
+          keyName: 'value',
+          labelName: 'label',
+          disabled: true,
+        },
+        manufacturerName: {
+          label: '厂商名称',
+          type: 'select',
+          data: [],
+          keyName: 'value',
+          labelName: 'label',
+        },
+        deviceType: {
+          label: '设备类型',
+          type: 'select',
+          data: [],
+          keyName: 'value',
+          labelName: 'label',
+        },
+        otherButton: {
+          align: 'center',
+          list: [
+            {
+              name: '取消',
+              methodsText: 'cancel',
+              cancel: () => {
+                this.open = false
+              },
+            },
+            {
+              name: '确定',
+              methodsText: 'submit',
+              type: 'primary',
+              submit: () => {
+                this.handleSubmit()
+              },
+            },
+          ],
+        },
+      },
+      dialogRules: {
+        tdaApplicationId: [{ required: true, message: '请选择所属行业', trigger: 'change' }],
+        name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
+        protocolType: [{ required: true, message: '请选择协议类型', trigger: 'change' }],
+        dataFormat: [{ required: true, message: '请选择数据格式', trigger: 'change' }],
+        manufacturerName: [{ required: true, message: '请选择厂商名称', trigger: 'change' }],
+        deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
+      },
+    }
+  },
+  created() {
+    this.getSelectList()
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getSelectList() {
+      APISelect.tdaApplicationList().then((res) => {
+        this.queryForm.tdaApplicationId.data = res.data.data
+        this.dialogForm.tdaApplicationId.data = res.data.data
+      })
+      APISelect.tdaProductDeviceTypeList().then((res) => {
+        if (res.data.data && res.data.data.length > 0) {
+          res.data.data = res.data.data.map((item) => {
+            return {
+              value: item,
+              label: item,
+            }
+          })
+        }
+        this.queryForm.deviceType.data = res.data.data
+        this.dialogForm.deviceType.data = res.data.data
+      })
+      APISelect.tdaProductManufacturerNameList().then((res) => {
+        if (res.data.data && res.data.data.length > 0) {
+          res.data.data = res.data.data.map((item) => {
+            return {
+              value: item,
+              label: item,
+            }
+          })
+        }
+        this.queryForm.manufacturerName.data = res.data.data
+        this.dialogForm.manufacturerName.data = res.data.data
+      })
+    },
+    getList() {
+      this.loading = true
+      API.tdaProductPage(this.queryParams).then(
+        (res) => {
+          this.total = res.data.data.total
+          this.tableList = res.data.data.records
+          this.loading = false
+        },
+        (err) => {
+          console.log('tdaProductPage: ' + err)
+          this.loading = false
+        },
+      )
+    },
+    handleAdd() {
+      this.dialogParams = {
+        tdaApplicationId: '',
+        name: '',
+        protocolType: 'MQTT',
+        dataFormat: 'json',
+        manufacturerName: '',
+        deviceType: '',
+      }
+      this.open = true
+    },
+    handleSubmit() {
+      this.$refs.test.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.dialogForm.loadingStatus = true
+          API.tdaProductAdd(this.dialogParams).then(
+            () => {
+              this.msgSuccess('添加成功')
+              this.open = false
+              this.dialogForm.loadingStatus = false
+              this.getList()
+            },
+            (err) => {
+              console.log('tdaProductAdd: ' + err)
+              this.dialogForm.loadingStatus = false
+            },
+          )
+          // } else {
+          //   setTimeout(() => {
+          //     const errorDiv = document.getElementsByClassName('is-error')
+          //     errorDiv[0].scrollIntoView()
+          //   }, 0)
+        }
+      })
+    },
+    handleDelete(row) {
+      this.$confirm('请问是否删除行业:' + row.appName, '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '确定',
+        type: 'warning',
+      }).then(() => {
+        API.tdaProductDelete({ id: row.id }).then(() => {
+          this.msgSuccess('删除成功')
+          this.getList()
+        })
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.box-card {
+  height: calc(100vh - 110px);
+  overflow-y: auto;
+}
+</style>