npm - @lambo-design/variant-form - Versions diffs - 2.2.9-beta.0 → 2.2.9-beta.1 - Mend

@lambo-design/variant-form 2.2.9-beta.0 → 2.2.9-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/dist/lib/demo.html ADDED Viewed

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<title>VFormDesigner demo</title>
+<script src="./VFormDesigner.umd.js"></script>
+<link rel="stylesheet" href="./VFormDesigner.css">
+<script>
+console.log(VFormDesigner)
+</script>

package/dist/lib/img/indicator-card-header.7291bcc9.png ADDED Viewed

Binary file

package/dist/lib/img/lan_navigator.53090c9d.png ADDED Viewed

Binary file

package/dist/lib/img/layout-header-bg-canglan.b1d97e4e.png ADDED Viewed

Binary file

package/dist/lib/img/layout-header-bg-cuiwei.67019b6d.png ADDED Viewed

Binary file

package/dist/lib/img/lv_navigator.f07fb393.png ADDED Viewed

Binary file

package/index_template/index_dev.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="renderer" content="webkit">
+    <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>

package/index_template/index_prod.html ADDED Viewed

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="renderer" content="webkit">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <!-- 禁止浏览器缓存index.html begin -->
+    <meta http-equiv="Expires" content="0">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Cache-control" content="no-cache">
+    <meta http-equiv="Cache" content="no-cache">
+    <!-- 禁止浏览器缓存index.html end -->
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/index.min.css">
+  </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 -->
+    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
+    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/index.min.js"></script>
+  </body>
+</html>

package/install-render.js ADDED Viewed

@@ -0,0 +1,29 @@
+import VFormRender from '@/components/form-render/index.vue'
+import {loadExtension} from "@/extension/extension-loader"
+import axios from "axios"
+loadExtension()
+VFormRender.install = function (Vue) {
+  Vue.component(VFormRender.name, VFormRender)
+}
+const components = [
+  VFormRender
+]
+const install = (Vue) => {
+  window.axios = axios
+  components.forEach(component => {
+    Vue.component(component.name, component)
+  })
+}
+if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主动调用install方法！！ */
+  install(window.Vue);
+}
+export default {
+  install,
+  VFormRender
+}

package/install.js ADDED Viewed

@@ -0,0 +1,41 @@
+import axios from 'axios'
+import VFormDesigner from '@/components/form-designer/index.vue'
+import VFormRender from '@/components/form-render/index.vue'
+import {loadExtension} from "@/extension/extension-loader"
+import '@/utils/directive'
+import '@/icons'
+import '@/iconfont/iconfont.css'
+loadExtension()
+VFormDesigner.install = function (Vue) {
+  Vue.component(VFormDesigner.name, VFormDesigner)
+}
+VFormRender.install = function (Vue) {
+  Vue.component(VFormRender.name, VFormRender)
+}
+const components = [
+  VFormDesigner,
+  VFormRender
+]
+const install = (Vue) => {
+  window.axios = axios
+  components.forEach(component => {
+    Vue.component(component.name, component)
+  })
+}
+if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主动调用install方法！！ */
+  install(window.Vue);
+}
+export default {
+  install,
+  VFormDesigner,
+  VFormRender
+}

package/jsconfig.json ADDED Viewed

