vue2-client 1.6.49 → 1.7.0

package/src/base-client/components/common/XForm/XTreeSelect.vue

@@ -1,184 +1,184 @@
-<template>
-  <!-- 树形选择框 -->
-  <a-form-model-item v-if="loaded" :ref="model" :label="name" :prop="model">
-    <a-tree-select
-      v-model="value"
-      :disabled="disabled"
-      :tree-data="getTreeData()"
-      :tree-checkable="mode === '查询' && queryType !== 'RIGHT_LIKE'"
-      :placeholder="'请选择' + name"
-      :dropdown-style="{ maxHeight: '400px' }"
-      tree-node-filter-prop="label"
-      :show-checked-strategy="queryType === 'RIGHT_LIKE' ? 'SHOW_ALL' : undefined"
-      allow-clear
-      class="tree-select"
-      @change="onTreeSelectChange">
-    </a-tree-select>
-  </a-form-model-item>
-</template>
-<script>
-import XFormCol from '@vue2-client/base-client/components/common/XFormCol'
-
-export default {
-  name: 'XTreeSelect',
-  components: { XFormCol },
-  data () {
-    return {
-      // 内容加载是否完成
-      loaded: false,
-      // 数据列表
-      option: [],
-      // 表单
-      form: {},
-      // 查询方式
-      queryType: 'IN',
-      // label名称
-      name: undefined,
-      // 模型名称
-      model: undefined,
-      // 使用方式
-      mode: '查询',
-      // 是否禁用
-      disabled: false,
-      // 选中值
-      value: undefined
-    }
-  },
-  methods: {
-    init (params) {
-      const {
-        option = [], form, queryType = 'IN', name, model, mode = '查询', disabled = false
-      } = params
-      this.loaded = false
-      this.option = option
-      this.form = form
-      this.queryType = queryType
-      this.name = name
-      this.model = model
-      this.mode = mode
-      this.disabled = disabled
-      // 修改时恢复树形选择框选中状态
-      if (this.queryType !== 'RIGHT_LIKE') {
-        const value = this.form[this.model]
-        if (value) {
-          // 如果数据源中值含'-'，代表是由多个数据源组成的树，需要重新组织新增/编辑时的表单值
-          if (this.option.length > 0 && this.option[0].value.indexOf('-') !== -1) {
-            this.value = model + '-' + value
-          } else {
-            this.value = value
-          }
-        } else {
-          this.value = undefined
-        }
-      }
-      this.loaded = true
-    },
-    // 获取树形选择框数据
-    getTreeData () {
-      const treeData = this.option
-      if (this.mode === '新增/修改') {
-        this.setParentSelectable(treeData)
-      }
-      return treeData
-    },
-    // 设置树形选择框不能选择父节点
-    setParentSelectable (treeData) {
-      treeData.forEach(item => {
-        if (item.children && item.children.length) {
-          item.selectable = false
-          this.setParentSelectable(item.children)
-        }
-      })
-    },
-    // 选中树节点
-    onTreeSelectChange (value, label, extra) {
-      if (this.queryType === 'RIGHT_LIKE') {
-        // 获取可用于模糊查询的组织机构字符串
-        let node = extra.triggerNode.$parent
-        label = label[0]
-        while (node && node.label) {
-          label = node.label + '.' + label
-          node = node.$parent
-        }
-        this.form[this.model] = label
-      } else {
-        // 如果选中值含'-'，代表是由多个数据源组成的树，需要重新组织查询或新增/编辑时的表单
-        if ((value instanceof Array && value.length > 0 && value[0].indexOf('-') !== -1) || (typeof value === 'string' && value.indexOf('-') !== -1)) {
-          const treeDatas = {}
-          // 单选情况用于新增.修改表单场景，使用extra.triggerNode获取选中节点信息
-          if (!extra.allCheckedNodes) {
-            this.setNodeData(treeDatas, extra.triggerNode)
-          } else {
-            // 多选情况用于查询表单场景，使用extra.allCheckedNodes获取选中节点集合
-            const nodes = extra.allCheckedNodes
-            // 获取任意选中节点的叶子节点的字段名，用于查询时组织查询项的key
-            const name = this.getNodeDataProps(nodes[0])
-            // 获取所有选中节点的叶子节点的value,用于查询时组织查询项的value
-            const values = []
-            for (const node of nodes) {
-              const ref = this.setDataRef(node)
-              if (ref instanceof Array) {
-                for (const nodeRef of ref) {
-                  const keyValue = nodeRef.node.key
-                  values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
-                }
-              } else {
-                const keyValue = ref.node.key
-                values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
-              }
-            }
-            treeDatas[name] = values
-          }
-          // 移除默认的表单项，将组织好后的表单项合并进表单
-          this.form[this.model] = undefined
-          Object.assign(this.form, treeDatas)
-        } else {
-          // 从单一数据源组成的树可以直接赋值
-          this.form[this.model] = value
-        }
-      }
-    },
-    // 设置选中值
-    setValue (value) {
-      this.value = value
-    },
-    setDataRef (node) {
-      if (node.children) {
-        return this.setDataRef(node.children)
-      }
-      return node
-    },
-    /**
-     * 组织节点和每层父节点的数据，用于新增/修改时更新表单数据
-     * @param data 组织完成的数据
-     * @param node 节点
-     * @return 返回示例： { parentId: 1, childId: 2 }
-     */
-    setNodeData (data, node) {
-      if (node.value) {
-        const value = node.value
-        const columnsName = value.substring(0, value.indexOf('-'))
-        data[columnsName] = value.substring(value.lastIndexOf('-') + 1)
-        if (node.$parent) {
-          this.setNodeData(data, node.$parent)
-        }
-      }
-    },
-    getNodeDataProps (node) {
-      if (node.children && node.children.length > 0) {
-        return this.getNodeDataProps(node.children[0])
-      }
-      const value = node.node.key
-      return value.substring(0, value.indexOf('-'))
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.tree-select {
-  /deep/ .ant-select-selection.ant-select-selection--multiple {
-    max-height: 32px;
-    overflow-y: auto;
-  }
-}
-</style>
+<template>
+  <!-- 树形选择框 -->
+  <a-form-model-item v-if="loaded" :ref="model" :label="name" :prop="model">
+    <a-tree-select
+      v-model="value"
+      :disabled="disabled"
+      :tree-data="getTreeData()"
+      :tree-checkable="mode === '查询' && queryType !== 'RIGHT_LIKE'"
+      :placeholder="'请选择' + name"
+      :dropdown-style="{ maxHeight: '400px' }"
+      tree-node-filter-prop="label"
+      :show-checked-strategy="queryType === 'RIGHT_LIKE' ? 'SHOW_ALL' : undefined"
+      allow-clear
+      class="tree-select"
+      @change="onTreeSelectChange">
+    </a-tree-select>
+  </a-form-model-item>
+</template>
+<script>
+import XFormCol from '@vue2-client/base-client/components/common/XFormCol'
+
+export default {
+  name: 'XTreeSelect',
+  components: { XFormCol },
+  data () {
+    return {
+      // 内容加载是否完成
+      loaded: false,
+      // 数据列表
+      option: [],
+      // 表单
+      form: {},
+      // 查询方式
+      queryType: 'IN',
+      // label名称
+      name: undefined,
+      // 模型名称
+      model: undefined,
+      // 使用方式
+      mode: '查询',
+      // 是否禁用
+      disabled: false,
+      // 选中值
+      value: undefined
+    }
+  },
+  methods: {
+    init (params) {
+      const {
+        option = [], form, queryType = 'IN', name, model, mode = '查询', disabled = false
+      } = params
+      this.loaded = false
+      this.option = option
+      this.form = form
+      this.queryType = queryType
+      this.name = name
+      this.model = model
+      this.mode = mode
+      this.disabled = disabled
+      // 修改时恢复树形选择框选中状态
+      if (this.queryType !== 'RIGHT_LIKE') {
+        const value = this.form[this.model]
+        if (value) {
+          // 如果数据源中值含'-'，代表是由多个数据源组成的树，需要重新组织新增/编辑时的表单值
+          if (this.option.length > 0 && this.option[0].value.indexOf('-') !== -1) {
+            this.value = model + '-' + value
+          } else {
+            this.value = value
+          }
+        } else {
+          this.value = undefined
+        }
+      }
+      this.loaded = true
+    },
+    // 获取树形选择框数据
+    getTreeData () {
+      const treeData = this.option
+      if (this.mode === '新增/修改') {
+        this.setParentSelectable(treeData)
+      }
+      return treeData
+    },
+    // 设置树形选择框不能选择父节点
+    setParentSelectable (treeData) {
+      treeData.forEach(item => {
+        if (item.children && item.children.length) {
+          item.selectable = false
+          this.setParentSelectable(item.children)
+        }
+      })
+    },
+    // 选中树节点
+    onTreeSelectChange (value, label, extra) {
+      if (this.queryType === 'RIGHT_LIKE') {
+        // 获取可用于模糊查询的组织机构字符串
+        let node = extra.triggerNode.$parent
+        label = label[0]
+        while (node && node.label) {
+          label = node.label + '.' + label
+          node = node.$parent
+        }
+        this.form[this.model] = label
+      } else {
+        // 如果选中值含'-'，代表是由多个数据源组成的树，需要重新组织查询或新增/编辑时的表单
+        if ((value instanceof Array && value.length > 0 && value[0].indexOf('-') !== -1) || (typeof value === 'string' && value.indexOf('-') !== -1)) {
+          const treeDatas = {}
+          // 单选情况用于新增.修改表单场景，使用extra.triggerNode获取选中节点信息
+          if (!extra.allCheckedNodes) {
+            this.setNodeData(treeDatas, extra.triggerNode)
+          } else {
+            // 多选情况用于查询表单场景，使用extra.allCheckedNodes获取选中节点集合
+            const nodes = extra.allCheckedNodes
+            // 获取任意选中节点的叶子节点的字段名，用于查询时组织查询项的key
+            const name = this.getNodeDataProps(nodes[0])
+            // 获取所有选中节点的叶子节点的value,用于查询时组织查询项的value
+            const values = []
+            for (const node of nodes) {
+              const ref = this.setDataRef(node)
+              if (ref instanceof Array) {
+                for (const nodeRef of ref) {
+                  const keyValue = nodeRef.node.key
+                  values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
+                }
+              } else {
+                const keyValue = ref.node.key
+                values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
+              }
+            }
+            treeDatas[name] = values
+          }
+          // 移除默认的表单项，将组织好后的表单项合并进表单
+          this.form[this.model] = undefined
+          Object.assign(this.form, treeDatas)
+        } else {
+          // 从单一数据源组成的树可以直接赋值
+          this.form[this.model] = value
+        }
+      }
+    },
+    // 设置选中值
+    setValue (value) {
+      this.value = value
+    },
+    setDataRef (node) {
+      if (node.children) {
+        return this.setDataRef(node.children)
+      }
+      return node
+    },
+    /**
+     * 组织节点和每层父节点的数据，用于新增/修改时更新表单数据
+     * @param data 组织完成的数据
+     * @param node 节点
+     * @return 返回示例： { parentId: 1, childId: 2 }
+     */
+    setNodeData (data, node) {
+      if (node.value) {
+        const value = node.value
+        const columnsName = value.substring(0, value.indexOf('-'))
+        data[columnsName] = value.substring(value.lastIndexOf('-') + 1)
+        if (node.$parent) {
+          this.setNodeData(data, node.$parent)
+        }
+      }
+    },
+    getNodeDataProps (node) {
+      if (node.children && node.children.length > 0) {
+        return this.getNodeDataProps(node.children[0])
+      }
+      const value = node.node.key
+      return value.substring(0, value.indexOf('-'))
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.tree-select {
+  /deep/ .ant-select-selection.ant-select-selection--multiple {
+    max-height: 32px;
+    overflow-y: auto;
+  }
+}
+</style>

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

@@ -1,38 +1,38 @@
-<template>
-  <a-col
-    :xs="flex.xs"
-    :sm="flex.sm"
-    :md="flex.md"
-    :lg="flex.lg"
-    :xl="flex.xl"
-    :xxl="flex.xxl" >
-    <slot></slot>
-  </a-col>
-</template>
-
-<script>
-
-export default {
-  name: 'XFormCol',
-  props: {
-    flex: {
-      type: Object,
-      default: () => {
-        return {
-          xs: 24,
-          sm: 24,
-          md: 24,
-          lg: 12,
-          xl: 8,
-          xxl: 6
-        }
-      }
-    }
-  },
-  data () {
-    return {
-
-    }
-  }
-}
-</script>
+<template>
+  <a-col
+    :xs="flex.xs"
+    :sm="flex.sm"
+    :md="flex.md"
+    :lg="flex.lg"
+    :xl="flex.xl"
+    :xxl="flex.xxl" >
+    <slot></slot>
+  </a-col>
+</template>
+
+<script>
+
+export default {
+  name: 'XFormCol',
+  props: {
+    flex: {
+      type: Object,
+      default: () => {
+        return {
+          xs: 24,
+          sm: 24,
+          md: 24,
+          lg: 12,
+          xl: 8,
+          xxl: 6
+        }
+      }
+    }
+  },
+  data () {
+    return {
+
+    }
+  }
+}
+</script>