haiwei-ui 1.0.0

package/packages/components/list/components/header/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <header class="nm-list-header">
+    <div class="nm-list-icon">
+      <nm-icon :name="icon || 'list'" />
+    </div>
+    <div class="nm-list-title">{{ title }}</div>
+    <div class="nm-list-header-toolbar">
+      <!--工具栏插槽-->
+      <slot name="toolbar" />
+      <!--导出按钮-->
+      <nm-button v-if="exportEnabled" icon="export" @click="onExportClick" v-nm-has="exportBtnCode" />
+      <!--刷新按钮-->
+      <nm-button v-if="!noRefresh" icon="refresh" @click="refresh" />
+      <!--全屏按钮-->
+      <nm-button v-if="!noFullscreen" :icon="fullscreen ? 'min' : 'max'" @click="onFullscreenClick" />
+    </div>
+  </header>
+</template>
+<script>
+export default {
+  props: {
+    value: Object,
+    /** 标题 */
+    title: String,
+    /** 图标 */
+    icon: String,
+    /** 是否全屏 */
+    fullscreen: Boolean,
+    /** 不显示全屏按钮 */
+    noFullscreen: Boolean,
+    /** 不显示刷新按钮 */
+    noRefresh: Boolean,
+    /**显示导出按钮 */
+    exportEnabled: Boolean,
+    /**导出按钮权限编码 */
+    exportBtnCode: String
+  },
+  methods: {
+    query() {
+      this.$parent.page.index = 1
+      this.$parent.query()
+    },
+    reset() {
+      this.$parent.reset()
+    },
+    refresh() {
+      this.$parent.refresh()
+    },
+    onFullscreenClick() {
+      this.$parent.triggerFullscreen()
+    },
+    onExportClick() {
+      this.$parent.triggerExport()
+    }
+  }
+}
+</script>

package/packages/components/list/components/querybar/index.vue

