long
2 years ago
4 changed files with 390 additions and 2 deletions
@ -0,0 +1,136 @@
|
||||
<template> |
||||
<div class="components-input-demo-presuffix"> |
||||
<!----> |
||||
<a-input @click="openModal" placeholder="请点击选择入库目标库" v-model="departNames" readOnly :disabled="disabled"> |
||||
<a-icon slot="prefix" type="cluster" title="目标库选择控件"/> |
||||
<!-- <a-icon v-if="departIds" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>--> |
||||
</a-input> |
||||
|
||||
<j-select-item-modal |
||||
ref="innerDepartSelectModal" |
||||
:modal-width="modalWidth" |
||||
:multi="multi" |
||||
:rootOpened="rootOpened" |
||||
:depart-id="departIds" |
||||
@ok="handleOK" |
||||
@initComp="initComp"/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import JSelectItemModal from './modal/JSelectItemModal' |
||||
export default { |
||||
name: 'JSelectItem', |
||||
components:{ |
||||
JSelectItemModal |
||||
}, |
||||
props:{ |
||||
modalWidth:{ |
||||
type:Number, |
||||
default:500, |
||||
required:false |
||||
}, |
||||
multi:{ |
||||
type:Boolean, |
||||
default:false, |
||||
required:false |
||||
}, |
||||
rootOpened:{ |
||||
type:Boolean, |
||||
default:true, |
||||
required:false |
||||
}, |
||||
value:{ |
||||
type:String, |
||||
required:false |
||||
}, |
||||
disabled:{ |
||||
type: Boolean, |
||||
required: false, |
||||
default: false |
||||
}, |
||||
// 自定义返回字段，默认返回 id |
||||
customReturnField: { |
||||
type: String, |
||||
default: 'id' |
||||
} |
||||
}, |
||||
data(){ |
||||
return { |
||||
visible:false, |
||||
confirmLoading:false, |
||||
departNames:"", |
||||
departIds:'' |
||||
} |
||||
}, |
||||
mounted(){ |
||||
this.departIds = this.value |
||||
}, |
||||
watch:{ |
||||
value(val){ |
||||
//update-begin-author:wangshuai date:20201124 for:组件 JSelectDepart.vue不是默认id时新内容编辑问题 gitee I247X2 |
||||
// if (this.customReturnField === 'id') { |
||||
this.departIds = val |
||||
// } |
||||
//update-end-author:wangshuai date:20201124 for:组件 JSelectDepart.vue不是默认id时新内容编辑问题 gitee I247X2 |
||||
} |
||||
}, |
||||
methods:{ |
||||
initComp(departNames){ |
||||
this.departNames = departNames |
||||
//update-begin-author:lvdandan date:20200513 for:TESTA-438 部门选择组件自定义返回值，数据无法回填 |
||||
//TODO 当返回字段为部门名称时会有问题,因为部门名称不唯一 |
||||
//返回字段不为id时，根据返回字段获取id |
||||
if(this.customReturnField !== 'id' && this.value){ |
||||
const dataList = this.$refs.innerDepartSelectModal.dataList; |
||||
console.log('this.value',this.value) |
||||
this.departIds = this.value.split(',').map(item => { |
||||
const data = dataList.filter(d=>d[this.customReturnField] === item) |
||||
return data.length > 0 ? data[0].id : '' |
||||
}).join(',') |
||||
} |
||||
//update-end-author:lvdandan date:20200513 for:TESTA-438 部门选择组件自定义返回值，数据无法回填 |
||||
}, |
||||
openModal(){ |
||||
this.$refs.innerDepartSelectModal.show() |
||||
}, |
||||
handleOK(rows, idstr) { |
||||
let value = '' |
||||
if (!rows && rows.length <= 0) { |
||||
this.departNames = '' |
||||
this.departIds = '' |
||||
} else { |
||||
value = rows.map(row => row[this.customReturnField]).join(',') |
||||
this.departNames = rows.map(row => row['departName']).join(',') |
||||
this.departIds = idstr |
||||
} |
||||
this.$emit("change", value) |
||||
}, |
||||
getDepartNames(){ |
||||
return this.departNames |
||||
}, |
||||
handleEmpty(){ |
||||
this.handleOK('') |
||||
} |
||||
}, |
||||
model: { |
||||
prop: 'value', |
||||
event: 'change' |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.components-input-demo-presuffix .anticon-close-circle { |
||||
cursor: pointer; |
||||
color: #ccc; |
||||
transition: color 0.3s; |
||||
font-size: 12px; |
||||
} |
||||
.components-input-demo-presuffix .anticon-close-circle:hover { |
||||
color: #f5222d; |
||||
} |
||||
.components-input-demo-presuffix .anticon-close-circle:active { |
||||
color: #666; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,248 @@
|
||||
<template> |
||||
<j-modal |
||||
title="选择公司" |
||||
:width="modalWidth" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
@ok="handleSubmit" |
||||
@cancel="handleCancel" |
||||
switchFullscreen |
||||
cancelText="关闭"> |
||||
<a-spin tip="Loading..." :spinning="false"> |
||||
<a-input-search style="margin-bottom: 1px" placeholder="请输入公司名称按回车进行搜索" @search="onSearch" /> |
||||
<a-tree |
||||
checkable |
||||
class="my-dept-select-tree" |
||||
:treeData="treeData" |
||||
:checkStrictly="true" |
||||
@check="onCheck" |
||||
@select="onSelect" |
||||
@expand="onExpand" |
||||
:autoExpandParent="autoExpandParent" |
||||
:expandedKeys="expandedKeys" |
||||
:checkedKeys="checkedKeys"> |
||||
|
||||
<template slot="title" slot-scope="{title}"> |
||||
<span v-if="title.indexOf(searchValue) > -1"> |
||||
{{title.substr(0, title.indexOf(searchValue))}} |
||||
<span style="color: #f50">{{searchValue}}</span> |
||||
{{title.substr(title.indexOf(searchValue) + searchValue.length)}} |
||||
</span> |
||||
<span v-else>{{title}}</span> |
||||
</template> |
||||
</a-tree> |
||||
|
||||
</a-spin> |
||||
</j-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import { queryItemTreeList } from '@/api/api' |
||||
export default { |
||||
name: 'JSelectItemModal', |
||||
props:['modalWidth','multi','rootOpened','departId'], |
||||
data(){ |
||||
return { |
||||
visible:false, |
||||
confirmLoading:false, |
||||
treeData:[], |
||||
autoExpandParent:true, |
||||
expandedKeys:[], |
||||
dataList:[], |
||||
checkedKeys:[], |
||||
checkedRows:[], |
||||
searchValue:"" |
||||
} |
||||
}, |
||||
created(){ |
||||
this.loadDepart(); |
||||
}, |
||||
watch:{ |
||||
departId(){ |
||||
this.initDepartComponent() |
||||
}, |
||||
visible: { |
||||
handler() { |
||||
if (this.departId) { |
||||
this.checkedKeys = this.departId.split(","); |
||||
// console.log('this.departId', this.departId) |
||||
} else { |
||||
this.checkedKeys = []; |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
methods:{ |
||||
show(){ |
||||
this.visible=true |
||||
this.checkedRows=[] |
||||
this.checkedKeys=[] |
||||
}, |
||||
loadDepart(){ |
||||
queryItemTreeList().then(res=>{ |
||||
if(res.success){ |
||||
let arr = [...res.result] |
||||
this.reWriterWithSlot(arr) |
||||
this.treeData = arr |
||||
this.initDepartComponent() |
||||
if(this.rootOpened){ |
||||
this.initExpandedKeys(res.result) |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
initDepartComponent(){ |
||||
let names = '' |
||||
if(this.departId){ |
||||
let currDepartId = this.departId |
||||
for(let item of this.dataList){ |
||||
if(currDepartId.indexOf(item.key)>=0){ |
||||
names+=","+item.title |
||||
} |
||||
} |
||||
if(names){ |
||||
names = names.substring(1) |
||||
} |
||||
} |
||||
this.$emit("initComp",names) |
||||
}, |
||||
reWriterWithSlot(arr){ |
||||
for(let item of arr){ |
||||
if(item.children && item.children.length>0){ |
||||
this.reWriterWithSlot(item.children) |
||||
let temp = Object.assign({},item) |
||||
temp.children = {} |
||||
this.dataList.push(temp) |
||||
}else{ |
||||
this.dataList.push(item) |
||||
item.scopedSlots={ title: 'title' } |
||||
} |
||||
} |
||||
}, |
||||
initExpandedKeys(arr){ |
||||
if(arr && arr.length>0){ |
||||
let keys = [] |
||||
for(let item of arr){ |
||||
if(item.children && item.children.length>0){ |
||||
keys.push(item.id) |
||||
} |
||||
} |
||||
this.expandedKeys=[...keys] |
||||
}else{ |
||||
this.expandedKeys=[] |
||||
} |
||||
}, |
||||
onCheck (checkedKeys,info) { |
||||
if(!this.multi){ |
||||
let arr = checkedKeys.checked.filter(item => this.checkedKeys.indexOf(item) < 0) |
||||
this.checkedKeys = [...arr] |
||||
this.checkedRows = (this.checkedKeys.length === 0) ? [] : [info.node.dataRef] |
||||
}else{ |
||||
this.checkedKeys = checkedKeys.checked |
||||
this.checkedRows = this.getCheckedRows(this.checkedKeys) |
||||
} |
||||
}, |
||||
onSelect(selectedKeys,info) { |
||||
let keys = [] |
||||
keys.push(selectedKeys[0]) |
||||
if(!this.checkedKeys || this.checkedKeys.length===0 || !this.multi){ |
||||
this.checkedKeys = [...keys] |
||||
this.checkedRows=[info.node.dataRef] |
||||
}else{ |
||||
let currKey = info.node.dataRef.key |
||||
if(this.checkedKeys.indexOf(currKey)>=0){ |
||||
this.checkedKeys = this.checkedKeys.filter(item=> item !==currKey) |
||||
}else{ |
||||
this.checkedKeys.push(...keys) |
||||
} |
||||
} |
||||
this.checkedRows = this.getCheckedRows(this.checkedKeys) |
||||
}, |
||||
onExpand (expandedKeys) { |
||||
this.expandedKeys = expandedKeys |
||||
this.autoExpandParent = false |
||||
}, |
||||
handleSubmit(){ |
||||
if(!this.checkedKeys || this.checkedKeys.length==0){ |
||||
this.$emit("ok",'') |
||||
}else{ |
||||
this.$emit("ok",this.checkedRows,this.checkedKeys.join(",")) |
||||
} |
||||
this.handleClear() |
||||
}, |
||||
handleCancel(){ |
||||
this.handleClear() |
||||
}, |
||||
handleClear(){ |
||||
this.visible=false |
||||
this.checkedKeys=[] |
||||
}, |
||||
getParentKey(currKey,treeData){ |
||||
let parentKey |
||||
for (let i = 0; i < treeData.length; i++) { |
||||
const node = treeData[i] |
||||
if (node.children) { |
||||
if (node.children.some(item => item.key === currKey)) { |
||||
parentKey = node.key |
||||
} else if (this.getParentKey(currKey, node.children)) { |
||||
parentKey = this.getParentKey(currKey, node.children) |
||||
} |
||||
} |
||||
} |
||||
return parentKey |
||||
}, |
||||
onSearch(value){ |
||||
const expandedKeys = this.dataList.map((item) => { |
||||
if (item.title.indexOf(value) > -1) { |
||||
return this.getParentKey(item.key,this.treeData) |
||||
} |
||||
return null |
||||
}).filter((item, i, self) => item && self.indexOf(item) === i) |
||||
|
||||
Object.assign(this, { |
||||
expandedKeys, |
||||
searchValue: value, |
||||
autoExpandParent: true, |
||||
}) |
||||
|
||||
|
||||
}, |
||||
// 根据 checkedKeys 获取 rows |
||||
getCheckedRows(checkedKeys) { |
||||
const forChildren = (list, key) => { |
||||
for (let item of list) { |
||||
if (item.id === key) { |
||||
return item |
||||
} |
||||
if (item.children instanceof Array) { |
||||
let value = forChildren(item.children, key) |
||||
if (value != null) { |
||||
return value |
||||
} |
||||
} |
||||
} |
||||
return null |
||||
} |
||||
|
||||
let rows = [] |
||||
for (let key of checkedKeys) { |
||||
let row = forChildren(this.treeData, key) |
||||
if (row != null) { |
||||
rows.push(row) |
||||
} |
||||
} |
||||
return rows |
||||
} |
||||
} |
||||
} |
||||
|
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
// 限制部门选择树高度，避免部门太多时点击确定不便 |
||||
.my-dept-select-tree{ |
||||
height: 350px; |
||||
overflow-y: scroll; |
||||
} |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue