md-iview 1.0.12

package/src/components/md-table/demo/data/table_data.js

@@ -0,0 +1,251 @@
+export const table1Columns = [
+    {
+        title: '序号',
+        type: 'index',
+        width: 80,
+        align: 'center'
+    },
+    {
+        title: '姓名',
+        align: 'center',
+        key: 'name',
+        editable: true
+    },
+    {
+        title: '性别',
+        align: 'center',
+        key: 'sex'
+    },
+    {
+        title: '岗位',
+        align: 'center',
+        key: 'work',
+        editable: true
+    },
+    {
+        title: '操作',
+        align: 'center',
+        width: 120,
+        key: 'handle',
+        handle: ['delete']
+    }
+];
+
+export const table1Data = [
+    {
+        name: 'Aresn',
+        sex: '男',
+        work: '前端开发'
+    },
+    {
+        name: 'Lison',
+        sex: '男',
+        work: '前端开发'
+    },
+    {
+        name: 'lisa',
+        sex: '女',
+        work: '程序员鼓励师'
+    }
+];
+
+export const editInlineColumns = [
+    {
+        title: '序号',
+        type: 'index',
+        width: 80,
+        align: 'center'
+    },
+    {
+        title: '姓名',
+        align: 'center',
+        key: 'name',
+        width: 90,
+        editable: true
+    },
+    {
+        title: '性别',
+        align: 'center',
+        key: 'sex'
+    },
+    {
+        title: '岗位',
+        align: 'center',
+        key: 'work',
+        width: 150,
+        editable: true
+    },
+    {
+        title: '操作',
+        align: 'center',
+        width: 190,
+        key: 'handle',
+        handle: ['edit', 'delete']
+    }
+];
+
+export const editInlineData = [
+    {
+        name: 'Aresn',
+        sex: '男',
+        work: '前端开发'
+    },
+    {
+        name: 'Lison',
+        sex: '男',
+        work: '前端开发'
+    },
+    {
+        name: 'lisa',
+        sex: '女',
+        work: '程序员鼓励师'
+    }
+];
+
+export const editIncellColumns = [
+    {
+        title: '序号',
+        type: 'index',
+        width: 80,
+        align: 'center'
+    },
+    {
+        title: '姓名',
+        align: 'center',
+        key: 'name',
+        width: 120,
+        editable: true
+    },
+    {
+        title: '性别',
+        align: 'center',
+        key: 'sex'
+    },
+    {
+        title: '岗位',
+        align: 'center',
+        width: 160,
+        key: 'work',
+        editable: true
+    },
+    {
+        title: '操作',
+        align: 'center',
+        width: 120,
+        key: 'handle',
+        handle: ['delete']
+    }
+];
+
+export const editIncellData = [
+    {
+        name: 'Aresn',
+        sex: '男',
+        work: '前端开发'
+    },
+    {
+        name: 'Lison',
+        sex: '男',
+        work: '前端开发'
+    },
+    {
+        name: 'lisa',
+        sex: '女',
+        work: '程序员鼓励师'
+    }
+];
+
+export const editInlineAndCellColumn = [
+    {
+        title: '序号',
+        type: 'index',
+        width: 80,
+        align: 'center'
+    },
+    {
+        title: '姓名',
+        align: 'center',
+        key: 'name',
+        width: 300,
+        editable: true
+    },
+    {
+        title: '性别',
+        align: 'center',
+        key: 'sex'
+    },
+    {
+        title: '岗位',
+        align: 'center',
+        width: 300,
+        key: 'work',
+        editable: true
+    },
+    {
+        title: '操作',
+        align: 'center',
+        width: 200,
+        key: 'handle',
+        handle: ['edit', 'delete']
+    }
+];
+
+export const editInlineAndCellData = [
+    {
+        name: 'Aresn',
+        sex: '男',
+        work: '前端开发'
+    },
+    {
+        name: 'Lison',
+        sex: '男',
+        work: '前端开发'
+    },
+    {
+        name: 'lisa',
+        sex: '女',
+        work: '程序员鼓励师'
+    }
+];
+
+export const showCurrentColumns = [
+    {
+        title: '序号',
+        type: 'index',
+        width: 80,
+        align: 'center'
+    },
+    {
+        title: '姓名',
+        align: 'center',
+        key: 'name',
+        width: 300,
+        editable: true
+    },
+    {
+        title: '性别',
+        align: 'center',
+        key: 'sex'
+    },
+    {
+        title: '岗位',
+        align: 'center',
+        width: 300,
+        key: 'work',
+        editable: true
+    }
+];
+
+const tableData = {
+    table1Columns: table1Columns,
+    table1Data: table1Data,
+    editInlineColumns: editInlineColumns,
+    editInlineData: editInlineData,
+    editIncellColumns: editIncellColumns,
+    editIncellData: editIncellData,
+    editInlineAndCellColumn: editInlineAndCellColumn,
+    editInlineAndCellData: editInlineAndCellData,
+    showCurrentColumns: showCurrentColumns
+};
+
+export default tableData;

