vue2-client 0.1.1 → 1.2.0

package/src/pages/system/applyInstallView/registerNode/registerStart.js

@@ -0,0 +1,105 @@
+export default function registerStart (lf) {
+  lf.register('start', ({ CircleNode, CircleNodeModel, h }) => {
+    class StartNode extends CircleNode {
+      getIconShape () {
+        const { model } = this.props
+        const { stroke } = model.getNodeStyle()
+        const {
+          x,
+          y,
+          width,
+          height
+        } = model
+        return h(
+          'svg',
+          {
+            x: x - width / 2 + 8,
+            y: y - height / 2 + 7,
+            width: 25,
+            height: 25,
+            viewBox: '0 0 1024 1024'
+          },
+          h(
+            'path',
+            {
+              fill: stroke,
+              d: 'M380.677 176.279l390.182 225.272c85.024 49.089 85.024 171.81 0 220.899L380.677 847.721c-85.024 49.089-191.304-12.272-191.304-110.449V286.728c0-98.177 106.28-159.538 191.304-110.449z'
+            }
+          )
+        )
+      }
+      getShape () {
+        const { model } = this.props
+        const { x, y, r } = model
+        const { fill, stroke, strokeWidth } = model.getNodeStyle()
+        return h(
+          'g',
+          {
+          },
+          [
+            h(
+              'circle',
+              {
+                cx: x,
+                cy: y,
+                r,
+                fill,
+                stroke,
+                strokeWidth
+              }
+            ),
+            this.getIconShape()
+          ]
+        )
+      }
+    }
+    class StartModel extends CircleNodeModel {
+      // 自定义节点形状属性
+      initNodeData (data) {
+        data.text = {
+          value: (data.text && data.text.value) || '',
+          x: data.x,
+          y: data.y + 35,
+          dragable: false,
+          editable: true
+        }
+        super.initNodeData(data)
+        this.r = 20
+      }
+      // 自定义节点样式属性
+      getNodeStyle () {
+        const style = super.getNodeStyle()
+        style.stroke = '#FF7B15'
+        style.strokeWidth = 3
+        return style
+      }
+      // 自定义锚点样式
+      getAnchorStyle () {
+        const style = super.getAnchorStyle()
+        style.hover.r = 8
+        style.hover.fill = 'rgb(24, 125, 255)'
+        style.hover.stroke = 'rgb(24, 125, 255)'
+        return style
+      }
+      // 自定义节点outline
+      getOutlineStyle () {
+        const style = super.getOutlineStyle()
+        style.stroke = '#88f'
+        return style
+      }
+      getConnectedTargetRules () {
+        const rules = super.getConnectedTargetRules()
+        const notAsTarget = {
+          message: '起始节点不能作为连线的终点',
+          validate: () => false
+        }
+        rules.push(notAsTarget)
+        return rules
+      }
+    }
+    return {
+      view: StartNode,
+      model: StartModel
+    }
+  })
+}

package/src/pages/system/applyInstallView/registerNode/registerStep.js

