haiwei-ui 1.0.2 → 1.0.4

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

@@ -2,10 +2,10 @@
   <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-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-input v-model="model.title" clearable></el-input>
       </el-form-item>
       <el-form-item label="文件名称：" prop="fileName">
         <el-input v-model="model.fileName">
@@ -25,7 +25,7 @@
       </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 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 }">
@@ -33,9 +33,10 @@
             </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 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>
@@ -43,16 +44,17 @@
           <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-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 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>
@@ -61,31 +63,31 @@
       </el-form-item>
       <el-collapse>
         <el-collapse-item>
-          <template slot="title"
-            ><span class="nm-p-l-10">
+          <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
-            >
+              高级选项
+            </span>
           </template>
           <el-row>
             <el-col :span="8">
               <el-form-item label="显示列名：" prop="showColName">
-                <el-switch v-model="model.showColName"> </el-switch>
+                <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-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-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-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 />
@@ -102,89 +104,89 @@
   </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
+  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.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)
+        this.$nextTick(() => {
+          //设置已选择的列
+          this.model.columns.map(m => {
+            this.$refs.table.toggleRowSelection(m)
+          })
         })
-      })
-    },
-    onSelectionChange(val) {
-      this.model.columns = val
+      },
+      onSelectionChange(val) {
+        this.model.columns = val
+      },
+      onExport() {
+        this.$refs.form.validate(async valid => {
+          if (valid) {
+            this.$parent.export_(this.model)
+          }
+        })
+      }
     },
-    onExport() {
-      this.$refs.form.validate(async valid => {
-        if (valid) {
-          this.$parent.export_(this.model)
-        }
-      })
+    created() {
+      this.init()
     }
-  },
-  created() {
-    this.init()
   }
-}
 </script>

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

@@ -4,64 +4,55 @@
       <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"
-      />
+      <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]
+  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()
+    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>

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

@@ -17,41 +17,41 @@
   </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()
+  export default {
+    props: {
+      value: Object,
+      /** 标题 */
+      title: String,
+      /** 图标 */
+      icon: String,
+      /** 是否全屏 */
+      fullscreen: Boolean,
+      /** 不显示全屏按钮 */
+      noFullscreen: Boolean,
+      /** 不显示刷新按钮 */
+      noRefresh: Boolean,
+      /**显示导出按钮 */
+      exportEnabled: Boolean,
+      /**导出按钮权限编码 */
+      exportBtnCode: String
     },
-    reset() {
-      this.$parent.reset()
-    },
-    refresh() {
-      this.$parent.refresh()
-    },
-    onFullscreenClick() {
-      this.$parent.triggerFullscreen()
-    },
-    onExportClick() {
-      this.$parent.triggerExport()
+    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>