允许批量导入增加节点
This commit is contained in:
31
README.md
31
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
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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' }))
|
||||
|
||||
15
src/views/scada/scadaConfigure/tips.md
Normal file
15
src/views/scada/scadaConfigure/tips.md
Normal file
@@ -0,0 +1,15 @@
|
||||
# 上传文件说明
|
||||
|
||||
上传的文件必须为**UTF-8**编码的plain-text,可用逗号或制表符分隔。
|
||||
|
||||
内容示例:
|
||||
|
||||
code | name | type | flow_code | working_subclass | workstation | note
|
||||
--- | --- | --- | --- | --- | --- | ---
|
||||
☆ | ☆ | ★ | | ☆ | | |
|
||||
|
||||
- ☆:必填字段
|
||||
|
||||
- ★:只能为`"string"|"int"|"float"|"bool"`中的一种
|
||||
|
||||
- 所有字段长度均不可超过45 bytes。
|
||||
@@ -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: '',
|
||||
|
||||
46
yarn.lock
46
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"
|
||||
|
||||
Reference in New Issue
Block a user