thoth-frontend-test/src/views/projectManage/taskList/taskIndex.vue

<template>
  <div class="bgborder" style="background-color:#F2F3F6;min-height:calc(100vh - 80px);padding:0 10px 10px 10px">
    <div class="stylus-head">
      <mainTitle
        title="任务"
        btn-text="新建任务"
        :tab-show="true"
        @btn-handle="open_created"
        @change-tab="changeTab"
      />
      <div v-if="nowTab === 'charts'" class="chartView">
        <chartView
          :data="chartData"
          :type-option-list="typeOptionList"
          :chart-search-data="form_task"
          @search="get_charts()"
          @changeList="(code) => get_chartListDetial(code)"
        >
          <div slot="searchBox">
            <div class="Layout">
              <div class="Layout">
                <div class="chartSearchTitle">模块</div>
                <el-cascader v-model="form_task.moduleIds" size="small" clearable collapse-tags :props="props" :options="business_platform_Modular" placeholder="请选择" style="width:77% !important;" @change="get_charts()" />
              </div>
              <span class="screen" style="text-align:right; width: auto" @click="showChartModal = true">更多筛选</span>
            </div>
          </div>
        </chartView>
      </div>
      <div v-if="nowTab === 'list'" class="search_box">
        <div class="Layout" style="padding: 5px 0 0 15px">
          <div>
            <el-form :model="form_task" class="Layout">
              <div class="Layout_flex_end item">
                <div class="queryName">任务名称</div>
                <el-input v-model="form_task.name" size="small" clearable class="input" placeholder="请输入标题或ID或望岳ID" @change="get_taskList()" />
              </div>
              <div class="Layout item">
                <div class="queryName">状态</div>
                <el-select v-model="form_task.statusList" size="small" class="input" multiple clearable filterable placeholder="请选择" @change="get_taskList()">
                  <el-option v-for="item in daStatus" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
              <div class="Layout item">
                <div class="queryName">模块</div>
                <el-cascader v-model="form_task.moduleIds" size="small" class="input" clearable collapse-tags :props="props" :options="business_platform_Modular" placeholder="请选择" @change="get_taskList()" />
              </div>
            </el-form>
          </div>
          <span class="screen" @click="showSelect">{{ goodName }}</span>
        </div>
        <div v-show="DetailedScreening" class="stylus-more">
          <div>
            <div class="Layout">
              <el-form :model="form_task" class="flex_start">
                <div class="Layout item">
                  <div class="queryName">所属项目</div>
                  <el-select v-model="form_task.projectId" size="small" class="input" clearable filterable placeholder="请选择">
                    <el-option v-for="item in projectList" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div class="Layout item">
                  <div class="queryName">所属需求</div>
                  <el-select v-model="form_task.requireId" size="small" class="input" clearable filterable placeholder="请选择">
                    <el-option v-for="item in demandList" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div class="Layout item">
                  <div class="queryName">来自望岳</div>
                  <el-select v-model="form_task.isFromDpm" size="small" class="input" clearable filterable placeholder="请选择">
                    <el-option v-for="item in isFromDpmList" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </el-form>
            </div>
            <div class="Layout" style="margin: 15px 0;">
              <el-form :model="form_task" class="flex_start">
                <div class="Layout item">
                  <div class="queryName">优先级</div>
                  <el-select v-model="form_task.priority" size="small" class="input" clearable filterable placeholder="请选择">
                    <el-option v-for="item in arr_priority" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div class="Layout item">
                  <div class="queryName">负责人</div>
                  <el-select
                    v-model="form_task.PersonInCharge"
                    class="input"
                    clearable
                    filterable
                    remote
                    placeholder="请输入姓名或邮箱前缀"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    size="small"
                  >
                    <el-option v-for="item in options" :key="item.idap" :label="item.name" :value="test2(item, 0)">
                      <div class="flex_start">
                        <div class="deptName">{{ item.deptName }}</div>
                        <div style="min-width:80px">{{ item.name }}</div>
                        <div class="deptName">{{ item.idap }}</div>
                      </div>
                    </el-option>
                  </el-select>
                </div>
                <div class="Layout item">
                  <div class="queryName">健康状态</div>
                  <el-select v-model="form_task.stage" size="small" class="input" clearable filterable placeholder="请选择">
                    <el-option v-for="item in healthStage" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </el-form>
            </div>
            <div class="Layout" style="margin: 15px 0;">
              <el-form :model="form_task" class="flex_start">
                <div class="Layout item">
                  <div class="queryName" style="width:86px;">创建人</div>
                  <el-select
                    v-model="form_task.creater"
                    class="input"
                    clearable
                    filterable
                    remote
                    placeholder="请输入姓名或邮箱前缀"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    size="small"
                    style="width: 82%;"
                  >
                    <el-option v-for="item in options" :key="item.idap" :label="item.name" :value="test2(item, 0)">
                      <div class="flex_start">
                        <div class="deptName">{{ item.deptName }}</div>
                        <div style="min-width:80px">{{ item.name }}</div>
                        <div class="deptName">{{ item.idap }}</div>
                      </div>
                    </el-option>
                  </el-select>
                </div>
                <div class="Layout item">
                  <div class="queryName">创建日期</div>
                  <el-date-picker
                    v-model="form_task.date"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="small"
                    class="input"
                    style="min-width: 476px"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00','23:59:59']"
                    :picker-options="pickerOptions"
                  />
                </div>
              </el-form>
            </div>
            <div align="right">
              <el-button type="text" @click="showSaveSearch = true">保存筛选项</el-button>
              <el-button type="primary" size="mini" @click="get_taskList(form_task)">筛 选</el-button>
              <el-button size="mini" @click="query_Reset">重 置</el-button>
            </div>
          </div>
        </div>
        <div v-if="filterList.length && filterList.length > 0" class="filter">
          <div class="filterWrap">
            <div class="title">我的过滤器：</div>
            <div class="itemBox">
              <el-tag v-for="item in filterList" :key="item.id" class="item" @click="getFilterItem(item.id)">{{ item.name }}</el-tag>
            </div>
          </div>
          <div class="btn">
            <span @click.stop="showEditSearch = true">管理过滤器</span>
          </div>
        </div>
      </div>
    </div>
    <div class="stylus-content">
      <div v-if="nowTab === 'charts'" class="subtitle">{{ tableTitle }}</div>
      <el-table
        v-loading="table_loading"
        :data="task_table"
        style="width: 100%;"
        highlight-current-row
        :header-cell-style="{ 'background': nowTab === 'charts' ? '#F7F7F7' : '#fff', 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }"
        :cell-style="{ 'font-size':'14px','color':'rgba(102,102,102,1)' }"
        size="small"
        show-overflow-tooltip="true"
      >
        <el-table-column label="优先级" width="90" prop="priority" sortable align="right">
          <template slot-scope="scope">
            <div class="div_priority" :style="{background: priorityColors[scope.row.priority]}">{{ scope.row.priorityString }}</div>
          </template>
        </el-table-column>
        <el-table-column label="任务名称" min-width="250" show-overflow-tooltip align="left">
          <template slot-scope="scope">
            <span style="font-size: 12px;color: rgba(167,174,188,1);">
              {{ scope.row.taskIdSting }}
              <span
                v-if="scope.row.tagNotification !== null && scope.row.status !== -2"
                :class="{
                  'tagNotification': scope.row.tagType === 0,
                  'tagNotification1': scope.row.tagType === 1
                }"
              >
                {{ scope.row.tagNotification }}
              </span>
              <span v-if="scope.row.status === -2" class="tagNotification1"> {{ 'hold' }} </span>
            </span><br>
            <span class="stylus-hover" @click="link_task(scope.row.id)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="150" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-select
              v-if="nowTab === 'charts'"
              v-model="scope.row.status"
              :size="size"
              placeholder=""
              @change="(e) => statusChange(e, scope.row.id)"
            >
              <el-option v-for="o in scope.row.availableStatusList" :key="o.code" :label="o.name" :value="o.code" />
            </el-select>
            <span v-else>{{ scope.row.statusString }}</span>
          </template>
        </el-table-column>
        <el-table-column label="健康状态" width="150" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.stageString }}</template>
        </el-table-column>
        <el-table-column label="开发负责人" min-width="100" align="center">
          <template
            slot-scope="scope"
          >{{ scope.row.rdObject !== null? scope.row.rdObject.name: '' }}</template>
        </el-table-column>
        <el-table-column label="测试负责人" min-width="100" align="center">
          <template
            slot-scope="scope"
          >{{ scope.row.qaObject !== null?scope.row.qaObject.name: '' }}</template>
        </el-table-column>
        <el-table-column label="所属模块" width="150" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.moduleInfoName }}</template>
        </el-table-column>
        <el-table-column label="是否免测" min-width="80" align="center">
          <template slot-scope="scope">{{ scope.row.noTestString }}</template>
        </el-table-column>
        <el-table-column label="缺陷数量" width="250" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.bugCount }}</template>
        </el-table-column>
        <el-table-column label="所属需求" min-width="250" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.requireName }}</template>
        </el-table-column>
        <el-table-column label="所属项目" min-width="250" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.projectName }}</template>
        </el-table-column>
        <el-table-column label="创建人" min-width="120" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.createObject.name }}</template>
        </el-table-column>
        <el-table-column label="创建日期" min-width="120" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
      </el-table>
      <div align="right">
        <el-pagination
          background
          :current-page="currentPage"
          :page-sizes="[15,30,45,total]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 弹窗 -->
    <openDialog v-if="dialog_open" ref="task_createdUpdata" />
    <normal-dialog :show-dialog="showSaveSearch" :title="'保存筛选项'" :width="'35%'" @confirm="saveSearch('searchForm')" @cancel="showSaveSearch=false">
      <div v-if="showSaveSearch" class="file-dialog">
        <el-form ref="searchForm" :model="searchForm" :rules="searchFormRules" label-width="100px">
          <el-form-item label="过滤器名称" prop="name">
            <el-input v-model="searchForm.name" placeholder="不超过50个字符" />
          </el-form-item>
        </el-form>
      </div>
    </normal-dialog>
    <normal-dialog :show-footer="false" :show-dialog="showEditSearch" :title="'管理过滤器'" :width="'65%'" @cancel="showEditSearch=false">
      <filter-list :show-filter="showEditSearch" :filter-type="2" @deleteFilter="deleteFilter" />
    </normal-dialog>
    <filterModal
      title="筛选项"
      :show-dialog="showChartModal"
      @reset="query_Reset"
      @cancel="showChartModal = false"
      @confirm="filterModalConfirm"
    >
      <div>
        <chartSearchForm
          :data="chartSearchFormRenderData"
          :loading="loading"
          :styles="{ marginBottom: '15px', width: '380px' }"
          @change="chartSearchFormChange"
          @getOption="(key, q, utilName) => remoteMethod(q)"
        />
      </div>
    </filterModal>
  </div>
