<#-- since 2017-01-01-->
<div id="app" v-cloak>
    <el-card class="box-card">
        <el-form class="search" :inline="true" :model="vm" ref="vm" label-position="right" label-width="90px">
            <el-form-item label="用户账户" prop="userName">
                <el-input v-model="vm.userName" clearable size="mini" placeholder="请输入用户账户"></el-input>
            </el-form-item>
            <el-form-item label="用户代码" prop="userCode">
                <el-input v-model="vm.userCode" clearable size="mini" placeholder="请输入用户代码"></el-input>
            </el-form-item>
            <el-form-item label="用户别名" prop="userAlias">
                <el-input v-model="vm.userAlias" clearable size="mini" placeholder="请输入用户别名"></el-input>
            </el-form-item>
            <el-form-item label="用户状态" prop="userStatus">
                <el-input-dict v-model="vm.userStatus" clearable size="mini" placeholder="请输入用户状态" dict-name="USER_STATUS"></el-input-dict>
            </el-form-item>
            <el-form-item label="所属部门" prop="deptCode">
                <el-input-dept v-model="vm.deptCode" clearable size="mini" placeholder="请选择所属部门"></el-input-dept>
            </el-form-item>
            <el-form-item label="开始日期" prop="startDate">
                <el-date-picker v-model="vm.startDate" clearable size="mini" placeholder="请输入开始日期" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" prop="endDate">
                <el-date-picker v-model="vm.endDate" clearable size="mini" placeholder="请输入结束日期" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="onSearch">搜索</el-button>
                <el-button type="warning" size="mini" icon="el-icon-refresh-left" @click="onReset('vm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card class="box-card">
        <el-row>
            <el-col :span="12">
                <el-button type="success" size="mini" icon="el-icon-plus" @click="onCreate">新增</el-button>

                <el-button type="warning" size="mini" icon="el-icon-download" @click="onExport">导出</el-button>
            </el-col>

            <el-col :span="12">
                <el-button-group style="float: right;">
                    <el-tooltip effect="dark" content="Excel模板下载" placement="bottom">
                        <el-button size="mini" icon="el-icon-date" @click="onTemplate"></el-button>
                    </el-tooltip>

                    <el-tooltip effect="dark" content="Excel导入" placement="bottom">
                        <el-button size="mini" icon="el-icon-upload2" @click="onImport"></el-button>
                    </el-tooltip>

                    <el-tooltip effect="dark" content="批量删除" placement="bottom">
                        <el-button size="mini" icon="el-icon-delete" @click="onBitchDelete"></el-button>
                    </el-tooltip>

                    <el-tooltip effect="dark" content="刷新" placement="bottom">
                        <el-button size="mini" icon="el-icon-refresh" @click="onFind"></el-button>
                    </el-tooltip>
                </el-button-group>
            </el-col>
        </el-row>

        <el-table
                class="data"
                @selection-change="onSelectionChange"
                empty-text="无数据"
                :stripe="true"
                :data="result"
                size="mini">
            <el-table-column
                    align="center"
                    width="45"
                    type="selection">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="140"
                    prop="id"
                    label="主键">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="userName"
                    label="用户账户">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="userCode"
                    label="用户代码">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="userAlias"
                    label="用户别名">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="roleNames"
                    label="用户角色">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="100"
                    prop="userStatus"
                    label="用户状态">
                <template slot-scope="scope">
                    <el-tag size="mini" effect="dark" type="success" v-if="scope.row.userStatus=='正常'">{{scope.row.userStatus}}</el-tag>
                    <el-tag size="mini" effect="dark" type="danger" v-if="!scope.row.userStatus=='正常'">{{scope.row.userStatus}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="deptName"
                    label="所在部门">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="140"
                    prop="createTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    fixed="right"
                    width="120"
                    label="操作">
                <template slot-scope="scope">
                    <wb-dropdown :arg="scope.row">
                        <wb-dropdown-item value="编辑" icon="el-icon-edit" @click="onEdit"></wb-dropdown-item>
                        <wb-dropdown-item value="删除" icon="el-icon-delete" @click="onDelete"></wb-dropdown-item>
                    </wb-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                v-if="vm.totalCount > vm.pageSize"
                style="margin-top: 10px"
                @current-change="onPageChange"
                @size-change="onPageSizeChange"
                :current-page="vm.pageNumber"
                :page-size="vm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="vm.totalCount">
        </el-pagination>
    </el-card>

    <el-dialog
            :custom-class="'dialog'"
            :title="form.formTitle"
            :close-on-click-modal="false"
            :visible.sync="form.formShow">
        <el-form class=form" :model="form" :inline="true" :rules="formRules" ref="form"
                 label-position="right" label-width="90px">
            <el-form-item label="用户账户" prop="userName">
                <el-input v-model="form.userName" :readonly="form.id>0" size="mini" placeholder="请输入用户账户"></el-input>
            </el-form-item>
            <el-form-item label="用户代码" prop="userCode">
                <el-input v-model="form.userCode" size="mini" placeholder="请输入用户代码"></el-input>
            </el-form-item>
            <el-form-item label="用户别名" prop="userAlias">
                <el-input v-model="form.userAlias" clearable size="mini" autocomplete="off" placeholder="请输入用户别名"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" prop="userPwd" v-if="!form.id">
                <el-input v-model="form.userPwd" clearable size="mini" autocomplete="off" placeholder="请输入用户密码"></el-input>
            </el-form-item>
            <el-form-item label="所属部门" prop="deptCode">
                <el-input-dept v-model="form.deptCode" clearable size="mini" placeholder="请选择所属部门"></el-input-dept>
            </el-form-item>
            <el-form-item label="用户状态" prop="userStatus">
                <el-input-dict v-model="form.userStatus" clearable size="mini" placeholder="请输入用户状态" dict-name="USER_STATUS"></el-input-dict>
            </el-form-item>

            <br>

            <el-form-item label="用户角色" prop="roleCodeList">
                <el-transfer v-model="form.roleCodeList" :data="roleList" :titles="['未选角色','已选角色']" style="width: 500px"></el-transfer>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
			<el-button size="mini" @click="form.formShow = false">取 消</el-button>
			<el-button size="mini" type="primary" @click="onSave">保存</el-button>
		</span>
    </el-dialog>
</div>
<script>
    var app = new Vue({
        mixins: [mixin],
        el: "#app",
        data: {
            module: 'wsys',
            target: 'user',
            vm: {//条件及分页参数
                userName: null,
                userCode: null,
                userAlias: null,
                userStatus: null,
                deptCode: null,
                startDate: null,
                endDate: null,
                pageNumber: 1,
                pageSize: 10,
                totalCount: 0,
                sortKey: 'CREATE_TIME',
                sortType: 'DESC'
            },
            form: {//待提交表单
                formTitle: null,
                formShow: false,
                id: null,
                userName: null,
                userCode: null,
                userAlias: null,
                userPwd: null,
                userStatus: null,
                deptCode: null,
                roleCodeList: [],
                rowVersion: null
            },
            formRules: {
                userName: [
                    {required: true, message: '用户账户不能为空', trigger: 'blur'},
                    {min: 1, max: 100, message: '用户账户长度在 1 到 100 个字符', trigger: 'blur'}
                ],
                userCode: [
                    {min: 0, max: 50, message: '用户代码长度在 1 到 50 个字符', trigger: 'blur'}
                ],
                userAlias: [
                    {required: true, message: '用户别名不能为空', trigger: 'blur'},
                    {min: 1, max: 50, message: '用户别名长度在 1 到 50 个字符', trigger: 'blur'}
                ],
                userPwd: [
                    {required: true, message: '用户密码不能为空', trigger: 'blur'},
                    {pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '密码至少包含 数字和英文，长度6-20'}
                ],
                userStatus: [
                    {required: true, message: '用户状态不能为空', trigger: 'blur'},
                ],
                deptCode: [
                    {min: 0, max: 50, message: '部门代码长度在 1 到 50 个字符', trigger: 'blur'}
                ],
                roleCodeList: []
            },
            roleList: []
        },
        methods: {
            onCreate: function () {
                this.form.formTitle = "用户新增";
                this.form.formShow = true;
                this.form.id = "";
                this.form.userName = "";
                this.form.userCode = "";
                this.form.userAlias = "";
                this.form.userPwd = "";
                this.form.userStatus = "";
                this.form.deptId = "";
                this.form.deptCode = "";
                this.form.deptName = "";
            },
            onEdit: function (item) {
                this.form.formTitle = "用户编辑";
                this.form.formShow = true;
                this.form.id = item.id;
                this.form.userName = item.userName;
                this.form.userCode = item.userCode;
                this.form.userAlias = item.userAlias;
                this.form.userPwd = item.userPwd;
                this.form.userStatus = item.userStatus;
                this.form.deptId = item.deptId;
                this.form.deptCode = item.deptCode;
                this.form.deptName = item.deptName;
                this.form.roleCodeList = item.roleCodes.split(",")
                this.form.rowVersion = item.rowVersion;
            },
            onDelete: function (item) {
                this.$confirm('将删除该项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    new Ajax("wsys", "user").delete({id: item.id}, function (response) {
                        if (response.errors.length > 0) {
                            nav.e(response.errors[0].message);
                        } else {
                            nav.s("删除成功.");
                            this.onFind();
                        }
                    }.bind(this))
                }.bind(this)).catch(function (action) {

                });
            },
            loadRoles: function () {
                new Ajax("wsys", "role").find({pageSize: 0}, function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        this.roleList = response.result;
                        for (var i = 0; i < this.roleList.length; i++) {
                            this.roleList[i].key = this.roleList[i].code;
                            this.roleList[i].label = this.roleList[i].name;
                        }
                    }
                }.bind(this))
            },
        },
        mounted: function () {
            this.onFind();
            this.loadRoles();
        }
    })
</script>
