erp_ehsd/src/views/index.vue

<template>
  <div class="app-container home">
    <div class="stat-warp">
      <ul>
        <li class="theme1" @click="toUrl('Backlog', 1)">
          <div class="num">{{ toBeProcessedData.total }}</div>
          <div class="label">我的待审批</div>
          <div class="icon-box">
            <i class="icon iconfont icon-iconm_waixht"></i>
          </div>
        </li>
        <li class="theme2" @click="toUrl('DealWith', 2)">
          <div class="num">{{ haveInitiatedData.total }}</div>
          <div class="label">我的发起（未结束）</div>
          <div class="icon-box">
            <i class="icon iconfont icon-iconm_wofqd"></i>
          </div>
        </li>
        <li class="theme3">
          <div class="num">{{ pushInfo.total }}</div>
          <div class="label">未读消息</div>
          <div class="icon-box">
            <i class="icon iconfont icon-iconm_unread"></i>
          </div>
        </li>
      </ul>
    </div>
    <div class="table-warp">
      <div class="card odd">
        <div class="commons-title">我的待审批</div>
        <el-table :data="toBeProcessedData.rows" style="width: 100%">
          <el-table-column prop="flowName" label="流程类型" width="100" />
          <el-table-column prop="title" label="流程标题" />
          <el-table-column prop="createUserName" label="发起人" width="100" />
          <el-table-column prop="createTime" label="发起时间" width="155" />
          <el-table-column fixed="right" label="操作" width="60">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="pushProcessApproval(scope.row)"
              >
                审批
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="card even">
        <div class="commons-title">业务提醒</div>
      </div>
      <div class="card odd">
        <div class="commons-title">我的发起（未结束）</div>
        <el-table :data="haveInitiatedData.rows" style="width: 100%">
          <el-table-column prop="flowName" label="流程类型" width="100" />
          <el-table-column prop="title" label="流程标题" />
          <el-table-column prop="createUserName" label="审批人" width="100" />
          <el-table-column prop="createTime" label="发起时间" width="155" />
          <el-table-column fixed="right" label="操作" width="60">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="pushProcessApprovalOne(scope.row)"
              >
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="card even">
        <div class="commons-title">系统公告</div>
        <ul class="announcement">
          <li v-for="i in sendMegData.rows" :key="i.id">
            <div class="time">{{ i.createTime }} <span>系统公告</span></div>
            <div class="content">{{ i.content }}</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- <byTableDemo></byTableDemo> -->
    <!-- <el-input type="number" v-model='aaa' v-mousewheel></el-input> -->
    <!-- 111112132131211 -->
  </div>
</template>

<script setup name="Index">
import { createApp, onMounted, ref } from "vue";
import byTableDemo from "../components/byTable/demo";
import html2canvas from "html2canvas";
import JsPDF from "jspdf";

const aaa = ref(1);
function goTarget(url) {
  window.open(url, "__blank");
}
let toBeProcessedData = ref({
  total: 0,
  rows: [],
});
let haveInitiatedData = ref({
  total: 0,
  rows: [],
});
const sendMegData = ref({
  total: 0,
  rows: [],
});
const pushProcessApproval = (row) => {
  if (row.status != 1 && row.status != 0) {
    proxy.$router.push({
      path: "/platform_manage/process/processApproval",
      query: {
        flowKey: row.flowKey,
        id: row.id,
        processType: 20,
        version: row.version,
        businessId: row.businessId,
        submitType: "10",
      },
    });
    return;
  }
  proxy.post("flowExample/getApprovalRecord", { id: row.id }).then((res) => {
    if (res.recordList.length > 0) {
      let data = res.recordList.filter((item) => item.status === 2);
      let nodeType = 0;
      if (data && data.length > 0) {
        nodeType = data[0].nodeType;
      }
      proxy.$router.push({
        path: "/platform_manage/process/processApproval",
        query: {
          flowKey: row.flowKey,
          id: row.id,
          processType: nodeType == 1 ? 30 : 10,
          version: row.version,
          businessId: row.businessId,
          submitType: "10",
        },
      });
    }
  });
};

