vue2-client 1.8.0-9 → 1.8.1-1

package/.eslintrc.js

@@ -37,6 +37,8 @@ module.exports = {
     'vue/no-parsing-error': 0,
     'vue/name-property-casing': 0,
     'vue/multi-word-component-names': 0,
+    'vue/require-valid-default-prop': 0,
+    'no-template-curly-in-string': 0,
     'vue/no-mutating-props': 0,
     'no-tabs': 0,
     'multiline-ternary': 0,

package/jest.setup.js

@@ -1,7 +1,7 @@
-global.matchMedia = global.matchMedia || function () {
-  return {
-    matches: false,
-    addListener: function () {},
-    removeListener: function () {}
-  }
-}
+global.matchMedia = global.matchMedia || function () {
+  return {
+    matches: false,
+    addListener: function () {},
+    removeListener: function () {}
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.8.0-9",
+  "version": "1.8.1-1",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
@@ -17,6 +17,7 @@
     "@antv/data-set": "^0.11.8",
     "@antv/g2plot": "^2.4.29",
     "@vue/babel-preset-jsx": "^1.4.0",
+    "amis": "^3.4.3",
     "animate.css": "^4.1.1",
     "ant-design-vue": "^1.7.8",
     "axios": "^0.27.2",
@@ -36,6 +37,7 @@
     "lodash.get": "^4.4.2",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
+    "qs": "^6.11.2",
     "regenerator-runtime": "^0.14.0",
     "videojs-contrib-hls": "^5.15.0",
     "viser-vue": "^2.4.8",
@@ -62,6 +64,7 @@
     "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",
     "deepmerge": "^4.3.1",
     "eslint": "^8.51.0",
     "eslint-plugin-vue": "^9.17.0",

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

@@ -0,0 +1,207 @@
+<template><div>Loading...</div></template>
+
+<script>
+// import "amis/sdk/sdk.js";
+// import "amis/sdk/sdk.css";
+// import "amis/sdk/iconfont.css";
+
+// 可以不引用, 如果你不想要任何辅助类样式的话 (比如 `m-t-xs` 这种)
+// https://aisuda.bce.baidu.com/amis/zh-CN/style/index
+import 'amis/sdk/helper.css'
+import qs from 'qs'
+
+function loadScript (src, callback) {
+  const script = document.createElement('script')
+  script.setAttribute('type', 'text/javascript')
+  script.setAttribute('src', src)
+  script.onload = () => callback()
+  script.onerror = () => callback(new Error(`Failed to load ${src}`))
+  document.body.appendChild(script)
+}
+
+function loadStyles (styles) {
+  for (const path of styles) {
+    const style = document.createElement('link')
+    style.setAttribute('rel', 'stylesheet')
+    style.setAttribute('type', 'text/css')
+    style.setAttribute('href', path)
+    document.head.appendChild(style)
+  }
+}
+
+function loadSDK () {
+  return new Promise((resolve, reject) => {
+    if (window.amisRequire) {
+      resolve()
+      return
+    }
+    loadStyles([
+      '/amis/sdk/antd.css',
+      '/amis/sdk/helper.css',
+      '/amis/sdk/iconfont.css',
+    ])
+    loadScript('/amis/sdk/sdk.js', (err) => {
+      if (err) {
+        reject(err)
+        return
+      }
+      resolve()
+    })
+  })
+}
+
+export default {
+  name: 'AMISRenderer',
+  components: {},
+  props: {
+    schema: {
+      type: Object,
+      default: {
+        type: 'page',
+        body: 'Hello World!',
+      },
+    },
+    locals: {
+      type: Object,
+      default: () => ({}),
+    },
+    props: {
+      type: Object,
+      default: () => ({}),
+    },
+    env: {
+      type: Object,
+      default: () => ({
+        theme: 'antd'
+      }),
+    },
+  },
+  data () {
+    const router = this.$router
+    return {
+      // 这里面的数据所有 amis 页面都可以获取到
+      // 可以用来放一下公共数据，比如用户信息等
+      // 不要放受控数据，受控数据应该通过 data 下发
+      context: {
+        siteName: 'AMIS DEMO',
+      },
+      get location () {
+        const current = router.history.current
+        return {
+          pathname: current.path,
+          hash: current.hash,
+          query: current.query,
+          search: `?${qs.stringify(current.query)}`,
+        }
+      },
+      loading: false,
+      amisInstance: null,
+      unmounted: false,
+    }
+  },
+
+  watch: {
+    locals: function () {
+      this.updateProps()
+    },
+    props: function () {
+      this.updateProps()
+    },
+    $route: function () {
+      this.updateProps()
+    },
+  },
+  async mounted () {
+    try {
+      this.loading = true
+      await loadSDK()
+    } finally {
+      this.loading = false
+    }
+    if (this.unmounted) {
+      return
+    }
+
+    const scoped = window.amisRequire('amis/embed')
+    const { normalizeLink } = window.amisRequire('amis')
+    const router = this.$router
+    const instance = scoped.embed(
+        this.$el,
+        this.schema,
+        {
+          data: {
+            ...this.locals,
+          },
+          context: this.context,
+          location: this.location,
+
+          // todo 下发 location 对象
+          ...this.props,
+        },
+        {
+          // 覆盖 amis env
+          // 参考 https://aisuda.bce.baidu.com/amis/zh-CN/docs/start/getting-started#sdk
+          jumpTo: (to, action) => {
+            if (to === 'goBack') {
+              return router.go(-1)
+            }
+
+            to = normalizeLink(to, this.location)
+
+            if (action?.actionType === 'url') {
+              action.blank === false ? router.push(to) : window.open(to)
+              return
+            }
+
+            // 主要是支持 nav 中的跳转
+            if (action && to && action.target) {
+              window.open(to, action.target)
+              return
+            }
+
+            if (/^https?:\/\//.test(to)) {
+              window.location.replace(to)
+            } else {
+              router.push(to)
+            }
+          },
+
+          updateLocation: (location, replace) => {
+            if (location === 'goBack') {
+              return router.go(-1)
+            }
+
+            location = normalizeLink(location, this.location)
+            replace ? router.replace(location) : router.replace(location)
+          },
+
+          ...this.env,
+        },
+        () => {
+          this.$emit('ready', {
+            instance,
+          })
+        }
+    )
+
+    this.amisInstance = instance
+  },
+
+  methods: {
+    updateProps () {
+      this.amisInstance?.updateProps({
+        data: {
+          ...this.locals,
+        },
+        context: this.context,
+        ...this.props,
+      })
+    },
+  },
+
+  destroyed () {
+    this.unmounted = true
+    this.amisInstance?.unmount()
+  },
+}
+</script>

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

@@ -343,6 +343,10 @@ export default {
     toEditJson: {
       type: Object,
       default: () => {}
+    },
+    saveExportJson: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
@@ -484,6 +488,7 @@ export default {
       this.result = {}
     },
     onClose () {
+      this.$emit('close')
       this.$emit('update:visible', false)
     },
     onModelClose () {
@@ -502,7 +507,7 @@ export default {
     },
     itemHandle (item, type) {
       this.itemMap[item.key] = item
-      if (type === '新增') {
+      if (this.type === '新增') {
         this.form.column.push(item)
       } else {
         this.$set(this.form.column, this.selectIndex, item)
@@ -518,6 +523,7 @@ export default {
       this.$refs.queryItem.addColumnItemExecute()
     },
     editColumnItem (key, index) {
+      this.type = '修改'
       if (this.itemMap[key]) {
         this.$refs.queryItem.editColumnItemExecute(this.itemMap[key])
         this.selectIndex = index
@@ -608,8 +614,11 @@ export default {
       this.$refs.businessCreateForm.validate(valid => {
         if (valid) {
           this.viewHandle(() => {
-            // saveQueryParams
-            this.exportJson()
+            if (this.saveExportJson) {
+              this.exportJson()
+            } else {
+              this.$emit('saveQueryParams', this.result)
+            }
           })
         }
       })

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

@@ -653,6 +653,7 @@ export default {
         rule: {
           required: 'false'
         },
+        column: [],
         selectKey: undefined,
         queryType: '=',
         formType: 'input',
@@ -953,7 +954,7 @@ export default {
     },
     itemHandleItem (item, type) {
       this.itemMap[item.key] = item
-      if (type === '新增') {
+      if (this.type === '新增') {
         this.item.column.push(item)
       } else {
         this.$set(this.item.column, this.selectIndex, item)

package/src/config/default/setting.config.js

@@ -41,7 +41,7 @@ module.exports = {
     notice: true
   },
   // 旧系统路径
-  iframeSrc: '../singlepage/page.html',
+  iframeSrc: '/singlepage/index.html',
   // 兼容旧版本 V3(最新V3产品)  OA(公司OA)
   compatible: 'V3',
   // 路由资源名称

package/src/pages/AMisDemo/AMisDemo.vue

@@ -0,0 +1,166 @@
+<template>
+  <amis-renderer :schema="schema" :locals="locals" />
+</template>
+<script>
+import AMISRenderer from '@vue2-client/base-client/components/common/AMisRender'
+
+const schema = {
+  title: '${siteName}：这是 AMIS 表格页面示例',
+  remark: '嘿，不保证数据准确性',
+  type: 'page',
+  body: {
+    type: 'crud',
+    draggable: true,
+    api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample',
+    keepItemSelectionOnPageChange: true,
+    autoGenerateFilter: true,
+    bulkActions: [
+      {
+        type: 'button',
+        label: '批量删除',
+        actionType: 'ajax',
+        api: 'delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/${ids|raw}',
+        confirmText: '确定要批量删除?',
+      },
+      {
+        type: 'button',
+        label: '批量修改',
+        actionType: 'dialog',
+        dialog: {
+          title: '批量编辑',
+          name: 'sample-bulk-edit',
+          body: {
+            type: 'form',
+            api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/bulkUpdate2',
+            body: [
+              {
+                type: 'hidden',
+                name: 'ids',
+              },
+              {
+                type: 'input-text',
+                name: 'engine',
+                label: 'Engine',
+              },
+            ],
+          },
+        },
+      },
+    ],
+    quickSaveApi:
+        'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/bulkUpdate',
+    quickSaveItemApi:
+        'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/$id',
+    headerToolbar: [
+      'bulkActions',
+      {
+        type: 'button',
+        label: '重置测试数据',
+        actionType: 'ajax',
+        size: 'sm',
+        api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/reset',
+      },
+      'export-excel',
+      {
+        type: 'tpl',
+        tpl: '一共有 ${count} 行数据。',
+        className: 'v-middle',
+      },
+      {
+        type: 'columns-toggler',
+        align: 'right',
+        draggable: true,
+      },
+      {
+        type: 'drag-toggler',
+        align: 'right',
+      },
+    ],
+    footerToolbar: ['statistics', 'switch-per-page', 'pagination'],
+    columns: [
+      {
+        name: 'id',
+        label: 'ID',
+        width: 20,
+        sortable: true,
+        type: 'text',
+        searchable: {
+          type: 'input-text',
+          name: 'id',
+          label: '主键',
+          placeholder: '输入id',
+        },
+      },
+      {
+        name: 'browser',
+        label: 'Browser',
+        searchable: {
+          type: 'select',
+          name: 'browser',
+          label: '浏览器',
+          placeholder: '选择浏览器',
+          options: [
+            {
+              label: 'Internet Explorer ',
+              value: 'ie',
+            },
+            {
+              label: 'AOL browser',
+              value: 'aol',
+            },
+            {
+              label: 'Firefox',
+              value: 'firefox',
+            },
+          ],
+        },
+      },
+      {
+        name: 'platform',
+        label: '平台',
+        popOver: {
+          trigger: 'hover',
+          body: {
+            type: 'tpl',
+            tpl: '就是为了演示有个叫 popOver 的功能',
+          },
+        },
+        sortable: true,
+        type: 'text',
+      },
+      {
+        name: 'grade',
+        label: 'CSS 等级',
+        type: 'select',
+        options: ['A', 'B', 'C', 'D', 'X'],
+      },
+      {
+        type: 'operation',
+        label: '操作',
+        width: 100,
+        buttons: [
+          {
+            type: 'button',
+            actionType: 'ajax',
+            label: '删除',
+            confirmText: '您确认要删除?',
+            api: 'delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/$id',
+          },
+        ],
+      },
+    ],
+  },
+}
+
+export default {
+  name: 'AMisDemo',
+  components: {
+    'amis-renderer': AMISRenderer,
+  },
+  computed: {},
+  data: () => ({
+    schema: schema,
+    locals: {},
+  }),
+}
+</script>

package/src/pages/CreateQueryPage.vue

@@ -3,6 +3,7 @@
     <create-query
       :visible.sync="visible"
       :to-edit-json="toEditJson"
+      :saveExportJson="true"
     />
     <create-simple-form-query
       :visible.sync="createSimpleFormVisible"

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

@@ -33,6 +33,8 @@ routerResource.submitTicket = () => import('@vue2-client/pages/system/ticket')
 routerResource.settings = () => import('@vue2-client/pages/system/settings')
 // 查询配置生成工具
 routerResource.createQuery = () => import('@vue2-client/pages/CreateQueryPage')
+// AMIS示例页面
+routerResource.amisDemo = () => import('@vue2-client/pages/AMisDemo/AMisDemo.vue')
 
 // 基础路由组件注册
 const routerMap = {

package/src/utils/routerUtil.js

@@ -78,7 +78,7 @@ function parseRoutes (routesConfig, routerMap) {
         item.path = encodeURI(item.name)
       }
       // 当没在动态路由对象中找到时, 不添加到路由
-      if (!router) return
+      // if (!router) return
       routeCfg = item
     }
     if (!router) {

package/vue.config.js

@@ -5,6 +5,7 @@ const { getThemeColors, modifyVars } = require('./src/utils/themeUtil')
 const { resolveCss } = require('./src/utils/theme-color-replacer-extend')
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+const CopyPlugin = require('copy-webpack-plugin')
 
 const productionGzipExtensions = ['js', 'css']
 const isProd = process.env.NODE_ENV === 'production'
@@ -72,6 +73,13 @@ module.exports = {
       resourceRegExp: /^\.\/locale$/,
       contextRegExp: /moment$/
     }))
+
+    config.plugins.push(
+        new CopyPlugin({
+          patterns: [{ from: 'node_modules/amis/sdk', to: 'amis/sdk' }],
+        })
+    )
+
     // 生产环境下将资源压缩成gzip格式
     if (isProd) {
       // add `CompressionWebpack` plugin to webpack plugins