@@master_page.html
<link href="css/page_table_list.css" rel="stylesheet" />
<link href="css/page_interface_manager.css" rel="stylesheet" />
<script src="js/ace/src-min/ace.js"></script>
<script src="js/ace/src-min/ext-language_tools.js"></script>
<div id="apibox" class="card">
    <!--主列表搜索-->
    <div class="search-bar">
        <form id="frmSearach" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
            <div class="form-group hide">
                <div class="row">
                    <div class="col-md-2"><input class="form-control" type="text" id="txtUserName" name="example-text-input" placeholder="用户名"></div>
                    <div class="col-md-2 hide"><input class="form-control" type="text" id="txtPassword" name="example-text-input" placeholder="密码"></div>
                    <div class="col-md-2">
                        <select id="selIsMasterAdmin" class="form-control">
                            <option value="">==是否管理员==</option>
                            <option value="true">是</option>
                            <option value="false">否</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button @click="onSearch()" id="btnSearch" class="btn btn-secondary"><i class="mdi mdi-magnify"></i>搜索</button>
                        <button onclick="frmSearach.reset()" class="btn btn-close m-l-15" type="submit">清空</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!--主表列表操作按钮-->
    <div class="card-toolbar clearfix hide">
        <div class="toolbar-btn-action">
            <a class="btn btn-primary m-r-5" @click="openAddAdmin()" href="#!"><i class="mdi mdi-plus"></i> 新增管理账号</a>
            <a class="btn btn-primary m-r-5" @click="openAddUser()" href="#!"><i class="mdi mdi-plus"></i> 业务账号</a>
        </div>
    </div>
    <!--主列表-->
    <div class="card-body">
        <div class="table-responsive">
            <div class="master-table-container">
                <table class="table table-bordered">
                    <thead>
                        <tr v-if="data && data.Columns && data.Columns.length > 0">
                            <th class="width30">
                                <label class="lyear-checkbox checkbox-primary">
                                    <input type="checkbox" @change="selectAll" id="check-all"><span></span>
                                </label>
                            </th>
                            <th v-for="column in data.Columns">{{column.ColumnDescription}}</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody v-if="data && data.Data">
                        <tr v-if="data.Columns && data.Columns.length > 0" v-for="item in data.Data">
                            <td>
                                <label class="lyear-checkbox checkbox-primary">
                                    <input type="checkbox" name="ids[]" v-model="selectedItems" :alt="item.Id" :value="item.Id"><span></span>
                                </label>
                            </td>
                            <td v-for="column in data.Columns">
                                {{ item[column.PropertyName] }}
                            </td>
                            <td class="table_opt">
                                <button data-toggle="modal" @click="openEdit(item)" class="btn btn-link" type="button">
                                    <i class="mdi mdi-lead-pencil"></i> 修改
                                </button>
                                <button data-toggle="modal" @click="deleteAndConfirm(item)" data-target="#divDelBox" class="btn btn-link" type="button">
                                    <i class="mdi mdi-do-not-disturb"></i> 删除
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!--分页局部视图-->
    @@page_control.html
    <!--创建用户信息窗体-->
    <div id="divSave" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;">
        <button id="btnSave" type="button" class="btn btn-primary hidden" data-toggle="modal" data-target="#divSave"></button>
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myLargeModalLabel">{{title}} </h4>
                </div>
                <div class="modal-body">
                    <form id="frmSave" action="#!" method="post" name="edit-form" class="edit-form">
                        <input v-model="editId" type="hidden" value="0" />
                        <div class="form-group col-md-12">
                            <label>用户名</label>
                            <input :readonly="isReadOnly" type="text" class="form-control" v-model="formData.UserName" placeholder="请输入用户名">
                        </div>
                        <div class="form-group col-md-12">
                            <label>密码</label>
                            <input type="password" class="form-control" v-model="formData.Password" placeholder="请输入密码">
                        </div>
                        <div class="form-group col-md-12">
                            <label>确认密码</label>
                            <input type="password" class="form-control" v-model="formData.ConfirmPassword" placeholder="请再次输入密码">
                        </div>
                        <div class="form-group hide col-md-12">
                            <label>绑定业务账号</label>
                            <code>初始化配置中的JWT用户表</code>
                            <select v-if="bizUsers.length > 0&& bizUsers[0]" class="form-control" v-model="formData.BusinessAccount" placeholder="业务账号">
                                <option v-for="user in bizUsers" :value="user">{{user}}</option>
                            </select>
                            <div v-else class="alert alert-warning">
                            JWT的信息没有配置完整，不能加载下拉列表
                            详细：{{bizUserErrorMessage}}</div>
                        </div>
                        <div class="form-group col-md-12">
                            <label>是否管理员</label>
                            <code>非管理员只能有动态接口请求的权限</code>
                            <select disabled class="form-control" v-model="formData.IsMasterAdmin">
                                <option value="true">是</option>
                                <option value="false">否</option>
                            </select>
                            <input type="hidden" v-model="formData.IsMasterAdmin" />
                        </div>
                        <div class="form-group col-md-12">
                            <img :src="formData.Avatar" onerror="this.src='images/users/avatar.jpg';" @click="selectImage" style="height: 50px; width: 50px; cursor: pointer;" />
                            <input type="file" id="fileInput" @change="onFileChange" style="display: none;" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnAddOrUpdateColse" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" @click="addOrUpdateUserInfo()" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var vueObj = new Vue({
        el: '#apibox',
        data: {
            data: null,
            error: null,
            title: "添加用户信息",
            editId: 0,
            isReadOnly: false, 
            bizUsers: [],
            bizUserErrorMessage:"",
            formData: {
                UserName: '',
                Password: '',
                ConfirmPassword: '',
                IsMasterAdmin: false,
                BusinessAccount:'',
                Avatar: ''
            },
            selectedItems: []
        },
        mounted() {
            //this.fetchData("");
            this.fetchBizUsers(); 
        },
        methods: {
            fetchData: function (append) {
                var url = "/PrivateReZeroRoute/100003/GetUserInfoPageList" + append;
                axios.get(url, jwHeader)
                    .then(response => {
                        this.data = response.data;
                        this.error = null;
                    })
                    .catch(error => {
                        this.error = error.message;
                        this.data = null;
                    });
            },
            onSearch: function (page) {
                var urlParameters = "?" + tools.objectToQueryString({
                    __pageNumber: page,
                    __pageSize: tools.getValue("selPageSize"),
                    UserName: txtUserName.value,
                    Password: txtPassword.value,
                    IsMasterAdmin: selIsMasterAdmin.value
                });
                this.fetchData(urlParameters);
            },
            selectAll: function (event) {
                if (event.target.checked) {
                    // 全选
                    this.selectedItems = this.data.Data.map(item => item.Id);
                } else {
                    // 全不选
                    this.selectedItems = [];
                }
            }, 
            openEdit: function (item) {
                var th = this;
                this.isReadOnly = true;
                this.title = "修改用户信息";
                var urlById = "/PrivateReZeroRoute/100003/GetUserById?id=" + -1;
                    axios.get(urlById, jwHeader)
                        .then(response => {
                            th.formData = response.data; 
                            btnSave.click();
                        })
                        .catch(error => {
                            this.error = error.message;
                            this.data = null;
                        });
            }, 
            addOrUpdateUserInfo: function () {
                if (this.formData.Password !== this.formData.ConfirmPassword) {
                    tools.alert("密码和确认密码不一致");
                    return;
                }
                if (!this.formData.IsMasterAdmin && !this.formData.BusinessAccount) {
                    tools.alert("非管理员【绑定业务账号】是必填项");
                    return;
                }
                var formData = this.formData;
                var url = "/PrivateReZeroRoute/100003/SaveUser";
                axios.post(url, formData, jwHeader)
                    .then(response => {
                        if (response.data == true) {
                            tools.alert("保存成功");
                            setTimeout(function () { 
                                window.location.href = "/rezero/dynamic_interface.html?InterfaceCategoryId=200100";
                            }, 500);
                            this.error = null; 
                        } else {
                            tools.alert(response.data.message);
                        }
                    })
                    .catch(error => {
                        this.error = error.message;
                    });
            }, 
            selectImage: function () {
                document.getElementById('fileInput').click();
            },
            fetchBizUsers: function () {
                var url = "/PrivateReZeroRoute/100003/GetBizUsers";
                axios.get(url, jwHeader)
                    .then(response => {
                        if (Array.isArray(response.data)) {
                            this.bizUsers = response.data;
                        } else if (response.data.message) {
                            this.bizUserErrorMessage = response.data.message;
                            this.bizUsers = [""];
                        }
                        this.openEdit();
                    })
                    .catch(error => {
                        this.error = error.message;
                        this.openEdit();
                    });
            },
            onFileChange: function (e) {
                var files = e.target.files;
                if (!files.length) return;
                var reader = new FileReader();
                reader.readAsDataURL(files[0]);
                reader.onload = e => {
                    this.formData.Avatar = e.target.result;
                };
            }
        }
    });
</script>