cnbg_mp/src/pages-sub-service-mangement/quickAudit/index.vue

<template>
  <view class="task-audit">
    <view class="search">
      <view class="top-search">
        <view class="search-input">
          <uv-input
            v-model="searchParams.planName"
            :customStyle="customStyle"
            clearable
            shape="circle"
            placeholder="请输入"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #6eb657"
          ></uv-input>
        </view>
        <view class="search-button" @click="searchFn">搜索</view>
        <uv-icon name="plus-circle" color="#6eb657" size="24" />
      </view>
    </view>
    <view class="checkbox">
      <checkbox-group @change="checkboxAllChange">
        <label>
          <checkbox :checked="checkedAll" style="transform: scale(0.8)" color="#6eb657" />全选
        </label>
      </checkbox-group>
    </view>
    <view class="list" v-if="hasInfo">
      <view class="list-content" v-for="item in listArr" :key="item.id">
        <checkbox-group @change="checkboxChange(item)">
          <checkbox :checked="item.checked" style="transform: scale(0.8)" color="#6eb657" />
        </checkbox-group>
        <view class="item" @click="onDetail(item)">
          <view class="top">
            <view class="top-l">
              <image src="@/static/images/icon/review.png" class="image" />
              <text>{{ item.lookintoDate }}</text>
            </view>
            <view class="top-r">
              <text></text>
              <view class="status">{{ item?.checkState?.displayInfo }}</view>
            </view>
          </view>
          <view class="content">
            <view class="title">
              <view class="task-name">{{ item.taskTypeName || 'abcd' }}</view>
              <view class="score">+{{ item.score }}积分</view>
            </view>
            <view class="num"> 任务编号：{{ item.taskNumber }} </view>
          </view>
        </view>
      </view>
      <view class="btn">
        <view class="cancel" @click="reviewFn('4')">拒绝</view>
        <view class="confirm" @click="reviewFn('3')">通过</view>
      </view>
    </view>
    <noData v-else />
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app'
import {
  getListApi,
  getTaskListPageApi,
  batchApprovalTaskApi,
  reportBatchApprovalTaskApi
} from '@/service/modules/taskAudit'
import { useLoginStore } from '@/store/login'
import noData from '@/components/noData/index.vue'
import { useReview } from '@/store/review'

const loginStore = useLoginStore()
let userInfo: any = loginStore.currentUserInfo
const roles: number[] = userInfo.roles

const reviewStore = useReview()
const currentId = ref()
const taskStatus = ref()

const checkedAll = ref(false)

const checkboxAllChange = () => {
  checkedAll.value = !checkedAll.value

  listArr.value.forEach((item) => (item.checked = checkedAll.value))
}

const currentScoreId = ref()
const currentPage = ref()

onLoad((e) => {
  currentId.value = e?.id
  currentPage.value = e?.page
  let text = ''
  if (e?.page === '1') {
    taskStatus.value = e?.taskStatus
    searchParams.value.taskStatus = e?.taskStatus
    searchParams.value.scorePackageId = e?.id
    text = e?.taskStatus ? '任务审核' : '任务详情'
  } else if (e?.page === '2') {
    taskListPageParams.isApprovalPage = e?.type == 'approval' ? '1' : '0'
    taskListPageParams.id = e?.id
    text = e?.type == 'approval' ? '任务审核' : '任务详情'
  }
  uni.setNavigationBarTitle({
    title: text
  })
})

onShow(() => {
  searchParams.value.current = 1
  listArr.value = []
  getList()
})
const customStyle = {
  backgroundColor: '#f6f6f6'
}

class Params {
  taskStatus = ''
  scorePackageId = ''
  planName = ''
  total = -1
  current = 1
  size = 10
}

const searchParams = ref(new Params())

const taskListPageParams = reactive({
  isApprovalPage: '',
  id: '',
  current: 1,
  size: 10
})

const checkboxChange = (item: any) => {
  item.checked = !item.checked
}

const searchFn = () => {
  listArr.value = []
  searchParams.value.current = 1
  getList()
}

const hasInfo = ref(true)
const listArr = ref<any[]>([])

const getList = async () => {
  uni.showLoading()
  let res
  if (currentPage.value === '1') {
    res = await getListApi(searchParams.value)
  } else if (currentPage.value === '2') {
    res = await getTaskListPageApi(taskListPageParams)
  }
  res.data.records.forEach((item: any) => {
    item.checked = false
  })
  listArr.value = listArr.value.concat(res.data.records)
  searchParams.value.total = res.data.total
  hasInfo.value = !!listArr.value.length
  uni.hideLoading()
}

const onDetail = (row: any) => {
  const info = JSON.stringify(row)
  reviewStore.setCurrentInfo(info)
  if (currentPage.value === '1') {
    const show = !!searchParams.value.taskStatus
    uni.navigateTo({
      url: `/pages-sub-service-mangement/taskAuditDetail/index?id=${row.id}&type=1&show=${show}`
    })
  } else if (currentPage.value === '2') {
    const show = taskListPageParams.isApprovalPage === '1'
    uni.navigateTo({
      url: `/pages-sub-service-mangement/taskAuditDetail/index?id=${row.id}&type=2&reportId=${currentId.value}&show=${show}`
    })
  }
}

