Showing
6 changed files
with
533 additions
and
48 deletions
| 1 | /* | 1 | /* |
| 2 | * @Date: 2021-08-18 12:47:05 | 2 | * @Date: 2021-08-18 12:47:05 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2023-10-26 10:10:07 | 4 | + * @LastEditTime: 2023-10-27 11:05:12 |
| 5 | - * @FilePath: /vue-flow-editor-for-vue3.0-master/build/docs.js | 5 | + * @FilePath: /vue-flow-editor/build/docs.js |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| 8 | const $utils = require('./build.utils') | 8 | const $utils = require('./build.utils') |
| ... | @@ -10,9 +10,6 @@ const $utils = require('./build.utils') | ... | @@ -10,9 +10,6 @@ const $utils = require('./build.utils') |
| 10 | module.exports = { | 10 | module.exports = { |
| 11 | publicPath: './', | 11 | publicPath: './', |
| 12 | outputDir: 'docs', | 12 | outputDir: 'docs', |
| 13 | - devServer: { | ||
| 14 | - port: '4488' | ||
| 15 | - }, | ||
| 16 | pages: { | 13 | pages: { |
| 17 | index: { | 14 | index: { |
| 18 | entry: $utils.resolve('doc/main.ts'), | 15 | entry: $utils.resolve('doc/main.ts'), |
| ... | @@ -33,4 +30,33 @@ module.exports = { | ... | @@ -33,4 +30,33 @@ module.exports = { |
| 33 | ] | 30 | ] |
| 34 | } | 31 | } |
| 35 | }, | 32 | }, |
| 33 | + devServer: { | ||
| 34 | + open: true, | ||
| 35 | + // open: process.platform === 'darwin', | ||
| 36 | + host: '0.0.0.0', | ||
| 37 | + port: 4418, | ||
| 38 | + https: false, | ||
| 39 | + hotOnly: false, | ||
| 40 | + compress: true, | ||
| 41 | + // 设置代理 | ||
| 42 | + proxy: { | ||
| 43 | + '/srv/': { | ||
| 44 | + // filter: ['/op/', '/fi/', '/de/', '/st/', '/fr/', '/pr/', '/pu/', '/dl/', '/b/', '/t/', '/rpt/', '/mm/', '/mp/'], | ||
| 45 | + target: 'https://oa.onwall.cn', | ||
| 46 | + changeOrigin: true, | ||
| 47 | + // pathRewrite: { | ||
| 48 | + // '^/api': '' | ||
| 49 | + // }, | ||
| 50 | + onProxyReq: function (proxyReq, req, res, options) { | ||
| 51 | + proxyReq.setHeader('X-Proxy-Host', req.header('host')); | ||
| 52 | + proxyReq.setHeader('X-Proxy-Request-URI', req.url); | ||
| 53 | + } | ||
| 54 | + } | ||
| 55 | + }, | ||
| 56 | + before: app => {}, | ||
| 57 | + overlay: { | ||
| 58 | + warnings: false, | ||
| 59 | + errors: true | ||
| 60 | + } | ||
| 61 | + }, | ||
| 36 | } | 62 | } | ... | ... |
| ... | @@ -2,6 +2,7 @@ | ... | @@ -2,6 +2,7 @@ |
| 2 | <div class="app" style="height: 100vh"> | 2 | <div class="app" style="height: 100vh"> |
| 3 | <vue-flow-editor | 3 | <vue-flow-editor |
| 4 | ref="editor" | 4 | ref="editor" |
| 5 | + modelWidth="30%" | ||
| 5 | :data="state.data" | 6 | :data="state.data" |
| 6 | :grid="showGrid" | 7 | :grid="showGrid" |
| 7 | :miniMap="showMiniMap" | 8 | :miniMap="showMiniMap" |
| ... | @@ -50,17 +51,49 @@ | ... | @@ -50,17 +51,49 @@ |
| 50 | v-if="!!state.detailModel" | 51 | v-if="!!state.detailModel" |
| 51 | ref="form" | 52 | ref="form" |
| 52 | :model="state.detailModel" | 53 | :model="state.detailModel" |
| 54 | + label-position="top" | ||
| 53 | label-width="100px" | 55 | label-width="100px" |
| 54 | > | 56 | > |
| 55 | <template v-if="state.detailModel.activity === undefined"> | 57 | <template v-if="state.detailModel.activity === undefined"> |
| 56 | - <el-form-item label="节点名称" prop="label"> | 58 | + <el-tabs v-model="state.activeName" class="" @tab-change="handleActiveChange" stretch> |
| 57 | - <el-input v-model="state.detailModel.label" /> | 59 | + <el-tab-pane label="节点属性" name="node" style="padding: 0 1rem"> |
| 58 | - </el-form-item> | 60 | + <el-form-item prop="label"> |
| 59 | - <el-form-item label="测试属性" prop="label"> | 61 | + <div slot="label">节点名称 <span style="color: red;">*</span></div> |
| 60 | - <el-input v-model="state.detailModel.data.test" /> | 62 | + <el-input v-model="state.detailModel.label" /> |
| 61 | - </el-form-item> | 63 | + </el-form-item> |
| 62 | - | 64 | + <el-form-item prop="attr"> |
| 63 | - <template v-if="state.detailModel.type !== 'edge'"> | 65 | + <el-radio-group v-model="state.attr_radio" size="large" class="attr-radio-group"> |
| 66 | + <el-radio-button label="基础属性"/> | ||
| 67 | + <el-radio-button label="更多属性" /> | ||
| 68 | + </el-radio-group> | ||
| 69 | + </el-form-item> | ||
| 70 | + <el-form-item v-if="state.attr_radio === '基础属性'" prop=""> | ||
| 71 | + <div slot="label">字段权限 <span style="color: red;">*</span></div> | ||
| 72 | + <el-row style="width: 100%; background-color: #f0f1f4; padding-left: 10px;"> | ||
| 73 | + <el-col :span="12">字段</el-col> | ||
| 74 | + <el-col :span="6">可见</el-col> | ||
| 75 | + <el-col :span="6">可编辑</el-col> | ||
| 76 | + </el-row> | ||
| 77 | + <el-row style="width: 100%; padding-left: 10px;"> | ||
| 78 | + <el-col :span="12" style="color: #409eff;">全选</el-col> | ||
| 79 | + <el-col :span="6" style="padding-left: 5px;"><el-checkbox @change="onAuthAllChange" v-model="state.auth_all_checked" label="" size="large" /></el-col> | ||
| 80 | + <el-col :span="6" style="padding-left: 5px;"><el-checkbox @change="onAuthAllEditChange" v-model="state.auth_all_edit" label="" size="large" /></el-col> | ||
| 81 | + </el-row> | ||
| 82 | + <el-row v-for="(field, index) in state.field_auths" :key="index" style="width: 100%; padding-left: 10px;"> | ||
| 83 | + <el-col :span="12" style="">{{ field.name }}</el-col> | ||
| 84 | + <el-col :span="6" style="padding-left: 5px;"><el-checkbox v-model="field.visible.checked" :disabled="field.visible.disabled" label="" size="large" /></el-col> | ||
| 85 | + <el-col :span="6" style="padding-left: 5px;"><el-checkbox v-model="field.editable.checked" :disabled="field.editable.disabled" label="" size="large" /></el-col> | ||
| 86 | + </el-row> | ||
| 87 | + </el-form-item> | ||
| 88 | + </el-tab-pane> | ||
| 89 | + <el-tab-pane label="流程属性" name="flow" style="padding: 0 1rem"> | ||
| 90 | + <el-form-item prop="label"> | ||
| 91 | + <div slot="label">测试属性 <span style="color: red;">*</span></div> | ||
| 92 | + <el-input v-model="state.detailModel.data.test" /> | ||
| 93 | + </el-form-item> | ||
| 94 | + </el-tab-pane> | ||
| 95 | + </el-tabs> | ||
| 96 | + <!-- <template v-if="state.detailModel.type !== 'edge'"> | ||
| 64 | <el-form-item label="节点背景色" prop="style.fill"> | 97 | <el-form-item label="节点背景色" prop="style.fill"> |
| 65 | <el-color-picker v-model="state.detailModel.style.fill" /> | 98 | <el-color-picker v-model="state.detailModel.style.fill" /> |
| 66 | </el-form-item> | 99 | </el-form-item> |
| ... | @@ -72,7 +105,10 @@ | ... | @@ -72,7 +105,10 @@ |
| 72 | v-model="state.detailModel.labelCfg.style.fill" | 105 | v-model="state.detailModel.labelCfg.style.fill" |
| 73 | /> | 106 | /> |
| 74 | </el-form-item> | 107 | </el-form-item> |
| 75 | - </template> | 108 | + </template> --> |
| 109 | + <div style="margin-left: 20px;"> | ||
| 110 | + <el-button type="primary" @click="state.dialogUserFormVisible = true"> 设置人员配置 </el-button> | ||
| 111 | + </div> | ||
| 76 | </template> | 112 | </template> |
| 77 | <template v-else> | 113 | <template v-else> |
| 78 | <el-form-item label="活动标题"> | 114 | <el-form-item label="活动标题"> |
| ... | @@ -109,13 +145,118 @@ | ... | @@ -109,13 +145,118 @@ |
| 109 | </template> | 145 | </template> |
| 110 | </vue-flow-editor> | 146 | </vue-flow-editor> |
| 111 | </div> | 147 | </div> |
| 148 | + | ||
| 149 | + <el-dialog v-model="state.dialogUserFormVisible" title="成员列表"> | ||
| 150 | + <div style="border: 1px dashed #DCDFE6; padding: 10px;"> | ||
| 151 | + <el-tag | ||
| 152 | + v-for="tag in state.tags" | ||
| 153 | + :key="tag.name" | ||
| 154 | + class="mx-1" | ||
| 155 | + style="margin-left: 0.25rem; margin-right: 0.25rem;" | ||
| 156 | + closable | ||
| 157 | + :type="tag.type" | ||
| 158 | + > | ||
| 159 | + {{ tag.name }} | ||
| 160 | + </el-tag> | ||
| 161 | + </div> | ||
| 162 | + <div style="border: 1px solid #DCDFE6; padding: 10px; margin-top: 10px;"> | ||
| 163 | + <div style="height: 40px"> | ||
| 164 | + <div style="padding: 0; position: relative; margin: 0 0 15px;"> | ||
| 165 | + <div v-if="!state.is_active_search"> | ||
| 166 | + <div class="flow-tabs__nav-wrap"> | ||
| 167 | + <div class="flow-tabs__nav-scroll"> | ||
| 168 | + <div class="flow-tabs__nav is-top"> | ||
| 169 | + <div ref_key="barRef" class="flow-tabs__active-bar" :style="{ width: state.tabTextWidth, transform: 'translateX' + '(' + state.tabOffset + ')' }"></div> | ||
| 170 | + <div | ||
| 171 | + v-for="(item, index) in state.userTabs" :key="index" | ||
| 172 | + :class="['flow-tabs__item', 'is-top', item.id === state.activeTabId ? 'is-active' : '']" | ||
| 173 | + :id="item.id" @click="handleTabClick(item, $event, index)"> | ||
| 174 | + {{ item.label }} | ||
| 175 | + </div> | ||
| 176 | + </div> | ||
| 177 | + </div> | ||
| 178 | + </div> | ||
| 179 | + <div class="flow-tab-search" @click="state.is_active_search = !state.is_active_search"> | ||
| 180 | + <el-icon :size="15"><Search /></el-icon> 搜索框 | ||
| 181 | + </div> | ||
| 182 | + </div> | ||
| 183 | + <div v-else> | ||
| 184 | + <el-input v-model="state.search_input" class="w-50 m-2" placeholder="请输入关键字"> | ||
| 185 | + <template #prefix> | ||
| 186 | + <el-icon class="el-input__icon"><search /></el-icon> | ||
| 187 | + </template> | ||
| 188 | + <template #append> | ||
| 189 | + <el-button @click="state.is_active_search = !state.is_active_search">取消</el-button> | ||
| 190 | + </template> | ||
| 191 | + </el-input> | ||
| 192 | + </div> | ||
| 193 | + </div> | ||
| 194 | + </div> | ||
| 195 | + <div v-if="!state.is_active_search"> | ||
| 196 | + <div v-if="state.userTabType === 'tree'"> | ||
| 197 | + <el-row> | ||
| 198 | + <el-col :span="8"> | ||
| 199 | + <el-tree :data="state.tree_data" :props="state.defaultProps" empty-text="暂无数据" @node-click="handleNodeClick" /> | ||
| 200 | + </el-col> | ||
| 201 | + <el-col :span="16"> | ||
| 202 | + <div style="border-left: 2px solid #e4e7ed; width: 2px; height: 100%; padding-left: 10px;"> | ||
| 203 | + <el-checkbox-group class="flow-checkbox-group" v-model="state.checkList"> | ||
| 204 | + <el-checkbox label="1">选项 A</el-checkbox> | ||
| 205 | + <el-checkbox label="2">选项 B</el-checkbox> | ||
| 206 | + <el-checkbox label="3">选项 C</el-checkbox> | ||
| 207 | + <el-checkbox label="4" disabled>禁用</el-checkbox> | ||
| 208 | + <el-checkbox label="5" disabled>选中和禁用</el-checkbox> | ||
| 209 | + </el-checkbox-group> | ||
| 210 | + </div> | ||
| 211 | + </el-col> | ||
| 212 | + </el-row> | ||
| 213 | + </div> | ||
| 214 | + <div v-if="state.userTabType === 'list'"> | ||
| 215 | + <el-tabs tab-position="left" style="" class="demo-tabs" v-model="activeTabContent" @tab-click="handleTabContentClick"> | ||
| 216 | + <el-tab-pane label="流程发起人"> | ||
| 217 | + <el-checkbox-group class="flow-checkbox-group" v-model="state.checkList"> | ||
| 218 | + <el-checkbox label="1">选项 A</el-checkbox> | ||
| 219 | + <el-checkbox label="2">选项 B</el-checkbox> | ||
| 220 | + <el-checkbox label="3">选项 C</el-checkbox> | ||
| 221 | + <el-checkbox label="4" disabled>禁用</el-checkbox> | ||
| 222 | + <el-checkbox label="5" disabled>选中和禁用</el-checkbox> | ||
| 223 | + </el-checkbox-group> | ||
| 224 | + </el-tab-pane> | ||
| 225 | + <el-tab-pane label="成员字段">成员字段</el-tab-pane> | ||
| 226 | + <el-tab-pane label="部门字段">部门字段</el-tab-pane> | ||
| 227 | + <el-tab-pane label="主管">主管</el-tab-pane> | ||
| 228 | + </el-tabs> | ||
| 229 | + </div> | ||
| 230 | + </div> | ||
| 231 | + <div v-else> | ||
| 232 | + <el-checkbox-group class="flow-checkbox-group" style="padding-left: 10px;" v-model="state.checkList"> | ||
| 233 | + <el-checkbox label="1">选项 A</el-checkbox> | ||
| 234 | + <el-checkbox label="2">选项 B</el-checkbox> | ||
| 235 | + <el-checkbox label="3">选项 C</el-checkbox> | ||
| 236 | + <el-checkbox label="4" disabled>禁用</el-checkbox> | ||
| 237 | + <el-checkbox label="5" disabled>选中和禁用</el-checkbox> | ||
| 238 | + </el-checkbox-group> | ||
| 239 | + </div> | ||
| 240 | + </div> | ||
| 241 | + <template #footer> | ||
| 242 | + <span class="dialog-footer"> | ||
| 243 | + <el-button @click="state.dialogUserFormVisible = false">取消</el-button> | ||
| 244 | + <el-button type="primary" @click="state.dialogUserFormVisible = false"> | ||
| 245 | + 确定 | ||
| 246 | + </el-button> | ||
| 247 | + </span> | ||
| 248 | + </template> | ||
| 249 | + </el-dialog> | ||
| 112 | </template> | 250 | </template> |
| 113 | 251 | ||
| 114 | <script lang="ts"> | 252 | <script lang="ts"> |
| 115 | -import { reactive, onMounted } from "vue"; | 253 | +import { reactive, onMounted, watch, nextTick } from "vue"; |
| 116 | import { AppData } from "./data.js"; | 254 | import { AppData } from "./data.js"; |
| 117 | import { staticPath } from "./utils"; | 255 | import { staticPath } from "./utils"; |
| 118 | import { ElNotification } from 'element-plus' | 256 | import { ElNotification } from 'element-plus' |
| 257 | +import axios from './axios'; | ||
| 258 | +import $ from 'jquery' | ||
| 259 | +import { Calendar, Search } from '@element-plus/icons-vue' | ||
| 119 | 260 | ||
| 120 | const G6 = (window as any).G6.default as any; | 261 | const G6 = (window as any).G6.default as any; |
| 121 | 262 | ||
| ... | @@ -177,33 +318,181 @@ export default { | ... | @@ -177,33 +318,181 @@ export default { |
| 177 | img: 'https://cdn.ipadbiz.cn/oa/crowd-node.svg', | 318 | img: 'https://cdn.ipadbiz.cn/oa/crowd-node.svg', |
| 178 | }, | 319 | }, |
| 179 | }, | 320 | }, |
| 321 | + dialogUserFormVisible: true, | ||
| 322 | + activeName: "node", | ||
| 323 | + attr_radio: "基础属性", | ||
| 324 | + auth_all_checked: false, | ||
| 325 | + auth_all_edit: false, | ||
| 326 | + field_auths: [{ | ||
| 327 | + name: "字段1", | ||
| 328 | + visible: { | ||
| 329 | + checked: true, | ||
| 330 | + disabled: false, | ||
| 331 | + }, | ||
| 332 | + editable: { | ||
| 333 | + checked: false, | ||
| 334 | + disabled: true, | ||
| 335 | + } | ||
| 336 | + }, { | ||
| 337 | + name: "字段2", | ||
| 338 | + visible: { | ||
| 339 | + checked: true, | ||
| 340 | + disabled: false, | ||
| 341 | + }, | ||
| 342 | + editable: { | ||
| 343 | + checked: false, | ||
| 344 | + disabled: false, | ||
| 345 | + } | ||
| 346 | + }, { | ||
| 347 | + name: "字段3", | ||
| 348 | + visible: { | ||
| 349 | + checked: true, | ||
| 350 | + disabled: false, | ||
| 351 | + }, | ||
| 352 | + editable: { | ||
| 353 | + checked: false, | ||
| 354 | + disabled: false, | ||
| 355 | + } | ||
| 356 | + }], | ||
| 357 | + tags: [ | ||
| 358 | + { name: '成员1', id: '1' }, | ||
| 359 | + { name: '成员2', id: '2' }, | ||
| 360 | + { name: '成员3', id: '3' }, | ||
| 361 | + { name: '成员4', id: '4' }, | ||
| 362 | + ], | ||
| 363 | + activeTabId: 'tab-1', // TODO: 需要获取默认第一个ID | ||
| 364 | + userTabs: [ | ||
| 365 | + { id: 'tab-1', label: '组织架构', type: 'tree' }, | ||
| 366 | + { id: 'tab-2', label: '角色', type: 'list' }, | ||
| 367 | + // { id: 'tab-3', label: '成员' }, | ||
| 368 | + // { id: 'tab-4', label: '动态负责人' }, | ||
| 369 | + // { id: 'tab-5', label: '组织架构' }, | ||
| 370 | + // { id: 'tab-6', label: '角色' }, | ||
| 371 | + // { id: 'tab-7', label: '成员' }, | ||
| 372 | + // { id: 'tab-8', label: '动态负责人' }, | ||
| 373 | + // { id: 'tab-9', label: '角色' }, | ||
| 374 | + // { id: 'tab-10', label: '成员' }, | ||
| 375 | + // { id: 'tab-11', label: '动态负责人' }, | ||
| 376 | + ], | ||
| 377 | + userTabType: 'tree', | ||
| 378 | + tabOffset: '0px', | ||
| 379 | + tabTextWidth: '76px', // 文字宽度需要打开弹框时重新计算 | ||
| 380 | + is_active_search: false, | ||
| 381 | + search_input: '', | ||
| 382 | + checkList: ['1' , '5'], | ||
| 383 | + tree_data: [ | ||
| 384 | + { | ||
| 385 | + label: '上级部门 1', | ||
| 386 | + children: [ | ||
| 387 | + { | ||
| 388 | + label: '部门名称 1-1', | ||
| 389 | + children: [], | ||
| 390 | + }, | ||
| 391 | + ], | ||
| 392 | + }, | ||
| 393 | + { | ||
| 394 | + label: '上级部门 2', | ||
| 395 | + children: [ | ||
| 396 | + { | ||
| 397 | + label: '部门名称 2-1', | ||
| 398 | + children: [], | ||
| 399 | + }, | ||
| 400 | + ], | ||
| 401 | + }, | ||
| 402 | + ], | ||
| 403 | + defaultProps: { | ||
| 404 | + children: 'children', | ||
| 405 | + label: 'label', | ||
| 406 | + } | ||
| 180 | }); | 407 | }); |
| 181 | 408 | ||
| 409 | + function handleActiveChange(name) { | ||
| 410 | + console.warn(name) | ||
| 411 | + } | ||
| 412 | + | ||
| 413 | + const onAuthAllChange = (val) => { // 全选可见按钮回调 | ||
| 414 | + if (val) { | ||
| 415 | + // 全部选中 | ||
| 416 | + state.field_auths.forEach(ele => { | ||
| 417 | + ele.visible.checked = true; | ||
| 418 | + }); | ||
| 419 | + } else { | ||
| 420 | + // 全部取消选中 | ||
| 421 | + state.field_auths.forEach(ele => { | ||
| 422 | + ele.visible.checked = false; | ||
| 423 | + }); | ||
| 424 | + } | ||
| 425 | + } | ||
| 426 | + const onAuthAllEditChange = (val) => { // 全选可编辑按钮回调 | ||
| 427 | + console.warn(val); | ||
| 428 | + } | ||
| 429 | + | ||
| 430 | + const handleTabClick = (tab, event, idx) => { // 点击Tab切换回调 | ||
| 431 | + console.log(tab, event); | ||
| 432 | + // 设置当前激活的tab | ||
| 433 | + state.userTabType = tab.type; | ||
| 434 | + state.activeTabId = tab.id; | ||
| 435 | + // 子容器相对于父容器的相对x轴位移, 第一项为0 | ||
| 436 | + if (idx) { | ||
| 437 | + state.tabOffset = $('#'+tab.id).position().left + 20 + 'px'; | ||
| 438 | + } else { | ||
| 439 | + state.tabOffset = '0px' | ||
| 440 | + } | ||
| 441 | + // 文字宽度 | ||
| 442 | + state.tabTextWidth = $('#'+tab.id).width() + 'px'; | ||
| 443 | + } | ||
| 444 | + | ||
| 445 | + const handleTabContentClick = (tab, event) => { | ||
| 446 | + console.log(tab); | ||
| 447 | + console.log(event); | ||
| 448 | + } | ||
| 449 | + | ||
| 450 | + const handleNodeClick = (data) => { | ||
| 451 | + console.log(data) | ||
| 452 | + } | ||
| 453 | + | ||
| 182 | onMounted(() => { | 454 | onMounted(() => { |
| 183 | - // 显示提示框的标志位 | 455 | + // // 显示提示框的标志位 |
| 184 | - var showConfirmation = true; | 456 | + // var showConfirmation = true; |
| 185 | - | 457 | + |
| 186 | - // 监听 beforeunload 事件 | 458 | + // // 监听 beforeunload 事件 |
| 187 | - window.addEventListener('beforeunload', function (event) { | 459 | + // window.addEventListener('beforeunload', function (event) { |
| 188 | - if (showConfirmation) { | 460 | + // if (showConfirmation) { |
| 189 | - // 取消事件的默认行为(弹出确认对话框) | 461 | + // // 取消事件的默认行为(弹出确认对话框) |
| 190 | - event.preventDefault(); | 462 | + // event.preventDefault(); |
| 191 | - // Chrome 和 Firefox 需要返回一个值以显示确认对话框 | 463 | + // // Chrome 和 Firefox 需要返回一个值以显示确认对话框 |
| 192 | - event.returnValue = ''; | 464 | + // event.returnValue = ''; |
| 193 | - | 465 | + |
| 194 | - // 显示自定义的提示信息 | 466 | + // // 显示自定义的提示信息 |
| 195 | - var confirmationMessage = '确定要离开此页面吗?'; | 467 | + // var confirmationMessage = '确定要离开此页面吗?'; |
| 196 | - (event || window.event).returnValue = confirmationMessage; // 兼容旧版浏览器 | 468 | + // (event || window.event).returnValue = confirmationMessage; // 兼容旧版浏览器 |
| 197 | - | 469 | + |
| 198 | - return confirmationMessage; | 470 | + // return confirmationMessage; |
| 199 | - } | 471 | + // } |
| 200 | - }); | 472 | + // }); |
| 473 | + | ||
| 474 | + // // 监听 unload 事件 | ||
| 475 | + // window.addEventListener('unload', function () { | ||
| 476 | + // // 设置标志位为 false,避免在刷新页面时再次显示提示框 | ||
| 477 | + // showConfirmation = false; | ||
| 478 | + // }); | ||
| 479 | + | ||
| 480 | + // axios.get('/srv/?a=query_form_all_field') | ||
| 481 | + // .then(res => { | ||
| 482 | + // console.warn(res.data); | ||
| 483 | + | ||
| 484 | + // }); | ||
| 485 | + | ||
| 486 | + // $('.el-tabs__nav') | ||
| 487 | + | ||
| 488 | + }); | ||
| 201 | 489 | ||
| 202 | - // 监听 unload 事件 | 490 | + watch(() => state.dialogUserFormVisible, (val) => { |
| 203 | - window.addEventListener('unload', function () { | 491 | + if (val) { |
| 204 | - // 设置标志位为 false,避免在刷新页面时再次显示提示框 | 492 | + nextTick(() => { |
| 205 | - showConfirmation = false; | 493 | + state.tabTextWidth = $('#'+ state.activeTabId).width() + 'px'; |
| 206 | - }); | 494 | + }) |
| 495 | + } | ||
| 207 | }); | 496 | }); |
| 208 | 497 | ||
| 209 | let editor; | 498 | let editor; |
| ... | @@ -331,6 +620,12 @@ export default { | ... | @@ -331,6 +620,12 @@ export default { |
| 331 | handleAfterDelete, | 620 | handleAfterDelete, |
| 332 | handleBeforeAdd, | 621 | handleBeforeAdd, |
| 333 | handleAfterAdd, | 622 | handleAfterAdd, |
| 623 | + handleActiveChange, | ||
| 624 | + onAuthAllChange, | ||
| 625 | + onAuthAllEditChange, | ||
| 626 | + handleTabClick, | ||
| 627 | + handleTabContentClick, | ||
| 628 | + handleNodeClick, | ||
| 334 | 629 | ||
| 335 | logData, | 630 | logData, |
| 336 | 631 | ||
| ... | @@ -358,4 +653,82 @@ body { | ... | @@ -358,4 +653,82 @@ body { |
| 358 | } | 653 | } |
| 359 | } | 654 | } |
| 360 | } | 655 | } |
| 656 | + | ||
| 657 | +.attr-radio-group { | ||
| 658 | + width: 100% !important; | ||
| 659 | + .el-radio-button.el-radio-button--large { | ||
| 660 | + width: 50% !important; | ||
| 661 | + span { | ||
| 662 | + width: 100% !important; | ||
| 663 | + } | ||
| 664 | + } | ||
| 665 | +} | ||
| 666 | + | ||
| 667 | +.demo-tabs > .el-tabs__content { | ||
| 668 | + /* padding: 32px; */ | ||
| 669 | +} | ||
| 670 | + | ||
| 671 | +.flow-tabs__nav-wrap { | ||
| 672 | + overflow: hidden; | ||
| 673 | + margin-bottom: -1px; | ||
| 674 | + position: relative; | ||
| 675 | +} | ||
| 676 | +.flow-tabs__nav-wrap::after { | ||
| 677 | + content: ""; | ||
| 678 | + position: absolute; | ||
| 679 | + left: 0; | ||
| 680 | + bottom: 0; | ||
| 681 | + width: 100%; | ||
| 682 | + height: 2px; | ||
| 683 | + background-color: #e4e7ed; | ||
| 684 | + /* z-index: 1; */ | ||
| 685 | +} | ||
| 686 | + | ||
| 687 | +.flow-tabs__nav-scroll { | ||
| 688 | + /* overflow: hidden; */ | ||
| 689 | + overflow: scroll; | ||
| 690 | +} | ||
| 691 | + | ||
| 692 | +.flow-tabs__active-bar { | ||
| 693 | + position: absolute; bottom: 0; left: 0; height: 2px; background-color: #409eff; z-index: 1; transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); list-style: none; | ||
| 694 | +} | ||
| 695 | + | ||
| 696 | +.flow-tabs__nav { | ||
| 697 | + display: flex; white-space: nowrap; position: relative; transition: transformX(0px); float: left; | ||
| 698 | + .flow-tabs__item { | ||
| 699 | + padding: 0 20px; height: 40px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; list-style: none; font-size: 14px; font-weight: 500; color: #303133; position: relative; | ||
| 700 | + &:hover { | ||
| 701 | + color: #409EFF; | ||
| 702 | + cursor: pointer; | ||
| 703 | + } | ||
| 704 | + &.is-active { | ||
| 705 | + color: #409EFF; | ||
| 706 | + } | ||
| 707 | + &.is-top:nth-child(2) { | ||
| 708 | + padding-left: 0; | ||
| 709 | + } | ||
| 710 | + } | ||
| 711 | +} | ||
| 712 | + | ||
| 713 | +.flow-tab-search { | ||
| 714 | + position: absolute; | ||
| 715 | + top: 0; | ||
| 716 | + right: 0; width: 100px; | ||
| 717 | + display: flex; | ||
| 718 | + align-items: center; | ||
| 719 | + background-color: #e4e7ed; | ||
| 720 | + padding: 5px 5px 5px 15px; | ||
| 721 | + border-radius: 15px; | ||
| 722 | + color: #b1b3b8; | ||
| 723 | + &:hover { | ||
| 724 | + cursor: pointer; | ||
| 725 | + } | ||
| 726 | +} | ||
| 727 | + | ||
| 728 | +.flow-checkbox-group { | ||
| 729 | + .el-checkbox { | ||
| 730 | + display: flex !important; | ||
| 731 | + } | ||
| 732 | +} | ||
| 733 | + | ||
| 361 | </style> | 734 | </style> | ... | ... |
doc/axios.js
0 → 100644
| 1 | +/* | ||
| 2 | + * @Date: 2023-10-27 11:12:24 | ||
| 3 | + * @LastEditors: hookehuyr hookehuyr@gmail.com | ||
| 4 | + * @LastEditTime: 2023-10-27 11:13:00 | ||
| 5 | + * @FilePath: /vue-flow-editor/doc/axios.js | ||
| 6 | + * @Description: 文件描述 | ||
| 7 | + */ | ||
| 8 | +import axios from 'axios'; | ||
| 9 | + | ||
| 10 | +axios.defaults.params = { | ||
| 11 | + f: 'custom_form', | ||
| 12 | +}; | ||
| 13 | + | ||
| 14 | +/** | ||
| 15 | + * @description 请求拦截器 | ||
| 16 | + */ | ||
| 17 | +axios.interceptors.request.use( | ||
| 18 | + config => { | ||
| 19 | + // const url_params = parseQueryString(location.href); | ||
| 20 | + // GET请求默认打上时间戳,避免从缓存中拿数据。 | ||
| 21 | + const timestamp = config.method === 'get' ? (new Date()).valueOf() : ''; | ||
| 22 | + /** | ||
| 23 | + * POST PHP需要修改数据格式 | ||
| 24 | + * 序列化POST请求时需要屏蔽上传相关接口,上传相关接口序列化后报错 | ||
| 25 | + */ | ||
| 26 | + // 绑定默认请求头 | ||
| 27 | + config.params = { ...config.params, timestamp } | ||
| 28 | + return config; | ||
| 29 | + }, | ||
| 30 | + error => { | ||
| 31 | + // 请求错误处理 | ||
| 32 | + return Promise.reject(error); | ||
| 33 | + }); | ||
| 34 | + | ||
| 35 | +/** | ||
| 36 | + * @description 响应拦截器 | ||
| 37 | + */ | ||
| 38 | +axios.interceptors.response.use( | ||
| 39 | + response => { | ||
| 40 | + return response; | ||
| 41 | + }, | ||
| 42 | + error => { | ||
| 43 | + return Promise.reject(error); | ||
| 44 | + }); | ||
| 45 | + | ||
| 46 | +export default axios; |
| 1 | /* | 1 | /* |
| 2 | * @Date: 2021-08-18 12:47:05 | 2 | * @Date: 2021-08-18 12:47:05 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2023-10-26 10:01:48 | 4 | + * @LastEditTime: 2023-10-30 14:36:13 |
| 5 | - * @FilePath: /vue-flow-editor-for-vue3.0-master/doc/main.ts | 5 | + * @FilePath: /vue-flow-editor/doc/main.ts |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| 8 | import { createApp ,h } from 'vue'; | 8 | import { createApp ,h } from 'vue'; |
| ... | @@ -12,15 +12,19 @@ import App from './App.vue' | ... | @@ -12,15 +12,19 @@ import App from './App.vue' |
| 12 | import VueFlowEditor from '../src/index' | 12 | import VueFlowEditor from '../src/index' |
| 13 | import element from 'element-plus' | 13 | import element from 'element-plus' |
| 14 | import 'element-plus/dist/index.css' | 14 | import 'element-plus/dist/index.css' |
| 15 | +import * as ElementPlusIconsVue from '@element-plus/icons-vue' | ||
| 15 | 16 | ||
| 16 | -const Vue = createApp({ | 17 | +const app = createApp(App); |
| 17 | - render: ()=>h(App) | 18 | +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
| 18 | -}); | 19 | + app.component(key, component) |
| 20 | +} | ||
| 19 | 21 | ||
| 20 | -Vue.use(VueFlowEditor) | 22 | +// 屏蔽警告信息 |
| 23 | +app.config.warnHandler = () => null; | ||
| 24 | + | ||
| 25 | +app.use(VueFlowEditor).use(element) | ||
| 21 | // @ts-ignore | 26 | // @ts-ignore |
| 22 | //Vue.use(window.ELEMENT) | 27 | //Vue.use(window.ELEMENT) |
| 23 | //Vue.config.productionTip = false | 28 | //Vue.config.productionTip = false |
| 24 | -Vue.use(element) | ||
| 25 | 29 | ||
| 26 | -Vue.mount("#app") | 30 | +app.mount("#app") | ... | ... |
| ... | @@ -22,9 +22,12 @@ | ... | @@ -22,9 +22,12 @@ |
| 22 | "编辑器" | 22 | "编辑器" |
| 23 | ], | 23 | ], |
| 24 | "dependencies": { | 24 | "dependencies": { |
| 25 | + "@element-plus/icons-vue": "^2.1.0", | ||
| 25 | "@vue/composition-api": "^1.7.2", | 26 | "@vue/composition-api": "^1.7.2", |
| 27 | + "axios": "^1.6.0", | ||
| 26 | "echarts": "^5.1.2", | 28 | "echarts": "^5.1.2", |
| 27 | "element-plus": "^2.4.1", | 29 | "element-plus": "^2.4.1", |
| 30 | + "jquery": "^3.7.1", | ||
| 28 | "sass": "^1.69.4", | 31 | "sass": "^1.69.4", |
| 29 | "sass-loader": "10.1.1", | 32 | "sass-loader": "10.1.1", |
| 30 | "vue": "^3.0.0", | 33 | "vue": "^3.0.0", | ... | ... |
| ... | @@ -958,7 +958,7 @@ | ... | @@ -958,7 +958,7 @@ |
| 958 | resolved "https://mirrors.cloud.tencent.com/npm/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31" | 958 | resolved "https://mirrors.cloud.tencent.com/npm/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31" |
| 959 | integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA== | 959 | integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA== |
| 960 | 960 | ||
| 961 | -"@element-plus/icons-vue@^2.0.6": | 961 | +"@element-plus/icons-vue@^2.0.6", "@element-plus/icons-vue@^2.1.0": |
| 962 | version "2.1.0" | 962 | version "2.1.0" |
| 963 | resolved "https://mirrors.cloud.tencent.com/npm/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz#7ad90d08a8c0d5fd3af31c4f73264ca89614397a" | 963 | resolved "https://mirrors.cloud.tencent.com/npm/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz#7ad90d08a8c0d5fd3af31c4f73264ca89614397a" |
| 964 | integrity sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA== | 964 | integrity sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA== |
| ... | @@ -2236,6 +2236,15 @@ aws4@^1.8.0: | ... | @@ -2236,6 +2236,15 @@ aws4@^1.8.0: |
| 2236 | resolved "https://registry.nlark.com/aws4/download/aws4-1.11.0.tgz" | 2236 | resolved "https://registry.nlark.com/aws4/download/aws4-1.11.0.tgz" |
| 2237 | integrity sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk= | 2237 | integrity sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk= |
| 2238 | 2238 | ||
| 2239 | +axios@^1.6.0: | ||
| 2240 | + version "1.6.0" | ||
| 2241 | + resolved "https://mirrors.cloud.tencent.com/npm/axios/-/axios-1.6.0.tgz#f1e5292f26b2fd5c2e66876adc5b06cdbd7d2102" | ||
| 2242 | + integrity sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg== | ||
| 2243 | + dependencies: | ||
| 2244 | + follow-redirects "^1.15.0" | ||
| 2245 | + form-data "^4.0.0" | ||
| 2246 | + proxy-from-env "^1.1.0" | ||
| 2247 | + | ||
| 2239 | babel-code-frame@^6.22.0: | 2248 | babel-code-frame@^6.22.0: |
| 2240 | version "6.26.0" | 2249 | version "6.26.0" |
| 2241 | resolved "https://registry.nlark.com/babel-code-frame/download/babel-code-frame-6.26.0.tgz?cache=0&sync_timestamp=1618847032171&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fbabel-code-frame%2Fdownload%2Fbabel-code-frame-6.26.0.tgz" | 2250 | resolved "https://registry.nlark.com/babel-code-frame/download/babel-code-frame-6.26.0.tgz?cache=0&sync_timestamp=1618847032171&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fbabel-code-frame%2Fdownload%2Fbabel-code-frame-6.26.0.tgz" |
| ... | @@ -2940,7 +2949,7 @@ colorette@^1.2.1, colorette@^1.2.2: | ... | @@ -2940,7 +2949,7 @@ colorette@^1.2.1, colorette@^1.2.2: |
| 2940 | resolved "https://registry.nlark.com/colorette/download/colorette-1.3.0.tgz" | 2949 | resolved "https://registry.nlark.com/colorette/download/colorette-1.3.0.tgz" |
| 2941 | integrity sha1-/0XS8O2yRAadO3cq3rBP7TjQoK8= | 2950 | integrity sha1-/0XS8O2yRAadO3cq3rBP7TjQoK8= |
| 2942 | 2951 | ||
| 2943 | -combined-stream@^1.0.6, combined-stream@~1.0.6: | 2952 | +combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6: |
| 2944 | version "1.0.8" | 2953 | version "1.0.8" |
| 2945 | resolved "https://registry.nlark.com/combined-stream/download/combined-stream-1.0.8.tgz" | 2954 | resolved "https://registry.nlark.com/combined-stream/download/combined-stream-1.0.8.tgz" |
| 2946 | integrity sha1-w9RaizT9cwYxoRCoolIGgrMdWn8= | 2955 | integrity sha1-w9RaizT9cwYxoRCoolIGgrMdWn8= |
| ... | @@ -4280,6 +4289,11 @@ follow-redirects@^1.0.0: | ... | @@ -4280,6 +4289,11 @@ follow-redirects@^1.0.0: |
| 4280 | resolved "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz" | 4289 | resolved "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz" |
| 4281 | integrity sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M= | 4290 | integrity sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M= |
| 4282 | 4291 | ||
| 4292 | +follow-redirects@^1.15.0: | ||
| 4293 | + version "1.15.3" | ||
| 4294 | + resolved "https://mirrors.cloud.tencent.com/npm/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a" | ||
| 4295 | + integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q== | ||
| 4296 | + | ||
| 4283 | for-in@^1.0.2: | 4297 | for-in@^1.0.2: |
| 4284 | version "1.0.2" | 4298 | version "1.0.2" |
| 4285 | resolved "https://registry.nlark.com/for-in/download/for-in-1.0.2.tgz" | 4299 | resolved "https://registry.nlark.com/for-in/download/for-in-1.0.2.tgz" |
| ... | @@ -4321,6 +4335,15 @@ fork-ts-checker-webpack-plugin@^3.1.1: | ... | @@ -4321,6 +4335,15 @@ fork-ts-checker-webpack-plugin@^3.1.1: |
| 4321 | tapable "^1.0.0" | 4335 | tapable "^1.0.0" |
| 4322 | worker-rpc "^0.1.0" | 4336 | worker-rpc "^0.1.0" |
| 4323 | 4337 | ||
| 4338 | +form-data@^4.0.0: | ||
| 4339 | + version "4.0.0" | ||
| 4340 | + resolved "https://mirrors.cloud.tencent.com/npm/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" | ||
| 4341 | + integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== | ||
| 4342 | + dependencies: | ||
| 4343 | + asynckit "^0.4.0" | ||
| 4344 | + combined-stream "^1.0.8" | ||
| 4345 | + mime-types "^2.1.12" | ||
| 4346 | + | ||
| 4324 | form-data@~2.3.2: | 4347 | form-data@~2.3.2: |
| 4325 | version "2.3.3" | 4348 | version "2.3.3" |
| 4326 | resolved "https://registry.nlark.com/form-data/download/form-data-2.3.3.tgz" | 4349 | resolved "https://registry.nlark.com/form-data/download/form-data-2.3.3.tgz" |
| ... | @@ -5389,6 +5412,11 @@ jest-worker@^27.0.2: | ... | @@ -5389,6 +5412,11 @@ jest-worker@^27.0.2: |
| 5389 | merge-stream "^2.0.0" | 5412 | merge-stream "^2.0.0" |
| 5390 | supports-color "^8.0.0" | 5413 | supports-color "^8.0.0" |
| 5391 | 5414 | ||
| 5415 | +jquery@^3.7.1: | ||
| 5416 | + version "3.7.1" | ||
| 5417 | + resolved "https://mirrors.cloud.tencent.com/npm/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de" | ||
| 5418 | + integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg== | ||
| 5419 | + | ||
| 5392 | js-message@1.0.7: | 5420 | js-message@1.0.7: |
| 5393 | version "1.0.7" | 5421 | version "1.0.7" |
| 5394 | resolved "https://registry.nlark.com/js-message/download/js-message-1.0.7.tgz" | 5422 | resolved "https://registry.nlark.com/js-message/download/js-message-1.0.7.tgz" |
| ... | @@ -7075,6 +7103,11 @@ proxy-addr@~2.0.5: | ... | @@ -7075,6 +7103,11 @@ proxy-addr@~2.0.5: |
| 7075 | forwarded "0.2.0" | 7103 | forwarded "0.2.0" |
| 7076 | ipaddr.js "1.9.1" | 7104 | ipaddr.js "1.9.1" |
| 7077 | 7105 | ||
| 7106 | +proxy-from-env@^1.1.0: | ||
| 7107 | + version "1.1.0" | ||
| 7108 | + resolved "https://mirrors.cloud.tencent.com/npm/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" | ||
| 7109 | + integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== | ||
| 7110 | + | ||
| 7078 | prr@~1.0.1: | 7111 | prr@~1.0.1: |
| 7079 | version "1.0.1" | 7112 | version "1.0.1" |
| 7080 | resolved "https://registry.nlark.com/prr/download/prr-1.0.1.tgz" | 7113 | resolved "https://registry.nlark.com/prr/download/prr-1.0.1.tgz" | ... | ... |
-
Please register or login to post a comment