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> |
<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> |
</template> |
||||
|
|
||||
<script> |
<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> |
</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> |
</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> |
<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> |
</template> |
||||
|
|
||||
<script> |
<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> |
</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> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue