haiwei-ui 1.0.0

package/packages/components/list-agile/index.vue

@@ -0,0 +1,223 @@
+<template>
+  <section :class="class_" v-loading="showLoading" :element-loading-text="loadingText || loadingText_" :element-loading-background="loadingBackground" :element-loading-spinner="loadingSpinner">
+    <!--header-->
+    <query-header v-if="!noHeader" :title="title" :icon="icon" :no-fullscreen="noFullscreen" :fullscreen.sync="fullscreen" :no-refresh="noRefresh">
+      <template v-slot:toolbar>
+        <slot name="header-toolbar" :total="total" :selection="selection" />
+      </template>
+    </query-header>
+
+    <!--查询栏-->
+    <querybar ref="querybar" v-if="!noQuerybar" v-bind="querybar">
+      <template v-slot>
+        <slot name="querybar" />
+      </template>
+      <template v-slot:buttons>
+        <slot name="querybar-buttons" :total="total" :selection="selection" />
+      </template>
+      <template v-slot:advanced>
+        <slot name="querybar-advanced" />
+      </template>
+    </querybar>
+
+    <section class="nm-list-body">
+      <query-table ref="table" :rows="rows" :span-method="spanMethod" :selection.sync="selection">
+        <!-- 多选 -->
+        <el-table-column v-if="multiple" fixed="left" align="center" type="selection" width="55" />
+
+        <!-- 序号 -->
+        <el-table-column v-if="showNo" fixed="left" align="center" type="index" :index="getNo">
+          <template v-slot:header>
+            <slot name="col-no-header">序号</slot>
+          </template>
+          <template slot-scope="{ row, $index }">
+            <div class="nm-list-no">
+              <slot name="col-no" :row="row">{{ getNo($index) }}</slot>
+            </div>
+          </template>
+        </el-table-column>
+
+        <!--表格主体-->
+        <slot name="tbody"></slot>
+
+        <!-- 操作列 -->
+        <el-table-column v-if="!noOperation" :width="operationWidth" fixed="right" align="center" label="操作">
+          <template v-slot:header>
+            <slot name="col-operation-header">操作</slot>
+          </template>
+          <template slot-scope="{ row }">
+            <div class="nm-list-operation">
+              <slot name="col-operation" :row="row" />
+            </div>
+          </template>
+        </el-table-column>
+      </query-table>
+    </section>
+
+    <!--footer-->
+    <query-footer v-if="!noFooter" v-model="page" :total="total" no-select-column :reverse="footerReverse">
+      <slot name="footer" :total="total" :selection="selection" />
+    </query-footer>
+    <slot />
+  </section>
+</template>
+<script>
+import { mapState } from 'vuex'
+import QueryHeader from '../list/components/header'
+import Querybar from '../list/components/querybar'
+import QueryTable from '../list/components/table'
+import QueryFooter from '../list/components/footer'
+
+export default {
+  name: 'ListAgile',
+  components: { QueryHeader, Querybar, QueryTable, QueryFooter },
+  data() {
+    return {
+      loading_: false,
+      fullscreen: false,
+      // 分页数据
+      page: {
+        index: 1,
+        size: 15,
+        sort: []
+      },
+      // 数据列表
+      rows: [],
+      // 总数量
+      total: 0,
+      selection: []
+    }
+  },
+  props: {
+    /** 标题 */
+    title: String,
+    /** 图标 */
+    icon: String,
+    // 查询方法
+    action: {
+      type: Function,
+      required: true
+    },
+    /** 查询表单输入框宽度 */
+    inputWidth: String,
+    // 模型
+    model: Object,
+    /** 模型验证规则 */
+    rules: Object,
+    /** 高级查询 */
+    advanced: Object,
+    /** 多选 */
+    multiple: Boolean,
+    /** 显示序号 */
+    showNo: {
+      type: Boolean,
+      default: true
+    },
+    /** 不显示操作列 */
+    noOperation: Boolean,
+    /** 操作列宽度 */
+    operationWidth: [String, Number],
+    /** 不显示查询栏 */
+    noQuerybar: Boolean,
+    /** 不显示全屏按钮 */
+    noFullscreen: Boolean,
+    /** 不显示刷新按钮 */
+    noRefresh: Boolean,
+    /** 不显示头部 */
+    noHeader: Boolean,
+    /** 不显示底部 */
+    noFooter: Boolean,
+    /** 不包含搜索功能 */
+    noSearch: Boolean,
+    /** 不显示查询按钮图标 */
+    noSearchButtonIcon: Boolean,
+    /** 底部反转 */
+    footerReverse: Boolean,
+    /** 合并行列的方法 */
+    spanMethod: Function,
+    /** 加载中动画 */
+    loading: Boolean,
+    /** 加载中文本 */
+    loadingText: String,
+    /** 创建后执行一次查询 */
+    queryOnCreated: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapState('app/loading', { loadingText_: 'text', loadingBackground: 'background', loadingSpinner: 'spinner' }),
+    class_() {
+      return ['nm-list', this.fontSize ? `nm-list-${this.fontSize}` : '', this.fullscreen ? 'fullscreen' : '']
+    },
+    querybar() {
+      return {
+        model: this.model,
+        rules: this.rules,
+        inputWidth: this.inputWidth,
+        advanced: this.advanced,
+        noSearch: this.noSearch,
+        noSearchButtonIcon: this.noSearchButtonIcon
+      }
+    },
+    showLoading() {
+      return this.loading || this.loading_
+    }
+  },
+  methods: {
+    /** 查询方法 */
+    query() {
+      if (this.loading_) {
+        return
+      }
+
+      this.loading_ = true
+      let fullModel = Object.assign({}, this.model)
+
+      // 设置分页
+      fullModel.page = this.page
+
+      this.action(fullModel)
+        .then(data => {
+          this.rows = data.rows
+          this.total = data.total
+          // 回到顶部
+          this.$refs.table.scrollTop()
+          // 重新绘制布局
+          this.$refs.table.doLayout()
+          this.loading_ = false
+        })
+        .catch(() => {
+          this.loading_ = false
+        })
+    },
+    /** 刷新 */
+    refresh() {
+      this.page.index = 1
+      this.query()
+    },
+    /** 查询表单重置 */
+    reset(from) {
+      if (!from) {
+        this.$refs.querybar.reset()
+      } else {
+        this.$refs.table.clearSort()
+        this.page.index = 1
+      }
+    },
+    /** 获取序号 */
+    getNo(index) {
+      return (this.page.index - 1) * this.page.size + index + 1
+    }
+  },
+  created() {
+    if (this.queryOnCreated) {
+      this.query()
+    }
+  },
+  activated() {
+    // 重新绘制布局
+    this.$refs.table.doLayout()
+  }
+}
+</script>