@@ -0,0 +1,209 @@
+export default function registerStep (lf, clickPlus, mouseDownPlus, showPropView, showSimpleFormView) {
+  lf.register('step', ({ RectNode, RectNodeModel, h }) => {
+    class Node extends RectNode {
+      getIconShape () {
+        const { model } = this.props
+        const { stroke } = model.getNodeStyle()
+        const { x, y } = model
+        return h(
+          'svg',
+          {
+            width: 40,
+            height: 40,
+            x: x - 20,
+            y: y - 20,
+            viewBox: '0 0 1024 1024'
+          },
+          h(
+            'path',
+            {
+              fill: stroke,
+              d: 'M512 241.777778m-139.377778 0a139.377778 139.377778 0 1 0 278.755556 0 139.377778 139.377778 0 1 0-278.755556 0Z'
+            }
+          ),
+          h(
+            'path',
+            {
+              fill: stroke,
+              d: 'M230.4 731.363556m-139.377778 0a139.377778 139.377778 0 1 0 278.755556 0 139.377778 139.377778 0 1 0-278.755556 0Z'
+            }
+          ),
+          h(
+            'path',
+            {
+              fill: stroke,
+              d: 'M221.639111 500.622222l-53.816889-12.401778A351.573333 351.573333 0 0 1 512 213.560889v55.296A296.846222 296.846222 0 0 0 221.639111 500.622222zM788.48 787.114667l-43.235556-34.133334A295.822222 295.822222 0 0 0 718.620444 352.711111l38.343112-39.936a350.776889 350.776889 0 0 1 31.516444 474.339556z'
+            }
+          ),
+          h(
+            'path',
+            {
+              fill: stroke,
+              d: 'M793.6 730.794667m-139.377778 0a139.377778 139.377778 0 1 0 278.755556 0 139.377778 139.377778 0 1 0-278.755556 0Z'
+            }
+          ),
+          h(
+            'path',
+            {
+              fill: stroke,
+              d: 'M520.078222 921.6a353.848889 353.848889 0 0 1-306.289778-176.469333L261.688889 717.596444A297.984 297.984 0 0 0 608.028444 853.333333l16.611556 52.679111A344.974222 344.974222 0 0 1 520.078222 921.6z'
+            }
+          )
+        )
+      }
+      getPulsShape () {
+        const { model } = this.props
+        // 判断当前节点是否子节点
+        const graphData = lf.getGraphData()
+        const edges = graphData.edges
+        let hasChildNode = false
+        edges.some(item => {
+          if (item.sourceNodeId === model.id) {
+            hasChildNode = true
+            return true
+          }
+        })
+        if (hasChildNode) {
+          return
+        }
+        return h(
+          'svg',
+          {
+            x: 70,
+            y: 20,
+            width: 30,
+            height: 30,
+            viewBox: '0 0 1024 1024',
+            class: 'time-plus',
+            onClick: (e) => clickPlus(e, model, [{
+              type: 'step',
+              label: '添加步骤'
+            }]),
+            onMousedown: (e) => mouseDownPlus(e, model),
+            onMouseUp: (e) => mouseDownPlus(e, model)
+          },
+          h(
+            'path',
+            {
+              fill: '#f17611',
+              d: 'M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z'
+            }
+          ),
+          h(
+            'path',
+            {
+              fill: '#ffffff',
+              d: 'M448 298.666667h128v426.666666h-128z'
+            }
+          ),
+          h(
+            'path',
+            {
+              fill: '#ffffff',
+              d: 'M298.666667 448h426.666666v128H298.666667z'
+            }
+          )
+        )
+      }
+      getShape () {
+        const { model } = this.props
+        const { width, height, x, y } = model
+        const { fill, stroke, strokeWidth } = model.getNodeStyle()
+        return h(
+          'g',
+          {
+          },
+          [
+            h(
+              'rect',
+              {
+                x: x - (width / 2),
+                y: y - (height / 2),
+                width: width,
+                height: height,
+                fill,
+                stroke,
+                strokeWidth
+              }
+            ),
+            this.getIconShape(),
+            this.getPulsShape()
+          ]
+        )
+      }
+    }
+    class Model extends RectNodeModel {
+      constructor (data, graphModel) {
+        data.text = {
+          value: (data.text && data.text.value) || '',
+          x: data.x,
+          y: data.y + 50
+        }
+        super(data, graphModel)
+        // 右键菜单自由配置，也可以通过边的properties或者其他属性条件更换不同菜单
+        this.menu = [
+          {
+            className: 'lf-menu-delete',
+            text: '删除',
+            callback (node) {
+              // const comfirm = window.confirm('你确定要删除吗？')
+              lf.deleteNode(node.id)
+            }
+          },
+          {
+            text: '编辑文本',
+            className: 'lf-menu-item',
+            callback (node) {
+              lf.editText(node.id)
+            }
+          },
+          {
+            text: '编辑属性',
+            className: 'lf-menu-item',
+            callback (node) {
+              showPropView(node)
+            }
+          },
+          {
+            text: '编辑表单',
+            className: 'lf-menu-item',
+            callback (node) {
+              showSimpleFormView(node)
+            }
+          },
+          {
+            text: '复制',
+            className: 'lf-menu-item',
+            callback (node) {
+              lf.cloneNode(node.id)
+            }
+          }
+        ]
+      }
+      initNodeData (data) {
+        super.initNodeData(data)
+        this.width = 70
+        this.height = 70
+      }
+      // 自定义锚点样式
+      getAnchorStyle () {
+        const style = super.getAnchorStyle()
+        style.hover.r = 8
+        style.hover.fill = 'rgb(24, 125, 255)'
+        style.hover.stroke = 'rgb(24, 125, 255)'
+        return style
+      }
+      // 自定义节点样式
+      getNodeStyle () {
+        const style = super.getNodeStyle()
+        style.stroke = '#37ADDB'
+        style.strokeWidth = 3
+        return style
+      }
+    }
+    return {
+      view: Node,
+      model: Model
+    }
+  })
+}

