|
|
@@ -123,6 +123,7 @@
|
|
|
clearable
|
|
|
placeholder="机构快速搜索"
|
|
|
prefix-icon="Search"
|
|
|
+ @blur='change'
|
|
|
/>
|
|
|
</div>
|
|
|
<el-divider/>
|
|
|
@@ -135,9 +136,9 @@
|
|
|
</div>
|
|
|
<div class="grid radius mt-15 padding" style="border: 1px solid #DDDFE6">
|
|
|
<div v-for="(item,index) in deptList" :key='item.id' class="flex flex-center pointer padding"
|
|
|
- :class="item.checked ? 'org-s' : 'org'" @click='changeChecked(index)'>
|
|
|
+ :class="item.search ? 'org-search' : item.checked ? 'org-s' : 'org'" @click='changeChecked(index)'>
|
|
|
<div :class="item.checked ? 'dot-checked' : 'dot'"></div>
|
|
|
- <div class='ml-5 full-width' :class="item.checked ? 'white' : ''">{{ item.deptName }}</div>
|
|
|
+ <div class='ml-5 full-width' :class="item.checked || item.search ? 'white' : ''">{{ item.deptName }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -156,6 +157,16 @@ import { useStore } from '@/store/user.js'
|
|
|
export default {
|
|
|
name: 'owner_serach',
|
|
|
components: { baseButton },
|
|
|
+ watch: {
|
|
|
+ keyWords: {
|
|
|
+ handler (val) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.change()
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
setup () {
|
|
|
const user = useStore()
|
|
|
return { user }
|
|
|
@@ -286,6 +297,29 @@ export default {
|
|
|
const checked = this.deptList.filter(sub => sub.checked)
|
|
|
this.form.deptId = checked.map(sub => sub.id).join(',')
|
|
|
this.showOrg = false
|
|
|
+ },
|
|
|
+ change () {
|
|
|
+ if (this.keyWords.length === 0) {
|
|
|
+ this.deptList.forEach(sub => sub.search = false)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const tmp = this.deptList.filter(sub => sub.deptName.indexOf(this.keyWords) > -1).map(sub => sub.id)
|
|
|
+ console.log(tmp)
|
|
|
+ tmp.forEach(sub => {
|
|
|
+ const index = this.deptList.findIndex(ele => ele.id === sub)
|
|
|
+ this.deptList[index].search = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ querySearch (key, cb) {
|
|
|
+ const tmp = this.deptList.filter(sub => sub.deptName.indexOf(key) > -1).map(sub => {
|
|
|
+ const item = { value: sub.deptName, label: sub.deptName, id: sub.id }
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ cb(tmp)
|
|
|
+ },
|
|
|
+ handleSelect (item) {
|
|
|
+ const index = this.deptList.findIndex(sub => sub.id === item.id)
|
|
|
+ this.deptList[index].search = true
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -335,18 +369,17 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.org-s {
|
|
|
+.org-search {
|
|
|
border-radius: 8px;
|
|
|
background: #4E637F;
|
|
|
width: 150px;
|
|
|
margin: 10px;
|
|
|
+}
|
|
|
|
|
|
- :deep(.el-checkbox) {
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- :deep(.el-checkbox__label) {
|
|
|
- color: white;
|
|
|
- }
|
|
|
+.org-s {
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #4E637F;
|
|
|
+ width: 150px;
|
|
|
+ margin: 10px;
|
|
|
}
|
|
|
</style>
|