package/packages/components/list-dialog/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <nm-dialog
+    class="nm-list-dialog"
+    no-scrollbar
+    :title="title"
+    :icon="icon"
+    :width="width"
+    :height="height"
+    :fullscreen="fullscreen"
+    :close-on-click-modal="closeOnClickModal"
+    :draggable="draggable"
+    :drag-out-page="dragOutPage"
+    :drag-min-width="dragMinWidth"
+    :visible.sync="visible_"
+    v-on="on"
+  >
+    <template v-slot:title>
+      <slot name="title" />
+    </template>
+    <template v-slot:toolbar>
+      <!--刷新按钮-->
+      <nm-button icon="refresh" @click="refresh" />
+    </template>
+    <slot />
+  </nm-dialog>
+</template>
+<script>
+import visible from '../../mixins/components/visible.js'
+export default {
+  name: 'ListDialog',
+  mixins: [visible],
+  data() {
+    return {
+      on: {
+        open: this.onOpen,
+        opened: this.onOpened,
+        close: this.onClose,
+        closed: this.onClosed
+      }
+    }
+  },
+  props: {
+    /** 标题 */
+    title: String,
+    /** 图标 */
+    icon: {
+      type: String,
+      default: 'list'
+    },
+    /** Dialog 的宽度 */
+    width: {
+      type: String,
+      default: '60%'
+    },
+    /** Dialog 的高度 */
+    height: {
+      type: [Number, String],
+      default: '80%'
+    },
+    /** 是否显示全屏按钮 */
+    fullscreen: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否可以通过点击 modal 关闭 Dialog */
+    closeOnClickModal: {
+      type: Boolean,
+      default: null
+    },
+    /** 是否可拖拽 */
+    draggable: {
+      type: Boolean,
+      default: null
+    },
+    /** 是否可拖出页面 */
+    dragOutPage: Boolean,
+    /** 拖拽出页面后保留的最小宽度 */
+    dragMinWidth: Number
+  },
+  methods: {
+    refresh() {
+      this.$slots.default.map(slot => {
+        if (slot.componentOptions.tag === 'nm-list') {
+          slot.componentInstance.refresh()
+        }
+      })
+    },
+    onOpen() {
+      this.$emit('open')
+    },
+    onOpened() {
+      this.$emit('opened')
+    },
+    onClose() {
+      this.$emit('close')
+    },
+    onClosed() {
+      this.$emit('closed')
+    }
+  }
+}
+</script>

