xiaoshi_system/src/views/task/components/table.vue

<template>
  <div class="height_100">
    <el-container>
      <el-header style="display: flex;justify-content: space-between;align-items: center;">
        <div>
          <mySearch :SearchFields="searchFiled" @search="search" :searchValue="searchOption"></mySearch>
        </div>
        <div style="display:flex;margin-right:10px">
          <el-button v-if="type == 1" type="primary" size="small" @click="createTask">创建任务</el-button>
        </div>
      </el-header>
      <el-main class="height_100">
        <el-table :data="tableData" style="width: 100%;" border header-row-class-name="custom-table-header"
          @sort-change="sortChange">
          <el-table-column label="#" align="center" width="80px">
            <template slot-scope="scope">
              <div>
                {{ (queryParams.current - 1) * queryParams.size + scope.$index + 1 }}
              </div>
            </template>
          </el-table-column>

          <el-table-column v-for="item in columnList" :key="item.value" :prop="item.value"
            :render-header="$commonJS.renderHeaderMethods" :label="item.name" sortable="custom" align="center">
            <template slot-scope="scope">
              <div v-if="['name'].includes(item.value)">
                <el-link @click="handleItem(scope.row, item.value)">
                  <span v-html="$commonJS.getColumnData(scope.row, item)"></span>
                </el-link>
              </div>
              <div v-else-if="['type'].includes(item.value)"
                v-html="$commonJS.getColumnData(scope.row, item, null, { data: taskType })"></div>
              <div v-else-if="['status'].includes(item.value)"
                v-html="$commonJS.getColumnData(scope.row, item, null, { data: taskStatus })"></div>
              <div v-else v-html="$commonJS.getColumnData(scope.row, item)"></div>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="180px">
            <template slot-scope="scope">
              <div>
                <el-dropdown split-button type="primary" size="small" @command="handleCommand($event, scope.row)"
                  @click="handleTask(scope.row)">
                  <span v-if="scope.row.status == '3' || scope.row.handlerName != userinfo.name">查 看</span>
                  <span v-else>处 理</span>
                  <el-dropdown-menu slot="dropdown" style="text-align: center;">
                    <el-dropdown-item command="1" v-if="[6].includes(scope.row.type)">查看审核记录</el-dropdown-item>
                    <el-dropdown-item command="1" v-if="[3].includes(scope.row.status)">编 辑</el-dropdown-item>
                    <el-dropdown-item command="3" v-if="[6].includes(scope.row.type)">完 成</el-dropdown-item>
                    <el-dropdown-item command="2" divided style="color: red;">删 除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer class="pagination">
        <el-pagination background layout="total, prev, pager, next, jumper" :current-page.sync="queryParams.current"
          :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="queryParams.total">
        </el-pagination>
      </el-footer>
    </el-container>


    <auditRecords ref="auditRecords"></auditRecords>
    <createTask ref="createTaskDialog" :id="id" @isCreate="isCreate"></createTask>
    <handleTask1 ref="handleTask1Dialog"></handleTask1>
    <handleTask2 ref="handleTask2Dialog" @isSuccess="isSuccess"></handleTask2>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { column } from '@/views/patentMining/components/mixins/index2'
