9 changed files with 2893 additions and 2911 deletions
File diff suppressed because it is too large
@ -1,247 +1,247 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> |
|||
<el-form-item label="登录地址" prop="ipaddr"> |
|||
<el-input |
|||
v-model="queryParams.ipaddr" |
|||
placeholder="请输入登录地址" |
|||
clearable |
|||
style="width: 240px;" |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="用户名称" prop="userName"> |
|||
<el-input |
|||
v-model="queryParams.userName" |
|||
placeholder="请输入用户名称" |
|||
clearable |
|||
style="width: 240px;" |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="状态" prop="status"> |
|||
<el-select |
|||
v-model="queryParams.status" |
|||
placeholder="登录状态" |
|||
clearable |
|||
size="small" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="登录时间"> |
|||
<el-date-picker |
|||
v-model="dateRange" |
|||
size="small" |
|||
style="width: 240px" |
|||
value-format="yyyy-MM-dd" |
|||
type="daterange" |
|||
range-separator="-" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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="mini" |
|||
:disabled="multiple" |
|||
@click="handleDelete" |
|||
v-hasPermi="['monitor:logininfor:remove']" |
|||
>删除</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="danger" |
|||
plain |
|||
icon="el-icon-delete" |
|||
size="mini" |
|||
@click="handleClean" |
|||
v-hasPermi="['monitor:logininfor:remove']" |
|||
>清空</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="warning" |
|||
plain |
|||
icon="el-icon-download" |
|||
size="mini" |
|||
:loading="exportLoading" |
|||
@click="handleExport" |
|||
v-hasPermi="['monitor:logininfor: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" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column label="访问编号" align="center" prop="infoId" /> |
|||
<el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" /> |
|||
<el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="操作系统" align="center" prop="os" /> |
|||
<el-table-column label="登录状态" align="center" prop="status" :formatter="statusFormat" /> |
|||
<el-table-column label="操作信息" align="center" prop="msg" /> |
|||
<el-table-column label="登录日期" 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> |
|||
</template> |
|||
|
|||
<script> |
|||
import { list, delLogininfor, cleanLogininfor, exportLogininfor } from "@/api/monitor/logininfor"; |
|||
|
|||
export default { |
|||
name: "Logininfor", |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 导出遮罩层 |
|||
exportLoading: false, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 表格数据 |
|||
list: [], |
|||
// 状态数据字典 |
|||
statusOptions: [], |
|||
// 日期范围 |
|||
dateRange: [], |
|||
// 默认排序 |
|||
defaultSort: {prop: 'loginTime', order: 'descending'}, |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ipaddr: undefined, |
|||
userName: undefined, |
|||
status: undefined |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.getDicts("sys_common_status").then(response => { |
|||
this.statusOptions = response.data; |
|||
}); |
|||
}, |
|||
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; |
|||
} |
|||
); |
|||
}, |
|||
// 登录状态字典翻译 |
|||
statusFormat(row, column) { |
|||
return this.selectDictLabel(this.statusOptions, row.status); |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.queryParams.pageNum = 1; |
|||
this.getList(); |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.dateRange = []; |
|||
this.resetForm("queryForm"); |
|||
this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order) |
|||
this.handleQuery(); |
|||
}, |
|||
/** 多选框选中数据 */ |
|||
handleSelectionChange(selection) { |
|||
this.ids = selection.map(item => item.infoId) |
|||
this.multiple = !selection.length |
|||
}, |
|||
/** 排序触发事件 */ |
|||
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.$confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return delLogininfor(infoIds); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
}, |
|||
/** 清空按钮操作 */ |
|||
handleClean() { |
|||
this.$confirm('是否确认清空所有登录日志数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return cleanLogininfor(); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("清空成功"); |
|||
}).catch(() => {}); |
|||
}, |
|||
/** 导出按钮操作 */ |
|||
handleExport() { |
|||
const queryParams = this.queryParams; |
|||
this.$confirm('是否确认导出所有操作日志数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(() => { |
|||
this.exportLoading = true; |
|||
return exportLogininfor(queryParams); |
|||
}).then(response => { |
|||
this.download(response.msg); |
|||
this.exportLoading = false; |
|||
}).catch(() => {}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="app-container"> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> |
|||
<el-form-item label="登录地址" prop="ipaddr"> |
|||
<el-input |
|||
v-model="queryParams.ipaddr" |
|||
placeholder="请输入登录地址" |
|||
clearable |
|||
style="width: 240px;" |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="用户名称" prop="userName"> |
|||
<el-input |
|||
v-model="queryParams.userName" |
|||
placeholder="请输入用户名称" |
|||
clearable |
|||
style="width: 240px;" |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="状态" prop="status"> |
|||
<el-select |
|||
v-model="queryParams.status" |
|||
placeholder="登录状态" |
|||
clearable |
|||
size="small" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="登录时间"> |
|||
<el-date-picker |
|||
v-model="dateRange" |
|||
size="small" |
|||
style="width: 240px" |
|||
value-format="yyyy-MM-dd" |
|||
type="daterange" |
|||
range-separator="-" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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="mini" |
|||
:disabled="multiple" |
|||
@click="handleDelete" |
|||
v-hasPermi="['monitor:logininfor:remove']" |
|||
>删除</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="danger" |
|||
plain |
|||
icon="el-icon-delete" |
|||
size="mini" |
|||
@click="handleClean" |
|||
v-hasPermi="['monitor:logininfor:remove']" |
|||
>清空</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="warning" |
|||
plain |
|||
icon="el-icon-download" |
|||
size="mini" |
|||
:loading="exportLoading" |
|||
@click="handleExport" |
|||
v-hasPermi="['monitor:logininfor: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" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column label="访问编号" align="center" prop="infoId" /> |
|||
<el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" /> |
|||
<el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="操作系统" align="center" prop="os" /> |
|||
<el-table-column label="登录状态" align="center" prop="status"> |
|||
<template slot-scope="scope"> |
|||
<dict-tag :options="statusOptions" :value="scope.row.status"/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作信息" align="center" prop="msg" /> |
|||
<el-table-column label="登录日期" 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> |
|||
</template> |
|||
|
|||
<script> |
|||
import { list, delLogininfor, cleanLogininfor, exportLogininfor } from "@/api/monitor/logininfor"; |
|||
|
|||
export default { |
|||
name: "Logininfor", |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 导出遮罩层 |
|||
exportLoading: false, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 表格数据 |
|||
list: [], |
|||
// 状态数据字典 |
|||
statusOptions: [], |
|||
// 日期范围 |
|||
dateRange: [], |
|||
// 默认排序 |
|||
defaultSort: {prop: 'loginTime', order: 'descending'}, |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ipaddr: undefined, |
|||
userName: undefined, |
|||
status: undefined |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.getDicts("sys_common_status").then(response => { |
|||
this.statusOptions = response.data; |
|||
}); |
|||
}, |
|||
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.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order) |
|||
this.handleQuery(); |
|||
}, |
|||
/** 多选框选中数据 */ |
|||
handleSelectionChange(selection) { |
|||
this.ids = selection.map(item => item.infoId) |
|||
this.multiple = !selection.length |
|||
}, |
|||
/** 排序触发事件 */ |
|||
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.$confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return delLogininfor(infoIds); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
}, |
|||
/** 清空按钮操作 */ |
|||
handleClean() { |
|||
this.$confirm('是否确认清空所有登录日志数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return cleanLogininfor(); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("清空成功"); |
|||
}).catch(() => {}); |
|||
}, |
|||
/** 导出按钮操作 */ |
|||
handleExport() { |
|||
const queryParams = this.queryParams; |
|||
this.$confirm('是否确认导出所有操作日志数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(() => { |
|||
this.exportLoading = true; |
|||
return exportLogininfor(queryParams); |
|||
}).then(response => { |
|||
this.download(response.msg); |
|||
this.exportLoading = false; |
|||
}).catch(() => {}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
|
@ -1,335 +1,339 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> |
|||
<el-form-item label="系统模块" prop="title"> |
|||
<el-input |
|||
v-model="queryParams.title" |
|||
placeholder="请输入系统模块" |
|||
clearable |
|||
style="width: 240px;" |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="操作人员" prop="operName"> |
|||
<el-input |
|||
v-model="queryParams.operName" |
|||
placeholder="请输入操作人员" |
|||
clearable |
|||
style="width: 240px;" |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="类型" prop="businessType"> |
|||
<el-select |
|||
v-model="queryParams.businessType" |
|||
placeholder="操作类型" |
|||
clearable |
|||
size="small" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="dict in typeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="状态" prop="status"> |
|||
<el-select |
|||
v-model="queryParams.status" |
|||
placeholder="操作状态" |
|||
clearable |
|||
size="small" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="操作时间"> |
|||
<el-date-picker |
|||
v-model="dateRange" |
|||
size="small" |
|||
style="width: 240px" |
|||
value-format="yyyy-MM-dd" |
|||
type="daterange" |
|||
range-separator="-" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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="mini" |
|||
:disabled="multiple" |
|||
@click="handleDelete" |
|||
v-hasPermi="['monitor:operlog:remove']" |
|||
>删除</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="danger" |
|||
plain |
|||
icon="el-icon-delete" |
|||
size="mini" |
|||
@click="handleClean" |
|||
v-hasPermi="['monitor:operlog:remove']" |
|||
>清空</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="warning" |
|||
plain |
|||
icon="el-icon-download" |
|||
size="mini" |
|||
:loading="exportLoading" |
|||
@click="handleExport" |
|||
v-hasPermi="['monitor:operlog: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" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column label="日志编号" align="center" prop="operId" /> |
|||
<el-table-column label="系统模块" align="center" prop="title" /> |
|||
<el-table-column label="操作类型" align="center" prop="businessType" :formatter="typeFormat" /> |
|||
<el-table-column label="请求方式" align="center" prop="requestMethod" /> |
|||
<el-table-column label="操作人员" align="center" prop="operName" width="100" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" /> |
|||
<el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="操作状态" align="center" prop="status" :formatter="statusFormat" /> |
|||
<el-table-column label="操作日期" align="center" prop="operTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.operTime) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-view" |
|||
@click="handleView(scope.row,scope.index)" |
|||
v-hasPermi="['monitor:operlog:query']" |
|||
>详细</el-button> |
|||
</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="操作日志详细" :visible.sync="open" width="700px" append-to-body> |
|||
<el-form ref="form" :model="form" label-width="100px" size="mini"> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="操作模块:">{{ form.title }} / {{ typeFormat(form) }}</el-form-item> |
|||
<el-form-item |
|||
label="登录信息:" |
|||
>{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="请求地址:">{{ form.operUrl }}</el-form-item> |
|||
<el-form-item label="请求方式:">{{ form.requestMethod }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="操作方法:">{{ form.method }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="请求参数:">{{ form.operParam }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="返回参数:">{{ form.jsonResult }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="操作状态:"> |
|||
<div v-if="form.status === 0">正常</div> |
|||
<div v-else-if="form.status === 1">失败</div> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="操作时间:">{{ parseTime(form.operTime) }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="异常信息:" 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">关 闭</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { list, delOperlog, cleanOperlog, exportOperlog } from "@/api/monitor/operlog"; |
|||
|
|||
export default { |
|||
name: "Operlog", |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 导出遮罩层 |
|||
exportLoading: false, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 表格数据 |
|||
list: [], |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 类型数据字典 |
|||
typeOptions: [], |
|||
// 类型数据字典 |
|||
statusOptions: [], |
|||
// 日期范围 |
|||
dateRange: [], |
|||
// 默认排序 |
|||
defaultSort: {prop: 'operTime', order: 'descending'}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
title: undefined, |
|||
operName: undefined, |
|||
businessType: undefined, |
|||
status: undefined |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.getDicts("sys_oper_type").then(response => { |
|||
this.typeOptions = response.data; |
|||
}); |
|||
this.getDicts("sys_common_status").then(response => { |
|||
this.statusOptions = response.data; |
|||
}); |
|||
}, |
|||
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; |
|||
} |
|||
); |
|||
}, |
|||
// 操作日志状态字典翻译 |
|||
statusFormat(row, column) { |
|||
return this.selectDictLabel(this.statusOptions, row.status); |
|||
}, |
|||
// 操作日志类型字典翻译 |
|||
typeFormat(row, column) { |
|||
return this.selectDictLabel(this.typeOptions, row.businessType); |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.queryParams.pageNum = 1; |
|||
this.getList(); |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.dateRange = []; |
|||
this.resetForm("queryForm"); |
|||
this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order) |
|||
this.handleQuery(); |
|||
}, |
|||
/** 多选框选中数据 */ |
|||
handleSelectionChange(selection) { |
|||
this.ids = selection.map(item => item.operId) |
|||
this.multiple = !selection.length |
|||
}, |
|||
/** 排序触发事件 */ |
|||
handleSortChange(column, prop, order) { |
|||
this.queryParams.orderByColumn = column.prop; |
|||
this.queryParams.isAsc = column.order; |
|||
this.getList(); |
|||
}, |
|||
/** 详细按钮操作 */ |
|||
handleView(row) { |
|||
this.open = true; |
|||
this.form = row; |
|||
}, |
|||
/** 删除按钮操作 */ |
|||
handleDelete(row) { |
|||
const operIds = row.operId || this.ids; |
|||
this.$confirm('是否确认删除日志编号为"' + operIds + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return delOperlog(operIds); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
}, |
|||
/** 清空按钮操作 */ |
|||
handleClean() { |
|||
this.$confirm('是否确认清空所有操作日志数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return cleanOperlog(); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("清空成功"); |
|||
}).catch(() => {}); |
|||
}, |
|||
/** 导出按钮操作 */ |
|||
handleExport() { |
|||
const queryParams = this.queryParams; |
|||
this.$confirm('是否确认导出所有操作日志数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(() => { |
|||
this.exportLoading = true; |
|||
return exportOperlog(queryParams); |
|||
}).then(response => { |
|||
this.download(response.msg); |
|||
this.exportLoading = false; |
|||
}).catch(() => {}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="app-container"> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> |
|||
<el-form-item label="系统模块" prop="title"> |
|||
<el-input |
|||
v-model="queryParams.title" |
|||
placeholder="请输入系统模块" |
|||
clearable |
|||
style="width: 240px;" |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="操作人员" prop="operName"> |
|||
<el-input |
|||
v-model="queryParams.operName" |
|||
placeholder="请输入操作人员" |
|||
clearable |
|||
style="width: 240px;" |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="类型" prop="businessType"> |
|||
<el-select |
|||
v-model="queryParams.businessType" |
|||
placeholder="操作类型" |
|||
clearable |
|||
size="small" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="dict in typeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="状态" prop="status"> |
|||
<el-select |
|||
v-model="queryParams.status" |
|||
placeholder="操作状态" |
|||
clearable |
|||
size="small" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="操作时间"> |
|||
<el-date-picker |
|||
v-model="dateRange" |
|||
size="small" |
|||
style="width: 240px" |
|||
value-format="yyyy-MM-dd" |
|||
type="daterange" |
|||
range-separator="-" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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="mini" |
|||
:disabled="multiple" |
|||
@click="handleDelete" |
|||
v-hasPermi="['monitor:operlog:remove']" |
|||
>删除</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="danger" |
|||
plain |
|||
icon="el-icon-delete" |
|||
size="mini" |
|||
@click="handleClean" |
|||
v-hasPermi="['monitor:operlog:remove']" |
|||
>清空</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="warning" |
|||
plain |
|||
icon="el-icon-download" |
|||
size="mini" |
|||
:loading="exportLoading" |
|||
@click="handleExport" |
|||
v-hasPermi="['monitor:operlog: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" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column label="日志编号" align="center" prop="operId" /> |
|||
<el-table-column label="系统模块" align="center" prop="title" /> |
|||
<el-table-column label="操作类型" align="center" prop="businessType"> |
|||
<template slot-scope="scope"> |
|||
<dict-tag :options="typeOptions" :value="scope.row.businessType"/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="请求方式" align="center" prop="requestMethod" /> |
|||
<el-table-column label="操作人员" align="center" prop="operName" width="100" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" /> |
|||
<el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="操作状态" align="center" prop="status"> |
|||
<template slot-scope="scope"> |
|||
<dict-tag :options="statusOptions" :value="scope.row.status"/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作日期" align="center" prop="operTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.operTime) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-view" |
|||
@click="handleView(scope.row,scope.index)" |
|||
v-hasPermi="['monitor:operlog:query']" |
|||
>详细</el-button> |
|||
</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="操作日志详细" :visible.sync="open" width="700px" append-to-body> |
|||
<el-form ref="form" :model="form" label-width="100px" size="mini"> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="操作模块:">{{ form.title }} / {{ typeFormat(form) }}</el-form-item> |
|||
<el-form-item |
|||
label="登录信息:" |
|||
>{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="请求地址:">{{ form.operUrl }}</el-form-item> |
|||
<el-form-item label="请求方式:">{{ form.requestMethod }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="操作方法:">{{ form.method }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="请求参数:">{{ form.operParam }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="返回参数:">{{ form.jsonResult }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="操作状态:"> |
|||
<div v-if="form.status === 0">正常</div> |
|||
<div v-else-if="form.status === 1">失败</div> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="操作时间:">{{ parseTime(form.operTime) }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="异常信息:" 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">关 闭</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { list, delOperlog, cleanOperlog, exportOperlog } from "@/api/monitor/operlog"; |
|||
|
|||
export default { |
|||
name: "Operlog", |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 导出遮罩层 |
|||
exportLoading: false, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 表格数据 |
|||
list: [], |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 类型数据字典 |
|||
typeOptions: [], |
|||
// 类型数据字典 |
|||
statusOptions: [], |
|||
// 日期范围 |
|||
dateRange: [], |
|||
// 默认排序 |
|||
defaultSort: {prop: 'operTime', order: 'descending'}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
title: undefined, |
|||
operName: undefined, |
|||
businessType: undefined, |
|||
status: undefined |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.getDicts("sys_oper_type").then(response => { |
|||
this.typeOptions = response.data; |
|||
}); |
|||
this.getDicts("sys_common_status").then(response => { |
|||
this.statusOptions = response.data; |
|||
}); |
|||
}, |
|||
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; |
|||
} |
|||
); |
|||
}, |
|||
// 操作日志类型字典翻译 |
|||
typeFormat(row, column) { |
|||
return this.selectDictLabel(this.typeOptions, row.businessType); |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.queryParams.pageNum = 1; |
|||
this.getList(); |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.dateRange = []; |
|||
this.resetForm("queryForm"); |
|||
this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order) |
|||
this.handleQuery(); |
|||
}, |
|||
/** 多选框选中数据 */ |
|||
handleSelectionChange(selection) { |
|||
this.ids = selection.map(item => item.operId) |
|||
this.multiple = !selection.length |
|||
}, |
|||
/** 排序触发事件 */ |
|||
handleSortChange(column, prop, order) { |
|||
this.queryParams.orderByColumn = column.prop; |
|||
this.queryParams.isAsc = column.order; |
|||
this.getList(); |
|||
}, |
|||
/** 详细按钮操作 */ |
|||
handleView(row) { |
|||
this.open = true; |
|||
this.form = row; |
|||
}, |
|||
/** 删除按钮操作 */ |
|||
handleDelete(row) { |
|||
const operIds = row.operId || this.ids; |
|||
this.$confirm('是否确认删除日志编号为"' + operIds + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return delOperlog(operIds); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
}, |
|||
/** 清空按钮操作 */ |
|||
handleClean() { |
|||
this.$confirm('是否确认清空所有操作日志数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return cleanOperlog(); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("清空成功"); |
|||
}).catch(() => {}); |
|||
}, |
|||
/** 导出按钮操作 */ |
|||
handleExport() { |
|||
const queryParams = this.queryParams; |
|||
this.$confirm('是否确认导出所有操作日志数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(() => { |
|||
this.exportLoading = true; |
|||
return exportOperlog(queryParams); |
|||
}).then(response => { |
|||
this.download(response.msg); |
|||
this.exportLoading = false; |
|||
}).catch(() => {}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
|
@ -1,366 +1,366 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> |
|||
<el-form-item label="参数名称" prop="configName"> |
|||
<el-input |
|||
v-model="queryParams.configName" |
|||
placeholder="请输入参数名称" |
|||
clearable |
|||
size="small" |
|||
style="width: 240px" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="参数键名" prop="configKey"> |
|||
<el-input |
|||
v-model="queryParams.configKey" |
|||
placeholder="请输入参数键名" |
|||
clearable |
|||
size="small" |
|||
style="width: 240px" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="系统内置" prop="configType"> |
|||
<el-select v-model="queryParams.configType" placeholder="系统内置" clearable size="small"> |
|||
<el-option |
|||
v-for="dict in typeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="创建时间"> |
|||
<el-date-picker |
|||
v-model="dateRange" |
|||
size="small" |
|||
style="width: 240px" |
|||
value-format="yyyy-MM-dd" |
|||
type="daterange" |
|||
range-separator="-" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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="mini" |
|||
@click="handleAdd" |
|||
v-hasPermi="['system:config:add']" |
|||
>新增</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="success" |
|||
plain |
|||
icon="el-icon-edit" |
|||
size="mini" |
|||
:disabled="single" |
|||
@click="handleUpdate" |
|||
v-hasPermi="['system:config:edit']" |
|||
>修改</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="danger" |
|||
plain |
|||
icon="el-icon-delete" |
|||
size="mini" |
|||
:disabled="multiple" |
|||
@click="handleDelete" |
|||
v-hasPermi="['system:config:remove']" |
|||
>删除</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="warning" |
|||
plain |
|||
icon="el-icon-download" |
|||
size="mini" |
|||
:loading="exportLoading" |
|||
@click="handleExport" |
|||
v-hasPermi="['system:config:export']" |
|||
>导出</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="danger" |
|||
plain |
|||
icon="el-icon-refresh" |
|||
size="mini" |
|||
@click="handleRefreshCache" |
|||
v-hasPermi="['system:config:remove']" |
|||
>刷新缓存</el-button> |
|||
</el-col> |
|||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
|||
</el-row> |
|||
|
|||
<el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column label="参数主键" align="center" prop="configId" /> |
|||
<el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="参数键值" align="center" prop="configValue" /> |
|||
<el-table-column label="系统内置" align="center" prop="configType" :formatter="typeFormat" /> |
|||
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="创建时间" align="center" prop="createTime" width="180"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.createTime) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
v-hasPermi="['system:config:edit']" |
|||
>修改</el-button> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['system:config:remove']" |
|||
>删除</el-button> |
|||
</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="500px" append-to-body> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
|||
<el-form-item label="参数名称" prop="configName"> |
|||
<el-input v-model="form.configName" placeholder="请输入参数名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="参数键名" prop="configKey"> |
|||
<el-input v-model="form.configKey" placeholder="请输入参数键名" /> |
|||
</el-form-item> |
|||
<el-form-item label="参数键值" prop="configValue"> |
|||
<el-input v-model="form.configValue" placeholder="请输入参数键值" /> |
|||
</el-form-item> |
|||
<el-form-item label="系统内置" prop="configType"> |
|||
<el-radio-group v-model="form.configType"> |
|||
<el-radio |
|||
v-for="dict in typeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictValue" |
|||
>{{dict.dictLabel}}</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="备注" prop="remark"> |
|||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
<el-button @click="cancel">取 消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listConfig, getConfig, delConfig, addConfig, updateConfig, exportConfig, refreshCache } from "@/api/system/config"; |
|||
|
|||
export default { |
|||
name: "Config", |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 导出遮罩层 |
|||
exportLoading: false, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 参数表格数据 |
|||
configList: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 类型数据字典 |
|||
typeOptions: [], |
|||
// 日期范围 |
|||
dateRange: [], |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
configName: undefined, |
|||
configKey: undefined, |
|||
configType: undefined |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
configName: [ |
|||
{ required: true, message: "参数名称不能为空", trigger: "blur" } |
|||
], |
|||
configKey: [ |
|||
{ required: true, message: "参数键名不能为空", trigger: "blur" } |
|||
], |
|||
configValue: [ |
|||
{ required: true, message: "参数键值不能为空", trigger: "blur" } |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.getDicts("sys_yes_no").then(response => { |
|||
this.typeOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
/** 查询参数列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
listConfig(this.addDateRange(this.queryParams, this.dateRange)).then(response => { |
|||
this.configList = response.rows; |
|||
this.total = response.total; |
|||
this.loading = false; |
|||
} |
|||
); |
|||
}, |
|||
// 参数系统内置字典翻译 |
|||
typeFormat(row, column) { |
|||
return this.selectDictLabel(this.typeOptions, row.configType); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
configId: undefined, |
|||
configName: undefined, |
|||
configKey: undefined, |
|||
configValue: undefined, |
|||
configType: "Y", |
|||
remark: undefined |
|||
}; |
|||
this.resetForm("form"); |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.queryParams.pageNum = 1; |
|||
this.getList(); |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.dateRange = []; |
|||
this.resetForm("queryForm"); |
|||
this.handleQuery(); |
|||
}, |
|||
/** 新增按钮操作 */ |
|||
handleAdd() { |
|||
this.reset(); |
|||
this.open = true; |
|||
this.title = "添加参数"; |
|||
}, |
|||
// 多选框选中数据 |
|||
handleSelectionChange(selection) { |
|||
this.ids = selection.map(item => item.configId) |
|||
this.single = selection.length!=1 |
|||
this.multiple = !selection.length |
|||
}, |
|||
/** 修改按钮操作 */ |
|||
handleUpdate(row) { |
|||
this.reset(); |
|||
const configId = row.configId || this.ids |
|||
getConfig(configId).then(response => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改参数"; |
|||
}); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm: function() { |
|||
this.$refs["form"].validate(valid => { |
|||
if (valid) { |
|||
if (this.form.configId != undefined) { |
|||
updateConfig(this.form).then(response => { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} else { |
|||
addConfig(this.form).then(response => { |
|||
this.msgSuccess("新增成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** 删除按钮操作 */ |
|||
handleDelete(row) { |
|||
const configIds = row.configId || this.ids; |
|||
this.$confirm('是否确认删除参数编号为"' + configIds + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return delConfig(configIds); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
}, |
|||
/** 导出按钮操作 */ |
|||
handleExport() { |
|||
const queryParams = this.queryParams; |
|||
this.$confirm('是否确认导出所有参数数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(() => { |
|||
this.exportLoading = true; |
|||
return exportConfig(queryParams); |
|||
}).then(response => { |
|||
this.download(response.msg); |
|||
this.exportLoading = false; |
|||
}).catch(() => {}); |
|||
}, |
|||
/** 刷新缓存按钮操作 */ |
|||
handleRefreshCache() { |
|||
refreshCache().then(() => { |
|||
this.msgSuccess("刷新成功"); |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> |
|||
<el-form-item label="参数名称" prop="configName"> |
|||
<el-input |
|||
v-model="queryParams.configName" |
|||
placeholder="请输入参数名称" |
|||
clearable |
|||
size="small" |
|||
style="width: 240px" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="参数键名" prop="configKey"> |
|||
<el-input |
|||
v-model="queryParams.configKey" |
|||
placeholder="请输入参数键名" |
|||
clearable |
|||
size="small" |
|||
style="width: 240px" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="系统内置" prop="configType"> |
|||
<el-select v-model="queryParams.configType" placeholder="系统内置" clearable size="small"> |
|||
<el-option |
|||
v-for="dict in typeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="创建时间"> |
|||
<el-date-picker |
|||
v-model="dateRange" |
|||
size="small" |
|||
style="width: 240px" |
|||
value-format="yyyy-MM-dd" |
|||
type="daterange" |
|||
range-separator="-" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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="mini" |
|||
@click="handleAdd" |
|||
v-hasPermi="['system:config:add']" |
|||
>新增</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="success" |
|||
plain |
|||
icon="el-icon-edit" |
|||
size="mini" |
|||
:disabled="single" |
|||
@click="handleUpdate" |
|||
v-hasPermi="['system:config:edit']" |
|||
>修改</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="danger" |
|||
plain |
|||
icon="el-icon-delete" |
|||
size="mini" |
|||
:disabled="multiple" |
|||
@click="handleDelete" |
|||
v-hasPermi="['system:config:remove']" |
|||
>删除</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="warning" |
|||
plain |
|||
icon="el-icon-download" |
|||
size="mini" |
|||
:loading="exportLoading" |
|||
@click="handleExport" |
|||
v-hasPermi="['system:config:export']" |
|||
>导出</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="danger" |
|||
plain |
|||
icon="el-icon-refresh" |
|||
size="mini" |
|||
@click="handleRefreshCache" |
|||
v-hasPermi="['system:config:remove']" |
|||
>刷新缓存</el-button> |
|||
</el-col> |
|||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
|||
</el-row> |
|||
|
|||
<el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column label="参数主键" align="center" prop="configId" /> |
|||
<el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="参数键值" align="center" prop="configValue" /> |
|||
<el-table-column label="系统内置" align="center" prop="configType"> |
|||
<template slot-scope="scope"> |
|||
<dict-tag :options="typeOptions" :value="scope.row.configType"/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="创建时间" align="center" prop="createTime" width="180"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.createTime) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
v-hasPermi="['system:config:edit']" |
|||
>修改</el-button> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['system:config:remove']" |
|||
>删除</el-button> |
|||
</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="500px" append-to-body> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
|||
<el-form-item label="参数名称" prop="configName"> |
|||
<el-input v-model="form.configName" placeholder="请输入参数名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="参数键名" prop="configKey"> |
|||
<el-input v-model="form.configKey" placeholder="请输入参数键名" /> |
|||
</el-form-item> |
|||
<el-form-item label="参数键值" prop="configValue"> |
|||
<el-input v-model="form.configValue" placeholder="请输入参数键值" /> |
|||
</el-form-item> |
|||
<el-form-item label="系统内置" prop="configType"> |
|||
<el-radio-group v-model="form.configType"> |
|||
<el-radio |
|||
v-for="dict in typeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictValue" |
|||
>{{dict.dictLabel}}</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="备注" prop="remark"> |
|||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
<el-button @click="cancel">取 消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listConfig, getConfig, delConfig, addConfig, updateConfig, exportConfig, refreshCache } from "@/api/system/config"; |
|||
|
|||
export default { |
|||
name: "Config", |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 导出遮罩层 |
|||
exportLoading: false, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 参数表格数据 |
|||
configList: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 类型数据字典 |
|||
typeOptions: [], |
|||
// 日期范围 |
|||
dateRange: [], |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
configName: undefined, |
|||
configKey: undefined, |
|||
configType: undefined |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
configName: [ |
|||
{ required: true, message: "参数名称不能为空", trigger: "blur" } |
|||
], |
|||
configKey: [ |
|||
{ required: true, message: "参数键名不能为空", trigger: "blur" } |
|||
], |
|||
configValue: [ |
|||
{ required: true, message: "参数键值不能为空", trigger: "blur" } |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.getDicts("sys_yes_no").then(response => { |
|||
this.typeOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
/** 查询参数列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
listConfig(this.addDateRange(this.queryParams, this.dateRange)).then(response => { |
|||
this.configList = response.rows; |
|||
this.total = response.total; |
|||
this.loading = false; |
|||
} |
|||
); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
configId: undefined, |
|||
configName: undefined, |
|||
configKey: undefined, |
|||
configValue: undefined, |
|||
configType: "Y", |
|||
remark: undefined |
|||
}; |
|||
this.resetForm("form"); |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.queryParams.pageNum = 1; |
|||
this.getList(); |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.dateRange = []; |
|||
this.resetForm("queryForm"); |
|||
this.handleQuery(); |
|||
}, |
|||
/** 新增按钮操作 */ |
|||
handleAdd() { |
|||
this.reset(); |
|||
this.open = true; |
|||
this.title = "添加参数"; |
|||
}, |
|||
// 多选框选中数据 |
|||
handleSelectionChange(selection) { |
|||
this.ids = selection.map(item => item.configId) |
|||
this.single = selection.length!=1 |
|||
this.multiple = !selection.length |
|||
}, |
|||
/** 修改按钮操作 */ |
|||
handleUpdate(row) { |
|||
this.reset(); |
|||
const configId = row.configId || this.ids |
|||
getConfig(configId).then(response => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改参数"; |
|||
}); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm: function() { |
|||
this.$refs["form"].validate(valid => { |
|||
if (valid) { |
|||
if (this.form.configId != undefined) { |
|||
updateConfig(this.form).then(response => { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} else { |
|||
addConfig(this.form).then(response => { |
|||
this.msgSuccess("新增成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** 删除按钮操作 */ |
|||
handleDelete(row) { |
|||
const configIds = row.configId || this.ids; |
|||
this.$confirm('是否确认删除参数编号为"' + configIds + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return delConfig(configIds); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
}, |
|||
/** 导出按钮操作 */ |
|||
handleExport() { |
|||
const queryParams = this.queryParams; |
|||
this.$confirm('是否确认导出所有参数数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(() => { |
|||
this.exportLoading = true; |
|||
return exportConfig(queryParams); |
|||
}).then(response => { |
|||
this.download(response.msg); |
|||
this.exportLoading = false; |
|||
}).catch(() => {}); |
|||
}, |
|||
/** 刷新缓存按钮操作 */ |
|||
handleRefreshCache() { |
|||
refreshCache().then(() => { |
|||
this.msgSuccess("刷新成功"); |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
@ -1,317 +1,317 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch"> |
|||
<el-form-item label="部门名称" prop="deptName"> |
|||
<el-input |
|||
v-model="queryParams.deptName" |
|||
placeholder="请输入部门名称" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="状态" prop="status"> |
|||
<el-select v-model="queryParams.status" placeholder="部门状态" clearable size="small"> |
|||
<el-option |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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="mini" |
|||
@click="handleAdd" |
|||
v-hasPermi="['system:dept:add']" |
|||
>新增</el-button> |
|||
</el-col> |
|||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
|||
</el-row> |
|||
|
|||
<el-table |
|||
v-loading="loading" |
|||
:data="deptList" |
|||
row-key="deptId" |
|||
default-expand-all |
|||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
|||
> |
|||
<el-table-column prop="deptName" label="部门名称" width="260"></el-table-column> |
|||
<el-table-column prop="orderNum" label="排序" width="200"></el-table-column> |
|||
<el-table-column prop="status" label="状态" :formatter="statusFormat" width="100"></el-table-column> |
|||
<el-table-column label="创建时间" align="center" prop="createTime" width="200"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.createTime) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
v-hasPermi="['system:dept:edit']" |
|||
>修改</el-button> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-plus" |
|||
@click="handleAdd(scope.row)" |
|||
v-hasPermi="['system:dept:add']" |
|||
>新增</el-button> |
|||
<el-button |
|||
v-if="scope.row.parentId != 0" |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['system:dept:remove']" |
|||
>删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 添加或修改部门对话框 --> |
|||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
|||
<el-row> |
|||
<el-col :span="24" v-if="form.parentId !== 0"> |
|||
<el-form-item label="上级部门" prop="parentId"> |
|||
<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="部门名称" prop="deptName"> |
|||
<el-input v-model="form.deptName" placeholder="请输入部门名称" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="显示排序" prop="orderNum"> |
|||
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="负责人" prop="leader"> |
|||
<el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="联系电话" prop="phone"> |
|||
<el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="邮箱" prop="email"> |
|||
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="部门状态"> |
|||
<el-radio-group v-model="form.status"> |
|||
<el-radio |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictValue" |
|||
>{{dict.dictLabel}}</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">确 定</el-button> |
|||
<el-button @click="cancel">取 消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"; |
|||
import Treeselect from "@riophae/vue-treeselect"; |
|||
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; |
|||
|
|||
export default { |
|||
name: "Dept", |
|||
components: { Treeselect }, |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 表格树数据 |
|||
deptList: [], |
|||
// 部门树选项 |
|||
deptOptions: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 状态数据字典 |
|||
statusOptions: [], |
|||
// 查询参数 |
|||
queryParams: { |
|||
deptName: undefined, |
|||
status: undefined |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
parentId: [ |
|||
{ required: true, message: "上级部门不能为空", trigger: "blur" } |
|||
], |
|||
deptName: [ |
|||
{ required: true, message: "部门名称不能为空", trigger: "blur" } |
|||
], |
|||
orderNum: [ |
|||
{ required: true, message: "显示排序不能为空", trigger: "blur" } |
|||
], |
|||
email: [ |
|||
{ |
|||
type: "email", |
|||
message: "'请输入正确的邮箱地址", |
|||
trigger: ["blur", "change"] |
|||
} |
|||
], |
|||
phone: [ |
|||
{ |
|||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, |
|||
message: "请输入正确的手机号码", |
|||
trigger: "blur" |
|||
} |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.getDicts("sys_normal_disable").then(response => { |
|||
this.statusOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
/** 查询部门列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
listDept(this.queryParams).then(response => { |
|||
this.deptList = this.handleTree(response.data, "deptId"); |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
/** 转换部门数据结构 */ |
|||
normalizer(node) { |
|||
if (node.children && !node.children.length) { |
|||
delete node.children; |
|||
} |
|||
return { |
|||
id: node.deptId, |
|||
label: node.deptName, |
|||
children: node.children |
|||
}; |
|||
}, |
|||
// 字典状态字典翻译 |
|||
statusFormat(row, column) { |
|||
return this.selectDictLabel(this.statusOptions, row.status); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
deptId: undefined, |
|||
parentId: undefined, |
|||
deptName: undefined, |
|||
orderNum: undefined, |
|||
leader: undefined, |
|||
phone: undefined, |
|||
email: undefined, |
|||
status: "0" |
|||
}; |
|||
this.resetForm("form"); |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.getList(); |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.resetForm("queryForm"); |
|||
this.handleQuery(); |
|||
}, |
|||
/** 新增按钮操作 */ |
|||
handleAdd(row) { |
|||
this.reset(); |
|||
if (row != undefined) { |
|||
this.form.parentId = row.deptId; |
|||
} |
|||
this.open = true; |
|||
this.title = "添加部门"; |
|||
listDept().then(response => { |
|||
this.deptOptions = this.handleTree(response.data, "deptId"); |
|||
}); |
|||
}, |
|||
/** 修改按钮操作 */ |
|||
handleUpdate(row) { |
|||
this.reset(); |
|||
getDept(row.deptId).then(response => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改部门"; |
|||
}); |
|||
listDeptExcludeChild(row.deptId).then(response => { |
|||
this.deptOptions = this.handleTree(response.data, "deptId"); |
|||
}); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm: function() { |
|||
this.$refs["form"].validate(valid => { |
|||
if (valid) { |
|||
if (this.form.deptId != undefined) { |
|||
updateDept(this.form).then(response => { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} else { |
|||
addDept(this.form).then(response => { |
|||
this.msgSuccess("新增成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** 删除按钮操作 */ |
|||
handleDelete(row) { |
|||
this.$confirm('是否确认删除名称为"' + row.deptName + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return delDept(row.deptId); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch"> |
|||
<el-form-item label="部门名称" prop="deptName"> |
|||
<el-input |
|||
v-model="queryParams.deptName" |
|||
placeholder="请输入部门名称" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="状态" prop="status"> |
|||
<el-select v-model="queryParams.status" placeholder="部门状态" clearable size="small"> |
|||
<el-option |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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="mini" |
|||
@click="handleAdd" |
|||
v-hasPermi="['system:dept:add']" |
|||
>新增</el-button> |
|||
</el-col> |
|||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
|||
</el-row> |
|||
|
|||
<el-table |
|||
v-loading="loading" |
|||
:data="deptList" |
|||
row-key="deptId" |
|||
default-expand-all |
|||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
|||
> |
|||
<el-table-column prop="deptName" label="部门名称" width="260"></el-table-column> |
|||
<el-table-column prop="orderNum" label="排序" width="200"></el-table-column> |
|||
<el-table-column prop="status" label="状态" width="100"> |
|||
<template slot-scope="scope"> |
|||
<dict-tag :options="statusOptions" :value="scope.row.status"/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="创建时间" align="center" prop="createTime" width="200"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.createTime) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
v-hasPermi="['system:dept:edit']" |
|||
>修改</el-button> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-plus" |
|||
@click="handleAdd(scope.row)" |
|||
v-hasPermi="['system:dept:add']" |
|||
>新增</el-button> |
|||
<el-button |
|||
v-if="scope.row.parentId != 0" |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['system:dept:remove']" |
|||
>删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 添加或修改部门对话框 --> |
|||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
|||
<el-row> |
|||
<el-col :span="24" v-if="form.parentId !== 0"> |
|||
<el-form-item label="上级部门" prop="parentId"> |
|||
<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="部门名称" prop="deptName"> |
|||
<el-input v-model="form.deptName" placeholder="请输入部门名称" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="显示排序" prop="orderNum"> |
|||
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="负责人" prop="leader"> |
|||
<el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="联系电话" prop="phone"> |
|||
<el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="邮箱" prop="email"> |
|||
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="部门状态"> |
|||
<el-radio-group v-model="form.status"> |
|||
<el-radio |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictValue" |
|||
>{{dict.dictLabel}}</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">确 定</el-button> |
|||
<el-button @click="cancel">取 消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"; |
|||
import Treeselect from "@riophae/vue-treeselect"; |
|||
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; |
|||
|
|||
export default { |
|||
name: "Dept", |
|||
components: { Treeselect }, |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 表格树数据 |
|||
deptList: [], |
|||
// 部门树选项 |
|||
deptOptions: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 状态数据字典 |
|||
statusOptions: [], |
|||
// 查询参数 |
|||
queryParams: { |
|||
deptName: undefined, |
|||
status: undefined |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
parentId: [ |
|||
{ required: true, message: "上级部门不能为空", trigger: "blur" } |
|||
], |
|||
deptName: [ |
|||
{ required: true, message: "部门名称不能为空", trigger: "blur" } |
|||
], |
|||
orderNum: [ |
|||
{ required: true, message: "显示排序不能为空", trigger: "blur" } |
|||
], |
|||
email: [ |
|||
{ |
|||
type: "email", |
|||
message: "'请输入正确的邮箱地址", |
|||
trigger: ["blur", "change"] |
|||
} |
|||
], |
|||
phone: [ |
|||
{ |
|||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, |
|||
message: "请输入正确的手机号码", |
|||
trigger: "blur" |
|||
} |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.getDicts("sys_normal_disable").then(response => { |
|||
this.statusOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
/** 查询部门列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
listDept(this.queryParams).then(response => { |
|||
this.deptList = this.handleTree(response.data, "deptId"); |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
/** 转换部门数据结构 */ |
|||
normalizer(node) { |
|||
if (node.children && !node.children.length) { |
|||
delete node.children; |
|||
} |
|||
return { |
|||
id: node.deptId, |
|||
label: node.deptName, |
|||
children: node.children |
|||
}; |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
deptId: undefined, |
|||
parentId: undefined, |
|||
deptName: undefined, |
|||
orderNum: undefined, |
|||
leader: undefined, |
|||
phone: undefined, |
|||
email: undefined, |
|||
status: "0" |
|||
}; |
|||
this.resetForm("form"); |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.getList(); |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.resetForm("queryForm"); |
|||
this.handleQuery(); |
|||
}, |
|||
/** 新增按钮操作 */ |
|||
handleAdd(row) { |
|||
this.reset(); |
|||
if (row != undefined) { |
|||
this.form.parentId = row.deptId; |
|||
} |
|||
this.open = true; |
|||
this.title = "添加部门"; |
|||
listDept().then(response => { |
|||
this.deptOptions = this.handleTree(response.data, "deptId"); |
|||
}); |
|||
}, |
|||
/** 修改按钮操作 */ |
|||
handleUpdate(row) { |
|||
this.reset(); |
|||
getDept(row.deptId).then(response => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改部门"; |
|||
}); |
|||
listDeptExcludeChild(row.deptId).then(response => { |
|||
this.deptOptions = this.handleTree(response.data, "deptId"); |
|||
}); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm: function() { |
|||
this.$refs["form"].validate(valid => { |
|||
if (valid) { |
|||
if (this.form.deptId != undefined) { |
|||
updateDept(this.form).then(response => { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} else { |
|||
addDept(this.form).then(response => { |
|||
this.msgSuccess("新增成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** 删除按钮操作 */ |
|||
handleDelete(row) { |
|||
this.$confirm('是否确认删除名称为"' + row.deptName + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return delDept(row.deptId); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
@ -1,442 +1,432 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch"> |
|||
<el-form-item label="菜单名称" prop="menuName"> |
|||
<el-input |
|||
v-model="queryParams.menuName" |
|||
placeholder="请输入菜单名称" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="状态" prop="status"> |
|||
<el-select v-model="queryParams.status" placeholder="菜单状态" clearable size="small"> |
|||
<el-option |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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="mini" |
|||
@click="handleAdd" |
|||
v-hasPermi="['system:menu:add']" |
|||
>新增</el-button> |
|||
</el-col> |
|||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
|||
</el-row> |
|||
|
|||
<el-table |
|||
v-loading="loading" |
|||
:data="menuList" |
|||
row-key="menuId" |
|||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
|||
> |
|||
<el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column> |
|||
<el-table-column prop="icon" label="图标" align="center" width="100"> |
|||
<template slot-scope="scope"> |
|||
<svg-icon :icon-class="scope.row.icon" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="orderNum" label="排序" width="60"></el-table-column> |
|||
<el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="status" label="状态" :formatter="statusFormat" width="80"></el-table-column> |
|||
<el-table-column label="创建时间" align="center" prop="createTime"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.createTime) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|||
<template slot-scope="scope"> |
|||
<el-button size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
v-hasPermi="['system:menu:edit']" |
|||
>修改</el-button> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-plus" |
|||
@click="handleAdd(scope.row)" |
|||
v-hasPermi="['system:menu:add']" |
|||
>新增</el-button> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['system:menu:remove']" |
|||
>删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 添加或修改菜单对话框 --> |
|||
<el-dialog :title="title" :visible.sync="open" width="680px" append-to-body> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-form-item label="上级菜单"> |
|||
<treeselect |
|||
v-model="form.parentId" |
|||
:options="menuOptions" |
|||
:normalizer="normalizer" |
|||
:show-count="true" |
|||
placeholder="选择上级菜单" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="菜单类型" prop="menuType"> |
|||
<el-radio-group v-model="form.menuType"> |
|||
<el-radio label="M">目录</el-radio> |
|||
<el-radio label="C">菜单</el-radio> |
|||
<el-radio label="F">按钮</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item v-if="form.menuType != 'F'" label="菜单图标"> |
|||
<el-popover |
|||
placement="bottom-start" |
|||
width="460" |
|||
trigger="click" |
|||
@show="$refs['iconSelect'].reset()" |
|||
> |
|||
<IconSelect ref="iconSelect" @selected="selected" /> |
|||
<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly> |
|||
<svg-icon |
|||
v-if="form.icon" |
|||
slot="prefix" |
|||
:icon-class="form.icon" |
|||
class="el-input__icon" |
|||
style="height: 32px;width: 16px;" |
|||
/> |
|||
<i v-else slot="prefix" class="el-icon-search el-input__icon" /> |
|||
</el-input> |
|||
</el-popover> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="菜单名称" prop="menuName"> |
|||
<el-input v-model="form.menuName" placeholder="请输入菜单名称" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="显示排序" prop="orderNum"> |
|||
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item v-if="form.menuType != 'F'"> |
|||
<span slot="label"> |
|||
<el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top"> |
|||
<i class="el-icon-question"></i> |
|||
</el-tooltip> |
|||
是否外链 |
|||
</span> |
|||
<el-radio-group v-model="form.isFrame"> |
|||
<el-radio label="0">是</el-radio> |
|||
<el-radio label="1">否</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item v-if="form.menuType != 'F'" prop="path"> |
|||
<span slot="label"> |
|||
<el-tooltip content="访问的路由地址,如:`user`,如外网地址需内链访问则以`http(s)://`开头" placement="top"> |
|||
<i class="el-icon-question"></i> |
|||
</el-tooltip> |
|||
路由地址 |
|||
</span> |
|||
<el-input v-model="form.path" placeholder="请输入路由地址" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12" v-if="form.menuType == 'C'"> |
|||
<el-form-item prop="component"> |
|||
<span slot="label"> |
|||
<el-tooltip content="访问的组件路径,如:`system/user/index`,默认在`views`目录下" placement="top"> |
|||
<i class="el-icon-question"></i> |
|||
</el-tooltip> |
|||
组件路径 |
|||
</span> |
|||
<el-input v-model="form.component" placeholder="请输入组件路径" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item v-if="form.menuType != 'M'"> |
|||
<el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" /> |
|||
<span slot="label"> |
|||
<el-tooltip content="控制器中定义的权限字符,如:@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top"> |
|||
<i class="el-icon-question"></i> |
|||
</el-tooltip> |
|||
权限字符 |
|||
</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item v-if="form.menuType != 'F'"> |
|||
<span slot="label"> |
|||
<el-tooltip content="选择隐藏则路由将不会出现在侧边栏,但仍然可以访问" placement="top"> |
|||
<i class="el-icon-question"></i> |
|||
</el-tooltip> |
|||
显示状态 |
|||
</span> |
|||
<el-radio-group v-model="form.visible"> |
|||
<el-radio |
|||
v-for="dict in visibleOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictValue" |
|||
>{{dict.dictLabel}}</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item v-if="form.menuType != 'F'"> |
|||
<span slot="label"> |
|||
<el-tooltip content="选择停用则路由将不会出现在侧边栏,也不能被访问" placement="top"> |
|||
<i class="el-icon-question"></i> |
|||
</el-tooltip> |
|||
菜单状态 |
|||
</span> |
|||
<el-radio-group v-model="form.status"> |
|||
<el-radio |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictValue" |
|||
>{{dict.dictLabel}}</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item v-if="form.menuType == 'C'"> |
|||
<span slot="label"> |
|||
<el-tooltip content="选择是则会被`keep-alive`缓存,需要匹配组件的`name`和地址保持一致" placement="top"> |
|||
<i class="el-icon-question"></i> |
|||
</el-tooltip> |
|||
是否缓存 |
|||
</span> |
|||
<el-radio-group v-model="form.isCache"> |
|||
<el-radio label="0">缓存</el-radio> |
|||
<el-radio label="1">不缓存</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">确 定</el-button> |
|||
<el-button @click="cancel">取 消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu"; |
|||
import Treeselect from "@riophae/vue-treeselect"; |
|||
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; |
|||
import IconSelect from "@/components/IconSelect"; |
|||
|
|||
export default { |
|||
name: "Menu", |
|||
components: { Treeselect, IconSelect }, |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 菜单表格树数据 |
|||
menuList: [], |
|||
// 菜单树选项 |
|||
menuOptions: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 显示状态数据字典 |
|||
visibleOptions: [], |
|||
// 菜单状态数据字典 |
|||
statusOptions: [], |
|||
// 查询参数 |
|||
queryParams: { |
|||
menuName: undefined, |
|||
visible: undefined |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
menuName: [ |
|||
{ required: true, message: "菜单名称不能为空", trigger: "blur" } |
|||
], |
|||
orderNum: [ |
|||
{ required: true, message: "菜单顺序不能为空", trigger: "blur" } |
|||
], |
|||
path: [ |
|||
{ required: true, message: "路由地址不能为空", trigger: "blur" } |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.getDicts("sys_show_hide").then(response => { |
|||
this.visibleOptions = response.data; |
|||
}); |
|||
this.getDicts("sys_normal_disable").then(response => { |
|||
this.statusOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
// 选择图标 |
|||
selected(name) { |
|||
this.form.icon = name; |
|||
}, |
|||
/** 查询菜单列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
listMenu(this.queryParams).then(response => { |
|||
this.menuList = this.handleTree(response.data, "menuId"); |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
/** 转换菜单数据结构 */ |
|||
normalizer(node) { |
|||
if (node.children && !node.children.length) { |
|||
delete node.children; |
|||
} |
|||
return { |
|||
id: node.menuId, |
|||
label: node.menuName, |
|||
children: node.children |
|||
}; |
|||
}, |
|||
/** 查询菜单下拉树结构 */ |
|||
getTreeselect() { |
|||
listMenu().then(response => { |
|||
this.menuOptions = []; |
|||
const menu = { menuId: 0, menuName: '主类目', children: [] }; |
|||
menu.children = this.handleTree(response.data, "menuId"); |
|||
this.menuOptions.push(menu); |
|||
}); |
|||
}, |
|||
// 显示状态字典翻译 |
|||
visibleFormat(row, column) { |
|||
if (row.menuType == "F") { |
|||
return ""; |
|||
} |
|||
return this.selectDictLabel(this.visibleOptions, row.visible); |
|||
}, |
|||
// 菜单状态字典翻译 |
|||
statusFormat(row, column) { |
|||
if (row.menuType == "F") { |
|||
return ""; |
|||
} |
|||
return this.selectDictLabel(this.statusOptions, row.status); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
menuId: undefined, |
|||
parentId: 0, |
|||
menuName: undefined, |
|||
icon: undefined, |
|||
menuType: "M", |
|||
orderNum: undefined, |
|||
isFrame: "1", |
|||
isCache: "0", |
|||
visible: "0", |
|||
status: "0" |
|||
}; |
|||
this.resetForm("form"); |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.getList(); |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.resetForm("queryForm"); |
|||
this.handleQuery(); |
|||
}, |
|||
/** 新增按钮操作 */ |
|||
handleAdd(row) { |
|||
this.reset(); |
|||
this.getTreeselect(); |
|||
if (row != null && row.menuId) { |
|||
this.form.parentId = row.menuId; |
|||
} else { |
|||
this.form.parentId = 0; |
|||
} |
|||
this.open = true; |
|||
this.title = "添加菜单"; |
|||
}, |
|||
/** 修改按钮操作 */ |
|||
handleUpdate(row) { |
|||
this.reset(); |
|||
this.getTreeselect(); |
|||
getMenu(row.menuId).then(response => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改菜单"; |
|||
}); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm: function() { |
|||
this.$refs["form"].validate(valid => { |
|||
if (valid) { |
|||
if (this.form.menuId != undefined) { |
|||
updateMenu(this.form).then(response => { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} else { |
|||
addMenu(this.form).then(response => { |
|||
this.msgSuccess("新增成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** 删除按钮操作 */ |
|||
handleDelete(row) { |
|||
this.$confirm('是否确认删除名称为"' + row.menuName + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return delMenu(row.menuId); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch"> |
|||
<el-form-item label="菜单名称" prop="menuName"> |
|||
<el-input |
|||
v-model="queryParams.menuName" |
|||
placeholder="请输入菜单名称" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="状态" prop="status"> |
|||
<el-select v-model="queryParams.status" placeholder="菜单状态" clearable size="small"> |
|||
<el-option |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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="mini" |
|||
@click="handleAdd" |
|||
v-hasPermi="['system:menu:add']" |
|||
>新增</el-button> |
|||
</el-col> |
|||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
|||
</el-row> |
|||
|
|||
<el-table |
|||
v-loading="loading" |
|||
:data="menuList" |
|||
row-key="menuId" |
|||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
|||
> |
|||
<el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column> |
|||
<el-table-column prop="icon" label="图标" align="center" width="100"> |
|||
<template slot-scope="scope"> |
|||
<svg-icon :icon-class="scope.row.icon" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="orderNum" label="排序" width="60"></el-table-column> |
|||
<el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="status" label="状态" width="80"> |
|||
<template slot-scope="scope"> |
|||
<dict-tag :options="statusOptions" :value="scope.row.status"/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="创建时间" align="center" prop="createTime"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.createTime) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|||
<template slot-scope="scope"> |
|||
<el-button size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
v-hasPermi="['system:menu:edit']" |
|||
>修改</el-button> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-plus" |
|||
@click="handleAdd(scope.row)" |
|||
v-hasPermi="['system:menu:add']" |
|||
>新增</el-button> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['system:menu:remove']" |
|||
>删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 添加或修改菜单对话框 --> |
|||
<el-dialog :title="title" :visible.sync="open" width="680px" append-to-body> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-form-item label="上级菜单"> |
|||
<treeselect |
|||
v-model="form.parentId" |
|||
:options="menuOptions" |
|||
:normalizer="normalizer" |
|||
:show-count="true" |
|||
placeholder="选择上级菜单" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="菜单类型" prop="menuType"> |
|||
<el-radio-group v-model="form.menuType"> |
|||
<el-radio label="M">目录</el-radio> |
|||
<el-radio label="C">菜单</el-radio> |
|||
<el-radio label="F">按钮</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item v-if="form.menuType != 'F'" label="菜单图标"> |
|||
<el-popover |
|||
placement="bottom-start" |
|||
width="460" |
|||
trigger="click" |
|||
@show="$refs['iconSelect'].reset()" |
|||
> |
|||
<IconSelect ref="iconSelect" @selected="selected" /> |
|||
<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly> |
|||
<svg-icon |
|||
v-if="form.icon" |
|||
slot="prefix" |
|||
:icon-class="form.icon" |
|||
class="el-input__icon" |
|||
style="height: 32px;width: 16px;" |
|||
/> |
|||
<i v-else slot="prefix" class="el-icon-search el-input__icon" /> |
|||
</el-input> |
|||
</el-popover> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="菜单名称" prop="menuName"> |
|||
<el-input v-model="form.menuName" placeholder="请输入菜单名称" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="显示排序" prop="orderNum"> |
|||
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item v-if="form.menuType != 'F'"> |
|||
<span slot="label"> |
|||
<el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top"> |
|||
<i class="el-icon-question"></i> |
|||
</el-tooltip> |
|||
是否外链 |
|||
</span> |
|||
<el-radio-group v-model="form.isFrame"> |
|||
<el-radio label="0">是</el-radio> |
|||
<el-radio label="1">否</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item v-if="form.menuType != 'F'" prop="path"> |
|||
<span slot="label"> |
|||
<el-tooltip content="访问的路由地址,如:`user`,如外网地址需内链访问则以`http(s)://`开头" placement="top"> |
|||
<i class="el-icon-question"></i> |
|||
</el-tooltip> |
|||
路由地址 |
|||
</span> |
|||
<el-input v-model="form.path" placeholder="请输入路由地址" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12" v-if="form.menuType == 'C'"> |
|||
<el-form-item prop="component"> |
|||
<span slot="label"> |
|||
<el-tooltip content="访问的组件路径,如:`system/user/index`,默认在`views`目录下" placement="top"> |
|||
<i class="el-icon-question"></i> |
|||
</el-tooltip> |
|||
组件路径 |
|||
</span> |
|||
<el-input v-model="form.component" placeholder="请输入组件路径" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item v-if="form.menuType != 'M'"> |
|||
<el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" /> |
|||
<span slot="label"> |
|||
<el-tooltip content="控制器中定义的权限字符,如:@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top"> |
|||
<i class="el-icon-question"></i> |
|||
</el-tooltip> |
|||
权限字符 |
|||
</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item v-if="form.menuType != 'F'"> |
|||
<span slot="label"> |
|||
<el-tooltip content="选择隐藏则路由将不会出现在侧边栏,但仍然可以访问" placement="top"> |
|||
<i class="el-icon-question"></i> |
|||
</el-tooltip> |
|||
显示状态 |
|||
</span> |
|||
<el-radio-group v-model="form.visible"> |
|||
<el-radio |
|||
v-for="dict in visibleOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictValue" |
|||
>{{dict.dictLabel}}</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item v-if="form.menuType != 'F'"> |
|||
<span slot="label"> |
|||
<el-tooltip content="选择停用则路由将不会出现在侧边栏,也不能被访问" placement="top"> |
|||
<i class="el-icon-question"></i> |
|||
</el-tooltip> |
|||
菜单状态 |
|||
</span> |
|||
<el-radio-group v-model="form.status"> |
|||
<el-radio |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictValue" |
|||
>{{dict.dictLabel}}</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item v-if="form.menuType == 'C'"> |
|||
<span slot="label"> |
|||
<el-tooltip content="选择是则会被`keep-alive`缓存,需要匹配组件的`name`和地址保持一致" placement="top"> |
|||
<i class="el-icon-question"></i> |
|||
</el-tooltip> |
|||
是否缓存 |
|||
</span> |
|||
<el-radio-group v-model="form.isCache"> |
|||
<el-radio label="0">缓存</el-radio> |
|||
<el-radio label="1">不缓存</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">确 定</el-button> |
|||
<el-button @click="cancel">取 消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu"; |
|||
import Treeselect from "@riophae/vue-treeselect"; |
|||
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; |
|||
import IconSelect from "@/components/IconSelect"; |
|||
|
|||
export default { |
|||
name: "Menu", |
|||
components: { Treeselect, IconSelect }, |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 菜单表格树数据 |
|||
menuList: [], |
|||
// 菜单树选项 |
|||
menuOptions: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 显示状态数据字典 |
|||
visibleOptions: [], |
|||
// 菜单状态数据字典 |
|||
statusOptions: [], |
|||
// 查询参数 |
|||
queryParams: { |
|||
menuName: undefined, |
|||
visible: undefined |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
menuName: [ |
|||
{ required: true, message: "菜单名称不能为空", trigger: "blur" } |
|||
], |
|||
orderNum: [ |
|||
{ required: true, message: "菜单顺序不能为空", trigger: "blur" } |
|||
], |
|||
path: [ |
|||
{ required: true, message: "路由地址不能为空", trigger: "blur" } |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.getDicts("sys_show_hide").then(response => { |
|||
this.visibleOptions = response.data; |
|||
}); |
|||
this.getDicts("sys_normal_disable").then(response => { |
|||
this.statusOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
// 选择图标 |
|||
selected(name) { |
|||
this.form.icon = name; |
|||
}, |
|||
/** 查询菜单列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
listMenu(this.queryParams).then(response => { |
|||
this.menuList = this.handleTree(response.data, "menuId"); |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
/** 转换菜单数据结构 */ |
|||
normalizer(node) { |
|||
if (node.children && !node.children.length) { |
|||
delete node.children; |
|||
} |
|||
return { |
|||
id: node.menuId, |
|||
label: node.menuName, |
|||
children: node.children |
|||
}; |
|||
}, |
|||
/** 查询菜单下拉树结构 */ |
|||
getTreeselect() { |
|||
listMenu().then(response => { |
|||
this.menuOptions = []; |
|||
const menu = { menuId: 0, menuName: '主类目', children: [] }; |
|||
menu.children = this.handleTree(response.data, "menuId"); |
|||
this.menuOptions.push(menu); |
|||
}); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
menuId: undefined, |
|||
parentId: 0, |
|||
menuName: undefined, |
|||
icon: undefined, |
|||
menuType: "M", |
|||
orderNum: undefined, |
|||
isFrame: "1", |
|||
isCache: "0", |
|||
visible: "0", |
|||
status: "0" |
|||
}; |
|||
this.resetForm("form"); |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.getList(); |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.resetForm("queryForm"); |
|||
this.handleQuery(); |
|||
}, |
|||
/** 新增按钮操作 */ |
|||
handleAdd(row) { |
|||
this.reset(); |
|||
this.getTreeselect(); |
|||
if (row != null && row.menuId) { |
|||
this.form.parentId = row.menuId; |
|||
} else { |
|||
this.form.parentId = 0; |
|||
} |
|||
this.open = true; |
|||
this.title = "添加菜单"; |
|||
}, |
|||
/** 修改按钮操作 */ |
|||
handleUpdate(row) { |
|||
this.reset(); |
|||
this.getTreeselect(); |
|||
getMenu(row.menuId).then(response => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改菜单"; |
|||
}); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm: function() { |
|||
this.$refs["form"].validate(valid => { |
|||
if (valid) { |
|||
if (this.form.menuId != undefined) { |
|||
updateMenu(this.form).then(response => { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} else { |
|||
addMenu(this.form).then(response => { |
|||
this.msgSuccess("新增成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** 删除按钮操作 */ |
|||
handleDelete(row) { |
|||
this.$confirm('是否确认删除名称为"' + row.menuName + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return delMenu(row.menuId); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
@ -1,339 +1,327 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> |
|||
<el-form-item label="公告标题" prop="noticeTitle"> |
|||
<el-input |
|||
v-model="queryParams.noticeTitle" |
|||
placeholder="请输入公告标题" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="操作人员" prop="createBy"> |
|||
<el-input |
|||
v-model="queryParams.createBy" |
|||
placeholder="请输入操作人员" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="类型" prop="noticeType"> |
|||
<el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable size="small"> |
|||
<el-option |
|||
v-for="dict in typeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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="mini" |
|||
@click="handleAdd" |
|||
v-hasPermi="['system:notice:add']" |
|||
>新增</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="success" |
|||
plain |
|||
icon="el-icon-edit" |
|||
size="mini" |
|||
:disabled="single" |
|||
@click="handleUpdate" |
|||
v-hasPermi="['system:notice:edit']" |
|||
>修改</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="danger" |
|||
plain |
|||
icon="el-icon-delete" |
|||
size="mini" |
|||
:disabled="multiple" |
|||
@click="handleDelete" |
|||
v-hasPermi="['system:notice:remove']" |
|||
>删除</el-button> |
|||
</el-col> |
|||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
|||
</el-row> |
|||
|
|||
<el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column label="序号" align="center" prop="noticeId" width="100" /> |
|||
<el-table-column |
|||
label="公告标题" |
|||
align="center" |
|||
prop="noticeTitle" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
<el-table-column |
|||
label="公告类型" |
|||
align="center" |
|||
prop="noticeType" |
|||
:formatter="typeFormat" |
|||
width="100" |
|||
/> |
|||
<el-table-column |
|||
label="状态" |
|||
align="center" |
|||
prop="status" |
|||
:formatter="statusFormat" |
|||
width="100" |
|||
/> |
|||
<el-table-column label="创建者" align="center" prop="createBy" width="100" /> |
|||
<el-table-column label="创建时间" align="center" prop="createTime" width="100"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
v-hasPermi="['system:notice:edit']" |
|||
>修改</el-button> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['system:notice:remove']" |
|||
>删除</el-button> |
|||
</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="780px" append-to-body> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="公告标题" prop="noticeTitle"> |
|||
<el-input v-model="form.noticeTitle" placeholder="请输入公告标题" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="公告类型" prop="noticeType"> |
|||
<el-select v-model="form.noticeType" placeholder="请选择"> |
|||
<el-option |
|||
v-for="dict in typeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="状态"> |
|||
<el-radio-group v-model="form.status"> |
|||
<el-radio |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictValue" |
|||
>{{dict.dictLabel}}</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="内容"> |
|||
<editor v-model="form.noticeContent" :min-height="192"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
<el-button @click="cancel">取 消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice"; |
|||
|
|||
export default { |
|||
name: "Notice", |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 公告表格数据 |
|||
noticeList: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 类型数据字典 |
|||
statusOptions: [], |
|||
// 状态数据字典 |
|||
typeOptions: [], |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
noticeTitle: undefined, |
|||
createBy: undefined, |
|||
status: undefined |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
noticeTitle: [ |
|||
{ required: true, message: "公告标题不能为空", trigger: "blur" } |
|||
], |
|||
noticeType: [ |
|||
{ required: true, message: "公告类型不能为空", trigger: "change" } |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.getDicts("sys_notice_status").then(response => { |
|||
this.statusOptions = response.data; |
|||
}); |
|||
this.getDicts("sys_notice_type").then(response => { |
|||
this.typeOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
/** 查询公告列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
listNotice(this.queryParams).then(response => { |
|||
this.noticeList = response.rows; |
|||
this.total = response.total; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
// 公告状态字典翻译 |
|||
statusFormat(row, column) { |
|||
return this.selectDictLabel(this.statusOptions, row.status); |
|||
}, |
|||
// 公告状态字典翻译 |
|||
typeFormat(row, column) { |
|||
return this.selectDictLabel(this.typeOptions, row.noticeType); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
noticeId: undefined, |
|||
noticeTitle: undefined, |
|||
noticeType: undefined, |
|||
noticeContent: undefined, |
|||
status: "0" |
|||
}; |
|||
this.resetForm("form"); |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.queryParams.pageNum = 1; |
|||
this.getList(); |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.resetForm("queryForm"); |
|||
this.handleQuery(); |
|||
}, |
|||
// 多选框选中数据 |
|||
handleSelectionChange(selection) { |
|||
this.ids = selection.map(item => item.noticeId) |
|||
this.single = selection.length!=1 |
|||
this.multiple = !selection.length |
|||
}, |
|||
/** 新增按钮操作 */ |
|||
handleAdd() { |
|||
this.reset(); |
|||
this.open = true; |
|||
this.title = "添加公告"; |
|||
}, |
|||
/** 修改按钮操作 */ |
|||
handleUpdate(row) { |
|||
this.reset(); |
|||
const noticeId = row.noticeId || this.ids |
|||
getNotice(noticeId).then(response => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改公告"; |
|||
}); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm: function() { |
|||
this.$refs["form"].validate(valid => { |
|||
if (valid) { |
|||
if (this.form.noticeId != undefined) { |
|||
updateNotice(this.form).then(response => { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} else { |
|||
addNotice(this.form).then(response => { |
|||
this.msgSuccess("新增成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** 删除按钮操作 */ |
|||
handleDelete(row) { |
|||
const noticeIds = row.noticeId || this.ids |
|||
this.$confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return delNotice(noticeIds); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> |
|||
<el-form-item label="公告标题" prop="noticeTitle"> |
|||
<el-input |
|||
v-model="queryParams.noticeTitle" |
|||
placeholder="请输入公告标题" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="操作人员" prop="createBy"> |
|||
<el-input |
|||
v-model="queryParams.createBy" |
|||
placeholder="请输入操作人员" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="类型" prop="noticeType"> |
|||
<el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable size="small"> |
|||
<el-option |
|||
v-for="dict in typeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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="mini" |
|||
@click="handleAdd" |
|||
v-hasPermi="['system:notice:add']" |
|||
>新增</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="success" |
|||
plain |
|||
icon="el-icon-edit" |
|||
size="mini" |
|||
:disabled="single" |
|||
@click="handleUpdate" |
|||
v-hasPermi="['system:notice:edit']" |
|||
>修改</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="danger" |
|||
plain |
|||
icon="el-icon-delete" |
|||
size="mini" |
|||
:disabled="multiple" |
|||
@click="handleDelete" |
|||
v-hasPermi="['system:notice:remove']" |
|||
>删除</el-button> |
|||
</el-col> |
|||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
|||
</el-row> |
|||
|
|||
<el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column label="序号" align="center" prop="noticeId" width="100" /> |
|||
<el-table-column |
|||
label="公告标题" |
|||
align="center" |
|||
prop="noticeTitle" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
<el-table-column label="公告类型" align="center" prop="noticeType" width="100"> |
|||
<template slot-scope="scope"> |
|||
<dict-tag :options="typeOptions" :value="scope.row.noticeType"/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="状态" align="center" prop="status" width="100"> |
|||
<template slot-scope="scope"> |
|||
<dict-tag :options="statusOptions" :value="scope.row.status"/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="创建者" align="center" prop="createBy" width="100" /> |
|||
<el-table-column label="创建时间" align="center" prop="createTime" width="100"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
v-hasPermi="['system:notice:edit']" |
|||
>修改</el-button> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['system:notice:remove']" |
|||
>删除</el-button> |
|||
</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="780px" append-to-body> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="公告标题" prop="noticeTitle"> |
|||
<el-input v-model="form.noticeTitle" placeholder="请输入公告标题" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="公告类型" prop="noticeType"> |
|||
<el-select v-model="form.noticeType" placeholder="请选择"> |
|||
<el-option |
|||
v-for="dict in typeOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="状态"> |
|||
<el-radio-group v-model="form.status"> |
|||
<el-radio |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictValue" |
|||
>{{dict.dictLabel}}</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="内容"> |
|||
<editor v-model="form.noticeContent" :min-height="192"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
<el-button @click="cancel">取 消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice"; |
|||
|
|||
export default { |
|||
name: "Notice", |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 公告表格数据 |
|||
noticeList: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 类型数据字典 |
|||
statusOptions: [], |
|||
// 状态数据字典 |
|||
typeOptions: [], |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
noticeTitle: undefined, |
|||
createBy: undefined, |
|||
status: undefined |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
noticeTitle: [ |
|||
{ required: true, message: "公告标题不能为空", trigger: "blur" } |
|||
], |
|||
noticeType: [ |
|||
{ required: true, message: "公告类型不能为空", trigger: "change" } |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.getDicts("sys_notice_status").then(response => { |
|||
this.statusOptions = response.data; |
|||
}); |
|||
this.getDicts("sys_notice_type").then(response => { |
|||
this.typeOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
/** 查询公告列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
listNotice(this.queryParams).then(response => { |
|||
this.noticeList = response.rows; |
|||
this.total = response.total; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
noticeId: undefined, |
|||
noticeTitle: undefined, |
|||
noticeType: undefined, |
|||
noticeContent: undefined, |
|||
status: "0" |
|||
}; |
|||
this.resetForm("form"); |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.queryParams.pageNum = 1; |
|||
this.getList(); |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.resetForm("queryForm"); |
|||
this.handleQuery(); |
|||
}, |
|||
// 多选框选中数据 |
|||
handleSelectionChange(selection) { |
|||
this.ids = selection.map(item => item.noticeId) |
|||
this.single = selection.length!=1 |
|||
this.multiple = !selection.length |
|||
}, |
|||
/** 新增按钮操作 */ |
|||
handleAdd() { |
|||
this.reset(); |
|||
this.open = true; |
|||
this.title = "添加公告"; |
|||
}, |
|||
/** 修改按钮操作 */ |
|||
handleUpdate(row) { |
|||
this.reset(); |
|||
const noticeId = row.noticeId || this.ids |
|||
getNotice(noticeId).then(response => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改公告"; |
|||
}); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm: function() { |
|||
this.$refs["form"].validate(valid => { |
|||
if (valid) { |
|||
if (this.form.noticeId != undefined) { |
|||
updateNotice(this.form).then(response => { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} else { |
|||
addNotice(this.form).then(response => { |
|||
this.msgSuccess("新增成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** 删除按钮操作 */ |
|||
handleDelete(row) { |
|||
const noticeIds = row.noticeId || this.ids |
|||
this.$confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return delNotice(noticeIds); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
@ -1,331 +1,331 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> |
|||
<el-form-item label="岗位编码" prop="postCode"> |
|||
<el-input |
|||
v-model="queryParams.postCode" |
|||
placeholder="请输入岗位编码" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="岗位名称" prop="postName"> |
|||
<el-input |
|||
v-model="queryParams.postName" |
|||
placeholder="请输入岗位名称" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="状态" prop="status"> |
|||
<el-select v-model="queryParams.status" placeholder="岗位状态" clearable size="small"> |
|||
<el-option |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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="mini" |
|||
@click="handleAdd" |
|||
v-hasPermi="['system:post:add']" |
|||
>新增</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="success" |
|||
plain |
|||
icon="el-icon-edit" |
|||
size="mini" |
|||
:disabled="single" |
|||
@click="handleUpdate" |
|||
v-hasPermi="['system:post:edit']" |
|||
>修改</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="danger" |
|||
plain |
|||
icon="el-icon-delete" |
|||
size="mini" |
|||
:disabled="multiple" |
|||
@click="handleDelete" |
|||
v-hasPermi="['system:post:remove']" |
|||
>删除</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="warning" |
|||
plain |
|||
icon="el-icon-download" |
|||
size="mini" |
|||
:loading="exportLoading" |
|||
@click="handleExport" |
|||
v-hasPermi="['system:post:export']" |
|||
>导出</el-button> |
|||
</el-col> |
|||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
|||
</el-row> |
|||
|
|||
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column label="岗位编号" align="center" prop="postId" /> |
|||
<el-table-column label="岗位编码" align="center" prop="postCode" /> |
|||
<el-table-column label="岗位名称" align="center" prop="postName" /> |
|||
<el-table-column label="岗位排序" align="center" prop="postSort" /> |
|||
<el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" /> |
|||
<el-table-column label="创建时间" align="center" prop="createTime" width="180"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.createTime) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
v-hasPermi="['system:post:edit']" |
|||
>修改</el-button> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['system:post:remove']" |
|||
>删除</el-button> |
|||
</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="500px" append-to-body> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
|||
<el-form-item label="岗位名称" prop="postName"> |
|||
<el-input v-model="form.postName" placeholder="请输入岗位名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="岗位编码" prop="postCode"> |
|||
<el-input v-model="form.postCode" placeholder="请输入编码名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="岗位顺序" prop="postSort"> |
|||
<el-input-number v-model="form.postSort" controls-position="right" :min="0" /> |
|||
</el-form-item> |
|||
<el-form-item label="岗位状态" prop="status"> |
|||
<el-radio-group v-model="form.status"> |
|||
<el-radio |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictValue" |
|||
>{{dict.dictLabel}}</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="备注" prop="remark"> |
|||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
<el-button @click="cancel">取 消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listPost, getPost, delPost, addPost, updatePost, exportPost } from "@/api/system/post"; |
|||
|
|||
export default { |
|||
name: "Post", |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 导出遮罩层 |
|||
exportLoading: false, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 岗位表格数据 |
|||
postList: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 状态数据字典 |
|||
statusOptions: [], |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
postCode: undefined, |
|||
postName: undefined, |
|||
status: undefined |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
postName: [ |
|||
{ required: true, message: "岗位名称不能为空", trigger: "blur" } |
|||
], |
|||
postCode: [ |
|||
{ required: true, message: "岗位编码不能为空", trigger: "blur" } |
|||
], |
|||
postSort: [ |
|||
{ required: true, message: "岗位顺序不能为空", trigger: "blur" } |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.getDicts("sys_normal_disable").then(response => { |
|||
this.statusOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
/** 查询岗位列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
listPost(this.queryParams).then(response => { |
|||
this.postList = response.rows; |
|||
this.total = response.total; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
// 岗位状态字典翻译 |
|||
statusFormat(row, column) { |
|||
return this.selectDictLabel(this.statusOptions, row.status); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
postId: undefined, |
|||
postCode: undefined, |
|||
postName: undefined, |
|||
postSort: 0, |
|||
status: "0", |
|||
remark: undefined |
|||
}; |
|||
this.resetForm("form"); |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.queryParams.pageNum = 1; |
|||
this.getList(); |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.resetForm("queryForm"); |
|||
this.handleQuery(); |
|||
}, |
|||
// 多选框选中数据 |
|||
handleSelectionChange(selection) { |
|||
this.ids = selection.map(item => item.postId) |
|||
this.single = selection.length!=1 |
|||
this.multiple = !selection.length |
|||
}, |
|||
/** 新增按钮操作 */ |
|||
handleAdd() { |
|||
this.reset(); |
|||
this.open = true; |
|||
this.title = "添加岗位"; |
|||
}, |
|||
/** 修改按钮操作 */ |
|||
handleUpdate(row) { |
|||
this.reset(); |
|||
const postId = row.postId || this.ids |
|||
getPost(postId).then(response => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改岗位"; |
|||
}); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm: function() { |
|||
this.$refs["form"].validate(valid => { |
|||
if (valid) { |
|||
if (this.form.postId != undefined) { |
|||
updatePost(this.form).then(response => { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} else { |
|||
addPost(this.form).then(response => { |
|||
this.msgSuccess("新增成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** 删除按钮操作 */ |
|||
handleDelete(row) { |
|||
const postIds = row.postId || this.ids; |
|||
this.$confirm('是否确认删除岗位编号为"' + postIds + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return delPost(postIds); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
}, |
|||
/** 导出按钮操作 */ |
|||
handleExport() { |
|||
const queryParams = this.queryParams; |
|||
this.$confirm('是否确认导出所有岗位数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(() => { |
|||
this.exportLoading = true; |
|||
return exportPost(queryParams); |
|||
}).then(response => { |
|||
this.download(response.msg); |
|||
this.exportLoading = false; |
|||
}).catch(() => {}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> |
|||
<el-form-item label="岗位编码" prop="postCode"> |
|||
<el-input |
|||
v-model="queryParams.postCode" |
|||
placeholder="请输入岗位编码" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="岗位名称" prop="postName"> |
|||
<el-input |
|||
v-model="queryParams.postName" |
|||
placeholder="请输入岗位名称" |
|||
clearable |
|||
size="small" |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="状态" prop="status"> |
|||
<el-select v-model="queryParams.status" placeholder="岗位状态" clearable size="small"> |
|||
<el-option |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictLabel" |
|||
:value="dict.dictValue" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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="mini" |
|||
@click="handleAdd" |
|||
v-hasPermi="['system:post:add']" |
|||
>新增</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="success" |
|||
plain |
|||
icon="el-icon-edit" |
|||
size="mini" |
|||
:disabled="single" |
|||
@click="handleUpdate" |
|||
v-hasPermi="['system:post:edit']" |
|||
>修改</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="danger" |
|||
plain |
|||
icon="el-icon-delete" |
|||
size="mini" |
|||
:disabled="multiple" |
|||
@click="handleDelete" |
|||
v-hasPermi="['system:post:remove']" |
|||
>删除</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="warning" |
|||
plain |
|||
icon="el-icon-download" |
|||
size="mini" |
|||
:loading="exportLoading" |
|||
@click="handleExport" |
|||
v-hasPermi="['system:post:export']" |
|||
>导出</el-button> |
|||
</el-col> |
|||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
|||
</el-row> |
|||
|
|||
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column label="岗位编号" align="center" prop="postId" /> |
|||
<el-table-column label="岗位编码" align="center" prop="postCode" /> |
|||
<el-table-column label="岗位名称" align="center" prop="postName" /> |
|||
<el-table-column label="岗位排序" align="center" prop="postSort" /> |
|||
<el-table-column label="状态" align="center" prop="status"> |
|||
<template slot-scope="scope"> |
|||
<dict-tag :options="statusOptions" :value="scope.row.status"/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="创建时间" align="center" prop="createTime" width="180"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.createTime) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
v-hasPermi="['system:post:edit']" |
|||
>修改</el-button> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['system:post:remove']" |
|||
>删除</el-button> |
|||
</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="500px" append-to-body> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
|||
<el-form-item label="岗位名称" prop="postName"> |
|||
<el-input v-model="form.postName" placeholder="请输入岗位名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="岗位编码" prop="postCode"> |
|||
<el-input v-model="form.postCode" placeholder="请输入编码名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="岗位顺序" prop="postSort"> |
|||
<el-input-number v-model="form.postSort" controls-position="right" :min="0" /> |
|||
</el-form-item> |
|||
<el-form-item label="岗位状态" prop="status"> |
|||
<el-radio-group v-model="form.status"> |
|||
<el-radio |
|||
v-for="dict in statusOptions" |
|||
:key="dict.dictValue" |
|||
:label="dict.dictValue" |
|||
>{{dict.dictLabel}}</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="备注" prop="remark"> |
|||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
<el-button @click="cancel">取 消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listPost, getPost, delPost, addPost, updatePost, exportPost } from "@/api/system/post"; |
|||
|
|||
export default { |
|||
name: "Post", |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 导出遮罩层 |
|||
exportLoading: false, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 岗位表格数据 |
|||
postList: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 状态数据字典 |
|||
statusOptions: [], |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
postCode: undefined, |
|||
postName: undefined, |
|||
status: undefined |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
postName: [ |
|||
{ required: true, message: "岗位名称不能为空", trigger: "blur" } |
|||
], |
|||
postCode: [ |
|||
{ required: true, message: "岗位编码不能为空", trigger: "blur" } |
|||
], |
|||
postSort: [ |
|||
{ required: true, message: "岗位顺序不能为空", trigger: "blur" } |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.getDicts("sys_normal_disable").then(response => { |
|||
this.statusOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
/** 查询岗位列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
listPost(this.queryParams).then(response => { |
|||
this.postList = response.rows; |
|||
this.total = response.total; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
postId: undefined, |
|||
postCode: undefined, |
|||
postName: undefined, |
|||
postSort: 0, |
|||
status: "0", |
|||
remark: undefined |
|||
}; |
|||
this.resetForm("form"); |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.queryParams.pageNum = 1; |
|||
this.getList(); |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.resetForm("queryForm"); |
|||
this.handleQuery(); |
|||
}, |
|||
// 多选框选中数据 |
|||
handleSelectionChange(selection) { |
|||
this.ids = selection.map(item => item.postId) |
|||
this.single = selection.length!=1 |
|||
this.multiple = !selection.length |
|||
}, |
|||
/** 新增按钮操作 */ |
|||
handleAdd() { |
|||
this.reset(); |
|||
this.open = true; |
|||
this.title = "添加岗位"; |
|||
}, |
|||
/** 修改按钮操作 */ |
|||
handleUpdate(row) { |
|||
this.reset(); |
|||
const postId = row.postId || this.ids |
|||
getPost(postId).then(response => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改岗位"; |
|||
}); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm: function() { |
|||
this.$refs["form"].validate(valid => { |
|||
if (valid) { |
|||
if (this.form.postId != undefined) { |
|||
updatePost(this.form).then(response => { |
|||
this.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} else { |
|||
addPost(this.form).then(response => { |
|||
this.msgSuccess("新增成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** 删除按钮操作 */ |
|||
handleDelete(row) { |
|||
const postIds = row.postId || this.ids; |
|||
this.$confirm('是否确认删除岗位编号为"' + postIds + '"的数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(function() { |
|||
return delPost(postIds); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
}, |
|||
/** 导出按钮操作 */ |
|||
handleExport() { |
|||
const queryParams = this.queryParams; |
|||
this.$confirm('是否确认导出所有岗位数据项?', "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}).then(() => { |
|||
this.exportLoading = true; |
|||
return exportPost(queryParams); |
|||
}).then(response => { |
|||
this.download(response.msg); |
|||
this.exportLoading = false; |
|||
}).catch(() => {}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
Loading…
Reference in new issue