@ddwl/ddwl-ui 1.2.3-beta.1 → 1.2.3-beta.3

package/src/packages/filter-tree/index.vue

@@ -0,0 +1,294 @@
+<!-- eslint-disable vue/no-template-shadow -->
+<!-- 多功能筛选树 -->
+<template>
+  <div class="d-filter-tree">
+    <slot name="header" />
+    <el-input
+      v-if="filterable"
+      v-model="searchContent"
+      type="text"
+      :placeholder="placeholder"
+      suffix-icon="el-icon-search"
+    />
+    <el-tree
+      ref="tree"
+      class="filter-tree mt16"
+      :data="data"
+      :node-key="nodeKey"
+      :expand-on-click-node="false"
+      highlight-current
+      :props="props"
+      :filter-node-method="filterNode"
+      :default-expanded-keys="defaultExpandIds"
+      v-bind="$attrs"
+      @node-click="nodeClick"
+      @node-expand="(data) => handleNodeToggle(data, true)"
+      @node-collapse="(data) => handleNodeToggle(data, false)"
+      v-on="$listeners"
+    >
+      <span slot-scope="{ node, data }" class="d-filter-tree-node">
+        <span class="node-label ellipsis">
+          <slot name="label" :data="data">{{ node.label }}</slot>
+        </span>
+        <span class="mr8">
+          <slot name="button" :node="node"></slot>
+          <el-button
+            v-if="showNodeButton('append', data)"
+            type="text"
+            icon="el-icon-plus"
+            @click.stop="append(node)"
+          />
+          <el-button
+            v-if="showNodeButton('edit', data)"
+            type="text"
+            icon="el-icon-edit"
+            @click.stop="edit(node)"
+          />
+          <el-button
+            v-if="showNodeButton('remove', data)"
+            type="text"
+            icon="el-icon-delete"
+            @click.stop="remove(node)"
+          />
+        </span>
+      </span>
+    </el-tree>
+  </div>
+</template>
+
+<script>
+import { getNodeByKey, getFirstVaildNode, flatTree } from '@/utils/treeLib'
+
+export default {
+  name: 'DFilterTree',
+  components: {},
+  props: {
+    data: {
+      default: () => [],
+      type: Array
+    },
+    nodeKey: {
+      default: 'id',
+      type: String
+    },
+    // 默认选中第一个匹配的节点，如果有指定currentKey，则优先选中该节点
+    // eg: { key: 'id', vlaue: true }
+    currentDefault: {
+      default: null,
+      type: Function
+    },
+    // 选中的节点值
+    currentKey: {
+      default: '',
+      type: [String, Number]
+    },
+    props: {
+      default: () => ({}),
+      type: Object
+    },
+    filterable: {
+      default: true,
+      type: Boolean
+    },
+    showButtons: {
+      default: false,
+      type: Boolean
+    },
+    placeholder: {
+      default: '请输入查询内容',
+      type: String
+    },
+    buttonProps: {
+      type: Object,
+      default: () => ({
+        append: false,
+        edit: false,
+        remove: false
+      })
+    },
+    searchKey: {
+      type: String,
+      default: 'search'
+    }
+  },
+  data() {
+    return {
+      searchContent: '',
+      defaultExpandIds: [],
+      first: true
+    }
+  },
+  computed: {
+    showNodeButton() {
+      return (type, data) => {
+        if (this.buttonProps[type]) {
+          if (typeof this.buttonProps[type] === 'function') {
+            return this.buttonProps[type](data)
+          } else {
+            return true
+          }
+        } else {
+          return false
+        }
+      }
+    }
+  },
+  watch: {
+    data: {
+      handler() {
+        if (this.data && this.data.length) {
+          let node
+          if (this.currentKey) {
+            node = getNodeByKey(this.data, this.currentKey, {
+              key: this.nodeKey
+            })
+          } else if (this.currentDefault) {
+            // 获取需要默认选中的节点
+            const props = {
+              key: this.nodeKey
+            }
+            this.props.label && (props.label = this.props.label)
+            this.props.children && (props.children = this.props.children)
+            node = getFirstVaildNode(this.data, this.currentDefault, props)
+          }
+          this.$nextTick(() => {
+            if (node) {
+              this.$refs.tree.setCurrentKey(node[this.nodeKey])
+              this.$emit('node-change', node)
+              this.first && this.handleNodeToggle(node, true)
+            }
+            this.first = false // 只在第一次有数据时执行默认展开
+          })
+        }
+      },
+      immediate: true
+    },
+    searchContent(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {},
+  methods: {
+    // 树的过滤methods
+    filterNode(value, data) {
+      if (!value) return true
+      return (
+        (data[this.searchKey] || data[(this.props && this.props.label) || 'label']).indexOf(
+          value
+        ) !== -1
+      )
+    },
+    // 树节点触发点击
+    nodeClick(node) {
+      this.$emit('node-change', node)
+    },
+    append(node) {
+      this.$emit('node-append', node)
+    },
+    edit(node) {
+      this.$emit('node-edit', node)
+    },
+    remove(node) {
+      this.$emit('node-remove', node)
+    },
+    // 树节点展开/关闭
+    handleNodeToggle(data, isExpanded) {
+      if (isExpanded) {
+        // 展开节点
+        if (!this.defaultExpandIds.includes(data[this.nodeKey])) {
+          this.defaultExpandIds.push(data[this.nodeKey])
+        }
+      } else {
+        // 关闭节点
+        const index = this.defaultExpandIds.indexOf(data[this.nodeKey])
+        if (index > -1) {
+          this.defaultExpandIds.splice(index, 1)
+        }
+      }
+      this.removeExpandChildIds(data)
+    },
+    removeExpandChildIds(data) {
+      const ids = (flatTree(data.children || [], { key: this.nodeKey }) || []).map(
+        (node) => node[this.nodeKey]
+      )
+      this.defaultExpandIds = this.defaultExpandIds.filter((id) => !ids.includes(id))
+    },
+    expandNode(id) {
+      const node = getNodeByKey(this.data, id, { key: this.nodeKey })
+      if (node) this.handleNodeToggle(node, true)
+    },
+    // el-tree methods
+    updateKeyChildren(...args) {
+      this.$refs.tree.updateKeyChildren(...args)
+    },
+    getCheckedNodes(...args) {
+      return this.$refs.tree.getCheckedNodes(...args)
+    },
+    setCheckedNodes(...args) {
+      this.$refs.tree.setCheckedNodes(...args)
+    },
+    getCheckedKeys(...args) {
+      return this.$refs.tree.getCheckedKeys(...args)
+    },
+    setCheckedKeys(...args) {
+      this.$refs.tree.setCheckedKeys(...args)
+    },
+    setChecked(...args) {
+      this.$refs.tree.setChecked(...args)
+    },
+    getHalfCheckedNodes(...args) {
+      return this.$refs.tree.getHalfCheckedNodes(...args)
+    },
+    getHalfCheckedKeys(...args) {
+      return this.$refs.tree.getHalfCheckedKeys(...args)
+    },
+    getCurrentKey(...args) {
+      return this.$refs.tree.getCurrentKey(...args)
+    },
+    getCurrentNode(...args) {
+      return this.$refs.tree.getCurrentNode(...args)
+    },
+    setCurrentKey(...args) {
+      this.$refs.tree.setCurrentKey(...args)
+    },
+    setCurrentNode(...args) {
+      this.$refs.tree.setCurrentNode(...args)
+    },
+    getNode(...args) {
+      return this.$refs.tree.getNode(...args)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.d-filter-tree {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-size: 14px;
+  .d-filter-tree-buttons {
+    display: flex;
+    justify-content: space-between;
+    & > div {
+      cursor: pointer;
+      color: #3786fd;
+    }
+  }
+  .d-filter-tree-node {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    overflow: hidden;
+    width: 100%;
+    .node-label {
+      flex: 1;
+      overflow: hidden;
+    }
+  }
+  .filter-tree {
+    flex: 1;
+    overflow: auto;
+  }
+}
+</style>

package/src/packages/form/index.vue

@@ -0,0 +1,148 @@
+<!-- 表单 -->
+<template>
+  <el-form ref="form" class="d-form" v-bind="$attrs" :model="source">
+    <el-row style="display: flex; flex-wrap: wrap" :gutter="16" :class="!grid && 'flex'">
+      <template v-for="item in config">
+        <component
+          :is="grid ? 'el-col' : 'div'"
+          v-if="!item.hide"
+          :key="item.prop"
+          :class="item.className"
+          :span="item.span || 24"
+        >
+          <el-form-item
+            class="d-form-item"
+            :class="{
+              'custom-form-item-top': item.direction === 'vertical' || direction === 'vertical'
+            }"
+            :label="item.label"
+            :prop="item.prop"
+            :label-width="
+              item.direction === 'line' || direction === 'line'
+                ? item.labelWidth || labelWidth
+                : '100%'
+            "
+            :rules="
+              item.rules ||
+              (item.required ? [{ required: true, message: placeholder(item) }] : null)
+            "
+            v-bind="item.itemProps"
+          >
+            <span slot="label">
+              <span v-if="!item.labelRender">{{ item.label }}</span>
+              <form-label-render v-else :scope="item" :render="item.labelRender" />
+            </span>
+            <span v-if="item.preText" class="mr8">{{ item.preText }}</span>
+            <slot v-if="item.component === 'slot'" :name="item.slotName" />
+            <div v-else-if="item.component === 'text'" :class="item.innerClass" :style="item.style">
+              {{ item.text || source[item.prop] }}
+            </div>
+            <template v-else>
+              <form-item :ref="item.prop" v-model="source[item.prop]" :config="item" />
+            </template>
+            <span v-if="item.sufText" class="ml8">{{ item.sufText }}</span>
+          </el-form-item>
+        </component>
+      </template>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+import FormItem from '../form-item/index'
+import FormLabelRender from '../render'
+
+export default {
+  name: 'DForm',
+  components: {
+    FormItem,
+    FormLabelRender
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'change'
+  },
+  props: {
+    config: {
+      type: Array,
+      default: () => []
+    },
+    labelWidth: {
+      default: '120px',
+      type: String
+    },
+    modelValue: {
+      type: Object,
+      default: () => ({})
+    },
+    grid: {
+      type: Boolean,
+      default: true
+    },
+    direction: {
+      type: String,
+      default: 'vertical'
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    source: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('change', value)
+      }
+    },
+    placeholder() {
+      return ({ component, label }) => {
+        // 默认给组件添加placeholder，可自定义
+        if (component === 'el-input' || component === 'el-input-number') {
+          return `请输入${label}`
+        } else {
+          return `请选择${label}`
+        }
+      }
+    }
+  },
+  methods: {
+    resetFields() {
+      this.$refs.form.resetFields()
+    },
+    clearValidate() {
+      this.$refs.form.clearValidate()
+    },
+    async validate() {
+      const valid = await this.$refs.form.validate()
+      return valid
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.d-form {
+  .d-form-item {
+    .el-form-item__content {
+      display: flex;
+      .search-item {
+        flex: 1;
+        overflow: hidden;
+      }
+    }
+  }
+  .custom-form-item-top {
+    display: flex;
+    flex-direction: column;
+
+    .el-form-item__label {
+      text-align: left;
+    }
+    .el-form-item__content {
+      margin-left: 0 !important;
+    }
+  }
+}
+</style>

package/src/packages/form-item/index.vue

@@ -0,0 +1,196 @@
+<!-- eslint-disable vue/valid-v-for -->
+<template>
+  <div class="search-item">
+    <div>
+      <span v-if="config.prefix" class="mr6">{{ config.prefix }}</span>
+      <el-radio-group
+        v-if="config.component === 'el-radio-group'"
+        v-model="value"
+        :disabled="!!config.disabled"
+        v-bind="config.props"
+        v-on="config.listeners"
+        @change="change"
+      >
+        <el-radio
+          v-for="radio in config.options"
+          :key="radio.value"
+          :label="radio.value"
+          :disabled="!!radio.disabled"
+        >
+          {{ radio.label }}
+        </el-radio>
+      </el-radio-group>
+      <component
+        :is="config.component"
+        v-else
+        :ref="config.prop"
+        v-model.trim="value"
+        :style="{
+          width: config.width
+        }"
+        :clearable="clearable(config)"
+        :maxlength="config.maxlength || maxlength(config)"
+        :disabled="!!config.disabled"
+        :placeholder="config.placeholder || placeholder(config)"
+        v-bind="config.props"
+        v-on="config.listeners"
+        @change="change"
+      >
+        <template v-for="s in slots" :slot="s.slotName">
+          <form-item-render :scope="config" :render="s.render" />
+        </template>
+        <template v-if="config.component === 'el-checkbox-group'">
+          <el-checkbox
+            v-for="(checkbox, checkboxIndex) in config.options"
+            :key="checkboxIndex"
+            :label="checkbox.value"
+          >
+            {{ checkbox.label }}
+          </el-checkbox>
+        </template>
+
+        <template v-if="config.component === 'el-select'">
+          <el-option
+            v-for="(option, optionIndex) in config.options"
+            :key="optionIndex"
+            :label="option.label"
+            :value="option.value"
+            :disabled="!!option.disabled"
+          />
+        </template>
+        <span v-if="config.suffix" class="ml6">{{ config.suffix }}</span>
+      </component>
+    </div>
+  </div>
+</template>
+
+<script>
+import FormItemRender from '../render'
+
+export default {
+  name: 'DFormItem',
+  components: { FormItemRender },
+  model: {
+    prop: 'modelValue',
+    event: 'change'
+  },
+  props: {
+    config: {
+      require: true,
+      type: Object,
+      default: () => {}
+    },
+    modelValue: {
+      type: [Number, String, Boolean, Object, Array],
+      default: ''
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('change', value)
+      }
+    },
+    slots() {
+      return Object.entries(this.config.slots || []).map(([key, value]) => ({
+        slotName: key,
+        render: value
+      }))
+    },
+    clearable() {
+      return (config) => {
+        // 优先取配置项clearable
+        if (config.clearable !== undefined) {
+          return !!config.clearable
+        } else {
+          return true
+        }
+      }
+    },
+    maxlength() {
+      return (config) => {
+        if (config.component === 'el-input') {
+          if (config.props && config.props.type === 'textarea') {
+            return 500
+          } else {
+            return 50
+          }
+        } else {
+          return 99999
+        }
+      }
+    },
+    placeholder() {
+      return ({ component, label }) => {
+        // 默认给组件添加placeholder，可自定义
+        if (component === 'el-input' || component === 'el-input-number') {
+          return `请输入${label}`
+        } else {
+          return `请选择${label}`
+        }
+      }
+    }
+  },
+  methods: {
+    /**
+     * @description: 普通选择器和级联选择器输出勾选Item节点数据
+     * @param {*} value
+     * @return {*} data: 输出结构和value数据结构一致，对应value中的节点data
+     */
+    change(value) {
+      if (this.config.onChange) {
+        let data = null
+
+        // 处理级联选择器
+        if (this.config.component === 'el-cascader') {
+          this.$nextTick(() => {
+            // el-cascader搜索勾选bug，需要nextTick后才能正常使用getCheckedNodes
+            data = this.$refs[this.config.prop].getCheckedNodes()
+            const emitPath =
+              this.config.props &&
+              this.config.props.props &&
+              this.config.props.props.emitPath !== undefined
+                ? this.config.props.props.emitPath
+                : true
+            const multiple =
+              this.config.props && this.config.props.props && this.config.props.props.multiple
+            if (emitPath) {
+              if (multiple) {
+                data = value.map(
+                  (arr) => data.find((node) => arr[arr.length - 1] === node.value).pathNodes
+                )
+              } else {
+                data = data[data.length - 1].pathNodes
+              }
+            } else {
+              if (multiple) {
+                data = value.map((item) => data.find((node) => item === node.value))
+              } else {
+                data = data[data.length - 1]
+              }
+            }
+            this.config.onChange(value, data)
+          })
+        } else if (this.config.component === 'el-select') {
+          // 处理下拉选择器
+          data = this.config.options
+          if (Array.isArray(value)) {
+            data = data.filter((i) => value.includes(i.value)) || []
+          } else {
+            data = data.find((i) => value === i.value) || {}
+          }
+          this.config.onChange(value, data)
+        } else {
+          this.config.onChange(value)
+        }
+      }
+    }
+  }
+}
+</script>