<#-- since 2017-01-01-->
<div id="app" v-cloak>
    <el-card class="box-card">
        <el-tabs :value="'list'">
            <el-tab-pane label="列表展示" name="list">
                <span slot="label"><i class="el-icon-s-operation"></i>列表展示</span>

                <el-form class="search" :inline="true" :model="vm" ref="vm" label-position="right" label-width="90px">
                    <el-form-item label="部门代码" prop="deptCode">
                        <el-input v-model="vm.deptCode" clearable size="mini" placeholder="请输入部门代码"></el-input>
                    </el-form-item>
                    <el-form-item label="部门名称" prop="deptName">
                        <el-input v-model="vm.deptName" clearable size="mini" placeholder="请输入部门名称"></el-input>
                    </el-form-item>
                    <el-form-item label="部门别名" prop="deptAlias">
                        <el-input v-model="vm.deptAlias" clearable size="mini" placeholder="请输入部门别名"></el-input>
                    </el-form-item>
                    <el-form-item label="上级代码" prop="supCode">
                        <el-input v-model="vm.supCode" clearable size="mini" placeholder="请输入上级代码"></el-input>
                    </el-form-item>
                    <el-form-item label="上级名称" prop="supName">
                        <el-input v-model="vm.supName" clearable size="mini" placeholder="请输入上级名称"></el-input>
                    </el-form-item>
                    <el-form-item label="是否有效" prop="valid">
                        <el-radio-group v-model="vm.valid" clearable size="mini">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </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-divider><i class="el-icon-search"></i></el-divider>

                <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"
                            width="80"
                            label="是否有效">
                        <template slot-scope="scope">
                            <el-tag size="mini" effect="dark" type="success" v-if="scope.row.valid">有效</el-tag>
                            <el-tag size="mini" effect="dark" type="danger" v-if="!scope.row.valid">无效</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="deptCode"
                            label="部门代码">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="deptName"
                            label="部门名称">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="deptAlias"
                            label="部门别名">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="supCode"
                            label="上级代码">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="supName"
                            label="上级名称">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            width="140"
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            width="120"
                            fixed="right"
                            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-tab-pane>
            <el-tab-pane label="树状展示" name="tree">
                <span slot="label"><i class="el-icon-share"></i>树状展示</span>

                <el-row>
                    <el-col :span="12">
                        <el-input v-model="treeKeyword" clearable size="mini" placeholder="请输入资源内容" @change="onChange"
                                  style="width: 200px;"></el-input>
                    </el-col>
                    <el-col :span="12">
                        <el-button-group style="float: right;">
                            <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="onLoadTree"></el-button>
                            </el-tooltip>
                        </el-button-group>
                    </el-col>
                </el-row>

                <el-tree
                        style="margin-top: 10px"
                        :data="treeData"
                        node-key="id"
                        ref="tree"
                        default-expand-all
                        :filter-node-method="filterTree"
                        :expand-on-click-node="false">
                    <div class="tree" slot-scope="{ node, data }">
                        <span>
                            <el-button type="text" size="mini" icon="el-icon-plus"
                                       @click="onTreeCreate(data)"></el-button>
                            {{ data.label }}<span style="color: #409EFF"
                                                  @click="onTreeEdit(data)">[{{data.value}}]</span>
                        </span>
                    </div>
                </el-tree>
            </el-tab-pane>
        </el-tabs>
    </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="deptCode">
                <el-input v-model="form.deptCode" clearable size="mini" placeholder="请输入部门代码"></el-input>
            </el-form-item>
            <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="form.deptName" clearable size="mini" placeholder="请输入部门名称"></el-input>
            </el-form-item>
            <el-form-item label="部门别名" prop="deptAlias">
                <el-input v-model="form.deptAlias" clearable size="mini" placeholder="请输入部门别名"></el-input>
            </el-form-item>
            <el-form-item label="是否有效" prop="valid">
                <el-radio-group v-model="form.valid" clearable size="mini">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </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>
