人员任务分配

heyujie

2021-03-26 8d94a4a0a987f586a9f7f8826ebb76c19387f207

 src/pages/shuohuangMonitorAnalyze/components/taskManage.vue

@@ -25,8 +25,8 @@
                v-model="keyword1"
                placeholder="请输入机车号"
                size="small"
                style="margin: 0 10px;"
                clearable="true"
                style="margin: 0 10px"
                clearable
              ></el-input>
            </div>
            <div>
@@ -35,8 +35,8 @@
                v-model="keyword2"
                placeholder="请输入车次"
                size="small"
                style="margin: 0 10px;"
                clearable="true"
                style="margin: 0 10px"
                clearable
              ></el-input>
            </div>
            <div>
@@ -45,39 +45,41 @@
                v-model="keyword3"
                placeholder="请输入司机姓名"
                size="small"
                style="margin: 0 10px;"
                clearable="true"
                style="margin: 0 10px"
                clearable
              ></el-input>
            </div>
            <el-button
              type="primary"
              @click="renderVideoTable"
              size="small"
              style="margin-right:10px;"
            >搜索</el-button>
            <!-- <el-checkbox v-model="isShowUndistributedOnly">仅显示未分配</el-checkbox> -->
            <el-checkbox v-model="notAssignedOnly">仅显示未分配</el-checkbox>
              style="margin-right: 10px"
              >搜索</el-button
            >
            <el-checkbox v-model="notAssignedOnly" @change="renderVideoTable">仅显示未分配</el-checkbox>
          </div>
          <div class="video-list">
            <el-checkbox-group v-model="trainNochecked">
              <el-collapse v-model="actCollapseName">
                <el-collapse-item
                  :name="vkey"
                  v-for="(v,vkey,i) in videoPackageList"
                  v-for="(v, vkey, i) in videoPackageList"
                  :key="i"
                >
                  <template slot="title">
                    <div>
                      <el-checkbox
                        :label="i"
                        style="padding-right:10px;"
                        :label="vkey"
                        style="padding-right: 10px"
                      ></el-checkbox>
                      <span>{{vkey}}({{v.length}})</span>
                      <span>{{ vkey }}({{ v.length }})</span>
                    </div>
                  </template>
                  <div class="video-detail" v-for="video in v" :key="video.ID">
                    <i class="el-icon-film" style="margin-left: 20px;"></i>
                    <span style="padding-left: 10px;">{{video.VideoName}}</span>
                    <i class="el-icon-film" style="margin-left: 20px"></i>
                    <span style="padding-left: 10px">{{
                      video.VideoName
                    }}</span>
                  </div>
                </el-collapse-item>
              </el-collapse>
@@ -96,9 +98,19 @@
      </div>
      <div class="top-right partment">
        <div class="header">
         <el-checkbox v-model="isAllCheck" :indeterminate="isIndeterminate"  @change="handleCheckAllChange"></el-checkbox>
          <el-checkbox
            v-model="isAllCheck"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          ></el-checkbox>
          <div class="title">人员列表</div>
          <el-input size="small" @input="searchName" v-model="inputName" placeholder="请输入内容" clearable="true"></el-input>
          <el-input
            size="small"
            @input="searchName"
            v-model="inputName"
            placeholder="请输入内容"
            clearable
          ></el-input>
        </div>
        <div class="body">
          <!-- <div class="flex-box">
@@ -107,9 +119,12 @@
            <el-button type="primary" size="mini" @click="selOrg">选择部门</el-button>
          </div> -->
          <div class="person-list">
            <el-checkbox-group v-model="memberChecked" @change="handleCheckedCitiesChange">
            <el-checkbox-group
              v-model="memberChecked"
              @change="handleCheckedCitiesChange"
            >
              <div class="person" v-for="person in personList" :key="person.ID">
                <el-checkbox :label="person.ID">{{person.Name}}</el-checkbox>
                <el-checkbox :label="person.ID">{{ person.Name }}</el-checkbox>
              </div>
            </el-checkbox-group>
            <el-button
@@ -117,7 +132,8 @@
              type="primary"
              @click="toAddAssignList"
              size="small"
            >加入待分配列表</el-button>
              >加入待分配列表</el-button
            >
          </div>
        </div>
      </div>
