第四章：Vue组件模板文件

• 第一步：导航模板，在menu-list.js文件中添加一栏，注意id不能与以往的冲突。

{
        id: '1',
        name: '用户管理',
        icon: 'el-icon-document-remove',
        info: '标准版的CRUD',
        childList: [
            {id: '1-1', name: '新增用户', icon: 'el-icon-plus', url: 'sa-view/users/users-add.vue'},
            {id: '1-2', name: '修改用户', icon: 'el-icon-edit', url: 'sa-view/users/users-edit.vue'},
            {id: '1-3', name: '用户列表', icon: 'el-icon-document-remove', url: 'sa-view/users/users-list.vue'},
            {id: '1-4', name: '用户统计', icon: 'el-icon-pie-chart', url: 'sa-view/users/users-chart.vue'},
        ]
    },

• 第二步：【新增】模板users-add.vue

<template>
    <div class="vue-box" style="display: none;" :style="'display: block;'">
        <!-- 参数栏 -->
        <div class="c-panel">
            <div class="c-title">用户添加</div>
            <el-form v-if="m">
                <div class="c-item br">
                    <label class="c-label">昵称：</label>
                    <el-input size="mini" v-model="m.username"></el-input>
                </div>
                <div class="c-item br">
                    <label class="c-label">密码：</label>
                    <el-input size="mini" v-model="m.password"></el-input>
                </div>
                <div class="c-item br">
                    <label class="c-label">手机：</label>
                    <el-input size="mini" v-model="m.phone"></el-input>
                </div>
                <div class="c-item br">
                    <label class="c-label">角色：</label>
                    <el-select size="mini" v-model="m.role_id">
                        <el-option label="管理员" :value="1"></el-option>
                        <el-option label="公告管理员" :value="2"></el-option>
                        <el-option label="普通用户" :value="3"></el-option>
                    </el-select>
                </div>
                <div class="c-item br">
                    <label class="c-label">性别：</label>
                    <el-radio-group size="mini" v-model="m.sex" size="mini">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </div>
                <div class="c-item br">
                    <label class="c-label"></label>
                    <el-button size="mini" type="primary" icon="el-icon-plus" size="mini" @click="ok">确定</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
    //这里要使用module.exports，而不是export default
    module.exports = {
        components: {
            //无论是在html还是vue组件中，引入子组件都要使用httpVueLoader的形式。
            "sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
        },
        //这里要使用函数的方式，而不是JSON
        data: function () {
            return {
                m:{
                    username:"",
                    password:"",
                    phone:"",
                    role_id:"",
                    sex:"",
                }
            }
        },
        methods: {
            ok: function () {
                sa.alert(JSON.stringify(this.m))
            }
        }
    }
</script>

<style scoped>

</style>

第三步：【列表】模板users-list.vue