<style>
    .tree {
        flex: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>
<script>
    var app = new Vue({
        mixins: [mixin],
        el: "#app",
        data: {
            module: 'system',
            target: 'dept',
            vm: {//条件及分页参数
                deptCode: null,
                deptName: null,
                deptAlias: null,
                supCode: null,
                supName: null,
                valid: null,
                startDate: null,
                endDate: null,
                pageNumber: 1,
                pageSize: 10,
                totalCount: 0,
                sortKey: 'CREATE_TIME',
                sortType: 'DESC'
            },
            form: {//待提交表单
                formTitle: null,
                formShow: false,
                id: null,
                deptCode: null,
                deptName: null,
                deptAlias: null,
                supCode: null,
                supName: null,
                valid: null,
                rowVersion: null
            },
            formRules: {
                deptCode: [
                    {required: true, message: '部门代码不能为空', trigger: 'blur'},
                    {min: 1, max: 50, message: '部门代码长度在 1 到 50 个字符', trigger: 'blur'}
                ],
                deptName: [
                    {required: true, message: '部门名称不能为空', trigger: 'blur'},
                    {min: 1, max: 100, message: '部门名称长度在 1 到 100 个字符', trigger: 'blur'}
                ],
                deptAlias: [
                    {min: 1, max: 50, message: '部门别名长度在 1 到 50 个字符', trigger: 'blur'}
                ],
                valid: [
                    {required: true, message: '是否有效不能为空', trigger: 'blur'},
                ],
            },
            treeKeyword: '',
            treeData: []
        },
        methods: {
            onCreate: function () {
                this.form.formTitle = "部门新增";
                this.form.formShow = true;
                this.form.id = "";
                this.form.deptCode = "";
                this.form.deptName = "";
                this.form.deptAlias = "";
                this.form.valid = true;
            },
            onEdit: function (item) {
                this.form.formTitle = "部门编辑";
                this.form.formShow = true;
                this.form.id = item.id;
                this.form.deptCode = item.deptCode;
                this.form.deptName = item.deptName;
                this.form.deptAlias = item.deptAlias;
                this.form.valid = item.valid;
                this.form.rowVersion = item.rowVersion;
            },
            onDelete: function (item) {
                this.$confirm('将删除该项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    new Ajax("system", "dept").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) {

                });
            },
            onTreeCreate: function (pItem) {
                this.form.formTitle = "部门新增";
                this.form.formShow = true;
                this.form.id = "";
                this.form.deptCode = pItem.value;
                this.form.deptName = "";
                this.form.deptAlias = "";
                this.form.valid = true;
            },
            onTreeEdit: function (item) {
                this.form.formTitle = "部门编辑";
                this.form.formShow = true;
                this.form.id = item.id;
                this.form.deptCode = item.deptCode;
                this.form.deptName = item.deptName;
                this.form.deptAlias = item.deptAlias;
                this.form.valid = item.valid;
                this.form.rowVersion = item.rowVersion;
            },
            onChange: function (value) {
                this.$refs.tree.filter(value);
            },
            filterTree: function (value, data) {
                if (!value) return true;
                return data.deptName.indexOf(value) !== -1;
            },
            onLoadTree: function () {
                new Ajax("system", "dept").method("tree").post({}, function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        this.treeData = response.result;
                    }
                }.bind(this))
            },
            onSave: function () {
                this.$refs['form'].validate(function (valid) {
                    if (valid) {
                        if (this.form.id) {
                            new Ajax("system", "dept").update(this.form, function (response) {
                                if (response.errors.length > 0) {
                                    nav.e(response.errors[0].message);
                                } else {
                                    this.onFind();
                                    this.onLoadTree();
                                    this.$refs['form'].resetFields();
                                    this.form.formShow = false;
                                }
                            }.bind(this))
                        } else {
                            new Ajax("system", "dept").create(this.form, function (response) {
                                if (response.errors.length > 0) {
                                    nav.e(response.errors[0].message);
                                } else {
                                    this.onFind();
                                    this.onLoadTree();
                                    this.$refs['form'].resetFields();
                                    this.form.formShow = false;
                                }
                            }.bind(this))
                        }
                    } else {
                        return false;
                    }
                }.bind(this));
            },
        },
        watch: {
            treeKeyword: function (val) {
                this.$refs.tree.filter(val);
            }
        },
        mounted: function () {
            this.onFind();
            this.onLoadTree();
        }
    })
</script>
