├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── App.vue ├── assets ├── logo.png └── store.js ├── components ├── detailTable.vue └── flow.vue ├── main.js ├── mock ├── api │ └── flow │ │ └── detail.js └── index.js └── store └── global_store.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # flowrelateshow 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 浏览器访问:http://localhost:8081?workflowid=123 23 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flowrelateshow", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.18.0", 12 | "d3": "^5.7.0", 13 | "element-ui": "^2.4.6", 14 | "url-search-params-polyfill": "^5.0.0", 15 | "vue": "^2.5.17", 16 | "vue-axios": "^2.1.3", 17 | "vuex": "^3.0.1" 18 | }, 19 | "devDependencies": { 20 | "@vue/cli-plugin-babel": "^3.0.0", 21 | "@vue/cli-plugin-eslint": "^3.0.0", 22 | "@vue/cli-service": "^3.0.0", 23 | "mockjs": "^1.0.1-beta3", 24 | "vue-template-compiler": "^2.5.17" 25 | }, 26 | "eslintConfig": { 27 | "root": true, 28 | "env": { 29 | "node": true 30 | }, 31 | "extends": [ 32 | "plugin:vue/essential", 33 | "eslint:recommended" 34 | ], 35 | "rules": {}, 36 | "parserOptions": { 37 | "parser": "babel-eslint" 38 | } 39 | }, 40 | "postcss": { 41 | "plugins": { 42 | "autoprefixer": {} 43 | } 44 | }, 45 | "browserslist": [ 46 | "> 1%", 47 | "last 2 versions", 48 | "not ie <= 8" 49 | ] 50 | } 51 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreamof2080/vuejs-flow/6b39590385b9bee9818ba1e10e7c5c4b63d5f955/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | flowrelateshow 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 56 | 57 | 62 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreamof2080/vuejs-flow/6b39590385b9bee9818ba1e10e7c5c4b63d5f955/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | Vue.use(Vuex); 4 | 5 | 6 | import global_store from '../store/global_store'; 7 | 8 | export default new Vuex.Store({ 9 | modules:{ 10 | globalStore:global_store, 11 | } 12 | } 13 | ) 14 | -------------------------------------------------------------------------------- /src/components/detailTable.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 88 | 89 | 90 | 107 | -------------------------------------------------------------------------------- /src/components/flow.vue: -------------------------------------------------------------------------------- 1 | 146 | 147 | 557 | 558 | 559 | 835 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import ElementUI from 'element-ui' 4 | import 'element-ui/lib/theme-chalk/index.css' 5 | import axios from 'axios' 6 | import VueAxios from 'vue-axios' 7 | import * as d3 from 'd3' 8 | import store from './assets/store' 9 | import '@/mock' 10 | import 'url-search-params-polyfill'; 11 | 12 | Vue.config.productionTip = false; 13 | Vue.use(ElementUI); 14 | Vue.use(VueAxios,axios); 15 | 16 | 17 | Object.defineProperty(Vue.prototype, '$d3', {value: d3}); 18 | 19 | new Vue({ 20 | store, 21 | render: h => h(App) 22 | }).$mount('#app'); 23 | -------------------------------------------------------------------------------- /src/mock/api/flow/detail.js: -------------------------------------------------------------------------------- 1 | import Mock from 'mockjs' 2 | 3 | Mock.mock('/api/flow/detail', () => { 4 | return Mock.mock( 5 | [ 6 | { 7 | workflowid: 1, 8 | name: "采购申请采购申请采购申请", 9 | parent: "", 10 | type: 0, 11 | requestinfo: ['1'], 12 | analysisData: { 13 | begin: "2018-01-01 01:01:01", 14 | end: "2018-01-02 01:01:01", 15 | hours: 24, 16 | userTotal: 4, 17 | orgTotal: 2, 18 | reqDetails: [ 19 | { 20 | requestid: "1", 21 | flowNo: "P20180101001", 22 | title: "采购申请-刘", 23 | reqDate: "2018-01-01 01:01:01", 24 | endDate: "2018-01-02 01:01:01", 25 | reqMan: "刘某某", 26 | node: "部门经理审批", 27 | nodeids: "1", 28 | hours: 24, 29 | userTotal: 4, 30 | orgTotal: 2, 31 | } 32 | ], 33 | } 34 | }, 35 | { 36 | workflowid: 2, 37 | name: "采购评审", 38 | parent: "1", 39 | type: 0, 40 | requestinfo: ['2'], 41 | analysisData: { 42 | begin: "2018-02-01 01:01:01", 43 | end: "2018-02-02 01:01:01", 44 | hours: 24, 45 | userTotal: 4, 46 | orgTotal: 2, 47 | reqDetails: [ 48 | { 49 | requestid: "2", 50 | flowNo: "P20180201001", 51 | title: "采购评审-刘", 52 | reqDate: "2018-02-01 01:01:01", 53 | endDate: "2018-02-02 01:01:01", 54 | reqMan: "刘某某", 55 | node: "部门经理审批", 56 | nodeids: "1", 57 | hours: 24, 58 | userTotal: 4, 59 | orgTotal: 2, 60 | } 61 | ], 62 | } 63 | }, 64 | { 65 | workflowid: 21, 66 | name: "采购到货", 67 | parent: "1", 68 | type: 0, 69 | requestinfo: ['2'], 70 | analysisData: { 71 | begin: "2018-02-01 01:01:01", 72 | end: "2018-02-02 01:01:01", 73 | hours: 24, 74 | userTotal: 4, 75 | orgTotal: 2, 76 | reqDetails: [ 77 | { 78 | requestid: "2", 79 | flowNo: "P20180201001", 80 | title: "采购评审-刘", 81 | reqDate: "2018-02-01 01:01:01", 82 | endDate: "2018-02-02 01:01:01", 83 | reqMan: "刘某某", 84 | node: "部门经理审批", 85 | nodeids: "1", 86 | hours: 24, 87 | userTotal: 4, 88 | orgTotal: 2, 89 | } 90 | ], 91 | } 92 | }, 93 | { 94 | workflowid: 3, 95 | name: "银行预付款申请", 96 | parent: "2", 97 | type: 0, 98 | requestinfo: ['3'], 99 | analysisData: { 100 | begin: "2018-03-01 01:01:01", 101 | end: "2018-03-02 01:01:01", 102 | hours: 24, 103 | userTotal: 4, 104 | orgTotal: 2, 105 | reqDetails: [ 106 | { 107 | requestid: "3", 108 | flowNo: "P20180301001", 109 | title: "银行预付款申请-刘", 110 | reqDate: "2018-03-01 01:01:01", 111 | endDate: "2018-03-02 01:01:01", 112 | reqMan: "刘某某", 113 | node: "部门经理审批", 114 | nodeids: "1", 115 | hours: 24, 116 | userTotal: 4, 117 | orgTotal: 2, 118 | } 119 | ], 120 | } 121 | }, 122 | { 123 | workflowid: 3.1, 124 | name: "行政采购费用报销", 125 | parent: "2", 126 | type: 0, 127 | requestinfo: ['3'], 128 | analysisData: { 129 | begin: "2018-03-01 01:01:01", 130 | end: "2018-03-02 01:01:01", 131 | hours: 24, 132 | userTotal: 4, 133 | orgTotal: 2, 134 | reqDetails: [ 135 | { 136 | requestid: "3", 137 | flowNo: "P20180301001", 138 | title: "银行预付款申请-刘", 139 | reqDate: "2018-03-01 01:01:01", 140 | endDate: "2018-03-02 01:01:01", 141 | reqMan: "刘某某", 142 | node: "部门经理审批", 143 | nodeids: "1", 144 | hours: 24, 145 | userTotal: 4, 146 | orgTotal: 2, 147 | } 148 | ], 149 | } 150 | }, 151 | { 152 | workflowid: 41, 153 | name: "物资入库(库管操作)", 154 | parent: "21", 155 | type: 0, 156 | requestinfo: ['3'], 157 | analysisData: { 158 | begin: "2018-03-01 01:01:01", 159 | end: "2018-03-02 01:01:01", 160 | hours: 24, 161 | userTotal: 4, 162 | orgTotal: 2, 163 | reqDetails: [ 164 | { 165 | requestid: "3", 166 | flowNo: "P20180301001", 167 | title: "银行预付款申请-刘", 168 | reqDate: "2018-03-01 01:01:01", 169 | endDate: "2018-03-02 01:01:01", 170 | reqMan: "刘某某", 171 | node: "部门经理审批", 172 | nodeids: "1", 173 | hours: 24, 174 | userTotal: 4, 175 | orgTotal: 2, 176 | } 177 | ], 178 | } 179 | }, 180 | { 181 | workflowid: 42, 182 | name: "物资入库(宿管操作)", 183 | parent: "21", 184 | type: 0, 185 | requestinfo: ['3'], 186 | analysisData: { 187 | begin: "2018-03-01 01:01:01", 188 | end: "2018-03-02 01:01:01", 189 | hours: 24, 190 | userTotal: 4, 191 | orgTotal: 2, 192 | reqDetails: [ 193 | { 194 | requestid: "3", 195 | flowNo: "P20180301001", 196 | title: "银行预付款申请-刘", 197 | reqDate: "2018-03-01 01:01:01", 198 | endDate: "2018-03-02 01:01:01", 199 | reqMan: "刘某某", 200 | node: "部门经理审批", 201 | nodeids: "1", 202 | hours: 24, 203 | userTotal: 4, 204 | orgTotal: 2, 205 | } 206 | ], 207 | } 208 | }, 209 | { 210 | workflowid: 51, 211 | name: "物资出库(员工操作)", 212 | parent: "41", 213 | type: 0, 214 | requestinfo: ['3'], 215 | analysisData: { 216 | begin: "2018-03-01 01:01:01", 217 | end: "2018-03-02 01:01:01", 218 | hours: 24, 219 | userTotal: 4, 220 | orgTotal: 2, 221 | reqDetails: [ 222 | { 223 | requestid: "3", 224 | flowNo: "P20180301001", 225 | title: "银行预付款申请-刘", 226 | reqDate: "2018-03-01 01:01:01", 227 | endDate: "2018-03-02 01:01:01", 228 | reqMan: "刘某某", 229 | node: "部门经理审批", 230 | nodeids: "1", 231 | hours: 24, 232 | userTotal: 4, 233 | orgTotal: 2, 234 | } 235 | ], 236 | } 237 | }, 238 | { 239 | workflowid: 52, 240 | name: "物资出库(宿管操作)", 241 | parent: "41", 242 | type: 0, 243 | requestinfo: ['3'], 244 | analysisData: { 245 | begin: "2018-03-01 01:01:01", 246 | end: "2018-03-02 01:01:01", 247 | hours: 24, 248 | userTotal: 4, 249 | orgTotal: 2, 250 | reqDetails: [ 251 | { 252 | requestid: "3", 253 | flowNo: "P20180301001", 254 | title: "银行预付款申请-刘", 255 | reqDate: "2018-03-01 01:01:01", 256 | endDate: "2018-03-02 01:01:01", 257 | reqMan: "刘某某", 258 | node: "部门经理审批", 259 | nodeids: "1", 260 | hours: 24, 261 | userTotal: 4, 262 | orgTotal: 2, 263 | } 264 | ], 265 | } 266 | }, 267 | ] 268 | ) 269 | }); 270 | -------------------------------------------------------------------------------- /src/mock/index.js: -------------------------------------------------------------------------------- 1 | import Mock from 'mockjs' 2 | 3 | const req = context => context.keys().map(context) 4 | req(require.context('./api',true,/\.js$/)) 5 | 6 | Mock.setup({ 7 | timeout: '300-600' 8 | }) 9 | -------------------------------------------------------------------------------- /src/store/global_store.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state:{ 3 | workflowid:null, 4 | requestid:null 5 | }, 6 | mutations:{ 7 | setWorkflowId(state,stark){ 8 | if (stark.workflowid){ 9 | state.workflowid = stark.workflowid; 10 | } 11 | if(stark.requestid){ 12 | state.requestid = stark.requestid; 13 | } 14 | } 15 | } 16 | } 17 | --------------------------------------------------------------------------------