|
@@ -1,30 +1,384 @@
|
|
|
<template>
|
|
|
- <div class="app-container home">
|
|
|
- <!-- <byTableDemo></byTableDemo> -->
|
|
|
- <!-- <el-input type="number" v-model='aaa' v-mousewheel></el-input> -->
|
|
|
-
|
|
|
- </div>
|
|
|
+ <div class="app-container home">
|
|
|
+ <div class="stat-warp">
|
|
|
+ <ul>
|
|
|
+ <li class="theme1">
|
|
|
+ <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">
|
|
|
+ <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">3</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">
|
|
|
+ <div class="commons-title">我的待审批</div>
|
|
|
+ <el-table :data="toBeProcessedData.rows" style="width: 100%">
|
|
|
+ <el-table-column prop="flowName" label="流程类型" />
|
|
|
+ <el-table-column prop="title" label="流程标题" />
|
|
|
+ <el-table-column prop="createUserName" label="发起人" />
|
|
|
+ <el-table-column prop="createTime" label="发起时间" />
|
|
|
+ <el-table-column fixed="right" label="操作" width="120">
|
|
|
+ <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">
|
|
|
+ <div class="commons-title">业务提醒</div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="commons-title">我的发起(未结束)</div>
|
|
|
+ <el-table :data="haveInitiatedData.rows" style="width: 100%">
|
|
|
+ <el-table-column prop="flowName" label="流程类型" />
|
|
|
+ <el-table-column prop="title" label="流程标题" />
|
|
|
+ <el-table-column prop="createUserName" label="审批人" />
|
|
|
+ <el-table-column prop="createTime" label="发起时间" />
|
|
|
+ <el-table-column fixed="right" label="操作" width="120">
|
|
|
+ <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">
|
|
|
+ <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 } from 'vue'
|
|
|
-import byTableDemo from '../components/byTable/demo'
|
|
|
-import html2canvas from 'html2canvas'
|
|
|
-import JsPDF from 'jspdf'
|
|
|
+import { createApp, onMounted, ref } from "vue";
|
|
|
+import byTableDemo from "../components/byTable/demo";
|
|
|
+import html2canvas from "html2canvas";
|
|
|
+import JsPDF from "jspdf";
|
|
|
|
|
|
-const aaa = ref(1)
|
|
|
+const aaa = ref(1);
|
|
|
function goTarget(url) {
|
|
|
- window.open(url, '__blank')
|
|
|
+ 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) => {
|
|
|
+ // 0 , 1待处理
|
|
|
+ if (row.status != 1 && row.status != 0) {
|
|
|
+ proxy.$router.push({
|
|
|
+ path: "/platform_manage/process/processApproval",
|
|
|
+ query: {
|
|
|
+ flowKey: row.flowKey,
|
|
|
+ id: row.id,
|
|
|
+ businessId: row.businessId,
|
|
|
+ processType: 20,
|
|
|
+ version: row.version,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ 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,
|
|
|
+ businessId: row.businessId,
|
|
|
+ processType: nodeType < 3 ? 10 : 20,
|
|
|
+ version: row.version,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const getData = () => {
|
|
|
+ proxy
|
|
|
+ .post("flowExample/getToBeProcessedPage", {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 4,
|
|
|
+ status: "1",
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ toBeProcessedData.value = res;
|
|
|
+ });
|
|
|
+ proxy
|
|
|
+ .post("flowExample/getHaveInitiatedPage", {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 4,
|
|
|
+ status: "1",
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ haveInitiatedData.value = res;
|
|
|
+ });
|
|
|
+ proxy
|
|
|
+ .post("sendMeg/page", {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 3,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ sendMegData.value = res;
|
|
|
+ });
|
|
|
+};
|
|
|
+getData();
|
|
|
//
|
|
|
-onMounted(() => {
|
|
|
-
|
|
|
-})
|
|
|
+onMounted(() => {});
|
|
|
</script>
|
|
|
<style>
|
|
|
+.table-warp .el-table .cell {
|
|
|
+ line-height: 24px !important;
|
|
|
+}
|
|
|
</style>
|
|
|
<style scoped lang="scss">
|
|
|
-.home {
|
|
|
+.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 {
|
|
|
+ width: calc(50% - 10px);
|
|
|
+ height: calc(50% - 10px);
|
|
|
+ background: #fff;
|
|
|
+ float: left;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 20px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ .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>
|
|
|
|