parent
c628aa5be8
commit
8040ad8c03
File diff suppressed because it is too large
Load Diff
@ -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