dvcp_v2_webapp/packages/processManagement/approvalManage/components/forMyApproval.vue

<template>
  <div class="for-my-approval">
    <ai-list isTabs>
      <template #content>
        <ai-search-bar>
          <template #right>
            <el-input
              v-model="search.param"
              size="small"
              placeholder="标题/发起人"
              @keyup.enter.native="search.current = 1, getList()"
              @clear="reset"
              clearable
              suffix-icon="iconfont iconSearch"/>
          </template>
        </ai-search-bar>
        <ul class="list-wrap">
          <li v-for="(item,index) in tableData" :key="index" @click="goTo('detail',item)">
            <div class="list-title">{{item.processDefName}}</div>
            <div class="info">
              <div class="item">
                <label>发起人:</label>
                <span>{{item.createUserName}}</span>
              </div>
              <div class="item">
                <label>所属部门:</label>
                <span>{{dict.getLabel('hbDepartment',item.department)}}</span>
              </div>
              <div class="item">
                <label>所属分类:</label>
                <span>{{item.classificationName}}</span>
              </div>
              <div class="item">
                <label>发起时间:</label>
                <span>{{item.createTime|format}}</span>
              </div>
            </div>
            <svgIcon :class-name="icon(item.approvalStatus)" class="svg"></svgIcon>
          </li>
        </ul>
        <div class="no-data" v-if="tableData.length==0"></div>
        <el-pagination class="pagination" background :current-page="search.current" @current-change="handleCurrent"
                       layout="total,prev, pager, next,sizes, jumper"
                       :total="total"
                       @size-change="handleSizeChange"
                       :page-size="search.size"
                       :page-sizes="[10, 20, 50, 100,200]">
        </el-pagination>
      </template>
    </ai-list>
  </div>
</template>

<script>
  import svgIcon from "./svgIcon";
  import day from 'dayjs'

  export default {
    name: "forMyApproval",
    components: {svgIcon},
    props: {
      instance: Function,
      dict: Object,
      permissions: Function,
      listType: String,
    },
    data() {
      return {
        search: {
          param:"",
          current: 1,
          size: 10,
        },
        tableData: [],
        total: 0
      }
    },
    methods: {
      icon(icon) {
        if(icon==0){
          return "iconsp_ing"
        }else if(icon==1){
          return "iconsp-pass"
        }else if(icon==2){
          return "iconsp_refused"
        }
        return "iconcancel"
      },

      goTo(key = '', row) {
        this.$emit('goPage', {key, row});
      },

      reset() {
        this.search.param = ""
        this.search.current = 1
        this.search.size = 10
        this.getList()
      },

      handleCurrent(val) {
        this.search.current = val;
        this.getList();
      },

      handleSizeChange(val) {
        this.search.size = val;
        this.getList();
      },

      getList() {
        this.instance.post(`/app/approv-alapply-info/list`,null,{
          params:{
            listType: this.listType,
            ...this.search
          }
        }).then(res => {
          if (res && res.data) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      }
    },

    filters:{
      format(time){
        return time ? day(time).format('YYYY-MM-DD HH:mm') : '-'
      }
    },

    created(){
      this.dict.load(['hbDepartment']).then(()=>{
        this.getList()
      })
    },
  }
</script>

<style lang="scss" scoped>
  .for-my-approval {
    height: 100%;
    background: #f3f6f9;
    overflow: auto;

    .list-wrap {
      width: 100%;
      min-height: 100%;

      li {
        width: 100%;
        height: 80px;
        border-radius: 4px;
        border: 1px solid #D8E0E8;
        margin-bottom: 8px;
        box-sizing: border-box;
        padding: 16px 32px;
        user-select: none;
        cursor: pointer;
        position: relative;

        .list-title {
          font-size: 16px;
          font-weight: 600;
          color: #333333;
          padding-bottom: 6px;
        }

        .info {
          width: 90%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .item {
            width: 30%;
            & > label {
              color: #666666;
            }

            & > span {
              color: #333333;
            }
          }

        }

        .svg {
          width: 66px;
          height: 61px;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }

    .no-data {
      background-size: 120px 120px;
      height: 160px;
      margin: 48px auto 10px;
    }

    .pagination {
      box-sizing: border-box;
      padding: 24px 0 32px 0;
    }

    .iconfont {
      user-select: none;
      cursor: pointer;
    }

    ::v-deep .AiSearchBar {
      margin-bottom: 16px;
    }
  }
</style>