@@ -0,0 +1,188 @@
+<template>
+  <!--工具栏-->
+  <section class="nm-list-querybar">
+    <nm-form ref="normalForm" class="nm-list-querybar-normal" :model="model_" :rules="rules" :size="fontSize" :inline="true">
+      <slot />
+      <el-form-item v-if="!noSearch">
+        <nm-button type="primary" @click="query" :icon="!noSearchButtonIcon ? 'search' : ''" text="查询" />
+      </el-form-item>
+      <el-form-item v-if="!noReset">
+        <nm-button type="info" @click="reset" :icon="!noSearchButtonIcon ? 'refresh' : ''" text="重置" />
+      </el-form-item>
+      <el-form-item v-if="exportEnabled" v-nm-has="exportBtnCode">
+        <nm-button type="primary" @click="onExport" icon="export" text="导出" />
+      </el-form-item>
+      <el-form-item v-if="advanced_.enabled">
+        <nm-button ref="showAdvnacedBtn" type="warning" @click="onAdvancedClick">
+          高级查询
+          <i class="el-icon--right" :class="[showAdvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i>
+        </nm-button>
+      </el-form-item>
+      <!--自定义按钮插槽-->
+      <el-form-item>
+        <slot name="buttons" />
+      </el-form-item>
+    </nm-form>
+
+    <!--高级查询框-->
+    <transition name="el-zoom-in-top">
+      <section ref="advancedBox" class="nm-list-querybar-advanced" v-if="advanced_.enabled" v-show="showAdvanced" :style="advancedStyle">
+        <nm-box page header footer title="高级查询" icon="search">
+          <template v-slot:toolbar>
+            <nm-button icon="close" @click="showAdvanced = false" />
+          </template>
+          <!--查询条件-->
+          <nm-form ref="advancedForm" :model="model_" :rules="rules" :label-width="advanced_.labelWidth" :inline="advanced_.inline">
+            <slot name="advanced" />
+          </nm-form>
+          <template v-slot:footer>
+            <!--查询按钮-->
+            <nm-button type="primary" @click="query" text="查询" :icon="!noSearchButtonIcon ? 'search' : ''" />
+            <!--重置按钮-->
+            <nm-button type="info" @click="reset" text="重置" :icon="!noSearchButtonIcon ? 'refresh' : ''" />
+          </template>
+        </nm-box>
+        <div ref="arrow" class="advanced-arrow" />
+      </section>
+    </transition>
+  </section>
+</template>
+<script>
+const defaultAdvanced = {
+  // 是否开启
+  enabled: false,
+  // 宽度
+  width: '400px',
+  // 高度
+  height: '',
+  // 表单标签宽度
+  labelWidth: '100px',
+  // 内联表单
+  inline: false
+}
+export default {
+  data() {
+    return {
+      // 是否显示高级查询
+      showAdvanced: false
+    }
+  },
+  props: {
+    /** 输入框的宽度 */
+    inputWidth: {
+      type: String,
+      default: '160px'
+    },
+    /** 查询模型 */
+    model: Object,
+    /** 验证规则 */
+    rules: Object,
+    /** 高级查询属性 */
+    advanced: Object,
+    /** 不显示按钮图标 */
+    noSearchButtonIcon: Boolean,
+    /** 不需要查询 */
+    noSearch: Boolean,
+    /**不显示查询按钮 */
+    noReset: Boolean,
+    /**显示导出按钮 */
+    exportEnabled: Boolean,
+    /**导出按钮权限编码 */
+    exportBtnCode: String
+  },
+  computed: {
+    model_() {
+      return this.model || {}
+    },
+    /** 高级查询设置 */
+    advanced_() {
+      const ad = this.$_.merge({}, defaultAdvanced, this.advanced)
+      ad.enabled = ad.enabled && !this.noSearch
+      return ad
+    },
+    /** 高级查询框样式 */
+    advancedStyle() {
+      return {
+        width: this.advanced_.width,
+        height: this.advanced_.height
+      }
+    }
+  },
+  methods: {
+    query() {
+      this.$parent.page.index = 1
+      this.$parent.query()
+    },
+    /** 表单重置 */
+    reset() {
+      if (this.$refs.normalForm) {
+        this.$refs.normalForm.reset()
+      }
+      if (this.$refs.advancedForm) {
+        this.$refs.advancedForm.reset()
+      }
+      this.$emit('reset')
+    },
+    validate(action) {
+      return this.$refs.normalForm.validate(action)
+    },
+    /** 高级查询按钮点击事件 */
+    onAdvancedClick() {
+      this.showAdvanced = !this.showAdvanced
+
+      if (this.showAdvanced) {
+        this.$nextTick(() => {
+          let $box = this.$refs.advancedBox
+          let $arrow = this.$refs.arrow
+          const boxWidth = $box.offsetWidth
+          const { x, y, width, height } = this.$refs.showAdvnacedBtn.$el.getBoundingClientRect()
+          let left = x + width / 2 - $box.offsetWidth / 2
+          // 判断右侧有没有超出页面
+          if (left + boxWidth > document.body.offsetWidth) {
+            left = document.body.offsetWidth - boxWidth - 20
+            // 计算箭头的位置
+            $arrow.style.left = x - left - 10 + width / 2 + 'px'
+          } else {
+            // 计算箭头的位置
+            $arrow.style.left = $box.offsetWidth / 2 + 'px'
+          }
+
+          $box.style.left = left + 'px'
+          $box.style.top = y + height + 14 + 'px'
+
+          // 设置高度
+          if (!this.advanced_.height) {
+            const boxHeader = $box.querySelector('.nm-box-header').offsetHeight
+            const boxFooter = $box.querySelector('.nm-box-footer').offsetHeight
+            let boxHeight = $box.querySelector('.nm-form').offsetHeight + boxHeader + boxFooter + 20
+            if (!this.advanced_.inline) {
+              boxHeight += 20
+            }
+            $box.style.height = boxHeight + 'px'
+          }
+        })
+      }
+    },
+    onExport() {
+      this.$parent.triggerExport()
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.normalForm.$el.addEventListener('keydown', e => {
+        if (e.keyCode === 13) {
+          this.query()
+        }
+      })
+      if (this.inputWidth) {
+        let inputs = this.$refs.normalForm.$el.querySelectorAll('.el-input__inner')
+        if (inputs) {
+          for (let i = 0; i < inputs.length; i++) {
+            inputs[i].style.width = this.inputWidth
+          }
+        }
+      }
+    })
+  }
+}
+</script>

package/packages/components/list/components/select-column/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-dropdown class="nm-list-select-column" :size="fontSize" trigger="click" :hide-on-click="false" @visible-change="onVisible">
+    <span>
+      选择列
+      <i class="el-icon--right" :class="[visible ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i>
+    </span>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item>
+        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+      </el-dropdown-item>
+      <el-checkbox-group v-model="selection" @change="change">
+        <el-dropdown-item v-for="col in columns" :key="col.name">
+          <el-checkbox v-if="col.label !== ''" :label="col.name" :checked="col.show">{{ col.label }}</el-checkbox>
+        </el-dropdown-item>
+      </el-checkbox-group>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      checkAll: false,
+      isIndeterminate: true,
+      selection: [],
+      visible: false
+    }
+  },
+  props: ['columns'],
+  methods: {
+    change() {
+      let checkedCount = this.selection.length
+      this.checkAll = checkedCount === this.columns.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.columns.length
+      this.handleEvent()
+    },
+    handleCheckAllChange(val) {
+      this.selection = val ? this.columns.map(item => item.name) : []
+      this.isIndeterminate = false
+      this.handleEvent()
+    },
+    handleEvent() {
+      this.columns.forEach(col => {
+        col.show = !this.selection.every(name => name !== col.name)
+      })
+      this.$emit('change')
+    },
+    onVisible(visible) {
+      this.visible = visible
+    }
+  }
+}
+</script>

