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

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

@@ -0,0 +1,161 @@
+<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="d-import__custom-file-input">
+          <div class="d-import__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 v-show="templateUrl" icon="el-icon-paperclip" type="text" @click="downloadFile">
+        模板下载
+      </el-button>
+    </el-form>
+    <slot>
+      <p>1. 支持导入格式为{{ fileType.join('、') }}的文件，且文件大小不可超过{{ fileSize }}M</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() {
+      let token
+      try {
+        token = JSON.parse(window.localStorage.getItem('userInfo')).token
+      } catch (e) {
+        token = ''
+      }
+      window.location.href = `${this.templateUrl}?authToken=${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">
+.d-import__custom-file-input {
+  display: flex;
+  width: 230px;
+  .d-import__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,68 @@
+<!-- 菜单 -->
+<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">
+.d-menu {
+  height: 100%;
+}
+</style>

package/src/packages/menu/menuItem.vue

@@ -0,0 +1,73 @@
+<!-- 菜单子项 -->
+<template>
+  <el-submenu
+    v-if="mode === 'vertical' && data.children && data.children.length"
+    class="d-menu__submenu"
+    :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="d-menu-icon-box">
+        <img class="d-menu-icon" :src="data.meta.icon" />
+      </div>
+      <span
+        v-if="data.meta.isNewWindow"
+        class="ml6 ellipsis flex-1"
+        @click.stop="openNewWindow(data)"
+        >{{ data.meta.title }}</span
+      >
+      <span v-else 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: {
+    openNewWindow(data) {
+      window.open(data.path, '_blank')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.d-menu__submenu {
+  .d-menu-icon-box {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .d-menu-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>

package/src/packages/popconfirm/index.vue

@@ -0,0 +1,34 @@
+<!-- 二次确认气泡 -->
+<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/radio-group/index.vue

@@ -0,0 +1,47 @@
+<!-- 单选框组 -->
+<template>
+  <el-radio-group v-model="value" v-bind="$attrs" v-on="$listeners">
+    <el-radio v-for="item in options" :key="item.value" :label="item.value">
+      {{ item.label }}
+    </el-radio>
+  </el-radio-group>
+</template>
+
+<script>
+export default {
+  name: 'DRadioGroup',
+  components: {},
+  model: {
+    prop: 'modelValue',
+    event: 'modelChange'
+  },
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('modelChange', value)
+      }
+    }
+  },
+  watch: {},
+  created() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss"></style>

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.prop"
+        :span="item.span || Math.floor(24 / cell)"
+        class="col-item"
+      >
+        <div class="d-search-item">
+          <div class="d-search-item-label">
+            {{ item.label }}
+          </div>
+          <form-item v-model="form[item.prop]" :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' : '24px'
+          }"
+          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">
+.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: 4px 8px;
+  }
+  .d-search-item {
+    margin-bottom: 12px;
+    &-label {
+      margin-bottom: 4px;
+      font-weight: 400;
+      color: #333333;
+    }
+    .el-input__inner {
+      height: 32px !important;
+    }
+  }
+}
+</style>