允许批量导入增加节点

This commit is contained in:
Yu Sun
2022-08-03 23:08:48 +08:00
parent 7d5dba7719
commit 17c4d7193a
7 changed files with 159 additions and 11 deletions

View File

@@ -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

View File

@@ -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",

View File

@@ -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,

View File

@@ -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' }))

View File

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

View File

@@ -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: '',

View File

@@ -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"