opms_wechat/pages/schedule/supervise/details.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-12 11:57:48
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-03-07 17:17:24
 * @Description: file content
 * @FilePath: \oms\pages\schedule\supervise\details.vue
-->
<template>
  <view class="home">
    <view class="nav">
      <view :style="{ paddingTop }">
        <view class="title" :style="[{ height }, { lineHeight: height }]">
          <view class="back" @click="goBack()">
            <u-icon name="arrow-left" color="#ffffff" size="22"></u-icon>
          </view>
          <text>督办详情</text>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="main-top">
        <view class="customer-box">
          <view class="header flex1">
            <view class="name flex_l">
              <image class="img" src="@/static/images/menu2.png" mode="scaleToFill" />
              <text>{{ details.taskTitle }}</text>
            </view>
            <view class="date">{{ parseTime(details.taskStartDate, '{y}-{m}-{d}') || '-' }}</view>
          </view>
          <view class="info">
            <view class="info-item">
              <u-row>
                <u-col span="6">
                  <view class="flex_l">
                    <view class="info-label">督办类型：</view>
                    <text class="info-txt">{{ selectDictLabel(taskTypeOption, details.taskType) }}</text>
                  </view>
                </u-col>
                <u-col span="6">
                  <view class="flex_l">
                    <view class="info-label">督办状态：</view>
                    <text class="info-txt">{{ selectDictLabel(taskStatusOption, details.taskStatus) }}</text>
                  </view>
                </u-col>
              </u-row>
            </view>
            <view class="info-item">
              <u-row justify="space-between">
                <u-col span="6">
                  <view class="flex_l">
                    <view class="info-label">是否超期：</view>
                    <text class="info-txt">
                      {{ isNotOverdue(parseTime(details.taskEndDate, '{y}-{m}-{d} 23:59:59')) ? '否' : '是' }}
                    </text>
                  </view>
                </u-col>
                <u-col span="6">
                  <view class="flex_l">
                    <view class="info-label">事项来源：</view>
                    <text class="info-txt">{{ selectDictLabel(sourceOption, details.source) }}</text>
                  </view>
                </u-col>
              </u-row>
            </view>
          </view>
        </view>
        <!-- <view class="tabs">
          <u-tabs
            @change="changeTabs"
            :current="curTabIndex"
            :scrollable="false"
            :list="list"
            :activeStyle="{
              color: '#3E7EF8',
              fontWeight: 'bold',
            }"
            :inactiveStyle="{
              color: '#969696',
            }"></u-tabs>
        </view> -->
      </view>
      <view class="data-list">
        <view class="detail-wrap">
          <view class="info-item">
            <u-row justify="space-between" gutter="10">
              <u-col span="12">
                <view class="flex_l">
                  <view class="label">督办内容：</view>
                  <view class="desc">{{ details.taskDesc }}</view>
                </view>
              </u-col>
            </u-row>
          </view>
          <view class="info-item">
            <u-row justify="space-between" gutter="10">
              <u-col span="12">
                <view class="flex_l">
                  <view class="label">要求完成时间：</view>
                  <view class="desc">{{ parseTime(details.taskEndDate, '{y}-{m}-{d}') }}</view>
                </view>
              </u-col>
            </u-row>
          </view>
          <view class="info-item">
            <u-row justify="space-between" gutter="10">
              <u-col span="12">
                <view class="flex_l">
                  <view class="label">负责人：</view>
                  <view class="desc">{{ selectDictLabel(userList, details.mainUserId) }}</view>
                </view>
              </u-col>
            </u-row>
          </view>
          <view class="info-item">
            <u-row justify="space-between" gutter="10">
              <u-col span="12">
                <view class="flex_l">
                  <view class="label">协办人：</view>
                  <view class="desc">{{ generateOwnerUser(details.ownerUserId) }}</view>
                </view>
              </u-col>
            </u-row>
          </view>
          <view class="info-item">
            <u-row justify="space-between" gutter="10">
              <u-col span="12">
                <view class="flex_l">
                  <view class="label">督办人：</view>
                  <view class="desc">{{ selectDictLabel(userList, details.watchUserId) }}</view>
                </view>
              </u-col>
            </u-row>
          </view>
          <view class="info-item">
            <u-row justify="space-between" gutter="10">
              <u-col span="12">
                <view class="flex_l">
                  <view class="label">监办人：</view>
                  <view class="desc">{{ selectDictLabel(userList, details.supervisorUserId) }}</view>
                </view>
              </u-col>
            </u-row>
          </view>
          <o-progress ref="progress" :details="details" :type="type"></o-progress>
        </view>
      </view>
    </view>
    <!-- 新增按钮 -->
    <view class="fixed-btn-group">
      <view class="btn center" v-show="details.taskStatus === '10' && type == 1" @click="changeStatus(10)">接</view>
      <view
        class="btn center"
        v-show="details.taskStatus === '20' && details.step === 20 && type == 1"
        @click="changeStatus(20)">
        提
      </view>
    </view>
    <!-- 确认接收 -->
    <u-modal
      :show="modalVisible"
      @confirm="confirmChangeStatus"
      ref="uModal"
      :asyncClose="true"
      :showCancelButton="true"
      :content="content"></u-modal>
    <!-- 提示 -->
    <u-toast ref="uToast"></u-toast>
  </view>
