允许批量导入增加节点

src/main.js

@@ -14,6 +14,7 @@ import D2Crud from '@d2-projects/d2-crud'
 import vueCheetahGrid from 'vue-cheetah-grid'
 // 导入D2-admin的导出EXCEL插件
 import pluginExport from '@d2-projects/vue-table-export'
+import pluginImport from '@d2-projects/vue-table-import'
 // 菜单和路由设置
 import router from './router'
 import { menuAside } from '@/menu'
@@ -25,6 +26,7 @@ Vue.use(ElementUI)
 Vue.use(D2Crud)
 Vue.use(vueCheetahGrid)
 Vue.use(pluginExport)
+Vue.use(pluginImport)
 
 new Vue({
   router,

src/views/scada/scadaConfigure/index.vue

@@ -16,16 +16,37 @@
       @row-remove="handleRowRemove"
       @dialog-cancel="handleDialogCancel">
       <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
+      <el-button slot="header" style="margin-bottom: 5px">
+        <el-upload
+          class="upload-demo"
+          ref="upload"
+          action=""
+          :before-upload="handleBatchRowAdd">
+          批量导入
+          <el-popover
+            placement="right"
+            width="688"
+            trigger="hover">
+              <el-card class="box-card">
+                <d2-markdown :source="tips"/>
+              </el-card>
+            <el-button slot="reference" style="float: right"><d2-icon name="question-circle" /></el-button>
+          </el-popover>
+        </el-upload>
+      </el-button>
     </d2-crud>
   </d2-container>
 </template>
 
 <script>
-import { assign, each, pick, pickBy, startsWith } from 'lodash'
+import tips from './tips.md'
+import jschardet from 'jschardet'
+import { assign, each, pick, pickBy, startsWith, includes, every } from 'lodash'
 
 export default {
   data () {
     return {
+      tips,
       columns: [
         {
           title: '序号',
@@ -204,6 +225,51 @@ export default {
       done()
       this.formOptions.saveLoading = false
     },
+    readFile (file) {
+      return new Promise((resolve) => {
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = function (e) {
+          resolve(e.target.result)
+        }
+      })
+    },
+    async importConfig (file) {
+      try {
+        const buffer = await this.readFile(file)
+        const encoding = jschardet.detect(Buffer.from(buffer.split(';base64,')[1], 'base64')).encoding
+        if (encoding !== 'UTF-8') {
+          this.$message.error(`导入的配置文件必须为UTF-8编码，但当前文件为${encoding}编码`)
+          throw new TypeError('文件编码错误')
+        } else {
+          this.$import.csv(file)
+            .then(res => {
+              each(res.data, (row) => {
+                if (!includes(['string', 'int', 'float', 'bool'], row.type)) {
+                  this.$message.error('type字段必须为string|int|float|bool中的一种！')
+                  throw new TypeError('type字段设置错误')
+                } else if (!every([row.code, row.name, row.working_subclass], Boolean)) {
+                  this.$message.error('code/name/working_subclass字段不可以为空！')
+                  throw new TypeError('缺少必填字段')
+                } else {
+                  this.$api.ADD_NODE(assign(row, { action: 'add_node' }))
+                  this.getNodes()
+                  this.$refs.upload.clearFiles()
+                }
+              })
+            })
+            .catch(e => {
+              console.log(e)
+            })
+        }
+      } catch (e) {
+        console.log(e)
+      }
+    },
+    handleBatchRowAdd (file) {
+      this.importConfig(file)
+      return false
+    },
     async handleRowEdit ({ index, row }, done) {
       this.formOptions.saveLoading = true
       await this.$api.UPDATE_NODE(assign(pickBy(row, (v, k) => (!startsWith(k, 'show'))), { action: 'update_node' }))

src/views/scada/scadaConfigure/tips.md

@@ -0,0 +1,15 @@
+# 上传文件说明
+
+上传的文件必须为**UTF-8**编码的plain-text，可用逗号或制表符分隔。
+
+内容示例：
+
+code | name | type | flow_code | working_subclass | workstation | note
+--- | --- | --- | --- | --- | --- | ---
+☆ | ☆ | ★ | | ☆ | | |
+
+- ☆：必填字段
+
+- ★：只能为`"string"|"int"|"float"|"bool"`中的一种
+
+- 所有字段长度均不可超过45 bytes。

src/views/scada/scadaQuery/index.vue

@@ -87,7 +87,7 @@
         <el-button type="primary" @click="reRender">筛选</el-button>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="selectRestore"> 还原</el-button>
+        <el-button type="primary" @click="restore"> 还原</el-button>
       </el-form-item>
     </el-form>
 
@@ -363,7 +363,7 @@ export default {
       this.chosenType = e
     },
     // 还原
-    selectRestore () {
+    restore () {
       this.chosenType = ''
       this.selected = {
         numberCompareMethod: '',