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

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

@@ -1,292 +0,0 @@
-<!-- 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' scoped>
-.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

@@ -1,149 +0,0 @@
-<!-- 表单 -->
-<template>
-  <el-form
-    ref="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" scoped>
-.d-form-item {
-  :deep(.el-form-item__content) {
-    display: flex;
-    .search-item {
-      flex: 1;
-      overflow: hidden;
-    }
-  }
-}
-.custom-form-item-top {
-  display: flex;
-  flex-direction: column;
-
-  :deep(.el-form-item__label) {
-    text-align: left;
-  }
-  :deep(.el-form-item__content) {
-    margin-left: 0 !important;
-  }
-}
-</style>

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

@@ -1,199 +0,0 @@
-<!-- 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>