package/src/components/md-table/demo/editable-table.vue

@@ -0,0 +1,144 @@
+<style lang="less">
+    @import '../../../style/common.less';
+    @import '../table.less';
+</style>
+
+<template>
+    <div>
+        <Row>
+            <Col span="6">
+                <Card>
+                    <p slot="title">
+                        <Icon type="load-b"></Icon>
+                        简单说明
+                    </p>
+                    <div class="edittable-test-con">
+                        可编辑单元格可配置可编辑的列，可设置编辑整行的可编辑单元格，也可配置单个编辑可编辑单元格，也可两种形式同时可用。可配置单元格内编辑的图标显示方式。
+                    </div>
+                </Card>
+            </Col>
+            <Col span="18" class="padding-left-10">
+                <Card>
+                    <div class="edittable-con-1">
+                        <can-edit-table refs="table1" @on-delete="handleDel" v-model="tableData" :columns-list="columnsList"></can-edit-table>
+                    </div>
+                </Card>
+            </Col>
+        </Row>
+        <Row class="margin-top-10">
+            <Col span="12">
+                <Card>
+                    <p slot="title">
+                        <Icon type="android-remove"></Icon>
+                        可编辑单元行
+                    </p>
+                    <div class="edittable-table-height-con">
+                        <can-edit-table refs="table2" v-model="editInlineData" :columns-list="editInlineColumns"></can-edit-table>
+                    </div>
+                </Card>
+            </Col>
+            <Col span="12" class="padding-left-10">
+                <Card>
+                    <p slot="title">
+                        <Icon type="android-more-horizontal"></Icon>
+                        可编辑单元格(鼠标移入显示编辑单元格按钮)
+                    </p>
+                    <div class="edittable-table-height-con">
+                        <can-edit-table refs="table3" v-model="editIncellData" :hover-show="true" :edit-incell="true" :columns-list="editIncellColumns"></can-edit-table>
+                    </div>
+                </Card>
+            </Col>
+        </Row>
+        <Row class="margin-top-10">
+            <Col span="24">
+                <Card>
+                    <p slot="title">
+                        <Icon type="ios-keypad"></Icon>
+                         单元行和单元格两种方式编辑(始终显示编辑单元格按钮)
+                    </p>
+                    <Row :gutter="10">
+                        <Col span="2">
+                            <Row type="flex" justify="center" align="middle" class="edittable-table-get-currentdata-con">
+                                <Button type="primary" @click="getCurrentData">当前数据</Button>
+                            </Row>
+                        </Col>
+                        <Col span="22">
+                            <div class="edittable-table-height-con">
+                                <can-edit-table
+                                    refs="table4"
+                                    v-model="editInlineAndCellData"
+                                    @on-cell-change="handleCellChange"
+                                    @on-change="handleChange"
+                                    :editIncell="true"
+                                    :columns-list="editInlineAndCellColumn"
+                                ></can-edit-table>
+                            </div>
+                        </Col>
+                        <Modal :width="900" v-model="showCurrentTableData">
+                            <can-edit-table refs="table5" v-model="editInlineAndCellData" :columns-list="showCurrentColumns"></can-edit-table>
+                        </Modal>
+                    </Row>
+                </Card>
+            </Col>
+        </Row>
+    </div>
+</template>
+
+<script>
+import canEditTable from '../can-edit.vue';
+import tableData from './data/table_data.js';
+export default {
+    name: 'editable-table',
+    components: {
+        canEditTable
+    },
+    data () {
+        return {
+            columnsList: [],
+            tableData: [],
+            editInlineColumns: [],
+            editInlineData: [],
+            editIncellColumns: [],
+            editIncellData: [],
+            editInlineAndCellColumn: [],
+            editInlineAndCellData: [],
+            showCurrentColumns: [],
+            showCurrentTableData: false
+        };
+    },
+    methods: {
+        getData () {
+            this.columnsList = tableData.table1Columns;
+            this.tableData = tableData.table1Data;
+            this.editInlineColumns = tableData.editInlineColumns;
+            this.editInlineData = tableData.editInlineData;
+            this.editIncellColumns = tableData.editIncellColumns;
+            this.editIncellData = tableData.editIncellData;
+            this.editInlineAndCellColumn = tableData.editInlineAndCellColumn;
+            this.editInlineAndCellData = tableData.editInlineAndCellData;
+            this.showCurrentColumns = tableData.showCurrentColumns;
+        },
+        handleNetConnect (state) {
+            this.breakConnect = state;
+        },
+        handleLowSpeed (state) {
+            this.lowNetSpeed = state;
+        },
+        getCurrentData () {
+            this.showCurrentTableData = true;
+        },
+        handleDel (val, index) {
+            this.$Message.success('删除了第' + (index + 1) + '行数据');
+        },
+        handleCellChange (val, index, key) {
+            this.$Message.success('修改了第 ' + (index + 1) + ' 行列名为 ' + key + ' 的数据');
+        },
+        handleChange (val, index) {
+            this.$Message.success('修改了第' + (index + 1) + '行数据');
+        }
+    },
+    created () {
+        this.getData();
+    }
+};
+</script>

package/src/components/md-table/demo/exportable-table.vue

@@ -0,0 +1,124 @@
+<style lang="less" scoped>
+    @import '../../../style/common.less';
+    @import '../table.less';
+</style>
+
+<template>
+    <div>
+        <Row>
+            <Card>
+                <h4 slot="title">
+                    <Icon type="android-archive"></Icon>
+                    导出表格数据到 .Csv 文件
+                </h4>
+                <Row>
+                    <Col span="18">
+                        <Table :columns="columnsCsv" :data="csvData" size="small" ref="tableCsv"></Table>
+                    </Col>
+                    <Col span='6' class="padding-left-10">
+                        <div class="exportable-table-download-con1">
+                            <span style="margin-right: 16px;"><Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</Button></span>
+                            <Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</Button>
+                        </div>
+                        <div class="exportable-table-download-con2">
+                            <div>
+                                <span>选取行范围：&nbsp;</span><InputNumber :min="1" :max="selectMaxRow" v-model="selectMinRow"></InputNumber>
+                                <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
+                                <InputNumber :min="selectMinRow" :max="rowNum" v-model="selectMaxRow"></InputNumber>
+                            </div>
+                            <div class="margin-top-10">
+                                <span>选取列范围：&nbsp;</span><InputNumber :min="1" :max="selectMaxCol" v-model="selectMinCol"></InputNumber>
+                                <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
+                                <InputNumber :min="selectMinCol" :max="colNum" v-model="selectMaxCol"></InputNumber>
+                            </div>
+                            <div class="margin-top-10">
+                                <span>输入文件名：</span>
+                                <Input v-model="csvFileName" icon="document" placeholder="请输入文件名" style="width: 190px" />
+                            </div>
+                            <div class="margin-top-20">
+                                <Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</Button>
+                            </div>
+                        </div>
+                    </Col>
+                </Row>
+            </Card>
+        </Row>
+        <Row class="margin-top-10">
+            <Card>
+                <h4 slot="title">
+                    <Icon type="android-archive"></Icon>
+                    导出表格数据到 .Xls 文件 (Excel)
+                </h4>
+                <Row>
+                    <Col span="18">
+                        <Table :columns="excelColumns" height="390px" :data="table2excelData" size="small" ref="tableExcel"></Table>
+                    </Col>
+                    <Col span='6' class="padding-left-10">
+                         <div class="margin-top-10 margin-left-10">
+                            <span>输入文件名：</span>
+                            <Input v-model="excelFileName" icon="document" placeholder="请输入文件名" style="width: 190px" />
+                        </div>
+                        <div class="margin-left-10 margin-top-20">
+                            <a id="hrefToExportTable" style="postion: absolute;left: -10px;top: -10px;width: 0px;height: 0px;"></a>
+                            <Button type="primary" size="large" @click="exportExcel">下载表格数据</Button>
+                        </div>
+                    </Col>
+                </Row>
+            </Card>
+        </Row>
+    </div>
+</template>
+
+<script>
+import {table2csvData, csvColumns} from './data/table2csv.js';
+import {table2excelData, excelColumns} from  './data/table2excel.js';
+import table2excel from '../libs/table2excel';
+export default {
+    name: 'exportable-table',
+    data () {
+        return {
+            columnsCsv: csvColumns,
+            csvData: table2csvData,
+            table2excelData: table2excelData,
+            excelColumns: excelColumns,
+            rowNum: table2csvData.length,
+            colNum: csvColumns.length,
+            selectMinRow: 1,
+            selectMaxRow: table2csvData.length,
+            selectMinCol: 1,
+            selectMaxCol: csvColumns.length,
+            maxRow: 0,
+            minRow: 1,
+            maxCol: 0,
+            minCol: 1,
+            csvFileName: '',
+            excelFileName: '',
+            tableExcel: {},
+            fontSize: 16
+        };
+    },
+    methods: {
+        exportData (type) {
+            if (type === 1) {
+                this.$refs.tableCsv.exportCsv({
+                    filename: '原始数据'
+                });
+            } else if (type === 2) {
+                this.$refs.tableCsv.exportCsv({
+                    filename: '排序和过滤后的数据',
+                    original: false
+                });
+            } else if (type === 3) {
+                this.$refs.tableCsv.exportCsv({
+                    filename: this.csvFileName,
+                    columns: this.columnsCsv.filter((col, index) => index >= this.selectMinCol - 1 && index <= this.selectMaxCol - 1),
+                    data: this.csvData.filter((data, index) => index >= this.selectMinRow - 1 && index <= this.selectMaxRow - 1)
+                });
+            }
+        },
+        exportExcel () {
+            table2excel.transform(this.$refs.tableExcel, 'hrefToExportTable', this.excelFileName);
+        }
+    }
+};
+</script>