package/packages/components/listbox/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <nm-box ref="page" page header class="nm-listbox" :icon="icon">
+    <template v-slot:header>
+      <div class="nm-box-header-icon">
+        <nm-icon v-if="icon" :name="icon" />
+      </div>
+      <div class="nm-box-header-text">{{ title }}</div>
+      <span v-if="!noCount" class="nm-listbox-count">已选 {{ value.length }} 个</span>
+    </template>
+
+    <ul v-if="value && value.length > 0" class="nm-listbox-list">
+      <li class="nm-listbox-item" v-for="item in value_" :key="item.value" :title="item.label">
+        <slot :item="item">
+          <span class="nm-listbox-item-text">{{ item.label }}</span>
+          <nm-button class="nm-listbox-delete" circle type="danger" icon="delete" @click="remove(item.value)" />
+        </slot>
+      </li>
+    </ul>
+    <p v-else class="no-data">无</p>
+  </nm-box>
+</template>
+<script>
+export default {
+  name: 'Listbox',
+  data() {
+    return {
+      value_: this.value,
+      resizeing: false
+    }
+  },
+  props: {
+    value: {
+      type: Array,
+      required: true
+    },
+    // 标题
+    title: {
+      type: String,
+      default: '列表'
+    },
+    // 左侧图标
+    icon: {
+      type: String,
+      default: 'select'
+    },
+    /** 不显示数量 */
+    noCount: Boolean
+  },
+  methods: {
+    remove(v) {
+      this.value_.splice(
+        this.value_.findIndex(item => item.value === v),
+        1
+      )
+      this.$emit('input', this.value_)
+      this.$emit('remove', v, this.value_)
+    },
+    scrollbarResize() {
+      if (!this.resizeing) {
+        this.resizeing = true
+        setTimeout(() => {
+          this.$nextTick(() => {
+            this.$refs.page.scrollbarResize()
+            this.resizeing = false
+          })
+        }, 300)
+      }
+    }
+  },
+  watch: {
+    value(val) {
+      this.value_ = val
+      this.scrollbarResize()
+    }
+  }
+}
+</script>

