fix(列表): 样式优化

This commit is contained in:
Zhunianya
2026-03-23 17:02:01 +08:00
parent d064238e57
commit 1a9704fbc5
6 changed files with 846 additions and 743 deletions

View File

@@ -15,8 +15,8 @@
</el-form>
</el-card>
<el-card style="padding-bottom:100px;">
<el-table v-loading="loading" :data="clientList">
<el-card style="padding-bottom: 100px">
<el-table v-loading="loading" :data="clientList" :border="false">
<el-table-column :label="$t('netty.clients.654908-4')" align="left" header-align="center" prop="clientId">
<template slot-scope="scope">
<el-link :underline="false" type="primary" @click.native="handleOpen(scope.row)">{{ scope.row.clientId }}</el-link>

View File

@@ -1,207 +1,215 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item :label="$t('system.job.356378-0')" prop="jobName">
<el-input v-model="queryParams.jobName" :placeholder="$t('system.job.356378-1')" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('system.job.356378-2')" prop="jobGroup">
<el-select v-model="queryParams.jobGroup" :placeholder="$t('system.job.356378-3')" clearable>
<el-option v-for="dict in dict.type.sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('system.job.356378-4')" prop="status">
<el-select v-model="queryParams.status" :placeholder="$t('system.job.356378-5')" clearable>
<el-option v-for="dict in dict.type.sys_job_status" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['monitor:job:add']">{{ $t('add') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['monitor:job:edit']">{{ $t('update') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:job:remove']">{{ $t('del') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['monitor:job:export']">{{ $t('export') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="info" plain icon="el-icon-s-operation" size="small" @click="handleJobLog" v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-6') }}</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange" :border="false">
<el-table-column type="selection" width="55" align="center" />
<el-table-column :label="$t('system.job.356378-7')" width="100" align="center" prop="jobId" />
<el-table-column :label="$t('system.job.356378-0')" align="center" prop="jobName" :show-overflow-tooltip="true" />
<el-table-column :label="$t('system.job.356378-2')" align="center" prop="jobGroup">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup" />
</template>
</el-table-column>
<el-table-column :label="$t('system.job.356378-8')" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
<el-table-column :label="$t('system.job.356378-9')" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
<el-table-column :label="$t('status')" align="center">
<template slot-scope="scope">
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']">{{ $t('update') }}</el-button>
<el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['monitor:job:remove']">{{ $t('del') }}</el-button>
<el-dropdown size="small" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']">
<el-button size="small" type="text" icon="el-icon-d-arrow-right">{{ $t('more') }}</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="handleRun" icon="el-icon-caret-right" v-hasPermi="['monitor:job:changeStatus']">{{ $t('system.job.356378-10') }}</el-dropdown-item>
<el-dropdown-item command="handleView" icon="el-icon-view" v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-11') }}</el-dropdown-item>
<el-dropdown-item command="handleJobLog" icon="el-icon-s-operation" v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-12') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
<!-- 添加或修改定时任务对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-0')" prop="jobName">
<el-input v-model="form.jobName" :placeholder="$t('system.job.356378-1')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-13')" prop="jobGroup">
<el-select v-model="form.jobGroup" :placeholder="$t('system.job.356378-14')">
<el-option v-for="dict in dict.type.sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item prop="invokeTarget">
<span slot="label">
{{ $t('system.job.356378-15') }}
<el-tooltip placement="top">
<div slot="content">
{{ $t('system.job.356378-16') }}
<br />
{{ $t('system.job.356378-17') }}
<br />
{{ $t('system.job.356378-18') }}
</div>
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="form.invokeTarget" :placeholder="$t('system.job.356378-8')" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('system.job.356378-19')" prop="cronExpression">
<el-input v-model="form.cronExpression" :placeholder="$t('system.job.356378-20')">
<template slot="append">
<el-button type="primary" @click="handleShowCron">
{{ $t('system.job.356378-21') }}
<i class="el-icon-time el-icon--right"></i>
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('system.job.356378-22')" prop="misfirePolicy">
<el-radio-group v-model="form.misfirePolicy" size="small">
<el-radio-button label="1">{{ $t('system.job.356378-23') }}</el-radio-button>
<el-radio-button label="2">{{ $t('system.job.356378-10') }}</el-radio-button>
<el-radio-button label="3">{{ $t('system.job.356378-24') }}</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-25')" prop="concurrent">
<el-radio-group v-model="form.concurrent" size="small">
<el-radio-button label="0">{{ $t('system.job.356378-26') }}</el-radio-button>
<el-radio-button label="1">{{ $t('system.job.356378-27') }}</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('status')">
<el-radio-group v-model="form.status">
<el-radio v-for="dict in dict.type.sys_job_status" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<!-- 搜索栏 - 上栏 -->
<el-card shadow="never" class="search-card">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item :label="$t('system.job.356378-0')" prop="jobName">
<el-input v-model="queryParams.jobName" :placeholder="$t('system.job.356378-1')" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('system.job.356378-2')" prop="jobGroup">
<el-select v-model="queryParams.jobGroup" :placeholder="$t('system.job.356378-3')" clearable>
<el-option v-for="dict in dict.type.sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('system.job.356378-4')" prop="status">
<el-select v-model="queryParams.status" :placeholder="$t('system.job.356378-5')" clearable>
<el-option v-for="dict in dict.type.sys_job_status" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
<el-button @click="cancel">{{ $t('cancel') }}</el-button>
</div>
</el-dialog>
</el-card>
<el-dialog :title="$t('system.job.356378-28')" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
<crontab @hide="openCron = false" @fill="crontabFill" :expression="expression"></crontab>
</el-dialog>
<!-- 操作按钮和数据表格 - 下栏 -->
<el-card shadow="never" class="table-card">
<el-row :gutter="10" style="margin-bottom: 15px">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['monitor:job:add']">{{ $t('add') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['monitor:job:edit']">{{ $t('update') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:job:remove']">{{ $t('del') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['monitor:job:export']">{{ $t('export') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="info" plain icon="el-icon-s-operation" size="small" @click="handleJobLog" v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-6') }}</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 任务日志详细 -->
<el-dialog :title="$t('system.job.356378-11')" :visible.sync="openView" width="700px" append-to-body>
<el-form ref="form" :model="form" label-width="120px" size="small">
<el-row>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-29')">{{ form.jobId }}</el-form-item>
<el-form-item :label="$t('system.job.356378-30')">{{ form.jobName }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-31')">{{ jobGroupFormat(form) }}</el-form-item>
<el-form-item :label="$t('system.job.356378-32')">{{ form.createTime }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-33')">{{ form.cronExpression }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-34')">{{ parseTime(form.nextValidTime) }}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('system.job.356378-35')">{{ form.invokeTarget }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-36')">
<div v-if="form.status == 0">{{ $t('system.job.356378-37') }}</div>
<div v-else-if="form.status == 1">{{ $t('system.job.356378-38') }}</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-25') + ''">
<div v-if="form.concurrent == 0">{{ $t('system.job.356378-26') }}</div>
<div v-else-if="form.concurrent == 1">{{ $t('system.job.356378-27') }}</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-39')">
<div v-if="form.misfirePolicy == 0">{{ $t('system.job.356378-40') }}</div>
<div v-else-if="form.misfirePolicy == 1">{{ $t('system.job.356378-23') }}</div>
<div v-else-if="form.misfirePolicy == 2">{{ $t('system.job.356378-10') }}</div>
<div v-else-if="form.misfirePolicy == 3">{{ $t('system.job.356378-24') }}</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="openView = false">{{ $t('close') }}</el-button>
<el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange" :border="false" header-cell-class-name="table-header">
<el-table-column type="selection" width="55" align="center" />
<el-table-column :label="$t('system.job.356378-7')" width="100" align="center" prop="jobId" />
<el-table-column :label="$t('system.job.356378-0')" align="center" prop="jobName" :show-overflow-tooltip="true" />
<el-table-column :label="$t('system.job.356378-2')" align="center" prop="jobGroup">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup" />
</template>
</el-table-column>
<el-table-column :label="$t('system.job.356378-8')" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
<el-table-column :label="$t('system.job.356378-9')" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
<el-table-column :label="$t('status')" align="center">
<template slot-scope="scope">
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']">{{ $t('update') }}</el-button>
<el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['monitor:job:remove']">{{ $t('del') }}</el-button>
<el-dropdown size="small" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']">
<el-button size="small" type="text" icon="el-icon-d-arrow-right">{{ $t('more') }}</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="handleRun" icon="el-icon-caret-right" v-hasPermi="['monitor:job:changeStatus']">{{ $t('system.job.356378-10') }}</el-dropdown-item>
<el-dropdown-item command="handleView" icon="el-icon-view" v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-11') }}</el-dropdown-item>
<el-dropdown-item command="handleJobLog" icon="el-icon-s-operation" v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-12') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
</el-dialog>
<!-- 添加或修改定时任务对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-0')" prop="jobName">
<el-input v-model="form.jobName" :placeholder="$t('system.job.356378-1')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-13')" prop="jobGroup">
<el-select v-model="form.jobGroup" :placeholder="$t('system.job.356378-14')">
<el-option v-for="dict in dict.type.sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item prop="invokeTarget">
<span slot="label">
{{ $t('system.job.356378-15') }}
<el-tooltip placement="top">
<div slot="content">
{{ $t('system.job.356378-16') }}
<br />
{{ $t('system.job.356378-17') }}
<br />
{{ $t('system.job.356378-18') }}
</div>
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="form.invokeTarget" :placeholder="$t('system.job.356378-8')" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('system.job.356378-19')" prop="cronExpression">
<el-input v-model="form.cronExpression" :placeholder="$t('system.job.356378-20')">
<template slot="append">
<el-button type="primary" @click="handleShowCron">
{{ $t('system.job.356378-21') }}
<i class="el-icon-time el-icon--right"></i>
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('system.job.356378-22')" prop="misfirePolicy">
<el-radio-group v-model="form.misfirePolicy" size="small">
<el-radio-button label="1">{{ $t('system.job.356378-23') }}</el-radio-button>
<el-radio-button label="2">{{ $t('system.job.356378-10') }}</el-radio-button>
<el-radio-button label="3">{{ $t('system.job.356378-24') }}</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-25')" prop="concurrent">
<el-radio-group v-model="form.concurrent" size="small">
<el-radio-button label="0">{{ $t('system.job.356378-26') }}</el-radio-button>
<el-radio-button label="1">{{ $t('system.job.356378-27') }}</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('status')">
<el-radio-group v-model="form.status">
<el-radio v-for="dict in dict.type.sys_job_status" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
<el-button @click="cancel">{{ $t('cancel') }}</el-button>
</div>
</el-dialog>
<el-dialog :title="$t('system.job.356378-28')" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
<crontab @hide="openCron = false" @fill="crontabFill" :expression="expression"></crontab>
</el-dialog>
<!-- 任务日志详细 -->
<el-dialog :title="$t('system.job.356378-11')" :visible.sync="openView" width="700px" append-to-body>
<el-form ref="form" :model="form" label-width="120px" size="small">
<el-row>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-29')">{{ form.jobId }}</el-form-item>
<el-form-item :label="$t('system.job.356378-30')">{{ form.jobName }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-31')">{{ jobGroupFormat(form) }}</el-form-item>
<el-form-item :label="$t('system.job.356378-32')">{{ form.createTime }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-33')">{{ form.cronExpression }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-34')">{{ parseTime(form.nextValidTime) }}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('system.job.356378-35')">{{ form.invokeTarget }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-36')">
<div v-if="form.status == 0">{{ $t('system.job.356378-37') }}</div>
<div v-else-if="form.status == 1">{{ $t('system.job.356378-38') }}</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-25') + ''">
<div v-if="form.concurrent == 0">{{ $t('system.job.356378-26') }}</div>
<div v-else-if="form.concurrent == 1">{{ $t('system.job.356378-27') }}</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('system.job.356378-39')">
<div v-if="form.misfirePolicy == 0">{{ $t('system.job.356378-40') }}</div>
<div v-else-if="form.misfirePolicy == 1">{{ $t('system.job.356378-23') }}</div>
<div v-else-if="form.misfirePolicy == 2">{{ $t('system.job.356378-10') }}</div>
<div v-else-if="form.misfirePolicy == 3">{{ $t('system.job.356378-24') }}</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="openView = false">{{ $t('close') }}</el-button>
</div>
</el-dialog>
</el-card>
</div>
</template>
@@ -436,3 +444,62 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.app-container {
padding: 20px;
min-height: 100vh;
background-color: #f5f7fa;
}
.search-card {
margin-bottom: 15px;
border-radius: 8px;
::v-deep .el-card__body {
padding: 18px 18px 0 18px;
}
}
.table-card {
border-radius: 8px;
::v-deep .el-card__body {
padding: 18px;
}
}
.table-header {
background-color: #f5f7fa !important;
color: #606266;
font-weight: 600;
text-align: center;
}
::v-deep .el-table {
th {
background-color: #f5f7fa;
color: #606266;
font-weight: 600;
text-align: center;
}
td {
padding: 12px 0;
}
.el-table__body tr:hover > td {
background-color: #f5f7fa !important;
}
}
::v-deep .el-pagination {
padding: 0;
text-align: right;
}
::v-deep .el-button--small {
padding: 8px 15px;
font-size: 13px;
}
</style>

View File

@@ -1,274 +1,241 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item :label="$t('monitor.logininfor.670912-0')" prop="ipaddr">
<el-input
v-model="queryParams.ipaddr"
:placeholder="$t('monitor.logininfor.670912-1')"
clearable
style="width: 240px;"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item :label="$t('monitor.logininfor.670912-2')" prop="userName">
<el-input
v-model="queryParams.userName"
:placeholder="$t('monitor.logininfor.670912-3')"
clearable
style="width: 240px;"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item :label="$t('monitor.logininfor.670912-4')" prop="status">
<el-select
v-model="queryParams.status"
:placeholder="$t('monitor.logininfor.670912-5')"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dict.type.sys_common_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('monitor.logininfor.670912-6')">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
:start-placeholder="$t('monitor.logininfor.670912-7')"
:end-placeholder="$t('monitor.logininfor.670912-8')"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
</el-form-item>
</el-form>
<div class="app-container">
<el-card shadow="never" class="search-card">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item :label="$t('monitor.logininfor.670912-0')" prop="ipaddr">
<el-input v-model="queryParams.ipaddr" :placeholder="$t('monitor.logininfor.670912-1')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('monitor.logininfor.670912-2')" prop="userName">
<el-input v-model="queryParams.userName" :placeholder="$t('monitor.logininfor.670912-3')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('monitor.logininfor.670912-4')" prop="status">
<el-select v-model="queryParams.status" :placeholder="$t('monitor.logininfor.670912-5')" clearable style="width: 240px">
<el-option v-for="dict in dict.type.sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('monitor.logininfor.670912-6')">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
:start-placeholder="$t('monitor.logininfor.670912-7')"
:end-placeholder="$t('monitor.logininfor.670912-8')"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="small"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['monitor:logininfor:remove']"
>{{ $t('del') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="small"
@click="handleClean"
v-hasPermi="['monitor:logininfor:remove']"
>{{ $t('clean') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-unlock"
size="small"
:disabled="single"
@click="handleUnlock"
v-hasPermi="['monitor:logininfor:unlock']"
>{{ $t('monitor.logininfor.670912-9') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="small"
@click="handleExport"
v-hasPermi="['monitor:logininfor:export']"
>{{ $t('export') }}</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:logininfor:remove']">{{ $t('del') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="small" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']">{{ $t('clean') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-unlock" size="small" :disabled="single" @click="handleUnlock" v-hasPermi="['monitor:logininfor:unlock']">
{{ $t('monitor.logininfor.670912-9') }}
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['monitor:logininfor:export']">{{ $t('export') }}</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table ref="tables" v-loading="loading" :data="list" :border="false" header-cell-class-name="table-header" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column :label="$t('monitor.logininfor.670912-10')" align="center" prop="infoId" />
<el-table-column :label="$t('monitor.logininfor.670912-2')" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
<el-table-column :label="$t('monitor.logininfor.670912-0')" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
<el-table-column :label="$t('monitor.logininfor.670912-11')" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
<el-table-column :label="$t('monitor.logininfor.670912-12')" align="center" prop="browser" :show-overflow-tooltip="true" />
<el-table-column :label="$t('monitor.logininfor.670912-13')" align="center" prop="os" />
<el-table-column :label="$t('monitor.logininfor.670912-4')" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column :label="$t('monitor.logininfor.670912-14')" align="center" prop="msg" />
<el-table-column :label="$t('monitor.logininfor.670912-6')" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.loginTime) }}</span>
</template>
</el-table-column>
</el-table>
<el-table
ref="tables"
v-loading="loading"
:data="list"
:border="false"
header-cell-class-name="table-header"
@selection-change="handleSelectionChange"
:default-sort="defaultSort"
@sort-change="handleSortChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column :label="$t('monitor.logininfor.670912-10')" align="center" prop="infoId" />
<el-table-column :label="$t('monitor.logininfor.670912-2')" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
<el-table-column :label="$t('monitor.logininfor.670912-0')" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
<el-table-column :label="$t('monitor.logininfor.670912-11')" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
<el-table-column :label="$t('monitor.logininfor.670912-12')" align="center" prop="browser" :show-overflow-tooltip="true" />
<el-table-column :label="$t('monitor.logininfor.670912-13')" align="center" prop="os" />
<el-table-column :label="$t('monitor.logininfor.670912-4')" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_common_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column :label="$t('monitor.logininfor.670912-14')" align="center" prop="msg" />
<el-table-column :label="$t('monitor.logininfor.670912-6')" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.loginTime) }}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
</el-card>
</div>
</template>
<script>
import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from "@/api/monitor/logininfor";
import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from '@/api/monitor/logininfor';
export default {
name: "Logininfor",
dicts: ['sys_common_status'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 选择用户名
selectName: "",
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 表格数据
list: [],
// 日期范围
dateRange: [],
// 默认排序
defaultSort: {prop: 'loginTime', order: 'descending'},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
ipaddr: undefined,
userName: undefined,
status: undefined
}
};
},
created() {
this.getList();
},
methods: {
/** 查询登录日志列表 */
getList() {
this.loading = true;
list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.list = response.rows;
this.total = response.total;
this.loading = false;
}
);
name: 'Logininfor',
dicts: ['sys_common_status'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 选择用户名
selectName: '',
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 表格数据
list: [],
// 日期范围
dateRange: [],
// 默认排序
defaultSort: { prop: 'loginTime', order: 'descending' },
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
ipaddr: undefined,
userName: undefined,
status: undefined,
},
};
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.queryParams.pageNum = 1;
this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
},
/** 多选框选中数据 */
handleSelectionChange(selection) {
this.ids = selection.map(item => item.infoId)
this.single = selection.length!=1
this.multiple = !selection.length
this.selectName = selection.map(item => item.userName);
},
/** 排序触发事件 */
handleSortChange(column, prop, order) {
this.queryParams.orderByColumn = column.prop;
this.queryParams.isAsc = column.order;
this.getList();
},
/** 删除按钮操作 */
handleDelete(row) {
const infoIds = row.infoId || this.ids;
this.$modal.confirm(this.$t('monitor.logininfor.670912-15', [infoIds])).then(function() {
return delLogininfor(infoIds);
}).then(() => {
created() {
this.getList();
this.$modal.msgSuccess(this.$t('delSuccess'));
}).catch(() => {});
},
/** 清空按钮操作 */
handleClean() {
this.$modal.confirm(this.$t('monitor.logininfor.670912-16')).then(function() {
return cleanLogininfor();
}).then(() => {
this.getList();
this.$modal.msgSuccess(this.$t('cleanSuccess'));
}).catch(() => {});
methods: {
/** 查询登录日志列表 */
getList() {
this.loading = true;
list(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
this.list = response.rows;
this.total = response.total;
this.loading = false;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm('queryForm');
this.queryParams.pageNum = 1;
this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order);
},
/** 多选框选中数据 */
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.infoId);
this.single = selection.length != 1;
this.multiple = !selection.length;
this.selectName = selection.map((item) => item.userName);
},
/** 排序触发事件 */
handleSortChange(column, prop, order) {
this.queryParams.orderByColumn = column.prop;
this.queryParams.isAsc = column.order;
this.getList();
},
/** 删除按钮操作 */
handleDelete(row) {
const infoIds = row.infoId || this.ids;
this.$modal
.confirm(this.$t('monitor.logininfor.670912-15', [infoIds]))
.then(function () {
return delLogininfor(infoIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess(this.$t('delSuccess'));
})
.catch(() => {});
},
/** 清空按钮操作 */
handleClean() {
this.$modal
.confirm(this.$t('monitor.logininfor.670912-16'))
.then(function () {
return cleanLogininfor();
})
.then(() => {
this.getList();
this.$modal.msgSuccess(this.$t('cleanSuccess'));
})
.catch(() => {});
},
/** 解锁按钮操作 */
handleUnlock() {
const username = this.selectName;
this.$modal
.confirm(this.$t('monitor.logininfor.670912-17', [username]))
.then(function () {
return unlockLogininfor(username);
})
.then(() => {
this.$modal.msgSuccess(this.$t('monitor.logininfor.670912-18', [username]));
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
'monitor/logininfor/export',
{
...this.queryParams,
},
`logininfor_${new Date().getTime()}.xlsx`
);
},
},
/** 解锁按钮操作 */
handleUnlock() {
const username = this.selectName;
this.$modal.confirm(this.$t('monitor.logininfor.670912-17', [username])).then(function() {
return unlockLogininfor(username);
}).then(() => {
this.$modal.msgSuccess(this.$t('monitor.logininfor.670912-18', [username]));
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('monitor/logininfor/export', {
...this.queryParams
}, `logininfor_${new Date().getTime()}.xlsx`)
}
}
};
</script>
</script>
<style lang="scss" scoped>
.table-header {
background-color: #f5f7fa !important;
color: #606266;
font-weight: 600;
text-align: center;
}
::v-deep .el-table {
th {
background-color: #f5f7fa;
background-color: #f5f7fa !important;
color: #606266;
font-weight: 600;
text-align: center;
}
td {
padding: 12px 0;
}
.el-table__body tr:hover > td {
background-color: #f5f7fa !important;
}
}
::v-deep .el-table {
th {
background-color: #f5f7fa;
color: #606266;
font-weight: 600;
text-align: center;
}
td {
padding: 12px 0;
}
.el-table__body tr:hover > td {
background-color: #f5f7fa !important;
}
}
.pagination-container {
@@ -279,7 +246,15 @@ export default {
}
::v-deep .el-pagination {
padding: 0;
text-align: right;
padding: 0;
text-align: right;
}
.search-card {
margin-bottom: 15px;
border-radius: 8px;
::v-deep .el-card__body {
padding: 18px 18px 0 18px;
}
}
</style>

View File

@@ -1,45 +1,49 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item :label="$t('online.093480-0')" prop="ipaddr">
<el-input v-model="queryParams.ipaddr" :placeholder="$t('online.093480-1')" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('online.093480-5')" prop="userName">
<el-input v-model="queryParams.userName" :placeholder="$t('online.093480-2')" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="list.slice((pageNum - 1) * pageSize, pageNum * pageSize)" style="width: 100%" :border="false">
<el-table-column :label="$t('online.093480-3')" type="index" align="center">
<template slot-scope="scope">
<span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('online.093480-4')" align="center" prop="tokenId" :show-overflow-tooltip="true" />
<el-table-column :label="$t('online.093480-5')" align="center" prop="userName" :show-overflow-tooltip="true" />
<el-table-column :label="$t('online.093480-6')" align="center" prop="deptName" />
<el-table-column :label="$t('online.093480-7')" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
<el-table-column :label="$t('online.093480-8')" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
<el-table-column :label="$t('online.093480-9')" align="center" prop="browser" />
<el-table-column :label="$t('online.093480-10')" align="center" prop="os" />
<el-table-column :label="$t('online.093480-11')" align="center" prop="loginTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.loginTime) }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="small" type="text" icon="el-icon-delete" @click="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">{{ $t('online.093480-12') }}</el-button>
</template>
</el-table-column>
</el-table>
<el-card shadow="never" class="search-card">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item :label="$t('online.093480-0')" prop="ipaddr">
<el-input v-model="queryParams.ipaddr" :placeholder="$t('online.093480-1')" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('online.093480-5')" prop="userName">
<el-input v-model="queryParams.userName" :placeholder="$t('online.093480-2')" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card shadow="never" class="search-card">
<el-table v-loading="loading" :data="list.slice((pageNum - 1) * pageSize, pageNum * pageSize)" style="width: 100%" :border="false">
<el-table-column :label="$t('online.093480-3')" type="index" align="center">
<template slot-scope="scope">
<span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('online.093480-4')" align="center" prop="tokenId" :show-overflow-tooltip="true" />
<el-table-column :label="$t('online.093480-5')" align="center" prop="userName" :show-overflow-tooltip="true" />
<el-table-column :label="$t('online.093480-6')" align="center" prop="deptName" />
<el-table-column :label="$t('online.093480-7')" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
<el-table-column :label="$t('online.093480-8')" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
<el-table-column :label="$t('online.093480-9')" align="center" prop="browser" />
<el-table-column :label="$t('online.093480-10')" align="center" prop="os" />
<el-table-column :label="$t('online.093480-11')" align="center" prop="loginTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.loginTime) }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="small" type="text" icon="el-icon-delete" @click="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">{{ $t('online.093480-12') }}</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
</div>
<div class="pagination-container">
<pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
</div>
</el-card>
</div>
</template>
@@ -106,11 +110,10 @@ export default {
</script>
<style lang="scss" scoped>
.table-header {
background-color: #f5f7fa !important;
color: #606266;
font-weight: 600;
text-align: center;
.app-container {
padding: 20px;
min-height: 100vh;
background-color: #f5f7fa;
}
::v-deep .el-table {
@@ -141,4 +144,12 @@ export default {
padding: 0;
text-align: right;
}
.search-card {
margin-bottom: 15px;
border-radius: 8px;
::v-deep .el-card__body {
padding: 18px 18px 0 18px;
}
}
</style>

View File

@@ -1,136 +1,148 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item :label="$t('operlog.874509-10')" prop="operIp">
<el-input v-model="queryParams.operIp" :placeholder="$t('operlog.874509-10')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('operlog.874509-0')" prop="title">
<el-input v-model="queryParams.title" :placeholder="$t('operlog.874509-1')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('operlog.874509-2')" prop="operName">
<el-input v-model="queryParams.operName" :placeholder="$t('operlog.874509-3')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('system.notice.670989-4')" prop="businessType">
<el-select v-model="queryParams.businessType" :placeholder="$t('operlog.874509-4')" clearable style="width: 240px">
<el-option v-for="dict in dict.type.sys_oper_type" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('status')" prop="status">
<el-select v-model="queryParams.status" :placeholder="$t('operlog.874509-5')" clearable style="width: 240px">
<el-option v-for="dict in dict.type.sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('operlog.874509-6')">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
range-separator="-"
:start-placeholder="$t('system.dict.index.880996-3')"
:end-placeholder="$t('system.dict.index.880996-4')"
:default-time="['00:00:00', '23:59:59']"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:operlog:remove']">{{ $t('del') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="small" @click="handleClean" v-hasPermi="['monitor:operlog:remove']">{{ $t('operlog.874509-7') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['monitor:operlog:export']">{{ $t('export') }}</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table ref="tables" v-loading="loading" :data="list" :border="false" header-cell-class-name="table-header" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column :label="$t('operlog.874509-8')" align="center" prop="operId" />
<el-table-column :label="$t('operlog.874509-0')" align="center" prop="title" :show-overflow-tooltip="true" />
<el-table-column :label="$t('operlog.874509-4')" align="center" prop="businessType">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_oper_type" :value="scope.row.businessType" />
</template>
</el-table-column>
<el-table-column :label="$t('operlog.874509-2')" align="center" prop="operName" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
<el-table-column :label="$t('operlog.874509-10')" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
<el-table-column :label="$t('operlog.874509-11')" align="center" prop="operLocation" :show-overflow-tooltip="true" />
<el-table-column :label="$t('operlog.874509-30')" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_common_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column :label="$t('operlog.874509-12')" align="center" prop="operTime" width="160" sortable="custom" :sort-orders="['descending', 'ascending']">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.operTime) }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('operlog.874509-31')" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
<template slot-scope="scope">
<span>{{ scope.row.costTime }}ms</span>
</template>
</el-table-column>
<el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="small" type="text" icon="el-icon-view" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">{{ $t('operlog.874509-13') }}</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
<!-- 操作日志详细 -->
<el-dialog :title="$t('operlog.874509-14')" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" label-width="100px" size="small">
<el-row>
<el-col :span="12">
<el-form-item :label="$t('operlog.874509-15')">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
<el-form-item :label="$t('operlog.874509-16')">{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('operlog.874509-17')">{{ form.operUrl }}</el-form-item>
<el-form-item :label="$t('operlog.874509-18')">{{ form.requestMethod }}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('operlog.874509-19')">{{ form.method }}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('operlog.874509-20')">{{ form.operParam }}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('operlog.874509-21')">{{ form.jsonResult }}</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('operlog.874509-22')">
<div v-if="form.status === 0">{{ $t('operlog.874509-23') }}</div>
<div v-else-if="form.status === 1">{{ $t('operlog.874509-24') }}</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('operlog.874509-31')">{{ form.costTime }}ms</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('operlog.874509-25')">{{ parseTime(form.operTime) }}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('operlog.874509-26')" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
</el-col>
</el-row>
<el-card shadow="never" class="search-card">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item :label="$t('operlog.874509-10')" prop="operIp">
<el-input v-model="queryParams.operIp" :placeholder="$t('operlog.874509-10')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('operlog.874509-0')" prop="title">
<el-input v-model="queryParams.title" :placeholder="$t('operlog.874509-1')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('operlog.874509-2')" prop="operName">
<el-input v-model="queryParams.operName" :placeholder="$t('operlog.874509-3')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('system.notice.670989-4')" prop="businessType">
<el-select v-model="queryParams.businessType" :placeholder="$t('operlog.874509-4')" clearable style="width: 240px">
<el-option v-for="dict in dict.type.sys_oper_type" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('status')" prop="status">
<el-select v-model="queryParams.status" :placeholder="$t('operlog.874509-5')" clearable style="width: 240px">
<el-option v-for="dict in dict.type.sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('operlog.874509-6')">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
range-separator="-"
:start-placeholder="$t('system.dict.index.880996-3')"
:end-placeholder="$t('system.dict.index.880996-4')"
:default-time="['00:00:00', '23:59:59']"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">{{ $t('close') }}</el-button>
</el-card>
<el-card shadow="never" class="search-card">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:operlog:remove']">{{ $t('del') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="small" @click="handleClean" v-hasPermi="['monitor:operlog:remove']">{{ $t('operlog.874509-7') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['monitor:operlog:export']">{{ $t('export') }}</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table
ref="tables"
v-loading="loading"
:data="list"
:border="false"
header-cell-class-name="table-header"
@selection-change="handleSelectionChange"
:default-sort="defaultSort"
@sort-change="handleSortChange"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column :label="$t('operlog.874509-8')" align="center" prop="operId" />
<el-table-column :label="$t('operlog.874509-0')" align="center" prop="title" :show-overflow-tooltip="true" />
<el-table-column :label="$t('operlog.874509-4')" align="center" prop="businessType">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_oper_type" :value="scope.row.businessType" />
</template>
</el-table-column>
<el-table-column :label="$t('operlog.874509-2')" align="center" prop="operName" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
<el-table-column :label="$t('operlog.874509-10')" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
<el-table-column :label="$t('operlog.874509-11')" align="center" prop="operLocation" :show-overflow-tooltip="true" />
<el-table-column :label="$t('operlog.874509-30')" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_common_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column :label="$t('operlog.874509-12')" align="center" prop="operTime" width="160" sortable="custom" :sort-orders="['descending', 'ascending']">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.operTime) }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('operlog.874509-31')" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
<template slot-scope="scope">
<span>{{ scope.row.costTime }}ms</span>
</template>
</el-table-column>
<el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="small" type="text" icon="el-icon-view" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">{{ $t('operlog.874509-13') }}</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
</el-dialog>
<!-- 操作日志详细 -->
<el-dialog :title="$t('operlog.874509-14')" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" label-width="100px" size="small">
<el-row>
<el-col :span="12">
<el-form-item :label="$t('operlog.874509-15')">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
<el-form-item :label="$t('operlog.874509-16')">{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('operlog.874509-17')">{{ form.operUrl }}</el-form-item>
<el-form-item :label="$t('operlog.874509-18')">{{ form.requestMethod }}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('operlog.874509-19')">{{ form.method }}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('operlog.874509-20')">{{ form.operParam }}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('operlog.874509-21')">{{ form.jsonResult }}</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('operlog.874509-22')">
<div v-if="form.status === 0">{{ $t('operlog.874509-23') }}</div>
<div v-else-if="form.status === 1">{{ $t('operlog.874509-24') }}</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('operlog.874509-31')">{{ form.costTime }}ms</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('operlog.874509-25')">{{ parseTime(form.operTime) }}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('operlog.874509-26')" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">{{ $t('close') }}</el-button>
</div>
</el-dialog>
</el-card>
</div>
</template>
@@ -260,31 +272,29 @@ export default {
};
</script>
</script>
<style lang="scss" scoped>
.table-header {
background-color: #f5f7fa !important;
color: #606266;
font-weight: 600;
text-align: center;
}
::v-deep .el-table {
th {
background-color: #f5f7fa;
background-color: #f5f7fa !important;
color: #606266;
font-weight: 600;
text-align: center;
}
td {
padding: 12px 0;
}
.el-table__body tr:hover > td {
background-color: #f5f7fa !important;
}
}
::v-deep .el-table {
th {
background-color: #f5f7fa;
color: #606266;
font-weight: 600;
text-align: center;
}
td {
padding: 12px 0;
}
.el-table__body tr:hover > td {
background-color: #f5f7fa !important;
}
}
.pagination-container {
@@ -295,7 +305,15 @@ export default {
}
::v-deep .el-pagination {
padding: 0;
text-align: right;
padding: 0;
text-align: right;
}
.search-card {
margin-bottom: 15px;
border-radius: 8px;
::v-deep .el-card__body {
padding: 18px 18px 0 18px;
}
}
</style>

View File

@@ -1,82 +1,88 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item :label="$t('gen.import.832346-1')" prop="tableName">
<el-input v-model="queryParams.tableName" :placeholder="$t('gen.import.832346-2')" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('gen.import.832346-3')" prop="tableComment">
<el-input v-model="queryParams.tableComment" :placeholder="$t('gen.import.832346-4')" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('creatTime')">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
:start-placeholder="$t('system.job.log.085689-5')"
:end-placeholder="$t('system.job.log.085689-5')"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
</el-form-item>
</el-form>
<!-- 搜索栏 - 上栏 -->
<el-card shadow="never" class="search-card">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item :label="$t('gen.import.832346-1')" prop="tableName">
<el-input v-model="queryParams.tableName" :placeholder="$t('gen.import.832346-2')" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('gen.import.832346-3')" prop="tableComment">
<el-input v-model="queryParams.tableComment" :placeholder="$t('gen.import.832346-4')" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('creatTime')">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
:start-placeholder="$t('system.job.log.085689-5')"
:end-placeholder="$t('system.job.log.085689-6')"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
</el-form-item>
</el-form>
</el-card>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-download" size="small" :disabled="multiple" @click="handleGenTable" v-hasPermi="['tool:gen:code']">{{ $t('build.index.2090840-3') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="small" @click="openCreateTable" v-hasRole="['admin']">{{ $t('add') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="info" plain icon="el-icon-upload" size="small" @click="openImportTable" v-hasPermi="['tool:gen:import']">{{ $t('import') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleEditTable" v-hasPermi="['tool:gen:edit']">{{ $t('update') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['tool:gen:remove']">{{ $t('del') }}</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 操作按钮和数据表格 - 下栏 -->
<el-card shadow="never" class="table-card">
<el-row :gutter="10" style="margin-bottom: 15px">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-download" size="small" :disabled="multiple" @click="handleGenTable" v-hasPermi="['tool:gen:code']">{{ $t('build.index.2090840-3') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="small" @click="openCreateTable" v-hasRole="['admin']">{{ $t('add') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="info" plain icon="el-icon-upload" size="small" @click="openImportTable" v-hasPermi="['tool:gen:import']">{{ $t('import') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleEditTable" v-hasPermi="['tool:gen:edit']">{{ $t('update') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['tool:gen:remove']">{{ $t('del') }}</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange" :border="false">
<el-table-column type="selection" align="center" width="55"></el-table-column>
<el-table-column :label="$t('system.cache.list.093478-1')" type="index" width="50" align="center">
<template slot-scope="scope">
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('gen.import.832346-1')" align="center" prop="tableName" :show-overflow-tooltip="true" width="120" />
<el-table-column :label="$t('gen.import.832346-3')" align="center" prop="tableComment" :show-overflow-tooltip="true" width="120" />
<el-table-column :label="$t('gen.index.467583-1')" align="center" prop="className" :show-overflow-tooltip="true" width="120" />
<el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="160" />
<el-table-column :label="$t('updateTime')" align="center" prop="updateTime" width="160" />
<el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="text" size="small" icon="el-icon-view" @click="handlePreview(scope.row)" v-hasPermi="['tool:gen:preview']">{{ $t('preview') }}</el-button>
<el-button type="text" size="small" icon="el-icon-edit" @click="handleEditTable(scope.row)" v-hasPermi="['tool:gen:edit']">{{ $t('edit') }}</el-button>
<el-button type="text" size="small" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['tool:gen:remove']">{{ $t('del') }}</el-button>
<el-button type="text" size="small" icon="el-icon-refresh" @click="handleSynchDb(scope.row)" v-hasPermi="['tool:gen:edit']">{{ $t('gen.index.467583-3') }}</el-button>
<el-button type="text" size="small" icon="el-icon-download" @click="handleGenTable(scope.row)" v-hasPermi="['tool:gen:code']">{{ $t('gen.index.467583-4') }}</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
<!-- Preview -->
<el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
<el-tabs v-model="preview.activeName">
<el-tab-pane v-for="(value, key) in preview.data" :label="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))" :name="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))" :key="key">
<el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="value" v-clipboard:success="clipboardSuccess" style="float: right">{{ $t('device.device-edit.148398-55') }}</el-link>
<pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
</el-tab-pane>
</el-tabs>
</el-dialog>
<el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange" :border="false" header-cell-class-name="table-header">
<el-table-column type="selection" align="center" width="55"></el-table-column>
<el-table-column :label="$t('system.cache.list.093478-1')" type="index" width="50" align="center">
<template slot-scope="scope">
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('gen.import.832346-1')" align="center" prop="tableName" :show-overflow-tooltip="true" width="120" />
<el-table-column :label="$t('gen.import.832346-3')" align="center" prop="tableComment" :show-overflow-tooltip="true" width="120" />
<el-table-column :label="$t('gen.index.467583-1')" align="center" prop="className" :show-overflow-tooltip="true" width="120" />
<el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="160" />
<el-table-column :label="$t('updateTime')" align="center" prop="updateTime" width="160" />
<el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="text" size="small" icon="el-icon-view" @click="handlePreview(scope.row)" v-hasPermi="['tool:gen:preview']">{{ $t('preview') }}</el-button>
<el-button type="text" size="small" icon="el-icon-edit" @click="handleEditTable(scope.row)" v-hasPermi="['tool:gen:edit']">{{ $t('edit') }}</el-button>
<el-button type="text" size="small" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['tool:gen:remove']">{{ $t('del') }}</el-button>
<el-button type="text" size="small" icon="el-icon-refresh" @click="handleSynchDb(scope.row)" v-hasPermi="['tool:gen:edit']">{{ $t('gen.index.467583-3') }}</el-button>
<el-button type="text" size="small" icon="el-icon-download" @click="handleGenTable(scope.row)" v-hasPermi="['tool:gen:code']">{{ $t('gen.index.467583-4') }}</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
<!-- Preview -->
<el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
<el-tabs v-model="preview.activeName">
<el-tab-pane v-for="(value, key) in preview.data" :label="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))" :name="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))" :key="key">
<el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="value" v-clipboard:success="clipboardSuccess" style="float: right">{{ $t('device.device-edit.148398-55') }}</el-link>
<pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
</el-tab-pane>
</el-tabs>
</el-dialog>
</el-card>
<import-table ref="import" @ok="handleQuery" />
<create-table ref="create" @ok="handleQuery" />
</div>
@@ -255,31 +261,52 @@ export default {
};
</script>
</script>
<style lang="scss" scoped>
.table-header {
background-color: #f5f7fa !important;
color: #606266;
font-weight: 600;
text-align: center;
.app-container {
padding: 20px;
min-height: 100vh;
background-color: #f5f7fa;
}
::v-deep .el-table {
th {
background-color: #f5f7fa;
.search-card {
margin-bottom: 15px;
border-radius: 8px;
::v-deep .el-card__body {
padding: 18px 18px 0 18px;
}
}
.table-card {
border-radius: 8px;
::v-deep .el-card__body {
padding: 18px;
}
}
.table-header {
background-color: #f5f7fa !important;
color: #606266;
font-weight: 600;
text-align: center;
}
td {
padding: 12px 0;
}
.el-table__body tr:hover > td {
background-color: #f5f7fa !important;
}
}
::v-deep .el-table {
th {
background-color: #f5f7fa;
color: #606266;
font-weight: 600;
text-align: center;
}
td {
padding: 12px 0;
}
.el-table__body tr:hover > td {
background-color: #f5f7fa !important;
}
}
.pagination-container {
@@ -290,7 +317,12 @@ export default {
}
::v-deep .el-pagination {
padding: 0;
text-align: right;
padding: 0;
text-align: right;
}
::v-deep .el-button--small {
padding: 8px 15px;
font-size: 13px;
}
</style>