封装input组件（搜索框）

 

 

 

搜索子组件 

<template>
  <el-form :model="model"
    label-width="140px">
    <el-row>
      <el-col :span="8">
        <el-form-item label="序号:">
          <el-input class="input-inner"
            v-model="model.taskSn"
            placeholder="请输入"
            clearable
            size="small"
            style="width: 86%" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="对标任务:">
          <el-input class="input-inner"
            v-model="model.taskAct"
            placeholder="请输入"
            clearable
            size="small"
            style="width: 86%" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="任务年份:">
          <el-date-picker v-model="model.taskYear"
            type="year"
            placeholder="选择年"
            size="small"
            value-format="yyyy"
            style="width: 86%"
            clearable>
          </el-date-picker>
        </el-form-item>
      </el-col>
     
    </el-row>
    <el-row v-if="bflag">
      <el-col :span="8">
        <el-form-item label="任务期数:">
          <el-date-picker v-model="model.taskMonth"
            type="month"
            placeholder="选择期数"
            size="small"
            format="第M期"
            value-format="MM"
            style="width: 86%"
            popper-class="date-style"
            clearable>
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="taskType === '1'">
        <el-form-item label="二级单位:">
          <el-select v-model="model.taskDeptCode"
            placeholder="请选择"
            style="width: 86%"
            size="small"
            clearable
            @change="handclick">
            <el-option v-for="item in options"
              :key="item.code"
              :label="item.deptName"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="8">
        <el-form-item label="责任领导:">
          <el-input class="input-inner"
            v-model="model.respLeader"
            placeholder="请输入"
            clearable
            size="small"
            style="width: 86%" />
        </el-form-item>
      </el-col> -->
      <el-col :span="8">
        <el-form-item label="责任主体:">
          <el-input class="input-inner"
            v-model="model.respOrg"
            placeholder="请输入"
            clearable
            size="small"
            style="width: 86%" />
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="taskType !== '1'">
        <el-form-item label="进展情况类型:">
          <el-select v-model="model.taskStatus"
            placeholder="请选择"
            style="width: 86%"
            size="small"
            clearable>
            <el-option v-for="item in arrtaskTemplateStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="8">
        <el-form-item label="责任人:">
          <el-input class="input-inner"
            v-model="model.respPerson"
            placeholder="请输入"
            clearable
            size="small"
            style="width: 86%" />
        </el-form-item>
      </el-col> -->
    </el-row>
    <el-row v-if="bflag">
      <el-col :span="8" v-if="taskType === '1'">
        <el-form-item label="进展情况类型:">
          <el-select v-model="model.taskStatus"
            placeholder="请选择"
            style="width: 86%"
            size="small"
            clearable>
            <el-option v-for="item in arrtaskTemplateStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="流程状态:">
          <el-select v-model="model.boStatus"
            placeholder="请选择"
            style="width: 86%"
            size="small"
            clearable>
            <el-option v-for="item in boxStatus"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row class="col-box">
      <el-col :span="8">
          <div class="btn" style="margin:10px 0px 10px 60px">
            <el-button size="small"
              @click="resetQuery"
              class="resetBtn">重置</el-button>
            <el-button size="small"
              @click="handleQuery"
              class="queryBtn">查询</el-button>
            <el-button size="small"
              style="width:90px"
              :disabled='exportDisabled'
              @click="handleExport"
              class="queryBtn">导出表格</el-button>
            <el-button class="text"
              type="text"
              @click="falg">{{
            bflag ? "收起" : "展开"
          }}&nbsp;<i :class=" bflag?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
          </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { dict, getBoStatus,getTaskDeptList } from "@/api/query/index";
import { mapGetters } from "vuex";