package/packages/components/list/components/table/index.vue

@@ -0,0 +1,210 @@
+<template>
+  <section class="nm-list-body-table">
+    <el-table
+      ref="table"
+      headerRowClassName="nm-list-body-table-header"
+      border
+      stripe
+      highlight-current-row
+      :show-summary="showSummary"
+      :sum-text="sumText"
+      :summary-method="summaryMethod"
+      :size="fontSize"
+      :height="height"
+      :span-method="spanMethod"
+      :data="rows"
+      :tree-props="treeProps"
+      :row-key="rowKey"
+      :lazy="lazy"
+      :load="load"
+      :default-expand-all="defaultExpandAll"
+      v-on="on"
+    >
+      <slot />
+    </el-table>
+  </section>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      on: {
+        select: this.onSelect,
+        'select-all': this.onSelectAll,
+        'selection-change': this.onSelectionChange,
+        'cell-mouse-enter': this.onCellMouseEnter,
+        'cell-mouse-leave': this.onCellMouseLeave,
+        'cell-click': this.onCellClick,
+        'cell-dblclick': this.onCellDblclick,
+        'row-click': this.onRowClick,
+        'row-contextmenu': this.onRowContextmenu,
+        'row-dblclick': this.onRowDblclick,
+        'header-click': this.onHeaderClick,
+        'header-contextmenu': this.onHeaderContextmenu,
+        'sort-change': this.onSortChange,
+        'current-change': this.onCurrentChange,
+        'expand-change': this.onExpandChange
+      }
+    }
+  },
+  props: {
+    /** 高度 */
+    height: {
+      type: String,
+      default: '100%'
+    },
+    /** 数据 */
+    rows: Array,
+    /** 合并行列方法 */
+    spanMethod: Function,
+    /**渲染嵌套数据的配置选项 */
+    treeProps: Object,
+    /*行数据的 Key，用来优化 Table 的渲染；
+    在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。
+    类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。*/
+    rowKey: [Function, String],
+    /*是否懒加载子节点数据*/
+    lazy: Boolean,
+    /**加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息 */
+    load: Function,
+    /**是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */
+    defaultExpandAll: Boolean,
+    /**当刷新时不清空已选择数据 */
+    noClearSelection: Boolean,
+    /**是否显示合计行 */
+    showSummary: Boolean,
+    /**合计行文本 */
+    sumText: String,
+    /**合计行自定义逻辑方法 */
+    summaryMethod: Function
+  },
+  methods: {
+    /** 清除排序 */
+    clearSort() {
+      this.$refs.table.clearSort()
+    },
+    /** 滚动到顶部 */
+    scrollTop() {
+      this.$nextTick(() => {
+        this.$el.querySelector('.el-table__body-wrapper').scrollTop = 0
+      })
+    },
+    /** 重绘布局 */
+    doLayout() {
+      this.$nextTick(() => {
+        this.$refs.table.doLayout()
+      })
+    },
+    /** 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） */
+    toggleRowSelection(row, selected) {
+      this.$refs.table.toggleRowSelection(row, selected)
+    },
+    /** 当用户手动勾选数据行的 Checkbox 时触发的事件 */
+    onSelect(selection, row) {
+      if (this.noClearSelection) {
+        let hasSelection = this.$parent.selection
+        if (!selection.every(m => m.id !== row.id)) {
+          //添加
+          hasSelection.push(row)
+        } else {
+          //移除
+          for (let i = 0; i < hasSelection.length; i++) {
+            if (hasSelection[i].id == row.id) {
+              hasSelection.splice(i, 1)
+              break
+            }
+          }
+        }
+      }
+      this.$parent.$emit('select', selection, row)
+    },
+    /** 当用户手动勾选全选 Checkbox 时触发的事件 */
+    onSelectAll(selection) {
+      if (this.noClearSelection) {
+        let hasSelection = this.$parent.selection
+        if (selection.length > 0) {
+          this.rows.forEach(m => {
+            if (!hasSelection.every(n => n.id !== m.id)) {
+              hasSelection.push(m)
+            }
+          })
+        } else {
+          //移除
+          this.rows.forEach(m => {
+            for (let i = 0; i < hasSelection.length; i++) {
+              if (hasSelection[i].id == m.id) {
+                hasSelection.splice(i, 1)
+                break
+              }
+            }
+          })
+        }
+      }
+      this.$parent.$emit('select-all', this.$parent.selection)
+    },
+    /** 当选择项发生变化时会触发该事件 */
+    onSelectionChange(selection) {
+      if (!this.noClearSelection) {
+        this.$parent.selection = selection
+      }
+      this.$parent.$emit('selection-change', this.$parent.selection)
+    },
+    /** 当单元格 hover 进入时会触发该事件 */
+    onCellMouseEnter(row, column, cell, event) {
+      this.$parent.$emit('cell-mouse-enter', row, column, cell, event)
+    },
+    /** 当单元格 hover 退出时会触发该事件 */
+    onCellMouseLeave(row, column, cell, event) {
+      this.$parent.$emit('cell-mouse-leave', row, column, cell, event)
+    },
+    /** 当某个单元格被点击时会触发该事件 */
+    onCellClick(row, column, cell, event) {
+      this.$parent.$emit('cell-click', row, column, cell, event)
+    },
+    /** 当某个单元格被双击击时会触发该事件 */
+    onCellDblclick(row, column, cell, event) {
+      this.$parent.$emit('cell-dblclick', row, column, cell, event)
+    },
+    /** 当某一行被点击时会触发该事件 */
+    onRowClick(row, event, column) {
+      this.$parent.$emit('row-click', row, event, column)
+    },
+    /** 当某一行被鼠标右键点击时会触发该事件 */
+    onRowContextmenu(row, event) {
+      this.$parent.$emit('row-contextmenu', row, event)
+    },
+    /** 当某一行被双击时会触发该事件 */
+    onRowDblclick(row, event) {
+      this.$parent.$emit('row-dblclick', row, event)
+    },
+    /** 当某一列的表头被点击时会触发该事件 */
+    onHeaderClick(column, event) {
+      this.$parent.$emit('header-click', column, event)
+    },
+    /** 当某一列的表头被鼠标右键点击时触发该事件 */
+    onHeaderContextmenu(column, event) {
+      this.$parent.$emit('header-contextmenu', column, event)
+    },
+    /** 当表格的排序条件发生变化的时候会触发该事件 */
+    onSortChange(val) {
+      this.$parent.page.sort = []
+      // 将排序信息转化成后端的格式
+      if (val.prop !== null) {
+        this.$parent.page.sort.push({ field: val.prop, type: val.order === 'ascending' ? 0 : 1 })
+      }
+
+      this.$parent.refresh()
+
+      this.$parent.$emit('sort-change', this.$parent.page.sort, val)
+    },
+    /** 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 */
+    onCurrentChange(currentRow, oldCurrentRow) {
+      this.$parent.$emit('current-change', currentRow, oldCurrentRow)
+    },
+    /**当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded） */
+    onExpandChange(currentRow, expandedRows) {
+      this.$parent.$emit('expand-change', currentRow, expandedRows)
+    }
+  }
+}
+</script>

