refactor: 代码规范、Bug修复
This commit is contained in:
@@ -1,296 +1,296 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.name"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入部门名称搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<el-select
|
||||
v-model="query.enabled"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="状态"
|
||||
class="filter-item"
|
||||
style="width: 90px"
|
||||
@change="crud.toQuery"
|
||||
>
|
||||
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
|
||||
</el-select>
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation :permission="permission" />
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="500px"
|
||||
>
|
||||
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="部门名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门排序" prop="deptSort">
|
||||
<el-input-number
|
||||
v-model.number="form.deptSort"
|
||||
:min="0"
|
||||
:max="999"
|
||||
controls-position="right"
|
||||
style="width: 370px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="顶级部门">
|
||||
<el-radio-group v-model="form.isTop" style="width: 370px">
|
||||
<el-radio label="1">是</el-radio>
|
||||
<el-radio label="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.isTop === '0'" style="margin-bottom: 0;" label="上级部门" prop="pid">
|
||||
<treeselect
|
||||
v-model="form.pid"
|
||||
:load-options="loadDepts"
|
||||
:options="depts"
|
||||
style="width: 370px;"
|
||||
placeholder="选择上级类目"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="enabled">
|
||||
<el-radio v-for="item in dict.dept_status" :key="item.id" v-model="form.enabled" :label="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
lazy
|
||||
:load="getDeptDatas"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
:data="crud.data"
|
||||
row-key="id"
|
||||
@select="crud.selectChange"
|
||||
@select-all="crud.selectAllChange"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column :selectable="checkboxT" type="selection" width="55" />
|
||||
<el-table-column label="名称" prop="name" />
|
||||
<el-table-column label="排序" prop="deptSort" />
|
||||
<el-table-column label="状态" align="center" prop="enabled">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.enabled"
|
||||
:disabled="scope.row.id === 1"
|
||||
active-color="#409EFF"
|
||||
inactive-color="#F56C6C"
|
||||
@change="changeEnabled(scope.row, scope.row.enabled,)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期" />
|
||||
<el-table-column
|
||||
v-if="checkPer(['admin','dept:edit','dept:del'])"
|
||||
label="操作"
|
||||
width="130px"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<udOperation
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
:disabled-dle="scope.row.id === 1"
|
||||
msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crudDept from '@/api/system/dept'
|
||||
import Treeselect, { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
|
||||
const defaultForm = { id: null, name: null, isTop: '1', subCount: 0, pid: null, deptSort: 999, enabled: 'true' }
|
||||
export default {
|
||||
name: 'Dept',
|
||||
components: { Treeselect, crudOperation, rrOperation, udOperation, DateRangePicker },
|
||||
cruds() {
|
||||
return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
|
||||
},
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
// 设置数据字典
|
||||
dicts: ['dept_status'],
|
||||
data() {
|
||||
return {
|
||||
depts: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
deptSort: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
|
||||
]
|
||||
},
|
||||
permission: {
|
||||
add: ['admin', 'dept:add'],
|
||||
edit: ['admin', 'dept:edit'],
|
||||
del: ['admin', 'dept:del']
|
||||
},
|
||||
enabledTypeOptions: [
|
||||
{ key: 'true', display_name: '正常' },
|
||||
{ key: 'false', display_name: '禁用' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDeptDatas(tree, treeNode, resolve) {
|
||||
const params = {
|
||||
page: 1,
|
||||
size: 9999999,
|
||||
args: { pid: tree.id }
|
||||
}
|
||||
setTimeout(() => {
|
||||
crudDept.queryDeptList(params).then(res => {
|
||||
resolve(res.content)
|
||||
})
|
||||
}, 100)
|
||||
},
|
||||
// 新增与编辑前做的操作
|
||||
[CRUD.HOOK.afterToCU](crud, form) {
|
||||
if (form.pid !== null) {
|
||||
form.isTop = '0'
|
||||
} else if (form.id !== null) {
|
||||
form.isTop = '1'
|
||||
}
|
||||
form.enabled = `${form.enabled}`
|
||||
if (form.id != null) {
|
||||
this.getSupDepts(form.id)
|
||||
} else {
|
||||
this.getDepts()
|
||||
}
|
||||
},
|
||||
getSupDepts(id) {
|
||||
crudDept.queryDeptSuperiorTree(id, true).then(res => {
|
||||
const data = res.content
|
||||
this.buildDepts(data)
|
||||
this.depts = data
|
||||
})
|
||||
},
|
||||
buildDepts(depts) {
|
||||
depts.forEach(data => {
|
||||
if (data.children) {
|
||||
this.buildDepts(data.children)
|
||||
}
|
||||
if (data.hasChildren && !data.children) {
|
||||
data.children = null
|
||||
}
|
||||
})
|
||||
},
|
||||
getDepts() {
|
||||
crudDept.queryDeptList({
|
||||
page: 1,
|
||||
size: 9999999,
|
||||
args: { enabled: true }
|
||||
}).then(res => {
|
||||
this.depts = res.content.map(function(obj) {
|
||||
if (obj.hasChildren) {
|
||||
obj.children = null
|
||||
}
|
||||
return obj
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取弹窗内部门数据
|
||||
loadDepts({ action, parentNode, callback }) {
|
||||
if (action === LOAD_CHILDREN_OPTIONS) {
|
||||
crudDept.queryDeptList({
|
||||
page: 1,
|
||||
size: 9999999,
|
||||
args: { enabled: true, pid: parentNode.id }
|
||||
}).then(res => {
|
||||
parentNode.children = res.content.map(function(obj) {
|
||||
if (obj.hasChildren) {
|
||||
obj.children = null
|
||||
}
|
||||
return obj
|
||||
})
|
||||
setTimeout(() => {
|
||||
callback()
|
||||
}, 100)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 提交前的验证
|
||||
[CRUD.HOOK.afterValidateCU]() {
|
||||
if (this.form.pid !== null && this.form.pid === this.form.id) {
|
||||
this.$message({
|
||||
message: '上级部门不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.form.isTop === '1') {
|
||||
this.form.pid = null
|
||||
}
|
||||
return true
|
||||
},
|
||||
// 改变状态
|
||||
changeEnabled(data, val) {
|
||||
this.$confirm('此操作将 "' + this.dict.label.dept_status[val] + '" ' + data.name + '部门, 是否继续？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
crudDept.edit(data).then(() => {
|
||||
this.crud.notify(this.dict.label.dept_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
}).catch(err => {
|
||||
data.enabled = !data.enabled
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
}).catch(() => {
|
||||
data.enabled = !data.enabled
|
||||
})
|
||||
},
|
||||
checkboxT(row) {
|
||||
return row.id !== 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .vue-treeselect__control, ::v-deep .vue-treeselect__placeholder, ::v-deep .vue-treeselect__single-value {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
</style>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.name"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入部门名称搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<el-select
|
||||
v-model="query.enabled"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="状态"
|
||||
class="filter-item"
|
||||
style="width: 90px"
|
||||
@change="crud.toQuery"
|
||||
>
|
||||
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
|
||||
</el-select>
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation :permission="permission" />
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="500px"
|
||||
>
|
||||
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="部门名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门排序" prop="deptSort">
|
||||
<el-input-number
|
||||
v-model.number="form.deptSort"
|
||||
:min="0"
|
||||
:max="999"
|
||||
controls-position="right"
|
||||
style="width: 370px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="顶级部门">
|
||||
<el-radio-group v-model="form.isTop" style="width: 370px">
|
||||
<el-radio label="1">是</el-radio>
|
||||
<el-radio label="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.isTop === '0'" style="margin-bottom: 0;" label="上级部门" prop="pid">
|
||||
<treeselect
|
||||
v-model="form.pid"
|
||||
:load-options="loadDepts"
|
||||
:options="depts"
|
||||
style="width: 370px;"
|
||||
placeholder="选择上级类目"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="enabled">
|
||||
<el-radio v-for="item in dict.dept_status" :key="item.id" v-model="form.enabled" :label="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
lazy
|
||||
:load="getDeptDatas"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
:data="crud.data"
|
||||
row-key="id"
|
||||
@select="crud.selectChange"
|
||||
@select-all="crud.selectAllChange"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column :selectable="checkboxT" type="selection" width="55" />
|
||||
<el-table-column label="名称" prop="name" />
|
||||
<el-table-column label="排序" prop="deptSort" />
|
||||
<el-table-column label="状态" align="center" prop="enabled">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.enabled"
|
||||
:disabled="scope.row.id === 1"
|
||||
active-color="#67C23A"
|
||||
inactive-color="#F56C6C"
|
||||
@change="changeEnabled(scope.row, scope.row.enabled,)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期" />
|
||||
<el-table-column
|
||||
v-if="checkPer(['admin','dept:edit','dept:del'])"
|
||||
label="操作"
|
||||
width="130px"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<udOperation
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
:disabled-dle="scope.row.id === 1"
|
||||
msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crudDept from '@/api/system/dept'
|
||||
import Treeselect, { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
|
||||
const defaultForm = { id: null, name: null, isTop: '1', subCount: 0, pid: null, deptSort: 999, enabled: 'true' }
|
||||
export default {
|
||||
name: 'Dept',
|
||||
components: { Treeselect, crudOperation, rrOperation, udOperation, DateRangePicker },
|
||||
cruds() {
|
||||
return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
|
||||
},
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
// 设置数据字典
|
||||
dicts: ['dept_status'],
|
||||
data() {
|
||||
return {
|
||||
depts: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
deptSort: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
|
||||
]
|
||||
},
|
||||
permission: {
|
||||
add: ['admin', 'dept:add'],
|
||||
edit: ['admin', 'dept:edit'],
|
||||
del: ['admin', 'dept:del']
|
||||
},
|
||||
enabledTypeOptions: [
|
||||
{ key: 'true', display_name: '正常' },
|
||||
{ key: 'false', display_name: '禁用' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDeptDatas(tree, treeNode, resolve) {
|
||||
const params = {
|
||||
page: 1,
|
||||
size: 9999999,
|
||||
args: { pid: tree.id }
|
||||
}
|
||||
setTimeout(() => {
|
||||
crudDept.queryDeptList(params).then(res => {
|
||||
resolve(res.content)
|
||||
})
|
||||
}, 100)
|
||||
},
|
||||
// 新增与编辑前做的操作
|
||||
[CRUD.HOOK.afterToCU](crud, form) {
|
||||
if (form.pid !== null) {
|
||||
form.isTop = '0'
|
||||
} else if (form.id !== null) {
|
||||
form.isTop = '1'
|
||||
}
|
||||
form.enabled = `${form.enabled}`
|
||||
if (form.id != null) {
|
||||
this.getSupDepts(form.id)
|
||||
} else {
|
||||
this.getDepts()
|
||||
}
|
||||
},
|
||||
getSupDepts(id) {
|
||||
crudDept.queryDeptSuperiorTree(id, true).then(res => {
|
||||
const data = res.content
|
||||
this.buildDepts(data)
|
||||
this.depts = data
|
||||
})
|
||||
},
|
||||
buildDepts(depts) {
|
||||
depts.forEach(data => {
|
||||
if (data.children) {
|
||||
this.buildDepts(data.children)
|
||||
}
|
||||
if (data.hasChildren && !data.children) {
|
||||
data.children = null
|
||||
}
|
||||
})
|
||||
},
|
||||
getDepts() {
|
||||
crudDept.queryDeptList({
|
||||
page: 1,
|
||||
size: 9999999,
|
||||
args: { enabled: true }
|
||||
}).then(res => {
|
||||
this.depts = res.content.map(function(obj) {
|
||||
if (obj.hasChildren) {
|
||||
obj.children = null
|
||||
}
|
||||
return obj
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取弹窗内部门数据
|
||||
loadDepts({ action, parentNode, callback }) {
|
||||
if (action === LOAD_CHILDREN_OPTIONS) {
|
||||
crudDept.queryDeptList({
|
||||
page: 1,
|
||||
size: 9999999,
|
||||
args: { enabled: true, pid: parentNode.id }
|
||||
}).then(res => {
|
||||
parentNode.children = res.content.map(function(obj) {
|
||||
if (obj.hasChildren) {
|
||||
obj.children = null
|
||||
}
|
||||
return obj
|
||||
})
|
||||
setTimeout(() => {
|
||||
callback()
|
||||
}, 100)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 提交前的验证
|
||||
[CRUD.HOOK.afterValidateCU]() {
|
||||
if (this.form.pid !== null && this.form.pid === this.form.id) {
|
||||
this.$message({
|
||||
message: '上级部门不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.form.isTop === '1') {
|
||||
this.form.pid = null
|
||||
}
|
||||
return true
|
||||
},
|
||||
// 改变状态
|
||||
changeEnabled(data, val) {
|
||||
this.$confirm('此操作将 "' + this.dict.label.dept_status[val] + '" ' + data.name + '部门, 是否继续？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
crudDept.edit(data).then(() => {
|
||||
this.crud.notify(this.dict.label.dept_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
}).catch(err => {
|
||||
data.enabled = !data.enabled
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
}).catch(() => {
|
||||
data.enabled = !data.enabled
|
||||
})
|
||||
},
|
||||
checkboxT(row) {
|
||||
return row.id !== 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .vue-treeselect__control, ::v-deep .vue-treeselect__placeholder, ::v-deep .vue-treeselect__single-value {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
</style>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,150 +1,150 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="query.dictName === ''">
|
||||
<div class="my-code">点击字典查看详情</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.label"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入字典标签查询"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="toQuery"
|
||||
/>
|
||||
<rrOperation />
|
||||
</div>
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="500px"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="字典标签" prop="label">
|
||||
<el-input v-model="form.label" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="字典值" prop="value">
|
||||
<el-input v-model="form.value" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="dictSort">
|
||||
<el-input-number
|
||||
v-model.number="form.dictSort"
|
||||
:min="0"
|
||||
:max="999"
|
||||
controls-position="right"
|
||||
style="width: 370px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
highlight-current-row
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column label="所属字典">
|
||||
{{ query.dictName }}
|
||||
</el-table-column>
|
||||
<el-table-column prop="label" label="字典标签" />
|
||||
<el-table-column prop="value" label="字典值" />
|
||||
<el-table-column prop="dictSort" label="排序" />
|
||||
<el-table-column
|
||||
v-if="checkPer(['admin','dict:edit','dict:del'])"
|
||||
label="操作"
|
||||
width="130px"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<udOperation
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crudDictDetail from '@/api/system/dictDetail'
|
||||
import CRUD, { form, header, presenter } from '@crud/crud'
|
||||
import pagination from '@crud/Pagination'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
|
||||
const defaultForm = { id: null, label: null, value: null, dictSort: 999 }
|
||||
|
||||
export default {
|
||||
components: { pagination, rrOperation, udOperation },
|
||||
cruds() {
|
||||
return [
|
||||
CRUD({
|
||||
title: '字典详情', url: 'api/dictDetail', query: { dictName: '' },
|
||||
crudMethod: { ...crudDictDetail },
|
||||
optShow: {
|
||||
add: true,
|
||||
edit: true,
|
||||
del: true,
|
||||
reset: false
|
||||
},
|
||||
queryOnPresenterCreated: false
|
||||
})
|
||||
]
|
||||
},
|
||||
mixins: [
|
||||
presenter(),
|
||||
header(),
|
||||
form(function() {
|
||||
return Object.assign({ dict: { id: this.dictId }}, defaultForm)
|
||||
})],
|
||||
data() {
|
||||
return {
|
||||
dictId: null,
|
||||
rules: {
|
||||
label: [
|
||||
{ required: true, message: '请输入字典标签', trigger: 'blur' }
|
||||
],
|
||||
value: [
|
||||
{ required: true, message: '请输入字典值', trigger: 'blur' }
|
||||
],
|
||||
dictSort: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
|
||||
]
|
||||
},
|
||||
permission: {
|
||||
add: ['admin', 'dict:add'],
|
||||
edit: ['admin', 'dict:edit'],
|
||||
del: ['admin', 'dict:del']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="query.dictName === ''">
|
||||
<div class="my-code">点击字典查看详情</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.label"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入字典标签查询"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="toQuery"
|
||||
/>
|
||||
<rrOperation />
|
||||
</div>
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="500px"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="字典标签" prop="label">
|
||||
<el-input v-model="form.label" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="字典值" prop="value">
|
||||
<el-input v-model="form.value" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="dictSort">
|
||||
<el-input-number
|
||||
v-model.number="form.dictSort"
|
||||
:min="0"
|
||||
:max="999"
|
||||
controls-position="right"
|
||||
style="width: 370px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
highlight-current-row
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column label="所属字典">
|
||||
{{ query.dictName }}
|
||||
</el-table-column>
|
||||
<el-table-column prop="label" label="字典标签" />
|
||||
<el-table-column prop="value" label="字典值" />
|
||||
<el-table-column prop="dictSort" label="排序" />
|
||||
<el-table-column
|
||||
v-if="checkPer(['admin','dict:edit','dict:del'])"
|
||||
label="操作"
|
||||
width="130px"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<udOperation
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crudDictDetail from '@/api/system/dictDetail'
|
||||
import CRUD, { form, header, presenter } from '@crud/crud'
|
||||
import pagination from '@crud/Pagination'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
|
||||
const defaultForm = { id: null, label: null, value: null, dictSort: 999 }
|
||||
|
||||
export default {
|
||||
components: { pagination, rrOperation, udOperation },
|
||||
cruds() {
|
||||
return [
|
||||
CRUD({
|
||||
title: '字典详情', url: 'api/dictDetail', query: { dictName: '' },
|
||||
crudMethod: { ...crudDictDetail },
|
||||
optShow: {
|
||||
add: true,
|
||||
edit: true,
|
||||
del: true,
|
||||
reset: false
|
||||
},
|
||||
queryOnPresenterCreated: false
|
||||
})
|
||||
]
|
||||
},
|
||||
mixins: [
|
||||
presenter(),
|
||||
header(),
|
||||
form(function() {
|
||||
return Object.assign({ dict: { id: this.dictId }}, defaultForm)
|
||||
})],
|
||||
data() {
|
||||
return {
|
||||
dictId: null,
|
||||
rules: {
|
||||
label: [
|
||||
{ required: true, message: '请输入字典标签', trigger: 'blur' }
|
||||
],
|
||||
value: [
|
||||
{ required: true, message: '请输入字典值', trigger: 'blur' }
|
||||
],
|
||||
dictSort: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
|
||||
]
|
||||
},
|
||||
permission: {
|
||||
add: ['admin', 'dict:add'],
|
||||
edit: ['admin', 'dict:edit'],
|
||||
del: ['admin', 'dict:del']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,165 +1,165 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--表单组件-->
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="500px"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="字典名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.description" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 字典列表 -->
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="24" :sm="24" :md="10" :lg="11" :xl="11" style="margin-bottom: 10px">
|
||||
<el-card class="box-card">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.blurry"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入名称或者描述搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation :permission="permission" />
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
highlight-current-row
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="name" label="名称" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="description" label="描述" />
|
||||
<el-table-column
|
||||
v-if="checkPer(['admin','dict:edit','dict:del'])"
|
||||
label="操作"
|
||||
width="130px"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<udOperation
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- 字典详情列表 -->
|
||||
<el-col :xs="24" :sm="24" :md="14" :lg="13" :xl="13">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>字典详情</span>
|
||||
<el-button
|
||||
v-if="checkPer(['admin','dict:add']) && this.$refs.dictDetail && this.$refs.dictDetail.query.dictName"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
style="float: right;padding: 4px 10px"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="$refs.dictDetail && $refs.dictDetail.crud.toAdd()"
|
||||
>新增
|
||||
</el-button>
|
||||
</div>
|
||||
<dictDetail ref="dictDetail" :permission="permission" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dictDetail from './dictDetail'
|
||||
import crudDict from '@/api/system/dict'
|
||||
import CRUD, { form, header, presenter } from '@crud/crud'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
|
||||
const defaultForm = { id: null, name: null, description: null, dictDetails: [] }
|
||||
|
||||
export default {
|
||||
name: 'Dict',
|
||||
components: { crudOperation, pagination, rrOperation, udOperation, dictDetail },
|
||||
cruds() {
|
||||
return [
|
||||
CRUD({ title: '字典', url: 'api/dict', crudMethod: { ...crudDict }})
|
||||
]
|
||||
},
|
||||
mixins: [presenter(), header(), form(defaultForm)],
|
||||
data() {
|
||||
return {
|
||||
queryTypeOptions: [
|
||||
{ key: 'name', display_name: '字典名称' },
|
||||
{ key: 'description', display_name: '描述' }
|
||||
],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
permission: {
|
||||
add: ['admin', 'dict:add'],
|
||||
edit: ['admin', 'dict:edit'],
|
||||
del: ['admin', 'dict:del']
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取数据前设置好接口地址
|
||||
[CRUD.HOOK.beforeRefresh]() {
|
||||
if (this.$refs.dictDetail) {
|
||||
this.$refs.dictDetail.query.dictName = ''
|
||||
}
|
||||
return true
|
||||
},
|
||||
// 选中字典后，设置字典详情数据
|
||||
handleCurrentChange(val) {
|
||||
if (val) {
|
||||
this.$refs.dictDetail.query.dictName = val.name
|
||||
this.$refs.dictDetail.dictId = val.id
|
||||
this.$refs.dictDetail.crud.toQuery()
|
||||
}
|
||||
},
|
||||
// 编辑前将字典明细临时清空，避免日志入库数据过长
|
||||
[CRUD.HOOK.beforeToEdit](crud, form) {
|
||||
// 将角色的菜单清空，避免日志入库数据过长
|
||||
form.dictDetails = null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--表单组件-->
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="500px"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="字典名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.description" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 字典列表 -->
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="24" :sm="24" :md="10" :lg="11" :xl="11" style="margin-bottom: 10px">
|
||||
<el-card class="box-card">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.blurry"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入名称或者描述搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation :permission="permission" />
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
highlight-current-row
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="name" label="名称" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="description" label="描述" />
|
||||
<el-table-column
|
||||
v-if="checkPer(['admin','dict:edit','dict:del'])"
|
||||
label="操作"
|
||||
width="130px"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<udOperation
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- 字典详情列表 -->
|
||||
<el-col :xs="24" :sm="24" :md="14" :lg="13" :xl="13">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>字典详情</span>
|
||||
<el-button
|
||||
v-if="checkPer(['admin','dict:add']) && this.$refs.dictDetail && this.$refs.dictDetail.query.dictName"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
style="float: right;padding: 4px 10px"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="$refs.dictDetail && $refs.dictDetail.crud.toAdd()"
|
||||
>新增
|
||||
</el-button>
|
||||
</div>
|
||||
<dictDetail ref="dictDetail" :permission="permission" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dictDetail from './dictDetail'
|
||||
import crudDict from '@/api/system/dict'
|
||||
import CRUD, { form, header, presenter } from '@crud/crud'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
|
||||
const defaultForm = { id: null, name: null, description: null, dictDetails: [] }
|
||||
|
||||
export default {
|
||||
name: 'Dict',
|
||||
components: { crudOperation, pagination, rrOperation, udOperation, dictDetail },
|
||||
cruds() {
|
||||
return [
|
||||
CRUD({ title: '字典', url: 'api/dict', crudMethod: { ...crudDict }})
|
||||
]
|
||||
},
|
||||
mixins: [presenter(), header(), form(defaultForm)],
|
||||
data() {
|
||||
return {
|
||||
queryTypeOptions: [
|
||||
{ key: 'name', display_name: '字典名称' },
|
||||
{ key: 'description', display_name: '描述' }
|
||||
],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
permission: {
|
||||
add: ['admin', 'dict:add'],
|
||||
edit: ['admin', 'dict:edit'],
|
||||
del: ['admin', 'dict:del']
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取数据前设置好接口地址
|
||||
[CRUD.HOOK.beforeRefresh]() {
|
||||
if (this.$refs.dictDetail) {
|
||||
this.$refs.dictDetail.query.dictName = ''
|
||||
}
|
||||
return true
|
||||
},
|
||||
// 选中字典后，设置字典详情数据
|
||||
handleCurrentChange(val) {
|
||||
if (val) {
|
||||
this.$refs.dictDetail.query.dictName = val.name
|
||||
this.$refs.dictDetail.dictId = val.id
|
||||
this.$refs.dictDetail.crud.toQuery()
|
||||
}
|
||||
},
|
||||
// 编辑前将字典明细临时清空，避免日志入库数据过长
|
||||
[CRUD.HOOK.beforeToEdit](crud, form) {
|
||||
// 将角色的菜单清空，避免日志入库数据过长
|
||||
form.dictDetails = null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<elFrame :src="druidSqlApi" />
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import elFrame from '@/components/Iframe/index'
|
||||
|
||||
export default {
|
||||
name: 'DruidSqlConsole',
|
||||
components: { elFrame },
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'druidSqlApi'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<elFrame :src="druidSqlApi" />
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import elFrame from '@/components/Iframe/index'
|
||||
|
||||
export default {
|
||||
name: 'DruidSqlConsole',
|
||||
components: { elFrame },
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'druidSqlApi'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,92 +1,92 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
|
||||
<el-form-item label="发件人邮箱" prop="fromUser">
|
||||
<el-input v-model="form.fromUser" style="width: 40%" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">Sender mailbox</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="发件用户名" prop="user">
|
||||
<el-input v-model="form.user" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">Sender usernamex</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱密码" prop="pass">
|
||||
<el-input v-model="form.pass" type="password" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">email Password</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="SMTP地址" prop="host">
|
||||
<el-input v-model="form.host" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">SMTP address</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="SMTP端口" prop="port">
|
||||
<el-input v-model="form.port" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">SMTP port</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button :loading="loading" size="medium" type="primary" @click="doSubmit">保存配置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLastEmailConfig, modifyEmailConfig } from '@/api/system/email'
|
||||
|
||||
export default {
|
||||
name: 'Config',
|
||||
data() {
|
||||
return {
|
||||
loading: false, form: { id: 1, fromUser: '', user: '', pass: '', host: '', port: '', sslEnable: '' },
|
||||
rules: {
|
||||
fromUser: [
|
||||
{ required: true, message: '请输入发件人邮箱', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
||||
],
|
||||
user: [
|
||||
{ required: true, message: '请输入发件用户名', trigger: 'blur' }
|
||||
],
|
||||
pass: [
|
||||
{ required: true, message: '密码不能为空', trigger: 'blur' }
|
||||
],
|
||||
host: [
|
||||
{ required: true, message: 'SMTP地址不能为空', trigger: 'blur' }
|
||||
],
|
||||
port: [
|
||||
{ required: true, message: 'SMTP端口不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
getLastEmailConfig().then(res => {
|
||||
this.form = res
|
||||
})
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
modifyEmailConfig(this.form).then(res => {
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
|
||||
<el-form-item label="发件人邮箱" prop="fromUser">
|
||||
<el-input v-model="form.fromUser" style="width: 40%" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">Sender mailbox</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="发件用户名" prop="user">
|
||||
<el-input v-model="form.user" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">Sender usernamex</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱密码" prop="pass">
|
||||
<el-input v-model="form.pass" type="password" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">email Password</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="SMTP地址" prop="host">
|
||||
<el-input v-model="form.host" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">SMTP address</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="SMTP端口" prop="port">
|
||||
<el-input v-model="form.port" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">SMTP port</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button :loading="loading" size="medium" type="primary" @click="doSubmit">保存配置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLastEmailConfig, modifyEmailConfig } from '@/api/system/email'
|
||||
|
||||
export default {
|
||||
name: 'Config',
|
||||
data() {
|
||||
return {
|
||||
loading: false, form: { id: 1, fromUser: '', user: '', pass: '', host: '', port: '', sslEnable: '' },
|
||||
rules: {
|
||||
fromUser: [
|
||||
{ required: true, message: '请输入发件人邮箱', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
||||
],
|
||||
user: [
|
||||
{ required: true, message: '请输入发件用户名', trigger: 'blur' }
|
||||
],
|
||||
pass: [
|
||||
{ required: true, message: '密码不能为空', trigger: 'blur' }
|
||||
],
|
||||
host: [
|
||||
{ required: true, message: 'SMTP地址不能为空', trigger: 'blur' }
|
||||
],
|
||||
port: [
|
||||
{ required: true, message: 'SMTP端口不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
getLastEmailConfig().then(res => {
|
||||
this.form = res
|
||||
})
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
modifyEmailConfig(this.form).then(res => {
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" style="padding-left: 8px;">
|
||||
<el-tab-pane label="邮箱配置" name="first">
|
||||
<Config />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="发送邮件" name="second">
|
||||
<Send />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="使用说明" name="third">
|
||||
<div>
|
||||
<blockquote class="my-blockquote"> 邮件服务器配置</blockquote>
|
||||
<pre class="my-code">
|
||||
# 邮件服务器的SMTP地址，可选，默认为smtp
|
||||
# 邮件服务器的SMTP端口，可选，默认465或者25
|
||||
# 发件人（必须正确，否则发送失败）
|
||||
# 用户名，默认为发件人邮箱前缀
|
||||
# 密码（注意，某些邮箱需要为SMTP服务单独设置密码，如QQ和163等等）
|
||||
# 是否开启ssl，默认开启</pre>
|
||||
<blockquote class="my-blockquote">更多帮助</blockquote>
|
||||
<pre class="my-code">更多帮助请查看文档：<a
|
||||
style="color:#009688"
|
||||
href="http://hutool.mydoc.io/#text_319499"
|
||||
target="_black"
|
||||
>hutool工具包</a></pre>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Config from './config.vue'
|
||||
import Send from './send.vue'
|
||||
|
||||
export default {
|
||||
name: 'Email',
|
||||
components: { Config, Send },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'second'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<template>
|
||||
<el-tabs v-model="activeName" style="padding-left: 8px;">
|
||||
<el-tab-pane label="邮箱配置" name="first">
|
||||
<Config />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="发送邮件" name="second">
|
||||
<Send />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="使用说明" name="third">
|
||||
<div>
|
||||
<blockquote class="my-blockquote"> 邮件服务器配置</blockquote>
|
||||
<pre class="my-code">
|
||||
# 邮件服务器的SMTP地址，可选，默认为smtp
|
||||
# 邮件服务器的SMTP端口，可选，默认465或者25
|
||||
# 发件人（必须正确，否则发送失败）
|
||||
# 用户名，默认为发件人邮箱前缀
|
||||
# 密码（注意，某些邮箱需要为SMTP服务单独设置密码，如QQ和163等等）
|
||||
# 是否开启ssl，默认开启</pre>
|
||||
<blockquote class="my-blockquote">更多帮助</blockquote>
|
||||
<pre class="my-code">更多帮助请查看文档：<a
|
||||
style="color:#009688"
|
||||
href="http://hutool.mydoc.io/#text_319499"
|
||||
target="_black"
|
||||
>hutool工具包</a></pre>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Config from './config.vue'
|
||||
import Send from './send.vue'
|
||||
|
||||
export default {
|
||||
name: 'Email',
|
||||
components: { Config, Send },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'second'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
@@ -1,107 +1,107 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
|
||||
<el-form-item label="邮件标题" prop="subject">
|
||||
<el-input v-model="form.subject" style="width: 646px" placeholder="请输入邮件标题，标题不能为空" />
|
||||
</el-form-item>
|
||||
<el-form-item label="收件地址" prop="tos">
|
||||
<el-input v-model="form.tos" style="width: 646px" placeholder="请输入收件地址，多个地址英文逗号,隔开" />
|
||||
</el-form-item>
|
||||
<div ref="editor" class="editor" />
|
||||
<el-button
|
||||
:loading="loading"
|
||||
style="margin-left:1.6%;margin-bottom: 30px"
|
||||
size="medium"
|
||||
type="primary"
|
||||
@click="doSubmit"
|
||||
>发送邮件
|
||||
</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { sendEmail } from '@/api/system/email'
|
||||
import { mapGetters } from 'vuex'
|
||||
import E from 'wangeditor'
|
||||
import { UploadFile } from '@/utils/CsDomUtil'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
data() {
|
||||
return {
|
||||
loading: false, form: { subject: '', tos: '', content: '' },
|
||||
rules: {
|
||||
subject: [
|
||||
{ required: true, message: '标题不能为空', trigger: 'blur' }
|
||||
],
|
||||
tos: [
|
||||
{ required: true, message: '收件人不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'imagesUploadApi',
|
||||
'baseApi'
|
||||
])
|
||||
},
|
||||
mounted() {
|
||||
const _this = this
|
||||
var editor = new E(this.$refs.editor)
|
||||
// 自定义菜单配置
|
||||
editor.config.zIndex = 10
|
||||
// 文件上传
|
||||
editor.config.customUploadImg = function(files, insert) {
|
||||
// files 是 input 中选中的文件列表
|
||||
// insert 是获取图片 url 后，插入到编辑器的方法
|
||||
files.forEach(image => {
|
||||
UploadFile(_this.imagesUploadApi, image).then(res => {
|
||||
const data = res.data
|
||||
const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
|
||||
insert(url)
|
||||
})
|
||||
})
|
||||
}
|
||||
editor.config.onchange = (html) => {
|
||||
this.form.content = html
|
||||
}
|
||||
editor.create()
|
||||
},
|
||||
methods: {
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
sendEmail(this.form).then(res => {
|
||||
this.$notify({
|
||||
title: '发送成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.editor {
|
||||
text-align: left;
|
||||
margin: 20px;
|
||||
width: 730px;
|
||||
}
|
||||
|
||||
::v-deep .w-e-text-container {
|
||||
height: 360px !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
|
||||
<el-form-item label="邮件标题" prop="subject">
|
||||
<el-input v-model="form.subject" style="width: 646px" placeholder="请输入邮件标题，标题不能为空" />
|
||||
</el-form-item>
|
||||
<el-form-item label="收件地址" prop="tos">
|
||||
<el-input v-model="form.tos" style="width: 646px" placeholder="请输入收件地址，多个地址英文逗号,隔开" />
|
||||
</el-form-item>
|
||||
<div ref="editor" class="editor" />
|
||||
<el-button
|
||||
:loading="loading"
|
||||
style="margin-left:1.6%;margin-bottom: 30px"
|
||||
size="medium"
|
||||
type="primary"
|
||||
@click="doSubmit"
|
||||
>发送邮件
|
||||
</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { sendEmail } from '@/api/system/email'
|
||||
import { mapGetters } from 'vuex'
|
||||
import E from 'wangeditor'
|
||||
import { UploadFile } from '@/utils/CsDomUtil'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
data() {
|
||||
return {
|
||||
loading: false, form: { subject: '', tos: '', content: '' },
|
||||
rules: {
|
||||
subject: [
|
||||
{ required: true, message: '标题不能为空', trigger: 'blur' }
|
||||
],
|
||||
tos: [
|
||||
{ required: true, message: '收件人不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'imagesUploadApi',
|
||||
'baseApi'
|
||||
])
|
||||
},
|
||||
mounted() {
|
||||
const _this = this
|
||||
var editor = new E(this.$refs.editor)
|
||||
// 自定义菜单配置
|
||||
editor.config.zIndex = 10
|
||||
// 文件上传
|
||||
editor.config.customUploadImg = function(files, insert) {
|
||||
// files 是 input 中选中的文件列表
|
||||
// insert 是获取图片 url 后，插入到编辑器的方法
|
||||
files.forEach(image => {
|
||||
UploadFile(_this.imagesUploadApi, image).then(res => {
|
||||
const data = res.data
|
||||
const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
|
||||
insert(url)
|
||||
})
|
||||
})
|
||||
}
|
||||
editor.config.onchange = (html) => {
|
||||
this.form.content = html
|
||||
}
|
||||
editor.create()
|
||||
},
|
||||
methods: {
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
sendEmail(this.form).then(res => {
|
||||
this.$notify({
|
||||
title: '发送成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.editor {
|
||||
text-align: left;
|
||||
margin: 20px;
|
||||
width: 730px;
|
||||
}
|
||||
|
||||
::v-deep .w-e-text-container {
|
||||
height: 360px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,116 +1,116 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<eHeader :dict="dict" :permission="permission" />
|
||||
<crudOperation :permission="permission" />
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="jobSort" label="排序">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.jobSort }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.enabled"
|
||||
active-color="#409EFF"
|
||||
inactive-color="#F56C6C"
|
||||
@change="changeEnabled(scope.row, scope.row.enabled)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期" />
|
||||
<!-- 编辑与删除 -->
|
||||
<el-table-column
|
||||
v-if="checkPer(['admin','job:edit','job:del'])"
|
||||
label="操作"
|
||||
width="130px"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<udOperation
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
<!--表单渲染-->
|
||||
<eForm :job-status="dict.job_status" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crudJob from '@/api/system/job'
|
||||
import eHeader from './module/header'
|
||||
import eForm from './module/form'
|
||||
import CRUD, { presenter } from '@crud/crud'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
|
||||
export default {
|
||||
name: 'Job',
|
||||
components: { eHeader, eForm, crudOperation, pagination, udOperation },
|
||||
cruds() {
|
||||
return CRUD({
|
||||
title: '岗位',
|
||||
url: 'api/job',
|
||||
crudMethod: { ...crudJob }
|
||||
})
|
||||
},
|
||||
mixins: [presenter()],
|
||||
// 数据字典
|
||||
dicts: ['job_status'],
|
||||
data() {
|
||||
return {
|
||||
permission: {
|
||||
add: ['admin', 'job:add'],
|
||||
edit: ['admin', 'job:edit'],
|
||||
del: ['admin', 'job:del']
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 改变状态
|
||||
changeEnabled(data, val) {
|
||||
this.$confirm('此操作将 "' + this.dict.label.job_status[val] + '" ' + data.name + '岗位, 是否继续？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// eslint-disable-next-line no-undef
|
||||
crudJob.edit(data).then(() => {
|
||||
// eslint-disable-next-line no-undef
|
||||
this.crud.notify(this.dict.label.job_status[val] + '成功', 'success')
|
||||
}).catch(err => {
|
||||
data.enabled = !data.enabled
|
||||
console.log(err.data.message)
|
||||
})
|
||||
}).catch(() => {
|
||||
data.enabled = !data.enabled
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<eHeader :dict="dict" :permission="permission" />
|
||||
<crudOperation :permission="permission" />
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="jobSort" label="排序">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.jobSort }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.enabled"
|
||||
active-color="#67C23A"
|
||||
inactive-color="#F56C6C"
|
||||
@change="changeEnabled(scope.row, scope.row.enabled)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期" />
|
||||
<!-- 编辑与删除 -->
|
||||
<el-table-column
|
||||
v-if="checkPer(['admin','job:edit','job:del'])"
|
||||
label="操作"
|
||||
width="130px"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<udOperation
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
<!--表单渲染-->
|
||||
<eForm :job-status="dict.job_status" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crudJob from '@/api/system/job'
|
||||
import eHeader from './module/header'
|
||||
import eForm from './module/form'
|
||||
import CRUD, { presenter } from '@crud/crud'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
|
||||
export default {
|
||||
name: 'Job',
|
||||
components: { eHeader, eForm, crudOperation, pagination, udOperation },
|
||||
cruds() {
|
||||
return CRUD({
|
||||
title: '岗位',
|
||||
url: 'api/job',
|
||||
crudMethod: { ...crudJob }
|
||||
})
|
||||
},
|
||||
mixins: [presenter()],
|
||||
// 数据字典
|
||||
dicts: ['job_status'],
|
||||
data() {
|
||||
return {
|
||||
permission: {
|
||||
add: ['admin', 'job:add'],
|
||||
edit: ['admin', 'job:edit'],
|
||||
del: ['admin', 'job:del']
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 改变状态
|
||||
changeEnabled(data, val) {
|
||||
this.$confirm('此操作将 "' + this.dict.label.job_status[val] + '" ' + data.name + '岗位, 是否继续？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// eslint-disable-next-line no-undef
|
||||
crudJob.edit(data).then(() => {
|
||||
// eslint-disable-next-line no-undef
|
||||
this.crud.notify(this.dict.label.job_status[val] + '成功', 'success')
|
||||
}).catch(err => {
|
||||
data.enabled = !data.enabled
|
||||
console.log(err.data.message)
|
||||
})
|
||||
}).catch(() => {
|
||||
data.enabled = !data.enabled
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,110 +1,110 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="500px"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
size="small"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item
|
||||
label="职位名称"
|
||||
prop="name"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
style="width: 370px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="职位排序"
|
||||
prop="jobSort"
|
||||
>
|
||||
<el-input-number
|
||||
v-model.number="form.jobSort"
|
||||
:min="0"
|
||||
:max="999"
|
||||
controls-position="right"
|
||||
style="width: 370px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="form.pid !== 0"
|
||||
label="状态"
|
||||
prop="enabled"
|
||||
>
|
||||
<el-radio
|
||||
v-for="item in jobStatus"
|
||||
:key="item.id"
|
||||
v-model="form.enabled"
|
||||
:label="item.value === 'true'"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
@click="crud.cancelCU"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
:loading="crud.status.cu === 2"
|
||||
type="primary"
|
||||
@click="crud.submitCU"
|
||||
>
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { form } from '@crud/crud'
|
||||
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
name: '',
|
||||
jobSort: 999,
|
||||
enabled: true
|
||||
}
|
||||
export default {
|
||||
mixins: [form(defaultForm)],
|
||||
props: {
|
||||
jobStatus: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
jobSort: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="500px"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
size="small"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item
|
||||
label="职位名称"
|
||||
prop="name"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
style="width: 370px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="职位排序"
|
||||
prop="jobSort"
|
||||
>
|
||||
<el-input-number
|
||||
v-model.number="form.jobSort"
|
||||
:min="0"
|
||||
:max="999"
|
||||
controls-position="right"
|
||||
style="width: 370px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="form.pid !== 0"
|
||||
label="状态"
|
||||
prop="enabled"
|
||||
>
|
||||
<el-radio
|
||||
v-for="item in jobStatus"
|
||||
:key="item.id"
|
||||
v-model="form.enabled"
|
||||
:label="item.value === 'true'"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
@click="crud.cancelCU"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
:loading="crud.status.cu === 2"
|
||||
type="primary"
|
||||
@click="crud.submitCU"
|
||||
>
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { form } from '@crud/crud'
|
||||
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
name: '',
|
||||
jobSort: 999,
|
||||
enabled: true
|
||||
}
|
||||
export default {
|
||||
mixins: [form(defaultForm)],
|
||||
props: {
|
||||
jobStatus: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
jobSort: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,49 +1,49 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="crud.props.searchToggle"
|
||||
>
|
||||
<el-input
|
||||
v-model="query.name"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入岗位名称搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<el-select
|
||||
v-model="query.enabled"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="状态"
|
||||
class="filter-item"
|
||||
style="width: 90px"
|
||||
@change="crud.toQuery"
|
||||
>
|
||||
<el-option v-for="item in dict.dict.job_status" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<rrOperation />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { header } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
|
||||
export default {
|
||||
components: { rrOperation, DateRangePicker },
|
||||
mixins: [header()],
|
||||
props: {
|
||||
dict: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
permission: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
v-if="crud.props.searchToggle"
|
||||
>
|
||||
<el-input
|
||||
v-model="query.name"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入岗位名称搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<el-select
|
||||
v-model="query.enabled"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="状态"
|
||||
class="filter-item"
|
||||
style="width: 90px"
|
||||
@change="crud.toQuery"
|
||||
>
|
||||
<el-option v-for="item in dict.dict.job_status" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<rrOperation />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { header } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
|
||||
export default {
|
||||
components: { rrOperation, DateRangePicker },
|
||||
mixins: [header()],
|
||||
props: {
|
||||
dict: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
permission: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,395 +1,395 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.blurry"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="模糊搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation :permission="permission" />
|
||||
</div>
|
||||
<!--表单渲染-->
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="580px"
|
||||
>
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="菜单类型" prop="type">
|
||||
<el-radio-group v-model="form.type" size="mini" style="width: 178px">
|
||||
<el-radio-button label="0">目录</el-radio-button>
|
||||
<el-radio-button label="1">菜单</el-radio-button>
|
||||
<el-radio-button label="2">按钮</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '2'" label="菜单图标" prop="icon">
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
width="450"
|
||||
trigger="click"
|
||||
@show="$refs['iconSelect'].reset()"
|
||||
>
|
||||
<IconSelect ref="iconSelect" @selected="selected" />
|
||||
<el-input slot="reference" v-model="form.icon" style="width: 450px;" 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-form-item v-show="form.type.toString() !== '2'" label="外链菜单" prop="iFrame">
|
||||
<el-radio-group v-model="form.iFrame" size="mini">
|
||||
<el-radio-button label="true">是</el-radio-button>
|
||||
<el-radio-button label="false">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() === '1'" label="菜单缓存" prop="cache">
|
||||
<el-radio-group v-model="form.cache" size="mini">
|
||||
<el-radio-button label="true">是</el-radio-button>
|
||||
<el-radio-button label="false">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden">
|
||||
<el-radio-group v-model="form.hidden" size="mini">
|
||||
<el-radio-button label="false">是</el-radio-button>
|
||||
<el-radio-button label="true">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type.toString() !== '2'" label="菜单标题" prop="title">
|
||||
<el-input
|
||||
v-model="form.title"
|
||||
:style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'"
|
||||
placeholder="菜单标题"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type.toString() === '2'" label="按钮名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="按钮名称" style="width: 178px;" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission">
|
||||
<el-input
|
||||
v-model="form.permission"
|
||||
:disabled="form.iFrame.toString() === 'true'"
|
||||
placeholder="权限标识"
|
||||
style="width: 178px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
|
||||
<el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单排序" prop="menuSort">
|
||||
<el-input-number
|
||||
v-model.number="form.menuSort"
|
||||
:min="0"
|
||||
:max="999"
|
||||
controls-position="right"
|
||||
style="width: 178px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'"
|
||||
label="组件名称"
|
||||
prop="componentName"
|
||||
>
|
||||
<el-input v-model="form.componentName" style="width: 450px;" placeholder="匹配组件内Name字段" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'"
|
||||
label="组件路径"
|
||||
prop="component"
|
||||
>
|
||||
<el-input v-model="form.component" style="width: 450px;" placeholder="组件路径" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上级类目" prop="pid">
|
||||
<treeselect
|
||||
v-model="form.pid"
|
||||
:options="menus"
|
||||
:load-options="loadMenus"
|
||||
style="width: 450px;"
|
||||
placeholder="选择上级类目"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
lazy
|
||||
:load="queryMenuByArgs"
|
||||
:data="crud.data"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
row-key="id"
|
||||
@select="crud.selectChange"
|
||||
@select-all="crud.selectAllChange"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column :show-overflow-tooltip="true" label="菜单标题" width="125px" prop="title" />
|
||||
<el-table-column prop="icon" label="图标" align="center" width="60px">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="menuSort" align="center" label="排序">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.menuSort }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
|
||||
<el-table-column prop="iFrame" label="外链" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.iFrame">是</span>
|
||||
<span v-else>否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cache" label="缓存" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.cache">是</span>
|
||||
<span v-else>否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="hidden" label="可见" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.hidden">否</span>
|
||||
<span v-else>是</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期" width="135px" />
|
||||
<el-table-column
|
||||
v-if="checkPer(['admin','menu:edit','menu:del'])"
|
||||
label="操作"
|
||||
width="150px"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<udOperation
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
|
||||
>
|
||||
<el-button
|
||||
v-permission="permission.edit"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click.stop="onCopyClick(scope.row)"
|
||||
>复制
|
||||
</el-button>
|
||||
</udOperation>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crudMenu from '@/api/system/menu'
|
||||
import IconSelect from '@/components/IconSelect'
|
||||
import Treeselect, { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
import CsMessage from '@/utils/elementui/CsMessage'
|
||||
|
||||
// crud交由presenter持有
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
title: null,
|
||||
menuSort: 999,
|
||||
path: null,
|
||||
component: null,
|
||||
componentName: null,
|
||||
iFrame: false,
|
||||
roles: [],
|
||||
pid: 0,
|
||||
icon: null,
|
||||
cache: false,
|
||||
hidden: false,
|
||||
type: 0,
|
||||
permission: null
|
||||
}
|
||||
export default {
|
||||
name: 'Menu',
|
||||
components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation, DateRangePicker },
|
||||
cruds() {
|
||||
return CRUD({ title: '菜单', url: 'api/menu', crudMethod: { ...crudMenu }})
|
||||
},
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
data() {
|
||||
return {
|
||||
menus: [],
|
||||
permission: {
|
||||
add: ['admin', 'menu:add'],
|
||||
edit: ['admin', 'menu:edit'],
|
||||
del: ['admin', 'menu:del']
|
||||
},
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: '请输入标题', trigger: 'blur' }
|
||||
],
|
||||
path: [
|
||||
{ required: true, message: '请输入地址', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 新增与编辑前做的操作
|
||||
[CRUD.HOOK.afterToCU](crud, form) {
|
||||
this.menus = []
|
||||
if (form.id != null) {
|
||||
if (form.pid === null) {
|
||||
form.pid = 0
|
||||
}
|
||||
this.getSupDepts(form.id)
|
||||
} else {
|
||||
this.menus.push({ id: 0, label: '顶级类目', children: null })
|
||||
}
|
||||
},
|
||||
queryMenuByArgs(tree, treeNode, resolve) {
|
||||
const params = {
|
||||
page: 1,
|
||||
size: 9999999,
|
||||
args: { pid: tree.id }
|
||||
}
|
||||
setTimeout(() => {
|
||||
crudMenu.queryMenuByArgs(params).then(res => {
|
||||
resolve(res.content)
|
||||
})
|
||||
}, 100)
|
||||
},
|
||||
getSupDepts(id) {
|
||||
crudMenu.queryMenuSuperior(id).then(res => {
|
||||
const children = res.map(function(obj) {
|
||||
if (!obj.leaf && !obj.children) {
|
||||
obj.children = null
|
||||
}
|
||||
return obj
|
||||
})
|
||||
this.menus = [{ id: 0, label: '顶级类目', children: children }]
|
||||
})
|
||||
},
|
||||
loadMenus({ action, parentNode, callback }) {
|
||||
if (action === LOAD_CHILDREN_OPTIONS) {
|
||||
crudMenu.queryMenuListByPid(parentNode.id).then(res => {
|
||||
parentNode.children = res.map(function(obj) {
|
||||
if (!obj.leaf) {
|
||||
obj.children = null
|
||||
}
|
||||
return obj
|
||||
})
|
||||
setTimeout(() => {
|
||||
callback()
|
||||
}, 100)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 选中图标
|
||||
selected(name) {
|
||||
this.form.icon = name
|
||||
},
|
||||
onCopyClick(row) {
|
||||
let data = {}
|
||||
if (row.type === 0) {
|
||||
// 目录
|
||||
data = {
|
||||
id: null,
|
||||
title: row.title + 'Copy',
|
||||
menuSort: 1,
|
||||
path: row.path + 'Copy',
|
||||
component: null,
|
||||
componentName: null,
|
||||
iFrame: row.IFrame,
|
||||
roles: [],
|
||||
pid: 0,
|
||||
icon: row.icon,
|
||||
cache: row.cache,
|
||||
hidden: row.hidden,
|
||||
type: row.type,
|
||||
permission: null
|
||||
}
|
||||
} else if (row.type === 1) {
|
||||
// 菜单
|
||||
data = {
|
||||
id: null,
|
||||
title: row.title + 'Copy',
|
||||
menuSort: row.menuSort,
|
||||
path: row.path + 'Copy',
|
||||
component: row.component,
|
||||
componentName: row.componentName + 'Copy',
|
||||
iFrame: row.IFrame,
|
||||
roles: [],
|
||||
pid: row.pid,
|
||||
icon: row.icon,
|
||||
cache: row.cache,
|
||||
hidden: row.hidden,
|
||||
type: row.type,
|
||||
permission: row.permission
|
||||
}
|
||||
} else if (row.type === 2) {
|
||||
// 按钮
|
||||
data = {
|
||||
id: null,
|
||||
title: row.title + 'Copy',
|
||||
menuSort: row.menuSort,
|
||||
path: null,
|
||||
component: null,
|
||||
componentName: null,
|
||||
iFrame: row.IFrame,
|
||||
roles: [],
|
||||
pid: row.pid,
|
||||
icon: null,
|
||||
cache: row.cache,
|
||||
hidden: row.hidden,
|
||||
type: row.type,
|
||||
permission: row.permission
|
||||
}
|
||||
}
|
||||
const that = this
|
||||
crudMenu.add(data).then(() => {
|
||||
setTimeout(() => {
|
||||
CsMessage.Success('复制成功')
|
||||
that.crud.toQuery()
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
::v-deep .vue-treeselect__control, ::v-deep .vue-treeselect__placeholder, ::v-deep .vue-treeselect__single-value {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.blurry"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="模糊搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation :permission="permission" />
|
||||
</div>
|
||||
<!--表单渲染-->
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="580px"
|
||||
>
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="菜单类型" prop="type">
|
||||
<el-radio-group v-model="form.type" size="mini" style="width: 178px">
|
||||
<el-radio-button label="0">目录</el-radio-button>
|
||||
<el-radio-button label="1">菜单</el-radio-button>
|
||||
<el-radio-button label="2">按钮</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '2'" label="菜单图标" prop="icon">
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
width="450"
|
||||
trigger="click"
|
||||
@show="$refs['iconSelect'].reset()"
|
||||
>
|
||||
<IconSelect ref="iconSelect" @selected="selected" />
|
||||
<el-input slot="reference" v-model="form.icon" style="width: 450px;" 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-form-item v-show="form.type.toString() !== '2'" label="外链菜单" prop="iFrame">
|
||||
<el-radio-group v-model="form.iFrame" size="mini">
|
||||
<el-radio-button label="true">是</el-radio-button>
|
||||
<el-radio-button label="false">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() === '1'" label="菜单缓存" prop="cache">
|
||||
<el-radio-group v-model="form.cache" size="mini">
|
||||
<el-radio-button label="true">是</el-radio-button>
|
||||
<el-radio-button label="false">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden">
|
||||
<el-radio-group v-model="form.hidden" size="mini">
|
||||
<el-radio-button label="false">是</el-radio-button>
|
||||
<el-radio-button label="true">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type.toString() !== '2'" label="菜单标题" prop="title">
|
||||
<el-input
|
||||
v-model="form.title"
|
||||
:style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'"
|
||||
placeholder="菜单标题"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type.toString() === '2'" label="按钮名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="按钮名称" style="width: 178px;" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission">
|
||||
<el-input
|
||||
v-model="form.permission"
|
||||
:disabled="form.iFrame.toString() === 'true'"
|
||||
placeholder="权限标识"
|
||||
style="width: 178px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
|
||||
<el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单排序" prop="menuSort">
|
||||
<el-input-number
|
||||
v-model.number="form.menuSort"
|
||||
:min="0"
|
||||
:max="999"
|
||||
controls-position="right"
|
||||
style="width: 178px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'"
|
||||
label="组件名称"
|
||||
prop="componentName"
|
||||
>
|
||||
<el-input v-model="form.componentName" style="width: 450px;" placeholder="匹配组件内Name字段" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'"
|
||||
label="组件路径"
|
||||
prop="component"
|
||||
>
|
||||
<el-input v-model="form.component" style="width: 450px;" placeholder="组件路径" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上级类目" prop="pid">
|
||||
<treeselect
|
||||
v-model="form.pid"
|
||||
:options="menus"
|
||||
:load-options="loadMenus"
|
||||
style="width: 450px;"
|
||||
placeholder="选择上级类目"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
lazy
|
||||
:load="queryMenuByArgs"
|
||||
:data="crud.data"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
row-key="id"
|
||||
@select="crud.selectChange"
|
||||
@select-all="crud.selectAllChange"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column :show-overflow-tooltip="true" label="菜单标题" width="220px" prop="title" />
|
||||
<el-table-column prop="icon" label="图标" align="center" width="60px">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="menuSort" align="center" label="排序">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.menuSort }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
|
||||
<el-table-column prop="iFrame" label="外链" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.iFrame">是</span>
|
||||
<span v-else>否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cache" label="缓存" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.cache">是</span>
|
||||
<span v-else>否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="hidden" label="可见" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.hidden">否</span>
|
||||
<span v-else>是</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期" width="135px" />
|
||||
<el-table-column
|
||||
v-if="checkPer(['admin','menu:edit','menu:del'])"
|
||||
label="操作"
|
||||
width="150px"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<udOperation
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
|
||||
>
|
||||
<el-button
|
||||
v-permission="permission.edit"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click.stop="onCopyClick(scope.row)"
|
||||
>复制
|
||||
</el-button>
|
||||
</udOperation>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crudMenu from '@/api/system/menu'
|
||||
import IconSelect from '@/components/IconSelect'
|
||||
import Treeselect, { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
import CsMessage from '@/utils/elementui/CsMessage'
|
||||
|
||||
// crud交由presenter持有
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
title: null,
|
||||
menuSort: 999,
|
||||
path: null,
|
||||
component: null,
|
||||
componentName: null,
|
||||
iFrame: false,
|
||||
roles: [],
|
||||
pid: 0,
|
||||
icon: null,
|
||||
cache: false,
|
||||
hidden: false,
|
||||
type: 0,
|
||||
permission: null
|
||||
}
|
||||
export default {
|
||||
name: 'Menu',
|
||||
components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation, DateRangePicker },
|
||||
cruds() {
|
||||
return CRUD({ title: '菜单', url: 'api/menu', crudMethod: { ...crudMenu }})
|
||||
},
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
data() {
|
||||
return {
|
||||
menus: [],
|
||||
permission: {
|
||||
add: ['admin', 'menu:add'],
|
||||
edit: ['admin', 'menu:edit'],
|
||||
del: ['admin', 'menu:del']
|
||||
},
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: '请输入标题', trigger: 'blur' }
|
||||
],
|
||||
path: [
|
||||
{ required: true, message: '请输入地址', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 新增与编辑前做的操作
|
||||
[CRUD.HOOK.afterToCU](crud, form) {
|
||||
this.menus = []
|
||||
if (form.id != null) {
|
||||
if (form.pid === null) {
|
||||
form.pid = 0
|
||||
}
|
||||
this.getSupDepts(form.id)
|
||||
} else {
|
||||
this.menus.push({ id: 0, label: '顶级类目', children: null })
|
||||
}
|
||||
},
|
||||
queryMenuByArgs(tree, treeNode, resolve) {
|
||||
const params = {
|
||||
page: 1,
|
||||
size: 9999999,
|
||||
args: { pid: tree.id }
|
||||
}
|
||||
setTimeout(() => {
|
||||
crudMenu.queryMenuByArgs(params).then(res => {
|
||||
resolve(res.content)
|
||||
})
|
||||
}, 100)
|
||||
},
|
||||
getSupDepts(id) {
|
||||
crudMenu.queryMenuSuperior(id).then(res => {
|
||||
const children = res.map(function(obj) {
|
||||
if (!obj.leaf && !obj.children) {
|
||||
obj.children = null
|
||||
}
|
||||
return obj
|
||||
})
|
||||
this.menus = [{ id: 0, label: '顶级类目', children: children }]
|
||||
})
|
||||
},
|
||||
loadMenus({ action, parentNode, callback }) {
|
||||
if (action === LOAD_CHILDREN_OPTIONS) {
|
||||
crudMenu.queryMenuListByPid(parentNode.id).then(res => {
|
||||
parentNode.children = res.map(function(obj) {
|
||||
if (!obj.leaf) {
|
||||
obj.children = null
|
||||
}
|
||||
return obj
|
||||
})
|
||||
setTimeout(() => {
|
||||
callback()
|
||||
}, 100)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 选中图标
|
||||
selected(name) {
|
||||
this.form.icon = name
|
||||
},
|
||||
onCopyClick(row) {
|
||||
let data = {}
|
||||
if (row.type === 0) {
|
||||
// 目录
|
||||
data = {
|
||||
id: null,
|
||||
title: row.title + 'Copy',
|
||||
menuSort: 1,
|
||||
path: row.path + 'Copy',
|
||||
component: null,
|
||||
componentName: null,
|
||||
iFrame: row.IFrame,
|
||||
roles: [],
|
||||
pid: 0,
|
||||
icon: row.icon,
|
||||
cache: row.cache,
|
||||
hidden: row.hidden,
|
||||
type: row.type,
|
||||
permission: null
|
||||
}
|
||||
} else if (row.type === 1) {
|
||||
// 菜单
|
||||
data = {
|
||||
id: null,
|
||||
title: row.title + 'Copy',
|
||||
menuSort: row.menuSort,
|
||||
path: row.path + 'Copy',
|
||||
component: row.component,
|
||||
componentName: row.componentName + 'Copy',
|
||||
iFrame: row.IFrame,
|
||||
roles: [],
|
||||
pid: row.pid,
|
||||
icon: row.icon,
|
||||
cache: row.cache,
|
||||
hidden: row.hidden,
|
||||
type: row.type,
|
||||
permission: row.permission
|
||||
}
|
||||
} else if (row.type === 2) {
|
||||
// 按钮
|
||||
data = {
|
||||
id: null,
|
||||
title: row.title + 'Copy',
|
||||
menuSort: row.menuSort,
|
||||
path: null,
|
||||
component: null,
|
||||
componentName: null,
|
||||
iFrame: row.IFrame,
|
||||
roles: [],
|
||||
pid: row.pid,
|
||||
icon: null,
|
||||
cache: row.cache,
|
||||
hidden: row.hidden,
|
||||
type: row.type,
|
||||
permission: row.permission
|
||||
}
|
||||
}
|
||||
const that = this
|
||||
crudMenu.add(data).then(() => {
|
||||
setTimeout(() => {
|
||||
CsMessage.Success('复制成功')
|
||||
that.crud.toQuery()
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
::v-deep .vue-treeselect__control, ::v-deep .vue-treeselect__placeholder, ::v-deep .vue-treeselect__single-value {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,143 +1,143 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<el-input
|
||||
v-model="query.userName"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入用户名称查询"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation>
|
||||
<el-button
|
||||
slot="left"
|
||||
class="filter-item"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:loading="delLoading"
|
||||
:disabled="crud.selections.length === 0"
|
||||
@click="doDelete(crud.selections)"
|
||||
>
|
||||
强退
|
||||
</el-button>
|
||||
</crudOperation>
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="uid" label="会话编号" />
|
||||
<el-table-column prop="userName" label="用户名" />
|
||||
<el-table-column prop="nickName" label="用户昵称" />
|
||||
<el-table-column prop="dept" label="部门" />
|
||||
<el-table-column prop="ip" label="登录IP" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="address" label="登录地点" />
|
||||
<el-table-column prop="browser" label="浏览器" />
|
||||
<el-table-column prop="loginTime" label="登录时间" />
|
||||
<el-table-column label="操作" width="70px" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-popover
|
||||
:ref="scope.$index"
|
||||
v-permission="['admin']"
|
||||
placement="top"
|
||||
width="180"
|
||||
>
|
||||
<p>确定强制退出该用户吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.$index].doClose()">取消</el-button>
|
||||
<el-button
|
||||
:loading="delLoading"
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="delMethod(scope.row.key, scope.$index)"
|
||||
>确定
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" size="mini" type="text">强退</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { kickOutUser } from '@/api/system/online'
|
||||
import CRUD, { crud, header, presenter } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
|
||||
export default {
|
||||
name: 'OnlineUser',
|
||||
components: { pagination, crudOperation, rrOperation },
|
||||
cruds() {
|
||||
return CRUD({ url: 'api/user/online', title: '在线用户' })
|
||||
},
|
||||
mixins: [presenter(), header(), crud()],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false,
|
||||
permission: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.crud.msg.del = '强退成功！'
|
||||
this.crud.optShow = {
|
||||
add: false,
|
||||
edit: false,
|
||||
del: false,
|
||||
download: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doDelete(datas) {
|
||||
this.$confirm(`确认强退选中的${datas.length}个用户?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.delMethod(datas)
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
// 踢出用户
|
||||
delMethod(key, index) {
|
||||
const ids = []
|
||||
if (key instanceof Array) {
|
||||
key.forEach(val => {
|
||||
ids.push(val.key)
|
||||
})
|
||||
} else ids.push(key)
|
||||
this.delLoading = true
|
||||
kickOutUser(ids).then(() => {
|
||||
this.delLoading = false
|
||||
if (this.$refs[index]) {
|
||||
this.$refs[index].doClose()
|
||||
}
|
||||
this.crud.dleChangePage(1)
|
||||
this.crud.delSuccessNotify()
|
||||
this.crud.toQuery()
|
||||
}).catch(() => {
|
||||
this.delLoading = false
|
||||
if (this.$refs[index]) {
|
||||
this.$refs[index].doClose()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<el-input
|
||||
v-model="query.userName"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入用户名称查询"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation>
|
||||
<el-button
|
||||
slot="left"
|
||||
class="filter-item"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:loading="delLoading"
|
||||
:disabled="crud.selections.length === 0"
|
||||
@click="doDelete(crud.selections)"
|
||||
>
|
||||
强退
|
||||
</el-button>
|
||||
</crudOperation>
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="uid" label="会话编号" />
|
||||
<el-table-column prop="userName" label="用户名" />
|
||||
<el-table-column prop="nickName" label="用户昵称" />
|
||||
<el-table-column prop="dept" label="部门" />
|
||||
<el-table-column prop="ip" label="登录IP" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="address" label="登录地点" />
|
||||
<el-table-column prop="browser" label="浏览器" />
|
||||
<el-table-column prop="loginTime" label="登录时间" />
|
||||
<el-table-column label="操作" width="70px" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-popover
|
||||
:ref="scope.$index"
|
||||
v-permission="['admin']"
|
||||
placement="top"
|
||||
width="180"
|
||||
>
|
||||
<p>确定强制退出该用户吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.$index].doClose()">取消</el-button>
|
||||
<el-button
|
||||
:loading="delLoading"
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="delMethod(scope.row.key, scope.$index)"
|
||||
>确定
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" size="mini" type="text">强退</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { kickOutUser } from '@/api/system/online'
|
||||
import CRUD, { crud, header, presenter } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
|
||||
export default {
|
||||
name: 'OnlineUser',
|
||||
components: { pagination, crudOperation, rrOperation },
|
||||
cruds() {
|
||||
return CRUD({ url: 'api/user/online', title: '在线用户' })
|
||||
},
|
||||
mixins: [presenter(), header(), crud()],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false,
|
||||
permission: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.crud.msg.del = '强退成功！'
|
||||
this.crud.optShow = {
|
||||
add: false,
|
||||
edit: false,
|
||||
del: false,
|
||||
download: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doDelete(datas) {
|
||||
this.$confirm(`确认强退选中的${datas.length}个用户?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.delMethod(datas)
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
// 踢出用户
|
||||
delMethod(key, index) {
|
||||
const ids = []
|
||||
if (key instanceof Array) {
|
||||
key.forEach(val => {
|
||||
ids.push(val.key)
|
||||
})
|
||||
} else ids.push(key)
|
||||
this.delLoading = true
|
||||
kickOutUser(ids).then(() => {
|
||||
this.delLoading = false
|
||||
if (this.$refs[index]) {
|
||||
this.$refs[index].doClose()
|
||||
}
|
||||
this.crud.dleChangePage(1)
|
||||
this.crud.delSuccessNotify()
|
||||
this.crud.toQuery()
|
||||
}).catch(() => {
|
||||
this.delLoading = false
|
||||
if (this.$refs[index]) {
|
||||
this.$refs[index].doClose()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,275 +1,275 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.jobName"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入任务名称搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation :permission="permission">
|
||||
<!-- 任务日志 -->
|
||||
<el-button
|
||||
slot="right"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="info"
|
||||
icon="el-icon-tickets"
|
||||
@click="doLog"
|
||||
>日志
|
||||
</el-button>
|
||||
</crudOperation>
|
||||
<Log ref="log" />
|
||||
</div>
|
||||
<!--Form表单-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
append-to-body
|
||||
width="730px"
|
||||
>
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="100px">
|
||||
<el-form-item label="任务名称" prop="jobName">
|
||||
<el-input v-model="form.jobName" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务描述" prop="description">
|
||||
<el-input v-model="form.description" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Bean名称" prop="beanName">
|
||||
<el-input v-model="form.beanName" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="执行方法" prop="methodName">
|
||||
<el-input v-model="form.methodName" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Cron表达式" prop="cronExpression">
|
||||
<el-input v-model="form.cronExpression" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="子任务ID">
|
||||
<el-input v-model="form.subTask" placeholder="多个用逗号隔开，按顺序执行" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务负责人" prop="personInCharge">
|
||||
<el-input v-model="form.personInCharge" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="告警邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="多个邮箱用逗号隔开" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="失败后暂停">
|
||||
<el-radio-group v-model="form.pauseAfterFailure" style="width: 220px">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务状态">
|
||||
<el-radio-group v-model="form.isPause" style="width: 220px">
|
||||
<el-radio :label="false">启用</el-radio>
|
||||
<el-radio :label="true">暂停</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="参数内容">
|
||||
<el-input v-model="form.params" style="width: 556px;" rows="4" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column :selectable="checkboxT" type="selection" width="55" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="id" label="任务ID" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="jobName" label="任务名称" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="beanName" label="Bean名称" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="methodName" label="执行方法" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="params" label="参数" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="cronExpression" label="cron表达式" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="isPause" width="90px" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.isPause ? 'warning' : 'success'">{{
|
||||
scope.row.isPause ? '已暂停' : '运行中'
|
||||
}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="description" width="150px" label="描述" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="createTime" width="136px" label="创建日期" />
|
||||
<el-table-column
|
||||
v-if="checkPer(['admin','quartzJob:edit','quartzJob:del'])"
|
||||
label="操作"
|
||||
width="170px"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-permission="['admin','quartzJob:edit']"
|
||||
size="mini"
|
||||
style="margin-right: 3px;"
|
||||
type="text"
|
||||
@click="crud.toEdit(scope.row)"
|
||||
>编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-permission="['admin','quartzJob:edit']"
|
||||
style="margin-left: -2px"
|
||||
type="text"
|
||||
size="mini"
|
||||
@click="execute(scope.row.id)"
|
||||
>执行
|
||||
</el-button>
|
||||
<el-button
|
||||
v-permission="['admin','quartzJob:edit']"
|
||||
style="margin-left: 3px"
|
||||
type="text"
|
||||
size="mini"
|
||||
@click="updateStatus(scope.row.id,scope.row.isPause ? '恢复' : '暂停')"
|
||||
>
|
||||
{{ scope.row.isPause ? '恢复' : '暂停' }}
|
||||
</el-button>
|
||||
<el-popover
|
||||
:ref="scope.row.id"
|
||||
v-permission="['admin','quartzJob:del']"
|
||||
placement="top"
|
||||
width="200"
|
||||
>
|
||||
<p>确定停止并删除该任务吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="text" size="mini">删除</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crudJob from '@/api/system/quartzJob'
|
||||
import Log from './log'
|
||||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
jobName: null,
|
||||
subTask: null,
|
||||
beanName: null,
|
||||
methodName: null,
|
||||
params: null,
|
||||
cronExpression: null,
|
||||
pauseAfterFailure: true,
|
||||
isPause: false,
|
||||
personInCharge: null,
|
||||
email: null,
|
||||
description: null
|
||||
}
|
||||
export default {
|
||||
name: 'QuartzJob',
|
||||
components: { Log, pagination, crudOperation, rrOperation, DateRangePicker },
|
||||
cruds() {
|
||||
return CRUD({ title: '定时任务', url: 'api/quartzJob', crudMethod: { ...crudJob }})
|
||||
},
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false,
|
||||
permission: {
|
||||
add: ['admin', 'quartzJob:add'],
|
||||
edit: ['admin', 'quartzJob:edit'],
|
||||
del: ['admin', 'quartzJob:del']
|
||||
},
|
||||
rules: {
|
||||
jobName: [
|
||||
{ required: true, message: '请输入任务名称', trigger: 'blur' }
|
||||
],
|
||||
description: [
|
||||
{ required: true, message: '请输入任务描述', trigger: 'blur' }
|
||||
],
|
||||
beanName: [
|
||||
{ required: true, message: '请输入Bean名称', trigger: 'blur' }
|
||||
],
|
||||
methodName: [
|
||||
{ required: true, message: '请输入方法名称', trigger: 'blur' }
|
||||
],
|
||||
cronExpression: [
|
||||
{ required: true, message: '请输入Cron表达式', trigger: 'blur' }
|
||||
],
|
||||
personInCharge: [
|
||||
{ required: true, message: '请输入负责人名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 执行
|
||||
execute(id) {
|
||||
crudJob.startQuartzJob(id).then(res => {
|
||||
this.crud.notify('执行成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
}).catch(err => {
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
// 改变状态
|
||||
updateStatus(id, status) {
|
||||
if (status === '恢复') {
|
||||
this.updateParams(id)
|
||||
}
|
||||
crudJob.switchQuartzJobStatus(id).then(res => {
|
||||
this.crud.toQuery()
|
||||
this.crud.notify(status + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
}).catch(err => {
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
updateParams(id) {
|
||||
console.log(id)
|
||||
},
|
||||
delMethod(id) {
|
||||
this.delLoading = true
|
||||
crudJob.del([id]).then(() => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.crud.dleChangePage(1)
|
||||
this.crud.delSuccessNotify()
|
||||
this.crud.toQuery()
|
||||
}).catch(() => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
})
|
||||
},
|
||||
// 显示日志
|
||||
doLog() {
|
||||
this.$refs.log.dialog = true
|
||||
this.$refs.log.doInit()
|
||||
},
|
||||
checkboxT(row, rowIndex) {
|
||||
return row.id !== 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.jobName"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入任务名称搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation :permission="permission">
|
||||
<!-- 任务日志 -->
|
||||
<el-button
|
||||
slot="right"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="info"
|
||||
icon="el-icon-tickets"
|
||||
@click="doLog"
|
||||
>日志
|
||||
</el-button>
|
||||
</crudOperation>
|
||||
<Log ref="log" />
|
||||
</div>
|
||||
<!--Form表单-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
append-to-body
|
||||
width="730px"
|
||||
>
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="100px">
|
||||
<el-form-item label="任务名称" prop="jobName">
|
||||
<el-input v-model="form.jobName" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务描述" prop="description">
|
||||
<el-input v-model="form.description" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Bean名称" prop="beanName">
|
||||
<el-input v-model="form.beanName" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="执行方法" prop="methodName">
|
||||
<el-input v-model="form.methodName" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Cron表达式" prop="cronExpression">
|
||||
<el-input v-model="form.cronExpression" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="子任务ID">
|
||||
<el-input v-model="form.subTask" placeholder="多个用逗号隔开，按顺序执行" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务负责人" prop="personInCharge">
|
||||
<el-input v-model="form.personInCharge" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="告警邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="多个邮箱用逗号隔开" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="失败后暂停">
|
||||
<el-radio-group v-model="form.pauseAfterFailure" style="width: 220px">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务状态">
|
||||
<el-radio-group v-model="form.isPause" style="width: 220px">
|
||||
<el-radio :label="false">启用</el-radio>
|
||||
<el-radio :label="true">暂停</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="参数内容">
|
||||
<el-input v-model="form.params" style="width: 556px;" rows="4" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column :selectable="checkboxT" type="selection" width="55" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="id" label="任务ID" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="jobName" label="任务名称" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="beanName" label="Bean名称" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="methodName" label="执行方法" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="params" label="参数" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="cronExpression" label="cron表达式" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="isPause" width="90px" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.isPause ? 'warning' : 'success'">{{
|
||||
scope.row.isPause ? '已暂停' : '运行中'
|
||||
}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="description" width="150px" label="描述" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="createTime" width="136px" label="创建日期" />
|
||||
<el-table-column
|
||||
v-if="checkPer(['admin','quartzJob:edit','quartzJob:del'])"
|
||||
label="操作"
|
||||
width="170px"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-permission="['admin','quartzJob:edit']"
|
||||
size="mini"
|
||||
style="margin-right: 3px;"
|
||||
type="text"
|
||||
@click="crud.toEdit(scope.row)"
|
||||
>编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-permission="['admin','quartzJob:edit']"
|
||||
style="margin-left: -2px"
|
||||
type="text"
|
||||
size="mini"
|
||||
@click="execute(scope.row.id)"
|
||||
>执行
|
||||
</el-button>
|
||||
<el-button
|
||||
v-permission="['admin','quartzJob:edit']"
|
||||
style="margin-left: 3px"
|
||||
type="text"
|
||||
size="mini"
|
||||
@click="updateStatus(scope.row.id,scope.row.isPause ? '恢复' : '暂停')"
|
||||
>
|
||||
{{ scope.row.isPause ? '恢复' : '暂停' }}
|
||||
</el-button>
|
||||
<el-popover
|
||||
:ref="scope.row.id"
|
||||
v-permission="['admin','quartzJob:del']"
|
||||
placement="top"
|
||||
width="200"
|
||||
>
|
||||
<p>确定停止并删除该任务吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="text" size="mini">删除</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crudJob from '@/api/system/quartzJob'
|
||||
import Log from './log'
|
||||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
jobName: null,
|
||||
subTask: null,
|
||||
beanName: null,
|
||||
methodName: null,
|
||||
params: null,
|
||||
cronExpression: null,
|
||||
pauseAfterFailure: true,
|
||||
isPause: false,
|
||||
personInCharge: null,
|
||||
email: null,
|
||||
description: null
|
||||
}
|
||||
export default {
|
||||
name: 'QuartzJob',
|
||||
components: { Log, pagination, crudOperation, rrOperation, DateRangePicker },
|
||||
cruds() {
|
||||
return CRUD({ title: '定时任务', url: 'api/quartzJob', crudMethod: { ...crudJob }})
|
||||
},
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false,
|
||||
permission: {
|
||||
add: ['admin', 'quartzJob:add'],
|
||||
edit: ['admin', 'quartzJob:edit'],
|
||||
del: ['admin', 'quartzJob:del']
|
||||
},
|
||||
rules: {
|
||||
jobName: [
|
||||
{ required: true, message: '请输入任务名称', trigger: 'blur' }
|
||||
],
|
||||
description: [
|
||||
{ required: true, message: '请输入任务描述', trigger: 'blur' }
|
||||
],
|
||||
beanName: [
|
||||
{ required: true, message: '请输入Bean名称', trigger: 'blur' }
|
||||
],
|
||||
methodName: [
|
||||
{ required: true, message: '请输入方法名称', trigger: 'blur' }
|
||||
],
|
||||
cronExpression: [
|
||||
{ required: true, message: '请输入Cron表达式', trigger: 'blur' }
|
||||
],
|
||||
personInCharge: [
|
||||
{ required: true, message: '请输入负责人名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 执行
|
||||
execute(id) {
|
||||
crudJob.startQuartzJob(id).then(res => {
|
||||
this.crud.notify('执行成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
}).catch(err => {
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
// 改变状态
|
||||
updateStatus(id, status) {
|
||||
if (status === '恢复') {
|
||||
this.updateParams(id)
|
||||
}
|
||||
crudJob.switchQuartzJobStatus(id).then(res => {
|
||||
this.crud.toQuery()
|
||||
this.crud.notify(status + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
}).catch(err => {
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
updateParams(id) {
|
||||
console.log(id)
|
||||
},
|
||||
delMethod(id) {
|
||||
this.delLoading = true
|
||||
crudJob.del([id]).then(() => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.crud.dleChangePage(1)
|
||||
this.crud.delSuccessNotify()
|
||||
this.crud.toQuery()
|
||||
}).catch(() => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
})
|
||||
},
|
||||
// 显示日志
|
||||
doLog() {
|
||||
this.$refs.log.dialog = true
|
||||
this.$refs.log.doInit()
|
||||
},
|
||||
checkboxT(row, rowIndex) {
|
||||
return row.id !== 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,134 +1,134 @@
|
||||
<template>
|
||||
<el-dialog :visible.sync="dialog" append-to-body title="执行日志" width="88%">
|
||||
<!-- 搜索 -->
|
||||
<div class="head-container">
|
||||
<el-input
|
||||
v-model="query.jobName"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入任务名称搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<el-select
|
||||
v-model="query.isSuccess"
|
||||
placeholder="日志状态"
|
||||
clearable
|
||||
size="small"
|
||||
class="filter-item"
|
||||
style="width: 110px"
|
||||
@change="toQuery"
|
||||
>
|
||||
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.displayName" :value="item.key" />
|
||||
</el-select>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 导出 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="downloadMethod"
|
||||
>导出
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" style="width: 100%;margin-top: -10px;">
|
||||
<el-table-column :show-overflow-tooltip="true" prop="jobName" label="任务名称" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="beanName" label="Bean名称" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="methodName" label="执行方法" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="params" width="120px" label="参数" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="cronExpression" label="cron表达式" />
|
||||
<el-table-column prop="createTime" label="异常详情" width="110px">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-show="scope.row.exceptionDetail"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="info(scope.row.exceptionDetail)"
|
||||
>查看详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" prop="time" width="100px" label="耗时(毫秒)" />
|
||||
<el-table-column align="center" prop="isSuccess" width="80px" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.isSuccess ? 'success' : 'danger'">{{
|
||||
scope.row.isSuccess ? '成功' : '失败'
|
||||
}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期" />
|
||||
</el-table>
|
||||
<el-dialog :visible.sync="errorDialog" append-to-body title="异常详情" width="85%">
|
||||
<pre>{{ errorInfo }}</pre>
|
||||
</el-dialog>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:total="total"
|
||||
:current-page="page"
|
||||
:page-size="6"
|
||||
style="margin-top:8px;"
|
||||
layout="total, prev, pager, next"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crud from '@/mixins/crud'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
|
||||
export default {
|
||||
components: { DateRangePicker },
|
||||
// Mixins 是一种包含多个组件选项的对象。可以将 mixin 作为组件的一个选项引入，从而在该组件中“混入”这个对象的选项。通过这种方式，mixins 可以帮助你实现功能复用，减少重复代码。
|
||||
// 这里混入了crud，也就是说当前页面可以使用crud中的属性和方法
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
title: '任务日志',
|
||||
errorInfo: '', errorDialog: false,
|
||||
enabledTypeOptions: [
|
||||
{ key: 'true', displayName: '成功' },
|
||||
{ key: 'false', displayName: '失败' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doInit() {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
// 获取数据前设置好接口地址
|
||||
beforeInit() {
|
||||
this.url = 'api/quartzJob/logs'
|
||||
this.size = 6
|
||||
return true
|
||||
},
|
||||
// 异常详情
|
||||
info(errorInfo) {
|
||||
this.errorInfo = errorInfo
|
||||
this.errorDialog = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.java.hljs {
|
||||
color: #444;
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0 20px 10px 20px !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<el-dialog :visible.sync="dialog" append-to-body title="执行日志" width="88%">
|
||||
<!-- 搜索 -->
|
||||
<div class="head-container">
|
||||
<el-input
|
||||
v-model="query.jobName"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入任务名称搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<el-select
|
||||
v-model="query.isSuccess"
|
||||
placeholder="日志状态"
|
||||
clearable
|
||||
size="small"
|
||||
class="filter-item"
|
||||
style="width: 110px"
|
||||
@change="toQuery"
|
||||
>
|
||||
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.displayName" :value="item.key" />
|
||||
</el-select>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 导出 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="downloadMethod"
|
||||
>导出
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" style="width: 100%;margin-top: -10px;">
|
||||
<el-table-column :show-overflow-tooltip="true" prop="jobName" label="任务名称" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="beanName" label="Bean名称" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="methodName" label="执行方法" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="params" width="120px" label="参数" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="cronExpression" label="cron表达式" />
|
||||
<el-table-column prop="createTime" label="异常详情" width="110px">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-show="scope.row.exceptionDetail"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="info(scope.row.exceptionDetail)"
|
||||
>查看详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" prop="time" width="100px" label="耗时(毫秒)" />
|
||||
<el-table-column align="center" prop="isSuccess" width="80px" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.isSuccess ? 'success' : 'danger'">{{
|
||||
scope.row.isSuccess ? '成功' : '失败'
|
||||
}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期" />
|
||||
</el-table>
|
||||
<el-dialog :visible.sync="errorDialog" append-to-body title="异常详情" width="85%">
|
||||
<pre>{{ errorInfo }}</pre>
|
||||
</el-dialog>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:total="total"
|
||||
:current-page="page"
|
||||
:page-size="6"
|
||||
style="margin-top:8px;"
|
||||
layout="total, prev, pager, next"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crud from '@/mixins/crud'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
|
||||
export default {
|
||||
components: { DateRangePicker },
|
||||
// Mixins 是一种包含多个组件选项的对象。可以将 mixin 作为组件的一个选项引入，从而在该组件中“混入”这个对象的选项。通过这种方式，mixins 可以帮助你实现功能复用，减少重复代码。
|
||||
// 这里混入了crud，也就是说当前页面可以使用crud中的属性和方法
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
title: '任务日志',
|
||||
errorInfo: '', errorDialog: false,
|
||||
enabledTypeOptions: [
|
||||
{ key: 'true', displayName: '成功' },
|
||||
{ key: 'false', displayName: '失败' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doInit() {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
// 获取数据前设置好接口地址
|
||||
beforeInit() {
|
||||
this.url = 'api/quartzJob/logs'
|
||||
this.size = 6
|
||||
return true
|
||||
},
|
||||
// 异常详情
|
||||
info(errorInfo) {
|
||||
this.errorInfo = errorInfo
|
||||
this.errorDialog = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.java.hljs {
|
||||
color: #444;
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0 20px 10px 20px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,404 +1,404 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.blurry"
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="输入名称或者描述搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation :permission="permission" />
|
||||
</div>
|
||||
<!-- 表单渲染 -->
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="520px"
|
||||
>
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 380px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色级别" prop="level">
|
||||
<el-input-number v-model.number="form.level" :min="1" controls-position="right" style="width: 145px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数据范围" prop="dataScope">
|
||||
<el-select v-model="form.dataScope" style="width: 140px" placeholder="请选择数据范围" @change="changeScope">
|
||||
<el-option
|
||||
v-for="item in dateScopes"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.dataScope === '自定义'" label="数据权限" prop="depts">
|
||||
<treeselect
|
||||
v-model="deptDatas"
|
||||
:load-options="loadDepts"
|
||||
:options="depts"
|
||||
:flat="true"
|
||||
:auto-select-descendants="true"
|
||||
:default-expand-level="1"
|
||||
multiple
|
||||
style="width: 380px"
|
||||
placeholder="请选择"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述信息" prop="description">
|
||||
<el-input v-model="form.description" style="width: 380px;" rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-row :gutter="15">
|
||||
<!--角色管理-->
|
||||
<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px">
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="role-span">角色列表</span>
|
||||
</div>
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
highlight-current-row
|
||||
style="width: 100%;"
|
||||
:data="crud.data"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<el-table-column :selectable="checkboxT" type="selection" width="55" />
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="dataScope" label="数据权限" />
|
||||
<el-table-column prop="level" label="角色级别" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="description" label="描述">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.description == null ? '-' : scope.row.description }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" width="135px" prop="createTime" label="创建日期" />
|
||||
<el-table-column
|
||||
v-if="checkPer(['admin','roles:edit','roles:del'])"
|
||||
label="操作"
|
||||
width="130px"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<udOperation
|
||||
v-if="scope.row.level >= level"
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- 菜单授权 -->
|
||||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top">
|
||||
<span class="role-span">菜单分配</span>
|
||||
</el-tooltip>
|
||||
<el-button
|
||||
v-permission="['admin','roles:edit']"
|
||||
:disabled="!showButton"
|
||||
:loading="menuLoading"
|
||||
icon="el-icon-check"
|
||||
size="mini"
|
||||
style="float: right; padding: 6px 9px"
|
||||
type="primary"
|
||||
@click="saveMenu"
|
||||
>保存
|
||||
</el-button>
|
||||
</div>
|
||||
<el-tree
|
||||
ref="menu"
|
||||
lazy
|
||||
:data="menus"
|
||||
:default-checked-keys="menuIds"
|
||||
:load="getMenuDatas"
|
||||
:props="defaultProps"
|
||||
check-strictly
|
||||
accordion
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
@check="menuChange"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crudRoles from '@/api/system/role'
|
||||
import { queryDeptList, queryDeptSuperiorTree } from '@/api/system/dept'
|
||||
import { queryChildMenuSet, queryMenuListByPid } from '@/api/system/menu'
|
||||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import Treeselect, { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
|
||||
const defaultForm = { id: null, name: null, depts: [], description: null, dataScope: '全部', level: 3 }
|
||||
export default {
|
||||
name: 'Role',
|
||||
components: { Treeselect, pagination, crudOperation, rrOperation, udOperation, DateRangePicker },
|
||||
cruds() {
|
||||
return CRUD({ title: '角色', url: 'api/role', crudMethod: { ...crudRoles }})
|
||||
},
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
data() {
|
||||
return {
|
||||
defaultProps: { children: 'children', label: 'label', isLeaf: 'leaf' },
|
||||
dateScopes: ['全部', '本级', '自定义'], level: 3,
|
||||
currentId: 0, menuLoading: false, showButton: false,
|
||||
menus: [], menuIds: [], depts: [], deptDatas: [], // 多选时使用
|
||||
permission: {
|
||||
add: ['admin', 'roles:add'],
|
||||
edit: ['admin', 'roles:edit'],
|
||||
del: ['admin', 'roles:del']
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
crudRoles.getLevel().then(data => {
|
||||
this.level = data.level
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getMenuDatas(node, resolve) {
|
||||
setTimeout(() => {
|
||||
queryMenuListByPid(node.data.id ? node.data.id : 0).then(res => {
|
||||
resolve(res)
|
||||
})
|
||||
}, 100)
|
||||
},
|
||||
[CRUD.HOOK.afterRefresh]() {
|
||||
this.$refs.menu.setCheckedKeys([])
|
||||
},
|
||||
// 新增前初始化部门信息
|
||||
[CRUD.HOOK.beforeToAdd](crud, form) {
|
||||
this.deptDatas = []
|
||||
form.menus = null
|
||||
},
|
||||
// 编辑前初始化自定义数据权限的部门信息
|
||||
[CRUD.HOOK.beforeToEdit](crud, form) {
|
||||
this.deptDatas = []
|
||||
if (form.dataScope === '自定义') {
|
||||
this.getSupDepts(form.depts)
|
||||
}
|
||||
const _this = this
|
||||
form.depts.forEach(function(dept) {
|
||||
_this.deptDatas.push(dept.id)
|
||||
})
|
||||
// 将角色的菜单清空，避免日志入库数据过长
|
||||
form.menus = null
|
||||
},
|
||||
// 提交前做的操作
|
||||
[CRUD.HOOK.afterValidateCU](crud) {
|
||||
if (crud.form.dataScope === '自定义' && this.deptDatas.length === 0) {
|
||||
this.$message({
|
||||
message: '自定义数据权限不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
} else if (crud.form.dataScope === '自定义') {
|
||||
const depts = []
|
||||
this.deptDatas.forEach(function(data) {
|
||||
const dept = { id: data }
|
||||
depts.push(dept)
|
||||
})
|
||||
crud.form.depts = depts
|
||||
} else {
|
||||
crud.form.depts = []
|
||||
}
|
||||
return true
|
||||
},
|
||||
// 触发单选
|
||||
handleCurrentChange(val) {
|
||||
if (val) {
|
||||
const _this = this
|
||||
// 清空菜单的选中
|
||||
this.$refs.menu.setCheckedKeys([])
|
||||
// 保存当前的角色id
|
||||
this.currentId = val.id
|
||||
// 初始化默认选中的key
|
||||
this.menuIds = []
|
||||
val.menus.forEach(function(data) {
|
||||
_this.menuIds.push(data.id)
|
||||
})
|
||||
this.showButton = true
|
||||
}
|
||||
},
|
||||
menuChange(menu) {
|
||||
// 获取该节点的所有子节点，id 包含自身
|
||||
queryChildMenuSet(menu.id).then(childIds => {
|
||||
// 判断是否在 menuIds 中，如果存在则删除，否则添加
|
||||
if (this.menuIds.indexOf(menu.id) !== -1) {
|
||||
for (let i = 0; i < childIds.length; i++) {
|
||||
const index = this.menuIds.indexOf(childIds[i])
|
||||
if (index !== -1) {
|
||||
this.menuIds.splice(index, 1)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < childIds.length; i++) {
|
||||
const index = this.menuIds.indexOf(childIds[i])
|
||||
if (index === -1) {
|
||||
this.menuIds.push(childIds[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$refs.menu.setCheckedKeys(this.menuIds)
|
||||
})
|
||||
},
|
||||
// 保存菜单
|
||||
saveMenu() {
|
||||
this.menuLoading = true
|
||||
const role = { id: this.currentId, menus: [] }
|
||||
// 得到已选中的 key 值
|
||||
this.menuIds.forEach(function(id) {
|
||||
const menu = { id: id }
|
||||
role.menus.push(menu)
|
||||
})
|
||||
crudRoles.editMenu(role).then(() => {
|
||||
this.crud.notify('保存成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
this.menuLoading = false
|
||||
this.update()
|
||||
}).catch(err => {
|
||||
this.menuLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
// 改变数据
|
||||
update() {
|
||||
// 无刷新更新 表格数据
|
||||
crudRoles.get(this.currentId).then(res => {
|
||||
for (let i = 0; i < this.crud.data.length; i++) {
|
||||
if (res.id === this.crud.data[i].id) {
|
||||
this.crud.data[i] = res
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取部门数据
|
||||
getDepts() {
|
||||
queryDeptList({
|
||||
page: 1,
|
||||
size: 9999999,
|
||||
args: { enabled: true }
|
||||
}).then(res => {
|
||||
this.depts = res.content.map(function(obj) {
|
||||
if (obj.hasChildren) {
|
||||
obj.children = null
|
||||
}
|
||||
return obj
|
||||
})
|
||||
})
|
||||
},
|
||||
getSupDepts(depts) {
|
||||
const ids = []
|
||||
depts.forEach(dept => {
|
||||
ids.push(dept.id)
|
||||
})
|
||||
queryDeptSuperiorTree(ids).then(res => {
|
||||
const date = res.content
|
||||
this.buildDepts(date)
|
||||
this.depts = date
|
||||
})
|
||||
},
|
||||
buildDepts(depts) {
|
||||
depts.forEach(data => {
|
||||
if (data.children) {
|
||||
this.buildDepts(data.children)
|
||||
}
|
||||
if (data.hasChildren && !data.children) {
|
||||
data.children = null
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取弹窗内部门数据
|
||||
loadDepts({ action, parentNode, callback }) {
|
||||
if (action === LOAD_CHILDREN_OPTIONS) {
|
||||
queryDeptList({
|
||||
page: 1,
|
||||
size: 9999999,
|
||||
args: { enabled: true, pid: parentNode.id }
|
||||
}).then(res => {
|
||||
parentNode.children = res.content.map(function(obj) {
|
||||
if (obj.hasChildren) {
|
||||
obj.children = null
|
||||
}
|
||||
return obj
|
||||
})
|
||||
setTimeout(() => {
|
||||
callback()
|
||||
}, 200)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 如果数据权限为自定义则获取部门数据
|
||||
changeScope() {
|
||||
if (this.form.dataScope === '自定义') {
|
||||
this.getDepts()
|
||||
}
|
||||
},
|
||||
checkboxT(row) {
|
||||
return row.level >= this.level
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.role-span {
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
::v-deep .vue-treeselect__multi-value {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
::v-deep .vue-treeselect__multi-value-item {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.blurry"
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="输入名称或者描述搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation :permission="permission" />
|
||||
</div>
|
||||
<!-- 表单渲染 -->
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="520px"
|
||||
>
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 380px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色级别" prop="level">
|
||||
<el-input-number v-model.number="form.level" :min="1" controls-position="right" style="width: 145px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数据范围" prop="dataScope">
|
||||
<el-select v-model="form.dataScope" style="width: 140px" placeholder="请选择数据范围" @change="changeScope">
|
||||
<el-option
|
||||
v-for="item in dateScopes"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.dataScope === '自定义'" label="数据权限" prop="depts">
|
||||
<treeselect
|
||||
v-model="deptDatas"
|
||||
:load-options="loadDepts"
|
||||
:options="depts"
|
||||
:flat="true"
|
||||
:auto-select-descendants="true"
|
||||
:default-expand-level="1"
|
||||
multiple
|
||||
style="width: 380px"
|
||||
placeholder="请选择"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述信息" prop="description">
|
||||
<el-input v-model="form.description" style="width: 380px;" rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-row :gutter="15">
|
||||
<!--角色管理-->
|
||||
<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px">
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="role-span">角色列表</span>
|
||||
</div>
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
highlight-current-row
|
||||
style="width: 100%;"
|
||||
:data="crud.data"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<el-table-column :selectable="checkboxT" type="selection" width="55" />
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="dataScope" label="数据权限" />
|
||||
<el-table-column prop="level" label="角色级别" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="description" label="描述">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.description == null ? '-' : scope.row.description }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" width="135px" prop="createTime" label="创建日期" />
|
||||
<el-table-column
|
||||
v-if="checkPer(['admin','roles:edit','roles:del'])"
|
||||
label="操作"
|
||||
width="130px"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<udOperation
|
||||
v-if="scope.row.level >= level"
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- 菜单授权 -->
|
||||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top">
|
||||
<span class="role-span">菜单分配</span>
|
||||
</el-tooltip>
|
||||
<el-button
|
||||
v-permission="['admin','roles:edit']"
|
||||
:disabled="!showButton"
|
||||
:loading="menuLoading"
|
||||
icon="el-icon-check"
|
||||
size="mini"
|
||||
style="float: right; padding: 6px 9px"
|
||||
type="primary"
|
||||
@click="saveMenu"
|
||||
>保存
|
||||
</el-button>
|
||||
</div>
|
||||
<el-tree
|
||||
ref="menu"
|
||||
lazy
|
||||
:data="menus"
|
||||
:default-checked-keys="menuIds"
|
||||
:load="getMenuDatas"
|
||||
:props="defaultProps"
|
||||
check-strictly
|
||||
accordion
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
@check="menuChange"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crudRoles from '@/api/system/role'
|
||||
import { queryDeptList, queryDeptSuperiorTree } from '@/api/system/dept'
|
||||
import { queryChildMenuSet, queryMenuListByPid } from '@/api/system/menu'
|
||||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import Treeselect, { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
|
||||
const defaultForm = { id: null, name: null, depts: [], description: null, dataScope: '全部', level: 3 }
|
||||
export default {
|
||||
name: 'Role',
|
||||
components: { Treeselect, pagination, crudOperation, rrOperation, udOperation, DateRangePicker },
|
||||
cruds() {
|
||||
return CRUD({ title: '角色', url: 'api/role', crudMethod: { ...crudRoles }})
|
||||
},
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
data() {
|
||||
return {
|
||||
defaultProps: { children: 'children', label: 'label', isLeaf: 'leaf' },
|
||||
dateScopes: ['全部', '本级', '自定义'], level: 3,
|
||||
currentId: 0, menuLoading: false, showButton: false,
|
||||
menus: [], menuIds: [], depts: [], deptDatas: [], // 多选时使用
|
||||
permission: {
|
||||
add: ['admin', 'roles:add'],
|
||||
edit: ['admin', 'roles:edit'],
|
||||
del: ['admin', 'roles:del']
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
crudRoles.getLevel().then(data => {
|
||||
this.level = data.level
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getMenuDatas(node, resolve) {
|
||||
setTimeout(() => {
|
||||
queryMenuListByPid(node.data.id ? node.data.id : 0).then(res => {
|
||||
resolve(res)
|
||||
})
|
||||
}, 100)
|
||||
},
|
||||
[CRUD.HOOK.afterRefresh]() {
|
||||
this.$refs.menu.setCheckedKeys([])
|
||||
},
|
||||
// 新增前初始化部门信息
|
||||
[CRUD.HOOK.beforeToAdd](crud, form) {
|
||||
this.deptDatas = []
|
||||
form.menus = null
|
||||
},
|
||||
// 编辑前初始化自定义数据权限的部门信息
|
||||
[CRUD.HOOK.beforeToEdit](crud, form) {
|
||||
this.deptDatas = []
|
||||
if (form.dataScope === '自定义') {
|
||||
this.getSupDepts(form.depts)
|
||||
}
|
||||
const _this = this
|
||||
form.depts.forEach(function(dept) {
|
||||
_this.deptDatas.push(dept.id)
|
||||
})
|
||||
// 将角色的菜单清空，避免日志入库数据过长
|
||||
form.menus = null
|
||||
},
|
||||
// 提交前做的操作
|
||||
[CRUD.HOOK.afterValidateCU](crud) {
|
||||
if (crud.form.dataScope === '自定义' && this.deptDatas.length === 0) {
|
||||
this.$message({
|
||||
message: '自定义数据权限不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
} else if (crud.form.dataScope === '自定义') {
|
||||
const depts = []
|
||||
this.deptDatas.forEach(function(data) {
|
||||
const dept = { id: data }
|
||||
depts.push(dept)
|
||||
})
|
||||
crud.form.depts = depts
|
||||
} else {
|
||||
crud.form.depts = []
|
||||
}
|
||||
return true
|
||||
},
|
||||
// 触发单选
|
||||
handleCurrentChange(val) {
|
||||
if (val) {
|
||||
const _this = this
|
||||
// 清空菜单的选中
|
||||
this.$refs.menu.setCheckedKeys([])
|
||||
// 保存当前的角色id
|
||||
this.currentId = val.id
|
||||
// 初始化默认选中的key
|
||||
this.menuIds = []
|
||||
val.menus.forEach(function(data) {
|
||||
_this.menuIds.push(data.id)
|
||||
})
|
||||
this.showButton = true
|
||||
}
|
||||
},
|
||||
menuChange(menu) {
|
||||
// 获取该节点的所有子节点，id 包含自身
|
||||
queryChildMenuSet(menu.id).then(childIds => {
|
||||
// 判断是否在 menuIds 中，如果存在则删除，否则添加
|
||||
if (this.menuIds.indexOf(menu.id) !== -1) {
|
||||
for (let i = 0; i < childIds.length; i++) {
|
||||
const index = this.menuIds.indexOf(childIds[i])
|
||||
if (index !== -1) {
|
||||
this.menuIds.splice(index, 1)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < childIds.length; i++) {
|
||||
const index = this.menuIds.indexOf(childIds[i])
|
||||
if (index === -1) {
|
||||
this.menuIds.push(childIds[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$refs.menu.setCheckedKeys(this.menuIds)
|
||||
})
|
||||
},
|
||||
// 保存菜单
|
||||
saveMenu() {
|
||||
this.menuLoading = true
|
||||
const role = { id: this.currentId, menus: [] }
|
||||
// 得到已选中的 key 值
|
||||
this.menuIds.forEach(function(id) {
|
||||
const menu = { id: id }
|
||||
role.menus.push(menu)
|
||||
})
|
||||
crudRoles.editMenu(role).then(() => {
|
||||
this.crud.notify('保存成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
this.menuLoading = false
|
||||
this.update()
|
||||
}).catch(err => {
|
||||
this.menuLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
// 改变数据
|
||||
update() {
|
||||
// 无刷新更新 表格数据
|
||||
crudRoles.get(this.currentId).then(res => {
|
||||
for (let i = 0; i < this.crud.data.length; i++) {
|
||||
if (res.id === this.crud.data[i].id) {
|
||||
this.crud.data[i] = res
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取部门数据
|
||||
getDepts() {
|
||||
queryDeptList({
|
||||
page: 1,
|
||||
size: 9999999,
|
||||
args: { enabled: true }
|
||||
}).then(res => {
|
||||
this.depts = res.content.map(function(obj) {
|
||||
if (obj.hasChildren) {
|
||||
obj.children = null
|
||||
}
|
||||
return obj
|
||||
})
|
||||
})
|
||||
},
|
||||
getSupDepts(depts) {
|
||||
const ids = []
|
||||
depts.forEach(dept => {
|
||||
ids.push(dept.id)
|
||||
})
|
||||
queryDeptSuperiorTree(ids).then(res => {
|
||||
const date = res.content
|
||||
this.buildDepts(date)
|
||||
this.depts = date
|
||||
})
|
||||
},
|
||||
buildDepts(depts) {
|
||||
depts.forEach(data => {
|
||||
if (data.children) {
|
||||
this.buildDepts(data.children)
|
||||
}
|
||||
if (data.hasChildren && !data.children) {
|
||||
data.children = null
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取弹窗内部门数据
|
||||
loadDepts({ action, parentNode, callback }) {
|
||||
if (action === LOAD_CHILDREN_OPTIONS) {
|
||||
queryDeptList({
|
||||
page: 1,
|
||||
size: 9999999,
|
||||
args: { enabled: true, pid: parentNode.id }
|
||||
}).then(res => {
|
||||
parentNode.children = res.content.map(function(obj) {
|
||||
if (obj.hasChildren) {
|
||||
obj.children = null
|
||||
}
|
||||
return obj
|
||||
})
|
||||
setTimeout(() => {
|
||||
callback()
|
||||
}, 200)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 如果数据权限为自定义则获取部门数据
|
||||
changeScope() {
|
||||
if (this.form.dataScope === '自定义') {
|
||||
this.getDepts()
|
||||
}
|
||||
},
|
||||
checkboxT(row) {
|
||||
return row.level >= this.level
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.role-span {
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
::v-deep .vue-treeselect__multi-value {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
::v-deep .vue-treeselect__multi-value-item {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,303 +1,303 @@
|
||||
<template>
|
||||
<div
|
||||
v-loading="!show"
|
||||
element-loading-text="数据加载中..."
|
||||
:style="!show ? 'height: 500px' : 'height: 100%'"
|
||||
class="app-container"
|
||||
>
|
||||
<div v-if="show">
|
||||
<el-card class="box-card">
|
||||
<div style="color: #666;font-size: 13px;">
|
||||
<svg-icon icon-class="system" style="margin-right: 5px" />
|
||||
<span>
|
||||
系统：{{ data.sys.os }}
|
||||
</span>
|
||||
<span>
|
||||
IP：{{ data.sys.ip }}
|
||||
</span>
|
||||
<span>
|
||||
项目已不间断运行：{{ data.sys.day }}
|
||||
</span>
|
||||
<i class="el-icon-refresh" style="margin-left: 40px" @click="init" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="font-weight: bold;color: #666;font-size: 15px">状态</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">CPU使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<div slot="content" style="font-size: 12px;">
|
||||
<div style="padding: 3px;">
|
||||
{{ data.cpu.name }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
{{ data.cpu.package }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
{{ data.cpu.core }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
{{ data.cpu.logic }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(data.cpu.used)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer">{{ data.cpu.coreNumber }} 核心</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">内存使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<div slot="content" style="font-size: 12px;">
|
||||
<div style="padding: 3px;">
|
||||
总量：{{ data.memory.total }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
已使用：{{ data.memory.used }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ data.memory.available }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(data.memory.usageRate)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer">{{ data.memory.used }} / {{ data.memory.total }}</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">交换区使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<div slot="content" style="font-size: 12px;">
|
||||
<div style="padding: 3px;">
|
||||
总量：{{ data.swap.total }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
已使用：{{ data.swap.used }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ data.swap.available }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(data.swap.usageRate)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer">{{ data.swap.used }} / {{ data.swap.total }}</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">磁盘使用率</div>
|
||||
<div class="content">
|
||||
<el-tooltip placement="top-end">
|
||||
<div slot="content" style="font-size: 12px;">
|
||||
<div style="padding: 3px">
|
||||
总量：{{ data.disk.total }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ data.disk.available }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(data.disk.usageRate)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="footer">{{ data.disk.used }} / {{ data.disk.total }}</div>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div>
|
||||
<el-row :gutter="6">
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="font-weight: bold;color: #666;font-size: 15px">CPU使用率监控</span>
|
||||
</div>
|
||||
<div>
|
||||
<v-chart :options="cpuInfo" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="font-weight: bold;color: #666;font-size: 15px">内存使用率监控</span>
|
||||
</div>
|
||||
<div>
|
||||
<v-chart :options="memoryInfo" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ECharts from 'vue-echarts'
|
||||
import 'echarts/lib/chart/line'
|
||||
import 'echarts/lib/component/polar'
|
||||
import { initDataByPost } from '@/api/data'
|
||||
|
||||
export default {
|
||||
name: 'ServerMonitor',
|
||||
components: {
|
||||
'v-chart': ECharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
monitor: null,
|
||||
url: 'api/monitor/queryServerMonitorInfo',
|
||||
data: {},
|
||||
cpuInfo: {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20
|
||||
},
|
||||
series: [{
|
||||
data: [],
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: 'rgb(32, 160, 255)' // 改变区域颜色
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#6fbae1',
|
||||
lineStyle: {
|
||||
color: '#6fbae1' // 改变折线颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
memoryInfo: {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20
|
||||
},
|
||||
series: [{
|
||||
data: [],
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: 'rgb(32, 160, 255)' // 改变区域颜色
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#6fbae1',
|
||||
lineStyle: {
|
||||
color: '#6fbae1' // 改变折线颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
this.monitor = window.setInterval(() => {
|
||||
setTimeout(() => {
|
||||
this.init()
|
||||
}, 2)
|
||||
}, 3500)
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.monitor)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
initDataByPost(this.url, {}).then(data => {
|
||||
this.data = data
|
||||
this.show = true
|
||||
if (this.cpuInfo.xAxis.data.length >= 8) {
|
||||
this.cpuInfo.xAxis.data.shift()
|
||||
this.memoryInfo.xAxis.data.shift()
|
||||
this.cpuInfo.series[0].data.shift()
|
||||
this.memoryInfo.series[0].data.shift()
|
||||
}
|
||||
this.cpuInfo.xAxis.data.push(data.time)
|
||||
this.memoryInfo.xAxis.data.push(data.time)
|
||||
this.cpuInfo.series[0].data.push(parseFloat(data.cpu.used))
|
||||
this.memoryInfo.series[0].data.push(parseFloat(data.memory.usageRate))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .box-card {
|
||||
margin-bottom: 5px;
|
||||
|
||||
span {
|
||||
margin-right: 28px;
|
||||
}
|
||||
|
||||
.el-icon-refresh {
|
||||
margin-right: 10px;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.cpu, .memory, .swap, .disk {
|
||||
width: 20%;
|
||||
float: left;
|
||||
padding-bottom: 20px;
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
margin-top: -5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div
|
||||
v-loading="!show"
|
||||
element-loading-text="数据加载中..."
|
||||
:style="!show ? 'height: 500px' : 'height: 100%'"
|
||||
class="app-container"
|
||||
>
|
||||
<div v-if="show">
|
||||
<el-card class="box-card">
|
||||
<div style="color: #666;font-size: 13px;">
|
||||
<svg-icon icon-class="system" style="margin-right: 5px" />
|
||||
<span>
|
||||
系统：{{ data.sys.os }}
|
||||
</span>
|
||||
<span>
|
||||
IP：{{ data.sys.ip }}
|
||||
</span>
|
||||
<span>
|
||||
项目已不间断运行：{{ data.sys.day }}
|
||||
</span>
|
||||
<i class="el-icon-refresh" style="margin-left: 40px" @click="init" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="font-weight: bold;color: #666;font-size: 15px">状态</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">CPU使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<div slot="content" style="font-size: 12px;">
|
||||
<div style="padding: 3px;">
|
||||
{{ data.cpu.name }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
{{ data.cpu.package }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
{{ data.cpu.core }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
{{ data.cpu.logic }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(data.cpu.used)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer">{{ data.cpu.coreNumber }} 核心</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">内存使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<div slot="content" style="font-size: 12px;">
|
||||
<div style="padding: 3px;">
|
||||
总量：{{ data.memory.total }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
已使用：{{ data.memory.used }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ data.memory.available }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(data.memory.usageRate)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer">{{ data.memory.used }} / {{ data.memory.total }}</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">交换区使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<div slot="content" style="font-size: 12px;">
|
||||
<div style="padding: 3px;">
|
||||
总量：{{ data.swap.total }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
已使用：{{ data.swap.used }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ data.swap.available }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(data.swap.usageRate)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer">{{ data.swap.used }} / {{ data.swap.total }}</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">磁盘使用率</div>
|
||||
<div class="content">
|
||||
<el-tooltip placement="top-end">
|
||||
<div slot="content" style="font-size: 12px;">
|
||||
<div style="padding: 3px">
|
||||
总量：{{ data.disk.total }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ data.disk.available }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(data.disk.usageRate)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="footer">{{ data.disk.used }} / {{ data.disk.total }}</div>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div>
|
||||
<el-row :gutter="6">
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="font-weight: bold;color: #666;font-size: 15px">CPU使用率监控</span>
|
||||
</div>
|
||||
<div>
|
||||
<v-chart :options="cpuInfo" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="font-weight: bold;color: #666;font-size: 15px">内存使用率监控</span>
|
||||
</div>
|
||||
<div>
|
||||
<v-chart :options="memoryInfo" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ECharts from 'vue-echarts'
|
||||
import 'echarts/lib/chart/line'
|
||||
import 'echarts/lib/component/polar'
|
||||
import { initDataByPost } from '@/api/data'
|
||||
|
||||
export default {
|
||||
name: 'ServerMonitor',
|
||||
components: {
|
||||
'v-chart': ECharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
monitor: null,
|
||||
url: 'api/monitor/queryServerMonitorInfo',
|
||||
data: {},
|
||||
cpuInfo: {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20
|
||||
},
|
||||
series: [{
|
||||
data: [],
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: 'rgb(32, 160, 255)' // 改变区域颜色
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#6fbae1',
|
||||
lineStyle: {
|
||||
color: '#6fbae1' // 改变折线颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
memoryInfo: {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20
|
||||
},
|
||||
series: [{
|
||||
data: [],
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: 'rgb(32, 160, 255)' // 改变区域颜色
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#6fbae1',
|
||||
lineStyle: {
|
||||
color: '#6fbae1' // 改变折线颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
this.monitor = window.setInterval(() => {
|
||||
setTimeout(() => {
|
||||
this.init()
|
||||
}, 2)
|
||||
}, 3500)
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.monitor)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
initDataByPost(this.url, {}).then(data => {
|
||||
this.data = data
|
||||
this.show = true
|
||||
if (this.cpuInfo.xAxis.data.length >= 8) {
|
||||
this.cpuInfo.xAxis.data.shift()
|
||||
this.memoryInfo.xAxis.data.shift()
|
||||
this.cpuInfo.series[0].data.shift()
|
||||
this.memoryInfo.series[0].data.shift()
|
||||
}
|
||||
this.cpuInfo.xAxis.data.push(data.time)
|
||||
this.memoryInfo.xAxis.data.push(data.time)
|
||||
this.cpuInfo.series[0].data.push(parseFloat(data.cpu.used))
|
||||
this.memoryInfo.series[0].data.push(parseFloat(data.memory.usageRate))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .box-card {
|
||||
margin-bottom: 5px;
|
||||
|
||||
span {
|
||||
margin-right: 28px;
|
||||
}
|
||||
|
||||
.el-icon-refresh {
|
||||
margin-right: 10px;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.cpu, .memory, .swap, .disk {
|
||||
width: 20%;
|
||||
float: left;
|
||||
padding-bottom: 20px;
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
margin-top: -5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" style="padding-left: 8px;" @tab-click="tabClick">
|
||||
<el-tab-pane label="本地存储" name="local">
|
||||
<Local ref="local" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="OSS存储" name="oss">
|
||||
<Oss ref="oss" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Local from './local/index.vue'
|
||||
import Oss from './oss/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'Storage',
|
||||
components: { Local, Oss },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'local'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabClick(name) {
|
||||
if (this.activeName === 'local') {
|
||||
this.$refs.local.crud.toQuery()
|
||||
} else {
|
||||
this.$refs.oss.crud.toQuery()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<template>
|
||||
<el-tabs v-model="activeName" style="padding-left: 8px;" @tab-click="tabClick">
|
||||
<el-tab-pane label="本地存储" name="local">
|
||||
<Local ref="local" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="OSS存储" name="oss">
|
||||
<Oss ref="oss" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Local from './local/index.vue'
|
||||
import Oss from './oss/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'Storage',
|
||||
components: { Local, Oss },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'local'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabClick(name) {
|
||||
if (this.activeName === 'local') {
|
||||
this.$refs.local.crud.toQuery()
|
||||
} else {
|
||||
this.$refs.oss.crud.toQuery()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
@@ -1,206 +1,206 @@
|
||||
<template>
|
||||
<div class="app-container" style="padding: 8px;">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.blurry"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入内容模糊搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation :permission="permission">
|
||||
<!-- 新增 -->
|
||||
<el-button
|
||||
slot="left"
|
||||
v-permission="['admin','storage:add']"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
@click="crud.toAdd"
|
||||
>上传
|
||||
</el-button>
|
||||
</crudOperation>
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.add ? '文件上传' : '编辑文件'"
|
||||
width="500px"
|
||||
>
|
||||
<el-form ref="form" :model="form" size="small" label-width="80px">
|
||||
<el-form-item label="文件名">
|
||||
<el-input v-model="form.name" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<!-- 上传文件 -->
|
||||
<el-form-item v-if="crud.status.add" label="上传">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
:before-upload="beforeUpload"
|
||||
:auto-upload="false"
|
||||
:headers="headers"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:action="fileUploadApi + '?name=' + form.name"
|
||||
>
|
||||
<div class="my-upload"><i class="el-icon-upload" /> 添加文件</div>
|
||||
<div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||
<el-button v-if="crud.status.add" :loading="loading" type="primary" @click="upload">确认</el-button>
|
||||
<el-button v-else :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="name" label="文件名">
|
||||
<template slot-scope="scope">
|
||||
<el-popover
|
||||
:content="'file/' + scope.row.dateGroup + '/' + scope.row.realName"
|
||||
placement="top-start"
|
||||
title="路径"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
>
|
||||
<a
|
||||
slot="reference"
|
||||
:href="baseApi + '/file/' + scope.row.dateGroup + '/' + scope.row.realName"
|
||||
class="el-link--primary"
|
||||
style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color: #1890ff;font-size: 13px;"
|
||||
target="_blank"
|
||||
>
|
||||
{{ scope.row.name }}
|
||||
</a>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="path" label="预览图">
|
||||
<template slot-scope="{row}">
|
||||
<el-image
|
||||
:src=" baseApi + '/file/' + row.dateGroup + '/' + row.realName"
|
||||
:preview-src-list="[baseApi + '/file/' + row.dateGroup + '/' + row.realName]"
|
||||
fit="contain"
|
||||
lazy
|
||||
class="el-avatar"
|
||||
>
|
||||
<div slot="error">
|
||||
<i class="el-icon-document" />
|
||||
</div>
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="suffix" label="文件类型" />
|
||||
<el-table-column prop="type" label="类别" />
|
||||
<el-table-column prop="size" label="大小" />
|
||||
<el-table-column prop="createBy" label="操作人" />
|
||||
<el-table-column prop="createTime" label="创建日期" />
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import crudFile from '@/api/system/localStorage'
|
||||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
|
||||
const defaultForm = { id: null, name: '' }
|
||||
export default {
|
||||
components: { pagination, crudOperation, rrOperation, DateRangePicker },
|
||||
cruds() {
|
||||
return CRUD({ title: '文件', url: 'api/localStorage', crudMethod: { ...crudFile }})
|
||||
},
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
data() {
|
||||
return {
|
||||
delAllLoading: false,
|
||||
loading: false,
|
||||
headers: { 'Authorization': getToken() },
|
||||
permission: {
|
||||
edit: ['admin', 'storage:edit'],
|
||||
del: ['admin', 'storage:del']
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'baseApi',
|
||||
'fileUploadApi'
|
||||
])
|
||||
},
|
||||
created() {
|
||||
this.crud.optShow.add = false
|
||||
},
|
||||
methods: {
|
||||
// 上传文件
|
||||
upload() {
|
||||
this.$refs.upload.submit()
|
||||
},
|
||||
beforeUpload(file) {
|
||||
let isLt2M = true
|
||||
isLt2M = file.size / 1024 ** 2 < 100
|
||||
if (!isLt2M) {
|
||||
this.loading = false
|
||||
this.$message.error('上传文件大小不能超过 100MB')
|
||||
}
|
||||
this.form.name = file.name
|
||||
return isLt2M
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
this.$refs.upload.clearFiles()
|
||||
this.crud.status.add = CRUD.STATUS.NORMAL
|
||||
this.crud.resetForm()
|
||||
this.crud.toQuery()
|
||||
},
|
||||
// 监听上传失败
|
||||
handleError(e, file, fileList) {
|
||||
const msg = JSON.parse(e.message)
|
||||
this.$notify({
|
||||
title: msg.message,
|
||||
type: 'error',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep .el-image__error, .el-image__placeholder {
|
||||
background: none;
|
||||
}
|
||||
|
||||
::v-deep .el-image-viewer__wrapper {
|
||||
top: 55px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="app-container" style="padding: 8px;">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.blurry"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入内容模糊搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation :permission="permission">
|
||||
<!-- 新增 -->
|
||||
<el-button
|
||||
slot="left"
|
||||
v-permission="['admin','storage:add']"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
@click="crud.toAdd"
|
||||
>上传
|
||||
</el-button>
|
||||
</crudOperation>
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.add ? '文件上传' : '编辑文件'"
|
||||
width="500px"
|
||||
>
|
||||
<el-form ref="form" :model="form" size="small" label-width="80px">
|
||||
<el-form-item label="文件名">
|
||||
<el-input v-model="form.name" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<!-- 上传文件 -->
|
||||
<el-form-item v-if="crud.status.add" label="上传">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
:before-upload="beforeUpload"
|
||||
:auto-upload="false"
|
||||
:headers="headers"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:action="fileUploadApi + '?name=' + form.name"
|
||||
>
|
||||
<div class="my-upload"><i class="el-icon-upload" /> 添加文件</div>
|
||||
<div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="crud.cancelCU">取消</el-button>
|
||||
<el-button v-if="crud.status.add" :loading="loading" type="primary" @click="upload">确认</el-button>
|
||||
<el-button v-else :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="name" label="文件名">
|
||||
<template slot-scope="scope">
|
||||
<el-popover
|
||||
:content="'file/' + scope.row.dateGroup + '/' + scope.row.realName"
|
||||
placement="top-start"
|
||||
title="路径"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
>
|
||||
<a
|
||||
slot="reference"
|
||||
:href="baseApi + '/file/' + scope.row.dateGroup + '/' + scope.row.realName"
|
||||
class="el-link--primary"
|
||||
style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color: #1890ff;font-size: 13px;"
|
||||
target="_blank"
|
||||
>
|
||||
{{ scope.row.name }}
|
||||
</a>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="path" label="预览图">
|
||||
<template slot-scope="{row}">
|
||||
<el-image
|
||||
:src=" baseApi + '/file/' + row.dateGroup + '/' + row.realName"
|
||||
:preview-src-list="[baseApi + '/file/' + row.dateGroup + '/' + row.realName]"
|
||||
fit="contain"
|
||||
lazy
|
||||
class="el-avatar"
|
||||
>
|
||||
<div slot="error">
|
||||
<i class="el-icon-document" />
|
||||
</div>
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="suffix" label="文件类型" />
|
||||
<el-table-column prop="type" label="类别" />
|
||||
<el-table-column prop="size" label="大小" />
|
||||
<el-table-column prop="createBy" label="操作人" />
|
||||
<el-table-column prop="createTime" label="创建日期" />
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import crudFile from '@/api/system/localStorage'
|
||||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
|
||||
const defaultForm = { id: null, name: '' }
|
||||
export default {
|
||||
components: { pagination, crudOperation, rrOperation, DateRangePicker },
|
||||
cruds() {
|
||||
return CRUD({ title: '文件', url: 'api/localStorage', crudMethod: { ...crudFile }})
|
||||
},
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
data() {
|
||||
return {
|
||||
delAllLoading: false,
|
||||
loading: false,
|
||||
headers: { 'Authorization': getToken() },
|
||||
permission: {
|
||||
edit: ['admin', 'storage:edit'],
|
||||
del: ['admin', 'storage:del']
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'baseApi',
|
||||
'fileUploadApi'
|
||||
])
|
||||
},
|
||||
created() {
|
||||
this.crud.optShow.add = false
|
||||
},
|
||||
methods: {
|
||||
// 上传文件
|
||||
upload() {
|
||||
this.$refs.upload.submit()
|
||||
},
|
||||
beforeUpload(file) {
|
||||
let isLt2M = true
|
||||
isLt2M = file.size / 1024 ** 2 < 100
|
||||
if (!isLt2M) {
|
||||
this.loading = false
|
||||
this.$message.error('上传文件大小不能超过 100MB')
|
||||
}
|
||||
this.form.name = file.name
|
||||
return isLt2M
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
this.$refs.upload.clearFiles()
|
||||
this.crud.status.add = CRUD.STATUS.NORMAL
|
||||
this.crud.resetForm()
|
||||
this.crud.toQuery()
|
||||
},
|
||||
// 监听上传失败
|
||||
handleError(e, file, fileList) {
|
||||
const msg = JSON.parse(e.message)
|
||||
this.$notify({
|
||||
title: msg.message,
|
||||
type: 'error',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep .el-image__error, .el-image__placeholder {
|
||||
background: none;
|
||||
}
|
||||
|
||||
::v-deep .el-image-viewer__wrapper {
|
||||
top: 55px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,193 +1,193 @@
|
||||
<template>
|
||||
<div class="app-container" style="padding: 8px;">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.blurry"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入内容模糊搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation :permission="permission">
|
||||
<!-- 新增 -->
|
||||
<el-button
|
||||
slot="left"
|
||||
v-permission="['admin','storage:add']"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
@click="crud.toAdd"
|
||||
>上传
|
||||
</el-button>
|
||||
</crudOperation>
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.add ? '文件上传' : '编辑文件'"
|
||||
width="500px"
|
||||
>
|
||||
<el-form ref="form" :model="form" size="small" label-width="80px">
|
||||
<!-- 上传文件 -->
|
||||
<el-form-item v-if="crud.status.add" label="上传">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
:before-upload="beforeUpload"
|
||||
:auto-upload="false"
|
||||
:headers="headers"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:action="ossUploadApi"
|
||||
>
|
||||
<div class="my-upload"><i class="el-icon-upload" /> 添加文件</div>
|
||||
<div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||
<el-button v-if="crud.status.add" :loading="loading" type="primary" @click="upload">确认</el-button>
|
||||
<el-button v-else :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="serviceType" label="服务提供商" />
|
||||
<el-table-column prop="bucketName" label="存储桶名称" />
|
||||
<el-table-column prop="fileName" label="文件名称" />
|
||||
<el-table-column prop="fileSizeDesc" label="文件大小" />
|
||||
<el-table-column prop="fileMime" label="文件类型" />
|
||||
<el-table-column prop="fileMd5" label="文件Md5" width="260" />
|
||||
<el-table-column prop="createBy" label="操作人" />
|
||||
<el-table-column prop="createTime" label="创建日期" />
|
||||
<el-table-column label="操作" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button id="ossFileUrl" type="text" @click="handleCopyFileUrl(scope.row.fileUrl)">复制链接</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import crudFile from '@/api/system/ossStorage'
|
||||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
import Clipboard from 'clipboard'
|
||||
import CsMessage from '@/utils/elementui/CsMessage'
|
||||
|
||||
const defaultForm = { id: null }
|
||||
export default {
|
||||
components: { pagination, crudOperation, rrOperation, DateRangePicker },
|
||||
cruds() {
|
||||
return CRUD({ title: '文件', url: 'api/ossStorage', crudMethod: { ...crudFile }})
|
||||
},
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
data() {
|
||||
return {
|
||||
delAllLoading: false,
|
||||
loading: false,
|
||||
headers: { 'Authorization': getToken() },
|
||||
permission: {
|
||||
edit: ['admin', 'storage:edit'],
|
||||
del: ['admin', 'storage:del']
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'baseApi',
|
||||
'ossUploadApi'
|
||||
])
|
||||
},
|
||||
created() {
|
||||
this.crud.optShow.add = false
|
||||
},
|
||||
methods: {
|
||||
// 上传文件
|
||||
upload() {
|
||||
this.$refs.upload.submit()
|
||||
},
|
||||
beforeUpload(file) {
|
||||
let isLt2M = true
|
||||
isLt2M = file.size / 1024 ** 2 < 100
|
||||
if (!isLt2M) {
|
||||
this.loading = false
|
||||
this.$message.error('上传文件大小不能超过 100MB')
|
||||
}
|
||||
return isLt2M
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
this.$refs.upload.clearFiles()
|
||||
this.crud.status.add = CRUD.STATUS.NORMAL
|
||||
this.crud.resetForm()
|
||||
this.crud.toQuery()
|
||||
},
|
||||
// 监听上传失败
|
||||
handleError(e, file, fileList) {
|
||||
const msg = JSON.parse(e.message)
|
||||
this.$notify({
|
||||
title: msg.message,
|
||||
type: 'error',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
},
|
||||
handleCopyFileUrl(fileUrl) {
|
||||
const clipboard = new Clipboard('#ossFileUrl', {
|
||||
text(trigger) {
|
||||
return fileUrl
|
||||
}
|
||||
})
|
||||
// 复制成功
|
||||
clipboard.on('success', (e) => {
|
||||
CsMessage.Success('复制成功')
|
||||
clipboard.destroy()
|
||||
})
|
||||
// //复制失败
|
||||
clipboard.on('error', (e) => {
|
||||
CsMessage.Error('复制失败')
|
||||
clipboard.destroy()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep .el-image__error, .el-image__placeholder {
|
||||
background: none;
|
||||
}
|
||||
|
||||
::v-deep .el-image-viewer__wrapper {
|
||||
top: 55px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="app-container" style="padding: 8px;">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.blurry"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入内容模糊搜索"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation :permission="permission">
|
||||
<!-- 新增 -->
|
||||
<el-button
|
||||
slot="left"
|
||||
v-permission="['admin','storage:add']"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
@click="crud.toAdd"
|
||||
>上传
|
||||
</el-button>
|
||||
</crudOperation>
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<el-dialog
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.add ? '文件上传' : '编辑文件'"
|
||||
width="500px"
|
||||
>
|
||||
<el-form ref="form" :model="form" size="small" label-width="80px">
|
||||
<!-- 上传文件 -->
|
||||
<el-form-item v-if="crud.status.add" label="上传">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
:before-upload="beforeUpload"
|
||||
:auto-upload="false"
|
||||
:headers="headers"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:action="ossUploadApi"
|
||||
>
|
||||
<div class="my-upload"><i class="el-icon-upload" /> 添加文件</div>
|
||||
<div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="crud.cancelCU">取消</el-button>
|
||||
<el-button v-if="crud.status.add" :loading="loading" type="primary" @click="upload">确认</el-button>
|
||||
<el-button v-else :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="serviceType" label="服务提供商" />
|
||||
<el-table-column prop="bucketName" label="存储桶名称" />
|
||||
<el-table-column prop="fileName" label="文件名称" />
|
||||
<el-table-column prop="fileSizeDesc" label="文件大小" />
|
||||
<el-table-column prop="fileMime" label="文件类型" />
|
||||
<el-table-column prop="fileMd5" label="文件Md5" width="260" />
|
||||
<el-table-column prop="createBy" label="操作人" />
|
||||
<el-table-column prop="createTime" label="创建日期" />
|
||||
<el-table-column label="操作" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button id="ossFileUrl" type="text" @click="handleCopyFileUrl(scope.row.fileUrl)">复制链接</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import crudFile from '@/api/system/ossStorage'
|
||||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
import Clipboard from 'clipboard'
|
||||
import CsMessage from '@/utils/elementui/CsMessage'
|
||||
|
||||
const defaultForm = { id: null }
|
||||
export default {
|
||||
components: { pagination, crudOperation, rrOperation, DateRangePicker },
|
||||
cruds() {
|
||||
return CRUD({ title: '文件', url: 'api/ossStorage', crudMethod: { ...crudFile }})
|
||||
},
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
data() {
|
||||
return {
|
||||
delAllLoading: false,
|
||||
loading: false,
|
||||
headers: { 'Authorization': getToken() },
|
||||
permission: {
|
||||
edit: ['admin', 'storage:edit'],
|
||||
del: ['admin', 'storage:del']
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'baseApi',
|
||||
'ossUploadApi'
|
||||
])
|
||||
},
|
||||
created() {
|
||||
this.crud.optShow.add = false
|
||||
},
|
||||
methods: {
|
||||
// 上传文件
|
||||
upload() {
|
||||
this.$refs.upload.submit()
|
||||
},
|
||||
beforeUpload(file) {
|
||||
let isLt2M = true
|
||||
isLt2M = file.size / 1024 ** 2 < 100
|
||||
if (!isLt2M) {
|
||||
this.loading = false
|
||||
this.$message.error('上传文件大小不能超过 100MB')
|
||||
}
|
||||
return isLt2M
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
this.$refs.upload.clearFiles()
|
||||
this.crud.status.add = CRUD.STATUS.NORMAL
|
||||
this.crud.resetForm()
|
||||
this.crud.toQuery()
|
||||
},
|
||||
// 监听上传失败
|
||||
handleError(e, file, fileList) {
|
||||
const msg = JSON.parse(e.message)
|
||||
this.$notify({
|
||||
title: msg.message,
|
||||
type: 'error',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
},
|
||||
handleCopyFileUrl(fileUrl) {
|
||||
const clipboard = new Clipboard('#ossFileUrl', {
|
||||
text(trigger) {
|
||||
return fileUrl
|
||||
}
|
||||
})
|
||||
// 复制成功
|
||||
clipboard.on('success', (e) => {
|
||||
CsMessage.Success('复制成功')
|
||||
clipboard.destroy()
|
||||
})
|
||||
// //复制失败
|
||||
clipboard.on('error', (e) => {
|
||||
CsMessage.Error('复制失败')
|
||||
clipboard.destroy()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep .el-image__error, .el-image__placeholder {
|
||||
background: none;
|
||||
}
|
||||
|
||||
::v-deep .el-image-viewer__wrapper {
|
||||
top: 55px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,267 +1,267 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" style="margin-bottom: 10px">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>个人信息</span>
|
||||
</div>
|
||||
<div>
|
||||
<div style="text-align: center">
|
||||
<div class="el-upload">
|
||||
<img
|
||||
:src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar"
|
||||
title="点击上传头像"
|
||||
class="avatar"
|
||||
@click="toggleShow"
|
||||
>
|
||||
<myUpload
|
||||
v-model="show"
|
||||
:headers="headers"
|
||||
:url="updateAvatarApi"
|
||||
@crop-upload-success="cropUploadSuccess"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="user-info">
|
||||
<li>
|
||||
<div style="height: 100%">
|
||||
<svg-icon icon-class="login" />
|
||||
登录账号
|
||||
<div class="user-right">{{ user.username }}</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="user1" />
|
||||
用户昵称
|
||||
<div class="user-right">{{ user.nickName }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="dept" />
|
||||
所属部门
|
||||
<div class="user-right"> {{ user.dept.name }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="phone" />
|
||||
手机号码
|
||||
<div class="user-right">{{ user.phone }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="email" />
|
||||
用户邮箱
|
||||
<div class="user-right">{{ user.email }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="anq" />
|
||||
安全设置
|
||||
<div class="user-right">
|
||||
<a @click="$refs.pass.dialog = true">修改密码</a>
|
||||
<a @click="$refs.email.dialog = true">修改邮箱</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
|
||||
<!-- 用户资料 -->
|
||||
<el-card class="box-card">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="用户资料" name="first">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
style="margin-top: 10px;"
|
||||
size="small"
|
||||
label-width="65px"
|
||||
>
|
||||
<el-form-item label="昵称" prop="nickName">
|
||||
<el-input v-model="form.nickName" style="width: 35%" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">用户昵称不作为登录使用</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="form.phone" style="width: 35%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">手机号码不能重复</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别">
|
||||
<el-radio-group v-model="form.gender" style="width: 178px">
|
||||
<el-radio label="男">男</el-radio>
|
||||
<el-radio label="女">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button :loading="saveLoading" size="mini" type="primary" @click="doSubmit">保存配置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<!-- 操作日志 -->
|
||||
<el-tab-pane label="操作日志" name="second">
|
||||
<el-table v-loading="loading" :data="data" style="width: 100%;">
|
||||
<el-table-column prop="description" label="行为" />
|
||||
<el-table-column prop="requestIp" label="IP" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
|
||||
<el-table-column prop="browser" label="浏览器" />
|
||||
<el-table-column prop="time" label="请求耗时" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
|
||||
<el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
|
||||
<el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="right"
|
||||
>
|
||||
<template slot="header">
|
||||
<div style="display:inline-block;float: right;cursor: pointer" @click="init">创建日期<i
|
||||
class="el-icon-refresh"
|
||||
style="margin-left: 40px"
|
||||
/></div>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:total="total"
|
||||
:current-page="page"
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<updateEmail ref="email" :email="user.email" />
|
||||
<updatePass ref="pass" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myUpload from 'vue-image-crop-upload'
|
||||
import { mapGetters } from 'vuex'
|
||||
import updatePass from './center/updatePass'
|
||||
import updateEmail from './center/updateEmail'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import store from '@/store'
|
||||
import { isvalidPhone } from '@/utils/CsValidateUtil'
|
||||
import crud from '@/mixins/crud'
|
||||
import { editUser } from '@/api/system/user'
|
||||
import Avatar from '@/assets/images/avatar.png'
|
||||
|
||||
export default {
|
||||
name: 'Center',
|
||||
components: { updatePass, updateEmail, myUpload },
|
||||
mixins: [crud],
|
||||
data() {
|
||||
// 自定义验证
|
||||
const validPhone = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入电话号码'))
|
||||
} else if (!isvalidPhone(value)) {
|
||||
callback(new Error('请输入正确的11位手机号码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
show: false,
|
||||
Avatar: Avatar,
|
||||
activeName: 'first',
|
||||
saveLoading: false,
|
||||
headers: {
|
||||
'Authorization': getToken()
|
||||
},
|
||||
form: {},
|
||||
rules: {
|
||||
nickName: [
|
||||
{ required: true, message: '请输入用户昵称', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
|
||||
],
|
||||
phone: [
|
||||
{ required: true, trigger: 'blur', validator: validPhone }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user',
|
||||
'updateAvatarApi',
|
||||
'baseApi'
|
||||
])
|
||||
},
|
||||
created() {
|
||||
this.form = { id: this.user.id, nickName: this.user.nickName, gender: this.user.gender, phone: this.user.phone }
|
||||
store.dispatch('GetInfo').then(() => {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
toggleShow() {
|
||||
this.show = !this.show
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
if (tab.name === 'second') {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
beforeInit() {
|
||||
this.url = 'api/logs/user'
|
||||
return true
|
||||
},
|
||||
cropUploadSuccess(jsonData, field) {
|
||||
store.dispatch('GetInfo').then(() => {
|
||||
})
|
||||
},
|
||||
doSubmit() {
|
||||
if (this.$refs['form']) {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.saveLoading = true
|
||||
editUser(this.form).then(() => {
|
||||
this.editSuccessNotify()
|
||||
store.dispatch('GetInfo').then(() => {
|
||||
})
|
||||
this.saveLoading = false
|
||||
}).catch(() => {
|
||||
this.saveLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #F0F3F4;
|
||||
padding: 11px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.user-right {
|
||||
float: right;
|
||||
|
||||
a {
|
||||
color: #317EF3;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" style="margin-bottom: 10px">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>个人信息</span>
|
||||
</div>
|
||||
<div>
|
||||
<div style="text-align: center">
|
||||
<div class="el-upload">
|
||||
<img
|
||||
:src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar"
|
||||
title="点击上传头像"
|
||||
class="avatar"
|
||||
@click="toggleShow"
|
||||
>
|
||||
<myUpload
|
||||
v-model="show"
|
||||
:headers="headers"
|
||||
:url="updateAvatarApi"
|
||||
@crop-upload-success="cropUploadSuccess"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="user-info">
|
||||
<li>
|
||||
<div style="height: 100%">
|
||||
<svg-icon icon-class="login" />
|
||||
登录账号
|
||||
<div class="user-right">{{ user.username }}</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="user1" />
|
||||
用户昵称
|
||||
<div class="user-right">{{ user.nickName }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="dept" />
|
||||
所属部门
|
||||
<div class="user-right"> {{ user.dept.name }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="phone" />
|
||||
手机号码
|
||||
<div class="user-right">{{ user.phone }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="email" />
|
||||
用户邮箱
|
||||
<div class="user-right">{{ user.email }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="anq" />
|
||||
安全设置
|
||||
<div class="user-right">
|
||||
<a @click="$refs.pass.dialog = true">修改密码</a>
|
||||
<a @click="$refs.email.dialog = true">修改邮箱</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
|
||||
<!-- 用户资料 -->
|
||||
<el-card class="box-card">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="用户资料" name="first">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
style="margin-top: 10px;"
|
||||
size="small"
|
||||
label-width="65px"
|
||||
>
|
||||
<el-form-item label="昵称" prop="nickName">
|
||||
<el-input v-model="form.nickName" style="width: 35%" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">用户昵称不作为登录使用</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="form.phone" style="width: 35%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">手机号码不能重复</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别">
|
||||
<el-radio-group v-model="form.gender" style="width: 178px">
|
||||
<el-radio label="男">男</el-radio>
|
||||
<el-radio label="女">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button :loading="saveLoading" size="mini" type="primary" @click="doSubmit">保存配置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<!-- 操作日志 -->
|
||||
<el-tab-pane label="操作日志" name="second">
|
||||
<el-table v-loading="loading" :data="data" style="width: 100%;">
|
||||
<el-table-column prop="description" label="行为" />
|
||||
<el-table-column prop="requestIp" label="IP" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
|
||||
<el-table-column prop="browser" label="浏览器" />
|
||||
<el-table-column prop="time" label="请求耗时" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
|
||||
<el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
|
||||
<el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="right"
|
||||
>
|
||||
<template slot="header">
|
||||
<div style="display:inline-block;float: right;cursor: pointer" @click="init">创建日期<i
|
||||
class="el-icon-refresh"
|
||||
style="margin-left: 40px"
|
||||
/></div>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:total="total"
|
||||
:current-page="page"
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<updateEmail ref="email" :email="user.email" />
|
||||
<updatePass ref="pass" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myUpload from 'vue-image-crop-upload'
|
||||
import { mapGetters } from 'vuex'
|
||||
import updatePass from './center/updatePass'
|
||||
import updateEmail from './center/updateEmail'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import store from '@/store'
|
||||
import { IsValidPhone } from '@/utils/CsValidateUtil'
|
||||
import crud from '@/mixins/crud'
|
||||
import { editUser } from '@/api/system/user'
|
||||
import Avatar from '@/assets/images/avatar.png'
|
||||
|
||||
export default {
|
||||
name: 'Center',
|
||||
components: { updatePass, updateEmail, myUpload },
|
||||
mixins: [crud],
|
||||
data() {
|
||||
// 自定义验证
|
||||
const validPhone = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入电话号码'))
|
||||
} else if (!IsValidPhone(value)) {
|
||||
callback(new Error('请输入正确的11位手机号码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
show: false,
|
||||
Avatar: Avatar,
|
||||
activeName: 'first',
|
||||
saveLoading: false,
|
||||
headers: {
|
||||
'Authorization': getToken()
|
||||
},
|
||||
form: {},
|
||||
rules: {
|
||||
nickName: [
|
||||
{ required: true, message: '请输入用户昵称', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
|
||||
],
|
||||
phone: [
|
||||
{ required: true, trigger: 'blur', validator: validPhone }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user',
|
||||
'updateAvatarApi',
|
||||
'baseApi'
|
||||
])
|
||||
},
|
||||
created() {
|
||||
this.form = { id: this.user.id, nickName: this.user.nickName, gender: this.user.gender, phone: this.user.phone }
|
||||
store.dispatch('GetInfo').then(() => {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
toggleShow() {
|
||||
this.show = !this.show
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
if (tab.name === 'second') {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
beforeInit() {
|
||||
this.url = 'api/logs/user'
|
||||
return true
|
||||
},
|
||||
cropUploadSuccess(jsonData, field) {
|
||||
store.dispatch('GetInfo').then(() => {
|
||||
})
|
||||
},
|
||||
doSubmit() {
|
||||
if (this.$refs['form']) {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.saveLoading = true
|
||||
editUser(this.form).then(() => {
|
||||
this.editSuccessNotify()
|
||||
store.dispatch('GetInfo').then(() => {
|
||||
})
|
||||
this.saveLoading = false
|
||||
}).catch(() => {
|
||||
this.saveLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #F0F3F4;
|
||||
padding: 11px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.user-right {
|
||||
float: right;
|
||||
|
||||
a {
|
||||
color: #317EF3;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,150 +1,150 @@
|
||||
<template>
|
||||
<div style="display: inline-block;">
|
||||
<el-dialog
|
||||
:visible.sync="dialog"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="cancel"
|
||||
:title="title"
|
||||
append-to-body
|
||||
width="475px"
|
||||
@close="cancel"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
|
||||
<el-form-item label="新邮箱" prop="email">
|
||||
<el-input v-model="form.email" auto-complete="on" style="width: 200px;" />
|
||||
<el-button :loading="codeLoading" :disabled="isDisabled" size="small" @click="sendCode">{{
|
||||
buttonName
|
||||
}}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" prop="code">
|
||||
<el-input v-model="form.code" style="width: 320px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="当前密码" prop="pass">
|
||||
<el-input v-model="form.pass" type="password" style="width: 320px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import { validEmail } from '@/utils/CsValidateUtil'
|
||||
import { updateEmail } from '@/api/system/user'
|
||||
import { sendResetEmailCaptcha } from '@/api/system/code'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
email: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const validMail = (rule, value, callback) => {
|
||||
if (value === '' || value === null) {
|
||||
callback(new Error('新邮箱不能为空'))
|
||||
} else if (value === this.email) {
|
||||
callback(new Error('新邮箱不能与旧邮箱相同'))
|
||||
} else if (validEmail(value)) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('邮箱格式错误'))
|
||||
}
|
||||
}
|
||||
return {
|
||||
loading: false, dialog: false, title: '修改邮箱', form: { pass: '', email: '', code: '' },
|
||||
user: { email: '', password: '' }, codeLoading: false,
|
||||
buttonName: '获取验证码', isDisabled: false, time: 60,
|
||||
rules: {
|
||||
pass: [
|
||||
{ required: true, message: '当前密码不能为空', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: true, validator: validMail, trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '验证码不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
sendCode() {
|
||||
if (this.form.email && this.form.email !== this.email) {
|
||||
this.codeLoading = true
|
||||
this.buttonName = '验证码发送中'
|
||||
const _this = this
|
||||
sendResetEmailCaptcha(this.form.email).then(res => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '发送成功，验证码有效期5分钟',
|
||||
type: 'success'
|
||||
})
|
||||
this.codeLoading = false
|
||||
this.isDisabled = true
|
||||
this.buttonName = this.time-- + '秒后重新发送'
|
||||
this.timer = window.setInterval(function() {
|
||||
_this.buttonName = _this.time + '秒后重新发送'
|
||||
--_this.time
|
||||
if (_this.time < 0) {
|
||||
_this.buttonName = '重新发送'
|
||||
_this.time = 60
|
||||
_this.isDisabled = false
|
||||
window.clearInterval(_this.timer)
|
||||
}
|
||||
}, 1000)
|
||||
}).catch(err => {
|
||||
this.resetForm()
|
||||
this.codeLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
}
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
updateEmail(this.form).then(res => {
|
||||
this.loading = false
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '邮箱修改成功',
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
store.dispatch('GetInfo').then(() => {
|
||||
})
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
window.clearInterval(this.timer)
|
||||
this.time = 60
|
||||
this.buttonName = '获取验证码'
|
||||
this.isDisabled = false
|
||||
this.form = { pass: '', email: '', code: '' }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<div style="display: inline-block;">
|
||||
<el-dialog
|
||||
:visible.sync="dialog"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="cancel"
|
||||
:title="title"
|
||||
append-to-body
|
||||
width="475px"
|
||||
@close="cancel"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
|
||||
<el-form-item label="新邮箱" prop="email">
|
||||
<el-input v-model="form.email" auto-complete="on" style="width: 200px;" />
|
||||
<el-button :loading="codeLoading" :disabled="isDisabled" size="small" @click="sendCode">{{
|
||||
buttonName
|
||||
}}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" prop="code">
|
||||
<el-input v-model="form.code" style="width: 320px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="当前密码" prop="pass">
|
||||
<el-input v-model="form.pass" type="password" style="width: 320px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import { validEmail } from '@/utils/CsValidateUtil'
|
||||
import { updateEmail } from '@/api/system/user'
|
||||
import { sendResetEmailCaptcha } from '@/api/system/code'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
email: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const validMail = (rule, value, callback) => {
|
||||
if (value === '' || value === null) {
|
||||
callback(new Error('新邮箱不能为空'))
|
||||
} else if (value === this.email) {
|
||||
callback(new Error('新邮箱不能与旧邮箱相同'))
|
||||
} else if (validEmail(value)) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('邮箱格式错误'))
|
||||
}
|
||||
}
|
||||
return {
|
||||
loading: false, dialog: false, title: '修改邮箱', form: { pass: '', email: '', code: '' },
|
||||
user: { email: '', password: '' }, codeLoading: false,
|
||||
buttonName: '获取验证码', isDisabled: false, time: 60,
|
||||
rules: {
|
||||
pass: [
|
||||
{ required: true, message: '当前密码不能为空', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: true, validator: validMail, trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '验证码不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
sendCode() {
|
||||
if (this.form.email && this.form.email !== this.email) {
|
||||
this.codeLoading = true
|
||||
this.buttonName = '验证码发送中'
|
||||
const _this = this
|
||||
sendResetEmailCaptcha(this.form.email).then(res => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '发送成功，验证码有效期5分钟',
|
||||
type: 'success'
|
||||
})
|
||||
this.codeLoading = false
|
||||
this.isDisabled = true
|
||||
this.buttonName = this.time-- + '秒后重新发送'
|
||||
this.timer = window.setInterval(function() {
|
||||
_this.buttonName = _this.time + '秒后重新发送'
|
||||
--_this.time
|
||||
if (_this.time < 0) {
|
||||
_this.buttonName = '重新发送'
|
||||
_this.time = 60
|
||||
_this.isDisabled = false
|
||||
window.clearInterval(_this.timer)
|
||||
}
|
||||
}, 1000)
|
||||
}).catch(err => {
|
||||
this.resetForm()
|
||||
this.codeLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
}
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
updateEmail(this.form).then(res => {
|
||||
this.loading = false
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '邮箱修改成功',
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
store.dispatch('GetInfo').then(() => {
|
||||
})
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
window.clearInterval(this.timer)
|
||||
this.time = 60
|
||||
this.buttonName = '获取验证码'
|
||||
this.isDisabled = false
|
||||
this.form = { pass: '', email: '', code: '' }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,104 +1,104 @@
|
||||
<template>
|
||||
<div style="display: inline-block">
|
||||
<el-dialog
|
||||
:visible.sync="dialog"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="cancel"
|
||||
:title="title"
|
||||
append-to-body
|
||||
width="500px"
|
||||
@close="cancel"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
|
||||
<el-form-item label="旧密码" prop="oldPass">
|
||||
<el-input v-model="form.oldPass" type="password" auto-complete="on" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPass">
|
||||
<el-input v-model="form.newPass" type="password" auto-complete="on" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPass">
|
||||
<el-input v-model="form.confirmPass" type="password" auto-complete="on" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import { updatePass } from '@/api/system/user'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const confirmPass = (rule, value, callback) => {
|
||||
if (value) {
|
||||
if (this.form.newPass !== value) {
|
||||
callback(new Error('两次输入的密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
} else {
|
||||
callback(new Error('请再次输入密码'))
|
||||
}
|
||||
}
|
||||
return {
|
||||
loading: false, dialog: false, title: '修改密码', form: { oldPass: '', newPass: '', confirmPass: '' },
|
||||
rules: {
|
||||
oldPass: [
|
||||
{ required: true, message: '请输入旧密码', trigger: 'blur' }
|
||||
],
|
||||
newPass: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
|
||||
],
|
||||
confirmPass: [
|
||||
{ required: true, validator: confirmPass, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
updatePass(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '密码修改成功，请重新登录',
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
setTimeout(() => {
|
||||
store.dispatch('LogOut').then(() => {
|
||||
location.reload() // 为了重新实例化vue-router对象 避免bug
|
||||
})
|
||||
}, 1500)
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = { oldPass: '', newPass: '', confirmPass: '' }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<div style="display: inline-block">
|
||||
<el-dialog
|
||||
:visible.sync="dialog"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="cancel"
|
||||
:title="title"
|
||||
append-to-body
|
||||
width="500px"
|
||||
@close="cancel"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
|
||||
<el-form-item label="旧密码" prop="oldPass">
|
||||
<el-input v-model="form.oldPass" type="password" auto-complete="on" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPass">
|
||||
<el-input v-model="form.newPass" type="password" auto-complete="on" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPass">
|
||||
<el-input v-model="form.confirmPass" type="password" auto-complete="on" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import { updatePass } from '@/api/system/user'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const confirmPass = (rule, value, callback) => {
|
||||
if (value) {
|
||||
if (this.form.newPass !== value) {
|
||||
callback(new Error('两次输入的密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
} else {
|
||||
callback(new Error('请再次输入密码'))
|
||||
}
|
||||
}
|
||||
return {
|
||||
loading: false, dialog: false, title: '修改密码', form: { oldPass: '', newPass: '', confirmPass: '' },
|
||||
rules: {
|
||||
oldPass: [
|
||||
{ required: true, message: '请输入旧密码', trigger: 'blur' }
|
||||
],
|
||||
newPass: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
|
||||
],
|
||||
confirmPass: [
|
||||
{ required: true, validator: confirmPass, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
updatePass(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '密码修改成功，请重新登录',
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
setTimeout(() => {
|
||||
store.dispatch('LogOut').then(() => {
|
||||
location.reload() // 为了重新实例化vue-router对象 避免bug
|
||||
})
|
||||
}, 1500)
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = { oldPass: '', newPass: '', confirmPass: '' }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user