vue2-client 0.1.1 → 1.2.0

package/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/.env

@@ -0,0 +1,14 @@
+VUE_APP_PUBLIC_PATH=/
+VUE_APP_NAME=Admin
+VUE_APP_ROUTES_KEY=admin.routes
+VUE_APP_PERMISSIONS_KEY=admin.permissions
+VUE_APP_ROLES_KEY=admin.roles
+VUE_APP_USER_KEY=admin.user
+VUE_APP_LOGIN_KEY=admin.login
+VUE_APP_SETTING_KEY=admin.setting
+VUE_APP_TBAS_KEY=admin.tabs
+VUE_APP_TBAS_TITLES_KEY=admin.tabs.titles
+VUE_APP_DICTIONARY_KEY=admin.dictionary
+VUE_APP_BADGE_KEY=admin.badge
+VUE_APP_SINGLEVALUE_KEY=admin.singlevalue
+VUE_APP_API_BASE_URL=http://123.60.214.109:8405

package/.env.development

@@ -0,0 +1 @@
+VUE_APP_API_BASE_URL=http://localhost:8001

package/.eslintrc.js

@@ -0,0 +1,81 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    'plugin:vue/strongly-recommended',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'generator-star-spacing': 'off',
+    'no-mixed-operators': 0,
+    'vue/max-attributes-per-line': [
+      2,
+      {
+        'singleline': 5,
+        'multiline': {
+          'max': 1,
+          'allowFirstLine': false
+        }
+      }
+    ],
+    'vue/attribute-hyphenation': 0,
+    'vue/html-self-closing': 0,
+    'vue/component-name-in-template-casing': 0,
+    'vue/html-closing-bracket-spacing': 0,
+    'vue/singleline-html-element-content-newline': 0,
+    'vue/no-unused-components': 0,
+    'vue/multiline-html-element-content-newline': 0,
+    'vue/no-use-v-if-with-v-for': 0,
+    'vue/html-closing-bracket-newline': 0,
+    'vue/no-parsing-error': 0,
+    'vue/name-property-casing': 0,
+    'no-tabs': 0,
+    'quotes': [
+      2,
+      'single',
+      {
+        'avoidEscape': true,
+        'allowTemplateLiterals': true
+      }
+    ],
+    'semi': [
+      2,
+      'never',
+      {
+        'beforeStatementContinuationChars': 'never'
+      }
+    ],
+    'no-delete-var': 2,
+    'prefer-const': [
+      2,
+      {
+        'ignoreReadBeforeAssign': false
+      }
+    ],
+    'template-curly-spacing': 'off',
+    'indent': 'off',
+    // 必须使用全等: false
+    'eqeqeq': 0,
+    // 可以使用!! 双重否定
+    'no-extra-boolean-cast': 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
+}

package/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "space-before-function-paren": 0
+  }
+}

package/README.md

@@ -1,45 +1,65 @@
 # vue2-client
 
-基于ant-design-vue@^1.7.6封装的通用基础组件
-所有组件已经进行了全局注册，可直接使用。
+基于Vue Antd Admin封装的通用基础组件
 
 ## 完整引入
 
