haiwei-ui 1.0.2 → 1.0.4

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

@@ -62,162 +62,162 @@
   </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'
+  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() {
+  export default {
+    name: 'ListAgile',
+    components: { QueryHeader, Querybar, QueryTable, QueryFooter },
+    data() {
       return {
-        model: this.model,
-        rules: this.rules,
-        inputWidth: this.inputWidth,
-        advanced: this.advanced,
-        noSearch: this.noSearch,
-        noSearchButtonIcon: this.noSearchButtonIcon
+        loading_: false,
+        fullscreen: false,
+        // 分页数据
+        page: {
+          index: 1,
+          size: 15,
+          sort: []
+        },
+        // 数据列表
+        rows: [],
+        // 总数量
+        total: 0,
+        selection: []
       }
     },
-    showLoading() {
-      return this.loading || this.loading_
-    }
-  },
-  methods: {
-    /** 查询方法 */
-    query() {
-      if (this.loading_) {
-        return
+    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)
+        this.loading_ = true
+        let fullModel = Object.assign({}, this.model)
 
-      // 设置分页
-      fullModel.page = this.page
+        // 设置分页
+        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.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
       }
     },
-    /** 获取序号 */
-    getNo(index) {
-      return (this.page.index - 1) * this.page.size + index + 1
-    }
-  },
-  created() {
-    if (this.queryOnCreated) {
-      this.query()
+    created() {
+      if (this.queryOnCreated) {
+        this.query()
+      }
+    },
+    activated() {
+      // 重新绘制布局
+      this.$refs.table.doLayout()
     }
-  },
-  activated() {
-    // 重新绘制布局
-    this.$refs.table.doLayout()
   }
-}
 </script>

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

@@ -1,19 +1,5 @@
 <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"
-  >
+  <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>
@@ -25,78 +11,78 @@
   </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()
+  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
         }
-      })
-    },
-    onOpen() {
-      this.$emit('open')
-    },
-    onOpened() {
-      this.$emit('opened')
+      }
     },
-    onClose() {
-      this.$emit('close')
+    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
     },
-    onClosed() {
-      this.$emit('closed')
+    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

@@ -20,58 +20,58 @@
   </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: '列表'
+  export default {
+    name: 'Listbox',
+    data() {
+      return {
+        value_: this.value,
+        resizeing: false
+      }
     },
-    // 左侧图标
-    icon: {
-      type: String,
-      default: 'select'
+    props: {
+      value: {
+        type: Array,
+        required: true
+      },
+      // 标题
+      title: {
+        type: String,
+        default: '列表'
+      },
+      // 左侧图标
+      icon: {
+        type: String,
+        default: 'select'
+      },
+      /** 不显示数量 */
+      noCount: Boolean
     },
-    /** 不显示数量 */
-    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_)
+    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)
+        }
+      }
     },
-    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()
       }
     }
-  },
-  watch: {
-    value(val) {
-      this.value_ = val
-      this.scrollbarResize()
-    }
   }
-}
 </script>