hanbaoshan
2021-01-13 e6758ef29bd686e894b4679edf1bd88436b84148
src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
@@ -62,10 +62,8 @@
        <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">
@@ -125,10 +123,28 @@
        </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 {
@@ -173,7 +189,10 @@
      ],
      videoListSearchWord: '',
      actCollapseName: '',
      username: '',
      checkedOrg: {},
      orgTreeDialogVisible: false,
      organizeData: [],
      personList: [
        { name: '张三', id: 'zs' },
        { name: '李斯', id: 'ls' }
@@ -182,17 +201,62 @@
    }
  },
  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 () {
@@ -251,6 +315,13 @@
    }
    .top-right {
      width: 360px;
      .checked-org {
        flex: 1;
        text-align: left;
        &.null {
          color: #999;
        }
      }
      .person-list {
        padding-top: 14px;
        .person {
@@ -272,7 +343,6 @@
      .actions {
        text-align: left;
      }
    }
  }
}