</template>
<script>
  import taskApi from '@/api/task'
  import userApi from '@/api/system/user'
  import to from 'await-to-js'
  import OProgress from './components/progress'
  export default {
    name: 'omsIndex',
    components: { OProgress },
    data() {
      return {
        height: '',
        paddingTop: '',
        curTabIndex: 0,
        list: [
          {
            name: '详细信息',
            index: 0,
          },
          {
            name: '进展情况',
            index: 1,
          },
        ],
        taskId: 0, //项目id
        details: {}, //督办列表
        taskTypeOption: [], //督办类型
        sourceOption: [], //来源列表
        userList: [], //用户列表
        taskStatusOption: [
          {
            key: '10',
            value: '发起',
          },
          {
            key: '20',
            value: '进行中',
          },
          {
            key: '30',
            value: '流程完成',
          },
          {
            key: '40',
            value: '审批拒绝',
          },
          {
            key: '50',
            value: '撤销',
          },
        ], //督办状态
        type: 0, //是否为我的待办
        modalVisible: false,
        progressVisible: false,
        content: '',
        step: '',
      }
    },
    onLoad(option) {
      this.taskId = option.id
      this.type = option.type
      this.getOptions()
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
    },
    methods: {
      // 改变tab
      changeTabs(data) {
        this.curTabIndex = data.index
      },
      getOptions() {
        Promise.all([this.getDicts('task_type'), this.getDicts('plat_task_source'), userApi.getList()])
          .then(([types, source, user]) => {
            this.taskTypeOption = types.data.values || []
            this.sourceOption = source.data.values || []
            this.userList = user.data.list.map((item) => ({ key: '' + item.id, value: item.nickName }))
            this.getDetails()
          })
          .catch((err) => console.log(err))
      },
      // 判断是否没有超期
      isNotOverdue(date) {
        return new Date() <= new Date(date)
      },
      // 协办人
      generateOwnerUser(ids = null) {
        let nameArr = []
        if (ids) {
          let idList = ids.split(',')
          idList.forEach((item) => {
            let findUser = this.userList.find((user) => user.key == item)
            if (findUser && findUser.value) nameArr.push(findUser.value)
          })
        }
        return nameArr.join(',')
      },
      async getDetails() {
        let params = {
          operateType: this.type,
          taskId: this.taskId,
        }
        const [err, res] = await to(taskApi.getList(params))
        if (err) {
          return
        }
        if (res && res.code == 200) {
          this.details = res.data.list[0] || {}
        }
      },
      // 接收待办
      changeStatus(step) {
        this.modalVisible = true
        this.step = step
        if (step == 10) this.content = '确认接收督办？'
        else if (step == 20) this.content = '确认提交督办？'
      },
      async confirmChangeStatus() {
        let params = {
          taskId: parseInt(this.taskId),
          step: this.step,
          handleStatus: '' + this.step,
          handleDesc: '',
          progressList: this.$refs.progress.progressList,
        }
        const [err, res] = await to(taskApi.handleTask(params))
        if (err) return
        if (res && res.code == 200) {
          this.modalVisible = false
          this.$refs.uToast.show({
            type: 'success',
            message: '提交成功',
            complete: () => {
              this.goBack()
            },
          })
        }
      },
      goBack() {
        uni.reLaunch({
          url: '/pages/schedule/index?type=1',
        })
      },
    },
  }
</script>
<style>
  page {
    background: #f2f3f5;
  }
</style>
<style lang="scss" scoped>
  .home {
    padding-top: 200rpx;

    .nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 356rpx;
      background: #3e7ef8;
      border-radius: 0 0 31rpx 31rpx;
      .title {
        position: relative;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;
        .back {
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          left: 70rpx;
          display: flex;
        }
      }
    }

    .main {
      position: absolute;
      width: 100%;
      height: calc(100vh - 200rpx);
      overflow: hidden;
      padding-bottom: 64rpx;
      .main-top {
        padding: 0 32rpx;
      }
      .customer-box {
        width: 100%;
        background: #ffffff;
        box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
        border-radius: 32rpx;
        padding: 22rpx 38rpx 68rpx 40rpx;
        .header {
          .name {
            .img {
              width: 46rpx;
              height: 46rpx;
              border-radius: 50%;
              margin-right: 8rpx;
            }
            text {
              font-size: 28rpx;
              font-weight: bold;
              color: #323232;
            }
          }
          .date {
            font-size: 24rpx;
            color: #3e7ef8;
          }
        }
        .info {
          .info-item {
            margin-top: 18rpx;
            .info-label {
              width: 120rpx;
              text-align: left;
              font-size: 24rpx;
              color: #646464;
            }
            .info-txt {
              flex: 1;
              font-size: 24rpx;
              color: #323232;
            }
          }
        }
      }
      .data-list {
        margin-top: 16rpx;
        width: 100%;
        height: calc(100vh - 446rpx);
        background: #ffffff;
        padding: 32rpx;
        overflow: auto;
        // padding-bottom: 145rpx;
        .info-item {
          padding: 20rpx;
          .label {
            color: #646464;
            font-size: 26rpx;
          }
          .desc {
            font-size: 26rpx;
            text-indent: 20rpx;
          }
        }
      }
    }
    .fixed-btn-group {
      position: fixed;
      display: flex;
      justify-content: space-around;
      align-items: center;
      bottom: 50rpx;
      right: 50rpx;
    }
    .btn {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      background: #3e7ef8;
      color: #ffffff;
    }
    .mb12 {
      margin-bottom: 12rpx;
    }
  }
</style>