export default {
  name: "QuerySearchBox",
  props: {
    model: {
      type: Object,
      default() {
        return {};
      },
    },
    taskType: {
      type: String,
      default() {
        return "";
      },
    },
    exportDisabled:{
      type: Boolean,
      default() {
        return false
      },
    }
  },
  data() {
    return {
      bflag: false,
      strs: "",
      options: [],
      arrtaskTemplateStatus: [
        {
          value: 0,
          label: "已完成",
        },
        {
          value: 1,
          label: "正在推进",
        },
        {
          value: 2,
          label: "未按期完成",
        },
        {
          value: 3,
          label: "未选择",
        },
      ],
      groupleader: [],
      groupdepartment: [],
      boxStatus: [],
      groupperson: [],
      value: "",
    };
  },
  watch: {
    taskType(val) {
      this.initboStatus();
       this.strs = ''
    },
  },
  computed:{
    ...mapGetters(["roles","wfRole"]),
  },
  created() {
    this.initboStatus();
    this.groupInitleader();
    this.groupInitdepartment();
    this.groupInitperson();
    this.getTaskDeptList();
    // if (this.$route.query.respDeptCode.length > 8) {
    //   let str = this.$route.query.respDeptCode.substring(0, 8);
    //   this.strs = str;
    // }else {
       this.strs = this.$route.query.taskDeptCode
    // }
    // this.options.forEach(ele =>{
    //   if(this.strs === ele.value){
    //      this.strs = ele.value
    //   }else {
    //     this.strs = ''
    //   }
    // })
  },
  methods: {
    handclick() {
      this.$emit("strs", this.strs);
    },
    // 流程状态字典
    initboStatus() {
      if (this.taskType === "1") {
        getBoStatus("bd",this.wfRole).then((res) => {
          if (res.code === 200) {
            this.boxStatus = res.data;
            this.boxStatus.push({dictLabel:'待集团编辑',dictValue:'BS016'},{dictLabel:'对标管理部门已确认',dictValue:'BS009'})
          }
        });
      } else {
        getBoStatus("group",this.wfRole).then((res) => {
          if (res.code === 200) {
            this.boxStatus = res.data;
          }
        });
      }
    },
    // 责任领导
    groupInitleader() {
      dict("group.responsibility.leader").then((res) => {
        if (res.code === 200) {
          this.groupleader = res.data;
        }
      });
    },
    // 责任部门
    groupInitdepartment() {
      dict("group.responsibility.department").then((res) => {
        if (res.code === 200) {
          this.groupdepartment = res.data;
        }
      });
    },
    // 责任人
    groupInitperson() {
      dict("group.responsibility.person").then((res) => {
        if (res.code === 200) {
          this.groupperson = res.data;
        }
      });
    },
    //二级部门
    getTaskDeptList(){
      getTaskDeptList().then((res)=> {
        if (res.code === 200) {
          this.options = res.data;
        }
      })
    },
    falg() {
      this.bflag = !this.bflag;
    },
    handleQuery() {
      this.$emit("handleQuery", true);
    },

    resetQuery() {
      this.strs = "";
      this.$emit("resetQuery", false);
    },

    handleExport() {
      this.$emit("handleExport", false);
    },
    
  },
};
</script>

<style lang="scss" scoped>
.col-box {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.text {
  color: #292bb7;
}
.queryBtn {
  display: inline-block;
  background: #292bb7;
  color: #ffffff;
  display: inline-block;
  border-radius: 8px;
  opacity: 0.7;
  width: 72px;
  height: 34px;
}
.queryBtn:hover {
  opacity: 1;
}
.resetBtn {
  border-radius: 8px;
  // margin-right: 20px;
  width: 72px;
  height: 34px;
}

.btn {
  // width: 80%;
  display: flex;
  // justify-content:flex-end;
  align-items: center;
}
/deep/ .el-form-item {
  margin-bottom: 10px;
}
</style> 
<style lang="scss">
.task-manage {
  .el-icon-date {
    background: url("../../assets/image/data_picker.png") center center
      no-repeat;
    background-size: 13px;
  }
  .el-icon-date:before {
    content: "替";
    font-size: 16px;
    visibility: hidden;
  }
  .task-manage .manage-header .el-select .el-input .el-select__caret {
    font-weight: bold;
  }
  .el-input__icon {
    // background: url('../../assets/image/.png') center center no-repeat;
    background-size: 13px;
  }
  .el-icon-date:before {
    // content: "替";
    font-size: 16px;
    // visibility: hidden;
  }
  // .el-input__prefix {
  //     width: 25px;
  //     position: absolute;
  //     left: 86%!important;
  // }
}
</style>

 引用父组件

<template>
  <div class="task-manage">
     <el-row class="manage-header">
     <indxPageTab :datas="taskTypeDict" @change="changeTaskType" @cade="handlTask" />
    </el-row>
    <el-row class="manage-header">
      <Query-Search-Box
        :model="queryParams"
        :taskType="taskType"
        @resetQuery="resetQuery"
        @handleQuery="handleQuery"
        @handleExport ="handleExport"
        @strs="strs"
        :exportDisabled ="!taskTotal>0"
      />
    </el-row>
    <div class="manage-body">
      <div class="manage-inner">
        <el-table
          v-loading="loading"
          :data="taskList"
          :cell-style="cellStyle"
          row-key="id"
        >
          <el-table-column label="序号" prop="taskSn" width="55" align="center" fixed>
            <!-- <template slot-scope="scope">
              <span v-if="scope.row.level !==2">{{ scope.row.taskSn }}</span>
            </template> -->
          </el-table-column>
          <el-table-column
            label="对标任务"
            fixed
            width="400"
          >
          <template slot-scope="scope">
            <div class="ponter_box">
              <el-tooltip class="item" effect="dark" :content="scope.row.taskAct" placement="top-start">
            <span @click="handlroute(scope.row)" class="ponter">{{ scope.row.taskAct}}</span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="已批示" placement="top-start">
            <span  v-if="scope.row.reviewFlag == 1" style="width:27px;height:16px;background: #E02020;border-radius: 4px;font-size: 10px;color: #FFFFFF;letter-spacing: 0;line-height:16px;display: inline-block;margin-left:2px;text-align: center;">批示</span>
            </el-tooltip>
            </div>
          </template>
          </el-table-column>
          <el-table-column
            v-if="taskType === '1'"
            label="二级单位"
            prop="taskDeptName"
            :show-overflow-tooltip="falg"
          ></el-table-column>
          <el-table-column
            label="责任主体"
            prop="respOrg"
          :show-overflow-tooltip="falg"
          ></el-table-column>
          <el-table-column
            label="责任人"
            prop="respPerson"
            :show-overflow-tooltip="falg"
          ></el-table-column>
          <el-table-column
            label="任务期号"
            width="180"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.taskYear && scope.row.taskMonth">{{
                scope.row.taskYear + "年第" + scope.row.taskMonth + "期"
              }}