onReachBottom(() => {
  if (listArr.value.length === searchParams.value.total) return
  if (currentPage.value === '1') {
    searchParams.value.current++
  } else if (currentPage.value === '2') {
    taskListPageParams.current++
  }

  getList()
})

const reviewFn = async (status: string) => {
  const arr = listArr.value.filter((item) => item.checked)
  if (!arr.length) {
    return uni.showToast({
      title: '请先选择数据',
      icon: 'none'
    })
  }
  const taskIdToNodeIdMap: any = {}
  const idArr = arr.map((item) => item.id)
  const ids = idArr.join(',')

  arr.forEach((item) => {
    if (currentPage.value === '1') {
      taskIdToNodeIdMap[item.id] = item.checkState.curNodeId
    } else if (currentPage.value === '2') {
      taskIdToNodeIdMap[item.id] = item.checkState.nextNodeId
      if (roles.includes(42)) {
        taskIdToNodeIdMap[item.id] = 8
      }
      // 40 商务组
      if (roles.includes(40)) {
        taskIdToNodeIdMap[item.id] = 9
      }
    }
  })
  let res
  if (currentPage.value === '1') {
    let obj = {
      id: ids,
      taskIdToNodeIdMap: taskIdToNodeIdMap,
      taskStatus: status
    }
    res = await batchApprovalTaskApi(obj)
  } else if (currentPage.value === '2') {
    let obj = {
      reportId: currentId.value,
      id: ids,
      taskIds: ids,
      taskIdToNodeIdMap: taskIdToNodeIdMap,
      approvalOpinion: status == '3' ? '1' : '2'
    }
    res = await reportBatchApprovalTaskApi(obj)
  }
  if (res.data) {
    uni.showToast({
      title: '审核成功',
      icon: 'none'
    })
  }
  setTimeout(() => {
    listArr.value = []
    searchParams.value.current = 1
    getList()
  }, 1000)
}
</script>

<style lang="scss" scoped>
.task-audit {
  padding: 24rpx 30rpx;

  .search {
    position: fixed;
    width: 750rpx;
    padding: 0 30rpx;
    top: 0;
    height: 60rpx;
    background-color: #fff;
    z-index: 99;
    .top-search {
      display: flex;
      align-items: center;

      .search-input {
        width: 540rpx;
        height: 70rpx;
      }
      .search-button {
        color: #6eb657;
        font-size: 30rpx;
        margin: 0 10px;
        font-weight: 400;
      }
    }
  }
  .checkbox {
    margin-top: 80rpx;
  }

  .list {
    margin-bottom: 120rpx;
    padding-bottom: 60rpx;
    .list-content {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
    }
    .item {
      flex: 1;
      box-shadow: 0px 4rpx 4rpx 0px rgba(0, 0, 0, 0.05);
      margin-bottom: 20rpx;
      border-radius: 16rpx;
      .top {
        padding: 0 30rpx;
        box-sizing: border-box;
        height: 100rpx;
        background-color: #6eb657;
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .top-l {
          display: flex;
          align-items: center;

          .image {
            width: 28rpx;
            height: 28rpx;
          }
          text {
            font-size: 26rpx;
            color: #fff;
            line-height: 36rpx;
            margin-left: 20rpx;
          }
        }
        .top-r {
          display: flex;
          align-items: center;
          text {
            display: block;
            width: 10rpx;
            height: 10rpx;
            background-color: #fff;
            border-radius: 50%;
            margin-right: 10rpx;
          }
          .status {
            color: #fff;
            font-size: 28rpx;
            line-height: 40rpx;
          }
        }
      }
      .content {
        background-color: #fff;
        padding: 30rpx;
        box-sizing: border-box;
        .title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20rpx;
          align-items: center;
          .task-name {
            font-size: 32rpx;
            line-height: 45rpx;
            color: #313131;
          }
          .score {
            font-size: 28rpx;
            color: #72b25b;
          }
        }
        .num {
          font-weight: 400;
          font-size: 22rpx;
          line-height: 32rpx;
          color: #999999;
        }
      }
    }
  }
}

.btn {
  display: flex;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  justify-content: space-between;
  position: fixed;
  background-color: #fff;
  bottom: 0;
  width: 700rpx;
  height: 120rpx;

  view {
    font-weight: 400;
    box-sizing: border-box;
    font-size: 32rpx;
    line-height: 45rpx;
    border-radius: 8rpx;
    height: 72rpx;
    width: 290rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cancel {
    border: 2rpx solid #c7c7c7;
    color: #111;
  }
  .confirm {
    background-color: #6eb657;
    color: #ffffff;
  }
}
</style>