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

<template>
  <div style="width: 100%;">
    <div class="set-background">
      <div class="block">
        <el-tabs v-model="activeName">
          <el-tab-pane label="列表" name="first">
            <el-form :model="form">
              <div class="set-between">
                <!-- <el-form-item label="创建时间" label-width="70px"><el-date-picker v-model="form.createTime" align="left" size="medium" type="datetime" style="width:76%;" placeholder="选择日期" /></el-form-item> -->
                <el-form-item label="任务名称" label-width="70px"><el-input v-model="form.name" placeholder="填写任务名称" autocomplete="off" clearable size="medium" style="width:76%;" /></el-form-item>
                <el-form-item label="状态" label-width="40px">
                  <el-select v-model="form.status" size="medium" style="width:60%;" clearable placeholder="状态">
                    <el-option v-for="item in processStatusEnumList" :key="item.code" :label="item.name" :value="item.code" />
                  </el-select>
                </el-form-item>
              </div>
              <div class="set-between">
                <el-button type="primary" plain size="medium" @click="dataQuery(form)">查询</el-button>
              </div>
            </el-form>
            <div class="set-locate">
              <el-table
                :data="tableData"
                border
                style="width: 100%"
                size="mini"
              >
                <el-table-column
                  prop="id"
                  label="ID"
                  align="center"
                  width="80"
                />
                <el-table-column
                  label="任务名称"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-link style="font-weight: 400;" type="primary" :underline="false" @click="taskShow(scope.row.id)">{{ scope.row.name }}</el-link>
                  </template>
                </el-table-column>
                <el-table-column
                  label="状态"
                  align="center"
                  width="130"
                >
                  <template slot-scope="scope">
                    <el-tag type="success"><span>{{ scope.row.statusString }}</span></el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="创建时间"
                  align="center"
                />
                <el-table-column
                  label="操作"
                  align="center"
                  width="300"
                >
                  <template v-slot="scope">
                    <div>
                      <el-button size="mini" type="primary" plain @click="projectShowData(scope.row.id)">编辑</el-button>
                      <el-button size="mini" type="danger" plain @click="dialogBug(scope.row.id)">删除</el-button>
                      <el-dialog
                        :visible.sync="dialogVisible"
                        width="30%"
                      >
                        <span>确定要删除这条项目信息吗</span>
                        <span slot="footer" class="dialog-footer">
                          <el-button type="primary" size="mini" @click="delHmVirtual()">确 定</el-button>
                          <el-button type="danger" size="mini" @click="dialogVisible = false">取 消</el-button>
                        </span>
                      </el-dialog>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination background style="margin-top:30px;" align="center" :current-page="curIndex" :page-size="pageSize" layout="prev, pager, next" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="看板" name="second">
            敬请期待
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { taskListGet } from '@/api/defectManage'
import { bugGetEnum } from '@/api/defectManage' // 下拉菜单data
import { deleteTaskData } from '@/api/projectPage.js'

export default {
  data() {
    return {
      tableData: [],
      form: {},
      dialogVisible: false,
      bizJson: localStorage.getItem('key'),
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      queryCode: {},
      curIndex: 1,
      pageSize: 20,
      total: 0,
      activeName: 'first',
      pauseId: '',
      processStatusEnumList: []
    }
  },
  created() {
    this.bugListSelectBeforeGet()
  },
  methods: {
    async bugListSelectBeforeGet() {
      await bugGetEnum().then(res => {
        this.processStatusEnumList = res.data.processStatusEnumList
      })
      // 任务list
      taskListGet({ bizId: this.bizJson }).then(response => {
        this.tableData = response.data
        if (response.data) {
          this.total = response.data.length
        }
        // const processStatusEnumMap = this.processStatusEnumList.reduce((a, c) => {
        //   return {
        //     ...a,
        //     [c.code]: c.name
        //   }
        // }, {})
        // console.log(this.tableData)
      })
    },
    dataQuery(queryCode) {
      queryCode.bizId = localStorage.getItem('key')
      queryCode.pageSize = this.pageSize
      queryCode.curIndex = this.curIndex
      taskListGet(queryCode).then(res => {
        res.code === 200 ? this.tableData = res.data : this.errorFun(res.msg)
      })
    },
    // id Bug
    dialogBug(e) {
      this.dialogVisible = true
      this.pauseId = e
    },
    // 删除任务
    delHmVirtual() {
      this.userData = { id: '', ename: this.userInformation, name: this.userNames }
      deleteTaskData(this.pauseId, this.userData).then(response => {
        if (response.code === 200) {
          this.bugListSelectBeforeGet()
          this.successFun('delete')
        } else {
          this.errorFun(response.msg)
        }
      })
      this.dialogVisible = false
    },
    handleSizeChange(size) {
      this.pageSize = size
    },
    handleCurrentChange(curIndex) {
      this.curIndex = curIndex
    },
    taskShow(e) {
      this.$router.push({ name: '任务查看', query: { id: e }})
    },
    projectShowData(e) {
      this.$router.push({ name: '任务更新', query: { id: e }})
    },
    successFun(successText) {
      this.$notify({ title: 'Success', message: `${successText} Successfully`, type: 'success', duration: 2000 })
    },
    errorFun(errorText) {
      this.$notify({ title: 'Failed', message: errorText, type: 'error', duration: 2000 })
    }
  }
}
</script>

<style lang="stylus" scoped>

  .set-background
    background-color #F2F3F6
    display flex
    justify-content center
    .block
      background-color rgba(255,255,255,1)
      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
      border-radius 7px
      width 96%
      margin 25px 0
      padding 10px 20px
      min-height calc(100vh - 100px)
    .block >>> .el-tabs__nav-wrap::after
      background-color white
    .block >>> .el-tabs__item
      padding 0 10px 0 0
    .block >>> .el-form
      display flex
      justify-content space-between
      margin-top 10px
    .block >>> .el-form-item__content
      margin-left 0 !important
    .block >>> th
      background-color #F0F2F4 !important
    .set-between
      display flex
    .set-between >>> .el-button
      height 36px
    .set-between >>> .el-form-item
      display flex
      margin-right -35px
    .set-locate
      margin-top 15px
</style>