feat: content protection supports multiple configurations

src/views/realm/device/settings/components/ContentProtectionConfigDialog.vue

@@ -5,8 +5,8 @@
     @confirm="onSave"
   >
     <div class="c-grid-form mini u-align-self--center">
-      <span class="c-grid-form__label">启用</span>
-      <div class="l-flex--row c-grid-form__option">
+      <div class="l-flex--row c-grid-form__row">
+        <span class="c-sibling-item c-grid-form__label u-bold">启用</span>
         <el-switch
           v-model="config.protect"
           class="c-sibling-item"
@@ -14,25 +14,49 @@
           inactive-color="#ff4949"
         />
       </div>
-      <span class="c-grid-form__label">主卡</span>
-      <div class="l-flex--row c-grid-form__option">
-        <el-input-number
-          v-model="config.cardId"
-          :min="0"
-          :max="255"
-          step-strictly
-        />
-        &nbsp;0~255
+      <div class="c-grid-form__row">
+        <button
+          class="c-sibling-item o-button"
+          @click="onAdd"
+        >
+          <i class="o-button__icon el-icon-circle-plus-outline" />
+          新增
+        </button>
+        <span class="c-sibling-item u-color--info">卡号 0~255</span>
       </div>
-      <span class="c-grid-form__label">子卡</span>
-      <div class="l-flex--row c-grid-form__option">
-        <el-input-number
-          v-model="config.srcId"
-          :min="0"
-          :max="255"
-          step-strictly
-        />
-        &nbsp;0~255
+      <div
+        v-for="(item, index) in config.inputCards"
+        :key="index"
+        class="c-grid-form__row"
+      >
+        <div class="l-flex--row c-sibling-item--v u-bold">
+          <span class="c-sibling-item c-grid-form__label c-grid-form__text">配置{{ index + 1 }}</span>
+          <i
+            v-if="hasMore"
+            class="c-sibling-item far el-icon-delete has-active u-pointer"
+            @click="onDel(index)"
+          />
+        </div>
+        <div class="l-flex--row c-sibling-item--v">
+          <span class="l-flex__none c-sibling-item c-grid-form__label">主卡</span>
+          <div class="l-flex__auto c-sibling-item l-flex--row">
+            <el-input-number
+              v-model="item.cardId"
+              :min="0"
+              :max="255"
+              step-strictly
+            />
+          </div>
+          <span class="l-flex__none c-sibling-item far c-grid-form__label">子卡</span>
+          <div class="l-flex__auto l-flex--row c-sibling-item c-grid-form__option">
+            <el-input-number
+              v-model="item.srcId"
+              :min="0"
+              :max="255"
+              step-strictly
+            />
+          </div>
+        </div>
       </div>
     </div>
   </confirm-dialog>
@@ -48,7 +72,15 @@ export default {
   name: 'ContentProtectionConfigDialog',
   data () {
     return {
-      config: {}
+      config: {
+        protect: false,
+        inputCards: []
+      }
+    }
+  },
+  computed: {
+    hasMore () {
+      return this.config.inputCards.length > 1
     }
   },
   methods: {
@@ -58,16 +90,11 @@ export default {
       getContentProtection(id).then(({ data }) => {
         if (data) {
           const { protect, inputCards } = data
-          this.config = {
-            protect: protect || false,
-            cardId: inputCards?.[0]?.cardId || 0,
-            srcId: inputCards?.[0]?.srcId || 0
-          }
+          this.config = { protect, inputCards }
         } else {
           this.config = {
             protect: false,
-            cardId: 0,
-            srcId: 0
+            inputCards: [{ cardId: 0, srcId: 0 }]
           }
         }
         this.$refs.configDialog.show()
@@ -76,7 +103,32 @@ export default {
       })
     },
     onSave (done) {
-      updateContentProtection(this.$deviceId, this.config).then(done)
+      const { protect, inputCards } = this.config
+      const map = {}
+      const cards = []
+      for (let i = 0; i < inputCards.length; i++) {
+        const { cardId, srcId } = inputCards[i]
+        const key = `${cardId}-${srcId}`
+        if (map[key]) {
+          this.$message({
+            type: 'warning',
+            message: `配置${i + 1}与配置${map[key]}相同`
+          })
+          return
+        }
+        map[key] = i + 1
+        cards.push({ cardId, srcId })
+      }
+      updateContentProtection(this.$deviceId, {
+        protect,
+        inputCards: cards
+      }).then(done)
+    },
+    onAdd () {
+      this.config.inputCards.push({ cardId: 0, srcId: 0 })
+    },
+    onDel (index) {
+      this.config.inputCards.splice(index, 1)
     }
   }
 }