-```js
-import 'vue2-client'
+```javascript
+import Vue from 'vue'
+import App from './App.vue'
+import Router from 'vue-router'
+import Vuex from 'vuex'
+import '@vue2-client/mock'
+import { routerOptions, modules, i18n, message, bootstrap } from 'vue2-client'
+
+Vue.use(Router)
+Vue.use(Vuex)
+// 创建router store
+const store = new Vuex.Store({ modules })
+const router = new Router(routerOptions)
+
+bootstrap({ router, store, i18n, message })
+new Vue({
+  router,
+  store,
+  i18n,
+  render: h => h(App)
+}).$mount('#app')
+
+注意引入项目请添加webpack别名配置
+config.resolve.alias.set('@vue2-client', path.resolve(__dirname, 'node_modules/vue2-client/src'))
 ```
 
 ## 目录结构
 
-* components: 组件
-* plugins: 插件
-
-## 组件
-
-* [Criteria](src/components/Criteria/index.md): 通用查询界面
-* [CustomColumnsDrawer](src/components/CustomColumnsDrawer/index.md) 自定义表格列
-* [DataGrid](src/components/DataGrid/index.md) 对 antdv 进行封装的 表格展示组件
-* [ExportExcel](src/components/ExportExcel/index.md) 表格数据excel导出组件
-* [FormItem](src/components/FormItem/index.md) 提供一个可以自适应各种分辨率设备的表单栅格a-col封装
-* [InstructDetailsView](src/components/InstructDetailsView/index.md) 提供一个可以对单个指令进行一系列通用业务操作的抽屉实现
-* [MetaAnalysis](src/components/MetaAnalysis/index.md) 为复杂的各种信息提供一个汇总分析框架
-* [MeterDetailsView](src/components/MeterDetailsView/index.md) 提供一个可以对单个表具档案进行一系列通用业务操作的抽屉实现
-* [ModalView]() 通用弹窗组件
-
-## 插件
-
-* [AppData](src/plugins/AppData.js) 初始化参数获取
-* [Config](src/plugins/Config.js) 页面json配置获取
-* [GetLoginInfoService](src/plugins/GetLoginInfoService.js) 登陆权限相关方法
-* [MessageBox](src/plugins/MessageBox.js) 弹出对话框(未完成)
-* [moment](src/plugins/moment.js) Moment插件格式化时间(http://momentjs.cn/)
-* [PagedList](src/plugins/PagedList.js) 分页数据查询组件, 配合DataGrid组件
-
-
-
-
-
-
-
-
-
+  ```
+  ├── docs                     # 文档
+  ├── public
+  │   └── favicon.png          # favicon
+  │   └── index.html           # 入口 HTML
+  ├── src
+  │   ├── assets               # 本地静态资源
+  │   ├── base-client          # 基础组件和基础vue插件(全局注册)
+  │   ├── components           # 内置通用组件(按需引入)
+  │   ├── config               # 系统配置
+  │   ├── layouts              # 通用布局组件(按需引入)
+  │   ├── mock                 # 本地 mock 数据
+  │   ├── pages                # 页面组件
+  │   ├── router               # 路由配置
+  │   ├── services             # 数据服务模块
+  │   ├── store                # vuex 状态管理配置
+  │   ├── theme                # 主题样式相关
+  │   ├── utils                # js 工具
+  │   ├── App.vue              # 应用入口组件
+  │   ├── bootstrap.js         # 应用启动引导js
+  │   ├── index.js             # 应用导出js
+  │   └── main.js              # 应用入口js
+  ├── tests                    # 单元测试  
+  ├── package.json             # package.json
+  ├── README.md                # README.md
+  └── vue.config.js            # vue 配置文件
+  ```
+
+## 文档入口
+
+[入口](docs/index.md)

package/babel.config.js

@@ -1,5 +1,14 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
+
+const plugins = []
+if (IS_PROD) {
+  plugins.push('transform-remove-console')
+}
+
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+    ['@vue/babel-preset-jsx', { 'injectH': false }]
+  ],
+  plugins
+}

package/docs/index.md

@@ -0,0 +1,29 @@
+## 文档列表
+### common
+* [CreateQuery 完整查询配置生成](../src/base-client/components/common/CreateQuery/index.md)
+* [CreateSimpleFormQuery 基础表单配置生成](../src/base-client/components/common/CreateSimpleFormQuery/index.md)
+* [CustomColumnsDrawer 自定义表格列](../src/base-client/components/common/CustomColumnsDrawer/index.md)
+* [FormGroupEdit 表单参数组配置编辑](../src/base-client/components/common/FormGroupEdit/index.md)
+* [FormGroupQuery 表单参数组配置生成](../src/base-client/components/common/FormGroupQuery/index.md)
+* [XAddForm 动态新增/修改表单控件，根据JSON配置生成一个完整的可供新增/修改数据的动态表单](../src/base-client/components/common/XAddForm/index.md)
+* [XBadge 重封装徽标](../src/base-client/components/common/XBadge/index.md)
+* [XCard 通用数据加载状态管理容器](../src/base-client/components/common/XCard/index.md)
+* [XForm 动态表单控件，根据JSON配置生成一个完整的动态表单](../src/base-client/components/common/XForm/index.md)
+* [XFormCol 适用于表单的通用响应式栅格a-col封装](../src/base-client/components/common/XFormCol/index.md)
+* [XFormTable 动态查询控件，进一步整合了XTable和XForm](../src/base-client/components/common/XFormTable/index.md)
+* [XTable 动态表格控件，根据JSON配置生成一个完整的动态表格](../src/base-client/components/common/XTable/index.md)
+
+### iot
+* [CustomerDetailsView 客户详情页](../src/base-client/components/iot/CustomerDetailsView/index.md)
+* [DeviceDetailsView 档案详情页](../src/base-client/components/iot/DeviceDetailsView/index.md)
+* [InstructDetailsView 指令详情页](../src/base-client/components/iot/InstructDetailsView/index.md)
+* [LogDetailsView 日志详情页](../src/base-client/components/iot/LogDetailsView/index.md)
+* [MeterDetailsView 单个表具档案](../src/base-client/components/iot/MeterDetailsView/index.md)
+
+### system
+* [DictionaryDetailsView 字典详情页](../src/base-client/components/system/DictionaryDetailsView/index.md)
+
+### ticket
+* [EmployeeDetailsView 员工详情页](../src/base-client/components/ticket/EmployeeDetailsView/index.md)
+* [TicketDetailsView 工单详情页](../src/base-client/components/ticket/TicketDetailsView/index.md)
+* [TicketSubmitSuccessView 单个工单详情页](../src/base-client/components/ticket/TicketSubmitSuccessView/index.md)

package/index.js

@@ -1,35 +1,28 @@
-import Vue from 'vue'
-
-import MessageBox from './src/plugins/MessageBox'
-import GetLoginInfoService from './src/plugins/GetLoginInfoService'
-import GetAppDataService from './src/plugins/AppData'
-import getConfig from './src/plugins/Config'
-import moment from './src/plugins/moment'
-import FormItem from './src/components/FormItem'
-import modal from './src/components/ModalView/index'
-import DataGrid from './src/components/DataGrid'
-import { Criteria, CriteriaPaged } from './src/components/Criteria'
-import WTable from './src/components/WTable'
-import { WCriteria, WCriteriaPaged } from './src/components/WCriteria'
-import MetaAnalysis from './src/components/MetaAnalysis'
-import ExportExcel from './src/components/ExportExcel'
-import CustomColumnsDrawer from './src/components/CustomColumnsDrawer'
-
-// 插件
-Vue.use(MessageBox)
-Vue.use(GetLoginInfoService)
-Vue.use(GetAppDataService)
-Vue.use(getConfig)
-Vue.use(moment)
-// 组件
-Vue.component('modal', modal)
-Vue.component('form-item', FormItem)
-Vue.component('data-grid', DataGrid)
-Vue.component('criteria', Criteria)
-Vue.component('criteria-paged', CriteriaPaged)
-Vue.component('export-excel', ExportExcel)
-Vue.component('custom-columns-drawer', CustomColumnsDrawer)
-Vue.component('w-table', WTable)
-Vue.component('w-criteria', WCriteria)
-Vue.component('w-criteria-paged', WCriteriaPaged)
-Vue.component('meta-analysis', MetaAnalysis)
+import Vue from 'vue'
+import { initRouter } from '@vue2-client/router'
+import { initI18n } from '@vue2-client/utils/i18n'
+import bootstrap from '@vue2-client/bootstrap'
+import { modules } from '@vue2-client/store'
+import '@vue2-client/theme/index.less'
+import '@vue2-client/base-client/all'
+import '@vue2-client/utils/filter'
+import 'animate.css/source/animate.css'
+import 'moment/locale/zh-cn'
+import Antd from 'ant-design-vue'
+import Viser from 'viser-vue'
+
+const routerOptions = initRouter()
+const i18n = initI18n('CN', 'US')
+
+Vue.use(Antd)
+Vue.use(Viser)
+Vue.config.productionTip = false
+const message = Vue.prototype.$message
+
+export {
+  routerOptions,
+  modules,
+  i18n,
+  message,
+  bootstrap
+}

package/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest'
+}

package/package.json

@@ -1,43 +1,89 @@
 {
   "name": "vue2-client",
-  "version": "0.1.1",
+  "version": "1.2.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "ant-design-vue": "^1.7.6",
+    "@antv/data-set": "^0.11.4",
+    "@antv/f2": "^3.6.4",
+    "@antv/g2plot": "^2.3.33",
+    "@logicflow/core": "^1.1.7",
+    "@logicflow/extension": "^1.1.7",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
+    "@vue/babel-preset-jsx": "^1.2.4",
+    "animate.css": "^4.1.0",
+    "ant-design-vue": "1.7.8",
+    "axios": "^0.19.2",
+    "clipboard": "^2.0.6",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "date-fns": "^2.14.0",
+    "default-passive-events": "^2.0.0",
+    "enquire.js": "^2.1.6",
+    "file-saver": "^2.0.5",
+    "highlight.js": "^10.2.1",
+    "js-cookie": "^2.2.1",
+    "jsencrypt": "^3.0.0-rc.1",
+    "lodash.get": "^4.4.2",
+    "mockjs": "^1.1.0",
+    "nprogress": "^0.2.0",
+    "viser-vue": "^2.4.8",
+    "vue": "^2.6.11",
+    "vue-i18n": "^8.18.2",
+    "vue-json-viewer": "^2.2.15",
+    "vue-router": "^3.3.4",
+    "vuedraggable": "^2.23.2",
+    "vuex": "^3.4.0",
+    "xlsx": "0.17.5"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@ant-design/colors": "^4.0.1",
+    "@vue/cli-plugin-babel": "^4.4.0",
+    "@vue/cli-plugin-eslint": "^4.4.0",
+    "@vue/cli-plugin-router": "^4.4.0",
+    "@vue/cli-plugin-unit-jest": "~5.0.0",
+    "@vue/cli-plugin-vuex": "^4.4.0",
+    "@vue/cli-service": "^4.4.0",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/test-utils": "^1.1.3",
+    "@vue/vue2-jest": "^27.0.0-alpha.2",
+    "@vuepress/plugin-back-to-top": "^1.5.2",
     "babel-eslint": "^10.1.0",
+    "babel-jest": "^27.0.6",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "babel-polyfill": "^6.26.0",
+    "compression-webpack-plugin": "^2.0.0",
+    "deepmerge": "^4.2.2",
+    "echarts": "^4.9.0",
     "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
+    "fast-deep-equal": "^3.1.3",
+    "gh-pages": "^3.1.0",
+    "jest": "^27.0.5",
+    "less-loader": "^6.1.1",
+    "react-bmap": "^1.0.121",
+    "script-loader": "^0.7.2",
+    "style-resources-loader": "^1.3.2",
+    "vue-amap": "^0.5.10",
+    "vue-baidu-map": "^0.21.22",
+    "vue-bmap-gl": "0.0.29",
+    "vue-cli-plugin-style-resources-loader": "^0.1.4",
+    "vue-mapvgl": "0.0.28",
+    "vue-template-compiler": "^2.6.11",
+    "vuepress": "^1.5.2",
+    "webpack-theme-color-replacer": "1.3.18",
+    "whatwg-fetch": "^3.0.0"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
-    "not dead"
+    "not ie <= 10"
   ]
 }

package/public/index.html

@@ -1,17 +1,27 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="beauty-scroll">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= process.env.VUE_APP_NAME %></title>
+    <!-- require cdn assets css -->
+    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
+      <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
+    <% } %>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="popContainer" class="beauty-scroll" style="height: 100vh; overflow-y: scroll">
+      <div id="app"></div>
+    </div>
+    <!-- require cdn assets js -->
+    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
+      <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
+    <% } %>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/src/App.vue

@@ -0,0 +1,93 @@
+<template>
+  <a-config-provider :locale="locale" :get-popup-container="popContainer">
+    <router-view/>
+  </a-config-provider>
+</template>
+
+<script>
+import { enquireScreen } from './utils/util'
+import { mapState, mapMutations } from 'vuex'
+import themeUtil from '@vue2-client/utils/themeUtil'
+import { getI18nKey } from '@vue2-client/utils/routerUtil'
+
+export default {
+  name: 'App',
+  data () {
+    return {
+      locale: {}
+    }
+  },
+  created () {
+    this.setHtmlTitle()
+    this.setLanguage(this.lang)
+    enquireScreen(isMobile => this.setDevice(isMobile))
+  },
+  mounted () {
+   this.setWeekModeTheme(this.weekMode)
+  },
+  watch: {
+    weekMode (val) {
+      this.setWeekModeTheme(val)
+    },
+    lang (val) {
+      this.setLanguage(val)
+      this.setHtmlTitle()
+    },
+    $route () {
+      this.setHtmlTitle()
+    },
+    'theme.mode': function (val) {
+      const closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`)
+      themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage)
+    },
+    'theme.color': function (val) {
+      const closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`)
+      themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage)
+    },
+    'layout': function () {
+      window.dispatchEvent(new Event('resize'))
+    }
+  },
+  computed: {
+    ...mapState('setting', ['layout', 'theme', 'weekMode', 'lang'])
+  },
+  methods: {
+    ...mapMutations('setting', ['setDevice']),
+    setWeekModeTheme (weekMode) {
+      if (weekMode) {
+        document.body.classList.add('week-mode')
+      } else {
+        document.body.classList.remove('week-mode')
+      }
+    },
+    setLanguage (lang) {
+      this.$i18n.locale = lang
+      switch (lang) {
+        case 'CN':
+          this.locale = require('ant-design-vue/es/locale-provider/zh_CN').default
+          break
+        case 'HK':
+          this.locale = require('ant-design-vue/es/locale-provider/zh_TW').default
+          break
+        case 'US':
+        default:
+          this.locale = require('ant-design-vue/es/locale-provider/en_US').default
+          break
+      }
+    },
+    setHtmlTitle () {
+      const route = this.$route
+      const key = route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path)
+      document.title = process.env.VUE_APP_NAME + ' | ' + this.$t(key)
+    },
+    popContainer () {
+      return document.getElementById('popContainer')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  #id{
+  }
+</style>