feat: receiving card

src/api/external.js

@@ -6,23 +6,6 @@ import {
   messageSend
 } from './base'
 
-// export function addReceivingCard (id, data, onUploadProgress) {
-//   return request({
-//     url: `/device/information/${id}`,
-//     method: 'POST',
-//     timeout: 0,
-//     data, onUploadProgress
-//   })
-// }
-
-// export function getReceivingCardTopology (id, options) {
-//   return request({
-//     url: `/device/topology/${id}`,
-//     method: 'GET',
-//     ...options
-//   })
-// }
-
 export function getSensors (options) {
   return request({
     url: '/device/sensorType',
@@ -31,6 +14,48 @@ export function getSensors (options) {
   })
 }
 
+export function getReceivingCardManufacturers () {
+  return request({
+    url: '/device/manufacturer/list',
+    method: 'GET'
+  })
+}
+
+export function addReceivingCard (fromData, onUploadProgress) {
+  return request({
+    url: `/device/information`,
+    method: 'POST',
+    timeout: 0,
+    data: fromData,
+    onUploadProgress
+  })
+}
+
+export function updateReceivingCard (fromData, onUploadProgress) {
+  return update({
+    url: `/device/information`,
+    method: 'PUT',
+    timeout: 0,
+    data: fromData,
+    onUploadProgress
+  })
+}
+
+export function getReceivingCard (id) {
+  return request({
+    url: `/device/information/${id}`,
+    method: 'GET'
+  })
+}
+
+export function getReceivingCardTopology (id, options) {
+  return request({
+    url: `/device/topology/${id}`,
+    method: 'GET',
+    ...options
+  })
+}
+
 export function getSendCardManufacturers () {
   return request({
     url: '/device/thirdPartySendingCard/manufacturer',

src/scss/bem/_component.scss

@@ -188,11 +188,6 @@
   grid-template-columns: auto 400px;
   grid-row-gap: $spacing;
   grid-column-gap: 10px;
-  align-items: center;
-
-  &.auto {
-    grid-template-columns: auto auto;
-  }
 
   &__row {
     grid-column: span 2;
@@ -201,6 +196,7 @@
   &__label {
     color: $black;
     font-size: 14px;
+    line-height: 40px;
     text-align: right;
 
     &.required::before {
@@ -208,6 +204,21 @@
       color: #ff0000;
     }
   }
+
+  &__info {
+    position: relative;
+    min-height: 40px;
+    margin-bottom: 10px;
+
+    &::after {
+      content: attr(data-info);
+      position: absolute;
+      left: 0;
+      bottom: -20px;
+      color: $gray;
+      font-size: 12px;
+    }
+  }
 }
 
 .c-sibling-item {
@@ -216,7 +227,7 @@
   }
 
   & + &.far {
-    margin-left: 16px !important;
+    margin-left: $spacing !important;
   }
 }
 

src/views/device/detail/components/external/ReceivingCard/ReceivingCardInfoEdit.vue

@@ -5,12 +5,12 @@
         <div class="l-flex--row l-flex__fill c-info__item">
           <div class="l-flex__none c-info__title">厂家名称</div>
           <el-select
-            v-model="defaults.manufacturerId"
+            v-model="defaults.manufacturerKey"
             class="l-flex__fill c-info__value"
             placeholder="请选择厂家"
             :loading="manufacturers.loading"
             @visible-change="getReceivingCardManufacturers"
-            @change="onChangeProp('manufacturerId')"
+            @change="onChangeProp('manufacturerKey')"
           >
             <el-option
               v-for="manufacturer in manufacturers.list"
@@ -48,7 +48,7 @@
           />
         </div>
         <div class="l-flex--row l-flex__fill c-info__item">
-          <div class="l-flex__none c-info__title">是否支持卡温度监测</div>
+          <div class="l-flex__none c-info__title">温度监测</div>
           <div class="l-flex__fill">
             <el-switch
               v-model="defaults.temperature"
@@ -61,7 +61,7 @@
       </div>
       <div class="l-flex--row c-info__block">
         <div class="l-flex--row l-flex__fill c-info__item">
-          <div class="l-flex__none c-info__title">是否支持卡电压监测</div>
+          <div class="l-flex__none c-info__title">电压监测</div>
           <div class="l-flex__fill">
             <el-switch
               v-model="defaults.voltage"
@@ -72,7 +72,7 @@
           </div>
         </div>
         <div class="l-flex--row l-flex__fill c-info__item">
-          <div class="l-flex__none c-info__title">是否为异步盒</div>
+          <div class="l-flex__none c-info__title">异步盒</div>
           <div class="l-flex__fill">
             <el-switch
               v-model="defaults.async"
@@ -85,7 +85,6 @@
       </div>
     </template>
     <template v-else>
-
       <button
         class="o-button"
         @click="onAdd"
@@ -93,15 +92,14 @@
         <i class="o-button__icon el-icon-circle-plus-outline" />
         新增
       </button>
-      <el-dialog
+      <confirm-dialog
+        ref="addDialog"
         title="新增"
-        :visible.sync="show"
-        custom-class="c-dialog"
-        :close-on-click-modal="false"
+        @confirm="onSave"
       >
         <el-upload
           ref="upload"
-          class="o-upload"
+          class="o-upload has-bottom-padding"
           action="none"
           :auto-upload="false"
           :show-file-list="false"
@@ -118,76 +116,52 @@
             </template>
           </div>
         </el-upload>
-        <div class="c-form">
-          <div class="c-form__section">
-            <span class="c-form__label large required">厂家：</span>
-            <el-select
-              v-model="receivingCard.manufacturerId"
-              class="c-form__item"
-              placeholder="请选择厂家"
-              :loading="manufacturers.loading"
-              @visible-change="getReceivingCardManufacturers"
-            >
-              <el-option
-                v-for="manufacturer in manufacturers.list"
-                :key="manufacturer.value"
-                :label="manufacturer.label"
-                :value="manufacturer.value"
-              />
-            </el-select>
-          </div>
-          <div class="c-form__section">
-            <span class="c-form__label large">型号：</span>
-            <el-input
-              v-model.trim="receivingCard.screen"
-              class="c-form__item"
-              maxlength="50"
-              show-word-limit
+        <div class="c-grid-form u-align-self--center">
+          <span class="c-grid-form__label required">厂家：</span>
+          <el-select
+            v-model="receivingCard.manufacturerKey"
+            placeholder="请选择厂家"
+            :loading="manufacturers.loading"
+            @visible-change="getReceivingCardManufacturers"
+          >
+            <el-option
+              v-for="manufacturer in manufacturers.list"
+              :key="manufacturer.value"
+              :label="manufacturer.label"
+              :value="manufacturer.value"
             />
-          </div>
-          <div class="c-form__section">
-            <span class="c-form__label large">是否为异步盒：</span>
+          </el-select>
+          <span class="c-grid-form__label">型号：</span>
+          <el-input
+            v-model.trim="receivingCard.screen"
+            maxlength="50"
+            show-word-limit
+          />
+          <span class="c-grid-form__label">异步盒：</span>
+          <div class="l-flex--row">
             <el-switch
               v-model="receivingCard.async"
-              class="c-form__item"
+              class="c-sibling-item"
               active-color="#13ce66"
               inactive-color="#ff4949"
             />
-          </div>
-          <div class="c-form__section">
-            <span class="c-form__label large">是否支持卡温度监测：：</span>
+            <span class="c-sibling-item far">温度监测：</span>
             <el-switch
               v-model="receivingCard.temperature"
-              class="c-form__item"
+              class="c-sibling-item"
               active-color="#13ce66"
               inactive-color="#ff4949"
             />
-          </div>
-          <div class="c-form__section">
-            <span class="c-form__label large">是否支持卡电压监测：：</span>
+            <span class="c-sibling-item far">电压监测：</span>
             <el-switch
               v-model="receivingCard.voltage"
-              class="c-form__item"
+              class="c-sibling-item"
               active-color="#13ce66"
               inactive-color="#ff4949"
             />
           </div>
         </div>
-        <template #footer>
-          <button
-            class="o-button"
-            @click="save"
-          >
-            确定
-          </button>
-          <button
-            class="o-button cancel"
-            @click="close"
-          >
-            取消
-          </button>
-        </template>
-      </el-dialog>
+      </confirm-dialog>
       <el-dialog
         class="c-progress"
         :visible.sync="showProgress"
@@ -248,7 +222,7 @@ export default {
     getDefaults () {
       if (this.info) {
         this.defaults = {
-          manufacturerId: this.info.manufacturerId,
+          manufacturerKey: this.info.manufacturerKey,
           screen: this.info.screen,
           temperature: this.info.temperature,
           voltage: this.info.voltage,
@@ -256,7 +230,7 @@ export default {
           topology: this.info.topology?.version ?? '未上传'
         }
         if (!this.manufacturers.loaded) {
-          this.manufacturers.list = [{ value: this.info.manufacturerId, label: this.info.manufacturer }]
+          this.manufacturers.list = [{ value: this.info.manufacturerKey, label: this.info.manufacturerName }]
         }
       }
     },
@@ -264,8 +238,8 @@ export default {
       if (visible && !this.manufacturers.loading && !this.manufacturers.loaded) {
         this.manufacturers.loading = true
         getReceivingCardManufacturers().then(({ data }) => {
-          this.manufacturers.list = data.map(({ id, name }) => {
-            return { value: id, label: name }
+          this.manufacturers.list = data.map(({ manufacturerKey, manufacturerName }) => {
+            return { value: manufacturerKey, label: manufacturerName }
           })
           this.manufacturers.loading = false
           this.manufacturers.loaded = true
@@ -276,19 +250,16 @@ export default {
     },
     onAdd () {
       this.receivingCard = {
-        manufacturerId: '',
+        manufacturerKey: '',
         topologyFile: null,
         screen: '',
         temperature: false,
         voltage: false,
         async: false
       }
-      this.show = true
-    },
-    close () {
-      this.show = false
+      this.$refs.addDialog.show()
     },
-    save () {
+    onSave (done) {
       if (!this.receivingCard.topologyFile) {
         this.$message({
           type: 'warning',
@@ -296,7 +267,7 @@ export default {
         })
         return
       }
-      if (!this.receivingCard.manufacturerId) {
+      if (!this.receivingCard.manufacturerKey) {
         this.$message({
           type: 'warning',
           message: '请选择厂家'
@@ -304,7 +275,8 @@ export default {
         return
       }
       const formData = new FormData()
-      formData.append('manufacturerId', this.receivingCard.manufacturerId)
+      formData.append('deviceId', this.$route.params.id)
+      formData.append('manufacturerKey', this.receivingCard.manufacturerKey)
       formData.append('topologyFile', this.receivingCard.topologyFile)
       formData.append('screen', this.receivingCard.screen)
       formData.append('temperature', this.receivingCard.temperature)
@@ -312,13 +284,13 @@ export default {
       formData.append('async', this.receivingCard.async)
       this.progress = 0
       this.showProgress = true
-      addReceivingCard(this.$route.params.id, formData, ({ loaded, total }) => {
+      addReceivingCard(formData, ({ loaded, total }) => {
         this.progress = Math.min(99, loaded * 100 / total | 0)
       }).finally(() => {
         this.progress = 100
         this.showProgress = false
       }).then(() => {
-        this.close()
+        done()
         this.emitChange('all')
       })
     },
@@ -350,8 +322,9 @@ export default {
     },
     updateProp (key, data, options) {
       const formData = new FormData()
+      formData.append('deviceId', this.$route.params.id)
       formData.append(key, data)
-      return updateReceivingCard(this.$route.params.id, formData, options).then(() => {
+      return updateReceivingCard(formData, options).then(() => {
         this.emitChange(key)
       })
     },
@@ -359,7 +332,7 @@ export default {
       let tip = null
       let reset = false
       switch (key) {
-        case 'manufacturerId':
+        case 'manufacturerKey':
           tip = '厂商'
           break
         case 'topologyFile':

src/views/device/detail/index.vue

@@ -63,7 +63,7 @@ import DeviceInfo from './components/DeviceInfo'
 import DeviceStatus from './components/DeviceStatus'
 import DeviceAlarm from './components/DeviceAlarm'
 import DeviceInvoke from './components/DeviceInvoke'
-// import ReceivingCard from './components/external/ReceivingCard'
+import ReceivingCard from './components/external/ReceivingCard'
 
 export default {
   name: 'DeviceDetail',
@@ -71,8 +71,8 @@ export default {
     DeviceInfo,
     DeviceStatus,
     DeviceAlarm,
-    DeviceInvoke/* ,
-    ReceivingCard */
+    DeviceInvoke,
+    ReceivingCard
   },
   data () {
     const canEdit = this.accessSet.has(this.Access.MANAGE_DEVICES) || this.accessSet.has(this.Access.MANAGE_DEVICE)
@@ -86,8 +86,8 @@ export default {
         { key: 'info', label: '设备信息' },
         { key: 'status', label: '运行状态' },
         { key: 'alarm', label: '设备告警' },
-        canEdit ? { key: 'invoke', label: '设备操控' } : null/* ,
-        { key: 'screen', label: '屏体状态监测' } */
+        canEdit ? { key: 'invoke', label: '设备操控' } : null,
+        { key: 'screen', label: '屏体状态监测' }
       ].filter(val => val)
     }
   },