xuhuajiao
/
yxk-electronic-archives
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

四性检测弹框

master
xuhuajiao 2 years ago
parent
8289bc82a1
commit
b432040ce6
1 changed files with 106 additions and 279 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 379
      src/views/system/fourCharacterDetection/index.vue

379
src/views/system/fourCharacterDetection/index.vue
View File

@ -6,7 +6,7 @@
<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" />
<el-tree :data="fourDatas" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current :default-expanded-keys="[1]" :default-checked-keys="[1]" @node-click="handleNodeClick" />
</div>
</div>
<!--用户数据-->
@ -35,40 +35,58 @@
<!-- <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 ref="form" :inline="true" :model="form" :rules="rules" label-width="100px">
<el-form-item label="一级分类" prop="oneLevel">
<el-select v-model="form.oneLevel" placeholder="请选择" style="width:225px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model.number="form.phone" />
<el-form-item label="二级分类" prop="twoLevel">
<el-select v-model="form.twoLevel" placeholder="请选择" style="width:225px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="用户名" prop="nickName">
<el-input v-model="form.nickName" @keydown.native="keydown($event)" />
<el-form-item label="检测编号" prop="number">
<el-input v-model="form.number" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-form-item label="检测项目" prop="item">
<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-row>
<el-form-item label="检测目的" prop="purpose">
<el-input v-model="form.purpose" style="width: 584px;" />
</el-form-item>
<el-form-item label="所属部门" prop="dept.id">
<treeselect v-model="form.dept.id" :options="depts" :load-options="loadDepts" placeholder="选择部门" />
</el-row>
<el-row>
<el-form-item label="检测对象" prop="object">
<el-input v-model="form.object" style="width: 584px;" />
</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-row>
<el-row>
<el-form-item label="依据和方法" prop="basis">
<el-input v-model="form.basis" type="textarea" style="width: 584px;" />
</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-row>
<el-row>
<el-form-item label="检测方法" prop="method">
<el-input v-model="form.method" style="width: 584px;" />
</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-row>
<el-form-item label="是否开启" prop="isOpen">
<el-radio-group v-model="form.isOpen">
<el-radio label="1">是</el-radio>
<el-radio label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -79,17 +97,16 @@
</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">
<el-table-column type="selection" align="center" width="55" />
<el-table-column :show-overflow-tooltip="true" prop="oneLevel" label="一级分类" width="140" />
<el-table-column :show-overflow-tooltip="true" prop="twoLevel" label="二级分类" width="200" />
<el-table-column :show-overflow-tooltip="true" prop="number" label="检测编号" width="100" />
<el-table-column :show-overflow-tooltip="true" prop="item" label="检测项目" width="340" />
<el-table-column :show-overflow-tooltip="true" prop="object" label="检测目的" width="340" />
<el-table-column :show-overflow-tooltip="true" prop="basis" label="检测对象" width="160" />
<el-table-column :show-overflow-tooltip="true" prop="method" label="依据和方法" width="140" />
<el-table-column :show-overflow-tooltip="true" prop="type" label="检测类" width="140" />
<el-table-column class="state-right" label="状态" align="center" width="108" prop="enabled" :fixed="fixedStatus ? false : 'right' ">
<template slot-scope="scope">
<span :class="['row-state', scope.row.enabled ? 'active-state': 'disabled-state']">{{ scope.row.enabled ? '启用中': '停用中' }}</span>
</template>
@ -106,26 +123,15 @@
<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 }
const defaultForm = { id: null, oneLevel: null, twoLevel: null, number: null, item: null, purpose: null, object: null, basis: null, method: null, isOpen: '1' }
export default {
name: 'FourCharacterDetection',
components: { Treeselect, crudOperation, rrOperation, pagination },
components: { crudOperation, rrOperation, pagination },
cruds() {
return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }, optShow: {
add: true,
@ -139,23 +145,21 @@ export default {
// 数据字典
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: [], // 多选时使用
options: [{
value: '选项1',
label: '真实性检测'
}, {
value: '选项2',
label: '完整性检测'
}, {
value: '选项3',
label: '可用性检测'
}, {
value: '选项4',
label: '安全性检测'
}],
defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
permission: {
add: ['admin', 'user:add'],
@ -167,46 +171,39 @@ export default {
{ key: 'false', display_name: '停用中' }
],
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
oneLevel: [
{ required: true, trigger: 'change', message: '请选择一级分类' }
],
twoLevel: [
{ required: true, trigger: 'change', message: '请选择二级分类' }
],
nickName: [
{ required: true, message: '请输入用户昵称', trigger: 'blur' },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
number: [
{ required: true, message: '检测编号不可为空', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
item: [
{ required: true, message: '检测项目不可为空', trigger: 'blur' }
],
phone: [
{ required: true, trigger: 'blur', validator: validPhone }
purpose: [
{ required: true, message: '检测目的不可为空', trigger: 'blur' }
],
'dept.id': [
{ required: true, trigger: 'blur', message: '请选择部门' }
object: [
{ required: true, message: '检测对象不可为空', trigger: 'blur' }
],
gender: [
{ required: true, trigger: 'change', message: '请选择性别' }
basis: [
{ required: true, message: '依据和方法不可为空', trigger: 'blur' }
],
enabled: [
{ required: true, trigger: 'change', message: '请选择状态' }
isOpen: [
{ required: true, message: '请选择是否开启', trigger: 'change' }
]
}
}
},
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: {
@ -216,211 +213,29 @@ export default {
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)
})
}
},
// 切换部门
// tree
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>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
@mixin table-fixed-status-style{
[data-theme="dark"] & {
&.active-state{
@ -446,6 +261,9 @@ export default {
}
}
}
[data-theme=dark] .elect-cont-left .container-left {
min-height: calc(100vh - 158px);
}
.head-container{
position: relative;
}
@ -468,5 +286,14 @@ export default {
border-radius: 3px;
@include table-fixed-status-style;
}
.hide-bar{
::v-deep .el-checkbox{
.el-checkbox__label{
@include font_color($font-color-theme);
}
}
}
.el-dialog .el-dialog__body .el-form-item:nth-child(odd){
}
</style>
Write Preview
Loading…
Cancel
Save