haiwei-ui 1.0.0

package/packages/components/form-page/index.vue

@@ -0,0 +1,195 @@
+<template>
+  <nm-box ref="page" class="nm-form-page" no-scrollbar :title="title" :icon="icon" :header="header" :footer="!noFooter" :fullscreen="fullscreen" :loading="!noLoading && loading">
+    <!--标题-->
+    <template v-slot:title>
+      <slot name="title"></slot>
+    </template>
+
+    <!--工具栏之前-->
+    <template v-slot:toolbar-before>
+      <slot name="toolbar-before" />
+    </template>
+
+    <!--工具栏插槽-->
+    <template v-slot:toolbar>
+      <slot name="toolbar" />
+    </template>
+
+    <section class="nm-form-page-body">
+      <nm-scrollbar :horizontal="false">
+        <nm-form
+          class="nm-form-page-main"
+          ref="form"
+          no-loading
+          :model="model"
+          :rules="rules"
+          :action="action"
+          :label-width="labelWidth"
+          :label-position="labelPosition"
+          :customValidate="validate"
+          :success-msg="successMsg"
+          :success-msg-text="successMsgText"
+          :disabled="disabled"
+          :inline="inline"
+          :custom-reset-function="customResetFunction"
+          v-on="formOn"
+          @validate="onValidate"
+        >
+          <slot />
+        </nm-form>
+      </nm-scrollbar>
+    </section>
+
+    <!--底部-->
+    <template v-slot:footer class="nm-form-page-footer">
+      <div class="nm-form-page-footer-left">
+        <slot name="footer-left" />
+      </div>
+      <div class="nm-form-page-footer-right">
+        <slot name="fotter">
+          <el-button v-if="btnOk" :type="btnOkType" @click="submit" :size="fontSize" :disabled="disabled">{{ btnOkText }}</el-button>
+          <el-button v-if="btnReset" type="info" @click="reset" :size="fontSize" :disabled="disabled">重置</el-button>
+        </slot>
+      </div>
+    </template>
+  </nm-box>
+</template>
+<script>
+export default {
+  name: 'FormPage',
+  data() {
+    return {
+      loading: false,
+      formOn: {
+        success: this.onSuccess,
+        error: this.onError,
+        reset: this.onReset,
+        'validate-error': this.onValidateError
+      }
+    }
+  },
+  props: {
+    /** 显示头部 */
+    header: {
+      type: Boolean,
+      default: true
+    },
+    /** 标题 */
+    title: String,
+    /** box图标 */
+    icon: {
+      type: String,
+      default: 'detail'
+    },
+    /** 表单 */
+    model: {
+      type: Object,
+      required: true
+    },
+    /** 验证规则 */
+    rules: Object,
+    /** 提交请求 */
+    action: {
+      type: Function,
+      required: true
+    },
+    /** 行内表单 */
+    inline: Boolean,
+    /** 标签的宽度 */
+    labelWidth: String,
+    /** 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width */
+    labelPosition: String,
+    // 自定义验证
+    validate: Function,
+    /** 是否显示成功提示消息 */
+    successMsg: {
+      type: Boolean,
+      default: true
+    },
+    /** 成功提示消息文本 */
+    successMsgText: {
+      type: String,
+      default: '保存成功'
+    },
+    /** Ok按钮 */
+    btnOk: {
+      type: Boolean,
+      default: true
+    },
+    /** Ok按钮文本 */
+    btnOkText: {
+      type: String,
+      default: '保存'
+    },
+    /** Ok按钮类型 */
+    btnOkType: {
+      type: String,
+      default: 'primary'
+    },
+    /** reset按钮 */
+    btnReset: {
+      type: Boolean,
+      default: true
+    },
+    /** 自定义重置操作 */
+    customResetFunction: Function,
+    /** 是否显示全屏按钮 */
+    fullscreen: {
+      type: Boolean,
+      default: true
+    },
+    /** 禁用表单 */
+    disabled: Boolean,
+    /**不显示底部 */
+    noFooter: Boolean,
+    /**不显示加载动画 */
+    noLoading: Boolean
+  },
+  methods: {
+    /** 提交 */
+    submit() {
+      this.loading = true
+      this.$refs.form.submit()
+    },
+    /** 重置 */
+    reset() {
+      this.$nextTick(() => {
+        this.$refs.form.reset()
+      })
+    },
+    /** 清除验证信息 */
+    clearValidate() {
+      this.$refs.form.clearValidate()
+    },
+    /** 打开loading */
+    openLoading() {
+      this.loading = true
+      this.$refs.form.openLoading()
+    },
+    /** 关闭loading */
+    closeLoading() {
+      this.loading = false
+      this.$refs.form.closeLoading()
+    },
+    // 成功
+    onSuccess(data) {
+      this.loading = false
+      this.$emit('success', data)
+    },
+    onReset() {
+      this.$emit('reset')
+    },
+    onError() {
+      this.loading = false
+      this.$emit('error')
+    },
+    onValidateError() {
+      this.loading = false
+      this.$emit('validate-error')
+    },
+    onValidate(prop, valid, msg) {
+      this.$emit('validate', prop, valid, msg)
+    }
+  }
+}
+</script>

