vue2-client 1.8.4 → 1.8.5

package/.eslintrc.js

@@ -40,6 +40,7 @@ module.exports = {
     'vue/require-valid-default-prop': 0,
     'no-template-curly-in-string': 0,
     'vue/no-mutating-props': 0,
+    'no-useless-escape': 0,
     'no-tabs': 0,
     'multiline-ternary': 0,
     'object-shorthand': 0,

package/docs/index.md

@@ -12,7 +12,8 @@
 * [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)
-
+* [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)

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "vue2-client",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "private": false,
   "scripts": {
-    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
-    "mac-serve": "vue-cli-service serve --mode mac",
+    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
+    "mac-serve": "vue-cli-service serve --no-eslint --mode mac",
     "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
@@ -63,8 +63,8 @@
     "babel-jest": "^26.6.3",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "compression-webpack-plugin": "^10.0.0",
-    "css-minimizer-webpack-plugin": "^5.0.1",
     "copy-webpack-plugin": "^11.0.0",
+    "css-minimizer-webpack-plugin": "^5.0.1",
     "deepmerge": "^4.3.1",
     "eslint": "^8.51.0",
     "eslint-plugin-vue": "^9.17.0",
@@ -74,6 +74,7 @@
     "jest-transform-stub": "^2.0.0",
     "less-loader": "^6.2.0",
     "script-loader": "^0.7.2",
+    "ignore-loader": "^0.1.2",
     "style-resources-loader": "^1.5.0",
     "vue-cli-plugin-style-resources-loader": "^0.1.5",
     "vue-jest": "^4.0.1",

package/src/App.vue

@@ -1,98 +1,12 @@
 <template>
-  <a-config-provider :locale="locale" :get-popup-container="popContainer">
+  <div id="app">
     <router-view/>
-  </a-config-provider>
+  </div>
 </template>
 
 <script>
-import { enquireScreen } from '@vue2-client/utils/util'
-import { mapState, mapMutations } from 'vuex'
-import themeUtil from '@vue2-client/utils/themeUtil'
-import { getI18nKey } from '@vue2-client/utils/routerUtil'
-import { setSystemVersion } from '@vue2-client/utils/request'
-
 export default {
-  name: 'App',
-  data () {
-    return {
-      locale: {}
-    }
-  },
-  created () {
-    this.setHtmlTitle()
-    this.setLanguage(this.lang)
-    enquireScreen(isMobile => this.setDevice(isMobile))
-  },
-  mounted () {
-    this.setWeekModeTheme(this.weekMode)
-    // 设置系统版本
-    setSystemVersion(this.compatible)
-  },
-  watch: {
-    weekMode (val) {
-      this.setWeekModeTheme(val)
-    },
-    lang (val) {
-      this.setLanguage(val)
-      this.setHtmlTitle()
-    },
-    $route () {
-      this.setHtmlTitle()
-    },
-    'theme.mode': {
-      immediate: true,
-      handler: function (val) {
-        const closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`)
-        themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage)
-      }
-    },
-    'theme.color': {
-      immediate: true,
-      handler: 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', 'compatible'])
-  },
-  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')
-    }
-  }
+  name: 'App'
 }
 </script>
 

package/src/base-client/components/common/AMisRender/index.vue

@@ -7,8 +7,11 @@
 
 // 可以不引用, 如果你不想要任何辅助类样式的话 (比如 `m-t-xs` 这种)
 // https://aisuda.bce.baidu.com/amis/zh-CN/style/index
-import 'amis/sdk/helper.css'
+// import 'amis/sdk/helper.css'
 import qs from 'qs'
+import Vue from 'vue'
+import Index from '@vue2-client/base-client/components/index.js'
+import locale from 'ant-design-vue/es/locale-provider/zh_CN'
 
 function loadScript (src, callback) {
   const script = document.createElement('script')
@@ -29,6 +32,35 @@ function loadStyles (styles) {
   }
 }
 
+// 动态导入组件
+function CustomComponent (props) {
+  const React = window.amisRequire('react')
+  const dom = React.useRef(null)
+  const store = Vue.$store
+  const router = Vue.$router
+  const i18n = Vue.$i18n
+  React.useEffect(function () {
+    new Vue({
+      router,
+      store,
+      i18n,
+      render: h => h('a-config-provider', {
+          props: {
+            locale: locale,
+            popContainer: document.getElementById('popContainer')
+          }
+        }, [
+          h(Index[props.$schema.type], {
+            props: props.$schema
+          })
+      ])
+    }).$mount(dom.current)
+  })
+  return React.createElement('div', {
+    ref: dom
+  })
+}
+
 function loadSDK () {
   return new Promise((resolve, reject) => {
     if (window.amisRequire) {
@@ -36,7 +68,7 @@ function loadSDK () {
       return
     }
     loadStyles([
-      '/amis/sdk/antd.css',
+      '/amis/sdk/sdk.css',
       '/amis/sdk/helper.css',
       '/amis/sdk/iconfont.css',
     ])
@@ -71,9 +103,7 @@ export default {
     },
     env: {
       type: Object,
-      default: () => ({
-        theme: 'antd'
-      }),
+      default: () => ({}),
     },
   },
   data () {
@@ -122,9 +152,13 @@ export default {
       return
     }
 
+    const amisLib = window.amisRequire('amis')
     const scoped = window.amisRequire('amis/embed')
-    const { normalizeLink } = window.amisRequire('amis')
+    const { normalizeLink } = amisLib
     const router = this.$router
+    amisLib.Renderer({
+      test: new RegExp(`(^|\/)${this.schema.type}`)
+    })(CustomComponent)
     const instance = scoped.embed(
         this.$el,
         this.schema,
@@ -189,6 +223,7 @@ export default {
 
   methods: {
     updateProps () {
+      // eslint-disable-next-line no-unused-expressions
       this.amisInstance?.updateProps({
         data: {
           ...this.locals,
@@ -201,6 +236,7 @@ export default {
 
   destroyed () {
     this.unmounted = true
+    // eslint-disable-next-line no-unused-expressions
     this.amisInstance?.unmount()
   },
 }

package/src/base-client/components/common/AmapMarker/AmapPointRendering.vue

@@ -19,7 +19,7 @@ export default {
     describeList: {
       type: Array,
       // eslint-disable-next-line vue/require-valid-default-prop
-      default: () => { return [ ] } // lng:描述信息 lat:描述信息对应的值的字段名 { describe: '用户名称', field: 'name' }
+      default: () => { return [] } // lng:描述信息 lat:描述信息对应的值的字段名 { describe: '用户名称', field: 'name' }
     },
     // 需要渲染的点位数据
     markers: {
@@ -30,7 +30,7 @@ export default {
     imgurl: {
       type: String,
       default: () => {
-        return "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"
+        return 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
       }
     },
     mapStyle: {
@@ -105,7 +105,7 @@ export default {
           extData: this.markers
         })
         marker.on('click', (e) => {
-          if(e.target.getExtData() && e.target.getExtData().lng){
+          if (e.target.getExtData() && e.target.getExtData().lng) {
             this.infoWindow.setContent(document.getElementById('amap_point_rendering_template'))
             this.infoWindow.open(this.map, [e.target.getExtData().lng, e.target.getExtData().lat])
           }

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

@@ -704,7 +704,7 @@ export default {
       this.dataModeArrayData = this.item.dataModeArray
       this.flashModal()
 
-      for (const columnItem of this.item.column ?? []) {
+      for (const columnItem of this.item.column) {
         this.itemMap[columnItem.key] = Object.assign({
           key: '',
           title: '',

package/src/base-client/components/common/JSONToTree/jsontotree.vue

@@ -163,8 +163,6 @@ export default {
           break
         } else if (arr[s].children && arr[s].children.length > 0) { // 递归条件
           this.searchitem(option, arr[s].children)
-        } else {
-
         }
       }
     },
@@ -258,12 +256,10 @@ export default {
   float: left;
 }
 .ant-card-body {
-  :global {
-    .ant-tree {
-      line-height: 3;
-      li {
-        position: relative;
-      }
+  .ant-tree {
+    line-height: 3;
+    li {
+      position: relative;
     }
   }
 }

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

@@ -0,0 +1,149 @@
+<template>
+  <a-tree :treeData="treeData" :expandedKeys="expandedKeys" :selectedKeys="selectedKeys" @expand="handleExpand" @select="handleSelect"></a-tree>
+</template>
+
+<script>
+import { Tree } from 'ant-design-vue'
+import Vue from 'vue'
+import { getConfig, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  components: {
+    'a-tree': Tree,
+  },
+  props: {
+    configContent: {
+      type: Object,
+      default: {}
+    },
+    systemName: {
+      type: String,
+      default: ''
+    },
+    configName: {
+      type: String,
+      default: ''
+    },
+  },
+  data () {
+    return {
+      treeData: [],
+      expandedKeys: [],
+      selectedKeys: [],
+      actualConfig: null,
+    }
+  },
+  async mounted () {
+    try {
+      this.actualConfig = await getConfig(this.configContent, this.configName, this.systemName)
+    } catch (error) {
+      console.error('Failed to get config:', error)
+    }
+    // 根据配置文件中的tableStructure字段生成树组件结构
+    this.generateTreeData()
+  },
+  methods: {
+    async generateTreeData () {
+      try {
+        // 定义逻辑名称和参数，这里需要根据实际情况来填写
+        const logicName = 'get_root_nodes' // 例如: 'GenerateTreeStructure'
+        const parameters = {
+          // 你需要传递给后端逻辑的参数
+          // 例如: key1: 'value1', key2: 'value2'
+        }
+
+        // 调用通用业务逻辑函数
+        const response = await runLogic(logicName, parameters)
+
+        // 检查返回的数据是否有效，这将依赖于你的后端服务发送什么样的响应
+        if (response && response.data) {
+          // 如果响应中有数据，则将其设置为树组件的数据
+          this.treeData = response.data // 或者根据实际的返回结构调整，比如 response.data.treeStructure
+        } else {
+          // 处理没有返回数据的情况，可以是设置默认值或抛出错误
+          throw new Error('No data returned from the logic execution')
+        }
+      } catch (error) {
+        // 处理调用逻辑或设置数据时出现的错误
+        console.error('There was an error generating the tree data:', error)
+        // 这里可以进行更多的错误处理，比如显示一个错误消息到UI界面
+      }
+    },
+    async handleExpand (expandedKeys, { expanded, node }) {
+      console.log('handleExpand', expandedKeys, expanded, node)
+      // 更新展开的节点列表，由于这不依赖于异步操作，因此可以立即设置
+      this.expandedKeys = expandedKeys
+
+      if (expanded) {
+        try {
+          // 向后端发送请求，获取子节点数据
+          const path = this.getNodePath(node)
+          const childNodes = await this.fetchChildNodes(path) // 等待子节点数据
+
+          // 将子节点数据添加到当前节点下
+          Vue.set(node, 'children', childNodes)
+
+          // 现在，我们需要确保每个子节点都有一个指向其父节点的引用。
+          // 这是必须的，因为 'getNodePath' 方法依赖于 'parentNode' 属性来重建节点的完整路径。
+          if (childNodes && childNodes.length) {
+            childNodes.forEach(child => {
+              // 由于我们直接修改了节点，这可能不会触发视图的自动更新。
+              // 如果你遇到了这个问题，你可能需要找到一种方法来手动触发组件的重新渲染。
+              child.parentNode = node
+            })
+          }
+        } catch (error) {
+          // 处理或记录错误
+          console.error('An error occurred:', error)
+          // 这里可以执行其他错误处理逻辑，比如向用户显示错误消息
+        }
+      }
+      // 如果没有展开，就没有更多要做的，因为 this.expandedKeys 已经更新
+    },
+    handleSelect (selectedKeys, { selected, node }) {
+      if (selected) {
+        // 触发节点选中事件，传递节点的完整路径
+        const path = this.getNodePath(node)
+        this.$emit('nodeSelected', path)
+      } else {
+        this.selectedKeys = selectedKeys
+      }
+    },
+    getNodePath (node) {
+      // 获取节点的完整路径
+      let path = node.title
+      let parent = node.parentNode
+      while (parent) {
+        path = parent.title + '/' + path
+        parent = parent.parentNode
+      }
+      return path
+    },
+    async fetchChildNodes (path) {
+      // 定义逻辑名称和参数 - 根据你的后端逻辑具体定义这些值
+      const logicName = 'get_child_nodes' // 例如，这可能是后端服务识别的逻辑名称
+      const parameters = {
+        path: path, // 参数是什么取决于你的后端服务需要什么
+      }
+
+      try {
+        // 调用通用业务逻辑函数并等待结果
+        const response = await runLogic(logicName, parameters)
+
+        // 确保响应包含我们期望的数据 - 如果你的后端服务使用不同的结构，你可能需要调整这里
+        if (response && response.data) {
+          return Promise.resolve(response.data) // 返回子节点数据
+        } else {
+          // 如果响应格式不符合预期，可以抛出一个错误或返回一个失败的Promise
+          // eslint-disable-next-line prefer-promise-reject-errors
+          return Promise.reject('Received unexpected response format')
+        }
+      } catch (error) {
+        // 如果请求失败（例如网络错误、服务器错误等），我们捕获这个错误并将其向上传递
+        console.error('Error fetching child nodes:', error)
+        return Promise.reject(error.message || 'Error fetching child nodes')
+      }
+    }
+  },
+}
+</script>

package/src/base-client/components/common/Tree/index.js

@@ -0,0 +1,2 @@
+import Tree from './Tree'
+export default Tree

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

@@ -48,7 +48,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style scoped>
 .retryCard {
   text-align: center;
 }

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

@@ -24,7 +24,7 @@
           </div>
         </div>
         <!-- actions -->
-        <template v-slot:extra>
+        <template #extra>
           <a-button-group style="margin-right: 4px;">
             <a-button :loading="loading" type="dashed" @click="initView('1')">刷新</a-button>
           </a-button-group>
@@ -32,7 +32,7 @@
             <slot name="extraActions" :datas="details"></slot>
           </a-button-group>
         </template>
-        <template v-slot:footer>
+        <template #footer>
           <slot name="footerContent" :datas="details"></slot>
         </template>
       </a-page-header>

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

@@ -57,7 +57,7 @@ import XForm from '@vue2-client/base-client/components/common/XForm'
 import XAddForm from '@vue2-client/base-client/components/common/XAddForm'
 import XTable from '@vue2-client/base-client/components/common/XTable'
 import XImportExcel from '@vue2-client/base-client/components/common/XImportExcel'
-import { getConfig, getConfigByLogic, parseConfig } from '@vue2-client/services/api/common'
+import { getConfigByName, getConfigByLogic, parseConfig } from '@vue2-client/services/api/common'
 import { mapState } from 'vuex'
 
 export default {
@@ -186,7 +186,7 @@ export default {
       }
     },
     getConfig () {
-      getConfig(this.queryParamsName, this.serviceName, (res) => {
+      getConfigByName(this.queryParamsName, this.serviceName, (res) => {
         this.updateComponents(res)
       })
     },