@@master_page.html
<link href="css/page_table_list.css?v=1" rel="stylesheet" />
<!--<link href="css/page_jwt_token_management.css?v=1" 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 mypage">
    <!--正文-->
    <div class="card">
        <div class="search-bar"> </div>
        <div class="card">
            <form id="frmSearach" onsubmit="return false;">
                <div class="row ">
                    <div class="form-group">
                        <div class="col-md-1"><label class="form-control m-l-15">搜索:</label></div>
                        <div class="col-md-11">
                            <div class="input-group">
                                <input id="txtSearch" type="text" style="width:150px;margin-left:20px; margin-right:10px" class="form-control" value="" name="keyword" placeholder="请输入用户名">
                                <a class="btn btn-secondary m-r-5" id="btnSearch" data-toggle="tooltip" @click="onSearch()" href="#!"><i class="mdi mdi-magnify"></i> 搜索</a>
                                <button onclick="frmSearach.reset()" type="submit" class="btn btn-close">清空</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="card-toolbar clearfix">
                <div class="toolbar-btn-action">
                    <a @click="openAddDiv()" data-toggle="modal" data-target="#gridSystemModal" class="btn btn-primary m-r-10" 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">
                                        <template v-if="column.PropertyName === 'Token'">
                                            {{ item[column.PropertyName].substring(0, 20) }}...
                                            <button @click="copyToClipboard(item[column.PropertyName])" class="btn btn-link btn-sm">复制</button>
                                        </template>
                                        <template v-else>
                                            {{ item[column.PropertyName] }}
                                        </template>
                                    </td>
                                    <td class="table_opt2">
                                        <button data-toggle="modal" @click="openEditDiv(item)" data-target="#gridSystemModal" 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>
                @@page_control.html
            </div>
        </div>
    </div>
    <!--插入或者新增-->
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="gridSystemModal" style="display: none;">
        <div class="modal-dialog" 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="exampleModalLabel">{{title}}</h4>
                </div>
                <div class="modal-body">
                    <form id="frmEdit">
                        <input type="hidden" v-model="formData.Id" name="Id" />
                        <div class="form-group">
                            <label class="control-label">用户名：</label>
                            <input :readonly="isReadOnly" v-if="users.length > 0&& users[0]" oninput="tools.validateDatalist(this,'userList')" list="userList" v-model="formData.UserName" class="form-control" placeholder="请选择用户名">
                            <datalist id="userList"  v-if="users.length > 0&& users[0]">
                                <option v-for="user in users" :value="user">{{ user }}</option>
                            </datalist>
                            <div v-else class="alert alert-warning">
                                JWT的信息没有配置完整，不能加载下拉列表
                                详细：{{bizUserErrorMessage}}
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">描述：</label>
                            <input type="text" placeholder="描述" v-model="formData.Description" name="Description" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">使用期限：</label>
                            <input  :readonly="isReadOnly"  type="date" v-model="formData.Expiration" name="Expiration" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">JWT Token：</label>
                            <textarea readonly="readonly" placeholder="JWT Token 自动生成" class="form-control" v-model="formData.Token" name="Token"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnCloseEdit" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" @click="addOrUpdate()" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var vueObj = new Vue({
        el: '#apibox',
        data: {
            data: null,
            error: null,
            bizUserErrorMessage: "",
            title: "添加JWT Token",
            formData: {
                Id: 0,
                UserName: '',
                Description: '',
                Expiration: '',
                Token: ''
            },
            selectedItems: [],
            users: [], // 添加用户列表
            isReadOnly: false // 添加只读状态
        },
        mounted() {
            this.fetchData("");
            this.fetchUsers();
        },
        methods: {
            fetchData: function (append) {
                var url = "/PrivateReZeroRoute/100003/GetZeroJwtTokenManagementPage" + append;
                axios.get(url, jwHeader)
                    .then(response => {
                        this.data = response.data;
                        this.error = null;
                    })
                    .catch(error => {
                        this.error = error.message;
                        this.data = null;
                    });
            },
            fetchUsers: function () {
                var url = "/PrivateReZeroRoute/100003/GetBizUsers"; // 获取用户列表的API
                axios.get(url, jwHeader)
                    .then(response => {
                        if (Array.isArray(response.data)) {
                            this.users = response.data;
                        } else if (response.data.message) {
                            this.bizUserErrorMessage = response.data.message;
                            this.users = [""];
                        }
                    })
                    .catch(error => {
                        this.error = error.message;
                    });
            },
            onSearch: function (page) {
                var urlParameters = "?" + tools.objectToQueryString({
                    __pageNumber: page,
                    __pageSize: tools.getValue("selPageSize"),
                    UserName: txtSearch.value,
                    OrderByType:1
                });
                this.fetchData(urlParameters);
            },
            selectAll: function (event) {
                if (event.target.checked) {
                    // 全选
                    this.selectedItems = this.data.Data.map(item => item.Id);
                } else {
                    // 全不选
                    this.selectedItems = [];
                }
            },
            deleteAndConfirm: function (item) {
                if (item == null) {
                    var url = "/PrivateReZeroRoute/100003/DeleteTokenManage?Id=" + localStorage.delId;
                    axios.get(url, jwHeader)
                        .then(response => {
                            if (response.data.message) {
                                tools.alert(response.data.message);
                            }
                            this.data = response.data;
                            this.error = null;
                            this.onSearch();
                            btnDelClose.click();
                        })
                        .catch(error => {
                            this.error = error.message;
                            this.data = null;
                        });
                } else {
                    localStorage.delId = item.Id;
                }
            },
            openEditDiv: function (item) {
                var th = this;
                this.title = "修改JWT Token";
                this.isReadOnly = true; // 设置只读状态
                var urlById = "/PrivateReZeroRoute/100003/GetTokenManageById?id=" + item.Id;
                if (item.Id) {
                    axios.get(urlById, jwHeader)
                        .then(response => {
                            th.formData = response.data; 
                            th.formData.Expiration =tools.formatDate(th.formData.Expiration);
                        })
                        .catch(error => {
                            this.error = error.message;
                            this.data = null;
                        });
                }
            },
            openAddDiv: function () {
                this.title = "添加JWT Token";
                this.isReadOnly = false; // 取消只读状态
                this.formData = {
                    Id: 0,
                    UserName: '',
                    Description: '',
                    Expiration: '',
                    Token: ''
                };
                btnSave.click();
            },
            addOrUpdate: function () {
                var formData = this.formData;
                var url = formData.Id ?
                    "/PrivateReZeroRoute/100003/UpdateTokenManage" :
                    "/PrivateReZeroRoute/100003/AddTokenManage";
                axios.post(url, formData, jwHeader)
                    .then(response => {
                        if (response.data == true) { 
                            btnCloseEdit.click();
                            this.error = null;
                            this.onSearch();
                        } else {
                            tools.alert(response.data.message);
                        }
                    })
                    .catch(error => {
                        this.error = error.message;
                    });
            },
            copyToClipboard: function (text) {
                tools.copyText(text);
            }
        }
    });</script>