vue2-client 1.7.1 → 1.7.3

package/Components.md

@@ -1,60 +1,60 @@
-# vue2基础组件库组件介绍
-
-## XAddForm
-
-基于XAddNativeForm二次封装的动态表单的Modal形式
-
-[使用文档](src/base-client/components/common/XAddForm/index.md)
-
-## XAddNativeForm
-
-通过JSON配置动态生成的数据保存表单
-
-[使用文档](src/base-client/components/common/XAddNativeForm/index.md)
-
-## XBadge
-
-对antdv的badge组件进行重封装
-
-[使用文档](src/base-client/components/common/XBadge/index.md)
-
-## XCard
-
-通用数据加载状态管理容器
-
-提供一个可以根据数据加载状态显示不同内容的通用容器
-当loadState为loading时，显示骨架屏（加载界面）
-当loadState为success时，显示容器内容
-当loadState为error时，显示点击重新加载数据的提示界面
-
-[使用文档](src/base-client/components/common/XCard/index.md)
-
-## XForm
-
-通过JSON配置动态生成的数据筛选查询表单
-
-[使用文档](src/base-client/components/common/XForm/index.md)
-
-## XTable
-
-通过JSON配置动态生成的数据表格
-
-[使用文档](src/base-client/components/common/XTable/index.md)
-
-## XFormCol
-
-适用于动态表单的可以自适应各种分辨率设备的栅格组件封装
-
-[使用文档](src/base-client/components/common/XFormCol/index.md)
-
-## XFormTable
-
-对XAddForm，XForm和XTable组件的二次封装，实现通过JSON配置动态生成一个完整的实体操作页面
-
-[使用文档](src/base-client/components/common/XFormTable/index.md)
-
-## XImportExcel
-
-通用的导入excel组件
-
-[使用文档](src/base-client/components/common/XImportExcel/index.md)
+# vue2基础组件库组件介绍
+
+## XAddForm
+
+基于XAddNativeForm二次封装的动态表单的Modal形式
+
+[使用文档](src/base-client/components/common/XAddForm/index.md)
+
+## XAddNativeForm
+
+通过JSON配置动态生成的数据保存表单
+
+[使用文档](src/base-client/components/common/XAddNativeForm/index.md)
+
+## XBadge
+
+对antdv的badge组件进行重封装
+
+[使用文档](src/base-client/components/common/XBadge/index.md)
+
+## XCard
+
+通用数据加载状态管理容器
+
+提供一个可以根据数据加载状态显示不同内容的通用容器
+当loadState为loading时，显示骨架屏（加载界面）
+当loadState为success时，显示容器内容
+当loadState为error时，显示点击重新加载数据的提示界面
+
+[使用文档](src/base-client/components/common/XCard/index.md)
+
+## XForm
+
+通过JSON配置动态生成的数据筛选查询表单
+
+[使用文档](src/base-client/components/common/XForm/index.md)
+
+## XTable
+
+通过JSON配置动态生成的数据表格
+
+[使用文档](src/base-client/components/common/XTable/index.md)
+
+## XFormCol
+
+适用于动态表单的可以自适应各种分辨率设备的栅格组件封装
+
+[使用文档](src/base-client/components/common/XFormCol/index.md)
+
+## XFormTable
+
+对XAddForm，XForm和XTable组件的二次封装，实现通过JSON配置动态生成一个完整的实体操作页面
+
+[使用文档](src/base-client/components/common/XFormTable/index.md)
+
+## XImportExcel
+
+通用的导入excel组件
+
+[使用文档](src/base-client/components/common/XImportExcel/index.md)

package/index.js

@@ -11,10 +11,6 @@ import Antd from 'ant-design-vue'
 import Viser from 'viser-vue'
 // 插件
 import Plugins from '@vue2-client/base-client/plugins'
-import VueCustomElement from 'vue-custom-element'
-
-// 引入组件
-import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm'
 
 const routerOptions = initRouter()
 const i18n = initI18n('CN', 'US')
@@ -22,10 +18,6 @@ const i18n = initI18n('CN', 'US')
 Vue.use(Antd)
 Vue.use(Viser)
 Vue.use(Plugins)
-Vue.use(VueCustomElement)
-
-// 把组件注册成web-component
-Vue.customElement('x-add-native-form', XAddNativeForm)
 
 Vue.config.productionTip = false
 const message = Vue.prototype.$message

package/package.json

@@ -1,83 +1,83 @@
-{
-  "name": "vue2-client",
-  "version": "1.7.1",
-  "private": false,
-  "scripts": {
-    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint",
-    "build:preview": "vue-cli-service build --mode preview",
-    "lint:nofix": "vue-cli-service lint --no-fix"
-  },
-  "dependencies": {
-    "@amap/amap-jsapi-loader": "^1.0.1",
-    "@antv/data-set": "^0.11.8",
-    "@antv/g2plot": "^2.4.29",
-    "@vue/babel-preset-jsx": "^1.4.0",
-    "animate.css": "^4.1.1",
-    "ant-design-vue": "^1.7.8",
-    "axios": "^0.27.2",
-    "clipboard": "^2.0.11",
-    "core-js": "^3.30.1",
-    "crypto-js": "^4.1.1",
-    "date-fns": "^2.29.3",
-    "default-passive-events": "^2.0.0",
-    "enquire.js": "^2.1.6",
-    "file-saver": "^2.0.5",
-    "highlight.js": "^11.7.0",
-    "js-base64": "^3.7.5",
-    "js-cookie": "^2.2.1",
-    "jsencrypt": "^3.3.2",
-    "lodash.get": "^4.4.2",
-    "mockjs": "^1.1.0",
-    "nprogress": "^0.2.0",
-    "videojs-contrib-hls": "^5.15.0",
-    "viser-vue": "^2.4.8",
-    "vue": "2.6.14",
-    "vue-i18n": "^8.28.2",
-    "vue-json-viewer": "^2.2.22",
-    "vue-router": "^3.6.5",
-    "vue-video-player": "^5.0.2",
-    "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.2",
-    "xlsx": "0.18.5"
-  },
-  "devDependencies": {
-    "@ant-design/colors": "^7.0.0",
-    "@babel/core": "^7.21.4",
-    "@vue/cli-plugin-babel": "^4.5.19",
-    "@vue/cli-plugin-eslint": "^4.5.19",
-    "@vue/cli-service": "^4.5.19",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "@vuepress/plugin-back-to-top": "^1.9.9",
-    "babel-eslint": "^10.1.0",
-    "babel-plugin-transform-remove-console": "^6.9.4",
-    "babel-polyfill": "^6.26.0",
-    "compression-webpack-plugin": "^4.0.1",
-    "deepmerge": "^4.3.1",
-    "document-register-element": "^1.14.10",
-    "eslint": "^6.8.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.3.1",
-    "eslint-plugin-standard": "^4.1.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "fast-deep-equal": "^3.1.3",
-    "less-loader": "^6.2.0",
-    "script-loader": "^0.7.2",
-    "style-resources-loader": "^1.5.0",
-    "vue-cli-plugin-style-resources-loader": "^0.1.5",
-    "vue-custom-element": "^3.3.0",
-    "vue-template-compiler": "2.6.14",
-    "vuepress": "^1.9.9",
-    "webpack": "^4.46.0",
-    "webpack-theme-color-replacer": "^1.4.7",
-    "whatwg-fetch": "^3.6.2"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 10"
-  ]
-}
+{
+  "name": "vue2-client",
+  "version": "1.7.3",
+  "private": false,
+  "scripts": {
+    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
+    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint",
+    "build:preview": "vue-cli-service build --mode preview",
+    "lint:nofix": "vue-cli-service lint --no-fix"
+  },
+  "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@antv/data-set": "^0.11.8",
+    "@antv/g2plot": "^2.4.29",
+    "@vue/babel-preset-jsx": "^1.4.0",
+    "animate.css": "^4.1.1",
+    "ant-design-vue": "^1.7.8",
+    "axios": "^0.27.2",
+    "clipboard": "^2.0.11",
+    "core-js": "^3.30.1",
+    "crypto-js": "^4.1.1",
+    "date-fns": "^2.29.3",
+    "default-passive-events": "^2.0.0",
+    "enquire.js": "^2.1.6",
+    "file-saver": "^2.0.5",
+    "highlight.js": "^11.7.0",
+    "js-base64": "^3.7.5",
+    "js-cookie": "^2.2.1",
+    "jsencrypt": "^3.3.2",
+    "lodash.get": "^4.4.2",
+    "mockjs": "^1.1.0",
+    "nprogress": "^0.2.0",
+    "videojs-contrib-hls": "^5.15.0",
+    "viser-vue": "^2.4.8",
+    "vue": "2.6.14",
+    "vue-i18n": "^8.28.2",
+    "vue-json-viewer": "^2.2.22",
+    "vue-router": "^3.6.5",
+    "vue-video-player": "^5.0.2",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.6.2",
+    "xlsx": "0.18.5"
+  },
+  "devDependencies": {
+    "@ant-design/colors": "^7.0.0",
+    "@babel/core": "^7.21.4",
+    "@vue/cli-plugin-babel": "^4.5.19",
+    "@vue/cli-plugin-eslint": "^4.5.19",
+    "@vue/cli-service": "^4.5.19",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "@vuepress/plugin-back-to-top": "^1.9.9",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "babel-polyfill": "^6.26.0",
+    "compression-webpack-plugin": "^4.0.1",
+    "deepmerge": "^4.3.1",
+    "document-register-element": "^1.14.10",
+    "eslint": "^6.8.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-standard": "^4.1.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "fast-deep-equal": "^3.1.3",
+    "less-loader": "^6.2.0",
+    "script-loader": "^0.7.2",
+    "style-resources-loader": "^1.5.0",
+    "vue-cli-plugin-style-resources-loader": "^0.1.5",
+    "vue-custom-element": "^3.3.0",
+    "vue-template-compiler": "2.6.14",
+    "vuepress": "^1.9.9",
+    "webpack": "^4.46.0",
+    "webpack-theme-color-replacer": "^1.4.7",
+    "whatwg-fetch": "^3.6.2"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 10"
+  ]
+}