@@ -0,0 +1,10 @@
+{
+  "######": "本文件用于解决IDEA无法识别Vue项目@符号的问题",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

package/license.txt ADDED Viewed

@@ -0,0 +1,8 @@
+# Variant Form 许可条款 1.0
+1. 免责声明：任何情况下根据任何法律，本作者不对用户因使用VariantForm产生的侵权、数据损坏丢失、软硬件故障和违法犯罪等问题承担任何责任；
+2. 禁止任何用户对VariantForm进行简单包装后，即声称为自己的产品、销售源码获利；
+3. VariantForm为开源项目，获取到源代码的用户可自由修改源码供自身开发使用，可分发build构建后的库代码，也可分发VariantForm源代码（需保留文件头部的作者声明），本作者保留VariantForm的原始著作权；
+4. 个人或公司用户均可将VariantForm项目应用于商业项目开发，为支持本项目持续开发，请尽量购买VariantForm Pro版源码订阅更新服务；
+5. 如果你不同意本许可条款，请勿使用VariantForm；任何情况下，一旦实际使用VariantForm，则代表你已确定完全同意本许可条款；
+6. 条款内容结束。

package/package.json CHANGED Viewed

@@ -1,8 +1,8 @@
 {
   "name": "@lambo-design/variant-form",
-  "version": "2.2.9-beta.0",
+  "version": "2.2.9-beta.1",
   "description": "VForm Online Form Designer",
-  "main": "index.js",
+  "main": "dist/VFormDesigner.umd.min.js",
   "author": "lambo",
   "license": "ISC",
   "publishConfig": {
@@ -17,7 +17,8 @@
     "file-saver": "^2.0.5",
     "vue": "^2.6.11",
     "vue2-editor": "^2.10.2",
-    "vuedraggable": "^2.24.3"
+    "vuedraggable": "^2.24.3",
+    "@lambo-design/shared": "^1.0.0-beta.282"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -59,6 +60,11 @@
     "release-minor": "standard-version --release-as minor",
     "release-patch": "standard-version --release-as patch",
     "release-beta": "standard-version --prerelease beta",
-    "re-publish": "pnpm publish --access public --no-git-checks"
+    "re-publish": "pnpm lib && pnpm publish --access public --no-git-checks",
+    "serve": "vue-cli-service serve --open src/main.js",
+    "build": "vue-cli-service build --report --dest dist/build",
+    "lib": "vue-cli-service build --report --target lib --dest dist/lib --name VFormDesigner install.js",
+    "lib-render": "vue-cli-service build --report --target lib --dest dist/lib-render --name VFormRender install-render.js",
+    "lint": "vue-cli-service lint"
   }
 }

package/public/favicon.ico ADDED Viewed

Binary file

package/public/index.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="renderer" content="webkit">
+    <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>

package/src/App.vue ADDED Viewed

@@ -0,0 +1,45 @@
+<template>
+  <div id="app">
+    <VFormDesigner ref="vfDesignerRef" :global-dsv="globalDsv">
+      <template #customToolButtons>
+        <el-button type="text" @click="printFormJson">测试按钮</el-button>
+      </template>
+    </VFormDesigner>
+  </div>
+</template>
+<script>
+import VFormDesigner from './components/form-designer/index.vue'
+export default {
+  name: 'App',
+  components: {
+    VFormDesigner,
+  },
+  data() {
+    return {
+      designerConfig: {
+        resetFormJson: false,
+        toolbarMaxWidth: 490,
+      },
+      //全局数据源变量
+      globalDsv: {
+        testApiHost: 'http://www.test.com/api',
+        testPort: 8080,
+      },
+    }
+  },
+  methods: {
+    printFormJson() {
+      console.log( this.$refs.vfDesignerRef.getFormJson() )
+    }
+  }
+}
+</script>
+<style lang="scss">
+  #app {
+    height: 100%;
+  }
+</style>

package/src/components/form-designer/designer.js CHANGED Viewed

