|
@@ -3,14 +3,15 @@
|
|
|
<!-- 筛选项 -->
|
|
|
<el-form ref="ruleForm" inline>
|
|
|
<el-form-item label="红名单级别">
|
|
|
- <dg-select v-model="form.level.value" placeholder="请选择用户类型" enum="ListLevelEnum" clearable> </dg-select>
|
|
|
+ <dg-select v-model="form.level.value" placeholder="请选择红名单级别" enum="ListLevelEnum" clearable>
|
|
|
+ </dg-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="应用系统名称">
|
|
|
<el-input v-model="form.appName.value" placeholder="请输入应用系统名称" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="应用系统编号">
|
|
|
+ <!-- <el-form-item label="应用系统编号">
|
|
|
<el-input v-model="form.appCode.value" placeholder="请输入应用系统编号" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
+ </el-form-item> -->
|
|
|
<el-form-item>
|
|
|
<dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
|
|
|
<dg-button type="primary" @click="handleReset" icon="el-icon-refresh-right">重置</dg-button>
|
|
@@ -22,18 +23,44 @@
|
|
|
<dg-button type="primary" @click="handleSetListLevel" icon="el-icon-setting">批量设置名单级别</dg-button>
|
|
|
<dg-button type="primary" @click="handleBatchRemove" icon="el-icon-remove-outline">批量移除</dg-button>
|
|
|
</dg-row>
|
|
|
- <vxe-grid v-bind="gridOptions" ref="vxeGrid" :data="tableData" @checkbox-change="selectChangeEvent">
|
|
|
- <template #level_column="{ row }">
|
|
|
- {{ levelToLabel(row.level) }}
|
|
|
- </template>
|
|
|
- <template #operate_header="{ row }">
|
|
|
- <div class="u-table__operation">
|
|
|
- <el-tooltip content="移除" effect="dark" placement="top-end">
|
|
|
- <i class="el-icon-remove-outline" @click="handleRemove(row)"></i>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </vxe-grid>
|
|
|
+ <vxe-table ref="vxeGrid" :data="tableData" v-bind="gridOptions">
|
|
|
+ <vxe-table-column type="checkbox" width="60" align="center">
|
|
|
+ <template #header="row">
|
|
|
+ <span class="custom-checkbox">
|
|
|
+ <el-checkbox
|
|
|
+ :indeterminate="row.indeterminate"
|
|
|
+ v-model="row.checked"
|
|
|
+ @change="handleToggleAllCheck"
|
|
|
+ ></el-checkbox>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template #checkbox="scoped">
|
|
|
+ <span class="custom-checkbox">
|
|
|
+ <el-checkbox
|
|
|
+ :indeterminate="scoped.indeterminate"
|
|
|
+ v-model="scoped.checked"
|
|
|
+ @change="handleToggleCheck(scoped.row)"
|
|
|
+ ></el-checkbox>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </vxe-table-column>
|
|
|
+ <vxe-table-column type="seq" width="60" align="center" title="序号"></vxe-table-column>
|
|
|
+ <vxe-table-column align="center" title="应用功能名称" field="label" :treeNode="true"></vxe-table-column>
|
|
|
+ <vxe-table-column align="center" title="红名单级别" field="level">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ levelToLabel(row.level) }}
|
|
|
+ </template>
|
|
|
+ </vxe-table-column>
|
|
|
+ <vxe-table-column align="center" title="操作" field="operate">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div class="u-table__operation">
|
|
|
+ <el-tooltip content="移除" effect="dark" placement="top-end">
|
|
|
+ <i class="el-icon-remove-outline" @click="handleRemove(row)"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </vxe-table-column>
|
|
|
+ </vxe-table>
|
|
|
<!-- 分页器 -->
|
|
|
<div class="pagination-section">
|
|
|
<el-pagination
|
|
@@ -41,7 +68,7 @@
|
|
|
@current-change="handleCurrentChange"
|
|
|
:current-page="currentPage"
|
|
|
:page-sizes="[10, 20, 30]"
|
|
|
- :page-size="size"
|
|
|
+ :page-size="pageSize"
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
:total="total"
|
|
|
>
|
|
@@ -59,6 +86,7 @@ import jzApi from '@/api/jz-base';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ a: '0',
|
|
|
form: {
|
|
|
level: {
|
|
|
value: '',
|
|
@@ -76,7 +104,7 @@ export default {
|
|
|
// 分页器
|
|
|
currentPage: 1,
|
|
|
total: 0,
|
|
|
- size: 10,
|
|
|
+ pageSize: 10,
|
|
|
// 数据
|
|
|
tableData: [],
|
|
|
gridOptions: {
|
|
@@ -87,23 +115,17 @@ export default {
|
|
|
checkboxConfig: {
|
|
|
// 设置复选框支持分页勾选,需要设置 rowId 行数据主键
|
|
|
reserve: true
|
|
|
- },
|
|
|
- columns: [
|
|
|
- { type: 'checkbox', width: 50, align: 'center' },
|
|
|
- { type: 'seq', width: 60, align: 'center', title: '序号' },
|
|
|
- { title: '应用功能名称', field: 'label', treeNode: true, align: 'center' },
|
|
|
- { field: 'level', title: '红名单级别', align: 'center', slots: { default: 'level_column' } },
|
|
|
- {
|
|
|
- field: 'address',
|
|
|
- title: '操作',
|
|
|
- slots: { default: 'operate_header' },
|
|
|
- align: 'center'
|
|
|
- }
|
|
|
- ]
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleToggleCheck(row) {
|
|
|
+ this.$refs.vxeGrid.toggleCheckboxRow(row);
|
|
|
+ },
|
|
|
+ handleToggleAllCheck() {
|
|
|
+ this.$refs.vxeGrid.toggleAllCheckboxRow();
|
|
|
+ },
|
|
|
/**
|
|
|
* @description:查询
|
|
|
*/
|
|
@@ -200,10 +222,14 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
|
|
|
- handleSizeChange(val) {},
|
|
|
- handleCurrentChange(val) {},
|
|
|
- selectChangeEvent({ records, reserves, indeterminates, checked, row }) {
|
|
|
- console.info(`勾选${records.length}个树形节点`, records);
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.pageSize = val;
|
|
|
+ this.currentPage = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.currentPage = val;
|
|
|
+ this.getList();
|
|
|
},
|
|
|
/**
|
|
|
* 获取列表
|
|
@@ -211,7 +237,7 @@ export default {
|
|
|
getList() {
|
|
|
const params = {
|
|
|
page: this.currentPage,
|
|
|
- size: this.size,
|
|
|
+ size: this.pageSize,
|
|
|
searchCondition: this.form
|
|
|
};
|
|
|
|