31 changed files with 1540 additions and 709 deletions
-
2public/index.html
-
10src/api/archiveUtilize/archiveUtilize.js
-
11src/api/archivesManage/library.js
-
60src/api/system/dictDetail.js
-
24src/assets/styles/archives-manage.scss
-
70src/assets/styles/sidebar.scss
-
19src/assets/styles/yxk-admin.scss
-
245src/layout/components/Navbar.vue
-
3src/layout/components/Sidebar/Item.vue
-
2src/layout/index.vue
-
4src/store/getters.js
-
21src/store/modules/cart.js
-
2src/views/archiveUtilize/archiveSearch/module/resultList.vue
-
2src/views/archiveUtilize/utillizeRecord/module/utilizationProcess.vue
-
22src/views/nested/menu1/index.vue
-
40src/views/nested/menu1/menu1-1/index.vue
-
7src/views/nested/menu1/menu1-2/index.vue
-
5src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
-
5src/views/nested/menu2/index.vue
-
409src/views/system/dict/dictDetail.vue
-
324src/views/system/dict/index.vue
-
425src/views/system/dict/index2.vue
-
13src/views/system/log/operateLog/index.vue
-
7src/views/system/notifyManage/index.vue
-
23src/views/system/notifyManage/module/detail.vue
-
22src/views/system/processManage/runningProcess/module/detail.vue
-
2src/views/system/user/cart.vue
-
4src/views/system/user/center.vue
-
139src/views/system/user/messageCenter/index.vue
-
301src/views/system/user/messageCenter/module/list.vue
-
26src/views/system/user/processCenter/module/form.vue
@ -0,0 +1,60 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
export function FetchDictsList(params) { |
|||
return request({ |
|||
url: 'api/dictionary/initDictionaryList', |
|||
method: 'get', |
|||
params |
|||
}) |
|||
} |
|||
|
|||
export function add(data) { |
|||
return request({ |
|||
url: 'api/dictionary/editDictionary', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
export function del(data) { |
|||
return request({ |
|||
url: 'api/dictionary/delDictionary', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
export function edit(data) { |
|||
return request({ |
|||
url: 'api/dictionary/editDictionary', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
export function FetchDictionaryTree(params) { |
|||
return request({ |
|||
url: 'api/dictionary/initDictionaryTree', |
|||
method: 'get', |
|||
params |
|||
}) |
|||
} |
|||
|
|||
export function FetchSonDictionaryList(params) { |
|||
return request({ |
|||
url: 'api/dictionary/getSonDictionaryList', |
|||
method: 'get', |
|||
params |
|||
}) |
|||
} |
|||
|
|||
// 快速筛选
|
|||
export function FetchDictionaryTreeByCategoryId(params) { |
|||
return request({ |
|||
url: 'api/dictionary/getDictionaryTreeByCategoryId', |
|||
method: 'get', |
|||
params |
|||
}) |
|||
} |
|||
|
|||
export default { add, edit, del, FetchDictsList, FetchDictionaryTree, FetchSonDictionaryList, FetchDictionaryTreeByCategoryId } |
@ -0,0 +1,22 @@ |
|||
<template> |
|||
<div style="padding:30px;"> |
|||
<el-alert :closable="false" title="menu 1"> |
|||
<router-view /> |
|||
</el-alert> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'Test', |
|||
data() { |
|||
return { |
|||
input: '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.my-code a{ |
|||
color:#009688; |
|||
} |
|||
</style> |
@ -0,0 +1,40 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div style="padding:30px;"> |
|||
<el-alert :closable="false" title="menu 1-1" type="success"> |
|||
<router-view /> |
|||
</el-alert> |
|||
</div> |
|||
<!-- <el-form label-width="170px" style="margin-top: 20px"> |
|||
<el-form-item label="三级菜单缓存功能测试区"> |
|||
<el-input v-model="input" placeholder="请输入内容" style="width: 360px;" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div> |
|||
<blockquote class="my-blockquote"> 三级菜单缓存配置</blockquote> |
|||
<pre class="my-code"> |
|||
1、将前后端代码更新为最新版版本,或对照提交记录修改,点击查看-> <a href="https://www.aiyxlib.com/XXXX" target="_blank">提交(1)</a>、<a href="https://www.aiyxlib.com" target="_blank">提交(2)</a>、<a href="https://www.aiyxlib.com" target="_blank">提交(3)</a> |
|||
2、将 二级菜单 的 菜单类型 设置为 目录 级别,并且原有的 组件路径 需要清空 |
|||
3、将 三级菜单 的 菜单缓存 设置为 是,最后将 组件名称 填写正确 |
|||
4、具体设置可参考 菜单管理 的 多级菜单 配置进行进行相应的修改 |
|||
</pre> |
|||
<blockquote class="my-blockquote">更多帮助请联系管理员</blockquote> |
|||
<pre class="my-code">联系QQ:421691338</pre> |
|||
</div> --> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'Test', |
|||
data() { |
|||
return { |
|||
input: '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.my-code a{ |
|||
color:#009688; |
|||
} |
|||
</style> |
@ -0,0 +1,7 @@ |
|||
<template> |
|||
<div style="padding:30px;"> |
|||
<el-alert :closable="false" title="menu 1-2" type="success"> |
|||
<router-view /> |
|||
</el-alert> |
|||
</div> |
|||
</template> |
@ -0,0 +1,5 @@ |
|||
<template> |
|||
<div style="padding:30px;"> |
|||
<el-alert :closable="false" title="menu 1-2-1" type="warning" /> |
|||
</div> |
|||
</template> |
@ -0,0 +1,5 @@ |
|||
<template> |
|||
<div style="padding:30px;"> |
|||
<el-alert :closable="false" title="二级菜单" /> |
|||
</div> |
|||
</template> |
@ -0,0 +1,409 @@ |
|||
<template> |
|||
<div> |
|||
<div class="head-container"> |
|||
<crudOperation :permission="permission"> |
|||
<template v-slot:left> |
|||
<el-button v-permission="permission.add" size="mini" type="primary" :disabled="!activeAddBtn" @click="crud.toAdd"><i class="iconfont icon-xinzeng" />新增</el-button> |
|||
</template> |
|||
<template v-slot:right> |
|||
<el-button v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)"><i class="iconfont icon-shanchu" />删除</el-button> |
|||
</template> |
|||
</crudOperation> |
|||
</div> |
|||
<el-table |
|||
ref="table" |
|||
v-loading="crud.loading" |
|||
lazy |
|||
:load="getDictsDatas" |
|||
:data="tableData" |
|||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
|||
height="calc(100vh - 330px)" |
|||
:row-key="getRowKey" |
|||
style="width: 100%;" |
|||
@select-all="selectAll" |
|||
@select="selectTr" |
|||
@selection-change="crud.selectionChangeHandler" |
|||
@row-click="clickRowHandler" |
|||
> |
|||
<el-table-column type="selection" align="center" width="55" /> |
|||
<el-table-column prop="dictionaryName" label="字典名称" /> |
|||
<el-table-column prop="dictionaryCode" label="字典代码" /> |
|||
<el-table-column prop="dictionaryRemarks" label="内容说明" show-overflow-tooltip width="200px" /> |
|||
<el-table-column prop="dictionaryOrder" label="排序" /> |
|||
<el-table-column prop="createTime" label="创建日期" width="200px"> |
|||
<template slot-scope="scope"> |
|||
<div>{{ scope.row.createTime | parseTime }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<pagination v-if="tableData.length!==0" /> |
|||
<!--表单组件--> |
|||
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title"> |
|||
<div class="setting-dialog"> |
|||
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px"> |
|||
<el-form-item label="字典名称" prop="dictionaryName"> |
|||
<el-input v-model="form.dictionaryName" /> |
|||
</el-form-item> |
|||
<el-form-item label="字典代码" prop="dictionaryCode"> |
|||
<el-input v-model="form.dictionaryCode" /> |
|||
</el-form-item> |
|||
<el-form-item label="顶级节点" prop="isTop"> |
|||
<el-radio-group v-model="form.isTop" @input="changeIsTop"> |
|||
<el-radio label="1">是</el-radio> |
|||
<el-radio label="0">否</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="排序" prop="dictionaryOrder"> |
|||
<el-input-number |
|||
v-model.number="form.dictionaryOrder" |
|||
:min="0" |
|||
:max="999" |
|||
controls-position="right" |
|||
/> |
|||
</el-form-item> |
|||
<el-row> |
|||
<el-form-item v-if="form.isTop === '0'" label="上级节点" prop="dictionaryParents"> |
|||
<treeselect |
|||
v-model="form.dictionaryParents" |
|||
style="width: 584px;" |
|||
:load-options="loadDicts" |
|||
:options="dicts" |
|||
:normalizer="normalizer" |
|||
placeholder="选择上级节点" |
|||
> |
|||
<div slot="value-label" slot-scope="{ node }">{{ getAutoNameUnknown(node.label) }}</div> |
|||
</treeselect> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-form-item label="内容说明" prop="dictionaryRemarks"> |
|||
<el-input v-model="form.dictionaryRemarks" type="textarea" :rows="4" style="width: 584px;" /> |
|||
</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> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import crudDictDetail from '@/api/system/dictDetail' |
|||
import CRUD, { presenter, header, form } from '@crud/crud' |
|||
import crudOperation from '@crud/CRUD.operation' |
|||
import pagination from '@crud/Pagination' |
|||
import Treeselect from '@riophae/vue-treeselect' |
|||
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
|||
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' |
|||
import { mapGetters } from 'vuex' |
|||
import { exportFile } from '@/utils/index' |
|||
import qs from 'qs' |
|||
|
|||
const defaultForm = { id: null, dictionaryName: null, isTop: '1', dictionaryCode: null, dictionaryOrder: 999, dictionaryRemarks: null, dictionaryParents: null } |
|||
|
|||
export default { |
|||
name: 'DictDetail', |
|||
components: { Treeselect, crudOperation, pagination }, |
|||
cruds() { |
|||
return [ |
|||
CRUD({ |
|||
title: '字典内容', idField: 'dictionaryId', url: 'api/dictionary/getSonDictionaryList', |
|||
crudMethod: { ...crudDictDetail }, |
|||
sort: [], |
|||
optShow: { |
|||
add: false, |
|||
edit: true, |
|||
del: false, |
|||
reset: false, |
|||
download: false, |
|||
group: false |
|||
}, |
|||
queryOnPresenterCreated: false |
|||
}) |
|||
] |
|||
}, |
|||
mixins: [ |
|||
presenter(), |
|||
header(), |
|||
form(function() { |
|||
return Object.assign({ dictionaryParents: this.dictionaryParents }, defaultForm) |
|||
}) |
|||
], |
|||
props: { |
|||
activeAddBtn: { |
|||
type: Boolean |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData: [], |
|||
needRefreshTree: false, |
|||
dicts: [], |
|||
dictionaryParents: null, |
|||
rules: { |
|||
dictionaryName: [ |
|||
{ required: true, message: '请输入字典名称', trigger: 'blur' } |
|||
], |
|||
dictionaryCode: [ |
|||
{ required: true, message: '请输入字典代码', trigger: 'blur' } |
|||
], |
|||
isTop: [ |
|||
{ required: true, message: '请选择是否为顶级节点', trigger: 'change' } |
|||
], |
|||
dictionaryOrder: [ |
|||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' } |
|||
] |
|||
}, |
|||
permission: { |
|||
add: ['admin', 'dict:add'], |
|||
edit: ['admin', 'dict:edit'], |
|||
del: ['admin', 'dict:del'] |
|||
}, |
|||
deleteVisible: false, |
|||
deleteData: {}, |
|||
isAllSelect: false |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'baseApi' |
|||
]) |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
// 处理vue-treeSelect回显出现unknown问题 |
|||
getAutoNameUnknown(name) { |
|||
if (name.lastIndexOf('unknown') > -1) { |
|||
return name.split('(')[0] |
|||
} else { |
|||
return name |
|||
} |
|||
}, |
|||
getRowKey(row) { |
|||
return row.dictionaryId |
|||
}, |
|||
resetQuery() { |
|||
this.crud.query.blurry = '' |
|||
this.crud.toQuery() |
|||
}, |
|||
// 新增与编辑前做的操作 |
|||
[CRUD.HOOK.afterToCU](crud, form) { |
|||
if (form.dictionaryParents !== null) { |
|||
form.isTop = '0' |
|||
} else if (form.dictionaryId !== null) { |
|||
form.isTop = '1' |
|||
} |
|||
this.getDictsTreeList() |
|||
}, |
|||
[CRUD.HOOK.afterSubmit]() { |
|||
this.needRefreshTree = true |
|||
}, |
|||
[CRUD.HOOK.afterDelete]() { |
|||
this.needRefreshTree = true |
|||
}, |
|||
// 获取数据前设置默认参数 |
|||
[CRUD.HOOK.beforeRefresh]() { |
|||
this.crud.query.page = null |
|||
this.crud.query.size = null |
|||
this.tableData = [] |
|||
}, |
|||
[CRUD.HOOK.afterRefresh](crud) { |
|||
crud.data.forEach(function(item, index) { |
|||
if (item.sonNum !== 0) { |
|||
item.hasChildren = true |
|||
} else { |
|||
item.hasChildren = false |
|||
} |
|||
if (!item.hasChildren) { |
|||
item.children = null |
|||
} |
|||
}) |
|||
this.tableData = this.crud.data |
|||
if (this.needRefreshTree) { |
|||
this.needRefreshTree = false |
|||
// this.$emit('treeRefresh', crud.data) |
|||
this.$emit('resetQuery') |
|||
} |
|||
}, |
|||
// 编辑前 |
|||
[CRUD.HOOK.beforeToEdit](crud, form) { |
|||
crud.form.id = form.dictionaryId |
|||
}, |
|||
// 提交前的验证 |
|||
[CRUD.HOOK.afterValidateCU](crud) { |
|||
if (crud.form.isTop === '1') { |
|||
crud.form.dictionaryParents = null |
|||
} |
|||
delete crud.form.isTop |
|||
return true |
|||
}, |
|||
changeIsTop(val) { |
|||
if (val === '0') { |
|||
this.getDictsTreeList() |
|||
} |
|||
}, |
|||
selectAll() { |
|||
this.isAllSelect = !this.isAllSelect |
|||
const data = this.tableData |
|||
this.toggleSelect(data, this.isAllSelect, 'all') |
|||
console.log('selectAll', data) |
|||
}, |
|||
// 选择某行 |
|||
selectTr(selection, row) { |
|||
this.$set(row, 'isChecked', !row.isChecked) |
|||
this.$nextTick(() => { |
|||
this.isAllSelect = row.isChecked |
|||
this.toggleSelect(row, row.isChecked, 'tr') |
|||
}) |
|||
}, |
|||
// 递归子级 |
|||
toggleSelect(data, flag, type) { |
|||
if (type === 'all') { |
|||
if (data.length > 0) { |
|||
data.forEach((item) => { |
|||
this.toggleSelection(item, flag) |
|||
if (item.children && item.children.length > 0) { |
|||
this.toggleSelect(item.children, flag, type) |
|||
} |
|||
}) |
|||
} |
|||
} else { |
|||
if (data.children && data.children.length > 0) { |
|||
data.children.forEach((item) => { |
|||
item.isChecked = flag |
|||
this.$refs.table.toggleRowSelection(item, flag) |
|||
this.toggleSelect(item, flag, type) |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
// 改变选中 |
|||
toggleSelection(row, flag) { |
|||
this.$set(row, 'isChecked', flag) |
|||
this.$nextTick(() => { |
|||
if (flag) { |
|||
this.$refs.table.toggleRowSelection(row, flag) |
|||
} else { |
|||
this.$refs.table.clearSelection() |
|||
} |
|||
}) |
|||
}, |
|||
clickRowHandler(row) { |
|||
this.$refs.table.clearSelection() |
|||
this.$refs.table.toggleRowSelection(row) |
|||
}, |
|||
getDictsDatas(tree, treeNode, resolve) { |
|||
setTimeout(() => { |
|||
console.log('treeNode', treeNode) |
|||
crudDictDetail.FetchSonDictionaryList({ pid: tree.dictionaryId }).then(res => { |
|||
console.log(res) |
|||
const data = res.map(function(obj) { |
|||
if (obj.sonNum !== 0) { |
|||
obj.hasChildren = true |
|||
obj.children = null |
|||
} else { |
|||
obj.hasChildren = false |
|||
} |
|||
return obj |
|||
}) |
|||
resolve(data) |
|||
}) |
|||
}, 100) |
|||
}, |
|||
getDictsTreeList() { |
|||
crudDictDetail.FetchDictionaryTree().then(res => { |
|||
this.dicts = res.map(function(obj) { |
|||
if (obj.sonNum !== 0) { |
|||
obj.hasChildren = true |
|||
} else { |
|||
obj.hasChildren = false |
|||
} |
|||
if (obj.hasChildren) { |
|||
obj.children = null |
|||
} |
|||
return obj |
|||
}) |
|||
this.crud.loading = false |
|||
}) |
|||
}, |
|||
// 获取弹窗内字典数据 |
|||
loadDicts({ action, parentNode, callback }) { |
|||
if (action === LOAD_CHILDREN_OPTIONS) { |
|||
crudDictDetail.FetchDictionaryTree().then(res => { |
|||
parentNode.children = res.map(function(obj) { |
|||
if (obj.children) { |
|||
obj.childMenus = null |
|||
} |
|||
return obj |
|||
}) |
|||
setTimeout(() => { |
|||
callback() |
|||
}, 100) |
|||
}) |
|||
} |
|||
}, |
|||
toDelete(datas) { |
|||
this.deleteData = datas |
|||
this.$confirm('此操作将删除当前所选' + this.crud.title + '<span>你是否还要继续?</span>', '提示', { |
|||
confirmButtonText: '继续', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
dangerouslyUseHTMLString: true |
|||
}).then(() => { |
|||
this.crud.delAllLoading = true |
|||
const dictionaryIds = [] |
|||
this.deleteData.forEach(val => { |
|||
dictionaryIds.push(val.dictionaryId || val.id) |
|||
}) |
|||
crudDictDetail.del(dictionaryIds).then(() => { |
|||
this.$message({ message: '删除成功', type: 'success', offset: 8 }) |
|||
this.crud.delAllLoading = false |
|||
this.crud.refresh() |
|||
this.$emit('resetQuery') |
|||
}).catch(err => { |
|||
this.crud.delAllLoading = false |
|||
console.log(err) |
|||
}) |
|||
}).catch(() => { |
|||
}) |
|||
}, |
|||
doExport(data) { |
|||
console.log(data) |
|||
this.crud.downloadLoading = true |
|||
this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续?</span>', '提示', { |
|||
confirmButtonText: '继续', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
dangerouslyUseHTMLString: true |
|||
}).then(() => { |
|||
const ids = [] |
|||
data.forEach(val => { |
|||
ids.push(val.dictionaryId) |
|||
}) |
|||
const params = { |
|||
'dictionaryIds': ids |
|||
} |
|||
exportFile(this.baseApi + '/api/dictionary/download?' + qs.stringify(params, { indices: false })) |
|||
this.crud.downloadLoading = false |
|||
}).catch(() => { |
|||
}) |
|||
}, |
|||
normalizer(node) { |
|||
if (node.childDictionarys == null || node.childDictionarys === 'null') { |
|||
delete node.childDictionarys |
|||
} |
|||
return { |
|||
id: node.id, |
|||
label: node.dictionaryName, |
|||
children: node.childDictionarys |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
@ -0,0 +1,425 @@ |
|||
<template> |
|||
<div class="app-container row-container"> |
|||
<!--工具栏--> |
|||
<div class="head-container"> |
|||
<div class="head-search"> |
|||
<!-- 搜索 --> |
|||
<el-input v-model="query.blurry" clearable size="small" placeholder="输入字典名称或字典代码搜索" prefix-icon="el-icon-search" style="width: 240px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
|||
<el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button> |
|||
<el-button v-if="crud.optShow.reset" class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button> |
|||
</div> |
|||
<crudOperation :permission="permission"> |
|||
<template v-slot:middle> |
|||
<el-button slot="reference" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)"> |
|||
<i class="iconfont icon-shanchu" /> |
|||
删除 |
|||
</el-button> |
|||
</template> |
|||
<template v-slot:right> |
|||
<el-button :loading="crud.downloadLoading" size="mini" :disabled="crud.selections.length === 0" @click="doExport(crud.selections)"> |
|||
<i class="iconfont icon-daochu" /> |
|||
导出 |
|||
</el-button> |
|||
</template> |
|||
</crudOperation> |
|||
</div> |
|||
<!--表单组件--> |
|||
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title"> |
|||
<div class="setting-dialog"> |
|||
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px"> |
|||
<el-form-item label="字典名称" prop="dictionaryName"> |
|||
<el-input v-model="form.dictionaryName" /> |
|||
</el-form-item> |
|||
<el-form-item label="字典代码" prop="dictionaryCode"> |
|||
<el-input v-model="form.dictionaryCode" /> |
|||
</el-form-item> |
|||
<el-form-item label="顶级节点" prop="isTop"> |
|||
<el-radio-group v-model="form.isTop" @input="changeIsTop"> |
|||
<el-radio label="1">是</el-radio> |
|||
<el-radio label="0">否</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="排序" prop="dictionaryOrder"> |
|||
<el-input-number |
|||
v-model.number="form.dictionaryOrder" |
|||
:min="0" |
|||
:max="999" |
|||
controls-position="right" |
|||
/> |
|||
</el-form-item> |
|||
<el-row> |
|||
<el-form-item v-if="form.isTop === '0'" label="上级节点" prop="dictionaryParents"> |
|||
<treeselect |
|||
v-model="form.dictionaryParents" |
|||
style="width: 584px;" |
|||
:load-options="loadDicts" |
|||
:options="dicts" |
|||
:normalizer="normalizer" |
|||
placeholder="选择上级节点" |
|||
> |
|||
<div slot="value-label" slot-scope="{ node }">{{ getAutoNameUnknown(node.label) }}</div> |
|||
</treeselect> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-form-item label="内容说明" prop="dictionaryRemarks"> |
|||
<el-input v-model="form.dictionaryRemarks" type="textarea" :rows="4" style="width: 584px;" /> |
|||
</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> |
|||
</div> |
|||
</el-dialog> |
|||
<!-- <el-dialog title="删除字典内容" :visible.sync="deleteVisible" :before-close="handleClose"> |
|||
<span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> |
|||
<div class="setting-dialog"> |
|||
<div class="dialog-delt"> |
|||
<p><span>确定删除当前字典内容吗?</span></p> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click.native="handleConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> --> |
|||
<div class="container-wrap"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<!--表格渲染--> |
|||
<!-- @selection-change="selectionChangeHandler" |
|||
@row-click="clickRowHandler" --> |
|||
<!-- height="calc(100vh - 232px)" --> |
|||
<el-table |
|||
ref="table" |
|||
v-loading="crud.loading" |
|||
lazy |
|||
:load="getDictsDatas" |
|||
:data="tableData" |
|||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
|||
:row-key="getRowKey" |
|||
style="width: 100%;" |
|||
@select-all="selectAll" |
|||
@select="selectTr" |
|||
@selection-change="crud.selectionChangeHandler" |
|||
@row-click="clickRowHandler" |
|||
> |
|||
<el-table-column type="selection" align="center" width="55" /> |
|||
<el-table-column prop="dictionaryName" label="字典名称" /> |
|||
<el-table-column prop="dictionaryCode" label="字典代码" /> |
|||
<el-table-column prop="dictionaryRemarks" label="内容说明" /> |
|||
<el-table-column prop="dictionaryOrder" label="排序" /> |
|||
<el-table-column prop="createTime" label="创建日期" width="200px"> |
|||
<template slot-scope="scope"> |
|||
<div>{{ scope.row.createTime | parseTime }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<pagination v-if="crud.data.length!==0" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import crudDict from '@/api/system/dict' |
|||
import CRUD, { presenter, header, form } from '@crud/crud' |
|||
import crudOperation from '@crud/CRUD.operation' |
|||
import pagination from '@crud/Pagination' |
|||
import Treeselect from '@riophae/vue-treeselect' |
|||
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
|||
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' |
|||
import { mapGetters } from 'vuex' |
|||
import { exportFile } from '@/utils/index' |
|||
import qs from 'qs' |
|||
|
|||
const defaultForm = { id: null, dictionaryName: null, isTop: '1', dictionaryCode: null, dictionaryOrder: 999, dictionaryRemarks: null, dictionaryParents: null } |
|||
|
|||
export default { |
|||
name: 'Dicts', |
|||
components: { crudOperation, Treeselect, pagination }, |
|||
cruds() { |
|||
return [ |
|||
CRUD({ |
|||
title: '字典', idField: 'dictionaryId', url: 'api/dictionary/initDictionaryList', |
|||
crudMethod: { ...crudDict }, |
|||
sort: [], |
|||
optShow: { |
|||
add: true, |
|||
edit: true, |
|||
del: false, |
|||
reset: true, |
|||
download: false, |
|||
group: false |
|||
}}) |
|||
] |
|||
}, |
|||
mixins: [ |
|||
presenter(), |
|||
header(), |
|||
form(function() { |
|||
return Object.assign({ dictionaryParents: this.dictionaryParents }, defaultForm) |
|||
}) |
|||
], |
|||
props: { |
|||
activeAddBtn: { |
|||
type: Boolean |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
dicts: [], |
|||
dictionaryParents: null, |
|||
rules: { |
|||
dictionaryName: [ |
|||
{ required: true, message: '请输入字典名称', trigger: 'blur' } |
|||
], |
|||
dictionaryCode: [ |
|||
{ required: true, message: '请输入字典代码', trigger: 'blur' } |
|||
], |
|||
isTop: [ |
|||
{ required: true, message: '请选择是否为顶级节点', trigger: 'change' } |
|||
], |
|||
dictionaryOrder: [ |
|||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' } |
|||
] |
|||
}, |
|||
permission: { |
|||
add: ['admin', 'dict:add'], |
|||
edit: ['admin', 'dict:edit'], |
|||
del: ['admin', 'dict:del'] |
|||
}, |
|||
deleteVisible: false, |
|||
deleteData: {}, |
|||
isAllSelect: false |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'baseApi' |
|||
]) |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
// 处理vue-treeSelect回显出现unknown问题 |
|||
getAutoNameUnknown(name) { |
|||
if (name.lastIndexOf('unknown') > -1) { |
|||
return name.split('(')[0] |
|||
} else { |
|||
return name |
|||
} |
|||
}, |
|||
getRowKey(row) { |
|||
return row.dictionaryId |
|||
}, |
|||
resetQuery() { |
|||
this.crud.query.blurry = '' |
|||
this.crud.toQuery() |
|||
}, |
|||
// 新增与编辑前做的操作 |
|||
[CRUD.HOOK.afterToCU](crud, form) { |
|||
if (form.dictionaryParents !== null) { |
|||
form.isTop = '0' |
|||
} else if (form.dictionaryId !== null) { |
|||
form.isTop = '1' |
|||
} |
|||
this.getDictsTreeList() |
|||
}, |
|||
// 获取数据前设置默认参数 |
|||
[CRUD.HOOK.beforeRefresh]() { |
|||
this.tableData = [] |
|||
}, |
|||
[CRUD.HOOK.afterRefresh](crud) { |
|||
crud.data.forEach(function(item, index) { |
|||
if (item.sonNum !== 0) { |
|||
item.hasChildren = true |
|||
} else { |
|||
item.hasChildren = false |
|||
} |
|||
if (!item.hasChildren) { |
|||
item.children = null |
|||
} |
|||
}) |
|||
this.tableData = this.crud.data |
|||
console.log('this.tableData0', this.tableData) |
|||
}, |
|||
// 编辑前 |
|||
[CRUD.HOOK.beforeToEdit](crud, form) { |
|||
crud.form.id = form.dictionaryId |
|||
}, |
|||
// 提交前的验证 |
|||
[CRUD.HOOK.afterValidateCU](crud) { |
|||
if (crud.form.isTop === '1') { |
|||
crud.form.dictionaryParents = null |
|||
} |
|||
delete crud.form.isTop |
|||
console.log(crud.form) |
|||
return true |
|||
}, |
|||
changeIsTop(val) { |
|||
if (val === '0') { |
|||
this.getDictsTreeList() |
|||
} |
|||
}, |
|||
selectAll() { |
|||
this.isAllSelect = !this.isAllSelect |
|||
const data = this.tableData |
|||
this.toggleSelect(data, this.isAllSelect, 'all') |
|||
console.log('selectAll', data) |
|||
}, |
|||
// 选择某行 |
|||
selectTr(selection, row) { |
|||
this.$set(row, 'isChecked', !row.isChecked) |
|||
this.$nextTick(() => { |
|||
this.isAllSelect = row.isChecked |
|||
this.toggleSelect(row, row.isChecked, 'tr') |
|||
}) |
|||
}, |
|||
// 递归子级 |
|||
toggleSelect(data, flag, type) { |
|||
console.log('data.children', data.children) |
|||
if (type === 'all') { |
|||
if (data.length > 0) { |
|||
data.forEach((item) => { |
|||
this.toggleSelection(item, flag) |
|||
if (item.children && item.children.length > 0) { |
|||
this.toggleSelect(item.children, flag, type) |
|||
} |
|||
}) |
|||
} |
|||
} else { |
|||
if (data.children && data.children.length > 0) { |
|||
data.children.forEach((item) => { |
|||
item.isChecked = flag |
|||
this.$refs.table.toggleRowSelection(item, flag) |
|||
this.toggleSelect(item, flag, type) |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
// 改变选中 |
|||
toggleSelection(row, flag) { |
|||
this.$set(row, 'isChecked', flag) |
|||
this.$nextTick(() => { |
|||
if (flag) { |
|||
this.$refs.table.toggleRowSelection(row, flag) |
|||
} else { |
|||
this.$refs.table.clearSelection() |
|||
} |
|||
}) |
|||
}, |
|||
clickRowHandler(row) { |
|||
this.$refs.table.clearSelection() |
|||
this.$refs.table.toggleRowSelection(row) |
|||
}, |
|||
getDictsDatas(tree, treeNode, resolve) { |
|||
setTimeout(() => { |
|||
console.log(treeNode) |
|||
crudDict.FetchSonDictionaryList({ pid: tree.dictionaryId }).then(res => { |
|||
const data = res.map(function(obj) { |
|||
if (obj.sonNum !== 0) { |
|||
obj.hasChildren = true |
|||
obj.children = null |
|||
} else { |
|||
obj.hasChildren = false |
|||
} |
|||
return obj |
|||
}) |
|||
resolve(data) |
|||
}) |
|||
}, 100) |
|||
}, |
|||
getDictsTreeList() { |
|||
crudDict.FetchDictionaryTree().then(res => { |
|||
this.dicts = res.map(function(obj) { |
|||
if (obj.sonNum !== 0) { |
|||
obj.hasChildren = true |
|||
} else { |
|||
obj.hasChildren = false |
|||
} |
|||
if (obj.hasChildren) { |
|||
obj.children = null |
|||
} |
|||
return obj |
|||
}) |
|||
this.crud.loading = false |
|||
}) |
|||
}, |
|||
// 获取弹窗内字典数据 |
|||
loadDicts({ action, parentNode, callback }) { |
|||
if (action === LOAD_CHILDREN_OPTIONS) { |
|||
crudDict.FetchDictionaryTree().then(res => { |
|||
parentNode.children = res.map(function(obj) { |
|||
if (obj.children) { |
|||
obj.childMenus = null |
|||
} |
|||
return obj |
|||
}) |
|||
setTimeout(() => { |
|||
callback() |
|||
}, 100) |
|||
}) |
|||
} |
|||
}, |
|||
toDelete(datas) { |
|||
this.deleteData = datas |
|||
this.$confirm('此操作将删除当前所选' + this.crud.title + '<span>你是否还要继续?</span>', '提示', { |
|||
confirmButtonText: '继续', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
dangerouslyUseHTMLString: true |
|||
}).then(() => { |
|||
this.crud.delAllLoading = true |
|||
const dictionaryIds = [] |
|||
this.deleteData.forEach(val => { |
|||
dictionaryIds.push(val.dictionaryId) |
|||
}) |
|||
crudDict.del(dictionaryIds).then(() => { |
|||
this.$message({ message: '删除成功', type: 'success', offset: 8 }) |
|||
this.crud.delAllLoading = false |
|||
this.crud.refresh() |
|||
}).catch(err => { |
|||
this.crud.delAllLoading = false |
|||
console.log(err) |
|||
}) |
|||
}).catch(() => { |
|||
}) |
|||
}, |
|||
doExport(data) { |
|||
console.log(data) |
|||
this.crud.downloadLoading = true |
|||
this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续?</span>', '提示', { |
|||
confirmButtonText: '继续', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
dangerouslyUseHTMLString: true |
|||
}).then(() => { |
|||
const ids = [] |
|||
data.forEach(val => { |
|||
ids.push(val.dictionaryId) |
|||
}) |
|||
const params = { |
|||
'dictionaryIds': ids |
|||
} |
|||
exportFile(this.baseApi + '/api/dictionary/download?' + qs.stringify(params, { indices: false })) |
|||
this.crud.downloadLoading = false |
|||
}).catch(() => { |
|||
}) |
|||
}, |
|||
normalizer(node) { |
|||
if (node.childDictionarys == null || node.childDictionarys === 'null') { |
|||
delete node.childDictionarys |
|||
} |
|||
return { |
|||
id: node.id, |
|||
label: node.dictionaryName, |
|||
children: node.childDictionarys |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
@ -1,301 +0,0 @@ |
|||
<template> |
|||
<div class="message-center-list"> |
|||
<div v-if="hasMore" class="more-btn" @click="loadMore"><i class="iconfont icon-jiazaigengduo" />点击加载更多</div> |
|||
<div v-for="(item,index) in items" :key="index" class="message-item" @click="handleDetail(item)"> |
|||
<div class="message-date">{{ item.createTime | parseTime }}</div> |
|||
<div class="message-cont"> |
|||
<div class="message-cont-info"> |
|||
<span :class="['message-type-title',{'type-title1': isIndex === 0 },{'type-title2': isIndex === 1 },{'type-title3': isIndex === 2 },{'type-title4': isIndex === 3 }]">{{ titleType }}</span> |
|||
<span class="is-read-tip">{{ item.isRead === 0 ? '未读' : '已读' }}</span> |
|||
<div class="message-title">{{ item.noticeTitle }}</div> |
|||
<ul class="message-list-info"> |
|||
<li>创建人:{{ item.createBy }}</li> |
|||
<li>创建时间:{{ item.createTime | parseTime }}</li> |
|||
</ul> |
|||
</div> |
|||
<div class="message-more">查看详情<i class="iconfont icon-chakan" /></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-dialog :visible.sync="messageVisible" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body title="消息详情"> |
|||
<div class="setting-dialog"> |
|||
<div class="message-detail"> |
|||
<span :class="['message-type-title',{'type-title1': isIndex === 0 },{'type-title2': isIndex === 1 },{'type-title3': isIndex === 2 },{'type-title4': isIndex === 3 }]">{{ titleType }}</span> |
|||
<span class="detail-date">【{{ detailInfo && detailInfo.create_by }}】 {{ detailInfo && detailInfo.create_time | parseTime }}</span> |
|||
<div class="message-title">{{ detailInfo && detailInfo.noticeTitle }}</div> |
|||
<el-input v-model="detailInfo.noticeContext" placeholder="请输入" type="textarea" :rows="10" /> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button v-if="detailInfo.noticeType === 1" @click="dealWithCont">流程处理</el-button> |
|||
<el-button type="primary" @click="messageVisible=false">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<detail ref="detail" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchInitNoticeDetails } from '@/api/system/new' |
|||
import detail from '../../processCenter/module/form' |
|||
export default { |
|||
name: 'MessageList', |
|||
components: { detail }, |
|||
props: { |
|||
listIndex: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
items: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
isIndex: 0, |
|||
titleType: '系统通知', |
|||
messageVisible: false, |
|||
opinionTxt: '', |
|||
loading: false, // 是否正在加载中 |
|||
hasMore: true, // 是否还有更多数据 |
|||
currentPage: 1, |
|||
pageSize: 10, |
|||
detailInfo: {} |
|||
} |
|||
}, |
|||
watch: { |
|||
listIndex: function(newValue, oldValue) { |
|||
this.isIndex = newValue |
|||
this.getIndex() |
|||
} |
|||
}, |
|||
created() { |
|||
// this.loadData() |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
// 加载数据方法 |
|||
loadData() { |
|||
this.loading = true |
|||
setTimeout(() => { |
|||
const newData = Array.from(Array(this.pageSize), (_, index) => { |
|||
const key = (this.currentPage - 1) * this.pageSize + index |
|||
return { |
|||
key, |
|||
name: `这是消息标题${key}`, |
|||
age: 18 + key |
|||
} |
|||
}) |
|||
this.items = [...newData, ...this.items] |
|||
console.log(this.items) |
|||
this.currentPage++ |
|||
this.loading = false |
|||
if (this.currentPage > 2) { |
|||
this.hasMore = false |
|||
} |
|||
}, 1000) |
|||
}, |
|||
loadMore() { |
|||
if (this.loading) { |
|||
return |
|||
} |
|||
this.loadData() |
|||
}, |
|||
getIndex() { |
|||
switch (this.isIndex) { |
|||
case 0: |
|||
this.titleType = '系统通知' |
|||
this.opinionTxt = '这是一条系统通知' |
|||
break |
|||
case 1: |
|||
this.titleType = '有流程达到' |
|||
this.opinionTxt = '这是一条有流程达到提醒' |
|||
break |
|||
case 2: |
|||
this.titleType = '流程完成提醒' |
|||
this.opinionTxt = '这是一条流程完成提醒' |
|||
break |
|||
case 3: |
|||
this.titleType = '赋权到期提醒' |
|||
this.opinionTxt = '这是一条赋权到期提醒' |
|||
break |
|||
} |
|||
}, |
|||
handleDetail(item) { |
|||
switch (item.noticaType) { |
|||
case 0: |
|||
this.opinionTxt = '这是一条系统通知' |
|||
break |
|||
case 1: |
|||
this.opinionTxt = '这是一条有流程达到提醒' |
|||
break |
|||
case 2: |
|||
this.opinionTxt = '这是一条流程完成提醒' |
|||
break |
|||
case 3: |
|||
this.opinionTxt = '这是一条赋权到期提醒' |
|||
break |
|||
} |
|||
FetchInitNoticeDetails({ 'noticeId': item.noticeId }).then((res) => { |
|||
console.log(res) |
|||
this.detailInfo = res |
|||
this.messageVisible = true |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
dealWithCont() { |
|||
this.$refs.detail.detailVisible = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
[data-theme=dark] .message-center-list{ |
|||
background-color: transparent; |
|||
.more-btn{ |
|||
color: #339cff; |
|||
} |
|||
.message-item{ |
|||
.message-cont{ |
|||
background-color: #02255f; |
|||
.message-cont-info{ |
|||
color: #fff; |
|||
.is-read-tip{ |
|||
color: #1890ff; |
|||
border: 1px solid #339cff; |
|||
background-color: #02255f; |
|||
} |
|||
} |
|||
.message-more{ |
|||
color: #3a99fd; |
|||
border-top: 1px solid #113d72; |
|||
i{ |
|||
color: #3a99fd; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.message-title{ |
|||
font-weight: 600; |
|||
color: #3a99fd; |
|||
} |
|||
} |
|||
|
|||
.message-center-list{ |
|||
height: calc(100% - 90px); |
|||
padding: 16px 30px; |
|||
margin-bottom: 20px; |
|||
background-color: #F5F5F5; |
|||
overflow: hidden; |
|||
overflow-y: scroll; |
|||
.more-btn{ |
|||
margin-bottom: 30px; |
|||
line-height: 30px; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
color: #0348F3; |
|||
cursor: pointer; |
|||
i{ |
|||
display: inline-block; |
|||
} |
|||
} |
|||
.message-item{ |
|||
font-size: 14px; |
|||
.message-date{ |
|||
text-align: center; |
|||
color: #A6ADB6; |
|||
} |
|||
.message-cont{ |
|||
margin: 12px 0 16px 0; |
|||
background-color: #fff; |
|||
.message-cont-info{ |
|||
position: relative; |
|||
padding: 16px 20px; |
|||
color: #545B65; |
|||
|
|||
.is-read-tip{ |
|||
position: absolute; |
|||
right: 20px; |
|||
top: 16px; |
|||
font-size: 12px; |
|||
height: 20px; |
|||
line-height: 20px; |
|||
padding: 0 7px; |
|||
color: #ED4A41; |
|||
background-color: #FDEFEE; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
.message-list-info{ |
|||
font-size: 12px; |
|||
line-height: 24px; |
|||
} |
|||
} |
|||
.message-more{ |
|||
position: relative; |
|||
padding: 0 20px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
color: #545B65; |
|||
border-top: 1px solid #E6E8ED; |
|||
cursor: pointer; |
|||
i{ |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 0; |
|||
font-size: 12px; |
|||
color: #888D94; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.message-type-title{ |
|||
display: block; |
|||
padding-left: 33px; |
|||
height: 33px; |
|||
line-height: 33px; |
|||
&.type-title1{ |
|||
background: url('~@/assets/images/icon/xttz.png') no-repeat left center; |
|||
background-size: 23px 23px; |
|||
} |
|||
&.type-title2{ |
|||
background: url('~@/assets/images/icon/lcdd.png') no-repeat left center; |
|||
background-size: 23px 23px; |
|||
} |
|||
&.type-title3{ |
|||
background: url('~@/assets/images/icon/lcwc.png') no-repeat left center; |
|||
background-size: 23px 23px; |
|||
} |
|||
&.type-title4{ |
|||
background: url('~@/assets/images/icon/fqdq.png') no-repeat left center; |
|||
background-size: 23px 23px; |
|||
} |
|||
} |
|||
.message-title{ |
|||
margin: 8px 0 20px 0; |
|||
font-weight: 400; |
|||
color: #0C0E1E; |
|||
} |
|||
.message-detail{ |
|||
position: relative; |
|||
.detail-date{ |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
font-size: 12px; |
|||
line-height: 32px; |
|||
color: #A6ADB6; |
|||
} |
|||
.message-title{ |
|||
margin: 10px 0 20px 0; |
|||
} |
|||
} |
|||
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue