11 changed files with 1003 additions and 85 deletions
-
5src/assets/styles/archives-manage.scss
-
11src/assets/styles/mixin.scss
-
19src/assets/styles/yxk-admin.scss
-
322src/views/system/archiveScopeManage/index.vue
-
11src/views/system/archivesCategory/orderingRule/index.vue
-
33src/views/system/fieldCorresManage/index.vue
-
96src/views/system/fieldCorresManage/module/form.vue
-
11src/views/system/fileLibraryManage/orderingRule/index.vue
-
100src/views/system/fourCharacterDetection/data.json
-
467src/views/system/fourCharacterDetection/index.vue
-
11src/views/system/subjectLibraryManage/orderingRule/index.vue
@ -1,9 +1,327 @@ |
|||
<template> |
|||
<div>归档范围管理</div> |
|||
<div class="app-container"> |
|||
<!-- 门类列表 --> |
|||
<div class="container-main" style="justify-content: flex-start;"> |
|||
<div class="elect-cont-left"> |
|||
<div class="container-left"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<!--门类树状结构--> |
|||
<div class="tree-scroll"> |
|||
<el-tree ref="tree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="elect-cont-right"> |
|||
<!--工具栏--> |
|||
<div class="head-container"> |
|||
<crudOperation :permission="permission"> |
|||
<template v-slot:left> |
|||
<el-button v-permission="permission.add" size="mini" @click="crud.toAdd"> |
|||
<i class="iconfont icon-xinzeng" /> |
|||
新增 |
|||
</el-button> |
|||
<el-button v-permission="permission.edit" size="mini" :disabled="crud.selections.length !== 1 || crud.selections[0].pid === '0' || crud.selections[0].isType === 4" @click="crud.toEdit(crud.selections[0])"> |
|||
<i class="iconfont icon-bianji" /> |
|||
编辑 |
|||
</el-button> |
|||
<el-button v-permission="permission.del" size="mini" :loading="crud.delAllLoading" @click="toDelete(crud.selections)"> |
|||
<i class="iconfont icon-shanchu" /> |
|||
删除 |
|||
</el-button> |
|||
</template> |
|||
<template v-slot:right> |
|||
<span class="tip">注意：门类节点下才可新增归档范围定义</span> |
|||
</template> |
|||
</crudOperation> |
|||
</div> |
|||
<div class="container-right"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<!--表单渲染--> |
|||
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title"> |
|||
<div class="setting-dialog"> |
|||
<el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="90px"> |
|||
<el-form-item label="所属门类" prop="category"> |
|||
<el-input v-model="form.category" /> |
|||
</el-form-item> |
|||
<el-form-item label="档案分类" prop="classify"> |
|||
<treeselect |
|||
v-model="form.classify" |
|||
:load-options="loadCategorys" |
|||
:options="scopes" |
|||
placeholder="选择档案分类" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="名称" prop="name"> |
|||
<el-input v-model="form.name" @keydown.native="keydown($event)" /> |
|||
</el-form-item> |
|||
<el-form-item label="编码" prop="number"> |
|||
<el-input v-model="form.number" /> |
|||
</el-form-item> |
|||
<el-form-item label="顶级范围" prop="isTop"> |
|||
<el-radio-group v-model="form.isTop"> |
|||
<el-radio label="1">是</el-radio> |
|||
<el-radio label="0">否</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="保管期限" prop="retentionPeriod"> |
|||
<el-select v-model="form.retentionPeriod" placeholder="请选择" style="width:225px;"> |
|||
<el-option v-for="item in periodOptions" :key="item.value" :label="item.label" :value="item.id" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item |
|||
v-if="form.isTop === '0'" |
|||
label="上级分类" |
|||
prop="pid" |
|||
> |
|||
<treeselect |
|||
v-model="form.scope" |
|||
:load-options="loadCategorys" |
|||
:options="scopes" |
|||
placeholder="选择上级范围" |
|||
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-table |
|||
ref="table" |
|||
v-loading="crud.loading" |
|||
:data="tableData" |
|||
style="width: 100%;" |
|||
:default-expand-all="isExpand" |
|||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
|||
@row-click="clickRowHandler" |
|||
@selection-change="crud.selectionChangeHandler" |
|||
> |
|||
<el-table-column type="selection" align="center" width="55" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="number" label="编码" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="name" label="名称" type="expand" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="retentionPeriod" label="保管期限" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="category" label="所属门类" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="classify" label="所属分类" /> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<pagination v-if="tableData.length !== 0" /> |
|||
</div> |
|||
</div> |
|||
<!--删除对话框组件--> |
|||
<el-dialog class="tip-dialog" title="提示" :visible.sync="deleteVisible"> |
|||
<div class="setting-dialog"> |
|||
<div class="tip-content"> |
|||
<p class="tipMsg">此操作将移除当前所选范围</p> |
|||
<span>你是否还要继续?</span> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="deleteVisible = false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleDelConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import crudCategory from '@/api/category/category' |
|||
import CRUD, { presenter, header, form, crud } 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' |
|||
const defaultForm = { id: null, pid: null, name: null, category: null, classify: null, retentionPeriod: null, number: null, isTop: '0' } |
|||
export default { |
|||
name: 'ArchiveScopeManage', |
|||
components: { crudOperation, pagination, Treeselect }, |
|||
cruds() { |
|||
return [ |
|||
CRUD({ |
|||
title: '归档范围', url: 'api/archives-type/menu', |
|||
crudMethod: { ...crudCategory }, |
|||
optShow: { |
|||
add: false, |
|||
edit: false, |
|||
del: false, |
|||
download: true, |
|||
group: false |
|||
} |
|||
}) |
|||
] |
|||
}, |
|||
mixins: [presenter(), header(), form(defaultForm), crud()], |
|||
data() { |
|||
return { |
|||
tableData: [], |
|||
scopes: [], |
|||
deleteVisible: false, |
|||
isExpand: false, |
|||
permission: { |
|||
add: ['admin', 'category:add'], |
|||
edit: ['admin', 'category:edit'], |
|||
del: ['admin', 'category:del'], |
|||
sort: ['admin', 'category:sort'] |
|||
}, |
|||
defaultProps: { |
|||
children: 'children', |
|||
label: 'cnName' |
|||
}, |
|||
periodOptions: [ |
|||
{ |
|||
id: 1, |
|||
value: '1', |
|||
label: '永久' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
value: '2', |
|||
label: '定期30年' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
value: '3', |
|||
label: '定期10年' |
|||
} |
|||
], |
|||
selectedCategory: {}, |
|||
rules: { |
|||
category: [{ required: true, message: '所属门类不为空', trigger: 'blur' }], |
|||
classify: [{ required: true, message: '请选择档案分类', trigger: 'change' }], |
|||
number: [{ required: true, message: '编码不可为空', trigger: 'blur' }], |
|||
name: [{ required: true, message: '名称不可为空', trigger: 'blur' }], |
|||
isTop: [{ required: true, message: '请选择是否为顶级分类', trigger: 'change' }], |
|||
pid: [{ required: true, message: '请选择上级分类', trigger: 'change' }] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
}, |
|||
methods: { |
|||
// 逆归实现 获取指定元素 |
|||
findNode(tree, func) { |
|||
for (const node of tree) { |
|||
if (func(node)) return node |
|||
if (node.children) { |
|||
const res = this.findNode(node.children, func) |
|||
if (res) return res |
|||
} |
|||
} |
|||
return null |
|||
}, |
|||
// 展开选中的父级 |
|||
expandParents(node) { |
|||
node.expanded = true |
|||
if (node.parent) { |
|||
this.expandParents(node.parent) |
|||
} |
|||
}, |
|||
[CRUD.HOOK.afterRefresh]() { |
|||
let currentKey |
|||
if (localStorage.getItem('currentCategoryKey')) { |
|||
currentKey = JSON.parse(localStorage.getItem('currentCategoryKey')) |
|||
} else { |
|||
if (this.crud.data[0].isType === 1) { |
|||
currentKey = this.findNode(this.crud.data[0].children, (node) => { |
|||
return node.isType !== 1 |
|||
}) |
|||
} else { |
|||
currentKey = this.crud.data[0] |
|||
} |
|||
} |
|||
// 设置某个节点的当前选中状态 |
|||
this.$refs.tree.setCurrentKey(currentKey.id) |
|||
this.$nextTick(() => { |
|||
// 设置某个节点的父级展开 |
|||
const selectedKey = this.$refs.tree.getCurrentNode() |
|||
if (this.$refs.tree.getNode(selectedKey) && this.$refs.tree.getNode(selectedKey).parent) { |
|||
this.expandParents(this.$refs.tree.getNode(selectedKey).parent) |
|||
} |
|||
// 选中节点的门类详情 |
|||
this.handleNodeClick(selectedKey) |
|||
}) |
|||
}, |
|||
// 选中门类后，设置门类详情数据 |
|||
handleNodeClick(val) { |
|||
if (val) { |
|||
// this.crud.selectionChangeHandler([val]) |
|||
this.selectedCategory = val |
|||
// if (val.pid !== '0') { |
|||
// Vue.set(this.selectedCategory, 'parentName', this.$refs.tree.getNode(val.pid).data.cnName) |
|||
// } |
|||
// this.changeActiveTab(0) |
|||
// 缓存当前的选中的 |
|||
localStorage.setItem('currentCategoryKey', JSON.stringify(val)) |
|||
} |
|||
}, |
|||
// 新增 - 判断当前节点类型，卷内/文件不可新建 |
|||
[CRUD.HOOK.beforeToAdd](crud, form, btn) { |
|||
const isCanAddKey = JSON.parse(localStorage.getItem('currentCategoryKey')) |
|||
if (isCanAddKey.isType === 4 || isCanAddKey.isType === 5) { |
|||
this.$message({ |
|||
message: '此门类下不可新建门类', |
|||
type: 'error', |
|||
duration: 2500 |
|||
}) |
|||
return false |
|||
} |
|||
}, |
|||
// 新增/编辑后 - 新增后默认选中新增的门类 |
|||
[CRUD.HOOK.afterSubmit](crud, addedCategory) { |
|||
if (addedCategory) { |
|||
// 缓存当前的选中的 |
|||
localStorage.setItem('currentCategoryKey', JSON.stringify(addedCategory)) |
|||
} |
|||
}, |
|||
clickRowHandler(row) { |
|||
// this.$refs.table.toggleRowSelection(row) // 单击选中 |
|||
}, |
|||
toDelete(val) { |
|||
this.deleteVisible = true |
|||
}, |
|||
handleDelConfirm() { |
|||
this.deleteVisible = false |
|||
}, |
|||
// 获取弹窗内门类数据 |
|||
loadCategorys({ action, parentNode, callback }) { |
|||
if (action === LOAD_CHILDREN_OPTIONS) { |
|||
// crudDict.getDicts().then(res => { |
|||
// parentNode.children = res.map(function(obj) { |
|||
// if (obj.children) { |
|||
// obj.childMenus = null |
|||
// } |
|||
// return obj |
|||
// }) |
|||
// setTimeout(() => { |
|||
// callback() |
|||
// }, 100) |
|||
// }) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
<style lang="scss" scoped> |
|||
[data-theme=dark] .elect-cont-left .container-left { |
|||
min-height: calc(100vh - 160px); |
|||
} |
|||
[data-theme=dark] .elect-cont-right .container-right { |
|||
min-height: calc(100vh - 212px); |
|||
} |
|||
[data-theme=light] .elect-cont-left .container-left { |
|||
min-height: calc(100vh - 200px); |
|||
} |
|||
.tree-scroll{ |
|||
font-size: 14px; |
|||
} |
|||
.tip{ |
|||
line-height: 28px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,100 @@ |
|||
[ |
|||
{ |
|||
"id": 1, |
|||
"name": "四性检测", |
|||
"children": [ |
|||
{ |
|||
"id": 2, |
|||
"name": "真实性检测", |
|||
"children": [ |
|||
{ |
|||
"id": 6, |
|||
"name": "电子文件来源真实性" |
|||
}, |
|||
{ |
|||
"id": 7, |
|||
"name": "电子文件元数据准确性" |
|||
}, |
|||
{ |
|||
"id": 8, |
|||
"name": "电子文件内容真实性" |
|||
}, |
|||
{ |
|||
"id": 9, |
|||
"name": "元数据与内容关联一致性" |
|||
}, |
|||
{ |
|||
"id": 10, |
|||
"name": "归档信息包真实性" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"id": 3, |
|||
"name": "完整性检测", |
|||
"children": [ |
|||
{ |
|||
"id": 11, |
|||
"name": "电子文件数据总量" |
|||
}, |
|||
{ |
|||
"id": 12, |
|||
"name": "元数据完整性" |
|||
}, |
|||
{ |
|||
"id": 13, |
|||
"name": "电子文件内容完整性" |
|||
}, |
|||
{ |
|||
"id": 14, |
|||
"name": "归档信息包完整性" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"id": 4, |
|||
"name": "可用性检测", |
|||
"children": [ |
|||
{ |
|||
"id": 15, |
|||
"name": "元数据可用性" |
|||
}, |
|||
{ |
|||
"id": 16, |
|||
"name": "电子文件内容可用性" |
|||
}, |
|||
{ |
|||
"id": 17, |
|||
"name": "电子文件软硬件环境" |
|||
}, |
|||
{ |
|||
"id": 18, |
|||
"name": "归档信息包可用性" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"id": 5, |
|||
"name": "安全性检测", |
|||
"children": [ |
|||
{ |
|||
"id": 19, |
|||
"name": "归档信息包病毒" |
|||
}, |
|||
{ |
|||
"id": 20, |
|||
"name": "病毒感染检测" |
|||
}, |
|||
{ |
|||
"id": 21, |
|||
"name": "归档载体安全性" |
|||
}, |
|||
{ |
|||
"id": 22, |
|||
"name": "归档过程安全性" |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
@ -1,9 +1,472 @@ |
|||
<template> |
|||
<div>四性检测管理</div> |
|||
<div class="app-container"> |
|||
<div class="container-main" style="justify-content: flex-start;"> |
|||
<!--侧边部门数据--> |
|||
<div class="elect-cont-left"> |
|||
<div class="container-left"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<el-tree :data="fourDatas" :props="defaultProps" :expand-on-click-node="false" highlight-current :default-expanded-keys="[1]" :default-checked-keys="[1]" @node-click="handleNodeClick" /> |
|||
</div> |
|||
</div> |
|||
<!--用户数据--> |
|||
<div class="elect-cont-right"> |
|||
<!--工具栏--> |
|||
<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: 225px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
|||
<el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery"> |
|||
<i slot="prefix" class="iconfont icon-zhuangtai" /> |
|||
<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 class="hide-bar"> |
|||
<el-checkbox v-model="fixedStatus" @change="statusBarChecked">隐藏状态栏</el-checkbox> |
|||
</div> |
|||
</div> |
|||
<div class="container-right"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<!--表单渲染--> |
|||
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title"> |
|||
<!-- <span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> --> |
|||
<div class="setting-dialog"> |
|||
<el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="90px"> |
|||
<el-form-item label="账号" prop="username"> |
|||
<el-input v-model="form.username" @keydown.native="keydown($event)" /> |
|||
</el-form-item> |
|||
<el-form-item label="电话" prop="phone"> |
|||
<el-input v-model.number="form.phone" /> |
|||
</el-form-item> |
|||
<el-form-item label="用户名" prop="nickName"> |
|||
<el-input v-model="form.nickName" @keydown.native="keydown($event)" /> |
|||
</el-form-item> |
|||
<el-form-item label="邮箱" prop="email"> |
|||
<el-input v-model="form.email" /> |
|||
</el-form-item> |
|||
<el-form-item label="所属全宗" prop="dept.id"> |
|||
<treeselect v-model="form.dept.id" :options="depts" placeholder="选择全宗" /> |
|||
</el-form-item> |
|||
<el-form-item label="所属部门" prop="dept.id"> |
|||
<treeselect v-model="form.dept.id" :options="depts" :load-options="loadDepts" placeholder="选择部门" /> |
|||
</el-form-item> |
|||
<el-form-item label="性别" prop="gender"> |
|||
<el-radio-group v-model="form.gender"> |
|||
<el-radio label="男">男</el-radio> |
|||
<el-radio label="女">女</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="状态" prop="enabled"> |
|||
<el-radio-group v-model="form.enabled" :disabled="form.id === user.id"> |
|||
<el-radio v-for="item in dict.user_status" :key="item.id" :label="item.value">{{ item.label }}</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item style="margin-bottom: 0;" label="角色" prop="roles" class="is-required selecct-dropdown"> |
|||
<el-select v-model="roleDatas" style="width: 584x" multiple placeholder="请选择" :popper-append-to-body="false" @remove-tag="deleteTag" @change="changeRole"> |
|||
<el-option v-for="item in roles" :key="item.name" :disabled="level !== 1 && item.level <= level" :label="item.name" :value="item.id" /> |
|||
</el-select> |
|||
</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-table ref="table" v-loading="crud.loading" class="fixed-table" :data="crud.data" style="width: 100%;" @row-click="clickRowHandler" @selection-change="crud.selectionChangeHandler"> |
|||
<el-table-column :selectable="checkboxT" type="selection" align="center" width="55" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="username" label="一级分类" width="140" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="nickName" label="二级分类" width="200" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="gender" label="检测编号" width="100" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="phone" label="检测项目" width="340" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="email" label="检测目的" width="340" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="dept" label="检测对象" width="160" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="dept" label="依据和方法" width="140" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="dept" label="检测类" width="140" /> |
|||
<!-- :fixed="fixedStatus ? false : 'right' " --> |
|||
<el-table-column class="state-right" label="状态" align="center" width="120" prop="enabled" fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<span :class="['row-state', scope.row.enabled ? 'active-state': 'disabled-state']">{{ scope.row.enabled ? '启用中': '停用中' }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<pagination /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import crudUser from '@/api/system/user' |
|||
import { isvalidPhone } from '@/utils/validate' |
|||
import { getDepts, getDeptSuperior } from '@/api/system/dept' |
|||
import { getAll, getLevel } from '@/api/system/role' |
|||
import { getAllJob } from '@/api/system/job' |
|||
import CRUD, { presenter, header, form, crud } 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 from '@riophae/vue-treeselect' |
|||
import { mapGetters } from 'vuex' |
|||
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
|||
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' |
|||
import dataJson from './data.json' |
|||
let userRoles = [] |
|||
let userJobs = [] |
|||
const defaultForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 'true', roles: [], jobs: [], dept: { id: null }, phone: null } |
|||
export default { |
|||
name: 'FourCharacterDetection', |
|||
components: { Treeselect, crudOperation, rrOperation, pagination }, |
|||
cruds() { |
|||
return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }, optShow: { |
|||
add: true, |
|||
edit: true, |
|||
del: false, |
|||
download: true, |
|||
group: false |
|||
}}) |
|||
}, |
|||
mixins: [presenter(), header(), form(defaultForm), crud()], |
|||
// 数据字典 |
|||
dicts: ['user_status'], |
|||
data() { |
|||
// 自定义验证 |
|||
const validPhone = (rule, value, callback) => { |
|||
if (!value) { |
|||
callback(new Error('请输入电话号码')) |
|||
} else if (!isvalidPhone(value)) { |
|||
callback(new Error('请输入正确的11位手机号码')) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
return { |
|||
fixedStatus: true, |
|||
height: document.documentElement.clientHeight - 180 + 'px;', |
|||
deptName: '', depts: [], |
|||
fourDatas: [], |
|||
jobs: [], level: 3, roles: [], |
|||
jobDatas: [], roleDatas: [], // 多选时使用 |
|||
defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' }, |
|||
permission: { |
|||
add: ['admin', 'user:add'], |
|||
edit: ['admin', 'user:edit'], |
|||
del: ['admin', 'user:del'] |
|||
}, |
|||
enabledTypeOptions: [ |
|||
{ key: 'true', display_name: '启用中' }, |
|||
{ key: 'false', display_name: '停用中' } |
|||
], |
|||
rules: { |
|||
username: [ |
|||
{ required: true, message: '请输入用户名', trigger: 'blur' }, |
|||
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' } |
|||
], |
|||
nickName: [ |
|||
{ required: true, message: '请输入用户昵称', trigger: 'blur' }, |
|||
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' } |
|||
], |
|||
email: [ |
|||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' }, |
|||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' } |
|||
], |
|||
phone: [ |
|||
{ required: true, trigger: 'blur', validator: validPhone } |
|||
], |
|||
'dept.id': [ |
|||
{ required: true, trigger: 'blur', message: '请选择部门' } |
|||
], |
|||
gender: [ |
|||
{ required: true, trigger: 'change', message: '请选择性别' } |
|||
], |
|||
enabled: [ |
|||
{ required: true, trigger: 'change', message: '请选择状态' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'user' |
|||
]) |
|||
}, |
|||
created() { |
|||
this.fourDatas = dataJson |
|||
}, |
|||
mounted: function() { |
|||
const that = this |
|||
window.onresize = function temp() { |
|||
that.height = document.documentElement.clientHeight - 180 + 'px;' |
|||
} |
|||
this.fixedStatus = JSON.parse(localStorage.getItem('statusFourFixed')) === true |
|||
}, |
|||
methods: { |
|||
statusBarChecked(val) { |
|||
localStorage.setItem('statusFourFixed', val) |
|||
}, |
|||
clickRowHandler(row) { |
|||
// this.$refs.table.toggleRowSelection(row) // 单击选中 |
|||
}, |
|||
// 禁止输入空格 |
|||
keydown(e) { |
|||
if (e.keyCode === 32) { |
|||
e.returnValue = false |
|||
} |
|||
}, |
|||
changeRole(value) { |
|||
userRoles = [] |
|||
value.forEach(function(data, index) { |
|||
const role = { id: data } |
|||
userRoles.push(role) |
|||
}) |
|||
}, |
|||
changeJob(value) { |
|||
userJobs = [] |
|||
value.forEach(function(data, index) { |
|||
const job = { id: data } |
|||
userJobs.push(job) |
|||
}) |
|||
}, |
|||
deleteTag(value) { |
|||
userRoles.forEach(function(data, index) { |
|||
if (data.id === value) { |
|||
userRoles.splice(index, value) |
|||
} |
|||
}) |
|||
}, |
|||
// 新增与编辑前做的操作 |
|||
[CRUD.HOOK.afterToCU](crud, form) { |
|||
this.getRoles() |
|||
if (form.id == null) { |
|||
this.getDepts() |
|||
} else { |
|||
this.getSupDepts(form.dept.id) |
|||
} |
|||
this.getRoleLevel() |
|||
this.getJobs() |
|||
form.enabled = form.enabled.toString() |
|||
}, |
|||
// 新增前将多选的值设置为空 |
|||
[CRUD.HOOK.beforeToAdd]() { |
|||
this.jobDatas = [] |
|||
this.roleDatas = [] |
|||
}, |
|||
// 初始化编辑时候的角色与岗位 |
|||
[CRUD.HOOK.beforeToEdit](crud, form) { |
|||
this.getJobs(this.form.dept.id) |
|||
this.jobDatas = [] |
|||
this.roleDatas = [] |
|||
userRoles = [] |
|||
userJobs = [] |
|||
const _this = this |
|||
form.roles.forEach(function(role, index) { |
|||
_this.roleDatas.push(role.id) |
|||
const rol = { id: role.id } |
|||
userRoles.push(rol) |
|||
}) |
|||
form.jobs.forEach(function(job, index) { |
|||
_this.jobDatas.push(job.id) |
|||
const data = { id: job.id } |
|||
userJobs.push(data) |
|||
}) |
|||
}, |
|||
// 提交前做的操作 |
|||
[CRUD.HOOK.afterValidateCU](crud) { |
|||
if (!crud.form.dept.id) { |
|||
this.$message({ |
|||
message: '部门不能为空', |
|||
type: 'warning' |
|||
}) |
|||
return false |
|||
} else if (this.jobDatas.length === 0) { |
|||
this.$message({ |
|||
message: '岗位不能为空', |
|||
type: 'warning' |
|||
}) |
|||
return false |
|||
} else if (this.roleDatas.length === 0) { |
|||
this.$message({ |
|||
message: '角色不能为空', |
|||
type: 'warning' |
|||
}) |
|||
return false |
|||
} |
|||
crud.form.roles = userRoles |
|||
crud.form.jobs = userJobs |
|||
return true |
|||
}, |
|||
// 获取左侧部门数据 |
|||
getDeptDatas(node, resolve) { |
|||
const sort = 'id,desc' |
|||
const params = { sort: sort } |
|||
if (typeof node !== 'object') { |
|||
if (node) { |
|||
params['name'] = node |
|||
} |
|||
} else if (node.level !== 0) { |
|||
params['pid'] = node.data.id |
|||
} |
|||
setTimeout(() => { |
|||
getDepts(params).then(res => { |
|||
if (resolve) { |
|||
resolve(res.content) |
|||
} else { |
|||
this.deptDatas = res.content |
|||
} |
|||
}) |
|||
}, 100) |
|||
}, |
|||
getDepts() { |
|||
getDepts({ enabled: true }).then(res => { |
|||
this.depts = res.content.map(function(obj) { |
|||
if (obj.hasChildren) { |
|||
obj.children = null |
|||
} |
|||
return obj |
|||
}) |
|||
}) |
|||
}, |
|||
getSupDepts(deptId) { |
|||
getDeptSuperior(deptId).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) { |
|||
getDepts({ 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) |
|||
}) |
|||
} |
|||
}, |
|||
// 切换部门 |
|||
handleNodeClick(data) { |
|||
if (data.pid === 0) { |
|||
this.query.deptId = null |
|||
} else { |
|||
this.query.deptId = data.id |
|||
} |
|||
this.crud.toQuery() |
|||
}, |
|||
// 改变状态 |
|||
changeEnabled(data, val) { |
|||
// '此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 你是否继续？', |
|||
this.$confirm('此操作将禁用 / 启用用户 “' + data.username + '”' + '<span>你是否还要继续？</span>', '提示', { |
|||
confirmButtonText: '继续', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
dangerouslyUseHTMLString: true |
|||
}).then(() => { |
|||
crudUser.edit(data).then(res => { |
|||
this.crud.notify(this.dict.label.user_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS) |
|||
}).catch(() => { |
|||
data.enabled = !data.enabled |
|||
}) |
|||
}).catch(() => { |
|||
data.enabled = !data.enabled |
|||
}) |
|||
}, |
|||
// 获取弹窗内角色数据 |
|||
getRoles() { |
|||
getAll().then(res => { |
|||
this.roles = res |
|||
}).catch(() => { }) |
|||
}, |
|||
// 获取弹窗内岗位数据 |
|||
getJobs() { |
|||
getAllJob().then(res => { |
|||
this.jobs = res.content |
|||
}).catch(() => { }) |
|||
}, |
|||
// 获取权限级别 |
|||
getRoleLevel() { |
|||
getLevel().then(res => { |
|||
this.level = res.level |
|||
}).catch(() => { }) |
|||
}, |
|||
checkboxT(row, rowIndex) { |
|||
return row.id !== this.user.id |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
<style lang="scss" scoped> |
|||
@mixin table-fixed-status-style{ |
|||
[data-theme="dark"] & { |
|||
&.active-state{ |
|||
color: #1aae93; |
|||
border: 1px solid #1aae93; |
|||
} |
|||
&.disabled-state{ |
|||
color: #A6ADB6; |
|||
border: 1px solid #E6E8ED; |
|||
opacity: 0.6; |
|||
} |
|||
} |
|||
[data-theme="light"] & { |
|||
&.active-state{ |
|||
color: #2ECAAC; |
|||
background-color: #E8F8F5; |
|||
border: 1px solid #B1EBDF; |
|||
} |
|||
&.disabled-state{ |
|||
color: #A6ADB6; |
|||
background-color: #F3F5F9; |
|||
border: 1px solid #E6E8ED; |
|||
} |
|||
} |
|||
} |
|||
.head-container{ |
|||
position: relative; |
|||
} |
|||
.hide-bar{ |
|||
position: absolute; |
|||
right: 0; |
|||
top: 60px; |
|||
} |
|||
::v-deep .el-table__fixed-right-patch{ |
|||
background-color:#02255f; |
|||
border-bottom: none; |
|||
} |
|||
.row-state{ |
|||
display: inline-block; |
|||
padding: 0 4px; |
|||
height: 20px; |
|||
line-height: 20px; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
border-radius: 3px; |
|||
@include table-fixed-status-style; |
|||
} |
|||
|
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue