| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <html lang="zh-CN"> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <title></title> |
|---|
| | | <title>凭证记录</title> |
|---|
| | | <meta name="renderer" content="webkit"> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|---|
| | | <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all"> |
|---|
| | | <link rel="stylesheet" href="../../static/css/cool.css" media="all"> |
|---|
| | | <link rel="stylesheet" href="../../static/css/common.css" media="all"> |
|---|
| | | <link rel="stylesheet" href="../../static/vue/element/element.css"> |
|---|
| | | <link rel="stylesheet" href="../../static/css/cool.css"> |
|---|
| | | <style> |
|---|
| | | :root { |
|---|
| | | --card-bg: rgba(255, 255, 255, 0.94); |
|---|
| | | --card-border: rgba(216, 226, 238, 0.95); |
|---|
| | | --text-main: #243447; |
|---|
| | | } |
|---|
| | | |
|---|
| | | [v-cloak] { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | html, |
|---|
| | | body { |
|---|
| | | margin: 0; |
|---|
| | | min-height: 100%; |
|---|
| | | color: var(--text-main); |
|---|
| | | font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif; |
|---|
| | | background: |
|---|
| | | radial-gradient(1000px 420px at 0% -10%, rgba(44, 107, 193, 0.12), transparent 56%), |
|---|
| | | radial-gradient(900px 400px at 100% 0%, rgba(28, 150, 126, 0.10), transparent 58%), |
|---|
| | | linear-gradient(180deg, #f2f6fb 0%, #f8fafc 100%); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .page-shell { |
|---|
| | | max-width: 1700px; |
|---|
| | | margin: 0 auto; |
|---|
| | | padding: 14px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .card-shell { |
|---|
| | | border-radius: 24px; |
|---|
| | | border: 1px solid var(--card-border); |
|---|
| | | background: |
|---|
| | | radial-gradient(760px 220px at -8% 0%, rgba(43, 117, 196, 0.05), transparent 55%), |
|---|
| | | radial-gradient(680px 200px at 108% 10%, rgba(24, 150, 129, 0.05), transparent 58%), |
|---|
| | | var(--card-bg); |
|---|
| | | box-shadow: 0 16px 32px rgba(44, 67, 96, 0.08); |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-bar { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | gap: 8px; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | padding: 12px 16px 10px; |
|---|
| | | border-bottom: 1px solid rgba(222, 230, 239, 0.92); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-left, |
|---|
| | | .toolbar-right { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 8px; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-title { |
|---|
| | | font-size: 13px; |
|---|
| | | color: #7a8a9f; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-title strong { |
|---|
| | | color: var(--text-main); |
|---|
| | | font-size: 15px; |
|---|
| | | margin-right: 8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-search { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 8px; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search-item.user { |
|---|
| | | width: 220px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-bar .el-input__inner, |
|---|
| | | .toolbar-bar .el-button { |
|---|
| | | height: 32px; |
|---|
| | | line-height: 32px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-bar .el-button { |
|---|
| | | padding: 0 12px; |
|---|
| | | border-radius: 8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .table-wrap { |
|---|
| | | padding: 10px 16px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .table-shell { |
|---|
| | | border-radius: 20px; |
|---|
| | | overflow: hidden; |
|---|
| | | border: 1px solid rgba(217, 227, 238, 0.98); |
|---|
| | | background: rgba(255, 255, 255, 0.95); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .table-shell .el-table { |
|---|
| | | border-radius: 20px; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .table-shell .el-table th { |
|---|
| | | background: #f7fafc; |
|---|
| | | color: #53677d; |
|---|
| | | font-weight: 700; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .action-link { |
|---|
| | | color: #2f6bcb; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .pager-bar { |
|---|
| | | padding: 0 16px 16px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: flex-end; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-panel .el-dialog { |
|---|
| | | border-radius: 24px; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-panel .el-dialog__header { |
|---|
| | | padding: 22px 24px 12px; |
|---|
| | | background: linear-gradient(180deg, #f8fbff 0%, #f3f7fb 100%); |
|---|
| | | border-bottom: 1px solid rgba(224, 232, 241, 0.92); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-panel .el-dialog__title { |
|---|
| | | font-weight: 700; |
|---|
| | | color: var(--text-main); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-panel .el-dialog__body { |
|---|
| | | padding: 18px 24px 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-footer { |
|---|
| | | display: flex; |
|---|
| | | justify-content: flex-end; |
|---|
| | | gap: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .detail-block { |
|---|
| | | display: grid; |
|---|
| | | grid-template-columns: repeat(2, minmax(0, 1fr)); |
|---|
| | | gap: 14px 18px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .detail-item { |
|---|
| | | min-width: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .detail-item.full { |
|---|
| | | grid-column: 1 / -1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .detail-label { |
|---|
| | | font-size: 12px; |
|---|
| | | color: #7c8a9d; |
|---|
| | | margin-bottom: 6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .detail-value { |
|---|
| | | min-height: 32px; |
|---|
| | | padding: 8px 10px; |
|---|
| | | border: 1px solid rgba(220, 229, 238, 0.95); |
|---|
| | | border-radius: 10px; |
|---|
| | | background: #f9fbfd; |
|---|
| | | color: var(--text-main); |
|---|
| | | word-break: break-all; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @media (max-width: 900px) { |
|---|
| | | .page-shell { |
|---|
| | | padding: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-bar, |
|---|
| | | .table-wrap, |
|---|
| | | .pager-bar { |
|---|
| | | padding-left: 12px; |
|---|
| | | padding-right: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search-item.user { |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .detail-block { |
|---|
| | | grid-template-columns: 1fr; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | |
|---|
| | | <!-- 搜索栏 --> |
|---|
| | | <div id="search-box" class="layui-form layui-card-header"> |
|---|
| | | <div class="layui-inline"> |
|---|
| | | <div class="layui-input-inline cool-auto-complete"> |
|---|
| | | <input id="userId" class="layui-input" name="user_id" type="text" placeholder="请输入" autocomplete="off" style="display: none"> |
|---|
| | | <input id="userUsername" class="layui-input cool-auto-complete-div" onclick="autoShow(this.id)" type="text" placeholder="用户" onfocus=this.blur()> |
|---|
| | | <div class="cool-auto-complete-window"> |
|---|
| | | <input class="cool-auto-complete-window-input" data-key="userQuery" onkeyup="autoLoad(this.getAttribute('data-key'))"> |
|---|
| | | <select class="cool-auto-complete-window-select" data-key="userQuerySelect" onchange="confirmed(this.getAttribute('data-key'))" multiple="multiple"> |
|---|
| | | </select> |
|---|
| | | <div id="app" class="page-shell" v-cloak> |
|---|
| | | <section class="card-shell"> |
|---|
| | | <div class="toolbar-bar"> |
|---|
| | | <div class="toolbar-left"> |
|---|
| | | <div class="toolbar-title"><strong>凭证记录</strong></div> |
|---|
| | | <div class="toolbar-search"> |
|---|
| | | <el-select |
|---|
| | | v-model="searchForm.userId" |
|---|
| | | class="search-item user" |
|---|
| | | clearable |
|---|
| | | filterable |
|---|
| | | remote |
|---|
| | | reserve-keyword |
|---|
| | | placeholder="用户" |
|---|
| | | :remote-method="searchUserOptions" |
|---|
| | | :loading="userSearchLoading"> |
|---|
| | | <el-option |
|---|
| | | v-for="item in userSearchOptions" |
|---|
| | | :key="'search-' + item.id" |
|---|
| | | :label="item.value" |
|---|
| | | :value="item.id"> |
|---|
| | | </el-option> |
|---|
| | | </el-select> |
|---|
| | | <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
|---|
| | | <el-button size="small" plain icon="el-icon-refresh-left" @click="handleReset">重置</el-button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="toolbar-right"> |
|---|
| | | <el-button size="small" type="primary" plain icon="el-icon-plus" @click="openCreateDialog">新增</el-button> |
|---|
| | | <el-button size="small" type="danger" plain icon="el-icon-delete" :disabled="selection.length === 0" @click="removeSelection">删除</el-button> |
|---|
| | | <el-button size="small" plain icon="el-icon-download" :loading="exportLoading" @click="exportRows">导出</el-button> |
|---|
| | | <el-button size="small" plain icon="el-icon-refresh" :loading="loading" @click="loadList">刷新</el-button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 待添加 --> |
|---|
| | | <div id="data-search-btn" class="layui-btn-container layui-form-item"> |
|---|
| | | <button id="search" class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="search">搜索</button> |
|---|
| | | <button id="reset" class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="reset">重置</button> |
|---|
| | | </div> |
|---|
| | | <div class="table-wrap"> |
|---|
| | | <div class="table-shell"> |
|---|
| | | <el-table |
|---|
| | | ref="dataTable" |
|---|
| | | v-loading="loading" |
|---|
| | | :data="tableData" |
|---|
| | | border |
|---|
| | | stripe |
|---|
| | | :height="tableHeight" |
|---|
| | | @selection-change="handleSelectionChange"> |
|---|
| | | <el-table-column type="selection" width="52" align="center"></el-table-column> |
|---|
| | | <el-table-column prop="id" label="ID" width="90" align="center"></el-table-column> |
|---|
| | | <el-table-column label="员工" min-width="180" show-overflow-tooltip> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <span |
|---|
| | | v-if="scope.row.userId && scope.row.userUsername" |
|---|
| | | class="action-link" |
|---|
| | | @click="openUserDetail(scope.row)"> |
|---|
| | | {{ scope.row.userUsername }} |
|---|
| | | </span> |
|---|
| | | <span v-else>--</span> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column prop="token" label="凭证值" min-width="300" show-overflow-tooltip></el-table-column> |
|---|
| | | <el-table-column label="添加时间" min-width="180" show-overflow-tooltip> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | {{ scope.row['createTime$'] || '--' }} |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column label="操作" width="150" fixed="right" align="center"> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <el-button type="text" @click="openDetailDialog(scope.row)">详情</el-button> |
|---|
| | | <el-button type="text" @click="openEditDialog(scope.row)">编辑</el-button> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="pager-bar"> |
|---|
| | | <el-pagination |
|---|
| | | background |
|---|
| | | layout="total, sizes, prev, pager, next, jumper" |
|---|
| | | :current-page="pagination.curr" |
|---|
| | | :page-sizes="[16, 30, 50, 100, 200, 500]" |
|---|
| | | :page-size="pagination.limit" |
|---|
| | | :total="pagination.total" |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | | @current-change="handleCurrentChange"> |
|---|
| | | </el-pagination> |
|---|
| | | </div> |
|---|
| | | </section> |
|---|
| | | |
|---|
| | | <el-dialog |
|---|
| | | class="dialog-panel" |
|---|
| | | :title="loginDialog.mode === 'create' ? '新增凭证' : loginDialog.readonly ? '凭证详情' : '编辑凭证'" |
|---|
| | | :visible.sync="loginDialog.visible" |
|---|
| | | width="760px" |
|---|
| | | :close-on-click-modal="false"> |
|---|
| | | <el-form |
|---|
| | | ref="loginForm" |
|---|
| | | :model="loginForm" |
|---|
| | | :rules="loginRules" |
|---|
| | | label-width="90px" |
|---|
| | | size="small"> |
|---|
| | | <el-row :gutter="16"> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="员工" prop="userId"> |
|---|
| | | <el-select |
|---|
| | | v-model="loginForm.userId" |
|---|
| | | clearable |
|---|
| | | filterable |
|---|
| | | remote |
|---|
| | | reserve-keyword |
|---|
| | | style="width: 100%;" |
|---|
| | | placeholder="请选择员工" |
|---|
| | | :disabled="loginDialog.readonly" |
|---|
| | | :remote-method="searchDialogUserOptions" |
|---|
| | | :loading="dialogUserLoading"> |
|---|
| | | <el-option |
|---|
| | | v-for="item in dialogUserOptions" |
|---|
| | | :key="'dialog-' + item.id" |
|---|
| | | :label="item.value" |
|---|
| | | :value="item.id"> |
|---|
| | | </el-option> |
|---|
| | | </el-select> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="凭证值" prop="token"> |
|---|
| | | <el-input v-model.trim="loginForm.token" :disabled="loginDialog.readonly" placeholder="请输入凭证值"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="添加时间" prop="createTime"> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="loginForm.createTime" |
|---|
| | | type="datetime" |
|---|
| | | value-format="yyyy-MM-dd HH:mm:ss" |
|---|
| | | style="width: 100%;" |
|---|
| | | :disabled="loginDialog.readonly" |
|---|
| | | placeholder="请选择添加时间"> |
|---|
| | | </el-date-picker> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </el-form> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | | <el-button @click="loginDialog.visible = false">{{ loginDialog.readonly ? '关闭' : '取消' }}</el-button> |
|---|
| | | <el-button v-if="!loginDialog.readonly" type="primary" :loading="loginDialog.submitting" @click="submitLogin">保存</el-button> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | |
|---|
| | | <el-dialog |
|---|
| | | class="dialog-panel" |
|---|
| | | title="员工详情" |
|---|
| | | :visible.sync="userDetail.visible" |
|---|
| | | width="720px" |
|---|
| | | :close-on-click-modal="false"> |
|---|
| | | <div class="detail-block"> |
|---|
| | | <div class="detail-item"> |
|---|
| | | <div class="detail-label">编号</div> |
|---|
| | | <div class="detail-value">{{ userDetail.data.id || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="detail-item"> |
|---|
| | | <div class="detail-label">账号</div> |
|---|
| | | <div class="detail-value">{{ userDetail.data.mobile || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="detail-item"> |
|---|
| | | <div class="detail-label">名称</div> |
|---|
| | | <div class="detail-value">{{ userDetail.data.username || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="detail-item"> |
|---|
| | | <div class="detail-label">角色</div> |
|---|
| | | <div class="detail-value">{{ userDetail.data.roleName || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="detail-item"> |
|---|
| | | <div class="detail-label">注册时间</div> |
|---|
| | | <div class="detail-value">{{ userDetail.data['createTime$'] || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="detail-item"> |
|---|
| | | <div class="detail-label">状态</div> |
|---|
| | | <div class="detail-value">{{ userDetail.data['status$'] || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | | <el-button @click="userDetail.visible = false">关闭</el-button> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 表格 --> |
|---|
| | | <table class="layui-hide" id="userLogin" lay-filter="userLogin"></table> |
|---|
| | | <script type="text/html" id="toolbar"> |
|---|
| | | <div class="layui-btn-container"> |
|---|
| | | <button class="layui-btn layui-btn-sm" id="btn-add" lay-event="addData">新增</button> |
|---|
| | | <button class="layui-btn layui-btn-sm" id="btn-delete" lay-event="deleteData">删除</button> |
|---|
| | | <button class="layui-btn layui-btn-primary layui-btn-sm" id="btn-export" lay-event="exportData">导出</button> |
|---|
| | | </div> |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <script type="text/html" id="operate"> |
|---|
| | | <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a> |
|---|
| | | <a class="layui-btn layui-btn-xs btn-edit" lay-event="edit">编辑</a> |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script> |
|---|
| | | <script type="text/javascript" src="../../static/js/common.js?v=20260309_i18n_fix1" charset="utf-8"></script> |
|---|
| | | <script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script> |
|---|
| | | <script type="text/javascript" src="../../static/js/userLogin/userLogin.js" charset="utf-8"></script> |
|---|
| | | |
|---|
| | | <iframe id="detail-iframe" scrolling="auto" style="display:none;"></iframe> |
|---|
| | | |
|---|
| | | <script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script> |
|---|
| | | <script type="text/javascript" src="../../static/vue/js/vue.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../../static/vue/element/element.js"></script> |
|---|
| | | <script type="text/javascript" src="../../static/js/userLogin/userLogin.js?v=20260310_userlogin_vue_custom" charset="utf-8"></script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| | | |
|---|