package/packages/components/login-default/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="nm-login-default">
+    <div class="nm-login-bg" />
+    <div class="nm-login-box">
+      <div class="nm-login-content">
+        <div class="nm-login-logo">
+          <img class="nm-login-logo-img" :src="logoUrl" />
+          <h1 class="nm-login-logo-title">{{ title }}</h1>
+        </div>
+        <el-form ref="form" :model="form" :rules="rules">
+          <el-form-item v-if="loginOptions.accountTypes" prop="accountType">
+            <el-select v-model="form.accountType" placeholder="账户类型">
+              <template v-slot:prefix>
+                <nm-icon name="project" />
+              </template>
+              <el-option v-for="item in loginOptions.accountTypes" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="userName">
+            <el-input v-model="form.userName" placeholder="用户名">
+              <template v-slot:prefix>
+                <nm-icon name="user" />
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input type="password" v-model="form.password" autocomplete="off" placeholder="密码">
+              <template v-slot:prefix>
+                <nm-icon name="password" />
+              </template>
+            </el-input>
+          </el-form-item>
+          <div v-if="loginOptions.verifyCode" class="verifycode">
+            <div class="verifycode-input">
+              <el-form-item prop="verifyCode.code">
+                <el-input v-model="form.verifyCode.code" autocomplete="off" placeholder="验证码">
+                  <template v-slot:prefix>
+                    <nm-icon name="verifycode"></nm-icon>
+                  </template>
+                </el-input>
+              </el-form-item>
+            </div>
+            <div class="verifycode-img">
+              <img title="点击刷新" :src="verifyCodeUrl" @click="refreshVierifyCode" />
+            </div>
+          </div>
+          <el-form-item style="text-align:right;">
+            <el-button :loading="loading" class="btn-login" type="primary" @click="tryLogin">登录</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="copyright">{{ copyright }}</div>
+  </div>
+</template>
+<script>
+import { mapState, mapGetters, mapActions } from 'vuex'
+export default {
+  name: 'LoginDefault',
+  data() {
+    const _this = this
+    return {
+      verifyCodeUrl: '',
+      form: {
+        userName: '',
+        password: '',
+        accountType: 0,
+        verifyCode: {
+          id: '',
+          code: ''
+        }
+      },
+      rules: {
+        userName: [
+          {
+            required: true,
+            message: '请输入用户名',
+            trigger: 'blur'
+          }
+        ],
+        password: [
+          {
+            required: true,
+            message: '请输入密码',
+            trigger: 'blur'
+          }
+        ],
+        code: [
+          {
+            validator(rule, value, callback) {
+              if (_this.loginVerifyCode && value === '') {
+                callback(new Error('请输入验证码'))
+              } else {
+                callback()
+              }
+            },
+            trigger: 'blur'
+          }
+        ]
+      },
+      loading: false
+    }
+  },
+  computed: {
+    ...mapGetters('app/config', ['logoUrl']),
+    ...mapState('app/config', {
+      title: s => s.system.title,
+      copyright: s => s.system.copyright,
+      loginOptions: s => s.component.login
+    }),
+    ...mapState('app/system', {
+      getVerifyCode: s => s.actions.getVerifyCode
+    })
+  },
+  mounted() {
+    if (this.loginOptions.verifyCode) {
+      this.refreshVierifyCode()
+    }
+    document.addEventListener('keydown', e => {
+      if (e.keyCode === 13) {
+        this.tryLogin()
+      }
+    })
+  },
+  methods: {
+    ...mapActions('app/system', ['login']),
+    // 刷新验证码
+    async refreshVierifyCode() {
+      let data = await this.getVerifyCode()
+      this.verifyCodeUrl = data.base64String
+      this.form.verifyCode.id = data.id
+    },
+    // 登录
+    tryLogin() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          this.loading = true
+
+          this.login(this.form)
+            .then(data => {
+              // 初始化令牌
+              this.$store.commit('app/token/init', data)
+
+              // 跳转
+              let redirect = this.$route.query.redirect
+              if (!redirect || redirect === '') {
+                redirect = '/'
+              }
+
+              this.$router.push({
+                path: redirect
+              })
+            })
+            .finally(() => {
+              this.loading = false
+            })
+        } else {
+          return false
+        }
+      })
+    }
+  },
+  watch: {
+    loginOptions: {
+      immediate: true,
+      handler(val) {
+        this.form.accountType = val.defaultAccountType
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.nm-login-default > .nm-login-bg {
+  background-image: url('../../../public/images/login/bg3.jpg');
+}
+</style>