<!--              <el-tooltip class="item" effect="dark" content="已销项" placement="top-start">-->
                <span  v-if="scope.row.isElimination == 1" style="width:42px;height:16px;border-color: #E02020;border-style:solid;border-width:1px;border-radius: 4px;font-size: 10px;color: #E02020;letter-spacing: 0;line-height:16px;display: inline-block;margin-left:2px;text-align: center;">已销项</span>
<!--              </el-tooltip>-->
              </span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column
            label="进展情况类型"
            prop="taskStatus"
            width="150"
          >
            <template slot-scope="scope">
              <div style="width:140px">
                <div
                  v-for="(item, index) in arrtaskTemplateStatus"
                  :key="index"
                  v-show="scope.row.taskStatus== item.value"
                  :class="'pbtn3 pbtn' + scope.row.taskStatus"
                >
                  <span :class="'cc3 cc' + scope.row.taskStatus"></span>
                  <span :class="'oo3 oo' + scope.row.taskStatus">{{ item.label }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="流程状态"
            prop="boStatus"
            :show-overflow-tooltip="true"

          >
            <template slot-scope="scope">
              <span>{{ scope.row.boStatusName }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="taskTotal > 0 && fass === 0"
          :total="taskTotal"
          :page.sync="querys.pageNo"
          :limit.sync="querys.pageSize"
          @pagination="getList"
        />

        <pagination
          v-show="taskTotal > 0 && fass === 1"
          :total="taskTotal"
          :page.sync="querys.pageNo"
          :limit.sync="querys.pageSize"
          @pagination="getListbas"
        />
        <pagination
          v-show="taskTotal > 0 && fass === 2"
          :total="taskTotal"
          :page.sync="querys.pageNo"
          :limit.sync="querys.pageSize"
          @pagination="getlistPop"
        />
      </div>
    </div>
  </div>
</template>

<script>
import QuerySearchBox from "@/components/QuerySearchBox/index";
import Pagination from "@/components/Pagination";
import indxPageTab from "@/components/query";
import { listTask, dict, taskAuthority, getBoStatus, listAccount, listPop } from "@/api/query/index";
import { taskQueryExport } from "@/api/query/index";
import { mapGetters } from "vuex";
export default {
  name: "querygroup",
  components: {
    QuerySearchBox,
    indxPageTab
  },
  data() {
    return {
      taskType: '0',
      falg:true,
      boxStatus: {},
      taskTypeDict: [
        {
          name:"主任务",
          code: "0",
          hidden:true
        },
        {
          name: "子任务",
          code: "1",
           hidden:true
        },
      ],
      arrtaskTemplateStatus: [
        {
          value: 0,
          label: "已完成",
        },
        {
          value: 1,
          label: "正在推进",
        },
        {
          value: 2,
          label: "未按期完成",
        },
        {
          value: null,
          label: "未选择",
        },
      ],
      type:'',
      taskYear:'',
      taskMonth:'',
      months:null,
      groupleader: [],
      taskList: [],
      loading: false,
      taskTotal: 0,
      statusex:[],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        taskAct: null,
        finishYear: null,
        finishMonth: null,
        respDeptCode: null,
        respLeader: null,
        taskDeptCode: null,
        respPerson: null,
        taskStatus: null,
        boStatus: null,
        chartJump: null,
        departCodeJump: null,
        taskSn:null
      },
      querys: {
        pageNo: 1,
        pageSize: 10,
        taskAct: null,
        finishYear: null,
        finishMonth: null,
        respDeptCode: null,
        respLeader: null,
        taskDeptCode: null,
        respPerson: null,
        taskStatus: null,
        boStatus: null,
        chartJump: null,
        departCodeJump: null,
        taskSn:null
      },
      fass: 0
    };
  },
  mounted() {
  },
  created() {
    this.taskType = this.$route.query.tastype
    //  if(this.$route.query.taskStatus === "fh" || this.$route.query.taskStatus === "zh" || this.$route.query.taskStatus === "yz"){
    //     this.fass = 1
    // }
    if(this.$route.query.taskStatus || this.$route.query.respDeptName || this.$route.query.name){

    }else {
      this.getList();
    }
    if(this.wfRole === 'WFNode001' || this.wfRole === 'WFNode002-001' || this.wfRole === 'WFNode003' || this.wfRole === 'WFNode004' || this.wfRole === 'WFNode005'){
      this.type = "bd";

    }
     if(this.wfRole === 'WFNode006' || this.wfRole === 'WFNode007-001' || this.wfRole === 'WFNode008' || this.wfRole === 'WFNode009'){
       this.type = "group";
     }
     if(this.wfRole === 'WFNode010' || this.wfRole === 'WFNode011' || this.wfRole === 'WFNode012'){
       this.type = "group";
     }

     if(this.$route.query.id){
      this.queryParams.id = this.$route.query.id;
      this.querys.id = this.$route.query.id;
    }
    if(this.type ==='group'){
    this.initboStatus();
    this.taskTemplateStatus();
    this.inits()
    }
  },
  computed: {
    ...mapGetters(["wfRole","roles","userId"]),
  },
  methods: {
    strs(val) {
      console.log(val)
      this.queryParams.respDeptCode = val
      this.querys.respDeptCode = val
    },
    changeTaskType(val) {
      console.log(val,65656565)
      this.queryParams = {
        pageNo: 1,
        pageSize: 10,
        taskAct: null,
        finishYear: null,
        finishMonth: null,
        respDeptCode: null,
        respLeader: null,
        taskDeptCode: null,
        respPerson: null,
        taskStatus: null,
        boStatus: null,
        wfRoleNode : this.wfRole
      }
      this.querys = {
        pageNo: 1,
        pageSize: 10,
        taskAct: null,
        finishYear: null,
        finishMonth: null,
        respDeptCode: null,
        respLeader: null,
        taskDeptCode: null,
        respPerson: null,
        taskStatus: null,
        boStatus: null,
        wfRoleNode : this.wfRole
      },
      this.taskType = val
      this.getList()
    },
    inits() {
      if(this.$route.query.month === '第1期'){
          this.months = '01'
      }
      else if(this.$route.query.month === '第2期'){
          this.months = '02'
      }
      else if(this.$route.query.month === '第3期'){
          this.months = '03'
      }
      else if(this.$route.query.month === '第4期'){
          this.months = '04'
      }
      else if(this.$route.query.month === '第5期'){
          this.months = '05'
      }
      else if(this.$route.query.month === '第6期'){
          this.months = '06'
      }
      else if(this.$route.query.month === '第7期'){
          this.months = '07'
      }
      else if(this.$route.query.month === '第8期'){
          this.months = '08'
      }
      else if(this.$route.query.month === '第9期'){
          this.months = '09'
      }
      else if(this.$route.query.month === '10期'){
          this.months = '10'
      }
      else if(this.$route.query.month === '11期'){
          this.months = '11'
      }
       else if(this.$route.query.month === '12期'){
          this.months = '12'
      }else{
        this.months = this.$route.query.month
      }
    },
    load(tree, treeNode, resolve) {

      },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (row.sortNum == null) {
        return "background: #F7F8FC";
      } else if (row.sortNum % 2 !== 0) {
        return "background:#fff";
      } else {
        return "background:#fff";
      }
    },
    // 跳转详情
    handlroute(row) {
      console.log(this.queryParams)
      let routeUrl = this.$router.resolve({
          path: "/query/detail",
          query: {
            id: row.id
          },
        });
        window.open(routeUrl.href, "_blank");
    },
    // 流程状态字典
    initboStatus() {
       getBoStatus("bd").then((res) => {
          if(res.code === 200) {
            let boxStatusBd = {}
             res.data.forEach(item => {
            boxStatusBd[item.dictValue] = item.dictLabel;
          });
          this.statusex = boxStatusBd
          }
       })
      getBoStatus("group").then((res) => {
        if (res.code === 200) {
          let boxStatus = {};
          res.data.forEach(item => {
            boxStatus[item.dictValue] = item.dictLabel;
          });
          this.boxStatus = boxStatus;
          if (this.$route.query.taskStatus === "本期任务已完成") {
            this.queryParams.finishYear = this.$route.query.year;
            this.queryParams.finishMonth = this.months;
            this.querys.finishYear = this.$route.query.year;
            this.querys.finishMonth = this.months;
            this.getList();
          }

          if(this.$route.query.taskStatus === '已完成'){
            this.queryParams.finishYear = this.$route.query.year
            this.queryParams.finishMonth = this.months
            this.querys.finishYear = this.$route.query.year
            this.querys.finishMonth = this.months
            if(this.wfRole === 'WFNode011'){
              this.querys.chartJump = 3;
              this.queryParams.chartJump = 3
            } else {
            this.querys.chartJump = 1;
            this.queryParams.chartJump = 1
            }

            this.getList()
          }
          if(this.$route.query.taskStatus === '未完成'){
            this.queryParams.undone = 'BS010'
            this.queryParams.finishYear = this.$route.query.year
            this.queryParams.finishMonth = this.months
            this.querys.undone = 'BS010'
            this.querys.finishYear = this.$route.query.year
            this.querys.finishMonth = this.months
            if(this.wfRole === 'WFNode011'){
              this.querys.chartJump = 3;
              this.queryParams.chartJump = 3
            } else {
            this.querys.chartJump = 1;
            this.queryParams.chartJump = 1

            }
                     this.getList()
          }
          if(this.$route.query.taskStatus === '走势'){
            this.queryParams.finishYear = this.$route.query.year
            this.queryParams.finishMonth = this.months
            this.querys.finishYear = this.$route.query.year
            this.querys.finishMonth = this.months
            this.getList()
          }
          if(this.$route.query.name === 'bq'){

            this.queryParams.respDeptCode = this.$route.query.respDeptCode;
            this.queryParams.finishYear = this.$route.query.taskYear;
            this.queryParams.finishMonth = this.$route.query.taskMonth;
            this.queryParams.owfRoleNode = this.$route.query.owfRoleNode;
            this.queryParams.chartJump  = 5;
            this.querys.respDeptCode = this.$route.query.respDeptCode;
            this.querys.finishYear = this.$route.query.taskYear;
            this.querys.finishMonth = this.$route.query.taskMonth;
            this.querys.chartJump  = 5;
            this.querys.owfRoleNode = this.$route.query.owfRoleNode;
            if(this.taskType === '0'){
              this.getlistPop();
              this.fass = 2
            }
            if(this.taskType === '1'){
              this.getList()
              this.fass = 0
            }

          }
          if(this.$route.query.name === 'zt'){
            this.queryParams.owfRoleNode = this.$route.query.owfRoleNode;
            this.queryParams.respDeptCode = this.$route.query.respDeptCode;
            this.queryParams.overallTask = this.$route.query.overallTask
            if(this.$route.query.overallTask !== '1'){
            this.queryParams.finishYear = this.$route.query.taskYear;
            this.queryParams.finishMonth = this.$route.query.taskMonth;
            }
            this.queryParams.chartJump  = 6;
            this.querys.chartJump  = 6;
            this.querys.overallTask = this.$route.query.overallTask
            this.querys.respDeptCode = this.$route.query.respDeptCode;
            this.querys.finishYear = this.$route.query.taskYear;
            this.querys.finishMonth = this.$route.query.taskMonth;
            this.querys.owfRoleNode = this.$route.query.owfRoleNode;

            if(this.taskType === '0'){
              this.getlistPop();
              this.fass = 2
            }
            if(this.taskType === '1'){
              this.getList()
              this.fass = 0
            }
          }
        }
      });
    },
    // 任务状态
    taskTemplateStatus() {
      dict("current.month.status").then((res) => {
        if (res.code === 200) {
          if(this.$route.query.taskStatus === '符合进度'){
           this.queryParams.taskStatus = 0
           this.queryParams.finishYear = this.$route.query.year
           this.queryParams.finishMonth = this.months
           this.querys.taskStatus = 0
           this.querys.finishYear = this.$route.query.year
           this.querys.finishMonth = this.months
           this.getList()
          }
          if(this.$route.query.taskStatus === '滞后但不影响任务完成'){
           this.queryParams.taskStatus = 1
           this.queryParams.finishYear = this.$route.query.year
           this.queryParams.finishMonth = this.months
           this.querys.taskStatus = 1
           this.querys.finishYear = this.$route.query.year
           this.querys.finishMonth = this.months
           this.getList()
          }
          if(this.$route.query.taskStatus === '严重滞后且影响任务完成'){
           this.queryParams.taskStatus = 2
           this.queryParams.finishYear = this.$route.query.year
           this.queryParams.finishMonth = this.months
           this.querys.taskStatus = 2
           this.querys.finishYear = this.$route.query.year
           this.querys.finishMonth = this.months
           this.getList()
          }

          if (this.$route.query.taskStatus === "fh") {
            this.queryParams.taskStatus = 0;
            this.queryParams.respDeptCode = this.$route.query.respDeptCode;
            this.queryParams.finishYear = this.$route.query.year;
            this.queryParams.finishMonth = this.months;
            this.querys.taskStatus = 0;
            this.querys.respDeptCode = this.$route.query.respDeptCode;
            this.querys.finishYear = this.$route.query.year;
            this.querys.finishMonth = this.months;
            if(this.taskType === '0'){
              this.getListbas();
              this.fass = 1
            }
            if(this.taskType === '1'){
              this.getList()
              this.fass = 0
            }
          }
          if (this.$route.query.taskStatus === "zh") {
            this.queryParams.taskStatus = 1;
            this.queryParams.respDeptCode = this.$route.query.respDeptCode;
            this.queryParams.finishYear = this.$route.query.year;
            this.queryParams.finishMonth = this.months;

            this.querys.respDeptCode = this.$route.query.respDeptCode;
            this.querys.taskStatus = 1;
            this.querys.finishYear = this.$route.query.year;
            this.querys.finishMonth = this.months;
            if(this.taskType === '0'){
              this.getListbas();
              this.fass = 1
            }
            if(this.taskType === '1'){
              this.getList()
              this.fass = 0
            }
          }
          if (this.$route.query.taskStatus === "yz") {
            this.queryParams.taskStatus = 2;
            this.queryParams.respDeptCode = this.$route.query.respDeptCode;
            this.queryParams.finishYear = this.$route.query.year;
            this.queryParams.finishMonth = this.months;

            this.querys.taskStatus = 2;
            this.querys.respDeptCode = this.$route.query.respDeptCode;
            this.querys.finishYear = this.$route.query.year;
            this.querys.finishMonth = this.months;
            if(this.taskType === '0'){
              this.getListbas();
              this.fass = 1
            }
            if(this.taskType === '1'){
              this.getList()
              this.fass = 0
            }
          }

           if(this.$route.query.taskStatus === '走势'){
            this.queryParams.finishYear = this.$route.query.year
            this.queryParams.finishMonth = this.months
             this.querys.finishYear = this.$route.query.year
            this.querys.finishMonth = this.months
            this.getList()
          }
          if(this.$route.query.form ==='group'){
            if(this.wfRole === 'WFNode010'){
              if(this.$route.query.taskStatus === '计划完成的任务数量'){
            this.queryParams.respDeptCode = this.$route.query.name
            this.queryParams.finishYear = this.$route.query.year
            this.queryParams.finishMonth = this.months
            this.querys.chartJump = 3
            this.querys.departCodeJump = this.$route.query.name
            this.querys.respDeptCode = this.$route.query.name
            this.querys.finishYear = this.$route.query.year
            this.querys.finishMonth = this.months
            this.getList()
            }
            if(this.$route.query.taskStatus === '已填报的任务数量'){
            this.queryParams.respDeptCode = this.$route.query.name
            this.queryParams.finishYear = this.$route.query.year
            this.queryParams.finishMonth = this.months
            this.querys.respDeptCode = this.$route.query.name
            this.querys.finishYear = this.$route.query.year
            this.querys.finishMonth = this.months
            this.getList()
            }
            }else {
               if(this.$route.query.taskStatus === '计划完成的任务数量'){
            this.queryParams.respDeptCode = this.$route.query.name
            this.queryParams.finishYear = this.$route.query.year
            this.queryParams.finishMonth = this.months
            this.querys.respDeptCode = this.$route.query.name
            this.querys.finishYear = this.$route.query.year
            this.querys.finishMonth = this.months
            this.getList()
            }
            if(this.$route.query.taskStatus === '已填报的任务数量'){
            this.queryParams.respDeptCode = this.$route.query.name
            this.queryParams.finishYear = this.$route.query.year
            this.queryParams.finishMonth = this.months
            this.querys.respDeptCode = this.$route.query.name
            this.querys.finishYear = this.$route.query.year
            this.querys.finishMonth = this.months
            this.getList()
            }
            }
          }
        }
      });
    },
    getlistPop() {
      this.taskList = []
      this.loading = true;
      this.queryParams.wfRoleNode = this.wfRole;
      this.querys.wfRoleNode = this.wfRole;
       if(this.$route.query.overallTask !== '1'){
        this.queryParams = {...this.querys}
      }
      listPop(this.querys).then((response) => {
        if(response.code === 200){
        this.loading = false;
        this.taskList = response.data || [];
        this.taskTotal = response.total;
        }
      });
    },
    getListbas() {
      this.taskList = []
      this.loading = true;
      this.queryParams.wfRoleNode = this.wfRole;
      this.querys.wfRoleNode = this.wfRole;
      this.queryParams = {...this.querys}
      listAccount(this.querys).then((response) => {
        this.loading = false;
        if(response.data){
          response.data.forEach(ele => {
          if(ele.haschildren === 0){
            ele.haschildren = false
          }else {
            ele.haschildren = false
          }
        })
        }

        this.taskList = response.data || [];

        this.taskTotal = response.total;
      });
    },

    getList() {
      console.log(654)
      this.taskList = []
      this.loading = true;
      this.queryParams.wfRoleNode = this.wfRole;
      this.querys.wfRoleNode = this.wfRole;
      if(this.$route.query.overallTask !== '1'){
        this.queryParams = {...this.querys}
      }
      //审阅人身份判断有无主子任务
      if(this.wfRole === 'WFNode013' || this.wfRole === 'WFNode014'){
        taskAuthority({userId:this.userId, wfRoleCode:this.wfRole}).then(res => {
          const level = res.data.level
          console.log(level,'-----------res-----------')
          if(level.length == 1){
            if(level[0] == 2){
              this.taskTypeDict=[
                {
                  name: "子任务",
                  code: "1",
                  hidden:true
                },
              ]
              this.taskType = '1'
            } else {
              this.taskTypeDict=[
                {
                  name:"主任务",
                  code: "0",
                  hidden:true
                }
              ]
              this.taskType = '0'
            }
          }
          setTimeout(()=> {
            console.log('if----',this.taskType)
            listTask(this.querys,this.taskType).then((response) => {
              this.loading = false;
              if(response.data){
                response.data.forEach(ele => {
                if(ele.haschildren === 0){
                  ele.haschildren = false
                }else {
                  ele.haschildren = true
                }
              })
              }
              this.taskList = response.data || [];
              this.taskTotal = response.total;
            });
          })

        })
      }else {
        console.log('else')
        listTask(this.querys,this.taskType).then((response) => {
          this.loading = false;
          if(response.data){
            response.data.forEach(ele => {
            if(ele.haschildren === 0){
              ele.haschildren = false
            }else {
              ele.haschildren = true
            }
          })
          }
          this.taskList = response.data || [];
          this.taskTotal = response.total;
        });
      }
    },
    resetQuery() {
      (this.queryParams = {
        pageNo: 1,
        pageSize: 10,
        taskAct: null,
        finishYear: null,
        finishMonth: null,
        respDeptCode: null,
        respLeader: null,
        taskDeptCode: null,
        respPerson: null,
        taskStatus: null,
        boStatus: null,
      }),
      (this.querys = {
        pageNo: 1,
        pageSize: 10,
        taskAct: null,
        finishYear: null,
        finishMonth: null,
        respDeptCode: null,
        respLeader: null,
        taskDeptCode: null,
        respPerson: null,
        taskStatus: null,
        boStatus: null,
      }),
        this.fass = 0
        this.getList();
    },
    handleQuery() {
      this.fass = 0
      this.queryParams.pageNo = 1;
      this.queryParams.departCodeJump = null;
      this.queryParams.chartJump = null;
      this.queryParams.undone = null
      // this.queryParams.respDeptCode =  null
      this.queryParams.overallTask = null
      this.querys = {...this.queryParams}
      this.getList();
    },
    handleExport(){
      if( this.querys.taskYear&&this.querys.taskMonth){
        this.fullscreenLoading = true;
        const querysParams = {
          ...this.querys,
          taskYear: this.querys.taskYear,
          taskMonth: this.querys.taskMonth,
        }
        const taskType = this.taskType?this.taskType == '1'?2:1:1
      taskQueryExport(this.wfRole,{...querysParams},taskType)
        .then((res) => {
          setTimeout(() => {
            this.fullscreenLoading = false;
          }, 1000);
          this.download(res.msg);
        })
        .catch(() => {
          setTimeout(() => {
            this.fullscreenLoading = false;
          }, 1000);
        });
      }else {
        this.$message({
            message: "请先选择任务年份和期数并查询",
            type: "warning",
          });
      }
    },
    handlTask(val){
      this.taskType = val
      // console.log(val,65656)
      //  if(val === '0'){
      //   this.typeView = 1
        this.getList()
      // }
      // if(val === '1'){
      //   this.typeView = 2
      //   this.getList()
      // }

    },
  },
};
</script>