package/src/pages/system/applyInstallView/registerNode/registerTask.js

@@ -0,0 +1,29 @@
+export default function registerTask (lf) {
+  lf.register('task', ({ RectNode, RectNodeModel, h }) => {
+    class View extends RectNode {
+      getShape () {
+        const { model } = this.props
+        const { width, height, x, y } = model
+        const position = {
+          x: x - width / 2,
+          y: y - height / 2
+        }
+        const style = model.getNodeStyle()
+        return h('rect', {
+          ...style,
+          ...position
+        })
+      }
+    }
+    class Model extends RectNodeModel {
+      constructor (data, graphModel) {
+        super(data, graphModel)
+        this.radius = 20
+      }
+    }
+    return {
+      view: View,
+      model: Model
+    }
+  })
+}

package/src/pages/system/dictionary/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <a-card :bordered="false">
+    <dictionary-details-view
+      :visible.sync="detailVisible"
+      :id="selectId"
+      v-if="selectId"
+    />
+    <x-form-table
+      title="字典"
+      :queryParamsName="queryParamsName"
+      @action="toDetail">
+    </x-form-table>
+  </a-card>
+</template>
+
+<script>
+  import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
+
+  export default {
+    name: 'Dictionary',
+    components: {
+      XFormTable
+    },
+    data () {
+      return {
+        // 选中的编号
+        selectId: undefined,
+        // 查询配置文件名
+        queryParamsName: 'dictionaryQueryParams',
+        // 是否显示详情抽屉
+        detailVisible: false
+      }
+    },
+    methods: {
+      toDetail (record, id) {
+        this.selectId = id + ''
+        this.detailVisible = true
+      }
+    }
+  }
+</script>

package/src/pages/system/queryParams/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <a-card :bordered="false">
+    <query-params-details-view
+      :visible.sync="detailVisible"
+      :id="selectId"
+      v-if="selectId"
+    />
+    <x-form-table
+      title="查询配置"
+      :queryParamsName="queryParamsName"
+      @action="toDetail">
+    </x-form-table>
+  </a-card>
+</template>
+
+<script>
+  import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
+
+  export default {
+    name: 'QueryParams',
+    components: {
+      XFormTable
+    },
+    data () {
+      return {
+        // 选中的编号
+        selectId: undefined,
+        // 查询配置文件名
+        queryParamsName: 'queryParams',
+        // 是否显示详情抽屉
+        detailVisible: false
+      }
+    },
+    methods: {
+      toDetail (record, id) {
+        this.selectId = id + ''
+        this.detailVisible = true
+      }
+    }
+  }
+</script>

package/src/router/async/config.async.js

@@ -0,0 +1,25 @@
+import routerMap from './router.map'
+import { parseRoutes } from '@vue2-client/utils/routerUtil'
+
+// 异步路由配置
+const routesConfig = [
+  'login',
+  'root',
+  {
+    router: 'exp404',
+    path: '*',
+    name: '404'
+  },
+  {
+    router: 'exp403',
+    path: '/403',
+    name: '403'
+  }
+]
+
+const options = {
+  mode: 'history',
+  routes: parseRoutes(routesConfig, routerMap)
+}
+
+export default options

package/src/router/async/router.map.js

@@ -0,0 +1,59 @@
+// 视图组件
+const view = {
+  tabs: () => import('@vue2-client/layouts/tabs'),
+  blank: () => import('@vue2-client/layouts/BlankView'),
+  page: () => import('@vue2-client/layouts/PageView'),
+  singlePage: () => import('@vue2-client/layouts/SinglePageView')
+}
+// 动态路由对象定义
+const routerResource = {}
+// --------------------------------------基本视图组件--------------------------------------
+// 空白视图
+routerResource.blank = view.blank
+// 单页面视图
+routerResource.singlePage = view.singlePage
+// --------------------------------------系统配置--------------------------------------
+routerResource.system = view.blank
+// 字典管理
+routerResource.dictionaryManage = () => import(/* webpackChunkName: "dictionary" */ '@vue2-client/pages/system/dictionary')
+// 查询配置管理
+routerResource.queryParamsManage = () => import(/* webpackChunkName: "queryParams" */ '@vue2-client/pages/system/queryParams')
+// 报装可视化
+routerResource.applyInstallView = () => import(/* webpackChunkName: "applyInstallView" */ '@vue2-client/pages/system/applyInstallView')
+// --------------------------------------报表组件--------------------------------------
+routerResource.reportTable = () => import(/* webpackChunkName: "ReportTableHome" */ '@vue2-client/pages/report/ReportTableHome')
+// --------------------------------------资源管理--------------------------------------
+routerResource.resourceManageMain = () => import(/* webpackChunkName: "resourceManageMain" */ '@vue2-client/pages/resourceManage/resourceManageMain')
+
+// 基础路由组件注册
+const routerMap = {
+  login: {
+    authority: '*',
+    path: '/login',
+    component: () => import('@vue2-client/pages/login')
+  },
+  root: {
+    path: '/',
+    name: '首页',
+    redirect: '/login',
+    component: view.tabs
+  },
+  exp403: {
+    authority: '*',
+    name: 'exp403',
+    path: '403',
+    component: () => import('@vue2-client/pages/exception/403')
+  },
+  exp404: {
+    name: 'exp404',
+    path: '404',
+    component: () => import('@vue2-client/pages/exception/404')
+  },
+  exp500: {
+    name: 'exp500',
+    path: '500',
+    component: () => import('@vue2-client/pages/exception/500')
+  }
+}
+Object.assign(routerMap, routerResource)
+export default routerMap

package/src/router/guards.js

