parent
63849c7c7f
commit
d4366a467a
12 changed files with 983 additions and 586 deletions
@ -0,0 +1,524 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrap"> |
||||||
|
<!-- 左边的组织 --> |
||||||
|
<div class="side"> |
||||||
|
<div> |
||||||
|
<div class="flex-between"> |
||||||
|
<h6 class="p-title" style="margin-bottom: 0">城市合伙人区域管理</h6> |
||||||
|
<el-button type="text" @click="addOrg" v-auth="'/parner:账号管理:添加分类'">添加分类</el-button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div style="height: 504px; max-height: 504px; overflow: auto"> |
||||||
|
<el-tree |
||||||
|
:data="orgList" |
||||||
|
default-expand-all |
||||||
|
ref="orgTree" |
||||||
|
node-key="id" |
||||||
|
highlight-current |
||||||
|
:expand-on-click-node="false" |
||||||
|
@node-click="handleNodeClick" |
||||||
|
:props="{children: 'children', label: 'partnerClassificationName', isLeaf: 'leaf'}" |
||||||
|
> |
||||||
|
<span class="custom-tree-node" slot-scope="{ node, data }"> |
||||||
|
<span class="org-name">{{ node.label }}</span> |
||||||
|
<span> |
||||||
|
<!-- isTeam 0: 分类，1: 团队 --> |
||||||
|
<el-button |
||||||
|
v-auth="'/parner:账号管理:添加分类'" |
||||||
|
v-if="!data.isTeam" |
||||||
|
type="text" |
||||||
|
icon="el-icon-circle-plus-outline" |
||||||
|
@click="() => addOrg(node, data)"> |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
v-auth="'/parner:账号管理:编辑分类'" |
||||||
|
type="text" |
||||||
|
icon="el-icon-edit-outline" |
||||||
|
@click="() => editOrg(node, data)"> |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
v-auth="'/parner:账号管理:删除分类'" |
||||||
|
type="text" |
||||||
|
icon="el-icon-delete" |
||||||
|
@click="() => delOrg(node, data)"> |
||||||
|
</el-button> |
||||||
|
</span> |
||||||
|
</span> |
||||||
|
</el-tree> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-dialog |
||||||
|
:title="typeForm.id ? '编辑' : '新增' + '分类'" |
||||||
|
:visible.sync="orgVisible" |
||||||
|
:close-on-click-modal="false" |
||||||
|
width="50%" |
||||||
|
@close="closeType" |
||||||
|
> |
||||||
|
<el-form v-if="orgVisible" ref="typeForm" :model="typeForm" :rules="orgRules" label-width="100px"> |
||||||
|
<el-form-item label="分类名称" prop="partnerClassificationName"> |
||||||
|
<el-input v-model.trim="typeForm.partnerClassificationName" placeholder="请输入"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="上级部门"> |
||||||
|
<span v-if="typeForm.parentName">{{ typeForm.parentName }}</span> |
||||||
|
<el-cascader |
||||||
|
v-else |
||||||
|
:options="orgListDia" |
||||||
|
v-model="cascaderValue" |
||||||
|
:props="cascaderProps" |
||||||
|
clearable |
||||||
|
style="width: 100%" |
||||||
|
> |
||||||
|
</el-cascader> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="closeOrg">取 消</el-button> |
||||||
|
<el-button type="primary" @click="orgSubmit">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
<!-- 右边的员工 --> |
||||||
|
<div class="right"> |
||||||
|
<!-- <h6 class="p-title">筛选</h6> |
||||||
|
<div class="tool"> |
||||||
|
<ul class="filter"> |
||||||
|
<li> |
||||||
|
<el-input style="width: 250px;" placeholder="请输入员工姓名/手机号" prefix-icon="el-icon-search" v-model="keyWord" clearable></el-input> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> --> |
||||||
|
|
||||||
|
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||||
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||||
|
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||||
|
<el-table-column prop="teamName" label="团队名称" align="center" min-width="120" show-overflow-tooltip></el-table-column> |
||||||
|
<el-table-column prop="userName" label="团队负责人" align="center" min-width="100"></el-table-column> |
||||||
|
<el-table-column prop="phone" label="手机号" align="center" min-width="120"></el-table-column> |
||||||
|
<el-table-column prop="account" label="账号" align="center" min-width="100"></el-table-column> |
||||||
|
<el-table-column prop="invitationAccount" label="邀请人" align="center" min-width="120"></el-table-column> |
||||||
|
<el-table-column prop="phone" label="团队年费" align="center" min-width="120"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
固定年费{{ scope.row.annualTeamFee}}w |
||||||
|
<el-button type="primary" size="mini" @click="editAnnualTeamFee(scope.row)">修改</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="phone" label="市场服务年费" align="center" min-width="120"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
项目抽成{{ scope.row.annualMarketingFee}}% |
||||||
|
<el-button type="primary" size="mini" @click="editAnnualMarketingFee(scope.row)">修改</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-dialog title="请设置费率" :visible.sync="annualTeamFeeVisible" width="300px" class="dialog" :close-on-click-modal="false"> |
||||||
|
<el-form ref="form" label-width="75px" style='margin-right: 0;'> |
||||||
|
<el-form-item label="固定年费"> |
||||||
|
<el-input style="width: 150px;" type="number" v-model.trim="annualTeamFee" placeholder="请输入数字"></el-input> 万 |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="annualTeamFeeVisible = false">取消</el-button> |
||||||
|
<el-button type="primary" @click="submitAnnualTeamFee">确定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
<el-dialog title="请设置费率" :visible.sync="annualMarketingFeeVisible" width="300px" class="dialog" :close-on-click-modal="false"> |
||||||
|
<el-form ref="form" label-width="75px" style='margin-right: 0;'> |
||||||
|
<el-form-item label="固定年费"> |
||||||
|
<el-input style="width: 150px;" type="number" v-model.trim="annualMarketingFee" placeholder="请输入数字"></el-input> 万 |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="annualMarketingFeeVisible = false">取消</el-button> |
||||||
|
<el-button type="primary" @click="submitAnnualMarketingFee">确定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import util from "@/libs/util"; |
||||||
|
import Setting from "@/setting"; |
||||||
|
import OrgTree from "@/components/org-tree/src/tree"; |
||||||
|
import clipboard from '@/libs/clipboard' |
||||||
|
import axios from 'axios' |
||||||
|
export default { |
||||||
|
components: { OrgTree }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
accountId: this.$store.state.accountId, |
||||||
|
userName: this.$store.state.userName, |
||||||
|
type: 1, |
||||||
|
orgList: [], |
||||||
|
orgListDia: [], |
||||||
|
orgVisible: false, // 员工组织架对话框 |
||||||
|
typeForm: { |
||||||
|
id: '', |
||||||
|
partnerClassificationName: '' |
||||||
|
}, |
||||||
|
cascaderValue: [], // 上级部门 |
||||||
|
cascaderProps: { |
||||||
|
checkStrictly: true, |
||||||
|
label: "partnerClassificationName", |
||||||
|
value: "id" |
||||||
|
}, |
||||||
|
treeVisible: true, |
||||||
|
treeNode: {}, |
||||||
|
treeResolve: [], |
||||||
|
isDetail: false, |
||||||
|
keyWord: '', |
||||||
|
listData: [], |
||||||
|
page: 1, |
||||||
|
pageSize: 10, |
||||||
|
total: 0, |
||||||
|
multipleSelection: [], |
||||||
|
|
||||||
|
orgRules: { |
||||||
|
partnerClassificationName: [ |
||||||
|
{ required: true, message: "请输入部门名称", trigger: "blur" } |
||||||
|
] |
||||||
|
}, |
||||||
|
parnerVisible: false, |
||||||
|
casProps: { |
||||||
|
multiple: true, |
||||||
|
checkStrictly: true, |
||||||
|
label: 'partnerClassificationName', |
||||||
|
value: 'id', |
||||||
|
isLeaf: 'leaf' |
||||||
|
}, |
||||||
|
link: '', |
||||||
|
qrcode: '', |
||||||
|
expireTime: '', |
||||||
|
curTeamId: '', |
||||||
|
submiting: false, // 新增编辑防抖标识 |
||||||
|
setKey: '', |
||||||
|
transferVisible: false, |
||||||
|
chooseVisible: false, |
||||||
|
members: [], |
||||||
|
choosePartnerId: '', |
||||||
|
curRow: '', |
||||||
|
annualTeamFeeVisible: false, |
||||||
|
annualTeamFee: '', |
||||||
|
annualMarketingFeeVisible: false, |
||||||
|
annualMarketingFee: '', |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
keyWord: function(val) { |
||||||
|
clearTimeout(this.searchTimer); |
||||||
|
this.searchTimer = setTimeout(this.initData, 500); |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getOrg() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取组织 |
||||||
|
async getOrg() { |
||||||
|
const res = await this.$post(this.api.listParner) |
||||||
|
const list = res.treeList |
||||||
|
// 没有子级，删除children属性 |
||||||
|
const handleLeaf = (list, ids) => { |
||||||
|
list.map(e => { |
||||||
|
e.ids = ids ? [...ids, e.id] : [e.id] |
||||||
|
if (e.children.length) { |
||||||
|
if (e.isTeam) { |
||||||
|
delete e.children |
||||||
|
} else { |
||||||
|
handleLeaf(e.children, e.ids) |
||||||
|
} |
||||||
|
} else { |
||||||
|
delete e.children |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
handleLeaf(list) |
||||||
|
this.orgList = list |
||||||
|
// 如果刚编辑完，则选中刚编辑的分类 |
||||||
|
this.setKey && this.$nextTick(() => { |
||||||
|
this.$refs.orgTree.setCurrentKey(this.setKey) |
||||||
|
}) |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
// 类型回调 |
||||||
|
typeChange() { |
||||||
|
this.$refs.orgTree.setCurrentKey(null) |
||||||
|
this.curTeamId = '' |
||||||
|
this.initData() |
||||||
|
}, |
||||||
|
// 添加部门 |
||||||
|
addOrg(node, data) { |
||||||
|
const list = JSON.parse(JSON.stringify(this.orgList)) |
||||||
|
this.handleOrg(list) |
||||||
|
this.orgListDia = list |
||||||
|
this.typeForm = { |
||||||
|
id: '', |
||||||
|
parentId: data ? data.id : 1, |
||||||
|
level: data ? data.level + 1 : 1, |
||||||
|
parentName: data ? data.partnerClassificationName : '', |
||||||
|
partnerClassificationName: '' |
||||||
|
} |
||||||
|
this.cascaderValue = [] |
||||||
|
this.orgVisible = true |
||||||
|
}, |
||||||
|
// 编辑部门 |
||||||
|
editOrg(node, data) { |
||||||
|
const list = JSON.parse(JSON.stringify(this.orgList)) |
||||||
|
this.handleOrg(list) |
||||||
|
this.orgListDia = list |
||||||
|
this.typeForm = { |
||||||
|
id: data.id, |
||||||
|
partnerClassificationName: data.partnerClassificationName, |
||||||
|
isTeam: data.isTeam |
||||||
|
} |
||||||
|
this.orgVisible = true |
||||||
|
const { ids } = data |
||||||
|
ids.splice(ids.length - 1, 1) |
||||||
|
this.cascaderValue = ids |
||||||
|
}, |
||||||
|
// 关闭分类弹框 |
||||||
|
closeType() { |
||||||
|
this.typeForm = { |
||||||
|
id: '', |
||||||
|
partnerClassificationName: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
// 处理更换部门的禁选 |
||||||
|
handleOrg(list) { |
||||||
|
for (const i in list) { |
||||||
|
const e = list[i] |
||||||
|
// 如果是团队，则禁选 |
||||||
|
if (e.isTeam) { |
||||||
|
e.disabled = true |
||||||
|
} else { |
||||||
|
this.handleOrg(e.children) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// 删除部门 |
||||||
|
delOrg(node, data) { |
||||||
|
this.$confirm(data.isTeam ? '确定删除该城市合伙人？删除后，该团队同步解散，且不可恢复！' : '确定要删除吗？', "提示", { |
||||||
|
type: "warning" |
||||||
|
}).then(() => { |
||||||
|
this.$post(`${this.api.deleteParner}?id=${data.id}`).then(res => { |
||||||
|
util.successMsg("删除成功") |
||||||
|
this.getOrg() |
||||||
|
}).catch(res => {}) |
||||||
|
}).catch(() => {}) |
||||||
|
}, |
||||||
|
// 提交组织架构新增/编辑 |
||||||
|
orgSubmit() { |
||||||
|
this.$refs.typeForm.validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
const form = this.typeForm |
||||||
|
const cas = this.cascaderValue |
||||||
|
const len = cas.length |
||||||
|
if (cas && len) { |
||||||
|
this.typeForm.parentId = cas[len - 1] |
||||||
|
this.typeForm.level = len + 1 |
||||||
|
} |
||||||
|
if (!form.id) { |
||||||
|
// 添加 |
||||||
|
this.$post(this.api.saveParner, form).then(res => { |
||||||
|
util.successMsg("新增成功！") |
||||||
|
this.closeOrg() |
||||||
|
}).catch(err => {}) |
||||||
|
} else { |
||||||
|
// 编辑 |
||||||
|
this.$post(this.api.updateParner, form).then(res => { |
||||||
|
util.successMsg("编辑成功！") |
||||||
|
this.setKey = form.id |
||||||
|
this.closeOrg() |
||||||
|
}).catch(err => {}) |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 获得点击层级里的第一个城市合伙人id |
||||||
|
getTeamId(list) { |
||||||
|
for (const i in list) { |
||||||
|
const e = list[i] |
||||||
|
if (e.isTeam && !this.curTeamId) { |
||||||
|
this.curTeamId = e.id |
||||||
|
break |
||||||
|
} else { |
||||||
|
this.getTeamId(e.children) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// 点击树节点查询列表数据 |
||||||
|
handleNodeClick(data) { |
||||||
|
this.type = '' |
||||||
|
this.curTeamId = '' |
||||||
|
if (data.isTeam) { |
||||||
|
this.curTeamId = data.id |
||||||
|
} else { |
||||||
|
// this.getTeamId(data.children) |
||||||
|
} |
||||||
|
if (!this.curTeamId) this.curTeamId = data.id |
||||||
|
this.initData() |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
}, |
||||||
|
// 关闭组织新增编辑弹框 |
||||||
|
closeOrg() { |
||||||
|
this.orgVisible = false |
||||||
|
this.cascaderValue = [] |
||||||
|
this.getOrg() |
||||||
|
}, |
||||||
|
// 查询全部 |
||||||
|
getAll() { |
||||||
|
this.curTeamId = '' |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
// 员工列表 |
||||||
|
getList() { |
||||||
|
this.$post(this.api.teamPartnerList, { |
||||||
|
type: this.type || 1, |
||||||
|
partnerClassificationId: this.curTeamId, |
||||||
|
keyWord: this.keyWord, |
||||||
|
pageNum: this.page, |
||||||
|
pageSize: this.pageSize |
||||||
|
}).then(({ pageList }) => { |
||||||
|
pageList.records.forEach((e, i) => { |
||||||
|
e.id = i |
||||||
|
}) |
||||||
|
this.listData = pageList.records |
||||||
|
console.log("🚀 ~ file: staff.vue:479 ~ getList ~ this.listData:", this.listData) |
||||||
|
|
||||||
|
this.total = pageList.total |
||||||
|
}).catch(err => {}) |
||||||
|
}, |
||||||
|
// 切换页码 |
||||||
|
currentChange(val) { |
||||||
|
this.page = val |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { // 多选 |
||||||
|
this.multipleSelection = val |
||||||
|
}, |
||||||
|
initData() { |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
this.page = 1 |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
// 编辑团队年费 |
||||||
|
editAnnualTeamFee(row) { |
||||||
|
this.curRow = row |
||||||
|
this.annualTeamFee = row.annualTeamFee |
||||||
|
this.annualTeamFeeVisible = true |
||||||
|
}, |
||||||
|
// 团队年费提交 |
||||||
|
submitAnnualTeamFee() { |
||||||
|
this.$post(this.api.editPartnerTeamRates, { |
||||||
|
annualTeamFee: this.annualTeamFee, |
||||||
|
partnerId: this.curRow.partnerId, |
||||||
|
teamId: this.curRow.teamId, |
||||||
|
}).then(res => { |
||||||
|
this.annualTeamFeeVisible = false |
||||||
|
util.successMsg('修改成功') |
||||||
|
this.getList() |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
// 编辑市场服务年费 |
||||||
|
editAnnualMarketingFee(row) { |
||||||
|
this.curRow = row |
||||||
|
this.annualMarketingFee = row.annualMarketingFee |
||||||
|
this.annualMarketingFeeVisible = true |
||||||
|
}, |
||||||
|
// 团队年费提交 |
||||||
|
submitAnnualMarketingFee() { |
||||||
|
this.$post(this.api.editPartnerTeamRates, { |
||||||
|
annualMarketingFee: this.annualMarketingFee, |
||||||
|
partnerId: this.curRow.partnerId, |
||||||
|
teamId: this.curRow.teamId, |
||||||
|
}).then(res => { |
||||||
|
this.annualMarketingFeeVisible = false |
||||||
|
util.successMsg('修改成功') |
||||||
|
this.getList() |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.m-b-20 { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
.org-name { |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
.w-100 { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.wrap { |
||||||
|
display: flex; |
||||||
|
padding: 0 24px; |
||||||
|
.side { |
||||||
|
width: 300px; |
||||||
|
padding: 24px 10px 24px 0; |
||||||
|
margin-right: 24px; |
||||||
|
border-right: 1px solid rgba(0, 0, 0, 0.06); |
||||||
|
} |
||||||
|
.right { |
||||||
|
width: calc(100% - 324px); |
||||||
|
padding: 24px 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.add-dia { |
||||||
|
.tips { |
||||||
|
font-size: 12px; |
||||||
|
color: #f00; |
||||||
|
} |
||||||
|
.title { |
||||||
|
margin: 10px 0; |
||||||
|
font-size: 14px; |
||||||
|
em { |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
|
} |
||||||
|
.des { |
||||||
|
font-size: 13px; |
||||||
|
color: #7a7a7a; |
||||||
|
} |
||||||
|
.link-wrap { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin: 10px 0 20px; |
||||||
|
} |
||||||
|
.link { |
||||||
|
padding: 10px; |
||||||
|
margin-right: 15px; |
||||||
|
background-color: #e7f5ff; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
/deep/.choose-dia { |
||||||
|
.member-list { |
||||||
|
li { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
.info { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
img { |
||||||
|
width: 40px; |
||||||
|
height: 40px; |
||||||
|
} |
||||||
|
.name { |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
.el-radio__label { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue