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

package/src/packages/search-input/index.vue

@@ -0,0 +1,72 @@
+<!-- 查询输入框组件 -->
+<template>
+  <div class="d-search-input">
+    <slot><div /></slot>
+    <div>
+      <el-input
+        v-model="value"
+        class="d-search-input-container"
+        :placeholder="placeholder"
+        :clearable="clearable"
+        @keyup.enter.native="$emit('search', value)"
+      >
+        <i
+          slot="suffix"
+          class="el-input__icon el-icon-search pointer"
+          @click="$emit('search', value)"
+        />
+      </el-input>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DSearchInput',
+  components: {},
+  model: {
+    prop: 'modelValue',
+    event: 'change'
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请输入查询内容'
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('change', value)
+      }
+    }
+  },
+  watch: {},
+  created() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss">
+.d-search-input {
+  display: flex;
+  justify-content: space-between;
+  .d-search-input-container {
+    width: 320px;
+  }
+}
+</style>

package/src/packages/search-table/index.vue

@@ -0,0 +1,106 @@
+<!-- 查询表格 -->
+<template>
+  <div class="d-table-search-wrap">
+    <search-form
+      v-model="form"
+      :config="config.searchConfig"
+      :search-data="searchData"
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
+      <slot />
+    </search-form>
+    <d-table
+      ref="dTable"
+      :request-config="requestConfig"
+      :columns="config.columns"
+      :data="data"
+      v-bind="$attrs"
+      class="d-table-wrap"
+      v-on="$listeners"
+    />
+  </div>
+</template>
+
+<script>
+import { cloneDeep } from 'lodash'
+import SearchForm from '../search-form/index.vue'
+import DTable from '../table/index.vue'
+
+export default {
+  name: 'DSearchTable',
+  components: { SearchForm, DTable },
+  props: {
+    config: {
+      type: Object,
+      default: () => ({
+        searchConfig: [],
+        requestConfig: {},
+        columns: []
+      })
+    },
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      form: {}
+    }
+  },
+  computed: {
+    requestConfig() {
+      const requestConfig = this.config.requestConfig
+      return {
+        ...requestConfig,
+        params:
+          typeof requestConfig.params === 'function'
+            ? requestConfig.params(cloneDeep(this.form)) // 处理自定义参数
+            : {
+                ...this.form,
+                ...requestConfig.params
+              }
+      }
+    }
+  },
+  created() {
+    this.createFormBind()
+  },
+  methods: {
+    createFormBind() {
+      const _form = {}
+      ;(this.config.searchConfig || []).forEach((c) => {
+        _form[c.prop] = c.defaultValue || ''
+      })
+      this.form = _form
+    },
+    search(params) {
+      this.$refs.dTable.search(params)
+    },
+    searchData(params = { pageNum: 1 }) {
+      this.$nextTick(() => {
+        this.search(params)
+      })
+    }
+  }
+}
+</script>
+<style lang="scss">
+.d-table-search-wrap {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .d-table-wrap {
+    flex: 1;
+    overflow: hidden;
+
+    .el-table {
+      max-height: calc(100% - 52px) !important;
+    }
+  }
+}
+</style>

package/src/packages/select/index.vue

@@ -0,0 +1,68 @@
+<!-- 下拉选择器 -->
+<template>
+  <div>
+    <el-select v-model="value" v-bind="$attrs" v-on="{ ...$listeners, change: onChange }">
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+      <template slot="prefix">
+        <slot name="prefix" />
+      </template>
+      <template slot="empty">
+        <slot name="empty" />
+      </template>
+    </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DSelect',
+  components: {},
+  model: {
+    prop: 'modelValue',
+    event: 'modelChange'
+  },
+  props: {
+    modelValue: {
+      type: [String, Number, Array],
+      default: ''
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('modelChange', value)
+      }
+    }
+  },
+  watch: {},
+  created() {},
+  methods: {
+    onChange(value) {
+      let data
+      if (Array.isArray(value)) {
+        data = this.options.filter((i) => value.includes(i.value)) || []
+      } else {
+        data = this.options.find((i) => value === i.value) || {}
+      }
+      this.$emit('change', value, data)
+    }
+  }
+}
+</script>
+
+<style lang="scss"></style>

package/src/packages/svg-icon/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'DSvgIcon',
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.icon}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.svg-icon {
+  width: 14px;
+  height: 14px;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>