dvcp_v2_wxcp_app/src/apps/AppWorkonline/AppWorkonline.vue

<template>
  <div class="workonline">
    <div class="search">
      <u-search class="serach_content" placeholder="请输入标题" :show-action="false" v-model="keyword" @clear="clearSearch" @search="search"></u-search>
    </div>

    <u-tabs :list="list" :is-scroll="false" :current="currentType" @change="change"></u-tabs>

    <template v-if="datas.length > 0">
      <u-card v-for="(item, index) in datas" :key="index" :foot-border-top="false" :head-border-bottom="false" :show-head="false" @click="goDetail(item, 1)">
        <view class="body" slot="body">
          <!-- 审批名称 -->
          <view class="u-body-item">
            <div class="title">{{ item.processName }}</div>
          </view>

          <view class="u-body-item">
            <div class="plan">
              <span>审批进度：</span>

              <span class="business_status" v-if="item.approvalStatus == 0"> {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}</span>

              <!-- end -->
              <span class="business_status_blue" v-if="item.approvalStatus == 1"> {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}</span>

              <!-- false -->
              <span class="business_status_gray" v-if="item.approvalStatus == 2">
                {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}
              </span>
            </div>
          </view>

          <view class="u-body-item">
            <div class="modetpye">
              <span>申请类型：</span>
              <span>{{ item.classificationName }}</span>
            </div>
          </view>

          <view class="u-body-item">
            <div class="applytime">
              <span>申请日期：</span>
              <span class="timeContent">{{ item.createTime }}</span>
            </div>
          </view>

          <view class="u-body-item">
            <div class="overtime">
              <span>完成日期：</span>
              <span class="timeContent">{{ item.overTime }}</span>
            </div>
          </view>

          <span class="icon">
            <!-- ing -->
            <img src="./components/ing.png" alt="" v-if="item.approvalStatus == 0" />
            <!-- end -->
            <img src="./components/end.png" alt="" v-if="item.approvalStatus == 1" />
            <!-- false -->
            <img src="./components/reject.png" alt="" v-if="item.approvalStatus == 2" />
          </span>
        </view>
      </u-card>

      <u-loadmore status="nomore" color="#999" font-size="24" margin-top="32" margin-bottom="80" />
    </template>

    <AiEmpty description="没有数据" v-else> </AiEmpty>
  </div>
</template>

<script>
export default {
  name: 'WorkOnline',
  appName: '网上办事',
  // 组件
  components: {},
  props: {},
  data() {
    return {
      list: [
        { name: '待我审批', type: 0 },
        { name: '我已审批', type: 1 },
        { name: '抄送我的', type: 3 },
        { name: '超时督办', type: 4 },
      ],
      currentType: 0, // 0待我审批 1已审批 2抄送我的 3超时
      keyword: '',
      datas: {},
      listType: 0,
      current: 1,
    }
  },
  // 计算
  computed: {},
  // 监听
  watch: {},
  // 实例创建后
  created() {
    // 字典
    this.$dict.load('listApprovalStatusHb').then(() => {
      this.dictList = this.$dict.getDict('listApprovalStatusHb')
      this.getList()
    })
  },
  // 实例渲染后
  mounted() {},
  // 方法
  methods: {
    getList() {
      this.$http.post(`/app/approv-alapply-info/list?listType=${this.listType}&current=${this.current}&param=${this.keyword}`).then((res) => {
        if (res?.code == 0) {
          this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
        }
      })
    },

    // 跳转页面的id
    goDetail(item) {
      console.log(1)
      uni.navigateTo({ url: `./detail?id=${item.id}&listType=${this.listType}` })
    },

    change(index) {
      this.currentType = index
      this.listType = this.list[index].type
      this.getListInit()
    },

    getListInit() {
      this.current = 1
      this.getList()
    },

    search(e) {
      this.keyword = e
      this.getListInit()
    },

    clearSearch() {
      this.keyword = ''
      this.getListInit()
    },
  },
}
</script>

<style scoped lang="scss">
.workonline {
  .search {
    .serach_content {
      background-color: #fff;
      height: 104px;
      line-height: 104px;
      box-sizing: border-box;
      padding: 0 32px;
    }
  }

  .u-card {
    ::v-deep .u-card__body {
      .body {
        position: relative;
        .u-body-item {
          .title {
            font-size: 32px;
            font-weight: 500;
            margin-bottom: 16px;
          }
          .plan,
          .modetpye,
          .applytime,
          .overtime {
            margin-top: 16px;
            font-size: 30px;
            color: #999999;
            .timeContent {
              color: #343d65;
            }
          }
        }
        img {
          position: absolute;
          right: 0;
          top: 0;
          width: 113px;
          height: 113px;
        }
      }
    }
  }
}
</style>