import { taskPatentMining } from './mixins/task'
import auditRecords from '@/views/patentMining/components/dialog/auditRecords.vue'
import createTask from '@/views/patentMining/components/dialog/createTask.vue'
import handleTask1 from '@/views/patentMining/components/dialog/handleTask1.vue'
import handleTask2 from '@/views/patentMining/components/dialog/handleTask2.vue'
export default {
  mixins: [column, taskPatentMining],
  props: ['type', 'id', 'obj'],
  components: {
    auditRecords,
    createTask,
    handleTask1,
    handleTask2,
  },
  data() {
    return {
      // table数据
      tableData: [
        {
          name: '加热器专利挖掘1',
          taskType: '1',
          createPerson: '朱豪',
          handlerName: '张三',
          createTime: '2023-9-28 13:52',
          endTime: '2023-9-28 18:02',
          status: '未完成'
        },
        {
          name: '加热器专利挖掘2',
          taskType: '1',
          createPerson: '朱豪',
          handlerName: '朱豪',
          createTime: '2023-9-28 13:52',
          endTime: '2023-9-28 18:02',
          status: '未完成'
        },
        {
          name: '加热器专利挖掘3',
          taskType: '2',
          createPerson: '张三',
          handlerName: '朱豪',
          createTime: '2023-9-28 13:52',
          endTime: '2023-9-28 18:02',
          status: '未完成'
        },
        {
          name: '加热器专利挖掘4',
          taskType: '3',
          createPerson: '朱豪',
          handlerName: '朱豪',
          createTime: '2023-9-28 13:52',
          endTime: '2023-9-28 18:02',
          status: '未完成',
          taskPath: '创新点梳理',
          endTime: '2023-10-10',
        },
        {
          name: '加热器专利挖掘5',
          taskType: '1',
          createPerson: '张三',
          handlerName: '朱豪',
          createTime: '2023-9-28 13:52',
          endTime: '2023-9-28 18:02',
          status: '已完成'
        },
        {
          name: '加热器专利挖掘6',
          taskType: '1',
          createPerson: '朱豪',
          handlerName: '张三',
          createTime: '2023-9-28 13:52',
          endTime: '2023-9-28 18:02',
          status: '已完成'
        },
      ],
      // 分页及总数信息
      queryParams: {
        current: 1,
        size: 10,
        total: 0,
      },
      // 检索字段
      searchFiled: [],
      // 检索字符串
      searchOption: {},
      //排序字段
      sort: [{ "orderBy": "createTime", "orderType": 1 }],
      // 检索字段标识
      searchType: {
        1: 'projectTask',//专利挖掘任务清单检索字段
      },
      // 任务类型
      taskType: {
        0: '标引任务',
        1: '项目开卷审核任务',
        2: '检索条件任务',
        3: '对比任务',
        4: '协同任务',
        5: '任务审核任务',
        6: '文件分配任务',
      },
      // 任务状态
      taskStatus: {
        1: '审核中',
        2: '处理中',
        3: '已完成',
        4: '缺少资料',
        5: '取消',
      },
    }
  },
  computed: {
    ...mapGetters(['webSocket', 'userinfo']),
  },
  async mounted() {
    // 获取table栏位
    this.columnList = await this.$commonJS.getCustomField('projectTask')
    // 获取栏位
    this.getColumn()
    this.getList()
  },
  methods: {
    // 请求数据
    getList() {
      let searchOption = {
        ...this.obj.search,//固有检索字段
        ...this.searchOption
      }
      let params = {
        ...this.queryParams,//分页信息
        searchQuery: this.$commonJS.objectToString(searchOption),//检索条件
        orderDTOList: this.sort,//排序信息
      }

      this.$api.queryProjectTask(params).then(response => {
        if (response.code == 200) {
          this.tableData = response.data.data
          this.queryParams.current = response.data.current
          this.queryParams.size = response.data.size
          this.queryParams.total = response.data.total
        }
      }).catch(error => {
        // this.tableData = []
        this.queryParams.total = 0
      })
    },
    // 分页
    handleCurrentChange(val) {
      this.queryParams.current = val
      this.getList()
    },
    // 操作栏下拉菜单按钮
    handleCommand(ev, row) {
      switch (ev) {
        case '1'://查看审核记录
          this.$refs.auditRecords.open(row.id)
          break;
        case '2'://删除任务
          this.deleteTask(row)
          break;

        default:
          break;
      }
    },
    // 删除任务
    deleteTask(row) {
      this.deleteTasks([row.id])
    },
    deleteTasks(ids) {
      this.$api.dele(ids).then(response => {
        if (response.code == 200) {
          this.$message.success('删除成功')
          this.queryParams.current = 1
          this.getList()
        }
      })
    },
    //处理任务 
    handleTask(row) {
      if (row.status == 3 || row.handlerName != this.userinfo.name) {// 负责人不是自己
        this.handleTypeTask2(row)
      } else {
        // if (row.status != 3) {/
          this.handleTypeTask(row)
        // }
      }



      // if (row.handlerName != this.userinfo.name) {// 负责人不是自己
      //   if (row.taskType == '1') {// 项目审核任务
      //     this.$refs.handleTask1Dialog.open(row, false)
      //   } else if (row.taskType == '2') {//文件分配任务
      //     this.$refs.handleTask2Dialog.open(row, false)
      //   }
      // } else {//未完成状态
      //   if (row.taskType == '1') {// 项目审核任务
      //     this.$refs.handleTask1Dialog.open(row, true)
      //   } else if (row.taskType == '2') {//文件分配任务
      //     this.$refs.handleTask2Dialog.open(row, true)
      //   } else {//文件审核任务
      //     let router = this.$router.resolve({
      //       path: '/handleExamine',
      //       query: {
      //         row: JSON.stringify(row)
      //       }
      //     })
      //     window.open(router.href, '_blank')
      //   }
      // }
    },
    // 处理人和负责人相同是处理流程
    handleTypeTask(row) {
      switch (row.type) {
        case 1://项目开卷审核任务
          this.getPatentMining(2)
          break;
        case 5://任务审核任务
          row.disabled=false
          let router = this.$router.resolve({
            path: '/handleExamine',
            query: {
              row: JSON.stringify(row)
            }
          })
          window.open(router.href, '_blank')
          break;
        case 6://文件分配任务
          row.projectId=this.id//项目id
          this.$refs.handleTask2Dialog.open(row, true)
          break;

        default:
          break;
      }
    },
    // 处理人和负责人不相同时处理流程
    handleTypeTask2(row) {
      switch (row.type) {
        case 1://项目开卷审核任务
          this.getPatentMining(1)
          break;
        case 5://任务审核任务
          row.disabled=true
          let router = this.$router.resolve({
            path: '/handleExamine',
            query: {
              row: JSON.stringify(row)
            }
          })
          window.open(router.href, '_blank')
          break;
        case 6://文件分配任务
          this.$refs.handleTask2Dialog.open(row, false)
          break;

        default:
          break;
      }
    },
    // 获取挖掘项目
    getPatentMining(val) {
      let params = {
        current: 1,
        size:10,
        searchQuery: `id=${this.id}`,//检索条件
      }
      this.$api.queryPatentDigProject(params).then(res => {
        if (res.code == 200) {
          this.$refs.handleTask1Dialog.open(res.data.data[0], val)
        }
      })
    },
    // 左侧搜索
    search(val) {
      let params = {}
      val.forEach(item => {
        if (item.type == 3) {
          params[item.value] = item.searchValue.map(itemValue => {
            return itemValue.value
          })
        } else {
          params[item.value] = item.searchValue.label
        }
      })
      // 返回字符串
      this.searchOption = params
      // 调用查询接口
      this.queryParams.current = 1
      this.getList()
    },
    //排序
    sortChange({ column, prop, order }) {
      //如需要多个字段排序，则不需要清空
      var params = {
        sort: this.sort,
        column,
        prop,
        order,
      }
      this.sort = this.$commonJS.getSortData(params)
      this.queryParams.current = 1
      this.getList()
    },
    //获取table栏位及分组字段、检索字段
    async getColumn() {
      let params = [this.searchType[this.type]]
      await this.$api.getParamsCommon(params).then(res => {
        if (res.code == 200) {
          let conditionDTOList = JSON.parse(JSON.stringify(res.data[0].conditionDTOList))
          // 搜索字段
          this.searchFiled = this.$commonJS.getField(conditionDTOList, (u) => u.ifSearch == true, {
            label: 'name',
            value: 'value',
            type: 'type',
          })

        }
      })
      // this.showView = false
      // this.$nextTick(() => {
      //   this.showView = true
      // })
    },

  },
}
</script>

<style lang="scss" scoped></style>