|
@@ -10,10 +10,10 @@
|
|
>
|
|
>
|
|
<div class="filter-box">
|
|
<div class="filter-box">
|
|
<el-form ref="filterForm" :model="formData" inline>
|
|
<el-form ref="filterForm" :model="formData" inline>
|
|
- <el-form-item label="应用名称">
|
|
|
|
|
|
+ <el-form-item label="姓名">
|
|
<el-input v-model="formData.name" class="filter-item" clearable />
|
|
<el-input v-model="formData.name" class="filter-item" clearable />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="应用事权单位名称">
|
|
|
|
|
|
+ <el-form-item label="警号">
|
|
<el-input v-model="formData.policeNumber" class="filter-item" clearable />
|
|
<el-input v-model="formData.policeNumber" class="filter-item" clearable />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-form-item>
|
|
@@ -31,22 +31,24 @@
|
|
<div class="dept-box">
|
|
<div class="dept-box">
|
|
<div class="box-title">机构列表</div>
|
|
<div class="box-title">机构列表</div>
|
|
<el-input v-model="treeFilter" placeholder="输入关键字进行过滤" />
|
|
<el-input v-model="treeFilter" placeholder="输入关键字进行过滤" />
|
|
- <el-tree
|
|
|
|
- ref="tree"
|
|
|
|
- class="filter-tree"
|
|
|
|
- :data="treeData"
|
|
|
|
- :props="treeProps"
|
|
|
|
- :node-key="nodeKey"
|
|
|
|
- :default-expanded-keys="defaultExpandedKeys"
|
|
|
|
- :expand-on-click-node="false"
|
|
|
|
- :filter-node-method="filterNode"
|
|
|
|
- show-checkbox
|
|
|
|
- check-on-click-node
|
|
|
|
- @check="handleNodeChecked"
|
|
|
|
- />
|
|
|
|
|
|
+ <el-scrollbar class="tree-scrollbar">
|
|
|
|
+ <el-tree
|
|
|
|
+ ref="tree"
|
|
|
|
+ class="filter-tree"
|
|
|
|
+ :data="treeData"
|
|
|
|
+ :props="treeProps"
|
|
|
|
+ :node-key="nodeKey"
|
|
|
|
+ :default-expanded-keys="defaultExpandedKeys"
|
|
|
|
+ :expand-on-click-node="false"
|
|
|
|
+ :filter-node-method="filterNode"
|
|
|
|
+ show-checkbox
|
|
|
|
+ check-on-click-node
|
|
|
|
+ @check="handleNodeChecked"
|
|
|
|
+ />
|
|
|
|
+ </el-scrollbar>
|
|
</div>
|
|
</div>
|
|
<div class="user-box">
|
|
<div class="user-box">
|
|
- <el-table v-loading="loading" :data="tableData" fit border stripe height="500" style="width: 100%;">
|
|
|
|
|
|
+ <el-table ref="listTable" v-loading="loading" :data="tableData" border stripe height="calc(100% - 32px)" @select="handleSelect" @select-all="handleSelectAll">
|
|
<el-table-column type="selection" width="40" />
|
|
<el-table-column type="selection" width="40" />
|
|
<el-table-column prop="name" label="姓名" width="100" />
|
|
<el-table-column prop="name" label="姓名" width="100" />
|
|
<el-table-column prop="policeNumber" label="警号" width="100" />
|
|
<el-table-column prop="policeNumber" label="警号" width="100" />
|
|
@@ -79,7 +81,7 @@ import { isNull, hasValidRecords } from '@/utils/convert'
|
|
import { fetchUserList } from '@/api/user'
|
|
import { fetchUserList } from '@/api/user'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
- name: 'EmbeddedTree',
|
|
|
|
|
|
+ name: 'DeptUser',
|
|
props: {
|
|
props: {
|
|
treeData: {
|
|
treeData: {
|
|
type: Array,
|
|
type: Array,
|
|
@@ -103,10 +105,12 @@ export default {
|
|
total: 0,
|
|
total: 0,
|
|
pageSizeAll: [10, 20, 50, 100, 200, 500],
|
|
pageSizeAll: [10, 20, 50, 100, 200, 500],
|
|
tableData: [],
|
|
tableData: [],
|
|
|
|
+ multipleSelection: [],
|
|
|
|
+ // form
|
|
formData: {
|
|
formData: {
|
|
name: '',
|
|
name: '',
|
|
policeNumber: '',
|
|
policeNumber: '',
|
|
- orgCode: ''
|
|
|
|
|
|
+ orgCodes: []
|
|
},
|
|
},
|
|
// tree
|
|
// tree
|
|
treeProps: {
|
|
treeProps: {
|
|
@@ -142,6 +146,27 @@ export default {
|
|
this.current = val
|
|
this.current = val
|
|
this.getTablelist()
|
|
this.getTablelist()
|
|
},
|
|
},
|
|
|
|
+ handleSelect(selection, row) {
|
|
|
|
+ const index = this.multipleSelection.findIndex(item => item.idCard === row.idcard)
|
|
|
|
+ if (index > -1) {
|
|
|
|
+ this.multipleSelection.splice(index, 1)
|
|
|
|
+ } else {
|
|
|
|
+ this.multipleSelection.push({ idCard: row.idcard, name: row.name })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleSelectAll(selection) {
|
|
|
|
+ if (selection.length > 0) {
|
|
|
|
+ selection.forEach(row => {
|
|
|
|
+ if (this.multipleSelection.findIndex(item => item.idCard === row.idcard) === -1) {
|
|
|
|
+ this.multipleSelection.push({ idCard: row.idcard, name: row.name })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ this.multipleSelection = this.multipleSelection.filter(
|
|
|
|
+ item => this.tableData.findIndex(row => row.idcard === item.idCard) === -1
|
|
|
|
+ )
|
|
|
|
+ }
|
|
|
|
+ },
|
|
// 重置搜索项
|
|
// 重置搜索项
|
|
resetForm(formName) {
|
|
resetForm(formName) {
|
|
this.$refs[formName].resetFields()
|
|
this.$refs[formName].resetFields()
|
|
@@ -166,6 +191,13 @@ export default {
|
|
if (hasValidRecords(response)) {
|
|
if (hasValidRecords(response)) {
|
|
this.tableData = response.data.records
|
|
this.tableData = response.data.records
|
|
this.total = response.data.total
|
|
this.total = response.data.total
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.tableData.forEach((row, index) => {
|
|
|
|
+ if (this.multipleSelection.findIndex(item => item.idCard === row.idcard) >= 0) {
|
|
|
|
+ this.$refs['listTable'].toggleRowSelection(this.$refs['listTable'].data[index], true)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ })
|
|
} else {
|
|
} else {
|
|
this.tableData = []
|
|
this.tableData = []
|
|
this.total = 0
|
|
this.total = 0
|
|
@@ -187,30 +219,37 @@ export default {
|
|
},
|
|
},
|
|
handleNodeChecked(data, list) {
|
|
handleNodeChecked(data, list) {
|
|
if (list.checkedKeys.length === 0) {
|
|
if (list.checkedKeys.length === 0) {
|
|
- this.formData.orgCode = ''
|
|
|
|
|
|
+ this.formData.orgCodes = []
|
|
} else {
|
|
} else {
|
|
- if (list.checkedKeys.length === 2) {
|
|
|
|
- this.$refs['tree'].setCheckedKeys([data[this.nodeKey]])
|
|
|
|
|
|
+ if (list.checkedKeys.length > 1000) {
|
|
|
|
+ this.$message.warning('选中单位不能超过1000个')
|
|
|
|
+ return
|
|
}
|
|
}
|
|
- this.formData.orgCode = data[this.nodeKey]
|
|
|
|
|
|
+ this.formData.orgCodes = list.checkedKeys
|
|
}
|
|
}
|
|
this.searchTable()
|
|
this.searchTable()
|
|
},
|
|
},
|
|
- open() {
|
|
|
|
|
|
+ open(contacts, receivers) {
|
|
|
|
+ this.checkedContacts = contacts
|
|
|
|
+ this.multipleSelection = receivers
|
|
this.visible = true
|
|
this.visible = true
|
|
if (!isNull(this.treeData)) {
|
|
if (!isNull(this.treeData)) {
|
|
this.defaultExpandedKeys = [this.treeData[0][this.nodeKey]]
|
|
this.defaultExpandedKeys = [this.treeData[0][this.nodeKey]]
|
|
}
|
|
}
|
|
|
|
+ this.getTablelist()
|
|
|
|
+ },
|
|
|
|
+ clear() {
|
|
|
|
+ this.multipleSelection = []
|
|
|
|
+ this.checkedContacts = []
|
|
},
|
|
},
|
|
save() {
|
|
save() {
|
|
- const checkedNodes = this.$refs['tree'].getCheckedNodes()
|
|
|
|
- if (!isNull(checkedNodes)) {
|
|
|
|
- this.$emit('updateValue', checkedNodes)
|
|
|
|
|
|
+ if (!isNull(this.multipleSelection) || !isNull(this.checkedContacts)) {
|
|
|
|
+ this.$emit('updateValue', this.multipleSelection, this.checkedContacts)
|
|
this.visible = false
|
|
this.visible = false
|
|
} else {
|
|
} else {
|
|
this.$message({
|
|
this.$message({
|
|
type: 'warning',
|
|
type: 'warning',
|
|
- message: '请选择接收单位!'
|
|
|
|
|
|
+ message: '请选择接收人!'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -223,11 +262,26 @@ export default {
|
|
::v-deep {
|
|
::v-deep {
|
|
.custom-dialog {
|
|
.custom-dialog {
|
|
width: 1100px !important;
|
|
width: 1100px !important;
|
|
|
|
+ height: 85vh;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el-dialog__body {
|
|
|
|
+ padding: 10px 20px;
|
|
|
|
+ height: calc(100% - 55px - 71px);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el-scrollbar__wrap{
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el-scrollbar__bar.is-horizontal {
|
|
|
|
+ display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.receiver-box {
|
|
.receiver-box {
|
|
display: flex;
|
|
display: flex;
|
|
|
|
+ height: calc(100% - 62px);
|
|
}
|
|
}
|
|
|
|
|
|
.box-title {
|
|
.box-title {
|
|
@@ -261,6 +315,10 @@ export default {
|
|
border-right: 1px solid rgba(0,0,0,0.09);
|
|
border-right: 1px solid rgba(0,0,0,0.09);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ .tree-scrollbar {
|
|
|
|
+ height: calc(100% - 82px);
|
|
|
|
+ }
|
|
|
|
+
|
|
.user-box {
|
|
.user-box {
|
|
width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|