@ddwl/ddwl-ui 1.0.1

package/src/packages/import-file/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <d-dialog
+    v-model="visible"
+    form-refs="importForm"
+    :width="width"
+    :title="title"
+    submit-btn-text="导入"
+    submit-btn-icon="el-icon-upload2"
+    @submit="submit"
+  >
+    <el-form
+      ref="importForm"
+      :model="form"
+      :inline="true"
+    >
+      <el-form-item
+        class="import-form-item"
+        prop="file"
+        label="选择文件"
+        :rules="[
+          { required: true, message: '请选择文件' }
+        ]"
+      >
+        <div class="custom-file-input">
+          <div class="custom-file-content">
+            {{ form.file ? form.file.name : '请选择' }}
+          </div>
+          <el-upload
+            :file-list="fileList"
+            :show-file-list="false"
+            :auto-upload="false"
+            action=""
+            :on-change="uploadChange"
+          >
+            <el-button
+              type="primary"
+              icon="el-icon-folder"
+            />
+          </el-upload>
+        </div>
+      </el-form-item>
+      <el-button
+        icon="el-icon-paperclip"
+        type="text"
+        @click="downloadFile"
+      >
+        模板下载
+      </el-button>
+    </el-form>
+    <slot>
+      <p>1. 支持导入格式为xlsx、xls的文件，且文件大小不可超过5M</p>
+      <p>2. 模板的表头不可更改，不可删除</p>
+      <p>3. 若导入数据存在编码一致的情况则会更新原有数据</p>
+      <p>4. 若导入过程中有问题，需调整模板内容后再重新导入</p>
+    </slot>
+  </d-dialog>
+</template>
+
+<script>
+import DDialog from '../dialog'
+
+export default {
+  name: 'DImportFile',
+  components: { DDialog },
+  model: {
+    prop: 'modelValue',
+    event: 'change'
+  },
+  props: {
+    modelValue: {
+      default: false,
+      type: Boolean
+    },
+    width: {
+      default: '520px',
+      type: String
+    },
+    title: {
+      default: '',
+      type: String
+    },
+    templateUrl: {
+      default: '',
+      type: String
+    },
+    fileType: {
+      default: () => ['xlsx', 'xls'],
+      type: Array
+    },
+    fileSize: {
+      default: 5,
+      type: Number
+    }
+  },
+  data () {
+    return {
+      fileList: [],
+      form: {
+        file: ''
+      }
+    }
+  },
+  computed: {
+    visible: {
+      get () {
+        return this.modelValue
+      },
+      set (value) {
+        this.form.file = ''
+        this.fileList = []
+        this.$refs.importForm.clearValidate()
+        this.$emit('change', value)
+      }
+    }
+  },
+  methods: {
+    downloadFile () {
+      window.location.href = `${process.env.NODE_ENV === 'development' ? 'http://121.40.125.185:19999' : ''}${this.templateUrl}?authToken=${this.$store.getters.token}`
+    },
+    uploadChange (file, fileList) {
+      const isLimit = file.size / 1024 / 1024 < this.fileSize
+      const isType = this.fileType.includes(file.name.substr(file.name.lastIndexOf('.') + 1).toLocaleLowerCase())
+      if (!isType) {
+        this.$message.error(`请上传正确的文件格式（${this.fileType.join('、')}）`)
+        return false
+      }
+      if (!isLimit) {
+        this.$message.error(`上传文件大小不能超过${this.fileSize}MB`)
+        return false
+      }
+      this.fileList = fileList
+      this.form.file = file.raw
+    },
+    async submit (callback) {
+      if (!this.form.file) {
+        this.$message.error('请选择导入文件')
+        callback(new Error(false))
+        return
+      }
+      try {
+        this.$emit('submit', this.form.file, callback)
+      } catch (e) {
+        callback(new Error(false))
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.custom-file-input {
+  display: flex;
+  width: 230px;
+  .custom-file-content {
+    width: 100%;
+    height: 32px;
+    border: 1px solid #dcdfe6;
+    border-right: none;
+    border-radius: 2px 0 0 2px;
+    padding: 0 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>

package/src/packages/menu/index.vue

@@ -0,0 +1,66 @@
+<!-- 菜单 -->
+<template>
+  <el-menu
+    class="d-menu"
+    :default-active="isVertical ? $route.path : activeMenu"
+    :router="isVertical"
+    unique-opened
+    :mode="mode"
+    @select="menuSelect">
+    <menu-item v-for="item in data" :key="item.name" :data="item" :mode="mode"></menu-item>
+  </el-menu>
+</template>
+
+<script>
+import MenuItem from './menuItem.vue'
+export default {
+  name: 'DMenu',
+  components: { MenuItem },
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    mode: {
+      type: String,
+      default: 'vertical'
+    }
+  },
+  data () {
+    return {
+      activeMenu: ''
+    }
+  },
+  computed: {
+    isVertical () {
+      return this.mode === 'vertical'
+    }
+  },
+  watch: {
+    '$route.path': {
+      handler (path) {
+        if (!this.isVertical) {
+          if (this.activeMenu && path.substring(0, this.activeMenu.length) === this.activeMenu) return
+          const data = this.data.find(item => path.substring(0, item.path.length) === item.path)
+          this.activeMenu = data?.path
+          this.$emit('select', data, false)
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    menuSelect (index) {
+      if (this.isVertical) return
+      const data = this.data.find(item => item.path === index)
+      this.$emit('select', data, true)
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.d-menu {
+  height: 100%;
+}
+</style>

package/src/packages/menu/menuItem.vue

@@ -0,0 +1,78 @@
+<!-- 菜单子项 -->
+<template>
+  <el-submenu
+    v-if="mode === 'vertical' && data.children && data.children.length"
+    :index="data.path"
+  >
+    <template slot="title">
+      <img
+        v-if="data.meta.icon"
+        class="mr8 menu-icon"
+        :src="data.meta.icon"
+      >
+      <span>{{ data.meta.title }}</span>
+    </template>
+    <menu-item
+      v-for="item in data.children"
+      :key="item.name"
+      :data="item"
+    />
+  </el-submenu>
+  <el-menu-item
+    v-else
+    :index="data.path"
+  >
+    <template slot="title">
+      <div
+        v-if="data.meta.icon"
+        class="menu-icon-box"
+      >
+        <img
+          class="menu-icon"
+          :src="data.meta.icon"
+        >
+      </div>
+      <span class="ml6 ellipsis flex-1">{{ data.meta.title }}</span>
+    </template>
+  </el-menu-item>
+</template>
+
+<script>
+export default {
+  name: 'MenuItem',
+  components: {},
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    mode: {
+      type: String,
+      default: 'vertical'
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {},
+  created () {},
+  methods: {}
+}
+</script>
+
+<style lang='scss' scoped>
+.menu-icon-box {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.menu-icon {
+  width: 16px;
+  height: 16px;
+}
+</style>

package/src/packages/popconfirm/index.vue

@@ -0,0 +1,39 @@
+<!-- 二次确认气泡 -->
+<template>
+  <el-popconfirm
+    :title="title"
+    cancel-button-type=""
+    icon="el-icon-warning"
+    @confirm="confirm"
+  >
+    <span slot="reference" :class="`${type}-text-btn`">{{ buttonName }}</span>
+  </el-popconfirm>
+</template>
+
+<script>
+export default {
+  name: 'DPopconfirm',
+  props: {
+    title: {
+      default: '您确定删除该信息？',
+      type: String
+    },
+    buttonName: {
+      default: '删除',
+      type: String
+    },
+    type: {
+      default: 'primary',
+      type: String
+    }
+  },
+  data () {
+    return {}
+  },
+  methods: {
+    confirm () {
+      this.$emit('confirm')
+    }
+  }
+}
+</script>

package/src/packages/render/index.vue

@@ -0,0 +1,14 @@
+<!-- eslint-disable vue/require-default-prop -->
+<script>
+export default {
+  name: 'DRender',
+  functional: true,
+  props: {
+    scope: Object,
+    render: Function
+  },
+  render: (h, ctx) => {
+    return ctx.props.render ? ctx.props.render(ctx.props.scope, h) : ''
+  }
+}
+</script>

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

@@ -0,0 +1,257 @@
+<!-- 搜索组件 -->
+<template>
+  <div class="d-search-form">
+    <el-row class="flex-wrap" :gutter="gutter">
+      <el-col
+        v-for="(item, index) in list"
+        v-show="showCol(index)"
+        :key="item.key"
+        :span="item.span || Math.floor(24 / cell)"
+        class="col-item"
+      >
+        <div class="search-item">
+          <div class="search-item-label">
+            {{ item.label }}
+          </div>
+          <form-item v-model="form[item.key]" :config="item" />
+        </div>
+      </el-col>
+      <el-col :span="hiddenIndex === list.length || expend ? emptySpan : 0" style="height: 68px;">
+        <span />
+      </el-col>
+      <el-col v-if="hasSlot && expend && !suffixSlot" :span="24 - submitSpan" class="mb16">
+        <slot />
+      </el-col>
+      <el-col :span="submitSpan">
+        <div
+          :style="{
+            'margin-top': hasSlot && expend && !suffixSlot ? '0px' : '20px'
+          }"
+          class="d-search-form-btn"
+        >
+          <el-button type="primary" :disabled="searchLoading" @click="search">
+            查询
+          </el-button>
+          <el-button :disabled="searchLoading" @click="reset">
+            重置
+          </el-button>
+          <el-button
+            v-if="list.length > hiddenIndex"
+            class="expend-btn"
+            :class="`el-icon-arrow-${expend ? 'up' : 'down'}`"
+            @click="changeStatus"
+          />
+        </div>
+      </el-col>
+      <el-col v-if="hasSlot && (!expend || suffixSlot)" :span="20" class="mb16">
+        <slot />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import FormItem from '../form-item'
+import { cloneDeep } from 'lodash'
+
+// 初始化表单
+let initForm = {}
+
+export default {
+  name: 'DSearchForm',
+  components: {
+    FormItem
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    config: {
+      require: true,
+      default: () => [],
+      type: Array
+    },
+    cell: {
+      default: 6,
+      type: Number
+    },
+    gutter: {
+      default: 16,
+      type: Number
+    },
+    value: {
+      default: () => {},
+      type: Object
+    },
+    searchData: {
+      default: null,
+      type: Function
+    },
+    buttonSpan: {
+      default: 0,
+      type: Number
+    }
+  },
+  data () {
+    return {
+      list: [],
+      hiddenIndex: 0,
+      emptySpan: 0,
+      expend: false,
+      searchLoading: false,
+      // 判断是否有插槽节点，目前只在组件初始化完成时判断
+      hasSlot: false,
+      suffixSlot: true
+    }
+  },
+  computed: {
+    form: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.$emit('change', value)
+      }
+    },
+    submitSpan () {
+      return this.buttonSpan || 24 / this.cell
+    },
+    spanList () {
+      return this.list.map(item => item.span || Math.floor(24 / this.cell)) || []
+    },
+    showCol () {
+      return (index) => {
+        return this.expend || index < this.hiddenIndex
+      }
+    }
+  },
+  watch: {
+    config: {
+      handler () {
+        this.list = this.config.filter(item => !item.hidden)
+      },
+      deep: true,
+      immediate: true
+    },
+    spanList: {
+      handler (val, oldVal) {
+        if (!val.length || JSON.stringify(val) === JSON.stringify(oldVal)) {
+          return
+        }
+        this.calcSpan()
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created () {
+    initForm = cloneDeep(this.value)
+    this.$nextTick(() => {
+      this.hasSlot = !!(this.$slots.default && this.$slots.default.length)
+      this.calcSpan()
+    })
+  },
+  methods: {
+    /**
+     * @description: 查询
+     */
+    async search () {
+      this.$emit('search')
+      if (this.searchData) {
+        try {
+          this.searchLoading = true
+          await this.searchData({ pageNum: 1 }, this.form)
+          this.searchLoading = false
+        } catch (e) {
+          this.searchLoading = false
+        }
+      }
+    },
+    /**
+     * @description: 重置
+     */
+    async reset () {
+      this.form = cloneDeep(initForm)
+      this.$emit('search')
+      if (this.searchData) {
+        this.resetLoading = true
+        await this.searchData({ pageNum: 1 }, this.form)
+        this.resetLoading = false
+      }
+    },
+    /**
+     * @description: 展开/收起
+     */
+    changeStatus () {
+      this.expend = !this.expend
+      this.$emit('expand-change', this.expend)
+    },
+    calcSpan () {
+      let hiddenIndex = 1
+      const total = this.spanList.length ? this.spanList.reduce((a, b, index) => {
+        const sum = a + b
+        if (hiddenIndex < 2) {
+          if (24 - sum < this.submitSpan) {
+            hiddenIndex = index
+          }
+          if (24 - sum >= this.submitSpan && index === this.spanList.length - 1) {
+            hiddenIndex = index + 1
+          }
+        }
+        return sum
+      }) : 0
+      this.hiddenIndex = hiddenIndex
+
+      const offsetSpan = 24 - total % 24
+      if (this.hasSlot) {
+        if (offsetSpan < this.submitSpan || offsetSpan === 24) {
+          this.suffixSlot = false
+          this.emptySpan = 0
+        } else {
+          this.suffixSlot = true
+          this.emptySpan = offsetSpan >= this.submitSpan ? offsetSpan - this.submitSpan : 24 - this.submitSpan
+        }
+      } else {
+        this.emptySpan = offsetSpan >= this.submitSpan ? offsetSpan - this.submitSpan : 24 - this.submitSpan
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.d-search-form {
+  margin-bottom: 4px;
+  .col-item {
+    align-items: end;
+  }
+  .el-select {
+    width: 100%;
+    .el-input_inner {
+      height: 32px;
+    }
+  }
+  &-btn {
+    text-align: right;
+    margin-bottom: 16px;
+  }
+  &-overflow {
+    margin-top: 24px;
+  }
+  .expend-btn {
+    padding: 8px 8px;
+  }
+}
+.search-item {
+  margin-bottom: 12px;
+  &-label {
+    margin-bottom: 4px;
+    font-weight: 400;
+    color: #333333;
+  }
+  :deep(.el-input__inner) {
+    height: 32px !important;
+  }
+}
+</style>

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

@@ -0,0 +1,68 @@
+<!-- 查询输入框组件 -->
+<template>
+  <div class="d-search-input">
+    <slot><div /></slot>
+    <div>
+      <el-input
+        v-model="value"
+        class="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' scoped>
+.d-search-input {
+  display: flex;
+  justify-content: space-between;
+  .search-input-container {
+    width: 320px;
+  }
+}
+</style>