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

<template>
  <div class="bgborder" style="background-color:#F2F3F6;min-height:calc(100vh - 80px);padding:10px">
    <div class="stylus-head">
      <div class="stylus-title">
        <span style="font-size: 22px;letter-spacing: 1px;font-weight: 600;color: #333B4A;padding-left: 15px">任务</span>
        <div>
          <el-button
            type="primary"
            size="mini"
            @click="open_created"
          >新建任务</el-button>
        </div>
      </div>
      <el-divider style="color: #EEF0F5;" />
      <div class="Layout" style="padding: 5px 0 0 15px">
        <div>
          <el-form :model="form_task" class="flex_start">
            <div class="Layout" style="padding-left:15px">
              <div class="queryName">任务名称</div>
              <el-input v-model="form_task.name" size="small" clearable style="width:77% !important;" placeholder="请输入标题或ID" @change="get_taskList()" />
            </div>
            <div class="Layout marginLeft">
              <div class="queryName">负责人</div>
              <el-select
                v-model="form_task.PersonInCharge"
                clearable
                filterable
                remote
                placeholder="请输入姓名或邮箱前缀"
                :remote-method="remoteMethod"
                :loading="loading"
                size="small"
                @change="get_taskList()"
              >
                <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 marginLeft">
              <div class="queryName">优先级</div>
              <el-select v-model="form_task.priority" size="small" clearable filterable placeholder="请选择" @change="get_taskList()">
                <el-option v-for="item in arr_priority" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </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">
                <div class="queryName">所属项目</div>
                <el-select v-model="form_task.projectId" size="small" clearable filterable placeholder="请选择">
                  <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </div>
              <div class="Layout marginLeft">
                <div class="queryName">所属需求</div>
                <el-select v-model="form_task.requireId" size="small" clearable filterable placeholder="请选择">
                  <el-option v-for="item in demandList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </div>
              <div class="Layout marginLeft">
                <div class="queryName">模块</div>
                <el-cascader v-model="form_task.moduleIds" size="small" clearable collapse-tags :props="props" :options="business_platform_Modular" placeholder="请选择" style="width:77% !important;" @click.native="bugDataGet" />
              </div>
            </el-form>
          </div>
          <div class="Layout" style="margin: 15px 0;">
            <el-form :model="form_task" class="flex_start">
              <div class="Layout">
                <div class="queryName">状态</div>
                <el-select v-model="form_task.status" size="small" clearable filterable placeholder="请选择">
                  <el-option v-for="item in daStatus" :key="item.code" :label="item.msg" :value="item.code" />
                </el-select>
              </div>
              <div class="Layout marginLeft">
                <div class="queryName">健康状态</div>
                <el-select v-model="form_task.stage" size="small" clearable filterable placeholder="请选择">
                  <el-option v-for="item in healthStage" :key="item.code" :label="item.msg" :value="item.code" />
                </el-select>
              </div>
              <div class="Layout marginLeft">
                <div class="queryName">创建人</div>
                <el-select
                  v-model="form_task.creater"
                  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>
            </el-form>
          </div>
          <div align="right">
            <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>
    <div class="stylus-content">
      <el-table
        v-loading="table_loading"
        :data="task_table"
        style="width: 100%;"
        highlight-current-row
        :header-cell-style="{ '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="优先级" min-width="100" prop="priority" sortable align="left">
          <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"
                :class="{
                  'tagNotification': scope.row.tagType === 0,
                  'tagNotification1': scope.row.tagType === 1
                }"
              >
                {{ scope.row.tagNotification }}
              </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="250" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.projectName }}</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="150" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.statusString }}</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="开发负责人" 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="创建日期" 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="15"
          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" />
  </div>
</template>

