<template>
|
<win-md :title="setting.title" @close="close" :width="'800px'" :loading="loading">
|
<div class="section-container">
|
<div class="section-left">
|
<div class="header-row"><span class="title">选择人员：</span></div>
|
<div class="section-body">
|
<el-tree ref="tree" :data="treeData" node-key="id" :props="defaultProps" default-expand-all>
|
<template slot-scope="{ node, data }">
|
<div v-if="data.type != 'user'">{{ data.name }}</div>
|
<div v-else class="leaf-node" :class="data.checked ? 'checked' : ''" @click="handleCheckItem(data)">
|
{{ data.name }}
|
</div>
|
</template>
|
</el-tree>
|
</div>
|
</div>
|
<div class="section-right">
|
<div class="header-row">
|
<span class="title">已选：</span>
|
<span class="btn" @click="handleClear">清空</span>
|
</div>
|
<div class="section-body">
|
<div class="section-item" v-for="(item, index) in selectdSections" :key="index">
|
<span class="label">{{ item.name }}</span>
|
<span class="btn del-btn" @click="handleDel(item)">删除</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div slot="footer" align="center" class="dialog-footer">
|
<my-button name="取消" site="form" @click="close" />
|
<my-button name="保存" site="form" @click="save" />
|
</div>
|
</win-md>
|
</template>
|
|
<script>
|
import {userSelectDepartment, warehouseManagerList} from '@/api/foudation/store';
|
import winMd from '@/components/win/win-md';
|
import myButton from '@/components/myButton/myButton';
|
|
export default {
|
name: 'person',
|
components: { winMd, myButton },
|
props: {
|
setting: {
|
type: Object,
|
default: () => {},
|
},
|
},
|
data() {
|
return {
|
loading:true,
|
loadingText:'加载中',
|
selectdSections: [],
|
treeData: [],
|
formData: {},
|
defaultProps: {
|
children: 'children',
|
label: 'name',
|
},
|
key: Math.random(),
|
};
|
},
|
computed: {
|
checkedKeys() {
|
return this.selectdSections.map((v) => v.id);
|
},
|
},
|
created() {
|
if (this.setting.info) {
|
this.formData = Object.assign({}, JSON.parse(this.setting.info));
|
}
|
this.init();
|
warehouseManagerList({ warehouseId: this.formData.id }).then((res) => {
|
this.selectdSections = res.map((item) => {
|
item.name = item.managerName;
|
item.id = item.managerId;
|
return item;
|
});
|
this.key = Math.random();
|
this.loading = false
|
});
|
},
|
methods: {
|
async init() {
|
let managerRes = await warehouseManagerList({ warehouseId: this.formData.id });
|
this.managerListStr = JSON.stringify(managerRes);
|
const res = await userSelectDepartment({ agencyId: this.formData.agencyId });
|
this.treeData = this.deepList([res]);
|
},
|
deepList(list) {
|
return list.map((item) => {
|
if (item.children && item.children.length) {
|
this.deepList(item.children);
|
} else {
|
if (this.managerListStr.includes(item.id)) {
|
item.checked = true;
|
} else {
|
item.checked = false;
|
}
|
}
|
return item;
|
});
|
},
|
handleCheckItem(data) {
|
this.selectdSections = [];
|
this.treeData[0].children.forEach((item, index) => {
|
if (item.children) {
|
item.children.forEach((child, childIndex) => {
|
if (child.id == data.id) {
|
this.$set(this.treeData[0].children[index].children[childIndex], 'checked', !child.checked);
|
}
|
if (child.checked) {
|
this.selectdSections.push(child);
|
}
|
});
|
}
|
});
|
},
|
handleDel(item) {
|
this.handleCheckItem(item);
|
},
|
handleClear() {
|
this.selectdSections.forEach((item) => {
|
this.handleCheckItem(item);
|
});
|
this.selectdSections = [];
|
},
|
close() {
|
this.$emit('close');
|
},
|
save() {
|
let params = {
|
warehouseId: this.setting.id,
|
warehouseManagerInfoList: [],
|
};
|
this.selectdSections.forEach((item) => {
|
params.warehouseManagerInfoList.push({
|
managerId: item.id,
|
managerName: item.name,
|
});
|
});
|
setTimeout(()=>{
|
this.$message.success('保存成功！');
|
this.close();
|
this.$emit('search');
|
},6000)
|
// warehouseManagerAdd(params).then((res) => {
|
// this.$message.success('保存成功！');
|
// this.close();
|
// this.$emit('search');
|
// });
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.section-container {
|
height: 400px;
|
display: flex;
|
justify-content: space-between;
|
::v-deep {
|
.el-tree-node__expand-icon.is-leaf {
|
display: none;
|
}
|
}
|
}
|
.section-left,
|
.section-right {
|
width: calc((100% - 20px) / 2);
|
height: 100%;
|
border: 1px solid #dcdfe6;
|
padding: 10px;
|
box-sizing: border-box;
|
border-radius: 4px;
|
overflow-y: auto;
|
}
|
.header-row {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.title {
|
color: #3d3d3d;
|
font-size: 14px;
|
font-style: normal;
|
font-weight: 400;
|
}
|
}
|
.section-body {
|
margin-top: 20px;
|
}
|
.section-right {
|
.btn {
|
display: inline-block;
|
width: 44px;
|
height: 22px;
|
line-height: 22px;
|
text-align: center;
|
flex-shrink: 0;
|
border-radius: 4px;
|
color: #0d997c;
|
border: 1px solid #0d997c;
|
background: rgba($color: #0d997c, $alpha: 0.1);
|
cursor: pointer;
|
}
|
.del-btn {
|
color: #f9675b;
|
border: 1px solid #f9675b;
|
background: rgba($color: #f9675b, $alpha: 0.1);
|
}
|
.section-item {
|
width: 44%;
|
margin: 0 auto;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 10px;
|
}
|
}
|
.leaf-node {
|
width: 100%;
|
height: 26px;
|
line-height: 26px;
|
padding-left: 10px;
|
&:hover {
|
background: #f5f7fa;
|
}
|
}
|
.checked {
|
width: 100%;
|
background: #f5f7fa;
|
height: 26px;
|
line-height: 26px;
|
box-sizing: border-box;
|
}
|
</style>
|
