| | |
| | | <div class="body"> |
| | | <div class="flex-box"> |
| | | <label>部门:</label> |
| | | <el-select placeholder="全部" size="mini" style="width: 200px;margin-right: 10px;"> |
| | | <el-option></el-option> |
| | | </el-select> |
| | | <el-button type="primary" size="mini" @click="searchPerson">搜索</el-button> |
| | | <span class="checked-org" :class="{'null':!checkedOrg.id}">{{checkedOrg.label||'全部'}}</span> |
| | | <el-button type="primary" size="mini" @click="selOrg">选择部门</el-button> |
| | | </div> |
| | | <div class="person-list"> |
| | | <div class="person" v-for="person in personList" :key="person.id"> |
| | |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | <el-dialog :visible="orgTreeDialogVisible"> |
| | | <div> |
| | | <el-tree |
| | | :data="organizeData" |
| | | node-key="id" |
| | | default-expand-all |
| | | @node-click="checkOrgNode" |
| | | :expand-on-click-node="false" |
| | | :check-on-click-node="true" |
| | | :highlight-current="true" |
| | | ></el-tree> |
| | | <div slot="footer" class="btns"> |
| | | <el-button size="small" @click="orgTreeDialogVisible=false">取消</el-button> |
| | | <el-button size="small" type="primary" @click="searchMemberByOrg">确定</el-button> |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { getOrganizeTree } from '@/api/shuohuang'; |
| | | export default { |
| | | data () { |
| | | return { |
| | |
| | | ], |
| | | videoListSearchWord: '', |
| | | actCollapseName: '', |
| | | username: '', |
| | | checkedOrg: {}, |
| | | orgTreeDialogVisible: false, |
| | | organizeData: [], |
| | | |
| | | personList: [ |
| | | { name: '张三', id: 'zs' }, |
| | | { name: '李斯', id: 'ls' } |
| | |
| | | } |
| | | }, |
| | | mounted () { |
| | | |
| | | this.getOrganizeTreeData(); |
| | | }, |
| | | methods: { |
| | | searchMemberByOrg(){ |
| | | debugger |
| | | |
| | | }, |
| | | deepNodeChildren (node) { |
| | | if (node.ChildDept && node.ChildDept.length > 0) { |
| | | return node.ChildDept.map(child => { |
| | | let childObj = {}; |
| | | childObj.id = child.ID; |
| | | childObj.label = child.Name; |
| | | childObj.Status = child.Status; |
| | | if (child.ChildDept) { |
| | | childObj.children = this.deepNodeChildren(child) |
| | | } |
| | | if (child.UserLst) { |
| | | childObj.children = this.deepNodeChildren(child) |
| | | } |
| | | return childObj; |
| | | }); |
| | | } else if (node.UserLst && node.UserLst.length > 0) { |
| | | return node.UserLst.map(child => { |
| | | let childObj = {}; |
| | | childObj.id = child.ID; |
| | | childObj.label = child.Name; |
| | | childObj.Status = child.Status; |
| | | return childObj; |
| | | }); |
| | | } |
| | | }, |
| | | checkOrgNode (a, b, c) { |
| | | this.checkedOrg = a |
| | | }, |
| | | getOrganizeTreeData () { |
| | | let _this = this; |
| | | getOrganizeTree().then(res => { |
| | | _this.organizeData = res.data.map(item => { |
| | | let obj = {}; |
| | | obj.id = item.ID; |
| | | obj.label = item.Name; |
| | | obj.Status = item.Status; |
| | | obj.children = _this.deepNodeChildren(item); |
| | | return obj |
| | | }) |
| | | }) |
| | | }, |
| | | distributeTask () { |
| | | |
| | | }, |
| | | searchVideoList () { |
| | | |
| | | }, |
| | | searchPerson () { |
| | | |
| | | selOrg () { |
| | | this.orgTreeDialogVisible = true; |
| | | }, |
| | | searchTask () { |
| | | |
| | |
| | | } |
| | | .top-right { |
| | | width: 360px; |
| | | .checked-org { |
| | | flex: 1; |
| | | text-align: left; |
| | | &.null { |
| | | color: #999; |
| | | } |
| | | } |
| | | .person-list { |
| | | padding-top: 14px; |
| | | .person { |
| | |
| | | .actions { |
| | | text-align: left; |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |