From 17c4d7193aa7cd80844877c36b746987d84b916e Mon Sep 17 00:00:00 2001
From: Yu Sun <suny226@mail2.sysu.edu.cn>
Date: Wed, 3 Aug 2022 23:08:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=81=E8=AE=B8=E6=89=B9=E9=87=8F=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5=E5=A2=9E=E5=8A=A0=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                | 31 ++++++++---
 package.json                             |  4 ++
 src/main.js                              |  2 +
 src/views/scada/scadaConfigure/index.vue | 68 +++++++++++++++++++++++-
 src/views/scada/scadaConfigure/tips.md   | 15 ++++++
 src/views/scada/scadaQuery/index.vue     |  4 +-
 yarn.lock                                | 46 ++++++++++++++++
 7 files changed, 159 insertions(+), 11 deletions(-)
 create mode 100644 src/views/scada/scadaConfigure/tips.md

diff --git a/README.md b/README.md
index 3107866..e96935e 100644
--- a/README.md
+++ b/README.md
@@ -153,19 +153,29 @@ sudo dnf install php-pgsql
 
 ### 前端
 
-添加依赖（使用npm）：
+添加依赖（**使用npm**）：
 
 ```bash
-npm i element-ui @d2-projects/d2-crud -S
-npm install -S vue-cheetah-grid
-npm i @d2-projects/vue-table-export --save
+npm i element-ui \
+    @d2-projects/d2-crud \
+    vue-cheetah-grid \
+    @d2-projects/vue-table-export \
+    @d2-projects/vue-table-import \
+    github-markdown-css \
+    marked@^2.0.0 \
+    jschardet -S
 ```
 
-添加依赖（使用yarn）：
+添加依赖（**使用yarn**）：
 ```bash
-yarn add element-ui @d2-projects/d2-crud
-yarn add vue-cheetah-grid
-yarn add @d2-projects/vue-table-export
+yarn add element-ui \
+    @d2-projects/d2-crud \
+    vue-cheetah-grid \
+    @d2-projects/vue-table-export \
+    @d2-projects/vue-table-import \
+    github-markdown-css \
+    marked@^2.0.0 \
+    jschardet
 ```
 
 需要在`main.js`中增加（全局引入组件）：
@@ -179,11 +189,13 @@ import D2Crud from '@d2-projects/d2-crud'
 import vueCheetahGrid from 'vue-cheetah-grid'
 // 表格导出插件
 import pluginExport from '@d2-projects/vue-table-export'
+import pluginImport from '@d2-projects/vue-table-import'
 
 Vue.use(ElementUI)
 Vue.use(D2Crud)
 Vue.use(vueCheetahGrid)
 Vue.use(pluginExport)
+Vue.use(pluginImport)
 ```
 
 *（可选）* 在`package.json`里更改`element-ui`版本：
@@ -207,6 +219,9 @@ Vue.use(pluginExport)
  ┃ ┗ 📜tools.js
  ┣ 📂assets
  ┣ 📂components
+ ┃ ┣ 📂d2-markdown  # 渲染markdown所需组件（在D2Admin的基础上精简了功能）
+ ┃ ┃ ┗ 📜index.vue
+ ┃ ┗ 📜index.js  # 在此处注册d2-markdown
  ┣ 📂libs
  ┣ 📂locales
  ┣ 📂menu
diff --git a/package.json b/package.json
index ff5fb6b..a5fc483 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@d2-projects/d2-crud": "^2.1.2",
     "@d2-projects/vue-table-export": "^1.1.3",
+    "@d2-projects/vue-table-import": "^1.0.1",
     "axios": "^0.19.0",
     "axios-mock-adapter": "^1.18.1",
     "better-scroll": "^1.15.2",
@@ -23,10 +24,13 @@
     "faker": "^4.1.0",
     "flex.css": "^1.1.7",
     "fuse.js": "^5.2.3",
+    "github-markdown-css": "^5.1.0",
     "hotkeys-js": "^3.7.3",
     "js-cookie": "^2.2.1",
+    "jschardet": "^3.0.0",
     "lodash": "^4.17.19",
     "lowdb": "^1.0.0",
+    "marked": "^2.0.0",
     "nprogress": "^0.2.0",
     "screenfull": "^5.0.2",
     "sortablejs": "^1.10.1",
diff --git a/src/main.js b/src/main.js
index cc1571d..06f9022 100644
--- a/src/main.js
+++ b/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,
diff --git a/src/views/scada/scadaConfigure/index.vue b/src/views/scada/scadaConfigure/index.vue
index beaf113..e16ebab 100644
--- a/src/views/scada/scadaConfigure/index.vue
+++ b/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' }))
diff --git a/src/views/scada/scadaConfigure/tips.md b/src/views/scada/scadaConfigure/tips.md
new file mode 100644
index 0000000..33538fd
--- /dev/null
+++ b/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。
diff --git a/src/views/scada/scadaQuery/index.vue b/src/views/scada/scadaQuery/index.vue
index 12cb24f..885803b 100644
--- a/src/views/scada/scadaQuery/index.vue
+++ b/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: '',
diff --git a/yarn.lock b/yarn.lock
index 1940674..e98b5f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1034,6 +1034,15 @@
     file-saver "^2.0.0"
     xlsx "^0.14.1"
 
+"@d2-projects/vue-table-import@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/@d2-projects/vue-table-import/-/vue-table-import-1.0.1.tgz#b5adaa133e32837d3150d9de8da7a0a777ddd2c9"
+  integrity sha512-PH49eyCxz7DB6BI4P3aSKoNGBgYosr9nKf/yr/KR+ALxqKk9U9Q2Ukb9yM+Y6XR2fiIRvXgQrGw0Y/IBtlFSpQ==
+  dependencies:
+    papaparse "^4.6.2"
+    vue "^2.5.11"
+    xlsx "^0.14.1"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.npmmirror.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -1865,6 +1874,15 @@
     postcss "^8.4.14"
     source-map "^0.6.1"
 
+"@vue/compiler-sfc@2.7.8":
+  version "2.7.8"
+  resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.8.tgz#731aadd6beafdb9c72fd8614ce189ac6cee87612"
+  integrity sha512-2DK4YWKfgLnW9VDR9gnju1gcYRk3flKj8UNsms7fsRmFcg35slVTZEkqwBtX+wJBXaamFfn6NxSsZh3h12Ix/Q==
+  dependencies:
+    "@babel/parser" "^7.18.4"
+    postcss "^8.4.14"
+    source-map "^0.6.1"
+
 "@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.1.2":
   version "3.3.0"
   resolved "https://registry.npmmirror.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
@@ -5606,6 +5624,11 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+github-markdown-css@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmmirror.com/github-markdown-css/-/github-markdown-css-5.1.0.tgz#a96281cd90a8969e3c13b9d3ca6a733a523a00a6"
+  integrity sha512-QLtORwHHtUHhPMHu7i4GKfP6Vx5CWZn+NKQXe+cBhslY1HEt0CTEkP4d/vSROKV0iIJSpl4UtlQ16AD8C6lMug==
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmmirror.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@@ -7204,6 +7227,11 @@ jsbn@~0.1.0:
   resolved "https://registry.npmmirror.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==
 
+jschardet@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/jschardet/-/jschardet-3.0.0.tgz#898d2332e45ebabbdb6bf2feece9feea9a99e882"
+  integrity sha512-lJH6tJ77V8Nzd5QWRkFYCLc13a3vADkh3r/Fi8HupZGWk2OVVDfnZP8V/VgQgZ+lzW0kG2UGb5hFgt3V3ndotQ==
+
 jsdom@^11.5.1:
   version "11.12.0"
   resolved "https://registry.npmmirror.com/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
@@ -7657,6 +7685,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@^2.0.0:
+  version "2.1.3"
+  resolved "https://registry.npmmirror.com/marked/-/marked-2.1.3.tgz#bd017cef6431724fd4b27e0657f5ceb14bff3753"
+  integrity sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.npmmirror.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -8478,6 +8511,11 @@ pako@~1.0.5:
   resolved "https://registry.npmmirror.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
+papaparse@^4.6.2:
+  version "4.6.3"
+  resolved "https://registry.npmmirror.com/papaparse/-/papaparse-4.6.3.tgz#742e5eaaa97fa6c7e1358d2934d8f18f44aee781"
+  integrity sha512-LRq7BrHC2kHPBYSD50aKuw/B/dGcg29omyJbKWY3KsYUZU69RKwaBHu13jGmCYBtOc4odsLCrFyk6imfyNubJQ==
+
 parallel-transform@^1.1.0:
   version "1.2.0"
   resolved "https://registry.npmmirror.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
@@ -11394,6 +11432,14 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue@^2.5.11:
+  version "2.7.8"
+  resolved "https://registry.npmmirror.com/vue/-/vue-2.7.8.tgz#34e06553137611d8cecc4b0cd78b7a59f80b1299"
+  integrity sha512-ncwlZx5qOcn754bCu5/tS/IWPhXHopfit79cx+uIlLMyt3vCMGcXai5yCG5y+I6cDmEj4ukRYyZail9FTQh7lQ==
+  dependencies:
+    "@vue/compiler-sfc" "2.7.8"
+    csstype "^3.1.0"
+
 vue@^2.5.19, vue@^2.6.11:
   version "2.7.2"
   resolved "https://registry.npmmirror.com/vue/-/vue-2.7.2.tgz#d42aba8d03c4e82d4b127f7b764a822cf19f9cdc"