@@ -127,18 +143,24 @@
      <div class="header">
        <div class="title">任务列表</div>
        <div class="header-right flex-box">
          <el-radio-group v-model="taskType" size="mini">
          <el-radio-group v-model="taskType" size="mini" @change="renderTaskTable">
            <el-radio-button label="1">待分配</el-radio-button>
            <el-radio-button label="2">已分配</el-radio-button>
          </el-radio-group>
          <el-input
            class="keyword-input"
            placeholder="请输入"
            placeholder="搜索关键字"
            v-model="keyWordOfTask"
            size="mini"
            style="margin-left: 10px;"
            style="margin-left: 10px"
            @input="reRenderWhenClear"
            clearable
          >
            <el-button slot="append" icon="el-icon-search" @click="renderTaskTable"></el-button>
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchKeyword"
            ></el-button>
          </el-input>
        </div>
      </div>
@@ -148,31 +170,54 @@
            type="primary"
            size="small"
            @click="distributeTask"
            v-if="taskType==1&&taskVideoChecked.length"
          >分配任务</el-button>
            v-if="taskType == 1"
            >分配任务</el-button
          >
        </div>
        <el-table
          class="thbg"
          :data="taskTableData"
          v-if="taskTableData"
          ref="elTable"
          @selection-change="taskTableSelection"
          v-loading
        >
          <el-table-column v-if="taskType==1" type="selection" width="55"></el-table-column>
          <el-table-column prop="LocomotiveNumber" label="机车号"></el-table-column>
          <el-table-column
            v-if="taskType == 1"
            type="selection"
            width="55"
          ></el-table-column>
          <el-table-column prop="Title" label="机车号"></el-table-column>
          <el-table-column label="视频数量">
            <template slot-scope="scope">
              <div>{{scope.row.LKGList.length}}</div>
              <div>{{ scope.row.LKGList.length }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="DistributionUser" label="分配人"></el-table-column>
          <el-table-column prop="DistributionDate" label="分配时间"></el-table-column>
          <el-table-column prop="HandlingUsers" label="处理人"></el-table-column>
          <el-table-column
            prop="DistributionUser"
            label="分配人"
          ></el-table-column>
          <el-table-column
            prop="DistributionDate"
            label="分配时间"
          ></el-table-column>
          <el-table-column
            prop="HandlingUsers"
            label="处理人"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="operation">
                <span @click="cancelDistribute(scope.row)" v-show="taskType==1">取消分配</span>
                <span @click="cancelDistribute(scope.row)" v-show="taskType==2">取消指派</span>
                <span
                  @click="cancelDistribute(scope.row)"
                  v-show="taskType == 1"
                  >取消分配</span
                >
                <span
                  @click="cancelDistribute(scope.row)"
                  v-show="taskType == 2"
                  >取消指派</span
                >
                <!-- <span @click="toggleCollapse(scope.row)">查看/隐藏车次</span> -->
              </div>
            </template>
@@ -183,13 +228,15 @@
                class="video-item"
                v-for="video in scope.row.LKGList"
                :key="video.ID"
              >{{video.VideoName}}</div>
              >
                {{ video.VideoName }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog :visible="orgTreeDialogVisible">
    <!-- <el-dialog :visible="orgTreeDialogVisible">
      <div>
        <el-tree
          :data="organizeData"
@@ -201,124 +248,109 @@
          :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>
          <el-button size="small" @click="orgTreeDialogVisible = false"
            >取消</el-button
          >
          <el-button size="small" type="primary" @click="searchMemberByOrg"
            >确定</el-button
          >
        </div>
      </div>
    </el-dialog>
    </el-dialog> -->
  </div>
</template>

<script>
import { getOrganizeTree, getMemberByOrg, getVideoListBySearch, addToAssignList, getTaskList, distributeTask, cancelMission } from '@/api/shuohuang';
import {
  getOrganizeTree,
  getMemberByOrg,
  getVideoListBySearch,
  addToAssignList,
  getTaskList,
  distributeTask,
  cancelMission,
} from "@/api/shuohuang";
export default {
  data () {
  data() {
    return {
      isAllCheck:false,
      taskType: '1',
      keyWordOfTask: '',
      // videoSearchTime: [],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setHours(0, 0, 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            start.setHours(0, 0, 0);
            end.setTime(end.getTime() - 3600 * 1000 * 24);
            end.setHours(23, 59, 59);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            //start.setHours(0,0,0);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      isAllCheck: false,
      taskType: "1",
      keyWordOfTask: "",
      isShowUndistributedOnly: false,
      videoPackageList: {},
      trainNochecked: [],
      // trainNoCurPage: 1,
      // trainNoPageSize: 8,
      // trainNoPageSizes: [5, 8, 12],
      trainNoTotal: 0,
      keyword1: '',
      keyword2: '',
      keyword3: '',
      actCollapseName: '',
      checkedOrg: {},
      orgTreeDialogVisible: false,
      organizeData: [],
      keyword1: "",
      keyword2: "",
      keyword3: "",
      actCollapseName: "",
      personList: [],
      memberChecked: [],
      taskTableData: [],
      taskTableData: null,
      taskVideoChecked: [],
      notAssignedOnly: false,
      isIndeterminate:false,
      inputName:""
    }
      isIndeterminate: false,
      inputName: "",
    };
  },
  mounted () {
    this.getOrganizeTreeData();
  mounted() {
    // this.getOrganizeTreeData();
    this.refreshAll();
  },
  watch: {
    taskType (n, o) {
      this.renderTaskTable();
    }
  },
  methods: {
    searchName(val){
      console.log(this.personList ,val);
      if (val=="") {
        this.searchMemberByOrg()
    reRenderWhenClear(val){
      if (val.trim() == "") {
        this.renderTaskTable()
      }
      if (val.trim()=="") {
        return 
    },
    searchName(val) {
      console.log(this.personList, val);
      if (val == "") {
        this.searchMemberByOrg();
      }
      this.personList = this.personList.filter(item=>{
        return item.Name.indexOf(val)>-1
      })
      if (val.trim() == "") {
        return;
      }
      this.personList = this.personList.filter((item) => {
        return item.Name.indexOf(val) > -1;
      });
    },
    handleCheckAllChange(val) {
      let arr =[]
      this.personList.forEach(item=>{
        arr.push(item.ID)
      })
        this.memberChecked = val ? arr : [];
        this.isIndeterminate = false;
      },
       handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.isAllCheck = checkedCount === this.personList.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.personList.length;
      },
    cancelDistribute (row) {
      cancelMission({ UniqeID: row.LKGList[0].UniqeID }).then(res => {
      let arr = [];
      this.personList.forEach((item) => {
        arr.push(item.ID);
      });
      this.memberChecked = val ? arr : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.isAllCheck = checkedCount === this.personList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.personList.length;
    },
    cancelDistribute(row) {
      let arr = row.LKGList.map((x) => x.ID);
      cancelMission({ LkgIDs: arr }).then((res) => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.msg
            type: "success",
            message: res.msg,
          });
          this.refreshAll();
        }
      })
      });
    },
    refreshAll () {
    searchKeyword() {
      const val = this.keyWordOfTask
      this.taskTableData = this.taskTableData.filter((item) => {
        const b1 = item.DistributionUser.indexOf(val) > -1;
        const b2 = item.HandlingUsers.indexOf(val) > -1;
        const b3 = item.Title.indexOf(val) > -1;
        return b1 || b2 || b3;
      });
    },
    refreshAll() {
      this.trainNochecked = [];
      this.checkedOrg = {};
      this.memberChecked = [];
@@ -326,121 +358,131 @@
      this.renderVideoTable();
      this.renderTaskTable();
    },
    taskTableSelection (val) {
      this.taskVideoChecked = val
    taskTableSelection(val) {
      let arr = val.map((item) => item.LKGList.map((x) => x.ID));
      this.taskVideoChecked = arr;
    },
    renderTaskTable () {
    renderTaskTable() {
      let _this = this;
      let params = {
        IsPackage: 0,
        Status: this.taskType
      };
      getTaskList(params).then(res => {
        _this.taskTableData = res.data
      })
      getTaskList({
        Status: this.taskType,
      }).then((res) => {
        _this.taskTableData = res.data;
      });
    },
    // handleTrainNoSizeChange (size) {
    //   this.trainNoPageSize = size;
    //   this.renderVideoTable();
    // },
    handleTrainNoCurChange () {
      this.renderVideoTable();
    },
    renderVideoTable () {
    renderVideoTable() {
      let _this = this;
      let params = {
      getVideoListBySearch({
        CarNumber: this.keyword1,
        TrainNumber: this.keyword2,
        DriverName: this.keyword3,
        // PageIndex: this.trainNoCurPage,
        // PageSize: this.trainNoPageSize,
        notAssignedOnly: this.notAssignedOnly,
      };
      getVideoListBySearch(params).then(res => {
        _this.videoPackageList = res.data
      }).then((res) => {
        _this.videoPackageList = res.data;
        _this.trainNoTotal = res.total;
      });
    },
    toAddAssignList () {
    toAddAssignList() {
      let _this = this;
      let params = {
        UserID: this.memberChecked[0],
        UniqeID: this.trainNochecked.join(',')
      };
      addToAssignList(params).then(res => {
      let total = this.trainNochecked.length;
      let people = this.memberChecked.length;
      let least = (total / people) | 0;
      let left = total % people;

      let checkedTrain = [...this.trainNochecked];
      let pickList = [];
      for (let i = 0; i < people; i++) {
        pickList[i] = [];
        if (i < left) {
          for (let j = 0; j < least + 1; j++) {
            pickList[i].push(...this.videoPackageList[checkedTrain[0]]);
            checkedTrain.shift();
          }
        } else {
          for (let j = 0; j < least; j++) {
            pickList[i].push(...this.videoPackageList[checkedTrain[0]]);
            checkedTrain.shift();
          }
        }
      }
      let arr = pickList.map((a) => {
        return a.map((item) => item.ID);
      });

      addToAssignList({
        UserID: this.memberChecked,
        LkgIDs: arr,
      }).then((res) => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.msg
            type: "success",
            message: res.msg,
          });
          _this.refreshAll();
        }
      })
      });
    },
    searchMemberByOrg () {
    searchMemberByOrg() {
      let _this = this;
      getMemberByOrg({}).then(res => {
      getMemberByOrg({}).then((res) => {
        _this.personList = res.data;
        // _this.orgTreeDialogVisible = false;
      })
      });
    },
    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 () {
    // 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() {
      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 () {
      let _this = this;
      let arr = this.taskVideoChecked.map(train => train['LKGList'][0]['UniqeID'])
      let params = {
        UniqeID: arr.join(',')
      }
      distributeTask(params).then(res => {
      distributeTask({
        LkgIDs: this.taskVideoChecked,
      }).then((res) => {
        _this.renderTaskTable();
      })
      });
    },

    // selOrg () {
    //   this.orgTreeDialogVisible = true;
    // },
  }
}
  },
};
</script>

<style lang="scss">
@@ -457,11 +499,12 @@
    height: 40px;
    .title {
      float: left;
      padding-left: 20px;
      height: 40px;
      padding-left: 10px;

      line-height: 40px;
      font-size: 14px;
      font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
      font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
    }
    .header-right {
      float: right;
@@ -491,7 +534,7 @@
        text-align: left;
        .el-checkbox-group {
          margin-bottom: 20px;
          .el-checkbox__label{
          .el-checkbox__label {
            display: none;
          }
          .video-detail {
@@ -507,18 +550,18 @@
      width: 360px;
      height: 465px;
      // overflow-y:auto;
      .header{
        .el-input{
              line-height: 41px;
            width: 185px;
            font-size: 14px;
      .header {
        .el-input {
          line-height: 41px;
          width: 185px;
          font-size: 14px;
        }
        .el-checkbox{
        .el-checkbox {
          float: left;
          padding-left: 20px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;  
          font-size: 14px;
        }
      }
      .checked-org {
@@ -531,16 +574,16 @@
      .person-list {
        padding-top: 14px;

        .el-checkbox-group{
        .el-checkbox-group {
          height: 330px;

        margin-bottom: 8px;
        overflow: auto;
          margin-bottom: 8px;
          overflow: auto;
        }
        .person {
          text-align: left;
          margin-bottom: 10px;
          

          padding-bottom: 6px;
          border-bottom: 1px solid #eee;
        }