<template>
    <div class="vue-box" style="display: none;" :style="'display: block;'">
        <div class="c-panel">
            <!-- ------------- 检索参数 ------------- -->
            <div class="c-title">用户列表</div>
            <el-form>
                <div class="c-item">
                    <label class="c-label">用户昵称：</label>
                    <el-input size="mini" v-model="p.username" placeholder="模糊查询"></el-input>
                </div>
                <div class="c-item">
                    <label class="c-label">注册日期：</label>
                    <el-date-picker size="mini" v-model="p.start_time" type="date" value-format="yyyy-MM-dd"
                                    placeholder="开始日期"></el-date-picker>
                    -
                    <el-date-picker size="mini" v-model="p.end_time" type="date" value-format="yyyy-MM-dd"
                                    placeholder="结束日期"></el-date-picker>
                </div>
                <div class="c-item" style="min-width: 0px;">
                    <el-button size="mini" type="primary" icon="el-icon-search" @click="p.pageNo = 1; f5()">查询
                    </el-button>
                </div>
                <br/>
                <!-- ------------- 排序参数 ------------- -->
                <div class="c-item s-radio-text">
                    <label class="c-label">综合排序：</label>
                    <el-radio-group size="mini" v-model="p.sortType">
                        <el-radio :label="1">注册时间</el-radio>
                        <el-radio :label="2">最近登录</el-radio>
                        <el-radio :label="3">登陆次数</el-radio>
                        <el-radio :label="4">最近签到</el-radio>
                        <el-radio :label="5">签到次数</el-radio>
                    </el-radio-group>
                </div>
            </el-form>
            <!-- ------------- 快捷按钮 ------------- -->
            <div class="fast-btn">
                <el-button size="mini" type="primary" icon="el-icon-plus" @click="add()">新增</el-button>
                <el-button size="mini" type="success" icon="el-icon-view" @click="getBySelect()">查看</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteByIds()">删除</el-button>
                <el-button size="mini" type="warning" icon="el-icon-download" @click="sa.exportExcel()">导出</el-button>
                <el-button size="mini" type="info" icon="el-icon-refresh" @click="sa.f5()">重置</el-button>
            </div>
            <!-- ------------- 数据列表 ------------- -->
            <el-table class="data-table" ref="data-table" :data="dataList" size="small">
                <el-table-column type="selection" width="45px"></el-table-column>
                <el-table-column label="编号" prop="id" width="80px"></el-table-column>
                <el-table-column label="昵称" prop="username" width="220px">
                    <template slot-scope="s">
                        <img :src="s.row.avatar" @click="sa.showImage(s.row.avatar, '400px', '400px')"
                             style="width: 3em; height: 3em; float: left; margin-right: 1em; border-radius: 50%; cursor: pointer;">
                        <div style="float: left; width: 130px; line-height: 20px;">
                            <b>{{s.row.username}}</b>
                            <p>{{s.row.tell}}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="个人相册">
                    <template slot-scope="s">
                        <img :src="s.row.photo_list[0]" style="width: 40px; height: 40px; cursor: pointer;"
                             @click="sa.showImageList(s.row.photo_list)">
                        共{{s.row.photo_list.length}}张, 点击预览
                    </template>
                </el-table-column>
                <el-table-column label="性别" prop="sex"></el-table-column>
                <el-table-column label="注册方式" prop="create_type"></el-table-column>
                <el-table-column label="注册于" prop="create_time"></el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="s">
                        <el-switch v-model="s.row.status" :active-value="1" :inactive-value="2"
                                   inactive-color="#ff4949"></el-switch>
                        <b style="color: green;" v-if="s.row.status == 1">正常</b>
                        <b style="color: red;" v-if="s.row.status == 2">禁用</b>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作">
                    <template slot-scope="s">
                        <el-button class="c-btn" type="success" icon="el-icon-view" @click="get(s.row)">详情</el-button>
                        <el-button class="c-btn" type="danger" icon="el-icon-delete" @click="del(s.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- ------------- 分页 ------------- -->
            <div class="page-box">
                <el-pagination background
                               layout="total, prev, pager, next, sizes, jumper"
                               :current-page.sync="p.pageNo"
                               :page-size.sync="p.pageSize"
                               :total="dataCount"
                               :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
                               @current-change="f5(true)"
                               @size-change="f5(true)">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    //这里要使用module.exports，而不是export default
    module.exports = {
        components: {
            //无论是在html还是vue组件中，引入子组件都要使用httpVueLoader的形式。
            "sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
        },
        //这里要使用函数的方式，而不是JSON
        data: function () {
            return {
                p: {	// 查询参数
                    username: '',
                    create_type: 0,
                    sortType: 1,
                    start_time: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-1',	// 本月一号
                    end_time: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),	// 本月当日
                    pageNo: 1,
                    pageSize: 10,
                },
                dataCount: 1422,
                dataList: []
            }
        },
        methods: {
            // 数据刷新
            f5: function () {
                //这里发送ajax请求获取数据进行填充 TODO
                this.dataList = [{
                    "id": 12001,
                    "username": "省长",
                    "avatar": "https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/default_head/2.png?x-oss-process=style/yasuo",
                    "tell": '这人懒，啥也没有留下',
                    "sex": "男",
                    "photo_list": [
                        "http://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/02/02/1549112799839261454077.jpeg?x-oss-process=style/yasuo"
                    ],
                    "create_type": "账号注册",
                    "create_time": "2019-02-09 20:22:00",
                    "status": 1
                }];	// 数据
                this.dataCount = 1000;		// 分页
                sa.f5TableHeight();		// 刷新表格高度
            },
            //详情
            get: function (data) {
                sa.alert(JSON.stringify(data))
            },
            // 删除
            del: function (data) {
                sa.confirm('是否删除，此操作不可撤销', function () {
                    //发送ajax请求 TODO
                    sa.ok('删除成功');
                    sa.f5TableHeight();		// 刷新表格高度
                }.bind(this));
            },

            //新增
            add: function (data) {
                //跳转到指定菜单
                this.sa_admin.showMenuById("1-1")
            },
            //查看-根据选中的
            getBySelect: function (data) {
                var selection = this.$refs['data-table'].selection;
                if (selection.length === 0) {
                    return sa.msg('请选择一条数据')
                }
                sa.alert(JSON.stringify(selection[0]))
            },
            // 批量删除
            deleteByIds: function() {
                // 获取选中元素的id列表
                let selection = this.$refs['data-table'].selection;
                let ids = sa.getArrayField(selection, 'id');
                if(selection.length == 0) {
                    return sa.msg('请至少选择一条数据')
                }
                // 提交删除
                sa.confirm('是否批量删除选中数据？此操作不可撤销', function() {
                    //发送ajax请求删除：参数{ids: ids.join(',')}  TODO
                        sa.ok('删除成功');
                        sa.f5TableHeight();		// 刷新表格高度
                }.bind(this));
            },
        },
        created: function () {
            this.f5();
            sa.onInputEnter();//监听输入框的回车事件，执行查询
        }
    }
</script>

<style scoped>

</style>