<script>
import {
  taskList,
  configShowTaskEnum,
  memberQueryMemberInfoByIDAPorName,
  configShowRequirementVersionEnum,
  projectListProject,
  showTaskListEnum
} from '@/api/taskIndex' // ajax
import { settingQueryBizModuleList } from '@/api/defectManage'
import openDialog from '@/views/projectManage/dialog_vue'
import '@/views/projectManage/publicCss/index.css'
export default {
  components: {
    openDialog
  },
  data() {
    return {
      header_show: true,
      props: { multiple: true },
      priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD'],
      arr_priority: [{ value: 0, name: 'P0' }, { value: 1, name: 'P1' }, { value: 2, name: 'P2' }, { value: 3, name: 'P3' }],
      dialog_open: false,
      curIndex: 1,
      pageSize: 15,
      goodName: '更多筛选',
      options: [],
      daStatus: [],
      healthStage: [],
      list: [],
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      form_task: {},
      noTest: [], // 是否免测
      BusinessLine: [], // 业务线
      appClient: [], // 涉及业务线
      arr_platform: [], // 平台数据
      business_platform_Modular: [], // 模块数据
      arr_taskName: [], // 任务名称数据
      projectList: [], // 归属项目数据
      demandList: [], // 需求list
      dialogFormVisible: false,
      currentPage: 0,
      DetailedScreening: false,
      total: 0,
      isToOne: true,
      loading: false,
      table_loading: false,
      test: {},
      task_table: [],
      form: {},
      arry: []
    }
  },
  created() {
    this.get_taskList()
    this.get_taskSelect()
    this.$store.state.data.status = true
  },
  destroyed() {
    this.$store.state.data.status = false
  },
  methods: {
    test2(item, e) {
      // 获取团队人员信息
      if (typeof this.test[item.idap] === 'undefined') {
        item.role = e
        this.test[item.idap] = item
      }
      return item.idap
    },
    get_taskList(e) {
      // 查询
      if (this.isToOne) {
        this.curIndex = 1
        this.currentPage = 1
      }
      this.table_loading = true
      this.form_task.bizId = Number(localStorage.getItem('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]
        }
      }
      taskList(this.form_task).then(res => {
        this.task_table = res.data
        this.total = res.total
        this.table_loading = false
      })
      configShowRequirementVersionEnum({ bizId: Number(localStorage.getItem('bizId')) }).then(res => {
        // 获取需求（查询）
        this.demandList = res.data
      })
      this.isToOne = true
    },
    remoteMethod(query) {
      // 人员查询
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          memberQueryMemberInfoByIDAPorName({ memberIDAP: query }).then(res => {
            const obj = {}
            this.options = res.data.reduce((cur, next) => {
              obj[next.idap] ? '' : obj[next.idap] = true && cur.push(next)
              return cur
            }, [])
          })
        }, 200)
      } else {
        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(e) {
      this.$router.push({ name: '任务详情', query: { id: e }})
    },
    query_Reset() {
      // 重置
      this.$set(this.form_task, 'bizId', '')
      this.$set(this.form_task, 'status', '')
      this.$set(this.form_task, 'stage', '')
      this.$set(this.form_task, 'id', '')
      this.$set(this.form_task, 'projectId', '')
      this.$set(this.form_task, 'requireId', '')
      this.$set(this.form_task, 'PersonInCharge', '')
      this.$set(this.form_task, 'Participant', '')
      this.$set(this.form_task, 'creater', '')
      this.$message({
        message: '已重置',
        type: 'success',
        duration: 1000,
        offset: 150
      })
    },
    handleSizeChange(size) {
      //  分页
      this.pageSize = size
      this.isToOne = false
      this.get_taskList(1)
    },
    handleCurrentChange(curIndex) {
      //  分页
      this.curIndex = curIndex
      this.currentPage = curIndex
      this.isToOne = false
      this.get_taskList()
    },
    get_taskSelect() {
      // 下拉菜单数据
      configShowTaskEnum().then(res => {
        this.healthStage = res.data.taskStage
        this.noTest = res.data.noTest // 是否免测
        this.taskSource = res.data.taskSource // 归属需求
        this.appClient = res.data.appClient // 涉及客户端
      })
      showTaskListEnum().then(res => {
        this.daStatus = res.data.taskStatus
      })
      projectListProject({ bizId: Number(localStorage.getItem('bizId')) }).then(res => {
        this.projectList = res.data
      })
    },
    bugDataGet() { // 所属模块
      settingQueryBizModuleList(Number(localStorage.getItem('bizId'))).then(res => {
        this.business_platform_Modular = res.data.map(item => ({
          ...item,
          value: item.id,
          label: item.moduleName,
          children: item.childModules.length === 0 ? null : item.childModules.map(item1 => ({
            ...item1,
            value: item1.id,
            label: item1.moduleName,
            children: item1.childModules.length === 0 ? null : item1.childModules.map(item2 => ({
              ...item2,
              value: item2.id,
              label: item2.moduleName
            }))
          }))
        }))
      })
    }
  }
}
</script>

<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 {
  color: #ffffff;
  width:fit-content;
  padding: 0 12px;
  border-radius: 4px;
  margin-left: 4px;
}
.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 - 209px);
    .stylus-hover:hover
      color #409EFF !important
      cursor pointer
</style>