@@ -13,6 +13,7 @@ import {VARIANT_FORM_VERSION} from "@/utils/config"
 export function createDesigner(vueInstance) {
   let defaultFormConfig = deepClone( getDefaultFormConfig() )
   return {
     widgetList: [],
     formConfig: {cssCode: ''},

package/src/components/form-designer/form-widget/field-widget/organ-select-widget.vue ADDED Viewed

@@ -0,0 +1,254 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <div class="organ-select-wrapper">
+      <el-input
+          ref="inputRef"
+          v-model="fieldModel"
+          :placeholder="field.options.placeholder"
+          :size="field.options.size"
+          readonly
+          @click="popoverVisible = true"
+          @focus="popoverVisible = true">
+        <i slot="suffix" class="el-icon-s-grid el-input__icon" @click.stop="handleClickCustomEvent"></i>
+      </el-input>
+      <el-popover
+          v-model="popoverVisible"
+          placement="bottom-start"
+          trigger="click"
+          :width="popoverWidth">
+        <div v-if="!treeData || treeData.length === 0">
+          暂无数据，请选择根组织！
+        </div>
+        <div class="org-selector-container">
+          <el-tree
+              v-if="popoverVisible && treeData.length > 0"
+              ref="orgTree"
+              lazy
+              :load="loadNode"
+              :data="treeData"
+              :props="defaultProps"
+              :show-checkbox="field.options.allowMultiple"
+              check-strictly
+              @node-click="handleNodeClick"
+              @check="handleCheck"
+              style="margin-top: 10px; max-height: 400px; overflow: auto">
+          </el-tree>
+        </div>
+      </el-popover>
+    </div>
+    <el-dialog :title="field.options.label || '组织'" :visible.sync="dialogVisible" append-to-body>
+      <div v-if="!treeData || treeData.length === 0">
+        暂无数据，请选择根组织！
+      </div>
+      <el-tree
+          v-if="dialogVisible && treeData.length > 0"
+          ref="dialogTree"
+          lazy
+          :load="loadNode"
+          :data="treeData"
+          :props="defaultProps"
+          :show-checkbox="field.options.allowMultiple"
+          check-strictly
+          @node-click="handleNodeClick"
+          @check="handleCheck"
+          style="margin-top: 10px; height: 60vh; overflow: auto">
+      </el-tree>
+      <template slot="footer">
+        <div class="dialog-footer">
+          <el-button type="primary" @click="onOk">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </form-item-wrapper>
+</template>
+<script>
+import FormItemWrapper from './form-item-wrapper'
+import emitter from '@/utils/emitter'
+import i18n, {translate} from "@/utils/i18n";
+import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+import ajax from "@lambo-design/shared/utils/ajax";
+export default {
+  name: "organ-select-widget",
+  componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+  mixins: [emitter, fieldMixin, i18n],
+  props: {
+    field: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+    designer: Object,
+    designState: {
+      type: Boolean,
+      default: false
+    },
+    subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+      type: Number,
+      default: -1
+    },
+    subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+      type: Number,
+      default: -1
+    },
+    subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+      type: String,
+      default: ''
+    },
+  },
+  components: {
+    FormItemWrapper,
+  },
+  inject: ['refList', 'formConfig', 'getDesignerConfig', 'globalOptionData', 'globalModel'],
+  data() {
+    return {
+      serverContext: '/dida-manage-server',
+      oldFieldValue: null, //field组件change之前的值
+      fieldModel: null,
+      rules: [],
+      treeData: [],
+      filteredTreeData: [],
+      popoverVisible: false,
+      dialogVisible: false,
+      searchText: '',
+      defaultProps: {
+        children: 'children',
+        label: 'bizOrganName',
+        isLeaf: (data, node) => {
+          return data.isLeaf === 'true';
+        }
+      },
+      popoverWidth: 0
+    }
+  },
+  computed: {
+  },
+  beforeCreate() {
+    /* 这里不能访问方法和属性！！ */
+  },
+  created() {
+    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+       需要在父组件created中初始化！！ */
+    this.initFieldModel()
+    this.registerToRefList()
+    this.initEventHandler()
+    this.buildFieldRules()
+    this.handleOnCreated()
+  },
+  mounted() {
+    this.handleOnMounted()
+    this.initData()
+    //点击其他地方隐藏popover
+    this.documentClickHandler = (e) => {
+      // 判断popover是否可见
+      if (this.popoverVisible) {
+        // 获取popover元素
+        const popoverEl = document.querySelector('.el-popover[aria-hidden="false"]');
+        // 获取输入框元素
+        const inputEl = this.$refs.inputRef.$el;
+        // 判断点击位置是否在popover内部或输入框内部
+        if (popoverEl && !popoverEl.contains(e.target) && !inputEl.contains(e.target)) {
+          this.popoverVisible = false;
+        }
+      }
+    };
+    document.addEventListener('click', this.documentClickHandler);
+  },
+  beforeDestroy() {
+    this.unregisterFromRefList()
+    document.removeEventListener('click', this.documentClickHandler);
+  },
+  methods: {
+    initData(){
+      this.$nextTick(() => {
+        const inputWidth = this.$refs.inputRef.$el.offsetWidth
+        const popoverPadding = 24
+        this.popoverWidth = Math.max(0, inputWidth - popoverPadding)
+      })
+      this.getOrgan()
+    },
+    getOrgan(){
+      if (this.field.options.rootOrgan){
+        const params = {
+          organId: this.field.options.rootOrgan,
+          organTreeType: this.field.options.organTreeType || '00',
+        }
+        ajax.get(this.serverContext + '/manage/organ/getOrganDetail', {params: params}).then((resp) => {
+          if (resp.data && (resp.data.code == 1 || resp.data.code == 200)){
+            this.treeData = [resp.data.data]
+          }
+        }).catch((err) => {
+          console.error(err)
+        });
+      }
+    },
+    async loadNode(node, resolve) {
+      if (node.level === 0) {
+        const roots = this.treeData.filter(item => item.bizOrganId === this.field.options.rootOrgan)
+        return resolve(roots)
+      }
+      const params = {
+        parentId: node.data.bizOrganId,
+        organTreeType: this.field.options.organTreeType || '00',
+        manageUnitId: this.field.options.manageUnitId
+      }
+      ajax.get(this.serverContext + '/manage/organ/getOrgChildren', {params: params}).then((resp) => {
+        if (resp.data && (resp.data.code == 1 || resp.data.code == 200)){
+          resolve(resp.data.data)
+        }
+      }).catch((err) => {
+        console.error(err)
+      });
+    },
+    handleCheck(data, checked) {
+      if (!this.field.options.allowMultiple) return
+      this.fieldModel = checked ? checked.checkedNodes.map(node => node.bizOrganName).join(',') : '';
+    },
+    handleNodeClick(data) {
+      if (this.field.options.allowMultiple) return
+      this.fieldModel = data.bizOrganName
+      this.popoverVisible = false
+    },
+    handleClickCustomEvent(event) {
+      this.dialogVisible = true
+    },
+    onOk(event) {
+      this.dialogVisible = false
+    }
+  },
+  watch: {
+    'field.options': {
+      handler(newVal, oldVal) {
+        this.initData();
+      },
+      deep: true
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.organ-select-wrapper {
+  position: relative;
+  width: 100%;
+}
+.org-selector-container {
+  width: 100%;
+}
+::v-deep .el-popover {
+  min-width: 0 !important;
+  padding: 12px;
+}
+</style>