package/packages/components/icon/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg class="nm-icon" :class="iconClass" aria-hidden="true">
+    <use :xlink:href="`#icon-${this.name}`" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'Icon',
+  props: {
+    iconClass: String,
+    name: String
+  }
+}
+</script>

package/packages/components/icon-picker/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <section class="nm-icon-picker">
+    <div class="nm-icon-picker-input">
+      <el-input :placeholder="placeholder" v-model="icon" @change="onChange">
+        <template v-slot:prepend>
+          <nm-icon :name="icon" />
+        </template>
+      </el-input>
+    </div>
+    <div class="nm-icon-picker-button">
+      <nm-button icon="search" @click="panelVisible = true" />
+    </div>
+    <panel :visible.sync="panelVisible" @success="onSelect" />
+  </section>
+</template>
+<script>
+import Panel from './panel'
+export default {
+  name: 'IconPicker',
+  components: { Panel },
+  data() {
+    return {
+      icon: this.value,
+      panelVisible: false
+    }
+  },
+  props: {
+    value: String,
+    placeholder: String
+  },
+  methods: {
+    onChange(val) {
+      this.$emit('input', val)
+    },
+    onSelect(icon) {
+      if (icon !== '') {
+        this.icon = icon
+        this.onChange(icon)
+      }
+    },
+    reset() {
+      this.icon = ''
+      this.onChange('')
+    }
+  },
+  watch: {
+    value() {
+      if (this.icon !== this.value) this.icon = this.value
+    }
+  }
+}
+</script>

package/packages/components/icon-picker/panel.vue

@@ -0,0 +1,81 @@
+<template>
+  <nm-dialog v-bind="dialog" v-on="dialogOn" :visible.sync="visible_">
+    <template v-slot:toolbar>
+      <el-input class="nm-icon-picker-panel-filter" v-model="filter" placeholder="请输入英文或中文名称" clearable></el-input>
+    </template>
+    <section class="nm-icon-picker-panel">
+      <el-tooltip v-for="icon in filterList" :key="icon" effect="dark" :open-delay="800" :content="icon" placement="top">
+        <div class="nm-icon-picker-panel-item" @click="onSelect(icon)">
+          <nm-icon :name="icon" />
+        </div>
+      </el-tooltip>
+    </section>
+  </nm-dialog>
+</template>
+<script>
+import visible from '../../mixins/components/visible.js'
+export default {
+  mixins: [visible],
+  data() {
+    return {
+      list: [],
+      filter: '',
+      dialog: {
+        title: '选择图标',
+        icon: 'list',
+        height: '60%',
+        width: '600px',
+        fullscreen: true
+      },
+      dialogOn: {
+        open: this.onOpen,
+        opened: this.onOpened,
+        close: this.onClose,
+        closed: this.onClosed
+      }
+    }
+  },
+  computed: {
+    filterList() {
+      if (!this.filter) {
+        return this.list
+      }
+
+      let list = []
+      this.list.forEach(icon => {
+        if (icon.indexOf(this.filter) > -1 || icon.indexOf(this.filter) > -1) {
+          list.push(icon)
+        }
+      })
+      return list
+    }
+  },
+  methods: {
+    onSelect(icon) {
+      this.$emit('success', icon)
+      this.hide()
+    },
+    onOpen() {
+      this.$emit('open')
+    },
+    onOpened() {
+      this.$emit('opened')
+    },
+    onClose() {
+      this.$emit('close')
+    },
+    onClosed() {
+      this.$emit('closed')
+    }
+  },
+  created() {
+    var symbols = document.querySelectorAll('body>svg>symbol')
+    symbols.forEach(m => {
+      this.list.push(m.id.replace('icon-', ''))
+    })
+  },
+  destroyed() {
+    this.list = null
+  }
+}
+</script>

package/packages/components/index.js