@@ -0,0 +1,104 @@
+import { hasAuthority } from '@vue2-client/utils/authority-utils'
+import { loginIgnore } from '@vue2-client/router/index'
+import { checkAuthorization } from '@vue2-client/utils/request'
+import NProgress from 'nprogress'
+
+NProgress.configure({ showSpinner: false })
+
+/**
+ * 进度条开始
+ * @param to
+ * @param form
+ * @param next
+ */
+const progressStart = (to, from, next) => {
+  // start progress bar
+  if (!NProgress.isStarted()) {
+    NProgress.start()
+  }
+  next()
+}
+
+/**
+ * 登录守卫
+ * @param to
+ * @param form
+ * @param next
+ * @param options
+ */
+const loginGuard = (to, from, next, options) => {
+  const { message } = options
+  if (!loginIgnore.includes(to) && !checkAuthorization()) {
+    message.warning('登录已失效，请重新登录')
+    next({ path: '/login' })
+  } else {
+    next()
+  }
+}
+
+/**
+ * 权限守卫
+ * @param to
+ * @param form
+ * @param next
+ * @param options
+ */
+const authorityGuard = (to, from, next, options) => {
+  const { store, message } = options
+  const permissions = store.getters['account/permissions']
+  const roles = store.getters['account/roles']
+  if (!hasAuthority(to, permissions, roles)) {
+    message.warning(`对不起，您无权访问页面: ${to.fullPath}，请联系管理员`)
+    next({ path: '/403' })
+    // NProgress.done()
+  } else {
+    next()
+  }
+}
+
+/**
+ * 混合导航模式下一级菜单跳转重定向
+ * @param to
+ * @param from
+ * @param next
+ * @param options
+ * @returns {*}
+ */
+const redirectGuard = (to, from, next, options) => {
+  const { store } = options
+  const getFirstChild = (routes) => {
+    const route = routes[0]
+    if (!route.children || route.children.length === 0) {
+      return route
+    }
+    return getFirstChild(route.children)
+  }
+  if (store.state.setting.layout === 'mix') {
+    const firstMenu = store.getters['setting/firstMenu']
+    if (firstMenu.find(item => item.fullPath === to.fullPath)) {
+      store.commit('setting/setActivatedFirst', to.fullPath)
+      const subMenu = store.getters['setting/subMenu']
+      if (subMenu.length > 0) {
+        const redirect = getFirstChild(subMenu)
+        return next({ path: redirect.fullPath })
+      }
+    }
+  }
+  next()
+}
+
+/**
+ * 进度条结束
+ * @param to
+ * @param form
+ * @param options
+ */
+const progressDone = () => {
+  // finish progress bar
+  NProgress.done()
+}
+
+export default {
+  beforeEach: [progressStart, loginGuard, authorityGuard, redirectGuard],
+  afterEach: [progressDone]
+}

package/src/router/i18n.js

@@ -0,0 +1,57 @@
+module.exports = {
+  messages: {
+    CN: {
+      home: { name: '首页' }
+    },
+    US: {
+      home: { name: 'home' }
+    },
+    HK: {
+      home: { name: '首頁' },
+      dashboard: {
+        name: '儀表盤',
+        workplace: { name: '工作台' },
+        analysis: { name: '分析頁' }
+      },
+      form: {
+        name: '表單頁',
+        basic: { name: '基礎表單' },
+        step: { name: '分步表單' },
+        advance: { name: '分步表單' }
+      },
+      list: {
+        name: '列表頁',
+        query: { name: '查詢表格' },
+        primary: { name: '標準列表' },
+        card: { name: '卡片列表' },
+        search: {
+          name: '搜索列表',
+          article: { name: '文章' },
+          application: { name: '應用' },
+          project: { name: '項目' }
+        }
+      },
+      details: {
+        name: '詳情頁',
+        basic: { name: '基礎詳情頁' },
+        advance: { name: '高級詳情頁' }
+      },
+      result: {
+        name: '結果頁',
+        success: { name: '成功' },
+        error: { name: '失敗' }
+      },
+      exception: {
+        name: '異常頁',
+        404: { name: '404' },
+        403: { name: '403' },
+        500: { name: '500' }
+      },
+      components: {
+        name: '小組件',
+        taskCard: { name: '任務卡片' },
+        palette: { name: '顏色複選框' }
+      }
+    }
+  }
+}

package/src/router/index.js

@@ -0,0 +1,27 @@
+import { formatRoutes } from '@vue2-client/utils/routerUtil'
+
+// 不需要登录拦截的路由配置
+const loginIgnore = {
+  names: ['404', '403'], // 根据路由名称匹配
+  paths: ['/login'], // 根据路由fullPath匹配
+  /**
+   * 判断路由是否包含在该配置中
+   * @param route vue-router 的 route 对象
+   * @returns {boolean}
+   */
+  includes (route) {
+    return this.names.includes(route.name) || this.paths.includes(route.path)
+  }
+}
+
+/**
+ * 初始化路由实例
+ * @param isAsync 是否异步路由模式
+ * @returns {RouterOptions}
+ */
+function initRouter (isAsync) {
+  const options = require('./async/config.async').default
+  formatRoutes(options.routes)
+  return options
+}
+export { loginIgnore, initRouter }