添加"导入" "导出" "重置"

src/components/IPTV.vue

@@ -3,7 +3,16 @@
     <div class="detail-content">
       <div class="detail-header">
         <div class="zy-select">
-            <div class="vs-placeholder vs-noAfter" @click="openAddSite">添加新源</div>
+            <div class="vs-placeholder vs-noAfter" @click="openAddSite">添加新频道</div>
+        </div>
+        <div class="zy-select">
+          <div class="vs-placeholder vs-noAfter" @click="exportSites">导出</div>
+        </div>
+        <div class="zy-select">
+          <div class="vs-placeholder vs-noAfter" @click="importSites">导入</div>
+        </div>
+        <div class="zy-select">
+          <div class="vs-placeholder vs-noAfter" @click="resetSites">重置</div>
         </div>
       </div>
       <div class="detail-body zy-scroll">
@@ -13,7 +22,7 @@
               <ul>
                 <li >
                   <span class="name">频道名</span>
-                  <span class="name">m3u8接口</span>
+                  <span class="name">Url</span>
                   <span class="operate">
                     <span class="btn"></span>
                     <span class="btn"></span>
@@ -24,7 +33,7 @@
                     <input style="height: 30px" v-model="newSite.name">
                   </span>
                   <span class="name" style="display:inline-block;vertical-align:middle">
-                    <input style="height: 30px" v-model="newSite.api">
+                    <input style="height: 30px" v-model="newSite.url">
                   </span>
                   <span class="operate">
                     <span class="btn" @click="addNewSite">添加</span>
@@ -35,9 +44,9 @@
                </ul>
              </div>
             <ul>
-              <draggable v-model="iptv" @change="listUpdatedEvent">
+              <draggable v-model="iptvList" @change="listUpdatedEvent">
                 <transition-group>
-                  <li v-for="(i, j) in iptv" :key="j">
+                  <li v-for="(i, j) in iptvList" :key="j" @click.stop="playEvent(i)">
                     <span class="name">{{i.name}}</span>
                     <span class="operate">
                       <span class="btn" @click.stop="playEvent(i)">播放</span>
@@ -57,11 +66,14 @@
 import { mapMutations } from 'vuex'
 import { iptv } from '../lib/dexie'
 import draggable from 'vuedraggable'
+import { iptv as defaultSites } from '../lib/dexie/initData'
+import { remote } from 'electron'
+import fs from 'fs'
 export default {
   name: 'iptv',
   data () {
     return {
-      iptv: [],
+      iptvList: [],
       showAddSite: false,
       newSite:
       {
@@ -88,13 +100,13 @@ export default {
   },
   watch: {
     view () {
-      this.getAllIptv()
+      this.getAllSites()
     }
   },
   methods: {
     ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
     playEvent (e) {
-      var m3u8Link = e.site
+      var m3u8Link = e.url
       const fs = require('fs')
       var externalPlayer = this.setting.externalPlayer
       if (!fs.existsSync(externalPlayer)) {
@@ -110,7 +122,7 @@ export default {
     },
     removeEvent (e) {
       iptv.remove(e.id).then(res => {
-        this.getAllIptv()
+        this.getAllSites()
       }).catch(err => {
         this.$message.warning('删除频道失败, 错误信息: ' + err)
       })
@@ -122,42 +134,94 @@ export default {
       this.showAddSite = true
     },
     addNewSite () {
-      if (!this.newSite.name || !this.newSite.site) {
+      if (!this.newSite.name || !this.newSite.url) {
         this.$message.error('名称和API接口不能为空。')
         return
       }
       var doc = {
         name: this.newSite.name,
-        site: this.newSite.site
+        url: this.newSite.url
       }
       iptv.add(doc).then(res => {
         this.newSite = {
           name: '',
-          site: ''
+          url: ''
         }
         this.$message.success('添加新源成功！')
-        this.getAllIptv()
+        this.getAllSites()
       })
     },
     listUpdatedEvent () {
       iptv.clear().then(res1 => {
         // 重新排序
         var id = 1
-        this.iptv.forEach(element => {
+        this.iptvList.forEach(element => {
           element.id = id
           iptv.add(element)
           id += 1
         })
       })
     },
-    getAllIptv () {
+    exportSites () {
+      this.getAllSites()
+      const arr = [...this.iptvList]
+      const str = JSON.stringify(arr, null, 4)
+      const options = {
+        filters: [
+          { name: 'JSON file', extensions: ['json'] },
+          { name: 'Normal text file', extensions: ['txt'] },
+          { name: 'All types', extensions: ['*'] }
+        ]
+      }
+      remote.dialog.showSaveDialog(options).then(result => {
+        if (!result.canceled) {
+          fs.writeFileSync(result.filePath, str)
+          this.$message.success('已保存成功')
+        }
+      }).catch(err => {
+        this.$message.error(err)
+      })
+    },
+    importSites () {
+      const options = {
+        filters: [
+          { name: 'JSON file', extensions: ['json'] },
+          { name: 'Normal text file', extensions: ['txt'] },
+          { name: 'All types', extensions: ['*'] }
+        ],
+        properties: ['openFile']
+      }
+      remote.dialog.showOpenDialog(options).then(result => {
+        if (!result.canceled) {
+          iptv.clear()
+          result.filePaths.forEach(file => {
+            var str = fs.readFileSync(file)
+            const json = JSON.parse(str)
+            iptv.bulkAdd(json).then(e => {
+              this.getAllSites()
+            })
+            this.$message.success('导入成功')
+          }).catch(err => {
+            this.$message.error(err)
+          })
+        }
+      })
+    },
+    resetSites () {
+      iptv.clear()
+      iptv.bulkAdd(defaultSites).then(e => {
+        this.getAllSites()
+        this.$message.success('重置成功')
+      })
+    },
+    getAllSites () {
       iptv.all().then(res => {
-        this.iptv = res
+        this.iptvList = res
       })
     }
   },
   created () {
-    this.getAllIptv()
+    this.getAllSites()
   }
 }
 </script>