uas_manage_server_web/src/components/Common/ListData/ListData.js

module.exports = {
    name: 'list-data',
    data() {
        return {
            batch_flag: true, //符合批量删除为true,否则为false
            batch_datas: [],
            batch_ids: [],

            image_host: this.ImageHost, //如果列表中有图片，并且不是绝对路径的话，可以传入这个参数

            list: this.List, //列表数组
            fields: this.FieldList, //字段数组
            selection: this.Selection, //是否需要批量选择
            expand:this.Expand,
            btn_info: this.BtnInfo,

            pagination: this.Pagination,
        }
    },
    methods: {
        /**
         * 表格列表触发CheckBox的事件
         * @param  {array} val 当前选中的用户信息数组，每个元素是用户信息对象
         */
        onSelectionChange(val) {
            this.batch_datas = val;

            this.batch_ids = [];
            if (val.length) {
                this.batch_flag = false;
                for (var i = 0; i < val.length; i++) {
                    this.batch_ids.push(val[i].id);
                }
            } else {
                this.batch_flag = true;
            }

            /**
             * 改变CheckBox事件，第一个参数是ID数组，第二个参数二维数组，每个数组是选中的对象
             */
            this.$emit('onSelectionChange', this.batch_ids, this.batch_datas);
            this.$emit('onSelectionChangeObj', {
                ids: this.batch_ids,
                datas: this.batch_datas
            });
        },



        /**
         * 删除事件
         * @param  {object || boolean} user  当前信息对象或者为布尔值,为布尔值时，代表是批量删除
         * @param  {number} index 当前列表索引
         */
        onDelete(data, index) {
            var opts = {};
            if (data === true) {
                opts.batch_ids = this.batch_ids;
                opts.batch_datas = this.batch_datas;
            } else {
                opts.data = data;
                opts.index = index;
            }

            /**
             * 删除事件，参数为对象
             * 分两种情况，一种是单个删除，一种是批量删除，属性分别如下
             * 1：单个删除
             *     opts.data 当前要删除的数据对象
             *     opts.index 当前要删除的索引
             *     opts.list 当前列表数组
             * 2：批量删除
             *     opts.batch_ids 一维数组，需要删除的ID数组
             *     opts.batch_datas 二维数组，每个元素为对象(需要删除的数据对象)
             */
            this.$emit('onDelete', opts);
        },

        onAdd(){
            this.$emit('onAdd', {});
        },

        /**
         * 获取行信息事件
         * @param  {object} row   当前行对象
         * @param  {number} index 当前行索引
         * @param  {array} list  当前列表数组
         */
        onGetInfo(row, index, list, type) {
            this.$emit('onGetInfo', {
                row,
                index,
                list,
                type
            });
        },


        onBtnEvent(type,row={},index=-1,list=[]){
            this.$emit('onBtn'+type, {
                row,
                index,
                list
            });
        },


        onUpdateBtn(data, index, list) {
            if (this.btn_info.update && this.btn_info.update.path) {
                var path = this.btn_info.update.path,
                    param_keys = this.btn_info.update.param_keys || [],
                    query_keys = this.btn_info.update.query_keys || [],
                    query = {};

                for (var i = 0; i < param_keys.length; i++) {
                    path += '/' + data[param_keys[i]];
                }
                for (var i = 0; i < query_keys.length; i++) {
                    query[query_keys[i]] = data[query_keys[i]];
                }

                // console.log(path);
                // console.log(query);

                this.$router.push({
                    path: path,
                    query: query
                });
            } else {
                this.onGetInfo(data, index, list, 'update');
            }

        },


        /**
         * 内置删除事件执行成功后，更新列表方法
         * 分两种情况，一种是批量删除，一种是单个删除
         * 1：单个删除
         *     row 当前需要删除行的索引
         * 2：批量删除
         *     row 一维数组，需要删除的ID数组
         */
        onUpdateList(row) {
            if (!Array.isArray(row)) {
                this.list.splice(row, 1);
            } else {
                this.list = this.list.filter(function(item, idx) {
                    return row.indexOf(item.id) === -1;
                });
            }
        },


        /**
         * 改变当前页码事件
         * @param  {number} page 当前页面
         */
        onChangeCurrentPage(page) {
            this.$emit('onChangeCurrentPage', page);
        },


        /**
         * 改变每页显示的数量事件
         * @param  {number} page_size 每页显示的数量
         */
        onChangePageSize(page_size) {
            this.$emit('onChangePageSize', page_size);
        }
    },

    mounted() {
        // console.log(this.list);
    },

    /**
     * 接收参数
     * @type {Object}
     */
    props: {
        ImageHost: {
            type: String,
            default: ''
        },
        List: {
            type: Array,
            required: true
        },
        FieldList: {
            type: Array,
            required: true
        },
        BtnInfo: {
            type: Object,
            default () {
                return {};
            }
        },
        Selection: {
            type: Boolean,
            default: false
        },
        Expand: {
            type: Object,
            default(){
                return {
                    show:false,
                    position:"left"
                };
            }
        },
        Pagination: {
            type: Object,
            default () {
                return {};
            }
        }
    },


    /**
     * 监控参数
     * @type {Object}
     */
    watch: {
        ImageHost(v) {
            if (v) {
                this.image_host = v;
            }
        },
        List(v) {
            if (v) {
                this.list = v;
            }
        },
        FieldList(v) {
            if (v) {
                this.fields = v;
            }
        },
        Selection(v) {
            this.selection = v;
        },
        Expand(v){
            this.expand=v;
        },
        BtnInfo(v) {
            this.btn_info = v;
        },
        Pagination(v) {
            this.pagination = v;
        }
    }
}