@@ -0,0 +1,26 @@
+import lib from '../library'
+
+let components = []
+let loginComponents = []
+const requireComponent = require.context('../components', true, /index\.(vue|js)$/)
+requireComponent
+  .keys()
+  .filter(item => item !== './index.js')
+  .forEach(fileName => {
+    const componentConfig = requireComponent(fileName)
+    if (componentConfig.default && componentConfig.default.name) {
+      components.push(componentConfig.default)
+
+      // 登录组件
+      if (fileName.includes('login-')) {
+        loginComponents.push(fileName.split('/')[1].split('-')[1])
+      }
+    }
+  })
+export default function(Vue) {
+  components.forEach(component => {
+    Vue.component(`${lib.prefix}${component.name}`, component)
+  })
+}
+
+export { loginComponents }

package/packages/components/label/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <span :class="class_">
+    <slot>{{ text }}</slot>
+  </span>
+</template>
+<script>
+export default {
+  name: 'Label',
+  props: {
+    /** 显示文本 */
+    text: String,
+    /** 类型 */
+    type: String,
+    /** 左边箭头 */
+    arrowed: Boolean,
+    /** 左侧内箭头 */
+    arrowedIn: Boolean,
+    /** 右侧箭头 */
+    arrowedRight: Boolean,
+    /** 右侧内箭头 */
+    arrowedRightIn: Boolean,
+    /** 尺寸 */
+    size: String
+  },
+  computed: {
+    class_() {
+      return [
+        'nm-label',
+        this.type ? `nm-label-${this.type}` : '',
+        this.arrowed ? 'arrowed' : '',
+        this.arrowedIn ? 'arrowed-in' : '',
+        this.arrowedRight ? 'arrowed-right' : '',
+        this.arrowedRightIn ? 'arrowed-right-in' : '',
+        this.size || this.fontSize
+      ]
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,190 @@
+<template>
+  <component v-bind:is="`nm-${options.showMode || 'drawer'}`" header footer draggable :padding="10" :title="title" :icon="icon" :width="width" :height="height" :visible.sync="visible_">
+    <el-form ref="form" :model="model" :rules="rules" :size="fontSize" label-width="120px">
+      <el-form-item label="显示标题：" prop="showTitle">
+        <el-switch v-model="model.showTitle"> </el-switch>
+      </el-form-item>
+      <el-form-item v-if="model.showTitle" label="标题内容：" prop="title">
+        <el-input v-model="model.title" clearable> </el-input>
+      </el-form-item>
+      <el-form-item label="文件名称：" prop="fileName">
+        <el-input v-model="model.fileName">
+          <template slot="append">{{ ext }}</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="导出格式：" prop="format">
+        <el-radio-group v-model="model.format">
+          <el-radio :label="0">xlsx</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="导出模式：" prop="mode">
+        <el-radio-group v-model="model.mode">
+          <el-radio :label="0">当前条件所有数据</el-radio>
+          <el-radio :label="1">当前页数据</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="设置列：">
+        <el-table ref="table" :data="columns" border stripe size="mini" max-height="400" @selection-change="onSelectionChange">
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column prop="name" label="字段"></el-table-column>
+          <el-table-column prop="label" label="列名">
+            <template v-slot="{ row }">
+              <el-input v-model="row.label" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="width">
+            <template slot="header"
+              >宽度 <el-tooltip effect="dark" content="0表示自适应" placement="top"> <i class="el-icon-info nm-size-15 nm-text-warning"> </i></el-tooltip
+            ></template>
+            <template v-slot="{ row }">
+              <el-input type="number" v-model.number="row.width" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="align" label="对齐方式">
+            <template v-slot="{ row }">
+              <el-select v-model="row.align" placeholder="请选择">
+                <el-option label="居左" value="left"> </el-option>
+                <el-option label="居中" value="center"> </el-option>
+                <el-option label="居右" value="right"> </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column prop="format">
+            <template slot="header"
+              >格式化 <el-tooltip effect="dark" content="如日期：yyyy-MM-dd" placement="top"> <i class="el-icon-info nm-size-15 nm-text-warning"> </i></el-tooltip
+            ></template>
+            <template v-slot="{ row }">
+              <el-input v-model="row.format" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+      <el-collapse>
+        <el-collapse-item>
+          <template slot="title"
+            ><span class="nm-p-l-10">
+              <i class="el-icon-s-tools nm-size-16" style="position: relative;top: 2px;"></i>
+              高级选项</span
+            >
+          </template>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="显示列名：" prop="showColName">
+                <el-switch v-model="model.showColName"> </el-switch>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="显示导出日期：" prop="showExportDate">
+                <el-switch v-model="model.showExportDate"> </el-switch>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="显示导出人：" prop="showExportPeople">
+                <el-switch v-model="model.showExportPeople"> </el-switch>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item label="显示版权：" prop="showCopyright">
+            <el-switch v-model="model.showCopyright"> </el-switch>
+          </el-form-item>
+          <el-form-item v-if="model.showCopyright" label="版权信息：" prop="copyright">
+            <el-input :value="copyright" disabled />
+          </el-form-item>
+        </el-collapse-item>
+      </el-collapse>
+    </el-form>
+
+    <!--底部-->
+    <template v-slot:footer>
+      <nm-button type="success" text="导出" @click="onExport" />
+      <nm-button type="info" text="取消" @click="hide" />
+    </template>
+  </component>
+</template>
+<script>
+import dialog from '../../../../mixins/components/dialog'
+import { mapState } from 'vuex'
+export default {
+  mixins: [dialog],
+  data() {
+    return {
+      title: '导出数据',
+      icon: 'export',
+      width: '800px',
+      height: '500px',
+      model: {
+        columns: [],
+        showTitle: true,
+        title: '',
+        fileName: '',
+        format: 0,
+        mode: 0,
+        showCopyright: false,
+        showColName: true,
+        showExportDate: false,
+        showExportPeople: false
+      },
+      rules: {
+        title: [{ required: true, message: '请输入标题', trigger: 'change' }],
+        fileName: [{ required: true, message: '请输入文件名称', trigger: 'change' }]
+      },
+      columns: []
+    }
+  },
+  props: {
+    cols: Array,
+    /**导出显示模式 */
+    options: Object
+  },
+  computed: {
+    ...mapState('app/config', { copyright: s => s.system.copyright }),
+    ext() {
+      return '.xlsx'
+    }
+  },
+  methods: {
+    /**初始化 */
+    init() {
+      const { title, format, mode, showTitle, showCopyright, showColName, showExportDate, showExportPeople } = this.options
+
+      this.model.title = title
+      this.model.fileName = `${title}_${this.$dayjs().format('YYYYMMDDHHmmss')}`
+      this.model.format = format
+      this.model.mode = mode
+      this.model.showTitle = showTitle
+      this.model.showCopyright = showCopyright
+      this.model.showColName = showColName
+      this.model.showExportDate = showExportDate
+      this.model.showExportPeople = showExportPeople
+      this.columns = this.cols.map(m => {
+        let col = this.$parent.listCol2ExportCol(m)
+        //把已显示的加到选中列表
+        if (m.show) {
+          this.model.columns.push(col)
+        }
+        return col
+      })
+
+      this.$nextTick(() => {
+        //设置已选择的列
+        this.model.columns.map(m => {
+          this.$refs.table.toggleRowSelection(m)
+        })
+      })
+    },
+    onSelectionChange(val) {
+      this.model.columns = val
+    },
+    onExport() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          this.$parent.export_(this.model)
+        }
+      })
+    }
+  },
+  created() {
+    this.init()
+  }
+}
+</script>

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