package/packages/components/list/default.js

@@ -0,0 +1,63 @@
+// 默认列信息
+const columnInfo = {
+  // 列的字段名称
+  name: '',
+  // 列的显示名称
+  label: '',
+  // 宽度
+  width: '',
+  // 排序
+  sortable: false,
+  // 固定列
+  fixed: false,
+  // 对其方式
+  align: 'center',
+  // 表头对其方式
+  headerAlign: 'center',
+  // 是否显示
+  show: true,
+  // 格式化，暂时针对日期，采用dayjs组件 https://github.com/iamkun/dayjs/blob/dev/docs/zh-cn/API-reference.md
+  format: '',
+  // 当内容过长被隐藏时显示 tooltip
+  showOverflowTooltip: true,
+  //导出配置
+  export: {
+    //导出列宽
+    width: 0
+  }
+}
+
+//默认导出配置
+const exportOptions = {
+  /**启用导出功能 */
+  enabled: false,
+  /**导出数据的方法 */
+  action: null,
+  /**开启高级选项 */
+  advanced: false,
+  /**高级选项显示模式，drawer/dialog */
+  showMode: 'drawer',
+  /**按钮位置，tool：右上角工具栏 querybar：查询栏里面 */
+  btnLocation: 'tool',
+  /**按钮编码，用于控制按钮权限 */
+  btnCode: '',
+  /**默认导出格式 */
+  format: 0,
+  /**默认导出模式 */
+  mode: 0,
+  /**默认是否显示标题 */
+  showTitle: true,
+  /**默认是否显示版权信息 */
+  showCopyright: false,
+  /**默认是否显示列名 */
+  showColName: true,
+  /**默认是否显示导出日期 */
+  showExportDate: false,
+  /**默认是否显示导出人 */
+  showExportPeople: false
+}
+
+export default {
+  columnInfo,
+  exportOptions
+}