package/src/base-client/components/common/CreateQuery/CreateQuery.vue

@@ -556,10 +556,10 @@ export default {
       this.form.joinArray = joinArrayObject
     },
     exportJson () {
-      const data = JSON.stringify(this.form, null, 2)
+      const data = JSON.stringify(this.result, null, 2)
       const blob = new Blob([data], { type: 'application/json' })
       FileSaver.saveAs(blob, `Query.json`)
-      this.$message.success('导出成功!')
+      this.$message.success('导出到本地成功，请复制内容到琉璃配置中心中')
     },
     viewHandle (then) {
       if (this.form.column.length === 0) {
@@ -604,7 +604,7 @@ export default {
         if (valid) {
           this.viewHandle(() => {
             // saveQueryParams
-            this.$emit('saveQueryParams', this.result)
+            this.exportJson()
           })
         }
       })

package/src/base-client/components/common/CreateSimpleFormQuery/CreateSimpleFormQuery.vue

@@ -130,7 +130,7 @@ import JsonViewer from 'vue-json-viewer'
 import FileSaver from 'file-saver'
 import { mapState } from 'vuex'
 import { post } from '@vue2-client/services/api'
-import { getConfigUrl } from '@vue2-client/services/api/common'
+import { parseConfigUrl } from '@vue2-client/services/api/common'
 
 export default {
   name: 'CreateSimpleFormQuery',
@@ -352,10 +352,10 @@ export default {
     changeJoinArray () {
     },
     exportJson () {
-      const data = JSON.stringify(this.form, null, 2)
+      const data = JSON.stringify(this.result, null, 2)
       const blob = new Blob([data], { type: 'application/json' })
       FileSaver.saveAs(blob, `SimpleFormQuery.json`)
-      this.$message.success('导出成功!')
+      this.$message.success('导出到本地成功，请复制内容到琉璃配置中心中')
     },
     viewHandle (then) {
       if (this.form.column.length === 0) {
@@ -382,13 +382,16 @@ export default {
       this.$refs.businessCreateForm.validate(valid => {
         if (valid) {
           this.viewHandle(() => {
-            const url = getConfigUrl(this.serviceName)
-            post(url, { queryObject: this.result }).then(res => {
+            const url = parseConfigUrl(this.serviceName)
+            post(url, {
+              configType: 'SIMPLE_FORM',
+              configContent: this.result
+            }).then(res => {
               this.$refs.xAddForm.init({
                 businessType: '新增',
                 title: '效果预览',
                 formItems: res.formJson,
-                serviceName: res.serviceName,
+                serviceName: this.serviceName,
                 viewMode: true
               })
             })
@@ -401,7 +404,7 @@ export default {
         if (valid) {
           this.viewHandle(() => {
             // saveQueryParams
-            this.$emit('saveSimpleFormQueryParams', this.result)
+            this.exportJson()
           })
         }
       })

package/src/base-client/components/common/FormGroupEdit/FormGroupEdit.vue

@@ -93,7 +93,7 @@ export default {
           businessType: '修改',
           title: '参数项',
           formItems: res.formJson,
-          serviceName: res.serviceName,
+          serviceName: this.serviceName,
           modifyModelData: modifyModelData
         })
       })

package/src/base-client/components/common/XAddNativeForm/XAddNativeForm.vue

@@ -69,7 +69,7 @@ export default {
       // 表单项集合
       formItems: [],
       // 服务名称
-      serviceName: 'af-system',
+      serviceName: 'system',
       // 修改有文件的表单时使用
       files: [],
       images: [],
@@ -110,10 +110,14 @@ export default {
   methods: {
     init (params) {
       const {
-        formItems, viewMode, isHandleFormKey = true, serviceName = 'af-system', isTableTemp = false, modifyModelData = {}, businessType, title, fixedAddForm = {}, getDataParams = {}, simpleFormJsonData = {}
+        formItems, viewMode, isHandleFormKey = true, serviceName = 'system', isTableTemp = false, modifyModelData = {}, businessType, title, fixedAddForm = {}, getDataParams = {}, simpleFormJsonData = {}
       } = params
       this.loaded = false
-      this.formItems = JSON.parse(JSON.stringify(formItems))
+      if (typeof formItems === 'string') {
+          this.formItems = JSON.parse(formItems)
+      } else {
+          this.formItems = JSON.parse(JSON.stringify(formItems))
+      }
       this.viewMode = viewMode
       this.isHandleFormKey = isHandleFormKey
       this.serviceName = serviceName

package/src/base-client/components/common/XAddNativeForm/index.md

@@ -1,96 +1,146 @@
-# XAddNativeForm
-
-动态新增/修改表单控件，根据JSON配置生成一个完整的可供新增/修改数据的动态表单
-
-
-## 何时使用
-
-当需要一个可供新增/修改数据的动态生成的表单时
-
-
-引用方式：
-
-```javascript
-import XAddNativeForm from '@vue2-client/base-client/components/XAddNativeForm/XAddNativeForm'
-
-export default {
-    components: {
-      XAddNativeForm
-    }
-}
-```
-
-
-
-## 代码演示
-
-```html
-<x-add-native-form
-  ref="nativeForm"
-  @onSubmit="submit"/>
-```
-
-## 构造参数，通过init方法构造
-
-| 参数              | 说明                   | 类型    | 默认值       |
-|-----------------|----------------------|-------|-----------|
-| formItems       | 表单项集合                | array | []        |
-| viewMode        | 是否为预览模式              | bool  | false     |
-| isHandleFormKey | 是否对提交表单的key进行处理      | bool  | true      |
-| serviceName     | 所属服务模块名              | string | af-system |
-| businessType    | 业务类型（新增/修改）          | string | -         |
-| title           | 业务标题                 | string | -         |
-| getDataParams   | 调用logic获取下拉框数据源的追加参数 | {}    | -         |
-| simpleFormJsonData   | 动态简易表单集合 | {}    | -         |
-
-## 事件
-| 事件        | 说明                   | 类型    | 默认值       |
-|-----------|----------------------|-------|-----------|
-| @onSubmit | 表单的提交事件              | event | -         |
-
-## 例子1
-----
-```vue
-<template>
-  <x-add-native-form
-    ref="nativeForm"
-    @onSubmit="submit"/>
-</template>
-<script>
-  import { getConfigUrl } from '@vue2-client/services/api/common'
-  export default {
-    created () {
-      this.initComponents()
-    },
-    methods: {
-      initComponents() {
-        // 获取请求配置中心的地址
-        const url = getConfigUrl('yourConfigModuleName')
-        post(url, { configName: 'yourConfigName' }).then(res => {
-          if (this.$refs.nativeForm) {
-            this.$refs.nativeForm.init({
-              formItems: res,
-              serviceName: 'af-system',
-              businessType: '新增',
-              title: '新增告警记录'
-            })
-          }
-        })
-      },
-      submit (res) {
-        post(api.addData, res.realForm).then(data => {
-          this.$message.success(res.businessType + '成功！')
-        }).catch(e => {
-          this.$message.error(res.businessType + '失败：' + e)
-        })
-      }
-    }
-  }
-</script>
-```
-
-
-注意事项
-----
-
-> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
+# XAddNativeForm
+
+动态新增/修改表单控件，根据JSON配置生成一个完整的可供新增/修改数据的动态表单
+
+
+## 何时使用
+
+当需要一个可供新增/修改数据的动态生成的表单时
+
+
+引用方式：
+
+```javascript
+import XAddNativeForm from '@vue2-client/base-client/components/XAddNativeForm/XAddNativeForm'
+
+export default {
+    components: {
+      XAddNativeForm
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-add-native-form
+  ref="nativeForm"
+  @onSubmit="submit"/>
+```
+
+## 构造参数，通过init方法构造
+
+| 参数              | 说明                   | 类型    | 默认值    |
+|-----------------|----------------------|-------|--------|
+| formItems       | 表单项集合                | array | []     |
+| viewMode        | 是否为预览模式              | bool  | false  |
+| isHandleFormKey | 是否对提交表单的key进行处理      | bool  | true   |
+| serviceName     | 所属服务模块名              | string | system |
+| businessType    | 业务类型（新增/修改）          | string | -      |
+| title           | 业务标题                 | string | -      |
+| getDataParams   | 调用logic获取下拉框数据源的追加参数 | {}    | -      |
+| simpleFormJsonData   | 动态简易表单集合 | {}    | -      |
+
+## 事件
+| 事件        | 说明                   | 类型    | 默认值       |
+|-----------|----------------------|-------|-----------|
+| @onSubmit | 表单的提交事件              | event | -         |
+
+## 例子1
+----
+```vue
+<template>
+  <x-add-native-form
+    ref="nativeForm"
+    @onSubmit="submit"/>
+</template>
+<script>
+  import { getConfigUrl } from '@vue2-client/services/api/common'
+  export default {
+    created () {
+      this.initComponents()
+    },
+    methods: {
+      initComponents() {
+        // 获取请求配置中心的地址
+        const url = getConfigUrl('yourConfigModuleName')
+        post(url, { configName: 'yourConfigName' }).then(res => {
+          if (this.$refs.nativeForm) {
+            this.$refs.nativeForm.init({
+              formItems: res,
+              serviceName: 'system',
+              businessType: '新增',
+              title: '新增告警记录'
+            })
+          }
+        })
+      },
+      submit (res) {
+        post(api.addData, res.realForm).then(data => {
+          this.$message.success(res.businessType + '成功！')
+        }).catch(e => {
+          this.$message.error(res.businessType + '失败：' + e)
+        })
+      }
+    }
+  }
+</script>
+```
+
+## JSON配置示例
+----
+`这是一个表单配置示例，通过以下配置，你会得到一个有选项的单选框，一个带校验的输入框，以及一个文本域`
+```json
+[
+  {
+    "name": "是否通气",
+    "model": "is_ventilate",
+    "keys": [
+      { "label": "是", "value": "1" },
+      { "label": "否", "value": "0" }
+    ],
+    "type": "radio",
+    "addOrEdit": "all",
+  },
+  {
+    "name": "处理人",
+    "model": "f_processor",
+    "rule": {
+       "required": true
+    },
+    "type": "input",
+    "addOrEdit": "all",
+  },
+  {
+    "name": "处理内容",
+    "model": "f_handle_content",
+    "type": "textarea",
+    "addOrEdit": "all",
+  }
+]
+```
+
+## JSON配置规范
+----
+| 参数              | 说明                   | 类型    | 默认值       |
+|-----------------|----------------------|-------|-----------|
+| name       | 表单项名称                | string | ''        |
+| model        | 表单项key              | string  | ''     |
+| rule | 表单校验      | json  | {}      |
+|   -> required | 是否必填      | bool  | false      |
+| type     | 表单类型              | string | input |
+| keys     | 当表单类型是select,radio时的选项值     | Array | [] |
+|   -> label  | 选项的字面值     | string | '' |
+|   -> value  | 选项的实际值     | string | '' |
+| addOrEdit    | 新增/修改场景          | string | all         |
+|   -> add    | 仅新增          | string | -         |
+|   -> edit    | 仅修改          | string | -         |
+|   -> all    | 全部支持          | string | -         |
+
+
+注意事项
+----
+
+> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果