</template>

<script>
const _ = require('lodash')
import { EncryptId } from '@/utils/crypto-js.js'
import { mapGetters } from 'vuex'
import {
  taskList,
  configShowTaskEnum,
  memberQueryMemberInfoByIDAPorName,
  configShowRequirementVersionEnum,
  projectListProject,
  getFilterList,
  configShowTaskStatusEnum,
  createFilter,
  filterGetFilter,
  getChartListData,
  getChartData,
  updateStatus
} from '@/api/taskIndex' // ajax
import filterModal from '@/components/filterModal'
import { settingQueryBizModuleList } from '@/api/defectManage'
import openDialog from '@/views/projectManage/dialog_vue'
// 过滤器
import filterList from '@/views/projectManage/components/filterList'
import normalDialog from '@/components/dialog/normalDialog'
import mainTitle from '@/components/mainTitle'
import chartView from '@/components/chartView'
import chartSearchFormData from './renderData/chartSearchForm'
import chartSearchForm from '@/components/searchHeader/searchForm'
import '@/views/projectManage/publicCss/index.css'
import '@/styles/PublicStyle/index.scss'
export default {
  components: {
    openDialog,
    filterList,
    normalDialog,
    mainTitle,
    chartView,
    filterModal,
    chartSearchForm
  },
  data() {
    return {
      size: 'small',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      header_show: true,
      props: {
        value: 'id',
        label: 'moduleName',
        children: 'childModules',
        multiple: true
      },
      isFromDpmList: [{ value: true, label: '是' }, { value: false, label: '否' }],
      priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD'],
      arr_priority: [{ value: 0, label: 'P0' }, { value: 1, label: 'P1' }, { value: 2, label: 'P2' }, { value: 3, label: 'P3' }],
      dialog_open: false,
      curIndex: 1,
      pageSize: 15,
      goodName: '更多筛选',
      options: [],
      daStatus: [], // 任务状态筛选option
      healthStage: [],
      list: [],
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      form_task: {
        viewType: '0'
      },
      noTest: [], // 是否免测
      BusinessLine: [], // 业务线
      appClient: [], // 涉及业务线
      arr_platform: [], // 平台数据
      business_platform_Modular: [], // 模块数据
      arr_taskName: [], // 任务名称数据
      projectList: [], // 归属项目数据
      demandList: [], // 需求list
      dialogFormVisible: false,
      currentPage: 0,
      DetailedScreening: false,
      total: 0,
      biz: '',
      isToOne: true,
      loading: false,
      table_loading: false,
      test: {},
      task_table: [],
      form: {},
      arry: [],
      filterList: [],
      showEditSearch: false, // 显示管理过滤器
      searchForm: { name: null }, // 筛选项obj
      searchFormRules: { name: [
        { required: true, message: '请输入筛选项名称', trigger: 'blur' },
        { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
      ] },
      showSaveSearch: false, // 显示保存筛选项对话框
      nowTab: 'list',
      chartData: {},
      typeOptionList: [
        { value: '0', label: '任务状态' },
        { value: '1', label: '任务等级' },
        { value: '2', label: '开发负责人' },
        { value: '3', label: '测试负责人' },
        { value: '4', label: '跟版客户端' },
        { value: '5', label: '直接归属' }
      ],
      showChartModal: false,
      tableTitle: '',
      chartSearchFormRenderData: _.cloneDeep(chartSearchFormData)
    }
  },
  computed: {
    ...mapGetters(['bizId'])
  },
  watch: {
    bizId() {
      this.get_taskList()
      this.get_taskSelect()
      this.getFilterList() // 筛选项保存
    }
  },
  created() {
    this.get_taskList()
    this.get_taskSelect()
    this.bugDataGet()
    this.$store.state.data.status = true
  },
  mounted() {
    this.$nextTick(() => {
      this.bugDataGet()
      this.getFilterList() // 筛选项保存
    })
    this.updateChartSlectOption('isFromDpm', this.isFromDpmList)
    this.updateChartSlectOption('priority', this.arr_priority)
  },
  destroyed() {
    this.$store.state.data.status = false
  },
  methods: {
    filterModalConfirm() {
      this.showChartModal = false
      this.get_charts()
    },
    logHandle(d) {
      window.log({ c: 'task', d })
    },
    changeTab(e) {
      this.nowTab = e
      if (this.nowTab === 'charts') {
        this.get_charts()
      } else {
        this.chartData = {}
        this.get_taskList()
      }
    },
    async statusChange(e, id) {
      console.log(e)
      const res = await updateStatus({ status: e, id })
      if (res.code === 200) {
        this.get_charts()
      }
    },
    get_charts() {
      this.updateChartSearchFormValue()
      this.form_taskHandle()
      this.get_chartList()
    },
    async get_chartList() {
      this.table_loading = true
      const res = await getChartData(this.form_task)
      this.chartData = res.data
      this.get_chartListDetial(res.data.data[0].code)
    },
    async get_chartListDetial(code) {
      if (code) {
        this.form_task.code = code
      }
      const dataList = await getChartListData(this.form_task)
      this.task_table = dataList.data.list
      this.total = dataList.total
      this.tableTitle = dataList.data.title
      this.table_loading = false
    },
    test2(item, e) {
      // 获取团队人员信息
      if (typeof this.test[item.idap] === 'undefined') {
        item.role = e
        this.test[item.idap] = item
      }
      return item.idap
    },
    // 保存筛选项
    saveSearch(formName) { // 保存筛选项
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.stratAndEnd = this.stratAndEnd ? this.stratAndEnd : []
          this.form_task.createStartTime = this.stratAndEnd[0] || null
          this.form_task.createEndTime = this.stratAndEnd[1] || null
          const isExistName = this.filterList.some(item => {
            return item.name === this.searchForm.name
          })
          if (isExistName) {
            this.$message({ showClose: true, message: '筛选项名称重名', type: 'error' })
          } else {
            this.toSave()
          }
        } else {
          this.$message({ showClose: true, message: '筛选项名称不能为空', type: 'error' })
          return false
        }
      })
    },
    // 保存过滤器
    async toSave() {
      const saveObj = _.cloneDeep(this.form_task)
      delete saveObj.curIndex
      delete saveObj.pageSize
      const res = await createFilter({
        name: this.searchForm.name,
        content: JSON.stringify(saveObj),
        bizId: this.bizId,
        filterType: 2
      })
      if (res.code === 200) {
        this.$message({ showClose: true, message: '保存成功', type: 'success' })
        this.showSaveSearch = false
        this.getFilterList()
        this.searchForm.name = null
      }
    },
    async getFilterList() { // 获取过滤器列表
      const params = {
        bizId: this.bizId,
        filterType: 2
      }
      const res = await getFilterList(params)
      this.filterList = res.data
    },
    deleteFilter() {
      this.$router.push({ path: this.$route.path })
      this.getFilterList()
    },
    form_taskHandle() {
      if (this.bizId === -1) return
      // 查询
      if (this.isToOne) {
        this.curIndex = 1
        this.currentPage = 1
      }
      this.table_loading = true
      this.form_task.bizId = this.bizId
      this.form_task.pageSize = this.pageSize
      this.form_task.curIndex = this.curIndex
      for (const key in this.form_task) { // 接口不接受空值的处理
        if (this.form_task[key] === '') {
          delete this.form_task[key]
        }
      }
      if (this.form_task.date) {
        this.form_task.createTimeBegin = this.form_task.date[0]
        this.form_task.createTimeEnd = this.form_task.date[1]
      } else {
        delete this.form_task.createTimeBegin
        delete this.form_task.createTimeEnd
      }
    },
    get_taskList(e) {
      // if (this.bizId === -1) return
      // // 查询
      // if (this.isToOne) {
      //   this.curIndex = 1
      //   this.currentPage = 1
      // }
      // this.table_loading = true
      // this.form_task.bizId = this.bizId
      // this.form_task.pageSize = this.pageSize
      // this.form_task.curIndex = this.curIndex
      // for (const key in this.form_task) { // 接口不接受空值的处理
      //   if (this.form_task[key] === '') {
      //     delete this.form_task[key]
      //   }
      // }
      // if (this.form_task.date) {
      //   this.form_task.createTimeBegin = this.form_task.date[0]
      //   this.form_task.createTimeEnd = this.form_task.date[1]
      // } else {
      //   delete this.form_task.createTimeBegin
      //   delete this.form_task.createTimeEnd
      // }
      this.form_taskHandle()
      taskList(this.form_task).then(res => {
        this.task_table = res.data
        this.total = res.total
        this.table_loading = false
      })
      configShowRequirementVersionEnum({ bizId: this.bizId }).then(res => {
        // 获取需求（查询）
        const demandList = res.data.map(t => ({
          ...t,
          label: t.name,
          value: t.id
        }))
        this.demandList = demandList
        this.updateChartSlectOption('requireId', demandList)
      })
      this.isToOne = true
    },
    async remoteMethod(query) {
      // 人员查询
      if (query !== '') {
        this.loading = true
        const res = await memberQueryMemberInfoByIDAPorName({ memberIDAP: query })
        const obj = {}
        this.options = res.data.reduce((cur, next) => {
          obj[next.idap] ? '' : obj[next.idap] = true && cur.push(next)
          return cur
        }, [])
        this.loading = false
      } else {
        this.options = []
      }
      this.updateChartSlectOption('PersonInCharge', this.options)
      this.updateChartSlectOption('creater', this.options)
    },
    showSelect() {
      this.DetailedScreening = !this.DetailedScreening
      this.goodName === '更多筛选' ? this.goodName = '收起筛选' : this.goodName = '更多筛选'
    },
    team_dates(e) {
      // 改变成员
      this.form.arry = []
      for (const i in e) {
        this.form.arry.push(this.test[e[i]])
      }
      this.arry = this.form.arry.map(item => {
        return { memberIDAP: item.idap, department: item.deptid, role: 0 }
      })
    },
    open_created() {
      // 打开弹窗
      this.dialog_open = true
      this.$nextTick(() => {
        this.$refs.task_createdUpdata.init(1)
      })
    },
    link_task(id) {
      const bizId_id = EncryptId(`${this.bizId}_${id}`)
      if (localStorage.getItem('openPageHandle') === 'self') {
        this.$router.push({ name: '任务详情', query: { bizId_id: bizId_id }})
      } else {
        const newTab = this.$router.resolve({ name: '任务详情', query: { bizId_id: bizId_id }})
        window.open(newTab.href, '_blank')
      }
    },
    query_Reset() {
      // 重置
      this.form_task = {
        ...this.form_task,
        bizId: '',
        status: '',
        stage: '',
        id: '',
        projectId: '',
        requireId: '',
        PersonInCharge: '',
        Participant: '',
        creater: '',
        isFromDpm: '',
        priority: '',
        date: []
      }
      if (this.nowTab === 'charts') {
        this.form_task = { ...this.form_task, moduleIds: [], name: '', statusList: [] }
      }
      this.updateChartSearchFormValue()
      if (this.nowTab === 'charts') {
        this.get_charts()
      } else {
        this.get_taskList()
      }
      // this.$message({
      //   message: '已重置',
      //   type: 'success',
      //   duration: 1000,
      //   offset: 150
      // })
    },
    handleSizeChange(size) {
      //  分页
      this.pageSize = size
      this.isToOne = false
      this.form_taskHandle()
      if (this.nowTab === 'charts') {
        this.get_chartListDetial()
        return
      }
      this.get_taskList(1)
    },
    handleCurrentChange(curIndex) {
      //  分页
      this.curIndex = curIndex
      this.currentPage = curIndex
      this.isToOne = false
      this.form_taskHandle()
      if (this.nowTab === 'charts') {
        this.get_chartListDetial()
        return
      }
      this.get_taskList()
    },
    async get_taskSelect() {
      if (this.bizId === -1) return
      // 下拉菜单数据
      const res = await configShowTaskEnum()
      if (res.code === 200) {
        const healthStage = res.data.taskStage.map(t => ({
          ...t,
          label: t.msg,
          value: t.code
        }))
        this.healthStage = healthStage
        this.updateChartSlectOption('stage', healthStage)
        this.noTest = res.data.noTest // 是否免测
        this.taskSource = res.data.taskSource // 归属需求
        this.appClient = res.data.appClient // 涉及客户端
      }
      const res1 = await configShowTaskStatusEnum(this.bizId)
      if (res1.code === 200) {
        const daStatus = res1.data.taskStatus.map(t => ({
          ...t,
          label: t.msg,
          value: t.code
        }))
        this.daStatus = daStatus
        this.updateChartSlectOption('statusList', daStatus)
      }
      const res2 = await projectListProject({ bizId: this.bizId })
      if (res2.code === 200) {
        const projectList = res2.data.map(t => ({
          ...t,
          label: t.name,
          value: t.id
        }))
        this.projectList = projectList
        this.updateChartSlectOption('projectId', projectList)
      }
    },
    bugDataGet() { // 所属模块
      this.biz = this.bizId
      if (this.bizId === -1) {
        this.biz = this.$store.state.global.bizId
      }
      settingQueryBizModuleList(this.biz).then(res => {
        this.business_platform_Modular = this.getRequireData(res.data)
      })
    },
    getRequireData(data) {
      for (let i = 0; i < data.length; i++) {
        data[i].childModules && data[i].childModules.length < 1 ? delete data[i].childModules : this.getRequireData(data[i].childModules)
      }
      return data
    },
    async getFilterItem(filterId) { // 获取单个过滤器
      const res = await filterGetFilter(filterId)
      if (res.code === 200) {
        const filter = JSON.parse(res.data.content)
        Object.assign(this.form_task, filter)
        this.curIndex = 1
        this.get_taskList()
      }
    },
    chartSearchFormChange(key, value) {
      console.log(key, value, this.chartSearchFormRenderData)
      this.form_task[key] = value
    },
    updateChartSlectOption(key, option) {
      this.chartSearchFormRenderData.map(t => {
        if (t.key === key) {
          t.option = option
        }
      })
    },
    updateChartSearchFormValue() {
      this.chartSearchFormRenderData.map(t => {
        t.value = this.form_task[t.key]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.chartView {
  .chartSearchTitle {
    width: 50px;
    color: #333333;
    font-size: 14px;
  }
  .screen {
    margin-left: 20px;
  }
}
.stylus-head {
  position: relative;
}
.new-tab-open {
  position: absolute;
  left: 120px;
}
.filter {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 15px;
  .filterWrap {
    display: flex;
    align-items: baseline;
    .title {
      width: 100px;
    }
    .itemBox {
      .item {
        display: inline-block;
        margin-right: 20px;
        margin-bottom: 10px;
        cursor: pointer;
      }
    }
  }
  .btn {
    font-size: 14px;
    color: #00A0FF;
    cursor: pointer;
    min-width: 80px;
    text-align: center;
  }
}
.subtitle {
  color: #333;
  font-size: 16px;
  background: #fff;
  font-weight: 700;
  padding: 16px 12px;
}
.search_box {
  .item {
    width: 270px;
    margin-right: 15px;
    .queryName {
      min-width: 80px;
    }
  }
}
</style>
<style>
.el-loading-mask {
  z-index: 8;
}
.requirement-xx .el-table .cell {
  padding: 5px 0;
  font-size: 14px;
  font-family: MicrosoftYaHei;
}
.requirement-xx  .el-table .el-table__body tr:hover td { color: #409EFF; background: #EDF6FF; } /*hover时字体, 背景颜色*/

.footer {
  text-align: right;
  margin: 1%;
  background-color: #ffffff;
  border-radius: 4px;
}
.bgborder .el-table .cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    line-height: 23px;
    padding-right: 10px;
    margin: -6px 0 -2px 0 !important;
}
.el-table .warning-row {
  background: oldlace;
}

.drop_down {
  font-size: 14px;
  color: #333333;
}
.requirement_el-dropdown-menu {
  max-height: 300px !important;
  max-width: 200px;
  overflow: auto !important;
}
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #f6f7fa;
  color: #606266;
}
.div_priority {
  display: inline-block;
  width: 38px;
  text-align: center;
  line-height: 24px;
  font-size: 14px;
  color: #fff;
  border-radius: 4px;
  margin-right: 30px;
}
.tagNotification {
  background: rgba(255,137,82,15%);
  color: #FF8952;
  padding: 0 5px;
  border-radius: 8px;
  margin-left: 10px;
}

.tagNotification1 {
  background: rgba(245,108,108,17%);
  color: #F56C6C;
  padding: 0 5px;
  border-radius: 8px;
  margin-left: 10px;
}

</style>
<style lang="stylus" scoped>
  .stylus-head >>> .el-form-item__label
    color #333333
    font-weight 400
  .stylus-content >>> .el-table .el-table__body tr:hover td
    // color #409EFF !important
    background #EDF6FF
  .stylus-head >>> .el-divider--horizontal
    margin 10px 0
  .stylus-head >>> .el-form-item
    margin-bottom 0
  .stylus-head
    width 100%
    padding 15px
    margin-bottom: 10px
    background-color white
    border-radius 4px
    .stylus-title
      display flex
      justify-content space-between
      align-items center
    .stylus-more
      background rgba(252,252,252,1)
      border-radius 4px
      padding 15px
      min-height 100px
      margin-top 22px
      border 1px solid rgba(238,238,238,1)
      width 100%
  .stylus-content
    width 100%
    padding 0.3% 1% 1% 1%
    margin:0 auto
    background-color white
    border-radius 4px
    // min-height: calc(100vh - 143px);
    .stylus-hover:hover
      color #409EFF !important
      cursor pointer
</style>