package/src/components/md-table/demo/widgets/header-search.vue

@@ -0,0 +1,88 @@
+<template>
+    <md-dropdown  trigger="click"  placement="bottom-start">
+        <div>
+            <md-icon type="ios-funnel" size="12" class="hs-icon"></md-icon>
+        </div>
+        <md-dropdown-menu slot="list">
+            <div class="hs-content">
+                <div class="hs-content__header">
+                    <md-row>
+                        <md-col span="22">
+                            <md-input v-model="res.inputValue" suffix="ios-search" placeholder="Enter text" style="width: auto" />
+                        </md-col>
+                    </md-row>
+                </div>
+                <md-divider  class="hs-divider"></md-divider>
+                <div class="hs-content__list">
+                    <md-row>
+                        <md-col span="22">
+                            <CheckboxGroup v-model="res.checkValue" @on-change="onChangeCheckGroup">
+                                <Checkbox  v-for="item in items" :key="item.value" style="display: block;" :label="item.label"></Checkbox>
+                            </CheckboxGroup>
+                        </md-col>
+                    </md-row>
+                </div>
+
+                <md-divider class="hs-divider"></md-divider>
+                <div class="hs-content__footer">
+                    <md-row type="flex" justify="space-between" align="middle">
+                        <md-col>
+                            <span>筛选</span>
+                        </md-col>
+                        <md-col>
+                            <md-btn type="primary" @click="handleClose" size="small">重置</md-btn>
+                        </md-col>
+                    </md-row>
+                </div>
+            </div>
+        </md-dropdown-menu>
+    </md-dropdown>
+</template>
+
+<script>
+  export default {
+    name: "header-search",
+    props:{
+      items:[Array, Object],
+    },
+    data () {
+      return {
+        res:{
+          inputValue:'',
+          checkValue:[]
+        },
+      }
+    },
+    methods: {
+      handleClose () {
+        console.log('res:', this.res);
+      },
+      onChangeCheckGroup(data) {
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+.hs-icon {
+    color: rgba(0, 0, 0, 0.25) !important;
+    margin: 0 4px;
+    &:hover {
+        color: rgb(87, 87, 87)
+    }
+}
+.hs-divider {
+    margin: 8px 0 !important;
+}
+    .hs-content {
+        &__header {
+            margin:8px
+        }
+        &__list {
+            margin:0 8px
+        }
+        &__footer {
+            margin:0 8px
+        }
+    }
+</style>

package/src/components/md-table/drop-down-cell-v2.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="drop-down-cell display-flex justify-content-space-around">
+    <Dropdown trigger="click" @on-click="onClickItem" :transfer="transfer">
+      <div class="display-flex justify-content-center">
+          {{ getCurrentLabel(this.cloneValue) }}
+        <md-icon type="md-arrow-dropdown" v-show="editable"></md-icon>
+      </div>
+      <DropdownMenu slot="list" v-show="editable">
+          <DropdownItem v-for="item in option" :key="item.value" :name="item.value">{{ item.label }}</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "drop-down-cell",
+  model: {
+    prop: "cell"
+  },
+  props: {
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    option: Array | Object,
+    transfer:Boolean,
+    value: [Object, String, Number],
+  },
+  computed: {
+    keys() {
+      return Object.keys(this.mapItems);
+    }
+  },
+  watch: {
+    editable(to) {
+      console.log(to);
+    },
+    value: {
+      immediate: true,
+      handler(to) {
+        this.cloneValue = to;
+      }
+    },
+  },
+  created() {
+    // console.log(this.mapItems, this.cell.row[this.cell.column.key]);
+  },
+  data() {
+    return {
+      cloneValue: null
+    };
+  },
+  methods: {
+    getCurrentLabel(val) {
+      if (val === '' || val === null) return '';
+      let label = '';
+      this.option.map(item => {
+        if (item.value === val) {
+          label = item.label;
+        }
+      });
+      return label
+    },
+
+    onClickItem(val) {
+      this.$nextTick(() => {
+        this.cloneValue = val;
+        this.$emit("on-change", this.cloneValue);
+      });
+    }
+  }
+};
+</script>
+<style>
+.ivu-select-dropdown {
+  border-radius: 0;
+  max-height: 200px !important;
+  overflow: auto !important;
+}
+</style>
+
+<style lang="less" scoped>
+.drop-down-cell {
+  cursor: pointer;
+}
+</style>