const pushProcessApprovalOne = (row) => {
  proxy.$router.push({
    path: "/platform_manage/process/processApproval",
    query: {
      flowKey: row.flowKey,
      id: row.id,
      processType: 20,
      version: row.version,
      businessId: row.businessId,
      submitType: "10",
    },
  });
  return;
};
const { proxy } = getCurrentInstance();
const pushInfo = ref({
  total: 0,
  rows: [],
});
const getData = () => {
  proxy
    .post("/flowExample/getToBeProcessedPage", {
      pageNum: 1,
      pageSize: 4,
    })
    .then((res) => {
      toBeProcessedData.value = res;
    });
  proxy
    .post("/flowExample/getHaveInitiatedPage", {
      pageNum: 1,
      pageSize: 4,
      status: "1",
    })
    .then((res) => {
      haveInitiatedData.value = res;
    });
  proxy
    .post("pushAnnouncement/page", {
      pageNum: 1,
      pageSize: 3,
    })
    .then((res) => {
      sendMegData.value = res;
    });

  proxy
    .post("pushInfo/page", {
      pageNum: 1,
      pageSize: 3,
      pushRead: 0,
    })
    .then((res) => {
      pushInfo.value = res;
    });
};
const toUrl = (name, type) => {
  //获取name为name的路由的基础信息
  // const route = proxy.$router.resolve({ name: name, params: {} });
  if (type === 1) {
    proxy.$router.push({
      name,
      query: {},
    });
  } else if (type === 2) {
    proxy.$router.push({
      name,
      query: {
        type: 1,
      },
    });
  }
};
getData();
// ​
onMounted(() => {});
</script>
<style>
.table-warp .el-table .cell {
  line-height: 24px !important;
}
</style>
<style scoped lang="scss">
.app-container {
  height: 100%;
  .announcement {
    padding: 0;
    margin: 0;
    li {
      list-style: none;
      border-radius: 2px;
      padding: 14px 20px;
      background: #eeeeee;
      margin-bottom: 10px;
      font-size: 14px;
      cursor: pointer;
      .time {
        color: #999;
      }
      .content {
        margin-top: 10px;
        color: #333;
      }
    }
    li:hover {
      background: #eff6ff;
    }
  }
  .table-warp {
    //页面全屏，占据剩下的位置
    height: calc(100% - 157px);
    border-radius: 5px;

    .card {
      height: calc(50% - 10px);
      background: #fff;
      float: left;
      border-radius: 5px;
      padding: 20px;
      overflow-y: auto;
    }
    .odd {
      width: calc(66.5% - 10px);
    }
    .even {
      margin-left: 20px;
      width: calc(33.5% - 10px);
    }
    // .card:nth-child(2n + 1) {
    //   margin-right: 20px;
    // }
    .card:nth-child(1) {
      margin-bottom: 20px;
    }
    .card:nth-child(2) {
      margin-bottom: 20px;
    }
  }
  .stat-warp {
    margin-bottom: 20px;
    background: #fff;
    padding: 20px;
    overflow: hidden;
    position: relative;
    border-radius: 5px;

    .title {
      height: 60px;
      select {
        height: 60px;
        border: none;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        font-size: 14px;
        font-weight: bold;
        background: url("@/assets/images/sanjiao.png") no-repeat right center;
        padding-right: 20px;
      }
      div {
        height: 60px;
        font-size: 14px;
        font-weight: bold;
        line-height: 60px;
      }
    }
    ul {
      padding: 0;
      overflow: hidden;
      margin: 0;
      li {
        list-style: none;
        min-width: 285px;
        box-sizing: border-box;
        margin-right: 20px;
        background: linear-gradient(360deg, #c7e3fe 0%, #dfecff 100%);
        float: left;
        overflow: hidden;
        padding: 20px;
        color: #333333;
        position: relative;
        border-radius: 10px;
        cursor: pointer;
        .label {
          font-size: 14px;
          margin-top: 10px;
        }
        .label::before {
          // width: 10px;
          // height: 10px;
          // content: '';
          // border-radius: 50%;
          // background: #0084ff;
          // display: inline-block;
          // margin-right: 10px;
        }
        .num {
          font-size: 24px;
          font-weight: bold;
        }
        .icon-box {
          position: absolute;
          height: 40px;
          width: 40px;
          right: 20px;
          top: 20px;
          background: #fff;
          border-radius: 10px;
          text-align: center;
          line-height: 40px;
          i {
            font-size: 20px;
            color: #0084ff;
          }
        }
      }
      //#F5F3FF #9E64ED
      .theme2 {
        background: linear-gradient(180deg, #eae8fb 0%, #ded9ff 100%);
        .label::before {
          background: #7566f0;
        }
        .icon-box i {
          color: #7566f0;
        }
      }
      //#FFF1E1 #FF9315
      .theme3 {
        background: #fff1e1;
        .label::before {
          background: #ff9315;
        }
        .icon-box i {
          color: #ff9315;
        }
      }
      //#E2FBE8 #39C55A
      .theme4 {
        background: #e2fbe8;
        .label::before {
          background: #39c55a;
        }
      }
      .theme5 {
        background: #ffebe9;
        .label::before {
          background: #f94539;
        }
      }
      .theme6 {
        background: #e4f9f9;
        .label::before {
          background: #53cbcb;
        }
      }
      .multi-data {
        .label::before {
          display: none;
        }
        .label {
          font-size: 14px;
          font-weight: bold;
          color: #333;
          margin-bottom: 8px;
        }
        .num-warp {
          overflow: hidden;
          .num-box {
            float: left;
            min-width: 80px;
            margin-right: 20px;
            .num-small {
              font-size: 16px;
              font-weight: bold;
              margin-bottom: 8px;
            }
            .label-small {
              color: #666;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>