@@ -0,0 +1,67 @@
+<template>
+  <footer class="nm-list-footer" :class="[reverse ? 'reverse' : '']">
+    <div class="nm-list-footer-left">
+      <slot />
+    </div>
+    <div class="nm-list-footer-right">
+      <el-pagination
+        background
+        :current-page="value.index"
+        :page-size="value.size"
+        :total="total"
+        :page-sizes="pageSizes"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="onSizeChange"
+        @current-change="onIndexChange"
+      />
+      <select-column v-if="!noSelectColumn" :columns="columns" @change="onSelectColumnChange" />
+    </div>
+  </footer>
+</template>
+<script>
+import SelectColumn from '../select-column'
+export default {
+  components: { SelectColumn },
+  props: {
+    /** 分页信息 */
+    value: {
+      type: Object,
+      required: true
+    },
+    /** 总数 */
+    total: Number,
+    /** 列集合 */
+    columns: Array,
+    /** 不显示选择列按钮 */
+    noSelectColumn: Boolean,
+    /** 左右反转 */
+    reverse: Boolean,
+    /** 页数选择项 */
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 15, 50, 100]
+      }
+    }
+  },
+  methods: {
+    onSizeChange(size) {
+      console.log(size)
+      const page = Object.assign({}, this.value, { size, index: 1 })
+      this.$emit('input', page)
+      this.$parent.query()
+      this.$parent.$emit('size-change', size)
+    },
+    onIndexChange(index) {
+      const page = Object.assign({}, this.value, { index })
+      this.$emit('input', page)
+      this.$parent.query()
+      this.$parent.$emit('index-change', index)
+    },
+    onSelectColumnChange() {
+      // 重绘父组件的布局
+      this.$parent.doLayout()
+    }
+  }
+}
+</script>