Administrator
4 years ago
parent
f180ffea01
commit
677444c0fe
@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<modal-panel addChildType="slot" :modalTitle="title" :show="showPanel" modalClassName="select-depart-style" @callback="modalCallback">
|
||||
<div class="card-container">
|
||||
<div class="tree-container-style" style="margin-right: 1rem">
|
||||
<a-tree v-if="treeData.length > 0" :treeData="treeData" :replaceFields="{key:'id',title:'name',children:'subChild'}"
|
||||
:defaultExpandedKeys="defaultExpandedKeys" @select="treeSelected" :selectedKeys="selectedKey"/>
|
||||
</div>
|
||||
<div class="selected-container-style">
|
||||
<div v-if="selectedDept.length === 0" class="no-selected-dept-style">暂无已选部门</div>
|
||||
<div v-else v-for="dept in selectedDept" :key="dept.id" class="selected-dept-style">
|
||||
{{dept.name}}
|
||||
<a-icon class="delete-selected-style" type="minus-circle" title="删除" @click="onDeleteSelectedDepart(dept)"/>
|
||||
</div>
|
||||
<div v-if="selectedDept.length > 0" class="clear-all-style" @click="deleteAllSelected()">清空已选</div>
|
||||
</div>
|
||||
</div>
|
||||
</modal-panel>
|
||||
</template>
|
||||
<script>
|
||||
import {Tree,Icon} from 'ant-design-vue'
|
||||
import ModalPanel from '../modal/ModalPanel'
|
||||
import 'ant-design-vue/es/input/style/css'
|
||||
import InterfaceConfig from '../../../commonInterface/interfaceConfig'
|
||||
import StaticParams from '../../../global-llibs/staticParams'
|
||||
import _ from 'lodash';
|
||||
export default {
|
||||
name: "SelectDepartment",
|
||||
props:{
|
||||
show:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
selectedDepart:{//已选人员[{person_id,person_name},{person_id,person_name}]
|
||||
type:Array,
|
||||
default:function () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
modalTitle:{
|
||||
type:String,
|
||||
default:"请选择部门"
|
||||
},
|
||||
isMultipleChoice:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
}
|
||||
},
|
||||
data:function(){
|
||||
return{
|
||||
selectedDept:_.cloneDeep(this.selectedDepart),//已选择的人员
|
||||
title:this.modalTitle,//弹出框标题
|
||||
showPanel:this.show,//是否显示
|
||||
resource_tree_data:[],//左侧树的原数据
|
||||
treeData:[],//左侧树的数据
|
||||
defaultExpandedKeys:[],//默认展开的书的节点
|
||||
selectedKey:[],
|
||||
checkedKeys:{
|
||||
checked:[],
|
||||
halfChecked:[]
|
||||
}
|
||||
}
|
||||
},
|
||||
components:{
|
||||
ModalPanel,
|
||||
ATree:Tree,
|
||||
AIcon:Icon,
|
||||
},
|
||||
methods:{
|
||||
deleteAllSelected:function(){
|
||||
this.selectedDept.splice(0);
|
||||
},
|
||||
onDeleteSelectedDepart:function(dept){
|
||||
// console.log(dept)
|
||||
this.selectedDept.splice(this.selectedDept.findIndex((item)=>{return parseInt(item.id) === parseInt(dept.id)}),1);
|
||||
if (parseInt(this.selectedKey[0]) === parseInt(dept.id)){
|
||||
this.selectedKey = []
|
||||
}
|
||||
},
|
||||
treeSelected:function(selectedKeys,{selected}){
|
||||
let item = this.resource_tree_data.filter((item)=>{return item.id === selectedKeys[0]})[0];//当前操作节点
|
||||
if (selected){
|
||||
this.selectedKey = [item.id]
|
||||
if (this.isMultipleChoice){//多选
|
||||
if (!this.selectedDept.some((selected)=>{return parseInt(selected.id) === item.id})){
|
||||
this.selectedDept.push(item);
|
||||
}
|
||||
}else{
|
||||
this.selectedDept = [item];
|
||||
}
|
||||
}
|
||||
},
|
||||
modalCallback:function(ary){
|
||||
if (ary[0] === "ok"){
|
||||
this.$emit("selectComplete",this.selectedDept)
|
||||
}else{
|
||||
this.$emit("cancel",null)
|
||||
}
|
||||
},
|
||||
getOrgTree:function () {
|
||||
this.InterfaceConfig.callInterface([{
|
||||
url:InterfaceConfig.depinfo_getOrgTree.url,
|
||||
method:InterfaceConfig.depinfo_getOrgTree.method,
|
||||
params:{org_id:this.BaseConfig.person_info_my.bureau_id},
|
||||
isTestLogin:InterfaceConfig.depinfo_getOrgTree.isTestLogin,
|
||||
}],(result)=>{
|
||||
if (result && result[0]){
|
||||
let data = result[0].data;
|
||||
if (data.success){
|
||||
this.resource_tree_data = _.cloneDeep(data.list);
|
||||
this.treeData = StaticParams.getOrgTreeData(data.list);
|
||||
this.defaultExpandedKeys = [this.treeData[0].id];
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
if (this.showPanel){
|
||||
this.getOrgTree();
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
modalTitle:function (newData) {
|
||||
this.title = newData;
|
||||
},
|
||||
selectedDepart:function(newData){
|
||||
this.selectedDept = newData;
|
||||
},
|
||||
show:function (newData) {
|
||||
this.showPanel = newData;
|
||||
this.selectedKey = [];
|
||||
if (newData === true){
|
||||
this.getOrgTree()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.select-depart-style{
|
||||
width: 800px !important;
|
||||
.ant-modal-body{
|
||||
padding: 0 !important;
|
||||
.card-container {
|
||||
background: #f5f5f5;
|
||||
overflow: hidden;
|
||||
padding: 0.5rem;
|
||||
.tree-container-style{
|
||||
height: 500px;
|
||||
width: 30%;
|
||||
border:1px solid #e5e5e5;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
float: left;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
}
|
||||
.selected-container-style{
|
||||
width: calc(70% - 1.5rem);
|
||||
height: calc(500px - 1rem);
|
||||
float: left;
|
||||
padding: 0 0 1rem 1rem;
|
||||
overflow: auto;
|
||||
background-color: white;
|
||||
border: 1px solid #e5e5e5;
|
||||
.no-selected-dept-style{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
color:#999999;
|
||||
}
|
||||
.selected-dept-style{
|
||||
padding: 0.25rem 0.5rem;
|
||||
border:1px solid #31a8fa;
|
||||
float: left;
|
||||
border-radius: 5px;
|
||||
margin: 1rem 1rem 0 0;
|
||||
color:#31a8fa;
|
||||
cursor:pointer;
|
||||
position: relative;
|
||||
&:hover{
|
||||
.delete-selected-style{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.delete-selected-style{
|
||||
font-size: 1rem;
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
right:-0.5rem;
|
||||
color:red;
|
||||
display: none;
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
.clear-all-style{
|
||||
position: absolute;
|
||||
bottom:0.2rem;
|
||||
right:1rem;
|
||||
color:#31a8fa;
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,182 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div class="personnel-Object-style clearfix" @click="onShow">
|
||||
<div v-if="!data.props.value || data.props.value.length === 0" class="placeholder-style">
|
||||
{{data.props.placeholder}}
|
||||
</div>
|
||||
<template v-else>
|
||||
<a-icon type="close-circle" class="clear-style" @click.stop="clearAll"></a-icon>
|
||||
<template v-if="data.props.is_multiple_choice">
|
||||
<div v-for="item in data.props.value" :key="item.id" class="multiple-style" :title="item.name">
|
||||
<div class="name-style">
|
||||
{{item.name}}
|
||||
</div>
|
||||
<span class="icon-container-style" @click.stop="deleteItem(item)">
|
||||
<a-icon type="close" class="multiple-delete-style"></a-icon>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="single-person-class">
|
||||
{{data.props.value[0].name}}
|
||||
</div>
|
||||
</template>
|
||||
<select-department :show="showPanel" modalTitle="部门选择" :selectedDepart="cloneData()"
|
||||
@cancel="closePanel" @selectComplete="selectComplete" :isMultipleChoice="data.props.is_multiple_choice"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Icon} from 'ant-design-vue'
|
||||
import SelectDepartment from '../../../components/common/selectDepartment/SelectDepartment'
|
||||
import _ from 'lodash'
|
||||
export default {
|
||||
name: "DepartmentSelection"
|
||||
name: "DepartmentSelection",
|
||||
props:["field","disabled"],
|
||||
data: function () {
|
||||
return {
|
||||
data:this.field,
|
||||
showPanel:false,
|
||||
curCheckNodes:{
|
||||
halfChecked:[],
|
||||
checked:[]
|
||||
},
|
||||
}
|
||||
},
|
||||
components:{
|
||||
AIcon:Icon,
|
||||
SelectDepartment
|
||||
},
|
||||
methods:{
|
||||
deleteItem:function(item){
|
||||
this.data.props.value.splice(this.data.props.value.findIndex((value)=>{return parseInt(value.id) === parseInt(item.id)}),1);
|
||||
},
|
||||
clearAll:function(){
|
||||
this.data.props.value = [];
|
||||
},
|
||||
onShow:function(){
|
||||
this.showPanel = true;
|
||||
},
|
||||
closePanel:function () {
|
||||
this.showPanel = false;
|
||||
},
|
||||
cloneData:function(){
|
||||
return _.cloneDeep(this.data.props.value)
|
||||
},
|
||||
selectComplete:function (selectedData) {
|
||||
this.data.props.value = _.cloneDeep(selectedData);
|
||||
this.showPanel = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.personnel-Object-style{
|
||||
font-size: 0.875rem;
|
||||
width: 12rem;
|
||||
min-height: 2rem;
|
||||
border-radius: 4px;
|
||||
border:1px solid #d9d9d9;
|
||||
background-color: white;
|
||||
padding-right: 1rem;
|
||||
position: relative;
|
||||
cursor:pointer;
|
||||
.placeholder-style{
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
color: #cccccc;
|
||||
}
|
||||
.single-person-class{
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0 0.5rem 0.5rem;
|
||||
min-height:2rem;
|
||||
line-height: 1rem;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.multiple-style{
|
||||
height: 1.5rem;
|
||||
margin-top: 3px;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
float: left;
|
||||
max-width: 99%;
|
||||
margin-right: 4px;
|
||||
padding: 0 20px 0 10px;
|
||||
overflow: hidden;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 2px;
|
||||
cursor: default;
|
||||
transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
.name-style{
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
transition: margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.icon-container-style{
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
vertical-align: -0.125em;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-weight: bold;
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
transform: scale(0.83333333) rotate(0deg);
|
||||
.multiple-delete-style{
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
font-style: normal;
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
vertical-align: -0.125em;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clear-style{
|
||||
position: absolute;
|
||||
top:0.5rem;
|
||||
right: 0.25rem;
|
||||
font-size: 1rem;
|
||||
cursor:pointer;
|
||||
visibility: hidden;
|
||||
color:#cccccc;
|
||||
&:hover{
|
||||
color:#31a8fa;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
border-color: #31a8fa;
|
||||
.clear-style{
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in new issue