<style lang="scss" scoped>
.task-manage {
  .manage-header {
    padding: 28px 30px;
    padding-bottom: 0px;
    background: #fff;
  }
  .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
    background: #EDF0FF;
  }
  .el-table tr{
    height: 46px;
    background: none;
  }

  .manage-body {
    background: #fff;
    margin-bottom: 79px;
  }
  .manage-inner{
    border-radius: 32px 0 0 0;
    padding:40px 30px 0px 30px;
    background-image: linear-gradient(180deg, #F7F9FF 0%, #F5F7FF 100%);
  }
}
/deep/ .el-table__body .el-table__row--level-1 {
  background: #F2F5FF;
   border-top: 0;
}
.ponter_box{
  display: flex;
  align-items: center;
}
.ponter{
  width: 340px;
  display: inline-block;
  cursor:pointer;
  font-weight: 600;
  overflow: hidden;  /*超出部分隐藏*/
  white-space: nowrap;  /*禁止换行*/
  text-overflow: ellipsis; /*省略号*/
}
.pbtn{
  width: 66px;
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  border: 1px solid #C0BEC5;
  border-radius: 11px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #424242;
  letter-spacing: 0;
  height: 22px;
  span{
    font-size:12px!important;
  }
  .cc0{
    width: 10px;
    height: 10px;
    background: #36A96E;
    border-radius:50% ;
  }
  .cc1{
    width: 10px;
    height: 10px;
    background: #FFC617;
    border-radius:50% ;
  }
  .cc2{
    width: 10px;
    height: 10px;
    background: #E02020;
    border-radius:50% ;
  }
  .cc3{
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius:50% ;
  }
}

/deep/ .el-table__body tr > td{
   border: 0 !important;
}
  /deep/ .el-table th, .el-table td{
    padding: 0;
  }
  /deep/.el-table__body tr.el-table__row > td:nth-of-type(1) {
  border-radius: 8px 0px 0px 8px;
}
/deep/.el-table__body tr.el-table__row > td:last-child {
  border-radius: 0px 8px 8px 0px;
}
.blockz{
  display: inline-block;
  width: 42px;
  height: 16px;
  border:1px solid #E02020;
  font-family: PingFangSC-Regular;
  font-size: 10px;
  color: #E02020;
  letter-spacing: 0;
  line-height: 14px;
  border-radius: 4px;
  margin-left: 4px;
  padding: 0 2px;
  margin-bottom:3px;
}
.pbtn3 {
  background: #e6e6e6;
  width: 82px;
  height: 22px;
  padding: 3px auto;
  border-radius: 11px;
  display: flex;
  align-items: center;
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #cfd6d3;
  letter-spacing: 0;
  line-height: 16px;
  justify-content: center;
  span {
    font-size: 12px !important;
  }
}
.pbtn0 {
  background: #e8f5ee;
  width: 82px;
  height: 22px;
  padding: 3px auto;
  border-radius: 11px;
  display: flex;
  align-items: center;
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #36A96E;
  letter-spacing: 0;
  line-height: 16px;
  justify-content: center;
  span {
    font-size: 12px !important;
  }
}
.pbtn1 {
  background: #fdf4e6;
  width: 82px;
  height: 22px;
  padding: 3px auto;
  border-radius: 11px;
  display: flex;
  align-items: center;
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #36A96E;
  letter-spacing: 0;
  line-height: 16px;
  justify-content: center;
  span {
    font-size: 12px !important;
  }
}
.pbtn2 {
  background: #fdefee;
  width: 82px;
  height: 22px;
  padding: 3px auto;
  border-radius: 11px;
  display: flex;
  align-items: center;
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #36A96E;
  letter-spacing: 0;
  line-height: 16px;
  justify-content: center;
  span {
    font-size: 12px !important;
  }
}

.pbtnnull {
  background: #e6e6e6;
  width: 82px;
  height: 22px;
  padding: 3px auto;
  border-radius: 11px;
  display: flex;
  align-items: center;
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #cfd6d3;
  letter-spacing: 0;
  line-height: 16px;
  justify-content: center;
  span {
    font-size: 12px !important;
  }
}

.cc3 {
    width: 6px;
    height: 6px;
    font-family: PingFangSC-Medium;
    font-size: 12px;
    background: #7d7e7d;
    letter-spacing: 0;
    line-height: 16px;
    display: block;
    margin-right: 4px;
    border-radius: 50%;
}
.oo3{
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #7d7e7d;
  letter-spacing: 0;
  line-height: 16px;
  display: block;
}
.cc0 {
    width: 6px;
    height: 6px;
    font-family: PingFangSC-Medium;
    font-size: 12px;
    background: #36A96E;
    letter-spacing: 0;
    line-height: 16px;
    display: block;
    margin-right: 4px;
    border-radius: 50%;
}
.oo0{
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #36A96E;
  letter-spacing: 0;
  line-height: 16px;
  display: block;
}
.cc1 {
    width: 6px;
    height: 6px;
    font-family: PingFangSC-Medium;
    font-size: 12px;
    background: #F1AA00;
    letter-spacing: 0;
    line-height: 16px;
    display: block;
    margin-right: 4px;
    border-radius: 50%;
}
.oo1{
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #F1AA00;
  letter-spacing: 0;
  line-height: 16px;
  display: block;
}
.cc2 {
    width: 6px;
    height: 6px;
    font-family: PingFangSC-Medium;
    font-size: 12px;
    background: #E85D5D;
    letter-spacing: 0;
    line-height: 16px;
    display: block;
    margin-right: 4px;
    border-radius: 50%;
}
.oo2{
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #E85D5D;
  letter-spacing: 0;
  line-height: 16px;
  display: block;
}

.ccnull {
    width: 6px;
    height: 6px;
    font-family: PingFangSC-Medium;
    font-size: 12px;
    background: #7d7e7d;
    letter-spacing: 0;
    line-height: 16px;
    display: block;
    margin-right: 4px;
    border-radius: 50%;
}
.oonull{
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #7d7e7d;
  letter-spacing: 0;
  line-height: 16px;
  display: block;
}

</style>
<style lang="scss">
.task-manage{
  .manage-header {
    .el-input__inner{
      background: #F5F6FA;
      border-radius: 8px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #424242;
      letter-spacing: 0;
      border: none;
      height: 34px;
    }
  }
}
</style>